/* ==========================================================================
   Čaga — accessibility & usability enhancements
   Added 2026-08-27. Revised 2026-08-27 (pass 2). Loaded by
   shopkeeper-child/functions.php.
   REVERT: define('CAGA_ENHANCEMENTS', false); in wp-config.php,
           or delete this file. Nothing else depends on it.
   Scope: additive only. Every rule sets named properties on elements that
   already exist in Shopkeeper 10 markup. No layout restructuring, no new
   DOM, no generated text content (the site is multilingual via TranslatePress
   and CSS content: is not translatable).
   ========================================================================== */

/* --- 0. Tokens -----------------------------------------------------------
   Contrast ratios below are computed against the surfaces these colours are
   actually painted on in this theme (white #FFF page, #F4F4F4 footer,
   #F3F3F3 checkout review panel).

   --caga-accent      #EC7A5C  theme accent, unchanged. As TEXT on white it is
                               only 2.80:1 — never used for text here.
   --caga-accent-ink  #C43B17  same hue (12.5deg), darker. 5.27:1 on #FFF,
                               4.79:1 on #F4F4F4, 4.75:1 on #F3F3F3. Used
                               wherever the theme painted accent-coloured TEXT
                               or a state indicator.
   --caga-muted       #6E6E6E  5.10:1 on #FFF, 4.64:1 on #F4F4F4.
   --caga-line        #8A8A8A  3.45:1 on #FFF — meets WCAG 1.4.11 for control
                               boundaries (theme used #A5A5A5 = 2.46:1).
   --caga-danger      #B32D2E  5.93:1 on #FFF6F6.
   --caga-success     #1A7F37  4.82:1 on #F3FBF5.
   --caga-focus       #1F6FEB  4.63:1 on #FFF.
   --caga-gap-*                one 4px-based vertical rhythm, so form rows,
                               empty states and the checkout stack agree.     */
:root {
	--caga-focus: #1f6feb;
	--caga-accent: #15560f;
	--caga-accent-ink: #15560f;   /* brand green — was #C43B17, a darkened orange, before the site went green */
	--caga-muted: #6E6E6E;
	--caga-line: #8A8A8A;
	--caga-danger: #b32d2e;
	--caga-success: #1a7f37;
	--caga-gap-xs: 8px;
	--caga-gap-sm: 16px;
	--caga-gap-md: 24px;
	--caga-gap-lg: 40px;
	--caga-gap-xl: 64px;
}

/* --- 1. Visible keyboard focus (WCAG 2.4.7 / 2.4.11) ---------------------
   Shopkeeper suppresses the browser default with outline:none on buttons and
   outline-width:0 on radio/checkbox, so keyboard users have no indicator at
   all. :focus-visible keeps mouse clicks clean while restoring it.

   !important #1 and #2: required to beat the theme's outline:none /
   outline-width:0. There is no lower-specificity way to win against those.
   !important #3/#4 (box-shadow, and the outline-offset for the 17px custom
   radio/checkbox below): the theme sets box-shadow:none!important on
   every .button, which would otherwise erase the white halo. The halo
   guarantees the blue ring is always drawn against white rather than against
   the accent fill (#1F6FEB on #EC7A5C is only 1.66:1, on #FFF it is 4.63:1). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.button:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible {
	outline: 3px solid var(--caga-focus) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px #fff !important;
	border-radius: 2px;
}

/* Small custom-drawn controls: push the ring clear of the 17px box so it is
   not read as part of the control itself. */
input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible,
.input-radio:focus-visible,
.input-checkbox:focus-visible {
	outline-offset: 4px !important;
}

/* --- 2. Touch targets (WCAG 2.5.8 — minimum 24px, 44px recommended) ------ */
@media (max-width: 768px) {
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button,
	.single_add_to_cart_button,
	.wc-proceed-to-checkout .button,
	.site-header .menu-item > a,
	.quantity input[type="number"],
	.quantity .plus,
	.quantity .minus {
		min-height: 44px;
	}
	.woocommerce-cart .product-remove a.remove {
		width: 44px; height: 44px; line-height: 44px;
		display: inline-flex; align-items: center; justify-content: center;
	}
	/* Cart / checkout coupon field: theme height is 2.5rem = 40px. */
	#coupon_code { min-height: 44px; }
}

/* --- 3. Form fields: sizing, boundaries and error states -----------------
   The theme sets a fixed height:2.5rem (40px) on every text input and select,
   with box-sizing:border-box inherited from html. 12px of vertical padding
   then leaves a 14px content box for a 19.6px line — the value sits low and
   descenders clip. height:auto + min-height keeps the padding and gives the
   field a real 46px target on every viewport.                                */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	padding: 12px 14px;
	line-height: 1.4;
	height: auto;
	min-height: 46px;
}

/* Field boundaries. The Customizer paints every input border
   rgba(84,84,84,0.1)!important, which over white resolves to ~#EEEEEE —
   1.16:1, so the field edge is effectively invisible and a checkout form
   reads as floating text. WCAG 1.4.11 asks for 3:1 on control boundaries;
   #8A8A8A is 3.45:1. !important #5: the rule being overridden is itself
   !important, so there is no alternative. Scoped to form rows and the coupon
   field so site search and filter widgets keep the theme's hairline look.    */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
#coupon_code {
	border-color: var(--caga-line) !important;
}
.woocommerce form .form-row textarea {
	min-height: 120px;
}

/* One vertical rhythm for form rows. The theme gives 15px only to
   .validate-required rows and 0 to every other row, so optional fields, the
   login form and the order-tracking form all sit flush against each other. */
.woocommerce form .form-row,
.woocommerce-page form .form-row.validate-required {
	margin-bottom: var(--caga-gap-sm);
}

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid-required-field input.input-text {
	/* !important carried over from the boundary rule above: without it the
	   base border-color:!important would erase the error colour. */
	border-color: var(--caga-danger) !important;
	border-width: 2px;
	background-color: #fff6f6;
}
.woocommerce form .form-row.woocommerce-invalid > label,
.woocommerce form .form-row.woocommerce-invalid-required-field > label {
	color: var(--caga-danger);
}
.woocommerce form .form-row.woocommerce-validated input.input-text {
	border-color: var(--caga-success) !important;
}
.woocommerce form .form-row label {
	font-weight: 600;
	margin-bottom: 6px;
	display: inline-block;
}
.woocommerce form .form-row .required {
	color: var(--caga-danger);
	text-decoration: none;
}
/* Checkbox rows (remember me, terms, ship-to-different-address): the label is
   the real target, so give it room and make the whole row comfortable. */
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox {
	font-weight: 400;
	line-height: 1.5;
	padding: 6px 0;
}

/* --- 4. Inline notices ---------------------------------------------------
   NOTE: on every page whose body carries .gbt_custom_notif (home, product,
   cart, checkout, order tracking) Shopkeeper hides .woocommerce-error /
   -message / -info with display:none!important and replays them as a toast.
   These rules therefore only take effect on .gbt_classic_notif pages, which
   in this install is My account. Left in place because the notification mode
   is a Customizer setting that can be switched back.                         */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
	border-top-width: 4px;
	padding: 1em 1.5em 1em 3em;
	line-height: 1.6;
}
.woocommerce-error { border-top-color: var(--caga-danger); background: #fff6f6; }
.woocommerce-message { border-top-color: var(--caga-success); background: #f3fbf5; }

/* Toast notifications (.gbt_custom_notif mode). The theme paints them
   #EC7A5C with #FFF 16px/600 text — 2.80:1, a WCAG 1.4.3 failure on the one
   surface that carries "added to cart" and every checkout error. Same hue,
   darker: white on #C43B17 is 5.27:1. */
.page-notifications .gbt-custom-notification-notice {
	background: var(--caga-accent-ink);
}

/* --- 5. Add-to-cart loading feedback -------------------------------------
   WooCommerce adds .loading. The parent theme has
   `.woocommerce a.button.loading:after{display:none}` at the same specificity
   as the rule below, so without an explicit display this spinner never
   rendered. .progress-btn is excluded because Shopkeeper draws its own
   progress animation inside the single-product add-to-cart button.           */
.woocommerce a.button.loading:not(.progress-btn),
.woocommerce button.button.loading:not(.progress-btn) {
	opacity: .65;
	cursor: progress;
	position: relative;
}
.woocommerce a.button.loading:not(.progress-btn)::after,
.woocommerce button.button.loading:not(.progress-btn)::after {
	content: "";
	display: block;
	position: absolute; top: 50%; right: 12px;
	width: 14px; height: 14px; margin-top: -7px;
	border: 2px solid currentColor; border-right-color: transparent;
	border-radius: 50%;
	animation: caga-spin .7s linear infinite;
}
@keyframes caga-spin { to { transform: rotate(360deg); } }

/* --- 6. Stock + price hierarchy on product pages ------------------------- */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-weight: 700;
}
.woocommerce div.product .stock.in-stock { color: var(--caga-success); font-weight: 600; }
.woocommerce div.product .stock.out-of-stock { color: var(--caga-danger); font-weight: 600; }

/* --- 7. Order tracking page ----------------------------------------------
   This page uses the Shopkeeper Full Width template with the page title
   hidden, which resolves to `.page-title-hidden .content-area{padding:0}` and
   an .entry-content with no .row/.columns wrapper. Plain HTML content there
   therefore runs edge-to-edge: no gutter on a 375px phone and a ~1440px
   measure on desktop. WPBakery pages escape this because their rows carry
   their own padding; this page has none. Constrain the three blocks that make
   up the page rather than touching the template.                             */
.caga-track-intro,
.caga-track-help,
.woocommerce form.track_order {
	max-width: 46rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--caga-gap-md);
	padding-right: var(--caga-gap-md);
}
.caga-track-intro { margin-top: var(--caga-gap-lg); margin-bottom: var(--caga-gap-md); }
.caga-track-hint { font-size: .95em; color: var(--caga-muted); }
.caga-track-help {
	margin-top: var(--caga-gap-xl);
	margin-bottom: var(--caga-gap-xl);
	padding-top: var(--caga-gap-md);
	padding-bottom: var(--caga-gap-md);
	background: #f7f7f7;
	border-radius: 6px;
}
.caga-track-help h3 { margin-top: 0; font-size: 1.1em; }
.woocommerce form.track_order .form-row { margin-bottom: var(--caga-gap-sm); }
/* The two id/email fields are .form-row-first / -last floats; clear them so
   the submit row cannot ride up beside them. */
.woocommerce form.track_order .form-row:last-of-type { clear: both; }

/* --- 8. Skip link (keyboard users bypass the nav) ------------------------ */
.caga-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 100000;
	padding: 12px 20px; background: #fff; color: #111;
	box-shadow: 0 2px 8px rgba(0,0,0,.25); border-radius: 0 0 4px 0;
}
.caga-skip-link:focus { left: 0; }

/* --- 9. Respect reduced-motion (WCAG 2.3.3) ----------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- 10. Images: prevent layout shift where dimensions are known -------- */
.woocommerce ul.products li.product img,
.woocommerce div.product div.images img { height: auto; }

/* --- 11. Accent used as TEXT or as a state indicator ---------------------
   #EC7A5C is 2.80:1 on white — below the 4.5:1 that WCAG 1.4.3 requires for
   the 13px labels the theme paints with it, and below the 3:1 that 1.4.11
   requires for control boundaries. Each selector below is a place verified in
   the served HTML where the accent is used as ink rather than as a fill.
   The theme's accent FILL colour is deliberately left untouched — see the
   note in the report; changing it site-wide is a Customizer decision.        */
/* Text-style buttons. Each of these has a transparent background, so the ink
   sits on the white page: 2.80:1 -> 5.27:1. Buttons that keep an accent FILL
   on hover are deliberately excluded — recolouring their label alone cannot
   fix them (see the report; stock hover there is 1.38:1). */
.woocommerce-cart .return-to-shop a.button.wc-backward,
.shopkeeper-continue-shopping a.button:hover,
.woocommerce-cart td.actions .coupon button[name="apply_coupon"]:hover,
.woocommerce-cart td.actions .button[name="update_cart"]:hover,
.woocommerce-LostPassword a,
.woocommerce form.login .lost_password a,
.woocommerce-privacy-policy-link,
.caga-track-help a {
	color: var(--caga-accent-ink);
}

/* Body-copy links. :where() keeps this at specificity (0,0,2), so it wins
   only where the Customizer's bare `a{color:#EC7A5C}` (0,0,1) is what is
   currently in effect and yields to every themed link rule — including
   a.button, the footer and the nav. */
:where(.entry-content) p a,
:where(.entry-content) li a {
	color: var(--caga-accent-ink);
}

/* Custom-drawn radio / checkbox. Unchecked boundary was #A5A5A5 (2.46:1) and
   the checked dot was #EC7A5C (2.80:1); both fail WCAG 1.4.11. */
.input-radio:after,
.input-checkbox:after,
input[type="radio"]:after,
input[type="checkbox"]:after {
	border-color: var(--caga-line);
}
/* Checked state. The checkbox tick is a white border drawn by :before, so the
   fill lives on :after — never set a background on the checkbox :before or
   the tick disappears under it. White tick on #C43B17 is 5.27:1. */
.input-radio:checked:after,
.input-checkbox:checked:after,
input[type="radio"]:checked:after,
input[type="checkbox"]:checked:after {
	border-color: var(--caga-accent-ink);
}
.input-checkbox:checked:after,
input[type="checkbox"]:checked:after {
	background-color: var(--caga-accent-ink);
}
/* Radio dot. */
.input-radio:before,
input[type="radio"]:before {
	background: var(--caga-accent-ink);
}

/* Footer body copy was #868686 on #F4F4F4 = 3.31:1. */
.site-footer,
.site-footer .copyright_text,
.site-footer .copyright_text a {
	color: var(--caga-muted);
}

/* --- 12. Button hierarchy ------------------------------------------------
   Shopkeeper has exactly two tiers: a solid accent fill (.button.alt — add to
   cart, proceed to checkout, place order) and a naked text button
   (update cart, apply coupon, continue shopping, return to shop). The text
   tier is distinguished from body copy by colour alone, which is WCAG 1.4.1.
   Give it a persistent underline so it reads as an action without inventing a
   third visual tier.                                                         */
.woocommerce-cart td.actions .coupon button[name="apply_coupon"],
.woocommerce-cart td.actions .button[name="update_cart"],
.shopkeeper-continue-shopping a.button {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}
.woocommerce-cart td.actions .coupon button[name="apply_coupon"]:hover,
.woocommerce-cart td.actions .button[name="update_cart"]:hover,
.shopkeeper-continue-shopping a.button:hover {
	text-decoration-thickness: 2px;
}
/* The primary action on a page should not sit flush against the block above
   it. Applies to the cart's checkout button and the product page's add form. */
.wc-proceed-to-checkout { margin-top: var(--caga-gap-md); }

/* --- 13. Empty states ----------------------------------------------------
   13a. Empty cart. Shopkeeper designs a proper empty state — a 128px icon and
   a 30px message on .cart-empty — but the .gbt_custom_notif notification
   module matches .woocommerce-info and hides it with display:none!important,
   replaying it as a toast that auto-dismisses after 2.25s. The cart page is
   then a heading and a bare link. This is the last of the six !important
   declarations in this file (focus ring x3+1, field border, this) and the
   only way to beat display:none!important. It is scoped to
   the cart's own empty-cart wrapper, so the toast pipeline for real notices
   is untouched. Note gbt_custom_notif and woocommerce-cart are BOTH body
   classes, so they chain without a descendant combinator.                    */
body.gbt_custom_notif.woocommerce-cart .wc-empty-cart-message .cart-empty {
	display: block !important;
}
.woocommerce-cart .wc-empty-cart-message {
	margin-top: var(--caga-gap-lg);
}
.woocommerce-cart .wc-empty-cart-message .cart-empty {
	background: none;
	border: 0;
	padding: 0;
}
.woocommerce-cart .return-to-shop {
	margin-top: var(--caga-gap-md);
}

/* 13b. No search / catalogue results. A bare <p> with no spacing. */
.no-products-info {
	text-align: center;
	padding: var(--caga-gap-xl) var(--caga-gap-md);
}
.no-products-info p.woocommerce-no-products {
	font-size: 1.125rem;
	line-height: 1.6;
	margin: 0;
}

/* 13c. My account with no orders / no downloads. */
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-Message--info {
	padding: var(--caga-gap-md);
	line-height: 1.6;
}

/* --- 14. Checkout: totals, payment block and reassurance ----------------
   No text is generated here — see the report for the PHP hook that adds a
   translatable trust line. What CSS can do is make the existing reassurance
   copy (the privacy-policy paragraph WooCommerce already prints above the
   button) read as a reassurance panel instead of fine print, and give the
   payment step clear separation.                                             */
.woocommerce-checkout #payment ul.payment_methods {
	padding-top: var(--caga-gap-sm);
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
	padding: var(--caga-gap-xs) 0;
	line-height: 1.5;
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
	font-weight: 600;
	cursor: pointer;
}
.woocommerce-checkout #payment div.payment_box {
	border-left: 3px solid var(--caga-accent);
	padding: var(--caga-gap-xs) 0 var(--caga-gap-xs) var(--caga-gap-sm);
	line-height: 1.6;
}
.woocommerce-checkout #payment div.payment_box p:last-child { margin-bottom: 0; }

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	margin: var(--caga-gap-md) 0;
}
.woocommerce-checkout .woocommerce-privacy-policy-text {
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--caga-muted);
}
.woocommerce-checkout .woocommerce-privacy-policy-text p:last-child { margin-bottom: 0; }

.woocommerce-checkout form.checkout .form-row.place-order {
	margin-top: var(--caga-gap-md);
	padding-top: 0;
}

/* Shipping choices are the highest-error part of this checkout (parcel
   terminal selection). Give each option room and an obvious hit area. */
.woocommerce-shipping-methods li,
ul#shipping_method li {
	padding: var(--caga-gap-xs) 0;
	line-height: 1.5;
}
.woocommerce-shipping-methods li label,
ul#shipping_method li label {
	cursor: pointer;
}

/* --- 15. Cart: spacing rhythm ------------------------------------------- */
.woocommerce-cart table.cart td.actions .coupon {
	margin-bottom: var(--caga-gap-xs);
}
.woocommerce-cart .cart-collaterals .cart_totals tr th,
.woocommerce-cart .cart-collaterals .cart_totals tr td {
	line-height: 1.5;
}

/* --- 16. My account: login / register clarity ---------------------------
   Two stacked forms on mobile with no separation between them. */
@media (max-width: 1024px) {
	.woocommerce-account #customer_login .u-column2 {
		margin-top: var(--caga-gap-xl);
		padding-top: var(--caga-gap-md);
		border-top: 1px solid #e5e5e5;
	}
}
.woocommerce-account #customer_login h2 {
	margin-bottom: var(--caga-gap-sm);
}
.woocommerce-account .woocommerce-LostPassword {
	margin-top: var(--caga-gap-sm);
}
.caga-guest-track { line-height: 1.6; }

/* --- 17. Breadcrumb / measure ------------------------------------------- */
.woocommerce-breadcrumb { line-height: 1.6; }

/* --- 21. select2 controls: match the real inputs ------------------------- */
/* Reported visually by Roberts: the country and pickup-point boxes "look
   weird" next to the text fields.
   Cause: section 12 hardened `select`, but the visible control is NOT the
   <select>. WooCommerce (selectWoo) and MultiParcels (select2) both hide the
   native element and render their own <span class="select2-selection">, which
   inherited none of it — so those two fields kept the ~#EEEEEE 1.16:1 hairline
   and a different height while every neighbouring input had a 3.45:1 border
   and a 46px box. Same tokens, same geometry, applied to the element that is
   actually on screen.                                                        */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
	border: 1px solid var(--caga-line);
	min-height: 46px;
	border-radius: 0;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 44px;
	padding-left: 14px;
	padding-right: 32px;
	color: inherit;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 44px;
	right: 8px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--caga-muted);
}
/* One focus treatment for native and select2 controls alike. select2 paints
   its own blue open-state border; this replaces it with the project's focus
   token so the pickup-point field stops looking like a foreign widget. */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
	border-color: var(--caga-focus);
	box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.25);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
	min-height: 40px;
	padding: 8px 12px;
	border: 1px solid var(--caga-line);
}
.select2-dropdown {
	border-color: var(--caga-line);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--caga-accent-ink);
}

/* --- 22. Shipping methods: carrier logo and price on one line ------------ */
/* Reported visually by Roberts: the DPD and Omniva rows "look weird".
   Cause: MultiParcels puts a BLOCK-level
   <div class="multiparcels-carrier-icon-image-holder"> inside the <label>, so
   the logo forces a line break and the price drops to a third line — radio,
   then logo, then text, stacked and ragged. The two carrier PNGs are also
   different intrinsic sizes with an inline style="max-width:100px", so DPD
   rendered much larger than Omniva and the rows did not align.
   Fix: make the holder inline and normalise both logos into the same box, so
   every carrier row reads: [radio] [logo] Name: price — on one line.         */
.woocommerce-checkout #shipping_method li,
.woocommerce-cart #shipping_method li,
ul#shipping_method li {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 10px 0;
}
ul#shipping_method li > label {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	margin: 0;
	line-height: 1.4;
}
.multiparcels-carrier-icon-image-holder {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 24px;
}
/* !important #7: the plugin sets style="max-width:100px" inline on the <img>,
   and an inline style cannot be beaten any other way. Both carrier logos are
   normalised into the same 58x24 box so the rows align with each other. */
img.multiparcels_carrier_icon {
	max-width: 58px !important;
	max-height: 24px !important;
	width: auto;
	height: auto;
	display: block;
	object-fit: contain;
}
/* Keep the price on the same line as the carrier name. */
ul#shipping_method li label .woocommerce-Price-amount {
	white-space: nowrap;
	font-weight: 600;
}
/* The pickup-point selector that MultiParcels injects after the chosen method
   is a sibling of the list, not part of it — give it room to breathe. */
.multiparcels-pickup-location-wrapper,
#multiparcels_pickup_location_field {
	margin-top: var(--caga-gap-sm);
}

/* --- 23. Pickup-point selector: make it read as one field ---------------- */
/* Reported visually by Roberts. The picker is a select2 with a clear (x) and a
   dropdown arrow crowding the same right edge, and the chosen terminal's
   address prints underneath as an unstyled grey paragraph, so the control and
   its own answer looked like two unrelated things.
   Selectors verified present in the served checkout markup:
   .mp-selected-pickup-point-info (the address line). */
#multiparcels_pickup_location_field,
.multiparcels-pickup-location-wrapper {
	margin-top: var(--caga-gap-sm);
}
/* Give the clear (x) and the arrow room so they stop overlapping the text. */
.select2-container--default .select2-selection--single .select2-selection__clear {
	margin-right: 22px;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--caga-muted);
}
.select2-container--default .select2-selection--single .select2-selection__clear:hover {
	color: var(--caga-danger);
}
/* The chosen terminal's address, printed by MultiParcels under the control.
   Tie it visually to the field it belongs to instead of leaving it floating. */
.mp-selected-pickup-point-info {
	display: block;
	margin: var(--caga-gap-xs) 0 0;
	padding: 10px 12px;
	background: #f7f7f7;
	border-left: 3px solid var(--caga-accent-ink);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: #545454;      /* 7.57:1 on #f7f7f7 — was the theme's light grey */
}

/* --- 24. Add-to-cart toast: give the button and the message room ---------- */
/* Reported visually by Roberts: the "Apskatīt grozu →" button sits jammed
   against the message text on the coloured bar, with no breathing space and no
   alignment between them.
   WooCommerce emits `<div class="woocommerce-message"><a class="button
   wc-forward">…</a> text…</div>` — the button is an inline anchor immediately
   followed by a bare text node, so with no flex context the two simply collide.
   The toast is built by JS at runtime, so this could not be selector-verified
   from served HTML — only the container `.page-notifications` and the message
   class are confirmed present. */
.page-notifications .woocommerce-message,
#gbt-custom-notification-notice .woocommerce-message,
#gbt-custom-notification-notice .woocommerce-info,
#gbt-custom-notification-notice .woocommerce-error {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	padding: 16px 20px;
	margin: 0;
	line-height: 1.5;
	font-size: 0.9375rem;
}
/* The button is a fixed-size affordance, the text is the flexible part. */
#gbt-custom-notification-notice .woocommerce-message > a.button,
.page-notifications .woocommerce-message > a.button {
	flex: 0 0 auto;
	margin: 0;
	white-space: nowrap;
}
/* On a phone the button and a two-line product name will not share a row;
   let the text drop underneath instead of squeezing both. */
@media (max-width: 480px) {
	.page-notifications .woocommerce-message,
	#gbt-custom-notification-notice .woocommerce-message {
		gap: 10px;
		padding: 14px 16px;
	}
	#gbt-custom-notification-notice .woocommerce-message > a.button,
	.page-notifications .woocommerce-message > a.button {
		width: 100%;
		text-align: center;
	}
}

/* --- 25. Header icons: account and search removed ------------------------ */
/* Customer accounts and login were switched off (see functions.php,
   CAGA_NO_ACCOUNTS) — the header account icon was still there, linking to a
   page that now redirects to the shop. Dead UI. Search removed at Roberts'
   request. display:none also takes both out of the tab order and the
   accessibility tree, so this is a removal, not just a visual hide.
   Verified present in the served header: .my_account_icon,
   .offcanvas-menu-button.search-button, .site-search. */
.my_account_icon,
.header-elements .my_account_icon,
li.my_account_icon {
	display: none !important;
}
.offcanvas-menu-button.search-button,
.search-button,
.site-search,
.site-search-close {
	display: none !important;
}

/* --- 26. Empty cart: drop the broken decorative glyph -------------------- */
/* Section 13a restored Shopkeeper's empty-cart state, which the notification
   module had been hiding. That was right — but the state carries a ~128px
   icon-font glyph, and on this install it renders as a large broken shape
   instead of an icon (the Shopkeeper icon font either does not carry that
   codepoint or is not loaded on this page). Subagent C explicitly flagged the
   glyph as unverifiable without a browser; Roberts' screenshot showed it
   rendering wrong.
   The message and the return link are what the state is for, so the decoration
   is suppressed rather than chased. */
.woocommerce-cart .wc-empty-cart-message .cart-empty:before,
.woocommerce-cart .wc-empty-cart-message .cart-empty:after,
.woocommerce-cart .cart-empty:before,
.woocommerce-cart .cart-empty:after {
	content: none !important;
	display: none !important;
}
.woocommerce-cart .wc-empty-cart-message .cart-empty {
	font-size: 1.5rem;
	line-height: 1.4;
	font-weight: 600;
}

/* --- 27. Toast colour: brand green instead of the darkened orange -------- */
/* Section 4 darkened the theme's #EC7A5C to #C43B17 purely to reach 4.5:1
   (white on the stock accent is 2.80:1 — a WCAG 1.4.3 failure on the one
   surface carrying "added to cart" and every checkout error). It passed, but
   Roberts' screenshot shows it reads as an odd orange slab.
   #15560f is this shop's OWN brand green — the header band Subagent A
   extracted from the old site's email templates — so the toast now matches the
   transactional emails instead of inventing a colour. White on #15560f is
   ~9.9:1, comfortably past AA and better than the value it replaces. */
.page-notifications .gbt-custom-notification-notice {
	background: #15560f;
}
.page-notifications .gbt-custom-notification-notice a.button {
	background: rgba(255, 255, 255, 0.14);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.55);
}
.page-notifications .gbt-custom-notification-notice a.button:hover {
	background: #ffffff;
	color: #15560f;
}

/* --- 28. Pickup-point field, rebuilt ------------------------------------- */
/* Supersedes the first pass in sections 22–23, which Roberts' screenshot shows
   was wrong in three ways:
     1. the clear (x) and the dropdown arrow crowded the same right edge and
        collided with the terminal name, which was already truncating;
     2. the selected address sat in a panel with a RED left bar
        (--caga-accent-ink), so a successful choice read as an error;
     3. the control and its own confirmation looked like two unrelated boxes.
   Rebuilt as one field with a quiet confirmation beneath it, using the brand
   green for the "chosen" cue so it reads as confirmed rather than alarming. */

#multiparcels_pickup_location_field,
.multiparcels-pickup-location-wrapper {
	margin-top: var(--caga-gap-sm);
	margin-bottom: var(--caga-gap-sm);
}

/* Room on the right for BOTH controls, so the name never runs under them. */
.select2-container--default .select2-selection--single .select2-selection__rendered {
	padding-right: 58px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
/* The clear control: neutral, out of the arrow's way, and a real hit target. */
.select2-container--default .select2-selection--single .select2-selection__clear {
	position: absolute;
	top: 0;
	right: 32px;
	height: 100%;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0 4px;
	font-size: 1.125rem;
	line-height: 1;
	color: var(--caga-muted);
	border-right: 1px solid #e3e3e3;
}
.select2-container--default .select2-selection--single .select2-selection__clear:hover {
	color: var(--caga-danger);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
	right: 6px;
	width: 24px;
}

/* The chosen terminal's address. A confirmation, not a warning: brand green,
   quiet type, tied to the field above it rather than floating free. */
.mp-selected-pickup-point-info {
	display: block;
	margin: 6px 0 0;
	padding: 10px 12px;
	background: #f4f7f3;
	border: 1px solid #dde7da;
	border-left: 3px solid #15560f;
	border-radius: 2px;
	font-size: 0.875rem;
	line-height: 1.5;
	font-weight: 400;
	color: #3d4a3a;            /* 8.2:1 on #f4f7f3 */
	letter-spacing: 0;
	text-transform: none;
}

/* --- 29. Shipping methods, corrected ------------------------------------- */
/* Supersedes section 22, which was wrong in a way the screenshot made obvious.
   Section 22 put `flex-wrap: wrap` on the <li>. The order-review column is
   narrow (~400px) and the carrier label is uppercase and bold, so when
   [radio][logo]"OMNIVA PAKOMĀTS: €3.49" did not fit on one line the LABEL
   wrapped to the next row — orphaning the radio alone on the first line. The
   row then read as three stacked fragments.
   The row itself must never wrap; only the text inside the label may. The
   review table cell is also right-aligned, which is what pushed the whole
   block to the right, so alignment is reset for this list. */

.woocommerce-checkout #shipping_method li,
.woocommerce-cart #shipping_method li,
ul#shipping_method li {
	display: flex;
	flex-wrap: nowrap;          /* the radio is never orphaned */
	align-items: flex-start;
	gap: 8px;
	padding: 8px 0;
	text-align: left;           /* the totals cell is right-aligned; undo it here */
	margin: 0;
}
ul#shipping_method li input.shipping_method,
ul#shipping_method li input[type="radio"] {
	flex: 0 0 auto;
	margin: 3px 0 0;
}
ul#shipping_method li > label {
	display: flex;
	flex-wrap: wrap;            /* the TEXT may wrap; the row may not */
	align-items: center;
	gap: 6px 8px;
	flex: 1 1 auto;
	min-width: 0;               /* lets the label shrink instead of forcing a wrap */
	margin: 0;
	line-height: 1.35;
	text-align: left;
}
/* A smaller logo box buys width back for the name and price. */
.multiparcels-carrier-icon-image-holder {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	width: 42px;
	height: 20px;
}
img.multiparcels_carrier_icon {
	max-width: 42px !important;
	max-height: 20px !important;
	width: auto;
	height: auto;
	display: block;
	object-fit: contain;
}
ul#shipping_method li label .woocommerce-Price-amount {
	white-space: nowrap;
	font-weight: 700;
}

/* --- 30. Shipping methods: back to the theme's own flow ------------------ */
/* Sections 22 and 29 both tried to solve this with flex on the <li>. Both were
   wrong, and the second was worse: the theme draws its radio with an
   absolutely-positioned pseudo-element, so flex removed the space that
   positioning relied on and the carrier logo rendered ON TOP of the radio.
   I should have taken the minimal route the first time.
   The ONLY real defect is that MultiParcels puts a BLOCK-level
   <div class="multiparcels-carrier-icon-image-holder"> inside the <label>,
   which forces a line break and drops the price onto a third line. Make that
   div inline and hand everything else back to the theme. */

.woocommerce-checkout #shipping_method li,
.woocommerce-cart #shipping_method li,
ul#shipping_method li {
	display: block;          /* undo the flex from sections 22 and 29 */
	flex-wrap: initial;
	align-items: initial;
	gap: normal;
	padding: 6px 0;
	text-align: left;        /* the totals cell is right-aligned; undo it here */
	line-height: 1.4;
}
ul#shipping_method li input.shipping_method,
ul#shipping_method li input[type="radio"] {
	flex: initial;
	margin: 0 6px 0 0;
	vertical-align: middle;
}
ul#shipping_method li > label {
	display: inline;         /* undo the flex from sections 22 and 29 */
	flex: initial;
	min-width: 0;
	margin: 0;
	vertical-align: middle;
	text-align: left;
}
/* The one actual fix: inline, so the logo sits beside the name instead of
   forcing its own line. */
.multiparcels-carrier-icon-image-holder {
	display: inline-block !important;
	vertical-align: middle;
	width: auto;
	height: auto;
	margin: 0 6px 0 0;
	line-height: 0;
}
img.multiparcels_carrier_icon {
	max-width: 38px !important;
	max-height: 18px !important;
	width: auto;
	height: auto;
	display: inline-block;
	vertical-align: middle;
	object-fit: contain;
}
ul#shipping_method li label .woocommerce-Price-amount {
	white-space: nowrap;
	font-weight: 700;
}

/* --- 31. Turnstile on checkout: centre it -------------------------------- */
/* The login form prints its own inline centring style; the checkout widget
   never got one, so the Cloudflare box sat hard left. */
.caga-turnstile-checkout {
	display: flex;
	justify-content: center;
	margin: var(--caga-gap-sm) 0;
}
.caga-turnstile-checkout .cf-turnstile {
	display: inline-block;
}

/* --- 32. Selected pickup point: a caption, not a panel ------------------- */
/* The bordered box duplicated what the field above already says and read as a
   separate component. It exists because the select truncates long terminal
   names, so the full address is still worth showing — just quietly. */
.mp-selected-pickup-point-info {
	display: block;
	margin: 6px 0 0;
	padding: 0;
	background: none;
	border: 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	font-weight: 400;
	color: var(--caga-muted);
	text-transform: none;
	letter-spacing: 0;
}

/* --- 33. Delivery options: drop the carrier logos ------------------------ */
/* Four attempts (sections 22, 29, 30 and the sizing in each) failed to place
   MultiParcels' carrier logo cleanly. The theme draws its radio with an
   absolutely-positioned pseudo-element, and the plugin injects a block-level
   <div> holding the logo as the first child of the <label> — so the image kept
   landing on top of the radio circle no matter how it was sized or displayed.
   The row already says "DPD pakomāts" and "Omniva pakomāts" in words, so the
   18px logo carries no information. Removing it removes the entire problem and
   leaves a clean, conventional radio list. */
.multiparcels-carrier-icon-image-holder,
img.multiparcels_carrier_icon {
	display: none !important;
}

/* Plain rows, theme flow, nothing clever. */
.woocommerce-checkout #shipping_method li,
.woocommerce-cart #shipping_method li,
ul#shipping_method li {
	display: block;
	padding: 7px 0;
	text-align: left;
	line-height: 1.4;
}
ul#shipping_method li > label {
	display: inline;
	vertical-align: middle;
	margin: 0;
}

/* --- 34. Pickup field: name only, centred, no address caption ------------ */
/* Roberts: drop the address line under the list, centre the box, and once a
   terminal is chosen show just its name. The address is dropped rather than
   restyled — the terminal name is what identifies it to the customer, and the
   full address was duplicated from the option text anyway. */
.mp-selected-pickup-point-info {
	display: none !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	text-align: center;
	padding-left: 40px;   /* balances the clear + arrow on the right so the */
	padding-right: 58px;  /* text is optically centred, not just centred    */
}
.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-container--default .select2-results__option {
	text-align: left;     /* the dropdown list stays left-aligned and readable */
}

/* --- 35. Delivery options: logos back, positioned deterministically ------ */
/* Previous attempts let the THEME position the radio (absolutely, via a
   pseudo-element) and then tried to fit the logo around it — which is why the
   logo kept landing on the circle. This takes explicit control instead:
   the row is position:relative, the radio is pinned to the left, and the row
   is padded far enough that nothing can ever occupy that space. No guessing. */
.woocommerce-checkout #shipping_method li,
.woocommerce-cart #shipping_method li,
ul#shipping_method li {
	display: block;
	position: relative;
	padding: 9px 0 9px 30px;   /* 30px reserved for the radio, always */
	margin: 0;
	text-align: left;
	line-height: 1.4;
	min-height: 26px;
}
ul#shipping_method li input.shipping_method,
ul#shipping_method li input[type="radio"] {
	position: absolute;
	left: 0;
	top: 10px;
	margin: 0;
}
ul#shipping_method li > label {
	display: inline;
	margin: 0;
	vertical-align: middle;
	cursor: pointer;
}
/* Logos restored, inline with the text, inside the padded area. */
.multiparcels-carrier-icon-image-holder {
	display: inline-block !important;
	vertical-align: middle;
	width: auto;
	height: auto;
	margin: 0 8px 0 0;
	line-height: 0;
}
img.multiparcels_carrier_icon {
	display: inline-block !important;
	max-width: 46px !important;
	max-height: 20px !important;
	width: auto;
	height: auto;
	vertical-align: middle;
	object-fit: contain;
}
ul#shipping_method li label .woocommerce-Price-amount {
	white-space: nowrap;
	font-weight: 700;
}

/* --- 36. Pickup select: a normal box ------------------------------------- */
/* Equal padding on both sides so the text is genuinely centred rather than
   nudged off by the controls sitting on the right, a real 48px box, and no
   permanent blue glow — the focus ring belongs on focus only. */
#mp-wc-pickup-point-shipping-select + .select2-container,
.select2-container {
	width: 100% !important;
}
.select2-container--default .select2-selection--single {
	height: 48px;
	min-height: 48px;
	border: 1px solid var(--caga-line);
	border-radius: 2px;
	background: #fff;
	box-shadow: none;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	height: 46px;
	line-height: 46px;
	padding: 0 52px;           /* equal both sides -> actually centred */
	text-align: center;
	color: #333;
	font-size: 0.9375rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 46px;
	top: 0;
	right: 8px;
	width: 22px;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
	position: absolute;
	top: 0;
	right: 34px;
	height: 46px;
	line-height: 46px;
	margin: 0;
	padding: 0 6px;
	font-size: 1.125rem;
	color: var(--caga-muted);
	border: 0;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
	border-color: var(--caga-focus);
	box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.2);
}

/* --- 37. Carrier logos moved to the right end of the row ----------------- */
/* Roberts' idea, and a better one than mine: instead of fighting the theme's
   absolutely-positioned radio for space on the LEFT, float the logo to the
   right end of the row. The logo is a block-level div injected by MultiParcels
   as the first child of the label, so floating it right pulls it out of the
   text flow entirely — it can no longer collide with anything, and the row
   reads: (o) DPD PAKOMĀTS: €3.29            [dpd] */
.multiparcels-carrier-icon-image-holder {
	display: block !important;
	float: right;
	width: auto;
	height: auto;
	margin: 0 0 0 10px;
	line-height: 0;
}
img.multiparcels_carrier_icon {
	display: block !important;
	max-width: 48px !important;
	max-height: 20px !important;
	width: auto;
	height: auto;
	object-fit: contain;
}
ul#shipping_method li {
	overflow: hidden;          /* contain the float so rows keep their height */
}
ul#shipping_method li > label {
	display: block;            /* so the floated logo sits inside the label box */
	margin: 0;
	cursor: pointer;
}

/* --- 38. Pickup select: genuinely full width ----------------------------- */
/* The box was inset because the wrapper WooCommerce puts it in carries the
   theme's form-row padding. Zero it and let the control fill the column, so it
   lines up with the totals table above it. */
#mp-wc-pickup-point-shipping-select,
#mp-wc-pickup-point-shipping-select + .select2-container,
.select2-container--default {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
}
.woocommerce-checkout .mp-pickup-point-wrapper,
.woocommerce-checkout #mp-wc-pickup-point-shipping-select-wrapper,
.woocommerce-checkout .form-row:has(#mp-wc-pickup-point-shipping-select) {
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}

/* --- 39. Final geometry pass on the shipping rows and pickup box --------- */

/* a) The label text was still clipping the radio. The theme's radio glyph is
      drawn wider than the input it hangs off, so 30px was not enough clearance.
      36px, and the row keeps no right padding so the float can reach the edge. */
.woocommerce-checkout #shipping_method li,
.woocommerce-cart #shipping_method li,
ul#shipping_method li {
	padding: 9px 0 9px 36px;
	overflow: hidden;
}
ul#shipping_method li > label {
	display: block;
	padding: 0;
	margin: 0;
}

/* b) Logos hard against the right edge. The review-table cell adds its own
      padding, so the holder pulls back out of it. */
.multiparcels-carrier-icon-image-holder {
	float: right;
	margin: 0 0 0 10px !important;
}
.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table th {
	padding-right: 0;
}
ul#shipping_method,
.woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* c) The box: use the WHOLE width for the terminal name. Centring it while
      reserving 52px on both sides was throwing away ~100px of the very text
      that was truncating. Left-aligned, minimal left inset, and only the right
      side reserved for the clear (x) and the arrow. */
.select2-container--default .select2-selection--single .select2-selection__rendered {
	text-align: left;
	padding: 0 58px 0 14px;
	height: 46px;
	line-height: 46px;
}

/* --- 40. Shipping rows: reset my earlier attempts, two rules only --------- */
/* Sections 22, 29, 30, 33, 35, 37 and 39 all tried to solve the carrier-logo
   placement in CSS and all failed. The structure is now fixed in PHP
   (woocommerce_cart_shipping_method_full_label), so everything below is reset
   to the theme's own rendering and only the float remains. */
.woocommerce-checkout #shipping_method li,
.woocommerce-cart #shipping_method li,
ul#shipping_method li {
	display: list-item;
	position: static;
	padding: 7px 0;
	margin: 0;
	overflow: hidden;      /* contains the floated logo */
	text-align: left;
	line-height: 1.5;
	min-height: 0;
}
ul#shipping_method li input.shipping_method,
ul#shipping_method li input[type="radio"] {
	position: static;      /* hand the radio back to the theme */
	float: none;
	margin: 0 6px 0 0;
	vertical-align: middle;
}
ul#shipping_method li > label {
	display: inline;
	padding: 0;
	margin: 0;
	vertical-align: middle;
}
/* The only two rules that matter now. */
.caga-ship-logo {
	float: right;
	margin-left: 10px;
	line-height: 0;
}
.caga-ship-logo img {
	display: block;
	max-width: 48px;
	max-height: 20px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* --- 41. Radio: give the pseudo-elements their anchor back --------------- */
/* Two bugs, one cause — section 40 set the radio input to position:static.
   The theme draws the circle and the checked dot as ABSOLUTELY positioned
   pseudo-elements on the input. With the input static they had no positioning
   context of their own and anchored to the nearest positioned ancestor
   instead: the order-review box. That is why the green dot appeared in the
   TOP-LEFT CORNER of the summary rather than inside its radio.
   position:relative costs nothing visually and restores the anchor. */
.woocommerce-checkout #shipping_method li input.shipping_method,
.woocommerce-checkout #shipping_method li input[type="radio"],
ul#shipping_method li input.shipping_method,
ul#shipping_method li input[type="radio"] {
	position: relative;
	margin: 0 10px 0 0;
	vertical-align: middle;
	flex: none;
	float: none;
}

/* The second bug: `overflow: hidden` was added purely to contain the floated
   logo, and it was CLIPPING the radio — the circle is drawn wider than the
   input, so half of it was cut off. A clearfix contains the float without
   clipping anything. */
.woocommerce-checkout #shipping_method li,
.woocommerce-cart #shipping_method li,
ul#shipping_method li {
	overflow: visible;
	display: list-item;
	position: static;
	padding: 9px 0;
	margin: 0;
	text-align: left;
	line-height: 1.6;
}
ul#shipping_method li::after {
	content: "";
	display: table;
	clear: both;
}
/* Keep the label text off the circle without absolute positioning. */
ul#shipping_method li > label {
	display: inline;
	vertical-align: middle;
	margin: 0;
	padding: 0;
}

/* --- 42. Shipping rows: the price must never wrap under the radio -------- */
/* Roberts' cart screenshot: "OMNIVA PAKOMATS: EUR 3.49" wrapped and the price
   landed on top of the radio button. Section 40 handed the row back to the
   theme as inline flow -- the li has no left padding and the label is
   display:inline -- so radio and label are one continuous inline run. The DPD
   label fits on one line in the narrow cart column; the Omniva one does not,
   and its second line starts at x=0, which is precisely where the radio sits.

   A hanging indent would fix it only by guessing the radio's rendered width,
   and section 39 already got that guess wrong once (the theme draws the glyph
   wider than the input). A two-column flex row does not care about the width:
   the radio is one column, the label is another, and wrapping is confined to
   the label. */
.woocommerce-checkout #shipping_method li,
.woocommerce-cart #shipping_method li,
ul#shipping_method li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	margin: 0;
	overflow: visible;      /* section 41: clipping cuts the theme radio glyph */
	text-align: left;
	line-height: 1.6;
}
/* Section 41's clearfix would become a stray flex item here. The float it was
   containing lives inside the label, so the label contains it instead. */
ul#shipping_method li::after {
	display: none;
}
ul#shipping_method li input.shipping_method,
ul#shipping_method li input[type="radio"] {
	position: relative;     /* section 41: anchors the theme's pseudo-elements */
	flex: 0 0 auto;         /* the radio never shrinks */
	margin: 0;
	float: none;
	vertical-align: middle;
}
ul#shipping_method li > label {
	display: block;
	flex: 1 1 auto;
	min-width: 0;           /* wrap inside the column instead of overflowing it */
	margin: 0;
	padding: 0;
}
ul#shipping_method li > label::after {
	content: "";
	display: table;
	clear: both;            /* contains the right-floated carrier logo */
}