body.vi-commerce-ui #main .vi-delivery-bar { padding: 16px 18px; margin: 0 0 20px; color: #173e43; background: #f3f8f7; border: 1px solid #cddddd; border-radius: 8px; font-size: 15px; line-height: 1.5; }
body.vi-commerce-ui #main .vi-delivery-bar p { margin: 6px 0; }
body.vi-commerce-ui #main :is(.vi-delivery-bar, .vi-shipping-help) a { color: #17636b; text-decoration: underline; text-underline-offset: 3px; }
body.vi-commerce-ui #main .vi-shipping-help { padding: 14px; color: #173e43; background: #f3f8f7; border: 1px solid #cddddd; border-radius: 6px; text-align: left; font-size: 15px; line-height: 1.5; }
body.vi-commerce-ui #main .vi-shipping-help p { margin: 0 0 10px; }
body.vi-commerce-ui #main .vi-shipping-help p:last-child { margin-bottom: 0; }
body.vi-commerce-ui #main .vi-shipping-help a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; }
body.vi-commerce-ui #main .vi-shipping-help { overflow-wrap: anywhere; }

/* A no-rate explanation needs the whole summary width, including on mobile. */
body.vi-checkout-compact #main :is(#order_review, .cart_totals) table.shop_table:has(.vi-shipping-help),
body.vi-checkout-compact #main :is(#order_review, .cart_totals) table.shop_table:has(.vi-shipping-help) > :is(thead, tbody, tfoot) { display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
body.vi-checkout-compact #main :is(#order_review, .cart_totals) table.shop_table:has(.vi-shipping-help) tr { display: flex; width: 100%; min-width: 0; box-sizing: border-box; }
body.vi-checkout-compact #main :is(#order_review, .cart_totals) table.shop_table:has(.vi-shipping-help) tr > :is(th, td) { display: block; box-sizing: border-box; min-width: 0; width: 40%; max-width: 40%; flex: 0 0 40%; white-space: normal; text-align: right; }
body.vi-checkout-compact #main :is(#order_review, .cart_totals) table.shop_table:has(.vi-shipping-help) tr > :is(th, td):first-child { width: 60%; max-width: 60%; flex-basis: 60%; text-align: left; }
body.vi-checkout-compact #main :is(#order_review, .cart_totals) table.shop_table:has(.vi-shipping-help) tr.woocommerce-shipping-totals { display: block; }
body.vi-checkout-compact #main :is(#order_review, .cart_totals) table.shop_table:has(.vi-shipping-help) tr.woocommerce-shipping-totals > :is(th, td) { width: 100%; max-width: 100%; text-align: left; }