/** Sirbal shared semantic design tokens and global foundations. */
:root {
	--sirbal-color-ink: #10222b;
	--sirbal-color-muted: #607078;
	--sirbal-color-petrol: #0b3f50;
	--sirbal-color-petrol-deep: #062d3a;
	--sirbal-color-gold: #c9a96e;
	--sirbal-color-ivory: #f7f3eb;
	--sirbal-color-canvas: #f7f8f7;
	--sirbal-color-surface: #fff;
	--sirbal-color-line: rgba(16, 34, 43, .12);
	--sirbal-color-sale: #a94f4a;
	--sirbal-radius-sm: 10px;
	--sirbal-radius-md: 16px;
	--sirbal-radius-lg: 22px;
	--sirbal-radius-xl: 30px;
	--sirbal-shadow-sm: 0 6px 20px rgba(16, 34, 43, .07);
	--sirbal-shadow-md: 0 14px 38px rgba(16, 34, 43, .1);
	--sirbal-shadow-lg: 0 24px 64px rgba(16, 34, 43, .14);
	--sirbal-container: 1222px;
	--sirbal-space-section: clamp(52px, 7vw, 88px);
	--sirbal-motion-fast: 180ms;
	--sirbal-motion-base: 260ms;
	--sirbal-ease: cubic-bezier(.2, .7, .25, 1);
	--sirbal-ease-out: cubic-bezier(.23, 1, .32, 1);
	--sirbal-ease-in-out: cubic-bezier(.77, 0, .175, 1);
	--sirbal-type-body: 16px;
	--sirbal-type-helper: 13px;
	--sirbal-type-meta: 12px;
	--sirbal-line-persian: 1.75;
	--sirbal-mobile-toolbar-h: 60px;
	--sirbal-mobile-action-h: 66px;
	--sirbal-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
}

html { scroll-behavior: smooth; }

body {
	background: var(--sirbal-color-canvas);
	color: var(--sirbal-color-ink);
	font-size: var(--sirbal-type-body);
	line-height: var(--sirbal-line-persian);
}

body :is(button, input, select, textarea) { font: inherit; }

body :is(a, button, input, select, textarea):focus-visible {
	outline: 3px solid var(--sirbal-color-gold);
	outline-offset: 3px;
}

.container,
.elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--sirbal-container); }

.main-page-wrapper { background: var(--sirbal-color-canvas); }

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

.woocommerce :is(.button, button.button, input.button),
.wd-button-wrapper a {
	border-radius: 999px;
	min-height: 44px;
	font-weight: 700;
	touch-action: manipulation;
}

.woocommerce :is(input.input-text, textarea, select),
.woocommerce-page :is(input.input-text, textarea, select) {
	min-height: 46px;
	border-color: var(--sirbal-color-line);
	border-radius: var(--sirbal-radius-sm);
}

.cart-empty,
.woocommerce-info,
.woocommerce-message,
.woocommerce-error { border-radius: var(--sirbal-radius-md); }

.cart-empty {
	color: var(--sirbal-color-ink);
	font-size: clamp(18px, 2vw, 24px);
	font-weight: 750;
}

/* Informational notices must remain readable on the warm brand surface. */
body .woocommerce-info {
	background: var(--sirbal-color-ivory);
	color: var(--sirbal-color-ink);
	border: 1px solid var(--sirbal-color-gold);
	line-height: var(--sirbal-line-persian);
}
body .woocommerce-info a { color: var(--sirbal-color-petrol); text-decoration: underline; }

/* Reuse the store's form language on editorial, search and error pages. */
body:is(.blog, .single-post, .search-no-results, .error404) .wd-page-content :is(input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), textarea) {
	min-height: 46px;
	border: 1px solid var(--sirbal-color-line);
	border-radius: var(--sirbal-radius-sm);
	background: var(--sirbal-color-surface);
	color: var(--sirbal-color-ink);
	font-size: 16px;
}
body:is(.blog, .single-post, .search-no-results, .error404) .wd-page-content :is(.searchform button, .comment-form .submit, .read-more-section a),
body.woocommerce-cart .coupon button {
	min-height: 44px;
	border-radius: var(--sirbal-radius-sm);
	background: var(--sirbal-color-petrol);
	color: var(--sirbal-color-surface);
	box-shadow: none;
}
body.single-post .wd-page-content :is(.comment-respond, .comments-area) {
	border-radius: var(--sirbal-radius-md);
	text-align: start;
}

/* A minimum height has no effect on WoodMart's inline article links. */
body.blog .wd-page-content .read-more-section a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}