/* =========================================================================
   BuySups — slide-out cart
   Ported from the BuyTides drawer, retinted to the BuySups palette:
   green #0f5132, purple #b18dff, slate #62798b, mist #d7dce1.
   ========================================================================= */

.bs-drawer,
.bs-drawer__scrim {
	/*
	 * Names are roles, not hues: --bs-navy is "the dark brand colour" (green
	 * here) and --bs-cyan is "the bright accent" (purple). Keeping the names
	 * means the ported rules below did not have to be rewritten.
	 */
	--bs-navy: #0f5132;
	--bs-navy-hover: #17693f;
	--bs-navy-active: #0a3a24;
	--bs-cyan: #b18dff;
	--bs-cyan-tint: #f4efff;
	--bs-cyan-track: #e2d6ff;
	--bs-teal: #7b4fd8;
	--bs-mist: #eff2f4;
	--bs-line: #d7dce1;
	--bs-line-soft: #e4e8ec;
	--bs-muted: #62798b;
	--bs-navy-soft: #3f5a4c;
	--bs-ink-1: #dcece3;
	--bs-ink-2: #a6c6b3;

	--bs-sans: "Inter", system-ui, -apple-system, sans-serif;
	--bs-display: "Outfit", "Inter", system-ui, sans-serif;
}

html.bs-drawer-open {
	overflow: hidden;
}

.bs-drawer *,
.bs-drawer *::before {
	box-sizing: border-box;
}

.bs-drawer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bs-drawer a {
	text-decoration: none;
}

.bs-drawer p {
	margin: 0;
}

.bs-drawer button:focus-visible,
.bs-drawer a:focus-visible {
	outline: 2px solid var(--bs-cyan);
	outline-offset: 2px;
}

/* ---------- Scrim ---------- */

.bs-drawer__scrim {
	position: fixed;
	inset: 0;
	/* Above the header (80), which was raised so an open mega menu covers page
	   content. The drawer still has to cover the header in turn. */
	z-index: 120;
	background: rgba(15, 81, 50, 0.55);
	backdrop-filter: blur(2px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.32s ease;
}

.bs-drawer__scrim.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* ---------- Panel ---------- */

.bs-drawer {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 121;
	height: 100vh;
	height: 100dvh;
	width: min(440px, 100vw);
	display: flex;
	flex-direction: column;
	background: var(--bs-mist);
	font-family: var(--bs-sans);
	color: var(--bs-navy);
	box-shadow: -24px 0 60px rgba(15, 81, 50, 0.24);
	transform: translateX(100%);
	transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

/*
 * Logged-in views put the admin bar over the top of both, so start them below
 * it. Core switches the bar to 46px tall at its own 782px breakpoint.
 */
.admin-bar .bs-drawer,
.admin-bar .bs-drawer__scrim {
	top: 32px;
}

.admin-bar .bs-drawer {
	height: calc(100vh - 32px);
	height: calc(100dvh - 32px);
}

@media screen and (max-width: 782px) {
	.admin-bar .bs-drawer,
	.admin-bar .bs-drawer__scrim {
		top: 46px;
	}

	.admin-bar .bs-drawer {
		height: calc(100vh - 46px);
		height: calc(100dvh - 46px);
	}
}

/* ---------- Head ---------- */

.bs-drawer__head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 22px;
	background: var(--bs-navy);
	color: #fff;
}

.bs-drawer__title {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-family: var(--bs-display);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.bs-drawer__badge {
	color: var(--bs-ink-2);
	font-weight: 500;
}

.bs-drawer__close {
	appearance: none;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s ease;
}

.bs-drawer__close:hover {
	background: rgba(255, 255, 255, 0.2);
}

/* ---------- Layout ---------- */

.bs-drawer__contents {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.bs-drawer__scroll {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 16px 18px 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	scrollbar-width: thin;
}

.bs-drawer__scroll::-webkit-scrollbar {
	width: 8px;
}

.bs-drawer__scroll::-webkit-scrollbar-thumb {
	background: #dcd0f7;
	border-radius: 8px;
}

/* ---------- Free shipping meter ---------- */

.bs-freeship {
	flex: 0 0 auto;
	background: var(--bs-cyan-tint);
	border: 1.5px solid var(--bs-cyan);
	border-radius: 16px;
	padding: 16px 18px;
}

.bs-freeship__row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.bs-freeship__label {
	flex: 1;
	min-width: 0;
	font-family: var(--bs-display);
	font-size: 15.5px;
	font-weight: 600;
	color: var(--bs-navy);
}

.bs-freeship__check {
	flex: 0 0 auto;
	color: var(--bs-teal);
	display: none;
}

.bs-freeship.is-unlocked .bs-freeship__check {
	display: block;
}

.bs-freeship__track {
	margin-top: 12px;
	height: 8px;
	border-radius: 999px;
	background: var(--bs-cyan-track);
	overflow: hidden;
}

.bs-freeship__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--bs-teal);
	transition: width 0.4s ease;
}

/* ---------- Promo card ---------- */

.bs-promo {
	flex: 0 0 auto;
	display: flex;
	gap: 11px;
	background: var(--bs-navy);
	border: 1.5px solid var(--bs-cyan);
	border-radius: 16px;
	padding: 15px 18px;
}

.bs-promo__icon {
	flex: 0 0 auto;
	color: var(--bs-cyan);
}

.bs-promo__body {
	flex: 1;
	min-width: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--bs-ink-1);
}

.bs-promo__body b {
	color: #fff;
}

.bs-promo__countdown {
	color: var(--bs-cyan);
	font-variant-numeric: tabular-nums;
}

/* ---------- Items ---------- */

.bs-drawer__items {
	flex: 0 0 auto;
	background: #fff;
	border-radius: 18px;
	padding: 6px 18px;
}

.bs-ci {
	display: flex;
	gap: 14px;
	padding: 18px 0;
	border-bottom: 1px solid var(--bs-line-soft);
}

.bs-ci:last-child {
	border-bottom: 0;
}

.bs-ci__thumb {
	position: relative;
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--bs-cyan-tint);
	border: 1px solid var(--bs-line);
	display: block;
}

.bs-ci__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bs-ci__body {
	flex: 1;
	min-width: 0;
}

.bs-ci__top {
	display: flex;
	gap: 10px;
	align-items: baseline;
}

.bs-ci__name {
	flex: 1;
	min-width: 0;
	font-family: var(--bs-display);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--bs-navy);
}

a.bs-ci__name:hover {
	color: var(--bs-teal);
}

.bs-ci__price {
	flex: 0 0 auto;
	font-family: var(--bs-display);
	font-size: 16.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.bs-ci__meta {
	font-size: 13.5px;
	color: var(--bs-muted);
	margin-top: 3px;
}

.bs-ci__meta p {
	margin: 0;
}

.bs-ci__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 11px;
}

.bs-qty {
	display: flex;
	align-items: center;
	gap: 2px;
	border: 1px solid var(--bs-line);
	border-radius: 999px;
	padding: 2px;
	background: #fff;
}

.bs-qty__btn {
	appearance: none;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--bs-navy);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}

.bs-qty__btn:hover:not(:disabled) {
	background: var(--bs-cyan-tint);
}

.bs-qty__btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.bs-qty__val {
	min-width: 24px;
	text-align: center;
	font-family: var(--bs-display);
	font-size: 15px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.bs-ci__remove {
	appearance: none;
	border: 0;
	background: transparent;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 5px;
	font-family: var(--bs-display);
	font-size: 14px;
	font-weight: 600;
	color: var(--bs-teal);
	cursor: pointer;
}

.bs-ci__remove:hover {
	color: var(--bs-navy);
}

.bs-ci__removeicon {
	width: 15px;
	height: 15px;
}

.bs-drawer__empty {
	padding: 22px 0;
	text-align: center;
	font-size: 14.5px;
	color: var(--bs-muted);
}

/* ---------- Summary ---------- */

.bs-drawer__summary {
	flex: 0 0 auto;
	/* Matched to the badge strip's own background so the licensed artwork sits
	   on the panel invisibly instead of on a white block inside a grey one. */
	background: #eff3f6;
	border-top: 1px solid var(--bs-line);
	padding: 18px 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.bs-drawer__line {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.bs-drawer__linelabel {
	flex: 1;
	min-width: 0;
	font-family: var(--bs-display);
	font-size: 19px;
	font-weight: 600;
}

.bs-drawer__linevalue {
	font-family: var(--bs-display);
	font-size: 23px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.bs-drawer__code {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	background: var(--bs-cyan-tint);
	border-radius: 14px;
	padding: 13px 15px;
}

.bs-drawer__codebadge {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 7px;
	background: var(--bs-teal);
	color: #fff;
	font-family: var(--bs-display);
	font-size: 13px;
	font-weight: 700;
}

.bs-drawer__codecopy {
	flex: 1;
	min-width: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--bs-navy-soft);
}

.bs-drawer__ship {
	font-size: 13px;
	line-height: 1.6;
	color: var(--bs-muted);
}

/* Gradient CTA: navy through to the brand blue, left to right. */
.bs-drawer__checkout {
	width: 100%;
	border: 0;
	border-radius: 14px;
	background: linear-gradient(90deg, #0a3a24 0%, #0f5132 38%, #2f8f5b 100%);
	color: #fff;
	font-family: var(--bs-display);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	padding: 18px 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	gap: 10px;
	box-shadow: 0 10px 24px rgba(15, 81, 50, 0.18);
	transition: filter 0.15s ease, box-shadow 0.15s ease;
}

/* buysups_icon() hard-codes stroke-width 1.6, which reads thin against 700
   weight text. Thickened here rather than in the helper so every other icon
   on the site keeps its original weight. */
.bs-drawer__checkouticon {
	width: 19px;
	height: 19px;
	flex: 0 0 auto;
	stroke-width: 2.6;
}

.bs-drawer__checkout:hover {
	color: #fff;
	filter: brightness(1.08);
	box-shadow: 0 14px 30px rgba(15, 81, 50, 0.24);
}

.bs-drawer__checkout:active {
	filter: brightness(0.96);
}

.bs-drawer__checkout[aria-disabled="true"] {
	opacity: 0.45;
	pointer-events: none;
	box-shadow: none;
}

/* A single licensed badge strip, used in place of the drawn cards. It cannot
   reflow, so it scales to the drawer width and is capped so the brands never
   grow past the size they were drawn at. The artwork is on white, which is
   also the summary's background, so no frame is needed around it.

   Scoped to .bs-drawer to outrank WooCommerce's own `.woocommerce img`, which
   is one class heavier than a bare `.bs-drawer__paystrip` and loads after us. */
.bs-drawer .bs-drawer__paystrip {
	display: block;
	width: 100%;
	max-width: 320px;
	height: auto;
	margin: 14px auto 0;
}

.bs-drawer__nudge {
	margin: 12px 0 0;
	font-family: var(--bs-display);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--bs-navy);
	text-align: center;
}

.bs-drawer__ruo {
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--bs-muted);
	text-align: center;
}

/* ---------- Busy + error ---------- */

.bs-drawer__spinner {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(239, 242, 244, 0.55);
	pointer-events: none;
}

.bs-drawer.is-busy .bs-drawer__spinner {
	display: flex;
}

.bs-drawer.is-busy .bs-drawer__contents {
	pointer-events: none;
}

.bs-drawer__spinner span {
	width: 26px;
	height: 26px;
	border: 2.5px solid var(--bs-line);
	border-top-color: var(--bs-teal);
	border-radius: 50%;
	animation: bs-drawer-spin 0.7s linear infinite;
}

@keyframes bs-drawer-spin {
	to { transform: rotate(360deg); }
}

.bs-drawer__error {
	display: none;
	margin: 0 18px;
	padding: 11px 14px;
	border-radius: 12px;
	background: #fdecea;
	color: #a4231a;
	font-size: 13px;
	line-height: 1.5;
}

.bs-drawer.is-error .bs-drawer__error {
	display: block;
}

/* ---------- Responsive ---------- */

@media (max-width: 480px) {
	.bs-drawer__head,
	.bs-drawer__summary {
		padding-inline: 16px;
	}

	.bs-drawer__scroll {
		padding-inline: 14px;
	}

	.bs-drawer__items {
		padding-inline: 14px;
	}

	.bs-ci__thumb {
		flex-basis: 62px;
		width: 62px;
		height: 62px;
	}
}

/* Phone: the summary was eating the screen — every extra line of copy in it
   pushed the cart items out of view. Below 640px it keeps the subtotal, the
   CTA and the payment cards; the code card, shipping note, nudge and
   research-use notice are all repeated on the checkout page. */
@media (max-width: 640px) {
	.bs-drawer__summary {
		gap: 10px;
		padding: 12px 16px 14px;
		padding-bottom: max(14px, env(safe-area-inset-bottom));
	}

	.bs-drawer__code,
	.bs-drawer__ship,
	.bs-drawer__nudge,
	.bs-drawer__ruo {
		display: none;
	}

	.bs-drawer__linelabel {
		font-size: 16px;
	}

	.bs-drawer__linevalue {
		font-size: 20px;
	}

	.bs-drawer__checkout {
		padding: 15px 0;
		font-size: 16px;
		border-radius: 12px;
	}

	.bs-drawer .bs-drawer__paystrip {
		max-width: 280px;
		margin-top: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bs-drawer,
	.bs-drawer__scrim,
	.bs-freeship__fill {
		transition: none;
	}

	.bs-drawer__spinner span {
		animation-duration: 2s;
	}
}