/* 7Kits offer countdown bar. */
:root {
	--sevenkits-offer-topbar-height: 46px;
}

.sevenkits-offer-topbar-wrap {
	display: block !important;
	width: 100%;
	min-height: 46px;
	margin: 0;
	background: #b7082e;
	color: #fff;
}

.sevenkits-offer-topbar-wrap .sevenkits-offer-topbar {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	/* Stay below WordPress' logged-in toolbar and its Elementor dropdowns. */
	z-index: 99980;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 46px;
	padding: 4px 14px;
	background-color: #b7082e !important;
	background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .075) 0, rgba(255, 255, 255, .075) 2px, transparent 2px, transparent 34px) !important;
	color: #fff !important;
}

body.admin-bar .sevenkits-offer-topbar-wrap .sevenkits-offer-topbar {
	top: 32px;
}

/* WordPress uses a separate fixed stacking context for the admin toolbar.
   Keep it above every storefront layer so all admin and Elementor controls
   remain visible and clickable while previewing the live site. */
body.admin-bar #wpadminbar {
	z-index: 1000000 !important;
	opacity: 1 !important;
	visibility: visible !important;
	-webkit-transform: none !important;
	transform: none !important;
}

/* Keep Elessi's sticky header visible directly below the fixed offer bar. */
#header-content .sticky-wrapper.fixed-already {
	top: var(--sevenkits-offer-topbar-height) !important;
	z-index: 99970 !important;
	transition: transform .24s ease, box-shadow .24s ease !important;
}

body.admin-bar #header-content .sticky-wrapper.fixed-already {
	top: calc(var(--sevenkits-offer-topbar-height) + 32px) !important;
}

/* Draw the cart and its backdrop above the fixed header so the drawer's
   title, close control and first cart row can never be covered. */
body.sevenkits-premium-store #cart-sidebar.nasa-static-sidebar {
	z-index: 100200 !important;
}

body.sevenkits-premium-store:has(#cart-sidebar.nasa-active) .black-window.desk-window {
	z-index: 100100 !important;
}

/* Elessi applies the same blurred backdrop to every drawer. Keep the useful
   dark overlay, but never blur the menu, header or product content. */
body.sevenkits-premium-store .black-window.desk-window {
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

/* Desktop always keeps the main header fixed below the offer bar. */
@media (min-width: 768px) {
	#header-content .sticky-wrapper.fixed-already {
		transform: translate3d(0, 0, 0) !important;
	}
}

.sevenkits-offer-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: min(100%, 980px);
	margin: 0 auto;
}

.sevenkits-offer-topbar__message {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	color: #fff !important;
	text-decoration: none !important;
}

.sevenkits-offer-topbar__message:hover,
.sevenkits-offer-topbar__message:focus-visible {
	color: #fff !important;
}

.sevenkits-offer-topbar__message:focus-visible {
	outline: 2px solid #ffd400;
	outline-offset: 3px;
}

.sevenkits-offer-topbar__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 22px;
	padding: 3px 8px;
	background: #ffd400;
	color: #111;
	font-size: 9px;
	font-weight: 900;
	letter-spacing: .02em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.sevenkits-offer-topbar__text {
	min-width: 0;
	color: #fff;
	font-size: 15px;
	font-weight: 900;
	letter-spacing: .015em;
	line-height: 1.15;
	text-transform: uppercase;
	white-space: nowrap;
}

.sevenkits-offer-countdown {
	display: inline-flex;
	align-items: stretch;
	gap: 5px;
	flex: 0 0 auto;
}

.sevenkits-offer-countdown__unit {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 42px;
	min-height: 36px;
	padding: 2px 4px;
	border-radius: 6px;
	background: rgba(224, 31, 69, .72);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
	color: #fff;
}

.sevenkits-offer-countdown__unit strong {
	color: inherit;
	font-size: 16px;
	font-variant-numeric: tabular-nums;
	font-weight: 900;
	letter-spacing: .02em;
	line-height: 1;
}

.sevenkits-offer-countdown__unit small {
	margin-top: 2px;
	color: rgba(255, 255, 255, .78);
	font-size: 6px;
	font-weight: 800;
	letter-spacing: .08em;
	line-height: 1;
}

.sevenkits-offer-countdown.is-expired {
	opacity: .75;
}

@media (max-width: 767px) {
	:root {
		--sevenkits-offer-topbar-height: 54px;
	}

	.sevenkits-offer-topbar-wrap,
	.sevenkits-offer-topbar-wrap .sevenkits-offer-topbar {
		height: 54px;
		min-height: 54px;
	}

	.sevenkits-offer-topbar-wrap .sevenkits-offer-topbar {
		padding: 4px 6px;
	}

	.sevenkits-offer-topbar__inner {
		justify-content: space-between;
		gap: 5px;
		max-width: 100%;
	}

	.sevenkits-offer-topbar__message {
		gap: 0;
		flex: 1 1 auto;
		overflow: hidden;
	}

	.sevenkits-offer-topbar__badge {
		display: none;
	}

	.sevenkits-offer-topbar__badge--end {
		display: none;
	}

	.sevenkits-offer-topbar__text {
		display: -webkit-box;
		overflow: hidden;
		font-size: 10px;
		letter-spacing: 0;
		line-height: 1.15;
		white-space: normal;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.sevenkits-offer-countdown {
		gap: 2px;
	}

	.sevenkits-offer-countdown__unit {
		width: 31px;
		min-height: 36px;
		padding: 2px;
		border-radius: 5px;
	}

	.sevenkits-offer-countdown__unit strong {
		font-size: 14px;
	}

	.sevenkits-offer-countdown__unit small {
		font-size: 6px;
	}

	body.sevenkits-scroll-down #header-content .sticky-wrapper.fixed-already,
	body.sevenkits-scroll-up #header-content .sticky-wrapper.fixed-already,
	body.m-ovhd #header-content .sticky-wrapper.fixed-already {
		transform: translate3d(0, 0, 0) !important;
	}
}

@media (max-width: 782px) {
	body.admin-bar .sevenkits-offer-topbar-wrap .sevenkits-offer-topbar {
		top: 46px;
	}

	body.admin-bar #header-content .sticky-wrapper.fixed-already {
		top: calc(var(--sevenkits-offer-topbar-height) + 46px) !important;
	}

}

@media (max-width: 360px) {
	.sevenkits-offer-topbar__text {
		font-size: 9px;
	}

	.sevenkits-offer-countdown__unit {
		width: 29px;
	}
}