.wcpb-bundle {
	box-sizing: border-box;
	max-width: 100%;
	font-family: var( --wcpb-font-family, inherit );
	font-weight: var( --wcpb-font-weight, inherit );
	line-height: var( --wcpb-line-height, 1.5 );
	letter-spacing: var( --wcpb-letter-spacing, normal );
	color: var( --wcpb-text-color, inherit );
	background: var( --wcpb-bg, transparent );
	border: var( --wcpb-border-width, 1px ) solid var( --wcpb-border-color, #e1e1e1 );
	border-radius: var( --wcpb-border-radius, 0 );
	box-shadow: var( --wcpb-box-shadow, none );
	padding: var( --wcpb-padding, 20px );
	font-size: var( --wcpb-font-size, 15px );
	text-align: var( --wcpb-align, left );
}

.wcpb-bundle *,
.wcpb-bundle *::before,
.wcpb-bundle *::after {
	box-sizing: border-box;
}

.wcpb-badge {
	display: inline-block;
	background: var( --wcpb-badge-bg, #222 );
	color: var( --wcpb-badge-text, #fff );
	font-size: 0.8em;
	font-weight: 600;
	padding: 4px 10px;
	margin-bottom: 10px;
}

.wcpb-price-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 10px;
}

.wcpb-price-row .wcpb-was {
	text-decoration: line-through;
	opacity: 0.6;
	font-size: 0.9em;
}

.wcpb-price-row .wcpb-now {
	font-size: 1.3em;
	font-weight: 700;
	color: var( --wcpb-price-color, inherit );
}

.wcpb-price-row .wcpb-savings {
	font-size: 0.8em;
	font-weight: 600;
	color: var( --wcpb-price-color, inherit );
}

.wcpb-description {
	margin-bottom: 16px;
	opacity: 0.85;
}

.wcpb-description p:last-child {
	margin-bottom: 0;
}

.wcpb-items {
	display: var( --wcpb-layout, block );
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: var( --wcpb-gap, 16px );
}

.wcpb-item {
	padding: var( --wcpb-gap, 16px ) 0;
	border-top: 1px solid var( --wcpb-border-color, #e1e1e1 );
}

.wcpb-item:first-child {
	border-top: none;
}

.wcpb-item-body {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.wcpb-item-image {
	flex: 0 0 auto;
	width: var( --wcpb-img-w, 64px );
	height: var( --wcpb-img-h, 64px );
	overflow: hidden;
}

.wcpb-item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wcpb-item-info {
	flex: 1 1 auto;
	min-width: 0;
}

.wcpb-item-title {
	margin: 0 0 2px;
	font-weight: 600;
	color: var( --wcpb-heading-color, inherit );
}

.wcpb-item-desc {
	margin: 0 0 6px;
	font-size: 0.9em;
	opacity: 0.75;
}

.wcpb-item-price {
	margin: 0 0 8px;
	font-size: 0.9em;
}

.wcpb-item-variations select,
.wcpb-attribute-select {
	max-width: 100%;
	margin: 0 6px 6px 0;
	border-color: var( --wcpb-select-border, #ccc );
	color: var( --wcpb-select-text, inherit );
	background-color: var( --wcpb-select-bg, #fff );
}

.wcpb-item-status {
	margin: 4px 0 0;
	font-size: 0.85em;
}

.wcpb-item-status--muted {
	opacity: 0.6;
}

.wcpb-item--invalid .wcpb-item-status {
	color: #c0392b;
	font-weight: 600;
}

.wcpb-item--invalid {
	animation: wcpb-flash 0.5s ease;
}

@keyframes wcpb-flash {
	0%,
	100% {
		background: transparent;
	}
	30% {
		background: rgba( 192, 57, 43, 0.08 );
	}
}

.wcpb-include-toggle {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
}

.wcpb-item--excluded .wcpb-item-body {
	opacity: 0.45;
}

.wcpb-footer {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var( --wcpb-border-color, #e1e1e1 );
}

.wcpb-add-to-cart {
	background: var( --wcpb-btn-bg, #111 ) !important;
	color: var( --wcpb-btn-text, #fff ) !important;
	border-radius: var( --wcpb-btn-radius, 0 ) !important;
	border: none;
	cursor: pointer;
}

.wcpb-add-to-cart:hover {
	background: var( --wcpb-btn-hover-bg, #000 ) !important;
}

.wcpb-add-to-cart[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}

.wcpb-add-to-cart.wcpb-shake {
	animation: wcpb-shake 0.4s ease;
}

@keyframes wcpb-shake {
	0%,
	100% {
		transform: translateX( 0 );
	}
	25% {
		transform: translateX( -5px );
	}
	75% {
		transform: translateX( 5px );
	}
}

.wcpb-message {
	margin: 8px 0 0;
	font-size: 0.9em;
}

.wcpb-message.wcpb-message--error {
	color: #c0392b;
}

.wcpb-message.wcpb-message--success {
	color: #1e7e34;
}

/* Structural fallback responsiveness — the admin's own Tablet/Mobile style
   values (font size, padding, gaps, image size, layout, alignment) are
   layered on top of this via the scoped <style> block from class-wcpb-style.php. */
@media ( max-width: 600px ) {
	.wcpb-bundle {
		padding: var( --wcpb-padding, 14px );
	}

	.wcpb-item-body {
		flex-wrap: wrap;
	}

	.wcpb-footer .wcpb-add-to-cart {
		width: 100%;
	}
}