/* ══ related-products.mobile.css ══
 * 对标 demo .recommend 横向滚动卡片
 * ════════════════════════════════════════ */

.mkl-related       { padding: 20px 0; }
.mkl-related-title { font-size: 17px; margin-bottom: 16px; text-align: center; letter-spacing: 0.04em; }

/* 横向 scroll-snap 出血容器 */
.mkl-related-grid {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    margin: 0 -12px;
    padding: 0 12px 16px;
    /* 覆盖 PC grid-template-columns */
    grid-template-columns: unset;
}
.mkl-related-grid::-webkit-scrollbar { display: none; }

/* 每张卡：固定宽度 + 右侧露出暗示可滑 */
.mkl-related-card {
    flex-shrink: 0;
    width: 57vw; /* 单列大卡，右侧约25vw露出暗示可滑 */
    scroll-snap-align: start;
    border-radius: 12px;
}

/* 品牌底线替代悬停阴影 */
.mkl-related-card {
    border-bottom: 2px solid var(--mkl-accent);
    box-shadow: none;
}
.mkl-related-card:hover,
.mkl-related-card:active {
    transform: none;
    box-shadow: none;
}

.mkl-related-img   { padding: 12px; }
.mkl-related-info  { padding: 8px 10px 12px; }
.mkl-related-model { font-size: 11px; }
.mkl-related-name  { font-size: 13px; }
.mkl-related-tagline { font-size: 12px; }