/*
 * Ngen Checkout UI
 *
 * The page and its layout are ours. Every field is still rendered by
 * WooCommerce, the order review is still its own block, and Stripe still
 * draws its payment form — nothing here reaches inside that box, which is
 * what keeps cards, the currency selector, Link, Apple Pay and Google Pay
 * working exactly as before.
 */

:root{
    --cui-blue:#7db9e8;
    --cui-pink:#f0a8c0;
    --cui-ink:#eef2f7;
    --cui-muted:#8895a8;
    --cui-line:rgba(255,255,255,.13);
    --cui-field:rgba(255,255,255,.05);
}

/* ============================================================
   page
   ============================================================ */
html{background:#0d1017}
body.ngen-cui{
    margin:0;padding:0;min-height:100vh;
    background:
        radial-gradient(ellipse at 10% -8%,rgba(125,185,232,.15),transparent 50%),
        radial-gradient(ellipse at 95% 105%,rgba(240,168,192,.12),transparent 48%),
        #0d1017;
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    color:var(--cui-ink);font-size:16px;line-height:1.6;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
body.ngen-cui *,body.ngen-cui *::before,body.ngen-cui *::after{box-sizing:border-box}
.cui-page{display:flex;flex-direction:column;min-height:100vh}

/* ---------- header ---------- */
.cui-top{
    display:flex;align-items:center;justify-content:space-between;gap:20px;
    max-width:1180px;width:100%;margin:0 auto;padding:24px 28px 0;
}
.cui-logo{display:block;line-height:0}
.cui-logo img{height:50px;width:auto;display:block;filter:drop-shadow(0 0 16px rgba(125,185,232,.4))}
.cui-back{
    display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
    font-size:13.5px;font-weight:500;color:var(--cui-muted);text-decoration:none;transition:color .18s;
}
.cui-back:hover{color:#fff}
.cui-back svg{width:15px;height:15px}
@media(max-width:600px){
    .cui-top{padding:18px 18px 0}
    .cui-logo img{height:40px}
    .cui-back span{display:none}
}

.cui-notices{max-width:1180px;width:100%;margin:0 auto;padding:22px 28px 0}
.cui-notices:empty{padding:0}
@media(max-width:600px){.cui-notices{padding:16px 18px 0}}

/* ---------- footer ---------- */
.cui-foot{
    max-width:1180px;width:100%;margin:0 auto;padding:24px 28px 32px;
    display:flex;align-items:center;justify-content:center;gap:9px;
    font-size:12.5px;color:rgba(255,255,255,.32);border-top:1px solid rgba(255,255,255,.07);
}
.cui-foot a{color:rgba(255,255,255,.48);text-decoration:none}
.cui-foot a:hover{color:#fff}

/* ============================================================
   the two columns
   ============================================================ */
.cui-form{
    flex:1;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
    gap:56px;align-items:start;
    max-width:1180px;width:100%;margin:0 auto;padding:30px 28px 70px;
}
.cui-form::before,.cui-form::after{content:none!important;display:none!important}
@media(max-width:940px){
    .cui-form{grid-template-columns:1fr;gap:34px;padding:24px 18px 56px}
}

.cui-title{
    margin:0 0 30px;font-size:42px;font-weight:700;letter-spacing:-1.3px;line-height:1;color:#fff;
}
@media(max-width:640px){.cui-title{font-size:31px;margin-bottom:22px}}

/* ---------- a section ---------- */
.cui-sec{
    margin-bottom:34px;
    opacity:0;transform:translateY(10px);
    animation:cuiRise .45s cubic-bezier(.16,1,.3,1) forwards;
}
.cui-sec:nth-of-type(1){animation-delay:.04s}
.cui-sec:nth-of-type(2){animation-delay:.09s}
.cui-sec:nth-of-type(3){animation-delay:.14s}
.cui-sec:nth-of-type(4){animation-delay:.19s}
@keyframes cuiRise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.cui-sec{animation:none;opacity:1;transform:none}}

.cui-sec-head{
    display:flex;align-items:baseline;gap:12px;
    margin-bottom:18px;padding-bottom:13px;border-bottom:1px solid var(--cui-line);
}
.cui-sec-head h2{margin:0;font-size:17px;font-weight:600;letter-spacing:-.1px;color:#fff}
.cui-opt{font-size:12.5px;font-weight:400;color:var(--cui-muted);margin-left:4px}
.cui-toggle{display:flex;align-items:center;gap:11px;cursor:pointer;margin:0}
.cui-toggle span{font-size:17px;font-weight:600;color:#fff}
.cui-check{width:18px;height:18px;accent-color:var(--cui-blue);cursor:pointer;margin:0;flex-shrink:0}

/* ---------- fields ---------- */
.cui-row{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:13px}
.cui-row-one{grid-template-columns:1fr}
.cui-row:last-child{margin-bottom:0}
@media(max-width:600px){.cui-row{grid-template-columns:1fr}}

/* WooCommerce wraps each field in .form-row; inside our grid it is just a cell */
.ngen-cui .cui-row .form-row{
    margin:0!important;padding:0!important;width:auto!important;float:none!important;
    display:block;
}
.ngen-cui .form-row label{display:none}          /* the placeholder carries the label */
.ngen-cui .form-row label.checkbox,
.ngen-cui .form-row label.woocommerce-form__label-for-checkbox{
    display:flex;align-items:center;gap:10px;font-size:14px;color:var(--cui-ink);cursor:pointer;
}
.ngen-cui .woocommerce-input-wrapper{display:block;width:100%}

.ngen-cui .input-text,
.ngen-cui select,
.ngen-cui .select2-container .select2-selection--single{
    width:100%;padding:14px 16px;
    font-family:inherit;font-size:14.5px;color:#fff;
    background:var(--cui-field);background-image:none;
    border:1px solid rgba(255,255,255,.16);border-radius:10px;
    box-shadow:none;height:auto;min-height:50px;
    transition:border-color .2s,box-shadow .2s,background .2s;
}
.ngen-cui .input-text::placeholder,
.ngen-cui textarea::placeholder{color:rgba(255,255,255,.4);opacity:1}
.ngen-cui .input-text:focus,
.ngen-cui select:focus,
.ngen-cui .select2-container--focus .select2-selection--single{
    outline:none;border-color:rgba(125,185,232,.7);background:rgba(255,255,255,.09);
    box-shadow:0 0 0 3px rgba(125,185,232,.16);
}
.ngen-cui textarea.input-text{min-height:88px;resize:vertical;line-height:1.6}
.ngen-cui .form-row .description{margin:6px 0 0;font-size:12px;color:var(--cui-muted);line-height:1.5}
.ngen-cui input[type=checkbox]{width:18px;height:18px;accent-color:var(--cui-blue);cursor:pointer;margin:0;flex-shrink:0}

/* the field that failed validation */
.ngen-cui .woocommerce-invalid .input-text,
.ngen-cui .woocommerce-invalid .select2-selection--single{
    border-color:rgba(240,168,192,.7);box-shadow:0 0 0 3px rgba(240,168,192,.13);
}

/* country / state dropdowns */
.ngen-cui .select2-container--default .select2-selection--single{display:flex;align-items:center}
.ngen-cui .select2-selection__rendered{padding:0!important;line-height:1.4!important;color:#fff!important}
.ngen-cui .select2-selection__placeholder{color:rgba(255,255,255,.4)!important}
.ngen-cui .select2-selection__arrow{top:50%!important;transform:translateY(-50%);right:12px!important;height:auto!important}
.ngen-cui .select2-selection__arrow b{border-color:var(--cui-muted) transparent transparent!important}
.select2-dropdown{
    background:#161b25!important;border:1px solid rgba(255,255,255,.18)!important;
    border-radius:10px!important;color:#eef2f7!important;overflow:hidden;
}
.select2-container--default .select2-results__option{color:#eef2f7;font-size:14px}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
    background:rgba(125,185,232,.25)!important;color:#fff!important;
}
.select2-search--dropdown .select2-search__field{
    background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.18)!important;
    color:#fff!important;border-radius:8px!important;padding:9px 11px!important;
}

.shipping_address{margin-top:4px}

/* ============================================================
   right column — the order
   ============================================================ */
.cui-order{
    position:sticky;top:24px;padding:30px;border-radius:20px;
    background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.035) 45%,rgba(255,255,255,.06));
    border:1px solid rgba(255,255,255,.16);
    backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 24px 60px rgba(0,0,0,.4);
    opacity:0;transform:translateY(10px);animation:cuiRise .45s cubic-bezier(.16,1,.3,1) .1s forwards;
}
@media(max-width:940px){.cui-order{position:static}}
.cui-order-title{margin:0 0 22px;font-size:26px;font-weight:700;letter-spacing:-.5px;color:#fff}

.ngen-cui .shop_table,
.ngen-cui .shop_table_in{width:100%;margin:0;border:none;border-collapse:collapse;background:transparent}
.ngen-cui .shop_table thead{display:none}
.ngen-cui .shop_table th,
.ngen-cui .shop_table td{
    border:none;background:transparent;padding:14px 0;vertical-align:top;text-align:left;
    border-bottom:1px solid rgba(255,255,255,.1);font-weight:400;
}
.ngen-cui .shop_table th:last-child,
.ngen-cui .shop_table td:last-child{text-align:right}

.ngen-cui .cart_item .product-name{font-size:14.5px;color:var(--cui-ink);line-height:1.5}
.ngen-cui .cart_item .product-quantity{color:var(--cui-muted);font-weight:400}
.ngen-cui .cart_item .product-total{font-size:14.5px;font-weight:600;color:#fff;white-space:nowrap}

.ngen-cui .cart-subtotal td:first-child,.ngen-cui .cart-subtotal th,
.ngen-cui .tax-total td:first-child,.ngen-cui .tax-total th,
.ngen-cui .tax-rate td:first-child,.ngen-cui .tax-rate th,
.ngen-cui .fee td:first-child,.ngen-cui .fee th{font-size:14.5px;color:#a8b4c4}
.ngen-cui .cart-subtotal td:last-child,
.ngen-cui .tax-total td:last-child,
.ngen-cui .tax-rate td:last-child,
.ngen-cui .fee td:last-child{font-size:14.5px;font-weight:600;color:#fff}

/* the shipment cell — WooCommerce fills it */
.ngen-cui .woocommerce-shipping-totals th{font-size:14.5px;color:#a8b4c4;font-weight:400}
.ngen-cui .woocommerce-shipping-totals td{text-align:right}
.ngen-cui ul#shipping_method,
.ngen-cui .woocommerce-shipping-methods{list-style:none;margin:0;padding:0}
.ngen-cui ul#shipping_method li,
.ngen-cui .woocommerce-shipping-methods li{
    margin:0 0 10px;padding:0;list-style:none;
    display:flex;align-items:center;justify-content:flex-end;gap:9px;
}
.ngen-cui ul#shipping_method li:last-child,
.ngen-cui .woocommerce-shipping-methods li:last-child{margin-bottom:0}
.ngen-cui ul#shipping_method input[type=radio],
.ngen-cui .woocommerce-shipping-methods input[type=radio]{
    width:17px;height:17px;accent-color:var(--cui-blue);cursor:pointer;margin:0;flex-shrink:0;order:2;
}
.ngen-cui ul#shipping_method label,
.ngen-cui .woocommerce-shipping-methods label{
    margin:0;order:1;text-align:right;line-height:1.5;display:inline;
    font-size:13.5px;color:#cfd8e3;cursor:pointer;
}
.ngen-cui .woocommerce-shipping-destination,
.ngen-cui .woocommerce-no-shipping-available-html,
.ngen-cui .e-checkout-message{
    display:block;text-align:right;font-size:13px;color:var(--cui-muted);line-height:1.6;
}
.ngen-cui .shipping-calculator-button{color:var(--cui-blue)}

/* the total */
.ngen-cui .order-total th,
.ngen-cui .order-total td{
    border-bottom:none;border-top:1px solid rgba(255,255,255,.2);padding-top:20px;
}
.ngen-cui .order-total th{
    font-size:15px;font-weight:700;color:#fff;letter-spacing:1.4px;text-transform:uppercase;
}
.ngen-cui .order-total td .amount,
.ngen-cui .order-total td strong{
    font-size:30px;font-weight:800;letter-spacing:-.8px;
    background:linear-gradient(135deg,#a8d4f5,#e4b4cb);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.ngen-cui .order-total td small,
.ngen-cui .includes_tax{
    display:block;margin-top:4px;font-size:11.5px;font-weight:400;
    color:var(--cui-muted);-webkit-text-fill-color:var(--cui-muted);
}

/* ============================================================
   payment — moved into the left column, Stripe untouched inside
   ============================================================ */
.cui-sec-pay{margin-bottom:0}
.ngen-cui #payment{background:transparent;border-radius:0;margin:0}
.ngen-cui #payment ul.payment_methods{margin:0;padding:0;border:none;list-style:none}
.ngen-cui #payment ul.payment_methods > li{
    list-style:none;margin:0 0 12px;padding:16px 18px;
    background:var(--cui-field);border:1px solid rgba(255,255,255,.14);border-radius:12px;
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.ngen-cui #payment ul.payment_methods > li > label{
    display:inline-flex;align-items:center;gap:10px;margin:0;
    font-size:14.5px;font-weight:600;color:#fff;cursor:pointer;
}
.ngen-cui #payment ul.payment_methods input[type=radio]{
    width:18px;height:18px;accent-color:var(--cui-blue);cursor:pointer;margin:0;
}
.ngen-cui #payment ul.payment_methods li img{max-height:26px;vertical-align:middle;margin-left:6px}

/* Stripe paints on white; it gets a clean plate and nothing inside is restyled */
.ngen-cui #payment div.payment_box{
    position:relative;margin:14px 0 0;padding:18px;
    background:#fff;color:#1a1f2e;border:none;border-radius:10px;
    font-size:14px;line-height:1.6;
}
.ngen-cui #payment div.payment_box::before,
.ngen-cui #payment div.payment_box::after{display:none}
.ngen-cui #payment div.payment_box a{color:#4f8ef7}

.ngen-cui #wc-stripe-express-checkout-element,
.ngen-cui .wc-stripe-express-checkout-element{margin:0 0 4px}
.ngen-cui .wc-stripe-express-checkout-button-separator,
.ngen-cui #wc-stripe-express-checkout-button-separator{
    color:var(--cui-muted);font-size:12.5px;margin:18px 0;
}

/* ---------- the button ---------- */
.ngen-cui #place_order,
.ngen-cui #payment .button.alt{
    display:block;width:100%;margin-top:20px;padding:18px;
    border:none;border-radius:12px;cursor:pointer;
    font-family:inherit;font-size:14px;font-weight:700;line-height:1.3;
    letter-spacing:1.4px;text-transform:uppercase;color:#0d1017;height:auto;
    background:linear-gradient(135deg,#eaf4ff,#8fc4ec 46%,#e4b4cb);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 26px rgba(125,185,232,.34);
    transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden;
}
.ngen-cui #place_order:hover{
    transform:translateY(-2px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 38px rgba(125,185,232,.55);
}
.ngen-cui #place_order:active{transform:translateY(0)}
.ngen-cui #place_order:disabled{opacity:.6;transform:none;cursor:not-allowed}
.ngen-cui #place_order::after{
    content:'';position:absolute;top:0;left:-60%;width:38%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
    transform:skewX(-20deg);transition:left .6s ease;pointer-events:none;
}
.ngen-cui #place_order:hover::after{left:135%}

/* ---------- terms ---------- */
.ngen-cui .woocommerce-privacy-policy-text p,
.ngen-cui .woocommerce-terms-and-conditions-wrapper{
    margin:18px 0 0;font-size:12px;color:var(--cui-muted);line-height:1.7;
}
.ngen-cui .woocommerce-privacy-policy-link,
.ngen-cui .woocommerce-terms-and-conditions-link{color:#cfd8e3}

/* ============================================================
   notices
   ============================================================ */
.ngen-cui .woocommerce-error,
.ngen-cui .woocommerce-message,
.ngen-cui .woocommerce-info{
    margin:0 0 18px;padding:14px 18px;list-style:none;
    background:rgba(255,255,255,.06);color:var(--cui-ink);
    border:1px solid rgba(255,255,255,.16);border-radius:12px;
    font-size:13.5px;line-height:1.6;
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.ngen-cui .woocommerce-error{border-left:3px solid var(--cui-pink)}
.ngen-cui .woocommerce-message{border-left:3px solid #86c98f}
.ngen-cui .woocommerce-info{border-left:3px solid var(--cui-blue)}
.ngen-cui .woocommerce-error::before,
.ngen-cui .woocommerce-message::before,
.ngen-cui .woocommerce-info::before{display:none}
.ngen-cui .woocommerce-error li{margin:0;padding:0;list-style:none}
.ngen-cui .woocommerce-error a,
.ngen-cui .woocommerce-message a,
.ngen-cui .woocommerce-info a{color:var(--cui-blue)}

/* noise a one-item checkout does not need */
.ngen-cui .woocommerce-form-coupon-toggle,
.ngen-cui .woocommerce-form-login-toggle{display:none}

/* the sign-in bar from the express-checkout plugin */
.ngen-cui .ngen-ec-signin-bar{
    max-width:1180px;width:100%;margin:22px auto 0;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);border-left:3px solid var(--cui-blue);
    border-radius:12px;
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.ngen-cui .ngen-ec-signin-bar p{color:var(--cui-ink)}
.ngen-cui .ngen-ec-signin-bar button{
    background:linear-gradient(135deg,#eaf4ff,#8fc4ec 46%,#e4b4cb);
    color:#0d1017;font-weight:700;
}

/* the overlay WooCommerce shows while totals refresh */
.ngen-cui .blockUI.blockOverlay{background:rgba(13,16,23,.55)!important;border-radius:20px}

/* ============================================================
   holding the page against the theme

   The theme paints its own background on <body> and restyles labels and
   headings site-wide, which lands on top of everything above and leaves
   light text sitting on white. These rules re-state the design at a
   specificity the theme cannot beat, and take the background off <body>
   so nothing can cover it. Stripe's own box is still left alone.
   ============================================================ */
html body.ngen-cui{
    background:#0d1017 !important;
    color:var(--cui-ink) !important;
}
/* the gradients ride on the page wrapper, where the theme never reaches */
html body.ngen-cui .cui-page{
    background:
        radial-gradient(ellipse at 10% -8%,rgba(125,185,232,.15),transparent 50%),
        radial-gradient(ellipse at 95% 105%,rgba(240,168,192,.12),transparent 48%);
    min-height:100vh;
}

/* headings and body copy */
html body.ngen-cui .cui-title{color:#fff !important}
html body.ngen-cui .cui-sec h2,
html body.ngen-cui .cui-order-title{color:#fff !important}
html body.ngen-cui .cui-opt,
html body.ngen-cui .cui-back,
html body.ngen-cui .cui-foot{color:var(--cui-muted) !important}
html body.ngen-cui .cui-foot a{color:var(--cui-muted) !important}

/* fields — the theme sets its own label size and colour */
html body.ngen-cui .cui-left label,
html body.ngen-cui .cui-right label,
html body.ngen-cui .cui-fields label{
    color:var(--cui-muted) !important;
    font-size:13px !important;
    font-weight:500 !important;
}
html body.ngen-cui .cui-toggle span{
    color:var(--cui-ink) !important;
    font-size:14.5px !important;
}
html body.ngen-cui .cui-row input:not([type=checkbox]):not([type=radio]),
html body.ngen-cui .cui-row textarea,
html body.ngen-cui .cui-fields input:not([type=checkbox]):not([type=radio]),
html body.ngen-cui .cui-fields textarea{
    background:var(--cui-field) !important;
    color:var(--cui-ink) !important;
    border:1px solid var(--cui-line) !important;
}
html body.ngen-cui .cui-row input::placeholder,
html body.ngen-cui .cui-fields input::placeholder,
html body.ngen-cui .cui-fields textarea::placeholder{
    color:var(--cui-muted) !important;opacity:1;
}

/* the country / state dropdowns are Select2, not a plain select */
html body.ngen-cui .select2-container--default .select2-selection--single{
    background:var(--cui-field) !important;
    border:1px solid var(--cui-line) !important;
    height:46px !important;border-radius:10px !important;
}
html body.ngen-cui .select2-container--default .select2-selection--single
    .select2-selection__rendered{
    color:var(--cui-ink) !important;line-height:44px !important;padding-left:14px !important;
}
html body.ngen-cui .select2-container--default .select2-selection--single
    .select2-selection__arrow{height:44px !important}
html body.ngen-cui .select2-container--default .select2-selection--single
    .select2-selection__placeholder{color:var(--cui-muted) !important}
/* the dropdown itself renders outside our wrapper, so it is targeted on its own */
.select2-dropdown{background:#161b25 !important;border:1px solid var(--cui-line) !important}
.select2-container--default .select2-results__option{color:#eef2f7 !important;background:transparent !important}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
    background:rgba(125,185,232,.18) !important;color:#fff !important;
}
.select2-search--dropdown .select2-search__field{
    background:rgba(255,255,255,.06) !important;color:#eef2f7 !important;
    border:1px solid rgba(255,255,255,.13) !important;
}

/* the order summary */
html body.ngen-cui .cui-right .product-name,
html body.ngen-cui .cui-right th,
html body.ngen-cui .cui-right td,
html body.ngen-cui .cui-right .woocommerce-Price-amount{color:var(--cui-ink) !important}
html body.ngen-cui .cui-right .order-total .woocommerce-Price-amount{color:var(--cui-blue) !important}
html body.ngen-cui .cui-right a{color:var(--cui-blue) !important}

/* the theme drops its own checkout step bar onto the page */
html body.ngen-cui .bar_cart,
html body.ngen-cui .woocommerce_bar_cart,
html body.ngen-cui .cart_bar,
html body.ngen-cui .sc_layouts_title,
html body.ngen-cui .msgmsg-box-wpcp{display:none !important}
/* ============================================================
   the pieces the theme rebuilt

   This theme ships its own checkout templates: the review "table" is a set
   of divs, and its stylesheet lays them out its own way. Inside our card
   that collapsed the summary into a narrow column with the amounts pushed
   out of view. These rules put the grid back and re-state the palette.
   ============================================================ */

/* the theme's checkout step bar */
html body.ngen-cui .woocommerce_status_bar,
html body.ngen-cui .bar_payment,
html body.ngen-cui .bar_order{display:none !important}

/* ---------- the order summary ---------- */
html body.ngen-cui .cui-order{height:auto !important;overflow:visible !important}
html body.ngen-cui .cui-right .woocommerce-checkout-review-order{
    display:block !important;width:100% !important;
}
html body.ngen-cui .cui-right .woocommerce-checkout-review-order-table{
    display:block !important;width:100% !important;
    border:0 !important;background:transparent !important;margin:0 !important;
}
html body.ngen-cui .cui-right .woocommerce-checkout-review-order-table thead{display:none !important}
html body.ngen-cui .cui-right .woocommerce-checkout-review-order-table tbody,
html body.ngen-cui .cui-right .woocommerce-checkout-review-order-table tfoot{
    display:block !important;width:100% !important;
}
/* every row becomes a label / amount pair, whatever tag the theme used */
html body.ngen-cui .cui-right .woocommerce-checkout-review-order-table tr,
html body.ngen-cui .cui-right .woocommerce-checkout-review-order-table .cart_item,
html body.ngen-cui .cui-right .woocommerce-checkout-review-order-table .cart-subtotal,
html body.ngen-cui .cui-right .woocommerce-checkout-review-order-table .woocommerce-shipping-totals,
html body.ngen-cui .cui-right .woocommerce-checkout-review-order-table .tax-total,
html body.ngen-cui .cui-right .woocommerce-checkout-review-order-table .order-total{
    display:flex !important;align-items:flex-start;justify-content:space-between;gap:16px;
    width:100% !important;padding:13px 0 !important;margin:0 !important;
    border:0 !important;border-bottom:1px solid var(--cui-line) !important;
    background:transparent !important;
}
html body.ngen-cui .cui-right .woocommerce-checkout-review-order-table th,
html body.ngen-cui .cui-right .woocommerce-checkout-review-order-table td{
    display:block !important;width:auto !important;
    padding:0 !important;border:0 !important;background:transparent !important;
    text-align:left !important;font-size:14.5px !important;
}
/* the amount side */
html body.ngen-cui .cui-right .woocommerce-checkout-review-order-table td{
    text-align:right !important;flex:0 0 auto;white-space:nowrap;
    color:#fff !important;font-weight:600 !important;
}
html body.ngen-cui .cui-right .woocommerce-checkout-review-order-table th{
    flex:1 1 auto;color:var(--cui-muted) !important;font-weight:500 !important;
}
/* the product line */
html body.ngen-cui .cui-right .cart_item .product-name{
    color:var(--cui-ink) !important;font-weight:500 !important;white-space:normal !important;
}
html body.ngen-cui .cui-right .cart_item .product-total{color:#fff !important}
/* the shipping choices stack under their label and must wrap */
html body.ngen-cui .cui-right .woocommerce-shipping-totals td{
    white-space:normal !important;text-align:right !important;font-weight:400 !important;
}
html body.ngen-cui .cui-right #shipping_method{list-style:none;margin:0;padding:0}
html body.ngen-cui .cui-right #shipping_method li{
    margin:0 0 6px;display:flex;align-items:center;justify-content:flex-end;gap:8px;
    color:var(--cui-ink) !important;
}
html body.ngen-cui .cui-right #shipping_method label{
    color:var(--cui-ink) !important;font-size:13.5px !important;margin:0 !important;
}
/* the grand total */
html body.ngen-cui .cui-right .order-total{border-bottom:0 !important;padding-top:18px !important}
html body.ngen-cui .cui-right .order-total th{
    color:#fff !important;font-size:17px !important;font-weight:700 !important;
}
html body.ngen-cui .cui-right .order-total td,
html body.ngen-cui .cui-right .order-total .woocommerce-Price-amount{
    color:var(--cui-blue) !important;font-size:24px !important;font-weight:700 !important;
}

/* ---------- the ship-to-different block stays shut until it is ticked ---------- */
html body.ngen-cui .shipping_address{display:none !important}
html body.ngen-cui #ship-to-different-address-checkbox:checked ~ .shipping_address,
html body.ngen-cui .cui-sec-ship:has(#ship-to-different-address-checkbox:checked) .shipping_address{
    display:block !important;
}

/* ---------- the payment block ---------- */
html body.ngen-cui #payment,
html body.ngen-cui #payment ul.payment_methods,
html body.ngen-cui #payment .payment_box,
html body.ngen-cui #payment div.form-row{
    background:transparent !important;border:0 !important;
}
html body.ngen-cui #payment ul.payment_methods{
    padding:0 !important;margin:0 !important;list-style:none !important;
}
html body.ngen-cui #payment ul.payment_methods > li{
    background:transparent !important;border:0 !important;padding:0 !important;margin:0 0 10px !important;
}
html body.ngen-cui #payment ul.payment_methods label{
    color:var(--cui-ink) !important;font-size:14.5px !important;
}
/* Stripe draws its card form on a light surface, so it keeps a light plate
   of its own — nothing inside it is touched. */
html body.ngen-cui #payment .payment_box{
    background:#fff !important;border-radius:12px !important;
    padding:16px !important;margin:10px 0 0 !important;color:#30313d !important;
}
html body.ngen-cui #payment .payment_box::before{display:none !important}
html body.ngen-cui .woocommerce-privacy-policy-text,
html body.ngen-cui .woocommerce-privacy-policy-text p{
    color:var(--cui-muted) !important;font-size:12.5px !important;
}
html body.ngen-cui .woocommerce-privacy-policy-text a{color:var(--cui-blue) !important}
/* ============================================================
   the summary table, as this theme actually builds it

   The theme wraps a real <table class="shop_table_in"> inside a
   div.shop_table, and its rows use <td> for BOTH the label and the amount
   rather than a <th>/<td> pair. Forcing those rows to flex made the label
   and the amount fight for the same side. Keeping it a table and styling
   the first and last cell puts the label left and the amount right, which
   is what the design asks for and what the markup supports.
   ============================================================ */
html body.ngen-cui .cui-right .woocommerce-checkout-review-order-table{
    display:block !important;width:100% !important;padding:0 !important;
}
html body.ngen-cui .cui-right table.shop_table_in{
    display:table !important;width:100% !important;
    table-layout:auto !important;border-collapse:collapse !important;
    background:transparent !important;border:0 !important;margin:0 !important;
}
html body.ngen-cui .cui-right table.shop_table_in tbody,
html body.ngen-cui .cui-right table.shop_table_in tfoot{display:table-row-group !important}
html body.ngen-cui .cui-right table.shop_table_in tr{
    display:table-row !important;background:transparent !important;border:0 !important;
}
html body.ngen-cui .cui-right table.shop_table_in th,
html body.ngen-cui .cui-right table.shop_table_in td{
    display:table-cell !important;width:auto !important;vertical-align:top !important;
    padding:13px 0 !important;border:0 !important;
    border-bottom:1px solid var(--cui-line) !important;
    background:transparent !important;font-size:14.5px !important;line-height:1.5 !important;
}
/* label on the left, amount on the right */
html body.ngen-cui .cui-right table.shop_table_in tr > *:first-child{
    text-align:left !important;color:var(--cui-muted) !important;font-weight:500 !important;
    padding-right:14px !important;
}
html body.ngen-cui .cui-right table.shop_table_in tr > *:last-child{
    text-align:right !important;color:#fff !important;font-weight:600 !important;
    white-space:nowrap !important;width:1% !important;
}
/* the product line reads as the item, not as a label */
html body.ngen-cui .cui-right table.shop_table_in .cart_item > .product-name{
    color:var(--cui-ink) !important;font-weight:500 !important;white-space:normal !important;
}
html body.ngen-cui .cui-right table.shop_table_in .product-quantity{
    color:var(--cui-muted) !important;font-weight:400 !important;
}
/* the shipping choices need to wrap, so they are the one cell that may */
html body.ngen-cui .cui-right table.shop_table_in .woocommerce-shipping-totals > td{
    white-space:normal !important;font-weight:400 !important;
    color:var(--cui-ink) !important;width:auto !important;
}
html body.ngen-cui .cui-right #shipping_method{
    list-style:none !important;margin:0 !important;padding:0 !important;
}
html body.ngen-cui .cui-right #shipping_method li{
    display:flex !important;align-items:center !important;justify-content:flex-end !important;
    gap:8px !important;margin:0 0 7px !important;
}
html body.ngen-cui .cui-right #shipping_method li:last-child{margin-bottom:0 !important}
html body.ngen-cui .cui-right #shipping_method label{
    color:var(--cui-ink) !important;font-size:13.5px !important;font-weight:400 !important;
    margin:0 !important;cursor:pointer;
}
html body.ngen-cui .cui-right .woocommerce-shipping-may-be-available-html{
    color:var(--cui-muted) !important;font-size:13px !important;font-weight:400 !important;
}
/* the grand total carries the accent */
html body.ngen-cui .cui-right table.shop_table_in .order-total > *{
    border-bottom:0 !important;padding-top:18px !important;
}
html body.ngen-cui .cui-right table.shop_table_in .order-total > *:first-child{
    color:#fff !important;font-size:17px !important;font-weight:700 !important;
}
html body.ngen-cui .cui-right table.shop_table_in .order-total > *:last-child,
html body.ngen-cui .cui-right table.shop_table_in .order-total .woocommerce-Price-amount{
    color:var(--cui-blue) !important;font-size:24px !important;font-weight:700 !important;
}

/* the card grows with the table instead of clipping it */
html body.ngen-cui .cui-order{
    height:auto !important;min-height:0 !important;overflow:visible !important;
    display:block !important;
}
/* The theme floats the review block right. A float adds no height to its
   parent, so the summary card collapsed to just its heading and the table
   spilled out below it. Taking the float off puts the table back in flow. */
html body.ngen-cui .cui-right .woocommerce-checkout-review-order{
    float:none !important;width:100% !important;
}
html body.ngen-cui .cui-order::after{content:"";display:table;clear:both}
/* ============================================================
   the last of the summary table

   width:1% collapsed the amount cells to 4px, so the figures spilled past
   the card edge, and a border on each cell drew two stubs per row instead
   of one rule across it. The amount column is given a real width and the
   row separator moves onto the row.
   ============================================================ */
html body.ngen-cui .cui-right table.shop_table_in th,
html body.ngen-cui .cui-right table.shop_table_in td{
    border-bottom:0 !important;
}
html body.ngen-cui .cui-right table.shop_table_in tr{
    border-bottom:1px solid var(--cui-line) !important;
}
html body.ngen-cui .cui-right table.shop_table_in tr:last-child{border-bottom:0 !important}
/* the amount column: wide enough for the figure, never collapsed */
html body.ngen-cui .cui-right table.shop_table_in tr > *:last-child{
    width:auto !important;min-width:96px !important;white-space:nowrap !important;
}
/* the shipping cell carries wrapping text, so it may take the room it needs */
html body.ngen-cui .cui-right table.shop_table_in .woocommerce-shipping-totals > td{
    min-width:0 !important;white-space:normal !important;
}
html body.ngen-cui .cui-right table.shop_table_in .woocommerce-shipping-totals > *:first-child{
    width:1% !important;white-space:nowrap !important;
}
/* nothing may reach past the card */
html body.ngen-cui .cui-order{overflow:hidden !important}
html body.ngen-cui .cui-right table.shop_table_in{
    table-layout:auto !important;max-width:100% !important;
}

/* the theme prints its own "Payment" heading above the block, in its own
   dark ink — the section already has a heading of ours */
html body.ngen-cui .cui-sec-pay > h3,
html body.ngen-cui #payment > h3,
html body.ngen-cui .cui-sec-pay .cui-sec-head + h3{display:none !important}

/* the gateway radio is the only choice, so it reads as a heading, not a pick */
html body.ngen-cui #payment ul.payment_methods > li > label{
    font-weight:600 !important;color:var(--cui-ink) !important;
}
/* ============================================================
   the figures themselves

   Every price is <span class="woocommerce-Price-amount"><bdi>$12.95</bdi></span>.
   The theme colours the <bdi>, which is the innermost element, so setting
   the span alone left the amounts near-black on a dark card. The colour is
   applied to the bdi and the currency symbol as well.
   ============================================================ */
html body.ngen-cui .cui-right .woocommerce-Price-amount,
html body.ngen-cui .cui-right .woocommerce-Price-amount bdi,
html body.ngen-cui .cui-right .woocommerce-Price-currencySymbol{
    color:#fff !important;
}
html body.ngen-cui .cui-right .order-total .woocommerce-Price-amount,
html body.ngen-cui .cui-right .order-total .woocommerce-Price-amount bdi,
html body.ngen-cui .cui-right .order-total .woocommerce-Price-currencySymbol{
    color:var(--cui-blue) !important;
}
/* the shipping choices read as a list, so they stay the quieter ink */
html body.ngen-cui .cui-right #shipping_method .woocommerce-Price-amount,
html body.ngen-cui .cui-right #shipping_method .woocommerce-Price-amount bdi,
html body.ngen-cui .cui-right #shipping_method .woocommerce-Price-currencySymbol{
    color:var(--cui-ink) !important;font-weight:600 !important;
}

/* ---------- the shipping choices ----------
   Right-aligning them squeezed each rate into a ragged column. They read as
   a list: the radio on the left, the service and its price beside it. */
html body.ngen-cui .cui-right table.shop_table_in .woocommerce-shipping-totals > td{
    text-align:left !important;
}
html body.ngen-cui .cui-right #shipping_method li{
    justify-content:flex-start !important;align-items:center !important;
    gap:9px !important;margin:0 0 9px !important;
}
html body.ngen-cui .cui-right #shipping_method li input[type=radio]{
    flex:0 0 auto;margin:0 !important;accent-color:var(--cui-blue);
    width:16px;height:16px;cursor:pointer;
}
html body.ngen-cui .cui-right #shipping_method label{
    flex:1 1 auto;text-align:left !important;
    display:flex !important;align-items:baseline;justify-content:space-between;gap:10px;
}
/* ============================================================
   phones

   At this width the summary label and its value were sharing one line and
   running into each other, and the pay button kept its desktop size. The
   rows lay out as a proper pair again, and the button takes the full width
   so it is easy to hit.
   ============================================================ */
@media(max-width:640px){
    html body.ngen-cui .cui-right table.shop_table_in,
    html body.ngen-cui .cui-right table.shop_table_in tbody,
    html body.ngen-cui .cui-right table.shop_table_in tfoot{display:block !important}
    html body.ngen-cui .cui-right table.shop_table_in tr{
        display:flex !important;align-items:baseline !important;
        justify-content:space-between !important;gap:12px !important;
        padding:12px 0 !important;
    }
    html body.ngen-cui .cui-right table.shop_table_in th,
    html body.ngen-cui .cui-right table.shop_table_in td{
        display:block !important;padding:0 !important;width:auto !important;
        min-width:0 !important;
    }
    html body.ngen-cui .cui-right table.shop_table_in tr > *:first-child{
        flex:1 1 auto !important;padding-right:0 !important;
    }
    html body.ngen-cui .cui-right table.shop_table_in tr > *:last-child{
        flex:0 0 auto !important;text-align:right !important;
    }
    /* the shipping choices need the full row, so that one stacks */
    html body.ngen-cui .cui-right table.shop_table_in .woocommerce-shipping-totals{
        display:block !important;
    }
    html body.ngen-cui .cui-right table.shop_table_in .woocommerce-shipping-totals > *{
        display:block !important;width:100% !important;text-align:left !important;
    }
    html body.ngen-cui .cui-right table.shop_table_in .woocommerce-shipping-totals > *:first-child{
        margin-bottom:8px !important;
    }
    html body.ngen-cui .cui-right #shipping_method li{justify-content:flex-start !important}

    /* the pay button fills the width */
    html body.ngen-cui #place_order{
        width:100% !important;display:block !important;
        padding:16px 20px !important;font-size:15px !important;
    }
    html body.ngen-cui #payment .form-row.place-order{text-align:center !important}
    html body.ngen-cui #payment .payment_box{padding:12px !important}
}

/* The single gateway is not a choice to make, so its radio is taken out of
   the way and the label reads as the heading of the block. */
html body.ngen-cui #payment ul.payment_methods > li:only-child > input[type=radio]{
    position:absolute !important;opacity:0 !important;pointer-events:none !important;
}
html body.ngen-cui #payment ul.payment_methods > li:only-child > label{
    cursor:default !important;margin:0 0 4px !important;display:block !important;
}
/* The theme draws its own checkbox graphic on the gateway label. The radio
   itself is already out of the way, so the graphic is removed too and the
   label reads as the heading of the payment block. */
html body.ngen-cui #payment ul.payment_methods > li > label::before,
html body.ngen-cui #payment ul.payment_methods > li > label::after{
    display:none !important;content:none !important;
}
html body.ngen-cui #payment ul.payment_methods > li > label{
    padding-left:0 !important;text-indent:0 !important;
}
/* ============================================================
   the express buttons

   Apple Pay, Google Pay and Link are each drawn in their own Stripe
   iframe. Stripe sizes those frames to min-height:100px while the button
   inside is only 48px tall, which left a band of empty space under each
   row. The frames are allowed to sit at their button's height instead.

   Only the outer frame is touched — nothing reaches inside it, so the
   buttons themselves are still Stripe's, and they keep working as before.
   ============================================================ */
html body.ngen-cui #wc-stripe-express-checkout-element{
    margin:4px 0 0 !important;gap:10px !important;
}
html body.ngen-cui #wc-stripe-express-checkout-element > .StripeElement{
    min-height:0 !important;height:auto !important;line-height:0 !important;
}
html body.ngen-cui #wc-stripe-express-checkout-element .__PrivateStripeElement{
    margin:0 !important;min-height:0 !important;
}
html body.ngen-cui #wc-stripe-express-checkout-element iframe{
    min-height:0 !important;height:48px !important;display:block !important;
}
/* the divider sits closer now that the band is gone */
html body.ngen-cui .cui-left > p:has(+ .cui-sec),
html body.ngen-cui #wc-stripe-express-checkout-element + p{
    margin:14px 0 !important;
}
/* A little air between the button rows — they were touching once the
   empty band was removed. */
html body.ngen-cui #wc-stripe-express-checkout-element{
    gap:12px !important;margin:8px 0 0 !important;
}
/* ============================================================
   the product picture in the order summary

   The name cell now holds a thumbnail beside the title. The row still
   lays out as label / amount, so only the inside of that first cell
   changes.
   ============================================================ */
html body.ngen-cui .cui-right .cui-item{
    display:flex !important;align-items:center !important;gap:12px !important;
    text-align:left !important;
}
html body.ngen-cui .cui-right .cui-item-media{
    flex:0 0 auto;display:block;width:52px;height:52px;
    border-radius:10px;overflow:hidden;
    background:rgba(255,255,255,.05);
    border:1px solid var(--cui-line);
}
html body.ngen-cui .cui-right .cui-item-media img,
html body.ngen-cui .cui-right img.cui-item-thumb{
    width:52px !important;height:52px !important;
    object-fit:cover !important;display:block !important;
    margin:0 !important;padding:0 !important;border:0 !important;
    border-radius:0 !important;max-width:none !important;
}
html body.ngen-cui .cui-right .cui-item-text{
    flex:1 1 auto;min-width:0;
    color:var(--cui-ink) !important;font-weight:500 !important;line-height:1.4 !important;
}
/* the quantity rides with the name */
html body.ngen-cui .cui-right .cui-item-text .product-quantity{
    display:inline !important;color:var(--cui-muted) !important;font-weight:400 !important;
}
/* the item row gets a little more room now that it carries a picture */
html body.ngen-cui .cui-right table.shop_table_in .cart_item > *{
    padding-top:15px !important;padding-bottom:15px !important;
}
html body.ngen-cui .cui-right table.shop_table_in .cart_item > *:last-child{
    vertical-align:middle !important;
}

@media(max-width:640px){
    html body.ngen-cui .cui-right .cui-item{gap:10px !important}
    html body.ngen-cui .cui-right .cui-item-media,
    html body.ngen-cui .cui-right .cui-item-media img,
    html body.ngen-cui .cui-right img.cui-item-thumb{
        width:44px !important;height:44px !important;
    }
}
/* The quantity is printed by a separate filter, so it lands after our
   wrapper rather than inside it. The name cell is laid out so the picture,
   the title and the quantity read as one line, and the amount sits level
   with them. */
html body.ngen-cui .cui-right table.shop_table_in .cart_item > .product-name{
    display:flex !important;align-items:center !important;
    flex-wrap:wrap !important;gap:0 6px !important;
}
html body.ngen-cui .cui-right .cui-item{
    flex:1 1 auto !important;min-width:0 !important;
}
html body.ngen-cui .cui-right table.shop_table_in .cart_item .product-quantity{
    flex:0 0 auto !important;
    color:var(--cui-muted) !important;font-weight:400 !important;
    margin-left:-4px !important;
}
html body.ngen-cui .cui-right table.shop_table_in .cart_item > *{
    vertical-align:middle !important;
    padding-top:14px !important;padding-bottom:14px !important;
}
/* On a phone the title wraps, and the quantity dropped below the picture.
   Keeping it inside the text column puts it back on the title's last line. */
@media(max-width:640px){
    html body.ngen-cui .cui-right table.shop_table_in .cart_item > .product-name{
        flex-wrap:nowrap !important;align-items:center !important;gap:10px !important;
    }
    html body.ngen-cui .cui-right .cui-item{gap:10px !important}
    html body.ngen-cui .cui-right .cui-item-text{
        display:inline !important;
    }
    html body.ngen-cui .cui-right table.shop_table_in .cart_item .product-quantity{
        margin-left:0 !important;white-space:nowrap !important;
    }
    /* the picture, the wrapping title and the quantity share one block */
    html body.ngen-cui .cui-right .cui-item{
        display:flex !important;align-items:center !important;
    }
}
/* The title needs the room; only the quantity must not break. Letting the
   name cell wrap again, while the text column keeps its width, puts the
   title on one or two comfortable lines with the quantity beside it. */
@media(max-width:640px){
    html body.ngen-cui .cui-right table.shop_table_in .cart_item > .product-name{
        flex-wrap:wrap !important;gap:0 8px !important;
    }
    html body.ngen-cui .cui-right .cui-item{
        flex:1 1 100% !important;min-width:0 !important;
    }
    html body.ngen-cui .cui-right .cui-item-text{
        display:block !important;flex:1 1 auto !important;min-width:0 !important;
    }
    html body.ngen-cui .cui-right table.shop_table_in .cart_item .product-quantity{
        flex:0 0 auto !important;margin:2px 0 0 62px !important;
    }
}
/* ============================================================
   the shipping choices

   These were the browser's own radio buttons, drawn for a light page: on
   this background the dot barely showed, and hovering turned the circle
   dark so the selected option became impossible to read. They are drawn
   here instead — a ring that fills with the accent colour when chosen,
   and the whole row lights up so it is clear what is picked.
   ============================================================ */
html body.ngen-cui .cui-right #shipping_method li{
    position:relative !important;
    padding:9px 11px !important;margin:0 0 6px !important;
    border-radius:10px !important;
    border:1px solid transparent !important;
    transition:background .16s ease,border-color .16s ease !important;
}
html body.ngen-cui .cui-right #shipping_method li:hover{
    background:rgba(255,255,255,.05) !important;
    border-color:var(--cui-line) !important;
}
/* the chosen row */
html body.ngen-cui .cui-right #shipping_method li:has(input:checked){
    background:rgba(125,185,232,.11) !important;
    border-color:rgba(125,185,232,.4) !important;
}

/* the button itself, drawn rather than left to the browser */
html body.ngen-cui .cui-right #shipping_method input[type=radio]{
    -webkit-appearance:none !important;appearance:none !important;
    flex:0 0 auto !important;
    width:18px !important;height:18px !important;margin:0 !important;
    border:2px solid rgba(255,255,255,.34) !important;
    border-radius:50% !important;
    background:transparent !important;
    cursor:pointer !important;
    transition:border-color .16s ease,box-shadow .16s ease !important;
    position:relative !important;
}
html body.ngen-cui .cui-right #shipping_method input[type=radio]:hover{
    border-color:var(--cui-blue) !important;
    background:transparent !important;
}
html body.ngen-cui .cui-right #shipping_method input[type=radio]:checked{
    border-color:var(--cui-blue) !important;
    background:transparent !important;
}
/* the dot in the middle when it is the one chosen */
html body.ngen-cui .cui-right #shipping_method input[type=radio]::before{
    content:"" !important;position:absolute !important;
    top:50% !important;left:50% !important;
    width:9px !important;height:9px !important;
    border-radius:50% !important;
    background:var(--cui-blue) !important;
    transform:translate(-50%,-50%) scale(0) !important;
    transition:transform .15s ease !important;
}
html body.ngen-cui .cui-right #shipping_method input[type=radio]:checked::before{
    transform:translate(-50%,-50%) scale(1) !important;
}
html body.ngen-cui .cui-right #shipping_method input[type=radio]:focus-visible{
    outline:none !important;
    box-shadow:0 0 0 3px rgba(125,185,232,.28) !important;
}

/* the label of the chosen row reads a little stronger */
html body.ngen-cui .cui-right #shipping_method li:has(input:checked) label,
html body.ngen-cui .cui-right #shipping_method li:has(input:checked) .woocommerce-Price-amount,
html body.ngen-cui .cui-right #shipping_method li:has(input:checked) .woocommerce-Price-amount bdi{
    color:#fff !important;
}
html body.ngen-cui .cui-right #shipping_method label{cursor:pointer !important}

/* ---- if :has() is not available, the row still reads correctly ---- */
@supports not selector(:has(*)){
    html body.ngen-cui .cui-right #shipping_method li{
        background:transparent !important;border-color:transparent !important;
    }
}
/* The theme draws its own 16px box on every shipping label and indents the
   text to clear it. The real radio is drawn above, so that extra graphic is
   removed and the label sits flush against it. */
html body.ngen-cui .cui-right #shipping_method label::before,
html body.ngen-cui .cui-right #shipping_method label::after{
    content:none !important;display:none !important;
}
html body.ngen-cui .cui-right #shipping_method label{
    padding-left:0 !important;text-indent:0 !important;position:static !important;
}
/* The radio belongs at the start of its row, before the service name. An
   earlier rule let the label take the whole row and pushed the button past
   it, so the order is stated plainly here. */
html body.ngen-cui .cui-right #shipping_method li{
    display:flex !important;flex-direction:row !important;
    align-items:center !important;justify-content:flex-start !important;
    gap:10px !important;
}
html body.ngen-cui .cui-right #shipping_method input[type=radio]{
    order:0 !important;
}
html body.ngen-cui .cui-right #shipping_method label{
    order:1 !important;flex:1 1 auto !important;
    display:flex !important;align-items:baseline !important;
    justify-content:space-between !important;gap:12px !important;
}
/* ============================================================
   the updating state

   While the totals are recalculated WooCommerce lays a blockUI overlay
   over the summary, but the element that would carry a message is left at
   zero size, so the panel simply dimmed with nothing to say it was
   working — it read as a page that had frozen.

   The overlay is given a spinner of its own. It is drawn on the overlay
   that actually has a size, so it appears wherever WooCommerce blocks:
   the summary, the payment block, or the whole form.
   ============================================================ */
html body.ngen-cui .blockUI.blockOverlay{
    background:rgba(13,16,23,.62) !important;
    opacity:1 !important;
    backdrop-filter:blur(1.5px);
    -webkit-backdrop-filter:blur(1.5px);
    cursor:progress !important;
    border-radius:16px;
}
/* the ring */
html body.ngen-cui .blockUI.blockOverlay::after{
    content:"" !important;
    position:absolute !important;top:50% !important;left:50% !important;
    width:34px !important;height:34px !important;margin:-17px 0 0 -17px !important;
    border-radius:50% !important;
    border:3px solid rgba(255,255,255,.16) !important;
    border-top-color:var(--cui-blue) !important;
    border-right-color:var(--cui-pink) !important;
    animation:cui-spin .7s linear infinite !important;
    box-shadow:0 0 18px rgba(125,185,232,.25) !important;
    display:block !important;
}
@keyframes cui-spin{to{transform:rotate(360deg)}}

/* the summary is sticky, so the spinner is centred on the part in view */
html body.ngen-cui .cui-order .blockUI.blockOverlay::after{
    position:fixed !important;top:auto !important;left:auto !important;
}
html body.ngen-cui .cui-right .blockUI.blockOverlay{
    position:absolute !important;
}

/* WooCommerce hides the message element; nothing there needs showing */
html body.ngen-cui .blockUI.blockMsg{display:none !important}

/* a gentle hint that the figures are being refreshed */
html body.ngen-cui .cui-order.cui-busy .cui-order-title::after{
    content:"updating…";
    display:block;margin-top:4px;
    font-size:11.5px;font-weight:500;letter-spacing:.3px;
    color:var(--cui-muted);
    animation:cui-pulse 1.1s ease-in-out infinite;
}
@keyframes cui-pulse{0%,100%{opacity:.45}50%{opacity:1}}

@media(prefers-reduced-motion:reduce){
    html body.ngen-cui .blockUI.blockOverlay::after{animation-duration:2.4s !important}
    html body.ngen-cui .cui-order.cui-busy .cui-order-title::after{animation:none}
}
/* The spinner belongs in the middle of whatever is being blocked. An
   earlier attempt switched it to fixed positioning to follow the sticky
   panel, which dropped it into the corner instead — the overlay is already
   positioned, so centring on it is enough. */
html body.ngen-cui .cui-order .blockUI.blockOverlay::after,
html body.ngen-cui .cui-right .blockUI.blockOverlay::after,
html body.ngen-cui .blockUI.blockOverlay::after{
    position:absolute !important;
    top:50% !important;left:50% !important;
    right:auto !important;bottom:auto !important;
    margin:-17px 0 0 -17px !important;
}
/* the overlay must be the box the spinner centres on */
html body.ngen-cui .blockUI.blockOverlay{
    position:absolute !important;
    top:0 !important;left:0 !important;width:100% !important;height:100% !important;
}
/* ============================================================
   validation errors

   When the checkout is rejected WooCommerce puts its notice inside the
   form, as the first child. The form is a two-column grid, so that notice
   took the first cell and pushed the fields into the right-hand column
   and the summary underneath — the layout appeared to fall apart the
   moment a ZIP was wrong.

   The notice is given a row of its own across the full width, and the two
   columns are pinned to the cells they belong in so nothing can reorder
   them again.
   ============================================================ */
html body.ngen-cui .cui-form > .woocommerce-NoticeGroup,
html body.ngen-cui .cui-form > .woocommerce-error,
html body.ngen-cui .cui-form > .woocommerce-message,
html body.ngen-cui .cui-form > .woocommerce-info,
html body.ngen-cui .cui-form > ul.woocommerce-error{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
    margin:0 0 4px !important;
}
/* the columns keep their places whatever else lands in the form */
html body.ngen-cui .cui-form > .cui-left{
    grid-column:1 !important;grid-row:2 !important;
}
html body.ngen-cui .cui-form > .cui-right{
    grid-column:2 !important;grid-row:2 !important;
}
@media(max-width:940px){
    html body.ngen-cui .cui-form > .cui-left{grid-column:1 !important;grid-row:2 !important}
    html body.ngen-cui .cui-form > .cui-right{grid-column:1 !important;grid-row:3 !important}
    html body.ngen-cui .cui-form > .woocommerce-NoticeGroup,
    html body.ngen-cui .cui-form > .woocommerce-error,
    html body.ngen-cui .cui-form > .woocommerce-message,
    html body.ngen-cui .cui-form > .woocommerce-info,
    html body.ngen-cui .cui-form > ul.woocommerce-error{grid-column:1 !important}
}

/* ---------- how the message reads ---------- */
html body.ngen-cui .woocommerce-NoticeGroup .woocommerce-error,
html body.ngen-cui .cui-notices .woocommerce-error,
html body.ngen-cui ul.woocommerce-error{
    list-style:none !important;
    margin:0 !important;padding:15px 18px !important;
    background:rgba(224,86,86,.12) !important;
    border:1px solid rgba(224,86,86,.42) !important;
    border-radius:12px !important;
    color:#ffc9c9 !important;font-size:14px !important;
}
html body.ngen-cui .woocommerce-NoticeGroup .woocommerce-error li,
html body.ngen-cui .cui-notices .woocommerce-error li,
html body.ngen-cui ul.woocommerce-error li{
    list-style:none !important;margin:0 !important;padding:3px 0 !important;
    color:#ffc9c9 !important;background:transparent !important;border:0 !important;
}
html body.ngen-cui .woocommerce-error a,
html body.ngen-cui .woocommerce-error strong{color:#fff !important}
html body.ngen-cui .woocommerce-error::before,
html body.ngen-cui .woocommerce-error li::before{display:none !important;content:none !important}

/* the field that was rejected */
html body.ngen-cui .cui-row .woocommerce-invalid input,
html body.ngen-cui .cui-row .woocommerce-invalid select,
html body.ngen-cui .cui-fields .woocommerce-invalid input,
html body.ngen-cui .cui-fields .woocommerce-invalid .select2-selection{
    border-color:rgba(224,86,86,.7) !important;
    box-shadow:0 0 0 3px rgba(224,86,86,.13) !important;
}
/* When no rate can be quoted WooCommerce puts a long sentence in the
   shipment cell. The label and that sentence were sharing one line and
   running into each other, so that row stacks instead. */
html body.ngen-cui .cui-right table.shop_table_in .woocommerce-shipping-totals:has(.woocommerce-error),
html body.ngen-cui .cui-right table.shop_table_in .woocommerce-shipping-totals:has(p){
    display:block !important;
}
html body.ngen-cui .cui-right table.shop_table_in .woocommerce-shipping-totals > td{
    display:block !important;width:100% !important;
    text-align:left !important;white-space:normal !important;
    min-width:0 !important;
}
html body.ngen-cui .cui-right table.shop_table_in .woocommerce-shipping-totals > th{
    display:block !important;width:100% !important;
    margin-bottom:6px !important;
}
/* the "no shipping available" sentence reads as a quiet note, not a total */
html body.ngen-cui .cui-right .woocommerce-shipping-totals td p,
html body.ngen-cui .cui-right .woocommerce-shipping-totals td .woocommerce-error,
html body.ngen-cui .cui-right .woocommerce-shipping-totals td > *:not(#shipping_method){
    margin:0 !important;padding:0 !important;
    background:transparent !important;border:0 !important;
    color:var(--cui-muted) !important;
    font-size:12.5px !important;font-weight:400 !important;line-height:1.5 !important;
    white-space:normal !important;
}
/* The "no shipping options" sentence is long, and an earlier rule kept its
   row as a flex pair: the label was squeezed to a few pixels while the
   sentence ran past the card. When that message is present the row stacks
   — label on one line, the note underneath. */
html body.ngen-cui .cui-right table.shop_table_in
    .woocommerce-shipping-totals:has(.woocommerce-no-shipping-available-html),
html body.ngen-cui .cui-right table.shop_table_in
    .woocommerce-shipping-totals:has(.woocommerce-shipping-may-be-available-html){
    display:block !important;
}
html body.ngen-cui .cui-right table.shop_table_in
    .woocommerce-shipping-totals:has(.woocommerce-no-shipping-available-html) > *,
html body.ngen-cui .cui-right table.shop_table_in
    .woocommerce-shipping-totals:has(.woocommerce-shipping-may-be-available-html) > *{
    display:block !important;width:100% !important;
    text-align:left !important;white-space:normal !important;
    min-width:0 !important;padding-right:0 !important;
}
html body.ngen-cui .cui-right table.shop_table_in
    .woocommerce-shipping-totals:has(.woocommerce-no-shipping-available-html) > *:first-child,
html body.ngen-cui .cui-right table.shop_table_in
    .woocommerce-shipping-totals:has(.woocommerce-shipping-may-be-available-html) > *:first-child{
    margin-bottom:6px !important;
}
html body.ngen-cui .cui-right .woocommerce-no-shipping-available-html,
html body.ngen-cui .cui-right .woocommerce-shipping-may-be-available-html{
    display:block !important;
    color:var(--cui-muted) !important;
    font-size:12.5px !important;font-weight:400 !important;line-height:1.5 !important;
    white-space:normal !important;
}
/* Once real rates are back the row is a label / list pair again, so the
   stacking above must not leak into it. */
html body.ngen-cui .cui-right table.shop_table_in .woocommerce-shipping-totals:has(#shipping_method){
    display:flex !important;align-items:flex-start !important;
    justify-content:space-between !important;gap:16px !important;
}
html body.ngen-cui .cui-right table.shop_table_in
    .woocommerce-shipping-totals:has(#shipping_method) > *:first-child{
    display:block !important;width:auto !important;flex:0 0 auto !important;
    white-space:nowrap !important;margin-bottom:0 !important;padding-right:14px !important;
}
html body.ngen-cui .cui-right table.shop_table_in
    .woocommerce-shipping-totals:has(#shipping_method) > *:last-child{
    display:block !important;width:auto !important;flex:1 1 auto !important;
    text-align:left !important;
}
/* ============================================================
   "Please log in"

   WooCommerce prints a plain login form on the checkout and reveals it
   when that link is clicked. On this page it lands outside the layout and
   looks nothing like the rest of the checkout, and the site already has a
   sign-in dialog. The link opens that dialog instead, so this form is
   kept out of the way.
   ============================================================ */
html body.ngen-cui .cui-page > form.woocommerce-form-login,
html body.ngen-cui .cui-page > .woocommerce-form-login{
    display:none !important;
}

/* the link reads as something to press */
html body.ngen-cui .woocommerce-error a.showlogin,
html body.ngen-cui .woocommerce-message a.showlogin,
html body.ngen-cui a.showlogin{
    display:inline-block !important;
    margin-left:6px !important;padding:3px 12px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.14) !important;
    border:1px solid rgba(255,255,255,.28) !important;
    color:#fff !important;text-decoration:none !important;
    font-size:13px !important;font-weight:600 !important;
    cursor:pointer !important;
    transition:background .16s ease,border-color .16s ease !important;
}
html body.ngen-cui a.showlogin:hover{
    background:rgba(255,255,255,.22) !important;
    border-color:rgba(255,255,255,.45) !important;
}
/* ============================================================
   the express buttons, sized by Stripe rather than by us

   An earlier rule pinned every express iframe to exactly 48px to remove
   the empty band Stripe leaves under each button. That worked for the
   three buttons as they are drawn today, but it also means a button
   Stripe decides to draw taller — a wallet with a second line, say —
   would be cut off.

   The band is gone either way: it came from a min-height on the frame,
   not from its real height. Clearing the minimum and capping the frame
   instead lets each button keep the height Stripe gives it.
   ============================================================ */
html body.ngen-cui #wc-stripe-express-checkout-element iframe{
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
    display:block !important;
}
html body.ngen-cui #wc-stripe-express-checkout-element > .StripeElement{
    min-height:0 !important;height:auto !important;
    overflow:visible !important;
}
html body.ngen-cui #wc-stripe-express-checkout-element .__PrivateStripeElement{
    min-height:0 !important;height:auto !important;margin:0 !important;
}
/* height:auto brought the empty band back — Stripe's frame reports 142px
   while the button inside it is 48. The frame is pinned to the button's
   height again, but with room to grow if Stripe ever draws a taller one,
   so nothing can be cut off. */
html body.ngen-cui #wc-stripe-express-checkout-element iframe{
    min-height:0 !important;
    height:48px !important;
    max-height:none !important;
    display:block !important;
}
html body.ngen-cui #wc-stripe-express-checkout-element > .StripeElement{
    min-height:0 !important;height:auto !important;
    max-height:none !important;overflow:visible !important;
}
/* ============================================================
   the blank band inside the payment box

   Stripe keeps a hidden input in the payment form to read the page's own
   font and colour from. It is meant to take no room, but our field styling
   gave every input a height and a margin, so it reserved a 52px band of
   empty white above the card panel. It is measured, never seen, so it is
   taken out of the layout without touching anything Stripe reads from it.
   ============================================================ */
html body.ngen-cui #wc-stripe-hidden-style-input,
html body.ngen-cui input#wc-stripe-hidden-style-input{
    position:absolute !important;
    height:0 !important;min-height:0 !important;
    padding:0 !important;margin:0 !important;border:0 !important;
    opacity:0 !important;pointer-events:none !important;
}

/* Stripe leaves the currency box empty when the buyer is already in the
   store's currency — a US visitor seeing prices in USD. An empty box must
   not hold its top margin open. */
html body.ngen-cui #wc-stripe-currency-selector:empty{
    display:none !important;margin:0 !important;
}
/* ============================================================
   a taken email, answered in the form

   The message sits under the email field and reads as a field error, with
   the one action it offers — logging in — set inside the sentence rather
   than as a separate button.
   ============================================================ */
html body.ngen-cui .ngen-ec-email-taken{
    display:block !important;
    margin:-4px 0 14px !important;
    padding:11px 14px !important;
    background:rgba(232,147,140,.10) !important;
    border:1px solid rgba(232,147,140,.32) !important;
    border-left-width:3px !important;
    border-radius:10px !important;
    color:#f0b5b0 !important;
    font-size:13.5px !important;line-height:1.55 !important;
}
html body.ngen-cui .ngen-ec-email-taken .ngen-ec-inline-login{
    display:inline !important;
    padding:0 !important;margin:0 !important;
    background:none !important;border:0 !important;
    color:#ffd9d5 !important;
    font:inherit !important;font-weight:700 !important;
    text-decoration:underline !important;
    text-underline-offset:2px !important;
    cursor:pointer !important;
    width:auto !important;min-width:0 !important;height:auto !important;
    box-shadow:none !important;
}
html body.ngen-cui .ngen-ec-email-taken .ngen-ec-inline-login:hover{
    color:#fff !important;
}
html body.ngen-cui .ngen-ec-email-taken .ngen-ec-inline-login:focus-visible{
    outline:2px solid rgba(232,147,140,.6) !important;outline-offset:2px !important;
}

/* the field itself is marked, the way a rejected field is */
html body.ngen-cui input#billing_email.ngen-ec-invalid{
    border-color:rgba(232,147,140,.65) !important;
    box-shadow:0 0 0 3px rgba(232,147,140,.13) !important;
}
/* the message sits inside the email field's own cell, so it needs no
   negative pull of its own */
html body.ngen-cui .ngen-ec-email-taken{
    margin:8px 0 0 !important;
}