/**
 * Frontend styles for VideoLink Customization
 * Internet-Dongle bundle visibility — controlled by .vl-dongle-bundle class.
 * Specificity beats WooCommerce rules without !important by stacking classes.
 */

/* Hidden by default; revealed by JS when "No" is selected */
.vl-dongle-bundle {
	display: none;
}

/* Shown when "No" is selected via JS */
.vl-dongle-bundle.is-visible {
	display: block;
	margin-bottom: 30px;
}

/**
 * Override: woocommerce div.product div.images.bundled_product_images
 * WC specificity: (0, 3, 3)
 * Ours:           (0, 4, 1) — wins by adding .woocommerce context + stacking classes.
 */
.woocommerce .bundled_product_summary.vl-dongle-bundle div.images.bundled_product_images {
	float: none;
	display: block;
	width: 100%;
	margin-left: 0;
	padding-left: 0 !important; /* Theme forces this with !important — must match. */
	margin-bottom: 10px;
}

/**
 * Override: div.bundled_product_summary:not(.thumbnail_hidden) .details
 * WC specificity: (0, 3, 1)
 * Ours:           (0, 4, 1) — wins by adding .vl-dongle-bundle to the same element.
 */
.bundled_product_summary.vl-dongle-bundle:not(.thumbnail_hidden) .details,
.bundled_product_summary.vl-dongle-bundle .details {
	float: none;
	width: 100%;
	display: block;
	margin-left: 0;
	padding-left: 0;
	border: none;
}

/* Title and checkbox — no indent */
.vl-dongle-bundle .bundled_product_title,
.vl-dongle-bundle h4.product_title,
.vl-dongle-bundle .bundled_product_optional_checkbox,
.vl-dongle-bundle .bundled_product_title_inner {
	margin-left: 0;
	padding-left: 0;
	border: none;
}

/**
 * Override: figure, .wp-caption { flex-direction: column }
 * Theme applies this globally; it breaks dongle image alignment on mobile.
 * Reset to row (flex default) scoped to the dongle card only.
 */
.vl-dongle-bundle figure {
	flex-direction: row;
}

/**
 * Override: @media (max-width: 1439px) .woocommerce div.product div.images { padding-left: 120px }
 * Theme applies 120px padding-left at this breakpoint. Nullify it when dongle class is present.
 */
@media (max-width: 1439px) {
	.woocommerce .bundled_product_summary.vl-dongle-bundle div.images.bundled_product_images {
		padding-left: 0;
	}
}