/**
 * Aisle — styles.
 *
 * Every colour in this file is a custom property (S-18). The block
 * below is the only place a literal colour appears, and it exists as a
 * fallback rather than as the real palette: `includes/theme.php` prints
 * a second copy of these properties inline, resolved from the store's
 * settings or from the active theme, and that copy wins because it is
 * the same selector printed later.
 *
 * So the declarations here are what renders when the inline block does
 * not — a stale cached stylesheet, a page where the enqueue was
 * filtered away. The assistant degrades to a neutral palette rather
 * than to an unpainted panel.
 *
 * Contrast is computed, not chosen. `--aisle-on-bubble` and
 * `--aisle-on-panel` are whichever of light or dark ink survives the
 * background *and its hover state*, which is why one value is used for
 * both states of a button below.
 *
 * ## Two rules about specificity, both learned on Twenty Seventeen
 *
 * **Every selector is scoped under `.aisle-root`.** The assistant is
 * dropped into somebody else's stylesheet, and a bare `.aisle-bubble`
 * at (0,1,0) loses to more of the field than you would expect.
 *
 * **Interactive colours carry `!important`, and every `:hover` also
 * matches `:focus`.** Twenty Seventeen paints buttons grey with
 * `:not(.mejs-button) > button:hover, :not(.mejs-button) > button:focus`
 * — specificity (0,2,1), which beats a scoped base rule and ties with a
 * scoped state rule. The visible symptom was that clicking the bubble
 * turned it grey and it *stayed* grey, because nothing here styled
 * `:focus` at all and the theme's rule had nothing to compete with.
 *
 * This costs nothing in configurability: a merchant's colours arrive
 * through the custom properties, not by overriding these declarations,
 * so `!important` here defends the widget's own surface without closing
 * off the thing it exists to allow.
 */

.aisle-root {
	--aisle-bubble: #2D6CDF;
	--aisle-bubble-hover: #285FC4;
	--aisle-on-bubble: #FFFFFF;
	--aisle-panel: #1E2A38;
	--aisle-panel-hover: #1A2531;
	--aisle-on-panel: #FFFFFF;
	--aisle-text: #1D2433;
	--aisle-text-soft: #5E636E;
	--aisle-muted: #8A8C93;
	--aisle-surface: #FFFFFF;
	--aisle-canvas: #F6F6F7;
	--aisle-line: #EDEEEF;
	--aisle-line-strong: #C9CCCF;
	--aisle-tint: #E2EAFB;
	--aisle-focus: #2D6CDF;
	--aisle-danger: #C0392B;
	--aisle-shadow: rgba(17, 23, 31, 0.28);

	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 99990;
	font-family: inherit;
}

/* Position is a setting, so the side is a modifier rather than a
   second stylesheet. Everything that pins to an edge is restated for
   it — the bubble, the panel, and the tooltip's slide-in, which has to
   travel the other way to still read as coming from the button. */
.aisle-root--left {
	right: auto;
	left: 22px;
}


/* ---------- BUBBLE ---------- */

.aisle-root .aisle-bubble {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: var(--aisle-bubble) !important;
	color: var(--aisle-on-bubble) !important;
	cursor: pointer;
	box-shadow: 0 8px 24px var(--aisle-shadow);
	transition: transform 0.18s ease, background-color 0.18s ease;
}

.aisle-root .aisle-bubble:hover,
.aisle-root .aisle-bubble:focus {
	transform: translateY(-3px);
	background-color: var(--aisle-bubble-hover) !important;
	color: var(--aisle-on-bubble) !important;
}

.aisle-root .aisle-bubble__icon svg {
	width: 27px;
	height: 27px;
	display: block;
}

/* A slow ring rather than a bounce — visible without nagging */
.aisle-root .aisle-bubble__pulse {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--aisle-bubble);
	animation: aisle-ring 2.8s ease-out infinite;
	pointer-events: none;
}

.aisle-root.is-open .aisle-bubble__pulse {
	display: none;
}

@keyframes aisle-ring {
	0%   { transform: scale(1);    opacity: 0.7; }
	70%  { transform: scale(1.45); opacity: 0; }
	100% { transform: scale(1.45); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.aisle-root .aisle-bubble__pulse { animation: none; }
}


/* ---------- TOOLTIP ---------- */

.aisle-root .aisle-tip {
	position: absolute;
	right: 72px;
	bottom: 16px;
	padding: 9px 15px;
	border-radius: 18px;
	background-color: var(--aisle-panel);
	color: var(--aisle-on-panel);
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	transform: translateX(8px);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
	box-shadow: 0 6px 18px var(--aisle-shadow);
}

.aisle-root .aisle-tip.is-on {
	opacity: 1;
	transform: translateX(0);
}

.aisle-root--left .aisle-tip {
	right: auto;
	left: 72px;
	transform: translateX(-8px);
}

.aisle-root--left .aisle-tip.is-on {
	transform: translateX(0);
}


/* ---------- PANEL ---------- */

.aisle-root .aisle-panel {
	position: absolute;
	right: 0;
	bottom: 76px;
	display: flex;
	flex-direction: column;
	width: 392px;
	max-width: calc(100vw - 32px);
	height: 600px;
	max-height: calc(100vh - 130px);
	overflow: hidden;
	border-radius: 18px;
	background-color: var(--aisle-surface);
	box-shadow: 0 22px 60px var(--aisle-shadow);
}

.aisle-root--left .aisle-panel {
	right: auto;
	left: 0;
}

.aisle-root .aisle-panel[hidden] {
	display: none;
}

.aisle-root .aisle-panel__head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 15px 14px 15px 20px;
	background-color: var(--aisle-panel);
	color: var(--aisle-on-panel);
	flex: 0 0 auto;
}

.aisle-root .aisle-panel__title {
	flex: 1 1 auto;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.2px;
}

/* The header buttons used to be white at 85% opacity over a known
   navy. A merchant's panel colour is not known, so they take the
   computed ink and are softened with opacity instead, which works
   against a light panel and a dark one alike. */
.aisle-root .aisle-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: transparent !important;
	color: var(--aisle-on-panel) !important;
	opacity: 0.8;
	cursor: pointer;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.aisle-root .aisle-icon:hover,
.aisle-root .aisle-icon:focus {
	background-color: var(--aisle-panel-hover) !important;
	color: var(--aisle-on-panel) !important;
	opacity: 1;
}

.aisle-root .aisle-icon svg {
	width: 17px;
	height: 17px;
}


/* ---------- BODY ---------- */

.aisle-root .aisle-body {
	flex: 1 1 auto;
	overflow-y: auto;
	background-color: var(--aisle-canvas);
}

/* The transcript is the only thing in the body, so it carries the
   padding at both ends. See the note in assistant.js: the newest
   message has to be what the panel is scrolled to, and that is only
   true while nothing else shares the scrolling region. */
.aisle-root .aisle-messages {
	padding: 18px 16px;
}

.aisle-root .aisle-msg {
	max-width: 84%;
	margin: 0 0 10px;
	padding: 11px 15px;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.5;
	word-wrap: break-word;
}

.aisle-root .aisle-msg--bot {
	background-color: var(--aisle-surface);
	border: 1px solid var(--aisle-line);
	color: var(--aisle-text);
	border-bottom-left-radius: 5px;
}

.aisle-root .aisle-msg--me {
	margin-left: auto;
	background-color: var(--aisle-panel);
	color: var(--aisle-on-panel);
	border-bottom-right-radius: 5px;
}

.aisle-root .aisle-typing {
	display: flex;
	gap: 4px;
	width: auto;
	max-width: 70px;
	padding: 14px 16px;
}

.aisle-root .aisle-typing span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--aisle-line-strong);
	animation: aisle-dot 1.2s ease-in-out infinite;
}

.aisle-root .aisle-typing span:nth-child(2) { animation-delay: 0.18s; }
.aisle-root .aisle-typing span:nth-child(3) { animation-delay: 0.36s; }

@keyframes aisle-dot {
	0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
	30%           { opacity: 1;   transform: translateY(-3px); }
}


/* ---------- THE LIST ---------- */

/* A sibling of the transcript, not a block inside it.

   It sits between the conversation and the replies, which is where it
   is acted on — and out of the scrolling region, so "scroll to the end"
   means the newest message rather than the bottom of the basket.

   `flex: 0 0 auto` with its own max-height and scroll: a fifteen-item
   list must not squeeze the conversation down to one line, and on the
   600px panel this leaves the transcript at least half the height. */
.aisle-root .aisle-list {
	flex: 0 0 auto;
	max-height: 46%;
	overflow-y: auto;
	padding: 14px 16px;
	border-top: 1px solid var(--aisle-line);
	background-color: var(--aisle-canvas);
}

/* No basket yet, no border and no gap — otherwise the opening question
   sits under a stray rule with nothing above it. */
.aisle-root .aisle-list:empty {
	display: none;
}

.aisle-root .aisle-card {
	padding: 14px;
	border: 1px solid var(--aisle-line);
	border-radius: 14px;
	background-color: var(--aisle-surface);
}

.aisle-root .aisle-card__head {
	margin-bottom: 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
	color: var(--aisle-text-soft);
}

.aisle-root .aisle-line {
	display: flex;
	gap: 11px;
	padding: 11px 0;
	border-top: 1px solid var(--aisle-line);
}

.aisle-root .aisle-line:first-of-type {
	border-top: none;
	padding-top: 0;
}

.aisle-root .aisle-line__thumb {
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	overflow: hidden;
	border-radius: 8px;
	background-color: var(--aisle-canvas);
}

.aisle-root .aisle-line__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 4px;
	box-sizing: border-box;
	display: block;
}

.aisle-root .aisle-line__main {
	flex: 1 1 auto;
	min-width: 0;
}

.aisle-root .aisle-line__name {
	display: block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--aisle-text) !important;
	text-decoration: none !important;
}

/* Underlined rather than recoloured. The old hover was a darker navy,
   which only reads as a hover against a navy that is no longer
   guaranteed — and an accent-coloured hover would be the one piece of
   text in the panel whose contrast nothing checks. */
.aisle-root .aisle-line__name:hover,
.aisle-root .aisle-line__name:focus {
	color: var(--aisle-text) !important;
	text-decoration: underline !important;
}

/* Which variation was chosen, e.g. "Size: Medium" (S-19). Deliberately
   quieter than the name and the price — it is a clarification, not a
   second heading. */
.aisle-root .aisle-line__variant {
	margin: 1px 0 0;
	font-size: 12px;
	color: var(--aisle-text-soft);
}

/* The variation picker, where a product has more than one buyable
   variation (Crew Store #12). Same quiet register as the label it
   replaces — a shopper should read the name and the price first, and
   only then notice they can change the colour.

   Sized at 16px on the control itself because iOS Safari zooms the
   whole page when a focused field is smaller than that, which on a
   fixed-position panel leaves the customer scrolled sideways with no
   obvious way back. */
.aisle-root .aisle-line__variant-label {
	display: block;
	margin: 3px 0 2px;
	font-size: 11px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--aisle-text-soft);
}

/* One control per attribute (#4). Two axes sit side by side where the
   row is wide enough and stack where it is not, which on the 392px
   panel means Colour and Size share a line and a third attribute drops
   below — rather than three full-width selects turning every shirt into
   a form.

   `min-width: 96px` with `1 1 auto`: an axis never shrinks to the point
   where its longest value is clipped, and a single axis still fills the
   row the way it did before there were axes at all. */
.aisle-root .aisle-line__axes {
	display: flex;
	flex-wrap: wrap;
	gap: 0 8px;
}

.aisle-root .aisle-line__axis {
	flex: 1 1 auto;
	min-width: 96px;
}

/* The browser draws its own arrow.

   `appearance: none` plus an inline SVG data URI is the conventional way
   to restyle a select, and it writes the SVG XML namespace — an
   http-scheme identifier — into shipped CSS. Nothing ever fetches a
   namespace, but `build:all` refuses any outbound URL in the free build
   and it is right to: the whole commercial position is that there are
   none, and "none, except one that does not count" is a worse sentence
   to hand a reviewer than simply using the native control.

   The native picker is also the better one on mobile, where it is the
   control people already know.

   Written without quoting the string, because the first version of this
   comment explained the problem by containing it, and the build refused
   the file again. */
.aisle-root .aisle-line__variant-select {
	width: 100%;
	max-width: 100%;
	margin: 0 0 4px;
	padding: 5px 8px;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.3;
	color: var(--aisle-text) !important;
	background-color: var(--aisle-canvas) !important;
	border: 1px solid var(--aisle-line) !important;
	border-radius: 9px;
	box-sizing: border-box;
}

.aisle-root .aisle-line__price {
	margin: 2px 0 7px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--aisle-text);
}

.aisle-root .aisle-line__ctrl {
	display: flex;
	align-items: center;
	gap: 6px;
}

.aisle-root .aisle-step {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	padding: 0;
	border: 1px solid var(--aisle-line) !important;
	border-radius: 50%;
	background-color: var(--aisle-surface) !important;
	color: var(--aisle-text) !important;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.aisle-root .aisle-step:hover,
.aisle-root .aisle-step:focus {
	border-color: var(--aisle-bubble) !important;
	background-color: var(--aisle-tint) !important;
	color: var(--aisle-text) !important;
}

.aisle-root .aisle-qty {
	min-width: 18px;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	color: var(--aisle-text);
}

.aisle-root .aisle-add {
	margin-left: auto;
	padding: 5px 13px;
	border: none;
	border-radius: 13px;
	background-color: var(--aisle-panel) !important;
	color: var(--aisle-on-panel) !important;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.aisle-root .aisle-add:hover,
.aisle-root .aisle-add:focus {
	background-color: var(--aisle-bubble) !important;
	color: var(--aisle-on-bubble) !important;
}

.aisle-root .aisle-incart {
	margin-left: auto;
	padding: 5px 11px;
	border-radius: 13px;
	background-color: var(--aisle-line);
	color: var(--aisle-text);
	font-size: 11.5px;
	font-weight: 700;
}

.aisle-root .aisle-drop {
	width: 22px;
	height: 22px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: transparent !important;
	color: var(--aisle-muted) !important;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.15s ease;
}

.aisle-root .aisle-drop:hover,
.aisle-root .aisle-drop:focus {
	background-color: transparent !important;
	color: var(--aisle-danger) !important;
}


/* ---------- TOTALS ---------- */

.aisle-root .aisle-totals {
	margin-top: 12px;
	padding-top: 11px;
	border-top: 1px solid var(--aisle-line);
}

.aisle-root .aisle-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 4px;
	font-size: 14px;
	color: var(--aisle-text);
}

.aisle-root .aisle-total strong {
	font-weight: 700;
}

.aisle-root .aisle-total--soft {
	font-size: 12.5px;
	color: var(--aisle-text-soft);
}

.aisle-root .aisle-addall {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 42px;
	margin-top: 13px;
	border: none;
	border-radius: 21px;
	background-color: var(--aisle-bubble) !important;
	color: var(--aisle-on-bubble) !important;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.aisle-root .aisle-addall:hover,
.aisle-root .aisle-addall:focus {
	background-color: var(--aisle-bubble-hover) !important;
	color: var(--aisle-on-bubble) !important;
}

.aisle-root .aisle-addall--done {
	background-color: var(--aisle-panel) !important;
	color: var(--aisle-on-panel) !important;
}

.aisle-root .aisle-addall--done:hover,
.aisle-root .aisle-addall--done:focus {
	background-color: var(--aisle-panel-hover) !important;
	color: var(--aisle-on-panel) !important;
}


/* ---------- UPSELL ---------- */

.aisle-root .aisle-upsell {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-top: 12px;
	padding: 11px 13px;
	border: 1px dashed var(--aisle-bubble);
	border-radius: 14px;
	background-color: var(--aisle-tint);
}

.aisle-root .aisle-upsell img {
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	object-fit: contain;
	border-radius: 7px;
	background-color: var(--aisle-surface);
}

.aisle-root .aisle-upsell__main {
	flex: 1 1 auto;
	min-width: 0;
}

.aisle-root .aisle-upsell__main a {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--aisle-text) !important;
	text-decoration: none !important;
}

.aisle-root .aisle-upsell__main a:hover,
.aisle-root .aisle-upsell__main a:focus {
	color: var(--aisle-text) !important;
	text-decoration: underline !important;
}

.aisle-root .aisle-upsell__main span {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--aisle-text);
}

.aisle-root .aisle-upsell__add {
	flex: 0 0 auto;
	padding: 6px 13px;
	border: none;
	border-radius: 13px;
	background-color: var(--aisle-panel) !important;
	color: var(--aisle-on-panel) !important;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.aisle-root .aisle-upsell__add:hover,
.aisle-root .aisle-upsell__add:focus {
	background-color: var(--aisle-panel-hover) !important;
	color: var(--aisle-on-panel) !important;
}


/* ---------- QUICK REPLIES ---------- */

.aisle-root .aisle-replies {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	padding: 12px 16px;
	border-top: 1px solid var(--aisle-line);
	background-color: var(--aisle-surface);
	flex: 0 0 auto;
	max-height: 132px;
	overflow-y: auto;
}

.aisle-root .aisle-replies:empty {
	display: none;
}

/* While the opening question is on screen the strip holds a labelled
   box of categories, the action chips and Continue, which does not fit
   in 132px — and the first thing off the bottom is Continue, the one
   control that ends the question. The box's own chips scroll instead;
   see the note in assistant.js for why the class is set from there
   rather than with `:has()`. */
.aisle-root .aisle-replies--picking {
	max-height: 216px;
}

.aisle-root .aisle-chip {
	padding: 8px 14px;
	border: 1px solid var(--aisle-line-strong) !important;
	border-radius: 17px;
	background-color: var(--aisle-surface) !important;
	color: var(--aisle-text) !important;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.aisle-root .aisle-chip:hover,
.aisle-root .aisle-chip:focus {
	border-color: var(--aisle-bubble) !important;
	background-color: var(--aisle-tint) !important;
	color: var(--aisle-text) !important;
}


/* ---------- INPUT ---------- */

.aisle-root .aisle-input {
	display: flex;
	gap: 8px;
	padding: 12px 14px;
	border-top: 1px solid var(--aisle-line);
	background-color: var(--aisle-surface);
	flex: 0 0 auto;
}

.aisle-root .aisle-field {
	flex: 1 1 auto;
	height: 40px;
	padding: 0 14px;
	border: 1px solid var(--aisle-line) !important;
	border-radius: 20px;
	background-color: var(--aisle-canvas) !important;
	color: var(--aisle-text) !important;
	font-size: 13.5px;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* The focus ring was the accent at 20% alpha. `--aisle-tint` is the
   same idea computed — the accent already blended into the panel
   background — so the ring needs no alpha channel of its own. */
.aisle-root .aisle-field:focus {
	border-color: var(--aisle-bubble) !important;
	background-color: var(--aisle-canvas) !important;
	color: var(--aisle-text) !important;
	box-shadow: 0 0 0 3px var(--aisle-tint) !important;
}

.aisle-root .aisle-send {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: var(--aisle-panel) !important;
	color: var(--aisle-on-panel) !important;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.aisle-root .aisle-send:hover,
.aisle-root .aisle-send:focus {
	background-color: var(--aisle-bubble) !important;
	color: var(--aisle-on-bubble) !important;
}

.aisle-root .aisle-send svg {
	width: 17px;
	height: 17px;
}


/* ---------- PHONE ---------- */

@media (max-width: 480px) {

	.aisle-root {
		right: 14px;
		bottom: 14px;
	}

	.aisle-root--left {
		right: auto;
		left: 14px;
	}

	.aisle-root .aisle-panel {
		right: -6px;
		bottom: 70px;
		width: calc(100vw - 16px);
		height: calc(100vh - 110px);
		border-radius: 16px;
	}

	.aisle-root--left .aisle-panel {
		right: auto;
		left: -6px;
	}

	.aisle-root .aisle-bubble {
		width: 54px;
		height: 54px;
	}

	.aisle-root .aisle-tip {
		display: none;
	}
}

/* ---------- KEYBOARD FOCUS (S-25) ---------- */

/* S-18 gave every control a `:focus` style, and it is the same styling
   as `:hover`. That is visible, but it is not a focus indicator: it
   tells a keyboard user nothing that a mouse user is not also shown,
   and it leaves a clicked button looking permanently hovered.

   `:focus-visible` is the distinction. The browser applies it when
   focus arrived by keyboard and not when it arrived by pointer, so the
   ring appears for the people who need it and never after a click.

   `outline-offset` matters more than it looks: every control here is
   pill-shaped or circular, and an outline drawn flush against a
   border-radius reads as a smudge rather than a ring. */
.aisle-root .aisle-bubble:focus-visible,
.aisle-root .aisle-chip:focus-visible,
.aisle-root .aisle-step:focus-visible,
.aisle-root .aisle-add:focus-visible,
.aisle-root .aisle-addall:focus-visible,
.aisle-root .aisle-drop:focus-visible,
.aisle-root .aisle-send:focus-visible,
.aisle-root .aisle-field:focus-visible,
.aisle-root .aisle-upsell__add:focus-visible,
.aisle-root .aisle-line__name:focus-visible,
.aisle-root .aisle-line__thumb:focus-visible,
.aisle-root .aisle-line__variant-select:focus-visible,
.aisle-root .aisle-upsell__main a:focus-visible {
	outline: 3px solid var(--aisle-focus) !important;
	outline-offset: 2px !important;
}

/* The header controls sit on the panel chrome, not on the panel
   background, so the ring that was computed against the background is
   the wrong one for them. `--aisle-on-panel` contrasts with the panel
   by construction — it is the colour their own icon is drawn in. */
.aisle-root .aisle-icon:focus-visible {
	outline: 3px solid var(--aisle-on-panel) !important;
	outline-offset: -2px !important;
}

/* The panel takes focus itself when it opens, so a screen reader reads
   the dialog's label before its contents. That is a programmatic focus
   the customer did not ask for, and ringing the whole panel because of
   it would be noise. */
.aisle-root .aisle-panel:focus,
.aisle-root .aisle-panel:focus-visible {
	outline: none;
}


/* ---------- INLINE (S-24) ---------- */

/* The block places the assistant in the page rather than over it. That
   makes it a normal-flow element: no fixed corner, no z-index fight
   with the theme's sticky header, and a panel that takes the width the
   block was given rather than a hardcoded 392px.

   **This section comes after everything it overrides, on purpose.**
   Every rule here is (0,2,0), which is exactly what the base rules it
   overrides are, so the tie is broken by source order and nothing
   else. The category-picker block below it is the one section that
   follows, and it may: those selectors are new rather than overrides,
   and the two do not meet. Placed earlier
   this whole block silently lost: the panel stayed `position: absolute`
   at 392px, hung itself off a zero-height container, and rendered
   partly above the top of the page. That is the same failure the
   theme-specificity note at the top of this file describes, with the
   plugin as its own opponent.

   Everything below is layout only. Colour still comes from the same
   tokens, so an inline assistant and a floating one are the same
   assistant in two placements — which is the point, and is what stops
   this becoming a second stylesheet to keep in step. */
.aisle-root--inline {
	position: static;
	right: auto;
	bottom: auto;
	left: auto;
	width: 100%;
}

.aisle-root--inline .aisle-panel {
	position: static;
	width: 100%;
	max-width: none;
	height: 560px;
	max-height: none;
	border-radius: 18px;
}

/* The phone rules pin the floating panel to the viewport. Inline has
   no business doing that — it is as wide as its column already. */
@media (max-width: 480px) {

	.aisle-root--inline {
		right: auto;
		bottom: auto;
		left: auto;
	}

	.aisle-root--inline .aisle-panel {
		right: auto;
		left: auto;
		width: 100%;
		height: 520px;
		border-radius: 18px;
	}
}


/* The theme scroll-to-top dodge that used to live here is printed by
   includes/theme.php instead, because it only applies when the bubble
   is in the same corner — and which corner that is became a setting in
   S-18. */

/* ---------- THE CATEGORY PICKER ---------- */

/* The opening categories, which take more than one answer.

   This was a `<select>`, shown instead of a row of chips once the
   merchant had chosen more than five categories (#7). A dropdown cannot
   express a set, so it could not survive the multi-select change — the
   categories are toggle chips now, and past five they get their own
   bounded scrolling box.

   The threshold and its reason are unchanged, and they were never
   about the control: a dozen buttons fill the panel and push the
   conversation off screen, which is finding #3 arriving from the other
   direction. */
.aisle-root .aisle-picker {
	width: 100%;
	margin: 0 0 8px;
}

.aisle-root .aisle-picker__label {
	display: block;
	margin: 0 0 5px;
	font-size: 11px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--aisle-text-soft);
}

.aisle-root .aisle-picker__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

/* Only past the merchant's fifth category (#7). Below that there is
   nothing to scroll and a box with its own scrollbar is furniture.

   The cap is on the CHIPS and not on `.aisle-picker`, so the label
   stays put while the categories move under it — a heading that
   scrolls out of its own list is how a customer loses track of what
   the question was. */
.aisle-root .aisle-picker--scroll .aisle-picker__chips {
	max-height: 108px;
	overflow-y: auto;
	padding: 2px;
	margin: -2px;
}

/* A category that has been toggled on. Filled rather than merely
   outlined, because the difference between picked and not picked is
   the whole interface here and a border-colour change is not enough of
   one — particularly beside a chip that is only hovered. */
.aisle-root .aisle-chip--picked {
	border-color: var(--aisle-bubble) !important;
	background-color: var(--aisle-bubble) !important;
	color: var(--aisle-on-bubble) !important;
}

.aisle-root .aisle-chip--picked:hover,
.aisle-root .aisle-chip--picked:focus {
	border-color: var(--aisle-bubble) !important;
	background-color: var(--aisle-bubble) !important;
	color: var(--aisle-on-bubble) !important;
}

/* Continue. The only reply that commits the set, so it is the only one
   that looks like a button rather than an option. */
.aisle-root .aisle-chip--go {
	border-color: var(--aisle-panel) !important;
	background-color: var(--aisle-panel) !important;
	color: var(--aisle-on-panel) !important;
}

.aisle-root .aisle-chip--go:hover,
.aisle-root .aisle-chip--go:focus {
	border-color: var(--aisle-panel-hover) !important;
	background-color: var(--aisle-panel-hover) !important;
	color: var(--aisle-on-panel) !important;
}