/**
 * Velto Bundles - frontend styles.
 *
 * All selectors are prefixed with .velto- to avoid collisions with theme styles.
 * Intentionally minimal: structure and spacing only. Colors use WC variables
 * where available, with plain fallbacks for themes that don't set them.
 *
 * Visual style custom properties are set per-product via wp_add_inline_style()
 * scoped to .velto-bundle-offers[data-product-id="X"]. CSS var() fallbacks below
 * preserve the original appearance when no per-offer styles are saved.
 */

/* ---- Container ----------------------------------------------------------- */

.velto-bundle-offers {
	--velto-card-padding-y: 14px;
	--velto-card-padding-x: 16px;
	--velto-control-height: 32px;
	--velto-control-radius: 5px;
	--velto-inner-radius: 6px;
	--velto-card-border-color: #e5e7eb;
	--velto-card-selected-border-color: var( --velto-border-color, #8b5cf6 );
	--velto-card-selected-bg: #ffffff;
	--velto-muted-border: rgba( 0, 0, 0, 0.09 );
	margin: 24px 0;
}

.velto-bundle-offers__title {
	margin: 0 0 12px;
	font-weight: 600;
	font-size: 15px;
	color: var( --velto-title-color, #555555 );
	line-height: 1.3;
}

/* ---- Tier list ----------------------------------------------------------- */

.velto-bars {
	display: flex;
	flex-direction: column;
	gap: var( --velto-bar-gap, 8px );
}

/* ---- Individual tier card ------------------------------------------------ */

.velto-bar {
	position: relative; /* anchor for absolute-positioned badge */
	display: flex;
	align-items: center;
	gap: 14px;
	padding: var( --velto-card-padding-y ) var( --velto-card-padding-x );
	background: var( --velto-card-bg, #ffffff );
	border: none;
	border-radius: var( --velto-radius, 4px );
	box-shadow: inset 0 0 0 1px var( --velto-card-border-color );
	box-sizing: border-box;
	cursor: pointer;
	transition: background 0.15s ease, box-shadow 0.15s ease;
}

/* Extra top padding so badge's lower half doesn't overlap card content */
.velto-bar:has( .velto-bar__badge ) {
	padding-top: 22px;
}

.velto-bar:has( .velto-variant-slots ) {
	flex-wrap: wrap;
}

/* Add-ons wrap onto their own full-width row below the main deal content,
   so the title/price row keeps its original layout and is never squeezed. */
.velto-bar:has( .velto-bar__addons ) {
	flex-wrap: wrap;
	row-gap: 8px;
}

.velto-bar:hover {
	box-shadow: inset 0 0 0 1px var( --velto-border-color, #d8dbe1 );
}

/*
 * Selected state.
 * We use both the JS-toggled class and the CSS :has() selector as a
 * progressive enhancement - :has() handles the state without JS in
 * modern browsers; the class is the fallback for older ones.
 */
.velto-bar--selected,
.velto-bar:has( .velto-bar__radio:checked ) {
	background: var( --velto-card-selected-bg, var( --velto-card-bg-selected, #ffffff ) );
	box-shadow: inset 0 0 0 2px var( --velto-card-selected-border-color );
}

/* ---- Radio input --------------------------------------------------------- */

/*
 * Use .velto-bundle-offers scope to beat theme/WC specificity.
 * Many themes + WooCommerce ship global rules like
 *   input { display: block; width: 100%; margin: 0 0 1em; }
 * which collapse the radio to full-row width and push .velto-bar__body
 * onto its own line, making the radio appear above card content.
 * !important on width/height/margin ensures we win that fight.
 */
.velto-bundle-offers .velto-bar__radio {
	flex: 0 0 auto;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	display: inline-block;
	cursor: pointer;
	accent-color: var( --wp--preset--color--primary, #7f54b3 );
	outline: none;
}

/* Keyboard focus: visible glow ring when tabbing between tiers */
.velto-bar:focus-within {
	box-shadow: inset 0 0 0 2px var( --velto-card-selected-border-color );
}

/* ---- Tier body - row: info left, pricing right --------------------------- */

.velto-bar__body {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex: 1;
	min-width: 0; /* Prevent overflow in narrow columns */
}

/* Left column: qty + label */
.velto-bar__info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

/* Right column: price rows stacked */
.velto-bar__pricing {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1px;
	flex-shrink: 0;
	text-align: right;
}

/* ---- Badge - two-layer ribbon: outer wrapper + inner content ------------- */

/*
 * Outer wrapper: transparent, positioned so the whole badge floats 8px above
 * the card's top border. z-index: 1 keeps it above the card's box-shadow.
 */
.velto-bar__badge {
	position: absolute;
	top: -8px;
	right: var( --velto-radius, 4px );
	z-index: 1;
	background: transparent;
	font-size: 11px;
}

/*
 * Inner content: the visible coloured pill. margin: 0 8px reserves space on
 * each side for the fold-tab triangles on ::before / ::after.
 * --_bg caches the badge colour so ::before and ::after can reference it
 * without repeating the full var() fallback chain.
 */
.velto-bar__badge__content {
	--_bg: var( --velto-badge-bg, #7f54b3 );
	position: relative;
	background: var( --_bg );
	color: var( --velto-badge-color, #ffffff );
	font-weight: 700;
	line-height: 1;
	margin: 0 8px;
	padding: 6px 8px;
	border-radius: 0 0 4px 4px;
	white-space: nowrap;
}

/*
 * Fold tabs - CSS triangles that fill the 8px margin gap at each top corner.
 * ::before sits at the left gap, ::after at the right. Both use the badge
 * colour darkened via filter: brightness() to create the ribbon fold shadow.
 */
.velto-bar__badge__content::before,
.velto-bar__badge__content::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	box-sizing: content-box;
	width: 0;
	height: 0;
	border-bottom: 8px solid var( --_bg );
	filter: brightness( 0.65 );
}

.velto-bar__badge__content::before {
	right: 100%;
	border-left: 8px solid transparent;
}

.velto-bar__badge__content::after {
	left: 100%;
	border-right: 8px solid transparent;
}

/* ---- Quantity line ------------------------------------------------------- */

.velto-bar__qty {
	font-weight: var( --velto-bar-title-weight, 700 );
	font-size: var( --velto-bar-title-size, 16px );
	color: var( --velto-bar-title-color, inherit );
	line-height: 1.3;
	overflow-wrap: break-word;
	word-break: normal;
}

/* ---- Label line ---------------------------------------------------------- */

.velto-bar__label {
	font-size: var( --velto-bar-subtitle-size, 13px );
	font-weight: var( --velto-bar-subtitle-weight, 400 );
	color: var( --velto-bar-subtitle-color, #555555 );
	line-height: 1.4;
}

/* ---- Price lines -------------------------------------------------------- */

.velto-bar__price-line {
	font-size: var( --velto-price-size, 18px );
	font-weight: 400;
	color: var( --velto-price-color, #333333 );
	line-height: 1.25;
	white-space: nowrap;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0;
}

/* ---- Internal variant slots --------------------------------------------- */

.velto-variant-slots {
	display: none;
	flex-direction: column;
	gap: 6px;
	flex: 0 0 100%;
	width: 100%;
	margin-top: 8px;
	padding: 0;
	box-sizing: border-box;
}

.velto-variant-slots__header {
	font-size: 12px;
	font-weight: 500;
	color: var( --velto-bar-subtitle-color, #555555 );
	margin-bottom: 0;
	line-height: 1.3;
}

.velto-variant-slots__header-attr,
.velto-variant-slots__header-sep {
	display: inline-block;
}

.velto-bar--selected .velto-variant-slots,
.velto-bar:has( .velto-bar__radio:checked ) .velto-variant-slots {
	display: flex;
}

.velto-variant-slot {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.velto-variant-slot__label {
	align-self: center;
	font-size: 12px;
	font-weight: 500;
	color: var( --velto-bar-title-color, inherit );
	line-height: 1.4;
	white-space: nowrap;
}

.velto-variant-slot__fields {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}

.velto-variant-slot__field {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin: 0 !important;
	margin-bottom: 0 !important;
	font-size: 12px;
	color: var( --velto-bar-subtitle-color, #555555 );
	cursor: default;
}

/* Hide per-slot attribute labels - the group header above the slots shows them */
.velto-variant-slot__field > span {
	display: none;
}

.velto-variant-slot__field select {
	width: auto;
	min-width: 104px;
	max-width: 180px;
	min-height: var( --velto-control-height );
	height: var( --velto-control-height );
	margin: 0 !important;
	padding: 5px 30px 5px 10px;
	border: 1px solid var( --velto-muted-border );
	border-radius: var( --velto-control-radius );
	background-color: #ffffff;
	color: #222222;
	font-size: 13px;
	line-height: 20px;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.03 );
	box-sizing: border-box;
}

.velto-variant-slot__status {
	display: none;
}

.velto-variant-status--error {
	display: block;
	font-size: 0.75em;
	line-height: 1.3;
	color: #cc1818;
}

.velto-theme-variant-picker--hidden {
	display: none !important;
}

.velto-bundle-offers .velto-variant-slot__field,
.velto-bundle-offers .velto-pb-variant-picker__field {
	margin: 0 !important;
	margin-bottom: 0 !important;
}

.velto-bundle-offers .velto-variant-slot__field select,
.velto-bundle-offers .velto-pb-variant-picker__field select {
	margin: 0 !important;
	box-sizing: border-box;
}

.velto-bar__pricing[data-velto-price-mode="both"] .velto-bar__price-line {
	flex-direction: row;
	align-items: baseline;
	gap: 6px;
}

/* Merchant-customised unit text */
.velto-bar__price-label {
	font-weight: 400;
}

/*
 * Price amounts use the --velto-price-weight variable so the admin
 * typography control actually takes effect. Default 600 keeps the
 * amount visually heavier than the surrounding label text.
 * wc_price() wraps amounts in <span class="woocommerce-Price-amount">.
 */
.velto-bar__price-line .woocommerce-Price-amount,
.velto-bar__price-unit,
.velto-bar__price-total {
	font-size: 1em; /* lock size - prevents WC theme overrides on .woocommerce-Price-amount */
	font-weight: var( --velto-price-weight, 600 );
}

/* ---- Compare-at price - hidden until the feature is enabled ------------- */

/*
 * .velto-bar__price-compare is rendered in the template as a <del> sibling
 * of the price span. Hidden by default; shown for display modes that include
 * original bundle totals.
 */
.velto-bar__price-compare {
	display: block;
	text-decoration: line-through;
	opacity: 0.58;
	font-size: var( --velto-compare-price-size, 12px );
	font-weight: var( --velto-compare-price-weight, 400 );
	line-height: 1.2;
}

/* ---- Product Bundle deal cards ------------------------------------------ */

/* Allow PB tier cards to wrap so the product card row sits below the header */
.velto-bar--pb {
	flex-wrap: wrap;
}

.velto-bar--pb .velto-bar__label {
	color: var( --velto-bar-subtitle-color, #555555 );
	font-weight: var( --velto-bar-subtitle-weight, 400 );
}

.velto-pb-cards {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
	flex: 0 0 100%;
	margin-top: 14px;
	width: 100%;
	border: 1px solid #e5e7eb;
	border-radius: var( --velto-inner-radius );
	background: #ffffff;
	overflow: hidden;
	box-sizing: border-box;
}

/* Fluid equal-width columns; max-width prevents 2-product cards from
   growing too large on wide containers */
.velto-pb-card {
	display: grid;
	grid-template-rows: auto minmax( 0, 1fr ) auto;
	justify-items: center;
	align-items: start;
	gap: 9px;
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	max-width: none;
	padding: 14px 12px;
	text-align: center;
	box-sizing: border-box;
}

/* Square fluid image - fills the card column regardless of product count */
.velto-pb-card__img {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	aspect-ratio: auto;
	object-fit: cover;
	border-radius: 6px;
	display: block;
	background: #f3f4f6;
}

.velto-pb-card__img--placeholder {
	background: #f3f4f6;
}

/* Name + qty grouped so vertical layout can treat them as the left column */
.velto-pb-card__info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	justify-content: flex-start;
	min-width: 0;
	width: 100%;
}

.velto-pb-card__name {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	max-height: none;
	overflow: hidden;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: auto;
	width: 100%;
}

.velto-pb-card__qty {
	font-size: 12px;
	color: #777777;
}

/* Price + compare grouped so all cards' pricing aligns at the same baseline */
.velto-pb-card__price-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	flex: 0 0 auto;
	min-width: 0;
	margin-top: 2px;
	text-align: center;
}

.velto-pb-variant-picker {
	display: none;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 6px 8px;
	width: 100%;
	max-width: 100%;
	margin-top: 4px;
}

.velto-bar--selected .velto-pb-variant-picker,
.velto-bar:has( .velto-bar__radio:checked ) .velto-pb-variant-picker {
	display: flex;
}

.velto-pb-cards:not( .velto-pb-cards--vertical ) .velto-pb-variant-picker__field {
	flex: 0 1 122px;
}

.velto-pb-cards:not( .velto-pb-cards--vertical ) .velto-pb-variant-picker__field > span {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.velto-pb-cards:not( .velto-pb-cards--vertical ) .velto-pb-variant-picker__field select {
	max-width: none;
}

.velto-pb-cards--vertical .velto-pb-variant-picker__field {
	flex: 0 1 auto;
}

.velto-pb-variant-picker__field {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 0 1 auto;
	min-width: 0;
	margin: 0 !important;
	margin-bottom: 0 !important;
	font-size: 12px;
	color: var( --velto-bar-subtitle-color, #555555 );
	cursor: default;
	text-align: inherit;
}

.velto-pb-variant-picker__field > span {
	display: block;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.2;
	color: var( --velto-bar-subtitle-color, #555555 );
}

.velto-pb-variant-picker__field select {
	width: 100%;
	min-width: 0;
	max-width: 180px;
	min-height: var( --velto-control-height );
	height: var( --velto-control-height );
	margin: 0 !important;
	padding: 5px 30px 5px 10px;
	border: 1px solid var( --velto-muted-border );
	border-radius: var( --velto-control-radius );
	background-color: #ffffff;
	color: #222222;
	font-size: 13px;
	line-height: 20px;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.03 );
	box-sizing: border-box;
}

.velto-pb-variant-picker__status {
	display: none;
	width: 100%;
}

.velto-pb-variant-picker__status.velto-variant-status--error {
	display: block;
}

.velto-pb-card__price {
	font-size: var( --velto-pb-item-price-size, 12px );
	font-weight: var( --velto-pb-item-price-weight, 600 );
	color: var( --velto-price-color, #333333 );
	line-height: 1.2;
	white-space: nowrap;
}

/* WC themes apply font-size directly on .woocommerce-Price-amount - reset it
   so the parent's 0.8em is what determines the rendered size. */
.velto-pb-card__price .woocommerce-Price-amount {
	font-size: 1em;
	font-weight: inherit;
}

.velto-pb-card__compare {
	font-size: var( --velto-pb-item-compare-price-size, 11px );
	font-weight: var( --velto-pb-item-compare-price-weight, 400 );
	color: #999999;
	text-decoration: line-through;
	line-height: 1.2;
	white-space: nowrap;
}

.velto-pb-card__compare .woocommerce-Price-amount {
	font-size: 1em;
	font-weight: inherit;
}

.velto-pb-cards__sep {
	position: relative;
	align-self: stretch;
	display: block;
	align-items: center;
	justify-content: center;
	width: 38px;
	min-height: 0;
	margin: 0;
	background: transparent;
	font-size: 0;
	font-weight: 400;
	color: transparent;
	padding: 0;
	flex-shrink: 0;
	letter-spacing: 0;
}

.velto-pb-cards__sep::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX( -50% );
	width: 1px;
	height: auto;
	background: var( --velto-card-border-color, #d1d5db );
}

.velto-pb-cards__sep::after {
	content: '+';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
	width: 30px;
	height: 30px;
	border: 2px solid var( --velto-card-selected-border-color );
	border-radius: 50%;
	background: #ffffff;
	font-size: 18px;
	font-weight: 700;
	color: var( --velto-card-selected-border-color );
	line-height: 26px;
	text-align: center;
	box-sizing: border-box;
}


/* ---- Vertical layout ----------------------------------------------------- */

.velto-pb-cards--vertical {
	flex-direction: column;
	align-items: stretch;
	flex-wrap: nowrap;
}

.velto-pb-cards--vertical .velto-pb-card {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex: 0 0 auto;
	width: 100%;
	padding: 10px 12px;
	text-align: left;
}

/* Fixed thumbnail - overrides the fluid horizontal sizing */
.velto-pb-cards--vertical .velto-pb-card__img {
	width: 56px;
	height: 56px;
}

/* Name column grows to fill space between thumbnail and price */
.velto-pb-cards--vertical .velto-pb-card__info {
	flex: 1 1 auto;
	min-width: 0;
	align-items: flex-start;
	width: auto;
}

.velto-pb-cards--vertical .velto-pb-card__name {
	font-size: 13px;
	max-height: none;
}

/* Price + compare stacked, right-aligned */
.velto-pb-cards--vertical .velto-pb-card__price-wrap {
	flex-direction: column;
	align-items: flex-end;
	gap: 1px;
	min-width: 72px;
	flex-shrink: 0;
	text-align: right;
	margin-top: 0; /* reset the horizontal-mode auto margin */
}

.velto-pb-cards--vertical .velto-pb-variant-picker {
	justify-content: flex-start;
}

/* Use a <div> (not <hr>) to avoid browser/theme default hr margins */
/* Rendered as a circled "+" to visually connect stacked product rows */
.velto-pb-cards__divider {
	position: relative;
	width: 100%;
	height: 28px;
	border: none;
	margin: 0;
	background: transparent;
}

.velto-pb-cards__divider::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY( -50% );
	height: 1px;
	background: var( --velto-card-border-color );
}

.velto-pb-cards__divider::after {
	content: '+';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
	width: 30px;
	height: 30px;
	border: 2px solid var( --velto-card-selected-border-color );
	border-radius: 50%;
	background: #ffffff;
	font-size: 18px;
	font-weight: 700;
	color: var( --velto-card-selected-border-color );
	line-height: 26px;
	text-align: center;
	box-sizing: border-box;
}

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

@media ( max-width: 480px ) {

	.velto-bundle-offers__title {
		margin-bottom: 8px;
	}

	.velto-bar {
		--velto-card-padding-y: 12px;
		--velto-card-padding-x: 12px;
		gap: 10px;
		padding: var( --velto-card-padding-y ) var( --velto-card-padding-x );
	}

	.velto-bar:has( .velto-bar__badge ) {
		padding-top: 20px;
	}

	.velto-bar__body {
		gap: 10px;
	}

	.velto-bar__pricing {
		max-width: 42%;
	}

	.velto-bar__qty {
		font-size: 15px;
	}

	.velto-bar__label {
		font-size: 12px;
	}

	.velto-bar--pb .velto-bar__qty {
		font-size: 14px;
	}

	.velto-variant-slots {
		padding: 0;
	}

	.velto-variant-slot {
		align-items: flex-start;
		gap: 8px;
	}

	.velto-variant-slot__fields {
		flex: 1;
		gap: 6px;
	}

	.velto-variant-slot__field {
		flex: 1 1 112px;
	}

	.velto-variant-slot__field select {
		width: 100%;
		min-width: 0;
		max-width: none;
	}

	.velto-pb-cards {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin-top: 8px;
		width: 100%;
	}

	.velto-pb-card,
	.velto-pb-cards--vertical .velto-pb-card {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: nowrap;
		gap: 10px;
		width: 100%;
		padding: 9px 10px;
		text-align: left;
	}

	.velto-pb-card__info,
	.velto-pb-cards--vertical .velto-pb-card__info {
		align-items: flex-start;
		width: auto;
		flex: 1 1 auto;
	}

	.velto-pb-card__img,
	.velto-pb-cards--vertical .velto-pb-card__img {
		width: 48px;
		height: 48px;
	}

	.velto-pb-card__price-wrap {
		align-items: flex-end;
		min-width: 64px;
		max-width: 28%;
		margin-left: auto;
		text-align: right;
	}

	.velto-pb-variant-picker,
	.velto-pb-cards--vertical .velto-pb-variant-picker {
		width: 100%;
	}

	.velto-pb-variant-picker__field {
		flex: 1 1 112px;
	}

	.velto-pb-variant-picker__field select {
		width: 100%;
		min-width: 0;
		max-width: none;
	}

	.velto-pb-cards__sep {
		align-self: stretch;
		display: block;
		width: auto;
		min-height: 0;
		height: 24px;
		margin: 0 10px;
		padding: 0;
		font-size: 0;
		color: transparent;
		background: transparent;
	}

	.velto-pb-cards__sep::before {
		left: 0;
		right: 0;
		top: 50%;
		bottom: auto;
		transform: translateY( -50% );
		width: auto;
		height: 1px;
	}

	.velto-pb-cards__divider {
		height: 24px;
	}

	.velto-pb-cards__sep::after,
	.velto-pb-cards__divider::after {
		width: 26px;
		height: 26px;
		font-size: 14px;
		line-height: 22px;
	}
}

/* Keep Woo/theme form-label spacing from breaking compact variant pickers. */
.woocommerce-page .velto-bundle-offers label.velto-variant-slot__field,
.woocommerce-page .velto-bundle-offers label.velto-pb-variant-picker__field,
.velto-bundle-offers label.velto-variant-slot__field,
.velto-bundle-offers label.velto-pb-variant-picker__field {
	margin: 0 !important;
	margin-bottom: 0 !important;
}

/* -----------------------------------------------------------------------
   Bar add-ons (gift / upsell)
   ----------------------------------------------------------------------- */

/*
 * Add-ons block: a full-width zone BELOW the main deal row. It takes the whole
 * width of the wrapped bar (flex-basis 100%) and bleeds to the bar's edges via
 * negative margins so the rows read as attached strips. Bottom corners are
 * rounded to match the bar; the main deal row keeps its own layout untouched.
 */
.velto-bundle-offers .velto-bar__addons {
	/* Span the bar's BORDER-box (content width + both paddings) but stay inset by
	   the 2px border so the bar's frame (an inset box-shadow painted beneath the
	   content) stays visible around the add-ons. A plain 100% would fall one
	   padding short on the right; bleeding fully would hide the border. */
	flex: 0 0 calc( 100% + 2 * var( --velto-card-padding-x ) - 4px );
	width: auto;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0 calc( 2px - var( --velto-card-padding-x ) ) calc( 2px - var( --velto-card-padding-y ) );
	overflow: hidden;
	border-bottom-left-radius: calc( var( --velto-radius, 4px ) - 2px );
	border-bottom-right-radius: calc( var( --velto-radius, 4px ) - 2px );
}

/* Shared add-on row: a full-width horizontal strip aligned to bar content. */
.velto-bundle-offers .velto-addon-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px var( --velto-card-padding-x );
	font-size: 0.9em;
	line-height: 1.3;
}

.velto-bundle-offers .velto-addon-row + .velto-addon-row {
	border-top: 1px solid rgba( 0, 0, 0, 0.08 );
}

.velto-bundle-offers .velto-addon-row--hidden {
	display: none;
}

/* Upsell: optional / selectable. Colors are merchant-controlled (Visual Style);
   fallbacks match Velto_Data::get_default_styles(). */
.velto-bundle-offers .velto-addon-row--upsell {
	cursor: pointer;
	background: var( --velto-upsell-bg, #d9d9d9 );
	color: var( --velto-upsell-text-color, #000000 );
}

/* Free gift: included / bonus strip. */
.velto-bundle-offers .velto-addon-row--gift {
	background: var( --velto-gift-bg, #000000 );
	color: var( --velto-gift-text-color, #ffffff );
}

/* Control area (checkbox for upsell, gift marker). */
.velto-bundle-offers .velto-addon-row__control {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
}

.velto-bundle-offers .velto-addon-row__checkbox {
	margin: 0;
	width: 16px;
	height: 16px;
}

.velto-bundle-offers .velto-addon-row--upsell .velto-addon-row__checkbox {
	accent-color: var( --velto-upsell-checkbox-color, #000000 );
}

/* The admin live preview runs inside wp-admin, which restyles checkboxes with
   appearance:none and blocks accent-color. Force native rendering there so the
   upsell checkbox colour control is reflected (the storefront is already native). */
#velto-preview-container .velto-bundle-offers .velto-addon-row__checkbox {
	-webkit-appearance: auto;
	appearance: auto;
	border: 0;
	background: none;
	box-shadow: none;
}

.velto-bundle-offers .velto-addon-row__marker::before {
	content: "🎁";
	font-size: 16px;
	line-height: 1;
}

/* Thumbnail. */
.velto-bundle-offers .velto-addon-row__thumbnail {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
}

.velto-bundle-offers .velto-addon-row__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 6px;
	display: block;
	background: #ffffff;
}

/* Content / text (expands, wraps gracefully). */
.velto-bundle-offers .velto-addon-row__content {
	flex: 1 1 auto;
	min-width: 0;
}

.velto-bundle-offers .velto-addon-row__text {
	display: block;
	overflow-wrap: anywhere;
}

.velto-bundle-offers .velto-addon-row--upsell .velto-addon-row__text {
	color: var( --velto-upsell-text-color, #000000 );
	font-size: var( --velto-upsell-text-size, 14px );
	font-weight: var( --velto-upsell-text-weight, 700 );
}

.velto-bundle-offers .velto-addon-row--gift .velto-addon-row__text {
	color: var( --velto-gift-text-color, #ffffff );
	font-size: var( --velto-gift-text-size, 14px );
	font-weight: var( --velto-gift-text-weight, 700 );
}

/* Inline variation picker for variable add-on products. Sits under the
   add-on text inside the content column; mirrors the PB picker controls.
   Hidden until the parent bar is selected (same gate as the PB picker). */
.velto-bundle-offers .velto-addon-variant-picker {
	display: none;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 4px 8px;
	width: 100%;
	margin-top: 4px;
}

.velto-bar--selected .velto-addon-variant-picker,
.velto-bar:has( .velto-bar__radio:checked ) .velto-addon-variant-picker {
	display: flex;
}

.velto-bundle-offers .velto-addon-variant-picker__field {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 0 1 auto;
	min-width: 0;
	margin: 0 !important;
	margin-bottom: 0 !important;
	font-size: 12px;
}

.velto-bundle-offers .velto-addon-variant-picker__field > span {
	display: block;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.2;
}

.velto-bundle-offers .velto-addon-row--upsell .velto-addon-variant-picker__field > span {
	color: var( --velto-upsell-text-color, #000000 );
	opacity: 0.7;
}

.velto-bundle-offers .velto-addon-row--gift .velto-addon-variant-picker__field > span {
	color: var( --velto-gift-text-color, #ffffff );
	opacity: 0.8;
}

.velto-bundle-offers .velto-addon-variant-picker__field select {
	width: 100%;
	min-width: 0;
	max-width: 160px;
	margin: 0 !important;
	padding: 3px 26px 3px 8px;
	border: 1px solid var( --velto-muted-border );
	border-radius: 4px;
	background-color: #ffffff;
	color: #333333;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
}

.velto-bundle-offers .velto-addon-variant-picker__status {
	display: none;
	width: 100%;
}

.velto-bundle-offers .velto-addon-variant-picker__status.velto-variant-status--error {
	display: block;
}

/* Prices, aligned right, never wrapping mid-number. */
.velto-bundle-offers .velto-addon-row__prices {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	white-space: nowrap;
}

.velto-bundle-offers .velto-addon-row__price {
	font-weight: 700;
}

.velto-bundle-offers .velto-addon-row--upsell .velto-addon-row__price {
	color: var( --velto-upsell-price-color, #000000 );
	font-size: var( --velto-upsell-price-size, 14px );
	font-weight: var( --velto-upsell-price-weight, 700 );
}

.velto-bundle-offers .velto-addon-row--gift .velto-addon-row__price {
	color: var( --velto-gift-price-color, #ffffff );
	font-size: var( --velto-gift-price-size, 14px );
	font-weight: var( --velto-gift-price-weight, 700 );
}

.velto-bundle-offers .velto-addon-row__compare-price {
	text-decoration: line-through;
}

.velto-bundle-offers .velto-addon-row--upsell .velto-addon-row__compare-price {
	color: var( --velto-upsell-compare-price-color, #666666 );
	font-size: var( --velto-upsell-compare-price-size, 12px );
	font-weight: var( --velto-upsell-compare-price-weight, 400 );
}

.velto-bundle-offers .velto-addon-row--gift .velto-addon-row__compare-price {
	color: var( --velto-gift-compare-price-color, #d9d9d9 );
	font-size: var( --velto-gift-compare-price-size, 12px );
	font-weight: var( --velto-gift-compare-price-weight, 400 );
}

/* Mobile: shrink thumbnail, keep prices readable, no overflow. */
@media ( max-width: 480px ) {
	.velto-bundle-offers .velto-addon-row {
		gap: 8px;
	}

	.velto-bundle-offers .velto-addon-row__thumbnail {
		width: 32px;
		height: 32px;
	}
}