/* moved to inline in BB_Sub_Cart::inline_styles_once() */

/* ---------------------------------------------------------------
   Cart-level "Subscribe & save" upsell on a one-time line, and the
   money-back guarantee under the checkout button (proposal 6/29).
   Styled to match the product page's Subscribe & Save card.
   --------------------------------------------------------------- */
/* The hook fires inside .fkcart-item-title-price, a flex row holding the title and the price, so
   the button was being squeezed into a narrow column and wrapping to four lines. Let that row wrap
   and give the button its own full-width line underneath. */
.bb-fk-sub-upsell { flex: 1 0 100% !important; width: 100% !important; order: 99 !important; margin-top: 6px !important; }

.bb-fk-sub-upsell {
    display: flex !important;
    margin-left: 14px !important; margin-right: 14px !important;
    width: auto !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    width: 100% !important;
    margin: 8px 0 2px !important;
    padding: 9px 12px !important;
    background: #fdf2f8 !important;
    border: 1.5px solid #f3c6de !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    text-align: left !important;
    transition: border-color .15s, background .15s !important;
}
.bb-fk-sub-upsell:hover { border-color: #e0409a !important; background: #fce7f3 !important; }
.bb-fk-sub-upsell.is-busy { opacity: .55 !important; cursor: default !important; }
.bb-fk-sub-upsell-main {
    font-size: 12.5px !important; font-weight: 800 !important; color: #b83280 !important;
    letter-spacing: .01em !important; line-height: 1.3 !important;
}
.bb-fk-sub-upsell-sub { font-size: 11px !important; color: #6b7280 !important; line-height: 1.35 !important; }

.bb-fk-guarantee {
    display: flex !important; align-items: flex-start !important; gap: 9px !important;
    margin: 10px 14px 4px !important; padding: 10px 12px !important;
    background: #f9fafb !important; border: 1px solid #e5e7eb !important; border-radius: 10px !important;
}
.bb-fk-guarantee-icon { font-size: 15px !important; line-height: 1.2 !important; color: #16a34a !important; }
.bb-fk-guarantee-text { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.bb-fk-guarantee-text strong { font-size: 12px !important; font-weight: 800 !important; color: #1f2937 !important; }
.bb-fk-guarantee-text span { font-size: 11px !important; color: #6b7280 !important; line-height: 1.35 !important; }

/* Founder / legacy rate notice at the top of the cart. */
.bb-fk-legacy-note {
    display: flex !important; align-items: flex-start !important; gap: 8px !important;
    margin: 8px 14px 0 !important; padding: 9px 12px !important;
    background: linear-gradient(135deg, #fdf2f8, #fff7fb) !important;
    border: 1px solid #f3c6de !important; border-radius: 10px !important;
    font-size: 11.5px !important; color: #6b3350 !important; line-height: 1.4 !important;
}
.bb-fk-legacy-pill {
    flex: 0 0 auto !important; background: #c83784 !important; color: #fff !important;
    font-size: 9.5px !important; font-weight: 800 !important; letter-spacing: .04em !important;
    text-transform: uppercase !important; padding: 3px 8px !important; border-radius: 999px !important;
    white-space: nowrap !important;
}
.bb-fk-sub-upsell-item {
    font-size: 10px !important; color: #9b7d8c !important; text-transform: uppercase !important;
    letter-spacing: .04em !important; font-weight: 700 !important; margin-top: 2px !important;
}

/* Cross-sell image and name link through to the product page. */
body .fkcart-modal a.bb-fk-cs-img { display: block !important; }
body .fkcart-modal .bb-fk-cs-name a { color: inherit !important; text-decoration: none !important; }
body .fkcart-modal .bb-fk-cs-name a:hover { text-decoration: underline !important; }

/* ---------------------------------------------------------------
   Aurora (dark glass) variants for the two blocks we add. Without
   these they render as light cards against the dark panel.
   --------------------------------------------------------------- */
body .fkcart-modal.bb-skin-aurora .bb-fk-sub-upsell,
body .fkcart-preview-ui.bb-skin-aurora .bb-fk-sub-upsell {
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,140,200,.38) !important;
    backdrop-filter: blur(6px) !important;
}
body .fkcart-modal.bb-skin-aurora .bb-fk-sub-upsell:hover,
body .fkcart-preview-ui.bb-skin-aurora .bb-fk-sub-upsell:hover {
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(255,140,200,.65) !important;
}
body .fkcart-modal.bb-skin-aurora .bb-fk-sub-upsell-main,
body .fkcart-preview-ui.bb-skin-aurora .bb-fk-sub-upsell-main { color: #ff9ed2 !important; }
body .fkcart-modal.bb-skin-aurora .bb-fk-sub-upsell-sub,
body .fkcart-preview-ui.bb-skin-aurora .bb-fk-sub-upsell-sub { color: rgba(243,232,255,.82) !important; }
body .fkcart-modal.bb-skin-aurora .bb-fk-sub-upsell-item,
body .fkcart-preview-ui.bb-skin-aurora .bb-fk-sub-upsell-item { color: rgba(243,232,255,.55) !important; }

body .fkcart-modal.bb-skin-aurora .bb-fk-guarantee,
body .fkcart-preview-ui.bb-skin-aurora .bb-fk-guarantee {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    backdrop-filter: blur(6px) !important;
}
body .fkcart-modal.bb-skin-aurora .bb-fk-guarantee-text strong,
body .fkcart-preview-ui.bb-skin-aurora .bb-fk-guarantee-text strong { color: #f3e8ff !important; }
body .fkcart-modal.bb-skin-aurora .bb-fk-guarantee-text span,
body .fkcart-preview-ui.bb-skin-aurora .bb-fk-guarantee-text span { color: rgba(243,232,255,.70) !important; }
body .fkcart-modal.bb-skin-aurora .bb-fk-guarantee-icon,
body .fkcart-preview-ui.bb-skin-aurora .bb-fk-guarantee-icon { color: #6ee7b7 !important; }

body .fkcart-modal.bb-skin-aurora .bb-fk-legacy-note,
body .fkcart-preview-ui.bb-skin-aurora .bb-fk-legacy-note {
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,140,200,.35) !important;
    color: rgba(243,232,255,.85) !important;
}


/* ---- Pass 10 (2026-09-04): item update/remove state. FunnelKit paints a white
   32px disc with a blur over the thumbnail; replace with a fade + slim pink ring,
   and stop clicks from selecting text across the cart. ---- */
body .fkcart-modal, body .fkcart-preview-ui { -webkit-user-select: none; user-select: none; }
body .fkcart-modal input, body .fkcart-modal textarea { -webkit-user-select: text; user-select: text; }
body .fkcart-modal .fkcart-loading::before { display: none !important; }
body .fkcart-modal .fkcart-loading::after { content: "" !important; display: block !important; position: absolute !important; left: 50% !important; top: 50% !important; width: 22px !important; height: 22px !important; margin: -11px 0 0 -11px !important; border: 2px solid rgba(200,55,132,.18) !important; border-top-color: #c83784 !important; border-radius: 50% !important; background: none !important; box-shadow: none !important; animation: bbfk-spin .7s linear infinite !important; }
body .fkcart-modal .fkcart-checkout--btn.fkcart-loading::after { border-color: rgba(255,255,255,.35) !important; border-top-color: #fff !important; }
body .fkcart-modal .fkcart-cart-item:has(.fkcart-loading) { opacity: .55 !important; transition: opacity .2s ease !important; }
@keyframes bbfk-spin { to { transform: rotate(360deg); } }

/* ---- Pass 10 (2026-09-05): subscribe upsell as a card, same language as "Pairs well with" ---- */
body .fkcart-modal .bb-fk-subup, body .bb-checkout-subup .bb-fk-subup { margin: 8px 22px 6px !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body .fkcart-modal .bb-fk-subup-title, body .bb-checkout-subup .bb-fk-subup-title { text-align: center !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: #6b7280 !important; margin: 0 0 10px !important; }
body .fkcart-modal .bb-fk-subup-card, body .bb-checkout-subup .bb-fk-subup-card { background: rgba(255,255,255,.62) !important; backdrop-filter: blur(20px) saturate(150%) !important; -webkit-backdrop-filter: blur(20px) saturate(150%) !important; border: 1px solid rgba(255,255,255,.9) !important; border-radius: 16px !important; padding: 12px !important; box-shadow: 0 1px 2px rgba(31,41,55,.04), inset 0 1px 0 rgba(255,255,255,.8) !important; }
body .fkcart-modal .bb-fk-subup-top, body .bb-checkout-subup .bb-fk-subup-top { display: flex !important; align-items: center !important; gap: 12px !important; }
body .fkcart-modal .bb-fk-subup-img, body .bb-checkout-subup .bb-fk-subup-img { flex: 0 0 56px !important; width: 56px !important; height: 56px !important; display: block !important; }
body .fkcart-modal .bb-fk-subup-img img, body .bb-checkout-subup .bb-fk-subup-img img { width: 56px !important; height: 56px !important; object-fit: contain !important; display: block !important; background: transparent !important; }
body .fkcart-modal .bb-fk-subup-name, body .bb-checkout-subup .bb-fk-subup-name { flex: 1 1 auto !important; min-width: 0 !important; font-size: 14.5px !important; font-weight: 800 !important; color: #18121f !important; line-height: 1.25 !important; }
body .fkcart-modal .bb-fk-subup-meta, body .bb-checkout-subup .bb-fk-subup-meta { display: block !important; margin-top: 3px !important; font-size: 12px !important; font-weight: 500 !important; color: #6b7280 !important; line-height: 1.35 !important; }
body .fkcart-modal .bb-fk-subup-price, body .bb-checkout-subup .bb-fk-subup-price { flex: 0 0 auto !important; text-align: right !important; }
body .fkcart-modal .bb-fk-subup-price strong, body .bb-checkout-subup .bb-fk-subup-price strong { display: block !important; font-size: 16px !important; font-weight: 800 !important; color: #18121f !important; line-height: 1.2 !important; }
body .fkcart-modal .bb-fk-subup-price small, body .bb-checkout-subup .bb-fk-subup-price small { display: inline-block !important; margin-top: 4px !important; padding: 2px 8px !important; background: #e9f7ef !important; color: #16a34a !important; font-size: 11px !important; font-weight: 800 !important; border-radius: 100px !important; line-height: 1.4 !important; }
body .fkcart-modal .bb-fk-subup-btn, body .bb-checkout-subup .bb-fk-subup-btn { display: block !important; width: 100% !important; margin: 12px 0 0 !important; padding: 12px 16px !important; border: 0 !important; border-radius: 14px !important; background: linear-gradient(135deg, #e85ca6, #a06ade) !important; color: #fff !important; font-family: inherit !important; font-size: 14px !important; font-weight: 800 !important; letter-spacing: 0 !important; text-transform: none !important; line-height: 1.2 !important; min-height: 0 !important; cursor: pointer !important; position: relative !important; overflow: hidden !important; box-shadow: 0 4px 10px rgba(232,92,166,.30), inset 0 1px 0 rgba(255,255,255,.25) !important; transition: transform .2s ease, box-shadow .2s ease !important; }
body .fkcart-modal .bb-fk-subup-btn:hover, body .bb-checkout-subup .bb-fk-subup-btn:hover { transform: translateY(-1px) !important; box-shadow: 0 6px 16px rgba(232,92,166,.4) !important; }
body .fkcart-modal .bb-fk-subup-btn.is-busy, body .bb-checkout-subup .bb-fk-subup-btn.is-busy, body .fkcart-modal .bb-fk-subup-btn:disabled { opacity: .55 !important; cursor: default !important; transform: none !important; }

/* ---- Pass 10 (2026-09-04): background-free thumbnails sit straight on the card:
   no white box, border or shadow around the image, image fits by contain. ---- */
body .fkcart-modal .fkcart-thumb-wrap .fkcart-image-wrapper,
body .fkcart-modal.bb-skin-lumen .fkcart-thumb-wrap .fkcart-image-wrapper,
body .fkcart-modal.bb-skin-aurora .fkcart-thumb-wrap .fkcart-image-wrapper { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; }
body .fkcart-modal .fkcart-thumb-wrap .fkcart-image,
body .fkcart-modal .bb-fk-clean-thumb { object-fit: contain !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; border: 0 !important; }
body .fkcart-modal .bb-fk-crosssell-item img.bb-fk-clean-thumb, body .fkcart-modal .bb-fk-cs-thumb img.bb-fk-clean-thumb { object-fit: contain !important; background: transparent !important; }

/* ---- Pass 10 (2026-09-05): remove control as a corner badge on the item card
   (owner: top-right, half inside / half outside), and a quiet price loading state. ---- */
body .fkcart-modal .fkcart--item { position: relative !important; overflow: visible !important; }
body .fkcart-modal .fkcart--item .fkcart-thumb-wrap { position: static !important; }   /* the × anchors to the card, not the thumb */
body .fkcart-modal .fkcart--item .fkcart-image-wrapper { position: relative !important; } /* keeps the loading ring on the thumb */
body .fkcart-modal .fkcart--item .fkcart-remove-item { top: -9px !important; right: -9px !important; left: auto !important; bottom: auto !important; width: 24px !important; height: 24px !important; z-index: 5 !important; }
/* Price / subtotal while a quantity updates: no gray shimmer block, no ring, just dimmed text. */
body .fkcart-modal .fkcart-loading .woocommerce-Price-amount.amount::after { display: none !important; animation: none !important; background: none !important; }
body .fkcart-modal .fkcart-loading .woocommerce-Price-amount, body .fkcart-modal .fkcart-loading .woocommerce-Price-amount * { color: inherit !important; }
body .fkcart-modal .fkcart-item-price.fkcart-loading, body .fkcart-modal .fkcart-summary-amount.fkcart-loading, body .fkcart-modal .fkcart-loading:has(.woocommerce-Price-amount) { opacity: .45 !important; }
body .fkcart-modal .fkcart-item-price.fkcart-loading::after, body .fkcart-modal .fkcart-summary-amount.fkcart-loading::after, body .fkcart-modal .fkcart-loading:has(.woocommerce-Price-amount)::after { display: none !important; }

/* ---- Pass 10 (2026-09-05): mark subscription lines vs one-time lines.
   Keyed off the "Subscription" item meta FunnelKit prints ([data-attr-key="variation-Subscription"]),
   so it cannot silently vanish the way the fkcart_after_item_meta badge did. ---- */
/* the meta row becomes: [SUBSCRIPTION pill] then the renewal line underneath */
/* Pass 11 #15 (client 2026-09-05): the SUBSCRIPTION tag sits directly under the product title, not
   under the variation line. Both tags are drawn on the title link itself so they always follow it. */
body .fkcart-modal a.fkcart-item-title { display: block !important; }
body .fkcart-modal a.fkcart-item-title::after { display: block; width: max-content; margin: 5px 0 2px; font-size: 10px; line-height: 1.6; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border-radius: 6px; padding: 1px 7px; }
body .fkcart-modal .fkcart--item:has([data-attr-key="variation-Subscription"]) a.fkcart-item-title::after { content: "Subscription"; color: #c72f85; background: #fdeef5; border: 1px solid #f6d4e5; }
body .fkcart-modal .fkcart--item:not(:has([data-attr-key="variation-Subscription"])) a.fkcart-item-title::after { content: "One-time purchase"; font-weight: 700; letter-spacing: .06em; color: #6b7280; background: #f3f4f6; border: 1px solid #e5e7eb; }
body .fkcart-modal .fkcart-attr-wrap:has(> [data-attr-key="variation-Subscription"]) { display: block !important; margin-top: 4px !important; }
body .fkcart-modal .fkcart-attr-key[data-attr-key="variation-Subscription"] { display: none !important; }
body .fkcart-modal .fkcart-attr-wrap:has(> [data-attr-key="variation-Subscription"]) .fkcart-attr-value { display: block !important; font-size: 12px !important; color: #6b7280 !important; line-height: 1.35 !important; }
body .fkcart-modal .fkcart--item:has([data-attr-key="variation-Subscription"]) { box-shadow: inset 3px 0 0 #e0409a, 0 1px 2px rgba(31,41,55,.04) !important; }
body .fkcart-modal .fkcart--item:has([data-attr-key="variation-Subscription"]) .fkcart-quantity-selector { display: none !important; }

/* Pass 11 #14: secondary one-time upgrade action under the subscribe button */
body .fkcart-modal .bb-fk-subup-alt, body .bb-checkout-subup .bb-fk-subup-alt { display: block; width: 100%; margin: 8px 0 0; padding: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; color: #6b7280 !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; line-height: 1.4 !important; text-align: center; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
body .fkcart-modal .bb-fk-subup-alt:hover, body .bb-checkout-subup .bb-fk-subup-alt:hover { color: #c72f85 !important; }
body .fkcart-modal .bb-fk-subup-alt.is-busy, body .bb-checkout-subup .bb-fk-subup-alt.is-busy { opacity: .5; pointer-events: none; }

/* Pass 11 review round 1 (item 14): the Save pill on the upsell card sat at 11px and APCA Lc 53 on its light green. 12px and a deeper green clear the floor. */
body .fkcart-modal .bb-fk-subup-price small, body .bb-checkout-subup .bb-fk-subup-price small { font-size: 12px !important; color: #166534 !important; background: #dcfce7 !important; font-weight: 700 !important; }

/* Pass 11 review round 2 (item 14): the one-line upgrade link needs a 40px tap target on phones */
body .fkcart-modal .bb-fk-subup-alt, body .bb-checkout-subup .bb-fk-subup-alt { min-height: 40px !important; padding: 8px 4px !important; display: flex !important; align-items: center; justify-content: center; }

/* 2026-09-08: two stacked pills under the subscription price ("25% off today" / "15% off refills") */
body .fkcart-modal .bb-fk-subup-price small, body .bb-checkout-subup .bb-fk-subup-price small { display: block !important; width: max-content !important; margin-left: auto !important; }

/* Pass 12 (2026-09-10): checkout-page upsell wrapper + paid-shipping note on the recurring row + hero shipping line */
body .bb-checkout-subup { margin: 0 0 18px; }
body .bb-checkout-subup .bb-fk-subup { margin: 0 !important; }
body .fkcart-modal .bb-fk-recurring-ship { display: block; width: 100%; font-size: 12px; color: #6b7280; margin-top: 4px; }
.bb-sub-hero-ship { font-size: 12.5px; color: #6b7280; margin-top: 2px; }

/* ================================================================
 * Checkout button: keep it legible while FunnelKit navigates
 * ================================================================
 *
 * The button label is "Checkout | $256.97", so the button ELEMENT contains a
 * .woocommerce-Price-amount. The price-loading rules above match on
 * `.fkcart-loading:has(.woocommerce-Price-amount)`, which was written for item
 * and summary prices but also caught the button the moment FunnelKit added
 * .fkcart-loading on click. Two things then happened to it:
 *
 *   opacity: .45                 -> the button faded
 *   ::after { display: none }    -> its spinner was suppressed
 *
 * and FunnelKit separately hides the button's own text and price while it
 * navigates. The customer was left looking at a blank pink slab with just the
 * divider between the two hidden spans, for the whole page transition.
 *
 * The button is excluded here rather than by narrowing the rules above, because
 * those rules are deliberately broad: any future element that happens to wrap a
 * price should still get the quiet fade. Only the button needs the opposite.
 */
body .fkcart-modal #fkcart-checkout-button.fkcart-loading,
body .fkcart-modal .fkcart-checkout--btn.fkcart-loading,
body .fkcart-modal .fkcart-checkout-wrap .fkcart-loading:has(.woocommerce-Price-amount) {
	opacity: 1 !important;
	position: relative !important;
}
body .fkcart-modal #fkcart-checkout-button.fkcart-loading::after,
body .fkcart-modal .fkcart-checkout--btn.fkcart-loading::after,
body .fkcart-modal .fkcart-checkout-wrap .fkcart-loading:has(.woocommerce-Price-amount)::after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	width: 22px !important;
	height: 22px !important;
	margin: -11px 0 0 -11px !important;
	border: 2px solid rgba(255, 255, 255, .35) !important;
	border-top-color: #fff !important;
	border-radius: 50% !important;
	background: none !important;
	box-shadow: none !important;
	animation: bbfk-spin .7s linear infinite !important;
}
/* The divider is the only thing that stayed visible, which is what made the
   button read as broken rather than busy. Hide it while loading. */
body .fkcart-modal #fkcart-checkout-button.fkcart-loading .fkcart-checkout--price {
	border-left-color: transparent !important;
}

/* ================================================================
 * Checkout button, correction to the block above (2026-09-29, 2nd pass)
 * ================================================================
 *
 * The first pass fixed the fade and the missing spinner but the button still
 * went blank, because it never addressed the rule that actually erases the
 * label. FunnelKit ships this in style.min.css:
 *
 *   #fkcart-modal .fkcart-checkout-wrap #fkcart-checkout-button.fkcart-loading div,
 *   #fkcart-modal ... .fkcart-loading div * { color: transparent !important; }
 *   #fkcart-modal ... .fkcart-loading .fkcart-checkout--icon { opacity: 0 }
 *
 * So FunnelKit deliberately blanks the text and shows a centred spinner in its
 * place. That is a defensible pattern on a button that submits in place, but
 * this one navigates to /checkout/, and on a slow connection the customer is
 * left staring at a blank pink slab wondering whether the click registered.
 *
 * Better: keep the label readable and put the spinner where the cart icon was,
 * since FunnelKit already hides that icon during loading. The button then reads
 * "(spinner) Checkout | $256.97" and obviously means "working", not "broken".
 *
 * Specificity note: FunnelKit's selector carries two IDs, so these have to match
 * it ID for ID. `body` is not enough on its own.
 */
body #fkcart-modal .fkcart-checkout-wrap #fkcart-checkout-button.fkcart-loading,
body #fkcart-modal .fkcart-checkout-wrap #fkcart-checkout-button.fkcart-loading div,
body #fkcart-modal .fkcart-checkout-wrap #fkcart-checkout-button.fkcart-loading div *,
body #fkcart-modal .fkcart-checkout-wrap #fkcart-checkout-button.fkcart-loading span {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

/* Spinner moves out of the centre and into the icon's slot, so it never sits on
   top of the text it is meant to accompany. */
body #fkcart-modal .fkcart-checkout-wrap #fkcart-checkout-button.fkcart-loading::after,
body .fkcart-modal #fkcart-checkout-button.fkcart-loading::after {
	left: 18px !important;
	top: 50% !important;
	width: 18px !important;
	height: 18px !important;
	margin: -9px 0 0 0 !important;
	border: 2px solid rgba(255, 255, 255, .35) !important;
	border-top-color: #fff !important;
}

/* The label is visible again, so the divider between "Checkout" and the price
   should be too. This supersedes the transparent-divider rule above. */
body .fkcart-modal #fkcart-checkout-button.fkcart-loading .fkcart-checkout--price {
	border-left-color: rgba(255, 255, 255, .45) !important;
}

/* Give the text room so it is not sitting under the spinner. */
body #fkcart-modal .fkcart-checkout-wrap #fkcart-checkout-button.fkcart-loading {
	padding-left: 42px !important;
	transition: padding-left .15s ease !important;
}

/* ================================================================================
 * SIDE CART: two clean redesigns (2026-09-29)
 * ================================================================================
 *
 * Brief: lose the pink grounds, keep pink for buttons and accents only, make the
 * panel read white and professional.
 *
 * Measured from the rendered panel rather than assumed:
 *
 *   .fkcart-preview-ui.bb-skin-lumen   the panel. Painted with a radial-gradient
 *                                      by the existing "lumen" skin, printed
 *                                      inline in the page by class-bb-sub-cart.php
 *   .fkcart--item.fkcart-panel         a line item. Note the DOUBLE dash; there is
 *                                      no .fkcart-cart-item in this markup
 *   .bb-fk-crosssell-card              our cross-sell card, translucent white
 *   .bb-fk-subup-card                  our subscribe upsell card
 *   .bb-fk-cs-add / .bb-fk-subup-btn   pink-to-purple gradient buttons
 *   #fkcart-checkout-button            the primary CTA
 *
 * SPECIFICITY. Lumen's rules are `body .fkcart-preview-ui.bb-skin-lumen` and are
 * printed inline, so they come after this stylesheet and win any tie. Every rule
 * below is prefixed `html body` to outrank them without resorting to a bare
 * !important arms race on a skin that is still the default.
 *
 * Switch with ?bb_cart_skin=a | b | off on dev.
 *   A  CLEAN WHITE  flat white panel, hairline dividers, one solid pink CTA
 *   B  SOFT LINEN   warm off-white ground, opaque white cards on a soft shadow
 * ------------------------------------------------------------------------------ */

/* ---------------- shared ---------------- */
html body .fkcart-preview-ui.bb-cart-a,
html body .fkcart-preview-ui.bb-cart-b {
	background-image: none !important;
	color: #16121a !important;
}
/* Buttons become one solid brand colour instead of a two-hue gradient. */
html body .bb-cart-a .bb-fk-cs-add,   html body .bb-cart-b .bb-fk-cs-add,
html body .bb-cart-a .bb-fk-subup-btn, html body .bb-cart-b .bb-fk-subup-btn,
html body .bb-cart-a #fkcart-checkout-button, html body .bb-cart-b #fkcart-checkout-button {
	background-image: none !important;
	background-color: #c83784 !important;
	border: 0 !important;
	color: #fff !important;
	font-weight: 700 !important;
	border-radius: 12px !important;
	box-shadow: 0 6px 16px rgba(200,55,132,.22) !important;
}
html body .bb-cart-a .bb-fk-cs-add:hover,   html body .bb-cart-b .bb-fk-cs-add:hover,
html body .bb-cart-a .bb-fk-subup-btn:hover, html body .bb-cart-b .bb-fk-subup-btn:hover,
html body .bb-cart-a #fkcart-checkout-button:hover, html body .bb-cart-b #fkcart-checkout-button:hover {
	background-color: #b22f74 !important;
}
/* The free-shipping progress bar loses the purple half. */
html body .bb-cart-a .fkcart-progress-bar > *, html body .bb-cart-b .fkcart-progress-bar > *,
html body .bb-cart-a .fkcart-reward-bar-progress, html body .bb-cart-b .fkcart-reward-bar-progress {
	background-image: none !important;
	background-color: #c83784 !important;
}
html body .bb-cart-a .fkcart-panel-title, html body .bb-cart-b .fkcart-panel-title,
html body .bb-cart-a .fkcart-slider-title, html body .bb-cart-b .fkcart-slider-title {
	color: #16121a !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em !important;
}

/* ============================ VARIANT A: CLEAN WHITE ============================ */
html body .fkcart-preview-ui.bb-cart-a { background-color: #ffffff !important; }
html body .bb-cart-a .fkcart--item.fkcart-panel {
	background-color: #fff !important;
	background-image: none !important;
	border: 0 !important;
	border-bottom: 1px solid #f0eef0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
}
html body .bb-cart-a .bb-fk-crosssell,
html body .bb-cart-a .bb-fk-crosssell-card,
html body .bb-cart-a .bb-fk-subup-card {
	background-color: #fff !important;
	background-image: none !important;
	border: 1px solid #efecef !important;
	border-radius: 12px !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
}
html body .bb-cart-a .fkcart-checkout-wrap,
html body .bb-cart-a .fkcart-panel-footer {
	background-color: #fff !important;
	background-image: none !important;
	border-top: 1px solid #eceaec !important;
}

/* ============================ VARIANT B: SOFT LINEN ============================ */
html body .fkcart-preview-ui.bb-cart-b { background-color: #faf8f9 !important; }
html body .bb-cart-b .fkcart--item.fkcart-panel {
	background-color: #fff !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 14px !important;
	box-shadow: 0 1px 2px rgba(22,18,26,.05), 0 1px 10px rgba(22,18,26,.035) !important;
	backdrop-filter: none !important;
	margin-bottom: 10px !important;
}
html body .bb-cart-b .bb-fk-crosssell,
html body .bb-cart-b .bb-fk-crosssell-card,
html body .bb-cart-b .bb-fk-subup-card {
	background-color: #fff !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 14px !important;
	box-shadow: 0 1px 2px rgba(22,18,26,.05), 0 1px 10px rgba(22,18,26,.035) !important;
	backdrop-filter: none !important;
}
html body .bb-cart-b .fkcart-checkout-wrap,
html body .bb-cart-b .fkcart-panel-footer {
	background-color: #fff !important;
	background-image: none !important;
	border-top: 1px solid #efecee !important;
	box-shadow: 0 -2px 14px rgba(22,18,26,.04) !important;
}

/* Variant B: stop the first card being clipped by the summary block (2026-09-29).
 * Giving the item cards a radius and a bottom margin pushed the last one under the
 * subtotal panel, which sits above them in the stacking order, so "1 Month Supply"
 * was sheared off mid-line. The list gets room to breathe and the panel is taken
 * out of the overlap. */
html body .bb-cart-b .fkcart-slider-body { overflow: visible !important; }
html body .bb-cart-b .fkcart--item.fkcart-panel:last-of-type { margin-bottom: 4px !important; }
html body .bb-cart-b .fkcart-subtotal,
html body .bb-cart-b .fkcart-summary,
html body .bb-cart-b .fkcart-cart-subtotal {
	position: relative !important;
	z-index: 1 !important;
	background: transparent !important;
	margin-top: 4px !important;
}
/* Keep the item's own content from being cropped by the card's new radius. */
html body .bb-cart-b .fkcart--item.fkcart-panel { overflow: visible !important; }

/* ============================================================================
 * Side cart: delete control and quantity stepper  (2026-09-29)
 *
 * Measured tree:
 *   .fkcart--item.fkcart-panel        position:relative   <- the offset parent
 *     .fkcart-thumb-wrap              position:STATIC
 *       .fkcart-remove-item           position:absolute   <- the x, 24x24
 *         span > svg                  the x glyph itself
 *     .fkcart-item-info
 *       .fkcart-qty-wrap
 *         .fkcart-quantity-selector   inline-flex, 96x30
 *           .fkcart-quantity-button.fkcart-quantity-down   30x30
 *           .fkcart-quantity__input                        32x30
 *           .fkcart-quantity-button.fkcart-quantity-up      30x30
 *
 * The x was sitting at the card's top-right with a negative offset, which put
 * half of it outside the 420px panel where it was clipped and barely clickable.
 * Because .fkcart-thumb-wrap is static, the button already resolves against
 * .fkcart--item, so moving it is a matter of offsets, not re-parenting.
 * ========================================================================== */

/* ---- delete: a trash button at the card's bottom-right ------------------ */
html body .bb-cart-b .fkcart--item .fkcart-remove-item {
	top: auto !important;
	left: auto !important;
	right: 14px !important;
	bottom: 12px !important;
	width: 30px !important;
	height: 30px !important;
	border-radius: 9px !important;
	border: 1px solid #ece4e9 !important;
	background: #fbf8fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa0a6' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2M19 6l-1 14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E") center / 15px 15px no-repeat !important;
	box-shadow: none !important;
	opacity: 1 !important;
	transition: background-color .15s, border-color .15s !important;
}
html body .bb-cart-b .fkcart--item .fkcart-remove-item:hover {
	background-color: #fdeef5 !important;
	border-color: #f0c6dc !important;
}
/* The original x glyph is inside; the trash is drawn by the background above. */
html body .bb-cart-b .fkcart--item .fkcart-remove-item > span,
html body .bb-cart-b .fkcart--item .fkcart-remove-item svg { display: none !important; }

/* Keep the card's own content clear of the trash lane. */
html body .bb-cart-b .fkcart--item.fkcart-panel { padding-bottom: 14px !important; }

/* ---- quantity: one segmented pill, not three loose buttons -------------- */
html body .bb-cart-b .fkcart-quantity-selector {
	height: 32px !important;
	border: 1px solid #ece4e9 !important;
	border-radius: 9px !important;
	background: #fbf8fa !important;
	overflow: hidden !important;
	box-shadow: none !important;
	width: auto !important;
	padding: 0 !important;
}
html body .bb-cart-b .fkcart-quantity-button {
	width: 32px !important;
	height: 30px !important;
	border: 0 !important;
	background: transparent !important;
	color: #6b7280 !important;
	font-size: 17px !important;
	line-height: 30px !important;
	font-weight: 500 !important;
	border-radius: 0 !important;
	transition: background-color .12s, color .12s !important;
}
html body .bb-cart-b .fkcart-quantity-button:hover {
	background: #f6e7f0 !important;
	color: #c83784 !important;
}
/* A hairline between the controls and the number, so it reads as one pill. */
html body .bb-cart-b .fkcart-quantity-button.fkcart-quantity-down { border-right: 1px solid #f0e8ed !important; }
html body .bb-cart-b .fkcart-quantity-button.fkcart-quantity-up   { border-left: 1px solid #f0e8ed !important; }
html body .bb-cart-b .fkcart-quantity__input {
	width: 34px !important;
	height: 30px !important;
	border: 0 !important;
	background: #fff !important;
	text-align: center !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: #1f2937 !important;
	font-variant-numeric: tabular-nums !important;
	box-shadow: none !important;
	padding: 0 !important;
	-moz-appearance: textfield !important;
}
html body .bb-cart-b .fkcart-quantity__input::-webkit-outer-spin-button,
html body .bb-cart-b .fkcart-quantity__input::-webkit-inner-spin-button {
	-webkit-appearance: none !important; margin: 0 !important;
}

/* The attribute lines (supply size, and the subscription terms line) run the full
 * 323px of the info column, so the bottom one passed underneath the trash button
 * and lost its last words. Reserve the trash lane. */
html body .bb-cart-b .fkcart--item .fkcart-item-meta-content { padding-right: 46px !important; }

/* ============================================================================
 * Side cart vertical budget on a short viewport  (2026-09-29)
 *
 * Measured on a 664px viewport:
 *   .fkcart-preview-ui            664   flex column
 *     .fkcart-slider-header        92
 *     .fkcart-reward-product-wrap 294   overflow-y:auto   <- the scroll container
 *       .fkcart-slider-body       410   (taller than its parent, so it scrolls)
 *     .fkcart-slider-footer       278
 *
 * The second card being "cut off by the subtotal" is not an overlay: the footer
 * begins at y=386 and the list is clipped there by its own scroll container.
 * That is correct behaviour, but with 92px of header and 278px of footer the
 * list only gets 294px of a 664px panel, so the cut lands mid-card with nothing
 * to say the list continues. Reclaim header height and make the cut legible.
 * ========================================================================== */
html body .bb-cart-b .fkcart-slider-heading.fkcart-panel {
	padding-top: 16px !important;
	padding-bottom: 16px !important;
	min-height: 0 !important;
}
html body .bb-cart-b .fkcart-modal-close {
	width: 38px !important;
	height: 38px !important;
	min-height: 0 !important;
	align-self: center !important;
}
/* Room for the last card to scroll clear of the footer edge. */
html body .bb-cart-b .fkcart-item-wrap { padding-bottom: 12px !important; }

/* The footer reads as a layer sitting above scrolling content, so a card
 * disappearing underneath it looks deliberate rather than broken. */
html body .bb-cart-b .fkcart-slider-footer {
	position: relative !important;
	z-index: 2 !important;
	box-shadow: 0 -10px 14px -10px rgba(31, 41, 55, .10) !important;
}

/* ============================================================================
 * LUMEN COLOUR OVERRIDE  (2026-09-30)
 *
 * Two live bugs, one cause. bb-subscriptions.js `applySkinClass()` re-adds
 * `bb-skin-lumen` to .fkcart-modal and .fkcart-preview-ui on every re-render,
 * while the skin mu-plugin was removing it. Measured on live, the panel
 * oscillated roughly every 500ms:
 *
 *   t=1083  cls="bb-cart-b"                panel=linen      pad=16px 0 12px
 *   t=1883  cls="bb-cart-b bb-skin-lumen"  panel=GRADIENT   pad=0 22px
 *   t=2183  cls="bb-cart-b"                panel=linen      pad=0 0 12px
 *
 * Every cycle repainted lumen's pink radial gradient and back: the flicker.
 * And lumen is what supplied the 22px side gutter, so stripping it left the
 * item cards flush to both edges.
 *
 * So the class now stays, and only its colours are overridden here. Lumen's own
 * rule is `body .fkcart-modal.bb-skin-lumen .fkcart-preview-ui` (0,3,1) with
 * !important, printed inline by class-bb-sub-cart.php, so these carry the extra
 * `.bb-cart-b` class and an `html` prefix to outrank it.
 * ========================================================================== */
html body .fkcart-modal.bb-skin-lumen.bb-cart-b .fkcart-preview-ui,
html body .fkcart-modal.bb-cart-b .fkcart-preview-ui.bb-skin-lumen,
html body .fkcart-preview-ui.bb-skin-lumen.bb-cart-b {
	background: #faf8f9 !important;
	background-image: none !important;
	color: #1f2937 !important;
}
/* The backdrop dim keeps lumen's scrim; only the purple cast is removed. */
html body .fkcart-modal-backdrop.bb-skin-lumen-dim.bb-cart-b {
	background: rgba(24, 24, 27, .40) !important;
}

/* Lumen's decorative gradients. Now that the class stays, these rules win where
 * ours used to, because lumen carries `.bb-skin-lumen` and is printed inline.
 * Measured set: every one is linear-gradient(135deg, #e85ca6, #a06ade) on our own
 * elements. Flatten them to the brand pink so the cart matches the rest of the UI.
 * The two-selector form covers the class landing on .fkcart-modal or on
 * .fkcart-preview-ui, which applySkinClass() sets on both. */
html body .fkcart-modal.bb-skin-lumen.bb-cart-b .bb-fk-cs-add,
html body .fkcart-preview-ui.bb-skin-lumen.bb-cart-b .bb-fk-cs-add {
	background: #c83784 !important;
	background-image: none !important;
	color: #fff !important;
	box-shadow: none !important;
}
html body .fkcart-modal.bb-skin-lumen.bb-cart-b .bb-fk-cs-add:hover,
html body .fkcart-preview-ui.bb-skin-lumen.bb-cart-b .bb-fk-cs-add:hover {
	background: #b22f74 !important;
	background-image: none !important;
}
html body .fkcart-modal.bb-skin-lumen.bb-cart-b .bb-fk-progress-fill,
html body .fkcart-preview-ui.bb-skin-lumen.bb-cart-b .bb-fk-progress-fill,
html body .fkcart-modal.bb-skin-lumen.bb-cart-b .bb-fk-progress-truck,
html body .fkcart-preview-ui.bb-skin-lumen.bb-cart-b .bb-fk-progress-truck {
	background: #c83784 !important;
	background-image: none !important;
}
/* The ship-bar amount is painted as gradient text (background-clip). Reset the
 * clip too, or the text stays transparent and disappears. */
html body .fkcart-modal.bb-skin-lumen.bb-cart-b .bb-fk-ship-bar strong,
html body .fkcart-preview-ui.bb-skin-lumen.bb-cart-b .bb-fk-ship-bar strong {
	background: none !important;
	background-image: none !important;
	-webkit-background-clip: border-box !important;
	background-clip: border-box !important;
	-webkit-text-fill-color: #c83784 !important;
	color: #c83784 !important;
}
/* Lumen prefixes the cart title with a decorative sparkle. */
html body .fkcart-modal.bb-skin-lumen.bb-cart-b .fkcart-title::before,
html body .fkcart-preview-ui.bb-skin-lumen.bb-cart-b .fkcart-title::before {
	content: none !important;
	display: none !important;
}

/* ============================================================================
 * MOBILE SIDE CART: price wrap and close-button alignment  (2026-09-30)
 *
 * Measured on live at 390px. .fkcart-item-info is a wrapping flex row, and both
 * .fkcart-item-meta and .fkcart-item-title-price are display:contents, so the
 * real flex items are:
 *
 *   a.fkcart-item-title        flex 1 1 auto   w=242  <- the whole row
 *   .fkcart-item-misc          flex 0 0 auto   w=97   <- holds the price
 *   .fkcart-item-meta-content  flex 1 0 100%
 *   .fkcart-qty-wrap           flex 1 0 100%
 *
 * The title's `flex: 1 1 auto` lets it grow to the container's full 242px, so
 * the 97px price box has nowhere to go and wraps onto its own line. Desktop has
 * 279px and happens to fit, which is why it only shows on mobile. Capping the
 * title leaves room for the price on the same row.
 * ========================================================================== */
@media (max-width: 767px) {
	html body .fkcart-modal.bb-skin-lumen.bb-cart-b .fkcart--item .fkcart-item-title,
	html body .fkcart-preview-ui.bb-skin-lumen.bb-cart-b .fkcart--item .fkcart-item-title {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		/* 97px price box + the container's 10px column-gap, plus a little slack.
		 * At 100px the row measured 249px against a 242px container and still wrapped. */
		max-width: calc(100% - 114px) !important;
	}
	html body .fkcart-modal.bb-skin-lumen.bb-cart-b .fkcart--item .fkcart-item-misc,
	html body .fkcart-preview-ui.bb-skin-lumen.bb-cart-b .fkcart--item .fkcart-item-misc {
		margin-left: auto !important;
		flex: 0 0 auto !important;
		white-space: nowrap !important;
	}

	/* Close button: its box already ends on the 22px card gutter, but the box is
	 * 60px wide and the glyph is centred in it, so the x reads ~40px from the edge
	 * while the title sits 22px from the left. Right-align the glyph inside the
	 * box rather than shrinking the box, so the tap target stays full size. */
	html body .fkcart-modal.bb-skin-lumen.bb-cart-b .fkcart-modal-close,
	html body .fkcart-preview-ui.bb-skin-lumen.bb-cart-b .fkcart-modal-close {
		justify-content: flex-end !important;
		padding-right: 0 !important;
		margin-right: 0 !important;
	}
}