/* ==========================================
   橱窗风格（showcase）· v2.87.43
   --------------------------------------------------------------------------
   后台「主题设置 → 外观风格」选「橱窗」时，才在首页与商品列表页加载这个文件。
   只管版式与配色，不碰任何业务逻辑（价格 / 券 / 会员价 / 购买按钮都是原来那套）。

   设计参照「品牌大屏」：价值主张优先、一屏一件事、明暗与留白制造节奏。
   配色沿用现有玫红变量（--main / --main-light / --gold-line…），不另起一套色。
   ========================================== */

/* ==========================================
   橱窗风格的容器比货架宽一档（1080 → 1200）：
   品牌大屏要「大图 + 留白」，容器太窄会显得局促；
   也让优惠带的横卡、列表页的三列卡都有更宽的发挥空间。
   ========================================== */
.as-style-showcase .as-container {
    max-width: 1200px;
}

/* ---------- 通用区块 ---------- */
.as-sc-sec {
    padding: 72px 0;
}
.as-sc-alt {
    background: var(--surface);
}
.as-sc-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}
.as-sc-head.is-center {
    justify-content: center;
    text-align: center;
}
.as-sc-kicker {
    display: inline-block;
    font-size: 12px;
    letter-spacing: .16em;
    font-weight: 700;
    color: var(--main);
    text-transform: uppercase;
}
.as-sc-kicker.is-light {
    color: rgba(255, 255, 255, .72);
}
.as-sc-title {
    font-family: var(--serif);
    font-size: 32px;
    letter-spacing: .5px;
    margin-top: 8px;
}
.as-sc-more {
    font-size: 14px;
    color: var(--text-sub);
    white-space: nowrap;
}
.as-sc-more:hover {
    color: var(--main);
}

/* ---------- 按钮 ---------- */
.as-sc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 30px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
    white-space: nowrap;
}
.as-sc-btn.is-main {
    background: var(--main);
    color: #fff;
}
.as-sc-btn.is-main:hover {
    background: var(--main-dark);
}
.as-sc-btn:not(.is-main):not(.is-light) {
    background: transparent;
    color: var(--main);
    border-color: rgba(194, 24, 91, .4);
}
.as-sc-btn:not(.is-main):not(.is-light):hover {
    background: var(--main-light);
}
.as-sc-btn.is-light {
    background: #fff;
    color: var(--main);
    margin-top: 18px;
}
.as-sc-btn.is-sm {
    padding: 8px 18px;
    font-size: 13px;
}
.as-sc-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.as-sc-btns.is-center {
    justify-content: center;
}

/* ---------- ① Hero 大屏 ---------- */
.as-sc-hero {
    background: radial-gradient(120% 120% at 85% 10%, #fff 0%, #fff6fa 42%, #fbe7ef 100%);
    padding: 72px 0 84px;
    position: relative;
    overflow: hidden;
}
.as-sc-hero:after {
    content: "";
    position: absolute;
    right: -140px;
    top: -120px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(194, 24, 91, .16), rgba(194, 24, 91, 0) 70%);
    pointer-events: none;
}
.as-sc-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.as-sc-eyebrow {
    display: inline-block;
    font-size: 12px;
    letter-spacing: .16em;
    font-weight: 700;
    color: var(--main);
}
.as-sc-hero-copy h1 {
    font-family: var(--serif);
    font-size: 54px;
    line-height: 1.18;
    margin: 18px 0 20px;
    letter-spacing: 1px;
}
.as-sc-hero-desc {
    font-size: 16px;
    color: var(--text-sub);
    max-width: 520px;
    margin: 0 0 30px;
}
.as-sc-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 46px;
    padding-top: 26px;
    border-top: 1px solid rgba(194, 24, 91, .16);
}
.as-sc-stats b {
    display: block;
    font-family: var(--serif);
    font-size: 26px;
    color: var(--main-dark);
    line-height: 1.2;
}
.as-sc-stats i {
    font-style: normal;
    font-size: 13px;
    color: var(--text-muted);
}
.as-sc-visual {
    position: relative;
    height: 430px;
}
/*
 * Hero 拼贴：三个框都改成**正方形**，图用 absolute 填满 → 方形的商品图完整显示，
 * 不用 cover 去裁（裁掉一截的商品图在品牌大屏上特别显眼）。
 */
.as-sc-photo {
    position: absolute;
    border-radius: 18px;
    background: #fff;
    padding: 10px;
    box-shadow: 0 24px 60px rgba(16, 24, 40, .22);
    overflow: hidden;
    display: block;
    aspect-ratio: 1/1;
}
.as-sc-photo img {
    position: absolute;
    inset: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    /* 框是正方形、图也是正方形 → cover 就是完整显示，不会裁 */
    object-fit: cover;
    border-radius: 10px;
}
.as-sc-photo-1 {
    width: 54%;
    left: 0;
    top: 0;
    z-index: 2;
}
.as-sc-photo-2 {
    width: 38%;
    right: 0;
    top: 1%;
    z-index: 3;
    transform: rotate(4deg);
}
.as-sc-photo-3 {
    width: 42%;
    right: 4%;
    bottom: 0;
    z-index: 1;
    transform: rotate(-3deg);
}

/* ---------- ② 分类带 ---------- */
/*
 * 分类带（用户 2026-11-05）：
 *   · **横向一排、不换行**（手机端也���换行，横向滑动）；
 *   · 每个分类卡做成**正方形** → 商品图完整显示，一像素不裁；
 *   · 几个都**居中**排布，不挤在左边。
 */
.as-sc-cats-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.as-sc-cats-row::-webkit-scrollbar {
    display: none;
}
/*
 * 每个分类**等分铺满整行**（用户 2026-11-05：「不管几个分类都能占满一行 自适应」）：
 * flex-basis:0 + flex-grow:1 → 3 个就是每张 1/3，5 个就是每张 1/5，永远铺满、不留空。
 * 正方形 + contain → 商品图完整显示，一像素不裁。
 */
.as-sc-cat {
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 1/1;
    height: auto;
}
.as-sc-cat {
    position: relative;
    display: block;
    border-radius: 16px;
    overflow: hidden;
    background: var(--surface);
}
.as-sc-cat-photo {
    position: absolute;
    inset: 0;
    /* 完整显示商品图，不裁剪（用户 2026-11-05） */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fff;
    transition: transform .5s ease;
    opacity: .95;
}
.as-sc-cat:hover .as-sc-cat-photo {
    transform: scale(1.06);
}
.as-sc-cat-mask {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(30, 8, 18, 0) 28%, rgba(30, 8, 18, .55) 62%, rgba(24, 6, 14, .9));
}
.as-sc-cat-info {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
.as-sc-cat-info b {
    display: block;
    font-size: 18px;
    font-family: var(--serif);
}
.as-sc-cat-info i {
    font-style: normal;
    font-size: 12px;
    opacity: .85;
}

/* ---------- ③ 限时优惠（深色带） ---------- */
.as-sc-flash {
    background: linear-gradient(120deg, #241016 0%, #3a1020 55%, #5a1330 100%);
    color: #fff;
    padding: 56px 0;
}
/* 左侧文案只占三分之一 → 右侧商品网格更宽，每张横卡 ≈390px */
.as-sc-flash-grid {
    display: grid;
    grid-template-columns: .62fr 1.38fr;
    gap: 40px;
    align-items: center;
}
.as-sc-flash-title {
    font-family: var(--serif);
    font-size: 34px;
    line-height: 1.25;
    margin: 12px 0 14px;
    color: #fff;
}
.as-sc-flash-coupon {
    display: inline-block;
    background: rgba(255, 255, 255, .14);
    border: 1px dashed rgba(255, 255, 255, .55);
    border-radius: 999px;
    padding: 6px 18px;
    font-size: 15px;
    font-weight: 700;
}
.as-sc-flash-cd {
    font-size: 14px;
    color: rgba(255, 255, 255, .75);
    margin: 12px 0 4px;
}
.as-sc-flash-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, .6);
    margin: 0;
}
/* 优惠模块里的商品：**两列两行**（用户 2026-11-05 要求） */
.as-sc-flash-goods {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* ==========================================
   产品卡（橱窗专用组件 as_sc_product_card）
   --------------------------------------------------------------------------
   信息区**成对同行**（用户 2026-11-05）：
     标题（最多 2 行）
     已售 N 件              ¥259 ¥399     ← 销量与价格一行
     满150减30              会员到手 ¥183  ← 优惠与会员价一行
     [      去购买      ]                   ← 通栏，贴卡片底部
   ⚠️ 网格里**不输出券倒计时**（倒计时只在优惠带左侧的大文案里出现一次）。
   ⚠️ 全部网格（精选 / 榜单 / 上新 / 列表页 / 优惠带）用同一套结构。
   ========================================== */
/*
 * 本周精选：4 列（用户 2026-11-05：「卡片面积太大了」）。
 * 容器 1200px → 每张约 285px，比 3 列时的 380px 小一圈，
 * 一屏能看到更多商品，和下面「最新上架」的 4 列也统一了节奏。
 */
.as-sc-grid3 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.as-sc-grid4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.as-sc-card {
    background: var(--surface);
    border: 1px solid var(--gold-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.as-sc-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.as-sc-card-img {
    display: block;
    background: #fafafb;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}
.as-sc-card-img img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    transition: transform .5s ease;
}
.as-sc-card:hover .as-sc-card-img img {
    transform: scale(1.04);
}
.as-sc-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px 14px;
    flex: 1 1 auto;
}
.as-sc-card-title {
    font-size: 15px;
    line-height: 1.45;
    font-weight: 600;
    margin: 0 0 2px;
    min-height: 2.9em;
}
.as-sc-card-title a:hover {
    color: var(--main);
}
/* 一行两列：左项 + 右项（右边用 margin-left:auto 靠右） */
.as-sc-card-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.as-sc-card-sales {
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.as-sc-card-price {
    margin-left: auto;
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}
.as-sc-card-price b {
    color: var(--price);
    font-size: 21px;
    font-weight: 700;
}
.as-sc-card-price s {
    color: var(--text-muted);
    font-size: 12px;
}
.as-sc-card-promo {
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 4px;
    background: var(--main-light);
    color: var(--main);
    border: 1px solid var(--gold-line);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 58%;
}
.as-sc-card-promo.is-na {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text-muted);
}
.as-sc-card-vip {
    margin-left: auto;
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 4px;
    background: var(--main-light);
    color: var(--main-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 58%;
}
.as-sc-card-buy {
    margin-top: auto;
}
.as-sc-card-buy .as-buy-btn {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--main);
    color: #fff;
    border: 1px solid var(--main);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 600;
    margin-top: 0;
}
.as-sc-card-buy .as-buy-btn:hover {
    background: var(--main-dark);
    border-color: var(--main-dark);
    color: #fff;
}

/* ---------- 优惠带里的横卡（图左文右） ---------- */
.as-sc-mini .as-sc-card {
    flex-direction: row;
    align-items: stretch;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
    /*
     * ⚠️ 优惠带是深色区块（.as-sc-flash{color:#fff}）→ 卡片里的标题会**继承白字**，
     *    白底卡片上等于隐形（表现为「小卡没有标题」）。
     *    这里把卡片自身文字色重置回正文色，标题链接继承它。
     */
    color: var(--text);
}
.as-sc-mini .as-sc-card-title a {
    color: inherit;
}
.as-sc-mini .as-sc-card-title a:hover {
    color: var(--main);
}
.as-sc-mini .as-sc-card-img {
    width: 46%;
    flex: none;
    align-self: center;
    /* 方框 + 方图 = 完整显示且填满，不裁剪 */
    aspect-ratio: 1/1;
    border-bottom: 0;
    border-right: 1px solid var(--border);
}
.as-sc-mini .as-sc-card-body {
    flex: 1 1 auto;
    min-width: 0;
    gap: 5px;
    padding: 10px 14px 10px;
}
.as-sc-mini .as-sc-card-title {
    font-size: 13.5px;
    min-height: 2.8em;
}
.as-sc-mini .as-sc-card-sales {
    font-size: 11px;
}
.as-sc-mini .as-sc-card-price b {
    font-size: 18px;
}
.as-sc-mini .as-sc-card-promo,
.as-sc-mini .as-sc-card-vip {
    font-size: 10.5px;
    padding: 1px 6px;
}
.as-sc-mini .as-sc-card-buy .as-buy-btn {
    padding: 7px 12px;
    font-size: 12px;
}

/* 榜单：名次压在图上 */
.as-sc-rank {
    position: relative;
}
.as-sc-rank-item {
    position: relative;
}
/*
 * 名次徽标：白底商品图上「纯白数字 + 阴影」几乎看不见（第一名的图就是白的），
 * 所以改成半透明深色圆牌 —— 白图深牌、深图深牌都清楚。
 */
.as-sc-rank-num {
    position: absolute;
    left: 16px;
    top: 16px;
    z-index: 3;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(35, 38, 43, .78);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 700;
    pointer-events: none;
}

/* ---------- ⑦ 服务承诺 ---------- */
.as-sc-promise {
    background: linear-gradient(120deg, #241016, #3d1222);
    color: #fff;
}
.as-sc-promise .as-sc-title {
    color: #fff;
}
/*
 * 「为什么选择我们」：**不管几个都居中**（用户 2026-11-05）。
 * 原来固定 4 列 → 本站只有 3 条服务说明时，3 个卡挤在左边、右边空一格，很不平衡。
 * 改成 flex + justify-content:center：3 个、4 个、5 个都居中排布。
 */
.as-sc-promise-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 26px;
    margin-top: 34px;
}
.as-sc-promise-item {
    flex: 1 1 240px;
    max-width: 320px;
    min-width: 0;
    /* 卡里只有「✦ + 标题」两行：内容**上下左右都居中**（用户 2026-11-05） */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px 26px;
}
.as-sc-promise-item {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    padding: 26px 22px;
}
.as-sc-promise-ic {
    display: block;
    color: #fff;
    font-size: 22px;
    margin-bottom: 14px;
    opacity: .9;
}
.as-sc-promise-item b {
    display: block;
    font-size: 17px;
    font-family: var(--serif);
    margin-bottom: 6px;
}
.as-sc-promise-item i {
    font-style: normal;
    font-size: 13px;
    color: rgba(255, 255, 255, .6);
    line-height: 1.6;
}
.as-sc-promise-note {
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, .45);
    margin: 22px 0 0;
}

/* ---------- ⑧ 文章卡 ---------- */
.as-sc-grid3 .as-post {
    border-radius: 16px;
    padding: 24px 22px;
    transition: transform .25s ease, box-shadow .25s ease;
}
.as-sc-grid3 .as-post:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.as-sc-grid3 .as-post-title {
    font-family: var(--serif);
    font-size: 19px;
    line-height: 1.45;
}

/* ---------- ⑨ 结尾 CTA ---------- */
.as-sc-cta {
    background: linear-gradient(120deg, #fff6fa, #fde8f0);
    padding: 76px 0;
    text-align: center;
}
.as-sc-cta h2 {
    font-family: var(--serif);
    font-size: 34px;
}
.as-sc-cta p {
    color: var(--text-sub);
    margin: 12px 0 26px;
}

/* ==========================================
   商品列表页（橱窗）
   ========================================== */
.as-sc-list-head {
    background: radial-gradient(120% 130% at 80% 0%, #fff 0%, #fff7fa 45%, #fbe7ef 100%);
    padding: 52px 0 34px;
}
.as-sc-list-head h1 {
    font-family: var(--serif);
    font-size: 44px;
    margin: 12px 0 8px;
}
.as-sc-list-head p {
    color: var(--text-sub);
    font-size: 15px;
    margin: 0 0 22px;
}
.as-sc-chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.as-sc-chip {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 999px;
    padding: 7px 18px;
    font-size: 14px;
    color: var(--text-sub);
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.as-sc-chip:hover {
    border-color: var(--main);
    color: var(--main);
}
.as-sc-chip.is-on {
    background: var(--main);
    border-color: var(--main);
    color: #fff;
    font-weight: 600;
}
.as-sc-list-body {
    padding: 38px 0 80px;
}
.as-sc-list-grid {
    display: grid;
    grid-template-columns: 232px 1fr;
    gap: 34px;
    align-items: start;
}
/*
 * 左侧「商品分类 / 会员专属价」吸顶（用户 2026-11-05 要求）：
 * 往下滑时分类一直在手边，不用滚回顶部再找。top = 头部高 65px + 16px 间距。
 */
.as-sc-side {
    position: sticky;
    top: 81px;
    max-height: calc(100vh - 97px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.as-sc-side::-webkit-scrollbar {
    width: 6px;
}
.as-sc-side::-webkit-scrollbar-thumb {
    background: rgba(194, 24, 91, .25);
    border-radius: 3px;
}
.as-sc-side-box {
    background: var(--surface);
    border-radius: 14px;
    padding: 18px 18px 20px;
    margin-bottom: 18px;
    box-shadow: var(--shadow-sm);
}
.as-sc-side-box h3 {
    font-size: 15px;
    margin-bottom: 12px;
}
.as-sc-side-item {
    display: flex;
    justify-content: space-between;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-sub);
}
.as-sc-side-item i {
    font-style: normal;
    color: var(--text-muted);
    font-size: 12px;
}
.as-sc-side-item.is-on {
    background: var(--main-light);
    color: var(--main-dark);
    font-weight: 600;
}
.as-sc-side-box.is-vip {
    background: linear-gradient(140deg, #fff6fa, #fce4ec);
}
.as-sc-side-box.is-vip b {
    font-family: var(--serif);
    font-size: 17px;
}
.as-sc-side-box.is-vip p {
    font-size: 13px;
    color: var(--text-sub);
    margin: 8px 0 14px;
    line-height: 1.7;
}
.as-sc-list-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    color: var(--text-sub);
    font-size: 13px;
}
.as-sc-list-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.as-sc-card.is-list .as-sc-card-title {
    min-height: 2.8em;
}

/* ==========================================
   手机端
   ========================================== */
@media (max-width: 900px) {
    .as-sc-hero {
        padding: 40px 0 54px;
    }
    .as-sc-hero-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }
    .as-sc-hero-copy h1 {
        font-size: 34px;
    }
    .as-sc-hero-desc {
        font-size: 14px;
    }
    .as-sc-visual {
        height: 260px;
    }
    .as-sc-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        margin-top: 30px;
    }
    .as-sc-stats b {
        font-size: 21px;
    }
    .as-sc-sec {
        padding: 48px 0;
    }
    .as-sc-title {
        font-size: 24px;
    }
    .as-sc-grid3,
    .as-sc-grid4 {
        grid-template-columns: repeat(2, 1fr);
    }
    /* 手机端承诺卡通栏（flex 布局下要单独放开 max-width） */
    .as-sc-promise-item {
        flex: 1 1 100%;
        max-width: none;
    }
    /* 促销带小卡：手机端改**单列通栏横卡**（两列横卡在 390px 下每张只有 170px，图缩成一条） */
    .as-sc-flash-goods {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .as-sc-mini .as-card-img {
        width: 40%;
    }
    /* 手机端分类带**仍然横排不换行**，改成固定宽度 + 横向滑动 */
    .as-sc-cats-row {
        justify-content: flex-start;
    }
    .as-sc-cat {
        flex: 0 0 44%;
        max-width: 44%;
    }
    .as-sc-flash-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .as-sc-flash-title {
        font-size: 30px;
    }
    .as-sc-cat {
        height: 150px;
    }
    .as-sc-list-grid {
        grid-template-columns: 1fr;
    }
    /*
     * 手机端侧栏（在网格上方）：
     *   · 分类那一块**收掉** —— 顶部 chips 已经能切分类，两处重复、白占一屏；
     *   · 会员专属价压成一条横向小条（标题 + 按钮），保留转化入口但不占高度；
     *   · 取消吸顶（它已经跑到内容上方，吸顶只会挡视线）。
     */
    .as-sc-side {
        position: static;
        max-height: none;
        overflow: visible;
    }
    .as-sc-side-box:not(.is-vip) {
        display: none;
    }
    .as-sc-side-box.is-vip {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
        padding: 12px 16px;
    }
    .as-sc-side-box.is-vip b {
        font-size: 15px;
        white-space: nowrap;
    }
    .as-sc-side-box.is-vip p {
        display: none;
    }
    .as-sc-side-box.is-vip .as-sc-btn {
        margin-left: auto;
        flex: none;
    }
    /* chips 改横向滑动，省掉换行占的多行高度 */
    .as-sc-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .as-sc-chips::-webkit-scrollbar {
        display: none;
    }
    .as-sc-chip {
        flex: 0 0 auto;
    }
    .as-sc-list-items {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    .as-sc-list-head h1 {
        font-size: 30px;
    }
}
@media (max-width: 560px) {
    /*
     * 精选（grid3）保持 **2 列** —— 桌面已经是 4 列了，手机再变单列的话
     * 每张卡会比桌面还大（358px），违背「卡片别太大」的诉求。
     * 文章区（也是 grid3，但装的是 as-post 卡）单列更耐读，单独放开。
     */
    .as-sc-grid3 > .as-post {
        grid-column: 1 / -1;
    }
    .as-sc-promise-grid {
        grid-template-columns: 1fr;
    }
    .as-sc-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
    .as-sc-btns .as-sc-btn {
        flex: 1 1 auto;
    }
    .as-sc-card-body {
        padding: 9px 11px 12px;
        gap: 4px;
    }
    .as-sc-card-title {
        font-size: 14px;
        min-height: 2.9em;
    }
    .as-sc-card-price b {
        font-size: 19px;
    }
    .as-sc-card-buy .as-buy-btn {
        padding: 7px 10px;
        font-size: 12px;
    }
    /*
     * 手机端两列卡只有 ~165px 宽，「已售 1400 件」+「¥259 ¥399」放不下会被截成
     * 「已售 14…」。这里在小卡上**隐去划线原价**，一行就放得下了。
     */
    .as-sc-card-sales {
        font-size: 10.5px;
    }
    .as-sc-card-price s {
        display: none;
    }
    /*
     * 券标 + 会员价在 165px 宽的卡上并排会被截成「满150…」「会员到手 …」→
     * 让这一行**各自占一行**（.is-tags 只给券/会员价那行用，销量+价格那行不动）。
     */
    .as-sc-card-row.is-tags {
        flex-wrap: wrap;
        gap: 4px;
    }
    .as-sc-card-row.is-tags .as-sc-card-promo,
    .as-sc-card-row.is-tags .as-sc-card-vip {
        max-width: 100%;
    }
    .as-sc-card-row.is-tags .as-sc-card-vip {
        margin-left: 0;
    }
    .as-sc-mini .as-sc-card-img {
        width: 42%;
    }
}