/* ==========================================================================
   Global Theme — main stylesheet
   All colours/sizes below reference CSS variables that are generated by the
   colour-scheme generator (inc/color-scheme-generator.php, output inline by
   inc/enqueue.php). The :root block here only provides safe fallback values.
   ========================================================================== */

:root {
	--color-primary: #d4af37;
	--color-primary-hover: #e8c34f;
	--color-primary-rgb: 212 175 55;
	--color-primary-hover-rgb: 232 195 79;
	--color-secondary: #37a9d4;
	--color-secondary-hover: #4fc0e8;
	--color-bg: #12100a;
	--color-bg-alt: #1b180f;
	--color-surface: #221e13;
	--color-text: #f3efe3;
	--color-text-muted: #b8b2a0;
	--color-border: #3a3524;
	--color-success: #2fbf6e;
	--color-danger: #e5484d;
	--color-warning: #f2b84b;
	--color-on-primary: #14141a;
	--color-on-secondary: #14141a;
	--container-width: 1200px;
	--logo-w: 160px;
	--logo-h: 50px;

	/* Derived support colours (real values printed by inc/enqueue.php). */
	--color-border-table: #15120a;
	--color-header-bg: #221e13;
	--color-header-bg-alt: #1b180f;
	--color-header-text: #f3efe3;
	--color-header-text-muted: #b8b2a0;
	--color-header-border: #3a3524;

	--gt-radius: 14px;
	--gt-radius-sm: 8px;
	/* Global button rounding — set from the theme options (inc/enqueue.php
	   prints the live value). Round icon-only controls (back-to-top, slider
	   arrows, the floating bonus pill) intentionally keep their own shape. */
	--gt-btn-radius: 8px;
	--gt-shadow: 0 10px 30px rgba(0, 0, 0, .25);
	--gt-transition: .2s ease;
	--gt-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--gt-font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--gt-font-serif: Georgia, "Times New Roman", "Noto Serif", serif;
	--gt-font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, "Courier New", monospace;
	--gt-body-font-size: 16.5px;
	--gt-body-line-height: 1.9;

	/* Overridable per typography variant. */
	--gt-table-radius: var(--gt-radius-sm);
	--gt-img-radius: var(--gt-radius);
}

/*
 * Header, ticker, mobile panel and footer always keep the dark zone colours
 * (on light schemes inc/enqueue.php generates dark header values from the
 * same hue). Remapping the local custom properties lets every nested
 * component (menus, pills, buttons) restyle itself automatically.
 */
.gt-header, .gt-mobile-panel, .gt-ticker-wrap, .gt-footer {
	--color-surface: var(--color-header-bg);
	--color-bg-alt: var(--color-header-bg-alt);
	--color-text: var(--color-header-text);
	--color-text-muted: var(--color-header-text-muted);
	--color-border: var(--color-header-border);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	/*
	 * !important here (and on every other font-family/size/line-height
	 * rule below) is deliberate: the custom property itself already wins
	 * reliably via gt_output_dynamic_css_vars(), but the *property
	 * declaration that consumes it* still had normal priority, so any
	 * plugin/page-builder/pasted-content CSS setting font-family directly
	 * on body/headings (rather than via our variable) could silently win
	 * and make the font picker look like it "does nothing". Forcing our
	 * side of the cascade removes that whole failure class.
	 */
	font-family: var(--gt-font) !important;
	background: var(--color-bg);
	color: var(--color-text);
	line-height: var(--gt-body-line-height, 1.9) !important;
	font-size: var(--gt-body-font-size, 16.5px) !important;
	-webkit-font-smoothing: antialiased;
}
/*
 * These bare-tag resets are wrapped in a low-priority cascade layer on
 * purpose: any *unlayered* CSS (e.g. a third-party plugin's own
 * stylesheet, such as PG Image Grids Plus's .pgibp-* markup) targeting
 * the same element/property automatically wins over anything in a named
 * layer, regardless of specificity. That lets self-contained plugin
 * widgets fully own their own look, while every other bare img/a/button
 * on the site (which has no competing unlayered rule) is completely
 * unaffected and keeps this exact styling.
 */
@layer gt-base-reset {
	img { max-width: 100%; height: auto; display: block; }
	a { color: var(--color-primary); text-decoration: none; transition: color var(--gt-transition); }
	a:hover { color: var(--color-primary-hover); }
	button { font-family: inherit; }
}

.gt-container {
	width: 100%;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 20px;
}
/* Opt-in modifier ("Хедер на всю ширину" etc.): same gutters, no max-width. */
.gt-container.gt-container-full { max-width: none; }
/* A container inside another container must not add a second gutter
   (page wrap + builder row "контейнер", or boxed header shortcode + row). */
.gt-container .gt-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

@media (max-width: 768px) {
	/* %-based --container-width (90% etc.) is a desktop choice; on a phone
	   it leaves huge purple side bands. Fill the screen, keep a small gutter. */
	.gt-container {
		max-width: none;
		padding: 0 10px;
	}
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.gt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 11px 22px;
	border-radius: var(--gt-btn-radius, var(--gt-radius-sm));
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform var(--gt-transition), box-shadow var(--gt-transition), background var(--gt-transition), color var(--gt-transition), border-color var(--gt-transition);
	white-space: nowrap;
}
.gt-btn:hover { transform: translateY(-2px); }
.gt-btn-primary {
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
	color: var(--color-on-primary);
	box-shadow: 0 6px 18px color-mix(in srgb, var(--color-primary) 45%, transparent);
}
.gt-btn-primary:hover { box-shadow: 0 10px 24px color-mix(in srgb, var(--color-primary) 55%, transparent); color: var(--color-on-primary); }
.gt-btn-outline {
	background: transparent;
	border-color: var(--color-border);
	color: var(--color-text);
}
.gt-btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }
.gt-btn-block { flex: 1 1 0; width: 100%; }

/* ==========================================================================
   Content CTA row — any <p class="cta"> (or .cta) with links becomes a
   conversion button group. Colours come 100% from the generated scheme
   (--color-primary / --color-secondary / on-*), so regenerating a palette
   restyles every CTA automatically.
   ========================================================================== */
.cta,
p.cta,
.gt-article-content .cta,
.gt-article-content p.cta {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: 12px;
	margin: 1.6em 0 1.8em;
	padding: 0;
}

.cta > a,
p.cta > a,
.gt-article-content .cta > a,
.gt-article-content p.cta > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 160px;
	min-width: 140px;
	max-width: 100%;
	padding: 14px 22px;
	border-radius: var(--gt-btn-radius, var(--gt-radius-sm));
	border: 2px solid transparent;
	font-family: var(--gt-font-heading, var(--gt-font));
	font-weight: 800;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none !important;
	text-align: center;
	cursor: pointer;
	transition: transform var(--gt-transition), box-shadow var(--gt-transition), background var(--gt-transition), color var(--gt-transition), border-color var(--gt-transition), filter var(--gt-transition);
	/* Default (1st, 4th, …): primary conversion button */
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
	color: var(--color-on-primary) !important;
	box-shadow: 0 8px 20px color-mix(in srgb, var(--color-primary) 42%, transparent);
}

.cta > a:hover,
.cta > a:focus-visible,
p.cta > a:hover,
p.cta > a:focus-visible,
.gt-article-content .cta > a:hover,
.gt-article-content .cta > a:focus-visible,
.gt-article-content p.cta > a:hover,
.gt-article-content p.cta > a:focus-visible {
	transform: translateY(-2px);
	filter: brightness(1.06);
	color: var(--color-on-primary) !important;
	box-shadow: 0 12px 28px color-mix(in srgb, var(--color-primary) 55%, transparent);
	outline: none;
}

/* 2nd, 5th, … — secondary accent button */
.cta > a:nth-child(3n+2),
p.cta > a:nth-child(3n+2),
.gt-article-content .cta > a:nth-child(3n+2),
.gt-article-content p.cta > a:nth-child(3n+2) {
	background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-hover));
	color: var(--color-on-secondary) !important;
	box-shadow: 0 8px 20px color-mix(in srgb, var(--color-secondary) 42%, transparent);
}
.cta > a:nth-child(3n+2):hover,
.cta > a:nth-child(3n+2):focus-visible,
p.cta > a:nth-child(3n+2):hover,
p.cta > a:nth-child(3n+2):focus-visible,
.gt-article-content .cta > a:nth-child(3n+2):hover,
.gt-article-content .cta > a:nth-child(3n+2):focus-visible,
.gt-article-content p.cta > a:nth-child(3n+2):hover,
.gt-article-content p.cta > a:nth-child(3n+2):focus-visible {
	color: var(--color-on-secondary) !important;
	box-shadow: 0 12px 28px color-mix(in srgb, var(--color-secondary) 55%, transparent);
}

/* 3rd, 6th, … — outline / ghost so a 3-button row has clear hierarchy */
.cta > a:nth-child(3n),
p.cta > a:nth-child(3n),
.gt-article-content .cta > a:nth-child(3n),
.gt-article-content p.cta > a:nth-child(3n) {
	background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
	color: var(--color-primary) !important;
	border-color: var(--color-primary);
	box-shadow: none;
}
.cta > a:nth-child(3n):hover,
.cta > a:nth-child(3n):focus-visible,
p.cta > a:nth-child(3n):hover,
p.cta > a:nth-child(3n):focus-visible,
.gt-article-content .cta > a:nth-child(3n):hover,
.gt-article-content .cta > a:nth-child(3n):focus-visible,
.gt-article-content p.cta > a:nth-child(3n):hover,
.gt-article-content p.cta > a:nth-child(3n):focus-visible {
	background: var(--color-primary);
	color: var(--color-on-primary) !important;
	box-shadow: 0 10px 24px color-mix(in srgb, var(--color-primary) 45%, transparent);
}

@media (max-width: 560px) {
	.cta,
	p.cta,
	.gt-article-content .cta,
	.gt-article-content p.cta {
		flex-direction: column;
		gap: 10px;
	}
	.cta > a,
	p.cta > a,
	.gt-article-content .cta > a,
	.gt-article-content p.cta > a {
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
	}
}

/* ==========================================================================
   Header
   ========================================================================== */
.gt-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
}
.gt-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
}
.gt-header-logo { display: inline-flex; align-items: center; }
.gt-header-right {
	display: flex;
	align-items: center;
	flex: 1;
	gap: 16px;
	min-width: 0;
}
.gt-logo { display: inline-flex; align-items: center; }
.gt-logo-img { width: var(--logo-w); height: var(--logo-h); object-fit: contain; }
.gt-logo-text { font-family: var(--gt-font-heading, var(--gt-font)) !important; font-size: 22px; font-weight: 800; color: var(--color-text); letter-spacing: .5px; }
.gt-logo-customizer .custom-logo-link { display: inline-flex; align-items: center; }
.gt-logo-customizer img.custom-logo { width: var(--logo-w); height: var(--logo-h); object-fit: contain; }
/*
 * «Показывать на мобильном» — same breakpoint as the mobile header layout
 * (max-width: 992px). Using 901px previously hid the logo in the common
 * 901–992px DevTools / tablet range where the burger UI is already active.
 */
@media (min-width: 993px) {
	.gt-header-logo--mobile-only { display: none !important; }

	/* Logo lives in the side panel while expanded; when the panel collapses,
	   reveal it in the header — left of the site menu. */
	body.gt-has-side-panel:not(.gt-side-panel-collapsed) .gt-header-logo--panel-sync {
		display: none !important;
	}
	body.gt-side-panel-collapsed .gt-header-logo--panel-sync,
	body.gt-side-panel-collapsed .gt-header-logo--mobile-only {
		display: inline-flex !important;
	}
}
@media (max-width: 992px) {
	.gt-header-logo--mobile-only,
	.gt-header-logo--panel-sync {
		display: inline-flex !important;
	}
	.gt-header .gt-logo-img,
	.gt-header .gt-logo-customizer img.custom-logo {
		width: var(--logo-w-m, var(--logo-w));
		height: var(--logo-h-m, var(--logo-h));
	}
}

.gt-nav { flex: 1; display: flex; justify-content: var(--gt-header-nav-justify, center); }

@media (min-width: 993px) {
	.gt-header--logo-center .gt-header-row-main {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		gap: 16px;
	}
	.gt-header--logo-center .gt-header-right {
		display: contents;
	}
	.gt-header--logo-center .gt-header-logo {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
	}
	.gt-header--logo-center .gt-nav {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		flex: none;
		justify-content: flex-start;
	}
	.gt-header--logo-center .gt-header-actions {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
	}
}
.gt-menu, .gt-mobile-menu {
	display: flex;
	align-items: center;
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.gt-mobile-menu { flex-direction: column; align-items: flex-start; gap: 4px; }
.gt-menu li, .gt-mobile-menu li { position: relative; }
.gt-menu > li > a, .gt-mobile-menu > li > a {
	display: block;
	color: var(--color-text);
	font-weight: 600;
	font-size: 15px;
	padding: 8px 2px;
}
.gt-mobile-menu > li > a { padding: 12px 6px; width: 100%; }
.gt-menu li:hover > a, .gt-mobile-menu li:hover > a { color: var(--color-primary); }
.gt-menu ul.sub-menu, .gt-mobile-menu ul.sub-menu {
	list-style: none;
	margin: 0;
	padding-left: 14px;
}
.gt-menu ul.sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--gt-radius-sm);
	padding: 8px;
	box-shadow: var(--gt-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--gt-transition), transform var(--gt-transition), visibility var(--gt-transition);
}
.gt-menu li:hover > ul.sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.gt-header-actions { display: flex; align-items: center; gap: 14px; }

.gt-online-counter {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--color-text-muted);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	padding: 6px 12px;
	white-space: nowrap;
}
.gt-online-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-success);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success) 60%, transparent);
	animation: gt-pulse-dot 2s infinite;
}
.gt-online-count { color: var(--color-text); font-weight: 700; }

.gt-lang-flag { display: inline-flex; align-items: center; line-height: 1; }
.gt-flag-svg {
	display: block;
	border-radius: 3px;
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-text) 18%, transparent);
}

.gt-burger {
	display: none;
	width: 34px;
	height: 34px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
}
.gt-burger span {
	display: block;
	height: 2px;
	width: 24px;
	background: var(--color-text);
	border-radius: 2px;
	transition: transform var(--gt-transition), opacity var(--gt-transition);
}
.gt-burger.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.gt-burger.is-active span:nth-child(2) { opacity: 0; }
.gt-burger.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.gt-header-row-mobile-auth { display: none; gap: 10px; padding-top: 0; padding-bottom: 14px; }

.gt-mobile-panel {
	display: none;
	max-height: 0;
	overflow: hidden;
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	transition: max-height .3s ease;
}
.gt-mobile-panel.is-open { max-height: 80vh; overflow-y: auto; }
.gt-mobile-panel-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px;
	border-bottom: 1px solid var(--color-border);
}
.gt-mobile-panel nav { padding: 10px 20px 20px; }

/* ==========================================================================
   Ticker (winnings marquee)
   ========================================================================== */
.gt-ticker-wrap {
	background: var(--color-bg-alt);
	border-bottom: 1px solid var(--color-border);
	overflow: hidden;
	white-space: nowrap;
	padding: 9px 0;
}
.gt-ticker {
	display: inline-flex;
	gap: 40px;
	animation: gt-marquee 40s linear infinite;
	will-change: transform;
}
.gt-ticker-wrap:hover .gt-ticker { animation-play-state: paused; }
.gt-ticker-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--color-text-muted);
	white-space: nowrap;
}
.gt-ticker-item strong { color: var(--color-text); }
.gt-ticker-item .gt-ticker-amount { color: var(--color-success); font-weight: 700; }
.gt-ticker-item .gt-ticker-icon { font-size: 15px; }

@keyframes gt-marquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* ==========================================================================
   Header shortcode block (igp_1)
   ========================================================================== */
.gt-header-shortcode-boxed { background: var(--color-bg-alt); padding: 18px 0; }
.gt-header-shortcode-full { background: var(--color-bg-alt); padding: 18px 20px; }
.gt-header-shortcode-boxed:empty, .gt-header-shortcode-full:empty { display: none; padding: 0; }
.gt-sc-stack { display: flex; flex-direction: column; gap: 12px; }
.gt-gap {
	display: block;
	width: 100%;
	pointer-events: none;
}
/* Flex gap of the stack would add 12px on each side of the spacer;
   pull it back so [gap=10,20] is exactly those paddings. */
.gt-sc-stack > .gt-gap { margin-top: -12px; margin-bottom: -12px; }
@media (max-width: 768px) {
	.gt-header-shortcode-full { padding: 12px 10px; }
	.gt-header-shortcode-boxed { padding: 12px 0; }
	.gt-header-shortcode-boxed .gt-container,
	.gt-header-shortcode-full {
		max-width: none;
	}
	.gt-header-shortcode-boxed .gt-container > *,
	.gt-header-shortcode-full > * {
		max-width: 100% !important;
	}
}

/* Shortcode slot at the top of the content column: same width as the
   article, above its title, with a configurable gap under it. */
.gt-content-top-shortcode {
	margin-bottom: var(--gt-cts-gap, 24px);
}
.gt-content-top-shortcode:empty { display: none; margin: 0; }
.gt-content-top-shortcode > *:last-child { margin-bottom: 0; }

/* ==========================================================================
   Content area / typography
   ========================================================================== */
.gt-main { background: var(--color-bg); min-height: 40vh; }
/* Vertical padding of the content area is configurable (inc/enqueue.php
   prints the px values); the factors below keep whatever the admin picks
   proportional on smaller screens instead of eating half a phone. */
.gt-content-container {
	padding-top: var(--gt-content-pad-t, 34px);
	padding-bottom: var(--gt-content-pad-b, 50px);
}
@media (max-width: 900px) {
	.gt-content-container {
		padding-top: calc(var(--gt-content-pad-t, 34px) * .75);
		padding-bottom: calc(var(--gt-content-pad-b, 50px) * .75);
	}
}
@media (max-width: 600px) {
	.gt-content-container {
		padding-top: calc(var(--gt-content-pad-t, 34px) * .55);
		padding-bottom: calc(var(--gt-content-pad-b, 50px) * .55);
	}
}

/*
 * Option "контент в контейнере": the article gets its own card colour +
 * fully configurable radius/border/shadow (inc/enqueue.php prints the real
 * --gt-card-* values; the var() fallbacks here just reproduce the theme's
 * original hardcoded look if that dynamic block is ever missing). Uses a
 * descendant (not direct-child) selector so it still applies once sidebars
 * are active and .gt-article ends up nested one level deeper, inside
 * .gt-main-col.
 */
body.gt-content-boxed .gt-content-container .gt-article:not(.gt-article-teaser) {
	background: var(--color-card, var(--color-surface));
	border: var(--gt-card-border-width, 1px) solid var(--gt-card-border-color, var(--color-border));
	border-radius: var(--gt-card-radius, var(--gt-radius));
	padding: clamp(20px, 4vw, 44px);
	box-shadow: var(--gt-card-shadow, var(--gt-shadow));
}
body.gt-content-boxed .gt-content-container .gt-article:not(.gt-article-teaser) .gt-h1 { margin-top: 0; }

/* ==========================================================================
   Optional 2/3-column layout (sidebars) — see inc/sidebars.php. Absent
   entirely (no wrapper printed) unless at least one sidebar is active, so
   plain single-column pages are byte-for-byte unaffected.
   ========================================================================== */
.gt-layout {
	display: grid;
	gap: 40px;
	align-items: start;
}
/*
 * Two width models, chosen in the settings (see gt_layout_start):
 * by default the SIDEBARS are the fixed column and the article takes the
 * rest; with `.is-fixed-main` it is the other way round. In both models the
 * fixed column is wrapped in min() with a percentage of the container, so
 * narrowing the screen shrinks it smoothly (and the flexible column never
 * collapses) instead of needing a hardcoded width per breakpoint.
 */
.gt-layout--left { grid-template-columns: var(--gt-side-col) minmax(0, 1fr); }
.gt-layout--right { grid-template-columns: minmax(0, 1fr) var(--gt-side-col); }
.gt-layout--both { grid-template-columns: var(--gt-side-col) minmax(0, 1fr) var(--gt-side-col); }
.gt-layout--left, .gt-layout--right { --gt-side-col: min(var(--gt-sidebar-width, 300px), 32%); }
.gt-layout--both { --gt-side-col: min(var(--gt-sidebar-width, 300px), 25%); }

.gt-layout.is-fixed-main.gt-layout--left { grid-template-columns: minmax(0, 1fr) var(--gt-main-col); }
.gt-layout.is-fixed-main.gt-layout--right { grid-template-columns: var(--gt-main-col) minmax(0, 1fr); }
.gt-layout.is-fixed-main.gt-layout--both { grid-template-columns: minmax(0, 1fr) var(--gt-main-col) minmax(0, 1fr); }
.gt-layout.is-fixed-main.gt-layout--left, .gt-layout.is-fixed-main.gt-layout--right { --gt-main-col: min(var(--gt-maincol-width, 800px), 74%); }
.gt-layout.is-fixed-main.gt-layout--both { --gt-main-col: min(var(--gt-maincol-width, 800px), 60%); }

.gt-layout .gt-main-col { min-width: 0; }

.gt-sidebar {
	min-width: 0;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--gt-radius);
	padding: 22px;
	position: sticky;
	/* --gt-header-height is measured live (assets/js/main.js) from the
	   actual sticky header, so this never sits under/behind it regardless
	   of logo size or menu wrapping; 90px is just the pre-JS fallback. */
	top: calc(var(--gt-header-height, 90px) + 20px);
}
.gt-sidebar > *:last-child { margin-bottom: 0; }

/* The columns themselves already shrink via the min() caps above; below
   this width only the gutter needs to give way. */
@media (max-width: 1100px) {
	.gt-layout { gap: 26px; }
}

@media (max-width: 900px) {
	.gt-layout, .gt-layout--left, .gt-layout--right, .gt-layout--both,
	.gt-layout.is-fixed-main.gt-layout--left,
	.gt-layout.is-fixed-main.gt-layout--right,
	.gt-layout.is-fixed-main.gt-layout--both {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.gt-layout .gt-main-col { order: 1; }
	.gt-layout .gt-sidebar { order: 2; position: static; }
}

.gt-h1 {
	font-family: var(--gt-font-heading, var(--gt-font)) !important;
	font-size: clamp(26px, 4vw, 40px);
	font-weight: 800;
	color: var(--color-text);
	margin: 0 0 24px;
	line-height: 1.25;
}

.gt-article { margin-bottom: 10px; }
.gt-article-teaser {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--gt-radius);
	padding: 20px;
	margin-bottom: 18px;
}
.gt-teaser-title {
	display: block;
	font-size: 19px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 8px;
}
.gt-teaser-title:hover { color: var(--color-primary); }

.gt-article-content { color: var(--color-text); }
.gt-article-content > *:first-child { margin-top: 0; }

.gt-article-content h2,
.gt-article-content h3,
.gt-article-content h4,
.gt-article-content h5,
.gt-article-content h6 {
	font-family: var(--gt-font-heading, var(--gt-font)) !important;
	color: var(--color-text);
	font-weight: 700;
	line-height: 1.3;
	margin: 1.6em 0 .7em;
}
.gt-article-content h2 { font-size: 28px; }
.gt-article-content h3 { font-size: 23px; }
.gt-article-content h4 { font-size: 19px; }
.gt-article-content h5 { font-size: 16px; }
.gt-article-content h6 { font-size: 14px; text-transform: uppercase; letter-spacing: .05em; }

.gt-article-content p { margin: 0 0 1.2em; color: var(--color-text); }
.gt-article-content strong { color: var(--color-text); }
/* Layered for the same reason as the base a/img/button reset above — see that comment. */
@layer gt-base-reset {
	.gt-article-content a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--color-primary) 50%, transparent); }
}

.gt-article-content ul,
.gt-article-content ol {
	margin: 0 0 1.4em;
	padding-left: 1.4em;
	color: var(--color-text);
}
.gt-article-content ul { list-style: none; }
.gt-article-content ul > li { position: relative; padding-left: 1.5em; margin-bottom: .55em; }
.gt-article-content ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--color-primary);
}
.gt-article-content ol { list-style: none; counter-reset: gt-ol; }
.gt-article-content ol > li {
	position: relative;
	padding-left: 2em;
	margin-bottom: .55em;
	counter-increment: gt-ol;
}
.gt-article-content ol > li::before {
	content: counter(gt-ol);
	position: absolute;
	left: 0;
	top: 0;
	width: 1.5em;
	height: 1.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	border-radius: 50%;
	background: var(--color-bg-alt);
	color: var(--color-primary);
	border: 1px solid var(--color-border);
}
.gt-article-content li > ul, .gt-article-content li > ol { margin-top: .5em; margin-bottom: 0; }

.gt-article-content blockquote {
	margin: 1.6em 0;
	padding: 16px 20px;
	border-left: 4px solid var(--color-primary);
	background: var(--color-bg-alt);
	border-radius: 0 var(--gt-radius-sm) var(--gt-radius-sm) 0;
	color: var(--color-text-muted);
	font-style: italic;
}

.gt-article-content hr {
	border: none;
	height: 1px;
	margin: 2.4em 0;
	background: linear-gradient(90deg, transparent, var(--color-border) 20%, var(--color-border) 80%, transparent);
}

.gt-article-content .gt-table-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--gt-table-radius);
	box-shadow: var(--gt-shadow);
	margin: 0 0 1.8em;
	/* Styled horizontal scrollbar (Firefox). */
	scrollbar-width: thin;
	scrollbar-color: var(--color-primary) var(--color-bg-alt);
}
/* Styled horizontal scrollbar (WebKit/Blink). */
.gt-article-content .gt-table-scroll::-webkit-scrollbar { height: 9px; }
.gt-article-content .gt-table-scroll::-webkit-scrollbar-track {
	background: var(--color-bg-alt);
	border-radius: 999px;
}
.gt-article-content .gt-table-scroll::-webkit-scrollbar-thumb {
	background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
	border-radius: 999px;
	border: 2px solid var(--color-bg-alt);
}
.gt-article-content .gt-table-scroll::-webkit-scrollbar-thumb:hover {
	background: var(--color-primary-hover);
}
/*
 * Pasted/AI-generated post content very often ships its own inline
 * style="border:..." / style="background:..." attributes on the table,
 * <th> and <td> elements (a common export format from content tools) —
 * and inline styles beat any external stylesheet rule regardless of
 * specificity, `!important` excepted. That produced exactly this
 * complaint: cell separators rendering in whatever colour the pasted
 * content hardcoded (often white/light, built for a light-theme
 * preview) instead of the generated scheme. Every rule that governs a
 * table's borders/background/text colour is `!important` here so the
 * generated colour scheme always wins, no matter what the content itself
 * tries to set inline.
 */
.gt-article-content .gt-table-scroll table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 15px;
	background: var(--color-surface) !important;
	border: 1px solid var(--color-border-table) !important;
	margin: 0;
}
.gt-article-content table caption {
	padding: 12px 16px;
	color: var(--color-text-muted) !important;
	text-align: left;
	font-size: 13px;
	white-space: normal;
	background: var(--color-bg) !important;
	border-bottom: 1px solid var(--color-border-table) !important;
}
/*
 * Header cells: prefer real <thead>, but also cover Gutenberg/pasted tables
 * that put <th> in the first <tbody> row (until JS promotes them to thead).
 */
.gt-article-content thead th,
.gt-article-content tbody tr:first-child th {
	background: var(--color-primary) !important;
	color: var(--color-on-primary) !important;
	text-align: left;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 14px 16px;
	white-space: normal;
	vertical-align: top;
	border: none !important;
}
.gt-article-content thead th + th,
.gt-article-content tbody tr:first-child th + th {
	border-left: 1px solid color-mix(in srgb, var(--color-on-primary) 18%, transparent) !important;
}
.gt-article-content thead tr:first-child th:first-child,
.gt-article-content tbody tr:first-child th:first-child { border-top-left-radius: var(--gt-table-radius); }
.gt-article-content thead tr:first-child th:last-child,
.gt-article-content tbody tr:first-child th:last-child { border-top-right-radius: var(--gt-table-radius); }
.gt-article-content tbody td,
.gt-article-content tbody tr:not(:first-child) th {
	padding: 14px 16px;
	border: none !important;
	border-bottom: 1px solid var(--color-border-table) !important;
	color: var(--color-text) !important;
	/* Long cell copy must wrap — nowrap was crushing cookie/legal tables into an unreadable wide scroll. */
	white-space: normal;
	vertical-align: top;
	font-weight: 400;
	text-align: left;
}
.gt-article-content tbody td + td,
.gt-article-content tbody tr:not(:first-child) th + td,
.gt-article-content tbody td + th,
.gt-article-content tbody tr:not(:first-child) th + th {
	border-left: 1px solid color-mix(in srgb, var(--color-border-table) 62%, transparent) !important;
}
.gt-article-content tbody tr:last-child td,
.gt-article-content tbody tr:last-child th { border-bottom: none !important; }
.gt-article-content tbody tr:last-child td:first-child,
.gt-article-content tbody tr:last-child th:first-child { border-bottom-left-radius: var(--gt-table-radius); }
.gt-article-content tbody tr:last-child td:last-child,
.gt-article-content tbody tr:last-child th:last-child { border-bottom-right-radius: var(--gt-table-radius); }
.gt-article-content tbody tr:nth-child(even) td,
.gt-article-content tbody tr:nth-child(even):not(:first-child) th { background: color-mix(in srgb, var(--color-bg-alt) 85%, var(--color-surface)); }
.gt-article-content tbody tr:hover td,
.gt-article-content tbody tr:hover:not(:first-child) th { background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)); }

/* Don't let Gutenberg's figure.wp-block-table add a second frame around our scroll wrap. */
.gt-article-content figure.wp-block-table {
	margin: 0 0 1.8em;
	overflow: visible;
}
.gt-article-content figure.wp-block-table .gt-table-scroll { margin-bottom: 0; }
.gt-article-content figure.wp-block-table table {
	width: 100%;
	margin: 0;
}

.gt-article-content details {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--gt-radius-sm);
	padding: 14px 18px;
	margin: 0 0 12px;
}
.gt-article-content summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--color-text);
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.gt-article-content summary::-webkit-details-marker { display: none; }
.gt-article-content summary::after {
	content: "+";
	font-size: 20px;
	line-height: 1;
	color: var(--color-primary);
	transition: transform var(--gt-transition);
	flex-shrink: 0;
}
.gt-article-content details[open] summary::after { transform: rotate(45deg); }
.gt-article-content details > *:not(summary) { margin-top: 12px; color: var(--color-text-muted); }
.gt-article-content details + details { margin-top: -2px; }

.gt-article-content figure { margin: 1.6em 0; }
.gt-article-content figcaption { text-align: center; font-size: 13px; color: var(--color-text-muted); margin-top: 8px; }
/* Layered for the same reason as the base a/img/button reset above — see that comment. */
@layer gt-base-reset {
	.gt-article-content img { border-radius: var(--gt-img-radius); }
}

.gt-article-content code {
	font-family: var(--gt-font-mono);
	font-size: .88em;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: 5px;
	padding: .12em .4em;
	color: var(--color-text);
}
.gt-article-content pre {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--gt-radius-sm);
	padding: 16px 18px;
	overflow-x: auto;
	margin: 0 0 1.6em;
	scrollbar-width: thin;
	scrollbar-color: var(--color-primary) transparent;
}
.gt-article-content pre code { background: none; border: none; padding: 0; }

/* Non-semantic "heading-styled" wrapper for shortcode insertion rules */
.gt-shortcode-block { margin: 2em 0; }
.gt-shortcode-block.gt-as-h2 { margin: 2.4em 0; }
.gt-shortcode-block.gt-as-h3 { margin: 2em 0; }
.gt-shortcode-block.gt-as-h4,
.gt-shortcode-block.gt-as-h5,
.gt-shortcode-block.gt-as-h6 { margin: 1.5em 0; }

/* ==========================================================================
   Hot slots (interactive element #6)
   ========================================================================== */
.gt-hotslots {
	margin: 40px 0 10px;
	padding: 24px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--gt-radius);
}
.gt-hotslots-title {
	font-weight: 800;
	font-size: 20px;
	color: var(--color-text);
	margin-bottom: 18px;
}
.gt-hotslots-list { display: flex; flex-direction: column; gap: 16px; }
.gt-hotslot-item { display: flex; flex-direction: column; gap: 6px; }
.gt-hotslot-top { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.gt-hotslot-name { color: var(--color-text); font-weight: 600; }
.gt-hotslot-percent { color: var(--color-primary); font-weight: 700; }
.gt-hotslot-bar { height: 10px; border-radius: 999px; background: var(--color-bg-alt); overflow: hidden; }
.gt-hotslot-fill {
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
	transition: width 1.1s cubic-bezier(.22, 1, .36, 1);
}

/* ==========================================================================
   Floating widgets: jackpot / toast / bonus / back-to-top
   ========================================================================== */
.gt-jackpot-widget {
	position: fixed;
	left: 18px;
	bottom: 18px;
	z-index: 600;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--gt-radius);
	padding: 12px 18px;
	box-shadow: var(--gt-shadow);
	text-align: center;
	transition: bottom var(--gt-transition);
}
.gt-jackpot-label {
	display: block;
	font-size: 10px;
	letter-spacing: .12em;
	color: var(--color-text-muted);
	font-weight: 700;
}
.gt-jackpot-amount {
	display: block;
	font-size: 20px;
	font-weight: 800;
	color: var(--color-primary);
	text-shadow: 0 0 16px color-mix(in srgb, var(--color-primary) 55%, transparent);
}

.gt-toast-container {
	position: fixed;
	top: 90px;
	right: 18px;
	z-index: 700;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 300px;
}
.gt-toast {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--gt-radius-sm);
	padding: 12px 14px;
	box-shadow: var(--gt-shadow);
	font-size: 13px;
	color: var(--color-text-muted);
	opacity: 0;
	transform: translateX(30px);
	animation: gt-toast-in .4s ease forwards, gt-toast-out .4s ease forwards 5s;
}
.gt-toast strong { color: var(--color-text); }
.gt-toast .gt-toast-amount { color: var(--color-success); font-weight: 700; }
.gt-toast-icon { font-size: 20px; }

@keyframes gt-toast-in { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes gt-toast-out { from { opacity: 1; } to { opacity: 0; transform: translateX(30px); } }

.gt-bonus-btn {
	position: fixed;
	right: 18px;
	bottom: 88px;
	z-index: 600;
	display: flex;
	align-items: center;
	gap: 8px;
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
	color: var(--color-on-primary);
	padding: 12px 18px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 14px;
	box-shadow: 0 8px 24px color-mix(in srgb, var(--color-primary) 55%, transparent);
	animation: gt-bonus-pulse 2.4s infinite;
	transition: bottom var(--gt-transition), transform var(--gt-transition);
}
.gt-bonus-btn:hover { transform: translateY(-3px); color: var(--color-on-primary); }
.gt-bonus-btn-icon { font-size: 18px; }

@keyframes gt-bonus-pulse {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 45%, transparent), 0 8px 24px color-mix(in srgb, var(--color-primary) 45%, transparent); }
	70% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--color-primary) 0%, transparent), 0 8px 24px color-mix(in srgb, var(--color-primary) 45%, transparent); }
	100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 0%, transparent), 0 8px 24px color-mix(in srgb, var(--color-primary) 45%, transparent); }
}

@keyframes gt-pulse-dot {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success) 60%, transparent); }
	70% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-success) 0%, transparent); }
	100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success) 0%, transparent); }
}

/* Reading progress bar (optional extra, rendered by inc/performance.php). */
.gt-progress-bar {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	z-index: 1200;
	background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
	box-shadow: 0 0 8px color-mix(in srgb, var(--color-primary) 55%, transparent);
	pointer-events: none;
}

.gt-back-to-top {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 600;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	color: var(--color-text);
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--gt-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity var(--gt-transition), transform var(--gt-transition), visibility var(--gt-transition), bottom var(--gt-transition), border-color var(--gt-transition), color var(--gt-transition);
}
.gt-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.gt-back-to-top:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* push floating widgets above the cookie banner while it's visible */
body.gt-cookie-visible .gt-jackpot-widget { bottom: 88px; }
body.gt-cookie-visible .gt-back-to-top { bottom: 88px; }
body.gt-cookie-visible .gt-bonus-btn { bottom: 158px; }

/* ==========================================================================
   Cookie banner — compact, semi-transparent on every breakpoint.
   ========================================================================== */
.gt-cookie-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 900;
	background: color-mix(in srgb, var(--color-surface) 78%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-top: 1px solid var(--color-border);
	box-shadow: 0 -10px 30px rgba(0, 0, 0, .3);
	transform: translateY(100%);
	transition: transform .35s ease;
	overflow: hidden;
}
.gt-cookie-banner.is-visible { transform: translateY(0); }
.gt-cookie-inner {
	max-width: var(--container-width);
	width: 100%;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 12px 20px;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.gt-cookie-text-wrap { flex: 1 1 320px; min-width: 0; max-width: 100%; }
.gt-cookie-text { margin: 0; font-size: 13px; color: var(--color-text-muted); }
.gt-cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.gt-cookie-btn {
	border-radius: var(--gt-btn-radius, var(--gt-radius-sm));
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	border: 2px solid transparent;
	white-space: nowrap;
}
.gt-cookie-accept { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover)); color: var(--color-on-primary); }
.gt-cookie-decline { background: transparent; border-color: var(--color-border); color: var(--color-text-muted); }
.gt-cookie-decline:hover { border-color: var(--color-text-muted); color: var(--color-text); }

/* ==========================================================================
   Contact form ([contact] shortcode) — width 100%
   ========================================================================== */
.gt-contact-form-wrap { width: 100%; }
.gt-contact-form { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.gt-hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.gt-form-row { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.gt-form-row label { font-size: 13px; font-weight: 700; color: var(--color-text-muted); }
.gt-form-row input,
.gt-form-row textarea {
	width: 100%;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--gt-radius-sm);
	padding: 12px 14px;
	color: var(--color-text);
	font-family: inherit;
	font-size: 14px;
	transition: border-color var(--gt-transition);
}
.gt-form-row input:focus,
.gt-form-row textarea:focus { outline: none; border-color: var(--color-primary); }
.gt-form-row textarea { resize: vertical; min-height: 120px; }
.gt-contact-submit { align-self: flex-start; border: none; }
.gt-form-notice { padding: 12px 16px; border-radius: var(--gt-radius-sm); font-size: 14px; margin-bottom: 16px; }
.gt-form-success { background: color-mix(in srgb, var(--color-success) 18%, var(--color-bg-alt)); color: var(--color-success); }
.gt-form-error { background: color-mix(in srgb, var(--color-danger) 18%, var(--color-bg-alt)); color: var(--color-danger); }

/* ==========================================================================
   Footer
   ========================================================================== */
.gt-footer { background: var(--color-surface); border-top: 1px solid var(--color-border); margin-top: 40px; padding-top: 34px; }
.gt-footer-nav { display: flex; justify-content: center; padding-bottom: 24px; border-bottom: 1px solid var(--color-border); }
.gt-footer-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.gt-footer-menu a { color: var(--color-text-muted); font-size: 14px; font-weight: 600; }
.gt-footer-menu a:hover { color: var(--color-primary); }

.gt-footer-badges { padding: 26px 0; display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center; }
.gt-footer-trust:empty, .gt-footer-pay:empty { display: none; }

.gt-footer-bottom { padding: 18px 0 26px; border-top: 1px solid var(--color-border); text-align: center; }
.gt-copyright { margin: 0; font-size: 13px; color: var(--color-text-muted); }

/* ==========================================================================
   Universal side panel — floating rail with logo, buttons & menu links.
   Body classes: .gt-has-side-panel, .gt-side-panel-left|right,
   .gt-side-panel-collapsed (toggled by JS / localStorage).
   z-index is ABOVE the sticky header (500) so the panel + collapse
   toggle are never clipped underneath it.
   ========================================================================== */
.gt-side-panel {
	--gt-sp-w: var(--gt-side-panel-width, 280px);
	--gt-sp-icon: var(--gt-side-panel-icon-size, 22px);
	position: fixed;
	top: var(--gt-side-panel-pad-top, 16px);
	bottom: var(--gt-side-panel-pad-bottom, 16px);
	z-index: 520;
	width: var(--gt-sp-w);
	background: var(--gt-side-panel-bg, var(--color-surface));
	border-radius: var(--gt-side-panel-radius, 0);
	box-shadow: 0 0 0 1px var(--color-border), 8px 0 32px rgba(0, 0, 0, .18);
	display: flex;
	flex-direction: column;
	overflow: visible;
	transition: width .28s cubic-bezier(.22, 1, .36, 1), transform .28s cubic-bezier(.22, 1, .36, 1), top .2s ease, bottom .2s ease;
	will-change: width, transform;
}
.gt-side-panel--left { left: 0; }
.gt-side-panel--right {
	right: 0;
	left: auto;
	box-shadow: 0 0 0 1px var(--color-border), -8px 0 32px rgba(0, 0, 0, .18);
}

.gt-side-panel-inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 16px var(--gt-side-panel-pad-x, 14px);
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--color-primary) 40%, transparent) transparent;
}

.gt-side-panel-logo {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 0 0 12px;
	border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
}
.gt-side-panel-logo:empty { display: none; }
.gt-side-panel-logo .gt-logo { max-width: 100%; }
.gt-side-panel-logo .gt-logo-img,
.gt-side-panel-logo img.custom-logo {
	max-width: 100%;
	width: auto;
	height: var(--gt-side-panel-logo-size, 48px);
	max-height: var(--gt-side-panel-logo-size, 48px);
	object-fit: contain;
}

.gt-side-panel-nav {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.gt-side-panel-divider {
	height: 1px;
	margin: 6px 2px;
	background: color-mix(in srgb, var(--color-border) 80%, transparent);
	align-self: stretch;
	width: 100%;
	flex-shrink: 0;
}

/* Menu links */
.gt-side-panel-link {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	padding: 10px 8px;
	border-radius: var(--gt-radius-sm);
	color: var(--gt-side-panel-link-color, var(--color-text)) !important;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.25;
	text-decoration: none !important;
	transition: background var(--gt-transition), color var(--gt-transition), transform var(--gt-transition);
}
.gt-side-panel--menu-right .gt-side-panel-link {
	justify-content: flex-end;
	flex-direction: row-reverse;
	text-align: right;
}
.gt-side-panel-link:hover,
.gt-side-panel-link:focus-visible {
	background: color-mix(in srgb, var(--color-primary) 14%, transparent);
	color: var(--color-primary) !important;
	outline: none;
}
.gt-side-panel-link-icon {
	flex: 0 0 var(--gt-sp-icon);
	width: var(--gt-sp-icon);
	height: var(--gt-sp-icon);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border-radius: 0;
	overflow: visible;
}
.gt-side-panel-link-icon img {
	width: var(--gt-sp-icon);
	height: var(--gt-sp-icon);
	object-fit: contain;
	display: block;
}
.gt-side-panel-link-icon--empty {
	background: transparent;
	width: 6px;
	height: 6px;
	flex-basis: 6px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--gt-side-panel-link-color, var(--color-text)) 35%, transparent);
}
.gt-side-panel-link-label {
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: opacity .2s ease;
}

/* CTA buttons — content left-aligned */
.gt-side-panel-btn {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start !important;
	gap: 10px;
	width: 100%;
	min-height: var(--gt-side-panel-btn-height, 44px);
	height: var(--gt-side-panel-btn-height, 44px);
	box-sizing: border-box;
	padding: 0 14px;
	border-radius: var(--gt-btn-radius, var(--gt-radius-sm));
	font-family: var(--gt-font-heading, var(--gt-font));
	font-weight: 800;
	font-size: 13px;
	letter-spacing: .03em;
	text-transform: uppercase;
	text-decoration: none !important;
	text-align: left !important;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform var(--gt-transition), box-shadow var(--gt-transition), filter var(--gt-transition), background var(--gt-transition), color var(--gt-transition);
}
.gt-side-panel-btn:hover { transform: translateY(-1px); }
.gt-side-panel-btn-icon {
	flex: 0 0 var(--gt-sp-icon);
	width: var(--gt-sp-icon);
	height: var(--gt-sp-icon);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
}
.gt-side-panel-btn-icon img {
	width: var(--gt-sp-icon);
	height: var(--gt-sp-icon);
	object-fit: contain;
	display: block;
}
.gt-side-panel-btn-label {
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: opacity .2s ease;
}
.gt-side-panel-btn--primary {
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
	color: var(--gt-side-panel-btn-text, var(--color-on-primary)) !important;
	box-shadow: 0 8px 18px color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.gt-side-panel-btn--secondary {
	background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-hover));
	color: var(--gt-side-panel-btn-text, var(--color-on-secondary)) !important;
	box-shadow: 0 8px 18px color-mix(in srgb, var(--color-secondary) 35%, transparent);
}
.gt-side-panel-btn--outline {
	background: color-mix(in srgb, var(--color-primary) 10%, transparent);
	color: var(--gt-side-panel-btn-text, var(--color-primary)) !important;
	border-color: var(--color-primary);
	box-shadow: none;
}
.gt-side-panel-btn--outline:hover {
	background: var(--color-primary);
	color: var(--gt-side-panel-btn-text, var(--color-on-primary)) !important;
}

/* Collapse toggle — above header thanks to panel z-index 520 */
.gt-side-panel-toggle {
	position: absolute;
	top: 18px;
	z-index: 6;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
	transition: background var(--gt-transition), color var(--gt-transition), transform var(--gt-transition);
}
.gt-side-panel--left .gt-side-panel-toggle { right: -16px; }
.gt-side-panel--right .gt-side-panel-toggle { left: -16px; }
.gt-side-panel--right .gt-side-panel-toggle-icon { transform: rotate(180deg); }
.gt-side-panel-toggle:hover {
	background: var(--color-primary);
	color: var(--color-on-primary);
	border-color: var(--color-primary);
}
body.gt-side-panel-collapsed .gt-side-panel--left .gt-side-panel-toggle-icon { transform: rotate(180deg); }
body.gt-side-panel-collapsed .gt-side-panel--right .gt-side-panel-toggle-icon { transform: rotate(0deg); }

/* Collapsed rail — icons only, centered, no button/link backgrounds */
body.gt-side-panel-collapsed .gt-side-panel {
	width: var(--gt-side-panel-collapsed-w, 56px);
}
body.gt-side-panel-collapsed .gt-side-panel-inner {
	padding-left: 0;
	padding-right: 0;
	align-items: center;
}
body.gt-side-panel-collapsed .gt-side-panel-link-label,
body.gt-side-panel-collapsed .gt-side-panel-btn-label,
body.gt-side-panel-collapsed .gt-side-panel-logo {
	opacity: 0;
	pointer-events: none;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	min-height: 0 !important;
}
body.gt-side-panel-collapsed .gt-side-panel-nav {
	align-items: center;
	width: 100%;
}
body.gt-side-panel-collapsed .gt-side-panel-link,
body.gt-side-panel-collapsed .gt-side-panel--menu-right .gt-side-panel-link {
	justify-content: center !important;
	flex-direction: row !important;
	padding: 8px;
	background: transparent !important;
	width: 100%;
	margin: 0;
}
body.gt-side-panel-collapsed .gt-side-panel-link-icon,
body.gt-side-panel-collapsed .gt-side-panel-btn-icon {
	margin: 0 auto;
}
body.gt-side-panel-collapsed .gt-side-panel-btn {
	justify-content: center !important;
	padding: 8px;
	width: 100%;
	min-width: 0;
	min-height: 0;
	height: auto;
	background: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
	color: var(--gt-side-panel-link-color, var(--color-text)) !important;
}
body.gt-side-panel-collapsed .gt-side-panel-btn:hover {
	transform: none;
	filter: brightness(1.15);
}
body.gt-side-panel-collapsed .gt-side-panel-link-icon--empty {
	width: 8px;
	height: 8px;
	flex-basis: 8px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--color-primary) 55%, transparent);
	margin: 0 auto;
}

/* Push main layout — panel flush to edge */
body.gt-has-side-panel.gt-side-panel-left {
	padding-left: var(--gt-side-panel-width, 280px);
	transition: padding-left .28s cubic-bezier(.22, 1, .36, 1);
}
body.gt-has-side-panel.gt-side-panel-right {
	padding-right: var(--gt-side-panel-width, 280px);
	transition: padding-right .28s cubic-bezier(.22, 1, .36, 1);
}
body.gt-has-side-panel.gt-side-panel-left.gt-side-panel-collapsed {
	padding-left: var(--gt-side-panel-collapsed-w, 56px);
}
body.gt-has-side-panel.gt-side-panel-right.gt-side-panel-collapsed {
	padding-right: var(--gt-side-panel-collapsed-w, 56px);
}

.gt-side-panel-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 510;
	background: rgba(0, 0, 0, .45);
	backdrop-filter: blur(2px);
}

@media (max-width: 900px) {
	body.gt-has-side-panel.gt-side-panel-left,
	body.gt-has-side-panel.gt-side-panel-right,
	body.gt-has-side-panel.gt-side-panel-left.gt-side-panel-collapsed,
	body.gt-has-side-panel.gt-side-panel-right.gt-side-panel-collapsed {
		padding-left: 0;
		padding-right: 0;
	}
	.gt-side-panel {
		top: 0;
		bottom: 0;
		left: 0;
		right: auto;
		width: min(86vw, var(--gt-side-panel-width, 280px));
		border-radius: 0;
		transform: translateX(-105%);
		box-shadow: 12px 0 40px rgba(0, 0, 0, .35);
	}
	.gt-side-panel--right {
		left: auto;
		right: 0;
		transform: translateX(105%);
	}
	body.gt-side-panel-open .gt-side-panel { transform: translateX(0); }
	body.gt-side-panel-collapsed .gt-side-panel {
		width: min(86vw, var(--gt-side-panel-width, 280px));
	}
	body.gt-side-panel-collapsed .gt-side-panel-link-label,
	body.gt-side-panel-collapsed .gt-side-panel-btn-label,
	body.gt-side-panel-collapsed .gt-side-panel-logo {
		opacity: 1;
		pointer-events: auto;
		width: auto !important;
		height: auto !important;
		overflow: visible;
		padding: inherit;
		margin: inherit;
		border: inherit;
		min-height: auto !important;
	}
	body.gt-side-panel-collapsed .gt-side-panel-logo {
		display: flex;
		padding: 0 0 12px;
		border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
	}
	body.gt-side-panel-collapsed .gt-side-panel-btn {
		justify-content: flex-start;
		width: 100%;
		padding: 12px 14px;
		background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover)) !important;
		color: var(--gt-side-panel-btn-text, var(--color-on-primary)) !important;
		box-shadow: 0 8px 18px color-mix(in srgb, var(--color-primary) 35%, transparent) !important;
	}
	body.gt-side-panel-collapsed .gt-side-panel-btn--secondary {
		background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-hover)) !important;
	}
	body.gt-side-panel-collapsed .gt-side-panel-btn--outline {
		background: color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
		border-color: var(--color-primary) !important;
		box-shadow: none !important;
		color: var(--gt-side-panel-btn-text, var(--color-primary)) !important;
	}
	body.gt-side-panel-collapsed .gt-side-panel-link {
		justify-content: flex-start;
		width: 100%;
	}
	body.gt-side-panel-open .gt-side-panel-backdrop { display: block; }
	.gt-side-panel .gt-side-panel-toggle { display: none; }
}

.gt-side-panel-fab {
	display: none;
	position: fixed;
	bottom: 22px;
	z-index: 530;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: var(--color-primary);
	color: var(--color-on-primary);
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 10px 24px color-mix(in srgb, var(--color-primary) 45%, transparent);
}
.gt-side-panel-fab--left { left: 16px; }
.gt-side-panel-fab--right { right: 16px; }
@media (max-width: 900px) {
	.gt-side-panel-fab { display: inline-flex; }
}

body.gt-has-side-panel.gt-side-panel-left .gt-jackpot-widget {
	left: calc(var(--gt-side-panel-width, 280px) + 18px);
}
body.gt-has-side-panel.gt-side-panel-left.gt-side-panel-collapsed .gt-jackpot-widget {
	left: calc(var(--gt-side-panel-collapsed-w, 56px) + 18px);
}
body.gt-has-side-panel.gt-side-panel-right .gt-bonus-btn {
	right: calc(var(--gt-side-panel-width, 280px) + 18px);
}
body.gt-has-side-panel.gt-side-panel-right.gt-side-panel-collapsed .gt-bonus-btn {
	right: calc(var(--gt-side-panel-collapsed-w, 56px) + 18px);
}
@media (max-width: 900px) {
	body.gt-has-side-panel.gt-side-panel-left .gt-jackpot-widget,
	body.gt-has-side-panel.gt-side-panel-left.gt-side-panel-collapsed .gt-jackpot-widget { left: 18px; }
	body.gt-has-side-panel.gt-side-panel-right .gt-bonus-btn,
	body.gt-has-side-panel.gt-side-panel-right.gt-side-panel-collapsed .gt-bonus-btn { right: 18px; }
}

/* ==========================================================================
   MENU BAR — the second output mode for the side-panel items: a horizontal
   pill strip placed with [gt_menu_bar]. All colours/sizes arrive as inline
   --gt-mb-* variables from inc/menu-bar.php, because the panel's own
   --gt-side-panel-* set only exists while the floating panel is enabled.
   The strip scrolls natively; the arrows and the edge fades are progressive
   enhancement toggled by .has-start / .has-end from main.js.
   ========================================================================== */
.gt-menubar {
	--gt-mb-gap: 8px;
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 100%;
	padding: 8px 10px;
	box-sizing: border-box;
	background: var(--gt-mb-bg, var(--color-surface));
	border-radius: 999px;
}
/* Transparent mode (bg="none") sits on top of a Hero/banner image, where a
   coloured fade would read as a stray rectangle — so drop the fades too. */
.gt-menubar--plain { padding-left: 0; padding-right: 0; }
.gt-menubar--plain .gt-menubar-viewport::before,
.gt-menubar--plain .gt-menubar-viewport::after { display: none; }

.gt-menubar-search {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--gt-mb-h, 44px);
	height: var(--gt-mb-h, 44px);
	min-width: 40px;
	min-height: 40px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--gt-mb-color, #ffffff) 12%, transparent);
	color: var(--gt-mb-color, var(--color-text)) !important;
	text-decoration: none !important;
	transition: background var(--gt-transition), color var(--gt-transition), transform var(--gt-transition);
}
.gt-menubar-search:hover {
	background: var(--color-primary);
	color: var(--color-on-primary) !important;
	transform: translateY(-1px);
}

.gt-menubar-viewport {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}
.gt-menubar-track {
	display: flex;
	align-items: center;
	gap: var(--gt-mb-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-behavior: smooth;
	scroll-padding-inline: 6px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* Room for the pill lift on hover, otherwise it gets clipped. */
	padding: 2px 0;
}
.gt-menubar-track::-webkit-scrollbar { display: none; }
/* Centring through auto margins instead of justify-content: an overflowing
   flex container with centred content clips its first items. */
.gt-menubar--center .gt-menubar-track > :first-child { margin-inline-start: auto; }
.gt-menubar--center .gt-menubar-track > :last-child { margin-inline-end: auto; }

.gt-menubar-item {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: var(--gt-mb-h, 44px);
	min-height: 40px;
	padding: 0 16px;
	border: 2px solid transparent;
	border-radius: 999px;
	background: color-mix(in srgb, var(--gt-mb-color, #ffffff) 9%, transparent);
	color: var(--gt-mb-color, var(--color-text)) !important;
	font-family: var(--gt-font-heading, var(--gt-font));
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none !important;
	transition: background var(--gt-transition), color var(--gt-transition), border-color var(--gt-transition), transform var(--gt-transition);
}
.gt-menubar-item:hover {
	background: color-mix(in srgb, var(--gt-mb-color, #ffffff) 20%, transparent);
	transform: translateY(-1px);
}
.gt-menubar-item:focus-visible,
.gt-menubar-search:focus-visible,
.gt-menubar-arrow:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}
.gt-menubar-icon {
	flex: 0 0 var(--gt-mb-icon, 22px);
	width: var(--gt-mb-icon, 22px);
	height: var(--gt-mb-icon, 22px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.gt-menubar-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.gt-menubar-item--icon-only {
	width: var(--gt-mb-h, 44px);
	padding: 0;
	justify-content: center;
}

/* Same visual distinction the floating panel makes between a menu link and
   a call-to-action button. */
.gt-menubar-item--btn {
	font-weight: 800;
	letter-spacing: .03em;
	text-transform: uppercase;
}
.gt-menubar-item--primary {
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
	color: var(--gt-mb-btn-color, var(--color-on-primary)) !important;
}
.gt-menubar-item--secondary {
	background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-hover));
	color: var(--gt-mb-btn-color, var(--color-on-secondary)) !important;
}
.gt-menubar-item--outline {
	background: transparent;
	border-color: color-mix(in srgb, var(--gt-mb-color, #ffffff) 45%, transparent);
	color: var(--gt-mb-btn-color, var(--gt-mb-color, var(--color-text))) !important;
}
.gt-menubar-item--outline:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-on-primary) !important;
}

.gt-menubar-sep {
	flex: 0 0 auto;
	width: 1px;
	height: calc(var(--gt-mb-h, 44px) * .58);
	background: color-mix(in srgb, var(--gt-mb-color, #ffffff) 28%, transparent);
}

/* --- Overflow affordances --- */
.gt-menubar-viewport::before,
.gt-menubar-viewport::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	width: 58px;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--gt-transition);
}
.gt-menubar-viewport::before {
	left: 0;
	background: linear-gradient(90deg, var(--gt-mb-fade, var(--color-surface)), transparent);
}
.gt-menubar-viewport::after {
	right: 0;
	background: linear-gradient(270deg, var(--gt-mb-fade, var(--color-surface)), transparent);
}
.gt-menubar.has-start .gt-menubar-viewport::before,
.gt-menubar.has-end .gt-menubar-viewport::after { opacity: 1; }

.gt-menubar-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--gt-mb-fade, var(--color-surface));
	color: var(--gt-mb-color, var(--color-text));
	box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
	cursor: pointer;
	transition: filter var(--gt-transition);
}
.gt-menubar-arrow:hover { filter: brightness(1.25); }
.gt-menubar-arrow[hidden] { display: none; }
.gt-menubar-arrow--prev { left: 0; }
.gt-menubar-arrow--next { right: 0; }

@media (max-width: 768px) {
	.gt-menubar {
		gap: 8px;
		padding: 6px 8px;
		border-radius: 26px;
	}
	.gt-menubar-item {
		padding: 0 14px;
		font-size: 12.5px;
	}
	/* Phones swipe the strip natively — the arrows would only eat space and
	   cover the pills, so only the edge fades stay as the "more" hint. */
	.gt-menubar-arrow { display: none !important; }
	.gt-menubar-viewport::before,
	.gt-menubar-viewport::after { width: 34px; }
}

@media (prefers-reduced-motion: reduce) {
	.gt-menubar-track { scroll-behavior: auto; }
	.gt-menubar-item:hover,
	.gt-menubar-search:hover { transform: none; }
}

/* ==========================================================================
   BUILDER — rows / columns / widgets from [gt_builder].
   Column width is --gt-bc-w (percent). Below 768px columns stack unless
   the row has .gt-builder-row--keep. Overlay and background live on the
   row; widgets reuse .gt-btn / .gt-layer-* so the section looks native.
   ========================================================================== */
.gt-builder { width: 100%; }
.gt-builder-row {
	position: relative;
	padding: var(--gt-br-py, 32px) var(--gt-br-px, 0);
	overflow: hidden;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
@media (max-width: 768px) {
	.gt-builder-row {
		padding-left: min(10px, var(--gt-br-px, 0px));
		padding-right: min(10px, var(--gt-br-px, 0px));
	}
}
.gt-builder-row-overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.gt-builder-inner {
	--gt-bc-gap: var(--gt-br-gap, 24px);
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--gt-bc-gap);
	width: 100%;
	box-sizing: border-box;
}
.gt-builder-row.is-valign-top .gt-builder-inner { align-items: flex-start; }
.gt-builder-row.is-valign-center .gt-builder-inner { align-items: center; }
.gt-builder-row.is-valign-bottom .gt-builder-inner { align-items: flex-end; }

/* Percent widths plus gap would wrap (50%+50%+24px > 100%). Subtract the
   share of the gap that this column does not occupy, so 50/50 stays in one
   row and 33/67 still adds up. */
.gt-builder-col {
	flex: 0 0 calc(var(--gt-bc-w, 50%) - var(--gt-bc-gap) * (1 - var(--gt-bc-w, 50%) / 100%));
	max-width: calc(var(--gt-bc-w, 50%) - var(--gt-bc-gap) * (1 - var(--gt-bc-w, 50%) / 100%));
	min-width: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}
.gt-builder-col.is-valign-center { justify-content: center; }
.gt-builder-col.is-valign-bottom { justify-content: flex-end; }

.gt-builder-widget { max-width: 100%; text-align: inherit; }
.gt-bw--inner { width: 100%; max-width: 100%; }
.gt-builder-widget .gt-layer-h,
.gt-builder-widget .gt-layer-text {
	margin: 0;
	color: var(--color-text);
}
.gt-builder .gt-layer-btn--outline {
	border-color: var(--color-border);
	color: var(--color-text);
}
.gt-bw-list {
	margin: 0;
	padding-left: 1.2em;
	list-style: none;
}
.gt-bw-list li {
	position: relative;
	padding-left: .4em;
	margin: 0 0 .45em;
}
.gt-bw-list li::before {
	content: "";
	position: absolute;
	left: -1em;
	top: .55em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-primary);
}
.gt-bw-ibox { display: flex; flex-direction: column; align-items: inherit; gap: 8px; }
.gt-bw-ibox-icon { width: 48px; height: 48px; object-fit: contain; }
.gt-bw-ibox-title { font-weight: 800; color: var(--color-text); }
.gt-bw-ibox-text { color: var(--color-text-muted); line-height: 1.5; }
.gt-bw-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--gt-radius-sm);
	overflow: hidden;
	background: #000;
}
.gt-bw-video iframe,
.gt-bw-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.gt-bw-video-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	pointer-events: none;
	display: none;
}
.gt-bw-html { max-width: 100%; overflow: auto; }

@media (max-width: 768px) {
	.gt-builder-row:not(.gt-builder-row--keep) > .gt-builder-inner > .gt-builder-col {
		flex-basis: 100%;
		max-width: 100%;
	}
	/* Nested 3+ columns still stack. A two-column inner row (heading +
	   button) stays on one line — that's why it was nested. */
	.gt-builder-inner--nested:not(.gt-builder-row--keep) > .gt-builder-col {
		flex-basis: 100%;
		max-width: 100%;
	}
	.gt-builder-inner--nested > .gt-builder-col:first-child:nth-last-child(2),
	.gt-builder-inner--nested > .gt-builder-col:first-child:nth-last-child(2) ~ .gt-builder-col {
		flex-basis: calc(var(--gt-bc-w, 50%) - var(--gt-bc-gap) * (1 - var(--gt-bc-w, 50%) / 100%));
		max-width: calc(var(--gt-bc-w, 50%) - var(--gt-bc-gap) * (1 - var(--gt-bc-w, 50%) / 100%));
	}
	.gt-builder-inner--nested:has(> .gt-builder-col:first-child:nth-last-child(2)) {
		flex-wrap: nowrap;
		align-items: center;
	}
	.gt-builder-col--hide-m,
	.gt-bw--hide-m { display: none !important; }
}

/* ==========================================================================
   VISUAL BLOCKS — the slide/layer engine shared by Hero and Banner.
   Structure: [data-gt-slider] > .gt-slider-viewport > .gt-slide
   (.gt-slide-media + .gt-slide-overlay + .gt-slide-objects + .gt-slide-inner
   > .gt-layers), plus the navigation layers.
   Every font size is a clamp() computed in PHP, so the whole thing scales
   down to phones without a second set of settings. Only the outer wrapper
   (.gt-hero / .gt-banner) knows how tall the thing is and where it sits.
   ========================================================================== */
.gt-slider {
	position: relative;
	border-radius: var(--gt-slider-radius, 0);
	overflow: hidden;
	isolation: isolate;
	background: var(--color-bg-alt, #14141a);
	perspective: 1400px;
}
.gt-slider-viewport {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
}

/* Height driven by the content instead of a fixed box: the active slide
   joins the normal flow and stretches the slider, while the others stay
   stacked on top of it so the transitions keep working. */
.gt-slider.gt-slider--auto,
.gt-slider--auto .gt-slider-viewport {
	position: relative;
	inset: auto;
	/* Beats the fixed heights of .gt-hero-slider / .gt-banner-slider--*
	   without depending on where those rules sit in the file. */
	height: auto;
	aspect-ratio: auto;
}
.gt-slider--auto .gt-slide { position: relative; }
.gt-slider--auto .gt-slide:not(.is-active) {
	position: absolute;
	inset: 0;
}
.gt-slider--auto .gt-slide-inner { height: auto; }

/* --- Slides & transitions --- */
.gt-slide {
	position: absolute;
	inset: 0;
	z-index: 1;
	backface-visibility: hidden;
}
.gt-slide.is-active { z-index: 2; }

.gt-tr--fade .gt-slide,
.gt-tr--zoom .gt-slide,
.gt-tr--flip .gt-slide {
	opacity: 0;
	pointer-events: none;
	transition: opacity .7s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
}
.gt-tr--fade .gt-slide.is-active,
.gt-tr--zoom .gt-slide.is-active,
.gt-tr--flip .gt-slide.is-active {
	opacity: 1;
	pointer-events: auto;
}
.gt-tr--zoom .gt-slide { transform: scale(1.08); }
.gt-tr--zoom .gt-slide.is-active { transform: scale(1); }
.gt-tr--flip .gt-slide { transform: rotateY(35deg); transform-origin: center left; }
.gt-tr--flip .gt-slide.is-active { transform: rotateY(0deg); }

.gt-tr--slide .gt-slide {
	transform: translateX(100%);
	transition: transform .75s cubic-bezier(.65, 0, .35, 1);
}
.gt-tr--slide .gt-slide.is-active { transform: translateX(0); }
.gt-tr--slide .gt-slide:not(.is-active) { pointer-events: none; }

/* Single-slide blocks never get JS wiring — the only slide is always on. */
.gt-hero--single .gt-slide,
.gt-banner--single .gt-slide {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* --- Background media & image effects --- */
.gt-slide-media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 1;
}
.gt-slide-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--gt-pos, center);
}
@media (max-width: 768px) {
	.gt-slide-media img {
		object-position: var(--gt-pos-m, var(--gt-pos, center));
	}
}
.gt-fx--kenburns .gt-slide.is-active .gt-slide-media img {
	animation: gt-kenburns 20s ease-out both;
}
@keyframes gt-kenburns {
	from { transform: scale(1.01); }
	to { transform: scale(1.16); }
}
.gt-fx--parallax .gt-slide-media img {
	transform: translate3d(0, var(--gt-par, 0px), 0) scale(1.18);
	will-change: transform;
}
.gt-fx--tilt .gt-slide-media img {
	transform: translate3d(var(--gt-tx, 0px), var(--gt-ty, 0px), 0) scale(1.07);
	transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}

.gt-slide-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

/* --- Freely positioned image objects ---
   X/Y live on the wrapper (percentages of the slide box plus the anchor
   translate), so the <img> keeps its transform free for the reveal
   animation and the two never fight. */
.gt-slide-objects {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.gt-slide-objects--below { z-index: 3; }
.gt-slide-objects--above { z-index: 5; }
.gt-slide-obj {
	position: absolute;
	width: var(--gt-obj-w, 240px);
	max-width: 90%;
	line-height: 0;
}
.gt-slide-obj-link {
	display: block;
	pointer-events: auto;
}
.gt-slide-obj-img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- Content positioning (9-grid) --- */
.gt-slide-inner {
	position: relative;
	z-index: 4;
	height: 100%;
	display: flex;
	width: 100%;
}
.gt-slide--top-left .gt-slide-inner,
.gt-slide--top-center .gt-slide-inner,
.gt-slide--top-right .gt-slide-inner { align-items: flex-start; }
.gt-slide--center-left .gt-slide-inner,
.gt-slide--center-center .gt-slide-inner,
.gt-slide--center-right .gt-slide-inner { align-items: center; }
.gt-slide--bottom-left .gt-slide-inner,
.gt-slide--bottom-center .gt-slide-inner,
.gt-slide--bottom-right .gt-slide-inner { align-items: flex-end; }
.gt-slide--top-left .gt-slide-inner,
.gt-slide--center-left .gt-slide-inner,
.gt-slide--bottom-left .gt-slide-inner { justify-content: flex-start; }
.gt-slide--top-center .gt-slide-inner,
.gt-slide--center-center .gt-slide-inner,
.gt-slide--bottom-center .gt-slide-inner { justify-content: center; }
.gt-slide--top-right .gt-slide-inner,
.gt-slide--center-right .gt-slide-inner,
.gt-slide--bottom-right .gt-slide-inner { justify-content: flex-end; }

@media (max-width: 768px) {
	.gt-slide.gt-slide--m-top-left .gt-slide-inner,
	.gt-slide.gt-slide--m-top-center .gt-slide-inner,
	.gt-slide.gt-slide--m-top-right .gt-slide-inner { align-items: flex-start; }
	.gt-slide.gt-slide--m-center-left .gt-slide-inner,
	.gt-slide.gt-slide--m-center-center .gt-slide-inner,
	.gt-slide.gt-slide--m-center-right .gt-slide-inner { align-items: center; }
	.gt-slide.gt-slide--m-bottom-left .gt-slide-inner,
	.gt-slide.gt-slide--m-bottom-center .gt-slide-inner,
	.gt-slide.gt-slide--m-bottom-right .gt-slide-inner { align-items: flex-end; }
	.gt-slide.gt-slide--m-top-left .gt-slide-inner,
	.gt-slide.gt-slide--m-center-left .gt-slide-inner,
	.gt-slide.gt-slide--m-bottom-left .gt-slide-inner { justify-content: flex-start; }
	.gt-slide.gt-slide--m-top-center .gt-slide-inner,
	.gt-slide.gt-slide--m-center-center .gt-slide-inner,
	.gt-slide.gt-slide--m-bottom-center .gt-slide-inner { justify-content: center; }
	.gt-slide.gt-slide--m-top-right .gt-slide-inner,
	.gt-slide.gt-slide--m-center-right .gt-slide-inner,
	.gt-slide.gt-slide--m-bottom-right .gt-slide-inner { justify-content: flex-end; }
}

.gt-layers {
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 1.3vw, 18px);
	width: 100%;
}
.gt-layers.is-align-left { text-align: left; align-items: flex-start; }
.gt-layers.is-align-center { text-align: center; align-items: center; }
.gt-layers.is-align-right { text-align: right; align-items: flex-end; }

/* Offer card around the text column (Welcome Offer plate). */
.gt-layers.is-boxed {
	background: var(--gt-box-bg, rgba(11, 11, 18, .7));
	border-radius: var(--gt-box-r, 16px);
	padding: var(--gt-box-pad, 28px);
	box-sizing: border-box;
	box-shadow: 0 18px 48px rgba(0, 0, 0, .32);
	transform: translate(var(--gt-box-x, 0px), var(--gt-box-y, 0px));
	gap: var(--gt-layers-gap, 8px);
}
.gt-layers.is-boxed .gt-layer-actions,
.gt-layers.is-boxed .gt-layer-cards { margin-top: 0; }
.gt-slide:has(.gt-layers.is-boxed.is-tall) .gt-slide-inner {
	align-items: stretch;
}
.gt-layers.is-boxed.is-tall {
	align-self: stretch;
	height: 100%;
	justify-content: center;
}
.gt-slide--top-left .gt-layers.is-boxed.is-tall,
.gt-slide--top-center .gt-layers.is-boxed.is-tall,
.gt-slide--top-right .gt-layers.is-boxed.is-tall { justify-content: flex-start; }
.gt-slide--bottom-left .gt-layers.is-boxed.is-tall,
.gt-slide--bottom-center .gt-layers.is-boxed.is-tall,
.gt-slide--bottom-right .gt-layers.is-boxed.is-tall { justify-content: flex-end; }

/* --- Two-column slides ---------------------------------------------------
   The picture sits in its own column instead of covering the slide, so the
   text never has to be positioned out of its way. Vertical placement still
   comes from the slide's own position setting (the .gt-slide--* modifiers
   above); only the horizontal split is forced here. */
.gt-slide.gt-slide--split .gt-slide-inner {
	flex-direction: row;
	justify-content: space-between;
	gap: clamp(24px, 4vw, 64px);
}
.gt-slide.gt-slide--split-left .gt-slide-inner { flex-direction: row-reverse; }
.gt-slide--split .gt-layers {
	/* min-width lets a long unbroken headline shrink instead of pushing the
	   picture out of the slide. */
	flex: 1 1 auto;
	min-width: 0;
}
.gt-slide-figure { flex: 0 0 var(--gt-media-w, 46%); }
.gt-slide-figure picture { display: block; }
.gt-slide-figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--gt-radius-sm);
}
.gt-slide-figure.is-framed img {
	border: 1px solid rgba(255, 255, 255, .16);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .38);
}
/* Below a tablet the two columns become one: text first, picture under it
   at full width. Stretching them is deliberate — a centred column would
   fight left-aligned text inside it. */
@media (max-width: 900px) {
	.gt-slide.gt-slide--split .gt-slide-inner,
	.gt-slide.gt-slide--split-left .gt-slide-inner {
		flex-direction: column;
		align-items: stretch;
		justify-content: center;
		gap: clamp(18px, 4vw, 28px);
	}
	.gt-slide--split .gt-layers { order: 1; }
	.gt-slide--split .gt-slide-figure {
		order: 2;
		flex: 0 0 auto;
		width: 100%;
	}
}

/* --- Layer reveal animations (triggered by .is-in from JS) --- */
[data-layer-anim] {
	opacity: 0;
	transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1), filter .8s ease;
	transition-delay: var(--gt-layer-d, 0ms);
}
.gt-anim--fade-up [data-layer-anim] { transform: translateY(30px); }
.gt-anim--fade-down [data-layer-anim] { transform: translateY(-30px); }
.gt-anim--zoom [data-layer-anim] { transform: scale(.88); }
.gt-anim--slide-left [data-layer-anim] { transform: translateX(-44px); }
.gt-anim--slide-right [data-layer-anim] { transform: translateX(44px); }
.gt-anim--blur [data-layer-anim] { filter: blur(14px); transform: scale(1.04); }
.gt-obj--zoom { transform: scale(.85); }
.gt-obj--slide-left { transform: translateX(-56px); }
.gt-obj--slide-right { transform: translateX(56px); }
.gt-slide.is-in [data-layer-anim] {
	opacity: 1;
	transform: none;
	filter: none;
}
.gt-anim--none [data-layer-anim],
.gt-obj--none {
	opacity: 1;
	transform: none;
	filter: none;
	transition: none;
}
/* The gentle drift starts only once the reveal has finished, otherwise the
   keyframes would override the entrance transform on load. */
.gt-slide.is-in .gt-obj--float { animation: gt-obj-float 4.5s ease-in-out .9s infinite; }
@keyframes gt-obj-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-14px); }
}

/* --- Typography layers --- */
.gt-layer-h {
	margin: 0;
	font-family: var(--gt-font-heading, var(--gt-font));
	line-height: 1.04;
	letter-spacing: -.02em;
	color: #fff;
}
.gt-layer-text {
	margin: 0;
	line-height: 1.55;
	color: #fff;
}
.gt-layer-h.is-upper,
.gt-layer-text.is-upper { text-transform: uppercase; letter-spacing: .02em; }
.gt-layer-h.has-shadow,
.gt-layer-text.has-shadow { text-shadow: 0 2px 22px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .45); }
.gt-layer-h.is-gradient,
.gt-layer-text.is-gradient {
	background: linear-gradient(92deg, var(--color-primary), var(--color-secondary) 55%, var(--color-primary));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	text-shadow: none;
}
.gt-layer-badge {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	max-width: 100%;
	padding: 7px 15px;
	border-radius: 999px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.2;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.gt-layer-spacer { flex: 0 0 auto; width: 100%; }

/* --- Divider: the same spacer layer, with a rule centred in its gap, so
   one layer buys both the breathing room and the separator line. */
.gt-layer-divider {
	--gt-line-c: #ffffff;
	--gt-line-w: 2px;
	--gt-line-len: 100%;
	display: flex;
	align-items: center;
}
.is-align-center .gt-layer-divider { justify-content: center; }
.is-align-right .gt-layer-divider { justify-content: flex-end; }
.gt-layer-divider > span {
	width: var(--gt-line-len);
	height: var(--gt-line-w);
	border-radius: 999px;
	background: var(--gt-line-c);
}
.gt-layer-divider--dashed > span,
.gt-layer-divider--dotted > span {
	border-radius: 0;
	background: repeating-linear-gradient(90deg, var(--gt-line-c) 0 var(--gt-dash), transparent var(--gt-dash) calc(var(--gt-dash) * 2));
}
.gt-layer-divider--dashed > span { --gt-dash: 10px; }
.gt-layer-divider--dotted > span { --gt-dash: var(--gt-line-w); border-radius: 999px; }
.gt-layer-divider--gradient > span {
	background: linear-gradient(90deg, transparent, var(--gt-line-c), transparent);
}
/* A one-sided fade reads better when the text itself is not centred. */
.is-align-left .gt-layer-divider--gradient > span { background: linear-gradient(90deg, var(--gt-line-c), transparent); }
.is-align-right .gt-layer-divider--gradient > span { background: linear-gradient(90deg, transparent, var(--gt-line-c)); }
.gt-layer-shortcode { width: 100%; }
.gt-layer-shortcode > *:last-child { margin-bottom: 0; }

/* --- Cards: small plates that state a fact ("Bonus" / "2500 + 500FS").
   Neighbouring card layers share this row, so the count per line is
   whatever fits — three plates on a desktop hero, one or two on a phone. */
.gt-layer-cards {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(10px, 1.2vw, 16px);
	width: 100%;
	margin-top: 4px;
}
.is-align-center .gt-layer-cards { justify-content: center; }
.is-align-right .gt-layer-cards { justify-content: flex-end; }
.gt-layer-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	/* Grows to fill the row but never below a readable plate width. */
	flex: 1 1 clamp(140px, 15vw, 190px);
	max-width: 100%;
	padding: clamp(12px, 1.2vw, 17px) clamp(13px, 1.3vw, 19px);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--gt-radius-sm);
	background: rgba(255, 255, 255, .08);
	text-decoration: none;
	text-align: inherit;
}
a.gt-layer-card {
	transition: transform .25s ease, filter .25s ease;
}
a.gt-layer-card:hover {
	transform: translateY(-2px);
	filter: brightness(1.12);
}
.gt-layer-card-label {
	font-size: clamp(11px, .85vw, 13px);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .04em;
	opacity: .72;
}
.gt-layer-card-value {
	font-family: var(--gt-font-heading, var(--gt-font));
	font-size: var(--gt-card-size, 20px);
	font-weight: 800;
	line-height: 1.25;
}

/* --- Buttons --- */
.gt-layer-actions {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(8px, 1.2vw, 14px);
	width: 100%;
	margin-top: 4px;
}
.is-align-center .gt-layer-actions { justify-content: center; }
.is-align-right .gt-layer-actions { justify-content: flex-end; }
.gt-layer-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 2px solid transparent;
	border-radius: var(--gt-btn-radius, var(--gt-radius-sm));
	font-family: var(--gt-font-heading, var(--gt-font));
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .03em;
	text-decoration: none !important;
	cursor: pointer;
	overflow: hidden;
	transition: transform var(--gt-transition), box-shadow var(--gt-transition), background var(--gt-transition), color var(--gt-transition), border-color var(--gt-transition);
}
.gt-layer-btn--full {
	width: 100%;
	justify-content: center;
	box-sizing: border-box;
}
.gt-layers .gt-layer-actions:has(.gt-layer-btn--full) {
	align-self: stretch;
	width: 100%;
}
.gt-layer-btn:hover { transform: translateY(-2px); }
.gt-layer-btn-icon {
	width: 1.35em;
	height: 1.35em;
	object-fit: contain;
	display: block;
}
.gt-layer-btn--sm { padding: 9px 18px; font-size: clamp(11px, 1vw, 12.5px); }
.gt-layer-btn--md { padding: 13px 26px; font-size: clamp(12px, 1.15vw, 14px); }
.gt-layer-btn--lg { padding: 16px 34px; font-size: clamp(13px, 1.35vw, 16px); }
.gt-layer-btn--primary {
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
	color: var(--color-on-primary);
	box-shadow: 0 10px 26px color-mix(in srgb, var(--color-primary) 42%, transparent);
}
.gt-layer-btn--secondary {
	background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-hover));
	color: var(--color-on-secondary);
	box-shadow: 0 10px 26px color-mix(in srgb, var(--color-secondary) 42%, transparent);
}
.gt-layer-btn--outline {
	background: transparent;
	border-color: rgba(255, 255, 255, .75);
	color: #fff;
}
.gt-layer-btn--outline:hover {
	background: #fff;
	color: #14141a;
	border-color: #fff;
}
.gt-layer-btn--white {
	background: #fff;
	color: #14141a;
	box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
}
.gt-layer-btn--ghost {
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .28);
	color: #fff;
	backdrop-filter: blur(8px);
}
.gt-layer-btn--ghost:hover { background: rgba(255, 255, 255, .24); }
.gt-layer-btn.is-shine::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 45%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
	transform: skewX(-18deg);
	animation: gt-layer-shine 3.4s ease-in-out infinite;
}
@keyframes gt-layer-shine {
	0%, 65% { left: -60%; }
	100% { left: 130%; }
}

/* --- Navigation --- */
.gt-slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 6;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .35);
	background: rgba(12, 12, 18, .42);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	backdrop-filter: blur(8px);
	transition: background var(--gt-transition), color var(--gt-transition), border-color var(--gt-transition), opacity var(--gt-transition);
}
.gt-slider-arrow:hover {
	background: var(--color-primary);
	color: var(--color-on-primary);
	border-color: var(--color-primary);
}
.gt-slider-arrow--prev { left: clamp(8px, 1.8vw, 22px); }
.gt-slider-arrow--next { right: clamp(8px, 1.8vw, 22px); }
.gt-slider-arrow:disabled {
	opacity: .3;
	cursor: default;
	background: rgba(12, 12, 18, .3);
}
.gt-slider-arrow:disabled:hover {
	background: rgba(12, 12, 18, .3);
	color: #fff;
	border-color: rgba(255, 255, 255, .35);
}

.gt-slider-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(12px, 2vw, 22px);
	z-index: 6;
	display: flex;
	justify-content: center;
	gap: 9px;
}
.gt-slider-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .45);
	cursor: pointer;
	transition: width var(--gt-transition), background var(--gt-transition);
}
.gt-slider-dot:hover { background: rgba(255, 255, 255, .75); }
.gt-slider-dot.is-active {
	width: 30px;
	background: var(--color-primary);
}

.gt-slider-fraction {
	position: absolute;
	right: clamp(12px, 2vw, 24px);
	bottom: clamp(12px, 2vw, 22px);
	z-index: 6;
	display: inline-flex;
	gap: 4px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(12, 12, 18, .45);
	backdrop-filter: blur(8px);
	color: #fff;
	font-weight: 800;
	font-size: 13px;
}
.gt-slider-fraction-current { color: var(--color-primary); }

.gt-slider-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	z-index: 6;
	background: rgba(255, 255, 255, .18);
}
.gt-slider-progress-bar {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
	transition: width .15s linear;
}

.gt-slider-thumbs {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(10px, 1.6vw, 18px);
	z-index: 6;
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 0 12px;
	overflow-x: auto;
	scrollbar-width: none;
}
.gt-slider-thumbs::-webkit-scrollbar { display: none; }
.gt-slider-thumb {
	flex: 0 0 auto;
	width: 74px;
	height: 46px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	background: rgba(0, 0, 0, .35);
	cursor: pointer;
	opacity: .6;
	transition: opacity var(--gt-transition), border-color var(--gt-transition);
}
.gt-slider-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gt-slider-thumb.is-active,
.gt-slider-thumb:hover { opacity: 1; border-color: var(--color-primary); }

/* --- Mobile --- */
@media (max-width: 768px) {
	.gt-layers { gap: 10px; }
	.gt-layers.is-boxed {
		width: 100%;
		max-width: 100% !important;
		transform: translate(var(--gt-box-x-m, 0px), var(--gt-box-y-m, 0px));
		zoom: var(--gt-box-scale-m, 1.25);
	}
	.gt-slide:has(.gt-layers.is-boxed.is-tall) .gt-slide-inner {
		align-items: stretch;
	}
	.gt-layers.is-boxed.is-tall {
		zoom: 1;
		height: 100%;
	}
	.gt-slide.gt-slide--m-top-left .gt-layers.is-boxed.is-tall,
	.gt-slide.gt-slide--m-top-center .gt-layers.is-boxed.is-tall,
	.gt-slide.gt-slide--m-top-right .gt-layers.is-boxed.is-tall { justify-content: flex-start; }
	.gt-slide.gt-slide--m-center-left .gt-layers.is-boxed.is-tall,
	.gt-slide.gt-slide--m-center-center .gt-layers.is-boxed.is-tall,
	.gt-slide.gt-slide--m-center-right .gt-layers.is-boxed.is-tall { justify-content: center; }
	.gt-slide.gt-slide--m-bottom-left .gt-layers.is-boxed.is-tall,
	.gt-slide.gt-slide--m-bottom-center .gt-layers.is-boxed.is-tall,
	.gt-slide.gt-slide--m-bottom-right .gt-layers.is-boxed.is-tall { justify-content: flex-end; }
	.gt-slider-arrow {
		width: 36px;
		height: 36px;
	}
	.gt-slider-arrow svg { width: 17px; height: 17px; }
	.gt-layer-actions { gap: 8px; }
	.gt-layer-btn--lg { padding: 13px 22px; }
	.gt-layer-btn--md { padding: 12px 20px; }
	.gt-layer-cards { gap: 8px; }
	/* Two plates per row stay readable down to ~360px; below that they
	   fall to one each, which the flex basis handles on its own. */
	.gt-layer-card {
		flex: 1 1 130px;
		padding: 11px 13px;
		gap: 4px;
	}
	.gt-slider-thumb { width: 54px; height: 36px; }
	.gt-layer-badge { padding: 5px 12px; letter-spacing: .06em; }
	/* Content columns are never wider than the phone screen, whatever the
	   desktop max-width setting says. */
	.gt-layers { max-width: 100% !important; }
	.gt-slide-obj { width: calc(var(--gt-obj-w, 240px) * var(--gt-obj-scale, 1)); }
	.gt-slide-obj.gt-hide-mobile { display: none; }
}
@media (max-width: 480px) {
	/* A hero fills the phone screen, so its buttons become full-width taps.
	   A banner is a small box that usually shares its width with artwork —
	   stretching the CTA across it just pushes the button under the
	   picture, so banner buttons keep their natural size. */
	.gt-hero .gt-layer-actions .gt-layer-btn { flex: 1 1 100%; justify-content: center; }
	.gt-hero .is-align-left .gt-layer-actions { justify-content: stretch; }
	.gt-banner .gt-layer-btn--lg { padding: 11px 18px; }
	.gt-banner .gt-layer-btn--md { padding: 10px 16px; }
	.gt-banner .gt-layer-btn--sm { padding: 8px 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.gt-slide,
	[data-layer-anim] {
		transition-duration: .01ms !important;
	}
	.gt-fx--kenburns .gt-slide.is-active .gt-slide-media img,
	.gt-slide.is-in .gt-obj--float,
	.gt-layer-btn.is-shine::after {
		animation: none;
	}
	.gt-fx--parallax .gt-slide-media img { transform: scale(1.05); }
}

/* ==========================================================================
   HERO — the visual block that sits directly under the header.
   ========================================================================== */
.gt-hero {
	position: relative;
	width: 100%;
}
.gt-hero-slider { height: var(--gt-hero-h, 520px); }
.gt-hero-inner {
	max-width: var(--container-width, 1200px);
	margin: 0 auto;
	padding: var(--gt-hero-pad-y, clamp(22px, 3.4vw, 56px)) var(--gt-hero-pad-x, clamp(16px, 3vw, 40px));
}
.gt-hero--boxed .gt-hero-inner { max-width: none; }
@media (max-width: 768px) {
	.gt-hero-slider { height: var(--gt-hero-h-m, 380px); }
	/* Dots sit over the bottom of the slide on a phone, so the content is
	   given room to clear them. */
	.gt-hero--slider .gt-hero-inner { padding-bottom: calc(var(--gt-hero-pad-y, 20px) + 26px); }
}

/* ==========================================================================
   BANNER — the same engine placed anywhere through [gt_banner id="…"].
   The group sets the box (width + proportions, a fixed height, or nothing
   at all when it is sized by its content), each banner paints its own
   background on the shared .gt-slide.
   ========================================================================== */
.gt-banner {
	position: relative;
	width: 100%;
}
.gt-banner--boxed { max-width: var(--gt-banner-max, 1200px); }
.gt-banner-slider--ratio { aspect-ratio: var(--gt-banner-ar, 16/5); }
.gt-banner-slider--height { height: var(--gt-banner-h, 320px); }
.gt-banner .gt-slide-media img { object-fit: var(--gt-banner-fit, cover); }
.gt-banner-inner { padding: clamp(14px, 2.6vw, 40px); }
/* A whole-banner link covers the background but stays under the content
   column, and the column stops swallowing clicks so that text areas fall
   through to it — only the real controls keep their own targets. */
.gt-banner-link {
	position: absolute;
	inset: 0;
	z-index: 2;
}
.gt-slide.is-linked .gt-slide-inner { pointer-events: none; }
.gt-slide.is-linked .gt-layer-btn,
.gt-slide.is-linked a.gt-layer-card,
.gt-slide.is-linked .gt-layer-shortcode { pointer-events: auto; }

@media (max-width: 768px) {
	.gt-banner-slider--height { height: var(--gt-banner-h-m, 240px); }
	/* A group may carry a second proportion just for phones; without one
	   it simply keeps the desktop value. */
	.gt-banner-slider--ratio { aspect-ratio: var(--gt-banner-ar-m, var(--gt-banner-ar, 16/5)); }

	/* "Текст сверху, картинки снизу": the active slide joins the flow so
	   the banner grows with its content, and the freely positioned images
	   drop out of their absolute layer into a column under the text.
	   Inactive slides stay absolute, otherwise the carousel would stack
	   all of its slides on top of each other. */
	.gt-banner--stack .gt-banner-slider {
		aspect-ratio: auto;
		height: auto;
	}
	.gt-banner--stack .gt-slider-viewport {
		position: relative;
		inset: auto;
	}
	.gt-banner--stack .gt-slide {
		position: relative;
		display: flex;
		flex-direction: column;
	}
	.gt-banner--stack .gt-slide:not(.is-active) {
		position: absolute;
		inset: 0;
	}
	.gt-banner--stack .gt-slide-inner {
		order: 1;
		height: auto;
	}
	.gt-banner--stack .gt-slide-objects {
		order: 2;
		position: static;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-end;
		gap: 12px;
		padding: 0 clamp(14px, 4vw, 24px) clamp(14px, 4vw, 24px);
	}
	.gt-banner--stack .gt-slide-obj {
		position: static;
		/* The anchor translate is an inline style — in a flow layout it
		   would just drag the picture off its own row. */
		transform: none !important;
		max-width: 100%;
	}
}
@media (max-width: 480px) {
	/* Proportion-driven banners get very short on a phone; letting them
	   grow to at least a readable box beats squeezing the text out. */
	.gt-banner-slider--ratio { min-height: 190px; }
	.gt-banner--stack .gt-banner-slider--ratio { min-height: 0; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Mobile behaviour of the floating interactive elements:
   win toasts + jackpot counter are hidden entirely, the bonus button
   becomes semi-transparent (full opacity on touch/hover). */
@media (max-width: 782px) {
	.gt-toast-container,
	.gt-jackpot-widget { display: none !important; }

	.gt-bonus-btn { opacity: .3; }
	.gt-bonus-btn:hover,
	.gt-bonus-btn:focus,
	.gt-bonus-btn:active { opacity: 1; }
}

@media (max-width: 992px) {
	.gt-nav { display: none; }
	.gt-header-actions { display: none; }
	.gt-header-right { display: none; }
	.gt-burger { display: flex; }
	.gt-mobile-panel { display: block; }

	.gt-header--mobile-stack .gt-header-row-main {
		flex-wrap: wrap;
		padding-bottom: 14px;
	}
	.gt-header--mobile-stack .gt-header-logo {
		order: 1;
		flex: 1 1 auto;
		min-width: 0;
	}
	.gt-header--mobile-stack .gt-burger { order: 2; }
	.gt-header--mobile-stack .gt-header-row-mobile-auth {
		order: 3;
		display: flex;
		flex: 1 1 100%;
		width: 100%;
		padding-top: 0;
		padding-bottom: 0;
	}

	.gt-header--mobile-row .gt-header-row-main {
		flex-wrap: nowrap;
		gap: 8px;
		padding-bottom: 14px;
	}
	.gt-header--mobile-row .gt-header-row-mobile-auth {
		display: flex;
		align-items: center;
		min-width: 0;
		gap: 6px;
		padding: 0;
	}
	.gt-header--mobile-row .gt-header-row-mobile-auth .gt-btn {
		padding: 8px 10px;
		font-size: 12.5px;
	}
	.gt-header--mobile-row .gt-btn-block {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}

	.gt-header--mobile-logo-btns-burger .gt-header-logo {
		order: 1;
		flex: 0 1 auto;
		min-width: 0;
	}
	.gt-header--mobile-logo-btns-burger .gt-header-row-mobile-auth {
		order: 2;
		flex: 1 1 auto;
	}
	.gt-header--mobile-logo-btns-burger .gt-burger { order: 3; }

	.gt-header--mobile-burger-logo-btns .gt-header-row-main {
		justify-content: flex-start;
	}
	.gt-header--mobile-burger-logo-btns .gt-burger { order: 1; }
	.gt-header--mobile-burger-logo-btns .gt-header-logo {
		order: 2;
		flex: 0 0 auto;
		max-width: none;
		justify-content: flex-start;
	}
	.gt-header--mobile-burger-logo-btns .gt-header-row-mobile-auth {
		order: 3;
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}

	.gt-header--mobile-row .gt-burger { flex-shrink: 0; }
	.gt-header--mobile-row .gt-header-logo { max-width: 42%; }
	.gt-header--mobile-row .gt-logo-img,
	.gt-header--mobile-row img.custom-logo {
		max-width: 100%;
		height: auto;
		max-height: var(--logo-h-m, var(--logo-h));
	}

	body.gt-cookie-visible .gt-jackpot-widget { bottom: 118px; }
	body.gt-cookie-visible .gt-back-to-top { bottom: 118px; }
	body.gt-cookie-visible .gt-bonus-btn { bottom: 186px; }

	/* Compact mobile cookie banner: single-line text in its own mini
	   horizontal-scroll region (never bleeds past the banner edges),
	   two full-width buttons in a single row. */
	.gt-cookie-inner { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 14px; }
	.gt-cookie-text-wrap {
		flex-basis: auto;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		scrollbar-color: var(--color-primary) transparent;
		padding-bottom: 5px;
	}
	.gt-cookie-text-wrap::-webkit-scrollbar { height: 4px; }
	.gt-cookie-text-wrap::-webkit-scrollbar-track { background: transparent; }
	.gt-cookie-text-wrap::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 4px; }
	.gt-cookie-text {
		white-space: nowrap;
		width: max-content;
		max-width: none;
	}
	.gt-cookie-actions { width: 100%; gap: 8px; }
	.gt-cookie-btn { flex: 1 1 50%; }
}

@media (max-width: 600px) {
	.gt-h1 { margin-bottom: 18px; }
	.gt-jackpot-widget { left: 10px; bottom: 10px; padding: 10px 14px; }
	.gt-bonus-btn { right: 10px; bottom: 78px; padding: 10px 14px; font-size: 13px; }
	.gt-back-to-top { right: 10px; bottom: 10px; width: 40px; height: 40px; }
	.gt-toast-container { right: 10px; left: 10px; max-width: none; top: 80px; }
}

/* ==========================================================================
   ==========================================================================
   TYPOGRAPHY VARIANTS
   The base .gt-article-content rules above are the "Default Old" variant
   (body.gt-typo-default-old — no extra rules needed). Each variant below is
   scoped to its body class and overrides every content element: headings,
   paragraphs, links, lists, blockquotes, hr, tables, details, figures.
   ==========================================================================
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variant 2: EDITORIAL — serif magazine classic: refined headings, drop cap,
   centered pull quotes, hairline open tables.
   -------------------------------------------------------------------------- */
body.gt-typo-editorial .gt-article-content { --gt-table-radius: 4px; --gt-img-radius: 4px; }

body.gt-typo-editorial .gt-h1,
body.gt-typo-editorial .gt-article-content h2,
body.gt-typo-editorial .gt-article-content h3,
body.gt-typo-editorial .gt-article-content h4,
body.gt-typo-editorial .gt-article-content h5,
body.gt-typo-editorial .gt-article-content h6 {
	font-family: var(--gt-font-editorial-heading, var(--gt-font-serif)) !important;
	letter-spacing: -.01em;
	font-weight: 700;
}
body.gt-typo-editorial .gt-article-content h2 {
	font-size: 30px;
	margin: 1.8em 0 .6em;
	padding-bottom: .35em;
	border-bottom: 1px solid var(--color-border-table);
}
body.gt-typo-editorial .gt-article-content h3 { font-size: 24px; }
body.gt-typo-editorial .gt-article-content h4 { font-size: 20px; }
body.gt-typo-editorial .gt-article-content h5 { font-size: 17px; font-style: italic; }
body.gt-typo-editorial .gt-article-content h6 { font-size: 15px; text-transform: none; letter-spacing: .02em; color: var(--color-text-muted); }

body.gt-typo-editorial .gt-article-content > p:first-of-type::first-letter {
	font-family: var(--gt-font-editorial-heading, var(--gt-font-serif)) !important;
	float: left;
	font-size: 3.3em;
	line-height: .82;
	font-weight: 700;
	padding: .06em .12em 0 0;
	color: var(--color-primary);
}
body.gt-typo-editorial .gt-article-content a { text-underline-offset: 3px; }

body.gt-typo-editorial .gt-article-content ul > li { padding-left: 1.4em; }
body.gt-typo-editorial .gt-article-content ul > li::before {
	content: "—";
	background: none;
	width: auto;
	height: auto;
	border-radius: 0;
	top: 0;
	color: var(--color-primary);
}
body.gt-typo-editorial .gt-article-content ol > li { padding-left: 1.8em; }
body.gt-typo-editorial .gt-article-content ol > li::before {
	content: counter(gt-ol) ".";
	display: inline;
	background: none;
	border: none;
	border-radius: 0;
	width: auto;
	height: auto;
	font-family: var(--gt-font-editorial-heading, var(--gt-font-serif)) !important;
	font-size: 1em;
	color: var(--color-primary);
}

body.gt-typo-editorial .gt-article-content blockquote {
	background: transparent;
	border: solid var(--color-border-table);
	border-width: 1px 0;
	border-radius: 0;
	margin: 2.2em auto;
	padding: 1.2em 2em;
	text-align: center;
	font-family: var(--gt-font-editorial-heading, var(--gt-font-serif)) !important;
	font-size: 19px;
	line-height: 1.65;
	color: var(--color-text);
}
body.gt-typo-editorial .gt-article-content blockquote::before {
	content: "\201C";
	display: block;
	font-family: var(--gt-font-editorial-heading, var(--gt-font-serif)) !important;
	font-size: 44px;
	line-height: .5;
	margin-bottom: .25em;
	color: var(--color-primary);
}

body.gt-typo-editorial .gt-article-content hr {
	height: 2px;
	max-width: 90px;
	margin: 2.6em auto;
	background: var(--color-primary);
}

body.gt-typo-editorial .gt-article-content .gt-table-scroll { box-shadow: none; }
body.gt-typo-editorial .gt-article-content .gt-table-scroll table { background: transparent; border: none; }
body.gt-typo-editorial .gt-article-content table caption { background: transparent; border-bottom: none; font-style: italic; text-align: center; }
body.gt-typo-editorial .gt-article-content thead th {
	background: transparent;
	color: var(--color-text);
	font-family: var(--gt-font-editorial-heading, var(--gt-font-serif)) !important;
	font-size: 15px;
	text-transform: none;
	letter-spacing: 0;
	border-bottom: 2px solid var(--color-primary);
}
body.gt-typo-editorial .gt-article-content thead th + th { border-left: none !important; }
body.gt-typo-editorial .gt-article-content tbody td + td { border-left: none !important; }
body.gt-typo-editorial .gt-article-content tbody tr:nth-child(even) td { background: transparent; }
body.gt-typo-editorial .gt-article-content tbody tr:hover td { background: color-mix(in srgb, var(--color-primary) 6%, transparent); }

body.gt-typo-editorial .gt-article-content details {
	background: transparent;
	border: solid var(--color-border-table);
	border-width: 1px 0;
	border-radius: 0;
	padding: 15px 4px;
}
body.gt-typo-editorial .gt-article-content details + details { margin-top: -1px; }
body.gt-typo-editorial .gt-article-content summary { font-family: var(--gt-font-editorial-heading, var(--gt-font-serif)) !important; font-size: 17px; }
body.gt-typo-editorial .gt-article-content summary::after { content: "▾"; font-size: 15px; }
body.gt-typo-editorial .gt-article-content details[open] summary::after { transform: rotate(180deg); }
body.gt-typo-editorial .gt-article-content figcaption { font-family: var(--gt-font-editorial-heading, var(--gt-font-serif)) !important; font-style: italic; }

/* --------------------------------------------------------------------------
   Variant 3: MAGAZINE BOLD — heavy uppercase headings with accent bars,
   marker-highlighted strong text, loud striped tables.
   -------------------------------------------------------------------------- */
body.gt-typo-magazine .gt-article-content { --gt-table-radius: 10px; --gt-img-radius: 10px; }

body.gt-typo-magazine .gt-h1 { font-weight: 900; text-transform: uppercase; letter-spacing: .01em; }
body.gt-typo-magazine .gt-article-content h2,
body.gt-typo-magazine .gt-article-content h3,
body.gt-typo-magazine .gt-article-content h4,
body.gt-typo-magazine .gt-article-content h5,
body.gt-typo-magazine .gt-article-content h6 { font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
body.gt-typo-magazine .gt-article-content h2 {
	font-size: 26px;
	font-weight: 900;
	padding-left: 16px;
	border-left: 6px solid var(--color-primary);
}
body.gt-typo-magazine .gt-article-content h3 {
	font-size: 20px;
	padding-left: 13px;
	border-left: 4px solid var(--color-secondary);
}
body.gt-typo-magazine .gt-article-content h4 { font-size: 17px; }
body.gt-typo-magazine .gt-article-content h5 { font-size: 15px; color: var(--color-text-muted); }
body.gt-typo-magazine .gt-article-content h6 { font-size: 13px; color: var(--color-text-muted); }

body.gt-typo-magazine .gt-article-content strong {
	background: linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--color-primary) 35%, transparent) 60%);
	padding: 0 .1em;
}

body.gt-typo-magazine .gt-article-content ul > li::before {
	border-radius: 1px;
	width: 9px;
	height: 9px;
	top: .5em;
	transform: rotate(45deg);
}
body.gt-typo-magazine .gt-article-content ol > li::before {
	background: var(--color-primary);
	color: var(--color-on-primary);
	border: none;
	border-radius: 4px;
	font-weight: 800;
}

body.gt-typo-magazine .gt-article-content blockquote {
	border-left: 6px solid var(--color-secondary);
	border-radius: 0 12px 12px 0;
	background: color-mix(in srgb, var(--color-secondary) 10%, var(--color-surface));
	padding: 20px 24px;
	font-size: 19px;
	font-weight: 700;
	font-style: normal;
	color: var(--color-text);
	line-height: 1.55;
}

body.gt-typo-magazine .gt-article-content hr {
	height: 4px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
	margin: 2.5em 0;
}

body.gt-typo-magazine .gt-article-content thead th {
	background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important;
	font-weight: 800;
}
body.gt-typo-magazine .gt-article-content tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface)); }
body.gt-typo-magazine .gt-article-content tbody tr:hover td { background: color-mix(in srgb, var(--color-primary) 16%, var(--color-surface)); }

body.gt-typo-magazine .gt-article-content details {
	background: var(--color-bg-alt);
	border: none;
	border-left: 4px solid var(--color-primary);
	border-radius: 0 10px 10px 0;
}
body.gt-typo-magazine .gt-article-content details + details { margin-top: 8px; }
body.gt-typo-magazine .gt-article-content summary { text-transform: uppercase; font-weight: 800; font-size: 14px; letter-spacing: .04em; }

/* --------------------------------------------------------------------------
   Variant 4: ROYAL VIP — gold-trimmed luxury elegance for a high-roller feel:
   thin gold rules, diamond bullets, gilded double-line tables.
   -------------------------------------------------------------------------- */
body.gt-typo-royal .gt-article-content { --gt-table-radius: 10px; --gt-img-radius: 10px; }

body.gt-typo-royal .gt-h1 { letter-spacing: .01em; }
body.gt-typo-royal .gt-article-content h2 {
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 700;
	padding-bottom: .4em;
	border-bottom: 2px solid var(--color-primary);
}
body.gt-typo-royal .gt-article-content h3 {
	color: var(--color-primary);
	padding-left: .6em;
	border-left: 3px solid var(--color-primary);
}
body.gt-typo-royal .gt-article-content h4,
body.gt-typo-royal .gt-article-content h5 { letter-spacing: .02em; }
body.gt-typo-royal .gt-article-content h6 { color: var(--color-primary); letter-spacing: .12em; }

body.gt-typo-royal .gt-article-content a { text-decoration-color: var(--color-primary); }

body.gt-typo-royal .gt-article-content ul > li::before {
	content: "\25C6";
	background: none;
	width: auto;
	height: auto;
	border-radius: 0;
	top: 0;
	font-size: .75em;
	color: var(--color-primary);
}
body.gt-typo-royal .gt-article-content ol > li::before {
	background: transparent;
	border: 1px solid var(--color-primary);
	color: var(--color-primary);
	font-weight: 700;
}

body.gt-typo-royal .gt-article-content blockquote {
	background: var(--color-surface);
	border: none;
	border-top: 2px solid var(--color-primary);
	border-bottom: 2px solid var(--color-primary);
	border-radius: 0;
	text-align: center;
	font-style: italic;
	color: var(--color-text);
	padding: 24px 30px;
}
body.gt-typo-royal .gt-article-content blockquote::before {
	content: "\201C";
	display: block;
	font-size: 30px;
	font-style: normal;
	line-height: 1;
	color: var(--color-primary);
	margin-bottom: 6px;
}

body.gt-typo-royal .gt-article-content hr {
	height: 1px;
	max-width: 260px;
	margin: 2.6em auto;
	background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
	position: relative;
}
body.gt-typo-royal .gt-article-content hr::after {
	content: "\25C6";
	position: relative;
	display: block;
	top: -9px;
	text-align: center;
	color: var(--color-primary);
	font-size: 12px;
	background: var(--color-bg);
	width: 20px;
	margin: 0 auto;
}

/* Intentionally no special table border override here — every variant now
   shares the same thin, generated-colour hairline from the base rule so
   tables never get an unwanted bright "frame" (see .gt-table-scroll table
   near the top of this file). */
body.gt-typo-royal .gt-article-content thead th {
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover)) !important;
	letter-spacing: .08em;
}
body.gt-typo-royal .gt-article-content thead th + th { border-left: 1px solid color-mix(in srgb, var(--color-on-primary) 20%, transparent) !important; }
body.gt-typo-royal .gt-article-content tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)); }
body.gt-typo-royal .gt-article-content tbody tr:hover td { background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface)); }

body.gt-typo-royal .gt-article-content details {
	background: var(--color-surface);
	border: 1px solid var(--color-primary);
	border-radius: 4px;
}
body.gt-typo-royal .gt-article-content summary { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
body.gt-typo-royal .gt-article-content summary::after { color: var(--color-primary); }

/* --------------------------------------------------------------------------
   Variant 5: NEO BRUTAL — thick borders, hard offset shadows, square
   corners, inverted table header, maximum contrast.
   -------------------------------------------------------------------------- */
body.gt-typo-brutal .gt-article-content { --gt-table-radius: 0; --gt-img-radius: 0; }

body.gt-typo-brutal .gt-h1 { font-weight: 900; text-transform: uppercase; }
body.gt-typo-brutal .gt-article-content h2 {
	display: inline-block;
	font-size: 23px;
	font-weight: 900;
	text-transform: uppercase;
	background: var(--color-primary);
	color: var(--color-on-primary);
	padding: .28em .55em;
	border: 2px solid var(--color-text);
	box-shadow: 5px 5px 0 var(--color-text);
}
body.gt-typo-brutal .gt-article-content h3 {
	display: inline-block;
	font-size: 20px;
	font-weight: 900;
	text-transform: uppercase;
	border-bottom: 3px solid var(--color-primary);
	padding-bottom: 3px;
}
body.gt-typo-brutal .gt-article-content h4,
body.gt-typo-brutal .gt-article-content h5,
body.gt-typo-brutal .gt-article-content h6 { font-weight: 900; text-transform: uppercase; }

body.gt-typo-brutal .gt-article-content a {
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 2px;
}

body.gt-typo-brutal .gt-article-content ul > li::before {
	border-radius: 0;
	width: 9px;
	height: 9px;
	background: var(--color-text);
}
body.gt-typo-brutal .gt-article-content ol > li::before {
	border-radius: 0;
	border: 2px solid var(--color-text);
	background: var(--color-surface);
	color: var(--color-text);
	font-weight: 900;
}

body.gt-typo-brutal .gt-article-content blockquote {
	background: var(--color-surface);
	border: 2px solid var(--color-text);
	border-radius: 0;
	box-shadow: 6px 6px 0 var(--color-secondary);
	font-style: normal;
	font-weight: 600;
	color: var(--color-text);
	padding: 18px 22px;
}

body.gt-typo-brutal .gt-article-content hr { height: 4px; background: var(--color-text); }

body.gt-typo-brutal .gt-article-content .gt-table-scroll {
	box-shadow: 7px 7px 0 color-mix(in srgb, var(--color-text) 22%, transparent);
}
/* No accent-coloured table frame — see the comment near the Royal variant above. */
body.gt-typo-brutal .gt-article-content thead th {
	background: var(--color-text);
	color: var(--color-bg);
	font-weight: 900;
}
body.gt-typo-brutal .gt-article-content thead th + th { border-left: 1px solid color-mix(in srgb, var(--color-bg) 35%, transparent) !important; }
body.gt-typo-brutal .gt-article-content tbody td { border-bottom: 1px solid color-mix(in srgb, var(--color-text) 45%, transparent) !important; }
body.gt-typo-brutal .gt-article-content tbody td + td { border-left: 1px solid color-mix(in srgb, var(--color-text) 25%, transparent) !important; }
body.gt-typo-brutal .gt-article-content tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--color-text) 5%, var(--color-surface)); }
body.gt-typo-brutal .gt-article-content tbody tr:hover td { background: color-mix(in srgb, var(--color-primary) 25%, var(--color-surface)); }

body.gt-typo-brutal .gt-article-content details {
	background: var(--color-surface);
	border: 2px solid var(--color-text);
	border-radius: 0;
	box-shadow: 4px 4px 0 var(--color-primary);
}
body.gt-typo-brutal .gt-article-content details + details { margin-top: 12px; }
body.gt-typo-brutal .gt-article-content summary { text-transform: uppercase; font-weight: 900; }
body.gt-typo-brutal .gt-article-content summary::after { color: var(--color-text); font-weight: 900; }
@layer gt-base-reset {
	body.gt-typo-brutal .gt-article-content img {
		border: 2px solid var(--color-text);
		box-shadow: 6px 6px 0 color-mix(in srgb, var(--color-text) 25%, transparent);
	}
}

/* --------------------------------------------------------------------------
   Variant 6: JACKPOT ARCADE — playful casino-chip energy: coin-badge
   headings, cycling suit bullets, chip-numbered lists, striped tables.
   -------------------------------------------------------------------------- */
body.gt-typo-arcade .gt-article-content { --gt-table-radius: 14px; --gt-img-radius: 14px; }

body.gt-typo-arcade .gt-article-content h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 800;
}
body.gt-typo-arcade .gt-article-content h2::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
	box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-on-primary) 25%, transparent);
}
body.gt-typo-arcade .gt-article-content h3 { font-weight: 700; color: var(--color-primary); }

body.gt-typo-arcade .gt-article-content ul { counter-reset: gt-suit; }
body.gt-typo-arcade .gt-article-content ul > li { counter-increment: gt-suit; }
body.gt-typo-arcade .gt-article-content ul > li::before {
	content: "\2660";
	background: none;
	width: auto;
	height: auto;
	border-radius: 0;
	top: 0;
	font-size: 1em;
	color: var(--color-primary);
}
body.gt-typo-arcade .gt-article-content ul > li:nth-child(4n+2)::before { content: "\2665"; color: var(--color-danger); }
body.gt-typo-arcade .gt-article-content ul > li:nth-child(4n+3)::before { content: "\2666"; color: var(--color-secondary); }
body.gt-typo-arcade .gt-article-content ul > li:nth-child(4n+4)::before { content: "\2663"; color: var(--color-text); }
body.gt-typo-arcade .gt-article-content ol > li::before {
	background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
	border: none;
	color: var(--color-on-primary);
	font-weight: 800;
	box-shadow: 0 2px 6px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

body.gt-typo-arcade .gt-article-content blockquote {
	background: var(--color-surface);
	border: 2px solid var(--color-primary);
	border-radius: 16px;
	padding: 18px 22px;
	font-style: normal;
	font-weight: 600;
	color: var(--color-text);
	box-shadow: 4px 4px 0 color-mix(in srgb, var(--color-secondary) 55%, transparent);
}

body.gt-typo-arcade .gt-article-content hr {
	height: 8px;
	background: repeating-linear-gradient(90deg, var(--color-primary) 0 10px, var(--color-secondary) 10px 20px);
	border-radius: 999px;
	margin: 2.4em 0;
}

body.gt-typo-arcade .gt-article-content .gt-table-scroll {
	box-shadow: 0 10px 26px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
body.gt-typo-arcade .gt-article-content thead th {
	background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)) !important;
	font-weight: 800;
}
body.gt-typo-arcade .gt-article-content tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--color-secondary) 8%, var(--color-surface)); }
body.gt-typo-arcade .gt-article-content tbody tr:hover td { background: color-mix(in srgb, var(--color-primary) 16%, var(--color-surface)); }

body.gt-typo-arcade .gt-article-content details {
	background: var(--color-surface);
	border: 2px solid var(--color-secondary);
	border-radius: 14px;
}
body.gt-typo-arcade .gt-article-content summary { font-weight: 800; }
body.gt-typo-arcade .gt-article-content summary::after {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
	color: var(--color-on-primary);
	font-size: 13px;
}

/* --------------------------------------------------------------------------
   Variant 7: CASINO NOIR — moody high-contrast elegance: uppercase
   letter-spaced headings, spade motif, restrained dark table styling.
   -------------------------------------------------------------------------- */
body.gt-typo-noir .gt-article-content { --gt-table-radius: 6px; --gt-img-radius: 6px; }

body.gt-typo-noir .gt-h1 { text-transform: uppercase; letter-spacing: .04em; }
body.gt-typo-noir .gt-article-content h2 {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 700;
	padding-bottom: .3em;
	border-bottom: 1px solid var(--color-border-table);
}
body.gt-typo-noir .gt-article-content h2::before { content: "\2660  "; color: var(--color-primary); }
body.gt-typo-noir .gt-article-content h3 { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--color-text-muted); }
body.gt-typo-noir .gt-article-content h4,
body.gt-typo-noir .gt-article-content h5,
body.gt-typo-noir .gt-article-content h6 { letter-spacing: .04em; }

body.gt-typo-noir .gt-article-content a { text-decoration-color: var(--color-primary); }

body.gt-typo-noir .gt-article-content ul > li::before {
	content: "\2013";
	background: none;
	width: auto;
	height: auto;
	border-radius: 0;
	top: 0;
	color: var(--color-primary);
	font-weight: 700;
}
body.gt-typo-noir .gt-article-content ol > li::before {
	background: transparent;
	border: 1px solid var(--color-border-table);
	color: var(--color-text-muted);
}

body.gt-typo-noir .gt-article-content blockquote {
	background: var(--color-bg);
	border: none;
	border-left: 2px solid var(--color-primary);
	border-radius: 0;
	font-style: italic;
	color: var(--color-text-muted);
}

body.gt-typo-noir .gt-article-content hr {
	height: 1px;
	background: var(--color-border-table);
	max-width: 100%;
	position: relative;
}
body.gt-typo-noir .gt-article-content hr::after {
	content: "\2660";
	position: relative;
	display: block;
	top: -8px;
	text-align: center;
	color: var(--color-primary);
	font-size: 13px;
	background: var(--color-bg);
	width: 22px;
	margin: 0 auto;
}

body.gt-typo-noir .gt-article-content .gt-table-scroll table { border: 1px solid var(--color-border-table) !important; }
body.gt-typo-noir .gt-article-content thead th {
	background: var(--color-bg) !important;
	color: var(--color-primary) !important;
	text-transform: uppercase;
	letter-spacing: .08em;
	border-bottom: 1px solid var(--color-primary) !important;
}
body.gt-typo-noir .gt-article-content thead th + th { border-left: 1px solid var(--color-border-table) !important; }
body.gt-typo-noir .gt-article-content tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--color-bg) 55%, var(--color-surface)); }
body.gt-typo-noir .gt-article-content tbody tr:hover td { background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); }

body.gt-typo-noir .gt-article-content details {
	background: var(--color-bg);
	border: 1px solid var(--color-border-table);
	border-radius: 6px;
}
body.gt-typo-noir .gt-article-content summary { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
body.gt-typo-noir .gt-article-content summary::after { color: var(--color-primary); }

/* --------------------------------------------------------------------------
   Variant 8: SLOT REEL — energetic reel-window framed headings, circular
   reel-symbol markers, striped "payline" tables.
   -------------------------------------------------------------------------- */
body.gt-typo-reel .gt-article-content { --gt-table-radius: 10px; --gt-img-radius: 10px; }

body.gt-typo-reel .gt-article-content h2 {
	font-weight: 800;
	padding: .3em 0;
	border-top: 3px solid var(--color-primary);
	border-bottom: 3px solid var(--color-primary);
}
body.gt-typo-reel .gt-article-content h3 {
	font-weight: 700;
	padding-left: .5em;
	border-left: 4px solid var(--color-secondary);
}

body.gt-typo-reel .gt-article-content ul > li::before {
	border-radius: 50%;
	width: 10px;
	height: 10px;
	top: .5em;
	background: var(--color-primary);
	box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-on-primary) 30%, transparent);
}
body.gt-typo-reel .gt-article-content ol > li::before {
	border-radius: 50%;
	background: var(--color-bg-alt);
	border: 2px solid var(--color-primary);
	color: var(--color-primary);
	font-weight: 800;
}

body.gt-typo-reel .gt-article-content blockquote {
	background: var(--color-surface);
	border-style: dashed;
	border-width: 2px;
	border-color: var(--color-secondary);
	border-radius: 10px;
	font-style: normal;
	color: var(--color-text);
}

body.gt-typo-reel .gt-article-content hr {
	height: 5px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-primary));
	margin: 2.5em 0;
}

/* No accent-coloured table frame — see the comment near the Royal variant above. */
body.gt-typo-reel .gt-article-content thead th {
	background: linear-gradient(90deg, var(--color-secondary), var(--color-primary)) !important;
}
body.gt-typo-reel .gt-article-content tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--color-secondary) 8%, var(--color-surface)); }
body.gt-typo-reel .gt-article-content tbody tr:hover td { background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface)); }

body.gt-typo-reel .gt-article-content details {
	background: var(--color-surface);
	border: 2px dashed var(--color-primary);
	border-radius: 10px;
}
body.gt-typo-reel .gt-article-content summary { font-weight: 700; }
body.gt-typo-reel .gt-article-content summary::after {
	border-radius: 50%;
	background: var(--color-bg-alt);
	border: 2px solid var(--color-primary);
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
}

/* --------------------------------------------------------------------------
   Variant 9: POKER FELT — card-table atmosphere: thick rounded "rail"
   borders, felt-tinted panels, club-suit accents.
   -------------------------------------------------------------------------- */
body.gt-typo-felt .gt-article-content { --gt-table-radius: 20px; --gt-img-radius: 16px; }

body.gt-typo-felt .gt-article-content h2 {
	font-weight: 800;
	padding-bottom: .35em;
	border-bottom: 4px solid color-mix(in srgb, var(--color-secondary) 60%, var(--color-primary));
	border-radius: 0 0 6px 6px;
}
body.gt-typo-felt .gt-article-content h2::before { content: "\2663  "; color: var(--color-secondary); }
body.gt-typo-felt .gt-article-content h3 { font-weight: 700; color: var(--color-secondary); }

body.gt-typo-felt .gt-article-content ul > li::before {
	border-radius: 50%;
	width: 10px;
	height: 10px;
	top: .5em;
	background: var(--color-secondary);
}
body.gt-typo-felt .gt-article-content ol > li::before {
	background: color-mix(in srgb, var(--color-secondary) 18%, var(--color-surface));
	border: none;
	color: var(--color-secondary);
}

body.gt-typo-felt .gt-article-content blockquote {
	background: color-mix(in srgb, var(--color-secondary) 10%, var(--color-surface));
	border: 3px solid color-mix(in srgb, var(--color-secondary) 45%, var(--color-border));
	border-radius: 20px;
	font-style: normal;
	color: var(--color-text);
}

body.gt-typo-felt .gt-article-content hr {
	height: 6px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--color-secondary) 55%, var(--color-primary));
	margin: 2.5em 0;
}

/* No accent-coloured table frame — see the comment near the Royal variant above. */
body.gt-typo-felt .gt-article-content thead th {
	background: color-mix(in srgb, var(--color-secondary) 30%, var(--color-surface)) !important;
	color: var(--color-text) !important;
	text-transform: none;
	letter-spacing: 0;
	font-size: 13px;
}
body.gt-typo-felt .gt-article-content thead th + th { border-left: 1px solid color-mix(in srgb, var(--color-bg) 25%, transparent) !important; }
body.gt-typo-felt .gt-article-content tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--color-secondary) 7%, var(--color-surface)); }
body.gt-typo-felt .gt-article-content tbody tr:hover td { background: color-mix(in srgb, var(--color-secondary) 16%, var(--color-surface)); }

body.gt-typo-felt .gt-article-content details {
	background: color-mix(in srgb, var(--color-secondary) 8%, var(--color-surface));
	border: 3px solid color-mix(in srgb, var(--color-secondary) 40%, var(--color-border));
	border-radius: 18px;
}
body.gt-typo-felt .gt-article-content summary { font-weight: 700; }
body.gt-typo-felt .gt-article-content summary::after { color: var(--color-secondary); }

/* --------------------------------------------------------------------------
   Variant 10: DIAMOND ELITE — premium faceted gem aesthetic: gradient-clip
   headings, cut-corner panels, angular accents.
   -------------------------------------------------------------------------- */
body.gt-typo-diamond .gt-article-content { --gt-table-radius: 4px; --gt-img-radius: 4px; }

body.gt-typo-diamond .gt-h1,
body.gt-typo-diamond .gt-article-content h2 {
	background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	font-weight: 800;
	width: fit-content;
}
body.gt-typo-diamond .gt-article-content h2::before { content: "\25C6  "; -webkit-text-fill-color: var(--color-primary); color: var(--color-primary); }
body.gt-typo-diamond .gt-article-content h3 { font-weight: 700; color: var(--color-secondary); }

body.gt-typo-diamond .gt-article-content ul > li::before {
	content: "\25C6";
	background: none;
	width: auto;
	height: auto;
	border-radius: 0;
	top: 0;
	font-size: .7em;
	color: var(--color-primary);
}
body.gt-typo-diamond .gt-article-content ol > li::before {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-secondary);
	color: var(--color-secondary);
	border-radius: 2px;
	clip-path: polygon(20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%, 0 20%);
}

body.gt-typo-diamond .gt-article-content blockquote {
	background: var(--color-surface);
	border: none;
	border-left: 3px solid var(--color-primary);
	border-radius: 0;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 24px 100%, 0 calc(100% - 24px));
	font-style: normal;
	color: var(--color-text);
}

body.gt-typo-diamond .gt-article-content hr {
	height: 2px;
	max-width: 240px;
	margin: 2.6em auto;
	background: linear-gradient(90deg, transparent, var(--color-primary), var(--color-secondary), transparent);
}

/* No accent-coloured table frame — see the comment near the Royal variant above. */
body.gt-typo-diamond .gt-article-content thead th {
	background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)) !important;
	position: relative;
}
body.gt-typo-diamond .gt-article-content thead th:first-child { clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px); }
body.gt-typo-diamond .gt-article-content thead th:last-child { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
body.gt-typo-diamond .gt-article-content tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)); }
body.gt-typo-diamond .gt-article-content tbody tr:hover td { background: color-mix(in srgb, var(--color-secondary) 12%, var(--color-surface)); }

body.gt-typo-diamond .gt-article-content details {
	background: var(--color-surface);
	border: 1px solid var(--color-primary);
	border-radius: 0;
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
body.gt-typo-diamond .gt-article-content summary { font-weight: 700; }
body.gt-typo-diamond .gt-article-content summary::after { content: "\25C6"; color: var(--color-secondary); font-size: 11px; }