/* partition-pay1.css — 专用于 Skin3 分页的支付第一步产品卡片，覆盖全局 .product-list */

.skin3-pay-products {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

    /* 每列宽度，四列布局；可按需改为 6 列或 3 列 */
    .skin3-pay-products li {
        list-style: none;
        box-sizing: border-box;
        width: 25%;
        padding: 8px;
    }

    /* 覆盖全局 .product-list 的固定宽高，强制采用 flex 布局 */
    .skin3-pay-products .product-list,
    .skin3-pay-products .pay-card {
        display: flex !important;
        align-items: center;
        height: 86px !important;
        width: 100% !important;
        padding: 10px 12px !important;
        border: 1px solid #e9e9e9 !important;
        border-radius: 4px !important;
        background: #ffffff !important;
        text-decoration: none !important;
        color: inherit !important;
        box-sizing: border-box !important;
        transition: all 0.15s ease-in-out;
    }

        /* 图标区域：固定大小，居中显示 */
        .skin3-pay-products .pay-card .icon {
            flex: 0 0 60px;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            background: #ffffff;
            border-radius: 6px;
        }

            /* 确保图片大小受控，不被其它规则撑开 */
            .skin3-pay-products .pay-card .icon img {
                width: 48px;
                height: 48px;
                max-width: 100%;
                max-height: 100%;
                display: block;
            }

        /* 信息区占剩余宽度 */
        .skin3-pay-products .pay-card .info {
            flex: 1 1 auto;
            padding: 0;
        }

        /* 标题与副标题 */
        .skin3-pay-products .pay-card .title {
            display: block;
            font-size: 14px;
            color: #333;
            line-height: 1.2;
        }

        .skin3-pay-products .pay-card .sub {
            display: block;
            font-size: 12px;
            color: #e60013;
            margin-top: 6px;
        }

        /* 悬停 / 激活样式（以第一项为参考）*/
        .skin3-pay-products .pay-card:hover,
        .skin3-pay-products .pay-card:focus,
        .skin3-pay-products .pay-card.active {
            background: #fff8d9 !important; /* 浅黄背景 */
            border-color: #f2db89 !important; /* 淡黄色边框 */
            box-shadow: 0 0 0 3px rgba(242,197,107,0.08) inset;
            transform: translateY(-1px);
        }

            .skin3-pay-products .pay-card:hover .title,
            .skin3-pay-products .pay-card.active .title {
                color: #1abc9c;
            }

/* 响应式：小屏改为两列 / 一列 */
@media (max-width: 992px) {
    .skin3-pay-products li {
        width: 33.3333%;
    }
}

@media (max-width: 768px) {
    .skin3-pay-products li {
        width: 50%;
    }
}

@media (max-width: 480px) {
    .skin3-pay-products li {
        width: 100%;
    }
}