/* =========================================================
   艺术中心（extension/allselect/other/artcenter）专用样式
   —— 从 artcenter.twig 的内联 <style> 抽离，便于统一管理 ——

   注意：
   1）站点主题 CSS 会隐藏原生 button/select（主题内按钮全是 <a> 实现），
      所以结构用 <a>，并对关键属性加 !important 强制可见。
   2）position:relative + z-index 是关键：.page 里有一个绝对定位的背景装饰层
      （.page_bg2_yszx，深色艺术背景），没有定位的内容会被它盖住——tab 看不见就是这个原因
   ========================================================= */

.ac-wrap { position: relative !important; z-index: 1 !important; max-width: 1890px; margin: 0 auto; padding: 10px 40px 60px; font-family: 'Figtree-Medium', 'Figtree-Regular', "Open Sans", sans-serif !important; }

.ac-top { display: block !important; text-align: center !important; margin: 2px 0 95px !important; }

/* ---- 分类 tab：纯文字样式，居中排列 ----
   配色：默认 #4A4672（深紫灰），选中/悬停文字 #7C8ED0（雾蓝紫），选中下划线 #FB75D2（粉） */
.ac-top { border-bottom: none !important; }
.ac-wrap .page_tit.fff2 > h3 { color: #FB75D2 !important; }
/* position: relative 供下划线「流动条」(.ac-tab-ind) 绝对定位使用 */
.ac-tabs { position: relative !important; display: flex !important; gap: 30px !important; flex-wrap: wrap !important; justify-content: center !important; border-bottom: 1px solid rgba(255,255,255,.04) !important; }
a.ac-tab { display: inline-block !important; padding: 4px 2px 6px !important; border: none !important; border-bottom: 2px solid transparent !important; background: transparent !important; border-radius: 0 !important; cursor: pointer !important; font-size: 22px !important; color: #4A4672 !important; text-decoration: none !important; line-height: 1.4 !important; visibility: visible !important; opacity: 1 !important;
    /* 拖动浏览分类时不要选中文字 / 拖动链接，避免拖出一片蓝底或半透明链接浮层 */
    -webkit-user-select: none !important; user-select: none !important; -webkit-user-drag: none !important; }
a.ac-tab.on { background: transparent !important; color: #7C8ED0 !important; font-weight: 600 !important; border-bottom-color: #FB75D2 !important; }
a.ac-tab:hover { background: transparent !important; color: #7C8ED0 !important; font-weight: 600 !important; }

/* ---- 选中下划线「流动条」 ----
   整行只有一个指示条，切换分类时左右滑动过去（左右位置/宽度由 artcenter.js 计算）。
   · 初始 opacity:0，等 JS 定位好再显示，避免从左侧 0 位置滑出来的闪动
   · 失败兜底：JS 没跑就不会加 .ac-tabs--ind，此时 a.ac-tab.on 自带的粉线仍生效 */
.ac-tab-ind { position: absolute !important; left: 0; top: 0; z-index: 5 !important; display: block !important; width: 0; height: 2px !important; border-radius: 1px !important; background: #FB75D2 !important; opacity: 0; pointer-events: none !important;
    transition: left .32s cubic-bezier(.4,0,.2,1), width .32s cubic-bezier(.4,0,.2,1), opacity .2s ease !important; }
/* JS 接管后，关掉 tab 自带的 border-bottom，避免出现两条线 */
.ac-tabs--ind a.ac-tab.on { border-bottom-color: transparent !important; }

/* ---- 分类行溢出提示（由 artcenter.js 按滚动位置加类） ----
   分类多到一行放不下时，左右边缘渐隐，明示"这边还有分类"，配合左右滑动；
   滑到最左/最右时对应一侧的类会被移除，所以不会把当前分类淡掉。
   掩膜贴在容器盒子上（mask 不随内容滚动），只影响视觉、不挡点击与滑动。 */
.ac-tabs--more-r {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%) !important;
    mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%) !important;
    -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important;
}
.ac-tabs--more-l {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px) !important;
    mask-image: linear-gradient(to right, transparent 0, #000 22px) !important;
    -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important;
}
.ac-tabs--more-l.ac-tabs--more-r {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%) !important;
    mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%) !important;
}
/* 拖动浏览分类时的"抓住"光标（类由 artcenter.js 在拖动过程中加） */
.ac-tabs--dragging, .ac-tabs--dragging a.ac-tab { cursor: grabbing !important; }

/* ---- AI 描述弹窗层级 ----
   站点 .mask 默认 z-index:1，会被本页卡片里 z-index:2/3 的图案/素坯盖住，这里整体提升。
   注意：.mask.on:after 会生成全屏遮罩(z-index:10000)拦截点击，
   弹窗本体必须高于它(10001)，否则关闭按钮点不到 */
.mask { z-index: 9999 !important; }
.mask_box { z-index: 10001 !important; }

/* ---- 品牌 / 机型下拉：按钮行 + 分隔线 + 列表一体的白色圆角卡片 ----
   品牌分组标题黑色加粗，机型灰色，选中项粉色加粗（参考设计稿） */
.ac-dd { position: relative !important; width: 340px !important; margin: 65px auto 0 !important; background: #fff !important; border-radius: 17.5px !important; box-shadow: 0 12px 40px rgba(0,0,0,.30) !important; text-align: left !important; }
.ac-dd-btn { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; box-sizing: border-box !important; height: 35px !important; padding: 0 25px !important; border: none !important; border-bottom: 1px solid transparent !important; border-radius: 17.5px !important; background: #fff !important; color: #111 !important; font-size: 15px !important; font-weight: 500 !important; cursor: pointer !important; }
/* 展开：按钮行去掉下方圆角，与下面悬浮面板拼接成一体的白色卡片 */
.ac-dd.open { border-radius: 17.5px 17.5px 0 0 !important; box-shadow: 0 12px 40px rgba(0,0,0,.30) !important; }
.ac-dd.open .ac-dd-btn { border-bottom-color: #eee !important; border-radius: 17.5px 17.5px 0 0 !important; }
.ac-dd-arrow { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 16px !important; height: 16px !important; color: #111 !important; }
.ac-dd-arrow svg { width: 100% !important; height: 100% !important; display: block !important; }
/* 面板绝对定位悬浮在按钮下方：不占文档流，展开时不会把下面的图片往下顶 */
.ac-dd-panel { position: absolute !important; top: 100% !important; left: 0 !important; z-index: 60 !important; width: 340px !important; display: none !important; background: #fff !important; border: none !important; border-radius: 0 0 17.5px 17.5px !important; box-shadow: 0 12px 40px rgba(0,0,0,.30) !important; overflow: hidden !important; box-sizing: border-box !important; text-align: left !important; padding-right: 20px !important; }
.ac-dd.open .ac-dd-panel { display: block !important; }
/* 内层滚动容器：滚动条被面板下圆角裁剪，不会超出白色面板 */
.ac-dd-scroll { max-height: 420px !important; overflow-y: auto !important; padding: 16px 16px 20px 25px !important; box-sizing: border-box !important; }
/* 粉色细滚动条（宽度按要求调细：8px → 5px，圆角同步减半，避免看起来仍偏粗） */
.ac-dd-scroll::-webkit-scrollbar { width: 5px !important; }
.ac-dd-scroll::-webkit-scrollbar-track { background: transparent !important; }
.ac-dd-scroll::-webkit-scrollbar-thumb { background: #F0389C !important; border-radius: 3px !important; }
/* 品牌分组标题：黑色加粗 */
.ac-dd-group-title { font-size: 15px !important; font-weight: 700 !important; color: #111 !important; padding: 0 0 8px !important; text-align: left !important; }
.ac-dd-group + .ac-dd-group { margin-top: 24px !important; }
/* 机型项三态：默认灰色 / 鼠标划过=只把文字染成品牌浅粉 #FB64D6（不加任何底色）/
   选中=黑底+白字加粗（点击后立刻生效，鼠标移开、收起再打开都还在，不会"立马消失"）。
   · 黑底白字只属于「已选中」这一态，hover 里不再写 background，避免划过时就冒出黑条；
   · `.on` 必须写在 `:hover` 之后：两者特异性相同（都是 2 个类/伪类），后写的赢 →
     鼠标划过「已选中」的那一项时仍是黑底白字，不会被 hover 的粉字顶掉；
   · font-weight 只在 `.on` 里给 700，hover 不给 → 划过未选中项不会字重跳动；
   · 左右 padding + 负 margin：黑底色条比文字略宽（外扩 10px）但文字位置不变
     （负 margin 抵消 padding，行内起始位置仍与分组标题对齐）；
   · 圆角 + 上下各 7px padding：相邻项的色条之间有 14px 空隙，不会连成一条黑带。 */
.ac-dd-item { display: block !important; padding: 7px 10px !important; margin: 0 -10px !important; font-size: 14px !important; color: #b7b7be !important; cursor: pointer !important; border-radius: 4px !important; text-decoration: none !important; text-align: left !important; transition: background-color .15s ease, color .15s ease !important; }
.ac-dd-item:hover { color: #FB64D6 !important; }
.ac-dd-item.on { background: #111 !important; color: #fff !important; font-weight: 700 !important; }

/* ---- 图片网格：桌面一行 5 个，每个宽 338px，间距 30px ----
   338×5 + 30×4 = 1810px，故容器 max-width 放大到 1850px（含左右 padding） */
.ac-grid { display: grid !important; grid-template-columns: repeat(5, 338px) !important; gap: 30px !important; justify-content: center !important; }
@media (max-width: 1850px) { .ac-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (max-width: 900px)  { .ac-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 620px)  { .ac-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* ---- 卡片 ----
   图案区比例固定 338 : 600（≈ 素坯图 1082:1920 原比例，宽 338px 时高 600px）
   按钮叠加在卡片底部内，不再单独预留 62px 底部区域 */
/* ⚠ 容器底色必须是区块深紫 #0c0524，不能是淡黄底 #f8f6f4：
   圆角裁切线上的那圈抗锯齿像素 = 底色 × 覆盖率 + 区块底色 × (1-覆盖率)，
   只要底色是浅色，这一圈就会变成「1px 白毛边」绕卡片一圈；
   而且图案即使外扩 / 即使在过渡态被提升成合成层，也盖不住这圈（它属于容器自己的绘制）。
   淡黄底交给下面的 .ac-bg 负责 */
.ac-card-inner { position: relative !important; aspect-ratio: 338 / 600 !important; box-sizing: border-box !important; overflow: hidden !important; background: #0c0524 !important; border-radius: 40px !important; }
/* 淡黄底：独立底层元素，处于最下层（z-index 0），不依赖容器 background，避免被主题样式覆盖。
   四周内缩 1px + 39px 圆角（跟着卡片圆角走）的原因：
   底色层自己也有抗锯齿边，若贴死在圆角裁切线上（inset:0），
   在图案被提升为合成层时同样会在卡片四周露出一圈 1px 淡色毛边；
   内缩 1px 后这条边落在图案 100% 覆盖的区域内，被图案整个盖住 */
.ac-bg { position: absolute !important; inset: 1px !important; border-radius: 39px !important; z-index: 0 !important; display: block !important; background: #f8f6f4 !important; }
/* 图案：铺在淡黄底之上（z-index 1）。
   ⚠ 四周各外扩 2px（inset:-2px + calc(100% + 4px)），不要改回 inset:0：
   · 图案原图 1082:1920（0.56354）比卡片框 338:600（0.56333）略"宽"，object-fit:cover
     按宽度铺满后，图案内容高度只有 599.68px → 图案元素底部留下 0.32px 透明，
     在 125%/150% 屏幕缩放、或 1fr 布局算出小数宽度（PC 窄窗口 4 列）时会被取整成
     1px 的卡片淡黄底色 —— 就是卡片底边那条"毛边"；
   · 外扩 2px 后图案框比例比原图更"宽"，cover 改为按宽度铺满、上下裁切 → 底部不再有空隙；
     多出来的部分落在父级 .ac-card-inner 的圆角裁切之外。
     ⚠ 外扩 2px 只能补掉「图案自己露底」的那条缝（如卡片底边），补不掉圆角外的那圈 1px 白边：
     那圈白边不是图案露底，而是浅色底色层在圆角抗锯齿处的混色 → 见 .ac-card-inner / .ac-bg 的注释。
   叠壳态不受影响：那时 top/left/width/height 由 artcenter.js 内联 !important 全量覆盖。 */
.ac-grid .ac-card .ac-pattern { position: absolute !important; inset: -2px !important; z-index: 1 !important; width: calc(100% + 4px) !important; height: calc(100% + 4px) !important; object-fit: cover !important;
    /* 主题给 img 的 max-width/max-height:100% 会把上面这 4px 的外扩压回 100%（实测外扩失效），必须放行 */
    max-width: none !important; max-height: none !important; }
/* 素坯图：默认隐藏（opacity:0），hover 时由 JS 内联 !important 打开；在图案之上（z-index 2） */
.ac-grid .ac-card .ac-mold { position: absolute !important; inset: 0 !important; z-index: 2 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; opacity: 0 !important; pointer-events: none !important; }

/* ---- 收藏爱心（右上角，hover 显示） ---- */
.ac-heart { position: absolute !important; top: 20px !important; right: 16px !important; z-index: 3 !important; width: 28px !important; height: 28px !important; display: flex !important; align-items: center !important; justify-content: center !important; opacity: 0 !important; transition: opacity .2s ease !important; cursor: pointer !important; }
.ac-card:hover .ac-heart { opacity: 1 !important; }
.ac-heart svg { width: 100% !important; height: 100% !important; display: block !important; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)) !important; }
/* 默认（未收藏）：灰色爱心 */
.ac-heart svg path { fill: #c0c0c0 !important; }
/* 已收藏：爱心常显（不用 hover）+ 实心粉紫色 */
.ac-heart.on { opacity: 1 !important; }
.ac-heart.on svg path { fill: #FB47D9 !important; }

/* ---- Apply to products 按钮 ----
   默认隐藏；鼠标移到图案（卡片）上时淡入（深紫底浅字）；
   再移到按钮上时：白色背景从左向右滑入 + 左侧圆钮由小变大（对齐原版 .d_btn3 交互） */
/* bottom：PC 端按钮距卡片底边 17px（最初 25px → 15px → 17px，按反馈微调）。
   窄屏/触屏由下面媒体查询里的 bottom:19px 覆盖，本次改动不影响移动端。
   ⚠ 2026-09-24 修「hover 后按钮两边毛边」：
   宽度原来硬写 245px + 负边距 -122.5px 居中。PC 端窗口不算宽时一列卡片只有 ~227px
   （1080 视口 5 列 = 227.5px），245px 的按钮左右各溢出 8.8px，被 .ac-card-inner 的
   overflow:hidden 切掉 —— 按钮的白色（hover 后 ::before 铺满）就一直铺到卡片裁切边缘。
   卡片边缘那圈抗锯齿像素 = 按钮白 × 覆盖率 + 区块深紫 × (1-覆盖率)，
   于是左右两端各显出一条灰白毛边（卡片自己早就用「底色 #0c0524」规避了，见上面
   .ac-card-inner 注释，按钮一直没跟上）。
   改法：宽度取 min(245px, 卡片宽 - 26px)、边距取同值的负一半 —— 卡片够宽时仍是
   245px 居中（版式不变），卡片窄时自动收窄成「左右各留 13px」，按钮（含白色层）
   整个落在卡片内部，边缘抗锯齿处铺的是卡片自己的深紫底色 → 毛边消失。
   与下面媒体查询里的兜底宽度 calc(100% - 26px) / max-width:245px 是同一套口径。 */
a.ac-apply-btn { position: absolute !important; left: 50% !important; margin-left: calc(-1 * min(122.5px, (100% - 26px) / 2)) !important; bottom: 17px !important; z-index: 3 !important; width: min(245px, calc(100% - 26px)) !important; height: 40px !important; border-radius: 20px !important; background: #221a4d !important; color: #cfc9f0 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 13px !important; font-weight: 500 !important; text-decoration: none !important; opacity: 0 !important; transition: opacity .2s ease !important; 
   /* ⚠ 2026-09-24 修「hover 后按钮圆角上的棕黑毛边」：
      原来是 overflow: hidden 裁圆角。但 Chrome 对 overflow 的圆角裁剪是【硬裁、不做抗锯齿】——
      放大后能清楚看到圆角弧线是一段段阶梯状虚线，压在图案（照片）上时就混出一圈深色毛边，
      左右两端最明显（两端是半径 20px 的半圆 = 高度的一半，弧线最长、露得最多）。
      改法：改用 clip-path: inset(0 round 20px)，裁剪交给渲染器做、边缘带抗锯齿，弧线恢复平滑。
      ⚠ 不能同时留着 overflow: hidden —— 那样先被 overflow 硬裁一次、clip-path 再裁一次，
      硬边依旧存在，等于没改；所以 overflow 必须放成 visible，裁剪全部交给 clip-path。
      功能完全等价：白层(::before)滑出按钮外的部分同样会被裁掉，不会露出来。 */
   overflow: visible !important; clip-path: inset(0 round 20px) !important; 
   /* ⚠ 2026-09-24 续：上面这圈毛边的真正来源是【白色滑入层 ::before 被单独提成了合成层】。
      ::before 带 transform + transition，浏览器会把它提升为独立图层；图层边缘那 1px
      半透明抗锯齿是拿【按钮自己的底色 #221a4d】去混合的，于是圆角弧线上透出一圈灰紫线。
      下面的图案越深（照片里的棕黑色块），透出来的边就越像「棕黑色毛边」——
      这就是为什么两端最显眼、而且颜色深浅随卡片照片变。
      改法：给按钮本身也加 transform: translateZ(0)，把它和 ::before 合进同一图层，
      图层内部不再跨层混合，边缘只剩【按钮白 × 卡片底】的正常过渡，灰紫线消失。
      ⚠ 注意：窄屏那条规则里的 transform 会被 JS 内联的 transform:none !important 覆盖，
      所以 artcenter.js 的 applyBtnToMold 里同步改成了 translateZ(0)，两边保持一致。 */
   transform: translateZ(0) !important; }
.ac-card:hover a.ac-apply-btn { opacity: 1 !important; }                  
/* 白色滑入层：四边各溢出 2px，保证父级圆角裁切处落下的是纯白，
   而不是「白 + 下层深紫」的 1px 抗锯齿残影。
   ⚠ 2026-09-24 修「hover 后按钮两边毛边」（圆角弧线上那圈灰白细线）：
   原来外扩 1px、半径却写 border-radius:inherit（=父级 20px）。外扩后白层尺寸大了 2px，
   半径没同步 +1 → 两层圆弧不平行：白层自己那 1px 半透明抗锯齿边缘落到了
   父级裁切圆弧的【内侧】，把按钮的深紫底色 #221a4d 透了出来，圆角弧线上就多出一圈灰白细线。
   左右两端最明显，因为两端是半径 20px 的半圆（= 高度的一半），弧线最长、露得最多。
   改法：外扩量 2px，半径同步写 22px（= 按钮 20px + 外扩 2px），两层圆弧同心平行 →
   白层的半透明边缘整体落在父级裁切区【外】被裁掉，裁切区内是不透明纯白，
   边缘只剩白与卡片底色的正常过渡（1px 之内、颜色连续），灰线消失。
   ⚠ 22px 是按「按钮 border-radius 20px + 外扩 2px」算出来的，按钮圆角若改动，
   这两个数必须一起改（inherit 表达不了「半径比父级多 2px」这件事）。 */
a.ac-apply-btn::before { content: '' !important; position: absolute !important; top: -2px !important; left: -2px !important; right: -2px !important; bottom: -2px !important; background: #ffffff !important; border-radius: 22px !important; transform: translateX(-102%) !important; transition: transform .35s ease !important; }
a.ac-apply-btn:hover::before { transform: translateX(0) !important; }
/* 左侧圆钮：对齐原版 .d_btn3:before —— 32px、原版素材 icon3.png、距按钮左/上各 4px */
.ac-apply-ico { position: absolute !important; left: 4px !important; top: 4px !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; background: url(../../../../../catalog/view/lvstyle/img/icon3.png) no-repeat center center !important; display: block !important; z-index: 1 !important; }
/* 兜底：模板若仍带内嵌 svg（只上传 CSS 未传 twig 时），隐藏它，避免与原版位图里的星形重叠 */
.ac-apply-ico svg { display: none !important; }
/* 鼠标移到按钮上：圆钮由小变大 —— 原版 .d_btn3:hover:before { animation: zoomIn .5s linear }
   zoomIn 关键帧来自 catalog/view/lvstyle/css/animate.min.css（页面已加载） */
a.ac-apply-btn:hover .ac-apply-ico { animation: zoomIn .5s linear !important; }
.ac-apply-txt { white-space: nowrap !important; position: relative !important; z-index: 1 !important; transition: color .35s ease !important; }
/* hover 态文字色对齐原版（原版 hover 只有白底滑入，文字恒为 #575285） */
a.ac-apply-btn:hover .ac-apply-txt { color: #575285 !important; }

/* ---- 卡片底部名称 / 空态 / 加载更多 ---- */
.ac-card-foot { display: none !important; }
.ac-name { font-size: 13px !important; color: #fff !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; display: block !important; text-align: left !important; }

.ac-empty { padding: 60px 0 !important; text-align: center !important; color: #999 !important; }
.ac-more { margin-top: 30px !important; text-align: center !important; }
/* 基础外观完全复刻原版 .more a（catalog/view/lvstyle/css/style.css:260）：
   透明底 + #575285 细边 + 120x40 胶囊，未 hover 时只有淡淡的描边和文字 */
a.ac-more-btn { position: relative !important; z-index: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 120px !important; height: 40px !important; line-height: 40px !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important; border: 1px solid #575285 !important; background: transparent !important; border-radius: 40px !important; cursor: pointer !important; font-size: 14px !important; color: #575285 !important; text-decoration: none !important; overflow: hidden !important; transition: color .35s ease, border-color .35s ease !important; }
/* 渐变扫光层：与原版一致，初始整体位于按钮左侧外，hover 时从左向右滑入
   （复用主题的 btn_bg.png，图片取不到时回落到同色线性渐变） */
a.ac-more-btn::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: -1 !important; background-image: url(../../../../../catalog/view/lvstyle/img/btn_bg.png), linear-gradient(to right, #FB9ACC, #FB47D9, #6B2FA7) !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: 100% 100% !important; transform: translateX(-101%) !important; transition: transform .4s cubic-bezier(.7, 0, .2, 1) !important; }
a.ac-more-btn > span { position: relative !important; z-index: 1 !important; }
/* 与原版 .more a:hover 保持一致：无论是否有更多数据，hover 都做渐变扫光、文字转深色。
   disabled 只影响可点击性（由 artcenter.js 的 hasAttribute('disabled') 拦截），不再压暗、不再屏蔽 hover */
a.ac-more-btn:hover::before { transform: translateX(0) !important; }
a.ac-more-btn:hover { border-color: #000 !important; color: #000 !important; }
/* disabled 态光标仍为手形：原版没有 disabled 概念（View More 要么整块不渲染、要么一定可点），
   且这里刻意不压暗禁用态，光标若退回箭头会显得"按钮坏了"。是否真能翻页由
   artcenter.js 的 hasAttribute('disabled') 拦截，光标只表达"这是个可交互控件" */
a.ac-more-btn[disabled] { cursor: pointer !important; }

/* ============ 移动端 / 窄屏：分类 tab 一行横向滚动 ============
   桌面规则是 flex-wrap: wrap + 居中，分类一多（TrendingNow/Illustrative/Nature/3D/Digital/Hybrid）
   在小屏上就会折成两行（截图即此现象）。这里改为 nowrap + 横向滚动：
   · 一行显示全部分类名，手指左右滑动查看，右侧可露出半个分类提示还能滑
   · 自适应：字号用 clamp 跟随视口宽度，间距收窄；分类项 flex:0 0 auto 不压缩
   · 滚动条不显示（下方那条"流动条"已去掉），改为由选中指示条滑动提示当前位置；
     滑动能力本身保留（overflow-x:auto + 触摸惯性滚动） */
@media (max-width: 900px) {
    .ac-wrap { padding: 10px 16px 40px !important; }
    .ac-top { margin: 2px 0 42px !important; }

    .ac-wrap .ac-tabs {
        flex-wrap: nowrap !important;
        /* 分类放得下时居中；放不下时 safe 关键字自动退回靠左（不裁掉左侧内容）——
           不支持 safe 的旧浏览器会丢弃这一行，仍用上面的 flex-start */
        justify-content: flex-start !important;
        justify-content: safe center !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 18px !important;
        padding: 0 2px 4px !important;
        /* 手势优先横向滑动，避免被整页纵向滚动抢走 */
        touch-action: pan-x !important;
        /* 隐藏原生滚动条（Firefox），滑动功能不受影响 */
        scrollbar-width: none !important;
        /* 没有滚动条了，用"抓手"光标告诉鼠标用户：这一行可以按住左右拖 */
        cursor: grab !important;
    }
    /* 隐藏原生滚动条（Chrome / Safari / Edge） */
    .ac-wrap .ac-tabs::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }

    /* 分类项：不压缩、不换行、字号随屏宽自适应 */
    a.ac-tab {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        font-size: clamp(15px, 4.4vw, 20px) !important;
        cursor: grab !important;
    }

    /* 品牌/机型下拉按钮：桌面留 65px 是为了和分类行拉开距离，
       手机屏窄，这段空白显得按钮"掉"得太低，收到 30px 往上提一些 */
    .ac-dd { margin-top: 30px !important; }
}

/* ============ 触屏 / 窄屏：滚动位置驱动「图案 + 手机壳」的渐显 / 渐隐 ============
   桌面靠 .ac-card:hover 出效果；手机没有 hover，只能让手指去碰，而手指一碰就命中
   卡片的详情跳转。所以改由 artcenter.js 盯着滚动位置：卡片可见比例 ≥ 70% 卡高
   = 完全叠壳，否则彻底复原成纯图片（moldT 只给 0 / 1 两个值，scrubTick 逐帧刷）。
   这里只给过渡时间：JS 写入的 opacity / top / left / width / height 都平滑插值。
   ⚠ 媒体查询条件必须与 artcenter.js 里的 MQ_AUTO 一字不差：只写 (hover: none)
   的话，桌面「把窗口拖窄当手机自测」不命中（鼠标设备 hover 仍是 hover），
   会误以为功能没生效。
   注意：position 类属性（top/left/width/height）由 JS 内联 !important 写入，
   过渡写在这里同样生效（transition 只管时间曲线，不参与优先级）。
   ⏱ 时长取 .4s。调参史（用户逐轮反馈）：`.42s` → `.12s`「一刹那」→「稍微慢一点点」`.2s` →
   「稍微慢一点」`.25s` →「稍微再改慢一点」`.3s` →「还要再慢一些」`.4s`。
   ★用户连续四轮要更长，说明他要的是"看得清图案收进壳里"这个动作本身；早先 `.42s` 的投诉针对的是
   页面刚打开时**静止**停在"半透明壳叠图案"的画面（修正 2 ③），不是时长。再往上加（.45s 以上）
   先确认清楚：那时画面里"壳半透明"的阶段会明显可见，若他要的只是"有刹车感"，改缓动而非时长。
   ⚠ 改这个时长要同步三处：本段注释、`artcenter.js` 里 moldT 上方注释、HANDOVER「修正 3」。 */

/* ============ 桌面宽屏（鼠标 hover）：图案"收进壳里"的时长 ============
   桌面这个动作（opacity / top / left / width / height / border-radius）本来在 CSS 里
   没人写过渡 —— 一路吃到主题全局 `*, ::after, ::before { transition: 0.5s, color; }`
   （catalog/view/lvstyle/css/excss.css），所以桌面是 0.5s，比窄屏那条 .4s 慢半拍。
   这里补一条只针对"图案 + 手机壳"的时长：前两项原样照抄主题值（.5s = 其它属性仍 0.5s，
   color 仍 0s 瞬变），只把 6 个目标属性改成 .42s —— 不整条覆盖，对这两个 img 的其它属性
   （含主题给 img 的通用过渡）零影响。
   ⚠ 位置必须在下面窄屏媒体查询之前：窄屏那条带 !important 且后声明，
     窄屏 / 触屏的 .4s 行为完全不变。
   ⏱ 2026-09-30 定案：桌面 0.5s → .42s（用户："图片缩进到手机壳膜时，速度稍微快一点点"）。
   本段与上面窄屏那条是两套独立时长，改一处不影响另一处。 */
.ac-grid .ac-card .ac-mold,
.ac-grid .ac-card .ac-pattern {
    transition: .5s, color,
                opacity .42s cubic-bezier(.4, 0, .2, 1), top .42s cubic-bezier(.4, 0, .2, 1),
                left .42s cubic-bezier(.4, 0, .2, 1), width .42s cubic-bezier(.4, 0, .2, 1),
                height .42s cubic-bezier(.4, 0, .2, 1), border-radius .42s cubic-bezier(.4, 0, .2, 1);
}

@media (hover: none), (max-width: 900px) {
    .ac-grid .ac-card .ac-mold,
    .ac-grid .ac-card .ac-pattern {
        transition: opacity .4s cubic-bezier(.4, 0, .2, 1), top .4s cubic-bezier(.4, 0, .2, 1),
                    left .4s cubic-bezier(.4, 0, .2, 1), width .4s cubic-bezier(.4, 0, .2, 1),
                    height .4s cubic-bezier(.4, 0, .2, 1), border-radius .4s cubic-bezier(.4, 0, .2, 1) !important;
    }

    /* Apply 按钮：这种模式下没有 hover，靠 .ac-card:hover 永远等不到 → 改为默认常显，
       和上面自动叠壳的壳一起出现（否则壳下面留一块空白，看着"壳偏上不居中"）。
       · 卡片比桌面窄（手机 156~230px），245px 的定宽会超出卡片被 overflow 裁掉，
         所以宽度改成自适应并设 245px 上限：left:50% + translateX(-50%) 居中，
         替代原来的固定负边距 -122.5px（定宽居中写法）；
       · bottom:19px（原 22px，按要求整体下移 3px）。历史注释里说它要与
         artcenter.js 的 PAD_Y(22) 一致，但 PAD_Y 只参与壳的尺寸/位置计算
         （oy / availH），与按钮的 bottom 无耦合 —— 改这里只挪按钮，
         壳的大小和位置都不变，只是按钮下移后与壳底的间距多 3px。
       · 宽度：JS（applyBtnToMold）会把按钮的 width / left 按「图案 + 手机壳」整体
         的壳轮廓框内联写入（内联 !important 优先级高于这里），让按钮左右边缘和壳严丝
         合缝。下面这几行只是几何未就绪 / 该机型没壳膜时的兜底宽度与居中写法。
         同时补上 width / left 过渡，跟壳的 .4s 同步，换机型时按钮不会先跳一下。 */
    .ac-grid .ac-card a.ac-apply-btn {
        left: 50% !important;
        margin-left: 0 !important;
        transform: translateX(-50%) !important;
        width: calc(100% - 26px) !important;
        max-width: 245px !important;
        bottom: 19px !important;
        /* ★ 内容靠左对齐（原为 center，理由见下方注释） */
        justify-content: flex-start !important;
        transition: opacity .2s ease,
                    width .4s cubic-bezier(.4, 0, .2, 1),
                    left .4s cubic-bezier(.4, 0, .2, 1) !important;
    }

    /* 按钮跟着壳变窄后，原版那种「圆钮钉死在 left:4px」的绝对定位会把 Apply 文字压在
       圆钮上（245px 宽时文字居中在 122px 处，离圆钮很远；变到 90~100px 后文字中心正
       好落在圆钮上）。这里把圆钮改成 flex 项，与文字并排、互不重叠。
       只在窄屏/触屏生效，桌面端版式（圆钮钉左侧）不变。

       ⚠ 2026-09-24 定案：整组**靠左**，不再居中。
       前两版试的是「居中 + 首项负 margin 左移」（-16px / -24px），换到别的卡片尺寸就
       又不准了 —— 按钮宽度是 JS（applyBtnToMold）按壳轮廓内联的，卡片一宽一窄，居中
       算出来的左间隙就跟着变，固定负 margin 补不掉这个变量（它只等于"视觉左移一半"）。
       改成 justify-content:flex-start（见上面那条）+ 圆钮 margin-left:4px
       （与桌面原版 .d_btn3:before 的 left:4px 一致）之后，
       圆钮左边缘到按钮左边缘恒为 4px，与按钮实际宽度无关，任何卡片尺寸都一致。
       想再调贴边程度就改这个 4px（改成 0 即完全贴边）。
       不用 transform 偏移是因为 hover 时圆钮要跑 zoomIn 动画（缩放进场），
       transform 会被动画覆盖，用外边距则两者互不干扰。 */
    .ac-grid .ac-card a.ac-apply-btn .ac-apply-ico {
        position: static !important;
        left: auto !important;
        top: auto !important;
        flex: 0 0 auto !important;
        width: 32px !important;
        height: 32px !important;
        margin: 0 6px 0 4px !important;
    }

    /* 兜底：卡片进入自动叠壳状态（.ac-inview）后按钮常显。
       实际显隐由 JS（applyBtnFade）按叠壳进度内联控制 —— 复原成纯图案时按钮整只收起，
       内联 !important 会盖住这一条。留给「该机型没配壳膜、永远不叠壳」的情况：
       那时按钮必须常显，否则用户点不到 Apply。
       （无条件常显也不行：首屏那些还没叠壳的卡片会先冒出一个按钮压在整张图案上。） */
    .ac-grid .ac-card.ac-inview a.ac-apply-btn { opacity: 1 !important; }

    /* 收藏爱心：手机 / 触屏没有 hover，靠 .ac-card:hover 永远等不到 → 不能一直是 0。
       显隐交给 artcenter.js 的 applyHeartFade(card, t) 按叠壳进度内联控制：
       跟着"图案收进手机壳"一起渐显（复原成纯图片时整只收起），与 Apply 按钮同步。
       这里只做兜底（和上面 Apply 按钮的兜底同款）：该机型没配壳膜、永远不会叠壳时
       常显，否则爱心永远出不来。有壳膜的卡片由 JS 的内联 !important 接管。 */
    .ac-grid .ac-card.ac-inview .ac-heart { opacity: 1 !important; }

    /* 位置（按红框标记）：爱心停在右上角那条留白的水平中线上 —— 即「手机壳右边缘 ↔
       卡片右边缘」这段白边的正中，竖直位置不变（仍 top:20px）。
       推导（窄屏壳宽随卡片自适应、在卡内水平居中，见 artcenter.js 的 dw/ox）：
         壳右边缘距卡片右边 = (100% - 壳宽)/2  →  这段留白的中心距卡片右边 = (100% - 壳宽)/4
         爱心宽 28px（半宽 14px）要从中心往右挪  →  right = (100% - 壳宽)/4 - 14px
       "壳宽"取的是**壳的可见宽度**（artcenter.js 里图案框 geo.pW），不是整张壳膜图的显示框
       （壳膜图四周有透明留白，用显示框算出来的中线会偏右、爱心就贴不白边正中）。
       该值由 JS 写进 --ac-mold-w；117px 只是 JS 还没算好几何时的兜底值。
       ★末尾减数 = 9px（= 爱心盒半宽 14px − 5px）：right 定的是盒子右边缘，
         末尾减 14 → 中心 = 白边带正中；再减 3（11）/ 5（9）→ 中心 = 正中往左 3px / 5px（当前 9）。
         09-24 用户连着四轮反馈"还偏右"，就是逐轮这样左移（3px → 3px → 2px），最后定在 9。
         ★这已经是极限位：爱心**图标墨迹**的左边缘正好抵住手机壳右边缘（见下表末列，-0.6 ~ +0.6px）。
         再往左（末尾减数 < 9）墨迹就会压在手机壳上，看起来像"爱心叠在手机边缘"。
         根因：白边带本身只有 36~43px，而爱心图标 28px，能挪的空间不到 8px。
       ★★方向一定要记牢（09-24 就把方向搞反过一次）：right 越大 → 爱心越靠左；
       末尾减数越大 → right 越小 → 爱心越靠右。
         末尾减  9 → 中心 = 正中往左 5px（当前）
         末尾减 11 → 中心 = 正中往左 3px
         末尾减 14 → 中心 = 白边正中
         末尾减 17 → 中心 = 正中往右 3px（"更偏向右了/没往左走"就是这一版造成的）
       本机实测（CSS 带 filemtime 版本号，reload 即拿到新样式；gap = 壳可见右边缘到卡片右边缘，
       末列 = 爱心**图标墨迹**左边缘到壳右边缘，正数在壳右侧、负数压到壳上）：
         390px 视口 卡 164、壳 97  → gap 33.53、正中 16.77 → right 7.75px → 中心 21.75（墨迹 -0.59）
         458px 视口 卡 198、壳 144 → gap 35.98、正中 17.99 → right 9px    → 中心 23.00（墨迹 +0.61）
         520px 视口 卡 229、壳 151 → gap 38.69、正中 19.34 → right 10.5px → 中心 24.50（墨迹 +1.82）
         570px 视口 卡 254、壳 168 → gap 42.81、正中 21.41 → right 12.5px → 中心 26.50（墨迹 +3.94）
       符号别算错：墨迹左缘距壳右缘 = 1.63（墨迹自身距盒左的边缘留白）+ gap − (盒左缘距卡右 = right + 28)。
       想回到"白边正中"就把末尾 9 改成 14，别处不用动。
       下限 1px 没有顶住任何一档（当前最小算式 7.75px）。
       ★下限 1px 只用于「防裁圆角」，不参与定位：卡片(.ac-card-inner)是圆角 40px + overflow:hidden，
       爱心墨迹最右点（距盒右约 1.65px）在 right=1px 时距圆角圆心约 39px < 半径 40px，
       被裁掉不到 1px，肉眼基本看不出。它不能再大：抬到 4px 就会顶住白边最窄的机型
       （390 档算式才 7.75px）—— 下限一参与定位，用户看到的就是
       "改了跟没改一样"。也不能取 0：白边 < 28px 的极致窄机型（28px 的爱心本来也塞不进）
       算式为负，全靠它兜住，否则爱心整块贴出卡片右边缘。
       桌面端（宽屏 hover 版式）不变，仍是右上角 right:20px。 */
      .ac-grid .ac-card .ac-heart {
        right: max(1px, calc((100% - var(--ac-mold-w, 117px)) / 4 - 9px)) !important;
      }
    }

    /* 说明：3 列档（621~900px）本来单独覆盖过一条 -11px，现已并进上面的基础规则（同为 -9px），
       不再重复写一份，免得两处数值日后各改各的、互相打脸。 */