/* The pinned notice — its one home for styles, loaded on the storefront and
   on the board (the card's preview is the same render). Two states on one
   element: Posted (an elevated White card on the Cream band, above the menu)
   and Pinned (a compact floating card, bottom-right on desktop, a tap-to-
   expand pill on mobile). Never a scrim, never a trap — the page stays whole.

   The card composes as one left-anchored labeled block: the type chip is the
   eyebrow directly above the message, meta beneath, the dismiss × alone at the
   top-right — two anchor points, not four (A26.2). In the collapsed pinned
   state the text chip gives way to a compact accent dot so the message keeps
   the room (A26.3). */

.alert-band {
	background: var(--cream, #f0e6c5);
	padding: var(--space-3, 0.75rem) var(--gutter, 1.25rem);
}

.alert-band[hidden] {
	display: none;
}

/* the elevated card: content column + the dismiss aligned to its top */
.alert-band__inner {
	max-width: var(--container, 70rem);
	margin-inline: auto;
	background: var(--white, #fff);
	border: var(--rule-ink, 1px solid #141004);
	border-radius: var(--radius, 2px);
	box-shadow: var(--shadow-elevation, 0 16px 40px rgb(20 16 4 / 12%));
	padding: var(--space-4, 1rem) clamp(1rem, 3vw, 1.5rem);
	display: flex;
	align-items: flex-start;
	gap: var(--space-3, 0.75rem);
}

/* the accent dot — the collapsed pinned state's compact type indicator;
   absent in Posted and expanded, where the chip label carries the type */
.alert-band__dot {
	display: none;
	flex: 0 0 auto;
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 999px;
}

.alert-band__dot--store { background: var(--emerald, #1b4332); }
.alert-band__dot--law { background: var(--notice-amber, #8a5a00); }
.alert-band__dot--delivery { background: var(--success-green, #2f6b3c); }

/* the single left-aligned content column: chip eyebrow → message → meta */
.alert-band__content {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2, 0.5rem);
}

.alert-band__chip {
	font-family: var(--font-ui, system-ui, sans-serif);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.alert-band__chip--store { color: var(--emerald, #1b4332); }
.alert-band__chip--law { color: var(--notice-amber, #8a5a00); }
.alert-band__chip--delivery { color: var(--success-green, #2f6b3c); }

.alert-band__message {
	font-family: var(--font-ui, system-ui, sans-serif);
	font-size: 1.25rem;
	line-height: 1.35;
	color: var(--ink, #141004);
	max-width: 68ch;
	margin: 0;
}

.alert-band__meta {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--space-1, 0.25rem) var(--space-4, 1rem);
	margin-top: var(--space-2, 0.5rem);
}

.alert-band__posted {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgb(20 16 4 / 75%);
	white-space: nowrap;
}

.alert-band__link {
	font-size: 1rem;
	color: var(--emerald, #1b4332);
	text-decoration: underline;
	text-underline-offset: 3px;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.alert-band__expand,
.alert-band__dismiss {
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--ink, #141004);
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	flex: 0 0 auto;
}

.alert-band__expand[hidden] {
	display: none;
}

.alert-band__expand svg,
.alert-band__dismiss svg {
	width: 1.125rem;
	height: 1.125rem;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.5;
}

.alert-band__expand svg {
	transition: transform var(--duration-micro, 180ms) ease;
}

.alert-band.is-expanded .alert-band__expand svg {
	transform: rotate(180deg);
}

/* ---------- Pinned: the card follows the scroll ----------
   Shared: it leaves the Cream band and floats as the card alone. */
.alert-band.is-pinned {
	position: fixed;
	z-index: 45;
	background: none;
	padding: 0;
	margin: 0;
}

.alert-band.is-pinned .alert-band__inner {
	max-width: none;
}

/* collapsed: one slim line — the accent dot for the type, the message
   condensed to a single line beside it, the chip label and meta tucked away;
   the full text and label are one tap out, never lost */
.alert-band.is-pinned:not(.is-expanded) .alert-band__inner {
	align-items: center;
	flex-wrap: nowrap;
}

.alert-band.is-pinned:not(.is-expanded) .alert-band__dot {
	display: block;
}

.alert-band.is-pinned:not(.is-expanded) .alert-band__chip {
	display: none;
}

.alert-band.is-pinned:not(.is-expanded) .alert-band__message {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.alert-band.is-pinned:not(.is-expanded) .alert-band__meta {
	display: none;
}

/* expanded: the full content column (chip label restored + full message)
   takes its own line, the controls on the row above it */
.alert-band.is-pinned.is-expanded .alert-band__inner {
	flex-wrap: wrap;
}

.alert-band.is-pinned.is-expanded .alert-band__content {
	flex: 1 1 100%;
	order: 2;
}

.alert-band.is-pinned.is-expanded .alert-band__expand {
	margin-left: auto;
}

/* a focused element is never covered — the card yields while focus sits under it */
.alert-band.is-pinned.is-yielded {
	opacity: 0;
	pointer-events: none;
}

/* Desktop: a compact card, bottom-right */
@media (min-width: 701px) {
	.alert-band.is-pinned {
		bottom: var(--space-6, 1.5rem);
		right: var(--space-6, 1.5rem);
		left: auto;
		width: min(24rem, calc(100vw - 3rem));
	}

	.alert-band.is-pinned .alert-band__message {
		font-size: 1.0625rem;
	}
}

/* Mobile: a slim pill on the bottom edge, stacked above any page dock-bar */
@media (max-width: 700px) {
	.alert-band.is-pinned {
		left: 0;
		right: 0;
		bottom: var(--dock-height, 0px);
	}

	.alert-band.is-pinned .alert-band__inner {
		border-radius: 0;
		border-inline: 0;
		border-bottom: 0;
		padding: var(--space-3, 0.75rem) var(--gutter, 1.25rem);
	}

	.alert-band.is-pinned:not(.is-expanded) .alert-band__message {
		font-size: 1.0625rem;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.alert-band.is-pinned {
		transition: opacity var(--duration-micro, 180ms) ease;
	}
}


/* ---------- Checkout (John R23): the ride-along keeps to the right
   gutter — the order column owns the page's right side (sticky summary +
   commit), so the card would sit on the money. On this page it holds the
   condensed pill footprint (the mobile treatment; the full text stays one
   tap away — presence, the A26 guarantee, is unchanged) and its width
   fits the margin outside the checkout's 80rem plane, floored so it
   never vanishes. ---------- */
.woocommerce-checkout .alert-band.is-pinned {
	left: auto;
	right: 12px;
	width: clamp(260px, calc((100vw - 80rem) / 2 - 24px), 420px);
}