/* =========================================================
   XPREMO AE — PREMIUM MARKETPLACE HEADER V7
   Clean Desktop + Tablet + Mobile
   ========================================================= */

:root {
	--xp-red: #e31d2b;
	--xp-red-dark: #bd101b;
	--xp-red-soft: #fff1f2;
	--xp-orange: #ff7a45;

	--xp-black: #101217;
	--xp-text: #24272d;
	--xp-muted: #7b828d;

	--xp-border: #e7e9ed;
	--xp-border-soft: #f0f1f3;

	--xp-white: #ffffff;
	--xp-soft: #f6f7f9;
	--xp-soft-2: #fafbfc;

	--xp-shadow-sm: 0 5px 16px rgba(17, 24, 39, .055);
	--xp-shadow-md: 0 12px 30px rgba(17, 24, 39, .09);
	--xp-shadow-lg: 0 24px 60px rgba(17, 24, 39, .14);
}


/* =========================================================
   BASE
========================================================= */

.site-header,
#site-navigation {
	display: none !important;
}

.xpremo-header-v5,
.xpremo-header-v5 *,
.xpremo-mobile-bottom-nav,
.xpremo-mobile-bottom-nav * {
	box-sizing: border-box;
}

.xpremo-header-v5,
.xpremo-header-v5 button,
.xpremo-header-v5 input,
.xpremo-header-v5 a,
.xpremo-mobile-bottom-nav,
.xpremo-mobile-bottom-nav button,
.xpremo-mobile-bottom-nav a {
	font-family:
		"Manrope",
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif !important;
}

.xpremo-header-v5 {
	position: sticky;
	top: 0;
	z-index: 9999;

	background: #fff;
	color: var(--xp-text);

	border-top: 3px solid var(--xp-red);

	box-shadow:
		0 6px 24px rgba(17, 24, 39, .045);

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.admin-bar .xpremo-header-v5 {
	top: 32px;
}

.xpremo-shell {
	width: min(calc(100% - 48px), 1500px);
	margin-inline: auto;
}


/* =========================================================
   UTILITY BAR
========================================================= */

.xpremo-utility-bar {
	background:
		linear-gradient(
			100deg,
			#111318 0%,
			#181b20 52%,
			#21161a 100%
		);

	color: #fff;
}

.xpremo-utility-inner {
	min-height: 34px;

	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 20px;

	font-size: 11px;
}

.xpremo-utility-left,
.xpremo-utility-right {
	display: flex;
	align-items: center;
	gap: 10px;
}

.xpremo-utility-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	height: 21px;

	padding: 0 9px;

	border: 1px solid rgba(255,255,255,.13);
	border-radius: 999px;

	background: rgba(255,255,255,.08);

	font-size: 9px;
	font-weight: 700;

	letter-spacing: .075em;
}

.xpremo-utility-copy {
	color: rgba(255,255,255,.78);

	font-weight: 500;
}

.xpremo-utility-right a {
	color: rgba(255,255,255,.84);

	text-decoration: none;

	font-weight: 600;

	transition: color .18s ease;
}

.xpremo-utility-right a:hover {
	color: #fff;
}

.xpremo-utility-separator {
	color: rgba(255,255,255,.28);
}


/* =========================================================
   DESKTOP MAIN ROW
========================================================= */

.xpremo-main-row {
	background: rgba(255,255,255,.98);

	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);

	border-bottom: 1px solid var(--xp-border-soft);
}

.xpremo-main-inner {
	min-height: 82px;

	display: flex;
	align-items: center;

	gap: 15px;
}


/* =========================================================
   LOGO
========================================================= */

.xpremo-brand {
	flex: 0 0 auto;

	display: inline-flex;
	align-items: center;

	text-decoration: none;

	transition:
		transform .18s ease,
		opacity .18s ease;
}

.xpremo-brand:hover {
	transform: translateY(-1px);
	opacity: .94;
}

.xpremo-custom-logo {
	display: block;

	width: auto;
	height: auto;

	max-width: 165px;
	max-height: 50px;

	object-fit: contain;
}

.xpremo-brand-fallback {
	font-size: 31px;
	line-height: 1;

	font-weight: 800;

	letter-spacing: -2px;

	color: var(--xp-black);
}

.xpremo-brand-fallback span {
	color: var(--xp-red);
}


/* =========================================================
   DELIVERY LOCATION
========================================================= */

.xpremo-delivery {
	flex: 0 0 auto;

	display: flex;
	align-items: center;

	gap: 8px;

	padding: 7px 8px;

	border: 0;
	border-radius: 12px;

	background: transparent;

	color: var(--xp-black);

	cursor: pointer;

	transition:
		background .18s ease,
		transform .18s ease;
}

.xpremo-delivery:hover {
	background: var(--xp-soft);
	transform: translateY(-1px);
}

.xpremo-delivery-icon {
	width: 34px;
	height: 34px;

	display: grid;
	place-items: center;

	flex: 0 0 auto;

	border-radius: 11px;

	background:
		linear-gradient(
			145deg,
			#fff4f5,
			#ffecef
		);

	color: var(--xp-red);
}

.xpremo-delivery-icon svg {
	width: 19px;
	height: 19px;

	fill: none;
	stroke: currentColor;

	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.xpremo-delivery-copy {
	display: flex;
	flex-direction: column;

	align-items: flex-start;

	line-height: 1.05;
}

.xpremo-delivery-copy small {
	margin-bottom: 2px;

	font-size: 9px;
	font-weight: 500;

	color: var(--xp-muted);
}

.xpremo-delivery-copy strong {
	font-size: 12px;
	font-weight: 700;

	color: var(--xp-black);
}


/* =========================================================
   DESKTOP SEARCH
========================================================= */

.xpremo-search {
	flex: 1 1 auto;

	min-width: 260px;
}

.xpremo-search form {
	position: relative;

	height: 54px;

	display: flex;
	align-items: center;

	padding: 4px;

	border: 1px solid #e1e4e8;
	border-radius: 16px;

	background: #fff;

	box-shadow:
		0 2px 10px rgba(17,24,39,.03);

	transition:
		border-color .2s ease,
		box-shadow .2s ease;
}

.xpremo-search form:hover {
	border-color: #d5d9df;

	box-shadow:
		0 5px 17px rgba(17,24,39,.055);
}

.xpremo-search form:focus-within {
	border-color: rgba(227,29,43,.40);

	box-shadow:
		0 0 0 4px rgba(227,29,43,.06),
		0 8px 22px rgba(17,24,39,.065);
}

.xpremo-search-icon {
	width: 43px;
	height: 43px;

	display: grid;
	place-items: center;

	flex: 0 0 auto;

	color: #3c4148;
}

.xpremo-search-icon svg {
	width: 20px;
	height: 20px;

	fill: none;
	stroke: currentColor;

	stroke-width: 1.85;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.xpremo-search input[type="search"] {
	flex: 1;

	min-width: 0;
	height: 100%;

	padding: 0 12px 0 0 !important;

	border: 0 !important;

	background: transparent !important;

	box-shadow: none !important;
	outline: none !important;

	color: var(--xp-black);

	font-size: 13.5px;
	font-weight: 500;
}

.xpremo-search input::placeholder,
.xpremo-mobile-search-row input::placeholder {
	color: #9097a2;

	font-weight: 500;
}

.xpremo-search-submit {
	height: 44px;

	padding: 0 20px;

	border: 0;
	border-radius: 12px;

	background:
		linear-gradient(
			135deg,
			var(--xp-red),
			#f13845
		);

	color: #fff;

	font-size: 12px;
	font-weight: 700;

	cursor: pointer;

	box-shadow:
		0 5px 13px rgba(227,29,43,.16);

	transition:
		transform .18s ease,
		box-shadow .18s ease;
}

.xpremo-search-submit:hover {
	transform: translateY(-1px);

	box-shadow:
		0 8px 18px rgba(227,29,43,.21);
}


/* =========================================================
   DESKTOP ACTIONS
========================================================= */

.xpremo-actions {
	flex: 0 0 auto;

	display: flex;
	align-items: center;

	gap: 3px;
}

.xpremo-action-card,
.xpremo-icon-action {
	color: var(--xp-black);

	text-decoration: none;

	transition:
		background .18s ease,
		color .18s ease,
		transform .18s ease;
}

.xpremo-action-card {
	min-height: 48px;

	display: flex;
	align-items: center;

	gap: 8px;

	padding: 5px 9px;

	border-radius: 13px;
}

.xpremo-action-card:hover {
	background: var(--xp-soft);

	transform: translateY(-1px);
}

.xpremo-action-icon {
	width: 36px;
	height: 36px;

	display: grid;
	place-items: center;

	border-radius: 11px;

	background: #f5f6f8;
}

.xpremo-action-icon svg {
	width: 20px;
	height: 20px;

	fill: none;
	stroke: currentColor;

	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.xpremo-action-copy {
	display: flex;
	flex-direction: column;

	line-height: 1.08;
}

.xpremo-action-copy small {
	margin-bottom: 2px;

	color: var(--xp-muted);

	font-size: 9px;
	font-weight: 500;
}

.xpremo-action-copy strong {
	color: var(--xp-black);

	font-size: 11px;
	font-weight: 700;
}

.xpremo-icon-action {
	position: relative;

	min-width: 50px;
	min-height: 48px;

	display: flex;
	flex-direction: column;

	align-items: center;
	justify-content: center;

	gap: 3px;

	padding: 5px 7px;

	border-radius: 12px;
}

.xpremo-icon-action:hover {
	background: var(--xp-soft);

	color: var(--xp-red);

	transform: translateY(-1px);
}

.xpremo-icon-action svg {
	width: 21px;
	height: 21px;

	fill: none;
	stroke: currentColor;

	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.xpremo-icon-action > span:last-child {
	font-size: 9px;
	font-weight: 600;
}

.xpremo-cart-icon-wrap {
	position: relative;

	display: inline-flex;
}

.xpremo-cart-count {
	position: absolute;

	top: -8px;
	right: -10px;

	min-width: 18px;
	height: 18px;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 0 4px;

	border: 2px solid #fff;
	border-radius: 999px;

	background:
		linear-gradient(
			135deg,
			var(--xp-red),
			#ff5965
		);

	color: #fff;

	font-size: 8px;
	font-weight: 800;

	line-height: 1;

	box-shadow:
		0 3px 8px rgba(227,29,43,.25);
}


/* =========================================================
   MOBILE ELEMENTS DEFAULT HIDDEN
========================================================= */

.xpremo-mobile-top-actions,
.xpremo-mobile-search-row,
.xpremo-mobile-drawer,
.xpremo-mobile-bottom-nav {
	display: none;
}


/* =========================================================
   DESKTOP CATEGORY BAR
========================================================= */

.xpremo-category-row {
	background: #fff;

	border-bottom: 1px solid var(--xp-border);
}

.xpremo-category-inner {
	min-height: 54px;

	display: flex;
	align-items: center;

	gap: 12px;
}

.xpremo-categories-trigger {
	flex: 0 0 auto;

	height: 42px;

	padding: 0 16px;

	display: inline-flex;
	align-items: center;

	gap: 9px;

	border: 0;
	border-radius: 12px;

	background:
		linear-gradient(
			135deg,
			#15181e,
			#22262e
		);

	color: #fff;

	font-size: 11px;
	font-weight: 700;

	cursor: pointer;

	box-shadow:
		0 6px 15px rgba(17,24,39,.11);

	transition:
		transform .18s ease,
		background .18s ease;
}

.xpremo-categories-trigger:hover,
.xpremo-categories-trigger.is-open {
	background:
		linear-gradient(
			135deg,
			var(--xp-red),
			#f23c48
		);

	transform: translateY(-1px);
}

.xpremo-categories-trigger > svg {
	width: 15px;
	height: 15px;

	fill: none;
	stroke: currentColor;

	stroke-width: 2;

	transition: transform .2s ease;
}

.xpremo-categories-trigger.is-open > svg {
	transform: rotate(180deg);
}

.xpremo-categories-icon {
	width: 16px;
	height: 16px;

	display: grid;

	grid-template-columns: 1fr 1fr;

	gap: 3px;
}

.xpremo-categories-icon i {
	display: block;

	border: 1.5px solid currentColor;

	border-radius: 2px;
}

.xpremo-category-links {
	flex: 1;

	display: flex;
	align-items: center;

	gap: 1px;

	overflow-x: auto;

	scrollbar-width: none;

	-webkit-overflow-scrolling: touch;
}

.xpremo-category-links::-webkit-scrollbar {
	display: none;
}

.xpremo-category-links a {
	flex: 0 0 auto;

	height: 40px;

	display: inline-flex;
	align-items: center;

	padding: 0 12px;

	border-radius: 10px;

	color: #2c3036;

	text-decoration: none;

	font-size: 11px;
	font-weight: 600;

	white-space: nowrap;

	transition:
		background .18s ease,
		color .18s ease,
		transform .18s ease;
}

.xpremo-category-links a:hover {
	background: var(--xp-soft);

	color: var(--xp-red);

	transform: translateY(-1px);
}

.xpremo-category-links .xpremo-deals-link {
	background: var(--xp-red-soft);

	color: var(--xp-red);

	font-weight: 700;
}


/* =========================================================
   DESKTOP CATEGORY PANEL
========================================================= */

.xpremo-category-panel {
	position: absolute;

	left: 0;
	right: 0;
	top: 100%;

	z-index: 9997;

	background: #fff;

	border-bottom: 1px solid var(--xp-border);

	box-shadow: var(--xp-shadow-lg);

	opacity: 0;
	visibility: hidden;

	transform: translateY(-8px);

	pointer-events: none;

	transition:
		opacity .2s ease,
		transform .2s ease,
		visibility .2s ease;
}

.xpremo-category-panel.is-open {
	opacity: 1;
	visibility: visible;

	transform: translateY(0);

	pointer-events: auto;
}

.xpremo-category-panel-inner {
	min-height: 245px;

	display: grid;

	grid-template-columns: 1fr 1fr 1.1fr;

	gap: 36px;

	padding-top: 28px;
	padding-bottom: 28px;
}

.xpremo-category-panel-col {
	display: flex;
	flex-direction: column;

	gap: 5px;
}

.xpremo-panel-label {
	margin-bottom: 5px;

	color: var(--xp-muted);

	font-size: 10px;
	font-weight: 700;

	letter-spacing: .07em;

	text-transform: uppercase;
}

.xpremo-category-panel-col a {
	padding: 8px 0;

	color: var(--xp-text);

	text-decoration: none;

	font-size: 13px;
	font-weight: 600;

	transition:
		color .18s ease,
		transform .18s ease;
}

.xpremo-category-panel-col a:hover {
	color: var(--xp-red);

	transform: translateX(3px);
}

.xpremo-category-panel-promo {
	min-height: 185px;

	padding: 26px;

	display: flex;
	flex-direction: column;

	align-items: flex-start;
	justify-content: center;

	border-radius: 20px;

	background:
		radial-gradient(
			circle at 86% 18%,
			rgba(255,255,255,.28),
			transparent 26%
		),
		linear-gradient(
			135deg,
			var(--xp-red),
			#f84e58 56%,
			var(--xp-orange)
		);

	color: #fff;

	box-shadow:
		0 15px 34px rgba(227,29,43,.17);
}

.xpremo-category-panel-promo span {
	font-size: 11px;
	font-weight: 600;

	opacity: .86;
}

.xpremo-category-panel-promo strong {
	max-width: 270px;

	margin-top: 6px;

	font-size: 26px;
	font-weight: 700;

	line-height: 1.08;
}

.xpremo-category-panel-promo a {
	margin-top: 17px;

	padding: 10px 15px;

	border-radius: 10px;

	background: #fff;

	color: var(--xp-red);

	text-decoration: none;

	font-size: 11px;
	font-weight: 700;
}


/* =========================================================
   SCROLLED DESKTOP HEADER
========================================================= */

.xpremo-header-v5.is-scrolled {
	box-shadow:
		0 12px 32px rgba(17,24,39,.09);
}

@media (min-width: 821px) {

	.xpremo-header-v5.is-scrolled .xpremo-utility-bar {
		display: none;
	}

	.xpremo-header-v5.is-scrolled .xpremo-main-inner {
		min-height: 70px;
	}
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1180px) and (min-width: 821px) {

	.xpremo-shell {
		width: min(calc(100% - 32px), 1500px);
	}

	.xpremo-delivery {
		display: none;
	}

	.xpremo-action-copy {
		display: none;
	}

	.xpremo-action-card {
		min-width: 44px;

		padding: 4px;
	}

	.xpremo-action-icon {
		background: transparent;
	}

	.xpremo-search-submit {
		padding-inline: 15px;
	}

	.xpremo-category-links a {
		padding-inline: 10px;

		font-size: 10.5px;
	}

	.xpremo-category-panel-inner {
		gap: 24px;
	}
}


/* =========================================================
   MOBILE / SMALL TABLET
   ========================================================= */

@media (max-width: 820px) {

	body {
		padding-bottom:
			calc(68px + env(safe-area-inset-bottom));
	}

	.xpremo-header-v5 {
		border-top-width: 2px;
	}

	.admin-bar .xpremo-header-v5 {
		top: 46px;
	}

	.xpremo-shell {
		width: calc(100% - 24px);
	}


	/* Hide desktop pieces */

	.xpremo-utility-bar,
	.xpremo-delivery,
	.xpremo-search,
	.xpremo-actions,
	.xpremo-category-row,
	.xpremo-category-panel {
		display: none !important;
	}


	/* =====================================================
	   MOBILE TOP BAR
	   Hamburger left / logo center / account + cart right
	   ===================================================== */

	.xpremo-main-row {
		background: #fff;

		border-bottom: 0;
	}

	.xpremo-main-inner {
		position: relative;

		min-height: 68px;

		padding: 10px 0;

		display: flex;
		align-items: center;

		gap: 0;
	}


	/* Center logo perfectly */

	.xpremo-brand {
		position: absolute;

		left: 50%;
		top: 50%;

		transform: translate(-50%, -50%);

		z-index: 4;

		display: flex;
		align-items: center;
		justify-content: center;

		width: auto;

		max-width: 142px;

		margin: 0 !important;
	}

	.xpremo-brand:hover {
		transform: translate(-50%, -50%);
	}

	.xpremo-custom-logo {
		display: block;

		width: auto !important;
		height: auto !important;

		max-width: 138px !important;
		max-height: 40px !important;

		object-fit: contain;
	}

	.xpremo-brand-fallback {
		font-size: 25px;
	}


	/* Full mobile actions row */

	.xpremo-mobile-top-actions {
		width: 100%;

		display: flex !important;
		align-items: center;

		position: relative;

		z-index: 5;

		gap: 3px;
	}


	/* Hamburger LEFT */

	.xpremo-mobile-menu-toggle {
		order: 1;

		margin-right: auto !important;

		width: 40px;
		height: 40px;

		padding: 0;

		display: flex !important;

		flex-direction: column;

		align-items: center;
		justify-content: center;

		gap: 4px;

		border: 0;
		border-radius: 11px;

		background: transparent;

		color: var(--xp-black);

		cursor: pointer;
	}

	.xpremo-mobile-menu-toggle > span {
		width: 19px;
		height: 2px;

		border-radius: 999px;

		background: currentColor;
	}


	/* Account + cart RIGHT */

	.xpremo-mobile-icon {
		order: 2;

		position: relative;

		width: 40px;
		height: 40px;

		display: grid;
		place-items: center;

		padding: 0;

		border-radius: 11px;

		background: transparent;

		color: var(--xp-black);

		text-decoration: none;
	}

	.xpremo-mobile-top-actions .xpremo-mobile-icon:first-of-type {
		margin-left: auto;
	}

	.xpremo-mobile-icon svg {
		width: 22px;
		height: 22px;

		fill: none;
		stroke: currentColor;

		stroke-width: 1.8;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.xpremo-mobile-menu-toggle:hover,
	.xpremo-mobile-icon:hover {
		background: var(--xp-soft);

		color: var(--xp-red);
	}


	/* Mobile cart number */

	.xpremo-mobile-cart > span {
		position: absolute;

		top: 0;
		right: -1px;

		min-width: 17px;
		height: 17px;

		display: grid;
		place-items: center;

		padding: 0 3px;

		border: 2px solid #fff;
		border-radius: 999px;

		background: var(--xp-red);

		color: #fff;

		font-size: 7px;
		font-weight: 800;
	}


	/* =====================================================
	   MOBILE SEARCH
	   ===================================================== */

	.xpremo-mobile-search-row {
		display: block !important;

		background: #fff;

		padding:
			2px
			0
			12px;

		border-bottom:
			1px solid var(--xp-border-soft);
	}

	.xpremo-mobile-search-row .xpremo-shell {
		width: calc(100% - 24px);
	}

	.xpremo-mobile-search-row form {
		width: 100%;

		height: 46px;

		display: flex;
		align-items: center;

		gap: 10px;

		padding: 0 14px;

		border: 1px solid #e0e4e9;
		border-radius: 14px;

		background:
			linear-gradient(
				180deg,
				#f8f9fb,
				#f5f6f8
			);

		box-shadow:
			inset 0 1px 0 rgba(255,255,255,.65);

		transition:
			border-color .18s ease,
			box-shadow .18s ease,
			background .18s ease;
	}

	.xpremo-mobile-search-row form:focus-within {
		background: #fff;

		border-color:
			rgba(227,29,43,.35);

		box-shadow:
			0 0 0 3px rgba(227,29,43,.05);
	}

	.xpremo-mobile-search-row svg {
		width: 19px;
		height: 19px;

		flex: 0 0 auto;

		fill: none;
		stroke: #666e79;

		stroke-width: 1.8;
	}

	.xpremo-mobile-search-row input[type="search"] {
		flex: 1;

		width: 100%;
		height: 100%;

		min-width: 0;

		padding: 0 !important;

		border: 0 !important;

		background: transparent !important;

		box-shadow: none !important;
		outline: none !important;

		color: var(--xp-black);

		font-size: 13px;
		font-weight: 500;
	}

	.xpremo-mobile-search-row input::placeholder {
		color: #9198a3;

		font-weight: 500;
	}


	/* =====================================================
	   MOBILE DRAWER
	   ===================================================== */

	.xpremo-mobile-drawer {
		position: fixed;

		inset: 0;

		z-index: 10050;

		display: block;

		visibility: hidden;

		pointer-events: none;
	}

	.xpremo-mobile-drawer.is-open {
		visibility: visible;

		pointer-events: auto;
	}

	.xpremo-mobile-drawer-overlay {
		position: absolute;

		inset: 0;

		background:
			rgba(12,14,18,.48);

		backdrop-filter: blur(2px);

		opacity: 0;

		transition: opacity .25s ease;
	}

	.xpremo-mobile-drawer.is-open
	.xpremo-mobile-drawer-overlay {
		opacity: 1;
	}

	.xpremo-mobile-drawer-panel {
		position: absolute;

		top: 0;
		bottom: 0;
		left: 0;

		width: min(88vw, 360px);

		padding-bottom: 25px;

		background: #fff;

		transform: translateX(-102%);

		transition:
			transform .28s
			cubic-bezier(.2,.8,.2,1);

		box-shadow:
			20px 0 50px rgba(17,24,39,.17);

		overflow-y: auto;
	}

	.xpremo-mobile-drawer.is-open
	.xpremo-mobile-drawer-panel {
		transform: translateX(0);
	}

	.xpremo-mobile-drawer-head {
		min-height: 62px;

		padding: 0 17px;

		display: flex;
		align-items: center;
		justify-content: space-between;

		border-bottom:
			1px solid var(--xp-border);
	}

	.xpremo-mobile-drawer-head strong {
		font-size: 17px;
		font-weight: 700;
	}

	.xpremo-mobile-drawer-close {
		width: 37px;
		height: 37px;

		border: 0;
		border-radius: 10px;

		background: var(--xp-soft);

		font-size: 26px;

		line-height: 1;

		cursor: pointer;
	}

	.xpremo-mobile-drawer-account {
		padding: 15px;
	}

	.xpremo-mobile-drawer-account > a {
		display: flex;
		align-items: center;

		gap: 11px;

		padding: 13px;

		border-radius: 15px;

		background:
			linear-gradient(
				135deg,
				#fff3f4,
				#fff9f8
			);

		color: var(--xp-black);

		text-decoration: none;
	}

	.xpremo-drawer-avatar {
		width: 42px;
		height: 42px;

		display: grid;
		place-items: center;

		flex: 0 0 auto;

		border-radius: 13px;

		background:
			linear-gradient(
				135deg,
				var(--xp-red),
				#f04450
			);

		color: #fff;
	}

	.xpremo-drawer-avatar svg {
		width: 21px;
		height: 21px;

		fill: none;
		stroke: currentColor;

		stroke-width: 1.8;
	}

	.xpremo-mobile-drawer-account small,
	.xpremo-mobile-drawer-account strong {
		display: block;
	}

	.xpremo-mobile-drawer-account small {
		color: var(--xp-muted);

		font-size: 9px;
		font-weight: 500;
	}

	.xpremo-mobile-drawer-account strong {
		margin-top: 2px;

		font-size: 12px;
		font-weight: 700;
	}

	.xpremo-mobile-drawer-nav {
		padding: 0 16px;

		display: flex;
		flex-direction: column;
	}

	.xpremo-mobile-drawer-nav a {
		padding: 13px 4px;

		border-bottom:
			1px solid #f1f2f4;

		color: var(--xp-text);

		text-decoration: none;

		font-size: 13px;
		font-weight: 600;
	}

	.xpremo-mobile-drawer-nav a:hover {
		color: var(--xp-red);
	}

	.xpremo-mobile-drawer-nav
	.xpremo-mobile-deals {
		color: var(--xp-red);

		font-weight: 700;
	}


	/* =====================================================
	   BOTTOM MOBILE NAVIGATION
	   ===================================================== */

	.xpremo-mobile-bottom-nav {
		position: fixed;

		left: 0;
		right: 0;
		bottom: 0;

		z-index: 9998;

		min-height: 64px;

		padding:
			5px 6px
			max(5px, env(safe-area-inset-bottom));

		display: grid !important;

		grid-template-columns:
			repeat(5,1fr);

		background:
			rgba(255,255,255,.97);

		backdrop-filter: blur(17px);
		-webkit-backdrop-filter: blur(17px);

		border-top:
			1px solid var(--xp-border);

		box-shadow:
			0 -8px 25px rgba(17,24,39,.07);
	}

	.xpremo-mobile-bottom-nav > a,
	.xpremo-mobile-bottom-nav > button {
		position: relative;

		min-width: 0;

		display: flex;
		flex-direction: column;

		align-items: center;
		justify-content: center;

		gap: 3px;

		padding: 3px;

		border: 0;

		background: transparent;

		color: #626973;

		text-decoration: none;

		cursor: pointer;
	}

	.xpremo-mobile-bottom-nav svg {
		width: 20px;
		height: 20px;

		fill: none;
		stroke: currentColor;

		stroke-width: 1.75;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.xpremo-mobile-bottom-nav
	> a > span:last-child,

	.xpremo-mobile-bottom-nav
	> button > span:last-child {
		font-size: 8px;
		font-weight: 600;
	}

	.xpremo-mobile-bottom-nav
	> a:hover,

	.xpremo-mobile-bottom-nav
	> button:hover {
		color: var(--xp-red);
	}

	.xpremo-bottom-cart-icon {
		position: relative;

		display: inline-flex;
	}

	.xpremo-bottom-cart-icon
	.xpremo-cart-count {
		top: -8px;
		right: -10px;
	}
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

	.xpremo-shell {
		width: calc(100% - 20px);
	}

	.xpremo-main-inner {
		min-height: 64px;

		padding: 8px 0;
	}

	.xpremo-brand {
		max-width: 118px;
	}

	.xpremo-custom-logo {
		max-width: 114px !important;
		max-height: 34px !important;
	}

	.xpremo-brand-fallback {
		font-size: 22px;
	}

	.xpremo-mobile-menu-toggle,
	.xpremo-mobile-icon {
		width: 36px;
		height: 36px;
	}

	.xpremo-mobile-menu-toggle > span {
		width: 18px;
	}

	.xpremo-mobile-icon svg {
		width: 21px;
		height: 21px;
	}

	.xpremo-mobile-search-row {
		padding-bottom: 10px;
	}

	.xpremo-mobile-search-row .xpremo-shell {
		width: calc(100% - 20px);
	}

	.xpremo-mobile-search-row form {
		height: 43px;

		border-radius: 13px;
	}

	.xpremo-mobile-search-row input[type="search"] {
		font-size: 12px;
	}
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 350px) {

	.xpremo-brand {
		max-width: 104px;
	}

	.xpremo-custom-logo {
		max-width: 100px !important;
		max-height: 31px !important;
	}

	.xpremo-mobile-menu-toggle,
	.xpremo-mobile-icon {
		width: 33px;
		height: 33px;
	}

	.xpremo-mobile-bottom-nav
	> a > span:last-child,

	.xpremo-mobile-bottom-nav
	> button > span:last-child {
		font-size: 7px;
	}
}


/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
========================================================= */

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

	.xpremo-header-v5 *,
	.xpremo-mobile-bottom-nav * {
		transition: none !important;
		animation: none !important;

		scroll-behavior: auto !important;
	}
}