/**
 * WooCommerce checkout, restyled to the funnel's payment screen (spec 012, T021).
 *
 * Figma vBEJxktfztGN0W6tuVW2Ok — frames 1:1726 (short), 1:1539 (full height)
 * and 1:1914 (coupon applied) are the source of truth.
 *
 * Enqueued by checkout.php alongside funnel-shared.css, which this file leans
 * on for .cu-btn, .cu-field and .cu-enrollment-summary. Everything here is
 * scoped under .cu-checkout (the wrapper in checkout.php, which also carries
 * .cu-funnel so the shared rules apply).
 */

.cu-checkout {
    --cu-checkout-side: 380px;
    --cu-checkout-line: rgba(89, 38, 11, 0.18);
    --cu-checkout-card: #fdf6e4;
}

/* Checkout runs wider than the funnel steps (owner: 1320px). Both the shared
   inner container and any legacy page containers must yield. Horizontal
   padding matches the header's Bootstrap container (12px) so the title,
   breadcrumbs, and columns left-align with the logo. */
.cu-checkout .cu-funnel__inner,
.page-template-checkout .cu-checkout .container,
.page-template-checkout .cu-checkout .container-fluid {
    max-width: 1320px !important;
    width: 100%;
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
}

/* Breadcrumb bar: divider runs edge to edge (full bleed from the centered
   container); the crumbs themselves align with the logo's 1320px container. */
.cu-checkout .cu-checkout__breadcrumb {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    border-bottom: 1px solid var(--cu-checkout-line);
}

.cu-checkout .cu-checkout__breadcrumb .cu-funnel-breadcrumb__list {
    max-width: 1320px;
    margin: 0 auto;
    padding: 14px 12px;
}

/* Vertical hairline between the columns (Figma-sampled #d3cab3), centered in
   the gutter between the form and the sidebar card. */
.cu-checkout .cu-checkout__layout {
    position: relative;
}

.cu-checkout .cu-checkout__layout::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(var(--cu-checkout-side) + 28px);
    width: 1px;
    background: #d3cab3;
}

/* checkout.php still renders the legacy back banner so its behaviour is intact
   for anything that links here; the Figma puts the back affordance inline
   above the heading instead. */
.page-template-checkout #top-bar {
    display: none;
}

/* ---------- layout ---------- */

.cu-checkout .cu-checkout__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--cu-checkout-side);
    gap: 56px;
    align-items: start;
    padding-top: 32px;
}

.cu-checkout .cu-checkout__main {
    min-width: 0;
}

/* The sidebar matches the form column's height exactly: the inner wrapper
   fills the grid cell absolutely, so it never contributes to the row height
   — the LEFT column decides it. Pinned header on top, purple pay block on
   the bottom, and the middle (price, includes, renewal) scrolls internally. */
.cu-checkout .cu-checkout__sidebar {
    min-width: 0;
    position: relative;
    align-self: stretch; /* the layout grid uses align-items: start */
}

/* background/shadow/border cleared: legacy style.css debosses every
   `#order_review > div` into a beige panel. */
#order_review > .cu-checkout__sidebar-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
}

.cu-checkout #order_review .cu-checkout__card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Pinned header carries the divider; the price block used to. */
.cu-checkout .cu-checkout__card > .cu-enrollment-summary {
    flex: 0 0 auto;
    border-bottom: 1px solid rgba(89, 38, 11, 0.15);
    padding-bottom: 16px;
}

.cu-checkout .cu-checkout__card-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.cu-checkout .cu-checkout__card-scroll .cu-enrollment-summary__pricing {
    border-top: none; /* the divider lives on the pinned header now */
}

/* Order-received (thank-you) view: the shared container carries bottom-only
   padding — mirror it on top so the confirmation card sits evenly between
   the header and the footer. */
.woocommerce-order-received .cu-funnel__inner {
    padding-top: 64px;
}

/* ---------- page heading ---------- */

.cu-checkout .cu-checkout__head {
    margin-bottom: 32px;
}

.cu-checkout .cu-checkout__back {
    display: inline-block;
    color: var(--text-body-color, #4f2a10);
    font-size: 0.9375rem;
    text-decoration: none;
    margin-bottom: 8px;
}

.cu-checkout .cu-checkout__back:hover,
.cu-checkout .cu-checkout__back:focus {
    color: var(--bs-heading-color, #751144);
    text-decoration: underline;
}

.cu-checkout .cu-checkout__title {
    font-family: "Palatino", "Palatino Linotype", "Book Antiqua", serif;
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--bs-heading-color, #751144);
    margin: 0 0 8px;
}

.cu-checkout .cu-checkout__subtitle {
    font-size: 1.0625rem;
    color: var(--text-body-color, #4f2a10);
    margin: 0;
}

.cu-checkout .cu-checkout__section-title {
    font-family: "Proza Libre", sans-serif;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-body-color, #4f2a10);
    margin: 0 0 14px;
}

/* ---------- identity card + "Edit data" disclosure ---------- */

.cu-checkout .cu-checkout__toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
}

.cu-checkout .cu-checkout__identity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border: 1px solid var(--purple, #750444);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 32px;
    max-width: 520px;
}

.cu-checkout .cu-checkout__identity-name {
    font-family: "Proza Libre", sans-serif;
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--text-body-color, #4f2a10);
    margin: 0;
}

.cu-checkout .cu-checkout__identity-email {
    font-size: 0.9375rem;
    color: rgba(79, 42, 16, 0.75);
    margin: 2px 0 0;
}

.cu-checkout .cu-checkout__identity-edit {
    font-size: 0.9375rem;
    color: var(--text-body-color, #4f2a10);
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
    margin: 0;
}

.cu-checkout .cu-checkout__toggle:focus-visible + .cu-checkout__identity {
    outline: 2px solid var(--purple, #750444);
    outline-offset: 2px;
}

/* Collapsed, only the personal rows the identity card stands in for (name and
   email) are hidden — plus the optional company/phone rows the design omits.
   Address rows (street, city, country/state/postcode) always stay visible:
   they are required at checkout and a new account has nothing stored to
   prefill them with, so hiding them would trap the buyer behind required
   fields they cannot see. */
/* Personal rows are hidden by explicit ID with !important: legacy theme JS
   re-shows billing rows with inline display:block, and only an !important
   declaration beats an inline style. The country/state/postcode trio is NOT
   listed here at all, so WooCommerce's country script can still hide the
   state row inline for countries without states. */
.cu-checkout .cu-checkout__toggle:not(:checked) ~ #customer_details #billing_first_name_field,
.cu-checkout .cu-checkout__toggle:not(:checked) ~ #customer_details #billing_last_name_field,
.cu-checkout .cu-checkout__toggle:not(:checked) ~ #customer_details #billing_email_field,
.cu-checkout .cu-checkout__toggle:not(:checked) ~ #customer_details #billing_company_field,
.cu-checkout .cu-checkout__toggle:not(:checked) ~ #customer_details #billing_phone_field {
    display: none !important;
}

.cu-checkout .cu-checkout__toggle:checked ~ .cu-checkout__identity .cu-checkout__identity-edit::after {
    content: " \25B4";
}

/* ---------- billing fields ---------- */

.cu-checkout .woocommerce-billing-fields > h3,
.cu-checkout .woocommerce-shipping-fields > h3 {
    display: none;
}

.cu-checkout .cu-checkout__billing {
    margin-bottom: 36px;
}

/* WooCommerce floats .col-1 at ~48% width — undo it so the field grid gets
   the full main column (the cramped 97px columns bug). */
.cu-checkout #customer_details .col-1 {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    padding: 0;
}

.cu-checkout .woocommerce-billing-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 20px;
}

/* Subscription "Recurring totals" block: the design states renewal terms in
   the membership copy instead — these rows are noise here. */
.cu-checkout #order_review tr.recurring-totals,
.cu-checkout #order_review tr.recurring-total {
    display: none;
}

.cu-checkout .woocommerce-billing-fields__field-wrapper > .form-row {
    margin: 0;
    padding: 0;
    width: auto !important; /* beats the legacy #order_review width rules in style.css */
    float: none;
    grid-column: 1 / -1;
}

.cu-checkout #billing_first_name_field { order: 1; grid-column: span 1; }
.cu-checkout #billing_last_name_field  { order: 2; grid-column: span 1; }
.cu-checkout #billing_email_field      { order: 3; grid-column: span 1; }
.cu-checkout #billing_company_field    { order: 4; }
.cu-checkout #billing_address_1_field  { order: 5; }
.cu-checkout #billing_address_2_field  { order: 6; }
.cu-checkout #billing_city_field       { order: 7; }
.cu-checkout #billing_country_field    { order: 8; grid-column: span 1; }
.cu-checkout #billing_state_field      { order: 9; grid-column: span 1; }
.cu-checkout #billing_postcode_field   { order: 10; grid-column: span 1; }

.cu-checkout .woocommerce-billing-fields label,
.cu-checkout .cu-checkout__payment-section label {
    display: block;
    font-family: "Proza Libre", sans-serif;
    font-size: 0.8125rem;
    font-weight: 400;
    color: rgba(79, 42, 16, 0.8);
    margin-bottom: 6px;
}

.cu-checkout .woocommerce-billing-fields abbr.required {
    border: none;
    text-decoration: none;
    color: rgba(79, 42, 16, 0.5);
}

.cu-checkout .woocommerce-billing-fields input[type="text"],
.cu-checkout .woocommerce-billing-fields input[type="email"],
.cu-checkout .woocommerce-billing-fields input[type="tel"],
.cu-checkout .woocommerce-billing-fields select,
.cu-checkout .woocommerce-billing-fields .select2-container .select2-selection {
    width: 100%;
    background-color: #fffdf7;
    border: 1px solid #d9cbb8;
    border-radius: 8px;
    box-shadow: none;
    padding: 11px 14px;
    height: auto;
    min-height: 46px;
    font-family: "Palatino", "Palatino Linotype", "Book Antiqua", serif;
    font-size: 1rem;
    color: var(--text-body-color, #4f2a10);
}

.cu-checkout .woocommerce-billing-fields .select2-container .select2-selection__rendered {
    padding: 0;
    line-height: 1.5;
    color: var(--text-body-color, #4f2a10);
}

.cu-checkout .woocommerce-billing-fields .select2-container .select2-selection__arrow {
    top: 50%;
    transform: translateY(-50%);
    right: 8px;
}

.cu-checkout .woocommerce-billing-fields input::placeholder {
    color: rgba(79, 42, 16, 0.4) !important; /* beats the global placeholder rule in style.css */
    opacity: 1;
}

.cu-checkout .woocommerce-billing-fields input:focus,
.cu-checkout .woocommerce-billing-fields select:focus {
    border-color: var(--purple, #750444);
    outline: 2px solid rgba(117, 4, 68, 0.15);
}

/* ---------- payment section (Clover) ---------- */

.cu-checkout .cu-checkout__payment-section {
    margin-bottom: 40px;
}

.cu-checkout .cu-checkout__payment {
    background: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
}

.cu-checkout .cu-checkout__payment ul.payment_methods {
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
}

.cu-checkout .cu-checkout__payment ul.payment_methods > li {
    list-style: none;
    margin: 0;
    padding: 0;
    background: none;
}

/* One gateway is configured, so its radio and title are noise. */
.cu-checkout .cu-checkout__payment ul.payment_methods > li:only-child > input[type="radio"],
.cu-checkout .cu-checkout__payment ul.payment_methods > li:only-child > label {
    display: none;
}

.cu-checkout .cu-checkout__payment .payment_box {
    background: none;
    padding: 0;
    margin: 0;
}

/* Figma 1:1914 payment row: wide card number + MM/YY + CVV + ZIP on ONE row,
   labels above each field, flat white fields (the field interiors are styled
   by the checkout branch of the plugin's clover-iframe.js styles object). */
/* WooCommerce's payment list wraps the gateway in padded chrome the design
   doesn't have — flatten it so the fields align with the section heading. */
.cu-checkout ul.wc_payment_methods {
    padding: 0 !important;
    margin: 0;
    list-style: none;
    background: none;
    border: none;
}

.cu-checkout li.wc_payment_method {
    padding: 0;
    margin: 0;
    list-style: none;
}

.cu-checkout .payment_box.payment_method_clover-payments {
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
}

.cu-checkout #wc-clover-payments #payment-form,
.cu-checkout #wc-clover-payments > form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px 88px 120px;
    gap: 16px 16px;
    margin: 0;
    align-items: start;
}

.cu-checkout #wc-clover-payments .form-row {
    margin: 0 !important;
    padding: 0 !important;
    width: auto;
    grid-column: auto;
}

.cu-checkout #wc-clover-payments .form-row.top-row {
    grid-column: 1;
}

.cu-checkout #wc-clover-payments .clover-field-label {
    display: block;
    margin: 0 0 8px;
    font-family: "Proza Libre", sans-serif;
    font-size: 0.9375rem;
    color: var(--text-body-color, #4f2a10);
}

.cu-checkout #wc-clover-payments .field {
    width: 100%;
    height: 48px;
    background: #fefcf9; /* Figma-sampled field interior */
    border: 1px solid #d9c3c7; /* Figma-sampled dusty-pink field border */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: none;
}

.cu-checkout #wc-clover-payments iframe {
    width: 100%;
    height: 46px !important;
    display: block;
}

.cu-checkout #wc-clover-payments #card-response {
    grid-column: 1 / -1;
}

.cu-checkout #wc-clover-payments .clover-message {
    font-size: 0.9375rem;
    margin: 0;
}

.cu-checkout #wc-clover-payments .clover-error {
    color: #a3241f;
}

.cu-checkout #wc-clover-payments .clover-success {
    color: var(--bs-heading-color, #751144);
}

/* The gateway's own submit stays in the DOM — clover-iframe.js disables it and
   hangs its spinner off it — but the Figma's single CTA is the pay bar. */
.cu-checkout #wc-clover-payments .button-container {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* #place_order keeps its id and its hidden default state (style.css) because
   Clover clicks it. style.css also reveals it for a fully discounted cart; the
   pay bar covers that path now, so the duplicate stays hidden. The
   "Switch subscription" reveal is deliberately left alone. */
.cu-checkout #place_order.active {
    display: none;
}

.cu-checkout .place-order {
    margin: 24px 0 0;
    padding: 0;
}

.cu-checkout .woocommerce-terms-and-conditions-wrapper {
    font-size: 0.9375rem;
}

/* ---------- sidebar card ---------- */

/* The #order_review id is in these selectors on purpose: style.css gives every
   #order_review child the embossed beige panel look, and that has to lose. */
.cu-checkout #order_review .cu-checkout__card {
    background-color: var(--cu-checkout-card);
    border: 1px solid var(--cu-checkout-line);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    padding: 24px 22px 20px !important; /* .p-5 is only there as the coupon script's anchor */
    box-shadow: none;
}

.cu-checkout .cu-enrollment-summary {
    margin-top: 0;
}

/* The gift summary is a bordered card on the funnel steps; inside the checkout
   sidebar the .cu-checkout__card already provides that chrome — strip it so
   the card doesn't nest (Figma 1:2353). */
.cu-checkout .cu-enrollment-summary--gift {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
}

.cu-checkout .cu-checkout__section {
    border-top: 1px solid var(--cu-checkout-line);
    margin-top: 20px;
    padding-top: 18px;
}

.cu-checkout .cu-checkout__section-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-family: "Palatino", "Palatino Linotype", "Book Antiqua", serif;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--bs-heading-color, #751144);
    margin: 0 0 4px;
}

.cu-checkout .cu-checkout__badge {
    background-color: var(--purple, #750444);
    color: var(--beige, #f9f1d7);
    font-family: "Proza Libre", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 999px;
    padding: 5px 10px;
}

.cu-checkout .cu-checkout__section-note {
    font-size: 0.8125rem;
    color: rgba(79, 42, 16, 0.8);
    margin: 0 0 12px;
}

.cu-checkout .cu-checkout__list {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #fffdf7;
    border: 1px solid var(--cu-checkout-line);
    border-radius: 10px;
}

.cu-checkout .cu-checkout__list-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
}

.cu-checkout .cu-checkout__list-item + .cu-checkout__list-item {
    border-top: 1px solid var(--cu-checkout-line);
}

.cu-checkout .cu-checkout__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--text-body-color, #4f2a10);
}

.cu-checkout .cu-checkout__list-title {
    font-family: "Proza Libre", sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-body-color, #4f2a10);
    margin: 0;
}

.cu-checkout .cu-checkout__list-text {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: rgba(79, 42, 16, 0.8);
    margin: 3px 0 0;
}

.cu-checkout .cu-checkout__renewal {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(79, 42, 16, 0.85);
    margin: 14px 0 0;
}

/* ---------- purple payment area (coupon + totals + pay bar) ---------- */

/* #order_review in the selector: legacy style.css paints every
   `#order_review > div` as a debossed beige panel (inset shadow), and that
   ID rule outweighs a class-only selector. */
#order_review .cu-checkout__payarea {
    flex: 0 0 auto; /* never squeezed by the sidebar flex column */
    margin-top: 0; /* flush against the summary card above */
    background: var(--purple, #750444);
    box-shadow: none;
    border-radius: 0 0 12px 12px; /* square top, rounded bottom */
    overflow: hidden;
}

/* Inside the payarea the paybar needs less headroom — the coupon sits
   directly above it. */
.cu-checkout .cu-checkout__payarea .cu-checkout__paybar {
    padding-top: 6px;
}

/* ---------- coupon (lives inside the purple payment area) ---------- */

.cu-checkout .cu-checkout__coupon {
    padding: 16px 22px 0;
    margin-bottom: 0;
}

.cu-checkout .cu-checkout__coupon-label {
    font-size: 0.8125rem;
    color: rgba(249, 241, 215, 0.85);
    margin: 0 0 8px;
}

/* Empty anchor: the script in functions.php inserts the standard coupon form
   right after it. Nothing to show on its own. */
.cu-checkout .cu-checkout__coupon-anchor {
    display: none;
}

/* Only styled once the script has moved it into the anchor above — before that
   the form is still sitting at the top of the page and must stay hidden.
   #order_review is in these selectors to outweigh style.css's form-row widths. */
.cu-checkout .cu-checkout__coupon .checkout_coupon {
    display: flex !important; /* the relocation script reveals it with .show() */
    align-items: center;
    background-color: #fefcf9; /* Figma-sampled */
    border: 1px solid #e0dcd7 !important;  /* Figma-sampled; legacy form.checkout_coupon rule strips it */
    border-radius: 8px !important; /* match the Confirm-and-pay button */
    overflow: hidden;
    min-height: 48px; /* match the Confirm-and-pay button height */
    padding: 4px 6px 4px 14px !important;
    margin: 0;
    gap: 10px !important;
}

/* NOTE: do NOT hide the first <p> — in this WooCommerce version it is the
   .form-row-first that holds the coupon input itself. */
.cu-checkout .cu-checkout__coupon .checkout_coupon label,
.cu-checkout .cu-checkout__coupon .checkout_coupon .clear {
    display: none !important;
}

/* WooCommerce builds this form out of <p class="form-row"> elements that
   inherit margins, floats, and width caps from three different stylesheets.
   Take the paragraphs out of layout entirely: the input and button become
   direct flex children of the form, immune to any p/.form-row rule. */
.cu-checkout .cu-checkout__coupon .checkout_coupon p.form-row {
    display: contents !important;
}

.cu-checkout .cu-checkout__coupon .checkout_coupon input[type="text"]::placeholder {
    color: #b3aca4;
    letter-spacing: 0.04em;
}

.cu-checkout .cu-checkout__coupon .checkout_coupon input[type="text"] {
    /* Zero-basis grow: the input takes ALL free space in the row no matter
       what intrinsic/legacy widths say. */
    flex: 1 1 0% !important;
    min-width: 0;
    width: auto !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: 46px;
    line-height: 46px;
    font-size: 1rem;
    font-weight: 400 !important;
    color: var(--text-body-color, #4f2a10);
}

.cu-checkout .cu-checkout__coupon .checkout_coupon input[type="text"]:focus {
    outline: none;
}

.cu-checkout .cu-checkout__coupon .checkout_coupon button[name="apply_coupon"] {
    background: none !important;
    color: var(--pink, #c67e98) !important; /* Figma: rose, not deep plum */
    font-family: "Proza Libre", sans-serif !important;
    font-size: 0.9375rem !important;
    font-weight: 600;
    text-transform: none !important; /* Figma: "Apply coupon", not APPLY COUPON */
    border: none !important;
    border-radius: 8px !important;
    margin: 0 !important;
    padding: 8px 6px !important;
    height: auto !important;
    width: auto !important;
    flex: 0 0 auto;
    line-height: 1.2 !important;
    white-space: nowrap;
    cursor: pointer;
}

.cu-checkout .cu-checkout__coupon .checkout_coupon button[name="apply_coupon"]:hover,
.cu-checkout .cu-checkout__coupon .checkout_coupon button[name="apply_coupon"]:focus {
    text-decoration: underline;
}

/* ---------- review totals ---------- */

.cu-checkout #order_review > .cu-checkout__review {
    background-color: var(--cu-checkout-card);
    border: 1px solid var(--cu-checkout-line);
    border-top: none;
    border-radius: 0 0 12px 12px;
    box-shadow: none;
    overflow: hidden;
}

/* The summary card above already states the price, the line items and the
   membership terms. Only what the totals actually change — coupons, fees,
   taxes, shipping — is shown here, which is what frame 1:1914 does. */
.cu-checkout .cu-checkout__totals {
    width: 100%;
    margin: 0;
    border: none;
    border-collapse: collapse;
}

.cu-checkout .cu-checkout__totals thead,
.cu-checkout .cu-checkout__totals tr.cart_item,
.cu-checkout .cu-checkout__totals tr.cart-subtotal,
.cu-checkout .cu-checkout__totals tr.order-total,
.cu-checkout .cu-checkout__totals tr.cu-review-note--membership,
.cu-checkout .cu-checkout__totals tr.cu-review-note--renewal,
.cu-checkout .cu-checkout__totals tr.cu-review-note--gift {
    /* The gift row's message lives on the pay bar ("We'll email you the gift
       code and instructions") — the row itself would render dark-on-purple. */
    display: none;
}

.cu-checkout .cu-checkout__totals tr {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 22px;
}

.cu-checkout .cu-checkout__totals th,
.cu-checkout .cu-checkout__totals td {
    border: none;
    padding: 0;
    font-family: "Proza Libre", sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-body-color, #4f2a10);
    text-align: left;
}

/* Coupon rows render on the purple payment area now — light text. */
.cu-checkout .cu-checkout__totals tr.cart-discount th,
.cu-checkout .cu-checkout__totals tr.cart-discount td {
    color: var(--beige, #f9f1d7);
    white-space: nowrap;
}

.cu-checkout .cu-checkout__totals tr.cart-discount .woocommerce-remove-coupon {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: rgba(249, 241, 215, 0.7);
}

.cu-checkout .cu-checkout__totals tr.cu-review-note p {
    font-size: 0.8125rem;
    font-style: italic;
    margin: 0;
}

/* ---------- pay bar ---------- */

.cu-checkout .cu-checkout__paybar {
    background-color: var(--purple, #750444);
    color: var(--beige, #f9f1d7);
    border-radius: 0 0 12px 12px;
    padding: 18px 22px 14px;
}

.cu-checkout .cu-checkout__paybar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.cu-checkout .cu-checkout__paybar-total {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cu-checkout .cu-checkout__paybar-amount {
    /* Same face as the sidebar's top price (owner: match the top price). */
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.cu-checkout .cu-checkout__paybar button,
.cu-checkout .cu-checkout__paybar .cu-checkout__pay {
    font-family: Palatino, "Palatino Linotype", "Book Antiqua", serif !important;
    font-weight: 600;
    text-transform: none !important;
}

.cu-checkout .cu-checkout__paybar-amount .includes_tax,
.cu-checkout .cu-checkout__paybar-amount small {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
}

.cu-checkout .cu-checkout__paybar-note {
    font-size: 0.75rem;
    opacity: 0.85;
    margin-top: 2px;
}

.cu-checkout .cu-checkout__pay {
    background-color: var(--beige, #f9f1d7);
    color: var(--bs-heading-color, #751144);
    font-family: "Proza Libre", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    padding: 13px 24px;
    cursor: pointer;
}

.cu-checkout .cu-checkout__pay:hover,
.cu-checkout .cu-checkout__pay:focus {
    background-color: #fffdf7;
    color: var(--bs-heading-color, #751144);
}

.cu-checkout .cu-checkout__paybar-privacy {
    font-size: 0.6875rem;
    line-height: 1.4;
    opacity: 0.8;
    margin: 12px 0 0;
}

.cu-checkout .cu-checkout__paybar-privacy a {
    color: inherit;
    text-decoration: underline;
}

/* ---------- notices ---------- */

.cu-checkout .woocommerce-error,
.cu-checkout .woocommerce-message,
.cu-checkout .woocommerce-info {
    border-radius: 8px;
    margin-bottom: 24px;
}

/* ---------- responsive ---------- */

@media (max-width: 991px) {
    .cu-checkout .cu-checkout__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    /* One column — the vertical hairline between columns has nothing to divide. */
    .cu-checkout .cu-checkout__layout::before {
        display: none;
    }

    .cu-checkout .cu-checkout__sidebar {
        position: static;
        display: block;
        max-height: none;
    }

    /* Single column: no pinned regions, everything just flows. */
    #order_review > .cu-checkout__sidebar-inner {
        position: static;
        display: block;
    }

    .cu-checkout #order_review .cu-checkout__card {
        display: block;
    }

    .cu-checkout .cu-checkout__card-scroll {
        overflow: visible;
    }
}

@media (max-width: 575px) {
    .cu-checkout .woocommerce-billing-fields__field-wrapper {
        grid-template-columns: minmax(0, 1fr);
    }

    .cu-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
    .cu-checkout #billing_first_name_field,
    .cu-checkout #billing_last_name_field,
    .cu-checkout #billing_email_field,
    .cu-checkout #billing_country_field,
    .cu-checkout #billing_state_field,
    .cu-checkout #billing_postcode_field {
        grid-column: 1 / -1;
    }

    .cu-checkout #wc-clover-payments #payment-form,
    .cu-checkout #wc-clover-payments > form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cu-checkout #wc-clover-payments .form-row {
        grid-column: span 1;
    }

    .cu-checkout #wc-clover-payments .form-row.top-row {
        grid-column: 1 / -1;
    }

    .cu-checkout .cu-checkout__pay {
        width: 100%;
    }
}