/**
 * LS Cart — drawer, badge, and the small pieces inside them.
 * Colours come from the theme's --ls-* tokens where they exist.
 */

:root {
	--lscart-accent: var(--ls-red, #ff0044);
	--lscart-fill: var(--ls-red-btn, #e00038);
	--lscart-fill-hover: var(--ls-red-btn-hover, #b8002e);
	--lscart-width: 400px;
	--lscart-bg: var(--ls-surface-1, #111);
	--lscart-bg-deep: var(--ls-bg, #000);
	--lscart-raised: var(--ls-surface-2, #1a1a1a);
	--lscart-text: var(--ls-text, #fff);
	--lscart-muted: var(--ls-text-muted, rgba(255, 255, 255, 0.7));
	--lscart-soft: var(--ls-text-soft, rgba(255, 255, 255, 0.55));
	--lscart-line: var(--ls-hairline, rgba(255, 255, 255, 0.15));
	--lscart-line-faint: var(--ls-hairline-faint, rgba(255, 255, 255, 0.08));
	--lscart-radius: var(--ls-radius-md, 6px);
	--lscart-display: var(--ls-font-display, "Barlow Condensed", Arial, sans-serif);
	/* Measured on lsfab.com: the admin bar sits at 100001, a review lightbox
	   at 1000000 and a Divi slide sidebar at 100000000. Lower this variable
	   if the drawer ever needs to sit under something. */
	--lscart-body: var(--ls-font-body, Inter, Arial, sans-serif);
	--lscart-z: 100000000;
}

html.lscart-locked {
	overflow: hidden;
}

/* ------------------------------------------------------------------ badge */

.lscart-trigger {
	position: relative;
}

.lscart-badge {
	position: absolute;
	top: -2px;
	right: -4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	box-sizing: border-box;
	border-radius: 100px;
	background: var(--lscart-fill);
	color: #fff;
	font-family: var(--lscart-body);
	font-size: var(--ls-caption, 12px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	pointer-events: none;
}

.lscart-badge[hidden] {
	display: none;
}

.lscart-badge.is-pop {
	animation: lscart-pop 420ms cubic-bezier(0.22, 1.2, 0.36, 1);
}

.lscart-badge.is-pop::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 100px;
	border: 2px solid var(--lscart-accent);
	animation: lscart-ping 620ms ease-out forwards;
}

@keyframes lscart-pop {
	0% { transform: scale(0.5); }
	55% { transform: scale(1.3); }
	100% { transform: scale(1); }
}

@keyframes lscart-ping {
	0% { opacity: 0.75; transform: scale(0.9); }
	100% { opacity: 0; transform: scale(1.9); }
}

/* ------------------------------------------------------------------ scrim */

.lscart-scrim {
	position: fixed;
	inset: 0;
	z-index: var(--lscart-z);
	background: rgba(0, 0, 0, 0.65);
	opacity: 0;
	transition: opacity 240ms ease;
}

.lscart-scrim.is-open {
	opacity: 1;
}

.lscart-scrim[hidden] {
	display: none;
}

/* ----------------------------------------------------------------- drawer */

.lscart {
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: calc(var(--lscart-z) + 1);
	display: flex;
	flex-direction: column;
	width: var(--lscart-width);
	max-width: 100%;
	background: var(--lscart-bg);
	color: var(--lscart-text);
	font-family: var(--lscart-body);
	font-size: var(--ls-body, 16px);
	box-shadow: var(--ls-shadow-drop, 0 18px 40px rgba(0, 0, 0, 0.65));
	transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
	will-change: transform;
}

.lscart[hidden] {
	display: none;
}

.lscart--right {
	right: 0;
	transform: translateX(100%);
}

.lscart--left {
	left: 0;
	transform: translateX(-100%);
}

.lscart.is-open {
	transform: translateX(0);
}

.lscart * {
	box-sizing: border-box;
}

.lscart__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--lscart-line);
	background: var(--lscart-bg-deep);
}

.lscart__title {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-family: var(--lscart-display);
	font-weight: 700;
	font-size: var(--ls-h3, 26px);
	line-height: var(--ls-leading-h3, 1.2);
	text-transform: none;
	letter-spacing: 0;
	color: var(--lscart-text);
}

.lscart__headcount {
	font-family: var(--lscart-body);
	font-size: var(--ls-small, 14px);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--lscart-soft);
}

/* 2026-09-06 — TAP TARGETS.
   The drawer's close, quantity and remove controls were 34px, 30px and 22px.
   WCAG 2.5.5 asks for 44x44 and these were the smallest controls anywhere on
   the site, so they are raised here at every width rather than only on
   phones: 22px is uncomfortable with a mouse too. The icons inside them are
   unchanged — only the boxes grew.
   .lscart-item__remove keeps its vertical centre (top 14 + 11 = 25, now
   3 + 22 = 25) and .lscart-item__name's padding-right grew from 22 to 46 to
   stay clear of the wider button. */
.lscart__close {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: var(--lscart-radius);
	background: transparent;
	color: var(--lscart-text);
	cursor: pointer;
	transition: background-color 160ms ease;
}

.lscart__close:hover,
.lscart__close:focus-visible {
	background: var(--lscart-raised);
}

.lscart__close svg {
	width: 18px;
	height: 18px;
}

.lscart__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 6px 20px 20px;
}

.lscart__body.is-loading {
	opacity: 0.55;
	pointer-events: none;
}

.lscart__foot:empty {
	display: none;
}

.lscart__foot {
	flex: 0 0 auto;
	padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--lscart-line);
	background: var(--lscart-bg-deep);
}

body.admin-bar .lscart {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .lscart {
		top: 46px;
	}
}

@media screen and (max-width: 600px) {
	body.admin-bar .lscart {
		top: 0;
	}
}

/* ------------------------------------------------------------------ items */

.lscart-items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lscart-item {
	position: relative;
	display: flex;
	gap: 12px;
	padding: 16px 0;
	border-bottom: 1px solid var(--lscart-line-faint);
}

.lscart-item.is-busy {
	opacity: 0.45;
	pointer-events: none;
}

.lscart-item__media {
	flex: 0 0 64px;
	width: 64px;
	display: block;
	border-radius: var(--lscart-radius);
	overflow: hidden;
	background: var(--lscart-raised);
}

.lscart-item__media img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

.lscart-item__main {
	flex: 1 1 auto;
	min-width: 0;
}

.lscart-item__name {
	display: block;
	color: var(--lscart-text);
	font-size: var(--ls-h4, 20px);
	font-weight: 600;
	line-height: var(--ls-leading-h4, 1.25);
	text-decoration: none;
	padding-right: 46px;
	min-height: 44px;
	font-family: var(--ls-font-display, "Barlow Condensed", Helvetica, Arial, sans-serif);
}

.lscart-item__name:hover {
	color: var(--lscart-accent);
}

.lscart-item__meta {
	margin-top: 3px;
	color: var(--lscart-soft);
	font-size: var(--ls-caption, 12px);
	line-height: 1.4;
}

.lscart-item__meta p {
	margin: 0;
}

.lscart-item__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 10px;
}

.lscart-item__total {
	font-size: var(--ls-price-card, 16px);
	font-weight: 700;
	white-space: nowrap;
}

.lscart-item__total del {
	opacity: 0.5;
	font-weight: 400;
}

.lscart-item__remove {
	position: absolute;
	top: 3px;
	right: 0;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--lscart-soft);
	cursor: pointer;
	border-radius: 4px;
	transition: color 160ms ease, background-color 160ms ease;
}

.lscart-item__remove:hover,
.lscart-item__remove:focus-visible {
	color: #fff;
	background: var(--lscart-fill);
}

.lscart-item__remove svg {
	width: 12px;
	height: 12px;
}

/* --------------------------------------------------------------- quantity */

.lscart-qty {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--ls-hairline-input, rgba(255, 255, 255, 0.18));
	border-radius: var(--lscart-radius);
	overflow: hidden;
	height: 46px;
}

.lscart-qty--fixed {
	padding: 0 10px;
	color: var(--lscart-soft);
	font-size: var(--ls-small, 14px);
	line-height: 44px;
	border-style: dashed;
}

.lscart .lscart-qty__btn {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--lscart-text);
	font-size: var(--ls-body, 16px);
	line-height: 1;
	cursor: pointer;
	transition: background-color 160ms ease;
}

.lscart-qty__btn:hover {
	background: var(--lscart-raised);
}

.lscart .lscart-qty__input {
	flex: 0 0 48px;
	width: 48px;
	height: 44px;
	padding: 0;
	border: 0;
	border-left: 1px solid var(--lscart-line-faint);
	border-right: 1px solid var(--lscart-line-faint);
	background: transparent;
	color: var(--lscart-text);
	font-family: inherit;
	font-size: var(--ls-body, 16px);
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.lscart .lscart-qty__input::-webkit-outer-spin-button,
.lscart .lscart-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.lscart .lscart-qty__input:focus {
	outline: none;
	box-shadow: var(--ls-focus-ring, 0 0 0 3px rgba(255, 0, 68, 0.25));
}

/* ---------------------------------------------------------------- footer */

.lscart-totals {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.lscart-totals__label {
	font-family: var(--lscart-display);
	font-size: var(--ls-h5, 16px);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--ls-tracking-caps, .06em);
	color: var(--lscart-muted);
}

.lscart-totals__value {
	font-size: var(--ls-price-total, 24px);
	font-weight: 700;
}

.lscart-note {
	margin: 4px 0 14px;
	color: var(--lscart-soft);
	font-size: var(--ls-caption, 12px);
}

.lscart-actions {
	display: grid;
	gap: 8px;
}

.lscart-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--ls-btn-h, 48px);
	padding: 0 20px;
	border: 1px solid transparent;
	border-radius: var(--lscart-radius);
	font-family: var(--lscart-display);
	font-size: var(--ls-btn-font, 16px);
	font-weight: 700;
	letter-spacing: var(--ls-tracking-button, 0.12em);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.lscart-btn--primary {
	background: var(--lscart-fill);
	color: #fff;
}

.lscart-btn--primary:hover,
.lscart-btn--primary:focus-visible {
	background: var(--ls-red-hover, #d9003a);
	color: #fff;
}

.lscart-btn--ghost {
	background: transparent;
	border-color: var(--lscart-line);
	color: var(--lscart-text);
}

.lscart-btn--ghost:hover,
.lscart-btn--ghost:focus-visible {
	border-color: var(--lscart-text);
	color: var(--lscart-text);
}

/* ------------------------------------------------------------ empty state */

.lscart-empty {
	padding: 48px 12px;
	text-align: center;
	color: var(--lscart-muted);
}

.lscart-empty svg {
	width: 40px;
	height: 40px;
	opacity: 0.35;
}

.lscart-empty__text {
	margin: 14px 0 20px;
	font-size: var(--ls-body, 16px);
}

/* --------------------------------------------------------------- skeleton */

.lscart-skeleton {
	padding-top: 14px;
}

.lscart-skeleton span {
	display: block;
	height: 64px;
	margin-bottom: 16px;
	border-radius: var(--lscart-radius);
	background: linear-gradient(90deg, var(--lscart-raised) 25%, rgba(255, 255, 255, 0.07) 37%, var(--lscart-raised) 63%);
	background-size: 400% 100%;
	animation: lscart-shimmer 1.4s ease infinite;
}

@keyframes lscart-shimmer {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

.lscart-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ toast */

.lscart__toast {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 14px;
	border-radius: var(--lscart-radius);
	background: var(--ls-surface-raised, #1f1f1f);
	border: 1px solid var(--lscart-line);
	color: var(--lscart-text);
	font-size: var(--ls-small, 14px);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 200ms ease, transform 200ms ease;
	z-index: 2;
}

.lscart__toast.is-on {
	opacity: 1;
	transform: translateY(0);
}

.lscart__toast[hidden] {
	display: none;
}

.lscart-toast__undo {
	border: 0;
	background: transparent;
	padding: 0;
	color: var(--lscart-accent);
	font: inherit;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
	font-size: var(--ls-body, 16px);
}

/* ----------------------------------------------------- add-to-cart button */

.lscart-loading {
	position: relative;
	opacity: 0.65;
	cursor: progress;
}

/* ----------------------------------------------------------------- mobile */

@media (max-width: 480px) {
	.lscart {
		/* 100% of the fixed-position containing block, not 100vw, which
		   would include the scrollbar and push the panel off-screen. */
		width: 100%;
	}

	.lscart__head,
	.lscart__body,
	.lscart__foot {
		padding-left: 16px;
		padding-right: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lscart,
	.lscart-scrim,
	.lscart__toast {
		transition: none;
	}

	.lscart-badge.is-pop,
	.lscart-badge.is-pop::after,
	.lscart-skeleton span {
		animation: none;
	}
}