/* ECARTBAY header.

   Desktop: two rows - logo / search / actions, then the category bar.
   Cramming seven categories into the same row as the search left the search
   about 300px wide and everything reading as clutter.

   Mobile: a compact app-style bar, a full-width search that opens a
   full-screen panel, and a scrollable chip strip for categories.

   Square corners throughout: the rest of the site is square, so a rounded
   header would read as a bolt-on. */

/* ---------- 0. Site width ---------- */

/* The theme capped every row at 1280px. Full-bleed instead, with padding that
   grows with the viewport so content never touches the edge. Longhand padding
   so rows that set their own vertical padding keep it. */
.eb-wrap {
	max-width: none;
	padding-left: clamp(16px, 2.6vw, 56px);
	padding-right: clamp(16px, 2.6vw, 56px);
}

/* ---------- 1. Top strip ---------- */

.eb-topstrip {
	background: var(--surface-charcoal, #F7F5F6);
	border-bottom: 1px solid var(--line, #E6E1E4);
}

.eb-topinner {
	display: flex;
	align-items: center;
	gap: 22px;
	min-width: 0;
}

.eb-topstrip .eb-tickerbar {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	border-bottom: 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

.eb-topstrip .eb-tickerset { display: flex; align-items: center; gap: 0; padding: 7px 0; }

/* The items used to butt together, reading as "...over Rs999CASH / CARD". */
.eb-topstrip .eb-micro {
	position: relative;
	padding: 0 18px;
	font-size: 11px;
	letter-spacing: 0.05em;
	color: var(--ash, #6E686B);
	white-space: nowrap;
}

.eb-topstrip .eb-micro::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 10px;
	background: var(--line, #E6E1E4);
}

.eb-topright { flex: none; display: flex; align-items: center; gap: 18px; }

.eb-toplink {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 0;
	font-size: 11px;
	letter-spacing: 0.05em;
	color: var(--ash, #6E686B);
	text-decoration: none;
	white-space: nowrap;
}

.eb-toplink:hover { color: var(--gold-text, #026E8C); }
.eb-toplink svg { flex: none; }

/* ---------- 2. Header shell ---------- */

.eb-header-modern {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #fff;
	border-bottom: 1px solid var(--line, #E6E1E4);
}

.eb-header-modern .eb-headrow {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 36px;
	min-height: 70px;
	min-width: 0;
	padding-top: 0;
	padding-bottom: 0;
}

.eb-header-modern .eb-logo { flex: none; }
.eb-header-modern .eb-logo img { height: 31px; width: auto; display: block; }

/* ---------- 3. Search ---------- */

/* The one sanctioned pill in a square system. In a screen of hard-edged
   boxes the curve is what reads as "type here" rather than "a region". */
.eb-header-modern .eb-searchwrap {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 660px;
	display: flex;
	align-items: stretch;
	height: 46px;
	padding-left: 3px;
	background: var(--surface-charcoal, #F7F5F6);
	border: 1px solid var(--line, #E6E1E4);
	border-radius: 999px;
	transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.eb-header-modern .eb-searchwrap:hover { border-color: #D7D1D5; }

.eb-header-modern .eb-searchwrap:focus-within {
	background: #fff;
	border-color: var(--gold, #0389AE);
	box-shadow: 0 0 0 3px rgba(3, 137, 174, 0.11), 0 8px 20px rgba(37, 35, 34, 0.07);
}

.eb-header-modern .eb-searchsubmit {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: 38px;
	height: 38px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	color: var(--ash, #6E686B);
	cursor: pointer;
	transition: color .16s ease, background .16s ease;
}

.eb-header-modern .eb-searchsubmit:hover {
	background: rgba(3, 137, 174, 0.08);
	color: var(--gold-text, #026E8C);
}

.eb-header-modern .eb-searchfield {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: 0;
	outline: none;
	color: var(--ink, #252322);
	font-family: 'Saira', sans-serif;
	font-size: 14px;
	padding: 0 6px 0 0;
}

.eb-header-modern .eb-searchfield::placeholder { color: var(--slate, #9C9599); }
.eb-header-modern .eb-searchfield::-webkit-search-cancel-button { -webkit-appearance: none; }

select.eb-searchcat {
	flex: none;
	max-width: 150px;
	align-self: center;
	height: 30px;
	/* Clears the pill's curve so the label never crowds the edge. */
	margin-right: 14px;
	padding: 0 24px 0 14px;
	background-color: transparent;
	border: 0;
	border-left: 1px solid var(--line, #E6E1E4);
	border-radius: 0;
	color: var(--ash, #6E686B);
	font-family: 'Saira', sans-serif;
	font-size: 11px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	cursor: pointer;
	outline: none;
	text-overflow: ellipsis;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236E686B' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 9px center;
}

select.eb-searchcat:focus-visible { outline: 2px solid var(--gold, #0389AE); outline-offset: -2px; }

/* ---------- 4. Actions ---------- */

.eb-actions {
	flex: none;
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 24px;
}

.eb-act {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-width: 46px;
	padding: 6px 2px;
	color: var(--ink, #252322);
	text-decoration: none;
	transition: color .16s ease;
}

.eb-act:hover { color: var(--gold-text, #026E8C); }
.eb-act svg { flex: none; display: block; }

.eb-act-lab {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
}

.eb-cartico { position: relative; display: flex; align-items: center; }

.eb-act-cart .eb-cart-count {
	position: absolute;
	top: -6px;
	right: -9px;
	left: auto;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	background: var(--gold, #0389AE);
	color: #fff;
	font-size: 10px;
	line-height: 17px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* ---------- 5. Category bar ---------- */

.eb-catbar { border-top: 1px solid var(--line, #E6E1E4); }

.eb-catinner { min-width: 0; }

.eb-menuitems {
	display: flex;
	align-items: stretch;
	gap: 30px;
	min-width: 0;
	/* Mobile default: the strip scrolls inside itself. Desktop turns this
	   off below, because an overflow container clips the mega-menu panels. */
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.eb-menuitems::-webkit-scrollbar { display: none; }

.eb-menuitem { display: flex; flex: none; }

.eb-catbar .eb-navlink {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 13px 0 11px;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	color: var(--ink, #252322);
	font-family: 'Saira', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: color .16s ease, border-color .16s ease;
}

/* Hover colour only. The sliding indicator draws the hover underline, so a
   per-link border here would give two teal bars at once. The current page
   keeps its own border as the no-JS fallback. */
.eb-catbar .eb-navlink:hover,
.eb-catbar .eb-navlink:focus-visible {
	color: var(--gold-text, #026E8C);
}

.eb-catbar .current-menu-item > .eb-navlink,
.eb-catbar .eb-menuitem.current-menu-item .eb-navlink,
.eb-catbar .eb-menuitem.nmh-current .eb-navlink {
	color: var(--gold-text, #026E8C);
	border-bottom-color: var(--gold, #0389AE);
}

/* ---------- 6. Account flyout ---------- */

.eb-acct { position: relative; display: flex; }

.eb-acctmenu {
	position: absolute;
	top: 100%;
	right: -14px;
	z-index: 80;
	min-width: 250px;
	padding: 18px;
	background: #fff;
	border: 1px solid var(--line, #E6E1E4);
	box-shadow: 0 18px 40px rgba(37, 35, 34, 0.13);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.eb-acct:hover .eb-acctmenu,
.eb-acct:focus-within .eb-acctmenu { opacity: 1; visibility: visible; transform: translateY(0); }

.eb-accthead {
	margin: 0;
	font-family: 'Saira Condensed', 'Saira', sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink, #252322);
}

.eb-acctnote { margin: 5px 0 14px; font-size: 12.5px; line-height: 1.45; color: var(--ash, #6E686B); }

.eb-acctbtn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 11px 18px;
	background: var(--gold, #0389AE);
	border: 1px solid var(--gold, #0389AE);
	border-radius: 0;
	color: #fff;
	font-family: 'Saira', sans-serif;
	font-size: 12.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}

.eb-acctbtn:hover { background: var(--gold-dark, #02607A); border-color: var(--gold-dark, #02607A); color: #fff; }

.eb-acctlinks { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line, #E6E1E4); }

.eb-acctlinks a {
	display: block;
	padding: 8px;
	margin: 0 -8px;
	font-size: 13.5px;
	color: var(--ink, #252322);
	text-decoration: none;
}

.eb-acctlinks a:hover { background: var(--surface-charcoal, #F7F5F6); color: var(--gold-text, #026E8C); }

/* ---------- 7. Desktop ---------- */

@media (min-width: 1024px) {
	/* Mega-menu panels must be able to escape the bar, so no overflow here. */
	.eb-menuitems { overflow: visible; flex-wrap: wrap; }
	.eb-menuitem { position: static; }
}

/* ---------- 8. Mobile: app-style bar ---------- */

@media (max-width: 1023px) {
	.eb-topright { display: none; }

	/* On touch the account icon goes straight to the account page; a hover
	   flyout there only gets stuck open. */
	.eb-acctmenu { display: none; }

	.eb-header-modern .eb-headrow {
		flex-wrap: wrap;
		gap: 0 14px;
		min-height: 0;
		padding-top: 9px;
	}

	.eb-header-modern .eb-logo img { height: 27px; }

	.eb-actions { gap: 6px; }

	.eb-act {
		gap: 0;
		min-width: 42px;
		min-height: 42px;
	}

	.eb-act-lab { display: none; }

	/* Search drops to its own full-width line. */
	.eb-header-modern .eb-searchwrap {
		order: 3;
		flex: 1 1 100%;
		max-width: none;
		height: 42px;
		margin: 9px 0 10px;
	}

	.eb-header-modern .eb-searchsubmit { width: 36px; height: 36px; }

	/* The department select belongs in the full-screen panel on mobile. */
	select.eb-searchcat { display: none; }

	.eb-catbar { border-top: 0; }

	.eb-catinner { padding-left: 0; padding-right: 0; }

	.eb-menuitems { gap: 0; padding: 0 6px; }

	.eb-catbar .eb-navlink {
		padding: 11px 12px 10px;
		font-size: 11.5px;
		letter-spacing: 0.07em;
	}
}

/* Hide-on-scroll. Transform rather than display so it slides. */
@media (max-width: 1023px) {
	.eb-header-modern {
		transition: transform .26s cubic-bezier(.32, .72, 0, 1);
		will-change: transform;
	}

	.eb-header-modern.nmh-hide { transform: translateY(-100%); }
}

@media (prefers-reduced-motion: reduce) {
	.eb-header-modern { transition-duration: .01ms; }
}

/* ---------- 9. Full-screen search panel (mobile) ---------- */

.nmh-so {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	background: #fff;
	padding-top: env(safe-area-inset-top, 0px);
}

.nmh-so[hidden] { display: none; }

.nmh-so-bar {
	flex: none;
	position: relative; /* anchor for the autosuggest dropdown */
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 8px 10px;
	border-bottom: 1px solid var(--line, #E6E1E4);
}

.nmh-so-back,
.nmh-so-clear {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	color: var(--ink, #252322);
	cursor: pointer;
}

.nmh-so-back:hover, .nmh-so-clear:hover { background: var(--surface-iron, #F1EEF0); }
.nmh-so-clear[hidden] { display: none; }

/* Sits inside the pill's right end rather than after it. */
.nmh-so-clear {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	color: var(--ash, #6E686B);
}

/* Matches the header pill, so the panel reads as the same control enlarged. */
.nmh-so-field {
	flex: 1;
	min-width: 0;
	height: 44px;
	padding: 0 46px 0 18px;
	background: var(--surface-charcoal, #F7F5F6);
	border: 1px solid var(--line, #E6E1E4);
	border-radius: 999px;
	outline: none;
	color: var(--ink, #252322);
	font-family: 'Saira', sans-serif;
	font-size: 16px;
	transition: border-color .18s ease, background .18s ease;
}

.nmh-so-field:focus {
	background: #fff;
	border-color: var(--gold, #0389AE);
}

.nmh-so-field::placeholder { color: var(--slate, #9C9599); }
.nmh-so-field::-webkit-search-cancel-button { -webkit-appearance: none; }

.nmh-so-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px 16px 32px; }

.nmh-so-head {
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--slate, #9C9599);
}

.nmh-so-cats { display: flex; flex-wrap: wrap; gap: 8px; }

/* Search-adjacent, so these follow the search pill rather than the square rule. */
.nmh-so-cats a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 17px;
	background: var(--surface-charcoal, #F7F5F6);
	border: 1px solid var(--line, #E6E1E4);
	border-radius: 999px;
	color: var(--ink, #252322);
	font-size: 13px;
	letter-spacing: 0.03em;
	text-decoration: none;
}

.nmh-so-cats a:active { background: var(--surface-iron, #F1EEF0); border-color: var(--gold, #0389AE); }

/* Body must not scroll behind the panel. position:fixed rather than plain
   overflow:hidden, which iOS Safari ignores; JS pins `top` to the saved
   scroll offset so the page does not jump to the top on open. */
body.nmh-so-open {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	overflow: hidden;
}

@media (min-width: 1024px) {
	.nmh-so { display: none; }
}

/* ---------- 10. Category hover panels ---------- */

.eb-catbar { position: relative; overflow: visible; }
.eb-catinner { position: relative; }

.nmh-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 60;
	background: #fff;
	border-top: 1px solid var(--line, #E6E1E4);
	border-bottom: 1px solid var(--line, #E6E1E4);
	box-shadow: 0 24px 44px rgba(37, 35, 34, 0.12);
	opacity: 0;
	transform: translateY(-8px);
	pointer-events: none;
	transition: opacity .18s ease, transform .22s cubic-bezier(.32, .72, 0, 1);
}

.nmh-panel[hidden] { display: none; }
.nmh-panel.is-open { opacity: 1; transform: none; pointer-events: auto; }

.nmh-panel-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
	padding: 24px 0 16px;
}

.nmh-panel-title {
	font-family: 'Saira Condensed', 'Saira', sans-serif;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ink, #252322);
}

.nmh-panel-all {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: none;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--gold-text, #026E8C);
	text-decoration: none;
}

.nmh-panel-all svg { transition: transform .18s ease; }
.nmh-panel-all:hover svg { transform: translateX(3px); }

.nmh-panel-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	padding-bottom: 28px;
}

.nmh-pcard {
	display: flex;
	flex-direction: column;
	gap: 9px;
	min-width: 0;
	color: var(--ink, #252322);
	text-decoration: none;
}

.nmh-pcard-img {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--surface-iron, #F1EEF0);
}

.nmh-pcard-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}

.nmh-pcard:hover .nmh-pcard-img img { transform: scale(1.05); }

.nmh-pcard-name {
	font-size: 13px;
	line-height: 1.35;
	overflow-wrap: anywhere;
	transition: color .16s ease;
}

.nmh-pcard:hover .nmh-pcard-name { color: var(--gold-text, #026E8C); }

.nmh-pcard-price {
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ink, #252322);
}

.nmh-pcard-price del { font-weight: 400; color: var(--slate, #9C9599); margin-right: 5px; }
.nmh-pcard-price ins { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
	.nmh-panel, .nmh-pcard-img img { transition-duration: .01ms; }
}

/* ---------- 11. Sliding hover indicator ---------- */

.nmh-ind {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background: var(--gold, #0389AE);
	opacity: 0;
	pointer-events: none;
	transition: transform .3s cubic-bezier(.32, .72, 0, 1), width .3s cubic-bezier(.32, .72, 0, 1), opacity .18s ease;
}

.nmh-ind.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.nmh-ind { transition-duration: .01ms; }
}

/* ---------- 12. Condense on scroll (desktop) ---------- */

@media (min-width: 1024px) {
	.eb-header-modern .eb-headrow,
	.eb-header-modern .eb-logo img,
	.eb-header-modern .eb-searchwrap {
		transition: min-height .26s cubic-bezier(.32, .72, 0, 1), height .26s cubic-bezier(.32, .72, 0, 1);
	}

	/* No overflow:hidden here - it would clip the hover panels. Height plus
	   opacity collapses the row without trapping them. */
	.eb-catbar {
		height: 44px;
		transition: height .28s cubic-bezier(.32, .72, 0, 1), opacity .2s ease;
	}

	.eb-header-modern.nmh-condensed .eb-headrow { min-height: 58px; }
	.eb-header-modern.nmh-condensed .eb-logo img { height: 26px; }
	.eb-header-modern.nmh-condensed .eb-searchwrap { height: 38px; }

	.eb-header-modern.nmh-condensed .eb-catbar {
		height: 0;
		opacity: 0;
		pointer-events: none;
		border-top-color: transparent;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eb-header-modern .eb-headrow,
	.eb-header-modern .eb-logo img,
	.eb-header-modern .eb-searchwrap,
	.eb-catbar { transition-duration: .01ms; }
}

/* ---------- 13. Cart badge pop ---------- */

@keyframes nmh-pop {
	0%   { transform: scale(1); }
	42%  { transform: scale(1.34); }
	100% { transform: scale(1); }
}

.eb-cart-count.nmh-pop,
.nmm-badge.nmh-pop { animation: nmh-pop .42s cubic-bezier(.3, 1.4, .5, 1); }

@media (prefers-reduced-motion: reduce) {
	.eb-cart-count.nmh-pop, .nmm-badge.nmh-pop { animation: none; }
}

/* ---------- 14. Mobile: panels off, chips get the active state ---------- */

@media (max-width: 1023px) {
	.nmh-panel { display: none !important; }
	.nmh-ind { display: none; }

	.eb-catbar .eb-menuitem.nmh-current .eb-navlink {
		color: var(--gold-text, #026E8C);
		border-bottom-color: var(--gold, #0389AE);
	}
}