/* =============================================================== V77 — Checkout / Cart sidebar polish --------------------------------------------------------------- */ /* --------------------------------------------------------------- §3 — Multi-item divider between product list and Shipping Method. Renders only when at least two .exa-checkout-sidebar-product children are present in the items list (or the cart product stack). Uses :has() to avoid touching the PHP template. --------------------------------------------------------------- */ .exa-checkout-sidebar-products:has(> .exa-checkout-sidebar-product + .exa-checkout-sidebar-product)::after, .exa-cart-summary-products:has(> .exa-cart-summary-product + .exa-cart-summary-product)::after { content: ""; display: block; height: 1px; background: #d1d5db; margin: 1rem 0 1.25rem; } /* --------------------------------------------------------------- §3 — Shipping row layout fix. The DHL row sat flush against the totals block above. Restore vertical rhythm with explicit padding and remove the flush border that produced the broken boundary. --------------------------------------------------------------- */ .exa-checkout-shipping-methods { padding-top: 0.5rem; padding-bottom: 0.75rem; border-top: 0; } .exa-checkout-shipping-methods + .exa-checkout-sidebar-totals { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e5e7eb; } .exa-checkout-shipping-methods .exa-checkout-shipping-option { margin-bottom: 0; } .exa-checkout-shipping-methods .woocommerce-shipping-methods li { padding: 0; } .exa-checkout-shipping-methods .woocommerce-shipping-methods li + li { margin-top: 0.65rem; } /* --------------------------------------------------------------- §4 — Mobile, PAYMENT STAGE only: inside the Order Details product container, the Quantity label + value stack centered directly underneath the product title, with the line price below. Title stays left-aligned (default); only the Quantity row and price are re-centered on this stage. --------------------------------------------------------------- */ @media (max-width: 767px) { .exa-checkout-v2[data-checkout-stage="payment"] .exa-checkout-order-items .exa-cart-item-details { grid-template-columns: 1fr; gap: 0.65rem; justify-items: center; text-align: center; } .exa-checkout-v2[data-checkout-stage="payment"] .exa-checkout-order-items .exa-cart-item-info { width: 100%; justify-self: stretch; text-align: center; } .exa-checkout-v2[data-checkout-stage="payment"] .exa-checkout-order-items .exa-cart-item-name { text-align: center; } .exa-checkout-v2[data-checkout-stage="payment"] .exa-checkout-order-items .exa-cart-item-qty { justify-self: center; align-items: center; text-align: center; margin: 0 auto; max-width: none; } .exa-checkout-v2[data-checkout-stage="payment"] .exa-checkout-order-items .exa-cart-item-qty-label, .exa-checkout-v2[data-checkout-stage="payment"] .exa-checkout-order-items .exa-cart-item-qty-label + *, .exa-checkout-v2[data-checkout-stage="payment"] .exa-checkout-order-items .exa-cart-inline-qty-static { text-align: center; color: inherit; } .exa-checkout-v2[data-checkout-stage="payment"] .exa-checkout-order-items .exa-cart-item-subtotal { justify-self: center; align-items: center; text-align: center; margin: 0 auto; } } /* --------------------------------------------------------------- §5 — Hide the currency switcher on Payment / Review checkout stages. The switcher template is rendered outside the checkout wrapper, so we toggle visibility from via a class added by checkout-step-currency-toggle.js (see functions.php). --------------------------------------------------------------- */ body.exa-checkout-hide-currency-switcher .currency-sidebar { display: none !important; }