/*
 * Persistent cart rail (L20261019-1900, feat-fb-mini-cart-rail).
 * Design: Lovable PersistentCart.tsx + CartQuantityControl.tsx + index.css
 * (commit 4101e678). Values are the design's built px (Lovable root 16px; the
 * theme's html is 10px, so nothing here uses rem).
 *
 * Non-blocking: no overlay, no focus trap, no scroll lock. The page reserves
 * the rail's width (body padding) so the rail never covers content.
 * Selectors are rooted on .sb-cart-rail-root (0,2,0) to beat the legacy bare
 * element rules in style.css / legacy-site.css / the BB skin.
 */
.sb-cart-rail-root {
	--sbr-navy: #06038d;
	--sbr-navy-10: rgba(6, 3, 141, .1);
	--sbr-navy-90: rgba(6, 3, 141, .9);
	--sbr-border: #dce0e6;          /* hsl(216 18% 88%) */
	--sbr-fg: #141e2f;              /* hsl(220 40% 13%) */
	--sbr-muted: #58677e;           /* hsl(216 18% 42%) */
	--sbr-card: #fff;
	--sbr-gold-20: rgba(242, 205, 0, .2); /* hsl(51 100% 47% / .2) */
}
.sb-cart-rail-root[hidden] { display: none !important; }

/* Reserve space: never cover browsing content. */
body.sb-cart-rail-on { --sbr-w: 168px; padding-right: 168px !important; }
body.sb-cart-rail-on.sb-cart-rail-collapsed { --sbr-w: 32px; padding-right: 32px !important; }

/*
 * Full-bleed sections (final QC #1). The theme's "50vw trick" heroes escape
 * their container with calc(50% - 50vw); with the body padded, 100vw is still
 * the whole window, so they slid --sbr-w/2 off the left edge (/contact-us/:
 * margin-left -84px in a 1272px parent, heading clipped). Re-derive them from
 * the width actually available, 100vw - --sbr-w. Desktop only: on phones the
 * rail is a bottom bar and these rules must not touch the mobile layouts.
 * Each selector is the theme's own full-bleed rule, found by grepping the
 * theme for 50vw (css/contact-page.css, css/support-pages.css).
 */
@media (min-width: 768px) {
	body.sb-cart-rail-on .sb-contact__hero,
	body.sb-cart-rail-on .sb-support__hero {
		margin-left: calc(50% - 50vw + var(--sbr-w) / 2);
		margin-right: calc(50% - 50vw + var(--sbr-w) / 2);
	}
	body.sb-cart-rail-on .sb-contact__hero,
	body.sb-cart-rail-on .sb-contact__shortcuts {
		padding-left: max(24px, calc(50vw - var(--sbr-w) / 2 - 696px));
		padding-right: max(24px, calc(50vw - var(--sbr-w) / 2 - 696px));
	}
	body.sb-cart-rail-on .sb-support__hero {
		padding-left: calc(50vw - var(--sbr-w) / 2 - 50%);
		padding-right: calc(50vw - var(--sbr-w) / 2 - 50%);
	}
}

/*
 * HEADER INSIDE THE REDUCED WIDTH (final QC, qc-vibe-openai). css/site-header.css
 * switches layouts on the VIEWPORT: desktop nav from 1024, the full search
 * field from 1200. With the rail the header only gets 100vw - --sbr-w, so at
 * 1280 + expanded rail (1112px) the full search and the nav overlapped and
 * "About" sat under the search input. Same breakpoints, shifted by the rail:
 *   expanded (168): full search from 1368, desktop nav from 1192;
 *   collapsed (32): full search from 1232, desktop nav from 1056.
 * In the band below each, the header uses its own compact search / menu-toggle
 * layout -- the same markup and the same drawer (position: fixed, inset 0) it
 * uses below 1024, so nothing new is introduced.
 */
@media (min-width: 1200px) and (max-width: 1367.98px) {
	body.sb-cart-rail-on:not(.sb-cart-rail-collapsed) .sb-site-header__search--desktop { display: none !important; }
	body.sb-cart-rail-on:not(.sb-cart-rail-collapsed) .sb-site-header__search--mobile { display: block !important; }
}
@media (min-width: 1200px) and (max-width: 1231.98px) {
	body.sb-cart-rail-on.sb-cart-rail-collapsed .sb-site-header__search--desktop { display: none !important; }
	body.sb-cart-rail-on.sb-cart-rail-collapsed .sb-site-header__search--mobile { display: block !important; }
}
@media (min-width: 1024px) and (max-width: 1191.98px) {
	body.sb-cart-rail-on:not(.sb-cart-rail-collapsed) .sb-site-header__nav,
	body.sb-cart-rail-on:not(.sb-cart-rail-collapsed) .sb-site-header__panel { display: none !important; }
	body.sb-cart-rail-on:not(.sb-cart-rail-collapsed) .sb-site-header__menu-toggle,
	body.sb-cart-rail-on:not(.sb-cart-rail-collapsed) .sb-site-header a.sb-site-header__inventory--bar { display: inline-flex !important; }
}
@media (min-width: 1024px) and (max-width: 1055.98px) {
	body.sb-cart-rail-on.sb-cart-rail-collapsed .sb-site-header__nav,
	body.sb-cart-rail-on.sb-cart-rail-collapsed .sb-site-header__panel { display: none !important; }
	body.sb-cart-rail-on.sb-cart-rail-collapsed .sb-site-header__menu-toggle,
	body.sb-cart-rail-on.sb-cart-rail-collapsed .sb-site-header a.sb-site-header__inventory--bar { display: inline-flex !important; }
}

/*
 * One typeface everywhere (final QC #2). On marketing pages the legacy bare
 * element rules (p, h2, output, button) set Helvetica/HKGrotesk; the rail is an
 * app surface, so it takes the app pages' Inter stack (css/site-header.css AC4).
 */
.sb-cart-rail-root,
.sb-cart-rail-root *:not(svg):not(path):not(circle):not(line) {
	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

.sb-cart-rail-root .sb-cart-rail {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: auto;
	z-index: 45;
	width: 168px;
	display: flex;
	flex-direction: column;
	margin: 0;
	border-left: 1px solid var(--sbr-border);
	background: var(--sbr-card);
	color: var(--sbr-fg);
	font-size: 14px;
	line-height: 1.5;
	box-sizing: border-box;
}
.sb-cart-rail-root .sb-cart-rail *,
.sb-cart-rail-root .sb-cart-bar * { box-sizing: border-box; }
.sb-cart-rail-root.is-collapsed .sb-cart-rail { width: 32px; }
.sb-cart-rail-root .sb-cart-rail__panel { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.sb-cart-rail-root.is-collapsed .sb-cart-rail__panel { display: none; }

/* Shared button reset (theme/BB style bare `button`). */
.sb-cart-rail-root button {
	appearance: none;
	margin: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	box-shadow: none;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color .15s, color .15s;
}
/*
 * Final QC #3: legacy button state rules painted a 1px rgb(73,8,3) border and a
 * fill on the collapsed handle at rest. Rail buttons are shadcn ghost buttons:
 * no border, no fill except the hover tints declared below.
 */
.sb-cart-rail-root button,
.sb-cart-rail-root button:focus,
.sb-cart-rail-root button:active {
	border: 0 !important;
	box-shadow: none !important;
}
.sb-cart-rail-root button:not(:hover) { background: transparent !important; }
.sb-cart-rail-root button:focus-visible,
.sb-cart-rail-root a:focus-visible {
	outline: 2px solid var(--sbr-navy);
	outline-offset: 2px;
}
.sb-cart-rail-root svg { width: 16px; height: 16px; flex-shrink: 0; pointer-events: none; }

/* Collapsed handle: full-height ghost button. */
.sb-cart-rail-root .sb-cart-rail__handle {
	display: none;
	width: 100%;
	height: 100%;
	flex-direction: column;
	gap: 12px;
	padding: 0;
	border-radius: 0;
	color: var(--sbr-navy);
}
.sb-cart-rail-root.is-collapsed .sb-cart-rail__handle { display: inline-flex; }
.sb-cart-rail-root .sb-cart-rail__handle:hover { background: var(--sbr-navy-10) !important; color: var(--sbr-navy); }
.sb-cart-rail-root .sb-cart-rail__handle-count { font-size: 12px; line-height: 16px; font-weight: 500; }

/* Header block. */
.sb-cart-rail-root .sb-cart-rail__head { padding: 12px; border-bottom: 1px solid var(--sbr-border); }
.sb-cart-rail-root .sb-cart-rail__head-row { display: flex; align-items: center; justify-content: space-between; }
.sb-cart-rail-root .sb-cart-rail__label {
	margin: 0;
	padding: 0;
	font-family: inherit; /* Admin ruling r2: site app-surface rule (css/site-header.css, AC4) = Inter */
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--sbr-fg);
}
.sb-cart-rail-root .sb-cart-rail__icon-btn { width: 32px; height: 32px; padding: 0; color: var(--sbr-navy); }
/* shadcn ghost: hover:bg-accent text-accent-foreground (navy / white). */
.sb-cart-rail-root .sb-cart-rail__icon-btn:hover { background: var(--sbr-navy) !important; color: #fff; }
.sb-cart-rail-root .sb-cart-rail__subtotal {
	margin: 0 0 12px;
	font-family: inherit; /* Admin ruling r2: Inter on app surfaces (css/site-header.css, AC4) */
	font-size: 18px;
	line-height: 28px;
	font-weight: 700;
	color: var(--sbr-navy);
	font-variant-numeric: tabular-nums;
}
.sb-cart-rail-root .sb-cart-rail__go,
.sb-cart-rail-root .sb-cart-bar__go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 36px;
	padding: 0 16px;
	border-radius: 6px;
	background: var(--sbr-navy);
	color: #fff;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s;
}
.sb-cart-rail-root .sb-cart-rail__go:hover,
.sb-cart-rail-root .sb-cart-bar__go:hover { background: var(--sbr-navy-90); color: #fff; text-decoration: none; }

/* Lines. */
.sb-cart-rail-root .sb-cart-rail__list {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sb-cart-rail-root .sb-cart-rail__item {
	margin: 0;
	padding: 12px;
	border-bottom: 1px solid var(--sbr-border);
	list-style: none;
	transition: background-color 350ms ease;
}
.sb-cart-rail-root .sb-cart-rail__item.is-highlight {
	background: var(--sbr-gold-20);
	box-shadow: inset 3px 0 var(--sbr-navy);
}
.sb-cart-rail-root .sb-cart-rail__item.is-busy { opacity: .6; }
.sb-cart-rail-root .sb-cart-rail__item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.sb-cart-rail-root .sb-cart-rail__img { display: block; width: 40px; height: 40px; border-radius: 4px; object-fit: contain; margin: 0; }
.sb-cart-rail-root .sb-cart-rail__title {
	display: block;
	margin: 0;
	font-size: 12px;
	line-height: 1.375;
	font-weight: 600;
	color: var(--sbr-navy);
	text-decoration: none;
}
.sb-cart-rail-root a.sb-cart-rail__title:hover { text-decoration: underline; color: var(--sbr-navy); }
.sb-cart-rail-root .sb-cart-rail__meta {
	margin: 4px 0 0;
	font-size: 11px;
	line-height: 1.5;
	color: var(--sbr-muted);
	overflow-wrap: break-word;
	word-break: break-word;
}
.sb-cart-rail-root .sb-cart-rail__price {
	margin: 8px 0;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	color: var(--sbr-fg);
	font-variant-numeric: tabular-nums;
}

/* CartQuantityControl, compact. Owner feedback 20 Oct: neutral grey/black, smaller. */
.sb-cart-rail-root .sb-cart-qty {
	display: grid;
	grid-template-columns: 28px 28px 28px;
	align-items: center;
	width: max-content;
	height: 28px;
	overflow: hidden;
	border: 1px solid var(--sbr-border);
	border-radius: 6px;
	background: #f4f5f7;
	color: var(--sbr-fg);
}
.sb-cart-rail-root .sb-cart-qty svg { width: 14px; height: 14px; }
.sb-cart-rail-root .sb-cart-qty button,
.sb-cart-rail-root .sb-cart-qty__plus-wrap { width: 100%; height: 100%; padding: 0; border-radius: 0; color: var(--sbr-fg); }
.sb-cart-rail-root .sb-cart-qty__plus-wrap { display: block; }
.sb-cart-rail-root .sb-cart-qty button:hover:not(:disabled) { background: #e4e7eb !important; color: var(--sbr-fg); }
/* The box clips overflow, so an outside outline showed as a stray bar: draw the ring inside. */
.sb-cart-rail-root .sb-cart-qty button:focus-visible { outline: 2px solid var(--sbr-navy); outline-offset: -2px; }
.sb-cart-rail-root .sb-cart-qty button:disabled:hover { background: transparent !important; }
.sb-cart-rail-root .sb-cart-qty button:disabled { opacity: .5; cursor: default; pointer-events: none; }
/* Typed quantity (21 Oct): same box as the number it replaces; inset ring while editing. */
.sb-cart-rail-root .sb-cart-qty input.sb-cart-qty__input.sb-cart-qty__input {
	display: block;
	box-sizing: border-box;
	width: 100% !important;
	min-width: 0 !important;
	height: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--sbr-fg) !important;
	font: 600 12px/16px Inter, system-ui, sans-serif !important;
	font-variant-numeric: tabular-nums;
	text-align: center;
	-webkit-appearance: none;
	appearance: none;
	cursor: text;
}
.sb-cart-rail-root .sb-cart-qty input.sb-cart-qty__input.sb-cart-qty__input:focus { outline: 0 !important; box-shadow: inset 0 0 0 2px var(--sbr-navy) !important; background: #fff !important; }
.sb-cart-rail-root .sb-cart-qty input.sb-cart-qty__input.sb-cart-qty__input[readonly] { cursor: progress; }
@media (max-width: 699px) {
	.sb-cart-rail-root .sb-cart-qty input.sb-cart-qty__input.sb-cart-qty__input { font-size: 16px !important; }
}
/* Final QC #5: a legacy rule gave output padding-top 7px; the design centres the number. */
.sb-cart-rail-root .sb-cart-qty output {
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	text-align: center;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--sbr-fg);
}

/* Add while collapsed below 1440 (Admin ruling): the handle highlights like a new line does. */
.sb-cart-rail-root.is-pulse .sb-cart-rail__handle {
	background: var(--sbr-gold-20) !important;
	box-shadow: inset 3px 0 var(--sbr-navy) !important;
}
@media (prefers-reduced-motion: no-preference) {
	.sb-cart-rail-root.is-pulse .sb-cart-rail__handle-count { animation: sbr-bump .6s ease-out 2; }
}
@keyframes sbr-bump { 40% { transform: scale(1.35); } }
.sb-cart-rail-root .sb-cart-rail__handle-count { display: inline-block; }

/* Loading placeholder while the rail's data is in flight (early-show mode). */
.sb-cart-rail-root [data-sb-rail-subtotal][data-placeholder] { color: var(--sbr-muted) !important; font-weight: 400; }
.sb-cart-rail-root .sb-cart-rail__skeleton { display: flex; flex-direction: column; gap: 8px; }
.sb-cart-rail-root .sb-cart-rail__skel { display: block; height: 10px; width: 100%; border-radius: 4px; background: #eef0f3; }
.sb-cart-rail-root .sb-cart-rail__skel--img { width: 40px; height: 40px; }
.sb-cart-rail-root .sb-cart-rail__skel--short { width: 60%; }
.sb-cart-rail-root .sb-cart-rail__skel--qty { height: 40px; border-radius: 6px; }
@media (prefers-reduced-motion: no-preference) {
	.sb-cart-rail-root .sb-cart-rail__skel { animation: sbr-pulse 1.4s ease-in-out infinite; }
}
@keyframes sbr-pulse { 50% { opacity: .5; } }

/* Phone bottom bar (design: max-width 767px). */
.sb-cart-rail-root .sb-cart-bar { display: none; }
@media (max-width: 767px) {
	body.sb-cart-rail-on,
	/* Bar = 68px + safe area; reserve that plus 8px (QC r2) so the last control clears it. */
	body.sb-cart-rail-on.sb-cart-rail-collapsed { padding-right: 0 !important; padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
	.sb-cart-rail-root .sb-cart-rail { display: none; }
	.sb-cart-rail-root .sb-cart-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 45;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
		min-height: 68px;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		border-top: 1px solid rgba(6, 3, 141, .3);
		background: var(--sbr-card);
		color: var(--sbr-fg);
		font-size: 14px;
		line-height: 1.5;
	}
	.sb-cart-rail-root .sb-cart-bar__info { display: flex; align-items: center; gap: 8px; min-width: 0; }
	.sb-cart-rail-root .sb-cart-bar__icon { width: 20px; height: 20px; color: var(--sbr-navy); }
	.sb-cart-rail-root .sb-cart-bar__items { margin: 0; font-size: 12px; line-height: 16px; }
	.sb-cart-rail-root .sb-cart-bar__subtotal { margin: 0; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--sbr-navy); }
	.sb-cart-rail-root .sb-cart-bar__go { width: auto; height: 40px; font-size: 14px; line-height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
	.sb-cart-rail-root .sb-cart-rail__item { transition: none; }
}
@media (forced-colors: active) {
	.sb-cart-rail-root .sb-cart-rail__item.is-highlight { outline: 2px solid Highlight; outline-offset: -2px; }
	.sb-cart-rail-root .sb-cart-rail__go,
	.sb-cart-rail-root .sb-cart-bar__go { border: 1px solid ButtonText; }
}