/* ==========================================================================
   Quote list: header badge, floating count and the drawer.
   Slide out panel on desktop, bottom sheet on mobile. Loaded on every
   page via the pages glob because the badge and drawer render globally.
   Colour and opacity transitions plus a single eased translate; reduced
   motion collapses to instant.
   ========================================================================== */

.quote-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.15rem;
	height: 1.15rem;
	margin-left: 0.4rem;
	padding: 0 0.3rem;
	border-radius: 999px;
	background: var(--color-accent-deep);
	color: var(--color-warm-white);
	font-family: var(--font-mono);
	font-size: 0.62rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.quote-badge.is-bumping {
	transform: scale(1.18);
}

.quote-fab {
	position: fixed;
	right: clamp(1rem, 2vw, 1.6rem);
	bottom: clamp(1rem, 2vw, 1.6rem);
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 1rem;
	border: 1px solid var(--color-ink);
	background: var(--color-ink);
	color: var(--color-warm-white);
	font-family: var(--font-heading);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: var(--shadow-soft);
	transition: background-color 220ms var(--ease-out-soft), border-color 220ms var(--ease-out-soft);
}

.quote-fab:hover,
.quote-fab:focus-visible {
	background: var(--color-accent-deep);
	border-color: var(--color-accent-deep);
	outline: none;
}

/* While the real Add to quote list button is on screen the pill steps
   aside, so it never covers the thing it duplicates. */
.has-add-in-view .quote-fab {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 200ms var(--ease-out-soft), visibility 0s 200ms;
}

.quote-fab__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.3rem;
	height: 1.3rem;
	padding: 0 0.35rem;
	border-radius: 999px;
	background: var(--color-warm-white);
	color: var(--color-ink);
	font-family: var(--font-mono);
	font-size: 0.66rem;
}

.quote-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	pointer-events: none;
}

.quote-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(38, 38, 38, 0.32);
	opacity: 0;
	transition: opacity 320ms var(--ease-out-soft);
}

.quote-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(28rem, 100%);
	display: flex;
	flex-direction: column;
	background: var(--color-base);
	border-left: 1px solid var(--color-line);
	transform: translateX(100%);
	transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
	outline: none;
}

.quote-drawer.is-open {
	pointer-events: auto;
}

.quote-drawer.is-open .quote-drawer__scrim {
	opacity: 1;
}

.quote-drawer.is-open .quote-drawer__panel {
	transform: translateX(0);
}

.quote-drawer__handle {
	display: none;
}

.quote-drawer__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-3);
	padding: clamp(1.2rem, 2vw, 1.6rem) clamp(1.2rem, 2vw, 1.6rem) 1rem;
	border-bottom: 1px solid var(--color-line);
}

.quote-drawer__title {
	font-family: var(--font-heading);
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--color-ink);
}

.quote-drawer__close {
	width: 2.4rem;
	height: 2.4rem;
	border: 1px solid var(--color-line);
	background: transparent;
	font-size: 1.3rem;
	line-height: 1;
	color: var(--color-ink);
	cursor: pointer;
	transition: border-color 220ms var(--ease-out-soft), color 220ms var(--ease-out-soft);
}

.quote-drawer__close:hover,
.quote-drawer__close:focus-visible {
	border-color: var(--color-accent-deep);
	color: var(--color-accent-deep);
	outline: none;
}

.quote-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: 0 clamp(1.2rem, 2vw, 1.6rem);
}

.quote-drawer__items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.quote-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--space-3);
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--color-line);
	transition: background-color 600ms var(--ease-out-soft), opacity 220ms var(--ease-out-soft), transform 220ms var(--ease-out-soft);
}

.quote-item.is-highlighted {
	background: linear-gradient(90deg, rgba(162, 151, 130, 0.16), rgba(162, 151, 130, 0));
}

.quote-item.is-leaving {
	opacity: 0;
	transform: translateX(0.6rem);
}

.quote-item__category {
	margin-bottom: 0.25rem;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent-text);
}

.quote-item__title {
	font-family: var(--font-heading);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
}

.quote-item__title a {
	color: var(--color-ink);
	text-decoration: none;
}

.quote-item__options {
	margin-top: 0.35rem;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--color-muted);
}

.quote-item__side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.5rem;
	text-align: right;
}

.quote-item__price {
	font-family: var(--font-heading);
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--color-ink);
	white-space: nowrap;
}

.quote-item__price-from {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.quote-item__qty {
	display: inline-flex;
	border: 1px solid var(--color-line);
}

.quote-item__qty-btn {
	width: 2rem;
	border: 0;
	background: transparent;
	color: var(--color-ink);
	cursor: pointer;
}

.quote-item__qty-input {
	width: 2.6rem;
	border: 0;
	border-inline: 1px solid var(--color-line);
	background: transparent;
	text-align: center;
	font-size: 0.85rem;
	color: var(--color-ink);
	-moz-appearance: textfield;
}

.quote-item__qty-input::-webkit-outer-spin-button,
.quote-item__qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.quote-item__actions {
	display: flex;
	gap: 0.8rem;
}

.quote-item__link {
	padding: 0;
	border: 0;
	background: transparent;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent-text);
	cursor: pointer;
	text-decoration: none;
}

.quote-item__link:hover {
	color: var(--color-ink);
}

.quote-drawer__empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.7rem;
	padding: clamp(2.4rem, 5vw, 3.6rem) 0;
}

.quote-drawer__empty-mark {
	width: 0.5rem;
	height: 0.5rem;
	margin-bottom: 0.4rem;
	transform: rotate(45deg);
	background: var(--color-accent);
}

.quote-drawer__empty-title {
	font-family: var(--font-heading);
	font-size: 1.3rem;
	font-weight: 500;
	color: var(--color-ink);
}

.quote-drawer__empty-copy {
	max-width: 22rem;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--color-muted);
}

.quote-drawer__foot {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	padding: 1.1rem clamp(1.2rem, 2vw, 1.6rem) clamp(1.2rem, 2vw, 1.6rem);
	border-top: 1px solid var(--color-line);
	background: var(--color-base);
}

.quote-drawer__total {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.quote-drawer__total-label,
.quote-drawer__total-note {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.quote-drawer__total-value {
	font-family: var(--font-heading);
	font-size: 1.3rem;
	font-weight: 500;
	color: var(--color-ink);
}

.quote-drawer__cta {
	justify-content: space-between;
	width: 100%;
}

.quote-drawer__reassure {
	font-size: 0.8rem;
	color: var(--color-muted);
}

/* The one caveat, a sentence under the total, quiet. */
.quote-drawer__caveat {
	margin: 0.35rem 0 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   Clear the whole list. Text, never a button, and the smallest thing in
   either footer, because it must never compete with Submit. It turns into
   its own question in place rather than opening a dialog.
   -------------------------------------------------------------------------- */
.quote-clear {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.quote-clear__link {
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: var(--color-muted);
	cursor: pointer;
	border-bottom: 1px solid transparent;
	transition: color 200ms var(--ease-out-soft), border-color 200ms var(--ease-out-soft);
}

.quote-clear__link:hover,
.quote-clear__link:focus-visible {
	color: var(--color-ink);
	border-bottom-color: currentColor;
}

.quote-clear__link[hidden] {
	display: none;
}

/* The answer is the only thing here that carries weight, and only while
   the question is open. */
.quote-clear__link--yes {
	color: var(--color-accent-deep);
	border-bottom-color: currentColor;
}

.quote-clear__link--yes:hover,
.quote-clear__link--yes:focus-visible {
	color: var(--color-ink);
}

.quote-clear__confirm {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem;
}

.quote-clear__confirm[hidden] {
	display: none;
}

.quote-clear__question {
	color: var(--color-ink);
}

.quote-clear__sep {
	color: var(--color-line);
}

/* In the drawer it sits under the reassurance, the last and quietest line
   in the footer. On the quote page it sits beside Edit list. */
.quote-drawer__foot .quote-clear {
	margin-top: 0.2rem;
}

.quote-summary__foot .quote-clear {
	flex: 0 0 auto;
}

html.has-quote-drawer {
	overflow: hidden;
}

.quote-drawer__empty[hidden],
.quote-drawer__foot[hidden],
.quote-badge[hidden] {
	display: none;
}

/* Bottom sheet on mobile. */
@media (max-width: 720px) {
	.quote-drawer__panel {
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-height: 88vh;
		border-left: 0;
		border-top: 1px solid var(--color-line);
		transform: translateY(100%);
	}

	.quote-drawer.is-open .quote-drawer__panel {
		transform: translateY(0);
	}

	.quote-drawer__handle {
		display: block;
		width: 2.4rem;
		height: 3px;
		margin: 0.6rem auto 0;
		border-radius: 999px;
		background: var(--color-line);
	}

	.quote-item {
		grid-template-columns: 1fr;
	}

	.quote-item__side {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.quote-drawer__panel,
	.quote-drawer__scrim,
	.quote-item,
	.quote-badge {
		transition: none;
	}
}

/* A rebuilt line says what moved since the quote it came from. Quiet
   enough to be read after the price, never a badge and never a colour. */
.quote-item__note {
	margin-top: 0.3rem;
	font-size: 0.76rem;
	line-height: 1.5;
	color: var(--color-muted);
	font-style: italic;
}