/* ==========================================================================
   XllenTech Service: component styles
   Colour tokens come from theme.json (light values). Dark values are applied
   for visitors who chose dark, visitors whose OS prefers dark (unless they
   chose light), and always-dark components (console, bands, CTA).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
	color-scheme: light;
	--xs-grid: rgba(30, 38, 50, .07);
	--xs-glow-a: rgba(132, 196, 20, .18);
	--xs-glow-b: rgba(110, 31, 42, .10);
	--xs-header-bg: rgba(255, 255, 255, .84);
	--xs-card-shadow: 0 1px 2px rgba(10, 13, 18, .04), 0 14px 34px -22px rgba(10, 13, 18, .22);
	--xs-hover-border: rgba(63, 109, 0, .45);
	--xs-mark-stroke: #d3d9e2;
	--xs-mark-fill: rgba(30, 38, 50, .06);
	--xs-field-bg: #ffffff;
	--xs-error: #b42318;
	--xs-error-bg: #fef3f2;
	--xs-ok-bg: #f3f9e6;
}

:root[data-theme="dark"],
.xs-console, .xs-band, .xs-cta {
	color-scheme: dark;
	--wp--preset--color--base: #0a0d12;
	--wp--preset--color--surface: #11161e;
	--wp--preset--color--raised: #18202b;
	--wp--preset--color--line: #253041;
	--wp--preset--color--muted: #8d99ab;
	--wp--preset--color--contrast: #e9edf3;
	--wp--preset--color--heading: #ffffff;
	--wp--preset--color--accent: #b8f23e;
	--wp--preset--color--light: #10151c;
	--xs-grid: rgba(141, 153, 171, .09);
	--xs-glow-a: rgba(184, 242, 62, .14);
	--xs-glow-b: rgba(110, 31, 42, .2);
	--xs-header-bg: rgba(10, 13, 18, .8);
	--xs-card-shadow: none;
	--xs-hover-border: rgba(184, 242, 62, .45);
	--xs-mark-stroke: #2f3b4e;
	--xs-mark-fill: rgba(37, 48, 65, .55);
	--xs-field-bg: #0d1117;
	--xs-error: #ff8a80;
	--xs-error-bg: rgba(180, 35, 24, .16);
	--xs-ok-bg: rgba(184, 242, 62, .08);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--wp--preset--color--base: #0a0d12;
		--wp--preset--color--surface: #11161e;
		--wp--preset--color--raised: #18202b;
		--wp--preset--color--line: #253041;
		--wp--preset--color--muted: #8d99ab;
		--wp--preset--color--contrast: #e9edf3;
		--wp--preset--color--heading: #ffffff;
		--wp--preset--color--accent: #b8f23e;
		--wp--preset--color--light: #10151c;
		--xs-grid: rgba(141, 153, 171, .09);
		--xs-glow-a: rgba(184, 242, 62, .14);
		--xs-glow-b: rgba(110, 31, 42, .2);
		--xs-header-bg: rgba(10, 13, 18, .8);
		--xs-card-shadow: none;
		--xs-hover-border: rgba(184, 242, 62, .45);
		--xs-mark-stroke: #2f3b4e;
		--xs-mark-fill: rgba(37, 48, 65, .55);
		--xs-field-bg: #0d1117;
		--xs-error: #ff8a80;
		--xs-error-bg: rgba(180, 35, 24, .16);
		--xs-ok-bg: rgba(184, 242, 62, .08);
	}
}

:root,
.xs-console, .xs-band, .xs-cta {
	--xs-base: var(--wp--preset--color--base);
	--xs-surface: var(--wp--preset--color--surface);
	--xs-raised: var(--wp--preset--color--raised);
	--xs-line: var(--wp--preset--color--line);
	--xs-muted: var(--wp--preset--color--muted);
	--xs-text: var(--wp--preset--color--contrast);
	--xs-heading: var(--wp--preset--color--heading);
	--xs-accent: var(--wp--preset--color--accent);
}
:root {
	--xs-ink: var(--wp--preset--color--ink);
	--xs-signal: var(--wp--preset--color--signal);
	--xs-mono: var(--wp--preset--font-family--mono);
	--xs-display: var(--wp--preset--font-family--display);
	--xs-radius: 14px;
	--xs-ease: cubic-bezier(.2, .7, .2, 1);
	--xs-topbar-h: 36px;
}
.xs-console, .xs-band, .xs-cta { color: var(--xs-text); }

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color .3s var(--xs-ease), color .3s var(--xs-ease); }
::selection { background: var(--xs-signal); color: var(--xs-ink); }
:focus-visible { outline: 2px solid var(--xs-accent); outline-offset: 3px; border-radius: 4px; }
.wp-site-blocks > * + * { margin-block-start: 0; }
img { max-width: 100%; height: auto; }
main { min-height: 50vh; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--xs-topbar-h));
	z-index: 100;
}
.xs-topbar { border-bottom: 1px solid var(--xs-line); background: var(--xs-base); }
.xs-topbar > .alignwide { min-height: calc(var(--xs-topbar-h) - .9rem - 1px); align-items: center; }
.xs-topbar p { margin: 0; line-height: 1.4; }
.xs-topbar a { color: var(--xs-text); }
.xs-topbar a:hover { color: var(--xs-accent); text-decoration: none; }
.xs-status::before {
	content: "";
	display: inline-block;
	width: 7px; height: 7px;
	margin-right: .55em;
	border-radius: 50%;
	background: var(--xs-signal);
	vertical-align: 1px;
	animation: xs-pulse 2.4s infinite;
}
@keyframes xs-pulse {
	0% { box-shadow: 0 0 0 0 rgba(184, 242, 62, .55); }
	70% { box-shadow: 0 0 0 8px rgba(184, 242, 62, 0); }
	100% { box-shadow: 0 0 0 0 rgba(184, 242, 62, 0); }
}

/* Blur on a pseudo-element so the mobile menu overlay isn't trapped inside the header. */
.xs-header { position: relative; z-index: 0; border-bottom: 1px solid var(--xs-line); }
.xs-header::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: var(--xs-header-bg);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
	pointer-events: none;
}

/* Brand: logo (or site title when no logo is set) + "portal" tag */
.xs-brand { align-items: center; min-width: 0; }
.xs-logo img { display: block; height: auto; }
.xs-site-title { margin: 0; font-family: var(--xs-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; white-space: nowrap; }
.xs-site-title a { color: var(--xs-heading); text-decoration: none; }
.xs-brand:has(.xs-logo img) .xs-site-title { display: none; }
.xs-brand-tag { margin: 0; }
.xs-brand-tag a {
	display: inline-block;
	padding: .15rem .55rem;
	border: 1px solid var(--xs-line);
	border-radius: 6px;
	font-family: var(--xs-mono);
	font-size: .75rem;
	line-height: 1.5;
	color: var(--xs-accent);
	text-decoration: none;
}
.xs-brand-tag a::before { content: "/"; opacity: .55; }
.xs-brand-tag a:hover { border-color: var(--xs-accent); text-decoration: none; }

.xs-header .wp-block-navigation a { color: var(--xs-text); }
.xs-header .wp-block-navigation a:hover { color: var(--xs-accent); text-decoration: none; }
.xs-header .wp-block-navigation .current-menu-item > a,
.xs-header .wp-block-navigation a[aria-current="page"] { color: var(--xs-accent); }
.xs-header .wp-block-navigation .xs-mobile-only { display: none; }

/* Mobile menu overlay */
.xs-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.25rem clamp(1rem, 5vw, 2rem) 2rem;
	background: var(--xs-base) !important;
	color: var(--xs-text) !important;
}
.xs-header .wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-close { top: 1.25rem; right: clamp(1rem, 5vw, 2rem); width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--xs-line); border-radius: 10px; color: var(--xs-text); }
.xs-header .wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 4rem !important; align-items: stretch !important; }
.xs-header .wp-block-navigation .is-menu-open .wp-block-navigation__container { width: 100%; align-items: stretch !important; gap: 0 !important; }
.xs-header .wp-block-navigation .is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--xs-line); padding: .9rem 0; justify-content: flex-start !important; }
.xs-header .wp-block-navigation .is-menu-open .wp-block-navigation-item > a { font-family: var(--xs-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; color: var(--xs-heading); }
.xs-header .wp-block-navigation .is-menu-open .xs-mobile-only { display: flex; }
.xs-header .wp-block-navigation .is-menu-open .xs-mobile-only > a { color: var(--xs-accent); }
.xs-header .wp-block-navigation__responsive-container-open:not(.always-shown) { width: 40px; height: 40px; place-items: center; border: 1px solid var(--xs-line); border-radius: 10px; color: var(--xs-text); }
@media (max-width: 599px) { .xs-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: grid; } }

/* Toggle + account buttons */
.xs-theme-toggle,
.xs-logout {
	appearance: none;
	display: inline-grid;
	place-items: center;
	width: 40px; height: 40px;
	min-width: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--xs-line);
	border-radius: 10px;
	background: transparent;
	color: var(--xs-text);
	cursor: pointer;
	transition: border-color .2s var(--xs-ease), color .2s var(--xs-ease);
}
.xs-theme-toggle:hover, .xs-logout:hover { border-color: var(--xs-accent); color: var(--xs-accent); text-decoration: none; }
.xs-theme-toggle svg, .xs-logout svg { width: 18px; height: 18px; grid-area: 1 / 1; transition: transform .4s var(--xs-ease), opacity .3s var(--xs-ease); }
.xs-theme-toggle .xs-icon-sun { opacity: 0; transform: rotate(-90deg) scale(.6); }
:root[data-theme="dark"] .xs-theme-toggle .xs-icon-sun { opacity: 1; transform: none; }
:root[data-theme="dark"] .xs-theme-toggle .xs-icon-moon { opacity: 0; transform: rotate(90deg) scale(.6); }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .xs-theme-toggle .xs-icon-sun { opacity: 1; transform: none; }
	:root:not([data-theme="light"]) .xs-theme-toggle .xs-icon-moon { opacity: 0; transform: rotate(90deg) scale(.6); }
}

.xs-account { display: flex; align-items: center; gap: .5rem; }
.xs-account-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	height: 40px;
	box-sizing: border-box;
	padding: 0 1rem 0 .8rem;
	border-radius: 10px;
	background: var(--xs-signal);
	color: var(--xs-ink) !important;
	font-family: var(--xs-mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: .02em;
	white-space: nowrap;
	text-decoration: none !important;
	transition: background-color .2s var(--xs-ease), color .2s var(--xs-ease), transform .2s var(--xs-ease);
}
.xs-account-btn:hover { background: var(--xs-heading); color: var(--xs-base) !important; transform: translateY(-1px); }
.xs-account-btn svg { width: 16px; height: 16px; }
.xs-avatar { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--xs-ink); color: var(--xs-signal); font-size: .75rem; }
.xs-account-btn:hover .xs-avatar { background: var(--xs-signal); color: var(--xs-ink); }

@media (max-width: 781px) {
	:root { --xs-topbar-h: 0px; }
	.xs-topbar { display: none; }
	.xs-header-actions { gap: .6rem !important; }
	.xs-brand-tag { display: none; }
}
@media (max-width: 480px) {
	.xs-account-btn span:not(.xs-avatar) { display: none; }
	.xs-account-btn { padding: 0; width: 40px; justify-content: center; }
	.xs-logo img { width: 128px !important; }
}
@media (max-width: 600px) {
	.wp-site-blocks > header.wp-block-template-part { top: 0; }
}

/* --------------------------------------------------------------------------
   Shared helpers
   -------------------------------------------------------------------------- */
.is-style-xs-eyebrow {
	font-family: var(--xs-mono);
	font-size: var(--wp--preset--font-size--x-small) !important;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--xs-accent);
}
.is-style-xs-eyebrow::before { content: "// "; opacity: .55; white-space: pre; }
.xs-lede { color: var(--xs-muted); max-width: 42rem; font-size: var(--wp--preset--font-size--large); }

.xs-grid-bg { position: relative; isolation: isolate; overflow: hidden; }
.xs-grid-bg::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background-image:
		linear-gradient(to right, var(--xs-grid) 1px, transparent 1px),
		linear-gradient(to bottom, var(--xs-grid) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 25%, #000 30%, transparent 100%);
	mask-image: radial-gradient(ellipse 80% 75% at 50% 25%, #000 30%, transparent 100%);
	pointer-events: none;
}
.xs-grid-bg::after {
	content: "";
	position: absolute; z-index: -1;
	width: 760px; height: 760px;
	right: -240px; top: -300px;
	background: radial-gradient(circle, var(--xs-glow-a) 0%, var(--xs-glow-b) 42%, transparent 70%);
	pointer-events: none;
}

/* Buttons */
.wp-element-button, .wp-block-button__link { transition: background-color .2s var(--xs-ease), color .2s var(--xs-ease), border-color .2s var(--xs-ease), transform .2s var(--xs-ease); }
.wp-block-button:not(.is-style-xs-ghost) .wp-block-button__link:hover { transform: translateY(-1px); }
.wp-block-button__link::after { content: "→"; display: inline-block; margin-left: .5em; transition: transform .2s var(--xs-ease); }
.wp-block-button__link:hover::after { transform: translateX(3px); }
.is-style-xs-ghost .wp-block-button__link { background: transparent !important; color: var(--xs-heading) !important; border: 1px solid var(--xs-line); }
.is-style-xs-ghost .wp-block-button__link:hover { border-color: var(--xs-accent); color: var(--xs-accent) !important; }
.is-style-xs-ghost .wp-block-button__link::after { content: none; }

/* Check list */
.is-style-xs-checks { list-style: none; padding-left: 0; }
.is-style-xs-checks li { position: relative; padding-left: 1.9rem; margin-bottom: .6rem; font-weight: 500; color: var(--xs-heading); }
.is-style-xs-checks li::before {
	content: "";
	position: absolute; left: 0; top: .2em;
	width: 1.2rem; height: 1.2rem;
	border-radius: 50%;
	background: var(--xs-signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0d12' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* Callout */
.is-style-xs-callout { padding: 1rem 1.25rem; border: 1px solid var(--xs-line); border-left: 3px solid var(--xs-accent); border-radius: 10px; background: var(--xs-surface); }

/* Card */
.is-style-xs-card {
	position: relative;
	padding: 1.6rem;
	border: 1px solid var(--xs-line);
	border-radius: var(--xs-radius);
	background: var(--xs-base);
	box-shadow: var(--xs-card-shadow);
	transition: border-color .25s var(--xs-ease), transform .25s var(--xs-ease);
}
.is-style-xs-card:hover { border-color: var(--xs-hover-border); }

/* Scroll box (agreements) */
.is-style-xs-scroll-box {
	max-height: 26rem;
	overflow-y: auto;
	padding: 1.25rem 1.5rem !important;
	border: 1px solid var(--xs-line);
	border-radius: 12px;
	background: var(--xs-surface);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	scrollbar-width: thin;
}
.is-style-xs-scroll-box > * { margin-block: 0 .85em !important; }
.is-style-xs-scroll-box h3 { font-size: var(--wp--preset--font-size--large) !important; }
.is-style-xs-scroll-box h4 { margin-top: 1.4em !important; font-size: var(--wp--preset--font-size--medium) !important; font-family: var(--xs-display); }

/* --------------------------------------------------------------------------
   Console (always dark)
   -------------------------------------------------------------------------- */
.xs-console {
	border-radius: var(--xs-radius);
	border: 1px solid var(--xs-line);
	background: var(--xs-surface);
	overflow: hidden;
	box-shadow: 0 40px 80px -30px rgba(10, 13, 18, .55), 0 0 0 1px rgba(184, 242, 62, .06);
	font-family: var(--xs-mono);
	font-size: var(--wp--preset--font-size--small);
}
.xs-console-bar { display: flex; align-items: center; gap: .75rem; padding: .75rem 1.1rem; border-bottom: 1px solid var(--xs-line); background: var(--xs-raised); color: var(--xs-muted); font-size: var(--wp--preset--font-size--x-small); }
.xs-console-dots { display: inline-block; width: 42px; height: 10px; background: radial-gradient(circle at 5px 5px, #ff5f57 4.5px, transparent 5px), radial-gradient(circle at 21px 5px, #febc2e 4.5px, transparent 5px), radial-gradient(circle at 37px 5px, #28c840 4.5px, transparent 5px); opacity: .8; }
.xs-console-body { padding: 1.1rem 1.25rem 1.3rem; }
.xs-console-body p { margin: 0; }
.xs-console-cmd { color: var(--xs-text); }
.xs-console-cmd::before { content: "$ "; color: var(--xs-signal); }
.xs-console dl { margin: .9rem 0; }
.xs-console dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px dashed rgba(141, 153, 171, .18); }
.xs-console dt { color: var(--xs-muted); }
.xs-console dd { margin: 0; color: var(--xs-heading); font-weight: 600; text-align: right; }
.xs-console-ok { color: var(--xs-signal); }
.xs-console-ok::before { content: "● "; font-size: .7em; vertical-align: 2px; }
.xs-console-prompt { margin-top: .6rem !important; }
.xs-console-prompt::before { content: "$ "; color: var(--xs-signal); }
.xs-console-prompt a { color: var(--xs-text); text-decoration: none; }
.xs-console-prompt a:hover { color: var(--xs-signal); text-decoration: none; }
.xs-console-prompt::after {
	content: "";
	display: inline-block;
	width: .55em; height: 1.05em;
	margin-left: .25em;
	background: var(--xs-signal);
	vertical-align: -3px;
	animation: xs-blink 1.1s steps(1) infinite;
}
@keyframes xs-blink { 50% { opacity: 0; } }

/* --------------------------------------------------------------------------
   Home
   -------------------------------------------------------------------------- */
.xs-hero { border-bottom: 1px solid var(--xs-line); }
.xs-hero-title { font-size: clamp(2.5rem, 5.4vw, 4.4rem) !important; text-wrap: balance; margin-top: .6rem !important; }
.xs-hero-title mark,
.xs-hero-title mark.has-inline-color {
	color: var(--xs-heading);
	background: linear-gradient(to top, transparent .04em, var(--xs-signal) .04em, var(--xs-signal) .16em, transparent .16em) no-repeat;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.xs-hero-video { margin-top: 1.25rem !important; font-size: var(--wp--preset--font-size--small); }
.xs-hero-video a { display: inline-flex; align-items: center; gap: .6rem; color: var(--xs-text); }
.xs-hero-video a::before {
	content: "";
	width: 30px; height: 30px;
	border-radius: 50%;
	border: 1px solid var(--xs-line);
	background: var(--xs-base) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236e1f2a'%3E%3Cpath d='M8 5.5v13l10.5-6.5z'/%3E%3C/svg%3E") 55% 50% / 14px no-repeat;
}
.xs-hero-video a:hover { color: var(--xs-accent); text-decoration: none; }

.xs-section-head { margin-bottom: var(--wp--preset--spacing--50) !important; }
.xs-section-head > * { margin-left: 0 !important; }
.xs-section-head h2 { margin-top: .35rem; text-wrap: balance; }
.xs-section-head .is-style-xs-eyebrow { margin-bottom: 0; }
.xs-section--alt { background: var(--xs-surface); border-block: 1px solid var(--xs-line); }

.xs-cards { gap: 1.25rem !important; }
.xs-feature h3 { margin: 1.1rem 0 .5rem; font-size: var(--wp--preset--font-size--large); }
.xs-feature p { margin: 0; color: var(--xs-muted); font-size: var(--wp--preset--font-size--small); }
.xs-feature .xs-card-link { margin-top: 1rem; }
.xs-card-link a { font-family: var(--xs-mono); font-size: var(--wp--preset--font-size--x-small); font-weight: 600; color: var(--xs-accent); }
.xs-card-link a::after { content: " →"; }
.xs-section--alt .is-style-xs-card { background: var(--xs-base); }

/* Icons drawn with CSS masks: add class xs-ico-{name} to a card or panel row. */
.xs-feature[class*="xs-ico-"]::before,
.xs-panel-row[class*="xs-ico-"]::before {
	content: "";
	display: block;
	width: 46px; height: 46px;
	border-radius: 12px;
	background-color: var(--xs-surface);
	border: 1px solid var(--xs-line);
	background-image: var(--xs-ico);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px;
}
:root[data-theme="dark"] .xs-feature[class*="xs-ico-"]::before,
:root[data-theme="dark"] .xs-panel-row[class*="xs-ico-"]::before { filter: invert(1) hue-rotate(180deg) brightness(1.1); }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .xs-feature[class*="xs-ico-"]::before,
	:root:not([data-theme="light"]) .xs-panel-row[class*="xs-ico-"]::before { filter: invert(1) hue-rotate(180deg) brightness(1.1); }
}
.xs-ico-ticket { --xs-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d7a0c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9a3 3 0 0 0 0 6v3a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-3a3 3 0 0 1 0-6V6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1z'/%3E%3Cpath d='M14 5v2M14 11v2M14 17v2'/%3E%3C/svg%3E"); }
.xs-ico-clock { --xs-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d7a0c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.xs-ico-invoice { --xs-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d7a0c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h9l5 5v15H6z'/%3E%3Cpath d='M14 2v6h6M9 13h6M9 17h6'/%3E%3C/svg%3E"); }
.xs-ico-chart { --xs-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d7a0c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M7 15l4-4 3 3 5-6'/%3E%3C/svg%3E"); }
.xs-ico-rocket { --xs-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e1f2a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 15c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1-.1-2.9a2.2 2.2 0 0 0-2.9-.1z'/%3E%3Cpath d='M12 15l-3-3a22 22 0 0 1 2-4A12.9 12.9 0 0 1 22 2c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.6-3 2-4c1.6-1.1 5 0 5 0M12 15v5s3-.6 4-2c1.1-1.6 0-5 0-5'/%3E%3C/svg%3E"); }
.xs-ico-trophy { --xs-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e1f2a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8M12 17v4M7 4h10v5a5 5 0 0 1-10 0z'/%3E%3Cpath d='M17 5h3v2a3 3 0 0 1-3 3M7 5H4v2a3 3 0 0 0 3 3'/%3E%3C/svg%3E"); }
.xs-ico-briefcase { --xs-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e1f2a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2M2 13h20'/%3E%3C/svg%3E"); }
.xs-ico-smile { --xs-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e1f2a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01'/%3E%3C/svg%3E"); }
.xs-ico-headset { --xs-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d7a0c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14v-2a9 9 0 0 1 18 0v2'/%3E%3Cpath d='M21 15a2 2 0 0 1-2 2h-1v-6h1a2 2 0 0 1 2 2zM3 15a2 2 0 0 0 2 2h1v-6H5a2 2 0 0 0-2 2zM18 17v1a3 3 0 0 1-3 3h-3'/%3E%3C/svg%3E"); }
.xs-ico-server { --xs-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d7a0c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='8' rx='2'/%3E%3Crect x='3' y='13' width='18' height='8' rx='2'/%3E%3Cpath d='M7 7h.01M7 17h.01'/%3E%3C/svg%3E"); }
.xs-ico-laptop { --xs-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d7a0c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='11' rx='1.5'/%3E%3Cpath d='M2 19h20'/%3E%3C/svg%3E"); }

/* Service panel */
.xs-panel {
	border: 1px solid var(--xs-line);
	border-radius: var(--xs-radius);
	background: var(--xs-base);
	box-shadow: var(--xs-card-shadow);
	overflow: hidden;
}
.xs-panel-row {
	display: grid !important;
	grid-template-columns: 46px 1fr;
	grid-template-rows: auto auto;
	column-gap: 1rem;
	align-items: center;
	margin: 0 !important;
	padding: 1.25rem 1.4rem;
	border-bottom: 1px solid var(--xs-line);
	color: var(--xs-muted);
	font-size: var(--wp--preset--font-size--small);
}
.xs-panel-row:last-child { border-bottom: 0; }
.xs-panel-row::before { grid-row: 1 / 3; }
.xs-panel-row strong { display: block; color: var(--xs-heading); font-family: var(--xs-display); font-size: var(--wp--preset--font-size--large); font-weight: 600; }

/* Bands (always dark) */
.xs-band { position: relative; isolation: isolate; overflow: hidden; background: var(--wp--preset--color--ink); }
.xs-band::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background-image: radial-gradient(rgba(184, 242, 62, .16) 1px, transparent 1px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 100%);
	mask-image: linear-gradient(100deg, transparent 30%, #000 100%);
}
.xs-band h2 { color: #fff; text-wrap: balance; margin-top: .35rem; }
.xs-band p:not(.is-style-xs-eyebrow) { color: rgba(233, 237, 243, .78); }
.xs-band .is-style-xs-checks li { color: #fff; }

.xs-cta-wrap { background: var(--xs-base); }
.xs-cta { position: relative; isolation: isolate; overflow: hidden; border-radius: 20px; }
.xs-cta::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px);
	background-size: 18px 18px;
	-webkit-mask-image: linear-gradient(105deg, transparent 35%, #000 100%);
	mask-image: linear-gradient(105deg, transparent 35%, #000 100%);
}
.xs-cta > * { margin-left: 0 !important; }
.xs-cta h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.4rem); text-wrap: balance; }
.xs-cta p:not(.is-style-xs-eyebrow) { color: rgba(255, 255, 255, .8); }
.xs-cta .is-style-xs-eyebrow { color: #ffd2d8; }
.xs-cta .is-style-xs-ghost .wp-block-button__link { color: #fff !important; border-color: rgba(255, 255, 255, .35); }
.xs-cta-contact { margin-top: 1rem !important; }
.xs-cta-contact a { color: #fff !important; font-family: var(--xs-mono); font-size: var(--wp--preset--font-size--small); }

/* --------------------------------------------------------------------------
   Page head + prose
   -------------------------------------------------------------------------- */
.xs-page-head { border-bottom: 1px solid var(--xs-line); }
.xs-page-head h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem) !important; text-wrap: balance; margin-top: .4rem; }
.xs-page-head--sm h1 { font-size: clamp(1.9rem, 3.6vw, 2.75rem) !important; }
.xs-page-head .is-style-xs-eyebrow { margin-bottom: 0; }
.xs-secure::after { content: " · private link"; color: var(--xs-muted); text-transform: none; letter-spacing: 0; }

.xs-prose h2 { font-size: var(--wp--preset--font-size--x-large); margin-top: 2.2em; }
.xs-prose h3 { font-size: var(--wp--preset--font-size--large); margin-top: 1.8em; }
.xs-prose a:not(.wp-element-button):not(.button):not(.xs-account-btn) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.xs-prose .wp-block-social-links a { text-decoration: none !important; }

/* Search results / index */
.xs-result { padding: 1.25rem 0; border-bottom: 1px solid var(--xs-line); }
.xs-result h2 { margin: 0 0 .4rem; }
.xs-result h2 a { color: var(--xs-heading); }
.xs-result .wp-block-post-excerpt { color: var(--xs-muted); margin: 0; }
.xs-search .wp-block-search__inside-wrapper { max-width: 30rem; }

/* 404 */
.xs-404-code { margin: 0 !important; font-family: var(--xs-display); font-weight: 700; font-size: clamp(5rem, 16vw, 10rem) !important; line-height: .9; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px var(--xs-accent); }

/* --------------------------------------------------------------------------
   Form controls (client forms, WooCommerce, search)
   -------------------------------------------------------------------------- */
.xs-form input[type="text"], .xs-form input[type="email"], .xs-form input[type="tel"], .xs-form select, .xs-form textarea,
.woocommerce form .input-text, .woocommerce form select, .woocommerce-page form .input-text,
.woocommerce form input[type="text"], .woocommerce form input[type="email"], .woocommerce form input[type="password"], .woocommerce form input[type="tel"],
.wp-block-search__input {
	width: 100%;
	box-sizing: border-box;
	min-height: 46px;
	padding: .65rem .85rem;
	border: 1px solid var(--xs-line);
	border-radius: 10px;
	background: var(--xs-field-bg);
	color: var(--xs-text);
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
	transition: border-color .2s var(--xs-ease), box-shadow .2s var(--xs-ease);
}
.xs-form textarea, .woocommerce form textarea { min-height: 7rem; resize: vertical; }
.xs-form select, .woocommerce form select {
	appearance: none;
	padding-right: 2.4rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d99ab' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .8rem center;
	background-size: 16px;
}
.xs-form input:focus, .xs-form select:focus, .xs-form textarea:focus,
.woocommerce form .input-text:focus, .woocommerce form select:focus, .woocommerce form input:focus,
.wp-block-search__input:focus {
	outline: none;
	border-color: var(--xs-accent);
	box-shadow: 0 0 0 3px rgba(132, 196, 20, .22);
}
.xs-form ::placeholder, .woocommerce form ::placeholder { color: var(--xs-muted); opacity: .8; }

/* --------------------------------------------------------------------------
   Client forms
   -------------------------------------------------------------------------- */
.xs-form-wrap { margin-top: var(--wp--preset--spacing--40); }
.xs-form-intro { margin-bottom: var(--wp--preset--spacing--40); color: var(--xs-muted); font-size: var(--wp--preset--font-size--large); }
.xs-form-intro > * { margin-block: 0 .8em; }
.xs-form {
	padding: clamp(1.25rem, 4vw, 2.5rem);
	border: 1px solid var(--xs-line);
	border-radius: 18px;
	background: var(--xs-base);
	box-shadow: var(--xs-card-shadow);
}
.xs-form > :first-child, .xs-form .xs-hp + * { margin-top: 0; }
.xs-form-section {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 2.25rem 0 1.1rem !important;
	font-family: var(--xs-mono) !important;
	font-size: var(--wp--preset--font-size--x-small) !important;
	font-weight: 600 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase;
	color: var(--xs-accent) !important;
}
.xs-form-section::after { content: ""; flex: 1; height: 1px; background: var(--xs-line); }
.xs-form input[type="hidden"] + .xs-form-section,
.xs-hp + .xs-form-section { margin-top: 0 !important; }
.xs-form-row { display: grid; gap: 0 1.1rem; grid-template-columns: repeat(var(--xs-cols, 2), minmax(0, 1fr)); }
.xs-cols-3 { --xs-cols: 3; }
@media (max-width: 720px) { .xs-form-row { grid-template-columns: 1fr; } }
.xs-field { margin: 0 0 1.15rem; min-width: 0; border: 0; padding: 0; }
.xs-field[hidden] { display: none; }
.xs-field > label, .xs-field > legend, .xs-label {
	display: block;
	margin: 0 0 .4rem;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--xs-heading);
}
.xs-req { color: var(--xs-accent); }
.xs-help {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 18px; height: 18px;
	margin-left: .3rem;
	border-radius: 50%;
	background: var(--xs-raised);
	color: var(--xs-muted);
	font-family: var(--xs-mono);
	font-size: 11px;
	font-weight: 700;
	vertical-align: 1px;
	cursor: help;
}
.xs-help:hover::after, .xs-help:focus::after {
	content: attr(data-tip);
	position: absolute;
	left: 50%; bottom: calc(100% + 8px);
	transform: translateX(-50%);
	width: max-content;
	max-width: 260px;
	padding: .55rem .75rem;
	border-radius: 8px;
	background: var(--wp--preset--color--ink);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
	z-index: 20;
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5);
}
.xs-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.xs-choice { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.xs-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.xs-choice span {
	display: inline-block;
	padding: .5rem .9rem;
	border: 1px solid var(--xs-line);
	border-radius: 999px;
	background: var(--xs-field-bg);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
	color: var(--xs-text);
	transition: border-color .2s var(--xs-ease), background-color .2s var(--xs-ease), color .2s var(--xs-ease);
}
.xs-choice:hover span { border-color: var(--xs-hover-border); }
.xs-choice input:checked + span { background: var(--xs-heading); border-color: var(--xs-heading); color: var(--xs-base); }
.xs-choice input:focus-visible + span { outline: 2px solid var(--xs-accent); outline-offset: 2px; }
.xs-field > label.xs-check { display: flex; margin: 0; font-weight: 400; color: var(--xs-text); }
.xs-check { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem; border: 1px solid var(--xs-line); border-radius: 12px; background: var(--xs-surface); cursor: pointer; font-size: var(--wp--preset--font-size--small); line-height: 1.55; }
.xs-check input { flex: none; width: 20px; height: 20px; margin: .1rem 0 0; accent-color: #6aa800; }
.xs-check a { color: var(--xs-accent); text-decoration: underline; }
.xs-field.has-error input, .xs-field.has-error select, .xs-field.has-error textarea, .xs-field.has-error .xs-check { border-color: var(--xs-error); }
.xs-error { margin: .4rem 0 0; font-size: var(--wp--preset--font-size--x-small); color: var(--xs-error); font-weight: 500; }
.xs-error::before { content: "! "; font-family: var(--xs-mono); font-weight: 700; }
.xs-form-content { margin: 0 0 1.25rem; }
.xs-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.xs-turnstile { margin-top: 1.5rem; min-height: 65px; }
.xs-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--xs-line); }
.xs-submit { cursor: pointer; border: 0; }
.xs-submit::after { content: "→"; display: inline-block; margin-left: .5em; transition: transform .2s var(--xs-ease); }
.xs-submit:hover::after { transform: translateX(3px); }
.xs-form.is-sending .xs-submit { opacity: .6; cursor: progress; }
.xs-form.is-sending .xs-submit::after { content: ""; width: .9em; height: .9em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -2px; animation: xs-spin .7s linear infinite; }
@keyframes xs-spin { to { transform: rotate(360deg); } }
.xs-form-msg { margin: 0; font-size: var(--wp--preset--font-size--small); }
.xs-form-msg.is-error { color: var(--xs-error); font-weight: 500; }
.xs-form-privacy { margin: 1rem 0 0; font-size: var(--wp--preset--font-size--x-small); color: var(--xs-muted); }
.xs-form-alert { padding: .9rem 1.1rem; border-radius: 12px; font-size: var(--wp--preset--font-size--small); }
.xs-form-alert.is-error { background: var(--xs-error-bg); color: var(--xs-error); border: 1px solid currentColor; }
.xs-form-done {
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border: 1px solid var(--xs-hover-border);
	border-radius: 18px;
	background: var(--xs-ok-bg);
	outline: none;
}
.xs-form-done p { margin: 0; font-size: var(--wp--preset--font-size--large); color: var(--xs-heading); }
.xs-form-done .xs-form-done-title { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; font-family: var(--xs-mono); font-size: var(--wp--preset--font-size--x-small); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--xs-accent); }
.xs-form-done .xs-form-done-title::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--xs-signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0d12' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 65% no-repeat; }

/* --------------------------------------------------------------------------
   Portal pages (helpdesk, account, cart, checkout)
   -------------------------------------------------------------------------- */
.xs-app > p:first-child { color: var(--xs-muted); font-size: var(--wp--preset--font-size--large); max-width: 46rem; }

/* WooCommerce buttons */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce-page .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	min-height: 44px;
	padding: .7rem 1.25rem;
	border: 0;
	border-radius: 8px;
	background: var(--xs-signal);
	color: var(--xs-ink);
	font-family: var(--xs-mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1.2;
	text-decoration: none !important;
	transition: background-color .2s var(--xs-ease), color .2s var(--xs-ease);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--xs-heading); color: var(--xs-base); }
.woocommerce table.my_account_orders .button, .woocommerce-orders-table .button { min-height: 34px; padding: .45rem .8rem; margin: .15rem .25rem .15rem 0; background: transparent; color: var(--xs-heading); border: 1px solid var(--xs-line); }
.woocommerce table.my_account_orders .button:hover, .woocommerce-orders-table .button:hover { border-color: var(--xs-accent); color: var(--xs-accent); background: transparent; }

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notices-wrapper > div {
	margin: 0 0 1.5rem !important;
	padding: 1rem 1.25rem !important;
	border: 1px solid var(--xs-line) !important;
	border-left: 3px solid var(--xs-accent) !important;
	border-radius: 10px;
	background: var(--xs-surface) !important;
	color: var(--xs-text) !important;
	list-style: none;
}
.woocommerce-error { border-left-color: var(--xs-error) !important; }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; }
.woocommerce-message .button, .woocommerce-info .button { float: right; margin-left: 1rem; }

/* Tables */
.woocommerce table.shop_table {
	width: 100%;
	border: 1px solid var(--xs-line);
	border-radius: 12px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: var(--wp--preset--font-size--small);
}
.woocommerce table.shop_table th { padding: .8rem 1rem; background: var(--xs-surface); font-family: var(--xs-mono); font-size: var(--wp--preset--font-size--x-small); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--xs-muted); text-align: left; border-bottom: 1px solid var(--xs-line); }
.woocommerce table.shop_table td { padding: .85rem 1rem; border-top: 1px solid var(--xs-line); vertical-align: middle; }
.woocommerce table.shop_table tbody tr:first-child td { border-top: 0; }
.woocommerce table.shop_table tbody tr:hover td { background: var(--xs-surface); }
.woocommerce table.shop_table a { color: var(--xs-accent); font-weight: 600; }
.woocommerce mark, .woocommerce-account mark { background: transparent; color: var(--xs-heading); font-weight: 600; }

/* WooCommerce's block-theme CSS caps its wrapper at 1000px; portal pages use the full wide width. */
main.xs-portal .xs-app .woocommerce { max-width: none; }
.woocommerce table.shop_table tbody th { padding: .85rem 1rem; background: transparent; border-top: 1px solid var(--xs-line); border-bottom: 0; font-family: inherit; font-size: inherit; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--xs-heading); }
.woocommerce table.shop_table tbody tr:first-child th { border-top: 0; }
.woocommerce table.shop_table tbody tr:hover th { background: var(--xs-surface); }
.woocommerce-orders-table__cell-order-actions { white-space: nowrap; }
.woocommerce table.my_account_orders .button, .woocommerce-orders-table .button { display: inline-flex; min-height: 0 !important; }
.woocommerce-orders-table__cell-order-status { text-transform: capitalize; }

/* Signed-in account: navigation + content */
.woocommerce-account .woocommerce { display: grid; gap: var(--wp--preset--spacing--50); grid-template-columns: 230px minmax(0, 1fr); align-items: start; }
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-account .woocommerce::before, .woocommerce-account .woocommerce::after { display: none; }
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content { float: none !important; width: auto !important; }
.woocommerce-MyAccount-navigation {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + 88px);
	padding: .5rem;
	border: 1px solid var(--xs-line);
	border-radius: var(--xs-radius);
	background: var(--xs-base);
	box-shadow: var(--xs-card-shadow);
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation a {
	display: flex;
	align-items: center;
	padding: .65rem .85rem;
	border-radius: 9px;
	color: var(--xs-text);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-decoration: none !important;
	transition: background-color .2s var(--xs-ease), color .2s var(--xs-ease);
}
.woocommerce-MyAccount-navigation a:hover { background: var(--xs-surface); color: var(--xs-heading); }
.woocommerce-MyAccount-navigation .is-active a { background: var(--xs-heading); color: var(--xs-base); }
.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: .35rem !important; padding-top: .35rem; border-top: 1px solid var(--xs-line); }
.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--xs-muted); }
.woocommerce-MyAccount-content > :first-child { margin-top: 0; }
.woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3 { font-size: var(--wp--preset--font-size--x-large); }
.woocommerce-Addresses { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.woocommerce-Addresses::before, .woocommerce-Addresses::after { display: none !important; }
.woocommerce-Address { float: none !important; width: auto !important; padding: 1.25rem 1.4rem; border: 1px solid var(--xs-line); border-radius: var(--xs-radius); background: var(--xs-base); }
.woocommerce-Address-title { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.woocommerce-Address-title h2, .woocommerce-Address-title h3 { margin: 0 0 .6rem; font-size: var(--wp--preset--font-size--large) !important; }
.woocommerce-Address-title a { font-family: var(--xs-mono); font-size: var(--wp--preset--font-size--x-small); }
.woocommerce-Address address { font-style: normal; color: var(--xs-muted); line-height: 1.6; }
.woocommerce form .form-row { margin: 0 0 1rem; padding: 0; }
.woocommerce form .form-row label { display: block; margin-bottom: .35rem; font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--xs-heading); }
.woocommerce form .form-row .required { color: var(--xs-accent); text-decoration: none; }
.woocommerce fieldset { margin: 1.5rem 0; padding: 1.25rem; border: 1px solid var(--xs-line); border-radius: 12px; }
.woocommerce fieldset legend { padding: 0 .4rem; font-weight: 600; color: var(--xs-heading); }
@media (max-width: 860px) {
	.woocommerce-account .woocommerce { grid-template-columns: 1fr; }
	.woocommerce-MyAccount-navigation { position: static; padding: .35rem; overflow-x: auto; scrollbar-width: none; }
	.woocommerce-MyAccount-navigation ul { display: flex; gap: .25rem; }
	.woocommerce-MyAccount-navigation a { white-space: nowrap; }
	.woocommerce-MyAccount-navigation-link--customer-logout { margin: 0 !important; padding: 0; border: 0; }
}
@media (max-width: 640px) {
	.woocommerce table.shop_table_responsive tr { display: block; border-top: 1px solid var(--xs-line); }
	.woocommerce table.shop_table_responsive tbody tr:first-child { border-top: 0; }
	.woocommerce table.shop_table_responsive td { border-top: 0; }
}

/* Dashboard */
.xs-dash-hello h2 { text-align: left; margin: .3rem 0 .5rem; font-size: clamp(1.8rem, 3vw, 2.4rem) !important; }
.xs-dash-hello p:last-child { color: var(--xs-muted); max-width: 40rem; }
.xs-dash-hello .is-style-xs-eyebrow { margin: 0; }
.xs-stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: var(--wp--preset--spacing--40) 0; }
.xs-stat {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.2rem 1.25rem 1.1rem;
	border: 1px solid var(--xs-line);
	border-radius: var(--xs-radius);
	background: var(--xs-base);
	box-shadow: var(--xs-card-shadow);
	color: var(--xs-text);
	text-decoration: none !important;
	overflow: hidden;
	transition: border-color .25s var(--xs-ease), transform .25s var(--xs-ease);
}
.xs-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--xs-stat-c, var(--xs-accent)); }
.xs-stat:hover { border-color: var(--xs-hover-border); transform: translateY(-2px); }
.xs-stat-label { font-family: var(--xs-mono); font-size: var(--wp--preset--font-size--x-small); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--xs-muted); }
.xs-stat-number { margin: .35rem 0 .15rem; font-family: var(--xs-display); font-size: 2.6rem; font-weight: 600; line-height: 1; letter-spacing: -.03em; color: var(--xs-heading); }
.xs-stat-note { font-size: var(--wp--preset--font-size--x-small); color: var(--xs-muted); }
.xs-stat--progress { --xs-stat-c: #e0a100; }
.xs-stat--resolved { --xs-stat-c: #84c414; }
.xs-stat--pending { --xs-stat-c: #c2414f; }
.xs-stat--closed { --xs-stat-c: #6b7a90; }
.xs-dash-h { margin: var(--wp--preset--spacing--40) 0 .9rem; font-family: var(--xs-mono) !important; font-size: var(--wp--preset--font-size--x-small) !important; font-weight: 600 !important; letter-spacing: .08em; text-transform: uppercase; color: var(--xs-muted); }
.xs-quick { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); }
.xs-quick a { display: block; padding: 1rem 1.1rem; border: 1px solid var(--xs-line); border-radius: 12px; background: var(--xs-base); color: var(--xs-text); text-decoration: none !important; transition: border-color .2s var(--xs-ease); }
.xs-quick a:hover { border-color: var(--xs-hover-border); }
.xs-quick strong { display: block; color: var(--xs-heading); }
.xs-quick strong::after { content: " →"; color: var(--xs-accent); }
.xs-quick span { display: block; margin-top: .15rem; font-size: var(--wp--preset--font-size--x-small); color: var(--xs-muted); }
.xs-dash-help { margin-top: var(--wp--preset--spacing--40); padding-top: 1.25rem; border-top: 1px dashed var(--xs-line); font-size: var(--wp--preset--font-size--small); color: var(--xs-muted); }

/* Signed-out account: login card */
.xs-account-out .woocommerce { display: block; max-width: 460px; margin-inline: auto; }
.xs-login-intro { margin-bottom: 1.25rem; text-align: center; }
.xs-login-intro .is-style-xs-eyebrow { margin-bottom: .4rem; }
.xs-login-intro p:last-child { color: var(--xs-muted); font-size: var(--wp--preset--font-size--small); }
.xs-login-intro a { color: var(--xs-accent); }
.xs-account-out .woocommerce > h2 { display: none; }
.woocommerce form.woocommerce-form-login, .woocommerce form.woocommerce-form-register, .woocommerce form.lost_reset_password {
	margin: 0;
	padding: clamp(1.5rem, 5vw, 2.25rem);
	border: 1px solid var(--xs-line);
	border-radius: 18px;
	background: var(--xs-base);
	box-shadow: var(--xs-card-shadow);
}
.woocommerce-form-login .form-row:last-of-type, .woocommerce-form-login .woocommerce-form-login__submit { width: 100%; }
.woocommerce-form-login__rememberme { display: inline-flex !important; align-items: center; gap: .5rem; margin-bottom: 1rem !important; font-weight: 400 !important; }
.woocommerce-LostPassword { margin: 1rem 0 0; text-align: center; font-size: var(--wp--preset--font-size--small); }
.woocommerce-LostPassword a { color: var(--xs-muted); }
.woocommerce form .show-password-input { top: .75rem; }

/* Cart / checkout (shortcode pages) */
.woocommerce-cart .cart-collaterals .cart_totals, .woocommerce-checkout #order_review { padding: 1.25rem; border: 1px solid var(--xs-line); border-radius: var(--xs-radius); background: var(--xs-surface); }
.woocommerce-checkout #payment { background: transparent !important; border-radius: 12px; }
.woocommerce-checkout #payment div.payment_box { background: var(--xs-raised) !important; color: var(--xs-text) !important; }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--xs-raised) !important; }

/* --------------------------------------------------------------------------
   Helpdesk (SupportCandy keeps its own light styling inside a card)
   -------------------------------------------------------------------------- */
#wpsc-container { font-family: inherit !important; }
.xs-app #wpsc-container {
	color-scheme: light;
	padding: clamp(.75rem, 2vw, 1.25rem);
	border: 1px solid var(--xs-line);
	border-radius: var(--xs-radius);
	background: #fff;
	color: #1e2632;
	box-shadow: var(--xs-card-shadow);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.xs-footer { border-top: 1px solid var(--xs-line); overflow: hidden; background: var(--xs-base); }
.xs-footer h4 { font-family: var(--xs-mono); font-size: var(--wp--preset--font-size--x-small); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--xs-muted); }
.xs-footer-links { list-style: none; padding: 0; margin: 0; }
.xs-footer-links li { margin-bottom: .55rem; font-size: var(--wp--preset--font-size--small); color: var(--xs-text); }
.xs-footer-links a { color: var(--xs-text); font-size: var(--wp--preset--font-size--small); }
.xs-footer-links a:hover { color: var(--xs-accent); text-decoration: none; }
.xs-footer p { font-size: var(--wp--preset--font-size--small); }
.xs-social { margin-top: 1rem !important; }
.xs-social .wp-social-link { background: var(--xs-surface) !important; color: var(--xs-text) !important; border: 1px solid var(--xs-line); }
.xs-social .wp-social-link a { padding: .45em !important; }
.xs-social .wp-social-link:hover { border-color: var(--xs-accent); color: var(--xs-accent) !important; transform: none !important; }
.xs-footer-mark {
	margin: 0 !important;
	font-family: var(--xs-display);
	font-weight: 700;
	font-size: clamp(5rem, 22vw, 18rem) !important;
	line-height: .8;
	letter-spacing: -.06em;
	text-align: center;
	color: transparent;
	-webkit-text-stroke: 1px var(--xs-mark-stroke);
	user-select: none;
	transform: translateY(18%);
	background: linear-gradient(180deg, var(--xs-mark-fill), transparent 80%);
	-webkit-background-clip: text;
	background-clip: text;
}
.xs-footer-bottom { border-top: 1px solid var(--xs-line); position: relative; z-index: 1; background: var(--xs-base); }
.xs-footer-bottom p { margin: 0; font-family: var(--xs-mono); font-size: var(--wp--preset--font-size--x-small) !important; color: var(--xs-muted); }
.xs-footer-bottom a { color: var(--xs-muted); }

/* --------------------------------------------------------------------------
   Editor placeholders + motion
   -------------------------------------------------------------------------- */
.xs-editor-ph { padding: .75rem 1rem; border: 1px dashed var(--xs-line); border-radius: 10px; font-family: var(--xs-mono); font-size: .8rem; color: var(--xs-muted); }
.xs-editor-ph--icon { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; }
.xs-editor-form { padding: 1.25rem; border: 1px solid var(--xs-line); border-radius: 14px; }
.xs-editor-form-head { display: grid; gap: .25rem; margin-bottom: 1rem; }
.xs-editor-form-head span, .xs-editor-form-label { font-size: .85rem; color: var(--xs-muted); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	html { scroll-behavior: auto; }
}