/*
 * Header. Measurements come from the live site (Elementor header template 228); percentage
 * paddings are kept as percentages so boxes scale exactly as before.
 * Breakpoints: desktop >= 1025px, tablet 768-1024px, mobile <= 767px.
 */

.site-header { position: relative; }

/* ---------- Carousel (top bar) ---------- */
.ew-carousel { position: relative; overflow: hidden; }
.ew-carousel__track { display: flex; gap: 10px; transition-property: transform; transition-timing-function: ease; will-change: transform; }
.ew-carousel__slide { flex: 0 0 100%; min-width: 0; }

/* ---------- Top bar ---------- */
.ew-topbar { background-color: var(--ew-mustard); position: relative; }
.ew-topbar__inner { max-width: 1300px; margin-inline: auto; }
.ew-topbar__slide { display: flex; flex-direction: column; padding: 0 1%; }
/* Vertical padding is 1% of the slide's inner width (as on the live site). */
.ew-topbar__content { display: flex; flex-direction: column; flex: 1 1 auto; padding-block: 1%; }
.ew-topbar__text {
	margin-bottom: -20px;
	text-align: center;
	font-family: var(--ew-font-gibson);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.1em;
}
.ew-topbar__text p { margin-block-end: .9rem; }
.ew-topbar__text a { color: #000; text-decoration: underline; }
.ew-topbar__text a:hover { color: #000; }
.ew-topbar__br { display: none; }
.ew-topbar__image { text-align: center; }
.ew-topbar__image img { display: inline-block; width: 10%; vertical-align: middle; }

@media (max-width: 767px) {
	.ew-topbar { z-index: 100; }
	.ew-topbar__inner { padding: 1%; }
	.ew-topbar__slide { padding: 0 5%; }
	.ew-topbar__content { justify-content: center; padding-block: 3%; }
	.ew-topbar__text { font-size: 16px; }
	.ew-topbar__sep { display: none; }
	.ew-topbar__br { display: inline; }
	.ew-topbar__image img { width: auto; }
}

/* ---------- Desktop / tablet bar ---------- */
.ew-hbar {
	position: relative;
	z-index: 999;
	background-image: linear-gradient(180deg, var(--ew-black) 0%, var(--ew-purple) 100%);
	border-bottom: 1px solid var(--ew-mustard);
}
.ew-hbar__inner { display: flex; max-width: 1300px; margin-inline: auto; }

.ew-hbar__contact { display: flex; align-items: center; flex: 0 0 34.173%; }
.ew-hbar__cell { display: flex; flex-direction: column; padding: 3%; border-left: 1px solid var(--ew-mustard); }
.ew-hbar__cell--phone { flex: 0 0 33%; }
.ew-hbar__cell--email { flex: 1 1 auto; border-right: 1px solid var(--ew-mustard); }
.ew-hbar__img { display: block; }
.ew-hbar__img img { vertical-align: middle; }

.ew-hbar__nav { display: flex; justify-content: flex-end; align-items: center; flex: 0 0 70%; }

/* Products (mega menu) trigger */
.ew-hbar__products { flex: 0 0 25%; text-align: right; }
.ew-hbar__products-btn { display: inline-block; }
.ew-hbar__products-btn,
.ew-hbar__products-btn:hover,
.ew-hbar__products-btn:focus {
	padding: 0 25px 0 0;
	background: transparent;
	color: var(--ew-white);
	font-family: var(--ew-font-jakarta);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.4em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ew-hbar__menu-wrap { display: flex; flex: 1 1 auto; flex-wrap: nowrap; gap: 20px; }

/* Main menu */
.ew-nav__list { display: flex; margin: 0; padding: 0; list-style: none; }
.ew-nav__item { position: relative; }
.ew-nav__link,
.ew-nav__link:hover,
.ew-nav__link:focus {
	display: flex;
	align-items: center;
	padding: 15px 20px;
	color: var(--ew-white);
	font-family: var(--ew-font-jakarta);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.4em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}
.ew-nav__arrow { display: flex; align-items: center; margin-block: -10px; padding: 10px 0 10px 10px; line-height: 1; }
.ew-nav__arrow .ew-icon { width: 14px; height: 14px; }

.ew-nav__sub {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 3;
	display: none;
	min-width: 10em;
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: var(--ew-purple);
	font-size: 13px;
}
.ew-nav__item--parent:hover > .ew-nav__sub,
.ew-nav__item--parent:focus-within > .ew-nav__sub,
.ew-nav__item--parent.is-open > .ew-nav__sub { display: block; }
.ew-nav__sublink {
	display: block;
	padding: 13px 20px;
	color: var(--ew-white);
	font-family: var(--ew-font-jakarta);
	font-size: 14px;
	font-weight: 300;
	line-height: 20px;
	text-transform: uppercase;
	white-space: nowrap;
}
.ew-nav__sublink:hover,
.ew-nav__sublink:focus { background-color: var(--ew-mustard); color: var(--ew-purple); }

/* Basket toggle */
.ew-cart { display: flex; }
.ew-cart__toggle,
.ew-cart__toggle:hover,
.ew-cart__toggle:focus {
	align-self: flex-start;
	padding: 12px 24px;
	background: transparent;
	color: var(--ew-white);
	line-height: 20px;
}
.ew-cart__icon { position: relative; display: flex; }
.ew-cart__icon .ew-icon { width: 20px; height: 20px; }
.ew-cart__count {
	position: absolute;
	top: -.7em;
	right: -.7em;
	min-width: 1.6em;
	height: 1.6em;
	border-radius: 100%;
	background-color: var(--ew-mustard);
	color: var(--ew-purple);
	font-family: var(--ew-font-gibson);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.5em;
	text-align: center;
}

/* Tablet: hamburger (new; the live site had no menu at this width) */
.ew-hbar__burger,
.ew-hbar__burger:hover,
.ew-hbar__burger:focus {
	display: flex;
	align-items: center;
	margin-left: auto;
	padding: 0 20px;
	background: transparent;
	color: var(--ew-white);
}

/* ---------- Logo + search row ---------- */
.ew-logo-search { position: relative; z-index: 998; margin-bottom: -110px; padding-top: 2%; }
.ew-logo-search__inner { display: flex; max-width: 1300px; margin-inline: auto; }
.ew-logo-search__logo { display: flex; flex-direction: column; flex: 0 0 55.855%; padding: 1%; }
.ew-logo-search__search { display: flex; flex-direction: column; flex: 0 1 50%; min-width: 0; }

.ew-logo { display: inline-block; align-self: flex-start; line-height: 0; }
.ew-logo img { width: 33%; }

/* Pill search box */
.ew-search { position: relative; display: flex; align-items: center; }
.ew-search__label { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); display: flex; color: var(--ew-purple); line-height: 1; }
.ew-search__label .ew-icon { width: 25px; height: 25px; }
.ew-search input.ew-search__input,
.ew-search input.ew-search__input:focus {
	width: 100%;
	height: 55px;
	padding: 15px 65px 15px 80px;
	border: 0;
	border-radius: 50px;
	background-color: var(--ew-white);
	color: var(--ew-purple);
	font-family: var(--ew-font-jakarta);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.4em;
	outline: none;
	-webkit-appearance: none;
}
.ew-search input.ew-search__input::placeholder { color: var(--ew-purple); opacity: 1; }
.ew-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

@media (min-width: 768px) and (max-width: 1024px) {
	/* The desktop nav area overflows on purpose (34% + 70%); on tablet it fills the remaining
	   space instead so the new menu button stays on screen. The basket keeps its live position. */
	.ew-hbar__nav { flex: 1 1 auto; min-width: 0; justify-content: flex-start; }
}

@media (min-width: 1025px) and (max-width: 1439px) {
	/* Fix: on the live site the nav is 34% + 70% wide, so on laptop screens (under about 1440px) the menu
	   and the basket ran off the right edge and the page scrolled sideways. Here the nav takes the space
	   that is left and the spacing tightens as the screen narrows. 1440px and wider are unchanged. */
	.ew-hbar__nav { flex: 1 1 auto; min-width: 0; }
	.ew-hbar__products { flex: 0 0 auto; }
	.ew-hbar__products-btn,
	.ew-hbar__products-btn:hover,
	.ew-hbar__products-btn:focus { padding-left: clamp(0px, 1.2vw, 16px); padding-right: clamp(8px, 1.8vw, 25px); }
	.ew-hbar__menu-wrap { gap: clamp(0px, 1vw, 20px); }
	.ew-nav__link,
	.ew-nav__link:hover,
	.ew-nav__link:focus { padding-inline: clamp(6px, 1.3vw, 20px); }
}

@media (min-width: 1025px) and (max-width: 1340px) {
	/* The logo and search box no longer touch the screen edge (as fixed for tablets below). */
	.ew-logo-search__inner { padding-inline: 20px; }
}

@media (min-width: 1025px) and (max-width: 1150px) {
	/* Smallest desktop screens: a slightly smaller contact column and menu type so everything fits. */
	.ew-hbar__contact { flex-basis: 30%; }
	.ew-hbar__cell { padding: 2%; }
	.ew-nav__link,
	.ew-nav__link:hover,
	.ew-nav__link:focus,
	.ew-hbar__products-btn,
	.ew-hbar__products-btn:hover,
	.ew-hbar__products-btn:focus { font-size: 13px; }
}

@media (max-width: 1024px) {
	/* Fix: the live site let the logo and search box touch the screen edges at tablet widths. */
	.ew-logo-search__inner { padding-inline: 20px; }
}

/* ---------- Mobile bar ---------- */
.ew-mbar {
	position: relative;
	z-index: 101;
	display: flex;
	flex-wrap: nowrap;
	gap: 5px;
	margin-top: 20px;
	margin-bottom: -100px;
	padding: 1%;
}
.ew-mbar__cell { display: flex; flex-direction: column; min-width: 0; padding: 1%; }
.ew-mbar__cell--search { flex: 0 0 15%; justify-content: center; z-index: 10; }
.ew-mbar__cell--cart { flex: 0 0 15%; flex-direction: row; justify-content: center; align-items: flex-start; z-index: 102; }
.ew-mbar__cell--logo { flex: 0 0 38.468%; z-index: 101; }
.ew-mbar__cell--menu { flex: 0 0 20%; padding: 0; z-index: 999; }

.ew-mbar__search,
.ew-mbar__search:hover,
.ew-mbar__search:focus {
	display: block;
	padding: 0;
	background: transparent;
	color: var(--ew-white);
	font-size: 16px;
	line-height: 24px;
	text-align: center;
}
.ew-mbar__search-icon { display: inline-block; font-size: 25px; line-height: 1; }
.ew-mbar__search-icon .ew-icon { display: block; width: 1em; height: 1em; }

/* The basket button (68px) overflows its 15% cell, exactly as on the live site. */
.ew-mbar__cell--cart .ew-cart { flex: 0 0 100%; min-width: 0; }

.ew-mbar__cell--logo .ew-logo { display: block; }
.ew-mbar__cell--logo .ew-logo img { width: 100%; }

.ew-mbar__burger,
.ew-mbar__burger:hover,
.ew-mbar__burger:focus {
	align-self: flex-end;
	display: block;
	padding: 10px 0;
	background: transparent;
	color: var(--ew-white);
	line-height: 0;
}