/*
 * Elancee brand layer. Loaded after WoodMart and Elementor.
 * Logical properties only, so the same file serves LTR and RTL.
 */

:root {
	--el-ink: var(--e-global-color-elink, #1D275F);
	--el-midnight: var(--e-global-color-elmidn, #11173F);
	--el-primary: var(--e-global-color-primary, #2D3B86);
	--el-accent: var(--e-global-color-accent, #36489A);
	--el-periwinkle: var(--e-global-color-secondary, #5A6BB2);
	--el-text: var(--e-global-color-text, #414B78);
	--el-surface: var(--e-global-color-elsurf, #F3F7FB);
	--el-line: var(--e-global-color-elline, #DDE4F3);
	--el-paper: #FEFEFE;
	--el-gradient: linear-gradient(90deg, #11173F 0%, #374A9C 34.1%, #7A8BC6 73%, #ADCEEC 100%);
	--el-gradient-rtl: linear-gradient(270deg, #11173F 0%, #374A9C 34.1%, #7A8BC6 73%, #ADCEEC 100%);
	--el-gradient-stack: linear-gradient(180deg, #11173F 0%, #374A9C 34.1%, #7A8BC6 73%, #ADCEEC 100%);
}

/* Full-bleed Elementor pages: drop WoodMart's 40px content padding when a page opens or closes
   with a full-width band (mark those containers el-flush-top / el-flush-bottom). */
.wd-content-layout:has(.el-flush-top) {
	padding-block-start: 0;
}
.wd-content-layout:has(.el-flush-bottom) {
	padding-block-end: 0;
}

/* Keyboard focus: visible, on-brand, never removed. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--el-accent);
	outline-offset: 2px;
}

/* Touch targets: small icon links get at least 44px on touch screens. */
@media (hover: none), (max-width: 767px) {
	.wd-social-icons .wd-social-icon,
	.wd-wishlist-btn > a,
	.wd-single-wishlist-btn > a {
		min-inline-size: 44px;
		min-block-size: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* Prices read as figures, not text. */
.price,
.amount,
.woocommerce-Price-amount {
	font-variant-numeric: lining-nums tabular-nums;
}

/* The Routine Band: the brand's master gradient, dark (step 1) to light (step 3). */
.el-gradient-band {
	background-image: var(--el-gradient);
}
[dir="rtl"] .el-gradient-band {
	background-image: var(--el-gradient-rtl);
}
@media (max-width: 767px) {
	.el-gradient-band,
	[dir="rtl"] .el-gradient-band {
		background-image: var(--el-gradient-stack);
	}
}

/* RTL: mirror the hero's legibility overlay so the dark side follows the text (start side).
   The photo itself needs a mirrored upload for Arabic; see HANDOVER.md. */
[dir="rtl"] .el-hero::before {
	transform: scaleX(-1);
}

/* Respect reduced motion: show entrance-animated content immediately. */
@media (prefers-reduced-motion: reduce) {
	.elementor-invisible {
		visibility: visible !important;
	}
	.animated,
	[class*="elementor-animation-"] {
		animation: none !important;
		transition: none !important;
	}
	html {
		scroll-behavior: auto;
	}
}

/* ---------- Skin quiz ---------- */
.elq {
	--elq-accent: var(--el-primary);
	--elq-surface: #FFFFFF;
	--elq-radius: 20px;
	color: var(--el-text);
	background: var(--elq-surface);
	border: 1px solid var(--el-line);
	border-radius: var(--elq-radius);
	padding: clamp(20px, 4vw, 40px);
	max-inline-size: 760px;
	margin-inline: auto;
}
.elq [hidden] {
	display: none !important;
}
.elq-title {
	font-family: "EB Garamond", Georgia, serif;
	font-weight: 400;
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
	line-height: 1.12;
	color: var(--el-ink);
	margin: 0 0 12px;
}
.elq-title:focus {
	outline: none;
}
.elq-subtitle {
	font-family: "EB Garamond", Georgia, serif;
	font-weight: 500;
	font-size: 1.375rem;
	line-height: 1.2;
	color: var(--el-ink);
	margin: 28px 0 12px;
}
.elq-text {
	margin: 0 0 20px;
	max-inline-size: 62ch;
	line-height: 1.6;
}
.elq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-block-size: 48px;
	padding: 12px 26px;
	border-radius: 999px;
	border: 1px solid var(--elq-accent);
	font: 500 15px/1.2 "IBM Plex Sans", system-ui, sans-serif;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.elq-btn--primary {
	background: var(--elq-accent);
	color: #FFFFFF;
}
.elq-btn--primary:hover {
	background: var(--el-ink);
	border-color: var(--el-ink);
}
.elq-btn--ghost {
	background: transparent;
	color: var(--elq-accent);
}
.elq-btn--ghost:hover {
	background: var(--el-surface);
}
.elq-btn--small {
	min-block-size: 44px;
	padding: 8px 18px;
	font-size: 14px;
	background: transparent;
	color: var(--elq-accent);
}
.elq-btn--small:hover {
	background: var(--elq-accent);
	color: #FFFFFF;
}
.elq-btn:disabled {
	opacity: .45;
	cursor: not-allowed;
}
.elq-progress {
	margin: 0 0 8px;
	font-size: 14px;
	color: var(--el-periwinkle);
}
.elq-dots {
	display: flex;
	gap: 6px;
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
}
.elq-dots li {
	flex: 1;
	block-size: 4px;
	border-radius: 2px;
	background: var(--el-line);
}
.elq-dots li.is-done,
.elq-dots li.is-current {
	background: var(--elq-accent);
}
.elq-step {
	border: 0;
	padding: 0;
	margin: 0;
	min-inline-size: 0;
}
.elq-question {
	font-family: "EB Garamond", Georgia, serif;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	line-height: 1.2;
	color: var(--el-ink);
	margin: 0 0 20px;
	padding: 0;
}
.elq-question:focus {
	outline: none;
}
.elq-options {
	display: grid;
	gap: 10px;
}
.elq-option {
	display: flex;
	align-items: center;
	gap: 12px;
	min-block-size: 56px;
	padding: 12px 18px;
	border: 1px solid var(--el-line);
	border-radius: 14px;
	cursor: pointer;
	color: var(--el-ink);
	transition: border-color .15s ease, background-color .15s ease;
}
.elq-option:hover {
	border-color: var(--el-periwinkle);
}
.elq-option input {
	accent-color: var(--elq-accent);
	inline-size: 18px;
	block-size: 18px;
	margin: 0;
	flex: none;
}
.elq-option:has(input:checked) {
	border-color: var(--elq-accent);
	background: var(--el-surface);
}
.elq-option:has(input:focus-visible) {
	outline: 2px solid var(--el-accent);
	outline-offset: 2px;
}
.elq-nav {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-block-start: 28px;
}
.elq-nav [data-elq-next] {
	margin-inline-start: auto;
}
.elq-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.elq-chip {
	display: flex;
	flex-direction: column;
	padding: 8px 14px;
	border-radius: 12px;
	background: var(--el-surface);
	font-size: 14px;
}
.elq-chip-label {
	color: var(--el-periwinkle);
	font-size: 12px;
}
.elq-chip-value {
	color: var(--el-ink);
	font-weight: 500;
}
.elq-steps {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: elq;
}
.elq-steprow {
	counter-increment: elq;
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 16px;
	padding-block: 18px;
	border-block-end: 1px solid var(--el-line);
	position: relative;
}
.elq-steprow::before {
	content: counter(elq);
	position: absolute;
	inset-block-start: 14px;
	inset-inline-start: -6px;
	inline-size: 26px;
	block-size: 26px;
	border-radius: 50%;
	background: var(--el-ink);
	color: #FFFFFF;
	font: 600 14px/26px "EB Garamond", Georgia, serif;
	text-align: center;
}
.elq-step-img {
	inline-size: 88px;
	block-size: 110px;
	object-fit: contain;
	background: var(--el-surface);
	border-radius: 12px;
}
.elq-step-name {
	font-family: "EB Garamond", Georgia, serif;
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--el-ink);
	text-decoration: none;
}
.elq-step-name:hover {
	color: var(--el-accent);
	text-decoration: underline;
}
.elq-step-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 6px 0 8px;
}
.elq-tag {
	font-size: 12.5px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--el-surface);
	color: var(--el-ink);
}
.elq-tag--priority {
	background: var(--el-ink);
	color: #FFFFFF;
}
.elq-step-guide {
	margin: 0 0 10px;
	line-height: 1.55;
}
.elq-step-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.elq-price {
	font-family: "EB Garamond", Georgia, serif;
	font-weight: 600;
	font-size: 1.2rem;
	color: var(--el-ink);
}
.elq-routine {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-block: 24px;
	padding: 18px 20px;
	border-radius: 16px;
	background: var(--el-surface);
}
.elq-routine-label {
	margin: 0;
	color: var(--el-ink);
}
.elq-tips {
	margin: 0 0 16px;
	padding-inline-start: 20px;
	line-height: 1.6;
}
.elq-tips li + li {
	margin-block-start: 6px;
}
.elq-note {
	padding: 14px 16px;
	border-inline-start: 3px solid var(--el-periwinkle);
	background: var(--el-surface);
	border-radius: 0 12px 12px 0;
	line-height: 1.6;
}
[dir="rtl"] .elq-note {
	border-radius: 12px 0 0 12px;
}
.elq-email {
	margin-block: 24px;
}
.elq-email summary {
	cursor: pointer;
	color: var(--el-accent);
	font-weight: 500;
	min-block-size: 44px;
	display: flex;
	align-items: center;
}
.elq-email-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
	margin-block-start: 8px;
}
.elq-email-form label {
	inline-size: 100%;
	font-size: 14px;
	color: var(--el-ink);
}
.elq-email-form input[type="email"] {
	flex: 1 1 220px;
	min-block-size: 44px;
	border: 1px solid var(--el-line);
	border-radius: 12px;
	padding: 8px 14px;
}
.elq-email-status {
	inline-size: 100%;
	margin: 0;
	font-size: 14px;
}
.elq-hp {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}
@media (max-width: 480px) {
	.elq-steprow {
		grid-template-columns: 64px 1fr;
		gap: 12px;
	}
	.elq-step-img {
		inline-size: 64px;
		block-size: 80px;
	}
	.elq-nav .elq-btn {
		flex: 1;
	}
}

/* ---------- E2E polish (2026-09-28) ---------- */

/* WooCommerce section titles keep the copy's sentence case (WoodMart capitalises every word). */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) :is(h2, h3, h4, .woodmart-title-container, .title) {
	text-transform: none !important; /* the WoodMart layouts set "capitalize" per widget */
}

/* Quantity steppers: quiet outline buttons, so "Add to cart" stays the single filled action. */
.quantity :is(.minus, .plus).btn {
	background: transparent;
	color: #2D3B86;
	border: 1px solid #C9D3EC;
	box-shadow: none;
}
.quantity :is(.minus, .plus).btn:hover,
.quantity :is(.minus, .plus).btn:focus-visible {
	background: #EEF2FA;
	color: #1D275F;
}

/* Data tables (routine comparison, doctor specs): labels in the sans at a readable size, not 13px Garamond. */
.elementor-widget-text-editor table th {
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #36489A;
}

/* Product cards: a long title wraps to two lines instead of being cut mid-word (WoodMart clips at --wd-line-count). */
.wd-product {
	--wd-line-count: 2;
}
.products.elements-grid:not(.grid-columns-1) .wd-product .wd-entities-title {
	min-height: 2.8em;
}

/* Step cards (homepage "Three steps"): sit at the foot of each column, so a shorter description
   above one card no longer lifts it out of line with the others. */
.e-con:has(> .e-con > .el-band-card) {
	align-items: stretch !important;
}
.e-con > .el-band-card {
	margin-block-start: auto;
}
@media (min-width: 768px) and (max-width: 1024px) {
	.e-con:has(> .e-con > .el-band-card) {
		flex-wrap: nowrap !important; /* three narrow columns, never 2 + 1 */
	}
}

/* Checkout: the single-country field stays in the form (WooCommerce needs it) but out of sight,
   and the "Additional information" title gets room after the account checkbox. */
.el-hidden-row {
	display: none !important;
}
form.checkout .woocommerce-account-fields {
	margin-block-end: 2rem;
}

/* Hero slider: the arrows sat on the text on tablets and phones; swipe and dots remain. */
@media (max-width: 1024px) {
	.elementor-widget:has(.el-hero) .elementor-swiper-button {
		display: none !important;
	}
}

/* Hero on tablets: keep the text column clear of the face (the photo sits on the end side). */
@media (min-width: 768px) and (max-width: 1024px) {
	.el-hero > .e-con-inner > .e-con {
		max-width: 50%;
	}
	.el-hero .elementor-heading-title {
		font-size: clamp(2rem, 1rem + 2.8vw, 2.6rem) !important;
	}
}

/* Sticky add-to-cart bar: phones and tablets only; on desktop the button is already in view. */
@media (min-width: 1025px) {
	.wd-sticky-btn {
		display: none !important;
	}
}

@media (max-width: 767px) {
	/* iPhone Safari zooms the page on focus when a field's text is under 16px. */
	input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
	select,
	textarea {
		font-size: 16px !important;
	}
	/* The checkout steps collapse to one repeated word under the page title on phones. */
	.wd-checkout-steps {
		display: none;
	}
	/* Footer touch targets. */
	.wd-footer .elementor-nav-menu .elementor-item {
		padding-block: 10px !important;
	}
	.wd-footer .elementor-icon-list-item > a {
		padding-block: 10px;
	}
	.wd-footer .elementor-social-icon {
		width: 44px !important;
		height: 44px !important;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* Newsletter / form consent checkbox: easier to hit. */
.elementor-field-type-acceptance input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: #2D3B86;
}

/* Footer contact list: a gap between icon and text in both directions. */
.wd-footer .elementor-icon-list-icon + .elementor-icon-list-text {
	padding-inline-start: 10px !important;
}

/* Promo banner (WoodMart header banner). WoodMart's generated settings CSS no longer supplies the banner's
   height and background, so it collapsed to 0px while its links stayed in the tab order. The close button still
   collapses it (WoodMart switches a different variable). */
:root {
	--wd-hb-opt-h: 40px;
}
.wd-hb {
	background-color: #1D275F;
	color: #fff;
}
.wd-hb :is(a, .container) {
	color: #fff;
}
@media (max-width: 1024px) {
	:root {
		--wd-hb-opt-h: 52px;
	}
	.wd-hb .container {
		font-size: 14px;
		line-height: 1.35;
		padding-inline-end: 48px; /* clear of the close button */
	}
}