/**
 * ThornBloom Mini-Cart Drawer (.tb-mc)
 *
 * Slide-out fast-review cart surface. Inherits the midnight-blue token system.
 * Lifted from outputs/designs/midnight-blue-pages-2026-04-20/mini-cart/mockup.html
 *
 * z-index: 9050 - above sticky CTA (9000), below mobile menu (9100).
 *
 * @since 2.7.22 (chunk 3 - multi-build 2026-04-21)
 * @updated 2.7.25 - drawer formatting fixes:
 *                   - mutually exclusive empty/populated rendering
 *                   - balanced 24px internal padding (head/body/foot/items)
 *                   - lining + tabular numerals on qty/price (no Roman "I")
 *                   - close button reset (kills inherited blue button skin)
 *                   - item row rhythm + remove-X repositioned
 * @updated 2.7.27 - root-cause fixes for the items-row / blue-button bugs:
 *                   - Add scoped .tb-mc .tb-btn / --primary / --ghost / --full
 *                     rules. The drawer markup uses these classes but ZERO
 *                     base rules exist anywhere in the theme — Astra's blue
 *                     .button gradient was bleeding through. Now overridden
 *                     to gold-primary / ghost styles.
 *                   - Add WC widget-content reset: .tb-mc-items inherits the
 *                     `widget_shopping_cart_content` class so WC core's
 *                     `ul.product_list_widget li` and `... img` rules were
 *                     stretching the thumbnail full-drawer-width and breaking
 *                     the grid row. Reset list/img sizing inside .tb-mc-items.
 *                   - Belt-and-suspenders: when .tb-mc-items contains an
 *                     .tb-mc-item, force-hide .tb-mc-empty even if the
 *                     [hidden] attribute is missing (covers the case where
 *                     fragments updated items but JS sync hadn't fired yet).
 * @updated 2.7.28 - Three persistent bugs fixed at root:
 *                   - Empty state still leaking under populated cart: PHP
 *                     now does mutually exclusive if/else render. CSS gates
 *                     here are kept as harmless backup but no longer
 *                     load-bearing.
 *                   - Qty "1" rendering as "I": IvyPresto's `lnum` feature
 *                     wasn't taking on form inputs in some browsers. Switch
 *                     the qty input + stepper to a system sans stack with
 *                     tabular-nums so digits always look like digits.
 *                   - Left edge bleed: items wrapper, item row, footer were
 *                     flush-left because the WC `.widget_shopping_cart_content`
 *                     reset I added in 2.7.27 had `padding: 8px 16px` but
 *                     was being overridden by Astra widget styles deeper in
 *                     the cascade. Hardened with explicit 24px L/R gutter
 *                     on items wrapper + footer + item row, with !important.
 */

/* ======== Backdrop ======== */
.tb-mc-backdrop {
	position: fixed;
	inset: 0;
	background: color-mix(in srgb, var(--tb-midnight, #070A14) 65%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease-out;
	z-index: 9049;
}
.tb-mc-backdrop[data-open="true"] {
	opacity: 1;
	pointer-events: auto;
}

/* ======== Drawer shell ======== */
.tb-mc {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 420px;
	max-width: 100vw;
	background: var(--realm-bg, #070A14);
	color: var(--realm-cream, #ECE4D5);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform .3s ease-out;
	z-index: 9050;
	border-left: 1px solid var(--tb-border-gold, rgba(209,178,140,0.18));
	box-shadow: -30px 0 60px rgba(0, 0, 0, 0.55);
}
.tb-mc[data-open="true"] {
	transform: translateX(0);
}
@media (max-width: 767px) {
	.tb-mc { width: 88vw; }
}

/* ======== Header bar ======== */
/* Hardened padding — was rendering flush-left under some parent rules. */
.tb-mc .tb-mc-header {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 24px 18px 24px !important;
	margin: 0;
	box-sizing: border-box;
	width: 100%;
}
.tb-mc-header-label {
	font-family: var(--tb-font-heading, 'ivypresto-display', Georgia, serif);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-size: 12px;
	color: var(--realm-metallic, #D1B28C);
	margin: 0;
}
/* Close button — full reset against Astra/Woo .button skins which were
   bleeding a solid blue background through. !important is load-bearing
   here because Astra inlines high-specificity button rules. */
.tb-mc .tb-mc-close,
button.tb-mc-close {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--realm-metallic, #D1B28C) !important;
	font-size: 28px;
	line-height: 1;
	padding: 4px 8px;
	margin: 0;
	cursor: pointer;
	border-radius: 4px;
	transition: color .2s ease, background .2s ease, transform .2s ease;
	font-family: var(--tb-font-display, 'ivypresto-display', Georgia, serif);
	-webkit-appearance: none;
	appearance: none;
	min-width: 0;
	min-height: 0;
}
.tb-mc .tb-mc-close:hover,
button.tb-mc-close:hover {
	background: rgba(209,178,140,0.10) !important;
	color: #fff !important;
	transform: rotate(90deg);
}
.tb-mc .tb-mc-close:focus-visible,
button.tb-mc-close:focus-visible {
	outline: 2px solid var(--realm-metallic, #D1B28C);
	outline-offset: 3px;
}

/* ======== Hairline divider ======== */
.tb-mc-rule {
	height: 1px;
	background: var(--tb-border-strong, rgba(209,178,140,0.35));
	margin: 0 24px;
}

/* ======== Item list ======== */
/* Items wrapper inherits the drawer's symmetric 24px gutter. The inner
   .tb-mc-item cards still get their own 18/24 padding so type doesn't
   crash into the gold border. */
.tb-mc .tb-mc-items {
	flex: 1;
	overflow-y: auto;
	/* 24px L/R gutter to match header + footer rhythm. Vertical padding
	   stays at 8px so item-card padding does the heavy lifting. */
	padding: 8px 24px !important;
	margin: 0;
	box-sizing: border-box;
	scrollbar-width: thin;
	scrollbar-color: var(--realm-metallic, #D1B28C) transparent;
	/* Reset legacy WC widget container styles — .tb-mc-items also carries
	   the `widget_shopping_cart_content` class so fragments can target it.
	   WC core / Astra apply ul.product_list_widget rules that bleed in. */
	list-style: none;
}
.tb-mc-items::-webkit-scrollbar { width: 8px; }
.tb-mc-items::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--realm-metallic, #D1B28C) 40%, transparent);
	border-radius: 4px;
}
/* WC widget overrides — kill the cart_list / product_list_widget
   conventions that stretch thumbnails full-width and add float layouts.
   Without these, .tb-mc-item-thumb img inherits Woo's `width:32%` /
   `float:left` and the grid row collapses. */
.tb-mc .tb-mc-items.widget_shopping_cart_content,
.tb-mc .widget_shopping_cart_content {
	background: transparent !important;
	/* 24px L/R gutter so the item row, image, and any empty-state child
	   inherit the same horizontal indent as the header / footer. */
	padding: 8px 24px !important;
	margin: 0 !important;
	list-style: none !important;
}
.tb-mc .tb-mc-items img,
.tb-mc .widget_shopping_cart_content img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
	display: block !important;
}
.tb-mc .tb-mc-item-thumb {
	flex: none !important;
}
.tb-mc .tb-mc-item-thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.tb-mc .tb-mc-item {
	display: grid;
	grid-template-columns: 76px 1fr auto;
	gap: 14px;
	padding: 16px 16px 18px 16px;
	background: var(--realm-primary, #0E1426);
	margin: 0 0 8px 0;
	border-radius: 2px;
	align-items: flex-start;
	position: relative;
	transition: background-color .25s ease;
	box-sizing: border-box;
	border-bottom: 1px solid rgba(209, 178, 140, 0.08);
}
.tb-mc .tb-mc-item:last-child { margin-bottom: 0; border-bottom: 0; }

.tb-mc-item-thumb {
	width: 76px;
	height: 96px;
	background: var(--realm-secondary, #161E35);
	border: 1px solid var(--tb-border-gold, rgba(209,178,140,0.18));
	overflow: hidden;
}
.tb-mc-item-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tb-mc-item-body { min-width: 0; }
.tb-mc-item-realm {
	font-family: var(--tb-font-heading, 'ivypresto-display', Georgia, serif);
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--realm-metallic, #D1B28C);
	margin-bottom: 4px;
	display: block;
}
.tb-mc-item-title {
	font-family: var(--tb-font-display, 'ivypresto-display', Georgia, serif);
	font-weight: 600;
	font-size: 16px;
	color: var(--realm-cream, #ECE4D5);
	margin: 0 0 2px;
	line-height: 1.25;
	letter-spacing: 0;
}
.tb-mc-item-title a {
	color: inherit;
	text-decoration: none;
}
.tb-mc-item-title a:hover { color: var(--realm-metallic, #D1B28C); }
.tb-mc-item-title em { font-style: italic; font-weight: 500; }
.tb-mc-item-meta {
	color: var(--realm-taupe, #B8B3A8);
	font-size: 15px;
	font-style: normal;
	line-height: 1.45;
	margin: 0 0 10px;
}

/* ======== Quantity stepper - drawer scoped, smaller than full-cart ======== */
.tb-mc-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--tb-border-taupe, rgba(196,188,177,0.14));
	border-radius: 2px;
}
.tb-mc-qty-btn {
	width: 28px;
	height: 30px;
	background: transparent;
	border: none;
	color: var(--realm-cream, #ECE4D5);
	font-family: var(--tb-font-display, 'ivypresto-display', Georgia, serif);
	font-size: 15px;
	cursor: pointer;
	transition: color .2s ease, background .2s ease;
	padding: 0;
}
.tb-mc-qty-btn:hover {
	color: var(--realm-metallic, #D1B28C);
	background: color-mix(in srgb, var(--realm-metallic, #D1B28C) 8%, transparent);
}
.tb-mc-qty-input {
	width: 34px;
	height: 30px;
	background: transparent;
	border: none;
	color: var(--realm-cream, #ECE4D5);
	text-align: center;
	/* Switch to system sans for the qty digit so "1" cannot render as
	   capital "I". IvyPresto's `lnum` feature wasn't being honored on
	   <input> elements in some browser/font-loading combos, so the
	   font-feature-settings override (kept below as a backup) was
	   silently failing. System font + tabular-nums is bulletproof. */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif !important;
	font-size: 14px;
	font-weight: 500;
	-moz-appearance: textfield;
	padding: 0;
	/* Belt-and-suspenders: even with the system stack above, force lining +
	   tabular numerals so adjacent digits line up. */
	font-feature-settings: 'lnum' 1, 'tnum' 1 !important;
	font-variant-numeric: lining-nums tabular-nums !important;
}
.tb-mc-qty,
.tb-mc-qty-btn {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif !important;
	font-feature-settings: 'lnum' 1, 'tnum' 1 !important;
	font-variant-numeric: lining-nums tabular-nums !important;
}
/* Broaden the lnum/tnum coverage to anywhere a digit can appear inside
   the drawer item meta column — guards against a future markup change
   where the qty value lands in a span instead of an input. */
.tb-mc .tb-mc-item-meta,
.tb-mc .tb-mc-item-price,
.tb-mc .tb-mc-subtotal-amount,
.tb-mc bdi,
.tb-mc .woocommerce-Price-amount {
	font-feature-settings: 'lnum' 1, 'tnum' 1 !important;
	font-variant-numeric: lining-nums tabular-nums !important;
}
.tb-mc-qty-input::-webkit-inner-spin-button,
.tb-mc-qty-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.tb-mc-item-price {
	font-family: var(--tb-font-display, 'ivypresto-display', Georgia, serif);
	font-size: 17px;
	color: var(--realm-metallic, #D1B28C);
	text-align: right;
	align-self: flex-start;
	padding-top: 28px; /* 2026-05-17: push below the absolute X remove button */
	min-width: 64px;
	position: relative;
	z-index: 1; /* below the remove X (z-index: 4) */
	/* Match qty: lining + tabular nums so prices read as 49.99 not "I9.99". */
	font-feature-settings: 'lnum' 1, 'tnum' 1;
	font-variant-numeric: lining-nums tabular-nums;
}
.tb-mc-item-price .woocommerce-Price-amount,
.tb-mc-item-price bdi {
	font-feature-settings: inherit;
	font-variant-numeric: inherit;
}
/* Remove-X — pinned to top-right of the item card, above the price column
   so it never crashes into the product thumbnail. */
.tb-mc .tb-mc-item-remove {
	position: absolute;
	top: 6px;
	right: 8px;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--realm-taupe, #B8B3A8);
	font-size: 18px;
	line-height: 1;
	padding: 4px 8px; /* 2026-05-17: larger click target */
	cursor: pointer;
	transition: color .2s ease, background .2s ease;
	font-family: var(--tb-font-display, 'ivypresto-display', Georgia, serif);
	opacity: 0.7;
	text-decoration: none;
	border-radius: 3px;
	z-index: 4; /* 2026-05-17: above price z-index:1 */
}
.tb-mc-item-remove:hover { color: var(--realm-metallic, #D1B28C); opacity: 1; }
.tb-mc-item-remove:focus-visible { outline: 2px solid var(--realm-metallic, #D1B28C); outline-offset: 2px; }

/* ======== Highlight animation when item just added ======== */
@keyframes tb-mc-flash {
	0%   { background: var(--realm-primary, #0E1426); }
	18%  { background: color-mix(in srgb, var(--realm-metallic, #D1B28C) 22%, var(--realm-primary, #0E1426)); box-shadow: inset 0 0 0 1px var(--realm-metallic, #D1B28C); }
	100% { background: var(--realm-primary, #0E1426); box-shadow: inset 0 0 0 1px transparent; }
}
.tb-mc-item[data-just-added="true"] {
	animation: tb-mc-flash 1.6s ease-out 1;
}

/* ======== Empty state ======== */
.tb-mc-empty {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 48px 32px;
}
.tb-mc-empty-ornament {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 24px;
}
.tb-mc-empty-rule {
	display: inline-block;
	width: 32px;
	height: 1px;
	background: var(--realm-metallic, #D1B28C);
	opacity: 0.45;
}
.tb-mc-empty-eyebrow {
	color: var(--realm-metallic, #D1B28C);
	font-family: var(--tb-font-heading, 'ivypresto-display', Georgia, serif);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}
.tb-mc-empty-title,
.tb-mc-empty h2,
.tb-mc-empty h3 {
	font-family: var(--tb-font-display, 'ivypresto-display', Georgia, serif);
	font-size: 24px;
	color: var(--realm-cream, #ECE4D5);
	margin: 0 0 10px;
	font-weight: 600;
	font-style: italic;
}
.tb-mc-empty-body,
.tb-mc-empty p {
	color: var(--realm-taupe, #B8B3A8);
	font-style: normal;
	font-size: 16px;
	margin: 0 0 28px;
	max-width: 260px;
}

/* ======== Footer (sticky inside drawer) ======== */
.tb-mc .tb-mc-footer {
	border-top: 1px solid var(--tb-border-strong, rgba(209,178,140,0.35));
	padding: 18px 24px 22px 24px !important;
	margin: 0;
	box-sizing: border-box;
	background: var(--realm-bg, #070A14);
}
.tb-mc-subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding-bottom: 14px;
}
.tb-mc-subtotal-label {
	font-family: var(--tb-font-heading, 'ivypresto-display', Georgia, serif);
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--realm-cream, #ECE4D5);
}
.tb-mc-subtotal-amount {
	font-family: var(--tb-font-display, 'ivypresto-display', Georgia, serif);
	font-size: 26px;
	color: var(--realm-metallic, #D1B28C);
	font-weight: 600;
	font-feature-settings: 'lnum' 1, 'tnum' 1;
	font-variant-numeric: lining-nums tabular-nums;
}
.tb-mc-subtotal-amount .woocommerce-Price-amount,
.tb-mc-subtotal-amount bdi {
	font-family: inherit;
	color: inherit;
	font-size: inherit;
	font-feature-settings: inherit;
	font-variant-numeric: inherit;
}
.tb-mc-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.tb-mc-trust {
	font-family: var(--tb-font-body, 'Cormorant Garamond', Georgia, serif);
	font-style: normal;
	font-size: 14px;
	color: var(--realm-taupe, #B8B3A8);
	text-align: center;
	margin: 14px 0 0;
	line-height: 1.5;
}
.tb-mc-trust .dot {
	color: var(--realm-muted, #5A6580);
	margin: 0 6px;
}

/* ======== Drawer buttons — gold primary + ghost ========
   The drawer markup references .tb-btn / --primary / --ghost / --full
   but NO base rules for these classes exist anywhere else in the theme
   (templates.css only defines them scoped to .tb-about-v2 etc). Without
   these scoped overrides Astra's blue .button gradient bleeds through.
   All rules are scoped to .tb-mc so they cannot leak into other pages. */
.tb-mc .tb-btn,
.tb-mc a.tb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--tb-font-heading, 'ivypresto-display', Georgia, serif);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 14px 22px;
	border-radius: 2px;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .15s ease;
	box-sizing: border-box;
	line-height: 1.2;
	min-height: 0;
	-webkit-appearance: none;
	appearance: none;
	background-image: none !important;
	box-shadow: none !important;
}
.tb-mc .tb-btn--full,
.tb-mc a.tb-btn--full {
	width: 100%; font-size: 12px;
}
/* Primary — gold fill, midnight text. */
.tb-mc .tb-btn--primary,
.tb-mc a.tb-btn--primary {
	background: var(--realm-metallic, #D1B28C) !important;
	background-color: var(--realm-metallic, #D1B28C) !important;
	color: var(--tb-midnight, #070A14) !important;
	border: 1px solid var(--realm-metallic, #D1B28C) !important;
}
.tb-mc .tb-btn--primary:hover,
.tb-mc a.tb-btn--primary:hover {
	background: #E0C5A0 !important;
	background-color: #E0C5A0 !important;
	border-color: #E0C5A0 !important;
	color: var(--tb-midnight, #070A14) !important;
	transform: translateY(-1px);
}
.tb-mc .tb-btn--primary:focus-visible,
.tb-mc a.tb-btn--primary:focus-visible {
	outline: 2px solid var(--realm-cream, #ECE4D5);
	outline-offset: 3px;
}
/* Ghost — transparent fill, gold border + gold text. */
.tb-mc .tb-btn--ghost,
.tb-mc a.tb-btn--ghost {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--realm-metallic, #D1B28C) !important;
	border: 1px solid var(--realm-metallic, #D1B28C) !important;
}
.tb-mc .tb-btn--ghost:hover,
.tb-mc a.tb-btn--ghost:hover {
	background: color-mix(in srgb, var(--realm-metallic, #D1B28C) 12%, transparent) !important;
	color: var(--realm-cream, #ECE4D5) !important;
	border-color: var(--realm-metallic, #D1B28C) !important;
	transform: translateY(-1px);
}
.tb-mc .tb-btn--ghost:focus-visible,
.tb-mc a.tb-btn--ghost:focus-visible {
	outline: 2px solid var(--realm-metallic, #D1B28C);
	outline-offset: 3px;
}

/* ======== Mutually exclusive states ========
   When the cart has items, hide the empty block.
   When the cart is empty, hide the items list, footer, and divider rule.
   Belt-and-suspenders: PHP also gates these via the [hidden] attribute,
   but display: flex on .tb-mc-empty would override [hidden] — so we use
   the parent [data-empty] attribute as the single source of truth. */
.tb-mc:not([data-empty="true"]) .tb-mc-empty { display: none !important; }
.tb-mc[data-empty="true"] .tb-mc-items { display: none !important; }
.tb-mc[data-empty="true"] .tb-mc-footer { display: none !important; }
.tb-mc[data-empty="true"] .tb-mc-rule { display: none !important; }
/* Respect the HTML hidden attribute on the empty block when populated. */
.tb-mc-empty[hidden],
.tb-mc-footer[hidden] { display: none !important; }
/* Belt-and-suspenders: if the drawer holds at least one .tb-mc-item,
   hide the empty block regardless of [data-empty] / [hidden] state.
   This catches the race where WC fragments swap items in before the JS
   has run syncEmptyState() to update [data-empty] on the parent. */
.tb-mc:has(.tb-mc-items .tb-mc-item) .tb-mc-empty { display: none !important; }
.tb-mc:has(.tb-mc-items .tb-mc-item) .tb-mc-footer { display: block !important; }

/* ======== Edge case: hide View Full Cart on /cart/ page ======== */
body.woocommerce-cart .tb-mc-actions a[href*="/cart/"] { display: none; }

/* ======== Edge case: hide cart icon entirely on /checkout/ page ======== */
body.woocommerce-checkout .tbh-canonical-nav-cart { display: none; }

/* ======== Cart count badge - hide when empty ======== */
.tbh-canonical-cart-count[data-empty="true"] { display: none; }

/* ======== Body scroll lock helper (paired with JS) ======== */
body[data-mc-open="true"] { overflow: hidden; }

/* ======== Reduce motion ======== */
@media (prefers-reduced-motion: reduce) {
	.tb-mc,
	.tb-mc-backdrop,
	.tb-mc-item,
	.tb-mc-close { transition: none; }
	.tb-mc-item[data-just-added="true"] {
		animation: none;
		box-shadow: inset 0 0 0 1px var(--realm-metallic, #D1B28C);
	}
}

/* ========================================================================
   v2.7.59 — Mini-Cart Upsell Cards (.tb-mc-upsells / .tb-mc-upsell)
   ------------------------------------------------------------------------
   Compact bundle-deal cards inside the slide-out drawer. Renders one card
   per available upsell (Print TYC, Digital TYC, Wedding Website) when the
   cart has a bundle. Hidden as a sibling of .tb-mc-items via the `hidden`
   attribute, controlled by syncUpsellsState() in mini-cart.js.
   ======================================================================== */

.tb-mc-upsells {
	padding: 16px 20px 4px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	border-top: 1px solid var(--tb-border-taupe, rgba(196,188,177,0.14));
	background: rgba(0,0,0,0.18);
}

.tb-mc-upsells[hidden] {
	display: none;
}

.tb-mc-upsell {
	border: 1px solid var(--tb-border-gold, rgba(209,178,140,0.22));
	background: rgba(20,28,42,0.55);
	padding: 12px 14px;
	position: relative;
}

.tb-mc-upsell-eyebrow {
	margin: 0 0 8px;
	font-family: var(--tb-font-heading, 'ivypresto-display', Georgia, serif);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--realm-metallic, #D1B28C);
}

.tb-mc-upsell-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.tb-mc-upsell-thumb {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border: 1px solid rgba(209,178,140,0.28);
	flex-shrink: 0;
	border-radius: 0;
	display: block;
}

.tb-mc-upsell-info {
	flex: 1 1 auto;
	min-width: 0;
}

.tb-mc-upsell-title {
	margin: 0 0 2px;
	font-family: var(--tb-font-display, 'ivypresto-display', Georgia, serif);
	font-size: 0.94rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--realm-cream, #ECE4D5);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.tb-mc-upsell-sub {
	margin: 0 0 4px;
	font-family: var(--tb-font-body, 'Cormorant Garamond', Georgia, serif);
	font-style: normal;
	font-size: 0.9rem;
	line-height: 1.25;
	color: var(--realm-taupe, #B8B3A8);
}

.tb-mc-upsell-price {
	margin: 0;
	font-family: var(--tb-font-body, 'Cormorant Garamond', Georgia, serif);
	font-size: 0.88rem;
	color: var(--realm-taupe, #B8B3A8);
}

.tb-mc-upsell-price del {
	opacity: 0.55;
	margin-right: 6px;
}

.tb-mc-upsell-price strong {
	font-family: var(--tb-font-display, 'ivypresto-display', Georgia, serif);
	font-weight: 600;
	font-size: 0.98rem;
	color: var(--realm-metallic, #D1B28C);
}

.tb-mc-upsell-btn {
	flex-shrink: 0;
	background: var(--realm-metallic, #D1B28C);
	color: var(--realm-bg, #070A14);
	border: 1px solid var(--realm-metallic, #D1B28C);
	padding: 8px 14px;
	font-family: var(--tb-font-heading, 'ivypresto-display', Georgia, serif);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 2px;
	transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}

.tb-mc-upsell-btn:hover,
.tb-mc-upsell-btn:focus-visible {
	background: var(--realm-metallic-bright, #E1C29A);
	border-color: var(--realm-metallic-bright, #E1C29A);
	outline: none;
}

.tb-mc-upsell-btn[data-loading="true"],
.tb-mc-upsell-btn[disabled] {
	opacity: 0.6;
	cursor: wait;
}

@media (max-width: 480px) {
	.tb-mc-upsells { padding: 14px 16px 4px; gap: 10px; }
	.tb-mc-upsell { padding: 10px 12px; }
	.tb-mc-upsell-row { gap: 10px; }
	.tb-mc-upsell-thumb { width: 48px; height: 48px; }
	.tb-mc-upsell-title { font-size: 0.88rem; }
	.tb-mc-upsell-sub { font-size: 0.9rem; font-style: normal; }
	.tb-mc-upsell-btn { padding: 7px 12px; font-size: 12px; }
}

/* v2-7-59-sentinel: mini-cart-upsells */

/* ========================================================================
   v2.7.62 — Wedding Website Upsell Cards (.tb-mc-wedding-upsells)
   Shown when product 913 (EF) or 914 (DR) is in the slide-out mini cart.
   Collection-specific accent colors via [data-collection] attribute.
   ======================================================================== */

.tb-mc-wedding-upsells {
	padding: 0 20px 8px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.tb-mc-wedding-upsells[hidden] {
	display: none !important;
}

.tb-mc-wupsell {
	background: var(--realm-primary, #0E1426);
	border: 1px solid rgba(209, 178, 140, 0.12);
	border-radius: 3px;
	padding: 12px 14px;
	position: relative;
	transition: border-color .2s ease;
}
.tb-mc-wupsell:hover {
	border-color: rgba(209, 178, 140, 0.28);
}

/* Collection-specific accent border */
.tb-mc-wupsell[data-collection="enchanted-forest"] {
	border-left: 3px solid #D1B28C;
}
.tb-mc-wupsell[data-collection="dark-romance"] {
	border-left: 3px solid #C4956A;
}

.tb-mc-wupsell-eyebrow {
	font-family: var(--tb-font-heading, 'ivypresto-display', Georgia, serif);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin: 0 0 6px;
	padding: 0;
}
/* EF eyebrow uses brand gold, DR uses candlelight amber */
.tb-mc-wupsell[data-collection="enchanted-forest"] .tb-mc-wupsell-eyebrow {
	color: #D1B28C; font-size: 12px;
}
.tb-mc-wupsell[data-collection="dark-romance"] .tb-mc-wupsell-eyebrow {
	color: #C4956A; font-size: 12px;
}

.tb-mc-wupsell-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.tb-mc-wupsell-info {
	flex: 1;
	min-width: 0;
}

.tb-mc-wupsell-title {
	font-family: var(--tb-font-display, 'ivypresto-display', Georgia, serif);
	font-size: 14px;
	font-weight: 600;
	color: var(--realm-cream, #ECE4D5);
	margin: 0 0 2px;
	line-height: 1.3;
}

.tb-mc-wupsell-sub {
	font-family: var(--tb-font-body, 'Cormorant Garamond', Georgia, serif);
	font-size: 14px;
	font-style: normal;
	color: var(--realm-taupe, #B8B3A8);
	margin: 0;
	line-height: 1.4;
}

.tb-mc-wupsell-action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.tb-mc-wupsell-price {
	font-family: var(--tb-font-display, 'ivypresto-display', Georgia, serif);
	font-size: 14px;
	font-weight: 600;
	font-feature-settings: 'lnum' 1, 'tnum' 1;
	font-variant-numeric: lining-nums tabular-nums;
}
.tb-mc-wupsell[data-collection="enchanted-forest"] .tb-mc-wupsell-price {
	color: #D1B28C;
}
.tb-mc-wupsell[data-collection="dark-romance"] .tb-mc-wupsell-price {
	color: #C4956A;
}

.tb-mc-wupsell-btn {
	font-family: var(--tb-font-heading, 'ivypresto-display', Georgia, serif);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 2px;
	border: none;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, transform .15s ease;
	line-height: 1;
}
/* EF button colors */
.tb-mc-wupsell[data-collection="enchanted-forest"] .tb-mc-wupsell-btn {
	background: #D1B28C;
	color: #070A14; font-size: 12px;
}
.tb-mc-wupsell[data-collection="enchanted-forest"] .tb-mc-wupsell-btn:hover,
.tb-mc-wupsell[data-collection="enchanted-forest"] .tb-mc-wupsell-btn:focus-visible {
	background: #e0c9a8;
	transform: translateY(-1px);
}
/* DR button colors */
.tb-mc-wupsell[data-collection="dark-romance"] .tb-mc-wupsell-btn {
	background: #C4956A;
	color: #070A14; font-size: 12px;
}
.tb-mc-wupsell[data-collection="dark-romance"] .tb-mc-wupsell-btn:hover,
.tb-mc-wupsell[data-collection="dark-romance"] .tb-mc-wupsell-btn:focus-visible {
	background: #d4ab84;
	transform: translateY(-1px);
}
/* Loading / disabled state */
.tb-mc-wupsell-btn[data-loading="true"],
.tb-mc-wupsell-btn[disabled] {
	opacity: 0.5;
	pointer-events: none;
	cursor: not-allowed;
}

@media (max-width: 767px) {
	.tb-mc-wedding-upsells { padding: 0 16px 6px; gap: 6px; }
	.tb-mc-wupsell { padding: 10px 12px; }
}

/* ========================================================================
   2026-09-03 - Suite-level upsell cards (.tb-mc-upsell--wedding: DB->DD,
   the Essentials cross-sell, and the DD->GWS card which also carries --gws)
   Rendered by tb_mc_render_gws_upsell() (inc/mini-cart.php). Its title
   carries the derived name AND price ("Want it all? The Grand Wedding Suite
   -> $249.99"), and its CTA ("Upgrade & replace") is the widest button in
   the drawer. With the base row (thumb | info | button on one line) the
   2-line clamp on .tb-mc-upsell-title cut the price off at 390 px AND at
   the 420 px desktop drawer (measured logged-out, Playwright). The DB->DD
   card ("Upgrade to Digital Deluxe - for just $40.00 more") clamped at
   390 px the same way, so the rule is scoped to every --wedding card
   (widened 2026-09-03 from --gws only): the row wraps, the button drops to
   its own full-width line, and the clamp is lifted so the whole label is
   always readable. Piece-type cards keep the base 2-line clamp.
   ======================================================================== */
.tb-mc-upsell--wedding .tb-mc-upsell-row {
	flex-wrap: wrap;
}
.tb-mc-upsell--wedding .tb-mc-upsell-info {
	flex: 1 1 160px;
}
.tb-mc-upsell--wedding .tb-mc-upsell-title {
	display: block;
	overflow: visible;
	text-overflow: clip;
	-webkit-line-clamp: unset;
	-webkit-box-orient: initial;
	white-space: normal;
}
.tb-mc-upsell--wedding .tb-mc-upsell-btn {
	flex: 1 1 100%;
	text-align: center;
	margin-top: 2px;
	text-decoration: none; font-size: 12px;
}

/* ========================================================================
   2026-09-11 — Mobile Thank You Card comparison line (.tb-mc-upsell-compare)
   Markup for this class shipped in tb_mc_render_wedding_upsells() the same
   day (inc/mini-cart.php) but no CSS rule was ever added for it, so the <p>
   fell through to whatever ambient paragraph size cascaded in from outside
   .tb-mc — rendering at roughly headline scale and pushing the card's
   thumbnail toward the vertical center of the whole row instead of sitting
   level with the title. Sized one step below .tb-mc-upsell-sub (the same
   card's "A mobile thank-you card..." line); the inline link reuses the
   site's existing gold-underline treatment (assets/css/templates.css
   .tb-prod-tabs__panel a) since the drawer itself had no prior underlined
   link to match. Scoped to .tb-mc-upsell--wedding so it only ever affects
   the wedding/website-cart upsell cards, never the piece-type cards above.
   ======================================================================== */
.tb-mc-upsell-compare {
	margin: 6px 0 0;
	font-family: var(--tb-font-body, 'Cormorant Garamond', Georgia, serif);
	font-style: normal;
	font-size: 0.88rem;
	line-height: 1.3;
	color: var(--realm-taupe, #B8B3A8);
}
.tb-mc-upsell-compare a {
	color: var(--realm-metallic, #D1B28C);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(209,178,140,0.4);
	transition: color .3s ease, text-decoration-color .3s ease;
}
.tb-mc-upsell-compare a:hover,
.tb-mc-upsell-compare a:focus-visible {
	color: var(--realm-cream, #ECE4D5);
	text-decoration-color: var(--realm-metallic, #D1B28C);
}
/* Keep the thumbnail top-aligned with the title when a card carries the
   compare line (currently only the website-cart Mobile Thank You Card),
   instead of centering against the card's full multi-line height. */
.tb-mc-upsell--wedding:has(.tb-mc-upsell-compare) .tb-mc-upsell-row {
	align-items: flex-start;
}
.tb-mc-upsell--wedding:has(.tb-mc-upsell-compare) .tb-mc-upsell-thumb {
	margin-top: 1px;
}
@media (max-width: 480px) {
	.tb-mc-upsell-compare { font-size: 0.88rem; font-style: normal; }
}

/* ========================================================================
   2026-09-19 - Drawer layout: one scroll region, pinned footer
   ------------------------------------------------------------------------
   BEFORE (measured live, logged out, at 390x844 / 360x740 / 414x896 and
   1280x800): .tb-mc was a flex column whose only scroller was .tb-mc-items
   (flex:1 + overflow-y:auto). An overflow value other than visible sets that
   flex item's automatic minimum size to 0, so once the upsell block grew to
   five cards (770px) the item list collapsed to its own 16px of padding, the
   line item was clipped out of sight behind the cards, and the footer landed
   at 862..1110 with the subtotal and both buttons below a 844px viewport.
   .tb-mc itself had overflow:visible, so there was no scrollable ancestor
   and the checkout button could not be reached at all, on phone or desktop.

   AFTER: the drawer itself is the single scroll region. Header and footer
   are sticky, the item rows keep their natural height directly under the
   header, and the upsells follow them in the same scroll flow. The footer
   uses margin-top:auto so it still sits at the bottom when the content is
   short, and sticky bottom:0 so it stays on screen when it is long.
   ======================================================================== */
.tb-mc {
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}
.tb-mc .tb-mc-header {
	position: sticky;
	top: 0;
	z-index: 5;
	flex: 0 0 auto;
	background: var(--realm-bg, #070A14);
}
.tb-mc .tb-mc-rule { flex: 0 0 auto; }
/* Natural height, no scroller of its own: the items can never be squeezed. */
.tb-mc .tb-mc-items {
	flex: 0 0 auto;
	overflow: visible;
	min-height: 0;
}
.tb-mc .tb-mc-upsells,
.tb-mc .tb-mc-wedding-upsells { flex: 0 0 auto; }
.tb-mc .tb-mc-footer {
	position: sticky;
	bottom: 0;
	z-index: 5;
	flex: 0 0 auto;
	margin-top: auto;
	background: var(--realm-bg, #070A14);
	padding: 18px 24px calc(22px + env(safe-area-inset-bottom, 0px)) 24px !important;
}

/* Phones: trim the footer and the upsell cards so the first item and the
   first card both sit above the fold. Thumbnail, eyebrow, title, price and
   the Add button all stay; only the description is clamped, to two lines. */
@media (max-width: 767px) {
	.tb-mc .tb-mc-footer {
		padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px)) 20px !important;
	}
	.tb-mc .tb-mc-subtotal { padding-bottom: 10px; }
	.tb-mc .tb-mc-subtotal-amount { font-size: 22px; }
	.tb-mc .tb-mc-actions { gap: 8px; }
	.tb-mc .tb-btn,
	.tb-mc a.tb-btn { padding: 12px 18px; font-size: 12px; }
	.tb-mc .tb-mc-trust { margin: 10px 0 0; font-size: 14px; font-style: normal; }
	.tb-mc .tb-mc-upsells { padding: 12px 16px 4px; gap: 10px; }
	.tb-mc .tb-mc-upsell { padding: 10px 12px; }
	.tb-mc .tb-mc-upsell-eyebrow { margin-bottom: 6px; font-size: 12px; }
	.tb-mc .tb-mc-upsell-sub {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden; font-style: normal; font-size: 0.9rem;
	}
}

/* The floating contact button (functions.php, thornbloom_floating_contact)
   is fixed at z-index 9998, above the drawer's 9050, and was sitting on top
   of the last card's Add button. body[data-mc-open="true"] is already set
   and cleared by mini-cart.js open() / close(), so no new JS is needed. */
body[data-mc-open="true"] #tb-contact-float,
body[data-mc-open="true"] .tb-contact-toggle,
body[data-mc-open="true"] .tb-contact-panel { display: none !important; }