.ptc-loan-calculator,
.ptc-loan-calculator * {
    box-sizing: border-box;
}

.ptc-loan-calculator {
    /* Core palette and card */
    --ptc-red: #ed1c2b;
    --ptc-red-dark: #c91523;
    --ptc-surface: #fff;
    --ptc-text: #171717;
    --ptc-muted: #6f6f6f;
    --ptc-line: #e5e5e5;
    --ptc-result-bg: #f7c9cd;
    --ptc-result-bg-start: #f7c9cd;
    --ptc-radius: 24px;
    --ptc-card-shadow: 0 14px 35px rgba(20, 20, 20, .12);
    --ptc-font-family: Prompt, "Noto Sans Thai", sans-serif;

    /* Header and body */
    --ptc-header-bg: var(--ptc-red);
    --ptc-header-color: #fff;
    --ptc-header-padding-y: 16px;
    --ptc-header-padding-x: 26px;
    --ptc-header-gap: 20px;
    --ptc-header-title-size: clamp(21px, 2vw, 30px);
    --ptc-header-subtitle-size: 14px;
    --ptc-body-padding-y: 22px;
    --ptc-body-padding-x: 26px;
    --ptc-section-title-color: var(--ptc-text);
    --ptc-section-title-size: 17px;
    --ptc-section-title-weight: 700;

    /* Product cards */
    --ptc-products-gap: 10px;
    --ptc-products-bottom-space: 26px;
    --ptc-product-bg: #fff;
    --ptc-product-active-bg: #fffafb;
    --ptc-product-border: var(--ptc-line);
    --ptc-product-active-border: var(--ptc-red);
    --ptc-product-color: #111;
    --ptc-product-active-color: var(--ptc-red);
    --ptc-product-label-color: #666;
    --ptc-product-label-size: 11px;
    --ptc-product-icon-size: 37px;
    --ptc-product-icon-spacing: 8px;
    --ptc-product-icon-fit: contain;
    --ptc-product-icon-radius: 0px;
    --ptc-product-min-height: 100px;
    --ptc-product-radius: 15px;
    --ptc-product-padding: 12px 7px 9px;
    --ptc-product-mobile-width: 116px;

    /* Amount and term fields */
    --ptc-fields-gap: 22px;
    --ptc-field-label-color: var(--ptc-text);
    --ptc-field-label-size: 16px;
    --ptc-field-label-weight: 700;
    --ptc-field-value-color: #111;
    --ptc-field-value-size: 18px;
    --ptc-field-value-weight: 700;
    --ptc-field-unit-color: #555;
    --ptc-field-unit-size: 12px;
    --ptc-field-row-gap: 8px;
    --ptc-field-value-space: 7px;
    --ptc-field-divider-color: #ececec;
    --ptc-field-divider-width: 1px;
    --ptc-slider-active: var(--ptc-red);
    --ptc-slider-inactive: #ddd;
    --ptc-slider-thumb: var(--ptc-red);
    --ptc-slider-thumb-border: #fff;
    --ptc-slider-height: 5px;
    --ptc-slider-thumb-size: 22px;
    --ptc-range-fill: var(--ptc-slider-active);
    --ptc-range-track: var(--ptc-slider-inactive);
    --ptc-range-height: var(--ptc-slider-height);
    --ptc-range-thumb-size: var(--ptc-slider-thumb-size);
    --ptc-range-thumb-border-width: 4px;
    --ptc-range-thumb-border-color: var(--ptc-slider-thumb-border);
    --ptc-range-thumb-shadow: 0 1px 6px rgba(0, 0, 0, .3);
    --ptc-range-meta-color: #777;
    --ptc-range-meta-size: 11px;

    /* Result card */
    --ptc-result-radius: 16px;
    --ptc-result-padding: 20px;
    --ptc-result-min-height: 176px;
    --ptc-result-label-color: var(--ptc-red);
    --ptc-result-label-size: 15px;
    --ptc-result-label-weight: 600;
    --ptc-result-value-color: var(--ptc-red);
    --ptc-result-value-size: clamp(32px, 3.7vw, 52px);
    --ptc-result-value-weight: 800;
    --ptc-result-unit-size: 15px;
    --ptc-result-meta-color: #666;
    --ptc-result-meta-value-color: #222;
    --ptc-result-meta-size: 10px;
    --ptc-result-meta-value-size: 12px;
    --ptc-result-meta-value-weight: 700;
    --ptc-result-divider: rgba(150, 50, 60, .18);
    --ptc-result-meta-gap: 0px;
    --ptc-result-row-gap: 8px;
    --ptc-result-row-padding-y: 7px;
    --ptc-result-meta-icon-color: var(--ptc-red);
    --ptc-result-meta-icon-size: 17px;
    --ptc-meta-icon-size: var(--ptc-result-meta-icon-size);
    --ptc-meta-icon-gap: 5px;
    --ptc-result-meta-unit-color: var(--ptc-result-meta-value-color);

    /* Buttons and note */
    --ptc-actions-gap: 12px;
    --ptc-actions-top-space: 22px;
    --ptc-button-radius: 11px;
    --ptc-button-min-height: 44px;
    --ptc-button-padding-y: 10px;
    --ptc-button-padding-x: 24px;
    --ptc-primary-bg: var(--ptc-red);
    --ptc-primary-color: #fff;
    --ptc-primary-border: var(--ptc-red);
    --ptc-secondary-bg: #fff;
    --ptc-secondary-color: #111;
    --ptc-secondary-border: #222;
    --ptc-primary-button-width: auto;
    --ptc-secondary-button-width: auto;
    --ptc-primary-button-align: flex-start;
    --ptc-secondary-button-align: flex-start;
    --ptc-primary-button-offset-x: 0px;
    --ptc-primary-button-offset-y: 0px;
    --ptc-secondary-button-offset-x: 0px;
    --ptc-secondary-button-offset-y: 0px;
    --ptc-note-color: #666;
    --ptc-note-size: 12px;

    container-name: ptc-calculator;
    container-type: inline-size;
    width: 100%;
    overflow: hidden;
    border-radius: var(--ptc-radius);
    background: var(--ptc-surface);
    box-shadow: var(--ptc-card-shadow);
    color: var(--ptc-text);
    font-family: var(--ptc-font-family);
    text-align: left;
}

.ptc-loan-calculator button,
.ptc-loan-calculator input {
    font: inherit;
}

.ptc-loan-calculator button:focus-visible,
.ptc-loan-calculator a:focus-visible,
.ptc-loan-calculator input:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ptc-red) 35%, transparent) !important;
    outline-offset: 2px;
}

.ptc-loan-calculator .ptc-calc-head {
    display: flex;
    min-height: 68px;
    align-items: center;
    gap: var(--ptc-header-gap);
    padding: var(--ptc-header-padding-y) var(--ptc-header-padding-x);
    background: var(--ptc-header-bg);
    color: var(--ptc-header-color);
}

.ptc-loan-calculator .ptc-calc-head h2 {
    margin: 0;
    color: inherit;
    font-size: var(--ptc-header-title-size);
    font-weight: 700;
    line-height: 1.25;
}

.ptc-loan-calculator .ptc-calc-head p {
    margin: 0 0 0 auto;
    color: inherit;
    font-size: var(--ptc-header-subtitle-size);
    font-weight: 600;
    line-height: 1.45;
    text-align: right;
}

.ptc-loan-calculator .ptc-calc-body {
    padding: var(--ptc-body-padding-y) var(--ptc-body-padding-x) calc(var(--ptc-body-padding-y) + 2px);
}

.ptc-loan-calculator .ptc-label {
    display: block;
    margin: 0 0 12px;
    color: var(--ptc-section-title-color);
    font-size: var(--ptc-section-title-size);
    font-weight: var(--ptc-section-title-weight);
    line-height: 1.4;
}

.ptc-loan-calculator .ptc-products {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--ptc-products-gap);
    margin: 0 0 var(--ptc-products-bottom-space);
}

.ptc-loan-calculator .ptc-product {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: var(--ptc-product-min-height);
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: var(--ptc-product-padding);
    border: 2px solid var(--ptc-product-border);
    border-radius: var(--ptc-product-radius);
    background: var(--ptc-product-bg);
    color: var(--ptc-product-color);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}

.ptc-loan-calculator .ptc-product:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--ptc-product-active-border) 42%, white);
}

.ptc-loan-calculator .ptc-product.is-active {
    border-color: var(--ptc-product-active-border);
    background: var(--ptc-product-active-bg);
    color: var(--ptc-product-active-color);
}

.ptc-loan-calculator .ptc-product svg,
.ptc-loan-calculator .ptc-product img,
.ptc-loan-calculator .ptc-product .ptc-product-icon {
    display: block;
    width: var(--ptc-product-icon-size);
    height: var(--ptc-product-icon-size);
    flex: 0 0 auto;
    margin: 0 auto var(--ptc-product-icon-spacing);
    border-radius: var(--ptc-product-icon-radius);
    object-fit: var(--ptc-product-icon-fit);
}

.ptc-loan-calculator .ptc-product svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ptc-loan-calculator .ptc-product > span:not(.ptc-product-icon),
.ptc-loan-calculator .ptc-product .ptc-product-name {
    display: block;
    width: 100%;
    color: var(--ptc-product-label-color);
    font-size: var(--ptc-product-label-size);
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-align: center;
}

.ptc-loan-calculator .ptc-product.is-active > span:not(.ptc-product-icon),
.ptc-loan-calculator .ptc-product.is-active .ptc-product-name {
    color: inherit;
}

.ptc-loan-calculator .ptc-check {
    display: none;
    position: absolute;
    top: 7px;
    right: 7px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ptc-red);
    color: #fff;
    font-size: 12px;
    font-style: normal;
    line-height: 18px;
    text-align: center;
}

.ptc-loan-calculator .ptc-product.is-active .ptc-check {
    display: block;
}

.ptc-loan-calculator .ptc-calc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(190px, 1fr)) minmax(240px, .9fr);
    align-items: stretch;
    gap: var(--ptc-fields-gap);
}

.ptc-loan-calculator .ptc-control {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 5px 0 0;
}

.ptc-loan-calculator .ptc-calc-grid > .ptc-control--amount {
    grid-column: 1;
}

.ptc-loan-calculator .ptc-calc-grid > .ptc-control--months {
    grid-column: 2;
}

.ptc-loan-calculator .ptc-control:first-child {
    padding-right: calc(var(--ptc-fields-gap) / 2);
    border-right: var(--ptc-field-divider-width) solid var(--ptc-field-divider-color);
}

.ptc-loan-calculator.ptc-hide-months .ptc-control--months,
.ptc-loan-calculator.ptc-hide-months .ptc-meta-row--months {
    display: none !important;
}

.ptc-loan-calculator.ptc-hide-months .ptc-calc-grid > .ptc-control--amount {
    grid-column: 1 / 3;
    padding-right: 0;
    border-right: 0;
}

.ptc-loan-calculator .ptc-control-top {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
}

.ptc-loan-calculator .ptc-control-top label {
    display: block;
    margin: 0;
    color: var(--ptc-field-label-color);
    font-size: var(--ptc-field-label-size);
    font-weight: var(--ptc-field-label-weight);
    line-height: 1.35;
}

.ptc-loan-calculator .ptc-number {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--ptc-field-row-gap);
    margin: var(--ptc-field-value-space) 0 7px;
    padding: 0;
    border: 0;
    background: transparent;
}

.ptc-loan-calculator .ptc-number input {
    width: 100%;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    outline: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ptc-field-value-color);
    font-size: var(--ptc-field-value-size);
    font-weight: var(--ptc-field-value-weight);
    line-height: 1.3;
    text-align: left;
    appearance: textfield;
}

.ptc-loan-calculator .ptc-number input::-webkit-inner-spin-button,
.ptc-loan-calculator .ptc-number input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

.ptc-loan-calculator .ptc-number small {
    color: var(--ptc-field-unit-color);
    font-size: var(--ptc-field-unit-size);
    line-height: 1.3;
    white-space: nowrap;
}

.ptc-loan-calculator input[type="range"] {
    display: block;
    width: 100%;
    height: var(--ptc-range-height);
    margin: 0 0 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    outline: 0;
    background: linear-gradient(to right, var(--ptc-range-fill) 0, var(--ptc-range-fill) var(--ptc-progress, 2%), var(--ptc-range-track) var(--ptc-progress, 2%), var(--ptc-range-track) 100%);
    box-shadow: none;
    appearance: none;
}

/*
 * Some theme scripts append a Materialize-style value bubble immediately
 * after range inputs. The calculator already shows its formatted value in
 * the field above, so suppress that duplicate raw number without affecting
 * the native slider thumb or the min/max labels below.
 */
.ptc-loan-calculator input[type="range"] + .thumb {
    display: none !important;
}

.ptc-loan-calculator input[type="range"]::-webkit-slider-thumb {
    width: var(--ptc-range-thumb-size);
    height: var(--ptc-range-thumb-size);
    border: var(--ptc-range-thumb-border-width) solid var(--ptc-range-thumb-border-color);
    border-radius: 50%;
    background: var(--ptc-slider-thumb);
    box-shadow: var(--ptc-range-thumb-shadow);
    cursor: pointer;
    appearance: none;
}

.ptc-loan-calculator input[type="range"]::-moz-range-thumb {
    width: calc(var(--ptc-range-thumb-size) - (var(--ptc-range-thumb-border-width) * 2));
    height: calc(var(--ptc-range-thumb-size) - (var(--ptc-range-thumb-border-width) * 2));
    border: var(--ptc-range-thumb-border-width) solid var(--ptc-range-thumb-border-color);
    border-radius: 50%;
    background: var(--ptc-slider-thumb);
    box-shadow: var(--ptc-range-thumb-shadow);
    cursor: pointer;
}

.ptc-loan-calculator .ptc-range-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--ptc-range-meta-color);
    font-size: var(--ptc-range-meta-size);
    line-height: 1.35;
}

.ptc-loan-calculator .ptc-range-meta span:last-child {
    text-align: right;
}

.ptc-loan-calculator .ptc-actions {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: var(--ptc-actions-gap);
    margin-top: var(--ptc-actions-top-space);
}

/*
 * In the Canva layout each field owns its action. Keeping these wrappers in
 * the field's grid cell prevents the result card's height from leaving a
 * large empty band above a separate, page-wide action row.
 */
.ptc-loan-calculator .ptc-field-action {
    width: 100%;
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

.ptc-loan-calculator .ptc-actions--apply,
.ptc-loan-calculator .ptc-control--amount > .ptc-field-action {
    justify-content: var(--ptc-primary-button-align);
}

.ptc-loan-calculator .ptc-actions--calculate,
.ptc-loan-calculator .ptc-control--months > .ptc-field-action {
    justify-content: var(--ptc-secondary-button-align);
}

.ptc-loan-calculator .ptc-primary,
.ptc-loan-calculator .ptc-secondary {
    display: inline-flex;
    min-height: var(--ptc-button-min-height);
    align-items: center;
    justify-content: center;
    padding: var(--ptc-button-padding-y) var(--ptc-button-padding-x);
    border-radius: var(--ptc-button-radius);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.ptc-loan-calculator .ptc-primary {
    border: 2px solid var(--ptc-primary-border);
    background: var(--ptc-primary-bg);
    color: var(--ptc-primary-color);
}

.ptc-loan-calculator .ptc-primary:hover {
    border-color: var(--ptc-red-dark);
    background: var(--ptc-red-dark);
    color: var(--ptc-primary-color);
}

.ptc-loan-calculator .ptc-secondary {
    border: 2px solid var(--ptc-secondary-border);
    background: var(--ptc-secondary-bg);
    color: var(--ptc-secondary-color);
}

.ptc-loan-calculator .ptc-actions--apply .ptc-primary,
.ptc-loan-calculator .ptc-control--amount > .ptc-field-action .ptc-primary {
    width: var(--ptc-primary-button-width);
    max-width: 100%;
    flex: 0 1 auto;
    transform: translate(var(--ptc-primary-button-offset-x), var(--ptc-primary-button-offset-y));
}

.ptc-loan-calculator .ptc-actions--calculate .ptc-secondary,
.ptc-loan-calculator .ptc-control--months > .ptc-field-action .ptc-secondary {
    width: var(--ptc-secondary-button-width);
    max-width: 100%;
    flex: 0 1 auto;
    transform: translate(var(--ptc-secondary-button-offset-x), var(--ptc-secondary-button-offset-y));
}

.ptc-loan-calculator .ptc-result {
    display: flex;
    min-width: 0;
    min-height: var(--ptc-result-min-height);
    height: 100%;
    grid-column: 3;
    grid-row: 1;
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    padding: var(--ptc-result-padding);
    border-radius: var(--ptc-result-radius);
    background: linear-gradient(145deg, var(--ptc-result-bg-start), var(--ptc-result-bg));
    text-align: center;
}

.ptc-loan-calculator .ptc-result-label {
    color: var(--ptc-result-label-color);
    font-size: var(--ptc-result-label-size);
    font-weight: var(--ptc-result-label-weight);
    line-height: 1.35;
}

.ptc-loan-calculator .ptc-result output {
    display: block;
    margin: 7px 0 10px;
    color: var(--ptc-result-value-color);
    font-size: var(--ptc-result-value-size);
    font-weight: var(--ptc-result-value-weight);
    line-height: 1.05;
    white-space: nowrap;
}

.ptc-loan-calculator .ptc-result output small {
    font-size: var(--ptc-result-unit-size);
    font-weight: 600;
}

.ptc-loan-calculator .ptc-result-meta {
    display: flex;
    flex-direction: column;
    gap: var(--ptc-result-meta-gap);
    padding-top: 10px;
    border-top: 1px solid var(--ptc-result-divider);
}

.ptc-loan-calculator .ptc-result-meta > span,
.ptc-loan-calculator .ptc-result-meta > .ptc-result-row,
.ptc-loan-calculator .ptc-result-meta > .ptc-result-meta-row,
.ptc-loan-calculator .ptc-result-meta > .ptc-meta-row {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ptc-result-row-gap);
    padding: var(--ptc-result-row-padding-y) 0;
    border-bottom: 1px solid var(--ptc-result-divider);
    color: var(--ptc-result-meta-color);
    font-size: var(--ptc-result-meta-size);
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-align: left;
}

.ptc-loan-calculator .ptc-result-meta > span:last-child,
.ptc-loan-calculator .ptc-result-meta > .ptc-result-row:last-child,
.ptc-loan-calculator .ptc-result-meta > .ptc-result-meta-row:last-child,
.ptc-loan-calculator .ptc-result-meta > .ptc-meta-row:last-child {
    border-bottom: 0;
}

.ptc-loan-calculator .ptc-result-meta .ptc-meta-label,
.ptc-loan-calculator .ptc-result-meta .ptc-result-meta-label {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: var(--ptc-meta-icon-gap);
    color: var(--ptc-result-meta-color);
    overflow-wrap: anywhere;
}

.ptc-loan-calculator .ptc-result-meta .ptc-meta-icon {
    display: inline-flex;
    width: var(--ptc-meta-icon-size);
    height: var(--ptc-meta-icon-size);
    flex: 0 0 var(--ptc-meta-icon-size);
    align-items: center;
    justify-content: center;
    color: var(--ptc-result-meta-icon-color);
    font-size: var(--ptc-meta-icon-size);
    line-height: 1;
}

.ptc-loan-calculator .ptc-result-meta .ptc-meta-icon svg,
.ptc-loan-calculator .ptc-result-meta .ptc-meta-icon img,
.ptc-loan-calculator .ptc-result-meta .ptc-meta-icon-image,
.ptc-loan-calculator .ptc-result-meta .ptc-meta-icon-glyph {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Elementor library icons may carry a black color/fill on the rendered i/SVG. */
.ptc-loan-calculator .ptc-result-meta .ptc-meta-icon--library .ptc-meta-icon-glyph,
.ptc-loan-calculator .ptc-result-meta .ptc-meta-icon--library i,
.ptc-loan-calculator .ptc-result-meta .ptc-meta-icon--library svg {
    color: inherit !important;
}

.ptc-loan-calculator .ptc-result-meta .ptc-meta-icon--library svg:not([fill="none"]),
.ptc-loan-calculator .ptc-result-meta .ptc-meta-icon--library svg [fill]:not([fill="none"]) {
    fill: currentColor !important;
}

.ptc-loan-calculator .ptc-result-meta .ptc-meta-icon--library svg [stroke]:not([stroke="none"]) {
    stroke: currentColor !important;
}

.ptc-loan-calculator .ptc-result-meta > span > strong,
.ptc-loan-calculator .ptc-result-meta .ptc-meta-value,
.ptc-loan-calculator .ptc-result-meta .ptc-result-meta-value {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 4px;
    color: var(--ptc-result-meta-value-color);
    font-size: var(--ptc-result-meta-value-size);
    font-weight: var(--ptc-result-meta-value-weight);
    line-height: 1.3;
    overflow-wrap: normal;
    text-align: right;
    white-space: nowrap;
}

.ptc-loan-calculator .ptc-result-meta .ptc-meta-unit,
.ptc-loan-calculator .ptc-result-meta .ptc-result-meta-unit {
    color: var(--ptc-result-meta-unit-color);
    font-size: .9em;
    font-weight: 400;
}

.ptc-loan-calculator .ptc-note {
    margin: 19px 0 0;
    color: var(--ptc-note-color);
    font-size: var(--ptc-note-size);
    line-height: 1.55;
}

.ptc-loan-calculator .ptc-note strong {
    color: var(--ptc-text);
}

/* Component-width breakpoints also work inside Elementor's narrow editor canvas. */
@container ptc-calculator (max-width: 760px) {
    .ptc-loan-calculator .ptc-products {
        grid-auto-columns: var(--ptc-product-mobile-width) !important;
        grid-auto-flow: column !important;
        grid-template-columns: none !important;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        padding: 2px 2px 10px;
        scrollbar-width: thin;
        scroll-snap-type: inline proximity;
    }

    .ptc-loan-calculator .ptc-product {
        scroll-snap-align: start;
    }

    .ptc-loan-calculator .ptc-calc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ptc-loan-calculator .ptc-result {
        grid-column: 1 / -1;
        grid-row: auto;
        height: auto;
    }
}

@container ptc-calculator (max-width: 560px) {
    .ptc-loan-calculator .ptc-calc-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
        padding: 15px 17px;
    }

    .ptc-loan-calculator .ptc-calc-head h2 {
        font-size: min(var(--ptc-header-title-size), 23px);
    }

    .ptc-loan-calculator .ptc-calc-head p {
        margin: 0;
        font-size: min(var(--ptc-header-subtitle-size), 12px);
        text-align: left;
    }

    .ptc-loan-calculator .ptc-calc-body {
        padding: 18px 15px 20px;
    }

    .ptc-loan-calculator .ptc-calc-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .ptc-loan-calculator .ptc-calc-grid > .ptc-control--amount,
    .ptc-loan-calculator .ptc-calc-grid > .ptc-control--months {
        grid-column: 1;
    }

    .ptc-loan-calculator .ptc-control:first-child {
        padding-right: 0;
        border-right: 0;
    }

    .ptc-loan-calculator .ptc-result {
        grid-column: auto;
        grid-row: auto;
        height: auto;
    }

    .ptc-loan-calculator .ptc-primary,
    .ptc-loan-calculator .ptc-secondary {
        flex: 1 1 150px;
    }
}

/* Viewport fallbacks for browsers without container-query support. */
@media (max-width: 767px) {
    .ptc-loan-calculator {
        border-radius: min(var(--ptc-radius), 18px);
    }

    .ptc-loan-calculator .ptc-products {
        grid-auto-columns: var(--ptc-product-mobile-width) !important;
        grid-auto-flow: column !important;
        grid-template-columns: none !important;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        padding: 2px 2px 10px;
        scrollbar-width: thin;
        scroll-snap-type: inline proximity;
    }

    .ptc-loan-calculator .ptc-product {
        scroll-snap-align: start;
    }

    .ptc-loan-calculator .ptc-calc-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .ptc-loan-calculator .ptc-calc-grid > .ptc-control--amount,
    .ptc-loan-calculator .ptc-calc-grid > .ptc-control--months {
        grid-column: 1;
    }

    .ptc-loan-calculator .ptc-control:first-child {
        padding-right: 0;
        border-right: 0;
    }

    .ptc-loan-calculator .ptc-result {
        grid-column: auto;
        grid-row: auto;
        height: auto;
    }

    .ptc-loan-calculator .ptc-actions {
        align-items: stretch;
    }

    .ptc-loan-calculator .ptc-primary,
    .ptc-loan-calculator .ptc-secondary {
        flex: 1 1 150px;
    }
}

@media (max-width: 560px) {
    .ptc-loan-calculator .ptc-calc-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
        padding: 15px 17px;
    }

    .ptc-loan-calculator .ptc-calc-head h2 {
        font-size: min(var(--ptc-header-title-size), 23px);
    }

    .ptc-loan-calculator .ptc-calc-head p {
        margin: 0;
        font-size: min(var(--ptc-header-subtitle-size), 12px);
        text-align: left;
    }

    .ptc-loan-calculator .ptc-calc-body {
        padding: 18px 15px 20px;
    }
}