/* Moved from checkout.css (site-wide header rules). Kept first so the cascade order is unchanged. */
/* Header cart link (site-wide header) */
#header-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: var(--tbk-ink);
}
#header-cart .cart-icon {
	display: block;
	width: 30px;
	height: 30px;
}
#header-cart .cart-icon path {
	fill: var(--tbk-ink);
	transition: fill 0.15s ease;
}
#header-cart:hover .cart-icon path {
	fill: var(--tbk-primary);
}
#header-cart .cart-count {
	position: absolute;
	top: -6px;
	right: -8px;
	display: none;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9999px;
	background: var(--tbk-primary);
	color: #fff;
	font-family: "Ubuntu", sans-serif;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}
#header-cart .cart-count.is-visible {
	display: inline-flex;
}
@media (max-width: 767px) {
	#header-cart .cart-icon {
		width: 26px;
		height: 26px;
	}
}
/* Header: nav spacing (MB-like) */
#nav-menu { column-gap: 30px; }
@media (max-width: 991px) { #nav-menu { column-gap: 18px; } }
@media (max-width: 767px) { #nav-menu { column-gap: 14px; } }

/* Cart badge: MB-style circle */
#header-cart .cart-count {
	top: auto;
	right: 0;
	bottom: -6px;
	transform: translate(50%, 0);
	min-width: 18px;
	width: 18px;
	height: 18px;
	padding: 0;
	border-radius: 50%;
	font-size: 12px;
}

/* Currency switch (YITH) in the nav */
#currency-switch,
#currency-switch .yith-wcmcs-shortcode {
	position: relative;
	width: auto;
}

#currency-switch .yith-wcmcs-currency-list {
	position: relative;
}

#currency-switch .yith-wcmcs-selected-currency {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-family: "Ubuntu", sans-serif;
	font-weight: 600;
	font-size: 1.2rem;
	color: var(--tbk-ink);
	cursor: pointer;
	padding: 0;
	margin: 0;
}

#currency-switch .yith-wcmcs-currency-name {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--tbk-ink);
}

#currency-switch .yith-wcmcs-selected-currency:after {
	content: "\25be";
	font-size: 0.7em;
	line-height: 1;
	color: var(--tbk-ink);
	margin-left: 0.1rem;
	position: static;
}

#currency-switch .yith-wcmcs-currencies-dropdown {
	position: absolute;
	top: calc(100% + 0.55rem);
	right: 0;
	min-width: 8rem;
	background: #fff;
	border: 1px solid rgba(var(--tbk-ink-rgb), 0.10);
	border-radius: 0.6rem;
	box-shadow: 0 14px 32px rgba(var(--tbk-ink-rgb), 0.14);
	padding: 0.4rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
	z-index: 50;
	display: block;
}

#currency-switch.is-open .yith-wcmcs-currencies-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

#currency-switch .yith-wcmcs-search-container {
	display: none;
}

#currency-switch .yith-wcmcs-currency {
	display: block;
	padding: 0.45rem 0.75rem;
	border-radius: calc(0.6rem - 0.4rem - 1px);
	font-family: "Ubuntu", sans-serif;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--tbk-ink);
	text-decoration: none;
}

#currency-switch .yith-wcmcs-currency:hover {
	background: #f7f3ee;
	color: var(--tbk-primary);
}

#currency-switch .yith-wcmcs-currency-flag {
	display: none;
}

/* =========================================================================
   TOUBKAL-MAROC - Site header
   Flat, full-width white bar (layout mirrors Marrakech Balloon; colours and
   type stay Toubkal). Overrides the Bricks floating "pill" header.

   Loaded after checkout.css, site-wide. Targets the Bricks CSS ids set on
   the header template (post 134): #site-header, #nav-wrap, #nav-pill,
   #brand-logo, #nav-menu, #header-cart, #nav-lang, #currency-switch,
   #nav-about, #nav-contact.
   ========================================================================= */

/* Flat white full-width bar -------------------------------------------------- */
#site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: #ffffff;
	height: 90px;
	padding: 0 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateY(0);
	transition: transform .3s ease, box-shadow .3s ease;
	will-change: transform;
}

/* Smart header: slides up after the hero when scrolling down, returns on up */
#site-header.tbk-header--hidden {
	transform: translateY(-100%);
}

#site-header.tbk-header--scrolled {
	box-shadow: 0 8px 24px rgba(var(--tbk-ink-rgb), 0.08);
}

/* Drop the floating pill treatment */
#nav-pill {
	background: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* Site-wide content width: every Bricks container caps at 1080px */
.brxe-container {
	max-width: 1080px;
}

#nav-wrap {
	max-width: 1080px;
}

/* Slightly larger mark to balance the wider bar */
#brand-logo {
	width: 7rem;
	height: 3.25rem;
}

/* Right-hand cluster: cart, language, currency, contact ---------------------- */
/* Uniform gap is replaced with per-item margins so the lang <-> currency gap
   can be tighter while cart <-> lang and currency <-> contact stay wide. */
#nav-menu {
	align-items: center;
	gap: 0;
}

#nav-menu > #header-cart { order: 1; display: none !important; }
#nav-menu > #nav-lang { order: 2; margin-left: 0; }
#nav-menu > #currency-switch { order: 3; margin-left: 0.65rem; }
#nav-menu > #nav-about { order: 4; display: none !important; }
#nav-menu > #nav-contact { order: 5; margin-left: 1.8rem; }

/* Language switch: compact control + menu (matches the currency switch) */
#lang-toggle {
	padding: 0.4rem 0.7rem;
	border: 0 !important;
	border-radius: 0.5rem;
	background: #ffffff !important;
	color: var(--tbk-ink);
	font-size: 1.05rem;
	font-weight: 700;
	transition: color .15s ease;
}

#lang-toggle:hover {
	color: var(--tbk-primary) !important;
}

#nav-lang {
	gap: 0.35rem;
}

#lang-menu {
	display: flex;
	flex-direction: column;
	gap: 0.25rem !important;
	min-width: 7.5rem !important;
	border: 1px solid rgba(var(--tbk-ink-rgb), 0.10) !important;
	border-radius: 0.6rem !important;
	box-shadow: 0 14px 32px rgba(var(--tbk-ink-rgb), 0.14) !important;
	padding: 0.4rem !important;
}

#lang-en,
#lang-fr {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0 !important;
	padding: 0.5rem 0.75rem !important;
	border-radius: calc(0.6rem - 0.4rem - 1px);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--tbk-ink);
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

#lang-en:hover,
#lang-fr:hover {
	background: #f7f3ee !important;
	color: var(--tbk-primary) !important;
}

/* Currency switch: compact control + scroll-free menu */
#currency-switch .yith-wcmcs-selected-currency {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0.7rem;
	border: 0;
	border-radius: 0.5rem;
	background: #ffffff;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--tbk-ink);
	transition: color .15s ease;
}

#currency-switch .yith-wcmcs-selected-currency:hover {
	color: var(--tbk-primary);
}

/* Use only the checkout.css chevron (:after), not YITH's arrow image (:before) */
#currency-switch .yith-wcmcs-selected-currency:before {
	display: none;
}

#currency-switch .yith-wcmcs-currency-name {
	font-size: 1.05rem;
	font-weight: 700;
	color: inherit;
}

/* Hide the empty flag spacer in both the trigger and the menu */
#currency-switch .yith-wcmcs-currency-flag {
	display: none;
}

/* Kill YITH's fixed height (scrollbar) and item margins (big gaps) */
#currency-switch .yith-wcmcs-currencies {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	max-height: none !important;
	overflow: visible !important;
	margin: 0 !important;
}

#currency-switch .yith-wcmcs-currencies-dropdown {
	min-width: 9rem;
}

#currency-switch .yith-wcmcs-currencies-dropdown .yith-wcmcs-currency,
#currency-switch .yith-wcmcs-currencies-dropdown .yith-wcmcs-currency:nth-child(1),
#currency-switch .yith-wcmcs-currencies-dropdown .yith-wcmcs-currency:nth-last-child(1) {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0 !important;
	padding: 0.5rem 0.75rem !important;
	border-radius: calc(0.6rem - 0.4rem - 1px);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--tbk-ink);
	transition: background-color .15s ease, color .15s ease;
}

#currency-switch .yith-wcmcs-currency--selected,
#currency-switch .yith-wcmcs-currencies-dropdown .yith-wcmcs-currency:hover {
	background: #f7f3ee;
	color: var(--tbk-primary) !important;
}

/* Busy state while the currency AJAX request is in flight */
#currency-switch.tbk-busy {
	opacity: 0.6;
	pointer-events: none;
}

/* Blink prices while a currency change is in progress */
@keyframes tbk-price-blink {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.25;
	}
}

body.tbk-blinking .woocommerce-Price-amount {
	animation: tbk-price-blink 0.7s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	body.tbk-blinking .woocommerce-Price-amount {
		animation: none;
		opacity: 0.5;
	}
}

/* Contact: solid brown pill, white bold text, soft shadow */
#nav-contact,
#nav-contact.brxe-button,
#nav-contact.bricks-button {
	background: var(--tbk-primary) !important;
	color: #ffffff !important;
	border: 0 !important;
	border-radius: 9999px !important;
	padding: 0.85rem 2rem !important;
	font-weight: 800;
	transition: transform 0.15s ease, background-color 0.15s ease;
}

#nav-contact:hover,
#nav-contact.brxe-button:hover,
#nav-contact.bricks-button:hover {
	background: var(--tbk-primary-dark) !important;
	transform: translateY(-1px);
}

/* Clearance for the taller header on cart / checkout / thank-you -------------- */
body.woocommerce-checkout .tbk-checkout-top,
body.woocommerce-cart .tbk-cart-top,
body.woocommerce-order-received .tbk-checkout-top {
	padding-top: 7.5rem;
}

/* Responsive ----------------------------------------------------------------- */
@media (max-width: 991px) {
	#site-header {
		height: 78px;
		padding: 0 1.5rem;
	}

	#brand-logo {
		width: 6.5rem;
		height: 3rem;
	}

	#nav-menu > #nav-contact {
		margin-left: 1.2rem;
	}

	#nav-menu > #currency-switch {
		margin-left: 0.5rem;
	}
}

@media (max-width: 767px) {
	#site-header {
		height: 64px;
		padding: 0 1rem;
	}

	#brand-logo {
		width: 6rem;
		height: 2.75rem;
	}

	#nav-menu > #nav-contact {
		margin-left: 0.9rem;
	}

	#nav-menu > #currency-switch {
		margin-left: 0.4rem;
	}

	#nav-contact,
	#nav-contact.brxe-button,
	#nav-contact.bricks-button {
		padding: 0.6rem 1.4rem !important;
		font-size: 1rem;
	}
}

/* Home hero background ------------------------------------------------------ */
#hero {
	background-image: url("/wp-content/uploads/2026/10/Toubkal2-16-scaled.jpg") !important;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}