body.sacc-optimised-checkout{--sacc-accent:#209447;--sacc-radius:14px;--sacc-summary:560px;--ink:#181820;--muted:#6b6d73;--line:#e4e5e8;--soft:#f7f7f8}.sacc-optimised-checkout .woocommerce{max-width:1320px;margin:auto}.sacc-optimised-checkout form.checkout{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(460px,var(--sacc-summary));gap:clamp(34px,5vw,78px);align-items:start}.sacc-optimised-checkout form.checkout>.col2-set,.sacc-optimised-checkout #order_review,.sacc-optimised-checkout #order_review_heading{width:auto!important;float:none!important;clear:none!important}.sacc-optimised-checkout #order_review_heading,.sacc-optimised-checkout #order_review{grid-column:2}.sacc-optimised-checkout #order_review_heading{font-size:28px;margin:0 0 16px}.sacc-optimised-checkout #order_review{background:#fff;border:1px solid var(--line);border-radius:calc(var(--sacc-radius) + 4px);padding:clamp(20px,3vw,32px);box-shadow:0 12px 38px rgba(20,22,28,.06);overflow:visible}.sacc-sticky-summary #order_review{position:sticky;top:24px}.sacc-optimised-checkout input.input-text,.sacc-optimised-checkout textarea,.sacc-optimised-checkout select,.sacc-optimised-checkout .select2-selection{min-height:50px;background:#fbfbfc!important;border:1px solid #dedfe2!important;border-radius:9px!important;box-shadow:none!important}.sacc-optimised-checkout .form-row label{font-weight:650;margin-bottom:7px}.sacc-optimised-checkout .woocommerce-checkout-review-order-table{border:0!important;margin:0!important}.sacc-optimised-checkout .woocommerce-checkout-review-order-table th,.sacc-optimised-checkout .woocommerce-checkout-review-order-table td{padding:16px 0!important;border-left:0!important;border-right:0!important}.sacc-optimised-checkout .product-total,.sacc-optimised-checkout .order-total td,.sacc-optimised-checkout .cart-subtotal td{text-align:right}.sacc-optimised-checkout .order-total th,.sacc-optimised-checkout .order-total td{font-size:20px;border-top:2px solid var(--ink)!important}.sacc-delivery-hub{margin:6px 0 16px;padding:18px;border:1px solid var(--line);border-radius:var(--sacc-radius);background:linear-gradient(145deg,#fff,#fafbfa)}.sacc-delivery-hub small{display:block;color:var(--sacc-accent);font-weight:750;text-transform:uppercase;letter-spacing:.09em;margin-bottom:5px}.sacc-delivery-hub h3{font-size:20px!important;margin:0 0 6px!important}.sacc-delivery-hub p{font-size:13px;color:var(--muted);line-height:1.5;margin:0!important}.sacc-optimised-checkout .woocommerce-shipping-totals>th{display:none}.sacc-optimised-checkout .woocommerce-shipping-totals>td{display:block;width:100%;padding:6px 0 18px!important;text-align:left!important}.sacc-optimised-checkout #shipping_method{display:grid;gap:10px;margin:0!important;padding:0!important}.sacc-optimised-checkout #shipping_method li{position:relative;margin:0!important;padding:0!important}.sacc-optimised-checkout #shipping_method li>input{position:absolute;opacity:0}.sacc-optimised-checkout #shipping_method li>label{display:grid!important;grid-template-columns:38px 1fr;align-items:center;min-height:70px;padding:13px 15px!important;margin:0!important;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;transition:.18s}.sacc-optimised-checkout #shipping_method li>label:before{content:attr(data-sacc-icon);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--soft)}.sacc-optimised-checkout #shipping_method li>input:checked+label{border-color:var(--sacc-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--sacc-accent) 13%,transparent);background:color-mix(in srgb,var(--sacc-accent) 5%,#fff)}.sacc-shipping-label{display:flex;flex-direction:column;gap:3px}.sacc-shipping-title{font-size:14px;font-weight:720}.sacc-shipping-meta{font-size:11px;color:var(--muted)}.sacc-optimised-checkout .vsf-cold-chain-card,.sacc-optimised-checkout .saf-eta-card,.sacc-optimised-checkout .vsf-lmc-capacity-card,.sacc-optimised-checkout .vsf-lmc-collection-notice,.sacc-optimised-checkout .vsf-lmc-final-mile,.sacc-optimised-checkout .vsf-pudo-selector,.sacc-optimised-checkout .vsf-unified-fee-card{width:100%!important;max-width:none!important;box-sizing:border-box!important;border-radius:var(--sacc-radius)!important}.sacc-optimised-checkout .saf-eta-card{margin:14px 0!important}.sacc-optimised-checkout .vsf-lmc-capacity-card.sacc-compact .vsf-lmc-capacity-card__details,.sacc-optimised-checkout .vsf-lmc-capacity-card.sacc-compact .vsf-lmc-capacity-card__saving{display:none}.sacc-capacity-toggle{width:100%;margin-top:9px;padding:8px;border:0;border-top:1px solid var(--line);background:transparent;color:var(--muted);font-size:11px;font-weight:650;cursor:pointer}.sacc-reassurance{margin:18px 0 4px;padding:11px;border-radius:9px;background:var(--soft);color:var(--muted);font-size:11px;font-weight:600;text-align:center}.sacc-reassurance:before{content:'🔒 ';}.sacc-optimised-checkout #payment{background:transparent!important;padding:0!important}.sacc-optimised-checkout #payment ul.payment_methods{padding:0!important;border:0!important}.sacc-optimised-checkout #payment ul.payment_methods>li{margin:0 0 9px!important;padding:12px 14px!important;border:1px solid var(--line);border-radius:10px;background:#fff}.sacc-optimised-checkout #place_order{width:100%!important;min-height:55px;border-radius:9px!important;background:var(--sacc-accent)!important;font-weight:750!important;letter-spacing:.08em}.sacc-optimised-checkout .vsf-temperature-badge{min-height:22px!important;padding:3px 8px!important;font-size:10px!important}@media(max-width:900px){.sacc-optimised-checkout form.checkout{display:block!important}.sacc-optimised-checkout #order_review_heading{margin-top:36px!important}.sacc-sticky-summary #order_review{position:static}}@media(max-width:600px){.sacc-optimised-checkout #order_review{margin-left:-8px;margin-right:-8px;padding:17px 14px;border-radius:13px}} /* --------------------------------------------------------- * Theme width compatibility * Glozin and similar themes constrain #content > .container, * #primary, article and .entry-content. Override those wrappers * only on the optimised checkout page. * --------------------------------------------------------- */ body.sacc-optimised-checkout #content.site-content, body.sacc-optimised-checkout .site-content { width: 100% !important; max-width: none !important; } body.sacc-optimised-checkout #content > .container, body.sacc-optimised-checkout .site-content > .container { display: block !important; width: min(100% - 48px, 1560px) !important; max-width: 1560px !important; margin-right: auto !important; margin-left: auto !important; padding-right: 0 !important; padding-left: 0 !important; } body.sacc-optimised-checkout #primary, body.sacc-optimised-checkout .content-area, body.sacc-optimised-checkout main#main, body.sacc-optimised-checkout article.page, body.sacc-optimised-checkout article.type-page, body.sacc-optimised-checkout .entry-content { display: block !important; float: none !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin-right: 0 !important; margin-left: 0 !important; } body.sacc-optimised-checkout #secondary, body.sacc-optimised-checkout aside.sidebar { display: none !important; } body.sacc-optimised-checkout .entry-content > .woocommerce, body.sacc-optimised-checkout .woocommerce { width: 100% !important; max-width: none !important; margin-right: 0 !important; margin-left: 0 !important; } body.sacc-optimised-checkout form.checkout.woocommerce-checkout { width: 100% !important; max-width: none !important; } body.sacc-optimised-checkout form.checkout.woocommerce-checkout > .col2-set, body.sacc-optimised-checkout form.checkout.woocommerce-checkout > #order_review_heading, body.sacc-optimised-checkout form.checkout.woocommerce-checkout > #order_review { min-width: 0 !important; max-width: none !important; } @media (min-width: 1440px) { body.sacc-optimised-checkout #content > .container, body.sacc-optimised-checkout .site-content > .container { width: min(100% - 64px, 1560px) !important; } } @media (max-width: 900px) { body.sacc-optimised-checkout #content > .container, body.sacc-optimised-checkout .site-content > .container { width: min(100% - 28px, 1560px) !important; } } /* --------------------------------------------------------- * Checkout grid row fix * Keep the order review directly beneath "Your order" * instead of allowing it to auto-place below the full-height * billing column. * --------------------------------------------------------- */ @media (min-width: 901px) { body.sacc-optimised-checkout form.checkout.woocommerce-checkout { grid-template-rows: auto 1fr !important; } body.sacc-optimised-checkout form.checkout.woocommerce-checkout > .col2-set { grid-column: 1 !important; grid-row: 1 / span 2 !important; align-self: start !important; } body.sacc-optimised-checkout form.checkout.woocommerce-checkout > #order_review_heading { grid-column: 2 !important; grid-row: 1 !important; align-self: end !important; } body.sacc-optimised-checkout form.checkout.woocommerce-checkout > #order_review { grid-column: 2 !important; grid-row: 2 !important; align-self: start !important; margin-top: 0 !important; } } /* --------------------------------------------------------- * Inner checkout module width + emoji compatibility * Prevent plugin modules from inheriting narrow inline widths * or table-cell constraints inside the order review column. * --------------------------------------------------------- */ body.sacc-optimised-checkout #order_review, body.sacc-optimised-checkout #order_review table, body.sacc-optimised-checkout #order_review tbody, body.sacc-optimised-checkout #order_review tr, body.sacc-optimised-checkout #order_review td { min-width: 0 !important; box-sizing: border-box !important; } body.sacc-optimised-checkout #order_review .woocommerce-shipping-totals.shipping, body.sacc-optimised-checkout #order_review .woocommerce-shipping-totals.shipping > td { width: 100% !important; max-width: none !important; } body.sacc-optimised-checkout #order_review #shipping_method, body.sacc-optimised-checkout #order_review #shipping_method > li, body.sacc-optimised-checkout #order_review #shipping_method > li > label, body.sacc-optimised-checkout #order_review .sacc-delivery-hub-row, body.sacc-optimised-checkout #order_review .sacc-delivery-hub-row > td, body.sacc-optimised-checkout #order_review .sacc-delivery-hub, body.sacc-optimised-checkout #order_review .sacc-eta-row, body.sacc-optimised-checkout #order_review .sacc-eta-row > td { width: 100% !important; max-width: none !important; } body.sacc-optimised-checkout #order_review .vsf-lmc-capacity-card, body.sacc-optimised-checkout #order_review .vsf-lmc-collection-notice, body.sacc-optimised-checkout #order_review .vsf-lmc-final-mile, body.sacc-optimised-checkout #order_review .vsf-pudo-locker-panel, body.sacc-optimised-checkout #order_review .vsf-pudo-selector, body.sacc-optimised-checkout #order_review .vsf-cold-chain-card, body.sacc-optimised-checkout #order_review .vsf-unified-fee-card, body.sacc-optimised-checkout #order_review .saf-eta-card { display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin-right: 0 !important; margin-left: 0 !important; } body.sacc-optimised-checkout #order_review .vsf-lmc-capacity-card *, body.sacc-optimised-checkout #order_review .vsf-lmc-collection-notice *, body.sacc-optimised-checkout #order_review .vsf-lmc-final-mile *, body.sacc-optimised-checkout #order_review .vsf-pudo-locker-panel *, body.sacc-optimised-checkout #order_review .vsf-pudo-selector *, body.sacc-optimised-checkout #order_review .vsf-cold-chain-card *, body.sacc-optimised-checkout #order_review .vsf-unified-fee-card *, body.sacc-optimised-checkout #order_review .saf-eta-card * { min-width: 0 !important; box-sizing: border-box !important; } body.sacc-optimised-checkout #order_review .vsf-lmc-collection-notice, body.sacc-optimised-checkout #order_review .vsf-lmc-final-mile { padding: 18px !important; } body.sacc-optimised-checkout #order_review .vsf-lmc-final-mile__option { width: 100% !important; max-width: none !important; } body.sacc-optimised-checkout #order_review .vsf-lmc-collection-notice__content, body.sacc-optimised-checkout #order_review .vsf-lmc-final-mile__content { width: 100% !important; max-width: none !important; } body.sacc-optimised-checkout #order_review .vsf-lmc-collection-notice p, body.sacc-optimised-checkout #order_review .vsf-lmc-final-mile p, body.sacc-optimised-checkout #order_review .vsf-cold-chain-card p { max-width: none !important; white-space: normal !important; } body.sacc-optimised-checkout #order_review .sacc-shipping-label { width: 100% !important; min-width: 0 !important; } body.sacc-optimised-checkout #order_review .sacc-shipping-label__title, body.sacc-optimised-checkout #order_review .sacc-shipping-label__meta { display: block; width: 100%; overflow-wrap: anywhere; } /* Emoji/font fallback */ body.sacc-optimised-checkout [data-sacc-icon]::before, body.sacc-optimised-checkout .sacc-checkout-reassurance::before, body.sacc-optimised-checkout .vsf-temperature-badge, body.sacc-optimised-checkout .vsf-cold-chain-card__icon, body.sacc-optimised-checkout .vsf-unified-fee-card__icon, body.sacc-optimised-checkout .saf-eta-card__icon, body.sacc-optimised-checkout [class*="icon"] { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif !important; font-variant-emoji: emoji; text-rendering: auto; } /* Do not leave an empty white icon bubble when a notice has no glyph. */ body.sacc-optimised-checkout .vsf-cold-chain-card__icon:empty, body.sacc-optimised-checkout .vsf-lmc-collection-notice__icon:empty, body.sacc-optimised-checkout .vsf-unified-fee-card__icon:empty { display: none !important; } /* Stable CSS icons as a fallback where the theme strips emoji glyphs. */ body.sacc-optimised-checkout #shipping_method > li > label::before { content: attr(data-sacc-symbol) !important; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important; } @media (min-width: 901px) { body.sacc-optimised-checkout #order_review { overflow: visible !important; } body.sacc-optimised-checkout #shipping_method { grid-template-columns: 1fr !important; } } /* --------------------------------------------------------- * 2.1.4 shipping module hard-width reset * Some themes assign inline-block, float or percentage widths * to shipping list items and nested plugin panels. * --------------------------------------------------------- */ body.sacc-optimised-checkout #order_review .woocommerce-shipping-totals.shipping td, body.sacc-optimised-checkout #order_review .woocommerce-shipping-methods, body.sacc-optimised-checkout #order_review #shipping_method { display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; float: none !important; clear: both !important; } body.sacc-optimised-checkout #order_review #shipping_method > li { display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; float: none !important; clear: both !important; box-sizing: border-box !important; } body.sacc-optimised-checkout #order_review #shipping_method > li > label { display: grid !important; width: 100% !important; max-width: none !important; min-width: 0 !important; box-sizing: border-box !important; } body.sacc-optimised-checkout #order_review #shipping_method > li > *:not(input):not(label), body.sacc-optimised-checkout #order_review #shipping_method > li .vsf-pudo-locker-panel, body.sacc-optimised-checkout #order_review #shipping_method > li .vsf-pudo-selector, body.sacc-optimised-checkout #order_review #shipping_method > li .vsf-lmc-capacity-card, body.sacc-optimised-checkout #order_review #shipping_method > li .vsf-lmc-collection-notice, body.sacc-optimised-checkout #order_review #shipping_method > li .vsf-lmc-final-mile { display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin-right: 0 !important; margin-left: 0 !important; float: none !important; clear: both !important; box-sizing: border-box !important; } body.sacc-optimised-checkout #order_review .vsf-pudo-locker-panel, body.sacc-optimised-checkout #order_review .vsf-pudo-selector { padding: 18px !important; } body.sacc-optimised-checkout #order_review .vsf-pudo-locker-panel input, body.sacc-optimised-checkout #order_review .vsf-pudo-selector input, body.sacc-optimised-checkout #order_review .vsf-pudo-locker-results, body.sacc-optimised-checkout #order_review .vsf-pudo-locker-result, body.sacc-optimised-checkout #order_review .vsf-pudo-locker-list, body.sacc-optimised-checkout #order_review .vsf-pudo-locker-item { width: 100% !important; max-width: none !important; min-width: 0 !important; box-sizing: border-box !important; } body.sacc-optimised-checkout #order_review .vsf-pudo-locker-result, body.sacc-optimised-checkout #order_review .vsf-pudo-locker-item { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 14px !important; } body.sacc-optimised-checkout #order_review .vsf-pudo-locker-result button, body.sacc-optimised-checkout #order_review .vsf-pudo-locker-item button { width: auto !important; min-width: 90px !important; max-width: 130px !important; } /* Remove decorative circles when the original icon failed to render. */ body.sacc-optimised-checkout .vsf-cold-chain-card > :first-child:empty, body.sacc-optimised-checkout .vsf-lmc-collection-notice > :first-child:empty, body.sacc-optimised-checkout .vsf-unified-fee-card > :first-child:empty, body.sacc-optimised-checkout .vsf-cold-chain-card__icon:empty, body.sacc-optimised-checkout .vsf-lmc-collection-notice__icon:empty, body.sacc-optimised-checkout .vsf-unified-fee-card__icon:empty { display: none !important; } /* Use simple text-safe symbols if colour emoji is unavailable. */ body.sacc-optimised-checkout #shipping_method > li > label::before { color: var(--sacc-checkout-accent); font-family: Arial, Helvetica, sans-serif !important; font-size: 18px !important; font-weight: 700 !important; } /* Make the shipping area consume the entire table row. */ body.sacc-optimised-checkout .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals.shipping { display: table-row !important; width: 100% !important; } body.sacc-optimised-checkout .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals.shipping > td { display: table-cell !important; width: 100% !important; } /* Override any theme nth-child widths within the order table. */ body.sacc-optimised-checkout #order_review table td:nth-child(1), body.sacc-optimised-checkout #order_review table td:nth-child(2) { max-width: none !important; } @media (max-width: 600px) { body.sacc-optimised-checkout #order_review #shipping_method > li > label { grid-template-columns: 32px minmax(0, 1fr) !important; } body.sacc-optimised-checkout #order_review .vsf-pudo-locker-result, body.sacc-optimised-checkout #order_review .vsf-pudo-locker-item { grid-template-columns: 1fr !important; } body.sacc-optimised-checkout #order_review .vsf-pudo-locker-result button, body.sacc-optimised-checkout #order_review .vsf-pudo-locker-item button { width: 100% !important; max-width: none !important; } } /* 2.1.5 runtime-normalised shipping layout */ body.sacc-optimised-checkout #order_review #shipping_method{ display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important; align-items:stretch!important;gap:12px!important;width:100%!important;max-width:none!important} body.sacc-optimised-checkout #order_review #shipping_method>li{ display:block!important;flex:0 0 100%!important;align-self:stretch!important; width:100%!important;max-width:none!important;min-width:0!important;float:none!important} body.sacc-optimised-checkout #order_review #shipping_method>li>label, body.sacc-optimised-checkout #order_review .vsf-lmc-capacity-card, body.sacc-optimised-checkout #order_review .vsf-lmc-collection-notice, body.sacc-optimised-checkout #order_review .vsf-lmc-final-mile, body.sacc-optimised-checkout #order_review .vsf-pudo-locker-panel, body.sacc-optimised-checkout #order_review .vsf-pudo-selector, body.sacc-optimised-checkout #order_review .vsf-cold-chain-card, body.sacc-optimised-checkout #order_review .vsf-unified-fee-card, body.sacc-optimised-checkout #order_review .saf-eta-card{ width:100%!important;max-width:none!important;min-width:0!important; float:none!important;clear:both!important;box-sizing:border-box!important} body.sacc-optimised-checkout .vsf-cold-chain-card__icon, body.sacc-optimised-checkout .vsf-lmc-collection-notice__icon, body.sacc-optimised-checkout .vsf-unified-fee-card__icon, body.sacc-optimised-checkout .saf-eta-card__icon{display:none!important} body.sacc-optimised-checkout #shipping_method>li>label::before{ content:"›"!important;color:var(--sacc-checkout-accent)!important; font-family:Arial,Helvetica,sans-serif!important;font-size:28px!important; font-weight:400!important;line-height:1!important} /* --------------------------------------------------------- * 2.1.6 shipping table-row width fix * The theme gives the Shipment and separate table * columns. The shipping controls therefore received only half * of the order-review width, even though their own width was 100%. * --------------------------------------------------------- */ body.sacc-optimised-checkout #order_review tr.woocommerce-shipping-totals.shipping { display: block !important; width: 100% !important; max-width: none !important; } body.sacc-optimised-checkout #order_review tr.woocommerce-shipping-totals.shipping > th { display: none !important; width: 0 !important; max-width: 0 !important; padding: 0 !important; border: 0 !important; } body.sacc-optimised-checkout #order_review tr.woocommerce-shipping-totals.shipping > td { display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; padding-right: 0 !important; padding-left: 0 !important; text-align: left !important; } body.sacc-optimised-checkout #order_review tr.woocommerce-shipping-totals.shipping > td::before { display: none !important; content: none !important; } body.sacc-optimised-checkout #order_review tr.woocommerce-shipping-totals.shipping #shipping_method, body.sacc-optimised-checkout #order_review tr.woocommerce-shipping-totals.shipping #shipping_method > li, body.sacc-optimised-checkout #order_review tr.woocommerce-shipping-totals.shipping #shipping_method > li > label { width: 100% !important; max-width: none !important; min-width: 0 !important; } /* Remove the old theme-generated icon circle entirely. */ body.sacc-optimised-checkout #shipping_method > li > label { grid-template-columns: minmax(0, 1fr) !important; } body.sacc-optimised-checkout #shipping_method > li > label::before { display: none !important; content: none !important; } body.sacc-optimised-checkout #shipping_method > li > label .sacc-shipping-label { padding-right: 28px !important; } /* Keep the selected checkmark. */ body.sacc-optimised-checkout #shipping_method > li > input:checked + label::after { display: grid !important; } /* ========================================================= * SA Cold Chain Logistics 2.2.0 * Consolidated checkout presentation layer * ========================================================= */ /* Generated table rows use the full order-review width. */ body.sacc-optimised-checkout #order_review tr.sacc-delivery-hub-row > td, body.sacc-optimised-checkout #order_review tr.sacc-shipping-full-row > td, body.sacc-optimised-checkout #order_review tr.sacc-live-eta-row > td { display: table-cell !important; width: 100% !important; max-width: none !important; min-width: 0 !important; padding-right: 0 !important; padding-left: 0 !important; text-align: left !important; box-sizing: border-box !important; } body.sacc-optimised-checkout #order_review tr.sacc-shipping-full-row > td { padding-top: 8px !important; padding-bottom: 12px !important; } body.sacc-optimised-checkout #order_review tr.sacc-live-eta-row > td { padding-top: 0 !important; padding-bottom: 18px !important; } /* The native WooCommerce row remains only as the AJAX source anchor. */ body.sacc-optimised-checkout #order_review tr.woocommerce-shipping-totals.shipping.sacc-shipping-source-row { display: none !important; } /* Shipping methods now live in a dedicated, unconstrained container. */ body.sacc-optimised-checkout #order_review .sacc-shipping-full-width, body.sacc-optimised-checkout #order_review .sacc-shipping-full-width #shipping_method { width: 100% !important; max-width: none !important; min-width: 0 !important; box-sizing: border-box !important; } body.sacc-optimised-checkout #order_review .sacc-shipping-full-width #shipping_method { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; } body.sacc-optimised-checkout #order_review .sacc-shipping-full-width #shipping_method > li { display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; box-sizing: border-box !important; } body.sacc-optimised-checkout #order_review .sacc-shipping-full-width #shipping_method > li > label { display: grid !important; grid-template-columns: 38px minmax(0, 1fr) !important; align-items: center !important; column-gap: 12px !important; width: 100% !important; max-width: none !important; min-width: 0 !important; min-height: 72px !important; padding: 15px 44px 15px 16px !important; box-sizing: border-box !important; } body.sacc-optimised-checkout #order_review .sacc-shipping-full-width #shipping_method > li > label::before { content: attr(data-sacc-icon) !important; display: grid !important; place-items: center !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; background: var(--soft, #f3f4f3) !important; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important; font-size: 19px !important; line-height: 1 !important; color: initial !important; } body.sacc-optimised-checkout #order_review .sacc-shipping-full-width .sacc-shipping-label { display: block !important; width: 100% !important; min-width: 0 !important; padding: 0 !important; } body.sacc-optimised-checkout #order_review .sacc-shipping-full-width .sacc-shipping-title, body.sacc-optimised-checkout #order_review .sacc-shipping-full-width .sacc-shipping-meta { display: block !important; width: 100% !important; min-width: 0 !important; overflow-wrap: anywhere !important; } /* Full-width child components. */ body.sacc-optimised-checkout #order_review .sacc-shipping-full-width .vsf-lmc-capacity-card, body.sacc-optimised-checkout #order_review .sacc-shipping-full-width .vsf-lmc-collection-notice, body.sacc-optimised-checkout #order_review .sacc-shipping-full-width .vsf-lmc-final-mile, body.sacc-optimised-checkout #order_review .sacc-shipping-full-width .vsf-pudo-locker-panel, body.sacc-optimised-checkout #order_review .sacc-shipping-full-width .vsf-pudo-selector, body.sacc-optimised-checkout #order_review tr.sacc-live-eta-row #saf-checkout-eta, body.sacc-optimised-checkout #order_review tr.sacc-live-eta-row .saf-eta-card { display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin-right: 0 !important; margin-left: 0 !important; box-sizing: border-box !important; } /* Method-specific children are controlled by the checkout controller. */ body.sacc-optimised-checkout .sacc-method-child-hidden { display: none !important; } /* Restore real icons/emojis. Only genuinely empty containers are hidden. */ body.sacc-optimised-checkout .vsf-cold-chain-card__icon, body.sacc-optimised-checkout .vsf-lmc-collection-notice__icon, body.sacc-optimised-checkout .vsf-unified-fee-card__icon, body.sacc-optimised-checkout .saf-eta-card__icon { display: inline-grid !important; place-items: center !important; flex: 0 0 auto !important; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important; font-variant-emoji: emoji; text-rendering: auto; } body.sacc-optimised-checkout .sacc-empty-icon { display: none !important; } /* ========================================================= * 2.3.0 Payment experience * ========================================================= */ body.sacc-optimised-checkout .sacc-payment-methods-bar { display: flex; align-items: center; justify-content: center; width: 100%; margin: 10px 0 18px; padding: 10px 14px; border: 1px solid var(--line, #e1e4e5); border-radius: var(--sacc-radius, 14px); background: #0d0f13; overflow: hidden; box-sizing: border-box; } body.sacc-optimised-checkout .sacc-payment-methods-bar img { display: block; width: 100%; max-width: 620px; height: auto; max-height: 48px; object-fit: contain; } body.sacc-optimised-checkout #payment ul.payment_methods.sacc-payment-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; width: 100% !important; margin: 0 0 18px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-sizing: border-box !important; } body.sacc-optimised-checkout #payment ul.payment_methods.sacc-payment-grid > li.wc_payment_method.sacc-payment-tile { position: relative !important; display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 1px solid #dde1e3 !important; border-radius: var(--sacc-radius, 14px) !important; background: #fff !important; overflow: hidden !important; box-shadow: none !important; box-sizing: border-box !important; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important; } body.sacc-optimised-checkout #payment ul.payment_methods.sacc-payment-grid > li.wc_payment_method.sacc-payment-tile:hover { border-color: #bfc6c9 !important; transform: translateY(-1px); } body.sacc-optimised-checkout #payment ul.payment_methods.sacc-payment-grid > li.wc_payment_method.sacc-payment-tile.sacc-payment-selected { border-color: var(--sacc-accent, #209447) !important; box-shadow: 0 0 0 2px color-mix( in srgb, var(--sacc-accent, #209447) 16%, transparent ) !important; } body.sacc-optimised-checkout #payment .sacc-payment-tile > input[name="payment_method"] { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } body.sacc-optimised-checkout #payment .sacc-payment-tile > label.sacc-payment-tile__label { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 112px !important; margin: 0 !important; padding: 18px 24px !important; cursor: pointer !important; box-sizing: border-box !important; } body.sacc-optimised-checkout #payment .sacc-payment-tile.sacc-payment-selected > label.sacc-payment-tile__label::after { content: "✓"; position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sacc-accent, #209447); color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; } body.sacc-optimised-checkout #payment .sacc-payment-logo { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 66px !important; } body.sacc-optimised-checkout #payment .sacc-payment-logo img { display: block !important; width: auto !important; max-width: 86% !important; height: auto !important; max-height: 62px !important; margin: 0 auto !important; object-fit: contain !important; } body.sacc-optimised-checkout #payment .sacc-payment-paypal .sacc-payment-logo img { max-width: 82% !important; max-height: 54px !important; } body.sacc-optimised-checkout #payment .sacc-payment-ozow .sacc-payment-logo img { max-width: 78% !important; max-height: 56px !important; } body.sacc-optimised-checkout #payment .sacc-payment-yoco .sacc-payment-logo img { max-width: 72% !important; max-height: 54px !important; } body.sacc-optimised-checkout #payment .sacc-payment-eft .sacc-payment-logo img { max-width: 72% !important; max-height: 64px !important; } body.sacc-optimised-checkout #payment .sacc-payment-logo__fallback { display: block; color: #111827; font-size: 18px; font-weight: 750; text-align: center; } body.sacc-optimised-checkout #payment .sacc-payment-tile .payment_box { width: auto !important; margin: 0 16px 16px !important; padding: 14px 16px !important; border: 0 !important; border-radius: 10px !important; background: #f6f7f7 !important; color: #4b5155 !important; box-sizing: border-box !important; } body.sacc-optimised-checkout #payment .sacc-payment-tile .payment_box::before { display: none !important; content: none !important; } body.sacc-optimised-checkout #payment .sacc-payment-tile .payment_box p:last-child { margin-bottom: 0 !important; } @media (max-width: 680px) { body.sacc-optimised-checkout #payment ul.payment_methods.sacc-payment-grid { grid-template-columns: minmax(0, 1fr) !important; } body.sacc-optimised-checkout #payment .sacc-payment-tile > label.sacc-payment-tile__label { min-height: 92px !important; padding: 14px 20px !important; } body.sacc-optimised-checkout .sacc-payment-methods-bar { padding: 9px 10px; } body.sacc-optimised-checkout .sacc-payment-methods-bar img { max-height: 38px; } } /* ========================================================= * 2.3.1 Checkout alignment and payment refinements * ========================================================= */ /* Align the two checkout column headings horizontally. */ @media (min-width: 901px) { body.sacc-optimised-checkout form.checkout.woocommerce-checkout { grid-template-rows: auto 1fr !important; } body.sacc-optimised-checkout form.checkout.woocommerce-checkout > .col2-set { grid-column: 1 !important; grid-row: 1 / span 2 !important; } body.sacc-optimised-checkout #order_review_heading { grid-column: 2 !important; grid-row: 1 !important; align-self: start !important; margin: 0 0 16px !important; padding: 0 !important; font-size: 28px !important; font-weight: 700 !important; line-height: 1.2 !important; text-align: left !important; } body.sacc-optimised-checkout #order_review { grid-column: 2 !important; grid-row: 2 !important; } body.sacc-optimised-checkout .woocommerce-billing-fields > h3, body.sacc-optimised-checkout .woocommerce-billing-fields__field-wrapper + h3 { margin-top: 0 !important; } body.sacc-optimised-checkout .woocommerce-billing-fields > h3 { margin-bottom: 16px !important; padding: 0 !important; font-size: 28px !important; font-weight: 700 !important; line-height: 1.2 !important; } } /* Payment icons now form part of the reassurance banner. */ body.sacc-optimised-checkout .sacc-reassurance { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 12px !important; width: 100% !important; padding: 18px 20px !important; border-radius: var(--sacc-radius, 14px) !important; background: #f5f5f6 !important; box-sizing: border-box !important; } body.sacc-optimised-checkout .sacc-payment-methods-bar { width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; overflow: visible !important; } body.sacc-optimised-checkout .sacc-payment-methods-bar img { display: block !important; width: 100% !important; max-width: none !important; max-height: none !important; height: auto !important; object-fit: contain !important; } /* Payment methods remain logo-only tiles. */ body.sacc-optimised-checkout #payment .sacc-payment-tile > .payment_box { display: none !important; } body.sacc-optimised-checkout #payment .sacc-payment-tile > label.sacc-payment-tile__label { min-height: 150px !important; padding: 26px !important; } body.sacc-optimised-checkout #payment .sacc-payment-logo { height: 78px !important; } body.sacc-optimised-checkout #payment .sacc-payment-logo img { max-height: 72px !important; } /* Selected Manual EFT instructions appear below the full tile grid. */ body.sacc-optimised-checkout #payment .sacc-payment-details-panel { width: 100% !important; margin: 0 0 18px !important; } body.sacc-optimised-checkout #payment .sacc-payment-details-panel[hidden] { display: none !important; } body.sacc-optimised-checkout #payment .sacc-eft-details-card { width: 100% !important; padding: 22px 24px !important; border: 1px solid #dde1e3 !important; border-radius: var(--sacc-radius, 14px) !important; background: #f6f7f7 !important; color: #34383b !important; box-sizing: border-box !important; } body.sacc-optimised-checkout #payment .sacc-eft-details-card p { margin: 0 0 16px !important; line-height: 1.65 !important; } body.sacc-optimised-checkout #payment .sacc-eft-details-card h4 { margin: 0 0 8px !important; font-size: 17px !important; font-weight: 750 !important; } body.sacc-optimised-checkout #payment .sacc-bank-details { margin: 18px 0 !important; padding: 16px 18px !important; border-radius: 10px !important; background: #fff !important; } body.sacc-optimised-checkout #payment .sacc-bank-details p { margin: 0 !important; } body.sacc-optimised-checkout #payment .sacc-pop-note { margin-bottom: 0 !important; } body.sacc-optimised-checkout #payment .sacc-pop-note a { color: var(--sacc-accent, #209447) !important; font-weight: 700 !important; text-decoration: none !important; } @media (max-width: 680px) { body.sacc-optimised-checkout .sacc-reassurance { padding: 14px !important; } body.sacc-optimised-checkout #payment .sacc-payment-tile > label.sacc-payment-tile__label { min-height: 108px !important; padding: 18px !important; } body.sacc-optimised-checkout #payment .sacc-eft-details-card { padding: 18px !important; } } /* ========================================================= * 2.3.2 Final checkout behaviour fixes * ========================================================= */ body.sacc-optimised-checkout #payment ul.payment_methods.sacc-payment-grid > li.sacc-payment-wallet { grid-column: 1 / -1 !important; } body.sacc-optimised-checkout #payment .sacc-payment-wallet > label.sacc-payment-tile__label { min-height: 106px !important; } body.sacc-optimised-checkout #payment .sacc-payment-wallet .sacc-payment-logo { height: auto !important; } body.sacc-optimised-checkout #payment .sacc-payment-wallet .sacc-payment-logo__fallback { font-size: 20px !important; line-height: 1.35 !important; } body.sacc-optimised-checkout .vsf-lmc-capacity-card, body.sacc-optimised-checkout .vsf-lmc-collection-notice, body.sacc-optimised-checkout .vsf-lmc-final-mile { display: none !important; } body.sacc-optimised-checkout.sacc-lmc-selected .vsf-lmc-capacity-card, body.sacc-optimised-checkout.sacc-lmc-selected .vsf-lmc-collection-notice, body.sacc-optimised-checkout.sacc-lmc-selected .vsf-lmc-final-mile { display: block !important; } body.sacc-optimised-checkout #order_review tr.sacc-native-eta-row > td.sacc-native-eta-cell, body.sacc-optimised-checkout #order_review td.sacc-native-eta-cell, body.sacc-optimised-checkout #order_review td.sacc-native-eta-cell #saf-checkout-eta, body.sacc-optimised-checkout #order_review td.sacc-native-eta-cell .saf-eta-card { width: 100% !important; max-width: none !important; min-width: 0 !important; box-sizing: border-box !important; } body.sacc-optimised-checkout #order_review tr.sacc-native-eta-row > td.sacc-native-eta-cell { padding-right: 0 !important; padding-left: 0 !important; } @media (min-width: 901px) { body.sacc-optimised-checkout .woocommerce-billing-fields > h3 { margin-top: revert !important; } body.sacc-optimised-checkout #order_review_heading { margin-top: 24px !important; margin-bottom: 16px !important; } } /* ========================================================= * 2.3.3 spacing and LMC visibility corrections * ========================================================= */ /* * Align the first field row with the top of the order-review card. * Both column headings retain the same baseline; the left form body * receives the same breathing room as the right card. */ @media (min-width: 901px) { body.sacc-optimised-checkout .woocommerce-billing-fields__field-wrapper { margin-top: 52px !important; } body.sacc-optimised-checkout #order_review_heading { margin-top: 24px !important; margin-bottom: 52px !important; } body.sacc-optimised-checkout .woocommerce-billing-fields > h3 { margin-top: 24px !important; margin-bottom: 0 !important; } } /* Remove obsolete empty ETA rows left by earlier checkout builds. */ body.sacc-optimised-checkout #order_review tr.sacc-live-eta-row, body.sacc-optimised-checkout #order_review tr.sacc-live-eta-row > td:empty { display: none !important; } /* Standard vertical rhythm between the main right-column cards. */ body.sacc-optimised-checkout #order_review .saf-eta-card, body.sacc-optimised-checkout .sacc-reassurance, body.sacc-optimised-checkout #payment ul.payment_methods.sacc-payment-grid, body.sacc-optimised-checkout #payment .sacc-payment-details-panel { margin-top: 0 !important; margin-bottom: 16px !important; } body.sacc-optimised-checkout .sacc-reassurance + #payment, body.sacc-optimised-checkout .sacc-payment-methods-bar + #payment { margin-top: 0 !important; } /* Tighten the ETA heading/subheading-to-date-card transition. */ body.sacc-optimised-checkout #saf-checkout-eta .saf-eta-card__subtitle, body.sacc-optimised-checkout #saf-checkout-eta .saf-eta-subtitle { margin-bottom: 10px !important; } body.sacc-optimised-checkout #saf-checkout-eta .saf-eta-card__dates, body.sacc-optimised-checkout #saf-checkout-eta .saf-eta-card__forecast-grid, body.sacc-optimised-checkout #saf-checkout-eta .saf-eta-grid, body.sacc-optimised-checkout #saf-checkout-eta .saf-eta-card__body { margin-top: 0 !important; padding-top: 0 !important; } /* Generic fallback for the ETA renderer's direct header/body structure. */ body.sacc-optimised-checkout #saf-checkout-eta .saf-eta-card > :first-child { margin-bottom: 10px !important; } body.sacc-optimised-checkout #saf-checkout-eta .saf-eta-card > :nth-child(2) { margin-top: 0 !important; } /* * LMC cards are impossible to display unless the confirmed selected * shipping method is LMC. This overrides all older plugin styles. */ body.sacc-optimised-checkout:not(.sacc-lmc-selected) .vsf-lmc-capacity-card, body.sacc-optimised-checkout:not(.sacc-lmc-selected) .vsf-lmc-collection-notice, body.sacc-optimised-checkout:not(.sacc-lmc-selected) .vsf-lmc-final-mile, body.sacc-optimised-checkout .vsf-lmc-capacity-card[hidden], body.sacc-optimised-checkout .vsf-lmc-collection-notice[hidden], body.sacc-optimised-checkout .vsf-lmc-final-mile[hidden] { display: none !important; } /* ========================================================= * 2.3.4 ETA, wallet and icon stability * ========================================================= */ /* No decorative lock above the reassurance copy. */ body.sacc-optimised-checkout .sacc-reassurance::before { display: none !important; content: none !important; } /* Native ETA row belongs immediately above Shipping Journey. */ body.sacc-optimised-checkout #order_review tr.sacc-native-eta-row > td { padding-bottom: 16px !important; } /* Restore visible icons on fee and notice cards. */ body.sacc-optimised-checkout .vsf-cold-chain-card__icon, body.sacc-optimised-checkout .vsf-lmc-collection-notice__icon, body.sacc-optimised-checkout .vsf-unified-fee-card__icon, body.sacc-optimised-checkout .saf-eta-card__icon { display: inline-grid !important; place-items: center !important; visibility: visible !important; opacity: 1 !important; min-width: 38px !important; min-height: 38px !important; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important; font-size: 20px !important; line-height: 1 !important; } /* The original wallet checkbox/row is replaced by one stable tile. */ body.sacc-optimised-checkout .sacc-wallet-source { display: none !important; } body.sacc-optimised-checkout #payment ul.payment_methods.sacc-payment-grid > li.sacc-wallet-synthetic { display: block !important; grid-column: 1 / -1 !important; width: 100% !important; } body.sacc-optimised-checkout #payment .sacc-wallet-synthetic > label.sacc-payment-tile__label { display: flex !important; flex-direction: column !important; gap: 6px !important; min-height: 112px !important; text-align: center !important; } body.sacc-optimised-checkout #payment .sacc-wallet-title { display: block !important; font-size: 22px !important; font-weight: 750 !important; line-height: 1.2 !important; } body.sacc-optimised-checkout #payment .sacc-wallet-balance { display: block !important; color: var(--muted, #6b6d73) !important; font-size: 15px !important; font-weight: 650 !important; line-height: 1.35 !important; } /* ========================================================= * 2.4.1 Aligned split-panel checkout framework * ========================================================= */ body.sacc-optimised-checkout { --sacc-page-width: 1480px; --sacc-column-gap: clamp(28px, 3.8vw, 56px); --sacc-panel-radius: 22px; --sacc-field-radius: 16px; --sacc-panel-border: #e3e5e7; --sacc-panel-grey: #f7f7f8; } body.sacc-optimised-checkout .woocommerce { width: min( calc(100% - clamp(28px, 5vw, 80px)), var(--sacc-page-width) ) !important; max-width: var(--sacc-page-width) !important; margin-right: auto !important; margin-left: auto !important; } body.sacc-optimised-checkout form.checkout.woocommerce-checkout { display: grid !important; grid-template-columns: minmax(0, 1.48fr) minmax(520px, 1fr) !important; grid-template-rows: auto 1fr !important; column-gap: var(--sacc-column-gap) !important; row-gap: 14px !important; align-items: start !important; margin-top: 26px !important; } /* Both headings are external, matched and aligned. */ body.sacc-optimised-checkout #sacc_billing_heading, body.sacc-optimised-checkout #order_review_heading { align-self: end !important; margin: 0 !important; padding: 0 !important; font-size: clamp(26px, 2vw, 34px) !important; font-weight: 700 !important; line-height: 1.15 !important; text-align: left !important; } body.sacc-optimised-checkout #sacc_billing_heading { grid-column: 1 !important; grid-row: 1 !important; } body.sacc-optimised-checkout #order_review_heading { grid-column: 2 !important; grid-row: 1 !important; } body.sacc-optimised-checkout .sacc-original-billing-heading { display: none !important; } /* Matching top edges and panel treatment. */ body.sacc-optimised-checkout form.checkout.woocommerce-checkout > .col2-set { grid-column: 1 !important; grid-row: 2 !important; width: 100% !important; margin: 0 !important; padding: 28px 30px 32px !important; border: 1px solid var(--sacc-panel-border) !important; border-radius: var(--sacc-panel-radius) !important; background: #fff !important; box-shadow: 0 10px 34px rgba(20, 25, 30, 0.035) !important; box-sizing: border-box !important; } body.sacc-optimised-checkout #order_review { grid-column: 2 !important; grid-row: 2 !important; width: 100% !important; margin: 0 !important; padding: clamp(24px, 2.4vw, 34px) !important; border: 1px solid var(--sacc-panel-border) !important; border-radius: var(--sacc-panel-radius) !important; background: var(--sacc-panel-grey) !important; box-shadow: 0 14px 42px rgba(20, 25, 30, 0.045) !important; overflow: visible !important; box-sizing: border-box !important; } body.sacc-optimised-checkout .woocommerce-billing-fields__field-wrapper { margin-top: 0 !important; } /* Rounded field system. */ body.sacc-optimised-checkout input.input-text, body.sacc-optimised-checkout textarea, body.sacc-optimised-checkout select, body.sacc-optimised-checkout .select2-container .select2-selection { width: 100% !important; min-height: 56px !important; padding: 13px 18px !important; border: 1px solid #e0e2e4 !important; border-radius: var(--sacc-field-radius) !important; background: #fbfbfc !important; color: #313438 !important; box-shadow: none !important; box-sizing: border-box !important; transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease !important; } body.sacc-optimised-checkout textarea { min-height: 132px !important; resize: vertical !important; } body.sacc-optimised-checkout input.input-text:focus, body.sacc-optimised-checkout textarea:focus, body.sacc-optimised-checkout select:focus, body.sacc-optimised-checkout .select2-container--focus .select2-selection, body.sacc-optimised-checkout .select2-container--open .select2-selection { border-color: var(--sacc-accent, #209447) !important; background: #fff !important; box-shadow: 0 0 0 3px color-mix( in srgb, var(--sacc-accent, #209447) 12%, transparent ) !important; outline: none !important; } body.sacc-optimised-checkout .form-row { margin-bottom: 20px !important; } body.sacc-optimised-checkout .form-row label { display: block !important; margin-bottom: 8px !important; color: #23262a !important; font-weight: 650 !important; line-height: 1.35 !important; } body.sacc-optimised-checkout .form-row-first, body.sacc-optimised-checkout .form-row-last { width: calc(50% - 10px) !important; } body.sacc-optimised-checkout .form-row-first { margin-right: 20px !important; } /* * Keep neutral interaction tiles white, but preserve the plugin's * colour-coded fee, packaging and notice backgrounds. */ body.sacc-optimised-checkout #order_review .sacc-delivery-hub, body.sacc-optimised-checkout #order_review #shipping_method > li > label, body.sacc-optimised-checkout #order_review .saf-eta-card, body.sacc-optimised-checkout #order_review .vsf-lmc-capacity-card, body.sacc-optimised-checkout #order_review .vsf-lmc-collection-notice, body.sacc-optimised-checkout #order_review .vsf-lmc-final-mile, body.sacc-optimised-checkout #order_review .vsf-pudo-selector, body.sacc-optimised-checkout #order_review .sacc-payment-tile, body.sacc-optimised-checkout #order_review .sacc-eft-details-card { background: #fff !important; } /* Explicitly release colour-coded notices/fees from framework overrides. */ body.sacc-optimised-checkout #order_review .vsf-cold-chain-card, body.sacc-optimised-checkout #order_review .vsf-unified-fee-card { background-color: revert !important; background-image: revert !important; } body.sacc-optimised-checkout .woocommerce-checkout-review-order-table { border: 0 !important; background: transparent !important; } body.sacc-optimised-checkout .woocommerce-checkout-review-order-table th, body.sacc-optimised-checkout .woocommerce-checkout-review-order-table td { border-color: #dedfe2 !important; } /* Coupon/gift-card area keeps a modest gap above the aligned columns. */ body.sacc-optimised-checkout .woocommerce-form-coupon-toggle { margin: 0 auto 24px !important; text-align: center !important; } body.sacc-optimised-checkout .woocommerce-form-coupon-toggle .woocommerce-info { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } /* * Natural sticky behaviour: no internal scrollbar. * The left panel stays in place while the taller right column moves, * then releases near the end of the shared checkout container. */ @media (min-width: 1101px) { body.sacc-optimised-checkout.sacc-sticky-summary form.checkout.woocommerce-checkout > .col2-set { position: sticky !important; top: 24px !important; max-height: none !important; overflow: visible !important; overscroll-behavior: auto !important; } body.sacc-optimised-checkout.sacc-sticky-summary #order_review { position: static !important; top: auto !important; } } /* Give the live forecast enough room and prevent avoidable wrapping. */ body.sacc-optimised-checkout #order_review #saf-checkout-eta, body.sacc-optimised-checkout #order_review .saf-eta-card { width: 100% !important; max-width: none !important; min-width: 0 !important; } body.sacc-optimised-checkout #order_review .saf-eta-card__body, body.sacc-optimised-checkout #order_review .saf-eta-card__dates, body.sacc-optimised-checkout #order_review .saf-eta-card__forecast-grid, body.sacc-optimised-checkout #order_review .saf-eta-grid { width: 100% !important; min-width: 0 !important; } body.sacc-optimised-checkout #order_review .saf-eta-card__dates, body.sacc-optimised-checkout #order_review .saf-eta-card__forecast-grid, body.sacc-optimised-checkout #order_review .saf-eta-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } body.sacc-optimised-checkout #order_review .saf-eta-card h2, body.sacc-optimised-checkout #order_review .saf-eta-card h3 { max-width: none !important; font-size: clamp(25px, 2vw, 34px) !important; line-height: 1.12 !important; } body.sacc-optimised-checkout #order_review .saf-eta-card__subtitle, body.sacc-optimised-checkout #order_review .saf-eta-subtitle { max-width: none !important; line-height: 1.45 !important; } /* Tablet. */ @media (min-width: 901px) and (max-width: 1100px) { body.sacc-optimised-checkout form.checkout.woocommerce-checkout { grid-template-columns: minmax(0, 1.2fr) minmax(460px, 1fr) !important; column-gap: 28px !important; } body.sacc-optimised-checkout form.checkout.woocommerce-checkout > .col2-set { padding: 24px !important; } } /* Mobile becomes a single-column stack with both headings external. */ @media (max-width: 900px) { body.sacc-optimised-checkout .woocommerce { width: min(100% - 24px, 720px) !important; } body.sacc-optimised-checkout form.checkout.woocommerce-checkout { display: flex !important; flex-direction: column !important; gap: 14px !important; margin-top: 20px !important; } body.sacc-optimised-checkout #sacc_billing_heading { order: 1 !important; } body.sacc-optimised-checkout form.checkout.woocommerce-checkout > .col2-set { order: 2 !important; width: 100% !important; padding: 22px 18px !important; } body.sacc-optimised-checkout #order_review_heading { order: 3 !important; width: 100% !important; margin-top: 12px !important; } body.sacc-optimised-checkout #order_review { order: 4 !important; width: 100% !important; padding: 18px !important; } body.sacc-optimised-checkout .form-row-first, body.sacc-optimised-checkout .form-row-last { float: none !important; width: 100% !important; margin-right: 0 !important; } body.sacc-optimised-checkout #order_review .saf-eta-card__dates, body.sacc-optimised-checkout #order_review .saf-eta-card__forecast-grid, body.sacc-optimised-checkout #order_review .saf-eta-grid { grid-template-columns: minmax(0, 1fr) !important; } } /* ========================================================= * 2.4.2 Totals, colour coding and ETA refinements * ========================================================= */ /* Give the final total a designed summary treatment. */ body.sacc-optimised-checkout .woocommerce-checkout-review-order-table tr.order-total th, body.sacc-optimised-checkout .woocommerce-checkout-review-order-table tr.order-total td { padding-top: 22px !important; padding-bottom: 22px !important; border-top: 2px solid #24272b !important; border-bottom: 0 !important; vertical-align: middle !important; } body.sacc-optimised-checkout .woocommerce-checkout-review-order-table tr.order-total th { color: var(--ink, #181820) !important; font-size: 22px !important; font-weight: 750 !important; line-height: 1.2 !important; letter-spacing: -0.01em !important; } body.sacc-optimised-checkout .woocommerce-checkout-review-order-table tr.order-total td, body.sacc-optimised-checkout .woocommerce-checkout-review-order-table tr.order-total td strong, body.sacc-optimised-checkout .woocommerce-checkout-review-order-table tr.order-total .woocommerce-Price-amount { color: #343638 !important; font-size: clamp(28px, 2.4vw, 38px) !important; font-weight: 720 !important; line-height: 1.05 !important; letter-spacing: -0.025em !important; white-space: nowrap !important; } /* Restore the original green cold-chain notice design explicitly. */ body.sacc-optimised-checkout #order_review .vsf-cold-chain-card { border-color: rgba(30, 92, 73, 0.18) !important; background-color: #edf7f2 !important; background-image: none !important; color: #25342f !important; } body.sacc-optimised-checkout #order_review .vsf-cold-chain-card .vsf-cold-chain-title { color: #183f33 !important; } body.sacc-optimised-checkout #order_review .vsf-cold-chain-card .vsf-cold-chain-icon { background: #fff !important; } /* Restore temperature-specific fee-card colours. */ body.sacc-optimised-checkout #order_review .vsf-unified-fee-card--frozen { border-color: #b8e3f5 !important; background-color: #e8f6fd !important; background-image: none !important; color: #245f7c !important; } body.sacc-optimised-checkout #order_review .vsf-unified-fee-card--chilled { border-color: #d9c5ff !important; background-color: #f4efff !important; background-image: none !important; color: #6846a5 !important; } body.sacc-optimised-checkout #order_review .vsf-unified-fee-card--omc { border-color: #ead8a5 !important; background-color: #fff8e7 !important; background-image: none !important; color: #765b16 !important; } body.sacc-optimised-checkout #order_review .vsf-unified-fee-card--final-mile { border-color: #ddd !important; background-color: #f8f8f8 !important; background-image: none !important; color: #2c2c2c !important; } /* Slightly widen the order column at large desktop sizes. */ @media (min-width: 1181px) { body.sacc-optimised-checkout { --sacc-page-width: 1560px; } body.sacc-optimised-checkout form.checkout.woocommerce-checkout { grid-template-columns: minmax(0, 1.38fr) minmax(590px, 1fr) !important; } } /* Match the ETA heading to the rest of the checkout typography. */ body.sacc-optimised-checkout #order_review .saf-eta-card h1, body.sacc-optimised-checkout #order_review .saf-eta-card h2, body.sacc-optimised-checkout #order_review .saf-eta-card h3, body.sacc-optimised-checkout #order_review .saf-eta-card__title { margin-top: 0 !important; margin-bottom: 8px !important; max-width: none !important; color: var(--ink, #181820) !important; font-size: clamp(22px, 1.7vw, 28px) !important; font-weight: 750 !important; line-height: 1.15 !important; letter-spacing: -0.018em !important; } /* Keep ETA confidence/context pills on one line where possible. */ body.sacc-optimised-checkout #order_review .saf-eta-card [class*="pill"], body.sacc-optimised-checkout #order_review .saf-eta-card [class*="badge"], body.sacc-optimised-checkout #order_review .saf-eta-card [class*="chip"], body.sacc-optimised-checkout #order_review .saf-eta-card [class*="meta"] > *, body.sacc-optimised-checkout #order_review .saf-eta-card [class*="insight"] > * { white-space: nowrap !important; } /* Let the pill row use the complete width before wrapping. */ body.sacc-optimised-checkout #order_review .saf-eta-card [class*="meta"], body.sacc-optimised-checkout #order_review .saf-eta-card [class*="insight"], body.sacc-optimised-checkout #order_review .saf-eta-card [class*="footer"] { display: flex !important; flex-flow: row wrap !important; align-items: center !important; gap: 10px !important; width: 100% !important; max-width: none !important; } /* Ensure dispatch and delivery dates remain readable and side by side. */ body.sacc-optimised-checkout #order_review .saf-eta-card__dates, body.sacc-optimised-checkout #order_review .saf-eta-card__forecast-grid, body.sacc-optimised-checkout #order_review .saf-eta-grid { grid-template-columns: repeat(2, minmax(210px, 1fr)) !important; } @media (max-width: 1179px) and (min-width: 901px) { body.sacc-optimised-checkout #order_review .saf-eta-card [class*="pill"], body.sacc-optimised-checkout #order_review .saf-eta-card [class*="badge"], body.sacc-optimised-checkout #order_review .saf-eta-card [class*="chip"] { font-size: 12px !important; } } @media (max-width: 900px) { body.sacc-optimised-checkout #order_review .saf-eta-card__dates, body.sacc-optimised-checkout #order_review .saf-eta-card__forecast-grid, body.sacc-optimised-checkout #order_review .saf-eta-grid { grid-template-columns: minmax(0, 1fr) !important; } } /* ========================================================= * 2.4.3 Native theme headings and WordPress emoji repair * ========================================================= */ /* * Use the exact typography supplied by the active theme's * h1.page-title selector. Only layout spacing is controlled here. */ body.sacc-optimised-checkout #sacc_billing_heading.page-title, body.sacc-optimised-checkout #order_review_heading.page-title, body.sacc-optimised-checkout .sacc-eta-theme-heading.page-title, body.sacc-optimised-checkout .sacc-total-theme-heading.page-title, body.sacc-optimised-checkout .sacc-total-price-heading.page-title { width: auto !important; max-width: none !important; padding: 0 !important; text-align: left !important; } body.sacc-optimised-checkout #sacc_billing_heading.page-title, body.sacc-optimised-checkout #order_review_heading.page-title { margin: 0 !important; } body.sacc-optimised-checkout .sacc-eta-theme-heading.page-title { margin: 0 0 8px !important; } body.sacc-optimised-checkout .sacc-total-theme-heading.page-title, body.sacc-optimised-checkout .sacc-total-price-heading.page-title { margin: 0 !important; line-height: 1.1 !important; } body.sacc-optimised-checkout .sacc-total-price-heading.page-title { text-align: right !important; white-space: nowrap !important; } /* * WordPress converts emoji characters into img.emoji elements. * The uploaded inspector screenshot confirms the image remains in * the DOM after the visual icon disappears, so force that media to * retain measurable dimensions and visibility. */ body.sacc-optimised-checkout .vsf-cold-chain-card__icon img.emoji, body.sacc-optimised-checkout .vsf-cold-chain-card__icon img.wp-smiley, body.sacc-optimised-checkout .vsf-unified-fee-card__icon img.emoji, body.sacc-optimised-checkout .vsf-unified-fee-card__icon img.wp-smiley, body.sacc-optimised-checkout .vsf-lmc-collection-notice__icon img.emoji, body.sacc-optimised-checkout .vsf-lmc-collection-notice__icon img.wp-smiley, body.sacc-optimised-checkout .saf-eta-card__icon img.emoji, body.sacc-optimised-checkout .saf-eta-card__icon img.wp-smiley, body.sacc-optimised-checkout .vsf-emoji-icon img.emoji, body.sacc-optimised-checkout .vsf-emoji-icon img.wp-smiley { display: inline-block !important; visibility: visible !important; opacity: 1 !important; width: 1em !important; min-width: 1em !important; max-width: 1em !important; height: 1em !important; min-height: 1em !important; max-height: 1em !important; margin: 0 !important; border: 0 !important; padding: 0 !important; object-fit: contain !important; vertical-align: -0.1em !important; } /* Do not hide an icon container when WordPress inserted media. */ body.sacc-optimised-checkout .vsf-cold-chain-card__icon:has(img.emoji), body.sacc-optimised-checkout .vsf-unified-fee-card__icon:has(img.emoji), body.sacc-optimised-checkout .vsf-lmc-collection-notice__icon:has(img.emoji), body.sacc-optimised-checkout .saf-eta-card__icon:has(img.emoji), body.sacc-optimised-checkout .vsf-emoji-icon:has(img.emoji) { display: inline-grid !important; visibility: visible !important; opacity: 1 !important; } /* ========================================================= * 2.4.4 Compact theme headings and native emoji handling * ========================================================= */ /* * Use the theme's heading family/weight through a real H3 element, * but cap the visual size for checkout hierarchy. */ body.sacc-optimised-checkout .sacc-theme-heading, body.sacc-optimised-checkout #sacc_billing_heading.sacc-theme-heading, body.sacc-optimised-checkout #order_review_heading.sacc-theme-heading, body.sacc-optimised-checkout .sacc-eta-theme-heading.sacc-theme-heading, body.sacc-optimised-checkout .sacc-total-theme-heading.sacc-theme-heading, body.sacc-optimised-checkout .sacc-total-price-heading.sacc-theme-heading { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; font-size: clamp(21px, 1.45vw, 24px) !important; font-weight: 500 !important; line-height: 1.25 !important; letter-spacing: 0 !important; text-align: left !important; } body.sacc-optimised-checkout .sacc-eta-theme-heading.sacc-theme-heading { margin-bottom: 8px !important; } body.sacc-optimised-checkout .sacc-total-price-heading.sacc-theme-heading { text-align: right !important; white-space: nowrap !important; } /* Undo the former H1/page-title dimensions if cached CSS survives. */ body.sacc-optimised-checkout .page-title.sacc-billing-heading, body.sacc-optimised-checkout .page-title.sacc-order-heading, body.sacc-optimised-checkout .page-title.sacc-eta-theme-heading, body.sacc-optimised-checkout .page-title.sacc-total-theme-heading, body.sacc-optimised-checkout .page-title.sacc-total-price-heading { font-size: clamp(21px, 1.45vw, 24px) !important; line-height: 1.25 !important; } /* * Native emoji fallback. WordPress emoji replacement is disabled on * checkout in PHP, but keep these rules for already-rendered fragments. */ body.sacc-optimised-checkout .vsf-cold-chain-card__icon, body.sacc-optimised-checkout .vsf-unified-fee-card__icon, body.sacc-optimised-checkout .vsf-lmc-collection-notice__icon, body.sacc-optimised-checkout .saf-eta-card__icon, body.sacc-optimised-checkout .vsf-emoji-icon { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important; } /* ========================================================= * 2.4.5 Total spacing and single-line packaging fee * ========================================================= */ /* Reduce total price size and give the summary breathing room. */ body.sacc-optimised-checkout .woocommerce-checkout-review-order-table { margin-bottom: 24px !important; } body.sacc-optimised-checkout .woocommerce-checkout-review-order-table tr.order-total th, body.sacc-optimised-checkout .woocommerce-checkout-review-order-table tr.order-total td { padding-top: 24px !important; padding-bottom: 24px !important; } body.sacc-optimised-checkout .woocommerce-checkout-review-order-table tr.order-total td, body.sacc-optimised-checkout .woocommerce-checkout-review-order-table tr.order-total td strong, body.sacc-optimised-checkout .woocommerce-checkout-review-order-table tr.order-total .woocommerce-Price-amount, body.sacc-optimised-checkout .sacc-total-price-heading.sacc-theme-heading { font-size: clamp(25px, 2vw, 30px) !important; font-weight: 600 !important; line-height: 1.1 !important; letter-spacing: -0.015em !important; } /* Keep packaging fee label and price on one horizontal line. */ body.sacc-optimised-checkout #order_review .vsf-unified-fee-card { display: flex !important; flex-flow: row nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; } body.sacc-optimised-checkout #order_review .vsf-unified-fee-label, body.sacc-optimised-checkout #order_review .vsf-unified-fee-price { white-space: nowrap !important; } body.sacc-optimised-checkout #order_review .vsf-unified-fee-label { display: flex !important; flex-flow: row nowrap !important; align-items: center !important; min-width: 0 !important; } body.sacc-optimised-checkout #order_review .vsf-unified-fee-price { flex: 0 0 auto !important; } /* ========================================================= * 2.4.6 PUDO locker results layout * ========================================================= */ body.sacc-optimised-checkout #order_review .vsf-pudo-search-results { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; max-height: 420px !important; padding-right: 4px !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; box-sizing: border-box !important; } body.sacc-optimised-checkout #order_review button.vsf-pudo-result { display: grid !important; grid-template-columns: 32px minmax(0, 1fr) auto !important; align-items: center !important; gap: 12px !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; min-height: 88px !important; margin: 0 !important; padding: 14px 16px !important; border: 1px solid #dedede !important; border-radius: 10px !important; background: #fff !important; color: #1f1f1f !important; text-align: left !important; overflow: hidden !important; box-sizing: border-box !important; } body.sacc-optimised-checkout #order_review button.vsf-pudo-result:hover, body.sacc-optimised-checkout #order_review button.vsf-pudo-result:focus, body.sacc-optimised-checkout #order_review button.vsf-pudo-result:focus-visible { border-color: #c8c8c8 !important; background: #f4f4f5 !important; color: #1f1f1f !important; outline: none !important; } body.sacc-optimised-checkout #order_review .vsf-pudo-result-marker { grid-column: 1 !important; width: 32px !important; min-width: 32px !important; color: inherit !important; } body.sacc-optimised-checkout #order_review .vsf-pudo-result-content { grid-column: 2 !important; min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; } body.sacc-optimised-checkout #order_review .vsf-pudo-result-name, body.sacc-optimised-checkout #order_review .vsf-pudo-result-address, body.sacc-optimised-checkout #order_review .vsf-pudo-result-code { display: block !important; width: auto !important; max-width: 100% !important; color: #1f1f1f !important; letter-spacing: 0 !important; text-transform: none !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important; } body.sacc-optimised-checkout #order_review .vsf-pudo-result-address { color: #5f5f5f !important; } body.sacc-optimised-checkout #order_review .vsf-pudo-result-code { color: #818181 !important; } body.sacc-optimised-checkout #order_review .vsf-pudo-result-select { grid-column: 3 !important; align-self: center !important; justify-self: end !important; position: static !important; min-width: 78px !important; max-width: 110px !important; margin: 0 !important; white-space: nowrap !important; z-index: 1 !important; } /* Mobile retains the same safe three-part structure at a smaller scale. */ @media (max-width: 600px) { body.sacc-optimised-checkout #order_review button.vsf-pudo-result { grid-template-columns: 24px minmax(0, 1fr) auto !important; gap: 9px !important; padding: 12px !important; } body.sacc-optimised-checkout #order_review .vsf-pudo-result-select { min-width: 68px !important; padding-right: 10px !important; padding-left: 10px !important; } } /* ========================================================= * 2.4.7 Wallet and mobile terms interaction fixes * ========================================================= */ /* Synthetic wallet tile must remain an actual interactive control. */ body.sacc-optimised-checkout #payment .sacc-wallet-synthetic, body.sacc-optimised-checkout #payment .sacc-wallet-synthetic > label { position: relative !important; z-index: 2 !important; pointer-events: auto !important; cursor: pointer !important; touch-action: manipulation !important; user-select: none !important; } body.sacc-optimised-checkout #payment .sacc-wallet-synthetic > label::before { pointer-events: none !important; } /* * Restore a normal, tappable WooCommerce terms checkbox on mobile. * Some theme checkbox layers sit above the real input and consume taps. */ body.sacc-optimised-checkout .woocommerce-terms-and-conditions-wrapper, body.sacc-optimised-checkout .woocommerce-terms-and-conditions-wrapper .form-row, body.sacc-optimised-checkout .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox { position: relative !important; z-index: 4 !important; pointer-events: auto !important; } body.sacc-optimised-checkout .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox { display: flex !important; align-items: flex-start !important; gap: 10px !important; width: 100% !important; cursor: pointer !important; touch-action: manipulation !important; } body.sacc-optimised-checkout .woocommerce-terms-and-conditions-wrapper input#terms, body.sacc-optimised-checkout .woocommerce-terms-and-conditions-wrapper input[name="terms"] { position: relative !important; inset: auto !important; display: inline-block !important; flex: 0 0 20px !important; width: 20px !important; min-width: 20px !important; max-width: 20px !important; height: 20px !important; min-height: 20px !important; max-height: 20px !important; margin: 2px 0 0 !important; padding: 0 !important; clip: auto !important; clip-path: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; cursor: pointer !important; accent-color: var(--sacc-accent, #209447) !important; z-index: 5 !important; } body.sacc-optimised-checkout .woocommerce-terms-and-conditions-checkbox-text { display: inline !important; flex: 1 1 auto !important; min-width: 0 !important; pointer-events: auto !important; cursor: pointer !important; } @media (max-width: 900px) { body.sacc-optimised-checkout .woocommerce-terms-and-conditions-wrapper { overflow: visible !important; } body.sacc-optimised-checkout .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox { min-height: 44px !important; padding: 8px 0 !important; } } /* ========================================================= * 2.4.8 Refined ETA card and native TeraWallet control * ========================================================= */ /* * The visible wallet tile now contains TeraWallet's genuine * partial-payment checkbox rather than proxying a synthetic click. */ body.sacc-optimised-checkout #payment .sacc-wallet-synthetic { position: relative !important; } body.sacc-optimised-checkout #payment .sacc-wallet-native-input { position: absolute !important; top: 16px !important; right: 16px !important; z-index: 5 !important; display: block !important; width: 22px !important; min-width: 22px !important; max-width: 22px !important; height: 22px !important; min-height: 22px !important; max-height: 22px !important; margin: 0 !important; padding: 0 !important; clip: auto !important; clip-path: none !important; opacity: 0 !important; visibility: visible !important; pointer-events: auto !important; cursor: pointer !important; } body.sacc-optimised-checkout #payment .sacc-wallet-synthetic > label.sacc-payment-tile__label { position: relative !important; z-index: 3 !important; width: 100% !important; cursor: pointer !important; pointer-events: auto !important; } body.sacc-optimised-checkout #payment .sacc-wallet-synthetic > label.sacc-payment-tile__label::after { content: ""; position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid #aeb4b7; border-radius: 50%; background: #fff; box-sizing: border-box; pointer-events: none; } body.sacc-optimised-checkout #payment .sacc-wallet-native-input:checked + label.sacc-payment-tile__label::after { content: "✓"; border-color: var(--sacc-accent, #209447); background: var(--sacc-accent, #209447); color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; } /* A more deliberate visual hierarchy for the live forecast. */ body.sacc-optimised-checkout #order_review .saf-eta-card { position: relative !important; padding: 26px 28px 24px !important; border: 1px solid #dde3df !important; border-radius: 18px !important; background: linear-gradient( 180deg, #ffffff 0%, #fbfcfb 100% ) !important; box-shadow: 0 12px 32px rgba(23, 39, 31, 0.045) !important; overflow: hidden !important; } body.sacc-optimised-checkout #order_review .saf-eta-card::before { content: "LIVE FULFILMENT FORECAST"; display: block; margin: 0 0 10px 50px; color: var(--sacc-accent, #209447); font-size: 11px; font-weight: 750; line-height: 1.2; letter-spacing: 0.12em; } body.sacc-optimised-checkout #order_review .saf-eta-card__icon { width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important; border: 1px solid #dce9e1 !important; border-radius: 50% !important; background: #edf7f1 !important; box-shadow: none !important; } body.sacc-optimised-checkout #order_review .sacc-eta-theme-heading, body.sacc-optimised-checkout #order_review .saf-eta-card__title { color: #171a1d !important; font-size: clamp(21px, 1.4vw, 24px) !important; font-weight: 650 !important; line-height: 1.2 !important; letter-spacing: -0.012em !important; } body.sacc-optimised-checkout #order_review .saf-eta-card__subtitle, body.sacc-optimised-checkout #order_review .saf-eta-subtitle { margin-top: 5px !important; margin-bottom: 18px !important; color: #676d6a !important; font-size: 13px !important; line-height: 1.5 !important; } body.sacc-optimised-checkout #order_review .saf-eta-card__dates, body.sacc-optimised-checkout #order_review .saf-eta-card__forecast-grid, body.sacc-optimised-checkout #order_review .saf-eta-grid { gap: 12px !important; margin-top: 0 !important; margin-bottom: 16px !important; } body.sacc-optimised-checkout #order_review .saf-eta-card__dates > *, body.sacc-optimised-checkout #order_review .saf-eta-card__forecast-grid > *, body.sacc-optimised-checkout #order_review .saf-eta-grid > * { padding: 17px 18px !important; border: 1px solid #e1e5e3 !important; border-radius: 13px !important; background: #f8faf9 !important; box-shadow: none !important; } body.sacc-optimised-checkout #order_review .saf-eta-card__dates > * > :first-child, body.sacc-optimised-checkout #order_review .saf-eta-card__forecast-grid > * > :first-child, body.sacc-optimised-checkout #order_review .saf-eta-grid > * > :first-child { color: #6a716e !important; font-size: 11px !important; font-weight: 650 !important; letter-spacing: 0.02em !important; } body.sacc-optimised-checkout #order_review .saf-eta-card__dates > * > :last-child, body.sacc-optimised-checkout #order_review .saf-eta-card__forecast-grid > * > :last-child, body.sacc-optimised-checkout #order_review .saf-eta-grid > * > :last-child { color: #202421 !important; font-size: 16px !important; font-weight: 650 !important; line-height: 1.3 !important; } body.sacc-optimised-checkout #order_review .saf-eta-card [class*="pill"], body.sacc-optimised-checkout #order_review .saf-eta-card [class*="badge"], body.sacc-optimised-checkout #order_review .saf-eta-card [class*="chip"], body.sacc-optimised-checkout #order_review .saf-eta-card [class*="meta"] > *, body.sacc-optimised-checkout #order_review .saf-eta-card [class*="insight"] > * { padding: 8px 11px !important; border: 1px solid #e2e8e4 !important; border-radius: 999px !important; background: #eef3f0 !important; color: #3f4843 !important; font-size: 11px !important; font-weight: 550 !important; line-height: 1.2 !important; white-space: nowrap !important; } @media (max-width: 600px) { body.sacc-optimised-checkout #order_review .saf-eta-card { padding: 21px 18px 20px !important; } body.sacc-optimised-checkout #order_review .saf-eta-card::before { margin-left: 46px !important; } } /* ========================================================= * 2.4.9 ETA heading, pill row and payment recovery * ========================================================= */ /* Match the ETA title exactly to Delivery & Fulfilment. */ body.sacc-optimised-checkout #order_review .sacc-eta-theme-heading, body.sacc-optimised-checkout #order_review .saf-eta-card__title { margin: 0 0 6px !important; color: #181820 !important; font-size: 20px !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: 0 !important; } /* Keep ETA insight pills on one horizontal row. */ body.sacc-optimised-checkout #order_review .saf-eta-card [class*="meta"], body.sacc-optimised-checkout #order_review .saf-eta-card [class*="insight"], body.sacc-optimised-checkout #order_review .saf-eta-card [class*="footer"] { display: flex !important; flex-flow: row nowrap !important; align-items: center !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: thin !important; -webkit-overflow-scrolling: touch !important; } body.sacc-optimised-checkout #order_review .saf-eta-card [class*="meta"] > *, body.sacc-optimised-checkout #order_review .saf-eta-card [class*="insight"] > *, body.sacc-optimised-checkout #order_review .saf-eta-card [class*="footer"] > * { flex: 0 0 auto !important; white-space: nowrap !important; } /* Recover the complete WooCommerce gateway list. */ body.sacc-optimised-checkout #payment, body.sacc-optimised-checkout #payment ul.payment_methods, body.sacc-optimised-checkout #payment ul.payment_methods.sacc-payment-grid { display: block !important; visibility: visible !important; opacity: 1 !important; } body.sacc-optimised-checkout #payment ul.payment_methods.sacc-payment-grid { display: grid !important; } body.sacc-optimised-checkout #payment ul.payment_methods.sacc-payment-grid > li.wc_payment_method { visibility: visible !important; opacity: 1 !important; } /* The TeraWallet source remains native; only its duplicate row is hidden. */ body.sacc-optimised-checkout .sacc-wallet-source { display: none !important; } body.sacc-optimised-checkout #payment .sacc-wallet-trigger { border: 0 !important; background: transparent !important; color: inherit !important; box-shadow: none !important; appearance: none !important; -webkit-appearance: none !important; cursor: pointer !important; } /* Neutralise the previous moved-checkbox rules. */ body.sacc-optimised-checkout #payment .sacc-wallet-native-input { position: static !important; } /* ========================================================= * 2.5.0 ETA visual match and mobile width corrections * ========================================================= */ /* * Match the approved ETA composition: * green eyebrow, generous header spacing, prominent icon, * balanced date panels and one uninterrupted insight row. */ body.sacc-optimised-checkout #order_review .saf-eta-card { padding: 40px 54px 42px !important; border: 1px solid #dce5df !important; border-radius: 22px !important; background: linear-gradient( 180deg, #ffffff 0%, #fcfdfc 100% ) !important; box-shadow: 0 14px 38px rgba(26, 46, 36, 0.045) !important; } body.sacc-optimised-checkout #order_review .saf-eta-card::before { content: "LIVE FULFILMENT FORECAST" !important; display: block !important; margin: 0 0 18px 110px !important; color: var(--sacc-accent, #209447) !important; font-size: 12px !important; font-weight: 750 !important; line-height: 1.2 !important; letter-spacing: 0.13em !important; } body.sacc-optimised-checkout #order_review .saf-eta-head { display: grid !important; grid-template-columns: 72px minmax(0, 1fr) !important; column-gap: 28px !important; align-items: start !important; width: 100% !important; margin: 0 0 32px !important; } body.sacc-optimised-checkout #order_review .saf-eta-head > div { min-width: 0 !important; } body.sacc-optimised-checkout #order_review .saf-eta-card__icon, body.sacc-optimised-checkout #order_review .saf-eta-icon { display: grid !important; place-items: center !important; width: 64px !important; min-width: 64px !important; height: 64px !important; min-height: 64px !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important; background: #eef0ef !important; font-size: 30px !important; } body.sacc-optimised-checkout #order_review .sacc-eta-theme-heading, body.sacc-optimised-checkout #order_review .saf-eta-card__title { margin: 0 0 9px !important; color: #171820 !important; font-size: clamp(25px, 2vw, 32px) !important; font-weight: 650 !important; line-height: 1.16 !important; letter-spacing: -0.025em !important; white-space: normal !important; } body.sacc-optimised-checkout #order_review .saf-eta-card__subtitle, body.sacc-optimised-checkout #order_review .saf-eta-subtitle { margin: 0 !important; color: #656966 !important; font-size: 14px !important; line-height: 1.5 !important; } body.sacc-optimised-checkout #order_review .saf-eta-card__dates, body.sacc-optimised-checkout #order_review .saf-eta-card__forecast-grid, body.sacc-optimised-checkout #order_review .saf-eta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; margin: 0 0 22px !important; } body.sacc-optimised-checkout #order_review .saf-eta-card__dates > *, body.sacc-optimised-checkout #order_review .saf-eta-card__forecast-grid > *, body.sacc-optimised-checkout #order_review .saf-eta-grid > * { min-width: 0 !important; padding: 22px 24px !important; border: 1px solid #dfe3e1 !important; border-radius: 16px !important; background: #fff !important; } body.sacc-optimised-checkout #order_review .saf-eta-card [class*="meta"], body.sacc-optimised-checkout #order_review .saf-eta-card [class*="insight"], body.sacc-optimised-checkout #order_review .saf-eta-card [class*="footer"] { display: flex !important; flex-flow: row nowrap !important; align-items: center !important; gap: 12px !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; } body.sacc-optimised-checkout #order_review .saf-eta-card [class*="meta"]::-webkit-scrollbar, body.sacc-optimised-checkout #order_review .saf-eta-card [class*="insight"]::-webkit-scrollbar, body.sacc-optimised-checkout #order_review .saf-eta-card [class*="footer"]::-webkit-scrollbar { display: none !important; } body.sacc-optimised-checkout #order_review .saf-eta-card [class*="meta"] > *, body.sacc-optimised-checkout #order_review .saf-eta-card [class*="insight"] > *, body.sacc-optimised-checkout #order_review .saf-eta-card [class*="footer"] > * { flex: 0 0 auto !important; padding: 9px 13px !important; border: 1px solid #dce7e0 !important; border-radius: 999px !important; background: #f0f5f2 !important; white-space: nowrap !important; } /* Remove every historic negative mobile offset. */ @media (max-width: 900px) { html, body.sacc-optimised-checkout { max-width: 100% !important; overflow-x: clip !important; } body.sacc-optimised-checkout #content, body.sacc-optimised-checkout #content > .container, body.sacc-optimised-checkout .site-content, body.sacc-optimised-checkout .site-content > .container, body.sacc-optimised-checkout #primary, body.sacc-optimised-checkout .content-area, body.sacc-optimised-checkout main#main, body.sacc-optimised-checkout article.page, body.sacc-optimised-checkout .entry-content, body.sacc-optimised-checkout .entry-content > .woocommerce, body.sacc-optimised-checkout .woocommerce, body.sacc-optimised-checkout form.checkout.woocommerce-checkout, body.sacc-optimised-checkout form.checkout.woocommerce-checkout > .col2-set, body.sacc-optimised-checkout #order_review_heading, body.sacc-optimised-checkout #order_review { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } body.sacc-optimised-checkout #content > .container, body.sacc-optimised-checkout .site-content > .container { width: 100% !important; padding-right: 16px !important; padding-left: 16px !important; } body.sacc-optimised-checkout .entry-content > .woocommerce, body.sacc-optimised-checkout .woocommerce, body.sacc-optimised-checkout form.checkout.woocommerce-checkout, body.sacc-optimised-checkout #order_review { width: 100% !important; margin-right: 0 !important; margin-left: 0 !important; transform: none !important; } body.sacc-optimised-checkout #order_review { padding: 18px 16px !important; } body.sacc-optimised-checkout .woocommerce-checkout-review-order-table { width: 100% !important; table-layout: fixed !important; } body.sacc-optimised-checkout .woocommerce-checkout-review-order-table th, body.sacc-optimised-checkout .woocommerce-checkout-review-order-table td { min-width: 0 !important; overflow-wrap: anywhere !important; } body.sacc-optimised-checkout #order_review .saf-eta-card { padding: 24px 18px 22px !important; } body.sacc-optimised-checkout #order_review .saf-eta-card::before { margin: 0 0 14px 58px !important; font-size: 10px !important; } body.sacc-optimised-checkout #order_review .saf-eta-head { grid-template-columns: 44px minmax(0, 1fr) !important; column-gap: 14px !important; margin-bottom: 22px !important; } body.sacc-optimised-checkout #order_review .saf-eta-card__icon, body.sacc-optimised-checkout #order_review .saf-eta-icon { width: 42px !important; min-width: 42px !important; height: 42px !important; min-height: 42px !important; font-size: 20px !important; } body.sacc-optimised-checkout #order_review .sacc-eta-theme-heading, body.sacc-optimised-checkout #order_review .saf-eta-card__title { font-size: 21px !important; } body.sacc-optimised-checkout #order_review .saf-eta-card__dates, body.sacc-optimised-checkout #order_review .saf-eta-card__forecast-grid, body.sacc-optimised-checkout #order_review .saf-eta-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; } } /* ========================================================= * 2.5.1 ETA rollback refinements and wallet tile styling * ========================================================= */ /* * Restore the preferred 2.4.9 ETA proportions while retaining the * later mobile-width fixes from 2.5.0. */ body.sacc-optimised-checkout #order_review .saf-eta-card { padding: 26px 28px 24px !important; border: 1px solid #dde3df !important; border-radius: 18px !important; background: linear-gradient( 180deg, #ffffff 0%, #fbfcfb 100% ) !important; box-shadow: 0 12px 32px rgba(23, 39, 31, 0.045) !important; overflow: hidden !important; } body.sacc-optimised-checkout #order_review .saf-eta-card::before { content: "LIVE FULFILMENT FORECAST" !important; display: block !important; margin: 0 0 10px 50px !important; color: var(--sacc-accent, #209447) !important; font-size: 11px !important; font-weight: 750 !important; line-height: 1.2 !important; letter-spacing: 0.12em !important; } body.sacc-optimised-checkout #order_review .saf-eta-head { display: grid !important; grid-template-columns: 42px minmax(0, 1fr) !important; column-gap: 12px !important; align-items: start !important; width: 100% !important; margin: 0 0 18px !important; } body.sacc-optimised-checkout #order_review .saf-eta-card__icon, body.sacc-optimised-checkout #order_review .saf-eta-icon { display: grid !important; place-items: center !important; width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important; margin: 0 !important; border: 1px solid #dce9e1 !important; border-radius: 50% !important; background: #edf7f1 !important; box-shadow: none !important; font-size: 19px !important; } body.sacc-optimised-checkout #order_review .sacc-eta-theme-heading, body.sacc-optimised-checkout #order_review .saf-eta-card__title { margin: 0 0 6px !important; color: #181820 !important; font-size: 20px !important; font-weight: 500 !important; line-height: 1.3 !important; letter-spacing: 0 !important; white-space: normal !important; } body.sacc-optimised-checkout #order_review .saf-eta-card__subtitle, body.sacc-optimised-checkout #order_review .saf-eta-subtitle { margin-top: 0 !important; margin-bottom: 0 !important; color: #676d6a !important; font-size: 13px !important; line-height: 1.5 !important; } body.sacc-optimised-checkout #order_review .saf-eta-card__dates, body.sacc-optimised-checkout #order_review .saf-eta-card__forecast-grid, body.sacc-optimised-checkout #order_review .saf-eta-grid, body.sacc-optimised-checkout #order_review .saf-date-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; margin-top: 18px !important; margin-bottom: 16px !important; } body.sacc-optimised-checkout #order_review .saf-eta-card__dates > *, body.sacc-optimised-checkout #order_review .saf-eta-card__forecast-grid > *, body.sacc-optimised-checkout #order_review .saf-eta-grid > *, body.sacc-optimised-checkout #order_review .saf-date-grid > * { min-width: 0 !important; padding: 17px 18px !important; border: 1px solid #e1e5e3 !important; border-radius: 13px !important; background: #f8faf9 !important; box-shadow: none !important; } /* Keep the forecast pills in one horizontal row. */ body.sacc-optimised-checkout #order_review .saf-eta-card [class*="meta"], body.sacc-optimised-checkout #order_review .saf-eta-card [class*="insight"], body.sacc-optimised-checkout #order_review .saf-eta-card [class*="footer"] { display: flex !important; flex-flow: row nowrap !important; align-items: center !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; } body.sacc-optimised-checkout #order_review .saf-eta-card [class*="meta"]::-webkit-scrollbar, body.sacc-optimised-checkout #order_review .saf-eta-card [class*="insight"]::-webkit-scrollbar, body.sacc-optimised-checkout #order_review .saf-eta-card [class*="footer"]::-webkit-scrollbar { display: none !important; } body.sacc-optimised-checkout #order_review .saf-eta-card [class*="meta"] > *, body.sacc-optimised-checkout #order_review .saf-eta-card [class*="insight"] > *, body.sacc-optimised-checkout #order_review .saf-eta-card [class*="footer"] > * { flex: 0 0 auto !important; white-space: nowrap !important; } /* * Restore the wallet gateway's full-width card appearance. * The trigger remains a button, but visually behaves like the other * payment tiles. */ body.sacc-optimised-checkout #payment ul.payment_methods.sacc-payment-grid > li.sacc-wallet-synthetic { grid-column: 1 / -1 !important; display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 1px solid #dfe3e5 !important; border-radius: 16px !important; background: #fff !important; overflow: hidden !important; box-sizing: border-box !important; } body.sacc-optimised-checkout #payment .sacc-wallet-trigger { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 5px !important; width: 100% !important; min-height: 118px !important; margin: 0 !important; padding: 24px 28px !important; border: 0 !important; border-radius: 16px !important; background: transparent !important; color: #181820 !important; box-shadow: none !important; cursor: pointer !important; appearance: none !important; -webkit-appearance: none !important; } body.sacc-optimised-checkout #payment .sacc-wallet-trigger:hover, body.sacc-optimised-checkout #payment .sacc-wallet-trigger:focus-visible { background: #f7f8f7 !important; outline: none !important; } body.sacc-optimised-checkout #payment .sacc-wallet-title { display: block !important; color: #181820 !important; font-size: 20px !important; font-weight: 600 !important; line-height: 1.25 !important; } body.sacc-optimised-checkout #payment .sacc-wallet-balance { display: block !important; color: #6a6f72 !important; font-size: 13px !important; font-weight: 550 !important; line-height: 1.35 !important; } body.sacc-optimised-checkout #payment .sacc-wallet-synthetic.is-selected { border-color: var(--sacc-accent, #209447) !important; box-shadow: 0 0 0 2px color-mix( in srgb, var(--sacc-accent, #209447) 16%, transparent ) !important; } @media (max-width: 900px) { body.sacc-optimised-checkout #order_review .saf-eta-card { padding: 21px 18px 20px !important; } body.sacc-optimised-checkout #order_review .saf-eta-card::before { margin-left: 46px !important; } body.sacc-optimised-checkout #order_review .saf-eta-card__dates, body.sacc-optimised-checkout #order_review .saf-eta-card__forecast-grid, body.sacc-optimised-checkout #order_review .saf-eta-grid, body.sacc-optimised-checkout #order_review .saf-date-grid { grid-template-columns: minmax(0, 1fr) !important; } } /* ========================================================= * 2.5.2 Definitive ETA typography and spacing override * ========================================================= */ /* Exact requested heading typography. */ body.sacc-optimised-checkout #order_review #saf-checkout-eta.saf-eta-card .saf-eta-head .sacc-eta-theme-heading, body.sacc-optimised-checkout #order_review #saf-checkout-eta.saf-eta-card .saf-eta-head .saf-eta-card__title, body.sacc-optimised-checkout #order_review #saf-checkout-eta.saf-eta-card h3.sacc-eta-theme-heading { margin: 0 0 6px !important; color: #181820 !important; font-size: 20px !important; font-weight: 500 !important; line-height: 1.25 !important; letter-spacing: 0 !important; } /* Remove excess vertical space beneath the subtitle. */ body.sacc-optimised-checkout #order_review #saf-checkout-eta.saf-eta-card .saf-eta-card__subtitle, body.sacc-optimised-checkout #order_review #saf-checkout-eta.saf-eta-card .saf-eta-subtitle { margin: 0 !important; padding: 0 !important; } /* * The ETA header wrapper previously carried a large bottom margin. * Keep only a compact gap before the two date cards. */ body.sacc-optimised-checkout #order_review #saf-checkout-eta.saf-eta-card .saf-eta-head { margin: 0 0 10px !important; } /* Date grid starts immediately after the compact header gap. */ body.sacc-optimised-checkout #order_review #saf-checkout-eta.saf-eta-card .saf-date-grid, body.sacc-optimised-checkout #order_review #saf-checkout-eta.saf-eta-card .saf-eta-card__dates, body.sacc-optimised-checkout #order_review #saf-checkout-eta.saf-eta-card .saf-eta-card__forecast-grid, body.sacc-optimised-checkout #order_review #saf-checkout-eta.saf-eta-card .saf-eta-grid { margin-top: 0 !important; margin-bottom: 14px !important; } /* * Fit all forecast pills inside the card width. * No wrapping and no horizontal scrolling. */ body.sacc-optimised-checkout #order_review #saf-checkout-eta.saf-eta-card [class*="meta"], body.sacc-optimised-checkout #order_review #saf-checkout-eta.saf-eta-card [class*="insight"], body.sacc-optimised-checkout #order_review #saf-checkout-eta.saf-eta-card [class*="footer"] { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: stretch !important; gap: 8px !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; overflow: visible !important; } body.sacc-optimised-checkout #order_review #saf-checkout-eta.saf-eta-card [class*="meta"] > *, body.sacc-optimised-checkout #order_review #saf-checkout-eta.saf-eta-card [class*="insight"] > *, body.sacc-optimised-checkout #order_review #saf-checkout-eta.saf-eta-card [class*="footer"] > * { display: flex !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; width: 100% !important; padding: 8px 8px !important; font-size: 11px !important; line-height: 1.2 !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; box-sizing: border-box !important; } /* Mobile keeps the three pills fitted rather than swipeable. */ @media (max-width: 600px) { body.sacc-optimised-checkout #order_review #saf-checkout-eta.saf-eta-card [class*="meta"], body.sacc-optimised-checkout #order_review #saf-checkout-eta.saf-eta-card [class*="insight"], body.sacc-optimised-checkout #order_review #saf-checkout-eta.saf-eta-card [class*="footer"] { gap: 5px !important; } body.sacc-optimised-checkout #order_review #saf-checkout-eta.saf-eta-card [class*="meta"] > *, body.sacc-optimised-checkout #order_review #saf-checkout-eta.saf-eta-card [class*="insight"] > *, body.sacc-optimised-checkout #order_review #saf-checkout-eta.saf-eta-card [class*="footer"] > * { padding: 7px 5px !important; font-size: 9px !important; } } /* ========================================================= * 2.5.3 Wallet balance and PayPal native content * ========================================================= */ body.sacc-optimised-checkout #payment .sacc-wallet-balance { display: block !important; margin-top: 4px !important; color: #6a6f72 !important; font-size: 13px !important; font-weight: 550 !important; line-height: 1.35 !important; } body.sacc-optimised-checkout #payment .sacc-payment-details-panel > .payment_box { display: block !important; width: 100% !important; max-width: none !important; margin: 0 0 18px !important; padding: 18px !important; border: 1px solid #dfe3e5 !important; border-radius: 14px !important; background: #fff !important; box-sizing: border-box !important; } body.sacc-optimised-checkout #payment .sacc-payment-details-panel > .payment_box::before { display: none !important; } body.sacc-optimised-checkout #payment .sacc-payment-paypal.sacc-payment-selected > .payment_box { display: none !important; }