/* ==========================================================================
   Checkout Forms — Shared styles for create account, guest checkout
   ========================================================================== */

:root {
    --cf-heading: #3B4458;
    --cf-text: #4a4a4a;
    --cf-muted: #6c757d;
    --cf-border: #d1d5db;
    --cf-border-focus: #AD0000;
    --cf-bg: #fff;
    --cf-bg-page: #f7f8fa;
    --cf-red: #AD0000;
    --cf-red-hover: #8a0000;
    --cf-radius: 8px;
    --cf-radius-sm: 6px;
    --cf-transition: 200ms ease;
    --cf-input-height: 46px;
    --cf-shadow-focus: 0 0 0 3px rgba(173, 0, 0, 0.1);
}

/* --------------------------------------------------------------------------
   Page Layout — hide sidebars, center form
   -------------------------------------------------------------------------- */
body.checkout-form-active #navColumnOne,
body.checkout-form-active #navColumnTwo,
body.checkout-form-active .leftBoxContainer,
body.checkout-form-active .rightBoxContainer {
    display: none !important;
}

body.checkout-form-active .col-md-8,
body.checkout-form-active .col-md-9,
body.checkout-form-active .col-xl-10 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* --------------------------------------------------------------------------
   Form Container
   -------------------------------------------------------------------------- */
.cf-page {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 16px 60px;
}

.cf-page--with-sidebar {
    max-width: 1100px;
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 40px;
    align-items: start;
}

.cf-page__heading {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--cf-heading);
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.cf-page__subtext {
    font-size: 0.875rem;
    color: var(--cf-muted);
    margin: 0 0 32px 0;
    line-height: 1.5;
}

.cf-page__subtext a {
    color: var(--cf-red);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Form Sections
   -------------------------------------------------------------------------- */
.cf-section {
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid #e8ebef;
}

.cf-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.cf-section__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--cf-heading);
    margin: 0 0 20px 0;
    letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   Form Fields
   -------------------------------------------------------------------------- */
.cf-field {
    margin-bottom: 16px;
}

.cf-field:last-child {
    margin-bottom: 0;
}

.cf-field label,
.cf-field .inputLabel {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cf-heading);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}

.cf-field input[type="text"],
.cf-field input[type="email"],
.cf-field input[type="password"],
.cf-field input[type="tel"],
.cf-field input[type="number"],
.cf-field select,
.cf-field .form-control {
    width: 100%;
    height: var(--cf-input-height);
    padding: 0 14px;
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-sm);
    font-size: 0.9375rem;
    color: var(--cf-heading);
    background: var(--cf-bg);
    transition: border-color var(--cf-transition), box-shadow var(--cf-transition);
    -webkit-appearance: none;
    appearance: none;
}

.cf-field input:focus,
.cf-field select:focus,
.cf-field .form-control:focus {
    outline: none;
    border-color: var(--cf-border-focus);
    box-shadow: var(--cf-shadow-focus);
}

.cf-field input::placeholder {
    color: #adb5bd;
    font-weight: 400;
}

/* Two-column field row */
.cf-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Three-column for city/state/zip */
.cf-field-row--address {
    grid-template-columns: 2fr 1fr 1fr;
}

/* Checkbox styling */
.cf-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
}

.cf-checkbox input[type="checkbox"],
.cf-checkbox input[type="radio"],
.cf-checkbox input.custom-control-input[type="checkbox"],
.cf-checkbox input.custom-control-input[type="radio"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--cf-red);
    position: static !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    clip: auto !important;
    overflow: visible !important;
}

.cf-checkbox label {
    font-size: 0.875rem;
    color: var(--cf-text);
    font-weight: 400;
    margin: 0;
    cursor: pointer;
    line-height: 1.4;
}

/* Gender radios inline */
.cf-gender-row {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
}

/* Company toggle */
.cf-company-toggle {
    display: inline-block;
    font-size: 0.8125rem;
    color: var(--cf-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 16px;
    transition: color var(--cf-transition);
}

.cf-company-toggle:hover {
    color: var(--cf-heading);
}

.cf-company-field {
    display: none;
}

.cf-company-field.is-open {
    display: block;
}

/* Required indicator */
.cf-required {
    color: var(--cf-red);
    font-weight: 400;
    margin-left: 2px;
}

/* --------------------------------------------------------------------------
   Submit Button
   -------------------------------------------------------------------------- */
.cf-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 52px;
    margin-top: 28px;
    background: var(--cf-red);
    color: #fff;
    border: none;
    border-radius: var(--cf-radius);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all var(--cf-transition);
    text-decoration: none;
    text-transform: uppercase;
}

/* Inert until a payment method is chosen (#1418). Without a visible disabled state the
   button looks identical to an active one, so the customer clicks and nothing happens -
   worse than the error it replaces. Hover/active effects are suppressed to match. */
.cf-submit-btn:disabled,
.cf-submit-btn[aria-disabled="true"] {
    background: var(--cf-red);
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.cf-submit-btn:hover {
    background: var(--cf-red-hover);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.cf-submit-btn:disabled:hover,
.cf-submit-btn[aria-disabled="true"]:hover {
    background: var(--cf-red);
    box-shadow: none;
    transform: none;
}

.cf-submit-btn:active {
    transform: translateY(0);
}

.cf-submit-btn:focus {
    outline: 2px solid var(--cf-red);
    outline-offset: 2px;
}

.cf-submit-btn i {
    font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   Trust / Security
   -------------------------------------------------------------------------- */
.cf-trust-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 0.75rem;
    color: var(--cf-muted);
    letter-spacing: 0.02em;
}

.cf-trust-bar i {
    color: #4caf50;
    font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   Error Messages
   -------------------------------------------------------------------------- */
.cf-page .messageStackError,
.cf-page .alert-danger {
    border-radius: var(--cf-radius-sm);
    border: 1px solid #f5c6cb;
    margin-bottom: 20px;
}

/* --------------------------------------------------------------------------
   Step Progress Indicator
   -------------------------------------------------------------------------- */
.cf-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 32px;
    padding: 0;
}

.cf-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    position: relative;
}

.cf-step:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -12px;
    top: 50%;
    width: 24px;
    height: 1px;
    background: var(--cf-border);
}

.cf-step__number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    background: #e8ebef;
    color: var(--cf-muted);
    flex-shrink: 0;
    transition: all var(--cf-transition);
}

.cf-step__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--cf-muted);
    transition: color var(--cf-transition);
}

.cf-step--active .cf-step__number {
    background: #4caf50;
    color: #fff;
}

.cf-step--active .cf-step__label {
    color: var(--cf-heading);
    font-weight: 700;
}

.cf-step--completed .cf-step__number {
    background: #5a7a9b;
    color: #fff;
}

.cf-step--completed .cf-step__label {
    color: var(--cf-muted);
}

/* --------------------------------------------------------------------------
   Address Block
   -------------------------------------------------------------------------- */
.cf-address-block__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.cf-address-block__edit {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cf-red);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--cf-transition);
}

.cf-address-block__edit:hover {
    color: var(--cf-red-hover);
}

.cf-address-block__address {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--cf-text);
    font-style: normal;
    background: var(--cf-bg);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-sm);
    padding: 16px;
}

/* --------------------------------------------------------------------------
   Shipping Method Options
   -------------------------------------------------------------------------- */
.cf-shipping-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 2px solid var(--cf-border);
    border-radius: var(--cf-radius-sm);
    margin-bottom: 10px;
    cursor: pointer;
    transition: all var(--cf-transition);
    background: var(--cf-bg);
}

.cf-shipping-option:hover {
    border-color: #adb5bd;
}

.cf-shipping-option--selected {
    border-color: #4caf50;
    background: #f5faf5;
}

.cf-shipping-option--error {
    border-color: #f5c6cb;
    background: #fff5f5;
    cursor: default;
    color: #721c24;
}

.cf-shipping-option__radio {
    flex-shrink: 0;
}

.cf-shipping-option__radio input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--cf-red);
    cursor: pointer;
}

.cf-shipping-option__info {
    flex: 1;
}

.cf-shipping-option__info strong {
    font-size: 0.9375rem;
    color: var(--cf-heading);
}

.cf-shipping-option__desc {
    font-size: 0.8125rem;
    color: var(--cf-muted);
    margin-top: 2px;
}

.cf-shipping-option__price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cf-heading);
    white-space: nowrap;
}

/* Highlight selected shipping option on change */
.cf-shipping-option:has(input[type="radio"]:checked) {
    border-color: #4caf50;
    background: #f5faf5;
}

/* --------------------------------------------------------------------------
   Order Summary Sidebar
   -------------------------------------------------------------------------- */
.cf-sidebar {
    position: sticky;
    top: 20px;
}

.cf-sidebar__inner {
    background: #f7f8fa;
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius);
    padding: 24px;
}

.cf-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.cf-sidebar__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--cf-heading);
    margin: 0;
}

.cf-sidebar__edit {
    font-size: 0.8125rem;
    color: var(--cf-red);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cf-sidebar__items {
    border-bottom: 1px solid var(--cf-border);
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.cf-sidebar__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.cf-sidebar__item-image {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    border: 1px solid var(--cf-border);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    padding: 4px;
}

.cf-sidebar__item-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cf-sidebar__item-qty {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--cf-heading);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cf-sidebar__item-info {
    flex: 1;
    min-width: 0;
}

.cf-sidebar__item-name {
    font-size: 0.8125rem;
    color: var(--cf-heading);
    text-decoration: none;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cf-sidebar__item-name:hover {
    color: var(--cf-red);
}

.cf-sidebar__item-price {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cf-heading);
    white-space: nowrap;
}

.cf-sidebar__totals {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cf-sidebar__row {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: var(--cf-text);
}

.cf-sidebar__row--total {
    border-top: 2px solid var(--cf-heading);
    padding-top: 12px;
    margin-top: 4px;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--cf-heading);
}

/* --------------------------------------------------------------------------
   Review / Confirmation Grid
   -------------------------------------------------------------------------- */
.cf-review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.cf-review-block__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.cf-review-block__value {
    font-size: 0.9375rem;
    color: var(--cf-text);
    line-height: 1.5;
    padding: 12px 16px;
    background: var(--cf-bg);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-sm);
}

.cf-review-block__detail {
    display: flex;
    justify-content: space-between;
    font-size: 0.8125rem;
    color: var(--cf-muted);
    padding: 4px 16px;
}

.cf-review-block__detail-label {
    font-weight: 500;
}

@media (max-width: 575px) {
    .cf-review-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* --------------------------------------------------------------------------
   Collapsible Sections (coupons, rewards)
   -------------------------------------------------------------------------- */
.cf-collapsible {
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-sm);
    background: var(--cf-bg);
    overflow: hidden;
}

.cf-collapsible__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--cf-heading);
    text-align: left;
    transition: background var(--cf-transition);
}

.cf-collapsible__toggle:hover {
    background: #f7f8fa;
}

.cf-collapsible__icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--cf-muted);
    flex-shrink: 0;
}

.cf-collapsible__body {
    padding: 0 16px 16px;
}

/* --------------------------------------------------------------------------
   Payment Method Cards
   -------------------------------------------------------------------------- */
.cf-payment-method {
    border: 2px solid var(--cf-border) !important;
    border-radius: var(--cf-radius-sm) !important;
    margin-bottom: 10px !important;
    overflow: hidden;
    transition: border-color var(--cf-transition);
    background: var(--cf-bg) !important;
    box-shadow: none !important;
}

.cf-payment-method:hover {
    border-color: #adb5bd !important;
}

.cf-payment-method--selected {
    border-color: var(--cf-red) !important;
    background: #fef5f5 !important;
}

.cf-payment-method__header {
    display: flex !important;
    align-items: center;
    gap: 16px;
    padding: 16px !important;
    background: transparent !important;
    border-bottom: none !important;
    cursor: pointer;
}

.cf-payment-method__radio input[type="radio"],
.cf-payment-method__radio .custom-control-input {
    width: 20px !important;
    height: 20px !important;
    accent-color: var(--cf-red);
    cursor: pointer;
    position: static !important;
    opacity: 1 !important;
    z-index: auto !important;
    margin: 0 !important;
    -webkit-appearance: radio !important;
    appearance: radio !important;
}

/* Hide Bootstrap's custom-control pseudo-elements for payment radios */
.cf-payment-method .custom-control-label::before,
.cf-payment-method .custom-control-label::after {
    display: none !important;
}

.cf-payment-method .custom-control {
    padding-left: 0 !important;
    min-height: auto !important;
}

.cf-payment-method__radio {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 8px;
}

.cf-payment-method__label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--cf-heading);
    cursor: pointer;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cf-pmt-icon {
    flex-shrink: 0;
}

.cf-pmt-cards {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    font-size: 1.75rem;
}

.cf-payment-method__fields {
    padding: 0 16px 16px !important;
    border-top: 1px solid var(--cf-border);
    margin-top: 0;
}

.cf-payment-method__fields .cf-field {
    margin-bottom: 12px;
}

.cf-payment-method__error {
    padding: 12px 16px;
    color: #721c24;
    font-size: 0.875rem;
}

/* Order totals table */
.cf-totals-table {
    margin: 0;
}

.cf-totals-table td {
    padding: 8px 0 !important;
    border-top: 1px solid #e8ebef !important;
}

.cf-totals-table tr:first-child td {
    border-top: none !important;
}

.cf-totals-table .totalBox {
    font-weight: 700;
    font-size: 1.125rem;
}

/* Override card styles specifically inside cf-page--payment */
.cf-page--payment .card {
    border: none;
    background: none;
    box-shadow: none;
}

.cf-page--payment .card-header {
    display: flex;
    background: none;
    border: none;
    padding: 0;
}

.cf-page--payment .card-body {
    padding: 0;
}

/* But restore them for payment method cards */
.cf-page--payment .cf-payment-method.card {
    border: 2px solid var(--cf-border) !important;
    background: var(--cf-bg) !important;
}

.cf-page--payment .cf-payment-method .card-header {
    display: flex !important;
    padding: 16px !important;
}

.cf-page--payment .cf-payment-method .card-body {
    padding: 0 16px 16px !important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .cf-page--with-sidebar {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media (max-width: 575px) {
    .cf-page {
        padding: 0 12px 40px;
    }

    .cf-steps {
        gap: 0;
        margin-bottom: 24px;
    }

    .cf-step {
        padding: 0 12px;
    }

    .cf-step__number {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .cf-step__label {
        font-size: 0.75rem;
    }

    .cf-step:not(:last-child)::after {
        width: 16px;
        right: -8px;
    }

    .cf-page__heading {
        font-size: 1.375rem;
    }

    .cf-field-row {
        grid-template-columns: 1fr;
    }

    .cf-field-row--address {
        grid-template-columns: 1fr;
    }

    .cf-field input[type="text"],
    .cf-field input[type="email"],
    .cf-field input[type="password"],
    .cf-field input[type="tel"],
    .cf-field select,
    .cf-field .form-control {
        height: 50px;
        font-size: 1rem;
    }

    .cf-submit-btn {
        height: 50px;
        font-size: 1rem;
    }
}

/* --------------------------------------------------------------------------
   Hide default ZC card styling when inside cf-page
   -------------------------------------------------------------------------- */
.cf-page .card,
.cf-page .card-columns {
    all: unset;
    display: block;
}

.cf-page .card-header {
    all: unset;
    display: none;
}

.cf-page .card-body {
    all: unset;
    display: block;
}

.cf-page .card-columns {
    column-count: unset;
}

.cf-page .p-2 {
    display: none;
}

.cf-page .p-3 {
    padding: 0 !important;
}

.cf-page .mb-3 {
    margin-bottom: 0 !important;
}

.cf-page .required-info {
    display: none;
}

/* Fix ZenCart custom-control radio/checkbox rendering */
.cf-page .custom-control {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    padding-left: 0;
}

.cf-page .custom-control-input {
    all: unset;
    -webkit-appearance: auto;
    appearance: auto;
    width: 18px;
    height: 18px;
    accent-color: var(--cf-red);
    position: static;
    z-index: auto;
    opacity: 1;
    cursor: pointer;
}

.cf-page .custom-control-label {
    all: unset;
    font-size: 0.875rem;
    color: var(--cf-text);
    cursor: pointer;
    padding-left: 0;
}

.cf-page .custom-control-label::before,
.cf-page .custom-control-label::after {
    display: none;
}

/* --------------------------------------------------------------------------
   Better Together Upsell (#415)

   A list, not a merchandising grid. This sits on the shipping step directly
   above "Continue to Payment", so it is deliberately quieter than the primary
   CTA: no red, no card shadow, outline button. The only saturated colour is
   the saving figure, which is the one thing worth a glance.
   -------------------------------------------------------------------------- */
.cf-upsell__lead {
    font-size: 0.875rem;
    color: var(--cf-muted);
    margin: -4px 0 14px;
}

.cf-upsell__grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cf-upsell__card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: var(--cf-bg);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-sm);
    transition: border-color var(--cf-transition);
}

.cf-upsell__card:hover {
    border-color: var(--cf-heading);
}

.cf-upsell__thumb {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: 1px solid var(--cf-border);
    border-radius: 6px;
    background: #fff;
}

.cf-upsell__thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cf-upsell__info {
    flex: 1;
    min-width: 0;
}

.cf-upsell__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.875rem;
    line-height: 1.3;
    color: var(--cf-heading);
    text-decoration: none;
}

.cf-upsell__name:hover {
    color: var(--cf-red);
}

.cf-upsell__pricing {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.cf-upsell__price {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--cf-heading);
}

.cf-upsell__save {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #2e7d32;
    background: #e8f5e9;
    border-radius: 100px;
    padding: 3px 9px;
    white-space: nowrap;
}

.cf-upsell__btn {
    flex-shrink: 0;
    padding: 9px 18px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cf-heading);
    background: none;
    border: 1px solid var(--cf-heading);
    border-radius: var(--cf-radius-sm);
    cursor: pointer;
    transition: background var(--cf-transition), color var(--cf-transition);
}

.cf-upsell__btn:hover {
    background: var(--cf-heading);
    color: #fff;
}

.cf-upsell__btn:focus {
    outline: none;
    box-shadow: var(--cf-shadow-focus);
}

@media (max-width: 575px) {
    .cf-upsell__card {
        flex-wrap: wrap;
    }

    .cf-upsell__info {
        flex: 1 1 60%;
    }

    .cf-upsell__btn {
        flex: 1 1 100%;
    }
}