/*!
 * TemplateHive — core stylesheet
 * Design tokens first, then layout, components and utilities.
 * No framework, no resets beyond what is actually needed.
 */

/* ============================================================ 1. Tokens */

:root {
	--th-font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--th-font-heading: var(--th-font-system);
	--th-font-body: var(--th-font-system);
	--th-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--th-primary: #4f46e5;
	--th-primary-rgb: 79, 70, 229;
	--th-primary-dark: #4038bc;
	--th-primary-soft: #eef2ff;
	--th-accent: #8b5cf6;
	--th-accent-rgb: 139, 92, 246;
	--th-gradient: linear-gradient(135deg, #4f46e5, #8b5cf6);

	--th-ink: #0f172a;
	--th-body: #475569;
	--th-muted: #94a3b8;
	--th-line: #e2e8f0;
	--th-line-soft: #f1f5f9;
	--th-surface: #ffffff;
	--th-bg: #f8fafc;
	--th-bg-deep: #0b1120;

	--th-success: #059669;
	--th-warning: #d97706;
	--th-danger: #dc2626;
	--th-star: #f59e0b;

	--th-radius: 16px;
	--th-radius-sm: 10px;
	--th-radius-lg: 22px;
	--th-radius-pill: 999px;

	--th-shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
	--th-shadow-sm: 0 2px 6px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
	--th-shadow-md: 0 12px 28px -12px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .05);
	--th-shadow-lg: 0 28px 60px -24px rgba(15, 23, 42, .3);
	--th-shadow-brand: 0 14px 30px -12px rgba(var(--th-primary-rgb), .55);

	--th-container: 1240px;
	--th-gutter: clamp(16px, 4vw, 32px);
	/* --th-header-min is authored here and never written by JS. It is the
	   design height of the header bar. --th-header-h is the *measured*
	   height, kept in sync by theme.js for sticky offsets only. Keeping the
	   two separate stops the header from feeding its own height back into
	   min-height and growing on every resize observation. */
	--th-header-min: 74px;
	--th-header-h: 74px;

	--th-ease: cubic-bezier(.4, 0, .2, 1);
	--th-fast: .18s var(--th-ease);
	--th-base: .28s var(--th-ease);
}

/* ============================================================== 2. Base */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--th-header-h) + 24px);
	/* Deliberately no overflow-x here. Setting it on the root makes body the
	   scrollport, which computes body's overflow-y to auto and silently kills
	   every position:sticky in the theme (header, sidebar, filters, buy
	   card). Horizontal containment stays on body, as below. */
}

body {
	margin: 0;
	font-family: var(--th-font-body);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--th-body);
	background: var(--th-surface);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.thc-no-scroll {
	overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	font-family: var(--th-font-heading);
	color: var(--th-ink);
	line-height: 1.18;
	letter-spacing: -.021em;
	font-weight: 700;
	text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem); }
h2 { font-size: clamp(1.65rem, 1.2rem + 1.7vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
h4 { font-size: 1.15rem; }
h5 { font-size: 1rem; }
h6 { font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a {
	color: var(--th-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--th-fast);
}

a:hover { color: var(--th-primary-dark); }

:focus-visible {
	outline: 2px solid var(--th-primary);
	outline-offset: 3px;
	border-radius: 4px;
}

img, svg, video, iframe {
	max-width: 100%;
	height: auto;
	display: block;
}

ul, ol { padding-left: 1.25em; }

blockquote {
	margin: 2rem 0;
	padding: 1.25rem 1.5rem;
	border-left: 3px solid var(--th-primary);
	background: var(--th-bg);
	border-radius: 0 var(--th-radius-sm) var(--th-radius-sm) 0;
	font-size: 1.06rem;
	color: var(--th-ink);
}

code, kbd, pre {
	font-family: var(--th-font-mono);
	font-size: .9em;
}

code {
	background: var(--th-line-soft);
	padding: .15em .4em;
	border-radius: 5px;
	color: var(--th-ink);
}

pre {
	background: var(--th-bg-deep);
	color: #e2e8f0;
	padding: 1.25rem;
	border-radius: var(--th-radius-sm);
	overflow-x: auto;
}

pre code { background: none; color: inherit; padding: 0; }

hr {
	border: 0;
	border-top: 1px solid var(--th-line);
	margin: 2.5rem 0;
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
}

th, td {
	padding: .8rem 1rem;
	border-bottom: 1px solid var(--th-line);
	text-align: left;
}

th { color: var(--th-ink); font-weight: 600; }

.thc-icon { flex: 0 0 auto; }
.th-flip { transform: scaleX(-1); }

/* WordPress core classes (style.css is not enqueued, so they live here too). */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background: var(--th-surface);
	border-radius: 8px;
	box-shadow: var(--th-shadow-md);
	clip-path: none;
	color: var(--th-primary);
	display: block;
	font-size: .9rem;
	font-weight: 600;
	height: auto;
	left: 16px;
	line-height: normal;
	padding: 14px 22px;
	text-decoration: none;
	top: 16px;
	width: auto;
	z-index: 100000;
}

.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text,
.gallery-caption { font-size: .85rem; color: var(--th-muted); }
.sticky { position: relative; }

/* ============================================================ 3. Layout */

.th-container {
	width: 100%;
	max-width: var(--th-container);
	margin-inline: auto;
	padding-inline: var(--th-gutter);
}

.th-container--narrow { max-width: 820px; }
.th-container--wide { max-width: 1440px; }

.th-section { padding-block: clamp(48px, 6vw, 88px); }
.th-section--tight { padding-block: clamp(36px, 4vw, 56px); }
.th-section--muted { background: var(--th-bg); }
.th-section--dark { background: var(--th-bg-deep); color: #cbd5e1; }
.th-section--dark h2, .th-section--dark h3 { color: #fff; }

.th-main { min-height: 50vh; }

.th-grid { display: grid; gap: clamp(18px, 2vw, 26px); }
.th-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.th-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.th-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
	.th-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.th-grid--3, .th-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
	.th-grid--2, .th-grid--3, .th-grid--4 { grid-template-columns: 1fr; }
}

.th-with-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

@media (max-width: 1000px) {
	.th-with-sidebar { grid-template-columns: 1fr; }
}

.th-no-sidebar .th-with-sidebar { grid-template-columns: minmax(0, 1fr); }

/* =========================================================== 4. Buttons */

.th-btn {
	--btn-radius: var(--th-radius-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	padding: .78em 1.5em;
	border: 1px solid transparent;
	border-radius: var(--btn-radius);
	font: inherit;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: transform var(--th-fast), box-shadow var(--th-base), background var(--th-fast), color var(--th-fast), border-color var(--th-fast);
}

.th-buttons--pill .th-btn { --btn-radius: var(--th-radius-pill); }
.th-buttons--square .th-btn { --btn-radius: 4px; }

.th-btn:active { transform: translateY(1px); }

.th-btn--primary {
	background: var(--th-gradient);
	color: #fff;
	box-shadow: var(--th-shadow-brand);
}

.th-btn--primary:hover {
	color: #fff;
	filter: brightness(1.06);
	box-shadow: 0 18px 34px -14px rgba(var(--th-primary-rgb), .7);
}

.th-btn--solid {
	background: var(--th-ink);
	color: #fff;
}

.th-btn--solid:hover { background: #1e293b; color: #fff; }

.th-btn--ghost {
	background: var(--th-surface);
	color: var(--th-ink);
	border-color: var(--th-line);
	box-shadow: var(--th-shadow-xs);
}

.th-btn--ghost:hover {
	border-color: rgba(var(--th-primary-rgb), .45);
	color: var(--th-primary);
	box-shadow: var(--th-shadow-sm);
}

.th-btn--soft {
	background: var(--th-primary-soft);
	color: var(--th-primary-dark);
}

.th-btn--soft:hover { background: rgba(var(--th-primary-rgb), .16); color: var(--th-primary-dark); }

.th-btn--light {
	background: rgba(255, 255, 255, .12);
	color: #fff;
	border-color: rgba(255, 255, 255, .22);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.th-btn--light:hover { background: rgba(255, 255, 255, .2); color: #fff; }

.th-btn--lg { padding: 1em 1.9em; font-size: 1rem; }
.th-btn--sm { padding: .55em 1em; font-size: .85rem; }
.th-btn--block { width: 100%; }

.th-btn[disabled],
.th-btn.is-busy { opacity: .6; pointer-events: none; }

.th-icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius-sm);
	background: var(--th-surface);
	color: var(--th-ink);
	cursor: pointer;
	transition: border-color var(--th-fast), color var(--th-fast), background var(--th-fast);
}

.th-icon-btn:hover {
	color: var(--th-primary);
	border-color: rgba(var(--th-primary-rgb), .45);
	background: var(--th-primary-soft);
}

.th-badge {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: var(--th-radius-pill);
	background: var(--th-primary);
	color: #fff;
	font-size: .68rem;
	font-weight: 700;
	line-height: 19px;
	text-align: center;
}

.th-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	font-weight: 600;
	font-size: .95rem;
	text-decoration: none;
}

.th-link-arrow svg { transition: transform var(--th-fast); }
.th-link-arrow:hover svg { transform: translateX(3px); }

/* ============================================================ 5. Header */

.th-topbar {
	background: var(--th-ink);
	color: #cbd5e1;
	font-size: .85rem;
	text-align: center;
	padding: .6rem 0;
}

.th-topbar a { color: #fff; font-weight: 600; }

.th-header {
	position: relative;
	z-index: 60;
	background: rgba(255, 255, 255, .88);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid var(--th-line);
}

.th-sticky-header .th-header {
	position: sticky;
	top: 0;
}

.th-header.is-stuck { box-shadow: var(--th-shadow-sm); }

.th-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(12px, 2vw, 28px);
	min-height: var(--th-header-min);
}

.th-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 1.2rem;
	font-weight: 800;
	letter-spacing: -.025em;
	color: var(--th-ink);
	text-decoration: none;
	flex: 0 0 auto;
}

.th-brand:hover { color: var(--th-ink); }
.th-brand img { max-height: 40px; width: auto; }

.th-brand__mark {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--th-gradient);
	color: #fff;
	font-size: .95rem;
	font-weight: 800;
}

.th-nav { margin-inline: auto; }

.th-nav ul {
	display: flex;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.th-nav .th-menu-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: .55rem .7rem;
	border-radius: 8px;
	color: var(--th-ink);
	font-size: .94rem;
	font-weight: 500;
	white-space: nowrap;
	text-decoration: none;
	transition: color var(--th-fast), background var(--th-fast);
}

.th-nav li > .th-menu-link:hover,
.th-nav .current-menu-item > .th-menu-link,
.th-nav .current_page_item > .th-menu-link {
	color: var(--th-primary);
	background: var(--th-primary-soft);
}

.th-nav .th-menu-caret { display: inline-flex; transform: rotate(90deg); opacity: .55; }
.th-nav .th-submenu-toggle { display: none; }

.th-nav li { position: relative; }

.th-submenu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	min-width: 230px;
	padding: 8px;
	background: var(--th-surface);
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
	box-shadow: var(--th-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--th-fast), transform var(--th-fast), visibility var(--th-fast);
	display: block;
}

.th-submenu li { display: block; }

.th-submenu .th-menu-link {
	display: block;
	padding: .55rem .7rem;
	border-radius: 8px;
	font-size: .92rem;
}

/* Desktop only. Unscoped, this beat the mobile drawer's collapsed-submenu
   rule on specificity, so simply focusing a parent link on a phone revealed
   a submenu that is still clipped to max-height:0 — putting invisible links
   back in the tab order while the toggle still reads aria-expanded="false". */
@media (min-width: 981px) {
	.th-nav li:hover > .th-submenu,
	.th-nav li:focus-within > .th-submenu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
}

.th-header__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.th-header__search { width: min(280px, 26vw); }

.th-burger { display: none; }

@media (max-width: 1100px) {
	.th-header__search { display: none; }
}

@media (max-width: 980px) {
	.th-nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(360px, 86vw);
		margin: 0;
		padding: 88px 20px 32px;
		background: var(--th-surface);
		box-shadow: var(--th-shadow-lg);
		transform: translateX(100%);
		/* visibility keeps the off-screen drawer out of the tab order and
		   stops it extending the scrollable area sideways. */
		visibility: hidden;
		transition: transform var(--th-base), visibility 0s linear var(--th-base);
		overflow-y: auto;
		z-index: 70;
	}

	.th-nav.is-open {
		transform: translateX(0);
		visibility: visible;
		transition: transform var(--th-base), visibility 0s;
	}

	.th-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
	.th-nav .th-menu-link { padding: .8rem .9rem; font-size: 1rem; }
	.th-nav .th-menu-caret { display: none; }

	.th-nav .th-submenu {
		position: static;
		opacity: 1;
		/* Collapsed submenus are clipped to zero height, so hide them from the
		   tab order too — otherwise their links stay keyboard-reachable while
		   the toggle reports aria-expanded="false". */
		visibility: hidden;
		transform: none;
		box-shadow: none;
		border: 0;
		border-left: 2px solid var(--th-line);
		border-radius: 0;
		margin: 0 0 6px 12px;
		padding: 0 0 0 6px;
		max-height: 0;
		overflow: hidden;
		transition: max-height var(--th-base);
	}

	.th-nav .th-has-children.is-open > .th-submenu { max-height: 600px; visibility: visible; }

	.th-nav .th-submenu-toggle {
		display: grid;
		place-items: center;
		position: absolute;
		top: 4px;
		right: 4px;
		width: 40px;
		height: 40px;
		border: 0;
		background: none;
		color: var(--th-body);
		cursor: pointer;
		transform: rotate(90deg);
		transition: transform var(--th-fast);
	}

	.th-nav .th-has-children.is-open > .th-submenu-toggle { transform: rotate(-90deg); }

	.th-burger { display: inline-flex; }
	.th-header__cta { display: none; }

	.th-overlay {
		position: fixed;
		inset: 0;
		background: rgba(15, 23, 42, .45);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--th-base), visibility var(--th-base);
		z-index: 65;
	}

	.th-overlay.is-visible { opacity: 1; visibility: visible; }
}

/* ============================================================= 6. Search */

.th-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--th-surface);
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius-pill);
	padding: 5px 6px 5px 14px;
	box-shadow: var(--th-shadow-xs);
	transition: border-color var(--th-fast), box-shadow var(--th-fast);
}

.th-search:focus-within {
	border-color: rgba(var(--th-primary-rgb), .5);
	box-shadow: 0 0 0 4px rgba(var(--th-primary-rgb), .12);
}

.th-search__icon { color: var(--th-muted); display: inline-flex; }

.th-search input.th-search__input,
.th-search__input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: .95rem;
	color: var(--th-ink);
	padding: .5rem 0;
}

.th-search input.th-search__input:focus,
.th-search__input:focus { outline: none; box-shadow: none; border: 0; }
.th-search__input::placeholder { color: var(--th-muted); }
.th-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.th-search__submit { border-radius: var(--th-radius-pill); padding: .6em 1.2em; }

.th-search--lg { padding: 8px 8px 8px 20px; }
.th-search--lg .th-search__input { font-size: 1.05rem; padding: .7rem 0; }
.th-search--sm .th-search__submit { display: none; }

@media (max-width: 640px) {
	.th-search--lg .th-search__submit span { display: none; }
	.th-search--lg .th-search__submit::after { content: "→"; }
}

.thc-suggest {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	right: 0;
	max-height: min(60vh, 460px);
	overflow-y: auto;
	background: var(--th-surface);
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
	box-shadow: var(--th-shadow-md);
	padding: 8px;
	z-index: 80;
	text-align: left;
}

.thc-suggest__title {
	margin: 8px 10px 4px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--th-muted);
}

.thc-suggest__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: var(--th-radius-sm);
	color: var(--th-ink);
	text-decoration: none;
	font-size: .93rem;
}

.thc-suggest__item img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.thc-suggest__item:hover,
.thc-suggest__item.is-active { background: var(--th-primary-soft); color: var(--th-primary-dark); }
.thc-suggest__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thc-suggest__meta { color: var(--th-muted); font-size: .82rem; white-space: nowrap; }

.thc-suggest__all {
	display: block;
	margin-top: 6px;
	padding: 10px;
	border-top: 1px solid var(--th-line-soft);
	font-size: .9rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.thc-suggest__empty { padding: 18px; text-align: center; color: var(--th-muted); font-size: .92rem; }

.th-search.is-loading .th-search__icon { animation: th-pulse 1s ease-in-out infinite; }

@keyframes th-pulse { 50% { opacity: .35; } }

/* =============================================================== 7. Hero */

.th-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(56px, 8vw, 110px);
	background:
		radial-gradient(900px 420px at 12% -10%, rgba(var(--th-primary-rgb), .16), transparent 65%),
		radial-gradient(760px 380px at 92% 8%, rgba(var(--th-accent-rgb), .16), transparent 60%),
		var(--th-surface);
}

.th-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(15, 23, 42, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(15, 23, 42, .035) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent);
	mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent);
	pointer-events: none;
}

.th-hero__inner { position: relative; z-index: 1; text-align: center; max-width: 860px; margin-inline: auto; }

.th-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	padding: .4rem .9rem;
	border-radius: var(--th-radius-pill);
	background: var(--th-surface);
	border: 1px solid var(--th-line);
	box-shadow: var(--th-shadow-xs);
	font-size: .82rem;
	font-weight: 600;
	color: var(--th-primary-dark);
	letter-spacing: .01em;
}

.th-hero__title { margin-bottom: .45em; }

.th-hero__title .th-highlight {
	background: var(--th-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.th-hero__text {
	font-size: clamp(1.02rem, .98rem + .35vw, 1.18rem);
	color: var(--th-body);
	max-width: 640px;
	margin-inline: auto;
}

.th-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 30px;
}

.th-hero__search { max-width: 640px; margin: 34px auto 0; }

.th-hero__tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 18px;
	font-size: .86rem;
	color: var(--th-muted);
}

.th-hero__tags a {
	padding: .3rem .8rem;
	border-radius: var(--th-radius-pill);
	background: var(--th-surface);
	border: 1px solid var(--th-line);
	color: var(--th-body);
	text-decoration: none;
	transition: all var(--th-fast);
}

.th-hero__tags a:hover { border-color: rgba(var(--th-primary-rgb), .45); color: var(--th-primary); }

.th-hero__stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(24px, 5vw, 56px);
	margin-top: 44px;
	padding-top: 32px;
	border-top: 1px solid var(--th-line);
}

.th-stat__value { font-size: 1.7rem; font-weight: 800; color: var(--th-ink); line-height: 1.1; }
.th-stat__label { font-size: .85rem; color: var(--th-muted); }

/* ====================================================== 8. Section heads */

.th-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: clamp(26px, 3vw, 42px);
}

.th-section-head--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.th-section-head--center .th-section-text { max-width: 620px; margin-inline: auto; }
.th-section-title { margin-bottom: .3em; }
.th-section-text { margin: 0; color: var(--th-body); }

.th-section-head .th-eyebrow { margin-bottom: 12px; }

/* ======================================================== 9. Category cards */

.th-cat-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px;
	background: var(--th-surface);
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
	text-decoration: none;
	overflow: hidden;
	transition: transform var(--th-base), box-shadow var(--th-base), border-color var(--th-base);
}

.th-cat-card::before {
	content: "";
	position: absolute;
	inset: auto -30% -60% auto;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: var(--th-gradient);
	opacity: 0;
	filter: blur(30px);
	transition: opacity var(--th-base);
}

.th-cat-card:hover {
	transform: translateY(-4px);
	border-color: rgba(var(--th-primary-rgb), .4);
	box-shadow: var(--th-shadow-md);
}

.th-cat-card:hover::before { opacity: .18; }

.th-cat-card__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 13px;
	background: var(--th-primary-soft);
	color: var(--th-primary);
	transition: background var(--th-base), color var(--th-base);
}

.th-cat-card:hover .th-cat-card__icon { background: var(--th-gradient); color: #fff; }

.th-cat-card__name { position: relative; margin: 0; font-size: 1.05rem; color: var(--th-ink); }
.th-cat-card__count { position: relative; font-size: .85rem; color: var(--th-muted); }

/* ==================================================== 10. Feature cards */

.th-feature {
	padding: 26px;
	background: var(--th-surface);
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
	transition: transform var(--th-base), box-shadow var(--th-base);
}

.th-feature:hover { transform: translateY(-3px); box-shadow: var(--th-shadow-md); }

.th-feature__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: 16px;
	border-radius: 13px;
	background: var(--th-primary-soft);
	color: var(--th-primary);
}

.th-feature__title { font-size: 1.08rem; margin-bottom: .35em; }
.th-feature__text { margin: 0; font-size: .94rem; }

/* ======================================================= 11. Newsletter */

.th-newsletter {
	position: relative;
	overflow: hidden;
	padding: clamp(34px, 5vw, 56px);
	border-radius: var(--th-radius-lg);
	background: var(--th-gradient);
	color: #fff;
	text-align: center;
}

.th-newsletter::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .22), transparent 45%), radial-gradient(circle at 82% 78%, rgba(255, 255, 255, .16), transparent 42%);
	pointer-events: none;
}

.th-newsletter > * { position: relative; }
.th-newsletter h2 { color: #fff; }
.th-newsletter p { color: rgba(255, 255, 255, .88); max-width: 560px; margin-inline: auto; }

.th-newsletter__form {
	display: flex;
	gap: 10px;
	max-width: 520px;
	margin: 26px auto 0;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: var(--th-radius-pill);
	padding: 6px 6px 6px 20px;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.th-newsletter .th-newsletter__form input[type="email"] {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	color: #fff;
	font: inherit;
	font-size: .98rem;
}

.th-newsletter .th-newsletter__form input::placeholder { color: rgba(255, 255, 255, .75); }
.th-newsletter .th-newsletter__form input:focus { outline: none; box-shadow: none; }

.th-newsletter__form .th-btn {
	background: #fff;
	color: var(--th-primary-dark);
	border-radius: var(--th-radius-pill);
	box-shadow: none;
}

.th-newsletter__form .th-btn:hover { background: #f8fafc; color: var(--th-primary-dark); }
.th-newsletter__note { margin-top: 12px; font-size: .82rem; color: rgba(255, 255, 255, .8); }

@media (max-width: 520px) {
	.th-newsletter__form { flex-direction: column; border-radius: var(--th-radius); padding: 14px; }
	.th-newsletter__form .th-btn { border-radius: var(--th-radius-sm); }
}

/* ============================================================ 12. Footer */

.th-footer {
	background: var(--th-bg-deep);
	color: #94a3b8;
	padding-top: clamp(48px, 6vw, 76px);
	font-size: .93rem;
}

.th-footer a { color: #cbd5e1; text-decoration: none; }
.th-footer a:hover { color: #fff; }

.th-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 44px);
	padding-bottom: 46px;
}

@media (max-width: 1000px) {
	.th-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
	.th-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
	.th-footer__grid { grid-template-columns: 1fr 1fr; }
}

.th-footer__brand .th-brand { color: #fff; margin-bottom: 14px; }
.th-footer__about { max-width: 320px; }

.th-footer__title {
	margin: 0 0 14px;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #fff;
}

.th-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }

.th-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 0;
	border-top: 1px solid rgba(255, 255, 255, .08);
	font-size: .86rem;
}

.th-footer .th-footer__legal { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; margin: 0; padding: 0; }

/* `.th-footer ul` above is display:grid and outranks the `.th-social` rule
   further down, which stacked the social icons in a vertical column. */
.th-footer .th-social { display: flex; flex-wrap: wrap; gap: 8px; }

.th-social { display: flex; gap: 8px; list-style: none; margin: 18px 0 0; padding: 0; }

.th-social a {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .07);
	color: #cbd5e1;
	transition: background var(--th-fast), color var(--th-fast), transform var(--th-fast);
}

.th-social a:hover { background: var(--th-primary); color: #fff; transform: translateY(-2px); }

.th-footer__contact { display: grid; gap: 8px; margin-top: 16px; font-size: .9rem; }
.th-footer__contact span { display: flex; gap: 8px; align-items: flex-start; }

/* ======================================================= 13. Breadcrumbs */

.th-breadcrumbs { font-size: .86rem; color: var(--th-muted); }
.th-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.th-breadcrumbs li { display: flex; align-items: center; gap: 6px; }
.th-breadcrumbs a { color: var(--th-body); text-decoration: none; }
.th-breadcrumbs a:hover { color: var(--th-primary); }
.th-breadcrumbs__sep { display: inline-flex; opacity: .5; }
.th-breadcrumbs [aria-current="page"] span { color: var(--th-ink); font-weight: 500; }

.th-page-head {
	padding-block: clamp(28px, 4vw, 52px);
	background: var(--th-bg);
	border-bottom: 1px solid var(--th-line);
}

.th-page-head__title { margin: 12px 0 0; }
.th-page-head__text { margin: 10px 0 0; max-width: 680px; }

/* ============================================================== 14. Blog */

.th-post-card {
	display: flex;
	flex-direction: column;
	background: var(--th-surface);
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
	overflow: hidden;
	transition: transform var(--th-base), box-shadow var(--th-base);
}

.th-post-card:hover { transform: translateY(-3px); box-shadow: var(--th-shadow-md); }

.th-post-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--th-line-soft); }
.th-post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--th-ease); }
.th-post-card:hover .th-post-card__media img { transform: scale(1.05); }

.th-post-card__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.th-post-card__title { font-size: 1.12rem; margin: 0; }
.th-post-card__title a { color: var(--th-ink); text-decoration: none; }
.th-post-card__title a:hover { color: var(--th-primary); }
.th-post-card__excerpt { margin: 0; font-size: .93rem; }

.th-tag {
	display: inline-flex;
	align-items: center;
	padding: .22rem .7rem;
	border-radius: var(--th-radius-pill);
	background: var(--th-primary-soft);
	color: var(--th-primary-dark);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
}

.th-post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: .85rem;
	color: var(--th-muted);
}

.th-post-meta__author { display: inline-flex; align-items: center; gap: 8px; color: var(--th-body); text-decoration: none; font-weight: 500; }
.th-avatar { border-radius: 50%; }
.th-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }

/* ------------------------------------------------------ editorial content

   Everything below styles .th-entry: the rendered post/page body. The goal is
   a reading experience that holds up over long-form text — a comfortable
   measure, a clear typographic hierarchy, and block-level components (quotes,
   code, tables, figures) that feel designed rather than defaulted.
   ------------------------------------------------------------------------ */

.th-entry {
	/* ~68 characters at the body size. Deliberately a rem value, not ch: ch
	   resolves against each element's own font-size, so a larger opening
	   paragraph would get a wider max-width than the paragraphs beneath it
	   and the centred column would sit on a ragged left edge. */
	--entry-measure: 39rem;
	font-size: clamp(1.04rem, 1rem + .18vw, 1.14rem);
	line-height: 1.78;
	color: var(--th-body);
	text-wrap: pretty;
	hanging-punctuation: first last;
}

.th-entry > * { margin-bottom: 1.45em; }
.th-entry > *:last-child { margin-bottom: 0; }

/* Keep the reading measure comfortable even in a full-width layout, while
   letting deliberately wide blocks break out. */
.th-entry > p,
.th-entry > ul,
.th-entry > ol,
.th-entry > dl,
.th-entry > h2,
.th-entry > h3,
.th-entry > h4,
.th-entry > h5,
.th-entry > h6,
.th-entry > blockquote {
	max-width: var(--entry-measure);
}

/*
 * Centre the measure only in the article body. Elsewhere — the product
 * Overview, the FAQ accordion, the contact page — .th-entry sits under a
 * heading that is NOT inside it (.th-block__title), so centring the text
 * while the heading stays flush left leaves the two visibly misaligned.
 */
.th-single .th-entry > p,
.th-single .th-entry > ul,
.th-single .th-entry > ol,
.th-single .th-entry > dl,
.th-single .th-entry > h2,
.th-single .th-entry > h3,
.th-single .th-entry > h4,
.th-single .th-entry > h5,
.th-single .th-entry > h6,
.th-single .th-entry > blockquote,
.th-single .th-entry > hr,
.th-single .th-entry > .th-note {
	margin-inline: auto;
}

/* Opening paragraph reads a size larger — sets the tone before the body copy
   settles down. :first-child, not :first-of-type: the latter matches the
   first paragraph *sibling*, which on a post opening with a figure or embed
   lands well below the fold. Restricted to .th-single so it cannot fire in
   the FAQ accordion, the product Overview or a contact page, all of which
   also render .th-entry. */
.th-single .th-entry > p:first-child {
	font-size: 1.14em;
	line-height: 1.66;
	color: var(--th-ink);
}

/* Optional drop cap (Appearance → Customize → Blog). */
.th-entry--dropcap > p:first-child::first-letter {
	float: left;
	margin: .06em .12em 0 0;
	padding-right: .04em;
	font-family: var(--th-font-heading);
	font-size: 3.5em;
	font-weight: 800;
	line-height: .82;
	background: var(--th-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	/* color, not -webkit-text-fill-color: forced-colors mode overrides the
	   former and ignores the latter, which would erase the letter entirely. */
	color: transparent;
}

/* Headings ---------------------------------------------------------------- */

.th-entry h2,
.th-entry h3,
.th-entry h4 {
	color: var(--th-ink);
	scroll-margin-top: calc(var(--th-header-h) + 24px);
}

.th-entry h2 {
	position: relative;
	margin-top: 2.6em;
	margin-bottom: .7em;
	padding-top: .1em;
	font-size: clamp(1.5rem, 1.25rem + 1vw, 1.95rem);
	letter-spacing: -.024em;
}

/* A short gradient rule above each h2 — a quiet section marker that scans
   well when skimming a long article. */
.th-entry h2::before {
	content: "";
	position: absolute;
	top: -.55em;
	left: 0;
	width: 46px;
	height: 3px;
	border-radius: 3px;
	background: var(--th-gradient);
}

.th-entry > :first-child { margin-top: 0; }
.th-entry > h2:first-child::before { display: none; }

.th-entry h3 {
	margin-top: 2em;
	margin-bottom: .55em;
	font-size: clamp(1.2rem, 1.08rem + .5vw, 1.42rem);
}

.th-entry h4 {
	margin-top: 1.7em;
	margin-bottom: .5em;
	font-size: 1.08rem;
	letter-spacing: -.01em;
}

.th-entry h5,
.th-entry h6 {
	margin-top: 1.6em;
	margin-bottom: .45em;
	color: var(--th-ink);
}

/* Inline text ------------------------------------------------------------- */

.th-entry a:not(.th-btn):not(.wp-block-button__link) {
	color: var(--th-ink);
	font-weight: 500;
	text-decoration: none;
	background-image: linear-gradient(var(--th-primary), var(--th-primary));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 1px;
	padding-bottom: 1px;
	transition: background-size var(--th-base), color var(--th-fast);
}

.th-entry a:not(.th-btn):not(.wp-block-button__link):hover {
	color: var(--th-primary);
	background-size: 100% 2px;
}

/* A "link to media file" image should not get a text underline under it. */
.th-entry a:has(> img) { background-image: none; padding-bottom: 0; }

.th-entry strong, .th-entry b { color: var(--th-ink); font-weight: 700; }

.th-entry mark {
	padding: .1em .3em;
	border-radius: 4px;
	background: var(--th-primary-soft);
	color: var(--th-ink);
}

.th-entry abbr[title] {
	text-decoration: underline dotted;
	text-underline-offset: 3px;
	cursor: help;
}

.th-entry kbd {
	display: inline-block;
	padding: .12em .5em;
	border: 1px solid var(--th-line);
	border-bottom-width: 2px;
	border-radius: 6px;
	background: var(--th-surface);
	box-shadow: var(--th-shadow-xs);
	font-size: .82em;
	color: var(--th-ink);
}

/* Lists ------------------------------------------------------------------- */

/* Restricted to plain content lists. Core blocks that happen to render a
   ul/ol — Social Icons, Latest Posts, Categories, Archives, Page List, RSS,
   Latest Comments, legacy galleries — carry their own layout, and indenting
   them or hanging a bullet off every item wrecks it. */
.th-entry ul:not([class*="wp-block-"]),
.th-entry ol:not([class*="wp-block-"]):not([start]):not([reversed]):not([type]),
.th-entry ul.wp-block-list,
.th-entry ol.wp-block-list:not([start]):not([reversed]):not([type]) {
	padding-left: 0;
	list-style: none;
}

.th-entry li { position: relative; padding-left: 1.75em; margin-bottom: .55em; }

.th-entry [class*="wp-block-"]:not(.wp-block-list) li,
.th-entry [class*="wp-block-"]:not(.wp-block-list) li > * {
	position: static;
	padding-left: 0;
	margin-bottom: 0;
}

.th-entry [class*="wp-block-"]:not(.wp-block-list) li::before { content: none; }
.th-entry li:last-child { margin-bottom: 0; }
.th-entry li > ul,
.th-entry li > ol { margin-top: .55em; }

.th-entry ul > li::before {
	content: "";
	position: absolute;
	left: .3em;
	top: .66em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--th-gradient);
}

.th-entry ol { counter-reset: th-ol; }

/* The counter cannot express start, reversed or a non-decimal type, so those
   lists keep the browser's own marker. They are excluded from the
   list-style:none reset above rather than reverted afterwards: `revert` also
   discards the presentational hint that type="A" relies on, which would
   silently renumber an alphabetical list as 1, 2, 3. */
.th-entry ol[start],
.th-entry ol[reversed],
.th-entry ol[type] { padding-left: 1.5em; }

.th-entry ol[start] > li,
.th-entry ol[reversed] > li,
.th-entry ol[type] > li { padding-left: 0; }

.th-entry ol[start] > li::before,
.th-entry ol[reversed] > li::before,
.th-entry ol[type] > li::before { content: none; }

.th-entry ol > li::before {
	counter-increment: th-ol;
	content: counter(th-ol);
	position: absolute;
	left: 0;
	top: .18em;
	display: grid;
	place-items: center;
	min-width: 1.55em;
	height: 1.55em;
	padding: 0 .35em;
	border-radius: var(--th-radius-pill);
	background: var(--th-primary-soft);
	color: var(--th-primary-dark);
	font-size: .78em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Checklists read better than bullets for feature lists. */
.th-entry ul.th-list--check > li::before {
	top: .42em;
	left: .1em;
	width: 1.1em;
	height: 1.1em;
	border-radius: 50%;
	background: var(--th-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E") center / 68% no-repeat;
}

.th-entry dl { display: grid; gap: .35em .9em; }
.th-entry dt { color: var(--th-ink); font-weight: 700; }
.th-entry dd { margin: 0 0 .8em; }

/* Quotes ------------------------------------------------------------------ */

.th-entry blockquote,
.th-entry .wp-block-quote {
	position: relative;
	/* auto, not 0: this block is measure-capped, so it has to centre with the
	   text column rather than sit flush against the container edge. */
	margin: 2.4em 0;
	padding: 1.6rem 1.75rem 1.6rem 3.4rem;
	border: 1px solid var(--th-line);
	border-left: 3px solid transparent;
	border-radius: var(--th-radius);
	/* Gradient left edge without losing the surface fill: paint the
	   background on the padding box and the gradient on the border box. */
	background:
		linear-gradient(var(--th-bg), var(--th-bg)) padding-box,
		var(--th-gradient) border-box;
	color: var(--th-ink);
	font-size: 1.06em;
	line-height: 1.7;
}

.th-entry blockquote::before,
.th-entry .wp-block-quote::before {
	content: "";
	position: absolute;
	top: 1.35rem;
	left: 1.35rem;
	width: 22px;
	height: 22px;
	background: var(--th-primary);
	opacity: .32;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.7 6.3 6.9 9.1c-.6.6-.9 1.4-.9 2.2V17a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1H8.5l2.6-2.6a1 1 0 0 0 0-1.4l-.7-.7a1 1 0 0 0-.7 0Zm8 0-2.8 2.8c-.6.6-.9 1.4-.9 2.2V17a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-2.5l2.6-2.6a1 1 0 0 0 0-1.4l-.7-.7a1 1 0 0 0-.7 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.7 6.3 6.9 9.1c-.6.6-.9 1.4-.9 2.2V17a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1H8.5l2.6-2.6a1 1 0 0 0 0-1.4l-.7-.7a1 1 0 0 0-.7 0Zm8 0-2.8 2.8c-.6.6-.9 1.4-.9 2.2V17a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-2.5l2.6-2.6a1 1 0 0 0 0-1.4l-.7-.7a1 1 0 0 0-.7 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.th-entry blockquote p:last-child,
.th-entry .wp-block-quote p:last-child { margin-bottom: 0; }

.th-entry blockquote cite,
.th-entry .wp-block-quote cite {
	display: block;
	margin-top: .9em;
	font-size: .85rem;
	font-style: normal;
	font-weight: 600;
	color: var(--th-muted);
}

.th-entry blockquote cite::before,
.th-entry .wp-block-quote cite::before { content: "— "; }

/* The testimonial block style overrides the padding that makes room for the
   glyph, so the mark would land on top of the first line. */
.th-entry .wp-block-quote.is-style-th-testimonial::before { content: none; }

/* Pull quote: breaks the measure and the rhythm on purpose. */
.th-entry .wp-block-pullquote {
	margin: 2.8em 0;
	padding: 2rem 0;
	border-top: 1px solid var(--th-line);
	border-bottom: 1px solid var(--th-line);
	background: none;
	text-align: center;
}

.th-entry .wp-block-pullquote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	max-width: none;
}

.th-entry .wp-block-pullquote blockquote::before { display: none; }

.th-entry .wp-block-pullquote p {
	max-width: 22ch;
	margin-inline: auto;
	font-family: var(--th-font-heading);
	font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.02em;
	background: var(--th-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	/* See the drop cap: -webkit-text-fill-color survives forced-colors mode
	   and would blank the whole quote out. */
	color: transparent;
}

/* Figures and images ------------------------------------------------------ */

.th-entry figure,
.th-entry .wp-block-image { margin: 2.4em 0; }

.th-entry img,
.th-entry .wp-block-image img {
	border-radius: var(--th-radius);
	box-shadow: var(--th-shadow-md);
}

.th-entry figcaption,
.th-entry .wp-block-image figcaption {
	margin-top: .9em;
	font-size: .85rem;
	line-height: 1.55;
	color: var(--th-muted);
	text-align: center;
}

.th-entry .wp-block-gallery img { box-shadow: var(--th-shadow-sm); }

.th-entry .wp-block-cover { border-radius: var(--th-radius); overflow: hidden; }

/* Code -------------------------------------------------------------------- */

.th-entry :not(pre) > code {
	padding: .16em .42em;
	border: 1px solid var(--th-line);
	border-radius: 6px;
	background: var(--th-line-soft);
	color: var(--th-primary-dark);
	font-size: .87em;
	word-break: break-word;
}

.th-entry pre,
.th-entry .wp-block-code {
	position: relative;
	margin: 2.2em 0;
	padding: 3.1rem 1.5rem 1.5rem;
	border-radius: var(--th-radius);
	background: var(--th-bg-deep);
	box-shadow: var(--th-shadow-lg);
	color: #e2e8f0;
	font-size: .88rem;
	line-height: 1.7;
	/* The chrome below is absolutely positioned inside this box, so the box
	   itself must not scroll — the inner <code> carries the scrollbar. */
	overflow: hidden;
	tab-size: 2;
}

/* Window chrome so a code block reads as a code block at a glance. */
.th-entry pre::before,
.th-entry .wp-block-code::before {
	content: "";
	position: absolute;
	top: 1.15rem;
	left: 1.5rem;
	width: 42px;
	height: 10px;
	border-radius: 10px;
	background:
		radial-gradient(circle 5px at 5px 5px, #ff5f57 98%, transparent) 0 0 / 16px 10px no-repeat,
		radial-gradient(circle 5px at 5px 5px, #febc2e 98%, transparent) 16px 0 / 16px 10px no-repeat,
		radial-gradient(circle 5px at 5px 5px, #28c840 98%, transparent) 32px 0 / 16px 10px no-repeat;
}

.th-entry pre::after,
.th-entry .wp-block-code::after {
	content: "";
	position: absolute;
	inset: 2.55rem 0 auto;
	height: 1px;
	background: rgba(255, 255, 255, .08);
}

.th-entry pre code,
.th-entry .wp-block-code code {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: inherit;
	overflow-x: auto;
	tab-size: 2;
}

/* Tables ------------------------------------------------------------------ */

.th-entry table,
.th-entry .wp-block-table table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: 2.2em 0;
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
	overflow: hidden;
	font-size: .94rem;
}

.th-entry thead th {
	background: var(--th-bg);
	color: var(--th-ink);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	white-space: nowrap;
}

.th-entry th,
.th-entry td {
	padding: .85rem 1.1rem;
	border-bottom: 1px solid var(--th-line-soft);
	text-align: left;
}

/* overflow is not guaranteed to clip a table box, so round the header's
   corner cells directly rather than relying on the radius on <table>. */
.th-entry thead tr:first-child th:first-child { border-top-left-radius: var(--th-radius); }
.th-entry thead tr:first-child th:last-child { border-top-right-radius: var(--th-radius); }

.th-entry tbody tr:last-child th,
.th-entry tbody tr:last-child td { border-bottom: 0; }
.th-entry tbody tr:nth-child(even) { background: color-mix(in srgb, var(--th-bg) 55%, transparent); }
.th-entry tbody tr { transition: background var(--th-fast); }
.th-entry tbody tr:hover { background: var(--th-primary-soft); }

/* Tables are the one block that genuinely cannot reflow, so let them scroll
   rather than forcing a horizontal scrollbar on the whole page. */
.th-entry .wp-block-table { overflow-x: auto; }
.th-entry .wp-block-table table { margin: 0; }

/* Separators and embeds --------------------------------------------------- */

.th-entry hr,
.th-entry .wp-block-separator {
	width: 100%;
	max-width: var(--entry-measure);
	height: auto;
	margin: 3em 0;
	border: 0;
	text-align: center;
}

/* Three dots rather than a rule: a softer scene break. */
.th-entry hr::before,
.th-entry .wp-block-separator::before {
	content: "• • •";
	display: block;
	letter-spacing: .8em;
	font-size: .7rem;
	color: var(--th-muted);
}

.th-entry .wp-block-embed,
.th-entry iframe { margin: 2.4em 0; border-radius: var(--th-radius); overflow: hidden; }

.th-entry .wp-block-embed iframe { margin: 0; }

/* Callout: opt-in on any paragraph or group via class="th-note". */
.th-entry .th-note {
	position: relative;
	max-width: var(--entry-measure);
	margin: 2.2em 0;
	padding: 1.25rem 1.4rem 1.25rem 3.3rem;
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
	background: var(--th-primary-soft);
	color: var(--th-ink);
	font-size: .97em;
}

.th-entry .th-note::before {
	content: "";
	position: absolute;
	top: 1.35rem;
	left: 1.25rem;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--th-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 8h.01M11 12h1v4h1'/%3E%3C/svg%3E") center / 78% no-repeat;
}

.th-entry .th-note--warn { background: #fffbeb; border-color: #fde68a; }
.th-entry .th-note--warn::before { background-color: var(--th-warning); }

.th-entry .alignwide {
	width: min(100vw - 2 * var(--th-gutter), 1080px);
	max-width: none;
	margin-inline: calc(50% - min(50vw - var(--th-gutter), 540px));
}

.th-entry .alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

/* Both breakouts above are measured from the viewport centre, which only
   holds when the entry column is centred. In the sidebar layout the column
   is offset, so the block would overlap the sidebar and run off-screen. */
.th-with-sidebar:not(.th-with-sidebar--full) .th-entry .alignwide,
.th-with-sidebar:not(.th-with-sidebar--full) .th-entry .alignfull {
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
}

.th-entry .alignleft { margin: .4em 2em 1.4em 0; max-width: 46%; }
.th-entry .alignright { margin: .4em 0 1.4em 2em; max-width: 46%; }

@media (max-width: 600px) {
	.th-entry .alignleft,
	.th-entry .alignright { float: none; margin-inline: 0; max-width: 100%; }
	.th-entry blockquote,
	.th-entry .wp-block-quote { padding: 1.35rem 1.25rem 1.35rem 1.25rem; }
	.th-entry blockquote::before,
	.th-entry .wp-block-quote::before { display: none; }
	.th-entry pre,
	.th-entry .wp-block-code { padding-inline: 1.1rem; }
}

/* Reading progress -------------------------------------------------------- */

.th-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 90;
	background: transparent;
	pointer-events: none;
}

.th-progress__bar {
	height: 100%;
	width: 100%;
	border-radius: 0 3px 3px 0;
	background: var(--th-gradient);
	box-shadow: 0 0 12px rgba(var(--th-primary-rgb), .55);
	/* Scaled rather than resized: a transform stays off the layout path, so
	   the per-frame scroll handler never triggers a reflow. */
	transform: scaleX(0);
	transform-origin: 0 50%;
}

@media print {
	.th-progress { display: none; }
	.th-entry pre,
	.th-entry .wp-block-code { background: none; color: #000; border: 1px solid #ccc; box-shadow: none; }
	.th-entry pre::before,
	.th-entry pre::after { display: none; }
	.th-entry img { box-shadow: none; }
}

.th-share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 32px 0; }
.th-share__label { font-size: .86rem; font-weight: 600; color: var(--th-ink); }

.th-share a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	border: 1px solid var(--th-line);
	color: var(--th-body);
	transition: all var(--th-fast);
}

.th-share a:hover { background: var(--th-primary); border-color: var(--th-primary); color: #fff; }

.th-author-box {
	display: flex;
	gap: 18px;
	padding: 24px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
	background: var(--th-bg);
	margin: 40px 0;
}

.th-author-box img { border-radius: 50%; flex: 0 0 auto; }
.th-author-box h3 { margin: 0 0 6px; font-size: 1.05rem; }

.th-post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 40px 0;
}

@media (max-width: 640px) { .th-post-nav { grid-template-columns: 1fr; } }

.th-post-nav a {
	display: block;
	padding: 18px 20px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
	text-decoration: none;
	transition: border-color var(--th-fast), box-shadow var(--th-fast);
}

.th-post-nav a:hover { border-color: rgba(var(--th-primary-rgb), .45); box-shadow: var(--th-shadow-sm); }
.th-post-nav small { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--th-muted); margin-bottom: 6px; }
.th-post-nav span { color: var(--th-ink); font-weight: 600; }
.th-post-nav .th-post-nav__next { text-align: right; }

/* ========================================================== 15. Sidebar */

.th-sidebar { position: sticky; top: calc(var(--th-header-h) + 24px); display: grid; gap: 22px; }

/* Scoped to the sidebar on purpose. The card treatment below belongs to the
   blog sidebar, which sits on a light background. Unscoped it also caught the
   four footer widget areas, which sit on the dark footer — so any widget
   dropped into a footer column rendered as a white card with dark text. */
.th-sidebar .widget {
	padding: 22px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
	background: var(--th-surface);
	font-size: .94rem;
}

.widget-title { font-size: 1rem; margin-bottom: 14px; }
.widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.widget ul li a { color: var(--th-body); text-decoration: none; }
.widget ul li a:hover { color: var(--th-primary); }

/* Footer widgets inherit the footer's own look rather than the sidebar card. */
.th-footer .widget { padding: 0; border: 0; background: none; font-size: inherit; color: inherit; }
.th-footer .widget + .widget { margin-top: 28px; }

/* Legacy widgets get before_title; block widgets emit their own heading and
   would otherwise pick up the global h2 size and the dark ink colour. */
.th-footer .widget-title,
.th-footer .widget h2,
.th-footer .widget h3,
.th-footer .widget .wp-block-heading {
	margin: 0 0 14px;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #fff;
}

.th-footer .widget a { color: #cbd5e1; text-decoration: none; }
.th-footer .widget a:hover { color: #fff; }
.th-footer .widget select { width: 100%; max-width: 100%; }

/* ============================================================ 16. Forms */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
	width: 100%;
	padding: .75rem .95rem;
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius-sm);
	background: var(--th-surface);
	font: inherit;
	font-size: .95rem;
	color: var(--th-ink);
	transition: border-color var(--th-fast), box-shadow var(--th-fast);
}

select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .8rem center;
	padding-right: 2.4rem;
}

textarea { min-height: 140px; resize: vertical; }

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: rgba(var(--th-primary-rgb), .55);
	box-shadow: 0 0 0 4px rgba(var(--th-primary-rgb), .12);
}

label { display: inline-block; font-size: .9rem; font-weight: 600; color: var(--th-ink); margin-bottom: 6px; }

.th-field { margin-bottom: 18px; }
.th-check { display: flex; align-items: center; gap: 9px; font-size: .92rem; font-weight: 500; color: var(--th-body); cursor: pointer; margin-bottom: 0; }
.th-check input { width: auto; accent-color: var(--th-primary); width: 17px; height: 17px; }

/* ======================================================= 17. Pagination */

.th-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 44px 0 0;
}

.th-pagination .page-numbers,
.thc-pagination .thc-page {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius-sm);
	background: var(--th-surface);
	color: var(--th-ink);
	font-size: .93rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: all var(--th-fast);
}

.th-pagination .page-numbers:hover,
.thc-pagination .thc-page:hover:not(:disabled) {
	border-color: rgba(var(--th-primary-rgb), .45);
	color: var(--th-primary);
	background: var(--th-primary-soft);
}

.th-pagination .page-numbers.current,
.thc-pagination .thc-page.is-current {
	background: var(--th-gradient);
	border-color: transparent;
	color: #fff;
	box-shadow: var(--th-shadow-brand);
}

.th-pagination .page-numbers.dots,
.thc-pagination .thc-page--gap { border-color: transparent; background: none; cursor: default; }
.thc-pagination .thc-page:disabled { opacity: .4; cursor: not-allowed; }

/* =========================================================== 18. Toasts */

.thc-toasts {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;
	display: grid;
	gap: 10px;
	max-width: min(340px, calc(100vw - 40px));
}

.thc-toast {
	padding: 13px 17px;
	border-radius: var(--th-radius-sm);
	background: var(--th-ink);
	color: #fff;
	font-size: .9rem;
	font-weight: 500;
	box-shadow: var(--th-shadow-lg);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity var(--th-base), transform var(--th-base);
}

.thc-toast.is-visible { opacity: 1; transform: translateY(0); }
.thc-toast--success { background: #064e3b; }
.thc-toast--error { background: #7f1d1d; }

/* ======================================================== 19. Skeletons */

.thc-skeleton-card {
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
	padding: 0 0 18px;
	overflow: hidden;
	background: var(--th-surface);
}

.thc-skeleton {
	background: linear-gradient(90deg, var(--th-line-soft) 25%, #e9eef5 37%, var(--th-line-soft) 63%);
	background-size: 400% 100%;
	animation: th-shimmer 1.4s ease infinite;
	border-radius: 6px;
}

.thc-skeleton--media { aspect-ratio: 4 / 3; border-radius: 0; }
.thc-skeleton--line { height: 14px; margin: 16px 18px 0; }
.thc-skeleton--short { width: 45%; }

@keyframes th-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* =========================================================== 20. Rating */

.thc-rating { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--th-muted); }

.thc-rating__track {
	position: relative;
	width: 78px;
	height: 14px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='14' viewBox='0 0 78 14'%3E%3Cg fill='%23e2e8f0'%3E%3Cpath d='m7 1 1.8 3.7 4 .6-2.9 2.8.7 4L7 10.2 3.4 12l.7-4L1.2 5.3l4-.6z'/%3E%3Cpath d='m23 1 1.8 3.7 4 .6-2.9 2.8.7 4L23 10.2 19.4 12l.7-4-2.9-2.7 4-.6z'/%3E%3Cpath d='m39 1 1.8 3.7 4 .6-2.9 2.8.7 4L39 10.2 35.4 12l.7-4-2.9-2.7 4-.6z'/%3E%3Cpath d='m55 1 1.8 3.7 4 .6-2.9 2.8.7 4L55 10.2 51.4 12l.7-4-2.9-2.7 4-.6z'/%3E%3Cpath d='m71 1 1.8 3.7 4 .6-2.9 2.8.7 4L71 10.2 67.4 12l.7-4-2.9-2.7 4-.6z'/%3E%3C/g%3E%3C/svg%3E");
	flex: 0 0 auto;
}

.thc-rating__fill {
	position: absolute;
	inset: 0 auto 0 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='14' viewBox='0 0 78 14'%3E%3Cg fill='%23f59e0b'%3E%3Cpath d='m7 1 1.8 3.7 4 .6-2.9 2.8.7 4L7 10.2 3.4 12l.7-4L1.2 5.3l4-.6z'/%3E%3Cpath d='m23 1 1.8 3.7 4 .6-2.9 2.8.7 4L23 10.2 19.4 12l.7-4-2.9-2.7 4-.6z'/%3E%3Cpath d='m39 1 1.8 3.7 4 .6-2.9 2.8.7 4L39 10.2 35.4 12l.7-4-2.9-2.7 4-.6z'/%3E%3Cpath d='m55 1 1.8 3.7 4 .6-2.9 2.8.7 4L55 10.2 51.4 12l.7-4-2.9-2.7 4-.6z'/%3E%3Cpath d='m71 1 1.8 3.7 4 .6-2.9 2.8.7 4L71 10.2 67.4 12l.7-4-2.9-2.7 4-.6z'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
}

/* ============================================================= 21. 404 */

.th-404 { text-align: center; padding-block: clamp(60px, 9vw, 120px); }

.th-404__code {
	font-size: clamp(5rem, 16vw, 9rem);
	font-weight: 800;
	line-height: 1;
	background: var(--th-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	letter-spacing: -.04em;
}

.th-404__search { max-width: 520px; margin: 30px auto 0; }

.th-links-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }

/* ======================================================= 22. Comments */

.th-comments { margin-top: 56px; }
.th-comments__list { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 22px; }
.th-comments__list .children { list-style: none; margin: 22px 0 0 clamp(16px, 4vw, 44px); padding: 0; display: grid; gap: 22px; }

.comment-body {
	padding: 20px 22px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
	background: var(--th-surface);
}

.comment-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: .88rem; }
.comment-author { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--th-ink); }
.comment-author img { border-radius: 50%; }
.comment-metadata { color: var(--th-muted); }
.comment-reply-link { font-size: .86rem; font-weight: 600; }

.comment-form { display: grid; gap: 14px; }
.comment-form .form-submit { margin: 0; }
.comment-form input[type="submit"] { width: auto; }

/* ========================================================= 23. Utilities */

.th-empty {
	padding: 60px 24px;
	text-align: center;
	border: 1px dashed var(--th-line);
	border-radius: var(--th-radius);
	color: var(--th-muted);
	grid-column: 1 / -1;
}

.th-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.th-mt-0 { margin-top: 0; }
.th-center { text-align: center; }
.th-muted { color: var(--th-muted); }

/* ======================================================= 24. Block styles */

.is-style-th-gradient .wp-block-button__link,
.wp-block-button.is-style-th-gradient .wp-block-button__link {
	background: var(--th-gradient);
	color: #fff;
	border-radius: var(--th-radius-sm);
	box-shadow: var(--th-shadow-brand);
}

.wp-block-group.is-style-th-card {
	padding: clamp(22px, 3vw, 34px);
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
	background: var(--th-surface);
	box-shadow: var(--th-shadow-sm);
}

.wp-block-image.is-style-th-shadow img { border-radius: var(--th-radius); box-shadow: var(--th-shadow-lg); }

.wp-block-list.is-style-th-checks { list-style: none; padding-left: 0; display: grid; gap: 10px; }

/* margin-bottom: 0 — the grid gap above already spaces these, and the
   generic .th-entry li rule would otherwise double it. */
.wp-block-list.is-style-th-checks li {
	margin-bottom: 0;
	position: relative;
	padding-left: 30px;
}

.wp-block-list.is-style-th-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .35em;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--th-primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.wp-block-quote.is-style-th-testimonial {
	border: 1px solid var(--th-line);
	border-left-width: 1px;
	border-radius: var(--th-radius);
	background: var(--th-surface);
	box-shadow: var(--th-shadow-sm);
	padding: 26px;
	font-style: normal;
}

/* ======================================================== 25. Motion */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.th-header, .th-footer, .th-share, .th-pagination, .thc-toasts { display: none !important; }
	body { color: #000; background: #fff; }
}

/* ================================================= 26. Extra components */

.th-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 1100px) { .th-grid--5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px) { .th-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .th-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.th-with-sidebar--full { grid-template-columns: minmax(0, 1fr); }

.th-post-list { display: grid; gap: 20px; }
.th-post-list .th-post-card { flex-direction: row; }
.th-post-list .th-post-card__media { flex: 0 0 clamp(200px, 32%, 300px); aspect-ratio: 4 / 3; }

@media (max-width: 700px) {
	.th-post-list .th-post-card { flex-direction: column; }
	.th-post-list .th-post-card__media { flex: none; }
}

.th-single__media {
	margin: 0 0 30px;
	border-radius: var(--th-radius);
	overflow: hidden;
	box-shadow: var(--th-shadow-md);
}

.th-single__media img { width: 100%; }

.th-post-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 28px; font-size: .88rem; }
.th-post-tags a {
	padding: .25rem .75rem;
	border-radius: var(--th-radius-pill);
	background: var(--th-bg);
	border: 1px solid var(--th-line);
	color: var(--th-body);
	text-decoration: none;
}
.th-post-tags a:hover { border-color: rgba(var(--th-primary-rgb), .45); color: var(--th-primary); }

.th-related { margin-top: 52px; }

/* Back to top */

.th-to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 70;
	width: 44px;
	height: 44px;
	background: var(--th-surface);
	box-shadow: var(--th-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--th-base), visibility var(--th-base), transform var(--th-base);
}

.th-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.th-rotate-up { transform: rotate(-90deg); }

/* Reveal on scroll */

[data-th-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .5s var(--th-ease), transform .5s var(--th-ease);
}

[data-th-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	[data-th-reveal] { opacity: 1; transform: none; }
}

/* Card extras */

.th-card__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: rgba(var(--th-primary-rgb), .35);
}

.th-card__buttons { display: flex; gap: 6px; flex: 0 0 auto; }

@media (max-width: 420px) {
	.th-card__btn-label { display: none; }
}

.th-shot {
	display: block;
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius-sm);
	overflow: hidden;
	transition: transform var(--th-base), box-shadow var(--th-base);
}

.th-shot:hover { transform: translateY(-3px); box-shadow: var(--th-shadow-md); }
.th-shot img { width: 100%; display: block; }

/* FAQ accordion */

.th-faq { display: grid; gap: 12px; }

.th-faq__item {
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius);
	background: var(--th-surface);
	overflow: hidden;
	transition: border-color var(--th-fast), box-shadow var(--th-fast);
}

.th-faq__item[open] { border-color: rgba(var(--th-primary-rgb), .35); box-shadow: var(--th-shadow-sm); }

.th-faq__item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	cursor: pointer;
	list-style: none;
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--th-ink);
}

.th-faq__item > summary::-webkit-details-marker { display: none; }

.th-faq__item > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--th-base);
}

.th-faq__item[open] > summary::after { transform: rotate(135deg); }
.th-faq__answer { padding: 0 22px 20px; font-size: .97rem; }
.th-faq__answer > *:first-child { margin-top: 0; }

/* Pricing plans */

.th-pricing { align-items: stretch; }

.th-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px;
	border: 1px solid var(--th-line);
	border-radius: var(--th-radius-lg);
	background: var(--th-surface);
	box-shadow: var(--th-shadow-xs);
	transition: transform var(--th-base), box-shadow var(--th-base);
}

.th-plan:hover { transform: translateY(-4px); box-shadow: var(--th-shadow-md); }

.th-plan--featured {
	border-color: transparent;
	box-shadow: var(--th-shadow-lg);
	background:
		linear-gradient(var(--th-surface), var(--th-surface)) padding-box,
		var(--th-gradient) border-box;
	border: 2px solid transparent;
}

.th-plan__badge {
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	padding: .3rem .9rem;
	border-radius: var(--th-radius-pill);
	background: var(--th-gradient);
	color: #fff;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	white-space: nowrap;
}

.th-plan__name { margin: 0; font-size: 1.1rem; }

.th-plan__price {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin: 0;
	font-size: 2.5rem;
	font-weight: 800;
	color: var(--th-ink);
	line-height: 1;
}

.th-plan__price span { font-size: 1.2rem; font-weight: 700; }
.th-plan__price small { font-size: .85rem; font-weight: 500; color: var(--th-muted); margin-left: 6px; }
.th-plan__text { margin: 0; font-size: .93rem; }
.th-plan .th-req-list { flex: 1; margin: 8px 0 18px; font-size: .93rem; }

/* Product page head spacing */

.th-product__main { min-width: 0; }
.th-product__aside { min-width: 0; }

/* ==================================================== 27. Small screens */

@media (max-width: 620px) {
	.th-header__actions { gap: 6px; }
	.th-icon-btn { width: 38px; height: 38px; }

	/* Keep the header to brand + cart + menu so nothing clips. */
	.th-header__actions > a:not(.th-cart-button):not(.th-btn) { display: none; }

	.th-section-head { flex-direction: column; align-items: flex-start; gap: 14px; }
	.th-section-head .th-link-arrow { white-space: nowrap; }
	.th-hero__stats { gap: 22px 32px; }
	.th-stat { min-width: 42%; }
}

@media (max-width: 380px) {
	.th-brand__name { font-size: 1.02rem; }
}