/* Product checkout refinements, kept separate so CDN caches cannot delay a
   payment-surface update. */
.product-overview-card {
    padding: 22px;
}

.product-overview-card .product-head {
    margin: 0;
}

.product-overview-card .product-block {
    padding-top: 18px;
    border-top: 1px solid var(--border-dim);
}

.product-overview-card .product-block-title {
    margin-bottom: 10px;
    font-size: 15px;
}

.product-overview-card .plan-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 18px;
}

.product-overview-card .plan-specs li {
    font-size: 12.5px;
}

@media (min-width: 860px) {
    .product-overview-card {
        display: grid;
        grid-template-columns: minmax(0, .82fr) minmax(15rem, .68fr);
        align-items: start;
        gap: 26px;
    }

    .product-overview-card .product-block {
        padding-top: 0;
        padding-left: 26px;
        border-top: 0;
        border-left: 1px solid var(--border-dim);
    }

    .product-overview-card .plan-specs {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 540px) {
    .product-overview-card .plan-specs {
        grid-template-columns: 1fr;
    }
}

.store-checkout .payment-method-grid {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.store-checkout .payment-method-card {
    min-height: 72px;
    padding: 14px;
}

.store-checkout .payment-method-card__copy small {
    margin-top: 3px;
}

/* Let the browser render its accessible, unmistakable checked state. The
   previous custom appearance was being overridden by the shared form CSS. */
.store-checkout .tos-check {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    accent-color: var(--brand);
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    cursor: pointer;
}