/**
 * header.css — Estelia Norway AS
 * Location: estelia-child/assets/css/header.css
 * Loads:    every page, after global.css (functions.php §1)
 * Depends:  global.css tokens
 *           header.js  (--est-announce-h, .is-stuck, .is-scrolled,
 *                       .is-nav-open)
 *           functions.php §2 (announce markup), §4 (cart menu item and
 *                        .est-cart-bar), §7 (body.est-header-overlay)
 *
 * Overlay hook: body.est-header-overlay ONLY. functions.php §7 is the
 * single source of truth.
 *
 * GeneratePress owns .site-header, .main-navigation and .menu-toggle.
 * We restyle them, we do not replace them.
 *
 * Consolidated 1 Aug 2026: the three appended patch blocks are merged into
 * the mobile section below and the superseded rules removed. Nothing on
 * mobile is position:fixed against a JS-measured variable any more —
 * .site-header is fixed (overlay) or sticky (everything else), so it is a
 * containing block in both states and its children position absolutely
 * inside it. That is what removed the cart's lag behind the 400ms
 * transition.
 *
 * Order: 1 tokens · 2 announce · 3 header · 4 wordmark · 5 nav · 6 cart
 *        7 overlay · 8 tablet · 9 mobile · 10 small phones · 11 motion
 */

/* ========================================================================
   1. TOKEN FALLBACKS
   Delete once the tokens are locked in global.css.
   ======================================================================== */

:root {
	--est-step--2: clamp(0.625rem, 0.6rem + 0.15vw, 0.6875rem);
	--est-tracking-eyebrow: 0.12em;
	--est-dur-fast: 200ms;

	/* Mobile bar height. Declared, not measured: the burger, the cart and
	   the panel all anchor to it, so it must be a known number rather than
	   whatever the content happens to produce. */
	--est-bar-h: 3.5rem;
}

/* ========================================================================
   2. ANNOUNCEMENT MARQUEE
   Two identical tracks, each translating -100% of its own width, so the
   second slides into the space the first vacates. Both must be wider than
   the viewport, which is what the repeated groups in functions.php §2 buy.

   Motion pauses on hover and on keyboard focus, and the bar is static
   under prefers-reduced-motion.
   Height is published to JS as --est-announce-h by header.js.
   ======================================================================== */

.est-announce {
	position: relative;
	z-index: 90; /* BELOW the header: the header pins over it on scroll */
	background-color: var(--est-ink);
	color: var(--est-bg);
}

.est-announce__viewport {
	display: flex;
	overflow: hidden;
	padding-block: var(--est-space-xs);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 2rem,
		#000 calc(100% - 2rem),
		transparent 100%
	);
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 2rem,
		#000 calc(100% - 2rem),
		transparent 100%
	);
}

.est-announce__track {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	min-width: max-content;
	max-width: none; /* overrides the global p measure */
	margin: 0;
	animation: est-marquee 60s linear infinite;
	will-change: transform;
}

.est-announce__group {
	display: flex;
	align-items: center;
}

.est-announce__item {
	display: flex;
	align-items: center;
	white-space: nowrap;
	padding-inline-start: var(--est-space-l);
	font-size: var(--est-step--2);
	font-weight: 500;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: var(--est-tracking-eyebrow);
}

/* Separator drawn as a shape, not a character, so it is never announced. */
.est-announce__item::after {
	content: '';
	flex: 0 0 auto;
	width: 3px;
	height: 3px;
	margin-inline-start: var(--est-space-l);
	background-color: currentColor;
}

@keyframes est-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

.est-announce:hover .est-announce__track,
.est-announce:focus-within .est-announce__track {
	animation-play-state: paused;
}

/* Narrower screens: shorter travel distance reads faster, so slow it down. */
@media (max-width: 47.999em) {

	.est-announce__track {
		animation-duration: 36s;
	}
}

/* Reduced motion: one static, centred set. */
@media (prefers-reduced-motion: reduce) {

	.est-announce__viewport {
		justify-content: center;
		padding-inline: var(--est-gutter);
		mask-image: none;
		-webkit-mask-image: none;
	}

	.est-announce__track {
		animation: none;
		min-width: 0;
		flex-wrap: wrap;
		justify-content: center;
	}

	.est-announce__track[aria-hidden='true'],
	.est-announce__group + .est-announce__group {
		display: none;
	}

	.est-announce__item:last-child::after {
		display: none;
	}
}

/* ========================================================================
   3. STICKY SITE HEADER — default, non-overlay pages
   ======================================================================== */

.site-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 100;
	background-color: var(--est-bg);
	border-block-end: 1px solid transparent;
	transition: border-color var(--est-dur-fast) var(--est-ease);
}

.site-header.is-scrolled {
	border-block-end-color: var(--est-line);
}

.site-header .inside-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--est-space-l);
	width: 100%;
	padding-block: var(--est-space-s);
	padding-inline: 30px;
}

/* ========================================================================
   4. WORDMARK
   ======================================================================== */

.site-header .site-branding,
.site-header .site-logo {
	flex: 0 0 auto;
}

.site-header .main-title {
	margin: 0;
	font-family: var(--est-font-display);
	font-size: var(--est-step-1);
	font-weight: 600px;
	line-height: 1;
	letter-spacing: 0.01em;
}

.site-header .main-title a {
	text-decoration: none;
	color: var(--est-ink);
}

.site-header .site-description {
	display: none; /* tagline lives in the hero */
}

.site-header .site-logo,
.site-header .custom-logo-link {
	display: flex;
	align-items: center;
}

.site-header .site-logo img,
.site-header .custom-logo {
	height: 2.75rem;
	width: auto;
	max-width: 13rem;
	object-fit: contain;
}

/* ========================================================================
   5. PRIMARY NAVIGATION
   ======================================================================== */

.main-navigation {
	background-color: transparent;
	flex: 1 1 auto;
}

.main-navigation .inside-navigation {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0;
}

/* GeneratePress stretches the nav list. Force centring on the row so the
   cart icon lines up with the text links. */
.main-navigation .main-nav > ul {
	display: flex;
	align-items: center !important;
	gap: var(--est-space-l);
}

.main-navigation .main-nav > ul > li {
	display: flex;
	align-items: center;
}

.main-navigation .main-nav ul li a {
	display: flex;
	align-items: center;
	padding: var(--est-space-xs) 0;
	font-family: var(--est-font-body);
	font-size: var(--est-step--1);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--est-ink);
}

/* Underline grows from the left. No layout shift. */
.main-navigation .main-nav ul li > a {
	position: relative;
}

.main-navigation .main-nav ul li > a::after {
	content: '';
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	width: 100%;
	height: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--est-dur-fast) var(--est-ease);
}

.main-navigation .main-nav ul li > a:hover::after,
.main-navigation .main-nav ul li > a:focus-visible::after,
.main-navigation .main-nav ul li.current-menu-item > a::after,
.main-navigation .main-nav ul li.current-menu-parent > a::after {
	transform: scaleX(1);
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a {
	background-color: transparent;
	color: var(--est-ink);
}

/* --- Submenus (Collections) --- */

.main-navigation ul ul {
	min-width: 13rem;
	padding: var(--est-space-s) 0;
	background-color: var(--est-bg);
	border: 1px solid var(--est-line);
	box-shadow: none;
}

.main-navigation ul ul li {
	display: block;
}

.main-navigation ul ul li a {
	padding-inline: var(--est-space-m);
	text-transform: none;
	letter-spacing: 0;
}

.main-navigation ul ul li > a::after {
	display: none;
}

.main-navigation ul ul li:hover > a {
	background-color: var(--est-surface);
}

/* ========================================================================
   6. CART
   Two render points, one shared link markup (functions.php §4):
     desktop — <li class="menu-item est-cart"> appended to the primary menu
     mobile  — <div class="est-cart-bar"> inside .inside-header
   The bar copy is hidden above 48em, the menu item below it.
   ======================================================================== */

/* Local copy of the visually-hidden utility. Without it the "Cart, 1 item"
   label takes real width and pushes the badge onto a second line. */
.est-cart .est-visually-hidden,
.est-cart-bar .est-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.est-cart {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.main-navigation .main-nav > ul > li.est-cart {
	display: flex;
	align-items: center;
}

.main-navigation .main-nav ul li.est-cart > a {
	padding: 0;
	line-height: 1;
}

/* Mobile-only control. The mobile block below switches it on. */
.est-cart-bar {
	display: none;
}

.est-cart__link {
	position: relative;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;        /* 44px tap target */
	margin-block: -0.75rem; /* absorbs the extra height, keeps the target */
	padding: 0;
	color: var(--est-ink);
	text-decoration: none;
	line-height: 1;
	overflow: visible;
}

.est-cart__link::after {
	display: none !important; /* no nav underline on the cart */
}

.est-cart__icon {
	width: 1.625rem;
	height: 1.625rem;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
	transition: transform var(--est-dur-fast) var(--est-ease);
}

.est-cart__link:hover .est-cart__icon,
.est-cart__link:focus-visible .est-cart__icon {
	transform: scale(1.06);
}

.est-cart__count {
	position: absolute;
	inset-block-start: 0.375rem;
	inset-inline-end: 0.375rem;
	display: grid;
	place-items: center;
	min-width: 1rem;
	height: 1rem;
	padding-inline: 0.25rem;
	background-color: var(--est-accent, var(--est-ink));
	color: var(--est-bg);
	border-radius: 999px; /* the one deliberate exception to --est-radius */
	font-family: var(--est-font-body);
	font-size: 0.5625rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

.est-cart__count:empty,
.est-cart__count[data-count='0'] {
	display: none;
}

/* ========================================================================
   7. TRANSPARENT OVERLAY HEADER
   Fixed, so the hero can rise up underneath it.
   ======================================================================== */

body.est-header-overlay .site-header {
	position: fixed;
	inset-inline: 0;
	inset-block-start: calc(var(--est-announce-h, 2.5rem) + var(--est-admin-h, 0px));
	z-index: 100;
	background-color: transparent;
	border-block-end-color: transparent;
	transition:
		inset-block-start var(--est-dur) var(--est-ease),
		background-color var(--est-dur) var(--est-ease),
		border-color var(--est-dur) var(--est-ease);
}

body.est-header-overlay.admin-bar .site-header {
	--est-admin-h: 32px;
}

/* --- Light treatment over dark imagery. Top-level links only. --- */

body.est-header-overlay .site-header .main-title a,
body.est-header-overlay .site-header .main-navigation .main-nav > ul > li > a,
body.est-header-overlay .site-header .main-navigation .main-nav > ul > li:hover > a,
body.est-header-overlay .site-header .main-navigation .main-nav > ul > li.current-menu-item > a,
body.est-header-overlay .site-header .main-navigation .menu-toggle,
body.est-header-overlay .site-header .est-cart__link {
	color: var(--est-bg);
}

body.est-header-overlay .site-header .custom-logo,
body.est-header-overlay .site-header .site-logo img {
	filter: brightness(0) invert(1);
}

body.est-header-overlay .site-header .est-cart__count {
	background-color: var(--est-bg);
	color: var(--est-ink);
	box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08);
}

body.est-header-overlay .site-header .main-navigation ul ul li a,
body.est-header-overlay .site-header .main-navigation ul ul li:hover > a {
	color: var(--est-ink);
}

/* --- Stuck state --- */

body.est-header-overlay .site-header.is-stuck {
	inset-block-start: var(--est-admin-h, 0px);
	background-color: var(--est-bg);
	border-block-end-color: var(--est-line);
}

body.est-header-overlay .site-header.is-stuck .main-title a,
body.est-header-overlay .site-header.is-stuck .main-navigation .main-nav > ul > li > a,
body.est-header-overlay .site-header.is-stuck .main-navigation .main-nav > ul > li:hover > a,
body.est-header-overlay .site-header.is-stuck .main-navigation .main-nav > ul > li.current-menu-item > a,
body.est-header-overlay .site-header.is-stuck .main-navigation .menu-toggle,
body.est-header-overlay .site-header.is-stuck .est-cart__link {
	color: var(--est-ink);
}

body.est-header-overlay .site-header.is-stuck .custom-logo,
body.est-header-overlay .site-header.is-stuck .site-logo img {
	filter: none;
}

body.est-header-overlay .site-header.is-stuck .est-cart__count {
	background-color: var(--est-accent, var(--est-ink));
	color: var(--est-bg);
	box-shadow: none;
}

/* ========================================================================
   8. TABLET — 48em to 64em
   ======================================================================== */

@media (min-width: 48em) and (max-width: 63.999em) {

	.site-header .inside-header {
		gap: var(--est-space-m);
	}

	.main-navigation .main-nav > ul {
		gap: var(--est-space-m);
	}

	.main-navigation .main-nav ul li a {
		letter-spacing: 0.04em;
	}
}

/* ========================================================================
   9. MOBILE — below 48em

   Bar:  [ burger ] .......... [ logo ] .......... [ cart ]

   GeneratePress's own navigation is hidden here. Its .main-navigation is a
   sibling of .inside-header in this layout, not a child, so it could not be
   overlaid on the bar without measuring something. Instead functions.php §8
   prints .est-navtoggle inside .inside-header, next to the logo and the
   cart, and .est-mobilenav as a fixed full-screen panel in the footer.
   Neither anchors to anything that moves.
   ======================================================================== */

@media (max-width: 47.999em) {

	/* --- Admin bar ---
	   Below 783px WordPress switches #wpadminbar to position:absolute, so
	   it scrolls away with the page. A fixed header must not reserve space
	   for it, or it hangs 46px below the top of the viewport. --- */

	body.est-header-overlay.admin-bar .site-header {
		--est-admin-h: 0px;
	}

	/* --- The bar --- */

	.site-header .inside-header {
		position: relative;
		justify-content: center;
		gap: var(--est-space-s);
		min-height: var(--est-bar-h);
		padding-block: var(--est-space-xs);
	}

	.site-header .site-branding,
	.site-header .site-logo {
		/* Clear of both controls: 2.75rem button + gutter, each side. */
		max-width: calc(100% - 7.5rem);
	}

	.site-header .site-logo img,
	.site-header .custom-logo {
		height: 2.125rem;
		max-width: 10rem;
	}

	.site-header .main-title {
		font-size: var(--est-step-0);
	}

	/* --- GeneratePress navigation: off. Ours replaces it. --- */

	.main-navigation,
	.mobile-menu-control-wrapper {
		display: none !important;
	}

	/* --- Cart, hard right --- */

	.est-cart-bar {
		position: absolute;
		inset-block: 0;
		inset-inline-end: 30px;
		z-index: 101;
		display: flex;
		align-items: center;
	}

	.est-cart-bar .est-cart__link {
		margin-block: 0; /* no sibling text links to match on mobile */
	}

	body.est-header-overlay .site-header .est-cart-bar .est-cart__link,
	body.est-header-overlay .site-header .est-navtoggle {
		color: var(--est-bg);
	}

	body.est-header-overlay .site-header.is-stuck .est-cart-bar .est-cart__link,
	body.est-header-overlay .site-header.is-nav-open .est-cart-bar .est-cart__link,
	body.est-header-overlay .site-header.is-stuck .est-navtoggle,
	body.est-header-overlay .site-header.is-nav-open .est-navtoggle {
		color: var(--est-ink);
	}

	/* --- Overlay pages: bar goes solid while the panel is open --- */

	body.est-header-overlay .site-header.is-nav-open {
		background-color: var(--est-bg);
		border-block-end-color: var(--est-line);
	}

	body.est-header-overlay .site-header.is-nav-open .main-title a {
		color: var(--est-ink);
	}

	body.est-header-overlay .site-header.is-nav-open .custom-logo,
	body.est-header-overlay .site-header.is-nav-open .site-logo img {
		filter: none;
	}

	body.est-header-overlay .site-header.is-nav-open .est-cart__count {
		background-color: var(--est-accent, var(--est-ink));
		color: var(--est-bg);
		box-shadow: none;
	}
}

/* ========================================================================
   9b. BURGER  (functions.php §8)
   Absolute inside .inside-header, which is position:relative on mobile, so
   it sits on the same line as the logo by construction.
   ======================================================================== */
.est-navtoggle[aria-expanded='true'] {
	color: var(--est-ink);
}
.est-navtoggle {
	color: var(--est-ink);
}

.est-navtoggle:hover,
.est-navtoggle:active,
.est-navtoggle:focus {
	color: var(--est-ink);
}

.est-navtoggle:focus-visible {
	color: var(--est-ink);
	outline: 1px solid currentColor;
	outline-offset: 2px;
}
.est-navtoggle {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 30px;
	z-index: 101; /* above the panel, so it becomes the close control */
	display: none; /* mobile only — switched on immediately below */
	align-items: center;
	justify-content: center;
	width: 2.75rem; /* 44px tap target */
	padding: 0;
	border: 0;
	background: none;
	color: var(--est-ink);
	line-height: 1;
}

/* This media query must follow the rule above, not precede it. Equal
   specificity means source order decides, and a display:none declared
   later silently wins. */
@media (max-width: 47.999em) {

	.est-navtoggle {
		display: flex;
	}
}

.est-navtoggle__bars {
	position: relative;
	display: block;
	width: 1.375rem;
	height: 1px;
	background-color: currentColor;
	transition: background-color var(--est-dur-fast) var(--est-ease);
}

.est-navtoggle__bars::before,
.est-navtoggle__bars::after {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	width: 100%;
	height: 1px;
	background-color: currentColor;
	transition: transform var(--est-dur-fast) var(--est-ease);
}

.est-navtoggle__bars::before { inset-block-start: -0.375rem; }
.est-navtoggle__bars::after  { inset-block-start: 0.375rem; }

/* Open: middle bar out, outer bars cross. */
.est-navtoggle[aria-expanded='true'] .est-navtoggle__bars {
	background-color: transparent;
}

.est-navtoggle[aria-expanded='true'] .est-navtoggle__bars::before {
	transform: translateY(0.375rem) rotate(45deg);
}

.est-navtoggle[aria-expanded='true'] .est-navtoggle__bars::after {
	transform: translateY(-0.375rem) rotate(-45deg);
}

/* ========================================================================
   9c. MOBILE PANEL  (functions.php §8)
   position:fixed inset:0, so it anchors to the viewport and never to the
   header. z-index sits below the header (100) and above the announcement
   bar (90), so the bar stays on top and its burger becomes the close
   control.
   ======================================================================== */

.est-mobilenav {
	position: fixed;
	inset: 0;
	z-index: 95;
	display: none;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-block: calc(var(--est-announce-h, 2.5rem) + var(--est-bar-h) + var(--est-space-xl)) var(--est-space-2xl);
	padding-inline: 30px;
	background-color: var(--est-bg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.5rem);
	transition:
		opacity var(--est-dur) var(--est-ease),
		transform var(--est-dur) var(--est-ease),
		visibility 0s linear var(--est-dur);
}

@media (max-width: 47.999em) {

	.est-mobilenav {
		display: block;
	}
}

.est-mobilenav.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.est-mobilenav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.est-mobilenav__list > li > a {
	display: block;
	padding-block: var(--est-space-s);
	font-family: var(--est-font-body);
	font-size: var(--est-step-2);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--est-ink);
	transition: opacity var(--est-dur-fast) var(--est-ease);
}

.est-mobilenav__list > li > a:hover,
.est-mobilenav__list > li.current-menu-item > a {
	opacity: 0.55;
}

.est-mobilenav__list .sub-menu {
	margin: 0 0 var(--est-space-s);
	padding: 0;
	list-style: none;
}

.est-mobilenav__list .sub-menu a {
	display: block;
	padding-block: var(--est-space-2xs);
	font-size: var(--est-step--1);
	text-transform: none;
	letter-spacing: 0;
	text-decoration: none;
	color: var(--est-ink-muted, var(--est-ink));
}

/* Items rise in sequence once the panel is open. */
.est-mobilenav__list > li {
	opacity: 0;
	transform: translateY(0.5rem);
	transition:
		opacity var(--est-dur) var(--est-ease),
		transform var(--est-dur) var(--est-ease);
}

.est-mobilenav.is-open .est-mobilenav__list > li {
	opacity: 1;
	transform: none;
}

.est-mobilenav.is-open .est-mobilenav__list > li:nth-child(1) { transition-delay: 60ms; }
.est-mobilenav.is-open .est-mobilenav__list > li:nth-child(2) { transition-delay: 110ms; }
.est-mobilenav.is-open .est-mobilenav__list > li:nth-child(3) { transition-delay: 160ms; }
.est-mobilenav.is-open .est-mobilenav__list > li:nth-child(4) { transition-delay: 210ms; }
.est-mobilenav.is-open .est-mobilenav__list > li:nth-child(5) { transition-delay: 260ms; }
.est-mobilenav.is-open .est-mobilenav__list > li:nth-child(6) { transition-delay: 310ms; }

/* Scroll lock while the panel is open. */
body.est-nav-locked {
	overflow: hidden;
}

/* ========================================================================
   10. SMALL PHONES — 360px and down
   ======================================================================== */

@media (max-width: 22.5em) {

	.est-announce__item {
		padding-inline: var(--est-space-s);
		font-size: 0.625rem;
	}

	.est-announce__item::after {
		margin-inline-start: var(--est-space-s);
	}

	.site-header .inside-header {
		gap: var(--est-space-xs);
	}

	.est-cart__link {
		width: 2.5rem;
		height: 2.5rem;
	}

	.est-cart__icon {
		width: 1.5rem;
		height: 1.5rem;
	}
}

/* ========================================================================
   11. REDUCED MOTION
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {

	.site-header,
	body.est-header-overlay .site-header,
	.main-navigation .main-nav ul li > a::after,
	.est-cart__icon {
		transition: none;
	}

	.est-cart__link:hover .est-cart__icon,
	.est-cart__link:focus-visible .est-cart__icon {
		transform: none;
	}

	.est-mobilenav,
	.est-mobilenav__list > li {
		transition: none;
	}
}
/* iOS/Android paint a grey block on tap. Kill it, and keep the button
   flat in every interaction state. Focus stays visible for keyboards
   only, via :focus-visible below. */
.est-navtoggle {
	-webkit-tap-highlight-color: transparent;
	tap-highlight-color: transparent;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	touch-action: manipulation;
}

.est-navtoggle:hover,
.est-navtoggle:active,
.est-navtoggle:focus {
	background: none;
	box-shadow: none;
	outline: none;
}

.est-navtoggle:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 2px;
}

/* Safety net: if the cart ever renders inside the panel again, hide it. */
.est-mobilenav .est-cart {
	display: none;
}