/* ==========================================================================
   Wejha Store — header (Blocksy Header Builder markup)
   Blocksy positions rows/items (start/middle/end, logical in RTL and LTR)
   and handles the mobile trigger + off-canvas. We only skin.
   Desktop (Homepage V2): middle row 92px = logo · search field · account, cart, language;
   bottom row 52px = store navigation. The two rows read as one component: one shared white surface, a faint
   hairline between them and a single soft shadow under the whole header. Mobile: one compact 64px row.
   ========================================================================== */

/* Rows (body[data-header] matches Blocksy's own specificity so this wins after its inline CSS) ---- */
body[data-header] .ct-header [data-device="desktop"] [data-row="middle"] {
	--height: 92px;
}

body[data-header] .ct-header [data-device="desktop"] [data-row="bottom"] {
	--height: 52px;
}

body[data-header] .ct-header [data-row="middle"] > div {
	background: var(--wejha-white);
	border-block-end: 0;
}

body[data-header] .ct-header [data-row="bottom"] > div {
	background: var(--wejha-white);
	border-block-start: 1px solid rgba(5, 48, 90, 0.06);
	border-block-end: 0;
}

/* One component: the shadow belongs to the header as a whole, not to a row */
@media (min-width: 1000px) {
	body[data-header] .ct-header {
		position: relative;
		z-index: 5;
		box-shadow: 0 1px 0 var(--wejha-border), 0 6px 18px rgba(5, 48, 90, 0.05);
	}
}

body[data-header] .ct-header [data-device="mobile"] [data-row="middle"] > div {
	border-block-end: 1px solid var(--wejha-border);
}

/* The middle column (search field) takes the room between logo and icons. Blocksy lays the three-column row
   out as "1fr <middle> 1fr" with the middle track content-sized (the field would stay at its intrinsic
   ~260px); its own --middle-column-width variable gives the middle track two shares of the free space instead. */
body[data-header] .ct-header [data-device="desktop"] [data-row="middle"] {
	--middle-column-width: minmax(0, 2fr);
}

.ct-header [data-device="desktop"] [data-row="middle"] [data-column="middle"] {
	flex: 1 1 auto;
	min-width: 0;
	padding-inline: var(--wejha-space-6);
}

.ct-header [data-device="desktop"] [data-row="middle"] [data-column="middle"] > [data-items] {
	width: 100%;
}

/* End column: account · cart · language, evenly spaced and quieter than brand, search and navigation */
.ct-header [data-device="desktop"] [data-row="middle"] [data-column="end"] [data-items] {
	gap: var(--wejha-space-2);
}

/* Logo ----------------------------------------------------------------------- */
.ct-header .site-branding .site-logo-container {
	display: inline-flex;
	align-items: center;
}

.ct-header .wejha-logo img,
.ct-header .site-logo-container img {
	width: auto;
	height: 70px;
	max-width: none;
}

@media (max-width: 999.98px) {
	.ct-header .wejha-logo img,
	.ct-header .site-logo-container img {
		height: 44px;
	}
}

@media (max-width: 689.98px) {
	.ct-header .wejha-logo img,
	.ct-header .site-logo-container img {
		height: 36px;
	}
}

/* Search field (desktop, WordPress search form via Blocksy's searchform.php) ------------------
   The store's main tool: a 52px pill up to 520px wide on the warm neutral with a visible border, the submit a
   navy circle at the end; on focus the field turns white with a teal ring and the button follows. */
.wejha-search {
	width: 100%;
	max-width: 520px;
	margin-inline: auto;
}

.wejha-search .ct-search-form {
	width: 100%;
	max-width: none;
}

.wejha-search .ct-search-form .ct-search-form-inner {
	display: flex;
	align-items: center;
	gap: var(--wejha-space-3);
	height: 52px;
	padding-inline-start: var(--wejha-space-5);
	padding-inline-end: 5px;
	background: var(--wejha-sand);
	border: 1px solid rgba(5, 48, 90, 0.12);
	border-radius: var(--wejha-radius-pill);
	transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.wejha-search .ct-search-form .ct-search-form-inner:hover {
	border-color: rgba(5, 48, 90, 0.22);
}

.wejha-search .ct-search-form .ct-search-form-inner:focus-within {
	background: var(--wejha-white);
	border-color: var(--wejha-teal);
	box-shadow: 0 0 0 4px var(--wejha-tint-teal);
}

.wejha-search .ct-search-form input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	font-size: var(--wejha-text-md);
	color: var(--wejha-text);
}

.wejha-search .ct-search-form input[type="search"]::placeholder {
	color: var(--wejha-text-muted);
	opacity: 1;
}

.wejha-search .ct-search-form input[type="search"]:focus {
	outline: none;
}

.wejha-search .ct-search-form button[type="submit"] {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wejha-primary);
	color: var(--wejha-text-on-primary);
	--theme-icon-color: currentColor;
	transition: background-color .18s ease, transform .18s ease;
}

.wejha-search .ct-search-form button[type="submit"]:hover,
.wejha-search .ct-search-form button[type="submit"]:focus-visible,
.wejha-search .ct-search-form .ct-search-form-inner:focus-within button[type="submit"] {
	background: var(--wejha-teal);
	color: #fff;
}

.wejha-search .ct-search-form button[type="submit"]:active {
	transform: scale(.94);
}

.wejha-search .ct-search-form button[type="submit"] .ct-icon {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* Live results dropdown (Blocksy) under the field */
.wejha-search .ct-search-form .ct-search-results {
	inset-inline-start: 0;
	inset-inline-end: 0;
	border-radius: var(--wejha-radius-lg);
	box-shadow: var(--wejha-shadow-lg);
}

/* Navigation (bottom row): 16px, roomy, current item navy and heavier, hover teal --------------- */
.ct-header [data-id="menu"] .menu > li > a {
	font-weight: 500;
	font-size: var(--wejha-text-md);
	color: var(--wejha-heading);
	padding-inline: 1.125rem; /* 18px */
	white-space: nowrap;
	text-transform: none; /* Blocksy's default menu typography is uppercase (visible only on the English menu) */
	letter-spacing: 0;
	transition: color .18s ease;
}

.ct-header [data-id="menu"] .menu > li:first-child > a {
	padding-inline-start: 0;
}

.ct-header [data-id="menu"] .menu > li > a:hover,
.ct-header [data-id="menu"] .menu > li > a:focus-visible {
	color: var(--wejha-teal-text);
}

/* Current item: navy and a touch heavier, so the visitor knows where they are */
.ct-header [data-id="menu"] .menu > li.current-menu-item > a,
.ct-header [data-id="menu"] .menu > li.current-menu-ancestor > a {
	color: var(--wejha-heading);
	font-weight: 600;
}

/* Indicator: a teal line grows from the start edge under the hovered / current item (Blocksy's plain menu
   type draws none of its own) */
.ct-header [data-id="menu"] .menu > li > a {
	position: relative;
}

.ct-header [data-id="menu"] .menu > li > a::after {
	content: "";
	position: absolute;
	inset-inline: 1.125rem;
	inset-block-end: 7px;
	height: 2px;
	border-radius: var(--wejha-radius-pill);
	background: var(--wejha-teal);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}

[dir="rtl"] .ct-header [data-id="menu"] .menu > li > a::after {
	transform-origin: 100% 50%;
}

.ct-header [data-id="menu"] .menu > li:first-child > a::after {
	inset-inline-start: 0;
}

.ct-header [data-id="menu"] .menu > li > a:hover::after,
.ct-header [data-id="menu"] .menu > li > a:focus-visible::after,
.ct-header [data-id="menu"] .menu > li.current-menu-item > a::after,
.ct-header [data-id="menu"] .menu > li.current-menu-ancestor > a::after {
	transform: scaleX(1);
}

/* Utility items (account, cart, language): secondary to the logo and the search — navy icons at a calm
   22px, muted labels that turn navy on hover, a soft pill behind the hovered item ---------------------- */
.ct-header [data-id="search"],
.ct-header [data-id="cart"] {
	--theme-icon-size: 22px;
}

.ct-header [data-id="search"] .ct-icon,
.ct-header [data-id="cart"] .ct-icon {
	--theme-icon-color: var(--wejha-heading);
}

/* Icon feedback: a 1px lift on hover, a small press on active (transform only) */
.ct-header [data-id="cart"] .ct-icon,
.ct-header [data-id="search"] .ct-icon,
.ct-header .wejha-account__icon {
	transition: transform .2s cubic-bezier(.2, .7, .2, 1);
}

.ct-header .ct-cart-item:hover .ct-icon,
.ct-header .ct-header-search:hover .ct-icon,
.ct-header .wejha-account__link:hover .wejha-account__icon {
	transform: translateY(-1px);
}

.ct-header .ct-cart-item:active .ct-icon,
.ct-header .ct-header-search:active .ct-icon,
.ct-header .wejha-account__link:active .wejha-account__icon {
	transform: scale(.92);
}

.ct-header .ct-header-cart .ct-cart-item,
.ct-header .ct-header-search {
	min-width: var(--wejha-control-height);
	min-height: var(--wejha-control-height);
	align-items: center;
	justify-content: center;
}

.ct-header .ct-header-cart .ct-cart-item {
	gap: var(--wejha-space-2);
	padding-inline: var(--wejha-space-3);
	border-radius: var(--wejha-radius-pill);
	transition: background-color .18s ease;
}

.ct-header [data-device="desktop"] .ct-header-cart .ct-cart-item:hover,
.ct-header [data-device="desktop"] .ct-header-cart .ct-cart-item:focus-visible {
	background: var(--wejha-sand);
}

.ct-header .ct-header-cart .ct-label {
	font-weight: 600;
	font-size: var(--wejha-text-sm);
	color: var(--wejha-heading);
	font-variant-numeric: tabular-nums;
}

.ct-header .ct-header-cart .ct-dynamic-count-cart {
	background: var(--wejha-red);
	color: #fff;
}

/* Cart badge: pops once when the count changes (class from assets/js/main.js) */
@media (prefers-reduced-motion: no-preference) {
	@keyframes wejha-badge-pop {
		0% { transform: scale(1); }
		45% { transform: scale(1.35); }
		100% { transform: scale(1); }
	}

	.ct-header .ct-header-cart .ct-dynamic-count-cart.is-bump {
		animation: wejha-badge-pop .35s cubic-bezier(.2, .7, .2, 1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ct-header [data-id="menu"] .menu > li > a,
	.ct-header [data-id="menu"] .menu > li > a::after,
	.ct-header [data-id="cart"] .ct-icon,
	.ct-header [data-id="search"] .ct-icon,
	.ct-header .wejha-account__icon,
	.wejha-search .ct-search-form .ct-search-form-inner,
	.wejha-search .ct-search-form button[type="submit"] {
		transition: none;
	}

	.ct-header .ct-cart-item:hover .ct-icon,
	.ct-header .ct-header-search:hover .ct-icon,
	.ct-header .wejha-account__link:hover .wejha-account__icon {
		transform: none;
	}
}

/* My Account item --------------------------------------------------------------- */
.wejha-account__link {
	display: inline-flex;
	align-items: center;
	gap: var(--wejha-space-2);
	min-height: var(--wejha-control-height);
	padding-inline: var(--wejha-space-3);
	border-radius: var(--wejha-radius-pill);
	color: var(--wejha-heading);
	font-weight: 500;
	font-size: var(--wejha-text-sm);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .18s ease, color .18s ease;
}

.wejha-account__link .wejha-account__label {
	color: var(--wejha-text-muted);
	transition: color .18s ease;
}

.wejha-account__link:hover,
.wejha-account__link:focus-visible {
	color: var(--wejha-heading);
	background: var(--wejha-sand);
}

.wejha-account__link:hover .wejha-account__label,
.wejha-account__link:focus-visible .wejha-account__label {
	color: var(--wejha-heading);
}

.wejha-account__icon {
	width: 22px;
	height: 22px;
	flex: none;
}

.wejha-account--icon-only .wejha-account__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 999.98px) {
	.ct-header [data-row] .wejha-account__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* Language switcher --------------------------------------------------------------- */
.wejha-language {
	display: inline-flex;
	align-items: center;
	gap: var(--wejha-space-1);
	font-size: var(--wejha-text-sm);
	color: var(--wejha-text-muted);
}

/* In the desktop header the switcher sits a step apart from the shopping controls (spacing, no divider) */
.ct-header [data-device="desktop"] [data-row="middle"] .wejha-language {
	margin-inline-start: var(--wejha-space-2);
}

.wejha-language__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--wejha-control-height);
	padding-inline: var(--wejha-space-2);
	color: var(--wejha-text-muted);
	text-decoration: none;
	border-radius: var(--wejha-radius-sm);
	transition: color .18s ease;
}

.wejha-language__link:hover,
.wejha-language__link:focus-visible {
	color: var(--wejha-teal-text);
}

.wejha-language__link.is-current {
	color: var(--wejha-heading);
	font-weight: 600;
	pointer-events: none;
}

.wejha-language__sep {
	color: var(--wejha-border);
}

/* Off-canvas (mobile) --------------------------------------------------------------- */
.ct-header [data-id="offcanvas"] .wejha-account,
.ct-header [data-id="offcanvas"] .wejha-language {
	padding-block: var(--wejha-space-3);
	border-block-start: 1px solid var(--wejha-border);
	width: 100%;
}

.ct-header [data-id="offcanvas"] .wejha-account__label {
	position: static;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	color: inherit;
}

.ct-header [data-id="offcanvas"] .wejha-account__link {
	font-size: var(--wejha-text-md);
	padding-inline: 0;
}

.ct-header [data-id="offcanvas"] .wejha-language {
	font-size: var(--wejha-text-md);
}

.ct-header [data-id="offcanvas"] .wejha-language__link {
	padding-inline: var(--wejha-space-2);
}

/* Mobile trigger: 44px touch target around Blocksy's 18px icon ------------------------------- */
.ct-header button[data-id="trigger"],
.ct-header .ct-header-trigger {
	min-width: var(--wejha-control-height);
	min-height: var(--wejha-control-height);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Cart: icon only below the desktop breakpoint (the total is desktop information) ------------- */
@media (max-width: 999.98px) {
	.ct-header [data-id="cart"] .ct-label {
		display: none;
	}

	.ct-header .ct-header-cart .ct-cart-item {
		padding-inline: 0;
	}

	.ct-header [data-row="middle"] [data-items] {
		gap: var(--wejha-space-1);
	}
}