/**
 * Stock band on the shop front — a starting point only.
 *
 * A real file rather than an inline <style> on purpose: WP Rocket's Remove
 * Unused CSS parses and strips inline blocks, but handles files predictably and
 * lets them be safelisted. The child theme's own assets are enqueued the same
 * way for the same reason (cw-bricks-child/inc/routing-pdp.php).
 *
 * ⚠ data-state is set by JS. The served HTML only ever carries "loading" or
 * "select", so if Remove Unused CSS ever starts succeeding on this site, every
 * [data-state] selector below needs safelisting — the same trap the theme
 * documents for .is-best and .is-oos.
 *
 * ─── RETHEMING ───────────────────────────────────────────────────────────────
 *
 * Every colour reads from a custom property with a hex fallback, so a theme
 * recolours the whole thing by declaring seven variables on any ancestor —
 * no overrides, no specificity fight (cw-bricks-child does exactly this in
 * assets/css/cw-pdp.css):
 *
 *     --cw-stock-in           in stock
 *     --cw-stock-low          low stock
 *     --cw-stock-out          out of stock / not sold here
 *     --cw-stock-muted        unknown, loading, unchosen branch, the (?) itself
 *     --cw-stock-link         the "choose a location" prompt, which is a control
 *     --cw-stock-panel-bg     the (?) panel's background
 *     --cw-stock-panel-ink    the (?) panel's text
 *     --cw-stock-panel-line   the (?) panel's border
 *
 * Or drop this file entirely and start from nothing:
 *     add_filter( 'cw_stock_default_styles', '__return_false' );
 *
 * Two shapes:
 *   .cw-stock       the full band — dot, label, branch, and the (?) panel
 *   .cw-stock-chip  the mini label for one variation, for a row in a list of
 *                   sizes
 */

/* ── the full band ─────────────────────────────────────────────────────── */

.cw-stock {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 8px 0;
	font-size: 14px;
	line-height: 1.4;
}

/*
 * The `hidden` ATTRIBUTE has to beat every display rule, including the ones
 * above. The browser's own `[hidden] { display: none }` lives in the UA
 * stylesheet, which loses to any author rule at all — so `.cw-stock` setting
 * `display: inline-flex` quietly rendered cart lines that were marked hidden,
 * and a basket showed a column of "Checking availability…" it had been told not
 * to draw. !important because this must also survive a theme rule we cannot see.
 */
.cw-stock[hidden],
.cw-stock-chip[hidden],
.cw-stock__more[hidden] {
	display: none !important;
}

.cw-stock__dot {
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--cw-stock-muted, #9e9e9e);
}

.cw-stock[data-state="in"] .cw-stock__dot { background: var(--cw-stock-in, #2e7d32); }
.cw-stock[data-state="low"] .cw-stock__dot { background: var(--cw-stock-low, #ef6c00); }
.cw-stock[data-state="out"] .cw-stock__dot,
.cw-stock[data-state="unavailable"] .cw-stock__dot { background: var(--cw-stock-out, #c62828); }

.cw-stock__branch:empty { display: none; }

/*
 * "CHOOSE A LOCATION" is the one state that asks for something back, so it reads
 * as a control rather than as a status: a link, underlined and in the link
 * colour, with the status dot dropped — there is no stock state to colour it
 * with, and a grey dot beside a prompt just looks like a fourth band nobody can
 * read. The whole band carries the popup's trigger class in this state, so the
 * pointer belongs on all of it.
 */
.cw-stock[data-state="choose"] { cursor: pointer; }
.cw-stock[data-state="choose"] .cw-stock__dot { display: none; }

.cw-stock[data-state="choose"] .cw-stock__label {
	color: var(--cw-stock-link, #185aa6);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cw-stock[data-state="choose"]:hover .cw-stock__label {
	text-decoration-thickness: 2px;
}

/*
 * THE (?) — a Dashicon, which draws its own ring at whatever size the font is
 * set to. An earlier version drew the circle in CSS around a text "?", and a
 * glyph that small never sat straight inside it: the whole thing read as an empty
 * ring. So the button keeps no border, no background and no radius of its own,
 * and is purely a hit area around the icon.
 */
.cw-stock__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--cw-stock-muted, #9e9e9e);
	line-height: 1;
	cursor: pointer;
	transition: color .12s ease;
}

.cw-stock__more .dashicons {
	width: 18px;
	height: 18px;
	font-size: 18px;
	line-height: 1;
}

.cw-stock__more:hover,
.cw-stock__more:focus-visible {
	color: var(--cw-stock-panel-ink, #333);
}

/* ── the (?) panel ─────────────────────────────────────────────────────── */

/*
 * FIXED, and placed by the script from the band's own rectangle.
 *
 * It used to be absolute, which meant any scrolling ancestor clipped it: in the
 * side cart — a scroll panel — the branch list was sliced off at the cart's edge.
 * Fixed escapes overflow, and where the browser supports it the script also opens
 * the panel as a POPOVER, which renders in the top layer and so escapes
 * transformed ancestors and z-index stacking as well. A popover keeps its place in
 * the DOM, only its rendering moves, so the panel is still a child of the band and
 * hovering from one to the other still counts as staying put.
 */
.cw-stock__panel {
	position: fixed;
	top: 0;
	left: 0;
	right: auto;
	bottom: auto;
	z-index: 10060;
	min-width: 260px;
	max-width: 340px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--cw-stock-panel-line, #e0e0e0);
	border-radius: 6px;
	background: var(--cw-stock-panel-bg, #fff);
	box-shadow: 0 6px 24px rgba(0, 0, 0, .14);
	color: var(--cw-stock-panel-ink, #333);
	font-size: 13px;
	font-weight: 400;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
}

/*
 * THE HOVER BRIDGE. The panel sits 6px below the band, and that 6px belongs to
 * neither of them — the band's box ends above it and the panel's begins below,
 * because the panel is positioned out of flow. A pointer travelling down to the
 * panel therefore left the band before it arrived, and the panel closed under it.
 * This covers the gap with the panel's own (invisible) area, so the journey never
 * leaves the element. The script also waits a moment before closing, for the
 * pointer that leaves at an angle and misses the bridge.
 */
.cw-stock__panel::before {
	content: "";
	position: absolute;
	top: -8px;
	left: 0;
	right: 0;
	height: 8px;
}

.cw-stock__note { margin: 0 0 10px; }

.cw-stock__others-heading {
	margin: 0 0 4px;
	color: var(--cw-stock-muted, #9e9e9e);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.cw-stock__branches {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cw-stock__branch-row {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 3px 0;
}

.cw-stock__branch-row[data-state="in"] .cw-stock__branch-band { color: var(--cw-stock-in, #2e7d32); }
.cw-stock__branch-row[data-state="low"] .cw-stock__branch-band { color: var(--cw-stock-low, #ef6c00); }
.cw-stock__branch-row[data-state="out"] .cw-stock__branch-band,
.cw-stock__branch-row[data-state="unavailable"] .cw-stock__branch-band { color: var(--cw-stock-out, #c62828); }

.cw-stock__checked {
	margin: 10px 0 0;
	color: var(--cw-stock-muted, #9e9e9e);
	font-size: 11px;
}

/* The script clamps the panel inside the viewport and flips it above the band
   when there is no room below, so no media query has to guess. This only stops
   it demanding more width than a phone has. */
@media (max-width: 420px) {
	.cw-stock__panel {
		min-width: 0;
		max-width: calc( 100vw - 24px );
	}
}

/* A popover carries the UA's own border and padding until told otherwise. */
.cw-stock__panel:popover-open {
	display: block;
	overflow: visible;
}

/* ── the mini chip ─────────────────────────────────────────────────────── */

/* A pill by default, because in a bare list that is what reads as a label. A
   theme whose own flags are plain text resets the geometry — see .cwpdp-size
   .cw-stock-chip in cw-bricks-child. */
.cw-stock-chip {
	display: inline-block;
	padding: 1px 6px;
	border-radius: 3px;
	background: color-mix(in srgb, var(--cw-stock-muted, #9e9e9e) 16%, transparent);
	color: var(--cw-stock-muted, #9e9e9e);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	white-space: nowrap;
	vertical-align: middle;
}

.cw-stock-chip[data-state="in"] {
	background: color-mix(in srgb, var(--cw-stock-in, #2e7d32) 12%, transparent);
	color: var(--cw-stock-in, #2e7d32);
}

.cw-stock-chip[data-state="low"] {
	background: color-mix(in srgb, var(--cw-stock-low, #ef6c00) 14%, transparent);
	color: var(--cw-stock-low, #ef6c00);
}

.cw-stock-chip[data-state="out"],
.cw-stock-chip[data-state="unavailable"] {
	background: color-mix(in srgb, var(--cw-stock-out, #c62828) 12%, transparent);
	color: var(--cw-stock-out, #c62828);
}