#renewal-new-card .clean-input,
        #renewal-new-card .checkout-card-input,
        .checkout-payment .cart-payment-form .clean-input,
        .checkout-payment .checkout-card-input {
            box-sizing: border-box;
            width: 100%;
            min-height: 40px;
            padding: 10px;
            border: 1px solid #b8c1c7;
            border-radius: 3px;
            background: #fff;
            color: #455863;
        }

        .checkout-payment .checkout-card-input {
            margin-bottom: 15px;
        }

        #renewal-new-card .clean-input::placeholder,
        .checkout-payment .clean-input::placeholder {
            color: #667580;
        }

        #renewal-new-card .clean-input:focus,
        #renewal-new-card .checkout-card-input.StripeElement--focus,
        .checkout-payment .clean-input:focus,
        .checkout-payment .checkout-card-input.StripeElement--focus {
            border-color: #455863;
            outline: 2px solid #455863;
            outline-offset: 2px;
        }

        #renewal-new-card .checkout-card-input.StripeElement--invalid,
        .checkout-payment .checkout-card-input.StripeElement--invalid {
            border-color: #a82c32;
        }

        .checkout-payment #card-errors {
            color: #a82c32;
        }

        .member-payment-methods {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 24px;
            max-width: 920px;
            margin: 4px 0 36px;
        }

        .member-payment-card {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 240px;
            padding: 26px;
            border-radius: 12px;
            background: #455863;
            color: #fff;
            box-shadow: 0 8px 18px rgba(33, 48, 57, 0.16);
        }

        .member-payment-card-top,
        .member-payment-card-details {
            display: flex;
            justify-content: space-between;
            gap: 20px;
        }

        .member-payment-card-brand {
            color: #e7ce63;
            font-family: 'TradeGothicLT-BoldCondTwenty', sans-serif;
            font-size: 24px;
        }

        .member-payment-card-status,
        .member-payment-card-label {
            font-family: 'TradeGothicLT-BoldCondTwenty', sans-serif;
            font-size: 13px;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        .member-payment-card-status {
            align-self: flex-start;
            padding: 4px 0;
        }

        .member-payment-card-number {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            margin: 24px 0;
            font-size: clamp(18px, 2vw, 25px);
            letter-spacing: 0.08em;
            font-variant-numeric: tabular-nums;
        }

        .member-payment-card-details > div {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .member-payment-card-holder {
            min-width: 0;
            overflow-wrap: anywhere;
        }

        .member-payment-card-label {
            color: #e0e6e9;
        }

        .member-payment-card-expiry {
            flex-shrink: 0;
            margin-left: auto;
            text-align: right;
            font-variant-numeric: tabular-nums;
        }

        .member-payment-card-update {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 26px;
            border: 1px dashed #a6b0b6;
            border-radius: 12px;
            color: #455863;
            text-align: center;
            text-decoration: none;
        }

        .member-payment-card-update .fa {
            margin-bottom: 6px;
            color: #455863;
            font-size: 28px;
        }

        .member-payment-card-update .heavy {
            font-size: 20px;
        }

        .member-payment-card-update:hover {
            border-color: #455863;
            background: #f6f6f6;
            color: #455863;
            text-decoration: none;
        }

        .member-payment-card-update:focus-visible {
            outline: 2px solid #455863;
            outline-offset: 4px;
        }

        .member-payment-security {
            max-width: 75ch;
            color: #455863;
            font-size: 14px;
        }

        @media (max-width: 1100px) {
            .member-payment-methods {
                grid-template-columns: minmax(0, 440px);
                gap: 20px;
            }

            .member-payment-card-update {
                min-height: 150px;
            }
        }

        @media (max-width: 480px) {
            .member-payment-card {
                min-height: 210px;
                padding: 20px;
            }
        }

.checkout-card-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 20px; }
.checkout-saved-cards { margin-bottom: 24px; }
.checkout-saved-cards legend { border: 0; color: #455863; font-size: 16px; margin-bottom: 12px; }
.checkout-card-choice { display: block; position: relative; cursor: pointer; font-weight: normal; min-width: 0; }
.checkout-card-choice > input { position: absolute; top: 23px; right: 18px; z-index: 1; accent-color: #e7ce63; }
.checkout-card-choice .member-payment-card { min-height: 195px; padding: 20px; box-shadow: none; }
.checkout-card-choice .member-payment-card-status { padding-right: 24px; }
.checkout-card-choice .member-payment-card-number { font-size: 18px; gap: 10px; letter-spacing: 0.04em; }
.checkout-card-choice input:checked + .member-payment-card { outline: 3px solid #b59523; outline-offset: 3px; }
.checkout-card-choice input:focus-visible + .member-payment-card { outline: 3px solid #455863; outline-offset: 5px; }
.checkout-new-card-choice, .checkout-save-card { display: flex; align-items: baseline; gap: 8px; margin: 16px 0; color: #455863; }
.checkout-save-card input, .checkout-new-card-choice input { accent-color: #455863; }
.member-payment-card-details > span { display: flex; flex-direction: column; gap: 4px; }
.member-payment-card-expired { background: #596168; }
.member-payment-card-actions { display: flex; flex-wrap: wrap; gap: 20px; margin: 14px 0 8px; }
.member-card-action { padding: 0; border: 0; background: transparent; color: #455863; text-decoration: underline; text-underline-offset: 3px; }
.member-card-action:hover { color: #252f35; }
.member-card-action:focus-visible { outline: 2px solid #455863; outline-offset: 4px; }
.member-card-action:disabled { opacity: 0.65; cursor: not-allowed; text-decoration: none; }
.member-payment-method { min-width: 0; }
.member-payment-card-update { min-height: 195px; align-self: start; }
@media (max-width: 1400px) { .checkout-card-choices { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .checkout-card-choice .member-payment-card-number { font-size: 17px; } }

.has-auto-renew .auto-renew { grid-area: autorenew; min-width: 0; text-align: center; }
.license_header.has-auto-renew, .license_row.has-auto-renew {
    grid-template-columns: minmax(0, 84px) minmax(120px, 1fr) 24px;
    grid-template-areas: "addon autorenew options" "licensekey licensekey licensekey" "status validuntil ." "download download download" "productiondomain productiondomain productiondomain" "notes notes notes";
    gap: 2px 10px;
    padding: 6px 10px;
}
.license_header.has-auto-renew { min-height: 37px; align-content: center; padding-block: 3px; line-height: 20px; font-size: calc(12px + 1pt); }
.has-auto-renew .license-key, .has-auto-renew .production_domain, .has-auto-renew .notes { overflow-wrap: anywhere; min-width: 0; }
.renewal-control { display: grid; grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr); column-gap: 4px; align-items: center; line-height: 18px; padding: 3px 0; }
.renewal-switch { appearance: none; -webkit-appearance: none; position: relative; width: 32px; height: 18px; margin: 0; border: 1px solid #edc857; border-radius: 12px; background: #fff; cursor: pointer; vertical-align: middle; flex-shrink: 0; }
.renewal-switch::before { content: ""; position: absolute; width: 14px; height: 14px; top: 1px; left: 1px; border-radius: 50%; background: #edc857; transition: transform 120ms ease-out; }
.renewal-switch:not(:checked) { border-color: #87949c; }
.renewal-switch:not(:checked)::before { background: #87949c; }
.renewal-switch:checked { background: #edc857; }
.renewal-switch:checked::before { background: #fff; transform: translateX(14px); }
.renewal-switch:focus-visible, .renewal-info summary:focus-visible, .renewal-dialog button:focus-visible, .renewal-dialog a:focus-visible { outline: 2px solid #455863; outline-offset: 3px; }
.renewal-switch:disabled { opacity: .6; cursor: wait; }
.renewal-next { grid-column: 1 / -1; color: #455863; font-size: 11px; }
.renewal-row-message { grid-column: 1 / -1; font-size: 11px; line-height: 16px; }
.renewal-row-message:empty { display: none; }
.renewal-managed, .renewal-unavailable { display: inline-block; font-size: 11px; line-height: 16px; }
.renewal-managed { text-decoration: underline; text-underline-offset: 2px; }
.renewal-info { position: relative; display: inline-block; margin-left: 2px; }
.renewal-info summary { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; cursor: pointer; list-style: none; }
.license_header .renewal-heading { position: relative; display: inline-block; white-space: nowrap; }
.license_header .renewal-heading .renewal-info { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); }
.license_header .renewal-heading .renewal-info[open] { z-index: 5; }
.license_header .renewal-heading .renewal-info p { right: -45px; white-space: normal; }
.renewal-control .renewal-switch { grid-column: 2; margin: 0; }
.renewal-control .renewal-info { justify-self: start; margin-left: 0; }
.renewal-control .renewal-info summary { display: flex; font-size: 15px; line-height: 1; }
.renewal-info summary::-webkit-details-marker { display: none; }
.renewal-info p { position: absolute; z-index: 5; top: 24px; right: -70px; width: 220px; box-sizing: border-box; margin: 0; padding: 12px; border: 1px solid #667580; background: #fff; color: #455863; font: 13px/1.5 Verdana, sans-serif; text-transform: none; }
.renewal-feedback { padding: 12px 0; color: #455863; font-size: 14px; line-height: 1.5; }
.renewal-feedback[hidden], .renewal-dialog [hidden], #renewal-retry[hidden], .renewal-cancel-pending[hidden] { display: none; }
.renewal-cancel-pending { grid-column: 1 / -1; padding: 0; border: 0; background: transparent; color: #455863; text-decoration: underline; font-size: 12px; text-align: left; }
.cart-renewal { margin-top: 10px; font-size: 13px; font-weight: normal; }
.renewal-switch-label { display: flex; gap: 8px; align-items: center; cursor: pointer; min-height: 44px; margin: 0; }
.renewal-switch-label small { display: block; font-size: 12px; line-height: 18px; }
.cart-renewal-quantity { display: flex; gap: 8px; align-items: center; margin: 4px 0; font-size: 12px; }
.cart-renewal-quantity input { width: 55px; padding: 3px 5px; border: 1px solid #667580; border-radius: 3px; color: #455863; }
.annual-renewals { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; margin: 14px 0 0; line-height: 1.4; color: #455863; font-size: 14px; }
.annual-renewals small { display: block; color: #52636e; font-size: calc(13px + 1pt); }
.annual-renewals > span { white-space: nowrap; font-size: calc(14px + 1pt); }
.annual-renewal-details { grid-column: 1 / -1; }
.annual-renewal-details summary { display: flex; align-items: center; gap: 8px; width: fit-content; cursor: pointer; list-style: none; }
.annual-renewal-details summary::-webkit-details-marker { display: none; }
.annual-renewal-details summary::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1px 1px 0; transform: translateY(-2px) rotate(45deg); }
.annual-renewal-details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.annual-renewal-details summary small { display: inline; }
.annual-renewal-details ul { margin: 6px 0 0; padding: 0; list-style: none; }
.annual-renewal-details li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.annual-renewal-details li > :first-child { min-width: 0; overflow-wrap: anywhere; }
.annual-renewal-details li > :last-child { white-space: nowrap; }

.renewal-dialog { width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; padding: 28px; border: 1px solid #667580; border-radius: 4px; color: #455863; background: #fff; }
.renewal-dialog::backdrop { background: rgba(31, 43, 50, .6); }
.renewal-dialog h2 { margin: 0 28px 20px 0; }
.renewal-dialog p { margin: 10px 0 24px; line-height: 1.5; }
.renewal-dialog .fancy-button { white-space: normal; }
.renewal-dialog-close { position: absolute; right: 8px; top: 8px; width: 36px; height: 36px; border: 0; background: transparent; color: #455863; font-size: 26px; cursor: pointer; }
#renewal-new-card { overflow: visible; }
#renewal-card-select {
    width: 100%;
    min-height: 44px;
    margin-bottom: 12px;
    padding-inline: 12px;
    border-color: #c6d0d6;
    font: 16px/1.4 system-ui, sans-serif;
    color: #455863;
    background-color: #fff;
}
#renewal-card-select option { font: inherit; }
#renewal-card-select:focus-visible { outline: 2px solid #9e7412; outline-offset: 2px; }
@supports (appearance: base-select) {
    #renewal-card-select,
    #renewal-card-select::picker(select) { appearance: base-select; }
    #renewal-card-select { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; }
    #renewal-card-select::picker(select) {
        margin-block-start: 4px;
        padding: 4px;
        border: 1px solid #c6d0d6;
        border-radius: 4px;
        background: #fff;
        box-shadow: 0 4px 12px rgb(31 43 50 / 12%);
    }
    #renewal-card-select option { min-height: 40px; padding: 8px 10px; border-radius: 3px; }
    #renewal-card-select option:checked { background: #fff5d7; }
    #renewal-card-select option:hover,
    #renewal-card-select option:focus-visible { background: #eef2f4; }
}
.renewal-charge-summary { margin: 4px 0 16px; }
#renewal-new-card:not([hidden]) + .renewal-charge-summary { margin-top: 12px; }
.renewal-due-today { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #e0e4e7; font-size: 18px; }
#renewal-new-card label,
.renewal-card-label { display: block; margin-bottom: 5px; }
#renewal-new-card .clean-input { margin-bottom: 12px; }
#renewal-payment-dialog { width: min(480px, calc(100vw - 32px)); }
#renewal-payment-submit { display: block; max-width: 100%; margin-inline: auto; font-size: 1.15rem; }
.renewal-dialog #renewal-payment-error { color: #a82c32; margin: 12px 0; }
@media (max-width: 1199px) {
    .license_header.has-auto-renew { grid-template-areas: "addon autorenew options"; }
    .license_header.has-auto-renew > :not(.add-on):not(.auto-renew) { display: none; }
}
@media (min-width: 1200px) {
    .license_header.has-auto-renew, .license_row.has-auto-renew {
        grid-template-columns: 100px 156px minmax(150px, 1.6fr) 90px 90px minmax(120px, 1fr) 24px;
        grid-template-areas: "addon autorenew licensekey status validuntil download options" "addon autorenew productiondomain productiondomain notes notes options";
    }
}
@media (min-width: 1550px) {
    .license_header.has-auto-renew, .license_row.has-auto-renew {
        grid-template-columns: minmax(100px, 110px) 156px minmax(250px, 1.8fr) 90px 90px minmax(160px, 1fr) minmax(150px, 1.2fr) minmax(110px, 1fr) 24px;
        grid-template-areas: "addon autorenew licensekey status validuntil download productiondomain notes options";
    }
}
@media (prefers-reduced-motion: reduce) { .renewal-switch::before { transition: none; } }

.checkout-summary-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 20px;
}
.checkout-summary-heading #pay-button { margin-left: auto; }
.checkout-summary-heading #pay-button:disabled {
    opacity: .65;
    cursor: not-allowed;
    color: #fff;
    background-color: #8b6b20;
}
.checkout-summary-heading #pay-button[aria-busy="true"] { cursor: progress; }

.checkout-cart-box { container: checkout-cart / inline-size; }

.checkout-cart-items th {
    padding: 0 8px 10px;
    color: #455863;
    font-size: 13px;
}
.checkout-cart-items th:first-child { padding-left: 0; }
.checkout-cart-items th.checkout-cart-renewal { white-space: nowrap; }
.checkout-cart-items thead tr,
.checkout-cart-items tbody tr:last-child { border-bottom: 1px solid #e6e6e6; }
.checkout-cart-items tbody tr:first-child td { padding-top: 13px; }
.checkout-cart-items tfoot tr:first-child td { padding-top: 13px; }
.checkout-cart-items .checkout-cart-quantity,
.checkout-cart-items .checkout-cart-renewal { text-align: center; }
.checkout-cart-items .checkout-cart-quantity,
.checkout-cart-items .checkout-cart-renewal,
.checkout-cart-items .cart-item-prices { width: 1%; }
.checkout-cart-items .checkout-cart-product { display: flex; align-items: center; gap: 10px; overflow-wrap: anywhere; }
.checkout-cart-items .product-icon { flex: none; text-align: center; }
.checkout-cart-items .cart-renewal { margin: 0; }
.checkout-cart-items .renewal-switch-label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr);
    gap: 4px;
}
.checkout-cart-items .renewal-switch-label .renewal-switch { grid-column: 2; margin: 0; }
.checkout-cart-items .cart-item-prices .price,
.checkout-cart-items .cart-total-amount { white-space: nowrap; }

.checkout-cart-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid #d4d9dd;
    border-radius: 6px;
    background: #fff;
    font: 14px/1 Arial, sans-serif;
}
.checkout-cart-stepper input,
.checkout-cart-fixed-quantity {
    appearance: textfield;
    width: 24px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
    font: inherit;
    color: inherit;
}
.checkout-cart-stepper input::-webkit-inner-spin-button,
.checkout-cart-stepper input::-webkit-outer-spin-button { appearance: none; }
.checkout-cart-stepper button,
.checkout-cart-stepper .checkout-cart-remove {
    display: grid;
    place-items: center;
    width: 25px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: inherit;
    font: 18px/1 Arial, sans-serif;
}
.checkout-cart-stepper .checkout-cart-remove { text-decoration: none; }
.checkout-cart-stepper .checkout-cart-remove:hover { background: #edf0f2; }
.checkout-cart-stepper .checkout-cart-remove:focus-visible { outline: 2px solid #455863; outline-offset: -2px; }
.checkout-cart-stepper button:not(:disabled):not([aria-disabled="true"]):hover { background: #edf0f2; }
.checkout-cart-stepper button:focus-visible { outline: 2px solid #455863; outline-offset: -2px; }
.checkout-cart-stepper button:disabled,
.checkout-cart-stepper button[aria-disabled="true"] { opacity: .45; }
.checkout-cart-item .checkout-cart-trash.fa,
.cart-item-box .checkout-cart-remove .fa { font-size: 13px; line-height: 1; }
.checkout-cart-stepper [hidden],
.checkout-cart-item .checkout-cart-remove[hidden] { display: none; }

@media (max-width: 479px) {
    .checkout-cart-box { padding-inline: 10px; }
}

@container checkout-cart (max-width: 420px) {
    .checkout-cart-items { table-layout: fixed; }
    .checkout-cart-items th { font-size: 12px; }
    .checkout-cart-items th,
    .checkout-cart-items tr.cart-item-box td { padding-inline: 4px; }
    .checkout-cart-items th.checkout-cart-quantity { width: 33%; }
    .checkout-cart-items th.checkout-cart-renewal { width: 27%; }
    .checkout-cart-items th:last-child { width: 22%; }
    .checkout-cart-items .cart-item-prices .price,
    .checkout-cart-items .cart-total-amount { white-space: normal; }
    .checkout-cart-items .cart-total-amount { font-size: 1rem; overflow-wrap: anywhere; }
    .checkout-cart-items .checkout-cart-product { align-items: flex-start; flex-direction: column; gap: 4px; }
    .checkout-cart-items .product-icon { width: 28px; height: 28px; line-height: 28px; }
    .checkout-cart-items .product-icon .fa { font-size: 16px; line-height: 28px; }
    .checkout-cart-stepper button { width: 23px; }
}