/**
 * Card + toggle styling for bundle choices.
 * Scoped to .woosb-wrap so nothing here leaks into the rest of the theme.
 */

.woosb-wrap {
	--wpcnb-accent: #b4441c;
	--wpcnb-accent-soft: rgba(180, 68, 28, 0.06);
	--wpcnb-line: rgba(0, 0, 0, 0.14);
	--wpcnb-line-strong: rgba(0, 0, 0, 0.28);
	--wpcnb-muted: rgba(0, 0, 0, 0.55);
	--wpcnb-radius: 8px;
	--wpcnb-thumb: 64px;
}

/* ---------------------------------------------------------------- rows */

.woosb-wrap .woosb-products-layout-list .woosb-product {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 6px;
	padding: 8px 12px;
	border: 1px solid var(--wpcnb-line);
	border-radius: var(--wpcnb-radius);
	background: transparent;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

/* The theme draws dotted separators between items; the cards replace them. */
.woosb-wrap .woosb-products-layout-list .woosb-product {
	border-bottom: 1px solid var(--wpcnb-line);
}

/* WPC pads every direct child of a row; the card's own padding covers that. */
.woosb-wrap .woosb-products .woosb-product > div {
	padding: 0;
}

.woosb-wrap .woosb-product.wpcnb-toggle {
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

.woosb-wrap .woosb-product.wpcnb-toggle:hover {
	border-color: var(--wpcnb-line-strong);
}

.woosb-wrap .woosb-product.wpcnb-toggle:focus-visible {
	outline: 2px solid var(--wpcnb-accent);
	outline-offset: 2px;
}

.woosb-wrap .woosb-product.wpcnb-selected {
	border-color: var(--wpcnb-accent);
	background: var(--wpcnb-accent-soft);
	box-shadow: inset 0 0 0 1px var(--wpcnb-accent);
}

/* ------------------------------------------------------------ checkbox */

.woosb-wrap .woosb-product.wpcnb-toggle::before {
	content: "";
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border: 2px solid var(--wpcnb-line-strong);
	border-radius: 6px;
	background-color: #fff;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 14px 14px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.woosb-wrap .woosb-product.wpcnb-selected::before {
	border-color: var(--wpcnb-accent);
	background-color: var(--wpcnb-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- thumb */

/*
 * WPC ships `.woosb-products .woosb-product .woosb-thumb img { width:100%; height:auto }`,
 * which is specific enough to win against a plain `.woosb-wrap .woosb-thumb img`
 * and leaves the images at their natural aspect ratio. Match its specificity and
 * pin both axes so every thumbnail is square whatever shape the file is.
 */
.woosb-wrap .woosb-products .woosb-product .woosb-thumb {
	flex: 0 0 var(--wpcnb-thumb);
	width: var(--wpcnb-thumb);
	margin: 0;
}

.woosb-wrap .woosb-products .woosb-product .woosb-thumb img {
	display: block;
	width: var(--wpcnb-thumb);
	max-width: var(--wpcnb-thumb);
	height: var(--wpcnb-thumb);
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 6px;
	margin: 0;
}

/* --------------------------------------------------------- name, stock */

.woosb-wrap .woosb-title {
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
}

.woosb-wrap .woosb-name {
	font-weight: 600;
	line-height: 1.3;
}

.woosb-wrap .woosb-name a {
	text-decoration: none;
	color: inherit;
}

.woosb-wrap .woosb-name a:hover {
	text-decoration: underline;
}

/* What the nested bundle contains, on a single line. */
.woosb-wrap .wpcnb-contains {
	margin-top: 3px;
	font-size: 0.9em;
	line-height: 1.4;
	color: var(--wpcnb-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.woosb-wrap .woosb-availability {
	margin-top: 2px;
}

.woosb-wrap .woosb-availability p,
.woosb-wrap .woosb-availability .stock {
	margin: 0;
	padding: 0;
	font-size: 0.8em;
	line-height: 1.4;
	color: var(--wpcnb-muted);
	background: none;
}

.woosb-wrap .woosb-availability .out-of-stock {
	color: #a12; /* keep a genuine warning legible */
}

/* --------------------------------------------------------------- price */

.woosb-wrap .woosb-price {
	flex: 0 0 auto;
	text-align: right;
	line-height: 1.35;
	white-space: nowrap;
}

.woosb-wrap .woosb-price del {
	display: block;
	font-size: 0.82em;
	opacity: 0.6;
}

.woosb-wrap .woosb-price ins {
	background: none;
	text-decoration: none;
	font-weight: 600;
	color: var(--wpcnb-accent);
}

/* ------------------------------------------------------------ quantity */

/* Hidden on toggle rows: the whole card is the control. Kept in the DOM so
   the value still posts and WPC's own scripts keep working. */
.woosb-wrap .woosb-product.wpcnb-toggle .woosb-quantity {
	display: none;
}

/* Rows that really do need a stepper (max above 1): stop the theme turning
   the +/- buttons into full-width blocks. */
.woosb-wrap .woosb-quantity {
	flex: 0 0 auto;
}

.woosb-wrap .woosb-quantity .quantity {
	display: inline-flex !important;
	align-items: stretch;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

.woosb-wrap .woosb-quantity .quantity input.qty,
.woosb-wrap .woosb-quantity .quantity input.woosb-qty {
	width: 46px !important;
	height: 36px !important;
	min-height: 0 !important;
	padding: 0 4px !important;
	margin: 0 !important;
	text-align: center;
	border: 1px solid var(--wpcnb-line) !important;
	border-radius: 0 !important;
	background: #fff !important;
	font-size: 0.95em !important;
	line-height: 34px !important;
	float: none !important;
}

.woosb-wrap .woosb-quantity .quantity input.minus,
.woosb-wrap .woosb-quantity .quantity input.plus,
.woosb-wrap .woosb-quantity .quantity .minus,
.woosb-wrap .woosb-quantity .quantity .plus,
.woosb-wrap .woosb-quantity .woosb-quantity-input-minus,
.woosb-wrap .woosb-quantity .woosb-quantity-input-plus {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 34px !important;
	height: 36px !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid var(--wpcnb-line) !important;
	border-radius: 0 !important;
	background: rgba(0, 0, 0, 0.03) !important;
	color: inherit !important;
	font-size: 1em !important;
	line-height: 1 !important;
	cursor: pointer;
	float: none !important;
	box-shadow: none !important;
}

.woosb-wrap .woosb-quantity .quantity .minus,
.woosb-wrap .woosb-quantity .woosb-quantity-input-minus {
	border-radius: 5px 0 0 5px !important;
	border-right: 0 !important;
}

.woosb-wrap .woosb-quantity .quantity .plus,
.woosb-wrap .woosb-quantity .woosb-quantity-input-plus {
	border-radius: 0 5px 5px 0 !important;
	border-left: 0 !important;
}

.woosb-wrap .woosb-quantity .quantity .minus:hover,
.woosb-wrap .woosb-quantity .quantity .plus:hover {
	background: rgba(0, 0, 0, 0.07) !important;
}

/* ---------------------------------------------------- summary and alert */

.woosb-wrap .woosb-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 20px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--wpcnb-line);
}

.woosb-wrap .woosb-total-label,
.woosb-wrap .woosb-count-label {
	color: var(--wpcnb-muted);
	font-size: 0.9em;
}

.woosb-wrap .woosb-total-value {
	font-size: 1.15em;
	font-weight: 600;
}

.woosb-wrap .woosb-total-value .woocommerce-Price-amount {
	color: var(--wpcnb-accent);
}

/* The theme's own price element, moved down into the summary by the script.
   It keeps the theme's typography; only spacing and the sale/regular pair
   are adjusted here. */
.woosb-wrap .woosb-summary .price.wpcnb-moved-price {
	margin: 0;
	padding: 0;
	line-height: 1.2;
}

.woosb-wrap .woosb-summary .price.wpcnb-moved-price del {
	display: inline-block;
	margin-right: 10px;
	font-size: 0.62em;
	font-weight: 400;
	opacity: 0.55;
	text-decoration: line-through;
}

.woosb-wrap .woosb-summary .price.wpcnb-moved-price ins {
	background: none;
	text-decoration: none;
	font-weight: inherit;
}

/* Superseded by the moved price; hidden here rather than in the markup so the
   summary still reads correctly if the script never runs. */
.woosb-wrap .wpcnb-hidden {
	display: none !important;
}

.woosb-wrap .woosb-alert {
	margin-top: 12px;
	padding: 11px 14px;
	border-radius: 6px;
	border-left: 3px solid var(--wpcnb-accent);
	background: var(--wpcnb-accent-soft);
	font-size: 0.9em;
	line-height: 1.5;
}

/* Make the disabled state visible rather than a button that silently ignores clicks. */
.single_add_to_cart_button.woosb-disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ------------------------------------------------- single product columns */

/*
 * Bridge's tabs-on-bottom layout gives the gallery 63.85% + 2.3% gutter and the
 * summary 33.85%. Narrow the gallery to 40% and hand the rest to the summary,
 * which floats up against it and so moves left on its own.
 */
.woocommerce.single-product.qode-product-single-tabs-on-bottom .product .images,
.woocommerce.single-product.qode-product-single-tabs-on-bottom .product .images.qode-add-gallery-and-zoom-support,
.woocommerce.single-product.qode-product-single-tabs-on-bottom .product .images:not(.qode-add-gallery-and-zoom-support) {
	width: 40%;
	margin-right: 2.3%;
}

.woocommerce.single-product.qode-product-single-tabs-on-bottom .product .summary {
	width: 57.7%;
}

/* The extra room goes to the bundle picker, not to the buttons: the quantity
   box and add-to-cart keep their existing size. */
.woocommerce.single-product .product .summary .woosb-wrap {
	font-size: 1.08em;
}

.woocommerce.single-product .product .summary .woosb-wrap .woosb-name {
	font-size: 1.2em;
}

.woocommerce.single-product .product .summary .woosb-wrap {
	--wpcnb-thumb: 72px;
}

.woocommerce.single-product .product .summary form.cart .quantity,
.woocommerce.single-product .product .summary .single_add_to_cart_button {
	font-size: initial;
}

/* ------------------------------------------------- vertical rhythm */

/*
 * WPC gives .woosb-text a 15px bottom margin, the theme adds its own margins to
 * form.cart, and the YITH options container contributes more on top. Collapse
 * the whole run between the last choice and the add-to-cart row.
 */
.woocommerce.single-product .product .summary .woosb-wrap {
	margin-bottom: 8px;
}

.woocommerce.single-product .product .summary .woosb-wrap .woosb-products {
	margin-bottom: 0;
}

.woocommerce.single-product .product .summary .woosb-wrap .woosb-summary {
	margin: 6px 0 0;
	padding-top: 10px;
}

.woocommerce.single-product .product .summary .woosb-wrap .woosb-alert {
	margin: 10px 0 0;
}

.woocommerce.single-product .product .summary form.cart {
	margin-top: 12px;
}

.woocommerce.single-product .product .summary form.cart .yith-wapo-container,
.woocommerce.single-product .product .summary form.cart #yith-wapo-container,
.woocommerce.single-product .product .summary form.cart .yith-wapo-block,
.woocommerce.single-product .product .summary form.cart .yith-wapo-addon,
.woocommerce.single-product .product .summary form.cart #wapo-total-price-table,
.woocommerce.single-product .product .summary form.cart #wapo-total-price-table table {
	margin-top: 0;
	margin-bottom: 0;
}

/* An options block with no visible controls should not reserve a header row. */
.woocommerce.single-product .product .summary form.cart .yith-wapo-addon .addon-header:empty {
	display: none;
}

@media (max-width: 1000px) {
	.woocommerce.single-product.qode-product-single-tabs-on-bottom .product .images,
	.woocommerce.single-product.qode-product-single-tabs-on-bottom .product .images.qode-add-gallery-and-zoom-support,
	.woocommerce.single-product.qode-product-single-tabs-on-bottom .product .summary {
		width: 100%;
		margin-right: 0;
	}
}

/* ------------------------------------------------------- swapped gallery */

.woocommerce-product-gallery .wpcnb-gallery {
	position: relative;
}

.woocommerce-product-gallery .wpcnb-gallery-main img {
	display: block;
	width: 100%;
	height: auto;
}

/* Bridge reserves a 114px gutter on the left of the gallery for its vertical
   thumbnail strip; the swapped gallery uses the same column. */
.woocommerce-product-gallery .wpcnb-gallery-thumbs {
	position: absolute;
	top: 0;
	left: 0;
	width: 111px;
}

.woocommerce-product-gallery .wpcnb-gallery:not(.has-thumbs) .wpcnb-gallery-thumbs {
	display: none;
}

.woocommerce-product-gallery .wpcnb-gallery-thumbs img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 3px;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.15s ease;
}

.woocommerce-product-gallery .wpcnb-gallery-thumbs img:hover,
.woocommerce-product-gallery .wpcnb-gallery-thumbs img.is-active {
	opacity: 1;
}

/* -------------------------------------------------------------- mobile */

@media (max-width: 640px) {
	.woosb-wrap .woosb-products-layout-list .woosb-product {
		flex-wrap: wrap;
		gap: 10px 12px;
		padding: 12px;
	}

	.woosb-wrap .woosb-title {
		flex: 1 1 calc(100% - 110px);
	}

	.woosb-wrap .woosb-price {
		flex: 1 1 100%;
		text-align: left;
		padding-left: 100px;
	}

	.woosb-wrap .woosb-price del {
		display: inline;
		margin-right: 8px;
	}
}