/* ============================================================
   Nova × WooCommerce Product Bundles brand overrides
   ============================================================
   The plugin renders bundled items inside the bundle form on the
   PDP. Out of the box each item is a tall card with thumbnail,
   description, size attributes, in-stock indicator, and a qty
   selector — way too noisy when bundles ship as a fixed set.

   Production design: collapse each bundled item to a compact
   one-line row (thumb + name + size · in-stock), stack the rows
   vertically below the price, hide the per-item description and
   qty selector. Reads as a "What's in this bundle" list rather
   than a configurable composer.
   ============================================================ */

/* The bundle form (.cart.cart_group.bundle_form) is the FORM that
   wraps every bundled item div + the price/qty/ATC wrap. Force it
   to a vertical column so children stack as: bundled-items list,
   price, qty + ATC row. The PDP simple-cart rule in nova-pdp.css
   excludes .bundle_form so this layout wins. */
.nova-pdp-page form.bundle_form,
.nova-pdp-page .bundle_form {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	align-items: stretch !important;
	width: 100% !important;
	font-family: var(--nova-font-body, 'Inter', sans-serif);
	color: var(--nova-text-dark, #0a0a0e);
}

.nova-pdp-page .bundle_data {
	font-family: var(--nova-font-body, 'Inter', sans-serif);
	color: var(--nova-text-dark, #0a0a0e);
}

/* "What's in this bundle" caption — synthetic via ::before on the
   bundle_form so it appears once at the top of the bundled-items
   list (the plugin's `default` layout has no container we can
   target, so the form itself owns the caption). */
.nova-pdp-page form.bundle_form::before {
	content: "What's in this bundle";
	display: block;
	margin: 0 0 8px;
	padding: 0 4px;
	font-family: var(--nova-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nova-text-dark-muted, rgba(10, 10, 14, 0.6));
}

/* Each bundled item — full-width row card, larger thumbnail, click-
   anywhere navigation via stretched anchor. Reset every WC product-
   loop carry-over the `product` class drags in. */
.nova-pdp-page .bundled_product,
.nova-pdp-page .bundled_product.product,
.nova-pdp-page li.bundled_product {
	position: relative !important;
	display: flex !important;
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 8px !important;
	clear: both !important;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid rgba(138, 79, 255, 0.14);
	border-radius: 12px;
	box-sizing: border-box;
	list-style: none;
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.nova-pdp-page .bundled_product:hover {
	border-color: rgba(138, 79, 255, 0.32);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(138, 79, 255, 0.08);
}

.nova-pdp-page .bundled_product::before,
.nova-pdp-page .bundled_product::after {
	content: none !important;
}

/* Stretched-link: the title anchor (created by enabling the plugin's
   `woocommerce_bundled_item_title_is_link` filter in nova-bundles.php)
   expands to cover the entire row so the whole card is clickable to
   the child product page. The image's plugin-emitted lightbox anchor
   (.image.zoom) gets pointer-events: none so clicks land on the
   stretched title link, not the lightbox. */
.nova-pdp-page .bundled_product .bundled_product_title_permalink::before,
.nova-pdp-page .bundled_product .bundled_product_title a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.nova-pdp-page .bundled_product .bundled_product_image a.image,
.nova-pdp-page .bundled_product .bundled_product_image a.zoom,
.nova-pdp-page .bundled_product .bundled_product_thumbnail a {
	pointer-events: none;
}

/* Thumbnail — bigger, looks like a product card thumb.
   The plugin wraps the <figure> in <div class="bundled_product_images images">.
   The .images class inherits Shoptimizer's product-loop default of ~42%
   column width — collapse it down to the actual thumbnail box so the row
   sits tight against the title. */
.nova-pdp-page .bundled_product .bundled_product_images,
.nova-pdp-page .bundled_product .bundled_product_images.images {
	width: 64px !important;
	max-width: 64px !important;
	min-width: 0 !important;
	flex: 0 0 64px !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

.nova-pdp-page .bundled_product .bundled_product_thumbnail,
.nova-pdp-page .bundled_product_image {
	width: 64px !important;
	height: 64px !important;
	flex-shrink: 0;
	border-radius: 10px;
	overflow: hidden;
	background: var(--nova-surface-light, #f4f4f7);
	margin: 0 !important;
}

.nova-pdp-page .bundled_product .bundled_product_thumbnail img,
.nova-pdp-page .bundled_product_image img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	display: block;
	border-radius: 10px;
}

/* Right side — title (wraps), in-stock indicator below */
.nova-pdp-page .bundled_product_details {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.nova-pdp-page .bundled_product_title_inner,
.nova-pdp-page .bundled_product_title {
	font-family: var(--nova-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--nova-text-dark);
	margin: 0;
	/* WRAP, don't ellipsis — full title visible on multiple lines if
	   needed. */
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	word-break: break-word;
}

.nova-pdp-page .bundled_product_title a {
	color: inherit;
	text-decoration: none;
}

/* Hide external-link icons next to titles (multiple variants WC has
   shipped over time — svg, dashicon, the new <i> "open in new tab"). */
.nova-pdp-page .bundled_product_title svg,
.nova-pdp-page .bundled_product_title .dashicons-external,
.nova-pdp-page .bundled_product_title i,
.nova-pdp-page .bundled_product_title_inner svg,
.nova-pdp-page .bundled_product_title_inner i {
	display: none !important;
}

/* Hide every noisy panel inside a bundled item — description,
   per-item attributes table (WC's .shop_attributes), price, qty
   selector, the synthetic "after_cart_details" wrapper that hosts
   the empty pill button. Customers don't compose; they buy a kit. */
.nova-pdp-page .bundled_product .bundled_product_description,
.nova-pdp-page .bundled_product .bundled_product_excerpt,
.nova-pdp-page .bundled_product .bundled_product_price,
.nova-pdp-page .bundled_product .bundled_product_attributes,
.nova-pdp-page .bundled_product .bundled_product_attributes_title,
.nova-pdp-page .bundled_product_attributes_inner,
.nova-pdp-page .bundled_product .woocommerce-product-attributes,
.nova-pdp-page .bundled_product .shop_attributes,
.nova-pdp-page .bundled_product table.variations,
.nova-pdp-page .bundled_product .single_variation_wrap,
.nova-pdp-page .bundled_product .reset_variations,
.nova-pdp-page .bundled_product .bundled_item_after_cart_details,
.nova-pdp-page .bundled_product .bundled_item_button,
.nova-pdp-page .bundled_product .quantity,
.nova-pdp-page .bundled_product form.cart > .quantity,
.nova-pdp-page .bundled_product .bundled_item_button_button {
	display: none !important;
}

/* (Old rule — kept for any plugin version that emits this wrapper) */
.nova-pdp-page .bundled_product_attributes_inner_keep {
	font-size: 12px;
	color: var(--nova-text-dark-muted);
	font-weight: 400;
}

/* Per-item caption block — injected by nova_bundles_render_size_caption()
   in inc/nova-bundles.php right after the title. Renders a one-line
   short-description summary followed by the bundled item's size (if any)
   on its own line, so the customer sees what's being added without
   exposing the noisy plugin attributes table. */
.nova-pdp-page .bundled_product .nova-bundled-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
}

.nova-pdp-page .bundled_product .nova-bundled-size {
	font-family: var(--nova-font-body);
	font-size: 13px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--nova-brand-purple, #8a4fff);
	margin: 0;
}

.nova-pdp-page .bundled_product .nova-bundled-summary {
	font-family: var(--nova-font-body);
	font-size: 12px;
	line-height: 1.4;
	font-weight: 400;
	color: var(--nova-text-dark-muted, rgba(10, 10, 14, 0.6));
	margin: 0;
}

/* Plugin stock indicator — hidden site-wide on bundled items. The
   summary + size caption above carries the useful information; the
   raw "In stock" line was visual noise on simple bundled rows. */
.nova-pdp-page .bundled_product .stock {
	display: none;
}

/* Optional checkbox — kept visible if a bundle item is configured
   as optional (rare for Nova kits but supported) */
.nova-pdp-page .bundled_product_optional_checkbox {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--nova-text-dark-muted);
	margin-left: auto;
	flex-shrink: 0;
}

.nova-pdp-page .bundled_product_optional_checkbox input[type="checkbox"] {
	accent-color: var(--nova-accent);
	width: 14px;
	height: 14px;
	margin: 0;
}

/* ── Bundle price + qty + ATC row ─────────────────────────────────
   The plugin emits inside .bundle_form (after the bundled-item rows):
     .bundle_data > .bundle_wrap
       .bundle_price
       .bundle_error  (display:none)
       .quantity      (qty stepper)
       button.single_add_to_cart_button
   Lay out as: price on its own line above, qty + ATC inline below. */

.nova-pdp-page .bundle_data {
	width: 100%;
	margin: 16px 0 0;
}

.nova-pdp-page .bundle_data .bundle_wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	width: 100%;
}

.nova-pdp-page .bundle_data .bundle_price {
	width: 100%;
	margin: 0;
	order: 1;
}

.nova-pdp-page .bundle_data .bundle_error {
	width: 100%;
	order: 2;
}

.nova-pdp-page .bundle_data .quantity {
	order: 3;
	margin: 0;
	flex-shrink: 0;
}

.nova-pdp-page .bundle_data .single_add_to_cart_button,
.nova-pdp-page .bundle_data button.bundle_add_to_cart_button {
	order: 4;
	flex: 1 1 auto;
	min-width: 0;
}

.nova-pdp-page .bundle_price,
.nova-pdp-page .bundle_data .price {
	font-family: var(--nova-font-heading) !important;
	color: var(--nova-accent) !important;
}

.nova-pdp-page .bundle_price .from,
.nova-pdp-page .bundle_price .price-suffix {
	color: var(--nova-text-dark-muted);
	font-family: var(--nova-font-body);
	font-weight: 400;
	font-size: 0.875rem;
}

/* ── Bundle ATC button ────────────────────────────────────── */

.nova-pdp-page .bundle_button button.single_add_to_cart_button,
.nova-pdp-page .bundle_form .single_add_to_cart_button {
	font-family: var(--nova-font-body) !important;
	font-weight: 600 !important;
	border-radius: 50px !important;
}

/* Unavailable / out-of-stock child */
.nova-pdp-page .bundled_product_unavailable_text {
	font-size: 12px;
	color: #c81e1e;
}

.nova-pdp-page .bundled_item_unavailable .bundled_product {
	opacity: 0.55;
}

/* ── Cart / drawer / checkout ──────────────────────────────────────────
   Defensive hiding for bundled child rows that slip past the
   *_cart_item_visible filters (inc/nova-bundles.php). */

.nova-cart-drawer__item.bundled_item,
.nova-cart-page-item.bundled_item,
.nova-order-summary__item.bundled_item,
tr.bundled_item.cart_item {
	display: none !important;
}

/* Parent bundle row — append a small "BUNDLE" pill to the title
   so the customer knows it's the combined product. Each Nova surface
   has its own item + title class names; keep them in sync here:
     - Drawer:    .nova-cart-drawer__item   / .nova-cart-item__name
     - Cart page: .nova-cart-page-item      / .nova-cart-page-item__name
     - Checkout:  .nova-order-summary__item / .nova-order-summary__item-name
*/
.nova-cart-drawer__item.bundle_container_item .nova-cart-item__name::after,
.nova-cart-page-item.bundle_container_item .nova-cart-page-item__name::after,
.nova-order-summary__item.bundle_container_item .nova-order-summary__item-name::after,
tr.bundle_container_item.cart_item .product-name::after {
	content: "Bundle";
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	background: rgba(138, 79, 255, 0.12);
	color: var(--nova-accent);
	border-radius: 999px;
	font-family: var(--nova-font-body);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	vertical-align: middle;
}

.nova-pdp-page .bundle_button {
	display:contents;
}

/* ============================================================
   Responsive ladder — Phase 29 Plan 11
   The plugin emits .bundled_product rows + bundle price/qty/ATC
   wrap. Tighten paddings, shrink thumbs, and stack the qty + ATC
   row on phones so the bundle composer fits a 320px viewport.
   ============================================================ */

@media (max-width: 1024px) {
	.nova-pdp-page .bundled_product,
	.nova-pdp-page .bundled_product.product,
	.nova-pdp-page li.bundled_product {
		padding: 12px;
		gap: 12px;
	}

	.nova-pdp-page .bundled_product .bundled_product_thumbnail,
	.nova-pdp-page .bundled_product_image {
		width: 60px !important;
		height: 60px !important;
	}

	.nova-pdp-page .bundled_product_title_inner,
	.nova-pdp-page .bundled_product_title {
		font-size: 14px;
	}
}

@media (max-width: 768px) {
	.nova-pdp-page form.bundle_form,
	.nova-pdp-page .bundle_form {
		gap: 0 !important;
	}

	.nova-pdp-page form.bundle_form::before {
		font-size: 10px;
		margin-bottom: 6px;
	}

	.nova-pdp-page .bundled_product,
	.nova-pdp-page .bundled_product.product,
	.nova-pdp-page li.bundled_product {
		padding: 10px 12px;
		gap: 10px;
		margin-bottom: 6px !important;
		border-radius: 10px;
	}

	.nova-pdp-page .bundled_product .bundled_product_images,
	.nova-pdp-page .bundled_product .bundled_product_images.images {
		width: 56px !important;
		max-width: 56px !important;
		flex-basis: 56px !important;
	}

	.nova-pdp-page .bundled_product .bundled_product_thumbnail,
	.nova-pdp-page .bundled_product_image {
		width: 56px !important;
		height: 56px !important;
		border-radius: 8px;
	}

	.nova-pdp-page .bundled_product_title_inner,
	.nova-pdp-page .bundled_product_title {
		font-size: 13px;
		line-height: 1.3;
	}

	.nova-pdp-page .bundled_product .nova-bundled-size {
		font-size: 12px;
	}

	.nova-pdp-page .bundled_product .nova-bundled-summary {
		font-size: 11px;
	}

	.nova-pdp-page .bundle_data {
		margin-top: 14px;
	}

	.nova-pdp-page .bundle_data .bundle_wrap {
		gap: 10px;
	}

	.nova-pdp-page .bundle_data .single_add_to_cart_button,
	.nova-pdp-page .bundle_data button.bundle_add_to_cart_button,
	.nova-pdp-page .bundle_button button.single_add_to_cart_button,
	.nova-pdp-page .bundle_form .single_add_to_cart_button {
		flex: 1 1 auto;
		min-height: 44px;
		font-size: 14px;
	}
}

@media (max-width: 480px) {
	.nova-pdp-page .bundled_product,
	.nova-pdp-page .bundled_product.product,
	.nova-pdp-page li.bundled_product {
		padding: 10px;
		gap: 10px;
	}

	.nova-pdp-page .bundled_product .bundled_product_thumbnail,
	.nova-pdp-page .bundled_product_image {
		width: 52px !important;
		height: 52px !important;
	}

	.nova-pdp-page .bundled_product_title_inner,
	.nova-pdp-page .bundled_product_title {
		font-size: 12.5px;
	}

	.nova-pdp-page .bundle_data .bundle_wrap {
		gap: 8px;
	}

	/* Stack qty and ATC vertically on tiny screens so neither
	   gets squeezed below 44px. */
	.nova-pdp-page .bundle_data .quantity {
		width: 100%;
	}

	.nova-pdp-page .bundle_data .single_add_to_cart_button,
	.nova-pdp-page .bundle_data button.bundle_add_to_cart_button {
		width: 100%;
		flex: 1 1 100%;
		min-height: 46px;
		font-size: 14px;
	}
}