/* =========================================================================
   ViewsStream — WooCommerce checkout and cart.

   Loaded only on is_checkout() / is_cart() (see vs_woo_assets() in
   inc/woo.php). Every selector carries a body-class prefix so it out-ranks
   WooCommerce's own `.woocommerce form .form-row .input-text` family — which
   is (0,3,1) — without a wall of !important. Nothing here touches a core or
   plugin file; this is presentation over WooCommerce's native markup.
   ====================================================================== */

/* -------------------------------------------------------------------------
   1. Page frame
   A checkout is a room with one door. The marketing chrome steps aside.
   ---------------------------------------------------------------------- */

body.woocommerce-checkout .vs-main,
body.woocommerce-cart .vs-main { background: var( --vs-bg ); }

body.woocommerce-checkout .woocommerce,
body.woocommerce-cart .woocommerce {
    width: min( 100% - 48px, 1120px );
    margin-inline: auto;
    padding-block: 40px 96px;
}

/* No breadcrumb trail and no primary navigation: the only route out of a
   checkout should be the logo or the back button. */
body.woocommerce-checkout .vs-crumbs-bar,
body.woocommerce-checkout #masthead nav,
body.woocommerce-checkout .hfe-nav-menu__toggle,
body.woocommerce-checkout .hfe-nav-menu-icon,
body.woocommerce-checkout .elementor-widget-navigation-menu { display: none; }

body.woocommerce-checkout .vs-main > .vs-crumbs-bar:first-child { padding-top: 0; }

/* The header keeps the mark and nothing else. The "Get started" call to
   action asks for the thing the visitor is already doing. */
body.woocommerce-checkout header .elementor-widget-button { display: none; }

/* A 1,000px marketing footer under a payment form is somewhere to wander off
   to. Support and the brand note stay; the link columns do not. Element ids
   are this theme's own footer template (post 744). */
body.woocommerce-checkout footer .elementor-element-26a0f5b,
body.woocommerce-checkout footer .elementor-element-935b5de { display: none; }

body.woocommerce-checkout footer .elementor-element-8cff013 {
    padding-block: 44px 36px;
}

/* Elementor only prints a widget's stylesheet on pages that use that widget,
   and the checkout is built by a shortcode — so widget-heading.css never
   loads here and the brand mark in the header falls back to the parent
   theme's reset, which colours every bare <a> #c36. */
body.woocommerce-checkout .elementor-heading-title > a,
body.woocommerce-cart .elementor-heading-title > a { color: inherit; }

/* The floating support bubble is anchored bottom-right, where it lands on
   the phone field and on the order button. Help moves into the payment card
   instead (vs_checkout_help), in context and out of the way. */
body.woocommerce-checkout .vs-wa-float { display: none; }

.vs-cohelp {
    margin: 16px 0 0;
    color: rgba( 244, 239, 229, 0.56 );
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}

.vs-cohelp a { text-decoration: underline; text-underline-offset: 2px; }

/* The entry title duplicates the secure-checkout strip beneath it. */
body.woocommerce-checkout .entry-title,
body.woocommerce-checkout .page-header { display: none; }

/* -------------------------------------------------------------------------
   2. Secure-checkout strip  (vs_checkout_header)
   ---------------------------------------------------------------------- */

.vs-cohead {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 28px;
}

.vs-cohead__secure {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 10px 18px;
    border: 1px solid rgba( 216, 180, 120, 0.18 );
    border-radius: 999px;
    background: rgba( 216, 180, 120, 0.05 );
    color: rgba( 244, 239, 229, 0.74 );
    font-size: 13px;
    line-height: 1.45;
    letter-spacing: 0.005em;
    text-align: left;
}

.vs-cohead__lock {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    color: var( --vs-accent );
}

/* -------------------------------------------------------------------------
   3. Notices — WooCommerce ships them in blue, green and red on white.
   ---------------------------------------------------------------------- */

body.woocommerce-checkout .woocommerce-notices-wrapper:empty { display: none; }

body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-error {
    margin: 0 0 20px;
    padding: 15px 20px 15px 46px;
    border: 1px solid rgba( 244, 239, 229, 0.10 );
    border-top: 1px solid rgba( 244, 239, 229, 0.10 );
    border-radius: 12px;
    background: rgba( 244, 239, 229, 0.03 );
    color: var( --vs-ink );
    font-size: 14.5px;
    line-height: 1.55;
    list-style: none;
}

body.woocommerce-checkout .woocommerce-message::before,
body.woocommerce-checkout .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-error::before,
body.woocommerce-cart .woocommerce-message::before,
body.woocommerce-cart .woocommerce-info::before,
body.woocommerce-cart .woocommerce-error::before {
    top: 15px;
    left: 20px;
    color: var( --vs-accent );
    font-size: 15px;
}

body.woocommerce-checkout .woocommerce-error,
body.woocommerce-cart .woocommerce-error {
    border-color: rgba( 224, 107, 90, 0.38 );
    background: rgba( 224, 107, 90, 0.07 );
}

body.woocommerce-checkout .woocommerce-error::before,
body.woocommerce-cart .woocommerce-error::before { color: #e8897a; }

body.woocommerce-checkout .woocommerce-error li { margin: 0 0 4px; }
body.woocommerce-checkout .woocommerce-error li:last-child { margin-bottom: 0; }

/* WooCommerce links are magenta out of the box. */
body.woocommerce-checkout .woocommerce a,
body.woocommerce-cart .woocommerce a { color: var( --vs-accent-hi ); }

body.woocommerce-checkout .woocommerce a:hover,
body.woocommerce-cart .woocommerce a:hover { color: var( --vs-accent ); }

/* -------------------------------------------------------------------------
   4. Coupon disclosure
   WooCommerce prints it above the form, outside <form class="checkout">.
   It stays there — a form cannot be nested inside another — but it reads as
   a quiet line rather than a blue banner competing with the fields.
   ---------------------------------------------------------------------- */

body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
    display: block;
    text-align: right;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    background: none;
    color: rgba( 244, 239, 229, 0.52 );
    font-size: 13.5px;
}

body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before { content: none; }

/* The toggle is a standalone control, not a link inside a sentence, so it
   earns a 44px target. The negative margin keeps the row where it was. */
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
    display: inline-block;
    padding: 13px 0;
    margin: -13px 0;
}

body.woocommerce-checkout .checkout_coupon {
    margin: 0 0 24px;
    padding: 20px 22px;
    border: 1px solid rgba( 244, 239, 229, 0.10 );
    border-radius: 14px;
    background: rgba( 244, 239, 229, 0.025 );
}

body.woocommerce-checkout .checkout_coupon > p:not( .form-row ) {
    margin-top: 0;
    color: rgba( 244, 239, 229, 0.62 );
    font-size: 13.5px;
}

body.woocommerce-checkout .checkout_coupon .form-row { margin-bottom: 0; }
body.woocommerce-checkout .checkout_coupon .clear { display: none; }

/* WooCommerce answers a bad code inline, in 10px #a00 — invisible on this
   background. */
body.woocommerce-checkout .coupon-error-notice {
    display: block;
    margin-top: 8px;
    color: #e8897a;
    font-size: 13px;
    line-height: 1.5;
}

body.woocommerce-checkout .checkout_coupon input.input-text.has-error {
    border-color: rgba( 224, 107, 90, 0.72 );
    background: rgba( 224, 107, 90, 0.06 );
}

/* -------------------------------------------------------------------------
   5. The two-column frame
   #customer_details on the left; the heading, the summary, a payment label
   and the payment box stack down the right. vs_split_order_review() moves
   the payment box out of #order_review so the summary alone can lead on
   small screens without dragging the pay button to the top with it.
   ---------------------------------------------------------------------- */

@media ( min-width: 981px ) {

    body.woocommerce-checkout form.checkout {
        display: grid;
        grid-template-columns: minmax( 0, 1fr ) 400px;
        grid-template-rows: auto auto auto auto 1fr;
        column-gap: 56px;
    }

    /* WooCommerce prepends the validation summary to the form after a failed
       submit. Without a place of its own it is auto-flowed past every
       explicitly positioned item and ends up below the fold. */
    body.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    body.woocommerce-checkout form.checkout > #customer_details {
        grid-column: 1;
        grid-row: 2 / span 4;
    }

    body.woocommerce-checkout form.checkout > #order_review_heading { grid-column: 2; grid-row: 2; }
    body.woocommerce-checkout form.checkout > #order_review         { grid-column: 2; grid-row: 3; }
    body.woocommerce-checkout form.checkout > .vs-payhead           { grid-column: 2; grid-row: 4; }

    body.woocommerce-checkout form.checkout > .woocommerce-checkout-payment {
        grid-column: 2;
        grid-row: 5;
        align-self: start;
    }
}

body.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup { margin-bottom: 28px; }

/* Below the desktop breakpoint the order flips: what you are buying, then
   who you are, then how it is paid for. */
@media ( max-width: 980px ) {

    body.woocommerce-checkout form.checkout {
        display: flex;
        flex-direction: column;
    }

    body.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup       { order: 0; }
    body.woocommerce-checkout form.checkout > #order_review_heading          { order: 1; }
    body.woocommerce-checkout form.checkout > #order_review                  { order: 2; }
    body.woocommerce-checkout form.checkout > #customer_details              { order: 3; }
    body.woocommerce-checkout form.checkout > .vs-payhead                    { order: 4; }
    body.woocommerce-checkout form.checkout > .woocommerce-checkout-payment  { order: 5; }
}

/* -------------------------------------------------------------------------
   6. Section headings
   ---------------------------------------------------------------------- */

body.woocommerce-checkout .woocommerce h3,
body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout .vs-payhead {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    color: var( --vs-ink );
    font-family: "Bricolage Grotesque", Georgia, serif;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

body.woocommerce-checkout form.checkout > .vs-payhead { margin-top: 30px; }

body.woocommerce-checkout #customer_details .col-2 h3 { margin-top: 38px; }

/* WooCommerce floats #customer_details as a two-up set — billing on the left,
   "additional information" on the right — which halves every field inside it.
   One column of full-width fields reads better and leaves the second screen
   column free for the summary. */
body.woocommerce-checkout #customer_details.col2-set { display: block; }

body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2 {
    float: none !important;
    width: 100% !important;
    max-width: none;
}

/* -------------------------------------------------------------------------
   7. Field rows
   WooCommerce floats .form-row-first / .form-row-last at 47%. Inside a grid
   that collapses them to a sliver, so the float comes off and the columns
   are assigned explicitly by field id — order-proof, since the locale can
   reorder country and phone.
   ---------------------------------------------------------------------- */

body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
}

body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper > .form-row {
    float: none !important;
    width: auto !important;
    margin: 0 0 20px;
    padding: 0;
    grid-column: 1 / -1;
}

body.woocommerce-checkout #billing_first_name_field { order: 1; grid-column: 1; }
body.woocommerce-checkout #billing_last_name_field  { order: 2; grid-column: 2; }
body.woocommerce-checkout #billing_email_field      { order: 3; grid-column: 1 / -1; }
body.woocommerce-checkout #billing_country_field    { order: 4; grid-column: 1; }
body.woocommerce-checkout #billing_phone_field      { order: 5; grid-column: 2; }
body.woocommerce-checkout #vs_device_field          { order: 6; grid-column: 1 / -1; }
body.woocommerce-checkout #order_comments_field     { order: 7; grid-column: 1 / -1; }

body.woocommerce-checkout .woocommerce-billing-fields h3 { margin-bottom: 20px; }

/* Labels large enough to read, with the required mark carrying the accent. */
body.woocommerce-checkout .woocommerce form .form-row label,
body.woocommerce-checkout .woocommerce .form-row label,
body.woocommerce-checkout .form-row label {
    display: block;
    margin: 0 0 8px;
    color: rgba( 244, 239, 229, 0.80 );
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1.4;
}

body.woocommerce-checkout .form-row label .required,
body.woocommerce-checkout .form-row label abbr.required {
    border: 0;
    color: var( --vs-accent );
    text-decoration: none;
}

/* WooCommerce hides field descriptions and reveals them on focus. They are
   more use read before the field than after it. */
body.woocommerce-checkout .woocommerce form .form-row span.description,
body.woocommerce-checkout .woocommerce .form-row span.description,
body.woocommerce-checkout .form-row .description,
body.woocommerce-checkout .form-row span.description {
    display: block;
    margin: 7px 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: rgba( 244, 239, 229, 0.58 );
    font-size: 13px;
    line-height: 1.5;
}

body.woocommerce-checkout .form-row .description::before { content: none; }

/* -------------------------------------------------------------------------
   8. Inputs
   ---------------------------------------------------------------------- */

body.woocommerce-checkout .woocommerce form .form-row input.input-text,
body.woocommerce-checkout .woocommerce form .form-row textarea,
body.woocommerce-checkout .woocommerce form .form-row select,
body.woocommerce-checkout .form-row input.input-text,
body.woocommerce-checkout .form-row textarea,
body.woocommerce-checkout .form-row select,
body.woocommerce-cart .woocommerce form .form-row input.input-text {
    box-sizing: border-box;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid rgba( 244, 239, 229, 0.14 );
    border-radius: 11px;
    background: rgba( 244, 239, 229, 0.04 );
    box-shadow: none;
    color: var( --vs-ink );
    font-family: Manrope, system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    transition: border-color 0.2s var( --vs-ease ),
                background-color 0.2s var( --vs-ease ),
                box-shadow 0.2s var( --vs-ease );
}

body.woocommerce-checkout .woocommerce form .form-row textarea,
body.woocommerce-checkout .form-row textarea {
    min-height: 104px;
    resize: vertical;
}

body.woocommerce-checkout .form-row input.input-text::placeholder,
body.woocommerce-checkout .form-row textarea::placeholder {
    color: rgba( 244, 239, 229, 0.34 );
    opacity: 1;
}

body.woocommerce-checkout .woocommerce form .form-row input.input-text:hover,
body.woocommerce-checkout .woocommerce form .form-row textarea:hover,
body.woocommerce-checkout .woocommerce form .form-row select:hover {
    border-color: rgba( 244, 239, 229, 0.24 );
}

body.woocommerce-checkout .woocommerce form .form-row input.input-text:focus,
body.woocommerce-checkout .woocommerce form .form-row textarea:focus,
body.woocommerce-checkout .woocommerce form .form-row select:focus,
body.woocommerce-checkout .form-row input.input-text:focus,
body.woocommerce-checkout .form-row textarea:focus,
body.woocommerce-checkout .form-row select:focus {
    border-color: var( --vs-accent );
    background: rgba( 244, 239, 229, 0.06 );
    box-shadow: 0 0 0 3px rgba( 216, 180, 120, 0.20 );
    outline: none;
}

/* A native select still needs its arrow back once the chrome is removed. */
body.woocommerce-checkout .woocommerce form .form-row select,
body.woocommerce-checkout .form-row select {
    appearance: none;
    padding-right: 44px;
    background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%239A9287' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
    background-repeat: no-repeat;
    background-position: right 17px center;
    cursor: pointer;
}

/* --- select2, which WooCommerce uses for the country field -------------- */

body.woocommerce-checkout .select2-container .select2-selection--single {
    height: 52px;
    border: 1px solid rgba( 244, 239, 229, 0.14 );
    border-radius: 11px;
    background: rgba( 244, 239, 229, 0.04 );
    outline: none;
    transition: border-color 0.2s var( --vs-ease ), box-shadow 0.2s var( --vs-ease );
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 44px 0 16px;
    color: var( --vs-ink );
    font-size: 16px;
    line-height: 50px;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 12px;
    width: 20px;
    height: 50px;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var( --vs-muted ) transparent transparent;
}

body.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single,
body.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var( --vs-accent );
    box-shadow: 0 0 0 3px rgba( 216, 180, 120, 0.20 );
}

/* The dropdown is appended to <body>, outside every scope above — but this
   sheet only ever loads on the checkout and the cart. */
.select2-dropdown {
    border: 1px solid rgba( 244, 239, 229, 0.16 );
    border-radius: 11px;
    background: var( --vs-elevated );
    box-shadow: 0 24px 60px rgba( 0, 0, 0, 0.55 );
    overflow: hidden;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    padding: 11px 13px;
    border: 1px solid rgba( 244, 239, 229, 0.14 );
    border-radius: 9px;
    background: rgba( 244, 239, 229, 0.04 );
    color: var( --vs-ink );
    font-size: 15px;
}

.select2-container--default .select2-search--dropdown { padding: 10px; }

.select2-container--default .select2-results__option {
    padding: 9px 14px;
    color: rgba( 244, 239, 229, 0.86 );
    font-size: 15px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background: rgba( 216, 180, 120, 0.16 );
    color: var( --vs-ink );
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
    background: rgba( 244, 239, 229, 0.06 );
    color: var( --vs-ink );
}

.select2-results__options { max-height: 260px; }

/* -------------------------------------------------------------------------
   9. Validation states — WooCommerce's own, restyled rather than replaced.
   ---------------------------------------------------------------------- */

body.woocommerce-checkout .woocommerce form .form-row.woocommerce-invalid input.input-text,
body.woocommerce-checkout .woocommerce form .form-row.woocommerce-invalid select,
body.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
body.woocommerce-checkout .form-row.woocommerce-invalid select {
    border-color: rgba( 224, 107, 90, 0.72 );
    background: rgba( 224, 107, 90, 0.06 );
}

body.woocommerce-checkout .form-row.woocommerce-invalid .select2-container .select2-selection--single {
    border-color: rgba( 224, 107, 90, 0.72 );
    background: rgba( 224, 107, 90, 0.06 );
}

body.woocommerce-checkout .woocommerce form .form-row.woocommerce-validated input.input-text,
body.woocommerce-checkout .form-row.woocommerce-validated input.input-text {
    border-color: rgba( 244, 239, 229, 0.20 );
}

/* -------------------------------------------------------------------------
   10. Order summary
   The figures are WooCommerce's; only their presentation is ours.
   ---------------------------------------------------------------------- */

body.woocommerce-checkout #order_review {
    padding: 26px 26px 8px;
    border: 1px solid rgba( 216, 180, 120, 0.16 );
    border-radius: 16px;
    background:
        linear-gradient( 180deg, rgba( 216, 180, 120, 0.055 ), rgba( 216, 180, 120, 0 ) 55% ),
        var( --vs-surface );
}

body.woocommerce-checkout #order_review table.shop_table {
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    border-collapse: collapse;
    background: none;
    color: var( --vs-ink );
    font-size: 15px;
}

body.woocommerce-checkout #order_review table.shop_table thead { display: none; }

body.woocommerce-checkout #order_review table.shop_table th,
body.woocommerce-checkout #order_review table.shop_table td {
    padding: 13px 0;
    border: 0;
    border-top: 1px solid rgba( 244, 239, 229, 0.08 );
    background: none;
    font-weight: 400;
    vertical-align: top;
}

body.woocommerce-checkout #order_review table.shop_table tbody tr:first-child th,
body.woocommerce-checkout #order_review table.shop_table tbody tr:first-child td { border-top: 0; padding-top: 0; }

body.woocommerce-checkout #order_review table.shop_table td,
body.woocommerce-checkout #order_review table.shop_table tfoot td { text-align: right; white-space: nowrap; }

body.woocommerce-checkout #order_review .product-name {
    padding-right: 16px;
    color: var( --vs-ink );
    line-height: 1.45;
    text-align: left;
}

body.woocommerce-checkout #order_review .product-quantity {
    display: inline;
    color: var( --vs-muted );
    font-weight: 400;
}

body.woocommerce-checkout #order_review .product-total { color: var( --vs-ink ); }

body.woocommerce-checkout #order_review tfoot th {
    color: rgba( 244, 239, 229, 0.64 );
    font-size: 14px;
    text-align: left;
}

body.woocommerce-checkout #order_review tfoot .cart-discount th,
body.woocommerce-checkout #order_review tfoot .cart-discount td { color: var( --vs-accent-hi ); }

/* "Remove" is 56×18 by default. The padding and the matching negative margin
   give it a 44px-tall target without moving the row. */
body.woocommerce-checkout #order_review tfoot .cart-discount a {
    display: inline-block;
    padding: 13px 8px;
    margin: -13px -8px;
    font-size: 12.5px;
}

body.woocommerce-checkout #order_review tfoot .order-total th,
body.woocommerce-checkout #order_review tfoot .order-total td {
    padding-top: 16px;
    padding-bottom: 20px;
    border-top: 1px solid rgba( 244, 239, 229, 0.14 );
}

body.woocommerce-checkout #order_review tfoot .order-total th {
    color: var( --vs-ink );
    font-family: "Bricolage Grotesque", Georgia, serif;
    font-size: 16px;
    font-weight: 600;
}

body.woocommerce-checkout #order_review tfoot .order-total td,
body.woocommerce-checkout #order_review tfoot .order-total .amount {
    color: var( --vs-accent-hi );
    font-family: "Bricolage Grotesque", Georgia, serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.015em;
}

/* -------------------------------------------------------------------------
   11. Payment
   ---------------------------------------------------------------------- */

body.woocommerce-checkout #payment,
body.woocommerce-checkout .woocommerce-checkout-payment {
    padding: 24px 26px;
    border: 1px solid rgba( 244, 239, 229, 0.10 );
    border-radius: 16px;
    background: var( --vs-surface );
}

body.woocommerce-checkout #payment ul.payment_methods,
body.woocommerce-checkout #payment ul.wc_payment_methods {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}

body.woocommerce-checkout #payment ul.payment_methods li {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.woocommerce-checkout #payment ul.payment_methods li + li { margin-top: 10px; }

body.woocommerce-checkout #payment ul.payment_methods label {
    display: inline-block;
    margin: 0;
    color: var( --vs-ink );
    font-size: 15.5px;
    font-weight: 500;
}

body.woocommerce-checkout #payment ul.payment_methods input.input-radio {
    width: auto;
    min-height: 0;
    margin: 0 10px 0 0;
    accent-color: var( --vs-accent );
}

body.woocommerce-checkout #payment div.payment_box {
    margin: 12px 0 0;
    padding: 14px 16px;
    border: 1px solid rgba( 244, 239, 229, 0.09 );
    border-radius: 11px;
    background: rgba( 244, 239, 229, 0.028 );
    color: rgba( 244, 239, 229, 0.70 );
    font-size: 13.5px;
    line-height: 1.6;
}

body.woocommerce-checkout #payment div.payment_box::before { content: none; }
body.woocommerce-checkout #payment div.payment_box p:last-child { margin-bottom: 0; }

body.woocommerce-checkout #payment .woocommerce-privacy-policy-text {
    margin: 16px 0 0;
    color: rgba( 244, 239, 229, 0.50 );
    font-size: 12.5px;
    line-height: 1.6;
}

body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper { margin-top: 14px; }

body.woocommerce-checkout #payment div.form-row.place-order {
    margin: 20px 0 0;
    padding: 0;
    border: 0;
    background: none;
}

/* --- the primary action ------------------------------------------------- */

body.woocommerce-checkout #payment #place_order,
body.woocommerce-checkout .woocommerce #payment #place_order {
    display: block;
    float: none;
    width: 100%;
    min-height: 56px;
    padding: 17px 24px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient( 180deg, var( --vs-accent-hi ), var( --vs-accent ) );
    box-shadow: 0 10px 26px rgba( 216, 180, 120, 0.18 );
    color: var( --vs-on-accent );
    font-family: Manrope, system-ui, sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.005em;
    line-height: 1.25;
    text-align: center;
    text-transform: none;
    cursor: pointer;
    transition: transform 0.2s var( --vs-ease ), box-shadow 0.2s var( --vs-ease );
}

body.woocommerce-checkout #payment #place_order:hover,
body.woocommerce-checkout .woocommerce #payment #place_order:hover {
    background: linear-gradient( 180deg, var( --vs-accent-hi ), var( --vs-accent-hi ) );
    box-shadow: 0 14px 32px rgba( 216, 180, 120, 0.26 );
    transform: translateY( -1px );
}

body.woocommerce-checkout #payment #place_order:focus-visible {
    outline: 2px solid var( --vs-accent-hi );
    outline-offset: 3px;
}

body.woocommerce-checkout #payment #place_order:active { transform: translateY( 0 ); }

/* -------------------------------------------------------------------------
   12. Busy state
   WooCommerce blocks the form with a white 60%-opacity sheet while totals
   recalculate or the order posts. On a dark page that reads as a fault.
   ---------------------------------------------------------------------- */

body.woocommerce-checkout .blockUI.blockOverlay {
    background: rgba( 10, 9, 8, 0.62 ) !important;
    opacity: 1 !important;
    border-radius: 16px;
}

body.woocommerce-checkout .blockUI.blockOverlay::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border: 2px solid rgba( 216, 180, 120, 0.28 );
    border-top-color: var( --vs-accent );
    border-radius: 50%;
    background: none;
    animation: vs-spin 0.7s linear infinite;
}

@keyframes vs-spin { to { transform: rotate( 360deg ); } }

body.woocommerce-checkout .processing #place_order { cursor: progress; }

/* -------------------------------------------------------------------------
   13. Empty checkout and cart
   ---------------------------------------------------------------------- */

body.woocommerce-checkout .vs-empty-cart {
    margin: 0 0 28px;
    padding: 22px 24px;
    border: 1px solid rgba( 244, 239, 229, 0.10 );
    border-radius: 14px;
    background: rgba( 244, 239, 229, 0.025 );
    color: rgba( 244, 239, 229, 0.78 );
    font-size: 15.5px;
}

body.woocommerce-cart .woocommerce table.shop_table,
body.woocommerce-cart .cart-collaterals .cart_totals > h2 { color: var( --vs-ink ); }

body.woocommerce-cart .woocommerce table.shop_table {
    border: 1px solid rgba( 244, 239, 229, 0.10 );
    border-radius: 14px;
    background: var( --vs-surface );
}

body.woocommerce-cart .woocommerce table.shop_table th,
body.woocommerce-cart .woocommerce table.shop_table td {
    border-top: 1px solid rgba( 244, 239, 229, 0.08 );
    color: var( --vs-ink );
}

body.woocommerce-cart .woocommerce .button,
body.woocommerce-cart .woocommerce a.button,
body.woocommerce-cart .woocommerce button.button {
    border-radius: 11px;
    background: var( --vs-accent );
    color: var( --vs-on-accent );
    font-weight: 600;
}

body.woocommerce-cart .woocommerce .button:hover,
body.woocommerce-cart .woocommerce a.button:hover,
body.woocommerce-cart .woocommerce button.button:hover {
    background: var( --vs-accent-hi );
    color: var( --vs-on-accent );
}

/* The coupon "Apply" sits beside its field rather than under it. */
body.woocommerce-checkout .checkout_coupon .form-row-first,
body.woocommerce-checkout .checkout_coupon .form-row-last { width: 100% !important; float: none !important; }

body.woocommerce-checkout .checkout_coupon button.button,
body.woocommerce-checkout .checkout_coupon input.button {
    min-height: 52px;
    padding: 0 24px;
    border: 1px solid rgba( 216, 180, 120, 0.42 );
    border-radius: 11px;
    background: transparent;
    color: var( --vs-accent-hi );
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s var( --vs-ease ), color 0.2s var( --vs-ease );
}

body.woocommerce-checkout .checkout_coupon button.button:hover,
body.woocommerce-checkout .checkout_coupon input.button:hover {
    background: var( --vs-accent );
    color: var( --vs-on-accent );
}

@media ( min-width: 541px ) {
    body.woocommerce-checkout .checkout_coupon {
        display: grid;
        grid-template-columns: minmax( 0, 1fr ) auto;
        align-items: end;
        gap: 12px 14px;
    }
    body.woocommerce-checkout .checkout_coupon > p:first-child { grid-column: 1 / -1; margin-bottom: 0; }
    body.woocommerce-checkout .checkout_coupon .form-row-first { grid-column: 1; }
    body.woocommerce-checkout .checkout_coupon .form-row-last  { grid-column: 2; }
}

/* -------------------------------------------------------------------------
   14. Narrow screens
   ---------------------------------------------------------------------- */

@media ( max-width: 980px ) {

    body.woocommerce-checkout .woocommerce,
    body.woocommerce-cart .woocommerce {
        width: min( 100% - 32px, 620px );
        padding-block: 28px 72px;
    }

    body.woocommerce-checkout #customer_details { margin-top: 32px; }
    body.woocommerce-checkout .vs-payhead { margin-top: 8px; }
}

@media ( max-width: 540px ) {

    body.woocommerce-checkout .woocommerce,
    body.woocommerce-cart .woocommerce {
        width: calc( 100% - 28px );
        padding-block: 22px 60px;
    }

    body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
    body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
        grid-template-columns: 1fr;
    }

    /* The per-field placements above are id-level, so the single-column
       override has to be too. */
    body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
    body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper > .form-row,
    body.woocommerce-checkout #billing_first_name_field,
    body.woocommerce-checkout #billing_last_name_field,
    body.woocommerce-checkout #billing_email_field,
    body.woocommerce-checkout #billing_country_field,
    body.woocommerce-checkout #billing_phone_field,
    body.woocommerce-checkout #vs_device_field,
    body.woocommerce-checkout #order_comments_field {
        grid-column: 1;
    }

    body.woocommerce-checkout #order_review { padding: 22px 20px 6px; }
    body.woocommerce-checkout #payment { padding: 20px; }

    body.woocommerce-checkout #order_review tfoot .order-total td,
    body.woocommerce-checkout #order_review tfoot .order-total .amount { font-size: 22px; }

    .vs-cohead__secure { font-size: 12.5px; padding: 9px 14px; }
}

/* -------------------------------------------------------------------------
   15. Order received
   The confirmation is the page a customer screenshots and comes back to, so
   it gets the same material as the summary it came from.
   ---------------------------------------------------------------------- */

body.woocommerce-order-received .woocommerce { width: min( 100% - 48px, 780px ); }

body.woocommerce-order-received .woocommerce-thankyou-order-received {
    margin: 0 0 28px;
    color: var( --vs-ink );
    font-family: "Bricolage Grotesque", Georgia, serif;
    font-size: clamp( 26px, 4vw, 34px );
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

body.woocommerce-order-received ul.woocommerce-order-overview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 36px;
    padding: 0;
    border: 0;
    background: none;
    list-style: none;
}

/* Flex rather than a grid: the last row grows to fill itself, so a set of
   three or five facts never leaves an empty cell behind. */
body.woocommerce-order-received ul.woocommerce-order-overview li {
    flex: 1 1 165px;
    float: none;
    width: auto;
    margin: 0;
    padding: 16px 18px;
    border: 1px solid rgba( 244, 239, 229, 0.10 );
    border-radius: 13px;
    background: var( --vs-surface );
    color: rgba( 244, 239, 229, 0.52 );
    font-size: 11.5px;
    letter-spacing: 0.09em;
    line-height: 1.4;
    text-transform: uppercase;
    list-style: none;
}

body.woocommerce-order-received ul.woocommerce-order-overview li strong {
    display: block;
    margin-top: 7px;
    color: var( --vs-ink );
    font-family: "Bricolage Grotesque", Georgia, serif;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

body.woocommerce-order-received .woocommerce-order > p,
body.woocommerce-order-received .woocommerce-order-details > p {
    color: rgba( 244, 239, 229, 0.74 );
    line-height: 1.7;
}

body.woocommerce-order-received .woocommerce-order h2,
body.woocommerce-order-received .woocommerce-column__title {
    margin: 40px 0 16px;
    color: var( --vs-ink );
    font-family: "Bricolage Grotesque", Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

body.woocommerce-order-received .woocommerce-order table.shop_table {
    width: 100%;
    margin: 0;
    border: 1px solid rgba( 244, 239, 229, 0.10 );
    border-radius: 16px;
    border-collapse: separate;
    border-spacing: 0;
    background: var( --vs-surface );
    color: var( --vs-ink );
    font-size: 15px;
}

body.woocommerce-order-received .woocommerce-order table.shop_table th,
body.woocommerce-order-received .woocommerce-order table.shop_table td {
    padding: 15px 20px;
    border: 0;
    border-top: 1px solid rgba( 244, 239, 229, 0.08 );
    background: none;
    font-weight: 400;
    text-align: left;
    vertical-align: top;
}

body.woocommerce-order-received .woocommerce-order table.shop_table thead th {
    border-top: 0;
    color: rgba( 244, 239, 229, 0.52 );
    font-size: 11.5px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

body.woocommerce-order-received .woocommerce-order table.shop_table tfoot th { color: rgba( 244, 239, 229, 0.64 ); }

body.woocommerce-order-received .woocommerce-order table.shop_table tfoot tr:last-child th,
body.woocommerce-order-received .woocommerce-order table.shop_table tfoot tr:last-child td {
    color: var( --vs-accent-hi );
    font-family: "Bricolage Grotesque", Georgia, serif;
    font-size: 18px;
    font-weight: 600;
}

body.woocommerce-order-received .woocommerce-customer-details address {
    padding: 18px 20px;
    border: 1px solid rgba( 244, 239, 229, 0.10 );
    border-radius: 14px;
    background: rgba( 244, 239, 229, 0.025 );
    color: rgba( 244, 239, 229, 0.82 );
    font-style: normal;
    line-height: 1.7;
}

/* -------------------------------------------------------------------------
   16. Motion preferences
   ---------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {

    body.woocommerce-checkout #payment #place_order,
    body.woocommerce-checkout .woocommerce form .form-row input.input-text,
    body.woocommerce-checkout .woocommerce form .form-row select,
    body.woocommerce-checkout .woocommerce form .form-row textarea { transition: none; }

    body.woocommerce-checkout #payment #place_order:hover { transform: none; }
    body.woocommerce-checkout .blockUI.blockOverlay::before { animation-duration: 2.4s; }
}