/* Product payment options: restrained surfaces with clear price hierarchy. */
.ty-product-page-details-holder .ty-product-page-payment-method-holder > h2 {
    color: #e7e4e1; font-size: 17px; margin-bottom: 14px;
}
.ty-product-page-details-holder .ty-product-page-payment-method-holder > ul {
    gap: 10px; align-items: stretch; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.ty-product-page-details-holder .ty-product-page-payment-method-holder > ul > li {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    padding: 10px 8px; min-height: 100px;
    border: 1px solid #505054; border-radius: 10px;
    background: linear-gradient(145deg, #303033 0%, #232326 68%, #202022 100%);
    box-shadow: inset 0 1px 0 #ffffff0c, 0 4px 12px #00000018;
    text-align: center;
}
.ty-product-page-details-holder .ty-product-page-payment-method-holder > ul > li > .ty-img-holder {
    display: flex; justify-content: center; align-items: center;
    height: 30px; width: 100%; margin: 0 0 6px; gap: 7px; flex-shrink: 0;
}
.ty-product-page-details-holder .ty-product-page-payment-method-holder > ul > li > .ty-img-holder > img {
    width: 94px; max-width: 100%; height: 30px; object-fit: contain;
}
.ty-product-page-details-holder .ty-product-page-payment-method-holder > ul > li > .ty-img-holder > :is(i, p) {
    color: #d3d0cc; font-size: 13px; margin: 0; font-weight: 600;
}
.ty-product-page-details-holder .ty-product-page-payment-method-holder > ul > li > .ty-img-holder > i { font-size: 18px; }
.ty-product-page-details-holder .ty-product-page-payment-method-holder .ty-value > .price,
.ty-product-page-details-holder .ty-product-page-payment-method-holder .bank-card-amount {
    color: #fff; font-size: 16px; font-weight: 700; line-height: 1.35;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ty-product-page-details-holder .bank-card-currency { font-size: 12px; font-weight: 500; color: #c5c2bf; }
.ty-product-page-details-holder .bank-card-term {
    color: #b9b6b3; font-size: 11px; font-weight: 400; line-height: 14px; margin: 0;
}
.ty-product-page-details-holder .ty-product-page-payment-method-holder .ty-value .koko {
    margin: 2px 0 0; font-size: 10px; line-height: 14px; color: #d0b8ca;
}
.ty-product-page-details-holder .ty-product-page-payment-method-holder .bank-more-info {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    margin: auto auto 0; padding: 2px 4px; min-height: 24px; line-height: 20px;
    color: #edaa7e; font-size: 13px; font-weight: 600; text-decoration: none;
}
.ty-product-page-details-holder .bank-more-info:focus-visible { outline: 2px solid #edaa7e; border-radius: 4px; outline-offset: 2px; }
@media (hover: hover) {
    .ty-product-page-details-holder .bank-more-info:hover { color: #ffd1b2; text-decoration: none; }
}
@media (max-width: 479px) {
    .ty-product-page-details-holder .ty-product-page-payment-method-holder > ul { gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ty-product-page-details-holder .ty-product-page-payment-method-holder > ul > li { padding: 10px 6px; border-radius: 10px; }
    .ty-product-page-details-holder .ty-product-page-payment-method-holder .ty-value > .price,
    .ty-product-page-details-holder .ty-product-page-payment-method-holder .bank-card-amount { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .ty-product-page-details-holder .ty-product-page-payment-method-holder > ul > li { transition: none; }
    .ty-product-page-details-holder .ty-product-page-payment-method-holder > ul > li:hover { transform: none; }
}

/* Keep the full installment summary within the reference's compact height. */
.ty-product-page-details-holder .ty-product-page-payment-method-holder > ul > li.bank-payment-card { padding: 6px 8px; }
.ty-product-page-details-holder .ty-product-page-payment-method-holder > ul > li.bank-payment-card > .ty-img-holder { height: 24px; margin-bottom: 4px; }
.ty-product-page-details-holder .ty-product-page-payment-method-holder > ul > li.bank-payment-card > .ty-img-holder > img { height: 24px; }
.ty-product-page-details-holder .ty-product-page-payment-method-holder .bank-card-amount { line-height: 20px; }
.ty-product-page-details-holder .ty-google-pay-logo { flex-basis: 80px; width: 80px; height: 30px; }
.ty-product-page-details-holder .ty-product-page-payment-method-holder > ul > li .ty-img-holder .ty-google-pay-logo img {
    left: -22.17px; top: -25.14px; width: 126.86px; height: 82.29px;
}

/* Give payment and bank marks the prominence of the Chama reference. */
.ty-product-page-details-holder .ty-product-page-payment-method-holder > ul > li > .ty-img-holder {
    height: 36px; margin-bottom: 4px;
}
.ty-product-page-details-holder .ty-product-page-payment-method-holder > ul > li > .ty-img-holder > img {
    width: 128px; height: 36px;
}
.ty-product-page-details-holder .ty-product-page-payment-method-holder > ul > li.bank-payment-card > .ty-img-holder {
    height: 42px; margin-bottom: 4px;
}
.ty-product-page-details-holder .ty-product-page-payment-method-holder > ul > li.bank-payment-card > .ty-img-holder > img {
    width: 128px; height: 42px;
}
.ty-product-page-details-holder .ty-google-pay-logo { flex-basis: 110px; width: 110px; height: 36px; }
.ty-product-page-details-holder .ty-product-page-payment-method-holder > ul > li .ty-img-holder .ty-google-pay-logo img {
    left: -30.486px; top: -38.571px; width: 174.429px; height: 113.143px;
}

/* Allow the complete Google Pay mark inside its existing image crop. */
.ty-product-page-details-holder .ty-product-page-payment-method-holder > ul > li.ty-google-pay-card > .ty-img-holder { height: 44px; }
.ty-product-page-details-holder .ty-google-pay-logo { height: 44px; }
.ty-product-page-details-holder .ty-product-page-payment-method-holder > ul > li .ty-img-holder .ty-google-pay-logo img { top: -34.571px; }