/* Seasonal order-by deadline bar.
   Rendered in normal document flow directly above .site-header. It must NOT be
   fixed or sticky, and must NOT create a raised stacking context: Shoptimizer
   sticks .site-header (mobile) and .col-full-nav (desktop) with position:sticky
   at z-index 50, and both need to paint over this bar as the page scrolls. */

.ashlaser-seasonal-bar {
	background: var(--ash-bark);
	color: var(--ash-cream);
	font-size: 14px;
	line-height: 1.35;
	width: 100%;
}

.ashlaser-seasonal-bar__inner {
	align-items: center;
	display: flex;
	gap: 8px;
	justify-content: center;
	margin: 0 auto;
	max-width: 1170px;
	min-height: 40px;
	padding: 6px 40px 6px 16px;
	position: relative;
}

.ashlaser-seasonal-bar__link {
	align-items: baseline;
	color: var(--ash-cream);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	justify-content: center;
	text-decoration: none;
}

.ashlaser-seasonal-bar__link:hover,
.ashlaser-seasonal-bar__link:focus-visible {
	color: #fff;
	text-decoration: none;
}

.ashlaser-seasonal-bar__link:focus-visible {
	outline: 2px solid var(--ash-gold);
	outline-offset: 3px;
}

.ashlaser-seasonal-bar__lead {
	font-weight: 700;
}

.ashlaser-seasonal-bar__detail,
.ashlaser-seasonal-bar__detail-short {
	color: rgba(255, 255, 255, 0.88);
}

.ashlaser-seasonal-bar__count {
	/* --ash-gold sits at only 3.77:1 on --ash-bark, under the 4.5:1 WCAG AA
	   floor for 14px bold. Lightened tint of the same token: 5.8:1. */
	color: #f2c079;
	color: color-mix(in srgb, var(--ash-gold) 55%, #fff);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	white-space: nowrap;
}

.ashlaser-seasonal-bar__count[hidden] {
	display: none;
}

.ashlaser-seasonal-bar__cta {
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	font-weight: 700;
	white-space: nowrap;
}

.ashlaser-seasonal-bar__link:hover .ashlaser-seasonal-bar__cta {
	border-bottom-color: #fff;
}

.ashlaser-seasonal-bar__dismiss {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 6px;
	color: rgba(255, 255, 255, 0.8);
	cursor: pointer;
	display: inline-flex;
	height: 32px;
	justify-content: center;
	padding: 0;
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
}

/* The visible chip stays 32px so it fits the slim bar, but the touch target is
   expanded to the 44px minimum with an invisible overlay. Absolutely positioned,
   so this costs no layout height. */
.ashlaser-seasonal-bar__dismiss::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}

.ashlaser-seasonal-bar__dismiss:hover,
.ashlaser-seasonal-bar__dismiss:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	outline: 0;
}

.ashlaser-seasonal-bar__dismiss:focus-visible {
	box-shadow: 0 0 0 2px var(--ash-gold);
}

.ashlaser-seasonal-bar__dismiss[hidden] {
	display: none;
}

/* The short deadline wording only appears where the full sentence won't fit. */
.ashlaser-seasonal-bar__detail-short {
	display: none;
}

@media (max-width: 782px) {
	.ashlaser-seasonal-bar {
		font-size: 13px;
	}

	.ashlaser-seasonal-bar__inner {
		padding-left: 12px;
		padding-right: 38px;
	}

	.ashlaser-seasonal-bar__detail {
		display: none;
	}

	.ashlaser-seasonal-bar__detail-short {
		display: inline;
	}
}

@media (max-width: 420px) {
	.ashlaser-seasonal-bar__cta {
		display: none;
	}
}