/* ============================================================
   SWISSTIMEPIECES FINANCE — CONFIG-DRIVEN PRESENTATION
   Base component styles; production cascade retained where behaviour-sensitive
============================================================ */

#stp-finance-system,
#stp-finance-system * {
    box-sizing: border-box;
}

#stp-finance-system {
    width: 100%;
    color: var(--stp-color-ink);
    font-family: inherit;
}

#stp-finance-system [hidden] {
    display: none !important;
}


/* ============================================================
   FOCUS
============================================================ */

#stp-finance-system button:focus-visible,
#stp-finance-system input:focus-visible,
#stp-finance-system select:focus-visible,
#stp-finance-system a:focus-visible {

    outline: 2px solid var(--stp-color-ink);
    outline-offset: 3px;
}


/* ============================================================
   ELIGIBILITY
============================================================ */

.stp-finance-eligibility-message {

    width: 100%;

    padding: 15px 17px;

    border: 1px solid var(--stp-color-border-de);

    background: var(--stp-color-surface-f7);

    color: var(--stp-color-gray555);

    font-size: var(--stp-font-size-12);

    line-height: 1.6;
}


/* ============================================================
   TRIGGER
============================================================ */

.stp-finance-trigger {

    width: 100%;
    min-height: 56px;

    padding: 14px 20px;

    border: 1px solid var(--stp-color-ink);
    border-radius: 0;

    background: var(--stp-color-ink);
    color: var(--stp-color-white);

    font: inherit;
    font-size: var(--stp-font-size-12);
    font-weight: var(--stp-font-weight-semi-bold);

    letter-spacing: 1.1px;

    cursor: pointer;

    transition:
        background var(--stp-motion-quick),
        color var(--stp-motion-quick),
        border-color var(--stp-motion-quick);
}

.stp-finance-trigger:hover {

    border-color: var(--stp-color-accent);
    background: var(--stp-color-accent);
    color: var(--stp-color-ink);
}

.stp-trigger-selected {
    display: none;
}

.stp-trigger-check {
    margin-right: 5px;
}

#stp-finance-system.has-illustration
.stp-trigger-standard {
    display: none;
}

#stp-finance-system.has-illustration
.stp-trigger-selected {
    display: inline;
}


/* ============================================================
   SELECTED SUMMARY
============================================================ */

.stp-finance-selected-summary {

    margin-top: 10px;

    padding: 16px 17px;

    border: 1px solid var(--stp-color-border-de);

    background: var(--stp-color-surface-f7);
}

.stp-selected-header {

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.stp-selected-kicker {

    display: block;

    margin-bottom: 5px;

    color: var(--stp-color-gray777);

    font-size: var(--stp-font-size-9);

    letter-spacing: 1.5px;
}

.stp-selected-header strong {

    display: block;

    font-size: var(--stp-font-size-15);
}

.stp-selected-actions {

    display: flex;

    gap: 13px;
}

.stp-selected-actions button {

    padding: 0;

    border: 0;

    background: transparent;

    color: var(--stp-color-ink);

    font: inherit;
    font-size: var(--stp-font-size-11);

    text-decoration: underline;

    cursor: pointer;
}

.stp-selected-meta {

    display: flex;
    flex-wrap: wrap;

    gap: 7px 17px;

    margin-top: 10px;

    color: var(--stp-color-gray666);

    font-size: var(--stp-font-size-11);
}

.stp-selected-recalculated {

    margin: 13px 0 0;

    padding-top: 12px;

    border-top: 1px solid var(--stp-color-border-de);

    color: var(--stp-color-gray666);

    font-size: var(--stp-font-size-10-5);

    line-height: 1.55;
}


/* ============================================================
   MODAL
============================================================ */

.stp-finance-modal {

    position: fixed;

    inset: 0;

    z-index: 999999;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 24px;
}

.stp-finance-modal.open {
    display: flex;
}

.stp-finance-overlay {

    position: absolute;

    inset: 0;

    background: var(--stp-color-overlay);

    backdrop-filter: blur(4px);
}

.stp-finance-dialog {

    position: relative;

    z-index: 2;

    width: min(1060px, 100%);

    max-height: calc(var(--stp-layout-viewport-height) - 48px);

    overflow-y: auto;
    overflow-x: hidden;

    background: var(--stp-color-white);

    box-shadow:
        0 30px 100px
        var(--stp-color-shadow);
}

.stp-finance-close {

    position: absolute;

    z-index: 20;

    top: 15px;
    right: 17px;

    width: 38px;
    height: 38px;

    padding: 0;

    border: 0;

    background: transparent;

    color: var(--stp-color-ink);

    font: inherit;
    font-size: var(--stp-font-size-30);
    font-weight: var(--stp-font-weight-light);

    cursor: pointer;
}


/* ============================================================
   PROGRESS
============================================================ */

.stp-finance-progress {

    display: flex;

    align-items: center;

    padding: 19px 42px;

    border-bottom: 1px solid var(--stp-color-border-e5);

    background: var(--stp-color-surface-fa);
}

.stp-progress-item {

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--stp-color-gray999);
}

.stp-progress-item > span {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    border: 1px solid var(--stp-color-border-cfc);
    border-radius: 50%;

    background: var(--stp-color-white);

    font-size: var(--stp-font-size-10);
}

.stp-progress-item strong {

    font-size: var(--stp-font-size-10);
    font-weight: var(--stp-font-weight-semi-bold);

    letter-spacing: .5px;
}

.stp-progress-item.active {

    color: var(--stp-color-ink);
}

.stp-progress-item.active > span {

    border-color: var(--stp-color-ink);

    background: var(--stp-color-ink);

    color: var(--stp-color-white);
}

.stp-progress-line {

    flex: 1;

    height: 1px;

    margin: 0 13px;

    background: var(--stp-color-border-dd);
}


/* ============================================================
   STAGES
============================================================ */

.stp-finance-stage {
    width: 100%;
}


/* ============================================================
   HEADERS
============================================================ */

.stp-finance-header,
.stp-application-header {

    padding: 37px 42px 30px;

    border-bottom: 1px solid var(--stp-color-border-e5);
}

.stp-finance-eyebrow {

    display: block;

    margin-bottom: 10px;

    font-size: var(--stp-font-size-10);
    font-weight: var(--stp-font-weight-semi-bold);

    letter-spacing: 2px;
}

.stp-finance-header h2,
.stp-application-header h2,
.stp-confirmation h2 {

    margin: 0 0 10px;

    color: var(--stp-color-ink);

    font-size: var(--stp-font-size-heading-responsive);
    font-weight: var(--stp-font-weight-semi-bold);

    line-height: 1.06;
}

.stp-finance-header p,
.stp-application-header p {

    max-width: 670px;

    margin: 0;

    color: var(--stp-color-gray696);

    font-size: var(--stp-font-size-14);

    line-height: 1.65;
}


/* ============================================================
   CALCULATOR GRID
============================================================ */

.stp-finance-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(350px, .85fr);
}

.stp-finance-controls {

    padding: 40px 42px;
}

.stp-finance-results {

    padding: 40px 42px;

    border-left: 1px solid var(--stp-color-border-e2);

    background: var(--stp-color-surface-f5);
}


/* ============================================================
   PURCHASE
============================================================ */

.stp-purchase-block {

    margin-bottom: 34px;

    padding-bottom: 28px;

    border-bottom: 1px solid var(--stp-color-border-e5);
}

.stp-purchase-block > span {

    display: block;

    margin-bottom: 6px;

    color: var(--stp-color-gray777);

    font-size: var(--stp-font-size-10);

    letter-spacing: 1.4px;

    text-transform: uppercase;
}

.stp-purchase-block > strong {

    display: block;

    font-size: var(--stp-font-size-30);
    font-weight: var(--stp-font-weight-semi-bold);

    line-height: 1.1;
}

.stp-purchase-block > small {

    display: block;

    margin-top: 7px;

    color: var(--stp-color-gray777);

    font-size: var(--stp-font-size-11);
}


/* ============================================================
   FIELDS
============================================================ */

.stp-field {

    margin-bottom: 35px;
}

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

.stp-field > label,
.stp-field-heading label {

    display: block;

    margin: 0 0 10px;

    color: var(--stp-color-ink);

    font-size: var(--stp-font-size-13);
    font-weight: var(--stp-font-weight-semi-bold);
}

.stp-field-heading {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.stp-field-heading strong {

    margin-bottom: 10px;

    font-size: var(--stp-font-size-13);
}


/* ============================================================
   MONEY INPUT
============================================================ */

.stp-money-input {

    display: flex;

    align-items: center;

    width: 100%;
    height: 56px;

    border: 1px solid var(--stp-color-border-d6);

    background: var(--stp-color-white);
}

.stp-money-input:focus-within {
    border-color: var(--stp-color-ink);
}

.stp-money-input > span {

    padding-left: 16px;

    font-size: var(--stp-font-size-17);
}

.stp-money-input input {

    flex: 1;

    min-width: 0;
    height: 100%;

    padding: 0 16px 0 5px;

    border: 0;

    outline: 0;

    background: transparent;

    color: var(--stp-color-ink);

    font: inherit;
    font-size: var(--stp-font-size-17);
}

.stp-money-input
input::-webkit-inner-spin-button,
.stp-money-input
input::-webkit-outer-spin-button {

    margin: 0;

    -webkit-appearance: none;
}


/* ============================================================
   SLIDER
============================================================ */

#stp-deposit-slider {

    width: 100%;
    height: 4px;

    margin: 25px 0 0;

    appearance: none;
    -webkit-appearance: none;

    border: 0;

    outline: 0;

    background: var(--stp-color-border-de);

    cursor: pointer;
}

#stp-deposit-slider::-webkit-slider-thumb {

    width: 21px;
    height: 21px;

    appearance: none;
    -webkit-appearance: none;

    border: 3px solid var(--stp-color-white);
    border-radius: 50%;

    background: var(--stp-color-ink);

    box-shadow: 0 0 0 1px var(--stp-color-ink);

    cursor: pointer;
}

#stp-deposit-slider::-moz-range-thumb {

    width: 16px;
    height: 16px;

    border: 3px solid var(--stp-color-white);
    border-radius: 50%;

    background: var(--stp-color-ink);

    box-shadow: 0 0 0 1px var(--stp-color-ink);

    cursor: pointer;
}

.stp-slider-labels {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    margin-top: 11px;

    color: var(--stp-color-gray777);

    font-size: var(--stp-font-size-10);
}

.stp-validation-message {

    min-height: 15px;

    margin: 9px 0 0;

    color: var(--stp-color-error);

    font-size: var(--stp-font-size-11);

    line-height: 1.45;
}


/* ============================================================
   TERMS
============================================================ */

.stp-term-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 8px;
}

.stp-term-grid button {

    min-height: 67px;

    padding: 10px;

    border: 1px solid var(--stp-color-border-d5);
    border-radius: 0;

    background: var(--stp-color-white);

    color: var(--stp-color-ink);

    font: inherit;

    cursor: pointer;

    transition:
        background var(--stp-motion-quick),
        color var(--stp-motion-quick),
        border-color var(--stp-motion-quick);
}

.stp-term-grid button strong {

    display: block;

    font-size: var(--stp-font-size-16);
}

.stp-term-grid button span {

    display: block;

    margin-top: 3px;

    color: var(--stp-color-gray777);

    font-size: var(--stp-font-size-9);
}

.stp-term-grid button:hover,
.stp-term-grid button.active {

    border-color: var(--stp-color-ink);

    background: var(--stp-color-ink);

    color: var(--stp-color-white);
}

.stp-term-grid button:hover span,
.stp-term-grid button.active span {

    color: var(--stp-color-white);
}


/* ============================================================
   RESULTS
============================================================ */

.stp-monthly-label {

    display: block;

    margin-bottom: 10px;

    color: var(--stp-color-gray707);

    font-size: var(--stp-font-size-11);
}

.stp-monthly {

    margin-bottom: 19px;

    padding-bottom: 27px;

    border-bottom: 1px solid var(--stp-color-border-d7);
}

.stp-monthly strong {

    display: block;

    max-width: 100%;

    overflow-wrap: anywhere;

    font-size: var(--stp-font-size-monthly-responsive);
    font-weight: var(--stp-font-weight-semi-bold);

    line-height: 1;

    letter-spacing: -1px;
}

.stp-monthly span {

    display: block;

    margin-top: 9px;

    color: var(--stp-color-gray777);

    font-size: var(--stp-font-size-11);
}

.stp-breakdown > div {

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 25px;

    padding: 9px 0;

    font-size: var(--stp-font-size-12);

    line-height: 1.4;
}

.stp-breakdown > div span {
    color: var(--stp-color-gray737);
}

.stp-breakdown > div strong {

    text-align: right;

    font-weight: var(--stp-font-weight-semi-bold);
}

.stp-breakdown-total {

    margin-top: 11px;

    padding-top: 17px !important;

    border-top: 1px solid var(--stp-color-border-d1);

    font-size: var(--stp-font-size-13) !important;
}


/* ============================================================
   BUTTONS
============================================================ */

.stp-primary-button,
.stp-secondary-button {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 58px;

    padding: 14px 20px;

    border-radius: 0;

    font: inherit;
    font-size: var(--stp-font-size-11);
    font-weight: var(--stp-font-weight-semi-bold);

    letter-spacing: 1px;

    text-decoration: none;

    cursor: pointer;
}

.stp-primary-button {

    margin-top: 27px;

    border: 1px solid var(--stp-color-ink);

    background: var(--stp-color-ink);

    color: var(--stp-color-white);
}

.stp-primary-button:hover {

    border-color: var(--stp-color-accent);

    background: var(--stp-color-accent);

    color: var(--stp-color-ink);
}

.stp-secondary-button {

    border: 1px solid var(--stp-color-ink);

    background: var(--stp-color-white);

    color: var(--stp-color-ink);
}

.stp-text-button {

    width: 100%;

    margin-top: 10px;

    padding: 8px;

    border: 0;

    background: transparent;

    color: var(--stp-color-gray666);

    font: inherit;
    font-size: var(--stp-font-size-10);

    text-decoration: underline;

    cursor: pointer;
}


/* ============================================================
   REPRESENTATIVE EXAMPLE
============================================================ */

.stp-representative-example {

    border-top: 1px solid var(--stp-color-border-e5);
}

.stp-representative-toggle {

    display: flex;

    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding: 20px 42px;

    border: 0;

    background: var(--stp-color-white);

    color: var(--stp-color-ink);

    font: inherit;
    font-size: var(--stp-font-size-11);
    font-weight: var(--stp-font-weight-semi-bold);

    letter-spacing: .6px;

    cursor: pointer;
}

.stp-representative-icon {

    font-size: var(--stp-font-size-20);
    font-weight: var(--stp-font-weight-light);
}

.stp-representative-content {

    padding: 0 42px 26px;
}

.stp-representative-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap: 1px;

    background: var(--stp-color-border-dd);

    border: 1px solid var(--stp-color-border-dd);
}

.stp-representative-item {

    padding: 14px;

    background: var(--stp-color-surface-f8);
}

.stp-representative-item span {

    display: block;

    margin-bottom: 4px;

    color: var(--stp-color-gray777);

    font-size: var(--stp-font-size-9);

    text-transform: uppercase;

    letter-spacing: .7px;
}

.stp-representative-item strong {

    display: block;

    font-size: var(--stp-font-size-12);
}

.stp-representative-note {

    margin: 13px 0 0;

    color: var(--stp-color-gray777);

    font-size: var(--stp-font-size-9-5);

    line-height: 1.6;
}


/* ============================================================
   COMPLIANCE
============================================================ */

.stp-compliance-copy {

    padding: 22px 42px;

    border-top: 1px solid var(--stp-color-border-e5);

    color: var(--stp-color-gray777);

    font-size: var(--stp-font-size-9-5);

    line-height: 1.65;
}

.stp-compliance-copy p {

    margin: 0 0 7px;
}

.stp-compliance-copy p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   APPLICATION
============================================================ */

.stp-back-button {

    margin: 0 0 20px;

    padding: 0;

    border: 0;

    background: transparent;

    color: var(--stp-color-gray555);

    font: inherit;
    font-size: var(--stp-font-size-11);

    cursor: pointer;
}

.stp-application-layout {

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(300px,.72fr);
}

.stp-finance-form {

    padding: 38px 42px;
}

.stp-finance-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.stp-form-row {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 15px;
}

.stp-form-field {

    margin-bottom: 20px;
}

.stp-form-field label {

    display: block;

    margin-bottom: 8px;

    font-size: var(--stp-font-size-12);
    font-weight: var(--stp-font-weight-semi-bold);
}

.stp-form-field input,
.stp-form-field select {

    width: 100%;
    height: 53px;

    padding: 0 14px;

    border: 1px solid var(--stp-color-border-d7);
    border-radius: 0;

    outline: 0;

    background: var(--stp-color-white);

    color: var(--stp-color-ink);

    font: inherit;
    font-size: var(--stp-font-size-14);
}

.stp-form-field input:focus,
.stp-form-field select:focus {

    border-color: var(--stp-color-ink);
}

.stp-form-field.invalid input,
.stp-form-field.invalid select {

    border-color: var(--stp-color-error);
}

.stp-field-error {

    display: block;

    min-height: 14px;

    margin-top: 5px;

    color: var(--stp-color-error);

    font-size: var(--stp-font-size-9-5);
}

.stp-form-consent {

    margin-top: 7px;
}

.stp-form-consent label {

    display: flex;

    align-items: flex-start;

    gap: 9px;

    color: var(--stp-color-gray555);

    font-size: var(--stp-font-size-10-5);

    line-height: 1.55;

    cursor: pointer;
}

.stp-form-consent input {

    margin-top: 3px;
}

.stp-form-global-error {

    margin-top: 15px;

    padding: 12px;

    border: 1px solid var(--stp-color-border-e1);

    background: var(--stp-color-error-surface);

    color: var(--stp-color-error-dark);

    font-size: var(--stp-font-size-11);

    line-height: 1.5;
}

.stp-application-summary {

    padding: 38px 34px;

    border-left: 1px solid var(--stp-color-border-e5);

    background: var(--stp-color-surface-f5);
}

.stp-summary-eyebrow {

    display: block;

    margin-bottom: 8px;

    color: var(--stp-color-gray777);

    font-size: var(--stp-font-size-9);

    letter-spacing: 1.2px;
}

.stp-form-summary-monthly {

    display: block;

    margin-bottom: 22px;

    padding-bottom: 21px;

    border-bottom: 1px solid var(--stp-color-border-d7);

    font-size: var(--stp-font-size-25);
}

.stp-form-summary-grid > div {

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    padding: 8px 0;

    font-size: var(--stp-font-size-11);
}

.stp-form-summary-grid span {

    color: var(--stp-color-gray777);
}

.stp-form-summary-grid strong {

    text-align: right;
}

.stp-application-summary > p {

    margin: 22px 0 0;

    padding-top: 18px;

    border-top: 1px solid var(--stp-color-border-d7);

    color: var(--stp-color-gray777);

    font-size: var(--stp-font-size-9-5);

    line-height: 1.6;
}


/* ============================================================
   CONFIRMATION
============================================================ */

.stp-confirmation {

    max-width: 620px;

    margin: 0 auto;

    padding: 65px 42px;

    text-align: center;
}

.stp-confirmation-check {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;

    margin: 0 auto 23px;

    border-radius: 50%;

    background: var(--stp-color-ink);

    color: var(--stp-color-white);

    font-size: var(--stp-font-size-23);
}

.stp-confirmation > p {

    max-width: 530px;

    margin: 0 auto;

    color: var(--stp-color-gray666);

    font-size: var(--stp-font-size-14);

    line-height: 1.7;
}

.stp-confirmation-summary {

    margin-top: 30px;

    padding: 22px;

    border: 1px solid var(--stp-color-border-de);

    background: var(--stp-color-surface-f7);
}

.stp-confirmation-summary span,
.stp-confirmation-summary small {

    display: block;

    color: var(--stp-color-gray777);

    font-size: var(--stp-font-size-10);
}

.stp-confirmation-summary strong {

    display: block;

    margin: 6px 0;

    font-size: var(--stp-font-size-23);
}

.stp-confirmation-actions {

    display: grid;

    gap: 9px;

    margin-top: 25px;
}

.stp-confirmation-actions
.stp-primary-button {

    margin-top: 0;
}

.stp-text-link {

    display: inline-block;

    margin-top: 8px;

    color: var(--stp-color-ink) !important;

    font-size: var(--stp-font-size-10);

    text-decoration: underline;
}

.stp-text-link:hover,
.stp-text-link:focus,
.stp-text-link:visited {

    color: var(--stp-color-ink) !important;
}


/* ============================================================
   BODY
============================================================ */

body.stp-finance-modal-open {
    overflow: hidden;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width:1100px) {

    .stp-finance-grid,
    .stp-application-layout {

        grid-template-columns: 1fr;
    }

    .stp-finance-results,
    .stp-application-summary {

        border-top: 1px solid var(--stp-color-border-e2);

        border-left: 0;
    }

}


/* ============================================================
   TABLET LANDSCAPE / SMALL LAPTOP
============================================================ */

@media (min-width:901px) and (max-width:1100px) {

    .stp-finance-modal {
        padding: 18px;
    }

    .stp-finance-dialog {
        width: min(var(--stp-layout-mobile-dialog-width), 980px);
        max-height: var(--stp-layout-mobile-dialog-height);
    }

    .stp-finance-header,
    .stp-application-header,
    .stp-finance-controls,
    .stp-finance-results,
    .stp-finance-form,
    .stp-application-summary {
        padding-left: 30px;
        padding-right: 30px;
    }

    .stp-monthly strong {
        font-size: var(--stp-font-size-44);
    }

}

@media (max-width:600px) {

    .stp-finance-modal {
        padding: 8px;
    }

    .stp-finance-dialog {

        max-height:
            calc(var(--stp-layout-viewport-height) - 16px);
    }

    .stp-finance-progress {

        padding: 14px 17px;
    }

    .stp-progress-item strong {
        display: none;
    }

    .stp-progress-line {
        margin: 0 7px;
    }

    .stp-finance-header,
    .stp-application-header,
    .stp-finance-controls,
    .stp-finance-results,
    .stp-finance-form,
    .stp-application-summary {

        padding: 27px 20px;
    }

    .stp-finance-header,
    .stp-application-header {

        padding-right: 55px;
    }

    .stp-term-grid {

        grid-template-columns:
            repeat(2,1fr);
    }

    .stp-monthly strong {

        font-size: var(--stp-font-size-40);
    }

    .stp-representative-toggle {

        padding: 18px 20px;
    }

    .stp-representative-content {

        padding: 0 20px 22px;
    }

    .stp-representative-grid {

        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .stp-compliance-copy {

        padding: 20px;
    }

    .stp-form-row {

        grid-template-columns: 1fr;

        gap: 0;
    }

    .stp-selected-header {

        gap: 12px;
    }

    .stp-selected-actions {

        flex-direction: column;

        align-items: flex-end;

        gap: 5px;
    }

    .stp-confirmation {

        padding: 50px 20px;
    }

}


/* ============================================================
   YITH FINANCE LOCK
============================================================ */

#yith-wcdp-add-deposit-to-cart label.deposit.stp-finance-disabled {
    opacity: .45;
    cursor: not-allowed;
}

#yith-wcdp-add-deposit-to-cart label.deposit.stp-finance-disabled * {
    cursor: not-allowed;
}


/* ============================================================
   FINANCE CTA SHUTTER BUTTON EFFECT
============================================================ */

#stp-finance-system .stp-finance-trigger,
#stp-finance-system .stp-primary-button,
#stp-finance-system .stp-secondary-button {
    position: relative;
    overflow: hidden;
    background-color: var(--stp-color-ink);
    color: var(--stp-color-white);
    border: 1px solid var(--stp-color-ink);
    border-radius: 0;
    cursor: pointer;
    isolation: isolate;
    transition: color var(--stp-motion-shutter), border-color var(--stp-motion-shutter);
    z-index: 0;
}

#stp-finance-system .stp-finance-trigger::before,
#stp-finance-system .stp-finance-trigger::after,
#stp-finance-system .stp-primary-button::before,
#stp-finance-system .stp-primary-button::after,
#stp-finance-system .stp-secondary-button::before,
#stp-finance-system .stp-secondary-button::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: var(--stp-color-accent);
    z-index: -1;
    pointer-events: none;
    transition: transform var(--stp-motion-shutter);
}

#stp-finance-system .stp-finance-trigger::before,
#stp-finance-system .stp-primary-button::before,
#stp-finance-system .stp-secondary-button::before {
    top: 0;
    transform: translateY(-101%);
}

#stp-finance-system .stp-finance-trigger::after,
#stp-finance-system .stp-primary-button::after,
#stp-finance-system .stp-secondary-button::after {
    bottom: 0;
    transform: translateY(101%);
}

#stp-finance-system .stp-finance-trigger:hover::before,
#stp-finance-system .stp-finance-trigger:hover::after,
#stp-finance-system .stp-primary-button:hover::before,
#stp-finance-system .stp-primary-button:hover::after,
#stp-finance-system .stp-secondary-button:hover::before,
#stp-finance-system .stp-secondary-button:hover::after {
    transform: translateY(0);
}

#stp-finance-system .stp-finance-trigger:hover,
#stp-finance-system .stp-primary-button:hover,
#stp-finance-system .stp-secondary-button:hover {
    /* Solid gold base removes any dark edge/seam during the shutter hover. */
    background: var(--stp-color-accent) !important;
    background-color: var(--stp-color-accent) !important;
    border: 1px solid var(--stp-color-accent) !important;
    border-color: var(--stp-color-accent) !important;
    border-radius: 0 !important;
    color: var(--stp-color-ink) !important;
    box-shadow: none !important;
}

#stp-finance-system .stp-primary-button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

#stp-finance-system .stp-primary-button:disabled::before,
#stp-finance-system .stp-primary-button:disabled::after {
    display: none;
}

#stp-finance-system .stp-finance-trigger:focus-visible,
#stp-finance-system .stp-primary-button:focus-visible,
#stp-finance-system .stp-secondary-button:focus-visible {
    outline: 2px solid var(--stp-color-accent);
    outline-offset: 3px;
}



/* ============================================================
   ELEMENTOR / PREMIUM BUTTON FONT + FULL-WIDTH ALIGNMENT
   Mirrors the surrounding Elementor button typography by
   inheriting the site's configured font family/weight/style.
============================================================ */

/* Ensure the finance widget fills the complete Elementor column/container. */
#stp-finance-system {
    display: block;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-family: inherit !important;
}

#stp-finance-system .stp-finance-trigger,
#stp-finance-system .stp-finance-selected-summary,
#stp-finance-system .stp-finance-eligibility-message {
    width: 100% !important;
    max-width: none !important;
}

/* Match the font styling inherited by Elementor/Premium Addons buttons. */
#stp-finance-system button,
#stp-finance-system a,
#stp-finance-system input,
#stp-finance-system select,
#stp-finance-system textarea,
#stp-finance-system label,
#stp-finance-system span,
#stp-finance-system p,
#stp-finance-system strong,
#stp-finance-system small,
#stp-finance-system h2 {
    font-family: inherit;
}

/* Main finance CTAs: full width and site-button typography. */
#stp-finance-system .stp-finance-trigger,
#stp-finance-system .stp-primary-button,
#stp-finance-system .stp-secondary-button {
    display: flex;
    width: 100% !important;
    max-width: none !important;
    align-items: center;
    justify-content: center;
    font-family: inherit !important;
    font-style: inherit;
    text-align: center;
}

/* Keep the trigger text visually centred even with nested spans. */
#stp-finance-system .stp-finance-trigger > span {
    width: 100%;
    text-align: center;
    font-family: inherit !important;
}



/* ============================================================
   FINAL BUTTON APPEARANCE — MATCHES REFERENCE BUTTON
   Black background / SwissTimepieces gold text / square edges.
   Main Apply For Finance trigger spans the full Elementor width.
============================================================ */

#stp-finance-system .stp-finance-trigger,
#stp-finance-system .stp-primary-button,
#stp-finance-system .stp-secondary-button {
    width: 100% !important;
    max-width: none !important;
    min-height: 51px;
    padding: 12px 24px;
    margin-left: 0;
    margin-right: 0;
    border: 1px solid var(--stp-color-ink);
    border-radius: 0 !important;
    background: var(--stp-color-ink);
    color: var(--stp-color-accent) !important;
    font-family: inherit !important;
    font-size: var(--stp-font-size-16);
    font-weight: var(--stp-font-weight-regular);
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    box-shadow: none;
}

/* Main product-page finance button: always consume the complete widget width. */
#stp-finance-system .stp-finance-trigger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
}

/* YITH deposit selected: the finance CTA must be completely removed from view.
   This rule intentionally comes after the display:flex !important rule above. */
#stp-finance-system .stp-finance-trigger[hidden] {
    display: none !important;
}

#stp-finance-system .stp-finance-trigger > span,
#stp-finance-system .stp-finance-trigger .stp-trigger-standard,
#stp-finance-system .stp-finance-trigger .stp-trigger-selected {
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    text-align: center;
}

/* Keep the shutter animation: gold closes over the black button on hover. */
#stp-finance-system .stp-finance-trigger::before,
#stp-finance-system .stp-finance-trigger::after,
#stp-finance-system .stp-primary-button::before,
#stp-finance-system .stp-primary-button::after,
#stp-finance-system .stp-secondary-button::before,
#stp-finance-system .stp-secondary-button::after {
    background-color: var(--stp-color-accent);
}

#stp-finance-system .stp-finance-trigger:hover,
#stp-finance-system .stp-primary-button:hover,
#stp-finance-system .stp-secondary-button:hover {
    background: var(--stp-color-ink);
    border-color: var(--stp-color-ink);
    color: var(--stp-color-ink) !important;
}

/* Don't let theme/Premium Addons rules shrink the widget itself. */
#stp-finance-system,
#stp-finance-system > .stp-finance-trigger {
    box-sizing: border-box;
    width: 100% !important;
}


/* ============================================================
   TYPOGRAPHY — FORCE SWISSTIMEPIECES BROOKLYN FONTS
============================================================ */

/*
 * Your Elementor/site font families are registered as:
 * - Brooklyn Regular
 * - Brooklyn Semi Bold
 *
 * These selectors intentionally use !important so Elementor,
 * WooCommerce and Premium Addons typography cannot override them.
 */

#stp-finance-system,
#stp-finance-system *,
#stp-finance-system button,
#stp-finance-system a,
#stp-finance-system input,
#stp-finance-system select,
#stp-finance-system textarea,
#stp-finance-system label,
#stp-finance-system span,
#stp-finance-system p,
#stp-finance-system small {
    font-family: var(--stp-font-body) !important;
    font-weight: var(--stp-font-weight-regular) !important;
    font-style: normal !important;
}

/* Headings only — Brooklyn Semi Bold */
#stp-finance-system h1,
#stp-finance-system h2,
#stp-finance-system h3,
#stp-finance-system h4,
#stp-finance-system h5,
#stp-finance-system h6,
#stp-finance-system .stp-finance-header h2,
#stp-finance-system .stp-application-header h2,
#stp-finance-system .stp-confirmation h2 {
    font-family: var(--stp-font-heading) !important;
    font-weight: var(--stp-font-weight-semi-bold) !important;
    font-style: normal !important;
}

/* Strong values / labels stay Brooklyn Regular unless they are headings */
#stp-finance-system strong,
#stp-finance-system b {
    font-family: var(--stp-font-body) !important;
    font-weight: var(--stp-font-weight-regular) !important;
}

/* CTA and UI controls — Brooklyn Regular */
#stp-finance-system .stp-finance-trigger,
#stp-finance-system .stp-finance-trigger *,
#stp-finance-system .stp-primary-button,
#stp-finance-system .stp-primary-button *,
#stp-finance-system .stp-secondary-button,
#stp-finance-system .stp-secondary-button *,
#stp-finance-system .stp-text-button,
#stp-finance-system .stp-back-button,
#stp-finance-system .stp-selected-actions button,
#stp-finance-system .stp-representative-toggle,
#stp-finance-system .stp-term-grid button,
#stp-finance-system .stp-term-grid button * {
    font-family: var(--stp-font-body) !important;
    font-weight: var(--stp-font-weight-regular) !important;
    font-style: normal !important;
}

/* Restore Semi Bold to key heading-style UI text */
#stp-finance-system .stp-finance-header h2,
#stp-finance-system .stp-application-header h2,
#stp-finance-system .stp-confirmation h2 {
    font-family: var(--stp-font-heading) !important;
    font-weight: var(--stp-font-weight-semi-bold) !important;
}



/* ============================================================
   FULL VIEWPORT FINANCE OFF-CANVAS / COMPACT DESKTOP LAYOUT
============================================================ */

/* Make the finance experience fill the complete browser viewport. */
#stp-finance-system .stp-finance-modal {
    inset: 0 !important;
    width: var(--stp-layout-viewport-width) !important;
    height: var(--stp-layout-viewport-height) !important;
    height: var(--stp-layout-viewport-dynamic-height) !important;
    padding: var(--stp-layout-desktop-modal-padding) !important;
    align-items: center !important;
    justify-content: center !important;
}

#stp-finance-system .stp-finance-dialog {
    width: var(--stp-layout-dialog-width) !important;
    max-width: var(--stp-layout-dialog-width) !important;
    height: var(--stp-layout-dialog-height) !important;
    height: var(--stp-layout-dialog-dynamic-height) !important;
    max-height: var(--stp-layout-dialog-height) !important;
    max-height: var(--stp-layout-dialog-dynamic-height) !important;
    margin: 0 auto !important;
    border-radius: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-shadow: 0 30px 100px var(--stp-color-shadow) !important;
}

/* Overlay remains available behind the dialog but has no visible gutter. */
#stp-finance-system .stp-finance-overlay {
    inset: 0 !important;
}

/* Keep the close control clearly visible in the top-right corner. */
#stp-finance-system .stp-finance-close {
    position: absolute !important;
    top: 14px !important;
    right: 18px !important;
    z-index: 1000001 !important;
}

/* ------------------------------------------------------------
   COMPACT SPACING
   Reduces unnecessary vertical whitespace so more of the
   calculator is visible without scrolling.
------------------------------------------------------------ */

#stp-finance-system .stp-finance-progress {
    padding: 13px 42px !important;
    min-height: 54px !important;
}

#stp-finance-system .stp-finance-header,
#stp-finance-system .stp-application-header {
    padding: 24px 42px 22px !important;
}

#stp-finance-system .stp-finance-header h2,
#stp-finance-system .stp-application-header h2 {
    margin-bottom: 7px !important;
}

#stp-finance-system .stp-finance-header p,
#stp-finance-system .stp-application-header p {
    line-height: 1.45 !important;
}

#stp-finance-system .stp-finance-controls,
#stp-finance-system .stp-finance-results {
    padding: 27px 42px !important;
}

#stp-finance-system .stp-purchase-block {
    margin-bottom: 22px !important;
    padding-bottom: 20px !important;
}

#stp-finance-system .stp-field {
    margin-bottom: 22px !important;
}

#stp-finance-system .stp-field-heading label,
#stp-finance-system .stp-field > label {
    margin-bottom: 7px !important;
}

#stp-finance-system .stp-field-heading strong {
    margin-bottom: 7px !important;
}

#stp-finance-system .stp-money-input {
    height: 50px !important;
}

#stp-finance-system #stp-deposit-slider {
    margin-top: 19px !important;
}

#stp-finance-system .stp-slider-labels {
    margin-top: 8px !important;
}

#stp-finance-system .stp-validation-message {
    min-height: 11px !important;
    margin-top: 5px !important;
}

#stp-finance-system .stp-term-grid button {
    min-height: 58px !important;
    padding: 8px !important;
}

#stp-finance-system .stp-monthly {
    margin-bottom: 14px !important;
    padding-bottom: 20px !important;
}

#stp-finance-system .stp-breakdown > div {
    padding: 6px 0 !important;
}

#stp-finance-system .stp-breakdown-total {
    margin-top: 7px !important;
    padding-top: 12px !important;
}

#stp-finance-system .stp-primary-button {
    margin-top: 18px !important;
    min-height: 52px !important;
}

#stp-finance-system .stp-representative-toggle {
    padding: 14px 42px !important;
}

#stp-finance-system .stp-representative-content {
    padding: 0 42px 18px !important;
}

#stp-finance-system .stp-compliance-copy {
    padding: 14px 42px !important;
}

/* ------------------------------------------------------------
   FINANCE TERM BUTTONS
   Normal       = white / var(--stp-color-ink)
   Selected     = var(--stp-color-ink) / gold text
   Hover ONLY   = gold / var(--stp-color-ink) text
------------------------------------------------------------ */

#stp-finance-system .stp-term-grid button {
    background: var(--stp-color-white) !important;
    color: var(--stp-color-ink) !important;
    border-color: var(--stp-color-border-d5) !important;
    transition:
        background-color var(--stp-motion-quick),
        color var(--stp-motion-quick),
        border-color var(--stp-motion-quick) !important;
}

#stp-finance-system .stp-term-grid button span {
    color: var(--stp-color-gray777) !important;
}

/* Selected term — deliberately NOT gold background. */
#stp-finance-system .stp-term-grid button.active {
    background: var(--stp-color-ink) !important;
    color: var(--stp-color-accent) !important;
    border-color: var(--stp-color-ink) !important;
}

#stp-finance-system .stp-term-grid button.active span {
    color: var(--stp-color-accent) !important;
}

/* Gold is used on hover only. */
#stp-finance-system .stp-term-grid button:hover,
#stp-finance-system .stp-term-grid button.active:hover {
    background: var(--stp-color-accent) !important;
    color: var(--stp-color-ink) !important;
    border-color: var(--stp-color-accent) !important;
}

#stp-finance-system .stp-term-grid button:hover span,
#stp-finance-system .stp-term-grid button.active:hover span {
    color: var(--stp-color-ink) !important;
}

/* ------------------------------------------------------------
   TABLET / MOBILE FULLSCREEN
------------------------------------------------------------ */

@media (max-width: 900px) {
    #stp-finance-system .stp-finance-modal,
    #stp-finance-system .stp-finance-dialog {
        width: var(--stp-layout-viewport-width) !important;
        height: var(--stp-layout-viewport-height) !important;
        height: var(--stp-layout-viewport-dynamic-height) !important;
        max-height: none !important;
    }

    #stp-finance-system .stp-finance-dialog {
        overflow-y: auto !important;
    }
}

@media (max-width: 600px) {
    #stp-finance-system .stp-finance-modal {
        padding: 0 !important;
    }

    #stp-finance-system .stp-finance-progress {
        padding: 11px 18px !important;
    }

    #stp-finance-system .stp-finance-header,
    #stp-finance-system .stp-application-header,
    #stp-finance-system .stp-finance-controls,
    #stp-finance-system .stp-finance-results,
    #stp-finance-system .stp-finance-form,
    #stp-finance-system .stp-application-summary {
        padding: 22px 20px !important;
    }

    #stp-finance-system .stp-representative-toggle,
    #stp-finance-system .stp-compliance-copy {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    #stp-finance-system .stp-representative-content {
        padding: 0 20px 16px !important;
    }

    #stp-finance-system .stp-finance-close {
        top: 9px !important;
        right: 10px !important;
    }
}




/* ============================================================
   FINAL VIEWPORT + YITH VISIBILITY OVERRIDES
============================================================ */

#stp-finance-system .stp-finance-modal.open {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: var(--stp-layout-desktop-modal-padding) !important;
}

#stp-finance-system .stp-finance-dialog {
    width: var(--stp-layout-dialog-width) !important;
    max-width: var(--stp-layout-dialog-width) !important;
    height: var(--stp-layout-dialog-height) !important;
    height: var(--stp-layout-dialog-dynamic-height) !important;
    max-height: var(--stp-layout-dialog-height) !important;
    max-height: var(--stp-layout-dialog-dynamic-height) !important;
}

/* JS sets trigger.hidden=true when YITH value=deposit.
   Force that state to beat the full-width display:flex declaration. */
#stp-finance-system .stp-finance-trigger[hidden],
#stp-finance-system button.stp-finance-trigger[hidden] {
    display: none !important;
}

@media (max-width: 600px) {
    #stp-finance-system .stp-finance-modal.open {
        padding: var(--stp-layout-mobile-modal-padding) !important;
    }

    #stp-finance-system .stp-finance-dialog {
        width: var(--stp-layout-mobile-dialog-width) !important;
        max-width: var(--stp-layout-mobile-dialog-width) !important;
        height: var(--stp-layout-mobile-dialog-height) !important;
        height: var(--stp-layout-mobile-dialog-dynamic-height) !important;
        max-height: var(--stp-layout-mobile-dialog-height) !important;
        max-height: var(--stp-layout-mobile-dialog-dynamic-height) !important;
    }
}



/* ============================================================
   FINANCE ILLUSTRATION — CHANGE / REMOVE BUTTONS
============================================================ */

#stp-finance-system .stp-selected-actions button {
    padding: 7px 11px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--stp-color-ink) !important;
    font-family: var(--stp-font-body-compact) !important;
    font-weight: var(--stp-font-weight-regular) !important;
    font-size: var(--stp-font-size-11) !important;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none;
    cursor: pointer;
    transition: background-color var(--stp-motion-control), color var(--stp-motion-control) !important;
}

#stp-finance-system .stp-selected-actions button::before,
#stp-finance-system .stp-selected-actions button::after {
    display: none !important;
    content: none !important;
}

#stp-finance-system .stp-selected-actions button:hover,
#stp-finance-system .stp-selected-actions button:focus {
    background: var(--stp-color-accent) !important;
    color: var(--stp-color-ink) !important;
    border: 0 !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

#stp-finance-system .stp-selected-actions button,
#stp-finance-system .stp-selected-actions button:hover,
#stp-finance-system .stp-selected-actions button:focus,
#stp-finance-system .stp-selected-actions button:active {
    text-decoration: none !important;
}


/* ============================================================
   FINAL CTA HOVER OVERRIDE — 100% GOLD, NO DARK BORDER
============================================================ */
#stp-finance-system .stp-finance-trigger:hover,
#stp-finance-system .stp-primary-button:hover,
#stp-finance-system .stp-secondary-button:hover {
    background: var(--stp-color-accent) !important;
    border-color: var(--stp-color-accent) !important;
    outline: 0 !important;
    box-shadow: none !important;
    color: var(--stp-color-ink) !important;
}

#stp-finance-system .stp-finance-trigger:hover::before,
#stp-finance-system .stp-finance-trigger:hover::after,
#stp-finance-system .stp-primary-button:hover::before,
#stp-finance-system .stp-primary-button:hover::after,
#stp-finance-system .stp-secondary-button:hover::before,
#stp-finance-system .stp-secondary-button:hover::after {
    background: var(--stp-color-accent) !important;
}



/* ============================================================
   REPRESENTATIVE EXAMPLE — GOLD HOVER / EXPANDED STATE
============================================================ */

#stp-finance-system .stp-representative-toggle {
    background: var(--stp-color-white) !important;
    color: var(--stp-color-ink) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: background-color var(--stp-motion-control), color var(--stp-motion-control) !important;
}

/* Ensure the closed/default state always returns to off-white rather than theme pink/red */
#stp-finance-system .stp-representative-toggle[aria-expanded="false"],
#stp-finance-system .stp-representative-toggle[aria-expanded="false"]:active {
    background: var(--stp-color-white) !important;
    color: var(--stp-color-ink) !important;
}

#stp-finance-system .stp-representative-toggle:hover,
#stp-finance-system .stp-representative-toggle:focus-visible,
#stp-finance-system .stp-representative-toggle[aria-expanded="true"] {
    background: var(--stp-color-accent) !important;
    color: var(--stp-color-ink) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#stp-finance-system .stp-representative-toggle:hover .stp-representative-icon,
#stp-finance-system .stp-representative-toggle:focus-visible .stp-representative-icon,
#stp-finance-system .stp-representative-toggle[aria-expanded="true"] .stp-representative-icon {
    color: var(--stp-color-ink) !important;
}

/* Prevent theme / Elementor pseudo hover layers on this control */
#stp-finance-system .stp-representative-toggle::before,
#stp-finance-system .stp-representative-toggle::after {
    display: none !important;
    content: none !important;
}


/* Add breathing room between the expanded banner and example table */
#stp-finance-system .stp-representative-content:not([hidden]) {
    padding-top: 18px !important;
}

/* ============================================================
   REPRESENTATIVE EXAMPLE — TOTAL AMOUNT PAYABLE FULL WIDTH
============================================================ */

#stp-finance-system .stp-representative-grid .stp-representative-item:last-child {
    grid-column: 1 / -1 !important;
    width: 100% !important;
}



/* ============================================================
   FINAL STAGE 2 FORM SPACING + CLOSE BUTTON OVERRIDES
============================================================ */

/* Tighten the contact form so Stage 2 sits comfortably inside var(--stp-layout-dialog-height). */
#stp-finance-system .stp-finance-form {
    padding: 28px 42px 24px !important;
}

#stp-finance-system .stp-form-row {
    gap: 14px !important;
}

#stp-finance-system .stp-form-field {
    margin-bottom: 13px !important;
}

#stp-finance-system .stp-form-field label {
    margin-bottom: 6px !important;
}

#stp-finance-system .stp-form-field input,
#stp-finance-system .stp-form-field select {
    height: 48px !important;
}

#stp-finance-system .stp-field-error {
    min-height: 10px !important;
    margin-top: 3px !important;
    line-height: 1.25 !important;
}

#stp-finance-system .stp-form-consent {
    margin-top: 2px !important;
}

#stp-finance-system .stp-form-consent label {
    line-height: 1.4 !important;
}

#stp-finance-system #stp-submit-finance-request {
    margin-top: 14px !important;
}

#stp-finance-system .stp-application-summary {
    padding-top: 28px !important;
    padding-bottom: 24px !important;
}

/*
 * Close button:
 * - fixed neatly within the finance dialog header
 * - no pink/red Elementor/theme background
 * - black X on white by default
 * - gold square on hover/focus
 */
#stp-finance-system .stp-finance-close,
#stp-finance-system .stp-finance-close:hover,
#stp-finance-system .stp-finance-close:focus,
#stp-finance-system .stp-finance-close:active {
    position: absolute !important;
    top: 12px !important;
    right: 14px !important;
    z-index: 1000002 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    color: var(--stp-color-ink) !important;
    -webkit-text-fill-color: var(--stp-color-ink) !important;

    font-family: var(--stp-font-body-compact) !important;
    font-size: var(--stp-font-size-30) !important;
    font-weight: var(--stp-font-weight-regular) !important;
    line-height: 1 !important;

    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: pointer !important;
}

#stp-finance-system .stp-finance-close::before,
#stp-finance-system .stp-finance-close::after {
    display: none !important;
    content: none !important;
}

#stp-finance-system .stp-finance-close:hover,
#stp-finance-system .stp-finance-close:focus-visible {
    background: var(--stp-color-accent) !important;
    background-color: var(--stp-color-accent) !important;
    color: var(--stp-color-ink) !important;
    -webkit-text-fill-color: var(--stp-color-ink) !important;
    border: 0 !important;
    border-radius: 0 !important;
}

@media (max-width: 600px) {
    #stp-finance-system .stp-finance-form {
        padding: 20px 20px 18px !important;
    }

    #stp-finance-system .stp-form-field {
        margin-bottom: 11px !important;
    }

    #stp-finance-system .stp-form-field input,
    #stp-finance-system .stp-form-field select {
        height: 46px !important;
    }

    #stp-finance-system .stp-finance-close,
    #stp-finance-system .stp-finance-close:hover,
    #stp-finance-system .stp-finance-close:focus,
    #stp-finance-system .stp-finance-close:active {
        top: 8px !important;
        right: 9px !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        font-size: var(--stp-font-size-28) !important;
    }
}


/* ============================================================
   FINAL OVERRIDES — SECONDARY FINANCE CONTROLS + CLOSE POSITION
============================================================ */

/*
 * Remove Finance / Back to finance:
 * Prevent Elementor/theme pink/red states.
 * Default stays clean and understated.
 * Hover/focus = SwissTimepieces gold + var(--stp-color-ink) text.
 */
#stp-finance-system .stp-text-button,
#stp-finance-system .stp-back-button {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--stp-color-ink) !important;
    -webkit-text-fill-color: var(--stp-color-ink) !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition:
        background-color var(--stp-motion-control),
        color var(--stp-motion-control) !important;
}

#stp-finance-system .stp-text-button::before,
#stp-finance-system .stp-text-button::after,
#stp-finance-system .stp-back-button::before,
#stp-finance-system .stp-back-button::after {
    display: none !important;
    content: none !important;
}

/* Large Remove Finance button */
#stp-finance-system #stp-remove-finance {
    width: 100% !important;
    min-height: 42px !important;
    margin-top: 10px !important;
    padding: 10px 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--stp-color-ink) !important;
    -webkit-text-fill-color: var(--stp-color-ink) !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* Back to finance */
#stp-finance-system .stp-back-button {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    min-height: 34px !important;
    margin: 0 0 12px !important;
    padding: 7px 10px !important;
}

/* Hover / keyboard focus */
#stp-finance-system .stp-text-button:hover,
#stp-finance-system .stp-text-button:focus-visible,
#stp-finance-system .stp-back-button:hover,
#stp-finance-system .stp-back-button:focus-visible,
#stp-finance-system #stp-remove-finance:hover,
#stp-finance-system #stp-remove-finance:focus-visible {
    border: 0 !important;
    border-color: var(--stp-color-accent) !important;
    border-radius: 0 !important;
    background: var(--stp-color-accent) !important;
    background-color: var(--stp-color-accent) !important;
    background-image: none !important;
    color: var(--stp-color-ink) !important;
    -webkit-text-fill-color: var(--stp-color-ink) !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

/*
 * Change / Remove controls in selected illustration
 * remain square gold on hover with no underline.
 */
#stp-finance-system .stp-selected-actions button:hover,
#stp-finance-system .stp-selected-actions button:focus-visible {
    border: 0 !important;
    border-color: var(--stp-color-accent) !important;
    border-radius: 0 !important;
    background: var(--stp-color-accent) !important;
    background-color: var(--stp-color-accent) !important;
    color: var(--stp-color-ink) !important;
    -webkit-text-fill-color: var(--stp-color-ink) !important;
    text-decoration: none !important;
}

/*
 * CLOSE BUTTON
 *
 * Move it below the progress / Confirmation row and into the
 * clear white stage area rather than sitting beside Confirmation.
 */
#stp-finance-system .stp-finance-close,
#stp-finance-system .stp-finance-close:hover,
#stp-finance-system .stp-finance-close:focus,
#stp-finance-system .stp-finance-close:active {
    top: 66px !important;
    right: 22px !important;

    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    color: var(--stp-color-ink) !important;
    -webkit-text-fill-color: var(--stp-color-ink) !important;

    box-shadow: none !important;
    text-decoration: none !important;
}

#stp-finance-system .stp-finance-close:hover,
#stp-finance-system .stp-finance-close:focus-visible {
    border: 0 !important;
    border-color: var(--stp-color-accent) !important;
    border-radius: 0 !important;
    background: var(--stp-color-accent) !important;
    background-color: var(--stp-color-accent) !important;
    color: var(--stp-color-ink) !important;
    -webkit-text-fill-color: var(--stp-color-ink) !important;
}

/* Leave room for the lowered close button in stage headers */
#stp-finance-system .stp-finance-header,
#stp-finance-system .stp-application-header {
    padding-right: 78px !important;
}

@media (max-width: 600px) {
    #stp-finance-system .stp-finance-close,
    #stp-finance-system .stp-finance-close:hover,
    #stp-finance-system .stp-finance-close:focus,
    #stp-finance-system .stp-finance-close:active {
        top: 60px !important;
        right: 14px !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }

    #stp-finance-system .stp-finance-header,
    #stp-finance-system .stp-application-header {
        padding-right: 62px !important;
    }
}


/* ============================================================
   FINAL LAYOUT OVERRIDE
   DEFAULT CALCULATOR FULLY IN VIEW
   SCROLL ONLY WHEN REPRESENTATIVE EXAMPLE IS OPEN
============================================================ */

/*
 * Keep the var(--stp-layout-dialog-width) × var(--stp-layout-dialog-height) popup fixed in the viewport.
 * Default state has no internal vertical scrollbar.
 */
#stp-finance-system .stp-finance-dialog {
    width: var(--stp-layout-dialog-width) !important;
    height: var(--stp-layout-dialog-height) !important;
    max-width: var(--stp-layout-dialog-width) !important;
    max-height: var(--stp-layout-dialog-height) !important;

    overflow-x: hidden !important;
    overflow-y: hidden !important;

    display: flex !important;
    flex-direction: column !important;
}

/*
 * Scrolling is enabled only while the Representative Example
 * is expanded.
 */
#stp-finance-system .stp-finance-dialog.stp-representative-open {
    overflow-y: auto !important;
}


/* ------------------------------------------------------------
   PROGRESS BAR — SLIGHTLY MORE COMPACT
------------------------------------------------------------ */

#stp-finance-system .stp-finance-progress {
    flex: 0 0 auto !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}


/* ------------------------------------------------------------
   STAGE 1 — FIT DEFAULT CALCULATOR INSIDE 90VH
------------------------------------------------------------ */

#stp-finance-system #stp-stage-calculator {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}


/* Header */

#stp-finance-system #stp-stage-calculator .stp-finance-header {
    flex: 0 0 auto !important;
    padding-top: 18px !important;
    padding-bottom: 17px !important;
}

#stp-finance-system #stp-stage-calculator .stp-finance-eyebrow {
    margin-bottom: 6px !important;
}

#stp-finance-system #stp-stage-calculator .stp-finance-header h2 {
    margin-bottom: 5px !important;
}

#stp-finance-system #stp-stage-calculator .stp-finance-header p {
    line-height: 1.45 !important;
}


/* Main calculator area */

#stp-finance-system #stp-stage-calculator .stp-finance-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

#stp-finance-system #stp-stage-calculator .stp-finance-controls,
#stp-finance-system #stp-stage-calculator .stp-finance-results {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}


/* Purchase block */

#stp-finance-system #stp-stage-calculator .stp-purchase-block {
    margin-bottom: 16px !important;
    padding-bottom: 14px !important;
}

#stp-finance-system #stp-stage-calculator .stp-purchase-block > span {
    margin-bottom: 4px !important;
}

#stp-finance-system #stp-stage-calculator .stp-purchase-block > small {
    margin-top: 4px !important;
}


/* Fields */

#stp-finance-system #stp-stage-calculator .stp-field {
    margin-bottom: 18px !important;
}

#stp-finance-system #stp-stage-calculator .stp-field-heading label,
#stp-finance-system #stp-stage-calculator .stp-field-heading strong,
#stp-finance-system #stp-stage-calculator .stp-field > label {
    margin-bottom: 6px !important;
}

#stp-finance-system #stp-stage-calculator .stp-money-input {
    height: 50px !important;
}

#stp-finance-system #stp-stage-calculator #stp-deposit-slider {
    margin-top: 16px !important;
}

#stp-finance-system #stp-stage-calculator .stp-slider-labels {
    margin-top: 7px !important;
}

#stp-finance-system #stp-stage-calculator .stp-validation-message {
    min-height: 8px !important;
    margin-top: 4px !important;
}


/* Term buttons */

#stp-finance-system #stp-stage-calculator .stp-term-grid button {
    min-height: 58px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}


/* Results */

#stp-finance-system #stp-stage-calculator .stp-monthly-label {
    margin-bottom: 5px !important;
}

#stp-finance-system #stp-stage-calculator .stp-monthly {
    margin-bottom: 10px !important;
    padding-bottom: 14px !important;
}

#stp-finance-system #stp-stage-calculator .stp-monthly span {
    margin-top: 5px !important;
}

#stp-finance-system #stp-stage-calculator .stp-breakdown > div {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

#stp-finance-system #stp-stage-calculator .stp-breakdown-total {
    margin-top: 5px !important;
    padding-top: 10px !important;
}

#stp-finance-system #stp-stage-calculator .stp-primary-button {
    min-height: 52px !important;
    margin-top: 14px !important;
}

#stp-finance-system #stp-stage-calculator #stp-remove-finance {
    min-height: 34px !important;
    margin-top: 5px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}


/* ------------------------------------------------------------
   REPRESENTATIVE BAR + COMPLIANCE
------------------------------------------------------------ */

#stp-finance-system .stp-representative-example {
    flex: 0 0 auto !important;
}

#stp-finance-system .stp-representative-toggle {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
}

/*
 * Closed state: content takes no room.
 */
#stp-finance-system #stp-representative-content[hidden] {
    display: none !important;
}

/*
 * When expanded, retain the spacing requested previously.
 */
#stp-finance-system .stp-finance-dialog.stp-representative-open
#stp-representative-content {
    padding-top: 18px !important;
}


/* Compliance kept visible in default state but tightened */

#stp-finance-system #stp-stage-calculator .stp-compliance-copy {
    flex: 0 0 auto !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    line-height: 1.45 !important;
}

#stp-finance-system #stp-stage-calculator .stp-compliance-copy p {
    margin-bottom: 3px !important;
}


/* ------------------------------------------------------------
   STAGE 2 — KEEP IT COMPACT WITHIN THE SAME VIEWPORT
------------------------------------------------------------ */

#stp-finance-system #stp-stage-application {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

#stp-finance-system #stp-stage-application .stp-application-header {
    padding-top: 16px !important;
    padding-bottom: 14px !important;
}

#stp-finance-system #stp-stage-application .stp-application-layout {
    min-height: 0 !important;
}

#stp-finance-system #stp-stage-application .stp-finance-form,
#stp-finance-system #stp-stage-application .stp-application-summary {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

#stp-finance-system #stp-stage-application .stp-form-field {
    margin-bottom: 11px !important;
}

#stp-finance-system #stp-stage-application .stp-form-field label {
    margin-bottom: 5px !important;
}

#stp-finance-system #stp-stage-application .stp-form-field input,
#stp-finance-system #stp-stage-application .stp-form-field select {
    height: 47px !important;
}

#stp-finance-system #stp-stage-application .stp-form-consent {
    margin-top: 2px !important;
}

#stp-finance-system #stp-stage-application .stp-primary-button {
    min-height: 49px !important;
    margin-top: 12px !important;
}


/* ------------------------------------------------------------
   TABLET / MOBILE
------------------------------------------------------------ */

/*
 * On smaller screens the stacked layout naturally exceeds the
 * viewport, so preserve usability by allowing scrolling there.
 */
@media (max-width: 900px) {
    #stp-finance-system .stp-finance-dialog {
        width: var(--stp-layout-mobile-dialog-width) !important;
        height: var(--stp-layout-mobile-dialog-height) !important;
        max-width: var(--stp-layout-mobile-dialog-width) !important;
        max-height: var(--stp-layout-mobile-dialog-height) !important;
        overflow-y: auto !important;
    }
}


/* ============================================================
   SCROLLING FIX
   Robust var(--stp-layout-dialog-width) × var(--stp-layout-dialog-height) behaviour
============================================================ */

/*
 * Keep the popup at var(--stp-layout-dialog-width) × var(--stp-layout-dialog-height).
 *
 * overflow-y:auto is intentional:
 * - Default calculator fits -> no scrollbar is shown.
 * - Representative Example opens -> content exceeds var(--stp-layout-dialog-height) and
 *   the popup scrolls naturally.
 *
 * No JavaScript overflow switching is required.
 */
#stp-finance-system .stp-finance-dialog,
#stp-finance-system .stp-finance-dialog.stp-representative-open {
    width: var(--stp-layout-dialog-width) !important;
    height: var(--stp-layout-dialog-height) !important;
    max-width: var(--stp-layout-dialog-width) !important;
    max-height: var(--stp-layout-dialog-height) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    display: block !important;
}

/*
 * Ensure stages flow naturally inside the scroll container.
 * The previous flex sizing could prevent the expanded example
 * from increasing the document height correctly.
 */
#stp-finance-system #stp-stage-calculator,
#stp-finance-system #stp-stage-application,
#stp-finance-system #stp-stage-confirmation {
    min-height: auto !important;
    height: auto !important;
}

/* Stage visibility is controlled by the hidden attribute in showStage().
   Do not force the calculator stage to display when it is inactive. */

#stp-finance-system #stp-stage-calculator .stp-finance-grid {
    min-height: 0 !important;
    height: auto !important;
}

/*
 * Keep Representative Example in normal document flow so its
 * expanded content increases the scrollable height.
 */
#stp-finance-system .stp-representative-example,
#stp-finance-system #stp-representative-content {
    position: relative !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/*
 * Preserve hidden behaviour while collapsed.
 */
#stp-finance-system #stp-representative-content[hidden] {
    display: none !important;
}

/*
 * Spacing between the expanded bar and table.
 */
#stp-finance-system #stp-representative-content:not([hidden]) {
    padding-top: 18px !important;
}

/*
 * Tablet/mobile remain naturally scrollable.
 */
@media (max-width: 900px) {
    #stp-finance-system .stp-finance-dialog,
    #stp-finance-system .stp-finance-dialog.stp-representative-open {
        width: var(--stp-layout-mobile-dialog-width) !important;
        height: var(--stp-layout-mobile-dialog-height) !important;
        max-width: var(--stp-layout-mobile-dialog-width) !important;
        max-height: var(--stp-layout-mobile-dialog-height) !important;
        overflow-y: auto !important;
    }
}


/* ============================================================
   BALANCED DESKTOP SPACING
   Uses the spare vertical room without reintroducing overflow.
============================================================ */

@media (min-width: 901px) and (min-height: 700px) {

    /* Give the title area a little more breathing room */
    #stp-finance-system #stp-stage-calculator .stp-finance-header {
        padding-top: 23px !important;
        padding-bottom: 22px !important;
    }

    #stp-finance-system #stp-stage-calculator .stp-finance-eyebrow {
        margin-bottom: 8px !important;
    }

    #stp-finance-system #stp-stage-calculator .stp-finance-header h2 {
        margin-bottom: 8px !important;
    }

    /* Increase space within both calculator columns */
    #stp-finance-system #stp-stage-calculator .stp-finance-controls,
    #stp-finance-system #stp-stage-calculator .stp-finance-results {
        padding-top: 25px !important;
        padding-bottom: 25px !important;
    }

    /* Purchase section */
    #stp-finance-system #stp-stage-calculator .stp-purchase-block {
        margin-bottom: 20px !important;
        padding-bottom: 18px !important;
    }

    #stp-finance-system #stp-stage-calculator .stp-purchase-block > span {
        margin-bottom: 6px !important;
    }

    #stp-finance-system #stp-stage-calculator .stp-purchase-block > small {
        margin-top: 5px !important;
    }

    /* Deposit / term spacing */
    #stp-finance-system #stp-stage-calculator .stp-field {
        margin-bottom: 23px !important;
    }

    #stp-finance-system #stp-stage-calculator .stp-field-heading label,
    #stp-finance-system #stp-stage-calculator .stp-field-heading strong,
    #stp-finance-system #stp-stage-calculator .stp-field > label {
        margin-bottom: 8px !important;
    }

    #stp-finance-system #stp-stage-calculator #stp-deposit-slider {
        margin-top: 18px !important;
    }

    #stp-finance-system #stp-stage-calculator .stp-slider-labels {
        margin-top: 9px !important;
    }

    /* Monthly-payment/results spacing */
    #stp-finance-system #stp-stage-calculator .stp-monthly-label {
        margin-bottom: 7px !important;
    }

    #stp-finance-system #stp-stage-calculator .stp-monthly {
        margin-bottom: 14px !important;
        padding-bottom: 18px !important;
    }

    #stp-finance-system #stp-stage-calculator .stp-breakdown > div {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    #stp-finance-system #stp-stage-calculator .stp-breakdown-total {
        margin-top: 7px !important;
        padding-top: 12px !important;
    }

    #stp-finance-system #stp-stage-calculator .stp-primary-button {
        margin-top: 17px !important;
    }

    /* Representative bar gets a little more presence */
    #stp-finance-system .stp-representative-toggle {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }

    /* Compliance copy sits less tightly against the bar */
    #stp-finance-system #stp-stage-calculator .stp-compliance-copy {
        padding-top: 13px !important;
        padding-bottom: 13px !important;
    }

    #stp-finance-system #stp-stage-calculator .stp-compliance-copy p {
        margin-bottom: 5px !important;
    }
}


/* Regulatory disclaimer FCA link */
#stp-finance-system .stp-compliance-copy a {
    color: var(--stp-color-ink) !important;
    font-family: var(--stp-font-body-compact) !important;
    font-weight: var(--stp-font-weight-regular) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

#stp-finance-system .stp-compliance-copy a:hover,
#stp-finance-system .stp-compliance-copy a:focus-visible {
    color: var(--stp-color-ink) !important;
    background: var(--stp-color-accent) !important;
    text-decoration: none !important;
    outline: none !important;
}



/* ============================================================
   FINAL STEP VISIBILITY FIX
   Only the active finance stage may participate in layout.
   Prevents Stage 1 remaining above Stage 2/3 in the scroll flow.
============================================================ */
#stp-finance-system #stp-stage-calculator[hidden],
#stp-finance-system #stp-stage-application[hidden],
#stp-finance-system #stp-stage-confirmation[hidden] {
    display: none !important;
}

#stp-finance-system .stp-finance-stage:not([hidden]) {
    width: 100% !important;
}


/* ============================================================
   REPRESENTATIVE EXAMPLE — TABLET / MOBILE FINAL TWO ROWS FULL WIDTH
   Keeps the existing two-column layout, but makes:
   9. Total Charge for Credit
   10. Total Amount Payable
   span the full available width on tablet and mobile.
============================================================ */

@media (max-width: 900px) {

    #stp-finance-system .stp-representative-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #stp-finance-system .stp-representative-grid .stp-representative-item:nth-last-child(2),
    #stp-finance-system .stp-representative-grid .stp-representative-item:last-child {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

}