.osx-commerce-total-savings th,
.osx-commerce-total-savings td {
    color: var(--wd-primary-color, currentColor);
}

.osx-commerce-total-savings strong {
    font-size: 1.08em;
}

.osx-commerce-guidance {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 18px;
    align-items: center;
    margin-block: 20px;
}

.osx-commerce-guidance__copy {
    display: flex;
    gap: 9px;
    align-items: center;
    min-width: 0;
}

.osx-commerce-guidance__icon {
    flex: 0 0 auto;
    font-size: 1.2em;
}

.osx-commerce-progress {
    grid-column: 1 / -1;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgb(0 0 0 / 10%);
    background: color-mix(in srgb, currentColor 13%, transparent);
}

.osx-commerce-progress > span {
    display: block;
    width: min(100%, max(0%, var(--osx-progress, 0%)));
    height: 100%;
    border-radius: inherit;
    background: var(--wd-primary-color, currentColor);
    transition: width .25s ease;
}

.osx-commerce-guidance--compact {
    display: block;
    margin: 8px 0 14px;
    font-size: .92em;
}

.osx-commerce-guidance--compact .osx-commerce-progress {
    margin-top: 8px;
}

.osx-commerce-oto {
    margin: 30px 0;
    padding: clamp(18px, 3vw, 28px);
    border: 1px solid rgb(0 0 0 / 12%);
    border-color: color-mix(in srgb, currentColor 14%, transparent);
    border-radius: var(--wd-brd-radius, 12px);
    background: var(--bgcolor-gray-100, #fafafa);
    box-shadow: 0 12px 34px rgb(0 0 0 / 6%);
}

.osx-commerce-oto__eyebrow {
    display: inline-block;
    margin-bottom: 7px;
    color: var(--wd-primary-color, currentColor);
    font-size: .78em;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.osx-commerce-oto__title {
    margin: 0 0 9px;
}

.osx-commerce-oto__lead {
    max-width: 68ch;
    margin-bottom: 20px;
}

.osx-commerce-oto__grid {
    display: grid;
    grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
    gap: clamp(18px, 4vw, 34px);
    align-items: center;
}

.osx-commerce-oto__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: calc(var(--wd-brd-radius, 12px) * .7);
}

.osx-commerce-oto__product-title {
    margin: 0 0 10px;
}

.osx-commerce-oto__price {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 10px;
    align-items: baseline;
    margin-bottom: 12px;
    font-size: 1.08em;
}

.osx-commerce-oto__price del {
    opacity: .58;
}

.osx-commerce-oto__price ins {
    color: var(--wd-primary-color, currentColor);
    font-size: 1.16em;
    font-weight: 700;
    text-decoration: none;
}

.osx-commerce-oto__saving {
    font-size: .9em;
    font-weight: 600;
}

.osx-commerce-oto__countdown {
    display: inline-flex;
    margin: 2px 0 12px;
    padding: 7px 11px;
    border: 1px solid rgb(0 0 0 / 15%);
    border-color: color-mix(in srgb, var(--wd-primary-color, currentColor) 28%, transparent);
    border-radius: 999px;
    background: rgb(0 0 0 / 4%);
    background: color-mix(in srgb, var(--wd-primary-color, currentColor) 7%, transparent);
    font-size: .92em;
    font-variant-numeric: tabular-nums;
}

.osx-commerce-oto__hint {
    margin: 0 0 14px;
    font-size: .92em;
    opacity: .82;
}

.osx-commerce-oto__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 0;
}

.osx-commerce-oto__actions .button[aria-disabled="true"] {
    pointer-events: none;
    opacity: .52;
}

.osx-commerce-oto-banner {
    margin: 0 0 20px;
    padding: 15px 17px;
    border: 1px solid rgb(0 0 0 / 12%);
    border-color: color-mix(in srgb, var(--wd-primary-color, currentColor) 22%, transparent);
    border-radius: var(--wd-brd-radius, 10px);
    background: rgb(0 0 0 / 3%);
    background: color-mix(in srgb, var(--wd-primary-color, currentColor) 5%, transparent);
}

.osx-commerce-oto-banner__row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 700px) {
    .osx-commerce-guidance {
        grid-template-columns: 1fr;
    }

    .osx-commerce-guidance .button {
        justify-self: start;
    }

    .osx-commerce-oto__grid {
        grid-template-columns: minmax(105px, 34%) minmax(0, 1fr);
        align-items: start;
    }
}

@media (max-width: 480px) {
    .osx-commerce-oto__grid {
        grid-template-columns: 1fr;
    }

    .osx-commerce-oto__media {
        max-width: 180px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .osx-commerce-progress > span {
        transition: none;
    }
}