/*
|--------------------------------------------------------------------------
| BARGCHI — 3-HOUR SHIPPING BAR V2
|--------------------------------------------------------------------------
| Goal:
| - visually match the approved mockup
| - warmer + cleaner + more readable
| - no unnecessary pills/cards
| - timer is slightly shifted to the LEFT on desktop
|--------------------------------------------------------------------------
*/

.bargchi-three-hour-bar {
	--b3h-navy: #0f2b5b;
	--b3h-orange: #ef6d12;
	--b3h-muted: #5f7188;
	--b3h-border: #f4d4bd;
	--b3h-tint: #fff8f2;
	--b3h-height: 38px;

	position: relative;
	z-index: 1200;

	width: 100%;
	min-height: var(--b3h-height);

	margin: 0;
	padding: 0;

	direction: rtl;

	background:
		linear-gradient(
			90deg,
			#fffdfb 0%,
			var(--b3h-tint) 50%,
			#fffdfb 100%
		);

	border-top: 1px solid #fff2e8;
	border-bottom: 1px solid var(--b3h-border);

	box-shadow: none;
}


.bargchi-three-hour-bar *,
.bargchi-three-hour-bar *::before,
.bargchi-three-hour-bar *::after {
	box-sizing: border-box;
}


.bargchi-three-hour-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;

	width: min(calc(100% - 72px), 1200px);
	min-height: var(--b3h-height);

	margin-inline: auto;
	padding: 0;

	gap: 24px;
}


/* ==========================================================================
   RIGHT MESSAGE
   ========================================================================== */

.bargchi-three-hour-bar__message {
	display: inline-flex;
	align-items: center;

	min-width: 0;

	gap: 9px;

	color: var(--b3h-navy);

	line-height: 1;
	white-space: nowrap;
}


.bargchi-three-hour-bar__truck {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 22px;

	width: 22px;
	height: 22px;

	color: var(--b3h-orange);
}


.bargchi-three-hour-bar__truck svg {
	display: block;

	width: 22px;
	height: 22px;

	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}


.bargchi-three-hour-bar__title {
	color: var(--b3h-navy);

	font-size: 13px;
	font-weight: 850;
	line-height: 1;

	white-space: nowrap;
}


.bargchi-three-hour-bar__divider {
	flex: 0 0 1px;

	width: 1px;
	height: 17px;

	margin-inline: 3px 2px;

	background: rgba(239, 109, 18, .55);
}


.bargchi-three-hour-bar__copy {
	min-width: 0;
	overflow: hidden;

	color: #435a76;

	font-size: 12px;
	font-weight: 650;
	line-height: 1;

	text-overflow: ellipsis;
	white-space: nowrap;
}


/* ==========================================================================
   LEFT TIMER
   ========================================================================== */

.bargchi-three-hour-bar__timer-area {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;

	flex: 0 0 auto;

	gap: 10px;

	direction: ltr;

	/*
	 * The approved mockup keeps the timer away from the extreme page edge.
	 */
	min-width: 250px;
}


.bargchi-three-hour-bar__timer-area[hidden] {
	display: none !important;
}


.bargchi-three-hour-bar__timer-label {
	color: var(--b3h-navy);

	font-size: 11px;
	font-weight: 700;
	line-height: 1;

	white-space: nowrap;

	direction: rtl;
}


.bargchi-three-hour-bar__countdown {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 5px;

	direction: ltr;
	font-variant-numeric: tabular-nums;
}


.bargchi-three-hour-bar__unit {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 40px;
	height: 26px;

	padding-top: 1px;

	color: var(--b3h-orange);
	background: rgba(239, 109, 18, .075);

	border: 1px solid rgba(239, 109, 18, .13);
	border-radius: 6px;

	font-size: 13px;
	font-weight: 850;
	line-height: 1;

	font-variant-numeric: tabular-nums;

	box-shadow: none;
}


.bargchi-three-hour-bar__colon {
	color: var(--b3h-orange);

	font-size: 13px;
	font-weight: 800;
	line-height: 1;

	opacity: .75;
}


/*
 * The timer in the mockup sits slightly farther LEFT than the natural
 * space-between position.
 */
@media (min-width: 1025px) {
	.bargchi-three-hour-bar__timer-area {
		transform: translateX(-14px);
	}
}


/* ==========================================================================
   DESKTOP FINISH
   ========================================================================== */

@media (min-width: 1200px) {

	.bargchi-three-hour-bar__inner {
		width: min(calc(100% - 88px), 1210px);
	}

	.bargchi-three-hour-bar__copy {
		max-width: 520px;
	}
}


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

@media (min-width: 768px) and (max-width: 1024px) {

	.bargchi-three-hour-bar {
		--b3h-height: 36px;

		position: fixed;
		top: 0;
		right: 0;
		left: 0;

		z-index: 1250;
	}


	.bargchi-three-hour-bar__inner {
		width: calc(100% - 32px);
		min-height: 36px;

		gap: 14px;
	}


	.bargchi-three-hour-bar__truck {
		flex-basis: 19px;

		width: 19px;
		height: 19px;
	}


	.bargchi-three-hour-bar__truck svg {
		width: 19px;
		height: 19px;
	}


	.bargchi-three-hour-bar__title {
		font-size: 12px;
	}


	.bargchi-three-hour-bar__copy {
		max-width: 330px;

		font-size: 11px;
	}


	.bargchi-three-hour-bar__timer-area {
		min-width: 220px;

		gap: 8px;

		transform: none;
	}


	.bargchi-three-hour-bar__timer-label {
		font-size: 10px;
	}


	.bargchi-three-hour-bar__unit {
		width: 34px;
		height: 24px;

		font-size: 11px;
	}


	html body .bargchi-header-main .bargchi-header-main__row,
	html body .bargchi-header-main.is-scroll-down .bargchi-header-main__row,
	html body .bargchi-header-main.is-scroll-up .bargchi-header-main__row {
		top: 36px !important;
	}


	html body .bargchi-header-main,
	html body .bargchi-header-main.is-scroll-down,
	html body .bargchi-header-main.is-scroll-up {
		padding-top:
			calc(
				var(--bargchi-main-row-height, 105px)
				+
				36px
			) !important;
	}


	body.admin-bar .bargchi-three-hour-bar {
		top: 32px;
	}


	body.admin-bar .bargchi-header-main .bargchi-header-main__row,
	body.admin-bar .bargchi-header-main.is-scroll-down .bargchi-header-main__row,
	body.admin-bar .bargchi-header-main.is-scroll-up .bargchi-header-main__row {
		top: 68px !important;
	}
}


/* ==========================================================================
   MOBILE — MATCH THE MOCKUP, BUT KEEP IT MINIMAL
   ========================================================================== */

@media (max-width: 767px) {

	.bargchi-three-hour-bar {
		--b3h-height: 40px;

		position: fixed;
		top: 0;
		right: 0;
		left: 0;

		z-index: 1250;
	}


	.bargchi-three-hour-bar__inner {
		width: calc(100% - 18px);
		min-height: 40px;

		gap: 8px;
	}


	.bargchi-three-hour-bar__message {
		flex: 1 1 auto;

		gap: 6px;
	}


	.bargchi-three-hour-bar__truck {
		flex-basis: 19px;

		width: 19px;
		height: 19px;
	}


	.bargchi-three-hour-bar__truck svg {
		width: 19px;
		height: 19px;

		stroke-width: 1.8;
	}


	.bargchi-three-hour-bar__title {
		font-size: 11.5px;
		font-weight: 850;
	}


	.bargchi-three-hour-bar__divider {
		height: 15px;

		margin-inline: 1px;
	}


	.bargchi-three-hour-bar__copy {
		max-width: 138px;

		font-size: 9.5px;
		font-weight: 650;
	}


	/*
	 * When timer is ACTIVE there is not enough room for the long description.
	 * Keep the right side visually clean like the mobile mockup.
	 */
	.bargchi-three-hour-bar[data-state="active"]
	.bargchi-three-hour-bar__copy {
		max-width: 86px;
	}


	.bargchi-three-hour-bar__timer-area {
		flex: 0 0 auto;

		min-width: 0;

		gap: 5px;

		transform: none;
	}


	.bargchi-three-hour-bar__timer-label {
		display: none;
	}


	.bargchi-three-hour-bar__countdown {
		gap: 2px;
	}


	.bargchi-three-hour-bar__unit {
		width: 27px;
		height: 23px;

		border-radius: 5px;

		font-size: 10px;
	}


	.bargchi-three-hour-bar__colon {
		font-size: 10px;
	}


	/*
	 * Existing Bargchi mobile header is fixed.
	 * Put it immediately under the new 40px bar.
	 */
	html body .bargchi-header-main .bargchi-header-main__row,
	html body .bargchi-header-main.is-scroll-down .bargchi-header-main__row,
	html body .bargchi-header-main.is-scroll-up .bargchi-header-main__row,
	html body.admin-bar .bargchi-header-main .bargchi-header-main__row,
	html body.admin-bar .bargchi-header-main.is-scroll-down .bargchi-header-main__row,
	html body.admin-bar .bargchi-header-main.is-scroll-up .bargchi-header-main__row {
		top: 40px !important;
	}


	html body .bargchi-header-main,
	html body .bargchi-header-main.is-scroll-down,
	html body .bargchi-header-main.is-scroll-up {
		padding-top:
			calc(
				var(--bargchi-main-row-height, 105px)
				+
				40px
			) !important;
	}


	body.admin-bar .bargchi-three-hour-bar {
		top: 46px;
	}


	body.admin-bar .bargchi-header-main .bargchi-header-main__row,
	body.admin-bar .bargchi-header-main.is-scroll-down .bargchi-header-main__row,
	body.admin-bar .bargchi-header-main.is-scroll-up .bargchi-header-main__row {
		top: 86px !important;
	}
}


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

@media (max-width: 390px) {

	.bargchi-three-hour-bar__inner {
		width: calc(100% - 12px);
	}


	.bargchi-three-hour-bar__title {
		font-size: 10.5px;
	}


	.bargchi-three-hour-bar__divider {
		display: none;
	}


	.bargchi-three-hour-bar__copy {
		max-width: 96px;

		font-size: 8.8px;
	}


	.bargchi-three-hour-bar[data-state="active"]
	.bargchi-three-hour-bar__copy {
		display: none;
	}


	.bargchi-three-hour-bar__unit {
		width: 26px;
		height: 22px;

		font-size: 9.5px;
	}
}


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

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

	.bargchi-three-hour-bar *,
	.bargchi-three-hour-bar *::before,
	.bargchi-three-hour-bar *::after {
		transition: none !important;
		animation: none !important;
	}
}


/* ==========================================================================
   V2.1 TEST — exact timer/replacement position
   ========================================================================== */

.bargchi-three-hour-bar__timer-area {
	position: relative;

	display: flex !important;
	align-items: center;
	justify-content: flex-start;

	width: 286px;
	min-width: 286px;

	height: 30px;

	padding: 0;

	direction: ltr;
}

.bargchi-three-hour-bar__timer-label {
	display: none !important;
}

.bargchi-three-hour-bar__countdown,
.bargchi-three-hour-bar__replacement-message {
	position: absolute;
	top: 50%;
	left: 0;

	transform: translateY(-50%);
}

.bargchi-three-hour-bar__replacement-message {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;

	width: 100%;

	color: var(--b3h-navy);

	font-size: 12px;
	font-weight: 800;
	line-height: 1;

	white-space: nowrap;

	direction: rtl;
}

.bargchi-three-hour-bar__replacement-message[hidden],
.bargchi-three-hour-bar__countdown[hidden] {
	display: none !important;
}

@media (min-width: 1025px) {
	.bargchi-three-hour-bar__timer-area {
		/* a little farther left, as requested */
		transform: translateX(-24px);
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.bargchi-three-hour-bar__timer-area {
		width: 235px;
		min-width: 235px;
	}

	.bargchi-three-hour-bar__replacement-message {
		font-size: 10.5px;
	}
}

@media (max-width: 767px) {
	.bargchi-three-hour-bar__timer-area {
		width: 112px;
		min-width: 112px;
		height: 26px;
	}

	.bargchi-three-hour-bar__replacement-message {
		width: 112px;

		overflow: hidden;

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

		text-overflow: ellipsis;
		white-space: nowrap;
	}
}


/* ==========================================================================
   V2.2 — DESKTOP SPACING / TYPOGRAPHY + MOBILE FIRST-LOAD VISIBILITY
   ========================================================================== */

/*
 * DESKTOP
 * Keep the bar much closer to the viewport edges, matching the mockup.
 */
@media (min-width: 1025px) {

	.bargchi-three-hour-bar__inner {
		width: min(
			calc(100% - 24px),
			1340px
		) !important;

		max-width: none !important;

		margin-inline: auto !important;
	}


	.bargchi-three-hour-bar__title {
		font-size: 15px !important;
		font-weight: 900 !important;
		line-height: 1 !important;
	}


	.bargchi-three-hour-bar__copy {
		max-width: none !important;

		font-size: 13px !important;
		font-weight: 650 !important;
		line-height: 1 !important;
	}


	/*
	 * Keep the timer slightly toward the physical left,
	 * but no excessive empty side margin.
	 */
	.bargchi-three-hour-bar__timer-area {
		transform: translateX(-8px) !important;
	}
}


/*
 * MOBILE / TABLET
 *
 * The custom Bargchi header is fixed from the first frame.
 * Force this announcement bar above every header stacking context and
 * reserve its space from the initial render, not only after scroll classes
 * are applied.
 */
@media (max-width: 1024px) {

	html body .bargchi-three-hour-bar {
		position: fixed !important;

		top: 0 !important;
		right: 0 !important;
		left: 0 !important;

		display: block !important;

		width: 100% !important;

		margin: 0 !important;

		visibility: visible !important;
		opacity: 1 !important;

		transform: none !important;

		z-index: 2147483000 !important;
	}
}


/*
 * Tablet header starts below the bar from the very first paint.
 */
@media (min-width: 768px) and (max-width: 1024px) {

	html body .bargchi-header-main .bargchi-header-main__row,
	html body .bargchi-header-main:not(.is-scroll-down):not(.is-scroll-up)
	.bargchi-header-main__row,
	html body .bargchi-header-main.is-scroll-down
	.bargchi-header-main__row,
	html body .bargchi-header-main.is-scroll-up
	.bargchi-header-main__row {
		top: 36px !important;
	}


	html body .bargchi-header-main,
	html body .bargchi-header-main:not(.is-scroll-down):not(.is-scroll-up),
	html body .bargchi-header-main.is-scroll-down,
	html body .bargchi-header-main.is-scroll-up {
		padding-top:
			calc(
				var(--bargchi-main-row-height, 105px)
				+
				36px
			) !important;
	}
}


/*
 * Mobile header starts below the bar from the very first paint.
 */
@media (max-width: 767px) {

	html body .bargchi-three-hour-bar {
		height: 40px !important;
		min-height: 40px !important;
	}


	html body .bargchi-three-hour-bar__inner {
		height: 40px !important;
		min-height: 40px !important;
	}


	html body .bargchi-header-main .bargchi-header-main__row,
	html body .bargchi-header-main:not(.is-scroll-down):not(.is-scroll-up)
	.bargchi-header-main__row,
	html body .bargchi-header-main.is-scroll-down
	.bargchi-header-main__row,
	html body .bargchi-header-main.is-scroll-up
	.bargchi-header-main__row {
		position: fixed !important;

		top: 40px !important;
		right: 0 !important;
		left: 0 !important;
	}


	html body .bargchi-header-main,
	html body .bargchi-header-main:not(.is-scroll-down):not(.is-scroll-up),
	html body .bargchi-header-main.is-scroll-down,
	html body .bargchi-header-main.is-scroll-up {
		padding-top:
			calc(
				var(--bargchi-main-row-height, 105px)
				+
				40px
			) !important;
	}
}


/* WordPress admin bar safety */
@media (min-width: 783px) and (max-width: 1024px) {

	html body.admin-bar .bargchi-three-hour-bar {
		top: 32px !important;
	}

	html body.admin-bar .bargchi-header-main
	.bargchi-header-main__row {
		top: 68px !important;
	}
}


@media (max-width: 782px) {

	html body.admin-bar .bargchi-three-hour-bar {
		top: 46px !important;
	}

	html body.admin-bar .bargchi-header-main
	.bargchi-header-main__row {
		top: 86px !important;
	}
}

/* ==========================================================================
   V2.3 — FINAL ALIGNMENT / REAL MOBILE VISIBILITY FIX
   ========================================================================== */

.bargchi-three-hour-bar {
	--b3h-height: 38px !important;
	height: 38px !important;
	min-height: 38px !important;
}

.bargchi-three-hour-bar__inner {
	height: 38px !important;
	min-height: 38px !important;
	align-items: center !important;
}

.bargchi-three-hour-bar__message,
.bargchi-three-hour-bar__timer-area,
.bargchi-three-hour-bar__countdown,
.bargchi-three-hour-bar__replacement-message {
	align-items: center !important;
}

.bargchi-three-hour-bar__title,
.bargchi-three-hour-bar__copy,
.bargchi-three-hour-bar__replacement-message,
.bargchi-three-hour-bar__colon {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	line-height: 1 !important;
}


/* DESKTOP */
@media (min-width: 1025px) {

	.bargchi-three-hour-bar__inner {
		width: calc(100% - 16px) !important;
		max-width: 1360px !important;
		gap: 18px !important;
	}

	.bargchi-three-hour-bar__message {
		gap: 9px !important;
	}

	.bargchi-three-hour-bar__title {
		font-size: 15px !important;
		font-weight: 900 !important;
	}

	.bargchi-three-hour-bar__copy {
		font-size: 13px !important;
		font-weight: 650 !important;
		max-width: none !important;
	}

	.bargchi-three-hour-bar__truck,
	.bargchi-three-hour-bar__truck svg {
		width: 21px !important;
		height: 21px !important;
	}

	.bargchi-three-hour-bar__divider {
		height: 16px !important;
	}

	.bargchi-three-hour-bar__timer-area {
		width: 276px !important;
		min-width: 276px !important;
		height: 28px !important;
		transform: translateX(-4px) !important;
	}

	.bargchi-three-hour-bar__unit {
		width: 38px !important;
		height: 25px !important;
		font-size: 12px !important;
	}

	.bargchi-three-hour-bar__replacement-message {
		font-size: 12px !important;
		font-weight: 800 !important;
	}
}


/* TABLET */
@media (min-width: 768px) and (max-width: 1024px) {

	html body .bargchi-three-hour-bar {
		height: 38px !important;
		min-height: 38px !important;
	}

	html body .bargchi-three-hour-bar__inner {
		width: calc(100% - 20px) !important;
		height: 38px !important;
		min-height: 38px !important;
		gap: 10px !important;
	}

	.bargchi-three-hour-bar__title {
		font-size: 12px !important;
		font-weight: 850 !important;
	}

	.bargchi-three-hour-bar__copy {
		max-width: 300px !important;
		font-size: 10.5px !important;
	}

	.bargchi-three-hour-bar__timer-area {
		width: 218px !important;
		min-width: 218px !important;
		height: 27px !important;
	}

	.bargchi-three-hour-bar__unit {
		width: 32px !important;
		height: 23px !important;
		font-size: 10.5px !important;
	}

	.bargchi-three-hour-bar__replacement-message {
		font-size: 10.5px !important;
	}

	html body .bargchi-header-main .bargchi-header-main__row,
	html body .bargchi-header-main:not(.is-scroll-down):not(.is-scroll-up) .bargchi-header-main__row,
	html body .bargchi-header-main.is-scroll-down .bargchi-header-main__row,
	html body .bargchi-header-main.is-scroll-up .bargchi-header-main__row {
		top: 38px !important;
	}

	html body .bargchi-header-main,
	html body .bargchi-header-main:not(.is-scroll-down):not(.is-scroll-up),
	html body .bargchi-header-main.is-scroll-down,
	html body .bargchi-header-main.is-scroll-up {
		padding-top: calc(var(--bargchi-main-row-height, 105px) + 38px) !important;
	}
}


/* MOBILE */
@media (max-width: 767px) {

	html body .bargchi-three-hour-bar {
		height: 38px !important;
		min-height: 38px !important;
	}

	html body .bargchi-three-hour-bar__inner {
		width: calc(100% - 10px) !important;
		height: 38px !important;
		min-height: 38px !important;
		gap: 6px !important;
	}

	.bargchi-three-hour-bar__message {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		gap: 5px !important;
	}

	.bargchi-three-hour-bar__truck,
	.bargchi-three-hour-bar__truck svg {
		width: 17px !important;
		height: 17px !important;
	}

	.bargchi-three-hour-bar__truck {
		flex: 0 0 17px !important;
	}

	.bargchi-three-hour-bar__title {
		flex: 0 0 auto !important;
		font-size: 10.5px !important;
		font-weight: 900 !important;
		white-space: nowrap !important;
	}

	.bargchi-three-hour-bar__divider {
		display: block !important;
		flex: 0 0 1px !important;
		height: 13px !important;
		margin-inline: 0 !important;
	}

	/*
	 * Real-phone fix:
	 * older CSS hid this text at <=390px after JS switched state to "active".
	 * Keep it visible in every state.
	 */
	.bargchi-three-hour-bar__copy,
	.bargchi-three-hour-bar[data-state="active"] .bargchi-three-hour-bar__copy,
	.bargchi-three-hour-bar[data-state="before"] .bargchi-three-hour-bar__copy,
	.bargchi-three-hour-bar[data-state="after"] .bargchi-three-hour-bar__copy {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		flex: 1 1 auto !important;
		min-width: 28px !important;
		max-width: none !important;
		overflow: hidden !important;
		font-size: 8.8px !important;
		font-weight: 650 !important;
		text-overflow: ellipsis !important;
		white-space: nowrap !important;
	}

	.bargchi-three-hour-bar__timer-area {
		flex: 0 0 104px !important;
		width: 104px !important;
		min-width: 104px !important;
		height: 25px !important;
		transform: none !important;
	}

	.bargchi-three-hour-bar__countdown {
		gap: 2px !important;
	}

	.bargchi-three-hour-bar__unit {
		width: 25px !important;
		height: 21px !important;
		padding: 0 !important;
		border-radius: 5px !important;
		font-size: 9px !important;
		line-height: 21px !important;
	}

	.bargchi-three-hour-bar__colon {
		font-size: 9px !important;
	}

	.bargchi-three-hour-bar__replacement-message {
		width: 104px !important;
		overflow: hidden !important;
		font-size: 8.7px !important;
		font-weight: 800 !important;
		text-overflow: ellipsis !important;
		white-space: nowrap !important;
	}

	html body .bargchi-header-main .bargchi-header-main__row,
	html body .bargchi-header-main:not(.is-scroll-down):not(.is-scroll-up) .bargchi-header-main__row,
	html body .bargchi-header-main.is-scroll-down .bargchi-header-main__row,
	html body .bargchi-header-main.is-scroll-up .bargchi-header-main__row {
		top: 38px !important;
	}

	html body .bargchi-header-main,
	html body .bargchi-header-main:not(.is-scroll-down):not(.is-scroll-up),
	html body .bargchi-header-main.is-scroll-down,
	html body .bargchi-header-main.is-scroll-up {
		padding-top: calc(var(--bargchi-main-row-height, 105px) + 38px) !important;
	}
}


/* SMALL REAL PHONES */
@media (max-width: 390px) {

	.bargchi-three-hour-bar__inner {
		width: calc(100% - 8px) !important;
	}

	.bargchi-three-hour-bar__title {
		font-size: 10px !important;
	}

	.bargchi-three-hour-bar__copy,
	.bargchi-three-hour-bar[data-state="active"] .bargchi-three-hour-bar__copy {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		min-width: 24px !important;
		font-size: 8.2px !important;
	}

	.bargchi-three-hour-bar__timer-area {
		flex-basis: 100px !important;
		width: 100px !important;
		min-width: 100px !important;
	}

	.bargchi-three-hour-bar__replacement-message {
		width: 100px !important;
		font-size: 8.3px !important;
	}
}


/* ADMIN BAR OFFSETS */
@media (min-width: 783px) and (max-width: 1024px) {

	html body.admin-bar .bargchi-three-hour-bar {
		top: 32px !important;
	}

	html body.admin-bar .bargchi-header-main .bargchi-header-main__row {
		top: 70px !important;
	}
}

@media (max-width: 782px) {

	html body.admin-bar .bargchi-three-hour-bar {
		top: 46px !important;
	}

	html body.admin-bar .bargchi-header-main .bargchi-header-main__row {
		top: 84px !important;
	}
}


/* ==========================================================================
   V2.4 — 3-HOUR BAR / ALL OFF-CANVAS INTERACTION FIX
   ==========================================================================
   The 3-hour shipping bar is the top-most UI layer.
   Cart / login / filter / mobile menu drawers start immediately UNDER it.
   This prevents drawer headings and close controls from being hidden behind
   the shipping bar or the custom main header.
   ========================================================================== */

html {
	--bargchi-three-hour-overlay-top: 0px;
}


/*
|--------------------------------------------------------------------------
| Shipping bar is always the highest storefront layer
|--------------------------------------------------------------------------
*/

html body .bargchi-three-hour-bar {
	z-index: 2147483000 !important;
}


/*
|--------------------------------------------------------------------------
| WoodMart off-canvas system
|--------------------------------------------------------------------------
| Covers:
| - side cart
| - side login
| - filters / off-canvas columns
| - any WoodMart .wd-side-hidden drawer
|--------------------------------------------------------------------------
*/

html.bargchi-three-hour-overlay-offset body .wd-side-hidden,
html.bargchi-three-hour-overlay-offset body .cart-widget-side,
html.bargchi-three-hour-overlay-offset body .login-form-side {

	top:
		var(
			--bargchi-three-hour-overlay-top,
			38px
		) !important;

	bottom: 0 !important;

	height:
		calc(
			100dvh
			-
			var(
				--bargchi-three-hour-overlay-top,
				38px
			)
		) !important;

	max-height:
		calc(
			100dvh
			-
			var(
				--bargchi-three-hour-overlay-top,
				38px
			)
		) !important;

	z-index: 2147482500 !important;
}


/*
 * WoodMart dark page overlay.
 * It must begin under the shipping bar as well, so the bar itself
 * stays clear, undimmed and usable.
 */
html.bargchi-three-hour-overlay-offset body .wd-close-side {
	top:
		var(
			--bargchi-three-hour-overlay-top,
			38px
		) !important;

	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;

	height: auto !important;

	z-index: 2147482400 !important;
}


/*
 * Drawer heading always starts inside the visible drawer,
 * never underneath another fixed layer.
 */
html.bargchi-three-hour-overlay-offset
body .wd-side-hidden .wd-heading,
html.bargchi-three-hour-overlay-offset
body .cart-widget-side .wd-heading,
html.bargchi-three-hour-overlay-offset
body .login-form-side .wd-heading {

	position: sticky !important;
	top: 0 !important;

	z-index: 20 !important;

	background: #ffffff !important;
}


/*
|--------------------------------------------------------------------------
| Bargchi custom mobile drawer
|--------------------------------------------------------------------------
*/

@media (max-width: 1024px) {

	html.bargchi-three-hour-overlay-offset
	body .bargchi-mobile-drawer-layer {

		position: fixed !important;

		top:
			var(
				--bargchi-three-hour-overlay-top,
				38px
			) !important;

		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;

		width: 100% !important;

		height:
			calc(
				100dvh
				-
				var(
					--bargchi-three-hour-overlay-top,
					38px
				)
			) !important;

		max-height:
			calc(
				100dvh
				-
				var(
					--bargchi-three-hour-overlay-top,
					38px
				)
			) !important;

		overflow: hidden !important;

		z-index: 2147482500 !important;
	}


	html.bargchi-three-hour-overlay-offset
	body .bargchi-mobile-drawer-layer__backdrop {

		position: absolute !important;
		inset: 0 !important;

		width: 100% !important;
		height: 100% !important;
	}


	html.bargchi-three-hour-overlay-offset
	body .bargchi-mobile-drawer {

		top: 0 !important;
		bottom: 0 !important;

		height: 100% !important;
		max-height: 100% !important;

		overflow: hidden !important;
	}


	html.bargchi-three-hour-overlay-offset
	body .bargchi-mobile-drawer__head {

		position: sticky !important;
		top: 0 !important;

		z-index: 30 !important;

		background: #ffffff !important;
	}
}


/*
|--------------------------------------------------------------------------
| Mobile WoodMart cart / account / filters
|--------------------------------------------------------------------------
| On mobile the drawer should cover the main header cleanly, while the
| 3-hour bar remains above it.
|--------------------------------------------------------------------------
*/

@media (max-width: 767px) {

	html.bargchi-three-hour-overlay-offset
	body .wd-side-hidden,
	html.bargchi-three-hour-overlay-offset
	body .cart-widget-side,
	html.bargchi-three-hour-overlay-offset
	body .login-form-side {

		width: min(100vw, 420px) !important;

		z-index: 2147482500 !important;
	}


	html.bargchi-three-hour-overlay-offset
	body .wd-close-side {

		z-index: 2147482400 !important;
	}
}


/*
|--------------------------------------------------------------------------
| Desktop
|--------------------------------------------------------------------------
| The JS adds the offset class only while the non-fixed desktop shipping bar
| is actually visible in the viewport. After scrolling past it, side drawers
| automatically return to top:0.
|--------------------------------------------------------------------------
*/

@media (min-width: 1025px) {

	html:not(.bargchi-three-hour-overlay-offset)
	body .wd-side-hidden,
	html:not(.bargchi-three-hour-overlay-offset)
	body .cart-widget-side,
	html:not(.bargchi-three-hour-overlay-offset)
	body .login-form-side {

		top: 0 !important;
		bottom: 0 !important;

		height: 100dvh !important;
		max-height: 100dvh !important;
	}


	html:not(.bargchi-three-hour-overlay-offset)
	body .wd-close-side {

		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
	}
}