/* カスタマイズ用CSS */

/* ===== 商品卡片视觉优化 ===== */
.ec-shelfGrid .ec-shelfGrid__item {
    border: 1px solid #e6e6e6;           /* 淡灰色边框 */
    border-radius: 4px;                  /* 轻微圆角 */
    background-color: #fff;              /* 保证背景统一 */
    overflow: hidden;                    /* 防止内容溢出 */
    /* 利用外扩阴影制造卡片间隙，不影响布局 */
    box-shadow: 0 0 0 6px #fff inset;   /* 四周 6px 白色内阴影，形成间距感 */
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.ec-shelfGrid .ec-shelfGrid__item:hover {
    border-color: #d0d0d0;               /* 鼠标悬停时略深 */
    box-shadow:
        0 0 0 6px #fff inset,            /* 保持间距 */
        0 2px 8px rgba(0, 0, 0, 0.06);   /* 轻微浮起 */
}

/* 卡片内容内边距，让内容与边框保持距离 */
.ec-shelfGrid .ec-shelfGrid__item > a {
    display: block;
    padding: 8px;            /* 上下左右 8px */
    box-sizing: border-box;  /* 计入宽度 */
}

/* 调整商品列表整体左右内边距，增大可用宽度 */
.ec-shelfRole {
    padding-left: 0;
    padding-right: 10px;     /* 轻微右内边距保持对齐 */
}

/* 数量行与按钮区内边距（考虑 form 嵌套） */
.ec-shelfGrid .ec-shelfGrid__item .ec-productRole__actions,
.ec-shelfGrid .ec-shelfGrid__item .ec-productRole__btn {
    padding: 0 8px;
}
/* 数量行与正文留一点竖直间距 */
.ec-shelfGrid .ec-shelfGrid__item .ec-productRole__actions {
    margin-top: 8px;
}

/* ---------- 5列布局与水平间隙(≥992px) ---------- */
@media (min-width: 992px) {
    /* 使用 flex gap 创建左右空隙 */
    .ec-shelfGrid {
        gap: 10px; /* 行列间隙 */
        margin-left: 0;
        margin-right: 0;
    }

    /* 去掉 EC-CUBE 原有左右 padding, 重新计算宽度 = (100% - 4*gap)/5 */
    .ec-shelfGrid .ec-shelfGrid__item {
        padding: 0 !important;
        flex: 0 0 calc((100% - 40px) / 5);
        max-width: calc((100% - 40px) / 5);
    }
}