/* ============================================================
 * Victoria's Basement — Checkout (CheckoutWC) restyle
 * Single source of truth for checkout styling (7A): the inline
 * <style> formerly in content.php was consolidated here.
 *
 * Figma: 4-step flow — Information → Shipping & Billing →
 *        Shipping Method → Payment  (+ Order Received).
 * ============================================================ */

:root {
    --vb-red:    #c8102e;
    --vb-red-10: rgba(200, 16, 46, 0.05);
    --vb-mint:   #ace6cb;
    --vb-text:   #1a1a1a;
    --vb-muted:  #6b6b6b;
    --vb-border: #e5e5e5;
    --vb-green:  #00a63e;
    --vb-bg-soft: #f5f5f5;
    --vb-radius: 4px;
    --vb-input-h: 46px;
}

/* ============================================================
 * Header  (was header.php / checkout.css)
 * ============================================================ */
.woocommerce-checkout header,
#cfw-page header {
    background: var(--vb-mint) !important;
    padding: 16px 0 17px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--vb-border);
}
.woocommerce-checkout .logo img,
.woocommerce-checkout .logo .custom-logo,
#cfw-page .logo img {
    max-width: 150px;
    height: auto;
    width: auto;
}
.need-help { justify-content: flex-end; align-items: center; gap: 10px; }
.need-help .text-right a:first-child { color: var(--vb-muted); font-size: 14px; }
.need-help .text-right div a { color: var(--vb-text); font-weight: 500; font-size: 16px; text-decoration: none; }

/* ============================================================
 * Typography / headings
 * ============================================================ */
#cfw h1.mt-4 {
    font-family: Inter;
    font-weight: 500;
    font-style: Medium;
    font-size: 30px;
    leading-trim: NONE;
    line-height: 36px;
    letter-spacing: 0.4px;

}
#cfw h2, #cfw .cfw-heading { font-size: 20px; font-weight: 500; color: var(--vb-text); letter-spacing: -.45px; }
#cfw-cart-summary h3 { font-size: 20px; font-weight: 500; color: var(--vb-text); letter-spacing: -.45px; }

/* ============================================================
 * Breadcrumb / step indicator (Information → … → Payment)
 * ============================================================ */
#cfw-breadcrumb.vb-checkout-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 0;
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
    font-size: 14px;
}
#cfw-breadcrumb.vb-checkout-steps .vb-step {
    display: inline-flex;
    align-items: center;
    margin: 0;
}
#cfw-breadcrumb.vb-checkout-steps .vb-step a {
    color: var(--vb-muted);
    text-decoration: none;
    padding: 4px 0;
    white-space: nowrap;
}
#cfw-breadcrumb.vb-checkout-steps .vb-step:not(:last-child)::after {
    content: "›";
    color: var(--vb-muted);
    margin: 0 12px;
    opacity: .6;
}
#cfw-breadcrumb.vb-checkout-steps .vb-step.is-done a { color: var(--vb-text); }
#cfw-breadcrumb.vb-checkout-steps .vb-step.is-active a { color: var(--vb-red); font-weight: 600; }

/* Hidden per request — the step breadcrumb no longer shows below "Checkout".
   Kept in the DOM (NOT unhooked in PHP) because js/checkout.js reads
   `#cfw-breadcrumb .vb-step` for step state and binds its click handlers
   (checkout.js:82/197/214); removing the markup would break step navigation. */
#cfw-breadcrumb.vb-checkout-steps { display: none !important; }

/* ============================================================
 * Information ↔ Shipping & Billing sub-step visibility (1A)
 * State class lives on <form.checkout>.
 *   info    → show account block (email + create account) only
 *   address → show address fields + CFW's own "continue" nav
 * ============================================================ */
/* Default = Information sub-step. Anchored on CFW's own
   `cfw-customer-info-active` form class (server-rendered, present on first
   paint) so the address block is hidden with ZERO JS. JS only adds
   `.vb-substep-address` to advance — progressive enhancement. */
form.cfw-customer-info-active #cfw-customer-info-address,
form.cfw-customer-info-active #cfw-customer-info-action,
form.cfw-customer-info-active #cfw-shipping-packages-container {
    display: none !important;
}
/* Shipping & Billing sub-step */
form.cfw-customer-info-active.vb-substep-address #cfw-account-details,
form.cfw-customer-info-active.vb-substep-address .vb-info-continue-wrap {
    display: none !important;
}
form.cfw-customer-info-active.vb-substep-address #cfw-customer-info-address,
form.cfw-customer-info-active.vb-substep-address #cfw-customer-info-action,
form.cfw-customer-info-active.vb-substep-address #cfw-shipping-packages-container {
    display: block !important;
}
/* Shipping Method is merged into this step, so hide CFW's now-inactive
   "Continue to shipping" button — only "Continue to Payment" should show. */
#cfw-customer-info-action .cfw-continue-to-shipping-btn { display: none !important; }
.vb-info-continue-wrap { margin-top: 24px; }

/* Information step: force the 'Inter' font on every text, label, button, and
   field of the email/account block and its "Continue" button. Form controls
   (input/select/button) don't inherit font-family, so `*` matches them
   directly; ::placeholder is targeted separately. */
#cfw-account-details,
#cfw-account-details *,
.vb-info-continue-wrap,
.vb-info-continue-wrap * {
    font-family: 'Inter', sans-serif !important;
}
#cfw-account-details ::placeholder {
    font-family: 'Inter', sans-serif !important;
}

/* Shipping & Billing step: force 'Inter' on every text, label, button, and
   field — the address fields (#cfw-customer-info-address), CFW's action/nav
   row (#cfw-customer-info-action), and the collapsed "Contact … Edit" row.
   `*` matches form controls directly (they don't inherit font-family). */
#cfw-customer-info-address,
#cfw-customer-info-address *,
#cfw-customer-info-action,
#cfw-customer-info-action *,
.vb-contact-row,
.vb-contact-row * {
    font-family: 'Inter', sans-serif !important;
}
#cfw-customer-info-address ::placeholder {
    font-family: 'Inter', sans-serif !important;
}

/* Shipping & Billing field grid — match Figma 745-5720.
   CFW groups fields into unpredictable Bootstrap rows; flatten those wrappers
   with display:contents so every field becomes a direct flex item we can
   size + order explicitly. */
form.cfw-customer-info-active #cfw-customer-info-address .cfw-customer-info-address-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
form.cfw-customer-info-active #cfw-customer-info-address .cfw-customer-info-address-container > .cfw-input-wrap-row {
    display: contents;
}
#cfw-customer-info-address .cfw-customer-info-address-container .form-row {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

#cfw-customer-info-address .cfw-customer-info-address-container .cfw-add-field {
    color: var(--vb-red);
}

/* full-width fields */
#shipping_country_field,
#shipping_company_field,
#shipping_address_1_field,
#shipping_address_2_field,
#shipping_state_field,
#shipping_phone_field {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}
/* half-width pairs */
#shipping_first_name_field,
#shipping_last_name_field,
#shipping_postcode_field,
#shipping_city_field {
    flex: 0 0 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
}
/* Figma order */
#shipping_country_field    { order: 1; }
#shipping_first_name_field { order: 2; }
#shipping_last_name_field  { order: 3; }
#shipping_company_field    { order: 4; }
#shipping_address_1_field  { order: 5; }
#shipping_address_2_field  { order: 6; }
#shipping_postcode_field   { order: 7; }
#shipping_city_field       { order: 8; }
#shipping_state_field      { order: 9; }
#shipping_phone_field      { order: 10; }
/* optional-field reveal links span full width, sit under their field */
#cfw-customer-info-address .cfw-customer-info-address-container .cfw-optional-field-link,
#cfw-customer-info-address .cfw-customer-info-address-container > a {
    flex: 0 0 100%;
    order: 4;
}

/* Collapsed "Contact <email> · Edit" row (intra-tab, 5A) */
.vb-contact-row {
    display: none;
    align-items: center;
    gap: 24px;
    padding: 16px 17px;
    border: 1px solid var(--vb-border);
    border-radius: var(--vb-radius);
    background: rgba(245, 245, 245, .2);
    margin-bottom: 16px;
}
form.cfw-customer-info-active.vb-substep-address .vb-contact-row { display: flex; }
.vb-contact-row__label { color: var(--vb-muted); font-size: 14px; min-width: 56px; }
.vb-contact-row__value { color: var(--vb-text); font-size: 14px; flex: 1; }
.vb-contact-row__edit {
    background: none; border: 0; padding: 0;
    color: var(--vb-red); font-weight: 500; font-size: 14px; cursor: pointer;
}

/* ============================================================
 * Inputs / selects  (override the old border-radius:0 — Figma uses 4px)
 * ============================================================ */
#cfw input.form-control,
#cfw select.cfw-no-select2,
#cfw textarea.form-control {
    border-radius: var(--vb-radius) !important;
    border: 1px solid var(--vb-border) !important;
    min-height: var(--vb-input-h);
    font-size: 14px;
    color: var(--vb-text);
}
#cfw input.form-control::placeholder,
#cfw textarea.form-control::placeholder { color: var(--vb-muted); }
#cfw input.form-control:focus,
#cfw select.cfw-no-select2:focus,
#cfw textarea.form-control:focus {
    border-color: var(--vb-red) !important;
    box-shadow: 0 0 0 2px var(--vb-red-10);
    outline: none;
}
.select2-selection--single {
    height: var(--vb-input-h) !important;
    padding: 9px 7px !important;
    border: 1px solid var(--vb-border) !important;
    border-radius: var(--vb-radius) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: var(--vb-input-h) !important; }
#shipping_email_field { width: 100% !important; }
.vb-field-error input.form-control { border-color: var(--vb-red) !important; }
.vb-inline-error,
.cfw-input-wrap small { color: var(--vb-red); font-size: 13px; display: block; margin-top: 4px; }

/* ============================================================
 * Buttons
 * ============================================================ */
#cfw .cfw-primary-btn,
#cfw .vb-continue-to-address,
#cfw .cfw-next-tab,
#cfw .cfw-place-order-button,
#cfw button#place_order {
    background: var(--vb-red);
    border: 1px solid var(--vb-red);
    color: #fff;
    border-radius: var(--vb-radius);
    font-weight: 500;
    font-size: 14px;
    padding: 12px 32px;
    width: 100%;
    cursor: pointer;
    transition: background .15s ease;
    text-align: center;
}
#cfw .cfw-primary-btn:hover,
#cfw .vb-continue-to-address:hover,
#cfw .cfw-next-tab:hover,
#cfw button#place_order:hover { background: #a50d26; }
#cfw .cfw-prev-tab { color: var(--vb-muted); background: none; border: 0; }
#cfw-login-btn { min-width: 110px; margin-right: 10px; margin-bottom: 10px; }
.login-optional { margin-left: 0; }

/* ============================================================
 * Shipping method cards (Figma 745-5861)
 * Built from CFW shipping radios + vb_shipping_rate_meta() output.
 * ============================================================ */
#cfw-shipping-methods { margin-bottom: 0; }
#cfw-shipping-packages-container ul,
.cfw-shipping-methods-list { list-style: none; margin: 0; padding: 0; }
#cfw-shipping-packages-container li,
li.cfw-shipping-method-radio {
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--vb-border);
    border-radius: var(--vb-radius);
    padding: 16px 18px;
    cursor: pointer;
}
#cfw-shipping-packages-container li.cfw-active,
li.cfw-shipping-method-radio.cfw-active {
    border: 2px solid var(--vb-red);
    background: var(--vb-red-10);
    padding: 15px 17px;
}

#cfw-shipping-packages-container li:has(input[type="radio"]:checked) {
    border: 2px solid #C8102E;
    background: #C8102E0D;
}

ul.cfw-shipping-methods-list li .cfw-shipping-method-inner label {
    font-family: 'Inter';
    font-size: 14px;
}

ul.cfw-shipping-methods-list li .cfw-shipping-method-inner input.shipping_method[type="radio"] {
    box-shadow: inset 0 0 0 10px #C8102E;
}

.vb-ship-meta { display: flex; align-items: center; gap: 12px; flex: 1; }
.vb-ship-icon {
    width: 36px; height: 36px; flex: 0 0 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--vb-bg-soft); border-radius: 50%;
}
.vb-ship-icon img { width: 18px; height: 18px; object-fit: contain; }
.vb-ship-desc { display: block; color: var(--vb-muted); font-size: 13px; }
.vb-ship-eta  { display: block; color: var(--vb-muted); font-size: 13px; }

/* ============================================================
 * Payment step — uniformity with Information / Shipping & Billing
 * ============================================================ */
/* 'Inter' on every payment-tab text, label, button, and field (incl. the
   "Pay now" button in .cfw-place-order-wrap). `*` hits form controls directly
   since they don't inherit font-family; iframes (Stripe/PayPal) are unaffected. */
#cfw-payment-method,
#cfw-payment-method *,
#cfw-payment-action,
#cfw-payment-action *,
#cfw .cfw-place-order-wrap,
#cfw .cfw-place-order-wrap * {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px;
}

#cfw-payment-method #cfw-billing-methods .cfw-payment-methods-wrap ul.wc_payment_methods li.wc_payment_method {
    min-height: unset;
    width: 100%;
}

#cfw-payment-method #cfw-billing-methods .cfw-payment-methods-wrap ul.wc_payment_methods li.wc_payment_method.cfw-active {
    border: 1px solid var(--vb-red) !important;
}

#cfw-payment-method #cfw-billing-methods .cfw-payment-methods-wrap ul.wc_payment_methods li.wc_payment_method.cfw-active input:checked {
    box-shadow: inset 0 0 0 10px #C8102E;

}

#cfw-payment-method ::placeholder { font-family: 'Inter', sans-serif !important; }

/* Links in the payment step use the brand red (buttons keep their own colour —
   `.cfw-primary-btn` has higher specificity than this `a` rule). */
#cfw-payment-method a { color: var(--vb-red); }

#cfw-payment-method-review-pane ul.cfw-review-pane {
    padding: 12px 16px;
}

#cfw-payment-method #cfw-shipping-same-billing .cfw-radio-reveal-group .cfw-radio-reveal-li .cfw-radio-reveal-title {
    font-size: 14px !important;
    font-weight: 500 !important;
}

#cfw-place-order {
    height: auto;
    overflow-y: hidden;
}

/* Remove the "Return to information" back-link and let "Pay now" fill the row
   like the other steps' Continue buttons. CFW lays .cfw-bottom-controls out as a
   flex row with two min-width:200px children (.previous-button +
   .cfw-place-order-wrap); on the narrower payment column those overflow → a
   horizontal scrollbar on the button. Hiding the link and zeroing the empty
   column's min-width removes both, and the wrap then fills the row. */
#cfw .cfw-return-to-information-btn,
#cfw .cfw-return-to-shipping-btn { display: none !important; }
#cfw .cfw-bottom-controls > .previous-button { min-width: 0 !important; }
#cfw .cfw-place-order-wrap { flex: 1; width: 100%; min-width: 0 !important; }

/* ============================================================
 * Payment pills (Figma 745-6015) — responsive flex-wrap (4A)
 * ============================================================ */
/* Payment methods aligned with the shipping-method cards (full match): vertical
   rows, a visible red radio on the LEFT of the label, and the selected row gets
   a 2px #C8102E border + #C8102E0D background — mirroring the shipping
   `:has(input:checked)` + radio treatment above. */
ul.wc_payment_methods.payment_methods {
    list-style: none; margin: 0 0 16px; padding: 0;
    display: flex; flex-direction: column;
}
ul.wc_payment_methods .wc_payment_method {
    display: flex;
    flex-wrap: wrap;               /* revealed gateway box drops full-width below */
    align-items: center;
    gap: 16px;
    border: 1px solid var(--vb-border);
    border-radius: var(--vb-radius);
    padding: 16px 18px;
    margin: 0;
    cursor: pointer;
}
/* Selected row — identical treatment to the shipping selected row. */
ul.wc_payment_methods .wc_payment_method:has(> input[type="radio"]:checked) {
    border: 2px solid #C8102E;
    background: #C8102E0D;
}
/* Visible radio, styled like the shipping radio, sitting left of the label. */
ul.wc_payment_methods .wc_payment_method > input[type="radio"] {
    display: inline-block;
    flex: 0 0 auto;
    margin: 0;
    box-shadow: inset 0 0 0 10px #C8102E;
}
/* Label is now plain text beside the radio (was a full centred pill box). */
ul.wc_payment_methods .wc_payment_method > label.payment_method_label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    border: 0;
    padding: 0;
    margin: 0;
    text-align: left;
    font-weight: 500;
    color: var(--vb-text);
    cursor: pointer;
}
/* Any revealed gateway fields wrap full-width below the radio+label row. */
ul.wc_payment_methods .wc_payment_method > .payment_box {
    flex: 1 1 100%;
}
/* Revealed gateway fields take the full row below the pills */
ul.wc_payment_methods .payment_box.cfw-radio-reveal-content {
    flex: 1 0 100%;
    margin-top: 4px;
    background: #fafbfc !important;
    border: 1px solid var(--vb-border);
    border-radius: var(--vb-radius);
    padding: 20px !important;
}
.payment_box.payment_method_stripe { background: #fafbfc !important; }
#cfw-billing-methods #stripe-payment-data ul li:last-child { margin-bottom: 20px !important; }
#cfw-billing-methods #stripe-payment-data > p:first-child { display: block !important; margin-bottom: 20px; }

/* Billing-address radio cards (kept on Payment step, restyled) */
#cfw-shipping-same-billing { position: relative !important; }
#cfw-shipping-same-billing .cfw-radio-reveal-li {
    border: 2px solid var(--vb-border);
    border-radius: var(--vb-radius);
    padding: 18px;
}

#cfw-shipping-same-billing .cfw-radio-reveal-li.cfw-active {
    border-color: var(--vb-red);
}

#cfw-shipping-same-billing .cfw-radio-reveal-li.cfw-active .cfw-radio-reveal-title-wrap {
    background: #C8102E0D;
}

#cfw-shipping-same-billing .cfw-radio-reveal-group #billing_same_as_shipping_radio:checked {
    box-shadow: inset 0 0 0 10px #C8102E;
}

#cfw-payment-method #cfw-billing-methods .payment_method_title {
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* ============================================================
 * "Your Order" cart summary sidebar
 * ============================================================ */
#cfw-cart-summary-content { margin-top: 20px; }
/* gift card form close button */
button.vb_vii-form-close {
    font-size: 24px !important; border: 0 !important; background: none !important;
    line-height: 12px; outline: none; position: absolute;
    top: -30px !important; right: -16px !important; color: #000 !important;
}
.vb_vii-form-applied-gift-cards-wrap { text-align: left; }

/* ============================================================
 * Cart summary product rows (Figma 745-5653)
 *
 * CheckoutWC renders the summary client-side (CheckoutCartTableRow) as a
 * 4-cell table row: image | description | qty(hidden) | subtotal. We reshape
 * it into the Figma 2-column layout (image + details) and inject per-item
 * pricing / quantity / discount badge server-side via cfw_cart_item_after_data
 * (see functions.php vb_checkout_item_pricing). The default subtotal cell,
 * discount HTML, and +/- quantity stepper are hidden.
 * ============================================================ */
#cfw-cart .cfw-cart-table,
#cfw-cart .cfw-cart-table tbody { display: block; width: 100%; }

#cfw-cart .cart-item-row {
    display: flex;
    position: relative;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--vb-border);
}
#cfw-cart .cart-item-row > td,
#cfw-cart .cart-item-row > th {
    padding: 0;
    border: 0;
    background: none;
    font-weight: 400;
}

/* Image (96px — matches the flycart .vb-fc-img).
   NB: use the direct-child combinator so this only sizes the thumbnail
   wrapper (<a> when link_items on, <span> when off) — NOT the nested
   <span> inside .vb-co-badge, which would otherwise be forced to 96×96. */
#cfw-cart .cfw-cart-item-image { flex: 0 0 96px; width: 96px; }
#cfw-cart .cfw-cart-item-image-wrap,
#cfw-cart .cfw-cart-item-image-wrap > a,
#cfw-cart .cfw-cart-item-image-wrap > span {
    display: block;
    width: 96px; height: 96px;
}
#cfw-cart .cfw-cart-item-image-wrap {
    position: relative;
    border-radius: var(--vb-radius);
    background: var(--vb-bg-soft);
    overflow: hidden;
}
#cfw-cart .cfw-cart-item-image-wrap img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    border: none;
}

/* Details column */
#cfw-cart .cfw-cart-item-description {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}
#cfw-cart .cfw-cart-item-title a,
#cfw-cart .cfw-cart-item-title span {
    color: #1A1A1A;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 19.25px; /* 137.5% */
    letter-spacing: -0.15px;
    text-decoration: none;
}
#cfw-cart .cfw-cart-item-title a:hover { color: #000; text-decoration: none; }
#cfw-cart .cfw-cart-item-data { color: var(--vb-muted); font-size: 13px; }

/* Injected pricing block (functions.php vb_checkout_item_pricing) */
#cfw-cart .cfw_cart_item_after_data { display: flex; flex-direction: column; gap: 4px; }
#cfw-cart .vb-co-pricing {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
}
#cfw-cart .vb-co-rrp,
#cfw-cart .vb-co-rrp .woocommerce-Price-amount,
#cfw-cart .vb-co-rrp .woocommerce-Price-currencySymbol {
    color: var(--vb-muted); font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: -0.15px;
}

#cfw-cart .vb-co-rrp {
    color: #6B6B6B;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.15px;
}

#cfw-cart .vb-co-sale,
#cfw-cart .vb-co-sale .woocommerce-Price-amount,
#cfw-cart .vb-co-sale .woocommerce-Price-currencySymbol {
    color: var(--vb-red); font-size: 16px; font-weight: 700; line-height: 1.2; letter-spacing: -0.44px; margin-left: auto;
}

#cfw-cart .vb-co-sale .woocommerce-Price-amount {
    color: #C8102E;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 19.2px */
    letter-spacing: -0.439px;
}

#cfw-cart .vb-co-qty { 
    color: #1A1A1A;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 114.286% */
    width: 100%;
}

/* Circular "% OFF RRP" badge, inside the 96px image at lower-left
   (mirrors flycart .vb-fc-disc-badge exactly). Injected into the thumbnail
   (functions.php vb_checkout_item_thumbnail_badge) so it's anchored to the
   image wrap, not the row. */
#cfw-cart .cfw-cart-item-image-wrap .vb-co-badge {
    position: absolute;
    bottom: 2px; left: 2px;
    width: 40px; height: 40px;
    background: var(--vb-red); color: #fff;
    border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; line-height: 1.15; pointer-events: none;
    box-shadow: 0 6.25px 4.688px rgba(0,0,0,.1), 0 2.5px 1.875px rgba(0,0,0,.1);
    z-index: 2;
}
#cfw-cart .cfw-cart-item-image-wrap .vb-co-badge strong { font-size: 13px; font-weight: 800; display: block; }
#cfw-cart .cfw-cart-item-image-wrap .vb-co-badge span   { font-size: 7px; font-weight: 700; display: block; }

/* Price-type pill (HOT / CHOPPED) — matches the product card
   (.vb-price-pill). Shown only for HOT/CHOP products; when present, RRP/WAS and
   the discount badge are suppressed (see functions.php vb_checkout_item_pricing). */
#cfw-cart .vb-co-pill-row { display: flex; width: 100%; }
#cfw-cart .vb-co-pill {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1;
    padding: 4px 8px;
    color: #fff;
}
#cfw-cart .vb-co-pill--hot  { 
    background: #ff0000; 
    color: #FFF;
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 12px; /* 100% */
}
#cfw-cart .vb-co-pill--chop { 
    background: #00a651;
    color: #FFF;
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 12px; /* 100% */
}

/* Hide CheckoutWC defaults replaced by the redesign */
#cfw-cart .cfw-cart-item-subtotal,                 /* line total + remove × */
#cfw-cart .cfw-cart-item-quantity,                 /* CFW's hidden qty cell (qty shown as x1) */
#cfw-cart .cfw-items-summary-item-discount,        /* default discount html */
#cfw-cart .cfw-edit-item-quantity-control-wrap {   /* +/- quantity stepper */
    display: none !important;
}

/* ============================================================
 * Promo code (React coupon module → #cfw-cart-summary-coupons)
 * ============================================================ */
#cfw-cart-summary-coupons .cfw-promo-row {
    display: flex; gap: 8px; margin: 20px 0 0; align-items: stretch;
}
#cfw-cart-summary-coupons .cfw-promo-row .col-8,
#cfw-cart-summary-coupons .cfw-promo-row .col-4 {
    flex: 0 0 auto; padding: 0; max-width: none; width: auto;
}
#cfw-cart-summary-coupons .cfw-promo-row .col-8 { flex: 1 1 auto; }
#cfw-cart-summary-coupons .cfw-input-wrap,
#cfw-cart-summary-coupons .cfw-button-input { margin: 0; }
#cfw-cart-summary-coupons .cfw-secondary-btn {
    min-height: var(--vb-input-h); padding: 0 21px;
    border: 1px solid var(--vb-border); background: #fff;
    border-radius: var(--vb-radius); color: var(--vb-text);
    font-weight: 500; font-size: 14px; cursor: pointer; white-space: nowrap;
    color: #1A1A1A !important;
    text-align: center;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.15px;
}
#cfw-cart-summary-coupons .cfw-secondary-btn:hover { border-color: var(--vb-text); }

/* ============================================================
 * Gift card box (vii_form → cfw_after_coupon_module)
 * ============================================================ */
#cfw-cart-summary .vb_vii-form-main-wrap,
#cfw-cart-summary form.vb_vii-form { text-align: left; }
#cfw-cart-summary .vb_vii-form-applied-gift-cards-wrap {
    border: 1px solid var(--vb-border); border-radius: var(--vb-radius);
    padding: 12px 14px; margin-top: 12px; font-size: 14px;
}

/* ============================================================
 * Totals (React CartTotals → #cfw-cart-summary-totals)
 * Subtotal / You Save (green) / divider / Total Due (Inc. GST)
 * ============================================================ */
/* Figma 745-5684: 14px/20px rows, muted label + dark value, You Save green,
   Total Due with a top divider (16px semibold label / 24px bold amount). */
#cfw-cart-summary-totals .cfw-totals-list table { width: 100%; }
#cfw-cart-summary-totals table th,
#cfw-cart-summary-totals table td {
    font-family: Inter;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.15px;
    padding: 8px 0 0;            /* 8px gap above each row (Figma pt-8) */
    border: 0;
    vertical-align: baseline;
}
#cfw-cart-summary-totals table th { color: var(--vb-muted); text-align: left; }
#cfw-cart-summary-totals table td { color: var(--vb-text); text-align: right; }
/* First row (subtotal) sits directly under the container's 17px padding. */
#cfw-cart-summary-totals tr.cart-subtotal th,
#cfw-cart-summary-totals tr.cart-subtotal td { padding-top: 0; }
/* You Save — muted label, green value (Figma #6b6b6b / #00a63e). */
#cfw-cart-summary-totals tr.save-total td { color: var(--vb-green) !important; }
/* Free shipping — red (functions.php vb_free_shipping_text). */
#cfw-cart-summary-totals .vb-free-shipping { color: #a50d26; font-weight: 500; }
/* Total Due — top divider, larger + bold. */
#cfw-cart-summary-totals tr.order-total th,
#cfw-cart-summary-totals tr.order-total td {
    padding-top: 16px;
    vertical-align: baseline;
}
#cfw-cart-summary-totals tr.order-total th {
    color: var(--vb-text); font-weight: 600; font-size: 16px; line-height: 24px; letter-spacing: -0.31px;
}
#cfw-cart-summary-totals tr.order-total td {
    color: var(--vb-text); font-weight: 700; font-size: 24px; line-height: 32px; letter-spacing: 0.07px;
}

/* ============================================================
 * "Apply store credit discounts?" — Advanced Coupons accordion
 * (not in Figma; styled to match the checkout design system)
 * ============================================================ */

#cfw-cart-summary-coupons .cfw-coupon-wrap .cfw-promo-row.cfw-input-wrap-row {
    margin-bottom: 20px;
}

.acfw-checkout-ui-block .acfw-accordion {
    border: 1px solid var(--vb-border);
    border-radius: var(--vb-radius);
    background: rgba(245, 245, 245, .3);
    overflow: hidden;
}
.acfw-checkout-ui-block .acfw-accordion h3 {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0; padding: 13px 16px; cursor: pointer;
}
.acfw-checkout-ui-block .acfw-accordion-title {
    font-size: 14px; font-weight: 500; color: var(--vb-text); letter-spacing: -.15px;
}
.acfw-checkout-ui-block .acfw-accordion .caret img { width: 12px; height: auto; }
.acfw-checkout-ui-block .acfw-accordion-content { padding: 0 16px 16px; }
.acfw-store-credit-user-balance { font-size: 14px; color: var(--vb-text); margin-bottom: 6px; }
.acfw-store-credit-user-balance strong { color: var(--vb-red); }
.acfw-store-credit-instructions { font-size: 13px; color: var(--vb-muted); margin-bottom: 10px; }
.acfw-checkout-ui-block input.input-text,
.acfw-checkout-ui-block input[type="text"] {
    border: 1px solid var(--vb-border) !important;
    border-radius: var(--vb-radius) !important;
    min-height: var(--vb-input-h); font-size: 14px; width: 100%;
}
.acfw-checkout-ui-block button.button,
.acfw-checkout-ui-block button.alt {
    background: var(--vb-red); border: 1px solid var(--vb-red); color: #fff;
    border-radius: var(--vb-radius); font-weight: 500; font-size: 14px;
    padding: 10px 21px; cursor: pointer;
}
.acfw-checkout-ui-block button.button:hover,
.acfw-checkout-ui-block button.alt:hover { background: #a50d26; }

/* ============================================================
 * Cart item price-type badges (cart_vb_data)
 * ============================================================ */
.price-name { padding: 2px 5px; font-size: 13px; }
.bg-sky-blue { background-color: #dcf4ef; }
.bg-dk-gray { background-color: #333; }
.bg-green { background-color: var(--vb-mint); }
.bg-red { background-color: var(--vb-red); }
.bg-yellow { background-color: #fff400; }
.bg-yellow-2 { background-color: #faeb37; }
.bg-blue-green { background-color: #b8e4cb; }
.bg-blue-green-2 { background-color: #3dbc9f; }
.bg-dk-gray-2 { background-color: #484848; }
.color-white { color: #fff; }
.color-red { color: #f00; }

/* ============================================================
 * Order Received (thank-you) — Figma 808-10359
 * ============================================================ */
.vb-thankyou-grid { display: flex; flex-wrap: wrap; gap: 32px; }
.vb-thankyou-grid .vb-ty-col { flex: 1 1 360px; min-width: 280px; }

/* Hide WooCommerce's redundant page title ("Order received") on the thank-you
   page — the .vb-order-received-head below already renders that heading. */
.woocommerce-order-received .entry-header { display: none; }

/* Drop understrap's global #page-wrapper top padding on the order-received page
   so the full-bleed mint header meets the site header with no gap. */
.woocommerce-order-received #page-wrapper { padding-top: 0; }

/* Full-width "Order received" header — Figma 808-10331.
   Mint band matching the (now hidden) .entry-header, full-bleed to the viewport
   while its content stays aligned to the page container. `50%` resolves against
   this element's containing block (the same column the order details sit in), so
   the horizontal padding snaps content back to that column's edges. overflow-x is
   hidden globally, so 100vw won't cause a horizontal scrollbar. */
.vb-order-received-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px 48px;
    background: var(--vb-mint);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 24px;
    padding: 24px calc(50vw - 50%);
}
.vb-orh-intro { display: flex; align-items: center; gap: 12px; }
.vb-orh-icon { display: inline-flex; flex-shrink: 0; color: #1A1A1A; }
.vb-orh-icon svg { display: block; width: 28px; height: 28px; }
.vb-orh-heading h1 {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 120%;
    letter-spacing: 0.37px;
    color: #1A1A1A;
}
.vb-orh-heading p {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.31px;
    text-align: center;
    color: #6B6B6B;
}
.vb-orh-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
}
.vb-orh-field {
    padding: 0 24px;
    border-left: 1px solid #00000026;
}
.vb-orh-field:first-child { border-left: 0; padding-left: 0; }
.vb-orh-field dt {
    margin: 0 0 4px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.15px;
    color: #6B6B6B;
}
.vb-orh-field dd {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.15px;
    color: #1A1A1A;
}
.vb-orh-field dd .woocommerce-Price-amount { font: inherit; color: inherit; }

@media (max-width: 991px) {
    .vb-order-received-head { flex-direction: column; align-items: flex-start; }
    /* Stack the meta fields as a full-width vertical list (label left, value
       right) with horizontal dividers. The desktop horizontal strip uses
       vertical border-left dividers + fixed side padding, which below ~810px
       wraps 2-per-row and leaves stray vertical lines / uneven indents on the
       wrapped fields. */
    .vb-orh-meta {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
    }
    .vb-orh-field {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        padding: 12px 0;
        border-left: 0;
        border-top: 1px solid #00000026;
    }
    .vb-orh-field:first-child { border-top: 0; padding-top: 0; }
    .vb-orh-field dt { margin: 0; flex-shrink: 0; }
    .vb-orh-field dd { text-align: right; word-break: break-word; }
}
.vb-ty-table-title {
    font-family: 'Inter', sans-serif;
    font-size: 18px; font-weight: 700; color: var(--vb-text); margin-bottom: 8px;
}
.vb-ty-table {
    width: 100%; border: 1px solid var(--vb-border); border-radius: var(--vb-radius);
    border-collapse: separate; border-spacing: 0; overflow: hidden;
    font-family: 'Inter', sans-serif;
}
.vb-ty-table tr + tr td { border-top: 1px solid var(--vb-border); }
.vb-ty-table td { padding: 12px 16px; font-size: 14px; font-family: 'Inter', sans-serif; }
.vb-ty-table td:first-child { color: var(--vb-muted); }
.vb-ty-table td:last-child { text-align: right; color: var(--vb-text); }

/* Product line items sit under the "Product/s" header — a thumbnail + name laid
   out (and indented) so they read as a nested list of the order's products. */
.vb-ty-product-row td:first-child { padding-left: 24px; color: var(--vb-text); }
.vb-ty-product-cell { display: flex; align-items: center; gap: 12px; }
.vb-ty-thumb { flex-shrink: 0; line-height: 0; }
.vb-ty-thumb img,
.vb-ty-thumb-img {
    width: 44px; height: 44px; object-fit: cover; display: block;
    border: 1px solid var(--vb-border); border-radius: 4px;
}
.vb-ty-product-name { font-family: 'Inter', sans-serif; }
.vb-ty-qty { color: var(--vb-muted); font-size: 13px; white-space: nowrap; }

.vb-order-again {
    display: inline-block; margin-top: 16px;
    background: var(--vb-red); color: #fff; border-radius: var(--vb-radius);
    padding: 12px 24px; font-weight: 500; text-decoration: none;
    font-family: 'Inter', sans-serif;
}
.vb-order-again:hover { background: #a50d26; color: #fff; }

/* ============================================================
 * Click & Collect store selector (was functions.php inline)
 * ============================================================ */
#click_collect_store {
    color: #585354; padding: 12px 15px !important;
    border-radius: var(--vb-radius) !important; border-color: #d0cfcf !important;
    font-size: 1rem !important; width: 100%;
}

#cfw #cfw-cart-summary .cfw-module.text-center {
    display: flex;
    padding: 12px !important;
    align-items: center;
    gap: 12px;
    align-self: stretch;
    border-radius: 4px;
    border: 1px solid #E5E5E5;
    background: rgba(245, 245, 245, 0.30);
}
/* Collapsed prompt inside the gift-card box (theme override
   vb_vii/checkout/form-gift-card.php → Figma 745-5815). Neutralise the nested
   Bootstrap wrappers so the prompt aligns to the box padding. */
#cfw #cfw-cart-summary .cfw-module.text-center .row,
#cfw #cfw-cart-summary .cfw-module.text-center [class*="col-"] {
    margin: 0;
    padding: 0;
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}
#cfw-cart-summary .vb_vii-gc-prompt {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    width: 100%;
}
#cfw-cart-summary .vb_vii-gc-icon {
    flex: 0 0 36px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--vb-mint);
    display: flex; align-items: center; justify-content: center;
}
#cfw-cart-summary .vb_vii-gc-icon svg { width: 18px; height: 18px; color: #0f7b5a; }
#cfw-cart-summary .vb_vii-gc-text {
    color: var(--vb-text);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.15px;
}
#cfw-cart-summary .vb_vii-gc-text .vb_vii-form-toggle,
#cfw-cart-summary .vb_vii-gc-text .vb_vii-form-toggle:hover {
    color: var(--vb-red);
    text-decoration: underline;
}
/* Revealed redeem form spans the full box width below the prompt. */
#cfw-cart-summary .cfw-module.text-center .vb_vii-form-sub-wrap { width: 100%; text-align: left; }

#cfw-cart-summary .cfw-module.text-center {
    margin-bottom: 0;
}

#cfw-cart-summary #cfw-cart-summary-totals {
    margin-top: 1.5rem;
    border-top: 1px solid #E5E5E5;
}

#cfw-cart-summary #cfw-cart-summary-totals .cfw-totals-list .cfw-module {
    padding-top: 17px; /* Figma 745-5684 container padding-top */
}

#cfw-cart-summary #cfw-cart-summary-totals .cfw-totals-list table tr.order-total {
    border-top: 1px solid #E5E5E5 !important;
}

#cfw-cart-summary #cfw-cart-summary-totals .cfw-totals-list table tr {
    padding-bottom: 8px;
    padding-top: 0;
}

#cfw-cart-summary #cfw-cart-summary-totals .cfw-totals-list table tr th {
    flex-basis: 40%;
}

#cfw #checkout #order_review .cfw-panel {
    margin-top: 30px;
}

#cfw #checkout #order_review .cfw-panel h3 {
    font-family: Inter;
    font-weight: 500;
    font-style: Medium;
    font-size: 20px;
    leading-trim: NONE;
    line-height: 28px;
    letter-spacing: -0.45px;

}

#cfw #checkout #order_review .cfw-panel #cfw-account-details #billing_email_field {
    margin-top: 20px;
    width: 100%;
}

#cfw #checkout #order_review {
    padding-right: 30px;
}

/* ============================================================
 * Responsive
 * ============================================================ */
@media screen and (max-width: 992px) {
    #cfw-login-btn { margin-bottom: 0; }
    #cfw-breadcrumb.vb-checkout-steps { font-size: 13px; }
    #cfw-mobile-cart-summary { display: none; }
}
@media screen and (max-width: 574px) {
    .need-help .text-right { text-align: center !important; }
    .vb_vii-form-main-wrap { font-size: 14px; }
    ul.wc_payment_methods .wc_payment_method { flex: 1 1 100%; }
    #cfw-breadcrumb.vb-checkout-steps .vb-step:not(:last-child)::after { margin: 0 6px; }
}