/**
 * Commerce Studio X design system.
 *
 * Every rule is scoped behind .csx-enabled so Blocksy can be restored instantly.
 * Logical properties keep the same stylesheet correct in RTL and LTR.
 */

body.csx-enabled {
	--csx-primary: var(--theme-palette-color-1, #0b57a3);
	--csx-secondary: var(--theme-palette-color-2, #1f96e2);
	--csx-accent: var(--theme-palette-color-2, #159a62);
	--csx-surface: var(--theme-palette-color-8, #fff);
	--csx-surface-alt: var(--theme-palette-color-7, #f4f8fc);
	--csx-text: var(--theme-text-color, #17324d);
	--csx-muted: color-mix(in srgb, var(--csx-text) 65%, transparent);
	--csx-border: var(--theme-border-color, #d9e4ee);
	--csx-gutter: clamp(var(--csx-gutter-min), 3vw, var(--csx-gutter-max));
	--csx-field-height: calc(46px * var(--csx-density));
	--csx-button-height: calc(46px * var(--csx-density));
	--csx-focus-color: color-mix(in srgb, var(--csx-primary) 76%, white);
	--csx-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--csx-focus-color) 28%, transparent);
	--csx-ease: cubic-bezier(.2, .75, .25, 1);
	color: var(--csx-text);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	overflow-wrap: break-word;
}

body.csx-enabled.csx-color-custom {
	--csx-primary: var(--csx-custom-primary);
	--csx-secondary: var(--csx-custom-secondary);
	--csx-accent: var(--csx-custom-accent);
	--csx-surface: var(--csx-custom-surface);
	--csx-surface-alt: var(--csx-custom-surface-alt);
	--csx-text: var(--csx-custom-text);
	--csx-muted: var(--csx-custom-muted);
	--csx-border: var(--csx-custom-border);
}

.csx-enabled.csx-motion-none {
	--csx-motion-duration: 0ms;
	--csx-motion-lift: 0px;
}

.csx-enabled.csx-motion-subtle {
	--csx-motion-duration: 180ms;
	--csx-motion-lift: -2px;
}

.csx-enabled.csx-motion-expressive {
	--csx-motion-duration: 280ms;
	--csx-motion-lift: -5px;
}

@supports not (color: color-mix(in srgb, black, white)) {
	body.csx-enabled {
		--csx-muted: #66788a;
		--csx-focus-color: #4c8bc7;
		--csx-focus-shadow: 0 0 0 3px rgba(31, 150, 226, .22);
	}
}

html:has(body.csx-enabled) {
	scroll-behavior: smooth;
	scroll-padding-block-start: clamp(72px, 10vw, 132px);
	scrollbar-gutter: stable;
}

.csx-enabled :where(*, *::before, *::after) {
	box-sizing: border-box;
}

.csx-enabled :where(main, section, article, aside, nav, div) {
	min-inline-size: 0;
}

.csx-enabled :where(img, video, iframe, canvas, svg) {
	max-inline-size: 100%;
}

.csx-enabled :where(img, video) {
	block-size: auto;
}

.csx-enabled :where([hidden]) {
	display: none;
}

/* Fluid containers and deliberate reading width. */
.csx-enabled :where(.ct-container, .csx-container) {
	max-inline-size: var(--csx-container);
	margin-inline: auto;
}

.csx-enabled .csx-container {
	inline-size: calc(100% - (var(--csx-gutter) * 2));
}

.csx-enabled :where(.csx-section, .csx-pattern-section) {
	padding-block: clamp(calc(var(--csx-section-space) * .62), 7vw, var(--csx-section-space));
}

.csx-enabled .csx-pattern-section {
	container-type: inline-size;
}

.csx-enabled :where(.csx-reading-width) {
	max-inline-size: var(--csx-content);
	margin-inline: auto;
}

.csx-enabled:not(.woocommerce-page) .entry-content > :where(p, ul, ol, blockquote):not(.alignwide):not(.alignfull) {
	max-inline-size: min(100%, var(--csx-content));
}

.csx-enabled .entry-content > :where(p, ul, ol, blockquote):not(.alignwide):not(.alignfull) {
	margin-inline: auto;
}

/* Typography stays inherited from Blocksy; only rhythm and wrapping improve. */
.csx-enabled :where(p, li, dd, figcaption) {
	line-height: max(1.55, var(--theme-line-height, 1.65));
}

.csx-enabled :where(h1, h2, h3, h4, h5, h6) {
	overflow-wrap: normal;
	word-break: normal;
}

.csx-enabled.csx-heading-balance :where(h1, h2, h3, .entry-title, .page-title) {
	text-wrap: balance;
}

.csx-enabled :where(p, li) {
	text-wrap: pretty;
}

.csx-enabled :where(small, figcaption, .wp-caption-text) {
	color: var(--csx-muted);
}

/* Links and controls. */
.csx-enabled :where(a, button, input, select, textarea, summary) {
	-webkit-tap-highlight-color: transparent;
}

.csx-enabled :where(a, button, .button, [type="button"], [type="submit"]) {
	transition:
		color var(--csx-motion-duration) var(--csx-ease),
		background-color var(--csx-motion-duration) var(--csx-ease),
		border-color var(--csx-motion-duration) var(--csx-ease),
		box-shadow var(--csx-motion-duration) var(--csx-ease),
		transform var(--csx-motion-duration) var(--csx-ease),
		opacity var(--csx-motion-duration) var(--csx-ease);
}

.csx-enabled :where(button, .button, input[type="button"], input[type="submit"], .wp-element-button):not(.qa-location-overlay *, .lwp-location-popup *) {
	min-block-size: var(--csx-button-height);
	border-radius: var(--csx-button-radius);
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
}

.csx-enabled :where(button, .button, input[type="button"], input[type="submit"], .wp-element-button):not(.qa-location-overlay *, .lwp-location-popup *):not(:disabled):active {
	transform: translateY(1px);
}

@media (hover: hover) and (pointer: fine) {
	.csx-enabled :where(.csx-lift, .wp-block-button__link):hover {
		transform: translateY(var(--csx-motion-lift));
	}
}

/* Forms: high contrast, no generic dialog selectors, and no city-popup bleed. */
.csx-enabled :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea):not(.qa-location-overlay *, .lwp-location-popup *) {
	max-inline-size: 100%;
	min-block-size: var(--csx-field-height);
	border: 1px solid var(--csx-border);
	border-radius: min(var(--csx-radius), 12px);
	background: var(--csx-surface);
	color: var(--csx-text);
	font: inherit;
	line-height: 1.35;
}

.csx-enabled.csx-form-soft :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea):not(.qa-location-overlay *, .lwp-location-popup *) {
	border-color: transparent;
	background: var(--csx-surface-alt);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--csx-border) 72%, transparent);
}

.csx-enabled :where(textarea):not(.qa-location-overlay *, .lwp-location-popup *) {
	min-block-size: 128px;
	resize: vertical;
}

.csx-enabled :where(input, select, textarea):not(.qa-location-overlay *, .lwp-location-popup *)::placeholder {
	color: var(--csx-muted);
	opacity: .82;
}

.csx-enabled :where(label):not(.qa-location-overlay *, .lwp-location-popup *) {
	font-weight: 650;
}

.csx-enabled :where(fieldset):not(.qa-location-overlay *, .lwp-location-popup *) {
	min-inline-size: 0;
	border-color: var(--csx-border);
	border-radius: var(--csx-radius);
}

/* Keyboard focus is strong without appearing after ordinary pointer clicks. */
.csx-enabled.csx-focus-ring :where(a, button, input, select, textarea, summary, [tabindex]):not(.qa-location-overlay *, .lwp-location-popup *):focus-visible {
	outline: 2px solid var(--csx-focus-color);
	outline-offset: 3px;
	box-shadow: var(--csx-focus-shadow);
}

.csx-enabled.csx-focus-ring :where(input, select, textarea):not(.qa-location-overlay *, .lwp-location-popup *):focus-visible {
	border-color: var(--csx-focus-color);
}

.csx-enabled.csx-touch-targets :where(.site-logo-container, .site-title a, .menu-item > a, .ct-header-trigger, .ct-button, .button, button, summary):not(.qa-location-overlay *, .lwp-location-popup *) {
	min-block-size: 44px;
}

.csx-enabled.csx-touch-targets :where(a.site-logo-container, .site-title a) {
	display: inline-flex;
	align-items: center;
}

.csx-enabled.csx-touch-targets :where(input[type="checkbox"], input[type="radio"]):not(.qa-location-overlay *, .lwp-location-popup *) {
	inline-size: 20px;
	block-size: 20px;
}

/* Reusable surfaces. */
.csx-enabled :where(.csx-surface, .csx-feature-card, .csx-callout) {
	border: 1px solid var(--csx-border);
	border-radius: var(--csx-radius);
	background: var(--csx-surface);
	box-shadow: var(--csx-shadow);
}

.csx-enabled :where(.csx-feature-card, .csx-callout) {
	padding: clamp(18px, 3vw, calc(28px * var(--csx-density)));
}

.csx-enabled .csx-eyebrow {
	display: inline-flex;
	align-items: center;
	min-block-size: 30px;
	margin-block-end: 12px;
	padding-inline: 12px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--csx-secondary) 12%, transparent);
	color: var(--csx-primary);
	font-size: .8rem;
	font-weight: 800;
	letter-spacing: .02em;
}

.csx-enabled .csx-icon-box {
	display: inline-grid;
	place-items: center;
	inline-size: 48px;
	block-size: 48px;
	border-radius: min(var(--csx-radius), 14px);
	background: linear-gradient(135deg, var(--csx-primary), var(--csx-secondary));
	color: #fff;
	margin: 0;
}

/* Optional glass treatment targets Blocksy header rows only. */
.csx-enabled.csx-header-glass .ct-header [data-row*="middle"] {
	background-color: color-mix(in srgb, var(--csx-surface) 86%, transparent);
	box-shadow: 0 1px 0 color-mix(in srgb, var(--csx-border) 78%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(125%);
	backdrop-filter: blur(14px) saturate(125%);
}

/* Block patterns: editable content, no store identity or fixed URLs. */
.csx-enabled .csx-pattern-hero {
	container-type: inline-size;
	position: relative;
	isolation: isolate;
	overflow: clip;
	border-radius: clamp(18px, 3vw, 32px);
	background:
		radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--csx-secondary) 24%, transparent), transparent 34%),
		linear-gradient(135deg, var(--csx-surface-alt), var(--csx-surface));
}

.csx-enabled .csx-pattern-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(120deg, color-mix(in srgb, var(--csx-primary) 8%, transparent), transparent 60%);
	pointer-events: none;
}

.csx-enabled .csx-pattern-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr);
	gap: clamp(24px, 5vw, 72px);
	align-items: center;
	min-block-size: clamp(440px, 62vw, 620px);
	padding: clamp(28px, 6vw, 76px);
}

.csx-enabled .csx-pattern-hero__copy {
	max-inline-size: 680px;
}

.csx-enabled .csx-pattern-hero__copy h1 {
	margin-block: 0 18px;
	font-size: clamp(2.15rem, 6cqi, 4.5rem);
	line-height: 1.08;
}

.csx-enabled .csx-pattern-hero__copy p {
	margin-block: 0 26px;
	color: var(--csx-muted);
	font-size: clamp(1rem, 2.2cqi, 1.25rem);
}

.csx-enabled .csx-pattern-hero__visual {
	display: grid;
	place-items: center;
	min-block-size: 300px;
	border: 1px solid color-mix(in srgb, var(--csx-border) 78%, transparent);
	border-radius: clamp(16px, 3vw, 28px);
	background: color-mix(in srgb, var(--csx-surface) 82%, transparent);
	box-shadow: var(--csx-shadow);
}

.csx-enabled .csx-pattern-hero__visual img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.csx-enabled .csx-pattern-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.csx-enabled .csx-pattern-actions .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--csx-button-height);
	padding-inline: clamp(18px, 3vw, 28px);
	border-radius: var(--csx-button-radius);
}

.csx-enabled .csx-pattern-features {
	container-type: inline-size;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(12px, 2vw, 22px);
}

.csx-enabled .csx-feature-card {
	min-block-size: 100%;
}

.csx-enabled .csx-feature-card h3 {
	margin-block: 16px 8px;
	font-size: clamp(1rem, 2cqi, 1.2rem);
}

.csx-enabled .csx-feature-card p {
	margin: 0;
	color: var(--csx-muted);
	font-size: .95rem;
}

.csx-enabled .csx-pattern-split {
	container-type: inline-size;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	overflow: clip;
	border: 1px solid var(--csx-border);
	border-radius: clamp(18px, 3vw, 30px);
	background: var(--csx-surface);
	box-shadow: var(--csx-shadow);
}

.csx-enabled .csx-pattern-split__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(28px, 6vw, 72px);
}

.csx-enabled .csx-pattern-split__media {
	min-block-size: 360px;
	background: var(--csx-surface-alt);
}

.csx-enabled .csx-pattern-split__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.csx-enabled .csx-faq-stack {
	display: grid;
	gap: 12px;
	max-inline-size: min(100%, var(--csx-content));
	margin-inline: auto;
}

.csx-enabled .csx-faq-stack details {
	border: 1px solid var(--csx-border);
	border-radius: min(var(--csx-radius), 16px);
	background: var(--csx-surface);
}

.csx-enabled .csx-faq-stack summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-block-size: 56px;
	padding: 14px 18px;
	cursor: pointer;
	font-weight: 750;
	list-style: none;
}

.csx-enabled .csx-faq-stack summary::-webkit-details-marker {
	display: none;
}

.csx-enabled .csx-faq-stack summary::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 1.4rem;
	font-weight: 400;
}

.csx-enabled .csx-faq-stack details[open] summary::after {
	content: "−";
}

.csx-enabled .csx-faq-stack details > :not(summary) {
	margin: 0;
	padding: 0 18px 18px;
	color: var(--csx-muted);
}

/* Native WordPress media alignment and embeds stay bounded. */
.csx-enabled :where(.wp-block-image, .wp-block-video, .wp-block-embed) {
	max-inline-size: 100%;
}

.csx-enabled :where(.wp-block-table) {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.csx-enabled :where(.wp-block-table table) {
	min-inline-size: 560px;
	border-color: var(--csx-border);
}

/* Phone and narrow-container behaviour. */
@container (max-width: 760px) {
	.csx-enabled .csx-pattern-hero__inner,
	.csx-enabled .csx-pattern-split {
		grid-template-columns: 1fr;
	}

	.csx-enabled .csx-pattern-hero__inner {
		min-block-size: auto;
	}

	.csx-enabled .csx-pattern-hero__visual {
		min-block-size: 240px;
	}

	.csx-enabled .csx-pattern-features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1024px) {
	.csx-enabled .csx-pattern-hero__inner {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 767px) {
	body.csx-enabled {
		--csx-gutter: max(var(--csx-gutter-min), env(safe-area-inset-left), env(safe-area-inset-right));
	}

	.csx-enabled .csx-pattern-hero__inner,
	.csx-enabled .csx-pattern-split {
		grid-template-columns: 1fr;
	}

	.csx-enabled .csx-pattern-hero__inner {
		padding: clamp(24px, 7vw, 42px);
	}

	.csx-enabled .csx-pattern-hero__visual {
		min-block-size: 220px;
		order: -1;
	}

	.csx-enabled .csx-pattern-split__media {
		min-block-size: 240px;
		order: -1;
	}

	.csx-enabled .csx-pattern-features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.csx-enabled :where(input, select, textarea):not(.qa-location-overlay *, .lwp-location-popup *) {
		font-size: 16px;
	}
}

@media (max-width: 420px) {
	.csx-enabled .csx-pattern-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.csx-enabled .csx-pattern-actions :where(.wp-block-button, .wp-block-button__link) {
		inline-size: 100%;
	}

	.csx-enabled .csx-pattern-features {
		grid-template-columns: 1fr;
	}
}

/* Respect operating-system accessibility settings regardless of theme choice. */
@media (prefers-reduced-motion: reduce) {
	html:has(body.csx-enabled) {
		scroll-behavior: auto;
	}

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

@media (prefers-contrast: more) {
	body.csx-enabled {
		--csx-border: currentColor;
		--csx-shadow: none;
	}
}

@media (forced-colors: active) {
	.csx-enabled :where(button, .button, input, select, textarea, summary, .csx-surface, .csx-feature-card) {
		border: 1px solid CanvasText;
		box-shadow: none;
	}

	.csx-enabled :where(a, button, input, select, textarea, summary):focus-visible {
		outline: 3px solid Highlight;
	}
}

@media print {
	.csx-enabled :where(.ct-header, .ct-footer, .csx-pattern-actions, .ct-back-to-top) {
		display: none;
	}

	.csx-enabled :where(main, .ct-container, .entry-content) {
		max-inline-size: none;
		inline-size: 100%;
	}

	.csx-enabled :where(a[href])::after {
		content: " (" attr(href) ")";
		font-size: .8em;
	}
}