/*
Theme Name: TemplateSell Modern
Theme URI: https://templatesell.com/
Author: TemplateSell
Author URI: https://templatesell.com/
Description: Modern minimal single-shop theme for selling digital downloads with Easy Digital Downloads. No premium plugin dependencies.
Version: 1.8.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: templatesell-modern
Tags: e-commerce, minimal, one-column, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   Fonts — Bricolage Grotesque, self-hosted variable (200–800)
   ========================================================================== */

@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('assets/fonts/bricolage-grotesque-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('assets/fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
	/* Neutral ramp — Pixer light scale */
	--ts-bg:            #ffffff;
	--ts-surface:       #ffffff;
	--ts-surface-alt:   #f9f9f9;
	--ts-surface-mute:  #f2f2f2;
	--ts-border:        #ededed;
	--ts-border-strong: #dadada;

	--ts-text:          #181818;
	--ts-text-muted:    #646464;
	--ts-text-faint:    #a8a8a8;

	/* Brand — sampled from the TemplateSell logo */
	--ts-accent:        #1480a4;
	--ts-accent-hover:  #00799e;
	--ts-accent-soft:   #e7f2f7;
	--ts-accent-text:   #ffffff;

	--ts-success:       #0f7b4f;
	--ts-danger:        #e66767;

	/* Type — Bricolage Grotesque, at Pixer's compact 13px UI scale */
	--ts-font: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system,
	           "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--ts-font-mono: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

	--ts-text-xs:   0.75rem;
	--ts-text-ui:   0.8125rem;  /* 13px — Pixer's base UI size */
	--ts-text-sm:   0.875rem;
	--ts-text-base: 1rem;
	--ts-text-lg:   1.125rem;
	--ts-text-xl:   1.375rem;
	--ts-text-2xl:  1.75rem;
	--ts-text-3xl:  2.25rem;
	--ts-text-4xl:  3rem;

	/* Space scale */
	--ts-1: 0.25rem;
	--ts-2: 0.5rem;
	--ts-3: 0.75rem;
	--ts-4: 1rem;
	--ts-5: 1.5rem;
	--ts-6: 2rem;
	--ts-7: 3rem;
	--ts-8: 4rem;
	--ts-9: 6rem;

	/* Pixer keeps corners tight; only pills and avatars go round. */
	--ts-radius:    6px;
	--ts-radius-sm: 4px;
	--ts-radius-lg: 8px;

	--ts-shadow:    0 0 6px rgba(79, 95, 120, 0.10);
	--ts-shadow-md: 0 6px 18px rgba(46, 57, 72, 0.12);
	--ts-shadow-lg: 0 10px 32px rgba(46, 57, 72, 0.20);

	--ts-wrap: 1360px;
	--ts-wrap-narrow: 720px;

	--ts-ease: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark theme — Pixer dark scale. Applied by system preference or by the
   .dark class, so a future toggle can drive it without restyling. */
@media (prefers-color-scheme: dark) {
	:root:not(.light) {
		--ts-bg:            #181818;
		--ts-surface:       #212121;
		--ts-surface-alt:   #252525;
		--ts-surface-mute:  #2a2a2a;
		--ts-border:        #323232;
		--ts-border-strong: #4a4a4a;

		--ts-text:          #f2f2f2;
		--ts-text-muted:    #a8a8a8;
		--ts-text-faint:    #808080;

		--ts-accent:        #35a3c6;
		--ts-accent-hover:  #56b9d8;
		--ts-accent-soft:   #10323d;

		--ts-shadow:    0 0 6px rgba(0, 0, 0, 0.5);
		--ts-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.55);
		--ts-shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.65);
	}
}

:root.dark {
	--ts-bg:            #181818;
	--ts-surface:       #212121;
	--ts-surface-alt:   #252525;
	--ts-surface-mute:  #2a2a2a;
	--ts-border:        #323232;
	--ts-border-strong: #4a4a4a;

	--ts-text:          #f2f2f2;
	--ts-text-muted:    #a8a8a8;
	--ts-text-faint:    #808080;

	--ts-accent:        #35a3c6;
	--ts-accent-hover:  #56b9d8;
	--ts-accent-soft:   #10323d;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

/* Lenis drives scrolling when active; native smooth would double-animate. */
html.lenis-active { scroll-behavior: auto; }

body {
	margin: 0;
	background: var(--ts-bg);
	color: var(--ts-text);
	font-family: var(--ts-font);
	font-size: var(--ts-text-base);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--ts-3);
	line-height: 1.2;
	font-weight: 650;
	letter-spacing: -0.018em;
	color: var(--ts-text);
}

h1 { font-size: var(--ts-text-3xl); }
h2 { font-size: var(--ts-text-2xl); }
h3 { font-size: var(--ts-text-xl); }
h4 { font-size: var(--ts-text-lg); }

p { margin: 0 0 var(--ts-4); }

a {
	color: var(--ts-accent);
	text-decoration: none;
	transition: color var(--ts-ease);
}
a:hover { color: var(--ts-accent-hover); }

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

ul, ol { margin: 0 0 var(--ts-4); padding-left: var(--ts-5); }

code, pre, kbd { font-family: var(--ts-font-mono); font-size: 0.9em; }

pre {
	background: var(--ts-surface-alt);
	border: 1px solid var(--ts-border);
	border-radius: var(--ts-radius);
	padding: var(--ts-4);
	overflow-x: auto;
}

blockquote {
	margin: var(--ts-5) 0;
	padding: var(--ts-2) 0 var(--ts-2) var(--ts-5);
	border-left: 3px solid var(--ts-accent);
	color: var(--ts-text-muted);
	font-style: italic;
}

hr {
	border: 0;
	border-top: 1px solid var(--ts-border);
	margin: var(--ts-6) 0;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--ts-5);
	font-size: var(--ts-text-sm);
}
th, td {
	padding: var(--ts-3);
	border-bottom: 1px solid var(--ts-border);
	text-align: left;
}
th { font-weight: 600; color: var(--ts-text); }

:focus-visible {
	outline: 2px solid var(--ts-accent);
	outline-offset: 2px;
	border-radius: var(--ts-radius-sm);
}

::selection { background: var(--ts-accent); color: var(--ts-accent-text); }

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.ts-wrap {
	width: 100%;
	max-width: var(--ts-wrap);
	margin-inline: auto;
	padding-inline: var(--ts-5);
}

.ts-wrap--narrow { max-width: var(--ts-wrap-narrow); }

.ts-section { padding-block: var(--ts-8); }
.ts-section--tight { padding-block: var(--ts-6); }

.ts-stack > * + * { margin-top: var(--ts-4); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: var(--ts-2);
	z-index: 200;
	background: var(--ts-accent);
	color: var(--ts-accent-text);
	padding: var(--ts-2) var(--ts-4);
	border-radius: var(--ts-radius-sm);
}
.skip-link:focus {
	left: var(--ts-4);
	color: var(--ts-accent-text);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/* The bare element selectors are wrapped in :where() so they contribute zero
   specificity. Legacy unclassed markup (comments, widgets, plugin forms) still
   picks up this default skin, but any single Tailwind utility now beats it.
   Without this, `button[type="submit"]` (0-1-1) outranks utilities (0-1-0) and
   silently repaints Tailwind-built controls — it was rendering the shop's
   unpressed view toggle as a solid accent button, inverting which one looked
   active. Do not unwrap these. */
.ts-btn,
.edd-submit,
.edd_purchase_submit_wrapper .button,
:where(input[type="submit"], button[type="submit"]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ts-2);
	padding: 0.625rem 1.125rem;
	font-family: inherit;
	font-size: var(--ts-text-ui);
	font-weight: 600;
	line-height: 1.2;
	color: var(--ts-accent-text);
	background: var(--ts-accent);
	border: 1px solid transparent;
	border-radius: var(--ts-radius-sm);
	cursor: pointer;
	transition: background var(--ts-ease), transform var(--ts-ease), box-shadow var(--ts-ease);
	text-decoration: none;
	white-space: nowrap;
}

.ts-btn:hover,
.edd-submit:hover,
:where(input[type="submit"], button[type="submit"]):hover {
	background: var(--ts-accent-hover);
	color: var(--ts-accent-text);
	transform: translateY(-1px);
	box-shadow: var(--ts-shadow-md);
}

.ts-btn:active { transform: translateY(0); }

.ts-btn--ghost {
	background: transparent;
	color: var(--ts-text);
	border-color: var(--ts-border-strong);
}
.ts-btn--ghost:hover {
	background: var(--ts-surface-alt);
	color: var(--ts-text);
	box-shadow: none;
}

.ts-btn--lg { padding: 0.8125rem 1.5rem; font-size: var(--ts-text-base); }
.ts-btn--block { width: 100%; }

/* ==========================================================================
   Forms
   ========================================================================== */

/* Wrapped in :where() for zero specificity — see the Buttons note above. These
   attribute selectors (0-1-1) were overriding Tailwind padding utilities and
   collapsing the shop filter's `pl-10`, so the search icon sat on top of the
   placeholder text. Legacy unclassed fields keep this default skin. */
:where(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: 0.5625rem 0.75rem;
	font-family: inherit;
	font-size: var(--ts-text-sm);
	color: var(--ts-text);
	background: var(--ts-surface);
	border: 1px solid var(--ts-border-strong);
	border-radius: var(--ts-radius-sm);
	transition: border-color var(--ts-ease), box-shadow var(--ts-ease);
}

input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--ts-accent);
	box-shadow: 0 0 0 3px var(--ts-accent-soft);
}

textarea { min-height: 8rem; resize: vertical; }

label {
	display: inline-block;
	margin-bottom: var(--ts-1);
	font-size: var(--ts-text-sm);
	font-weight: 550;
}

/* ==========================================================================
   Header
   ========================================================================== */

.ts-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--ts-bg) 88%, transparent);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--ts-border);
}

.ts-header__inner {
	display: flex;
	align-items: center;
	gap: var(--ts-5);
	min-height: 64px;
}

.ts-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--ts-2);
	font-size: var(--ts-text-lg);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ts-text);
	flex-shrink: 0;
}
.ts-brand:hover { color: var(--ts-text); }
.ts-brand img { max-height: 32px; width: auto; }

/* Colour logo by default; swap to the white mark in dark mode. */
.ts-brand__logo--dark { display: none; }

@media (prefers-color-scheme: dark) {
	:root:not(.light) .ts-brand__logo--light { display: none; }
	:root:not(.light) .ts-brand__logo--dark  { display: block; }
}

:root.dark .ts-brand__logo--light { display: none; }
:root.dark .ts-brand__logo--dark  { display: block; }

/* Search sits in the header bar, Pixer-style. */
.ts-header__search {
	flex: 1;
	max-width: 420px;
	margin-inline: auto;
}

.ts-header__search .ts-btn { display: none; }

.ts-header__search input[type="search"] {
	height: 40px;
	background: var(--ts-surface-alt);
	border-color: transparent;
	border-radius: var(--ts-radius);
	font-size: var(--ts-text-ui);
}
.ts-header__search input[type="search"]:focus {
	background: var(--ts-surface);
	border-color: var(--ts-accent);
}

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

/* Icon-only header buttons */
.ts-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	color: var(--ts-text-muted);
	background: transparent;
	border: 1px solid var(--ts-border);
	border-radius: var(--ts-radius);
	cursor: pointer;
	transition: background var(--ts-ease), color var(--ts-ease);
}
.ts-icon-btn:hover {
	color: var(--ts-text);
	background: var(--ts-surface-alt);
	transform: none;
	box-shadow: none;
}

/* Show the icon that represents what you'd switch TO. */
.ts-theme-toggle .ts-icon-sun  { display: none; }
.ts-theme-toggle .ts-icon-moon { display: block; }

@media (prefers-color-scheme: dark) {
	:root:not(.light) .ts-theme-toggle .ts-icon-sun  { display: block; }
	:root:not(.light) .ts-theme-toggle .ts-icon-moon { display: none; }
}
:root.dark .ts-theme-toggle .ts-icon-sun  { display: block; }
:root.dark .ts-theme-toggle .ts-icon-moon { display: none; }

.ts-nav { margin-left: auto; }

.ts-nav ul {
	display: flex;
	align-items: center;
	gap: var(--ts-1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ts-nav li { position: relative; }

.ts-nav a {
	display: block;
	padding: var(--ts-2) var(--ts-3);
	font-size: var(--ts-text-ui);
	font-weight: 500;
	color: var(--ts-text-muted);
	border-radius: var(--ts-radius-sm);
	transition: color var(--ts-ease), background var(--ts-ease);
}
.ts-nav a:hover {
	color: var(--ts-text);
	background: var(--ts-surface-alt);
}

.ts-nav .current-menu-item > a,
.ts-nav .current_page_item > a { color: var(--ts-text); }

/* Dropdowns */
.ts-nav ul ul {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 200px;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: var(--ts-1);
	background: var(--ts-surface);
	border: 1px solid var(--ts-border);
	border-radius: var(--ts-radius);
	box-shadow: var(--ts-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--ts-ease), transform var(--ts-ease), visibility var(--ts-ease);
}
.ts-nav li:hover > ul,
.ts-nav li:focus-within > ul {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.ts-nav ul ul ul { top: 0; left: 100%; }

.ts-header__actions {
	display: flex;
	align-items: center;
	gap: var(--ts-2);
	flex-shrink: 0;
}

.ts-cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--ts-2);
	padding: var(--ts-2) var(--ts-3);
	font-size: var(--ts-text-sm);
	font-weight: 550;
	color: var(--ts-text);
	border: 1px solid var(--ts-border-strong);
	border-radius: var(--ts-radius-sm);
	transition: background var(--ts-ease);
}
.ts-cart-link:hover { background: var(--ts-surface-alt); color: var(--ts-text); }

.ts-cart-count {
	min-width: 1.25rem;
	padding: 0 0.3rem;
	font-size: var(--ts-text-xs);
	font-weight: 700;
	text-align: center;
	color: var(--ts-accent-text);
	background: var(--ts-accent);
	border-radius: 999px;
}

.ts-menu-toggle {
	display: none;
	padding: var(--ts-2);
	background: transparent;
	border: 1px solid var(--ts-border-strong);
	border-radius: var(--ts-radius-sm);
	color: var(--ts-text);
	cursor: pointer;
}
.ts-menu-toggle:hover { background: var(--ts-surface-alt); transform: none; box-shadow: none; }

@media (max-width: 880px) {
	.ts-menu-toggle { display: inline-flex; }

	.ts-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		padding: var(--ts-3) var(--ts-5) var(--ts-5);
		background: var(--ts-bg);
		border-bottom: 1px solid var(--ts-border);
		box-shadow: var(--ts-shadow-md);
	}
	.ts-nav.is-open { display: block; }

	.ts-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.ts-nav a { padding: var(--ts-3); }

	.ts-nav ul ul {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		border-left: 2px solid var(--ts-border);
		border-radius: 0;
		padding-left: var(--ts-3);
		margin-left: var(--ts-3);
	}
}

/* ==========================================================================
   Mega menu
   ========================================================================== */

/* Undo the plain-dropdown rules for mega lists. Two classes beat the
   `.ts-nav ul ul` selector above, which would otherwise hide these. */
.ts-nav .ts-mega__grid,
.ts-nav .ts-mega__list {
	position: static;
	min-width: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
}

.ts-nav .ts-mega__grid { display: grid; }
.ts-nav .ts-mega__list { display: flex; }

/* Anchor the panel to the header (sticky = containing block), not the item,
   so it can be far wider than the menu link it belongs to. */
.ts-nav__item.has-mega { position: static; }

.ts-nav__caret {
	display: inline-block;
	vertical-align: -1px;
	transition: transform var(--ts-ease);
}
.ts-nav__item.has-mega:hover > a .ts-nav__caret,
.ts-nav__item.has-mega:focus-within > a .ts-nav__caret {
	transform: rotate(180deg);
}

.ts-nav__item.has-mega > a {
	color: var(--ts-text);
	background: var(--ts-surface-alt);
}

/* The panel is anchored to the header, not the item, so it can span wide. */
.ts-mega {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 90;
	width: min(1120px, calc(100vw - 3rem));
	padding-top: var(--ts-3);
	transform: translateX(-50%) translateY(-6px);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--ts-ease), transform var(--ts-ease), visibility var(--ts-ease);
}

.ts-nav__item.has-mega:hover > .ts-mega,
.ts-nav__item.has-mega:focus-within > .ts-mega {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.ts-mega__inner {
	background: var(--ts-surface);
	border: 1px solid var(--ts-border);
	border-radius: 14px;
	box-shadow: var(--ts-shadow-lg);
	padding: var(--ts-6);
}

.ts-mega__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) 260px;
	gap: var(--ts-5) var(--ts-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 1100px) {
	.ts-mega__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ts-mega__col { min-width: 0; }

.ts-mega__heading {
	display: block;
	margin-bottom: var(--ts-3);
	font-size: var(--ts-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--ts-text-faint);
}

.ts-mega__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ts-1);
}

/* Scoped under .ts-nav so these outrank the base `.ts-nav a` link rule —
   without the extra class, that rule's display:block/padding/color wins and
   flattens the icon rows. */
.ts-nav .ts-mega__link {
	display: flex;
	align-items: flex-start;
	gap: var(--ts-3);
	padding: var(--ts-2);
	margin: calc(var(--ts-2) * -1);
	font-size: var(--ts-text-sm);
	font-weight: 400;
	color: var(--ts-text);
	border-radius: var(--ts-radius);
	transition: background var(--ts-ease);
}
.ts-nav .ts-mega__link:hover { background: var(--ts-surface-alt); }

.ts-mega__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	color: var(--ts-accent);
	background: var(--ts-accent-soft);
	border-radius: var(--ts-radius);
}

.ts-mega__text { min-width: 0; }

.ts-mega__title {
	display: block;
	font-size: var(--ts-text-sm);
	font-weight: 600;
	color: var(--ts-text);
	line-height: 1.35;
}
.ts-mega__link:hover .ts-mega__title { color: var(--ts-accent); }

.ts-mega__desc {
	display: block;
	margin-top: 1px;
	font-size: var(--ts-text-ui);
	font-weight: 400;
	color: var(--ts-text-muted);
	line-height: 1.45;
}

/* Promo card */
.ts-mega__promo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--ts-5);
	color: #ffffff;
	background: linear-gradient(150deg, var(--ts-accent) 0%, var(--ts-accent-hover) 100%);
	border-radius: 12px;
}

.ts-mega__promo-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-bottom: var(--ts-4);
	color: #ffffff;
	background: rgba(255, 255, 255, 0.18);
	border-radius: var(--ts-radius);
}

.ts-mega__promo-title {
	margin: 0 0 var(--ts-2);
	font-size: var(--ts-text-base);
	font-weight: 700;
	color: #ffffff;
}

.ts-mega__promo-text {
	margin: 0 0 var(--ts-4);
	font-size: var(--ts-text-ui);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.88);
}

.ts-nav .ts-mega__promo-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--ts-2);
	margin-top: auto;
	padding: 0.5rem 0.875rem;
	font-size: var(--ts-text-ui);
	font-weight: 600;
	color: #17171a;
	background: #ffffff;
	border-radius: var(--ts-radius-sm);
	transition: transform var(--ts-ease);
}
.ts-nav .ts-mega__promo-btn:hover {
	color: #17171a;
	background: #ffffff;
	transform: translateX(2px);
}

/* Footer pill row — its own strip below the grid. */
.ts-mega__footer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ts-2);
	list-style: none;
	margin: var(--ts-5) 0 0;
	padding: var(--ts-5) 0 0;
	border-top: 1px solid var(--ts-border);
}

.ts-nav .ts-mega__footer {
	position: static;
	min-width: 0;
	background: transparent;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
	display: flex;
	/* Redeclared: the `.ts-nav ul ul` dropdown rule sets column/stretch/0
	   and outranks the base .ts-mega__footer selector. */
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ts-2);
	padding-top: var(--ts-5);
}

.ts-mega__grid { align-items: start; }

.ts-nav .ts-mega__pill {
	display: inline-flex;
	align-items: center;
	gap: var(--ts-2);
	padding: 0.5rem 0.875rem;
	font-size: var(--ts-text-ui);
	font-weight: 600;
	color: var(--ts-text-muted);
	background: var(--ts-surface-alt);
	border-radius: 999px;
	transition: color var(--ts-ease), background var(--ts-ease);
}
.ts-nav .ts-mega__pill:hover {
	color: var(--ts-text);
	background: var(--ts-surface-mute);
}

/* Mobile: the panel becomes a plain nested list. */
@media (max-width: 880px) {
	.ts-mega {
		position: static;
		width: auto;
		padding-top: 0;
		transform: none;
		opacity: 1;
		visibility: visible;
	}
	.ts-mega__inner {
		padding: var(--ts-3) 0 var(--ts-3) var(--ts-3);
		border: 0;
		border-left: 2px solid var(--ts-border);
		border-radius: 0;
		box-shadow: none;
		background: transparent;
	}
	.ts-mega__grid { grid-template-columns: 1fr; gap: var(--ts-4); }
	.ts-mega__promo { display: none; }
	.ts-mega__pill-item:first-of-type { padding-top: var(--ts-4); }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.ts-hero {
	padding-block: var(--ts-9) var(--ts-8);
	text-align: center;
	background:
		radial-gradient(ellipse 60% 80% at 50% -10%, var(--ts-accent-soft), transparent 70%);
	border-bottom: 1px solid var(--ts-border);
}

.ts-hero__title {
	max-width: 16ch;
	margin-inline: auto;
	font-size: clamp(2rem, 5vw, var(--ts-text-4xl));
	letter-spacing: -0.03em;
}

.ts-hero__lead {
	max-width: 58ch;
	margin-inline: auto;
	font-size: var(--ts-text-lg);
	color: var(--ts-text-muted);
}

.ts-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ts-3);
	margin-top: var(--ts-5);
}

.ts-hero__search { max-width: 480px; margin: var(--ts-5) auto 0; }

/* ==========================================================================
   Section headings
   ========================================================================== */

.ts-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--ts-4);
	margin-bottom: var(--ts-5);
}

.ts-section-head h2 { margin: 0; }

.ts-section-head p {
	margin: var(--ts-1) 0 0;
	color: var(--ts-text-muted);
	font-size: var(--ts-text-sm);
}

.ts-section-head__link {
	font-size: var(--ts-text-sm);
	font-weight: 600;
	white-space: nowrap;
}

/* ==========================================================================
   Product grid & cards
   ========================================================================== */

/* Pixer grid: tight column gutters, generous row rhythm. */
.ts-grid {
	display: grid;
	column-gap: var(--ts-4);
	row-gap: var(--ts-6);
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.ts-grid--2 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

/* Contained product card: surface, border, lift on hover. */
.ts-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--ts-surface);
	border: 1px solid var(--ts-border);
	border-radius: 16px;
	overflow: hidden;
	transition: transform var(--ts-ease), box-shadow var(--ts-ease), border-color var(--ts-ease);
}

.ts-card:hover {
	transform: translateY(-4px);
	border-color: var(--ts-border-strong);
	box-shadow: var(--ts-shadow-lg);
}

.ts-card__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--ts-surface-alt);
	border-bottom: 1px solid var(--ts-border);
	overflow: hidden;
}

.ts-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ts-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--ts-text-faint);
	font-size: var(--ts-text-ui);
}

/* Hover overlay with circular actions, as in Pixer's card. */
.ts-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ts-7);
	padding: var(--ts-4);
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity var(--ts-ease), gap var(--ts-ease);
}

.ts-card__media:hover .ts-card__overlay,
.ts-card__media:focus-within .ts-card__overlay {
	opacity: 1;
	gap: var(--ts-5);
}

.ts-card__action {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: var(--ts-text-ui);
	font-weight: 500;
	color: #ffffff;
}
.ts-card__action:hover { color: #ffffff; }

.ts-card__action span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	margin-bottom: var(--ts-2);
	background: #808080;
	border-radius: 50%;
	transition: background var(--ts-ease);
}
.ts-card__action:hover span { background: var(--ts-accent); }

/* Card body: category eyebrow, two-line title, price + arrow footer. */
.ts-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.375rem;
	padding: 1rem 1.125rem 1.125rem;
}

.ts-card__text { min-width: 0; }

.ts-card__title {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 620;
	line-height: 1.4;
	letter-spacing: -0.01em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.625rem;
}
.ts-card__title a { color: var(--ts-text); }
.ts-card__title a:hover { color: var(--ts-accent); }

.ts-card__meta {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ts-accent);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
a.ts-card__meta:hover { color: var(--ts-accent-hover); }

.ts-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ts-3);
	margin-top: auto;
	padding-top: 0.75rem;
	border-top: 1px solid var(--ts-border);
}

.ts-card__go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--ts-text-muted);
	background: var(--ts-surface-alt);
	border-radius: 50%;
	transition: background var(--ts-ease), color var(--ts-ease), transform var(--ts-ease);
}
.ts-card:hover .ts-card__go {
	color: #ffffff;
	background: var(--ts-accent);
	transform: translateX(2px);
}

.ts-card__price { flex-shrink: 0; }

/* Post card — stacked variant */
.ts-card--post .ts-card__media { aspect-ratio: 16 / 10; }

.ts-card__stack {
	display: flex;
	flex-direction: column;
	gap: var(--ts-2);
	padding-top: 0.875rem;
}

.ts-card__title--wrap {
	white-space: normal;
	font-size: var(--ts-text-base);
	font-weight: 600;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ts-card__excerpt {
	margin: 0;
	font-size: var(--ts-text-ui);
	color: var(--ts-text-muted);
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ts-card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--ts-2);
	margin-top: auto;
	font-size: var(--ts-text-ui);
	font-weight: 600;
	color: var(--ts-accent);
}
.ts-card__more:hover { gap: var(--ts-3); }

/* Price pill */
.ts-price {
	display: inline-block;
	padding: 0.3125rem 0.6875rem;
	font-size: var(--ts-text-ui);
	font-weight: 700;
	color: var(--ts-accent);
	background: var(--ts-accent-soft);
	border-radius: 8px;
}
.ts-price--free {
	color: var(--ts-lime-text);
	background: var(--ts-lime);
}

.ts-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.1875rem 0.5625rem;
	font-size: var(--ts-text-ui);
	font-weight: 700;
	color: var(--ts-accent);
	background: var(--ts-accent-soft);
	border-radius: 999px;
}

.ts-card__badges {
	position: absolute;
	top: 0.625rem;
	right: 0.625rem;
	z-index: 11;
	display: flex;
	gap: var(--ts-1);
}
.ts-card__badges .ts-badge {
	color: var(--ts-lime-text);
	background: var(--ts-lime);
	box-shadow: var(--ts-shadow);
}

/* ==========================================================================
   Featured release
   ========================================================================== */

.ts-featured {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: var(--ts-6);
	align-items: center;
	padding: var(--ts-5);
	background: var(--ts-surface);
	border: 1px solid var(--ts-border);
	border-radius: var(--ts-radius-lg);
}

@media (max-width: 860px) {
	.ts-featured { grid-template-columns: 1fr; }
}

.ts-featured__media {
	border-radius: var(--ts-radius);
	overflow: hidden;
	background: var(--ts-surface-alt);
	aspect-ratio: 16 / 10;
}
.ts-featured__media img { width: 100%; height: 100%; object-fit: cover; }

.ts-featured__body { min-width: 0; }

.ts-featured__title {
	font-size: var(--ts-text-2xl);
	margin: var(--ts-3) 0 var(--ts-2);
}
.ts-featured__title a { color: var(--ts-text); }
.ts-featured__title a:hover { color: var(--ts-accent); }

.ts-featured__text { color: var(--ts-text-muted); }

.ts-featured__foot {
	display: flex;
	align-items: center;
	gap: var(--ts-4);
	margin-top: var(--ts-4);
}

/* ==========================================================================
   Feature grid
   ========================================================================== */

.ts-features {
	display: grid;
	gap: var(--ts-5);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.ts-feature h3 {
	font-size: var(--ts-text-base);
	font-weight: 640;
	margin-bottom: var(--ts-2);
}

.ts-feature p {
	margin: 0;
	font-size: var(--ts-text-sm);
	color: var(--ts-text-muted);
}

/* ==========================================================================
   Sidebar & widgets
   ========================================================================== */

.ts-sidebar .widget { margin-bottom: var(--ts-6); }

.ts-sidebar .widget-title,
.widget-title {
	font-size: var(--ts-text-sm);
	font-weight: 650;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ts-text-faint);
}

.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { padding: var(--ts-1) 0; }

/* ==========================================================================
   Shop layout — category rail beside the grid
   ========================================================================== */

/* Archive hero band */
.ts-shop-hero {
	padding: clamp(2.75rem, 5vw, 4rem) 0 clamp(2.5rem, 4vw, 3.5rem);
	background:
		radial-gradient(ellipse 50% 90% at 50% -20%, var(--ts-accent-soft), transparent 70%),
		var(--ts-surface-alt);
	border-bottom: 1px solid var(--ts-border);
}

.ts-shop-hero__eyebrow {
	display: inline-block;
	margin: 0 0 var(--ts-2);
	font-size: var(--ts-text-ui);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ts-accent);
}

.ts-shop-hero h1 {
	margin: 0 0 var(--ts-2);
	font-size: clamp(1.75rem, 3.6vw, 2.5rem);
	letter-spacing: -0.03em;
}

.ts-shop-hero__sub {
	max-width: 60ch;
	margin: 0;
	color: var(--ts-text-muted);
}

/* Toolbar row above the grid */
.ts-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ts-4);
	margin-bottom: var(--ts-5);
}

.ts-shop-toolbar__count {
	margin: 0;
	font-size: var(--ts-text-ui);
	color: var(--ts-text-faint);
}

.ts-shop {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr);
	gap: var(--ts-6);
	align-items: start;
}

@media (max-width: 900px) {
	.ts-shop { grid-template-columns: 1fr; gap: var(--ts-5); }
}

/* min-width:0 stops long product titles blowing out the grid track. */
.ts-shop__main { min-width: 0; }

.ts-shop__sidebar { position: sticky; top: 88px; }

@media (max-width: 900px) {
	.ts-shop__sidebar { position: static; }
}

.ts-shop__sidebar-title {
	font-size: var(--ts-text-ui);
	font-weight: 650;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ts-text-faint);
	margin-bottom: var(--ts-3);
}

.ts-catlist { list-style: none; margin: 0; padding: 0; }

.ts-catlist__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ts-2);
	padding: 0.4375rem 0.625rem;
	font-size: var(--ts-text-ui);
	font-weight: 500;
	color: var(--ts-text-muted);
	border-radius: var(--ts-radius-sm);
	transition: color var(--ts-ease), background var(--ts-ease);
}

.ts-catlist__item:hover {
	color: var(--ts-text);
	background: var(--ts-surface-alt);
}

.ts-catlist__item.is-active {
	color: var(--ts-accent);
	background: var(--ts-accent-soft);
}

.ts-catlist__item em {
	font-style: normal;
	font-size: var(--ts-text-xs);
	color: var(--ts-text-faint);
}

/* ==========================================================================
   Category pills
   ========================================================================== */

.ts-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ts-2);
	list-style: none;
	margin: 0 0 var(--ts-6);
	padding: 0;
}

.ts-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--ts-2);
	padding: 0.375rem 0.875rem;
	font-size: var(--ts-text-sm);
	font-weight: 550;
	color: var(--ts-text-muted);
	background: var(--ts-surface);
	border: 1px solid var(--ts-border);
	border-radius: 999px;
	transition: all var(--ts-ease);
}
.ts-pill:hover, .ts-pill.is-active {
	color: var(--ts-text);
	border-color: var(--ts-border-strong);
	background: var(--ts-surface-alt);
}
.ts-pill__count { color: var(--ts-text-faint); font-size: var(--ts-text-xs); }

/* Meta line separator between date and author on single posts. */
.ts-article__author::before {
	content: '·';
	margin-right: var(--ts-3);
	color: var(--ts-text-faint);
}

/* ==========================================================================
   Single download
   ========================================================================== */

.ts-product {
	display: grid;
	gap: var(--ts-7);
	grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
	align-items: start;
	padding-block: var(--ts-7);
}

@media (max-width: 900px) {
	.ts-product { grid-template-columns: 1fr; gap: var(--ts-5); }
}

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

.ts-product__media {
	border: 1px solid var(--ts-border);
	border-radius: var(--ts-radius-lg);
	overflow: hidden;
	background: var(--ts-surface-alt);
}

.ts-product__title {
	font-size: var(--ts-text-3xl);
	margin-bottom: var(--ts-2);
}

.ts-product__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ts-3);
	margin-bottom: var(--ts-5);
	font-size: var(--ts-text-sm);
	color: var(--ts-text-muted);
}

.ts-product__content { font-size: var(--ts-text-base); }
.ts-product__content h2 { font-size: var(--ts-text-xl); margin-top: var(--ts-6); }
.ts-product__content h3 { font-size: var(--ts-text-lg); margin-top: var(--ts-5); }
.ts-product__content img { border-radius: var(--ts-radius); }

/* Sticky purchase panel */
.ts-buybox {
	position: sticky;
	top: 88px;
	padding: var(--ts-5);
	background: var(--ts-surface);
	border: 1px solid var(--ts-border);
	border-radius: var(--ts-radius-lg);
	box-shadow: var(--ts-shadow);
}

.ts-buybox__price {
	font-size: var(--ts-text-2xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-bottom: var(--ts-4);
}

.ts-buybox .edd_purchase_submit_wrapper { margin: 0 0 var(--ts-3); }
.ts-buybox .edd-add-to-cart,
.ts-buybox .edd_purchase_submit_wrapper a.edd-add-to-cart { width: 100%; }

.ts-buybox__note {
	margin: var(--ts-2) 0 0;
	font-size: var(--ts-text-xs);
	color: var(--ts-text-faint);
	text-align: center;
}

.ts-buybox__list {
	list-style: none;
	margin: var(--ts-4) 0 0;
	padding: var(--ts-4) 0 0;
	border-top: 1px solid var(--ts-border);
	font-size: var(--ts-text-sm);
	color: var(--ts-text-muted);
}
.ts-buybox__list li {
	display: flex;
	justify-content: space-between;
	gap: var(--ts-3);
	padding: var(--ts-1) 0;
}
.ts-buybox__list dt, .ts-buybox__list span:first-child { color: var(--ts-text-faint); }

/* ==========================================================================
   Posts / articles
   ========================================================================== */

.ts-article { padding-block: var(--ts-7); }

.ts-article__header { margin-bottom: var(--ts-6); }

.ts-article__title { font-size: var(--ts-text-3xl); }

.ts-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ts-3);
	font-size: var(--ts-text-sm);
	color: var(--ts-text-muted);
}

.ts-article__thumb {
	margin-bottom: var(--ts-6);
	border-radius: var(--ts-radius-lg);
	overflow: hidden;
}

.ts-prose > * + * { margin-top: var(--ts-4); }
.ts-prose h2 { margin-top: var(--ts-6); }
.ts-prose h3 { margin-top: var(--ts-5); }
.ts-prose img { border-radius: var(--ts-radius); }
.ts-prose ul, .ts-prose ol { padding-left: var(--ts-5); }

/* Full-bleed breakout for blocks inside the contained article column. */
.ts-prose .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Block-editor palette classes (has-<slug>-color / -background-color). */
.has-ts-accent-color { color: #1480a4; }
.has-ts-accent-background-color { background-color: #1480a4; }
.has-ts-accent-dark-color { color: #00799e; }
.has-ts-accent-dark-background-color { background-color: #00799e; }
.has-ts-lime-color { color: #d9f24f; }
.has-ts-lime-background-color { background-color: #d9f24f; }
.has-ts-ink-color { color: #0b0b10; }
.has-ts-ink-background-color { background-color: #0b0b10; }
.has-ts-text-color { color: #181818; }
.has-ts-text-background-color { background-color: #181818; }
.has-ts-muted-color { color: #646464; }
.has-ts-muted-background-color { background-color: #646464; }
.has-ts-surface-color { color: #f9f9f9; }
.has-ts-surface-background-color { background-color: #f9f9f9; }
.has-ts-white-color { color: #ffffff; }
.has-ts-white-background-color { background-color: #ffffff; }

.alignleft  { float: left;  margin: 0 var(--ts-5) var(--ts-4) 0; }
.alignright { float: right; margin: 0 0 var(--ts-4) var(--ts-5); }
.aligncenter { margin-inline: auto; }
.alignwide  { max-width: min(100%, 1100px); margin-inline: auto; }
.wp-caption-text, figcaption {
	font-size: var(--ts-text-sm);
	color: var(--ts-text-faint);
	text-align: center;
	margin-top: var(--ts-2);
}

.sticky .ts-card { border-color: var(--ts-accent); }

/* ==========================================================================
   Pagination
   ========================================================================== */

.ts-pagination {
	display: flex;
	justify-content: center;
	margin-top: var(--ts-7);
}

.ts-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ts-2);
}

.ts-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 var(--ts-2);
	font-size: var(--ts-text-sm);
	font-weight: 550;
	color: var(--ts-text-muted);
	background: var(--ts-surface);
	border: 1px solid var(--ts-border);
	border-radius: var(--ts-radius-sm);
	transition: all var(--ts-ease);
}
.ts-pagination .page-numbers:hover {
	color: var(--ts-text);
	border-color: var(--ts-border-strong);
}
.ts-pagination .page-numbers.current {
	color: var(--ts-accent-text);
	background: var(--ts-accent);
	border-color: var(--ts-accent);
}
.ts-pagination .dots { border-color: transparent; background: transparent; }

/* Shop sort control */
.ts-sort select {
	width: auto;
	min-width: 170px;
	height: 38px;
	font-size: var(--ts-text-ui);
	font-weight: 500;
	cursor: pointer;
}

/* ==========================================================================
   Search form
   ========================================================================== */

.ts-search {
	display: flex;
	gap: var(--ts-2);
}
.ts-search input[type="search"] { flex: 1; }

/* ==========================================================================
   Comments
   ========================================================================== */

.ts-comments {
	margin-top: var(--ts-8);
	padding-top: var(--ts-6);
	border-top: 1px solid var(--ts-border);
}

.ts-comments ol.comment-list { list-style: none; margin: 0; padding: 0; }
.ts-comments .children { list-style: none; padding-left: var(--ts-5); }

.ts-comments .comment-body {
	padding: var(--ts-4) 0;
	border-bottom: 1px solid var(--ts-border);
}

.ts-comments .comment-author img {
	border-radius: 50%;
	margin-right: var(--ts-2);
	display: inline-block;
	vertical-align: middle;
}

.ts-comments .comment-meta {
	font-size: var(--ts-text-sm);
	color: var(--ts-text-faint);
	margin-bottom: var(--ts-2);
}

.comment-respond { margin-top: var(--ts-6); }
.comment-form p { margin-bottom: var(--ts-3); }

/* ==========================================================================
   Footer
   ========================================================================== */

.ts-footer {
	margin-top: var(--ts-9);
	padding-block: var(--ts-7) var(--ts-5);
	background: var(--ts-surface-alt);
	border-top: 1px solid var(--ts-border);
	font-size: var(--ts-text-sm);
}

.ts-footer__cols {
	display: grid;
	gap: var(--ts-6);
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	margin-bottom: var(--ts-6);
}

.ts-footer__col { min-width: 0; }

.ts-footer h2, .ts-footer .widget-title {
	font-size: var(--ts-text-sm);
	font-weight: 650;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ts-text-faint);
	margin-bottom: var(--ts-3);
}

.ts-footer ul { list-style: none; margin: 0; padding: 0; }
.ts-footer li { margin-bottom: var(--ts-2); }
.ts-footer a { color: var(--ts-text-muted); }
.ts-footer a:hover { color: var(--ts-text); }

/* Bottom-bar menu runs horizontally, unlike the stacked widget columns. */
.ts-footer__menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ts-4);
	list-style: none;
	margin: 0;
	padding: 0;
}
.ts-footer__menu li { margin: 0; }

.ts-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ts-3);
	padding-top: var(--ts-5);
	border-top: 1px solid var(--ts-border);
	color: var(--ts-text-faint);
}

/* ==========================================================================
   Notices / empty states
   ========================================================================== */

.ts-empty {
	padding: var(--ts-8) var(--ts-5);
	text-align: center;
	color: var(--ts-text-muted);
	background: var(--ts-surface-alt);
	border: 1px dashed var(--ts-border-strong);
	border-radius: var(--ts-radius-lg);
}

.ts-notice {
	padding: var(--ts-3) var(--ts-4);
	background: var(--ts-accent-soft);
	border: 1px solid var(--ts-border);
	border-radius: var(--ts-radius);
	font-size: var(--ts-text-sm);
	margin-bottom: var(--ts-4);
}

/* ==========================================================================
   EDD overrides — keep plugin markup consistent with the theme
   ========================================================================== */

.edd_download_purchase_form { margin: 0; }

.edd_price_options ul { list-style: none; margin: 0 0 var(--ts-3); padding: 0; }
.edd_price_options li {
	padding: var(--ts-2) 0;
	border-bottom: 1px solid var(--ts-border);
}
.edd_price_options label { font-weight: 500; cursor: pointer; }

#edd_checkout_cart,
#edd_checkout_form_wrap fieldset {
	border: 1px solid var(--ts-border);
	border-radius: var(--ts-radius-lg);
	padding: var(--ts-5);
	margin-bottom: var(--ts-5);
	background: var(--ts-surface);
}

#edd_checkout_cart { padding: 0; overflow: hidden; }
#edd_checkout_cart th, #edd_checkout_cart td { padding: var(--ts-3) var(--ts-4); }

#edd_checkout_form_wrap legend {
	font-size: var(--ts-text-lg);
	font-weight: 650;
	padding: 0 var(--ts-2);
}

#edd_checkout_form_wrap label { display: block; }
#edd_checkout_form_wrap input[type="text"],
#edd_checkout_form_wrap input[type="email"],
#edd_checkout_form_wrap input[type="password"],
#edd_checkout_form_wrap select { margin-bottom: var(--ts-3); }

.edd_errors, .edd_error {
	padding: var(--ts-3) var(--ts-4);
	border: 1px solid var(--ts-danger);
	border-radius: var(--ts-radius);
	color: var(--ts-danger);
	background: color-mix(in srgb, var(--ts-danger) 8%, transparent);
	margin-bottom: var(--ts-4);
}

.edd_success {
	padding: var(--ts-3) var(--ts-4);
	border: 1px solid var(--ts-success);
	border-radius: var(--ts-radius);
	color: var(--ts-success);
	background: color-mix(in srgb, var(--ts-success) 8%, transparent);
	margin-bottom: var(--ts-4);
}

.edd-cart { list-style: none; padding: 0; }

table#edd_purchase_receipt,
table#edd_purchase_receipt_products {
	border: 1px solid var(--ts-border);
	border-radius: var(--ts-radius);
	overflow: hidden;
}

/* ==========================================================================
   Landing page (front page) — SaaS layout
   ==========================================================================
   Alternating light/dark sections. Light sections run on the theme tokens so
   they follow dark mode; the deliberately-dark sections keep fixed colours in
   both schemes, matching the reference design. */

:root {
	--ts-lime:       #d9f24f;
	--ts-lime-text:  #1a2405;
	--ts-ink:        #0b0b10;
	--ts-ink-soft:   #15151c;
	--ts-ink-border: #26262e;
}

/* ---- shared section furniture ---- */

.ts-lp-head {
	max-width: 640px;
	margin: 0 auto var(--ts-6);
	text-align: center;
}
.ts-lp-head h2 {
	font-size: clamp(1.6rem, 3.2vw, 2.25rem);
	letter-spacing: -0.025em;
	margin-bottom: var(--ts-2);
}
.ts-lp-head__sub { color: var(--ts-text-muted); margin: 0; }

.ts-lp-eyebrow {
	display: inline-block;
	margin: 0 0 var(--ts-3);
	font-size: var(--ts-text-ui);
	font-weight: 650;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ts-accent);
}
.ts-lp-eyebrow--lime { color: var(--ts-lime); }

/* ---- hero ---- */

.ts-lp-hero {
	position: relative;
	padding: var(--ts-8) 0 0;
	text-align: center;
	background:
		radial-gradient(ellipse 55% 60% at 50% -5%, var(--ts-accent-soft), transparent 70%);
	overflow: hidden;
}

.ts-lp-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--ts-2);
	margin: 0 0 var(--ts-5);
	padding: 0.375rem 0.875rem;
	font-size: var(--ts-text-ui);
	font-weight: 550;
	color: var(--ts-text-muted);
	background: var(--ts-surface);
	border: 1px solid var(--ts-border);
	border-radius: 999px;
	box-shadow: var(--ts-shadow);
}
.ts-lp-badge__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ts-accent);
}

.ts-lp-hero__title {
	max-width: 17ch;
	margin: 0 auto var(--ts-4);
	font-size: clamp(2.1rem, 5.4vw, 3.6rem);
	font-weight: 750;
	letter-spacing: -0.035em;
	line-height: 1.08;
}

.ts-lp-hero__lead {
	max-width: 56ch;
	margin: 0 auto var(--ts-5);
	font-size: var(--ts-text-lg);
	color: var(--ts-text-muted);
}

.ts-lp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ts-3);
	margin-bottom: var(--ts-7);
}

/* browser mockup */
.ts-lp-hero__mock {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
}

.ts-lp-browser {
	background: var(--ts-surface);
	border: 1px solid var(--ts-border);
	border-radius: 14px 14px 0 0;
	box-shadow: var(--ts-shadow-lg);
	overflow: hidden;
}

.ts-lp-browser__bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0.625rem 1rem;
	background: var(--ts-surface-alt);
	border-bottom: 1px solid var(--ts-border);
}
.ts-lp-browser__bar span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--ts-border-strong);
}
.ts-lp-browser__bar em {
	margin-left: var(--ts-3);
	font-style: normal;
	font-size: var(--ts-text-xs);
	color: var(--ts-text-faint);
	background: var(--ts-surface);
	border: 1px solid var(--ts-border);
	border-radius: 6px;
	padding: 0.125rem 0.75rem;
}

.ts-lp-browser img { width: 100%; display: block; }

/* floating chips */
.ts-lp-chip {
	position: absolute;
	z-index: 5;
	padding: 0.4375rem 0.875rem;
	font-size: var(--ts-text-ui);
	font-weight: 650;
	border-radius: 999px;
	box-shadow: var(--ts-shadow-md);
	transform: rotate(-3deg);
}
.ts-lp-chip--1 { top: -14px; left: 4%;  background: var(--ts-lime); color: var(--ts-lime-text); }
.ts-lp-chip--2 { top: 30%; right: -8px; background: var(--ts-accent); color: #fff; transform: rotate(3deg); }
.ts-lp-chip--3 { bottom: 18%; left: -10px; background: var(--ts-surface); color: var(--ts-text); border: 1px solid var(--ts-border); }

@media (max-width: 720px) {
	.ts-lp-chip { display: none; }
}

/* ---- trust strip ---- */

.ts-lp-trust {
	border-top: 1px solid var(--ts-border);
	border-bottom: 1px solid var(--ts-border);
	background: var(--ts-surface-alt);
	padding: var(--ts-6) 0;
}

.ts-lp-trust__label {
	margin: 0 0 var(--ts-5);
	text-align: center;
	font-size: var(--ts-text-ui);
	color: var(--ts-text-faint);
}

.ts-lp-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--ts-4);
	text-align: center;
}

.ts-lp-stat strong {
	display: block;
	font-size: var(--ts-text-2xl);
	font-weight: 750;
	letter-spacing: -0.02em;
}
.ts-lp-stat span {
	font-size: var(--ts-text-ui);
	color: var(--ts-text-muted);
}

/* ---- steps ---- */

.ts-lp-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--ts-4);
}

.ts-lp-step {
	padding: var(--ts-6) var(--ts-5);
	background: var(--ts-surface-alt);
	border: 1px solid var(--ts-border);
	border-radius: 18px;
}
.ts-lp-step h3 { font-size: var(--ts-text-lg); margin-bottom: var(--ts-2); }
.ts-lp-step p:last-child { margin: 0; font-size: var(--ts-text-sm); color: var(--ts-text-muted); }

.ts-lp-step--dark {
	background: var(--ts-ink);
	border-color: var(--ts-ink-border);
}
.ts-lp-step--dark h3 { color: #fff; }
.ts-lp-step--dark p:last-child { color: #a8a8b3; }

/* ---- numbered features + side tile ---- */

.ts-lp-features {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);
	gap: var(--ts-5);
	align-items: stretch;
}
@media (max-width: 860px) {
	.ts-lp-features { grid-template-columns: 1fr; }
}

.ts-lp-flist {
	display: flex;
	flex-direction: column;
}

.ts-lp-frow {
	display: flex;
	gap: var(--ts-5);
	padding: var(--ts-5) var(--ts-2);
	border-bottom: 1px solid var(--ts-border);
}
.ts-lp-frow:last-child { border-bottom: 0; }

.ts-lp-frow__num {
	flex-shrink: 0;
	font-size: var(--ts-text-ui);
	font-weight: 700;
	color: var(--ts-accent);
}
.ts-lp-frow h3 { font-size: var(--ts-text-base); margin-bottom: var(--ts-1); }
.ts-lp-frow p { margin: 0; font-size: var(--ts-text-sm); color: var(--ts-text-muted); }

.ts-lp-ftile {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--ts-6) var(--ts-5);
	background: var(--ts-ink);
	border-radius: 18px;
	color: #fff;
}
.ts-lp-ftile h3 { color: #fff; font-size: var(--ts-text-xl); }
.ts-lp-ftile p { color: #a8a8b3; font-size: var(--ts-text-sm); }
.ts-lp-ftile:hover { color: #fff; }

.ts-lp-ftile__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--ts-2);
	margin-top: var(--ts-3);
	padding: 0.5625rem 1rem;
	font-size: var(--ts-text-ui);
	font-weight: 650;
	color: var(--ts-lime-text);
	background: var(--ts-lime);
	border-radius: var(--ts-radius-sm);
	align-self: flex-start;
	transition: transform var(--ts-ease);
}
.ts-lp-ftile:hover .ts-lp-ftile__btn { transform: translateX(3px); }

/* ---- dark sections ---- */

.ts-lp-dark {
	background: var(--ts-ink);
	color: #c9c9d2;
}
.ts-lp-dark h2 { color: #ffffff; }
.ts-lp-dark .ts-lp-head__sub,
.ts-lp-dark p { color: #a8a8b3; }

.ts-btn--lime {
	background: var(--ts-lime);
	color: var(--ts-lime-text);
}
.ts-btn--lime:hover {
	background: #e4f96a;
	color: var(--ts-lime-text);
}

.ts-lp-showgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--ts-4);
	margin-top: var(--ts-6);
}

.ts-lp-showcard {
	display: block;
	background: var(--ts-ink-soft);
	border: 1px solid var(--ts-ink-border);
	border-radius: 14px;
	overflow: hidden;
	transition: transform var(--ts-ease), border-color var(--ts-ease);
}
.ts-lp-showcard:hover {
	transform: translateY(-3px);
	border-color: #3a3a46;
}

.ts-lp-showcard__media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--ts-ink-border);
}
.ts-lp-showcard__media img { width: 100%; height: 100%; object-fit: cover; }

.ts-lp-showcard__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--ts-4);
}
.ts-lp-showcard__body strong {
	color: #ffffff;
	font-size: var(--ts-text-sm);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ts-lp-showcard__body em {
	font-style: normal;
	font-size: var(--ts-text-ui);
	color: #8f8f9b;
}

.ts-lp-dark__cta {
	margin: var(--ts-6) 0 0;
	text-align: center;
}

/* ---- bento ---- */

.ts-lp-bento {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--ts-4);
}
@media (max-width: 900px) {
	.ts-lp-bento { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.ts-lp-bento { grid-template-columns: 1fr; }
}

.ts-lp-tile {
	grid-column: span 2;
	padding: var(--ts-6) var(--ts-5);
	background: var(--ts-surface);
	border: 1px solid var(--ts-border);
	border-radius: 18px;
}
@media (max-width: 900px) {
	.ts-lp-tile { grid-column: span 1; }
}

.ts-lp-bento .ts-lp-tile:nth-child(4),
.ts-lp-bento .ts-lp-tile:nth-child(5) {
	grid-column: span 3;
}
@media (max-width: 900px) {
	.ts-lp-bento .ts-lp-tile:nth-child(4),
	.ts-lp-bento .ts-lp-tile:nth-child(5) { grid-column: span 1; }
}

.ts-lp-tile h3 { font-size: var(--ts-text-lg); margin-bottom: var(--ts-2); }
.ts-lp-tile p { margin: 0; font-size: var(--ts-text-sm); color: var(--ts-text-muted); }

.ts-lp-tile--accent {
	background: var(--ts-accent);
	border-color: var(--ts-accent);
}
.ts-lp-tile--accent h3 { color: #fff; }
.ts-lp-tile--accent p { color: rgba(255, 255, 255, 0.85); }

.ts-lp-tile--dark {
	background: var(--ts-ink);
	border-color: var(--ts-ink-border);
}
.ts-lp-tile--dark h3 { color: #fff; }
.ts-lp-tile--dark p { color: #a8a8b3; }

.ts-lp-tile__stat {
	display: block;
	font-size: var(--ts-text-3xl);
	font-weight: 750;
	letter-spacing: -0.02em;
	color: var(--ts-lime);
	margin-bottom: var(--ts-2);
}

.ts-lp-tile--lime {
	background: var(--ts-lime);
	border-color: var(--ts-lime);
}
.ts-lp-tile--lime h3,
.ts-lp-tile--lime p { color: var(--ts-lime-text); }

/* ---- pricing ---- */

.ts-lp-pricing {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--ts-4);
	align-items: stretch;
}

.ts-lp-price {
	display: flex;
	flex-direction: column;
	padding: var(--ts-6) var(--ts-5);
	background: var(--ts-surface);
	border: 1px solid var(--ts-border);
	border-radius: 18px;
}

.ts-lp-price h3 { font-size: var(--ts-text-base); margin-bottom: var(--ts-3); }

.ts-lp-price__amount {
	font-size: var(--ts-text-3xl);
	font-weight: 750;
	letter-spacing: -0.025em;
	margin: 0 0 var(--ts-1);
	color: var(--ts-text);
}

.ts-lp-price__sub {
	font-size: var(--ts-text-ui);
	color: var(--ts-text-faint);
	margin-bottom: var(--ts-4);
}

.ts-lp-price ul {
	list-style: none;
	margin: 0 0 var(--ts-5);
	padding: var(--ts-4) 0 0;
	border-top: 1px solid var(--ts-border);
	flex: 1;
}
.ts-lp-price li {
	position: relative;
	padding: var(--ts-1) 0 var(--ts-1) 1.5rem;
	font-size: var(--ts-text-sm);
	color: var(--ts-text-muted);
}
.ts-lp-price li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.875rem;
	height: 0.875rem;
	border-radius: 50%;
	background: var(--ts-accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231480a4' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 60% no-repeat;
}

.ts-lp-price--featured {
	background: var(--ts-ink);
	border-color: var(--ts-ink-border);
	box-shadow: var(--ts-shadow-lg);
}
.ts-lp-price--featured h3,
.ts-lp-price--featured .ts-lp-price__amount { color: #fff; }
.ts-lp-price--featured .ts-lp-price__sub { color: #8f8f9b; }
.ts-lp-price--featured ul { border-top-color: var(--ts-ink-border); }
.ts-lp-price--featured li { color: #c9c9d2; }

.ts-lp-price__flag {
	align-self: flex-start;
	margin: 0 0 var(--ts-3);
	padding: 0.25rem 0.75rem;
	font-size: var(--ts-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ts-lime-text);
	background: var(--ts-lime);
	border-radius: 999px;
}

/* ---- FAQ ---- */

.ts-lp-faq {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: var(--ts-7);
	align-items: start;
}
@media (max-width: 860px) {
	.ts-lp-faq { grid-template-columns: 1fr; gap: var(--ts-5); }
}

.ts-lp-faq__intro h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	letter-spacing: -0.025em;
	margin-bottom: var(--ts-3);
}

.ts-lp-qa {
	border-bottom: 1px solid var(--ts-ink-border);
}

.ts-lp-qa summary {
	display: flex;
	align-items: center;
	gap: var(--ts-4);
	padding: var(--ts-4) 0;
	font-size: var(--ts-text-base);
	font-weight: 600;
	color: #ffffff;
	cursor: pointer;
	list-style: none;
}
.ts-lp-qa summary::-webkit-details-marker { display: none; }

.ts-lp-qa summary svg {
	margin-left: auto;
	flex-shrink: 0;
	transition: transform var(--ts-ease);
	color: #8f8f9b;
}
.ts-lp-qa[open] summary svg { transform: rotate(180deg); }

.ts-lp-qa__num {
	font-size: var(--ts-text-ui);
	font-weight: 700;
	color: var(--ts-lime);
}

.ts-lp-qa > p {
	margin: 0;
	padding: 0 0 var(--ts-4) 2.4rem;
	font-size: var(--ts-text-sm);
	color: #a8a8b3;
}

/* ---- newsletter CTA ---- */

.ts-lp-cta {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr);
	gap: var(--ts-6);
	align-items: center;
	padding: var(--ts-7) var(--ts-6);
	background: var(--ts-surface-alt);
	border: 1px solid var(--ts-border);
	border-radius: 22px;
}
@media (max-width: 800px) {
	.ts-lp-cta { grid-template-columns: 1fr; }
}

.ts-lp-cta h2 {
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	letter-spacing: -0.02em;
	margin-bottom: var(--ts-2);
}
.ts-lp-cta p { margin: 0; color: var(--ts-text-muted); font-size: var(--ts-text-sm); }

.ts-lp-cta__form form { display: flex; gap: var(--ts-2); }
.ts-lp-cta__form input[type="email"] { flex: 1; height: 44px; }
.ts-lp-cta__form input[type="submit"],
.ts-lp-cta__form button { height: 44px; }

/* ==========================================================================
   Landing spacing — matched to the reference design's rhythm
   ==========================================================================
   The reference runs ~120px section padding, ~56px head-to-content gaps,
   ~40px card padding, 24px grid gaps, and a ~1200px content column. These
   overrides retune the landing sections to that scale; header, footer and
   shop pages keep the tighter Pixer rhythm. */

/* Narrower content column for landing sections only (header/footer stay wide) */
.home section.ts-wrap,
.ts-lp-hero .ts-wrap,
.ts-lp-trust .ts-wrap,
.ts-lp-dark .ts-wrap {
	max-width: 1240px;
}

/* Section vertical rhythm */
.home .ts-section {
	padding-block: clamp(4.5rem, 8vw, 7.5rem);
}

.ts-lp-hero {
	padding-top: clamp(4rem, 7vw, 6rem);
}

.ts-lp-trust {
	padding-block: clamp(3rem, 5vw, 4.5rem);
}

/* Heading block breathes more before its content */
.ts-lp-head {
	margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.ts-lp-head h2 { margin-bottom: var(--ts-3); }
.ts-lp-head__sub { margin-top: var(--ts-2); }

/* Hero internals */
.ts-lp-badge { margin-bottom: var(--ts-6); }
.ts-lp-hero__title { margin-bottom: var(--ts-5); }
.ts-lp-hero__lead { margin-bottom: var(--ts-6); }
.ts-lp-hero__actions { margin-bottom: clamp(3.5rem, 6vw, 5rem); }

/* Cards: roomier padding, larger radii */
.ts-lp-step,
.ts-lp-tile,
.ts-lp-price {
	padding: 2.5rem 2.25rem;
	border-radius: 20px;
}

.ts-lp-ftile {
	padding: 2.5rem 2.25rem;
	border-radius: 20px;
}

.ts-lp-cta {
	padding: clamp(2.5rem, 5vw, 4rem);
	border-radius: 24px;
}

.ts-lp-showcard { border-radius: 16px; }
.ts-lp-showcard__body { padding: 1.25rem 1.5rem 1.5rem; }

/* Grid gaps up to the reference's 24px */
.ts-lp-steps,
.ts-lp-bento,
.ts-lp-pricing,
.ts-lp-showgrid {
	gap: 1.5rem;
}

.ts-lp-features { gap: 2rem; }

/* Numbered rows: taller line rhythm */
.ts-lp-frow { padding: 2rem 0.75rem; gap: 2rem; }

/* Steps/tiles: more space under the eyebrow */
.ts-lp-step .ts-lp-eyebrow,
.ts-lp-tile h3 { margin-bottom: var(--ts-3); }
.ts-lp-step h3 { margin-bottom: var(--ts-3); }

/* Stats: bigger figures, wider spacing */
.ts-lp-stats { gap: var(--ts-5); }
.ts-lp-stat strong { font-size: clamp(1.75rem, 3vw, 2.5rem); }

/* Showcase + CTA separation inside dark section */
.ts-lp-showgrid { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.ts-lp-dark__cta { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* FAQ: wider gutter between intro and accordion, roomier rows */
.ts-lp-faq { gap: clamp(3rem, 6vw, 5rem); }
.ts-lp-qa summary { padding: 1.375rem 0; }
.ts-lp-qa > p { padding-bottom: 1.375rem; }

/* Pricing internals */
.ts-lp-price__amount { margin-bottom: var(--ts-2); }
.ts-lp-price__sub { margin-bottom: var(--ts-5); }
.ts-lp-price ul { padding-top: var(--ts-5); margin-bottom: var(--ts-6); }
.ts-lp-price li { padding-block: 0.375rem; }

/* ==========================================================================
   EU Cookie Law banner — restyled to match the theme
   ==========================================================================
   The plugin injects its own inline colours, hence the !important flags.
   Rendered as a floating ink pill consistent with the landing's dark
   sections, in both colour schemes. */

.pea_cook_wrapper {
	position: fixed !important;
	left: 50% !important;
	right: auto !important;
	bottom: 1.25rem !important;
	transform: translateX(-50%);
	z-index: 9999 !important;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	width: auto !important;
	max-width: min(680px, calc(100vw - 2rem));
	margin: 0 !important;
	padding: 0.875rem 1.25rem !important;
	background: var(--ts-ink) !important;
	color: #c9c9d2 !important;
	font-family: var(--ts-font) !important;
	font-size: var(--ts-text-ui) !important;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	border: 1px solid var(--ts-ink-border);
	border-radius: 999px !important;
	box-shadow: var(--ts-shadow-lg);
}

.pea_cook_wrapper p,
.pea_cook_wrapper span {
	margin: 0 !important;
	color: inherit !important;
	font-size: inherit !important;
}

.pea_cook_wrapper a {
	color: var(--ts-lime) !important;
	text-decoration: none !important;
	font-weight: 600;
}
.pea_cook_wrapper a:hover { text-decoration: underline !important; }

.pea_cook_btn,
.pea_cook_wrapper #pea_cook_btn {
	display: inline-flex !important;
	align-items: center;
	margin: 0 !important;
	padding: 0.4375rem 1.125rem !important;
	font-family: inherit !important;
	font-size: var(--ts-text-ui) !important;
	font-weight: 650 !important;
	color: #ffffff !important;
	background: var(--ts-accent) !important;
	border: 0 !important;
	border-radius: 999px !important;
	cursor: pointer;
	transition: background var(--ts-ease);
}
.pea_cook_btn:hover,
.pea_cook_wrapper #pea_cook_btn:hover {
	background: var(--ts-accent-hover) !important;
	transform: none;
	box-shadow: none;
}

.pea_cook_more_info_popover {
	font-family: var(--ts-font) !important;
}

@media (max-width: 560px) {
	.pea_cook_wrapper {
		border-radius: 16px !important;
		bottom: 0.75rem !important;
	}
}

/* ==========================================================================
   Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.ts-card:hover { transform: none; }
	.ts-card:hover .ts-card__media img { transform: none; }
}