Commit 0fdf501f13e for woocommerce

commit 0fdf501f13e787f53d2127a7d1a2a794b7c6c0a4
Author: Raluca Stan <ralucastn@gmail.com>
Date:   Thu Jul 9 15:05:46 2026 +0200

    [Checkout block] Lower specificity of payment method label image styles (#66158)

    Lower specificity of payment method label image styles

    Wrap the ancestor selector in :where() so the payment method label image
    rule stays a low-specificity (0,0,1) default. It matches the same images
    as before, but payment methods can now override it for their own imagery
    (e.g. logos in a popover) with a single class and no !important.

    Avoids narrowing the selector, which regressed nested icons in #61726
    and was reverted in #62241.

    Closes #61725.

    Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
    Co-authored-by: Francesco <frosso@users.noreply.github.com>

diff --git a/plugins/woocommerce/changelog/fix-payment-label-popover-image-alignment b/plugins/woocommerce/changelog/fix-payment-label-popover-image-alignment
new file mode 100644
index 00000000000..2d923e324d0
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-payment-label-popover-image-alignment
@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+Lower the specificity of the payment method label image styles so payment methods can override them for their own imagery (e.g. logos rendered in a popover) without needing !important.
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/payment-methods/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/payment-methods/style.scss
index 7764e8ad06f..dc5e546e520 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/payment-methods/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/payment-methods/style.scss
@@ -37,13 +37,6 @@
 			justify-content: flex-start;
 			border-width: 0;
 		}
-		.wc-block-components-radio-control__label img {
-			height: 24px;
-			max-height: 24px;
-			max-width: 100%;
-			object-fit: contain;
-			object-position: left;
-		}
 	}

 	.wc-block-components-checkout-step__description-payments-aligned {
@@ -53,6 +46,23 @@
 		padding-bottom: $gap-smaller;
 	}
 }
+
+// Default size and alignment for payment method label images (e.g. gateway
+// logos). The whole selector is wrapped in :where() so it stays at (0,0,1) — a
+// low-specificity default that payment methods can override for their own
+// imagery (e.g. logos rendered in a popover) with a single class and without
+// !important, regardless of stylesheet load order.
+:where(
+	.wc-block-checkout__payment-method
+	.wc-block-components-radio-control-accordion-option
+	.wc-block-components-radio-control__label
+) img {
+	height: 24px;
+	max-height: 24px;
+	max-width: 100%;
+	object-fit: contain;
+	object-position: left;
+}
 .wc-block-components-radio-control-accordion-content {
 	@include font-small-locked;
 	padding: 0 $gap $gap;