/* UpsellStack — universal mini-cart upsell slider.
   Injected into arbitrary theme drawers, so layout-critical spacing/sizing is
   marked !important to survive aggressive theme resets (some themes zero
   padding/margin on drawer children). All sizing/colour still reads from the
   per-campaign CSS variables — the merchant's design settings win because they
   set those variables. */
.upsellstack-mc {
	padding: var(--us-mc-pad-v, 16px) var(--us-mc-pad-h, 16px) !important;
	margin: var(--us-mc-gap-top, 14px) 0 0 !important;
	background: var(--us-mc-bg, transparent) !important;
	border-top: 1px solid #eef0f3;
	box-sizing: border-box;
}
.upsellstack-mc * { box-sizing: border-box; }
@media (max-width: 768px) {
	.upsellstack-mc {
		padding: var(--us-mc-pad-v-m, var(--us-mc-pad-v, 16px)) var(--us-mc-pad-h-m, var(--us-mc-pad-h, 16px)) !important;
	}
}

.upsellstack-mc__heading {
	font-size: var(--us-mc-head-size, 13.5px);
	font-weight: 700;
	margin: 0 0 var(--us-mc-head-gap, 12px) !important;
	padding: var(--us-mc-head-pad, 0 3px) !important;
	line-height: 1.35;
	letter-spacing: .1px;
	text-align: var(--us-mc-head-align, left);
	color: var(--us-mc-head-color, #0f172a);
	background: var(--us-mc-head-bg, transparent);
	border-radius: 8px;
}

.upsellstack-mc__track {
	display: flex !important;
	gap: 10px !important;
	overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: none;
	scroll-behavior: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	margin: 0 -2px !important; padding: 2px !important;
	cursor: grab; user-select: none;
	touch-action: pan-x;
}
.upsellstack-mc__track::-webkit-scrollbar { display: none; }
.upsellstack-mc__track.is-grabbing { cursor: grabbing; }
.upsellstack-mc__track.is-grabbing img { pointer-events: none; }

.upsellstack-mc__card {
	flex: 0 0 var(--us-mc-basis, 47%) !important;
	display: flex !important; flex-direction: column !important;
	min-height: var(--us-mc-card-h, auto);
	/* Gentle, soft translucent border by default (controllable). */
	border: var(--us-mc-border-w, 1px) solid var(--us-mc-border-c, rgba(17, 24, 39, .08)) !important;
	border-radius: var(--us-mc-radius, 12px);
	/* Card padding is NOT forced — the image/button sit tight to the card edges;
	   the title/price carry their own inset (below) so only the title is spaced. */
	padding: var(--us-mc-card-pad, 0);
	background: var(--us-mc-card-bg, #fff);
	min-width: 0;
}

.upsellstack-mc__img {
	width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
	border-radius: 6px; margin: 0; padding: 0; background: #f6f7f9;
}
.upsellstack-mc__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Only the title and price get a guaranteed horizontal inset (independent of
   card padding), so the product title reads with space while images/buttons
   stay tight. */
.upsellstack-mc__name {
	font-size: 12px; line-height: 1.3; font-weight: 600;
	color: var(--us-mc-title-color, #111827);
	margin: 8px 0 var(--us-mc-title-gap, 6px) !important; padding: 0 8px !important; overflow-wrap: anywhere;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.upsellstack-mc__price { font-size: 12px; margin: auto 0 8px !important; padding: 0 8px !important; color: var(--us-mc-price-color, inherit); }
.upsellstack-mc__price del { color: #9ca3af; margin-right: 4px; font-weight: 400; }
.upsellstack-mc__price ins { color: var(--us-mc-price-color, #dc2626); font-weight: 700; text-decoration: none; }
/* Neutralise theme rules like `span.woocommerce-Price-amount.amount{padding-left:5px}`
   ONLY inside the slider price, so the price lines up with the title. Scoped to
   .upsellstack-mc__price, so prices elsewhere on the site are untouched. */
.upsellstack-mc__price .woocommerce-Price-amount,
.upsellstack-mc__price .woocommerce-Price-amount.amount,
.upsellstack-mc__price .amount,
.upsellstack-mc__price bdi { margin: 0 !important; padding: 0 !important; }

.upsellstack-mc__add {
	border: 0 !important;
	border-radius: var(--us-mc-cta-radius, 8px);
	/* Not forced — the button stays tight unless the merchant sets a height/pad. */
	min-height: var(--us-mc-cta-h, 34px);
	padding: var(--us-mc-cta-pad-y, 7px) 6px;
	margin: 0;
	font-size: 12px; font-weight: 700; cursor: pointer; width: 100%; line-height: 1.2;
	display: inline-flex; align-items: center; justify-content: center; text-align: center;
	background: var(--us-mc-cta-bg, #3b82f6);
	color: var(--us-mc-cta-color, #fff);
	transition: filter .15s ease;
}
.upsellstack-mc__add:hover { filter: brightness(0.95); }
.upsellstack-mc__add:disabled { opacity: .8; cursor: default; }

/* Slide navigation bars (optional; one per card, active is wider + coloured). */
.upsellstack-mc__nav {
	display: flex !important; justify-content: center; align-items: center;
	gap: 6px !important; margin: 12px 0 0 !important; padding: 0 !important;
}
.upsellstack-mc__dot {
	width: 14px !important; height: 5px !important; padding: 0 !important; margin: 0 !important;
	border: 0 !important; border-radius: 3px; cursor: pointer;
	background: var(--us-mc-nav-color, rgba(17, 24, 39, .18));
	transition: width .2s ease, background .2s ease;
}
.upsellstack-mc__dot.is-active {
	width: 22px !important;
	background: var(--us-mc-nav-active, var(--us-mc-cta-bg, #3b82f6));
}

/* Options popup for variable products that need a choice. */
.upsellstack-mc-pop {
	position: fixed; inset: 0; z-index: 2147483000;
	background: rgba(15, 23, 42, .55);
	display: flex; align-items: center; justify-content: center; padding: 16px;
}
.upsellstack-mc-pop__box {
	position: relative; width: 100%; max-width: 360px;
	background: #fff; border-radius: 14px; padding: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
	max-height: 85vh; overflow: auto;
}
.upsellstack-mc-pop__x {
	position: absolute; top: 8px; right: 10px; border: 0; background: none;
	font-size: 24px; line-height: 1; cursor: pointer; color: #6b7280;
}
.upsellstack-mc-pop__title { font-size: 15px; font-weight: 700; margin: 0 24px 4px 0; }
.upsellstack-mc-pop__hint { font-size: 12px; color: #6b7280; margin-bottom: 12px; }
.upsellstack-mc-pop__row { margin-bottom: 12px; }
.upsellstack-mc-pop__label { font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.upsellstack-mc-pop__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.upsellstack-mc-pop__opt {
	border: 1px solid #d1d5db; background: #fff; border-radius: 8px;
	padding: 6px 12px; font-size: 13px; cursor: pointer;
}
.upsellstack-mc-pop__opt.is-sel { border-color: #3b82f6; background: #eff6ff; color: #1e40af; font-weight: 700; }
.upsellstack-mc-pop__opt:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.upsellstack-mc-pop__add {
	margin-top: 6px; width: 100%; border: 0; border-radius: 10px;
	background: #3b82f6; color: #fff; font-weight: 700; font-size: 14px; padding: 12px; cursor: pointer;
}
.upsellstack-mc-pop__add:disabled { opacity: .7; }