/* wp-content/plugins/bb-cart-sub-upsell/assets/css/frontend.css. Captured from mybirdbuddy.com on 2026-10-29. Read-only: override in a variant instead of editing. */
/* BB Cart Sub-Upsell — frontend card (v1.0.5, Figma 48:9206 rebuild) */

.bbsu-card {
	position: relative;
	overflow: hidden;
	padding: 24px 14px;
	margin: 32px 0;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	box-sizing: border-box;
}
.bbsu-card *,
.bbsu-card *::before,
.bbsu-card *::after { box-sizing: border-box; }

.bbsu-card.is-loading { opacity: 0.7; pointer-events: none; }

/* Transient error message shown in-card when AJAX rejects. */
.bbsu-card__error {
	position: absolute;
	left: 16px; right: 16px; bottom: 16px;
	padding: 10px 14px;
	background: rgba(198, 40, 40, 0.92);
	color: #fff;
	font-size: 13px;
	border-radius: 8px;
	z-index: 3;
	animation: bbsu-fade-in 0.18s ease;
}
@keyframes bbsu-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Toggle (top-right) */
.bbsu-toggle {
	position: absolute;
	top: 24px;
	right: 24px;
	width: 56px;
	height: 32px;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.18);
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: background 0.18s ease;
	z-index: 2;
}
.bbsu-toggle__thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.18s ease, background 0.18s ease;
}
.bbsu-card[data-state="on"] .bbsu-toggle { background: var(--bbsu-accent, #00CC66); }
.bbsu-card[data-state="on"] .bbsu-toggle__thumb { transform: translateX(24px); }

/* Card body container */
.bbsu-card__inner {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bbsu-card__top-text {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.7;
}

/* Top two-column section (text + features) */
.bbsu-card__top {
	display: flex;
	flex-direction: row;
	gap: 32px;
	align-items: flex-start;
	padding-right: 72px; /* room for toggle */
}

/* Left column: icon + text */
.bbsu-card__left {
	display: flex;
	flex-direction: row;
	gap: 32px;
	align-items: flex-start;
	flex: 0 1 auto;
	min-width: 0;
}

.bbsu-card__icon {
	flex: 0 0 80px;
	width: 80px;
	height: 80px;
	border-radius: 8px;
	background: #FFFFFF;
	padding: 16px 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.bbsu-card__icon img {
	width: 40px;
	height: 40px;
	object-fit: contain;
	display: block;
}

.bbsu-card__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	flex: 1 1 auto;
	max-width: 260px; /* Figma: text column is 222px wide; cap for wider cards. */
}

.bbsu-card__headline {
	font-family: "Awesome Serif VAR", "AwesomeSerif", Georgia, "Times New Roman", serif;
	font-size: 24px;
	line-height: 26.4px;
	font-weight: 350;
	color: inherit;
	margin: 0;
}
.bbsu-card__headline .bbsu-accent,
.bbsu-card__headline em,
.bbsu-card__headline i {
	color: #FAC370;
	font-style: normal;
	font-weight: inherit;
}

.bbsu-card__name {
	font-family: "Inter", sans-serif;
	font-size: 16px;
	line-height: 19.2px;
	font-weight: 500;
	color: inherit;
	margin-top: 16px; /* 16 + 8 parent gap = 24px below headline */
}

.bbsu-card__price-stack {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 4px;
}

.bbsu-card__price-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
}
.bbsu-card__price-old {
	font-family: "Inter", sans-serif;
	font-size: 24px;
	line-height: 24px;
	font-weight: 400;
	color: #FFFFFF;
	text-decoration: line-through;
}
.bbsu-card__price-current {
	font-family: "Inter", sans-serif;
	font-size: 24px;
	line-height: 24px;
	font-weight: 700;
	color: #00CC66; /* default, can be overridden inline */
}
.bbsu-card__price-suffix {
	font-size: 14px;
	font-weight: 500;
	margin-left: 4px;
}

.bbsu-card__renew {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: flex-start;
}
.bbsu-card__renew-text {
	font-family: "Inter", sans-serif;
	font-size: 10px;
	line-height: 13px;
	font-weight: 400;
	color: inherit;
}
.bbsu-card__cancel-tag {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 4px 8px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.2);
	color: #FFFFFF;
	font-family: "Inter", sans-serif;
	font-size: 10px;
	line-height: 8px;
	font-weight: 500;
}
.bbsu-card__cancel-tag .bbsu-check {
	width: 12px;
	height: 12px;
	flex: 0 0 12px;
}

/* Right column: feature pills */
.bbsu-card__features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 0 0 343px;
	max-width: 343px;
}
.bbsu-feature {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	min-height: 48px;
	font-family: "Inter", sans-serif;
	font-size: 12px;
	line-height: 18px;
	font-weight: 500;
	color: inherit;
}
.bbsu-feature__icon {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
}
.bbsu-feature__icon svg,
.bbsu-feature__icon img {
	width: 32px;
	height: 32px;
	display: block;
	object-fit: contain;
}
.bbsu-feature__text {
	flex: 1 1 auto;
	min-width: 0;
	color: #FFF;
	font-family: "Inter", sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	line-height: 18px;
	letter-spacing: 0.2px;
}

/* Bottom image — Figma: image is symmetrically inset on both sides (left and right ≈ 112px).
   Left edge aligns with text column start (past the 80px icon + 32px gap).
   Right edge mirrors that inset so there's matching empty teal space on the right. */
.bbsu-card__image {
	margin: -30px 112px 0 112px;
	overflow: hidden;
	display: block;
}
.bbsu-card__image img {
	width: 100%;
	height: auto;
	display: block;
}

/* Pay-later block in right column — unchanged from v1.0.4 */
.bbsu-pay-later {
	margin: 0;
	padding: 0;
}
.bbsu-pay-later__title {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: #002914;
	line-height: 24px;
	margin: 0 0 8px;
}
.bbsu-pay-later__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.bbsu-pay-later__label-block { display: flex; flex-direction: column; }
.bbsu-pay-later__label {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #938B8B;
	line-height: 24px;
}
.bbsu-pay-later__trial {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 12px;
	font-weight: 500;
	color: #77B48C;
	line-height: 12px;
	margin-top: 4px;
}
.bbsu-pay-later__amount-block { display: flex; flex-direction: column; align-items: flex-end; }
.bbsu-pay-later__amount {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #070707;
	line-height: 24px;
	text-decoration-line: line-through;
}
.bbsu-pay-later__first {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 12px;
	font-weight: 500;
	color: #77B48C;
	line-height: 12px;
	margin-top: 4px;
	text-align: right;
}

/* Mobile */
@media (max-width: 767px) {
	.bbsu-card { padding: 20px 16px; margin: 24px 0; }
	.bbsu-toggle { top: 20px; right: 20px; }
	.bbsu-card__top {
		flex-direction: column;
		gap: 20px;
		padding-right: 64px;
	}
	.bbsu-card__left { gap: 16px; }
	.bbsu-card__icon { flex: 0 0 64px; width: 64px; height: 64px; padding: 12px 6px; }
	.bbsu-card__icon img { width: 36px; height: 36px; }
	.bbsu-card__headline { font-size: 20px; line-height: 22px; }
	.bbsu-card__price-old,
	.bbsu-card__price-current { font-size: 22px; line-height: 22px; }
	.bbsu-card__features { flex: 1 1 auto; max-width: none; }
	.bbsu-card__image { margin: 20px 0 0; } /* mobile: stacked layout, no icon offset */
}

/* v1.2.0 Cart Bundle (.com cart style) — values measured on mybirdbuddy.com/cart (computed, not the SCSS source:
   the old Tailwind text-sm is overridden there to 12px/15px #323232). v1.2.1: offsets pixel-matched. */
.bbsu-bundle-line {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 15px;
	color: #323232;
	margin-top: 5px;
}
.bbsu-sale__label {
	font-size: 12px;
	font-weight: 700;
	line-height: 18px;
	color: #D35E5E;
	padding-bottom: 5px;
	white-space: nowrap;
}
.lsbb-cart-row__info .lsbb-cart-row__price:has(.bbsu-sale) {
	margin-top: 3px;
}
.bbsu-sale__prices {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.bbsu-sale__regular {
	color: #003333;
	opacity: 0.5;
	text-decoration: line-through;
}

/* ------------------------------------------------------------------
 * C2.2 half-price banner (v1.4.0). Figma 8528:23428 (desktop) / 8528:23498 (mobile).
 * ------------------------------------------------------------------ */
.bbsu-hp {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 24px 0 0;
	padding: 24px;
	background: #003333;
	color: #ffffff;
	border-radius: 16px;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.bbsu-hp__text {
	flex: 1 1 auto;
	min-width: 0;
}
.bbsu-hp__head {
	display: flex;
	align-items: center;
	gap: 16px;
}
.bbsu-hp__icon {
	flex: none;
	width: 24px;
	height: 24px;
	color: #ffffff;
}
.bbsu-hp p {
	margin: 0;
	color: #ffffff;
}
.bbsu-hp .bbsu-hp__title {
	flex: 1 1 auto;
	font-size: 20px;
	font-weight: 700;
	line-height: 30px;
}
.bbsu-hp .bbsu-hp__benefits {
	margin-top: 4px;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}
.bbsu-hp .bbsu-hp__terms {
	margin-top: 8px;
	font-size: 12px;
	font-weight: 400;
	line-height: 18px;
}
.bbsu-hp__close {
	display: none;
	flex: none;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	color: #ffffff;
	cursor: pointer;
}
.bbsu-hp__add {
	flex: none;
	min-width: 128px;
	padding: 12px 48px;
	border: 0;
	border-radius: 27px;
	background: #00cc66;
	color: #ffffff;
	font: 700 16px/24px "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	cursor: pointer;
}
.bbsu-hp__add:hover,
.bbsu-hp__add:focus-visible {
	background: #00b85c;
}
.bbsu-hp__add[disabled] {
	opacity: 0.6;
	cursor: wait;
}
.bbsu-hp .bbsu-hp__error {
	flex-basis: 100%;
	font-size: 12px;
	line-height: 18px;
	color: #ffd1d1;
}
.bbsu-hp__error[hidden] {
	display: none;
}
.bbsu-hp.is-hidden {
	display: none;
}

@media (max-width: 767px) {
	.bbsu-hp {
		flex-direction: column;
		align-items: stretch;
	}
	.bbsu-hp__head {
		align-items: flex-start;
	}
	.bbsu-hp__icon {
		margin-top: 14px;
	}
	.bbsu-hp .bbsu-hp__title {
		line-height: 26px;
	}
	.bbsu-hp__close {
		display: block;
	}
	.bbsu-hp .bbsu-hp__benefits {
		margin-top: 16px;
		font-size: 14px;
		line-height: 20px;
	}
	.bbsu-hp .bbsu-hp__terms {
		margin-top: 4px;
		line-height: 16px;
	}
	.bbsu-hp__add {
		width: 100%;
	}
}

/* Checkout: first-year line under the recurring totals. */
.bbsu-first-year .lsbb-recurring-totals__value {
	font-weight: 700;
}

/* C2.3 trial framing, version B (v1.5.0). Figma 8534:27179 desktop / 8534:27249 mobile. */
.bbsu-tf-thumb {
	position: relative;
	display: block;
	width: 100%;
	height: 100%; /* the theme's img fills the 96px box (object-fit: contain); so must its wrapper */
}
.bbsu-tf-thumb .bbsu-tf-badge {
	position: absolute;
	top: 44%;
	right: 5%;
	width: 27%;
	height: auto;
	aspect-ratio: 1;
}
.bbsu-tf-desc {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 2px;
	font: 400 12px/18px "Inter", "Helvetica Neue", Arial, sans-serif;
	color: #282828;
}
.bbsu-tf-today {
	font-weight: 500;
	color: #335C5C;
}
.lsbb-order-summary:has(.bbsu-tf-sum) .lsbb-order-summary__list .cart-subtotal {
	display: none;
}
.bbsu-tf-sum .lsbb-os-row__label,
.bbsu-tf-sum__renews .lsbb-os-row__value {
	color: #938B8B;
}
.bbsu-tf-sum__due .lsbb-os-row__value {
	color: #070707;
}
.bbsu-tf-sum__total {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid rgba(147, 138, 138, 0.3);
}
.bbsu-tf-sum__heading {
	display: block;
	font: 700 16px/24px "Inter", "Helvetica Neue", Arial, sans-serif;
	color: #002914;
}
.bbsu-tf-sum__subtotal .lsbb-os-row__value {
	font-weight: 700;
	color: #070707;
}
.bbsu-tf-reassure {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 24px;
	margin: 16px 0 0;
	flex-basis: 100%;
	padding: 0;
	list-style: none;
	font: 400 12px/15px "Inter", "Helvetica Neue", Arial, sans-serif;
	color: #070707;
}
.bbsu-tf-reassure li {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
}
@media (max-width: 767px) {
	.bbsu-tf-desc {
		font-size: 14px;
		line-height: 17px;
		color: #335C5C;
		gap: 4px;
	}
}

/* C2.3 trial framing, checkout version B (v1.6.0). Built from the collapsed mobile frame 8534:33475. */
.bbsu-tf-co-sub {
	display: block;
	margin-top: 2px;
	font: 400 14px/20px "Inter", "Helvetica Neue", Arial, sans-serif;
	color: #938B8B; /* 1.6.5: Figma 8534:32566 / 8534:32822 */
}
.bbsu-tf-row .lsbb-review-order__item-stock,
.bbsu-tf-row .lsbb-review-order__item-variant {
	display: none; /* "In stock" and the variation title ("Yearly 1 month free trial") repeat the line above */
}
.lsbb-review-order:has(.bbsu-tf-co-first) .lsbb-recurring-totals,
.lsbb-review-order:has(.bbsu-tf-co-first) .bbsu-first-year {
	display: none;
}
/* 1.6.5: styled like the collapsed mobile frame 8534:33475: a grey label after a calendar icon (1.6.11),
   the amount bold (was a bold teal label). */
.bbsu-tf-co-first {
	gap: 12px;
}
.bbsu-tf-co-first .lsbb-review-order__row-label,
.bbsu-tf-msum-first__label {
	padding-left: 16px; /* 1.6.11: the 12px "Calendar 2" icon (Figma 8534:34946) sits in this space */
	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M7.46107 9.24998C7.12093 9.24998 6.83419 9.13256 6.60086 8.8977C6.36752 8.66284 6.25086 8.37534 6.25086 8.0352C6.25086 7.69505 6.36828 7.40832 6.60314 7.17498C6.838 6.94165 7.1255 6.82498 7.46564 6.82498C7.80579 6.82498 8.09252 6.94241 8.32586 7.17727C8.55919 7.41213 8.67586 7.69963 8.67586 8.03977C8.67586 8.37991 8.55843 8.66665 8.32357 8.89998C8.08871 9.13332 7.80121 9.24998 7.46107 9.24998ZM2.31444 11.1766C2.04355 11.1766 1.81079 11.0793 1.61617 10.8847C1.42154 10.69 1.32422 10.4573 1.32422 10.1864V2.56357C1.32422 2.29074 1.42154 2.05631 1.61617 1.8603C1.81079 1.66429 2.04355 1.56628 2.31444 1.56628H3.06336V1.27987C3.06336 1.1517 3.10921 1.04239 3.20092 0.951946C3.29263 0.861505 3.40176 0.816284 3.52831 0.816284C3.65841 0.816284 3.76888 0.861505 3.85972 0.951946C3.95055 1.04239 3.99597 1.1517 3.99597 1.27987V1.56628H8.00574V1.27987C8.00574 1.1517 8.0516 1.04239 8.14331 0.951946C8.23501 0.861505 8.34413 0.816284 8.47069 0.816284C8.60079 0.816284 8.71126 0.861505 8.80209 0.951946C8.89294 1.04239 8.93836 1.1517 8.93836 1.27987V1.56628H9.68727C9.9601 1.56628 10.1945 1.66429 10.3905 1.8603C10.5866 2.05631 10.6846 2.29074 10.6846 2.56357V10.1864C10.6846 10.4573 10.5866 10.69 10.3905 10.8847C10.1945 11.0793 9.9601 11.1766 9.68727 11.1766H2.31444ZM2.31444 10.1864H9.68727V4.87498H2.31444V10.1864ZM2.31444 4.12498H9.68727V2.56357H2.31444V4.12498Z' fill='%23938B8B'/%3E %3C/svg%3E") left center / 12px 12px no-repeat;
}
.bbsu-tf-co-first .lsbb-review-order__row-label {
	color: #938B8B;
}
.bbsu-tf-co-first .lsbb-review-order__row-value {
	font-weight: 700;
	color: #070707;
}
.bbsu-tf-msum-first__label {
	white-space: nowrap; /* 243px of 324px with the amount; the theme's value column would wrap it by 5px */
}

/* 1.6.5, both versions: the cart's Proceed to checkout button as Figma 8534:26279 / 8534:27179: green #00CC66,
   56px tall (13px + 30px line + 13px), radius 27, a white check-circle icon before the text. The theme paints it
   #003333 on this store (base.css). */
body.woocommerce-cart .lsbb-os-actions a.checkout-button:not(#bbsu-x) { /* :not(#id) outranks the theme's mobile rule, which wins over five classes */
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #00CC66 !important;
	border-radius: 27px !important;
	padding: 12px 24px !important; /* 12 + 32px icon + 12 = 56 */
	line-height: 30px !important;
}
body.woocommerce-cart .lsbb-os-actions a.checkout-button:not(#bbsu-x)::before {
	content: "";
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1.64 -1.64 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.36' cy='10.36' r='9.37'/%3E%3Cpath d='M6.63 10.6l2.8 2.6 5.22-5.02'/%3E%3C/svg%3E") center / 32px 32px no-repeat;
}
/* Version B: "Cancel anytime · First payment · Set up in minutes" 16px under the button (Figma), not 52px. */
.lsbb-order-summary:has(.bbsu-tf-reassure) .lsbb-os-actions {
	padding-bottom: 0 !important;
}
.lsbb-order-summary:has(.bbsu-tf-reassure) .lsbb-os-actions a.checkout-button {
	margin-bottom: 0 !important;
}
.lsbb-order-summary:has(.bbsu-tf-reassure) .lsbb-os-actions::after {
	display: none; /* WooCommerce's clearfix is a flex item here and adds the 16px gap once more */
}

/* ------------------------------------------------------------------
 * C2.6 save card (v1.10.1). Figma "C2.6 — Remove save in the cart" (11110:16881): desktop 11150:28636,
 * mobile 11150:28665. Opens under the cart row whose Remove was tapped and pushes the cart down (no pop-up).
 * The layout follows the card's own width (container query), not the viewport: the cart column is
 * narrower than the screen on desktop and full width on tablets.
 * ------------------------------------------------------------------ */
.bbsu-save {
	container-type: inline-size;
	margin: 0;
	border-radius: 16px;
	background: #003333;
	color: #ffffff;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	overflow: hidden;
}
.bbsu-save[hidden] {
	display: none;
}
.bbsu-save:focus {
	outline: none;
}
/* Stacked (mobile frame): padding 24, no bottom padding, the picture runs to the bottom edge. */
.bbsu-save__inner {
	position: relative;
	padding: 24px 24px 0;
}
.bbsu-save__text {
	display: flex;
	flex-direction: column;
}
.bbsu-save p {
	margin: 0;
	color: #ffffff;
}
.bbsu-save .bbsu-save__title {
	font-size: 28px;
	font-weight: 500;
	line-height: 34px;
}
.bbsu-save .bbsu-save__intro {
	margin-top: 8px;
	font-size: 14px;
	font-weight: 400;
	line-height: 17px;
}
.bbsu-save__rows {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}
.bbsu-save__rows li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
}
.bbsu-save__rows svg {
	flex: none;
	width: 24px;
	height: 24px;
}
.bbsu-save .bbsu-save__trial-head {
	margin-top: 16px;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
}
.bbsu-save .bbsu-save__trial-note {
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
}
.bbsu-save__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding-top: 16px;
}
.bbsu-save__keep {
	align-self: stretch;
	min-height: 48px;
	margin: 0;
	padding: 12px 48px;
	border: 0;
	border-radius: 27px;
	background: #00cc66;
	color: #ffffff;
	font: 700 16px/24px "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	cursor: pointer;
}
.bbsu-save__keep:hover,
.bbsu-save__keep:focus-visible {
	background: #00b85c;
}
.bbsu-save__remove {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: #ffffff;
	font: 400 12px/15px "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	cursor: pointer;
}
.bbsu-save__remove:hover,
.bbsu-save__remove:focus-visible {
	text-decoration: underline;
}
.bbsu-save__keep[disabled],
.bbsu-save__remove[disabled] {
	opacity: 0.6;
	cursor: wait;
}
/* Mobile picture: 343 x 256 frame; the photo runs 22px past the card's right edge in Figma (clipped). */
.bbsu-save__pic {
	display: block;
	margin: 8px -24px 0; /* full card width: out of the 24px side padding */
}
.bbsu-save__pic img {
	display: block;
	width: 106.4%;
	max-width: none;
	height: auto;
}
.bbsu-save__pic--wide {
	display: none;
}
/* The row's own Remove hides while its card is open (Figma). */
.lsbb-cart-row.bbsu-save-open .lsbb-cart-row__remove {
	visibility: hidden;
}

/* Desktop frame (848 wide): padding 24/32, text column 404, the picture from x 471 / y 63, clipped at the right edge. */
@container (min-width: 720px) {
	.bbsu-save__inner {
		min-height: 412px;
		padding: 24px 32px;
	}
	.bbsu-save__text {
		position: relative;
		z-index: 1;
		width: 404px;
	}
	.bbsu-save .bbsu-save__title {
		font-size: 32px;
		line-height: 40px;
	}
	.bbsu-save .bbsu-save__intro {
		font-size: 16px;
		line-height: 24px;
	}
	.bbsu-save__rows {
		margin-top: 8px;
	}
	.bbsu-save__rows li {
		padding: 8px 16px;
	}
	.bbsu-save__rows svg {
		width: 20px;
		height: 20px;
	}
	.bbsu-save .bbsu-save__trial-note {
		line-height: 18px;
	}
	.bbsu-save__actions {
		align-items: flex-start;
		width: max-content;
		padding-top: 24px;
	}
	.bbsu-save__keep {
		align-self: auto;
	}
	.bbsu-save__remove {
		align-self: center;
	}
	.bbsu-save__pic--narrow {
		display: none;
	}
	.bbsu-save__pic--wide {
		display: block;
		position: absolute;
		top: 63px;
		left: 471px;
		width: 602px;
		margin: 0;
	}
	.bbsu-save__pic--wide img {
		width: 100%;
	}
}