/* Bundle product page: price, savings and add to cart first, then the included items as compact cards. */
.single-product form.bundle_form {
	display: flex;
	flex-direction: column;
	gap: .7rem;
}

.single-product form.bundle_form > .bundle_data {
	order: -1;
	margin-block-end: .6rem;
}

/* Own line under the price: tighten the price's bottom margin on bundle pages so the pair reads as one block. */
.single-product .summary .price:has(+ .hs-bundle-savings) {
	margin-bottom: .55rem;
}

.hs-bundle-savings {
	clear: both; /* the theme floats the price */
	display: table;
	margin: 0 0 1.1rem;
	padding: .3rem .75rem;
	border-radius: 999px;
	background: #f6efe0;
	color: #7a5d27;
	font-size: .85rem;
	font-weight: 600;
	line-height: 1.3;
}

.hs-bundle-savings .woocommerce-Price-amount {
	font-weight: 700;
}

.hs-bundle-heading {
	margin: .4rem 0 0;
	padding-block-start: 1.1rem;
	border-top: 1px solid rgba(0, 0, 0, .1);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
}

/* Included item card */
/* An item without any image (hidden thumbnail and no product image) uses the full card width for its text. */
.single-product form.bundle_form div.bundled_product:not(:has(.bundled_product_images)) {
	grid-template-columns: minmax(0, 1fr);
}

/* The plugin's clearfix pseudo-elements would otherwise occupy grid cells. */
.single-product form.bundle_form div.bundled_product::before,
.single-product form.bundle_form div.bundled_product::after {
	display: none;
}

.single-product form.bundle_form div.bundled_product {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: .35rem 1rem;
	align-items: start;
	margin: 0;
	padding: .9rem;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 12px;
	background: #fff;
	position: relative;
}

.single-product form.bundle_form div.bundled_product .bundled_product_images {
	float: none !important; /* the Product Bundles stylesheet forces its own float and width */
	width: 100% !important;
	margin: 0;
}

.single-product form.bundle_form div.bundled_product .bundled_product_images figure {
	width: 100% !important;
	margin: 0;
}

.single-product form.bundle_form div.bundled_product .bundled_product_images img {
	display: block;
	width: 100% !important;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
	border-radius: 8px;
	background: #f5f5f3;
}

.single-product form.bundle_form div.bundled_product .details {
	float: none !important;
	width: auto !important;
	min-width: 0;
	margin: 0;
	padding: 0 !important;
}

.single-product form.bundle_form div.bundled_product .bundled_product_title {
	margin: 0 0 .25rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
}


/* One short line of copy per item; the full description is on the item's own page. */
.single-product form.bundle_form div.bundled_product .bundled_product_excerpt {
	margin: 0 0 .5rem;
	color: #666;
	font-size: .85rem;
	line-height: 1.5;
}

.single-product form.bundle_form div.bundled_product .bundled_product_excerpt > :not(:first-child) {
	display: none;
}

.single-product form.bundle_form div.bundled_product .bundled_product_excerpt > :first-child {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	text-transform: none;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.single-product form.bundle_form div.bundled_product .bundled_item_cart_details .price {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 .5rem;
	margin: 0;
	color: #8a6b31;
	font-size: 1rem;
	font-weight: 700;
}

.single-product form.bundle_form div.bundled_product .bundled_item_cart_details .price del {
	color: #999;
	font-size: .85em;
	font-weight: 400;
}

.single-product form.bundle_form div.bundled_product .bundled_item_cart_details .price ins {
	text-decoration: none;
}

/* Price and stock label on one line, for simple items and for variable items (whose price and stock are nested wrappers). */
.single-product form.bundle_form div.bundled_product .bundled_item_cart_details,
.single-product form.bundle_form div.bundled_product .woocommerce-variation {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 .75rem;
}

.single-product form.bundle_form div.bundled_product .bundled_item_cart_details .stock {
	display: inline-block;
	margin: 0;
	padding: 0;
	font-size: .8rem;
}

/* Each included item shows only its image, title and price. Fixed attributes (single option) stay in the form
   but out of sight; a choice the shopper still has to make (more than one option) stays visible. */
.single-product form.bundle_form div.bundled_product .bundled_product_excerpt,
.single-product form.bundle_form div.bundled_product .woocommerce-variation-description,
.single-product form.bundle_form div.bundled_product .hs-expiry,
.single-product form.bundle_form div.bundled_product .bundled_item_after_cart_details,
.single-product form.bundle_form div.bundled_product tr.attribute_value_static {
	display: none !important;
}

.single-product form.bundle_form div.bundled_product table.variations:not(:has(tr:not(.attribute_value_static))) {
	display: none;
}

.single-product form.bundle_form div.bundled_product {
	align-items: center;
}

.single-product form.bundle_form div.bundled_product .bundled_product_title {
	margin-bottom: .2rem;
}

/* Link to the item's own page: kept, pinned 10px from the top and from the far edge (right in English, left in Arabic). */
.single-product form.bundle_form div.bundled_product .details {
	position: static; /* so the icon is positioned against the card, not the text column */
}

.single-product form.bundle_form div.bundled_product .bundled_product_title_link {
	position: absolute;
	top: 10px;
	inset-inline-end: 10px;
	width: 14px;
	height: 14px;
	margin: 0;
	line-height: 14px;
}

.single-product form.bundle_form div.bundled_product .bundled_product_permalink {
	position: absolute;
	inset: 0;
	display: block;
	width: 14px;
	height: 14px;
	line-height: 14px;
}

/* The plugin draws the icon outside the (zero-size) link; bring it inside the 14px box. */
.single-product form.bundle_form div.bundled_product .bundled_product_permalink::before {
	position: absolute;
	inset: 5px auto auto 0; /* the glyph draws about 5px above its box; this puts its top edge 10px from the card */
	width: 14px;
	height: 14px;
	font-size: 14px;
	line-height: 14px;
}

.single-product form.bundle_form div.bundled_product .bundled_product_title {
	padding-inline-end: 1.8rem; /* keep long titles clear of the icon */
}

.single-product form.bundle_form div.bundled_product .bundled_product_permalink {
	margin: 0;
}

/* Fixed attributes (weight, flavor) as one tidy line of chips instead of stacked rows. */
.single-product form.bundle_form div.bundled_product table.variations,
.single-product form.bundle_form div.bundled_product table.variations tbody {
	display: block;
	margin: 0 0 .4rem;
	border: 0;
}

.single-product form.bundle_form div.bundled_product table.variations tr {
	display: inline-flex;
	align-items: baseline;
	gap: .3rem;
	margin: 0 .9rem .15rem 0;
	margin-inline: 0 .9rem;
}

.single-product form.bundle_form div.bundled_product table.variations td {
	display: inline;
	padding: 0;
	border: 0;
	font-size: .85rem;
}

.single-product form.bundle_form div.bundled_product table.variations td.label label {
	color: #777;
	font-weight: 400;
}

.single-product form.bundle_form div.bundled_product table.variations td.label label::after {
	content: ":";
}

.single-product form.bundle_form div.bundled_product .hs-expiry {
	margin: 0 0 .4rem;
	font-size: .85rem;
}

/* Add to cart: quantity beside a full-width button */
.single-product .bundle_data .bundle_button {
	display: flex;
	gap: .6rem;
	align-items: stretch;
}

.single-product .bundle_data .bundle_button .single_add_to_cart_button {
	flex: 1;
	min-height: 3rem;
}

.single-product .bundle_data .hs-buy-now-button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	margin-block: 0 !important;
	padding-block: 0;
	text-align: center;
}

@media (max-width: 600px) {
	.single-product form.bundle_form div.bundled_product .bundled_product_images,
	.single-product form.bundle_form div.bundled_product .bundled_product_images figure,
	.single-product form.bundle_form div.bundled_product .bundled_product_images img {
		max-width: none !important;
		width: 100% !important;
	}

	.single-product form.bundle_form div.bundled_product {
		grid-template-columns: 68px minmax(0, 1fr);
		gap: .3rem .8rem;
		padding: .75rem;
	}

}

/* The bundle's price is already shown under the title; hide the plugin's repeat of it above Add to cart. */
.single-product form.bundle_form .bundle_data .bundle_price {
	display: none !important; /* the plugin's script shows it with an inline style */
}

/* Out of stock bundle (an included item is unavailable): the waitlist button replaces quantity and Add to cart.
   The plugin keeps the waitlist button in the page and hides its availability box (inline display: none) when the
   chosen variations are in stock, so only a *shown* availability box counts. */
.single-product form.bundle_form .bundle_wrap:has(.bundle_availability:not([style*="display: none"]) .cgkit-waitlist-trigger) .bundle_button {
	display: none !important; /* the plugin toggles this with an inline style */
}

/* "Get notified" on bundles uses the shared product-page waitlist button style in hs-pcard.css. */

/* The CommerceKit sticky bars repeat Add to cart; hide those as well while the bundle is out of stock. */
body:has(form.bundle_form .bundle_availability:not([style*="display: none"]) .cgkit-waitlist-trigger) .commercekit-sticky-add-to-cart__content-button {
	display: none !important;
}

body:has(form.bundle_form .bundle_availability:not([style*="display: none"]) .cgkit-waitlist-trigger) .commercekit-pdp-sticky-inner .single_add_to_cart_button,
body:has(form.bundle_form .bundle_availability:not([style*="display: none"]) .cgkit-waitlist-trigger) .commercekit-pdp-sticky-inner .quantity {
	display: none !important;
}