/* ══════════════════════════════════════════════════════════════
       产品卡片私有样式 — modules/product-card.php
       CSS 三层优先级：此处为模块私有层（最高优先级）
       所有 class 使用 mkl- 前缀，与全局 style.css 互不冲突
    ══════════════════════════════════════════════════════════════ */

    /* 卡片入场动画 — 淡入 + 微上移缩放，营造轻盈感 */
    @keyframes mklCardIn {
        from { opacity: 0; transform: translateY(8px) scale(0.98); }
        to   { opacity: 1; transform: translateY(0)   scale(1);    }
    }

    /* ── 卡片外壳 ─────────────────────────────────────────────── */
    .mkl-product-card {
        display: flex;
        flex-direction: column;
        min-width: 0;                /* 防止长内容撑破 grid 1fr 等分 */
        background: #FFFFFF;
        /* 卡片圆角 — 控制四角弧度，推荐范围 12–24px；对齐 Demo v5 --radius-card */
        border-radius: 18px;
        /* 卡片内边距 — 左右/底部留白，推荐范围 14–24px */
        padding: 18px 18px 22px;
        text-decoration: none;
        color: inherit;
        cursor: pointer;
        /* 透明边框占位，hover 时显现（避免布局偏移）*/
        border: 1px solid transparent;
        /* hover 弹簧动效 + 阴影 + 边框颜色过渡 */
        transition: transform    0.24s cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow   0.22s ease,
                    border-color 0.22s ease,
                    opacity      0.2s  ease;
        /* 入场动画 — 与列表页网格搭配产生层叠感（延迟由列表页 JS 注入）*/
        animation: mklCardIn 0.3s ease both;
    }

    /* 卡片悬浮 — 上浮 4px + 轻浮起阴影 + 极淡描边 */
    /* hover 位移量 — 推荐范围 2–6px */
    .mkl-product-card:hover {
        transform: translateY(-4px);
        /* hover 阴影 — 两层叠加：远处散射 + 近处锐利，推荐调整第一层 rgba 透明度 */
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.09),
                    0 2px  8px  rgba(0, 0, 0, 0.05);
        border-color: rgba(0, 0, 0, 0.07);
    }

    /* 搜索命中高亮（由列表页 JS 添加 .search-match class）*/
    .mkl-product-card.search-match {
        /* 四面环形描边 + 外发光（透明度对齐 Demo v5 CSS 变量值）*/
        box-shadow: 0 0 0 2px rgba(var(--mkl-accent-rgb, 88, 86, 214), 0.28),
                    0 4px 18px rgba(var(--mkl-accent-rgb, 88, 86, 214), 0.09);
        border-color: rgba(var(--mkl-accent-rgb, 88, 86, 214), 0.18) !important;
    }

    /* 搜索未命中暗化（由列表页 JS 添加 .search-dim class）*/
    /* 暗化透明度 — 推荐范围 0.3–0.5（越小越暗）*/
    .mkl-product-card.search-dim       { opacity: 0.38; }
    /* hover 时局部恢复 — 让用户仍可查看暗化卡片 */
    .mkl-product-card.search-dim:hover { opacity: 0.8; }

    /* 筛选隐藏 — 由列表页 JS 切换 */
    .mkl-product-card.hidden { display: none !important; }

        /* ── 图片区域 ─────────────────────────────────────────────── */
    /* 对齐 Demo v5 .card-img-wrap：flex居中 + padding留白 + position:relative供hover图叠放 */
    .mkl-card-img-wrap {
        position: relative;          /* hover图 absolute 定位基准 */
        width: 100%;
        aspect-ratio: 1;             /* 1:1 正方坑位 */
        /* padding: 0 — 改良A：真实产品图撑满，无留白；原 10% 改为 0 */
        /* 如某产品图主体太小，可改为 padding: 3% 留安全边距 */
        padding: 0;
        box-sizing: border-box;
        margin-bottom: 13px;
        border-radius: 10px;
        background: white;
        overflow: hidden;
        transition: opacity 0.18s ease, filter 0.22s ease;
    }
    .mkl-card-img-wrap.sku-switching { opacity: 0; }

    /* 主图 — 撑满 img-wrap（改良A：cover填充，无留白）*/
    /* 如需展示完整轮廓可改为 contain；推荐默认 cover */
    .mkl-card-img-main {
        width: 100%;
        height: 100%;
        object-fit: cover;           /* cover 撑满裁切，不变形；推荐 cover 或 contain */
        display: block;
        transition: opacity 0.3s ease, transform 0.8s cubic-bezier(.4,0,.2,1);
    }
    @media (hover: hover) {
        /* hover 放大比例 — 推荐范围 1.03–1.10 */
        .mkl-product-card:hover .mkl-card-img-main { transform: scale(1.08); }
    }

    /* hover角度图 — absolute叠在主图上；默认opacity:0隐藏；JS懒加载后CSS激活 */
    .mkl-card-img-hover {
        position: absolute;
        inset: 0;                    /* wrap 无 padding，inset:0 铺满，推荐范围 0–5% */
        width: 100%;
        height: 100%;
        object-fit: cover;           /* 与主图保持一致 */
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }
    /* hover 换图已禁用，改为主图放大效果 */
    /*
    @media (hover: hover) {
        .mkl-product-card:hover .mkl-card-img-hover[data-loaded="true"] { opacity: 1; }
    }
    */

        /* ── Badge 标签区域 ────────────────────────────────────────── */
    .mkl-card-badges {
        display: flex;
        flex-wrap: wrap;
        /* badge 间距 — 推荐范围 4–8px */
        gap: 8px;
        /* badge 区域下间距 */
        margin-bottom: 9px;
        /* 推到卡片底部（接替 card-info 的 margin-top:auto） */
        margin-top: auto;
        /* 保留高度避免无 badge 时后续元素跳动 */
        min-height: 20px;
    }

    /* Badge pill 样式（列表页浅色体系，颜色由 product-badges.php 内联写入 style）
       此处只定义尺寸/形状，颜色不在此处定义（由 badge 系统动态注入）*/
    .mkl-card-badges .mkl-badges { display: flex; flex-wrap: wrap; gap: 6px; }

    .mkl-card-badges .mkl-badge {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        /* badge 内边距 — 推荐范围 2px 6px ~ 4px 10px */
        padding: 2px 7px;
        /* badge 圆角 — 列表页方形感，推荐范围 4–8px */
        border-radius: 5px;
        /* badge 字号 — 列表页克制尺寸，推荐范围 10–12px */
        font-size: 10.5px;
        font-weight: 500;
        line-height: 1.5;
        white-space: nowrap;
    }

    /* ── 产品名 ───────────────────────────────────────────────── */
    .mkl-card-name {
        /* 产品名字号 — 控制主要信息层级，推荐范围 14–20px */
        font-size: 19px;
        /* 下移1px补偿缩略图边框，视觉顶对齐 */
        margin-top: 1px;
        font-weight: 500;
        color: #1D1D1F;
        line-height: 1.35;
        /* 产品名与卖点行间距 */
        margin-bottom: 4px;
        letter-spacing: -0.01em;
        /* 单行截断 — 超长标题省略，保持卡片等高 */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ── 产品型号 ───────────────────────────────────────────── */
    .mkl-card-spec {
        /* 型号字号 — 次要信息层级，推荐范围 11–16px */
        font-size: 15px;
        /* #86868B — Apple 副文本灰，与标题拉开层级 */
        color: #86868B;
        line-height: 1.45;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ── 卡片信息区：左列(badges+文字) + 右列(SKU缩略图) ── */
    /* margin-top:auto 将整个信息区推到卡片底部 */
    .mkl-card-info {
        display: flex;
        align-items: stretch;        /* 左右列等高拉伸，标题顶对齐+model底对齐指示器 */
        /* 左右列间距 — 推荐范围 8–14px */
        gap: 2px;
        padding-top: 0;
    }

    /* 左侧：badges + 产品名 + 卖点，自动占满剩余宽度 */
    .mkl-card-left {
        flex: 1;
        min-width: 0;                /* 防止长文字撑破 flex 容器 */
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* 标题顶部，model推底部对齐指示器 */
        gap: 0;
    }
    /* 单SKU卡片：badges + 标题 + model 全部居中 */
    .mkl-card--single .mkl-card-badges {
        justify-content: center;
    }
    .mkl-card--single .mkl-card-left {
        text-align: center;
    }

    /* ── SKU 缩略图条 — 横排，右列顶部与 badge 行齐平 ─────── */
    .mkl-card-sku-strip {
        display: flex;
        flex-direction: row;         /* 横排 */
        flex-wrap: nowrap;
        /* 缩略图列间距 — 推荐范围 5–10px */
        gap: 7px;
        flex-shrink: 0;
        /* align-self 已移除，由 card-info stretch 统一控制对齐 */
        position: relative;
    }

    /* 单个 SKU 项：缩略图 + 下方指示线（纵向堆叠）*/
    .mkl-sku-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 缩略图与指示线间距 — 推荐范围 4–7px */
        gap: 5px;
        cursor: pointer;
        flex-shrink: 0;
    }

    /* 单个 SKU 缩略图按钮 */
    .mkl-sku-thumb {
        /* 缩略图尺寸 — 48px，推荐范围 40–64px */
        width: 48px;
        height: 48px;
        /* 缩略图圆角 — 推荐范围 8–12px */
        border-radius: 10px;
        /* 默认描边 — 浅灰，选中态覆盖为 accent 色 */
        border: 1px solid rgba(0, 0, 0, 0.07);
        background-color: #FFFFFF;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        transition: border-color 0.15s ease;
        outline: none;
        padding: 0;
        /* button 元素默认样式重置 */
        -webkit-appearance: none;
        appearance: none;
    }

    /* hover：边框加深 */
    .mkl-sku-thumb:hover {
        border-color: rgba(0, 0, 0, 0.16);
    }
/* 指示点 — 默认灰色圆点，选中态变为横线 */
     .mkl-sku-line {
         /* 圆点尺寸 — 推荐范围 5–8px */
         width: 6px;
         height: 6px;
         border-radius: 99px;
         background: #D1D1D6;
         transition: background 0.15s ease, width 0.15s ease, height 0.15s ease;
     }
    
     /* 选中态：圆点 → 横线 + accent 色 选中时横线改胖瘦在这里*/ 
     .mkl-sku-item.sku-on .mkl-sku-line {
         /* 横线尺寸 — 推荐范围 16–24px 宽，2px 高 */
         width: 15px;
         height: 4px;
         background: var(--mkl-accent, #5856D6);
     }
    
     /* 选中态缩略图边框不变，由指示线表达选中状态 */
     .mkl-sku-item.sku-on .mkl-sku-thumb {
         border-color: rgba(0, 0, 0, 0.07);
     }

    /* ── 箭头按钮（3+ 个 SKU 时显示，循环切换到更多变体）──── */
    .mkl-sku-more-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;                    /* 与 .mkl-sku-item gap 保持一致 */
        cursor: pointer;
        flex-shrink: 0;
        margin-left: auto;           /* 推到 strip 最右侧 */
    }

    /* 箭头图标容器 — 裸符号极轻量，宽度最小化 */
    .mkl-sku-arrow-box {
        width: 14px;          /* 推荐范围 10–16px，只需容纳箭头符号 */
        height: 45.5px;       /* 与缩略图同高，维持垂直对齐 */
        background: none;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.15s ease;
    }
    .mkl-sku-more-btn:hover .mkl-sku-arrow-box { opacity: 0.5; }
    .mkl-sku-arrow-box svg {
        width: 10px;          /* 推荐范围 8–14px；viewBox 已收窄，视觉饱满 */
        height: 16px;
        color: #8E8E93;
    }
    /* 超出2个SKU时strip整体右移3px，为标题多留空间 */
    .mkl-card-sku-strip.mkl-sku-strip--has-more {
        transform: translateX(10px);   /* 推荐范围 2–12px，不影响布局流 */
    }

    /* 箭头占位线 — 透明，保持与缩略图对齐 */
    .mkl-sku-arrow-line {
        width: 14px;
        height: 2px;
        border-radius: 99px;
        background: transparent;     /* 占位用，不显示颜色 */
    }