/**
 * product-list – Mobile Overrides
 * 差异模式：只覆写需要修改的 PC 属性
 * 断点由 <link media="(max-width: 768px)"> 统一控制，本文件无需 @media 包裹
 */

/* ═══════════════════════════════════════════════════════════════
   工具类：mkl-mobile-only / mkl-desktop-only
   默认 display:none，mobile 文件激活 mobile-only
═══════════════════════════════════════════════════════════════ */
/* mobile-only 元素在 PC 由 shortcode 内联 <style> 隐藏；
   本文件只负责 mobile 端激活为 block */
.mkl-mobile-only  { display: block !important; }

/* ── PC 端 sidebar / tab-bar-wrap / list-main 在移动端隐藏 ── */
.mkl-tab-bar-wrap { display: none; }
.mkl-list-sidebar { display: none; }
.mkl-list-main    { display: block; padding: 0; }
.mkl-product-area { padding: 0 16px; }
.mkl-list-header  { padding: 4px 16px 0; position: static; display: flex; align-items: center; }
.mkl-list-header .mkl-mobile-filter-btn { margin-left: auto; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   PAGE 根节点覆写
═══════════════════════════════════════════════════════════════ */
.mkl-list-page {
    min-width: 0;
    padding-top: 16px;
}
/* 子元素 max-width 取消，移动端全宽 */
.mkl-list-page > * {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* ═══════════════════════════════════════════════════════════════
   TOP ROW：产品线胶囊 + 筛选按钮
═══════════════════════════════════════════════════════════════ */
.mkl-mobile-top-row {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    padding: 10px 16px 8px;
    gap: 10px;
}

/* 产品线胶囊 */
.mkl-mobile-line-capsule {
    display: flex;    /* 改为 flex，flex:1 才能正确生效 */
    background: #EFEFEF;
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.mkl-mobile-line-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;  /* 文字居中 */
    gap: 6px;
    flex: 1;                  /* 两个按钮平分胶囊宽度 */
    padding: 6px 8px;
    border-radius: 8px;
    background: transparent;
    border: none;
    font-family: 'Inter', 'Noto Sans SC', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #86868B;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, color 0.18s;
    white-space: nowrap;
}
.mkl-mobile-line-btn.active {
    background: white;
    color: var(--mkl-accent, #5856D6);
    box-shadow: 0 1px 4px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(0,0,0,0.05);
}
.mkl-mobile-line-btn .mkl-tab-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--mkl-accent, #5856D6);
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.2s, transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
    flex-shrink: 0;
}
.mkl-mobile-line-btn.active .mkl-tab-dot {
    opacity: 1;
    transform: scale(1);
}

/* 筛选按钮 */
.mkl-mobile-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 10px;
    border: 1.5px solid #E5E5EA;
    background: white;
    font-family: 'Inter', 'Noto Sans SC', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #3a3a3c;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.mkl-mobile-filter-btn.active {
    border-color: var(--mkl-accent, #5856D6);
    color: var(--mkl-accent, #5856D6);
    background: rgba(var(--mkl-accent-rgb, 88,86,214), 0.06);
}

/* 角标 */
.mkl-mobile-filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 99px;
    background: var(--mkl-accent, #5856D6);
    color: white;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════
   CATEGORY ROW：Layer 1 横滚 pills（常驻）
═══════════════════════════════════════════════════════════════ */
.mkl-mobile-cat-row {
    display: block !important;
    padding: 0 16px 8px;
}

.mkl-mobile-cat-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 3px 2px 4px;  /* 上下左右留空防 box-shadow 裁切 */
}
.mkl-mobile-cat-scroll::-webkit-scrollbar { display: none; }

.mkl-mobile-cat-pill {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 10px;
    border: none;
    box-shadow: 0 0 0 1.5px #E5E5EA;
    background: white;
    font-family: 'Inter', 'Noto Sans SC', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #3a3a3c;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: box-shadow 0.15s, color 0.15s;
}
.mkl-mobile-cat-pill.active {
    color: var(--mkl-accent, #5856D6);
    box-shadow: 0 0 0 1.5px var(--mkl-accent, #5856D6);
}
.mkl-mobile-cat-pill.disabled {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   EXPAND AREA：Layer 2+3 折叠区
═══════════════════════════════════════════════════════════════ */
.mkl-mobile-expand {
    display: block !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.30s cubic-bezier(0.4,0,0.2,1);
}

.mkl-mobile-expand-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 16px 12px;
}

.mkl-mobile-expand-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Layer 2 关键词横滚 */
.mkl-mobile-kw-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 3px 2px 4px;
}
.mkl-mobile-kw-scroll::-webkit-scrollbar { display: none; }

.mkl-mobile-kw-pill {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 10px;
    border: none;
    box-shadow: 0 0 0 1.5px #E5E5EA;
    background: white;
    font-family: 'Inter', 'Noto Sans SC', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #3a3a3c;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: box-shadow 0.15s, color 0.15s;
}
.mkl-mobile-kw-pill.active {
    color: var(--mkl-accent, #5856D6);
    box-shadow: 0 0 0 1.5px var(--mkl-accent, #5856D6);
}

/* Layer 3 badge 横滚 */
.mkl-mobile-badge-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 2px 6px;  /* 上下左右留空，outline 不被裁切 */
}
.mkl-mobile-badge-scroll::-webkit-scrollbar { display: none; }

.mkl-mobile-badge-pill {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 10px;
    border: none;
    font-family: 'Inter', 'Noto Sans SC', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    opacity: 0.65;
    box-shadow: 0 0 0 1.5px transparent; /* 始终保持属性，防 iOS tap 残留 */
    transition: opacity 0.15s, box-shadow 0.15s;
}
.mkl-mobile-badge-pill.active {
    opacity: 1;
    box-shadow: 0 0 0 1.5px currentColor;
}

/* ═══════════════════════════════════════════════════════════════
   RESULTS BAR + 清除按钮
═══════════════════════════════════════════════════════════════ */
.mkl-results-info {
    font-size: 12px;
    margin-bottom: 10px;
    padding-left: 16px;
}

/* 清除筛选：在 expand-inner 底部，随展开区折叠，有激活筛选才显示 */
.mkl-mobile-clear-btn {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 8px;
    border-radius: 8px;
    border: 1.5px solid #E5E5EA;
    background: white;
    font-family: 'Inter', 'Noto Sans SC', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #6E6E73;
    cursor: pointer;
    text-align: center;
}

/* 清除 iOS Safari 点击高亮（白色四角残留根源）+ focus ring */
.mkl-mobile-cat-pill,
.mkl-mobile-kw-pill,
.mkl-mobile-badge-pill,
.mkl-mobile-filter-btn,
.mkl-mobile-line-btn {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT GRID：2列
═══════════════════════════════════════════════════════════════ */
.mkl-product-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 12px;
    row-gap: 16px;
}

/* ══════════════════════════════════════════════════════════════
   Display B 覆写：Apple 风格卡片
   ══════════════════════════════════════════════════════════════ */

/* Grid: gap=1px，background 作分隔线颜色 */
.mkl-product-area { padding: 0; }
.mkl-product-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1px;
    row-gap: 1px;
    background: #E5E5EA;
}
/* 奇数产品时 ::after 填白，防分隔线背景色外露 */
.mkl-product-grid::after {
    content: '';
    background: white;
}

/* 卡片: overflow 用 !important visible，box-shadow 才不被裁切 */
.mkl-product-card {
    padding: 0;
    border-radius: 0 !important;
    overflow: visible !important;
    padding: 38px 0 !important;
    background: white;
    box-shadow: none !important;
    position: relative;
}

/* img-wrap: overflow:hidden 裁切 scale(1.05)；1:1 正方形 */
.mkl-card-img-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    border-radius: 0;
    margin-bottom: 0;
    padding: 0;
    box-sizing: border-box;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/* Bug5: 图片放大 5% */
.mkl-card-img-main,
.mkl-card-img-hover {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(1.05);
}

/* Bug1: Badge 单行横滑，!important 防 A 文件覆盖 */
.mkl-card-badges {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    gap: 4px;
    padding: 8px 10px 0;
    min-height: 0;
}
.mkl-card-badges::-webkit-scrollbar { display: none; }
.mkl-card-badges .mkl-badge {
}
/* Bug1: 内层 .mkl-badges 容器也需强制单行 */
.mkl-card-badges .mkl-badges {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px;
}

/* Info 区：居中竖排 */
.mkl-card-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 8px 12px;
    gap: 0;
}
.mkl-card-left {
    width: 100%;
    text-align: center;
}

/* Bug2: 产品名 2行 clamp
   product-card.css 有 white-space:nowrap（无 !important），加 !important 覆盖 */
.mkl-card-name {
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 3px !important;
    color: #1D1D1F !important;
    min-height: 37px !important;
}
/* Bug2: 型号 */
.mkl-card-spec {
    font-size: 11px !important;
    font-weight: 400 !important;
    text-align: center !important;
    color: #86868B !important;
    white-space: normal !important;
    margin-top: 10px !important;
}

/* Bug3: SKU 圆点叠在图片底部
   sku-strip 在 .mkl-card-info 内，position:absolute 相对 .mkl-product-card
   card overflow:visible，圆点不被裁切
   图片高约 50vw，圆点距底 8px → top = calc(50vw - 10px) */
.mkl-card-sku-strip {
    position: absolute !important;
    top: calc(50vw + 28px) !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    z-index: 2 !important;
}
.mkl-sku-thumb { display: none !important; }
.mkl-sku-more-btn { display: none !important; }
/* Bug3: 深色半透明，白底黑底均可见 */
.mkl-sku-line {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,0.2) !important;
    margin-top: 0 !important;
    transition: background 0.2s !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.6) !important;
}
.mkl-sku-item.sku-on .mkl-sku-line {
    background: rgba(0,0,0,0.6) !important;
}

/* Fix1: 去除卡片 hover 效果 */
.mkl-product-card:hover,
.mkl-product-card.search-dim:hover {
    transform: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* Fix2: 卡片 info 内边距最小化 */
.mkl-card-info {
    padding: 2px 20px 10px !important;
}

/* Fix3: badge/标题/型号整体下移 4px */
.mkl-card-badges {
    padding-top: 12px !important;
}

/* Fix4: 型号字体改为 JetBrains Mono（与详情页一致）*/
.mkl-card-spec {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
}

/* Fix: 单SKU卡片 badge 也用 flex-start，防溢出时两侧同时截断 */
.mkl-card--single .mkl-card-badges {
    justify-content: flex-start !important;
}

/* Fix: 去除触摸 hover 图片放大和切换效果 */
.mkl-product-card:hover .mkl-card-img-main {
    transform: scale(1.05) !important;
}
.mkl-product-card:hover .mkl-card-img-hover[data-loaded="true"] {
    opacity: 0 !important;
}

/* badge ≤3 个时居中对齐 */
.mkl-card-badges.badges-few {
    justify-content: center !important;
}