/**
 * 商城前台样式（商品详情页 + 购物车 + 公共组件）
 *
 * 说明：
 * - 本文件自包含：商城模板沿用的工具类（flex/badg/but/text-ellipsis 等）
 *   全部在此定义，并通过 :where(作用域) 限定在商城容器内，避免污染主题其它页面
 * - 作用域容器：#shop（详情页/购物车页主体）、.shop-modal-wrap（弹窗）、
 *   .shop-toast-box（提示）、.cart-add-animate（加购动画）
 * - 颜色变量优先复用主题 --knn-* 变量，暗色模式跟随 body.dark-mode
 */

/* ============================================================
 * 1. 变量
 * ============================================================ */
#shop,
.shop-modal-wrap,
.shop-toast-box,
.cart-add-animate {
    --main-color: var(--knn-text-color, #333);
    --main-bg-color: var(--knn-bg-color-card, #ffffff);
    --body-bg-color: var(--knn-bg-color, #f3f3f3);
    --main-border-color: #efefef;
    --muted-border-color: #f5f6f8;
    --muted-color: #999999;
    --muted-2-color: #777777;
    --muted-3-color: #aaaaaa;
    --muted-4-color: #cccccc;
    --focus-color: var(--knn-color-primary, #007aff);
    --focus-color-opacity6: rgba(0, 122, 255, 0.6);
    --focus-color-opacity1: rgba(0, 122, 255, 0.1);
    --focus-color-opacity05: rgba(0, 122, 255, 0.05);
    --focus-shadow-color: rgba(0, 122, 255, 0.4);
    --main-radius: 8px;
    --main-shadow: rgba(0, 0, 0, 0.04);
    color: var(--main-color);
}

body.dark-mode #shop,
body.dark-mode .shop-modal-wrap,
body.dark-mode .shop-toast-box,
body.dark-mode .cart-add-animate {
    --main-color: #d7d7d7;
    --main-bg-color: #1e1e1e;
    --body-bg-color: #161616;
    --main-border-color: #2c2c2c;
    --muted-border-color: #262626;
    --muted-color: #8a8a8a;
    --muted-2-color: #9a9a9a;
    --muted-3-color: #666666;
    --muted-4-color: #4d4d4d;
    --focus-color-opacity05: rgba(0, 122, 255, 0.12);
    --main-shadow: rgba(0, 0, 0, 0.3);
}

/* ============================================================
 * 2. Vue 挂载
 * ============================================================ */
[v-cloak] {
    opacity: 0;
}

.vue-mount {
    transition: opacity 0.4s;
}

/* ============================================================
 * 3. 作用域工具类（:where 保持零优先级，便于组件覆盖）
 * ============================================================ */

/* --- 布局 --- */
:where(#shop, .shop-modal-wrap, .shop-toast-box, .cart-add-animate) .flex,
.shop-modal-wrap.flex,
.cart-add-animate.flex {
    display: flex;
}

:where(#shop, .shop-modal-wrap) .inline-flex {
    display: inline-flex;
}

:where(#shop, .shop-modal-wrap, .cart-add-animate) .ac,
.shop-modal-wrap.ac {
    align-items: center;
}

:where(#shop, .shop-modal-wrap, .cart-add-animate) .jc,
.shop-modal-wrap.jc,
.cart-add-animate.jc {
    justify-content: center;
}

:where(#shop, .shop-modal-wrap) .jsb {
    justify-content: space-between;
}

:where(#shop, .shop-modal-wrap) .xx {
    flex-direction: column;
}

:where(#shop, .shop-modal-wrap) .flex1 {
    flex: 1;
    min-width: 0;
}

:where(#shop, .shop-modal-wrap) .relative {
    position: relative;
}

.cart-add-animate.fixed {
    position: fixed;
}

:where(#shop, .shop-modal-wrap) .abs-center {
    position: absolute;
}

:where(#shop, .shop-modal-wrap) .abs-center.right-top {
    top: 0;
    right: 0;
}

:where(#shop, .shop-modal-wrap) .pointer {
    cursor: pointer;
}

:where(#shop, .shop-modal-wrap) .hide {
    display: none !important;
}

/* --- 文本 --- */
:where(#shop, .shop-modal-wrap) .text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

:where(#shop, .shop-modal-wrap) .text-ellipsis-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

:where(#shop, .shop-modal-wrap) .ellipsis-box {
    overflow: hidden;
    max-width: 100%;
}

:where(#shop, .shop-modal-wrap) .font-bold {
    font-weight: bold;
}

:where(#shop, .shop-modal-wrap) .em09 {
    font-size: 0.9em;
}

:where(#shop, .shop-modal-wrap) .em12 {
    font-size: 1.2em;
}

:where(#shop, .shop-modal-wrap) .em14 {
    font-size: 1.4em;
}

:where(#shop, .shop-modal-wrap) .em2x {
    font-size: 2em;
}

:where(#shop, .shop-modal-wrap) .padding-w10 {
    padding-left: 10px;
    padding-right: 10px;
}

:where(#shop, .shop-modal-wrap) .px12 {
    font-size: 12px;
}

:where(#shop, .shop-modal-wrap) .opacity8 {
    opacity: 0.8;
}

/* --- 颜色 --- */
:where(#shop, .shop-modal-wrap) .muted-color {
    color: var(--muted-color);
}

:where(#shop, .shop-modal-wrap) .muted-2-color {
    color: var(--muted-2-color);
}

:where(#shop, .shop-modal-wrap) .muted-3-color {
    color: var(--muted-3-color);
}

:where(#shop, .shop-modal-wrap) .focus-color {
    color: var(--focus-color);
}

:where(#shop, .shop-modal-wrap) .c-red {
    --this-color: #fc4545;
    color: #fc4545;
}

:where(#shop, .shop-modal-wrap) .c-yellow {
    --this-color: #ff9600;
    color: #ff9600;
}

:where(#shop, .shop-modal-wrap) .c-green {
    --this-color: #3cbc74;
    color: #3cbc74;
}

:where(#shop, .shop-modal-wrap) .c-blue {
    --this-color: #007aff;
    color: #007aff;
}

:where(#shop, .shop-modal-wrap) .c-white {
    --this-color: #ffffff;
    color: #ffffff;
}

/* --- 间距 --- */
:where(#shop, .shop-modal-wrap) .mr3 {
    margin-right: 3px;
}

:where(#shop, .shop-modal-wrap) .mr6 {
    margin-right: 6px;
}

:where(#shop, .shop-modal-wrap) .mr10 {
    margin-right: 10px;
}

:where(#shop, .shop-modal-wrap) .ml3 {
    margin-left: 3px;
}

:where(#shop, .shop-modal-wrap) .ml6 {
    margin-left: 6px;
}

:where(#shop, .shop-modal-wrap) .ml10 {
    margin-left: 10px;
}

:where(#shop, .shop-modal-wrap) .mt3 {
    margin-top: 3px;
}

:where(#shop, .shop-modal-wrap) .mt6 {
    margin-top: 6px;
}

:where(#shop, .shop-modal-wrap) .mt10 {
    margin-top: 10px;
}

:where(#shop, .shop-modal-wrap) .mt20 {
    margin-top: 20px;
}

:where(#shop, .shop-modal-wrap) .mb6 {
    margin-bottom: 6px;
}

:where(#shop, .shop-modal-wrap) .mb10 {
    margin-bottom: 10px;
}

:where(#shop, .shop-modal-wrap) .mb20 {
    margin-bottom: 20px;
}

:where(#shop, .shop-modal-wrap) .p2-10 {
    padding: 2px 10px;
}

/* --- 列表 --- */
:where(#shop, .shop-modal-wrap) .list-inline {
    padding-left: 0;
    margin: 0;
    list-style: none;
}

:where(#shop, .shop-modal-wrap) .list-inline > li {
    display: inline-block;
}

/* --- 滚动 --- */
:where(#shop, .shop-modal-wrap) .scroll-x {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

:where(#shop, .shop-modal-wrap) .scroll-y {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

:where(#shop, .shop-modal-wrap) .no-scrollbar {
    scrollbar-width: none;
}

:where(#shop, .shop-modal-wrap) .no-scrollbar::-webkit-scrollbar {
    display: none;
}

:where(#shop, .shop-modal-wrap) .mini-scrollbar {
    scrollbar-width: thin;
}

:where(#shop, .shop-modal-wrap) .mini-scrollbar::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

:where(#shop, .shop-modal-wrap) .mini-scrollbar::-webkit-scrollbar-thumb {
    background: var(--muted-4-color);
    border-radius: 4px;
}

:where(#shop, .shop-modal-wrap) .max-vh5 {
    max-height: 50vh;
}

/* --- 图片 --- */
:where(#shop, .shop-modal-wrap, .cart-add-animate) .fit-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:where(#shop, .shop-modal-wrap) .avatar-img {
    --this-size: 32px;
    position: relative;
    display: inline-block;
    width: var(--this-size);
    height: var(--this-size);
    border-radius: 100%;
    overflow: hidden;
    flex-shrink: 0;
}

/* 头像容器内的 img（get_avatar 输出带 width/height 属性，必须强制约束到容器尺寸） */
:where(#shop, .shop-modal-wrap) .avatar-img img,
:where(#shop, .shop-modal-wrap) .avatar-img .avatar {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    object-fit: cover;
}

/* --- 响应式显隐 --- */
@media (min-width: 768px) {
    :where(#shop, .shop-modal-wrap) .show-sm,
    .shop-modal-wrap .touch-close.show-sm {
        display: none !important;
    }
}

@media (max-width: 767px) {
    :where(#shop, .shop-modal-wrap) .hide-sm {
        display: none !important;
    }

    :where(#shop, .shop-modal-wrap) .px12-sm {
        font-size: 12px;
    }
}

/* ============================================================
 * 3.5 布局底座（模板沿用的全局布局类，主题体系里没有，在商城作用域内补齐）
 * ============================================================ */

/* 盒模型统一：蓝本全局 *{box-sizing:border-box}，主题没有这条全局规则——
 * 否则百分比宽度/min-width 按 content-box 计算，padding 额外撞大宽度（规格按钮被撑爆换行） */
:where(#shop, .shop-modal-wrap, .shop-toast-box, .cart-add-animate),
:where(#shop, .shop-modal-wrap, .shop-toast-box, .cart-add-animate) *,
:where(#shop, .shop-modal-wrap, .shop-toast-box, .cart-add-animate) *::before,
:where(#shop, .shop-modal-wrap, .shop-toast-box, .cart-add-animate) *::after {
    box-sizing: border-box;
}

/* 页面容器：对齐主题 .main-container（≥768px 定宽 1200px 居中，上下留白与主题一致） */
#shop .container {
    position: relative;
    width: 100%;
    margin: 8px auto;
    padding: 0 8px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    #shop .container {
        width: 1200px;
        max-width: 100%;
        margin: 20px auto;
        padding: 0 15px;
    }
}

/* 内容区 + 侧栏浮动布局（content_layout = side 时） */
#shop .content-wrap {
    float: left;
    width: 100%;
}

#shop .container::before,
#shop .container::after {
    content: ' ';
    display: table;
}

#shop .container::after {
    clear: both;
}

@media (min-width: 992px) {
    #shop .sidebar {
        float: left;
        width: 311px;
        margin-left: -311px;
        position: relative;
    }

    #shop .content-wrap + .sidebar ~ *,
    #shop .sidebar + * {
        clear: both;
    }

    #shop .content-wrap:not(:last-child) .content-layout {
        margin-right: calc(311px + 15px);
    }
}

@media (max-width: 991px) {
    #shop .sidebar {
        float: none;
        width: 100%;
    }
}

/* 面包屑（蓝本 bootstrap .breadcrumb 基础 + 主题覆盖合并，仅 PC 输出） */
#shop .breadcrumb {
    list-style: none;
    background: transparent;
    padding: 0 8px;
    margin: 0 0 12px;
    opacity: 0.6;
}

#shop .breadcrumb > li {
    display: inline-block;
}

#shop .breadcrumb > li + li::before {
    content: '/\00a0';
    color: #ccc;
    padding: 0 0 0 6px;
    opacity: 0.6;
}

#shop .breadcrumb a {
    color: inherit;
}

/* SVG 图标基础尺寸（主题无全局 svg 规则，图标会撑到浏览器默认 300x150） */
:where(#shop, .shop-modal-wrap, .shop-toast-box, .cart-add-animate) svg {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

/* 组合按钮 */
:where(#shop, .shop-modal-wrap) .but-group {
    display: inline-flex;
}

:where(#shop, .shop-modal-wrap) .but-group > .but {
    border-radius: 0;
    margin: 0;
}

:where(#shop, .shop-modal-wrap) .but-group > .but:first-of-type {
    border-radius: var(--main-radius) 0 0 var(--main-radius);
}

:where(#shop, .shop-modal-wrap) .but-group > .but:last-of-type {
    border-radius: 0 var(--main-radius) var(--main-radius) 0;
}

/* 蓝本中 .flex 声明在 .but-group 之后可胜出；knn 顺序相反，需显式让 .but-group.flex 为 flex
   （否则弹窗内两个 btn-block 按钮被 inline-flex 容器挤缩换行） */
#shop .but-group.flex,
.shop-modal-wrap .but-group.flex {
    display: flex;
}

/* 其余布局/文本工具类 */
:where(#shop, .shop-modal-wrap) .overflow-hidden {
    overflow: hidden;
    position: relative;
}

:where(#shop, .shop-modal-wrap) .text-left {
    text-align: left;
}

:where(#shop, .shop-modal-wrap) .flex .grow1 {
    flex-grow: 1;
}

:where(#shop, .shop-modal-wrap) .box-body {
    padding: 15px;
}

:where(#shop, .shop-modal-wrap) .box-body.notop {
    padding-top: 0;
}

/* 价格货币符号 */
:where(#shop, .shop-modal-wrap) .pay-mark {
    font-size: 0.6em;
    margin-right: 2px;
}

:where(#shop, .shop-modal-wrap) .pay-mark.px12 {
    font-size: 12px;
}

/* 骨架屏占位尺寸 */
#shop .placeholder.k2 {
    height: 20px;
}

#shop .placeholder.s1 {
    width: 70px;
    height: 15px;
    display: inline-block;
}

/* 商品正文排版 */
#shop .wp-posts-content {
    line-height: 2;
    font-size: 16px;
    min-height: 90px;
}

/* ============================================================
 * 4. 卡片 / 容器
 * ============================================================ */
#shop .zib-widget,
.shop-modal-wrap .zib-widget {
    background: var(--main-bg-color);
    border-radius: var(--main-radius);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 0 10px var(--main-shadow);
}

/* :where 降为零特异性：重点活动价格条 muted-box 与 jb-* 颜色类组合时，颜色类背景需胜出 */
:where(#shop, .shop-modal-wrap) .muted-box {
    background: var(--muted-border-color);
    border-radius: var(--main-radius);
    padding: 12px 15px;
}

#shop .title-theme,
.shop-modal-wrap .title-theme {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

/* 弹窗标题（蓝本 .modal-body .border-title：底部分隔线，标题文字由内层 .flex.jc 居中；注意不是左侧竖条样式） */
#shop .border-title,
.shop-modal-wrap .border-title {
    border-bottom: 1px solid var(--main-border-color);
    padding-bottom: 12px;
    margin-bottom: 10px;
}

/* 参数/信息两列行（蓝本 author-set 体系：左标签右对齐 20% 列，右值左对齐；商品参数弹窗等沿用） */
:where(#shop, .shop-modal-wrap) .author-set-left,
:where(#shop, .shop-modal-wrap) .author-set-right {
    display: inline-block;
    vertical-align: top;
}

:where(#shop, .shop-modal-wrap) .author-set-left {
    width: 20%;
    margin-right: 20px;
    text-align: right;
    padding-top: 6px;
    color: var(--muted-3-color);
}

:where(#shop, .shop-modal-wrap) .author-set-right {
    width: calc(80% - 25px);
    overflow: hidden;
}

/* ============================================================
 * 5. 徽章 badg
 * ============================================================ */
/* :where 降为零特异性：后台 palette 存的 b-*、jb- 系列颜色类（0,1,0）需能覆盖默认变量 */
:where(#shop, .shop-modal-wrap) .badg {
    --this-color: #ffffff;
    --this-bg: var(--focus-color);
    --this-border: transparent;
    display: inline-block;
    color: var(--this-color);
    background: var(--this-bg);
    border: 1px solid var(--this-border);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1.5;
    vertical-align: middle;
    white-space: nowrap;
}

#shop .badg.badg-sm,
.shop-modal-wrap .badg.badg-sm {
    padding: 1px 5px;
    font-size: 11px;
}

#shop .badg.hollow,
.shop-modal-wrap .badg.hollow {
    background: transparent;
    --this-border: currentColor;
    color: var(--this-color, var(--muted-2-color));
}

#shop .badg.c-red,
.shop-modal-wrap .badg.c-red {
    --this-bg: #fc4545;
    color: #fff;
}

#shop .badg.c-yellow,
.shop-modal-wrap .badg.c-yellow {
    --this-bg: #ff9600;
    color: #fff;
}

#shop .badg.c-green,
.shop-modal-wrap .badg.c-green {
    --this-bg: #3cbc74;
    color: #fff;
}

#shop .badg.hollow.c-red,
.shop-modal-wrap .badg.hollow.c-red {
    background: transparent;
    color: #fc4545;
    border-color: rgba(252, 69, 69, 0.5);
}

#shop .badg.hollow.c-yellow,
.shop-modal-wrap .badg.hollow.c-yellow {
    background: transparent;
    color: #ff9600;
    border-color: rgba(255, 150, 0, 0.5);
}

/* ============================================================
 * 5.1 通用颜色工具类 b- / jb- 系列（对齐蓝本 main.css）
 * 消费方：商品标签徽章 badg、重点活动价格条 important-price-box（后台 palette 存类名）
 * ============================================================ */
.b-red,
.b-yellow,
.b-blue,
.b-blue-2,
.b-black,
.b-cyan,
.b-green,
.b-purple,
.jb-red,
.jb-pink,
.jb-yellow,
.jb-yellow-2,
.jb-blue,
.jb-cyan,
.jb-green,
.jb-purple,
.jb-vip1,
.jb-vip2 {
    color: var(--this-color);
    background: var(--this-bg);
    --this-color: #fff;
}

.jb-red,
.jb-pink,
.jb-yellow,
.jb-yellow-2,
.jb-blue,
.jb-cyan,
.jb-green,
.jb-purple,
.jb-vip1,
.jb-vip2 {
    border: none;
}

.b-red {
    --this-bg: #ff5473;
}

.b-yellow {
    --this-bg: #ff6f06;
}

.b-cyan {
    --this-bg: #08c4c1;
}

.b-blue {
    --this-bg: #2997f7;
}

.b-blue-2 {
    --this-bg: #5c7cff;
}

.b-green {
    --this-bg: #12b928;
}

.b-purple {
    --this-bg: #d448f5;
}

.b-black {
    --this-bg: #121517;
}

.jb-red {
    --this-bg-b: #fd7a64;
    --this-bg: linear-gradient(135deg, #fd7a64 10%, #fb2d2d 100%);
}

.jb-pink {
    --this-bg-b: #ff5e7f;
    --this-bg: linear-gradient(135deg, #ff5e7f 30%, #ff967e 100%);
}

.jb-yellow {
    --this-bg-b: #f59f54;
    --this-bg: linear-gradient(135deg, #f59f54 10%, #ff6922 100%);
}

.jb-yellow-2 {
    --this-bg-b: #f9a158;
    --this-bg: linear-gradient(135deg, #f9a158 10%, #f6b174 100%);
}

.jb-blue {
    --this-bg-b: #59c3fb;
    --this-bg: linear-gradient(135deg, #59c3fb 10%, #268df7 100%);
}

.jb-cyan {
    --this-bg-b: #039ab3;
    --this-bg: linear-gradient(140deg, #039ab3 10%, #58dbcf 90%);
}

.jb-green {
    --this-bg-b: #60e464;
    --this-bg: linear-gradient(135deg, #60e464 10%, #5cb85b 100%);
}

.jb-purple {
    --this-bg-b: #f98dfb;
    --this-bg: linear-gradient(135deg, #f98dfb 10%, #ea00f9 100%);
}

.jb-vip1 {
    --this-bg-b: #eabe7b;
    --this-bg: linear-gradient(25deg, #eabe7b 10%, #f5e3c7 70%, #edc788 100%);
    --this-color: #866127;
}

.jb-vip2 {
    --this-bg-b: #585555;
    --this-bg: linear-gradient(317deg, #4d4c4c 30%, #7b7b7b 70%, #5f5c5c 100%);
    --this-color: #ddd;
}

/* ============================================================
 * 6. 按钮 but
 * ============================================================ */
#shop .but,
.shop-modal-wrap .but {
    --this-color: var(--main-color);
    --this-bg: var(--muted-border-color);
    display: inline-block;
    color: var(--this-color);
    background: var(--this-bg);
    border: none;
    border-radius: var(--main-radius);
    padding: 6px 14px;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
    vertical-align: middle;
    -webkit-appearance: none;
    appearance: none;
}

#shop .but:hover,
.shop-modal-wrap .but:hover {
    opacity: 0.85;
    color: var(--this-color);
}

#shop .but.cir,
.shop-modal-wrap .but.cir {
    padding: 0;
    border-radius: 5em;
    --this-size: 1.8em;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: var(--this-size);
    min-width: var(--this-size);
}

#shop .but.cir svg,
#shop .but.cir > .fa,
.shop-modal-wrap .but.cir svg,
.shop-modal-wrap .but.cir > .fa {
    margin: 0;
}

#shop .but.btn-block,
.shop-modal-wrap .but.btn-block {
    display: block;
    width: 100%;
}

#shop .but.padding-lg,
.shop-modal-wrap .but.padding-lg {
    padding: 10px 20px;
}

#shop .but.jb-red,
.shop-modal-wrap .but.jb-red {
    --this-color: #ffffff;
    --this-bg: linear-gradient(135deg, #ff6034, #ee0a24);
    background: var(--this-bg);
}

#shop .but.jb-yellow-2,
.shop-modal-wrap .but.jb-yellow-2 {
    --this-color: #ffffff;
    --this-bg: linear-gradient(135deg, #ffd01e, #ff8917);
    background: var(--this-bg);
}

#shop .but.jb-blue,
.shop-modal-wrap .but.jb-blue {
    --this-color: #ffffff;
    --this-bg: linear-gradient(135deg, #3d9bff, #007aff);
    background: var(--this-bg);
}

#shop .but.jb-vip1,
.shop-modal-wrap .jb-vip1 {
    --this-color: #8c6b39;
    --this-bg: linear-gradient(135deg, #f8e2c8, #f0c8a0);
    background: var(--this-bg);
}

#shop .but.is-disabled,
#shop .but[disabled],
.shop-modal-wrap .but.is-disabled,
.shop-modal-wrap .but[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

#shop .but.c-white,
.shop-modal-wrap .but.c-white {
    --this-color: #ffffff;
    --this-bg: rgba(0, 0, 0, 0.4);
}

/* 按钮 loading 态（防重复提交） */
.shop-btn-loading {
    position: relative;
    opacity: 0.65;
    pointer-events: none;
}

.shop-btn-loading::after {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 6px;
    vertical-align: -0.15em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 100%;
    animation: shop-btn-loading-spin 0.7s linear infinite;
}

@keyframes shop-btn-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================
 * 7. 复选框 div-checkbox
 * ============================================================ */
.div-checkbox {
    --size: 20px;
    position: relative;
    width: var(--size);
    height: var(--size);
    border-radius: 100%;
    border: 1.5px solid var(--muted-3-color);
    cursor: pointer;
    display: inline-block;
    transition: 0.2s;
    opacity: 0.8;
    font-size: 14px;
    vertical-align: middle;
    flex-shrink: 0;
}

.div-checkbox::before,
.div-checkbox::after {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: 0.2s;
}

.div-checkbox::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content: '\f00c';
    color: #fff;
    padding: 1px;
    width: 100%;
    transform: translateY(-2px) translateX(1px) scale(0);
}

.div-checkbox::after {
    content: '';
    height: 4px;
    background: var(--focus-color);
    border-radius: 2px;
    min-width: calc(var(--size) - 8px);
    transform: translateY(-50%) scale(0.8);
    margin: 0 1px;
    margin-top: calc(50%);
    right: 0;
    padding: 0 2px;
}

.div-checkbox.checked {
    background: var(--focus-color);
    border-color: var(--focus-color);
}

.div-checkbox.checked::before {
    opacity: 1;
    transform: translateY(-2px) translateX(1px) scale(1);
}

.div-checkbox.portion {
    border-color: var(--focus-color);
}

.div-checkbox.portion::after {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.div-checkbox:not(.is-disabled):hover {
    border-color: var(--focus-color);
}

.div-checkbox.is-disabled {
    background: var(--main-border-color);
    opacity: 0.6;
}

/* ============================================================
 * 8. 数量选择器 number-spinner
 * ============================================================ */
.number-spinner {
    --this-size: 34px;
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    user-select: none;
}

.number-spinner .minus-btn,
.number-spinner .plus-btn {
    width: var(--this-size);
    height: var(--this-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--muted-border-color);
    color: var(--main-color);
    cursor: pointer;
    font-size: 0.8em;
    transition: 0.2s;
}

.number-spinner .minus-btn {
    border-radius: 6px 0 0 6px;
}

.number-spinner .plus-btn {
    border-radius: 0 6px 6px 0;
}

.number-spinner .minus-btn:hover,
.number-spinner .plus-btn:hover {
    color: var(--focus-color);
}

.number-spinner .minus-btn.is-disabled,
.number-spinner .plus-btn.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    color: var(--muted-color);
}

.number-spinner .number-input {
    min-width: calc(var(--this-size) + 8px);
    height: var(--this-size);
    line-height: var(--this-size);
    text-align: center;
    background: var(--muted-border-color);
    margin: 0 1.5px;
    padding: 0 4px;
    cursor: pointer;
}

/* 数量输入弹窗 */
.shop-modal-wrap .input-number-form input[name='val'] {
    width: 100%;
    border: 1px solid var(--main-border-color);
    border-radius: var(--main-radius);
    background: var(--muted-border-color);
    color: var(--main-color);
    padding: 10px 12px;
    font-size: 16px;
    outline: none;
    text-align: center;
}

.shop-modal-wrap .input-number-form input[name='val']:focus {
    border-color: var(--focus-color);
}

/* ============================================================
 * 9. 弹窗 shop-modal-wrap
 * ============================================================ */
body.shop-modal-open {
    overflow: hidden;
}

.shop-modal-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4000;
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: hidden;
}

.shop-modal-wrap.fade {
    opacity: 0;
    transition: opacity 0.2s;
}

.shop-modal-wrap.fade.in {
    opacity: 1;
}

.shop-modal-wrap .modal-dialog {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    transform: translateY(30px);
    transition: transform 0.25s;
}

.shop-modal-wrap.in .modal-dialog {
    transform: translateY(0);
}

.shop-modal-wrap .modal-dialog.modal-mini {
    /* 蓝本 .modal-mini 宽度 400px（max-width 兜底小屏） */
    width: 400px;
    max-width: calc(100% - 20px);
}

.shop-modal-wrap .modal-content {
    position: relative;
    background: var(--main-bg-color);
    border-radius: 16px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.15);
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.shop-modal-wrap .modal-body {
    padding: 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.shop-modal-wrap .close.abs-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 100%;
    background: var(--muted-border-color);
    color: var(--muted-color);
    cursor: pointer;
    font-size: 14px;
    transition: 0.2s;
}

.shop-modal-wrap .close.abs-close:hover {
    color: var(--main-color);
}

.shop-modal-wrap .touch-close {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--muted-4-color);
    cursor: pointer;
    z-index: 11;
}

/* 移动端从底部弹出 */
@media (max-width: 768px) {
    .shop-modal-wrap.bottom {
        align-items: flex-end;
        padding: 0;
    }

    .shop-modal-wrap.bottom .modal-dialog,
    .shop-modal-wrap .modal-dialog.full-sm {
        width: 100%;
        max-width: 100%;
    }

    .shop-modal-wrap.bottom .modal-dialog {
        transform: translateY(100%);
        transition: transform 0.3s;
    }

    .shop-modal-wrap.bottom.in .modal-dialog {
        transform: translateY(0);
    }

    .shop-modal-wrap.bottom .modal-content {
        border-radius: 16px 16px 0 0;
        max-height: 85vh;
        max-height: 85dvh;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .shop-modal-wrap.bottom .modal-body {
        padding: 20px 15px;
        padding-top: 24px;
    }
}

/* ============================================================
 * 10. 轻提示 shop-toast
 * ============================================================ */
.shop-toast-box {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5001;
    pointer-events: none;
    text-align: center;
    max-width: 80vw;
}

.shop-toast {
    display: block;
    margin: 8px auto 0;
    padding: 10px 20px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(-8px);
    transition: 0.25s;
    word-break: break-all;
}

.shop-toast.in {
    opacity: 1;
    transform: translateY(0);
}

.shop-toast.warning {
    background: rgba(230, 130, 0, 0.92);
}

.shop-toast.error {
    background: rgba(215, 55, 55, 0.92);
}

.shop-toast.success {
    background: rgba(46, 155, 90, 0.92);
}

/* ============================================================
 * 11. 列表卡片骨架屏
 * ============================================================ */
#shop .placeholder,
.shop-modal-wrap .placeholder {
    background: var(--muted-border-color);
    border-radius: 4px;
    color: transparent !important;
    animation: shop-placeholder-breathe 1.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shop-placeholder-breathe {
    50% {
        opacity: 0.5;
    }
}

/* ============================================================
 * 12. 优惠券 / 优惠卡片
 * ============================================================ */
.discount-card-link {
    display: block;
    color: inherit;
}

.discount-card.muted-box {
    background: rgba(252, 69, 69, 0.03);
    color: #fc4545;
    position: relative;
    padding-top: 25px;
}

body.dark-mode .discount-card.muted-box {
    color: #df4b4b;
}

.discount-card .discount-amount {
    min-width: 88px;
    font-size: 26px;
    margin-right: 12px;
    text-align: center;
    line-height: 1.2;
    margin-left: -10px;
    border-right: 1px dashed rgba(252, 69, 69, 0.3);
}

.discount-card .discount-amount .decimal-part {
    font-size: 0.65em;
}

.discount-card .small-badge,
.gift-card .small-badge {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(252, 69, 69, 0.1);
    color: #fc4545;
    padding: 4px 8px;
    border-radius: var(--main-radius) 0 var(--main-radius) 0;
    font-size: 12px;
    line-height: 1;
    transform: scale(0.9);
    transform-origin: left top;
}

.gift-card {
    position: relative;
}

.gift-card .gift-name {
    min-width: 80px;
    margin-right: 12px;
}

.gift-card .gift-card-info {
    border-bottom: 1px dashed var(--main-border-color);
    padding: 10px 0 6px;
}

/* ============================================================
 * 13. 评分组件（S7 评价体系预置）
 * ============================================================ */
.shop-score-box .icon-star {
    padding: 0 5px;
    cursor: pointer;
}

.shop-score-box .icon-star svg {
    fill: transparent;
    stroke: var(--muted-2-color);
    stroke-width: 70;
    transition: 0.2s;
    transform-origin: center;
    vertical-align: baseline;
}

.shop-score-box .icon-star.hover svg,
.shop-score-box .icon-star.active svg {
    fill: #fc7049;
    stroke: #fc7049;
}

.shop-score-box .icon-star:hover svg {
    transform: scale(1.2);
}

/* ============================================================
 * 14. 折扣徽章 / 价格 / 星级徽章
 * ============================================================ */
/* 蓝本依赖 Bootstrap .badge 基类（knn 不带 Bootstrap），基类属性直接补在 badge-discount 上 */
.badge-discount {
    display: inline-block;
    padding: 3px 7px;
    font-size: 12px;
    line-height: 1;
    border-radius: 10px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background: transparent;
    border: 1px solid rgba(249, 91, 91, 0.5);
    color: #fc4545;
    opacity: 0.8;
    margin: 2px;
    font-weight: normal;
}

.badge-discount.no-hit {
    opacity: 0.5;
}

#shop .badg.badge-tag,
.shop-modal-wrap .badg.badge-tag {
    font-size: 0.9em;
    padding: 1px 6px;
    margin: 1px;
}

.price-box {
    display: flex;
    align-items: baseline;
    line-height: 1;
}

.price-box .price-str {
    font-size: 1.6em;
}

.price-box .decimal-part {
    font-size: 0.7em;
}

#shop .original-price,
.shop-modal-wrap .original-price {
    text-decoration: line-through;
    color: var(--muted-3-color);
}

/* 划线只画在数字上：货币符号 inline-block 阻断父级 line-through 贯穿 */
:where(#shop, .shop-modal-wrap) .original-price .pay-mark {
    display: inline-block;
    text-decoration: none;
}

/* 重点活动价格条（票券风浅底）内：原价加深加大，保证浅底上可读 */
#shop .important-price-box .original-price-box {
    color: var(--muted-color);
    font-size: 13px;
}

#shop .important-price-box .original-price {
    color: inherit;
}

.original-price-box .original-price {
    opacity: 1;
}

.stars-badge-box {
    color: var(--muted-4-color);
}

.stars-badge-box .active-half {
    --active-half-color: #ff5473;
}

.stars-badge-box .active {
    color: #ff5473;
}

/* ============================================================
 * 15. 商品选项
 * ============================================================ */
.product-opt-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
}

.product-opt-content {
    --this-spacing: 12px; /* 间距 */
    margin: calc(0px - var(--this-spacing) / 2);
}

#shop .opt-item.badg,
.shop-modal-wrap .opt-item.badg {
    transition: 0.15s;
    padding: 2px 24px;
    color: var(--muted-2-color);
    background: transparent;
    border: 1px solid var(--muted-4-color);
    margin: calc(var(--this-spacing) / 2);
    border-radius: 6px;
    cursor: pointer;
    --this-height: 40px;
    height: var(--this-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

#shop .opt-item.badg:hover,
.shop-modal-wrap .opt-item.badg:hover {
    border-color: var(--focus-color-opacity6);
}

#shop .opt-item.badg.active,
.shop-modal-wrap .opt-item.badg.active {
    border-color: var(--focus-color-opacity6);
    color: var(--focus-color);
    background: var(--focus-color-opacity05);
}

.opt-item .opt-item-image {
    width: calc(var(--this-height) * 0.6);
    height: calc(var(--this-height) * 0.6);
    display: inline-block;
    margin-right: 6px;
    overflow: hidden;
    border-radius: 4px;
    position: relative;
}

.opt-item .opt-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-opt-content:not(.mode-img) .opt-item {
    min-width: calc(100% / var(--this-item-count) - var(--this-spacing));
}

.count-2 {
    --this-item-count: 2;
}

.count-6,
.count-3 {
    --this-item-count: 3;
}

.count-8,
.count-7,
.count-4 {
    --this-item-count: 4;
}

.count-10,
.count-9,
.count-5 {
    --this-item-count: 5;
}

#shop .mode-img .opt-item.badg,
.shop-modal-wrap .mode-img .opt-item.badg {
    --this-height: 140px;
    flex-direction: column;
    width: 110px;
    overflow: hidden;
    padding: 0;
    justify-content: space-around;
    position: relative;
}

.mode-img .opt-item-image {
    width: 110px;
    height: 110px;
    flex-basis: 110px;
    margin-right: 0;
    border-radius: 4px 4px 0 0;
}

.mode-img .opt-item-image .alone-imgbox-img {
    display: flex;
}

.opt-item-image .alone-imgbox-img {
    right: 0;
    background: rgba(84, 84, 84, 0.3);
    width: 24px;
    height: 24px;
    border-radius: 0 0 0 8px;
    color: #fff;
    top: 0;
    display: none;
}

.mode-img .opt-item-name {
    padding: 6px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    font-size: 13px;
}

.product-params-box .params-item + .params-item {
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid var(--main-border-color);
}

/* ============================================================
 * 16. 弹窗内商品信息覆盖
 * ============================================================ */
.shop-modal .product-graphic {
    width: 90px;
    height: 90px;
    position: relative;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--muted-border-color);
}

.shop-modal .product-graphic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-modal .number-spinner {
    --this-size: 30px;
    font-size: 14px;
}

.shop-modal .p-d-mb {
    margin-bottom: 15px;
}

.shop-modal .product-title,
.shop-modal .product-opt-title {
    font-size: 15px;
}

#shop .shop-modal .product-opt-content:not(.mode-img) .opt-item.badg,
.shop-modal-wrap .shop-modal .product-opt-content:not(.mode-img) .opt-item.badg {
    padding: 5px 14px;
    --this-height: 34px;
}

.shop-modal .product-opt-content {
    --this-spacing: 6px; /* 间距 */
}

/* ============================================================
 * 17. 商品详情页
 * ============================================================ */
.single-header-box {
    --gap: 60px;
    margin-bottom: 40px;
}

.single-header-box > * {
    display: inline-block;
    width: calc(50% - var(--gap) / 2);
    vertical-align: top;
}

.single-header-box > .single-product-cover-box {
    margin-right: var(--gap);
}

/* 封面轮播 */
.single-product-cover-box {
    position: relative;
}

.single-product-cover-box .shop-cover-swiper {
    width: 100%;
    border-radius: var(--main-radius);
    overflow: hidden;
    background: var(--muted-border-color);
}

.single-product-cover-box .shop-cover-swiper .swiper-slide img {
    width: 100%;
    display: block;
    cursor: zoom-in;
}

.single-product-cover-box .shop-cover-swiper .swiper-pagination-fraction {
    width: auto;
    left: auto;
    right: 12px;
    bottom: 12px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 100px;
    line-height: 1.4;
}

/* 封面轮播左右按钮（蓝本 swiper.css 规格：默认隐藏，悬停容器时滑入；覆盖 swiper-bundle 默认蓝色大箭头） */
.shop-cover-swiper .swiper-button-prev,
.shop-cover-swiper .swiper-button-next {
    position: absolute;
    top: 50%;
    width: 30px;
    height: 40px;
    margin-top: -25px;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.4s;
    opacity: 0;
    color: #fff;
    text-shadow: 0 0 6px #444;
}

.shop-cover-swiper .swiper-button-prev:hover,
.shop-cover-swiper .swiper-button-next:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.3);
}

.shop-cover-swiper .swiper-button-prev::after,
.shop-cover-swiper .swiper-button-next::after {
    font-family: swiper-icons;
    font-size: 15px;
}

.shop-cover-swiper .swiper-button-next {
    right: -15px;
    left: auto;
}

.shop-cover-swiper .swiper-button-prev {
    left: -15px;
    right: auto;
}

.shop-cover-swiper:hover .swiper-button-next {
    right: 0;
    opacity: 0.8;
}

.shop-cover-swiper:hover .swiper-button-prev {
    left: 0;
    opacity: 0.8;
}

.shop-cover-swiper .swiper-button-prev.swiper-button-disabled,
.shop-cover-swiper .swiper-button-next.swiper-button-disabled {
    opacity: 0 !important;
    cursor: auto !important;
    pointer-events: none !important;
}

.single-product-cover-box .more-btns {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    padding: 10px;
}

.single-product-cover-box .more-btns text {
    display: none;
}

#shop .single-product-cover-box .more-btns .but {
    --this-bg: rgba(0, 0, 0, 0.4);
    background: var(--this-bg);
    font-size: 1.2em;
    padding: 6px 10px;
}

/* 标题与价格 */
#shop .single-product-title .article-title {
    margin-top: 0;
    line-height: 1.2;
    font-size: 26px;
}

.single-product-title .article-title a {
    color: inherit;
}

.single-product-detail-box .price-box {
    font-size: 26px;
}

.single-product-detail-box .important-price-box .price-box {
    font-size: 20px;
}

.product-service-combine-box > *:last-of-type {
    margin-bottom: 0;
}

/* 商品详情区块下间距：product-detail-margin-bottom 简写 */
.p-d-mb {
    margin-bottom: 20px;
}

/* 加购/立购按钮组：移动端选购弹窗挂在 body 下，需补 .shop-modal-wrap 前缀 */
#shop .shop-paybtn-group > .but,
.shop-modal-wrap .shop-paybtn-group > .but {
    padding: 10px 20px;
    min-width: 120px;
}

/* 移动端详情页底栏：默认隐藏（对齐蓝本 .footer-tabbar 默认 display:none，手机端媒体查询内再显示） */
.shop-single-tabbar {
    display: none;
}

/* 收藏/分享竖排小钮：加 #shop 前缀抬优先级，压过 #shop .but 的 inline-block（蓝本无 ID 作用域无此冲突） */
#shop .shop-pay-action-btns > a {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    color: var(--muted-2-color);
}

#shop .shop-pay-action-btns > a + a {
    margin-left: 10px;
}

.shop-pay-action-btns .icon {
    font-size: 20px;
    margin: 0 0 3px;
}

.shop-pay-action-btns text {
    font-size: 12px;
    opacity: 0.8;
    line-height: 1;
}

/* 重点活动价格条：票券风（knn 自有设计，不复刻蓝本整条渐变 + 闪电水印）
 * 浅色底 + 活动色大字价格，右侧渐变「票根」放活动名/倒计时，
 * 中间背景色虚线 + 上下打孔圆模拟擕开的券。
 * 颜色链 var(--this-bg-b, var(--this-bg, #fb2d2d)) 兼容 jb-*（渐变）与 b-*（纯色）两系 palette。 */
#shop .product-price-box.important-price-box {
    position: relative;
    overflow: visible;
    align-items: stretch;
    padding: 0;
    background: color-mix(in srgb, var(--this-bg-b, var(--this-bg, #fb2d2d)) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--this-bg-b, var(--this-bg, #fb2d2d)) 30%, transparent);
    border-radius: 12px;
    color: var(--main-color);
}

#shop .important-price-box .important-price-left {
    padding: 12px 16px;
    justify-content: center;
}

#shop .important-price-box .important-price-left .price-box {
    color: var(--this-bg-b, var(--this-bg, #fb2d2d));
}

#shop .important-price-box .sales-count {
    color: var(--muted-2-color);
}

#shop .important-price-box .important-price-right {
    overflow: visible;
    position: relative;
    align-self: stretch;
    justify-content: center;
    min-width: 96px;
    max-width: 40%;
    margin: -1px -1px -1px 0;
    padding: 10px 14px;
    background: var(--this-bg, #fb2d2d);
    color: var(--this-color, #fff);
    border-radius: 0 12px 12px 0;
    border-left: 2px dashed var(--main-bg-color);
    text-align: center;
}

/* 票根左缘上下打孔：背景色圆盖在外盒边线上形成缺口 */
#shop .important-price-box .important-price-right::before,
#shop .important-price-box .important-price-right::after {
    content: '';
    position: absolute;
    left: -9px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--main-bg-color);
}

#shop .important-price-box .important-price-right::before {
    top: -8px;
}

#shop .important-price-box .important-price-right::after {
    bottom: -8px;
}

.important-price-box.jb-vip1 .c-white {
    --this-color: #8c6b39;
    --this-bg: rgba(158, 139, 134, 0.2);
}

/* 详情页 tab（自建：shop-tab-nav / data-tab-pane） */
.product-single-tab {
    padding: 0;
}

.product-single-tab .shop-tab-nav {
    font-size: 20px;
    color: var(--muted-2-color);
    padding: 16px 20px 14px;
    margin: 0;
    justify-content: center;
    border-bottom: none;
}

.product-single-tab .shop-tab-nav-item {
    padding: 0 20px 4px;
    cursor: pointer;
    position: relative;
    transition: 0.2s;
}

.product-single-tab .shop-tab-nav-item.active {
    color: var(--main-color);
    font-weight: 600;
}

.product-single-tab .shop-tab-nav-item.active::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -4px;
    width: 24px;
    height: 3px;
    border-radius: 2px;
    background: var(--focus-color);
}

#shop [data-tab-pane] {
    display: none;
}

#shop [data-tab-pane].active {
    display: block;
}

.product-article {
    padding: 30px;
}

.layout-full .product-article-full {
    padding: 0 30px;
}

.layout-full .product-article-full .seamless-img.full-container {
    margin-left: -30px;
    margin-right: -30px;
}

/* 服务保障 / 参数 / 发货行图标（.icon-header）：蓝本无任何样式定义，
   图标作为行内元素与右侧文字首行同基线，勿自创圆底/定高样式否则图标与文字错行 */

/* 空态 */
.shop-empty-box {
    text-align: center;
    color: var(--muted-color);
    padding: 60px 20px;
}

.shop-empty-box .fa {
    font-size: 40px;
    opacity: 0.4;
    margin-bottom: 12px;
    display: block;
}

/* ============================================================
 * 18. 加入购物车动画
 * ============================================================ */
.cart-add-animate {
    z-index: 5000;
}

.cart-add-animate .img-box {
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 100%;
    animation: cart-add-animate 0.2s ease-in;
}

@keyframes cart-add-animate {
    0% {
        opacity: 0;
        transform: scale(6);
    }
    30% {
        opacity: 1;
        transform: scale(6);
    }
    100% {
        transform: scale(1);
    }
}

.add-animate {
    animation: cart-btn-add 0.3s ease-in;
}

@keyframes cart-btn-add {
    50% {
        transform: scale(1.3);
    }
}

/* 导航购物车按钮（对齐消息铃铛 .msg-news-icon + badge.top 风格，样式自包含不依赖消息模块 CSS） */
.shop-cart-nav-icon {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    /* 页头无全局 .ml10 规则，间距自带 */
    margin-left: 10px;
    flex-shrink: 0;
}

/* 圆底（与 message.css 铃铛 .toggle-radius 同规格，消息模块关闭时也不塌缩） */
.shop-cart-nav-icon .toggle-radius {
    background: var(--main-border-color, rgba(50, 50, 50, 0.06));
    width: 29px;
    height: 29px;
    display: inline-block;
    text-align: center;
    border-radius: 100%;
    position: relative;
    vertical-align: text-top;
    margin: 0;
}

.shop-cart-nav-icon .toggle-radius svg,
.shop-cart-nav-icon .toggle-radius .icon {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    margin: auto;
    transform: translateY(-50%);
    z-index: 1;
    width: 15px;
    height: 15px;
}

.shop-cart-nav-icon badge.top {
    position: absolute;
    transform: translate(-10px, -6px) scale(0.85);
    margin-right: -10px;
    z-index: 2;
}

badge[cart-count] {
    display: inline-block;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    padding: 0 4px;
    border-radius: 100px;
    background: #fc4545;
    color: #fff;
    font-size: 11px;
    text-align: center;
    box-sizing: border-box;
}

badge[cart-count='0'],
badge[cart-count=''] {
    display: none;
}

/* ============================================================
 * 19. 购物车页
 * ============================================================ */

/* tab 容器显隐（蓝本 bootstrap tab 基础，主题无此体系） */
#shop .tab-content > .tab-pane {
    display: none;
}

#shop .tab-content > .tab-pane.active {
    display: block;
}

#shop .fade {
    opacity: 0;
    transition: opacity 0.15s linear;
}

#shop .fade.in {
    opacity: 1;
}

/* 结算步骤条（选择商品 → 核对订单 → 提交订单） */
#shop .steps-box {
    display: flex;
    align-items: center;
    color: var(--muted-3-color);
}

#shop .steps-box .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

#shop .steps-box .step::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--muted-3-color);
    border-radius: 50%;
    margin-bottom: 10px;
    z-index: 10;
}

#shop .steps-box .step.active {
    color: var(--muted-2-color);
}

#shop .steps-box .step.active::before {
    background: transparent;
    box-shadow: 0 0 0 3px var(--focus-color);
}

#shop .steps-box .step::after {
    content: '';
    width: 100%;
    height: 2px;
    background: var(--muted-4-color);
    margin-top: 10px;
    position: absolute;
    top: -7px;
    left: 0;
}

#shop .steps-box .step:first-child::after {
    left: calc(50% + 6px);
}

#shop .steps-box .step:last-child::after {
    right: calc(50% + 3px);
    left: auto;
}

#shop .cart-list-item.cart-footer,
#shop .cart-list-item.cart-header {
    font-size: 1.2em;
    color: var(--muted-2-color);
    padding: 15px 30px;
}

#shop .cart-group.zib-widget {
    padding: 15px 30px;
}

.cart-list-item.cart-header .product-graphic {
    height: 0;
    width: 56px;
}

/* 注意：此处不可加 display:flex —— 内部 .cart-list-header 作为 flex 子项会收缩成内容宽，
 * 整行挤到左侧、列错位（蓝本此处就是块级，靠内部 .cart-list-header 的 flex jsb 分列） */
.cart-list-item {
    padding: 20px 0;
}

.cart-list-item .product-graphic {
    --t-size: 100px;
    width: var(--t-size);
    height: var(--t-size);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--muted-border-color);
    border-radius: 8px;
    flex-shrink: 0;
}

.cart-list-item .product-graphic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-list-item .cart-col-checkbox {
    height: 100%;
    margin: -20px;
    padding: 20px;
    margin-right: 0px;
    cursor: pointer;
}

.cart-product .cart-list-item .cart-col-checkbox {
    padding: 50px 20px;
}

.cart-col-spinner-price,
.cart-list-item .cart-col-right,
.cart-list-item .cart-col-main {
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}

.cart-col-product {
    flex-basis: 30%;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    margin-right: 30px;
}

.cart-col-action {
    flex-basis: 50px;
}

.cart-col-spinner-price > * {
    flex: 1;
    overflow: hidden;
}

.cart-list-item .product-title {
    font-size: 1.1em;
    height: auto;
    max-width: 100%;
}

.cart-list-item .product-title a {
    color: inherit;
}

.cart-list-item .product-discount-box:not(.hide) + .product-tags-box {
    display: none;
}

.cart-list-author {
    padding-top: 5px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--main-border-color);
}

.cart-col-author {
    align-items: center;
    display: flex;
    font-size: 1.1em;
    font-weight: bold;
}

.cart-col-author a {
    color: inherit;
    display: flex;
    align-items: center;
    overflow: hidden;
}

#shop .cart-col-author .avatar-img {
    --this-size: 28px;
    margin-right: 8px;
}

#shop .cart-list-item.cart-footer {
    color: var(--muted-color);
    background: var(--main-bg-color);
}

.cart-col-price .price-box {
    flex-wrap: wrap;
}

.cart-col-total-info {
    text-align: right;
}

.discount-str {
    cursor: pointer;
    font-size: 0.85em;
}

#shop .cart-footer .settle-btn {
    min-width: 165px;
    padding: 11px 20px;
    margin-left: 30px;
}

#shop .cart-remove-btn {
    padding: 6px 10px;
}

#shop .cart-col-action .but {
    white-space: nowrap;
}

/* 购物车页 tab 头 */
.cart-page-tab .list-inline > li {
    cursor: pointer;
    padding: 4px 0;
    margin-right: 20px;
    color: var(--muted-color);
}

.cart-page-tab .list-inline > li.active {
    color: var(--main-color);
    font-weight: 600;
}

/* ============================================================
 * 20. 商品列表卡片（相关推荐等）
 * ============================================================ */
.product-lists-row {
    margin: -8px;
    margin-bottom: 12px;
    display: flex;
    flex-wrap: wrap;
}

.product-lists-row > * {
    margin: 8px;
}

.product-item.card {
    padding: 0;
    --body-padding: 15px;
    background: var(--main-bg-color);
    border-radius: var(--main-radius);
    box-shadow: 0 0 10px var(--main-shadow);
    overflow: hidden;
    display: block;
    width: calc(25% - 16px);
    color: inherit;
    transition: 0.2s;
}

.product-item.card:hover {
    transform: translateY(-2px);
}

.product-item.card .item-body {
    padding: var(--body-padding);
    margin: 0;
}

.product-item.card .item-body > * {
    margin: 0;
    margin-top: 6px;
}

.product-item.card .item-thumbnail {
    position: relative;
    padding-bottom: var(--t-s, var(--thumb-scale, 100%));
    overflow: hidden;
}

.product-item.card .item-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-item.card .item-thumbnail,
.product-item.card .item-thumbnail img {
    border-radius: var(--main-radius) var(--main-radius) 0 0;
}

.product-item.card .item-heading {
    margin-top: 0px;
    font-size: 16px;
    font-weight: normal;
}

.product-item.card .item-heading a {
    color: inherit;
}

.product-item.card .item-heading.text-ellipsis {
    display: block;
    white-space: nowrap;
    min-height: auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-item.card .placeholder.item-heading.text-ellipsis {
    min-height: 1.4em;
}

.product-item.card .item-excerpt.text-ellipsis {
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted-color);
    font-size: 13px;
}

.product-item .item-price {
    display: inline-flex;
    align-items: baseline;
    color: #fc4545;
}

.product-item .item-price .show-price-box .price {
    font-size: 1.2em;
}

.product-item .item-discount-badge {
    margin-top: 6px;
    min-height: 24px;
}

.product-item.card .img-badge {
    position: absolute;
    top: 14px;
    left: 0;
    z-index: 1;
}

/* 展开/收起箭头 */
.expanded .fa {
    transform: rotate(180deg);
}

#shop .expand-toggle .fa {
    transition: transform 0.2s;
}

/* 即将上线占位按钮 */
#shop .shop-coming-soon {
    cursor: pointer;
}

/* ============================================================
 * 21. 媒体查询：电脑端
 * ============================================================ */
@media (min-width: 768px) {
    .single-header-box > * {
        position: sticky;
        top: 88px;
    }

    .single-product-header {
        background: var(--main-bg-color);
        margin-top: -20px;
        margin-bottom: 20px;
        padding-top: 20px;
    }

    .cart-col-product > * + * {
        margin-top: 10px;
    }

    .cart-col-spinner {
        min-width: 124px;
    }

    #shop .cart-list-item.cart-footer {
        position: sticky;
        bottom: 0;
        z-index: 10;
    }

    /* 移动端专用列隐藏 */
    .cart-col-spinner-price-sm {
        display: none;
    }
}

/* ============================================================
 * 22. 媒体查询：平板
 * ============================================================ */
@media (max-width: 991px) {
    .product-item.card {
        width: calc(33.333% - 16px);
    }
}

/* ============================================================
 * 23. 媒体查询：手机端
 * ============================================================ */
@media (max-width: 767px) {
    /* --- 详情页 --- */
    .product-single-tab .shop-tab-nav {
        display: flex;
        justify-content: space-around;
        font-size: 16px;
        color: var(--muted-color);
        padding: 12px 10px 6px;
    }

    .product-single-tab .shop-tab-nav-item {
        padding: 0 6px 4px;
    }

    .p-d-mb {
        margin-bottom: 15px;
    }

    .product-article {
        padding: 15px;
    }

    .layout-full .product-article-full {
        padding: 0 15px;
    }

    .layout-full .product-article-full .seamless-img.full-container {
        margin-left: -15px;
        margin-right: -15px;
    }

    .single-header-box {
        margin: -20px -10px -10px -10px;
    }

    .single-product-detail-box > .v-shop-detail {
        padding: 10px;
    }

    .single-header-box > * {
        display: block;
        width: 100%;
    }

    .single-header-box > .single-product-cover-box {
        margin: 0;
    }

    .single-header-box > .single-product-detail-box {
        z-index: 10;
        position: relative;
    }

    .single-product-cover-box .shop-cover-swiper {
        border-radius: 0;
    }

    .single-product-cover-box .shop-cover-swiper .swiper-slide img {
        border-radius: 0;
    }

    .single-product-cover-box .shop-cover-swiper .swiper-pagination-fraction {
        opacity: 0.8;
        bottom: 26px;
    }

    #shop .single-product-title .article-title {
        font-size: 18px;
    }

    .single-product-header .breadcrumb {
        display: none;
    }

    .product-title-price-box {
        background: linear-gradient(to bottom, var(--main-bg-color) 40%, rgba(0, 0, 0, 0));
        border-radius: 16px 16px 0 0;
        padding: 15px 15px 10px;
        margin: -10px;
        margin-top: -31px;
        box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.02);
        position: relative;
    }

    /* 重点活动票券：移动端不复刻蓝本贴顶横幅，流内展示，仅紧凑化 */
    #shop .important-price-box .important-price-left {
        padding: 10px 12px;
    }

    #shop .important-price-box .important-price-right {
        min-width: 84px;
        padding: 8px 10px;
    }

    .product-title-price-box .product-price-discount-box {
        order: -1;
    }

    .single-product-detail-box .price-box {
        font-size: 18px;
    }

    .single-product-detail-box .important-price-box .price-box {
        font-size: 16px;
    }

    .product-service-combine-box {
        background: var(--main-bg-color);
        padding: 15px 10px;
        box-shadow: 0 0 10px var(--main-shadow);
        border-radius: var(--main-radius);
    }

    /* 移动端底部购买栏（对齐蓝本主题级 .footer-tabbar 组件段） */
    .footer-tabbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        z-index: 1035;
        justify-content: space-around;
        align-items: center;
        text-align: center;
        background: var(--main-bg-color);
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -4px 5px var(--main-shadow);
    }

    #shop .footer-tabbar .tabbar-item {
        flex: 1;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        min-height: 49px;
        padding: 3px 0;
        color: var(--muted-color);
    }

    #shop .footer-tabbar .tabbar-item > svg,
    #shop .footer-tabbar .tabbar-item > icon {
        font-size: 24px;
        line-height: 1em;
        height: 1em;
    }

    /* 店铺头像（蓝本 .avatar-mini --this-size:24px，knn 无该变量体系直接落定尺寸） */
    #shop .footer-tabbar .avatar-img,
    #shop .footer-tabbar .avatar-img img {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: block;
    }

    #shop .footer-tabbar .tabbar-item badge {
        font-size: 12px;
        transform: scale(0.8) translateX(13px);
        position: absolute;
        top: 1px;
    }

    #shop .footer-tabbar text {
        width: 100%;
        font-size: 13px;
        line-height: 1em;
        transform: scale(0.8);
    }

    #shop .footer-tabbar .but-group {
        padding: 6px;
        margin: 0 8px;
    }

    .footer-tabbar .shop-paybtn-group {
        flex: 1 0 44%;
        display: flex;
    }

    #shop .footer-tabbar .shop-paybtn-group > .but {
        min-width: 87px;
        padding: 8px;
        width: 50%;
    }

    #shop .footer-tabbar .shop-paybtn-group > .but:last-of-type {
        border-radius: 0 100px 100px 0;
    }

    #shop .footer-tabbar .shop-paybtn-group > .but:first-of-type {
        border-radius: 100px 0 0 100px;
    }

    /* 页面底部为固定底栏留白（注意：WP 自动 body class 为 single-shop_product 下划线写法） */
    body.single-shop_product footer::after,
    body.shop-cart-page footer::after {
        content: '';
        display: block;
        height: calc(62px + constant(safe-area-inset-bottom));
        height: calc(62px + env(safe-area-inset-bottom));
    }

    /* --- 购物车 --- */
    #shop .cart-group.zib-widget {
        padding: 5px 12px;
    }

    #shop .cart-group.zib-widget.full-widget-sm {
        border-radius: 0;
        margin-left: -10px;
        margin-right: -10px;
    }

    .cart-col-spinner-price {
        display: none;
    }

    .cart-col-action {
        display: none;
    }

    .cart-col-product {
        flex-basis: 100%;
        margin-left: 10px;
        margin-right: 0;
        justify-content: space-between;
    }

    .cart-list-item {
        padding: 10px 0;
    }

    .cart-list-author {
        padding-top: 6px;
    }

    .cart-product .cart-list-item .cart-col-checkbox {
        padding: 30px 10px 30px 20px;
    }

    .cart-list-item .cart-col-checkbox {
        padding-right: 10px;
    }

    .cart-list-item .product-graphic {
        --t-size: 90px;
    }

    .cart-list-item .product-title {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        display: block;
    }

    .cart-col-product > * + * {
        margin-top: 4px;
        line-height: 1;
    }

    .cart-group .cart-col-price .original-price,
    .cart-group .cart-col-price .price-box {
        font-size: 12px;
    }

    .cart-col-spinner-price-sm {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .cart-col-spinner-price-sm .number-spinner {
        --this-size: 23.2px;
    }

    .cart-list-item .cart-col-main,
    .cart-list-item .cart-col-right {
        align-items: stretch;
    }

    #shop .cart-list-item .product-option-btn {
        padding: 2px 4px;
    }

    .cart-list-item .badg.badge-tag,
    .cart-list-item .badge-discount + .badge-discount {
        margin-left: 4px;
    }

    #shop .cart-list-item .badge-discount,
    #shop .cart-list-item .badg.badge-tag {
        font-size: 10px;
        padding: 2px 3px;
        line-height: 1;
        margin: 0;
    }

    #shop .cart-list-item .badge-discount {
        padding: 2px 5px;
    }

    /* 移动端底部结算栏 */
    #shop .cart-list-item.cart-footer {
        padding: 6px 12px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        padding-bottom: calc(6px + constant(safe-area-inset-bottom));
        padding-bottom: calc(6px + env(safe-area-inset-bottom));
        box-shadow: 0 -2px 10px var(--main-shadow);
        flex-wrap: wrap;
    }

    #shop .cart-list-item.cart-footer .cart-remove-btn,
    #shop .cart-list-item.cart-footer .settle-btn {
        padding: 8px;
        margin-left: 10px;
        min-width: 120px;
        border-radius: 100px;
    }

    #shop .cart-list-item.cart-footer .cart-remove-btn {
        padding: 7px;
    }

    .cart-list-item.cart-footer .cart-list-header {
        flex-basis: 100%;
    }

    .cart-list-item.cart-footer .cart-col-total-info {
        font-size: 14px;
    }

    /* --- 商品列表 --- */
    .product-lists-row {
        margin: -5px;
        margin-bottom: 15px;
    }

    .product-lists-row > * {
        margin: 5px;
    }

    .product-item.card {
        --body-padding: 10px;
        width: calc(50% - 10px);
    }

    .product-item.card .item-heading {
        font-size: 15px;
        margin-bottom: 4px;
    }

    .product-item.card .item-body > * {
        margin-top: 0;
    }

    #shop .product-item.card .badge-discount {
        font-size: 10px;
        padding: 2px 5px;
    }
}

/* ============================================================
 * 24. 下单确认弹窗 / 收货地址弹窗（S3）
 * ============================================================ */

/* --- 工具类补充（对齐蓝本 flex / 文本 / 间距工具类） --- */
:where(#shop, .shop-modal-wrap) .flex.ab {
    align-items: flex-end;
}

:where(#shop, .shop-modal-wrap) .flex.abl {
    align-items: baseline;
}

:where(#shop, .shop-modal-wrap) .flex.at {
    align-items: flex-start;
}

:where(#shop, .shop-modal-wrap) .flex .shrink0 {
    flex-shrink: 0;
}

:where(#shop, .shop-modal-wrap) .flex .flex0 {
    flex: none;
}

:where(#shop, .shop-modal-wrap) .flex .flex-auto {
    flex: auto;
}

:where(#shop, .shop-modal-wrap) .text-right {
    text-align: right;
}

:where(#shop, .shop-modal-wrap) .text-center {
    text-align: center;
}

:where(#shop, .shop-modal-wrap) .mr20 {
    margin-right: 20px;
}

:where(#shop, .shop-modal-wrap) .em3x {
    font-size: 3em;
}

:where(#shop, .shop-modal-wrap) .padding-10 {
    padding: 10px;
}

/* --- badg / but 扩展（蓝本 .badg.cir / .jb-yellow / p2-10 / but-sm 段） --- */
#shop .badg.cir,
.shop-modal-wrap .badg.cir {
    padding: 0;
    border-radius: 5em;
    --this-size: 1.8em;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: var(--this-size);
    min-width: var(--this-size);
}

#shop .badg.badg-sm.cir,
.shop-modal-wrap .badg.badg-sm.cir {
    --this-size: 1.6em;
}

/* 蓝本靠全局 img { max-width/max-height: 100% } 把图片锁进定高容器（如 .badg.cir 内商品缩略图），
   knn 无此全局规则，仅在商城作用域内补齐，避免原图撑爆弹窗布局 */
:where(#shop, .shop-modal-wrap) .badg img {
    max-width: 100%;
    max-height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

#shop .badg.jb-yellow,
.shop-modal-wrap .badg.jb-yellow {
    --this-bg: linear-gradient(135deg, #f59f54 10%, #ff6922 100%);
    background: var(--this-bg);
    color: #fff;
}

#shop .badg.c-blue,
.shop-modal-wrap .badg.c-blue {
    --this-bg: #007aff;
    color: #fff;
}

/* 浅底彩字按钮（蓝本 c-* 颜色体系 --this-bg 0.1 透明度） */
#shop .but.c-blue,
.shop-modal-wrap .but.c-blue {
    --this-bg: rgba(0, 122, 255, 0.1);
}

#shop .but.c-red,
.shop-modal-wrap .but.c-red {
    --this-bg: rgba(252, 69, 69, 0.1);
}

#shop .but.but-sm,
.shop-modal-wrap .but.but-sm {
    font-size: 0.9em;
    padding: 0.1em 0.4em;
    vertical-align: 0.05em;
}

#shop .badg.p2-10,
#shop .but.p2-10,
.shop-modal-wrap .badg.p2-10,
.shop-modal-wrap .but.p2-10 {
    padding: 2px 10px;
}

/* 地址项等选中态（蓝本 .muted-box.active） */
#shop .muted-box.active,
.shop-modal-wrap .muted-box.active {
    background: var(--focus-color-opacity1);
}

/* 地址标签胶囊：回归蓝本 .badg 默认灰系（knn badg 默认为主色底，仅在标签列表内还原） */
#shop .tag-list .badg,
.shop-modal-wrap .tag-list .badg {
    --this-bg: rgba(136, 136, 136, 0.1);
    --this-color: #888;
    background: var(--this-bg);
    color: var(--this-color);
}

/* 标签选中态（蓝本 .active.badg 通用规则） */
#shop .active.badg,
#shop .active > .badg:not(.vip-tag),
.shop-modal-wrap .active.badg,
.shop-modal-wrap .active > .badg:not(.vip-tag) {
    --this-bg: var(--focus-color);
    --this-color: #fff;
    background: var(--this-bg);
    color: var(--this-color);
}

/* --- 表单控件（主题级自包含：bootstrap 基础 + 蓝本主题覆盖合并） --- */
#shop .form-group,
.shop-modal-wrap .form-group {
    margin-bottom: 15px;
}

#shop .form-control,
.shop-modal-wrap .form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: var(--main-color);
    background: var(--body-bg-color);
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: none;
    transition: border-color ease-in-out 0.15s, background ease-in-out 0.15s, box-shadow ease-in-out 0.15s, opacity ease-in-out 0.3s;
}

#shop .form-control::placeholder,
.shop-modal-wrap .form-control::placeholder {
    color: #999;
    opacity: 1;
}

#shop .form-control:focus,
.shop-modal-wrap .form-control:focus {
    border-color: var(--focus-color);
    outline: 0;
    box-shadow: 0 0 2px 3px var(--focus-shadow-color);
}

#shop .form-control:hover,
.shop-modal-wrap .form-control:hover {
    border-color: var(--focus-color);
    opacity: 0.8;
}

#shop .form-control[disabled],
.shop-modal-wrap .form-control[disabled] {
    background: var(--body-bg-color);
    opacity: 0.5;
    cursor: not-allowed;
}

#shop .help-block,
.shop-modal-wrap .help-block {
    display: block;
    margin-top: 5px;
    color: var(--muted-3-color);
}

/* 输入组（对齐蓝本 bootstrap .input-group table 布局） */
#shop .input-group,
.shop-modal-wrap .input-group {
    position: relative;
    display: table;
    width: 100%;
    border-collapse: separate;
}

#shop .input-group .form-control,
.shop-modal-wrap .input-group .form-control {
    position: relative;
    z-index: 2;
    display: table-cell;
    width: 100%;
    margin-bottom: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

#shop .input-group-addon,
.shop-modal-wrap .input-group-addon {
    display: table-cell;
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    color: var(--muted-2-color);
    background: var(--main-border-color);
    border: 1px solid transparent;
    border-right: 0;
    border-radius: 4px 0 0 4px;
    box-shadow: none;
}

/* 下拉选择（蓝本 select.form-control + .form-select::before FA 箭头） */
#shop select.form-control,
.shop-modal-wrap select.form-control {
    cursor: pointer;
    padding-left: 2px;
    padding-right: 20px;
    -webkit-appearance: none;
    appearance: none;
}

#shop .form-select,
.shop-modal-wrap .form-select {
    position: relative;
}

#shop .form-select::before,
.shop-modal-wrap .form-select::before {
    position: absolute;
    top: 50%;
    right: 0.7em;
    transform: translateY(-50%);
    z-index: 1;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content: '\f107';
    opacity: 0.5;
    pointer-events: none;
}

/* 开关（蓝本 .form-switch 全段，input.hide 兄弟联动） */
#shop .form-switch,
.shop-modal-wrap .form-switch {
    border-radius: 100px;
    width: 46px;
    height: 26px;
    transition: 0.3s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background: rgba(189, 189, 189, 0.4);
}

#shop .form-switch::after,
.shop-modal-wrap .form-switch::after {
    content: '';
    width: 22px;
    height: 22px;
    border-radius: 100px;
    top: 2px;
    left: 2px;
    position: absolute;
    background: #fff;
    transition: 0.3s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

#shop .form-switch:active::after,
.shop-modal-wrap .form-switch:active::after {
    width: 30px;
}

#shop input:checked ~ .form-switch,
.shop-modal-wrap input:checked ~ .form-switch {
    background: rgb(79, 184, 69);
}

#shop input:checked ~ .form-switch::after,
.shop-modal-wrap input:checked ~ .form-switch::after {
    left: 22px;
}

#shop input:checked ~ .form-switch:active::after,
.shop-modal-wrap input:checked ~ .form-switch:active::after {
    width: 30px;
    left: 14px;
}

/* 自定义标签输入框（蓝本仅定义 focus/hover 态，本体外观由 .badg 承担） */
#shop .badg-form:focus,
.shop-modal-wrap .badg-form:focus {
    border-color: var(--focus-color);
    box-shadow: 0 0 2px 3px var(--focus-shadow-color);
    color: var(--muted-color);
    outline: 0;
}

#shop .badg-form:hover,
.shop-modal-wrap .badg-form:hover {
    border-color: var(--focus-color);
    opacity: 0.8;
}

/* --- 按钮组 but-average / 弹窗底部按钮组 modal-buts（蓝本对应段） --- */
#shop .but-average,
.shop-modal-wrap .but-average {
    display: flex;
    border-radius: 4px;
    overflow: hidden;
}

#shop .but-average > .but,
.shop-modal-wrap .but-average > .but {
    margin: 0 !important;
    border-radius: 0;
    flex: auto;
}

.shop-modal-wrap.modal .but-average > .but {
    flex: 1;
}

#shop .modal-buts .but,
.shop-modal-wrap .modal-buts .but {
    padding: 0.3em 1em;
}

#shop .modal-buts .but + .but,
.shop-modal-wrap .modal-buts .but + .but {
    margin-left: 0.5em;
}

#shop .modal-buts.but-average,
.shop-modal-wrap .modal-buts.but-average {
    border-top: 1px solid var(--main-border-color);
    margin-top: 10px;
}

#shop .modal-buts.but-average > .but,
.shop-modal-wrap .modal-buts.but-average > .but {
    background: transparent;
    padding: 0.8em;
    border-radius: 0;
}

#shop .modal-buts.but-average > .but + .but,
.shop-modal-wrap .modal-buts.but-average > .but + .but {
    border-left: 1px solid var(--main-border-color);
    margin-left: 0;
}

/* --- 确认订单弹窗（蓝本 shop main.css 确认订单段逐字对齐） --- */
.shop-modal-wrap .confirm-group .cart-list-item {
    align-items: stretch;
}

.shop-modal-wrap .confirm-group.zib-widget .cart-list-item ~ .confirm-product-item,
.shop-modal-wrap .confirm-group.zib-widget .cart-list-item + .cart-list-item {
    border-top: 1px solid var(--main-border-color);
}

.shop-modal-wrap .confirm-group .cart-list-item.confirm-list-item.zib-widget {
    padding: 15px;
}

.shop-modal-wrap .confirm-group .cart-list-item {
    padding: 15px 0;
}

.shop-confirm-modal .scroll-y {
    max-height: calc(90vh - 120px);
    max-height: calc(90dvh - 120px);
    /* 确认订单弹窗隐藏滚动条（仍可滚动） */
    scrollbar-width: none;
}

.shop-confirm-modal .scroll-y::-webkit-scrollbar {
    display: none;
}

/* 确认订单弹窗内 icon-header 是「图标+文字」行标签（发货/赠品/备注/必填），
   还原蓝本无样式状态；双类选择器提特异性，压过文件靠后的 34px 圆形图标列规则 */
.shop-modal-wrap.shop-confirm-modal .icon-header {
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    display: block;
    color: inherit;
    white-space: nowrap;
}

.shop-confirm-modal .modal-content {
    background: var(--body-bg-color);
}

.shop-confirm-modal .cart-list-author {
    padding-top: 0;
    padding-bottom: 10px;
    border-bottom: none;
}

.shop-confirm-modal .cart-list-item .product-graphic {
    --t-size: 80px;
}

.shop-confirm-modal .cart-list-item .product-graphic + .flex1 {
    min-height: 80px;
}

.shop-confirm-modal .product-title {
    font-size: 1em;
    font-weight: bold;
}

.shop-confirm-modal .cart-col-author .avatar-img {
    --this-size: 22px;
}

.shop-confirm-modal .cart-col-author {
    font-size: 1.05em;
}

.shop-confirm-modal .confirm-group.zib-widget {
    padding-bottom: 0;
}

.shop-confirm-modal .payment-methods .payment-icon img {
    height: 1.8em;
}

.shop-confirm-modal .payment-methods .payment-icon svg {
    font-size: 1.8em;
}

.shop-confirm-modal .payment-methods + .payment-methods {
    margin-top: 16px;
}

.shop-confirm-modal .order-submit-btn,
.shop-confirm-modal .initiate-pay {
    height: 40px;
}

.shop-modal-wrap .expanded .fa {
    transform: rotate(180deg);
}

/* --- S3 移动端补充 --- */
@media (max-width: 767px) {
    :where(#shop, .shop-modal-wrap) .mb10-sm {
        margin-bottom: 10px;
    }
}

/* ============================================================
 * 25. 用户中心 · 我的订单（S8）
 * 面板容器 .knn-user-orders 位于 .knn-uc 内（基础工具类由 user-center.css 提供，
 * 此处仅补面板缺失的工具类与订单组件样式）；详情弹窗沿用 .shop-modal-wrap 作用域
 * ============================================================ */

/* --- 面板补充变量（.knn-uc 未定义的） --- */
.knn-user-orders {
    --muted-4-color: #cccccc;
}

body.dark-mode .knn-user-orders,
body.dark-mode-auto .knn-user-orders {
    --muted-4-color: #4d4d4d;
}

/* --- 面板缺失工具类 --- */
:where(.knn-user-orders) .pointer {
    cursor: pointer;
}

:where(.knn-user-orders) .text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

:where(.knn-user-orders) .overflow-hidden {
    overflow: hidden;
    position: relative;
}

:where(.knn-user-orders) .text-right {
    text-align: right;
}

:where(.knn-user-orders) .list-inline {
    padding-left: 0;
    margin: 0;
    list-style: none;
}

:where(.knn-user-orders) .list-inline > li {
    display: inline-block;
}

:where(.knn-user-orders) .scroll-x {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

:where(.knn-user-orders) .mini-scrollbar {
    scrollbar-width: thin;
}

:where(.knn-user-orders) .mini-scrollbar::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

:where(.knn-user-orders) .mini-scrollbar::-webkit-scrollbar-thumb {
    background: var(--muted-4-color);
    border-radius: 4px;
}

:where(.knn-user-orders) .flex.ab {
    align-items: flex-end;
}

:where(.knn-user-orders) .fit-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:where(.knn-user-orders) .muted-box {
    background: var(--muted-border-color);
    border-radius: var(--main-radius);
}

:where(.knn-user-orders, .shop-modal-wrap) .inline-block {
    display: inline-block;
}

:where(.knn-user-orders, .shop-modal-wrap) .radius8 {
    border-radius: 8px;
}

:where(.knn-user-orders) .pay-mark {
    font-size: 0.6em;
    margin-right: 2px;
}

:where(.knn-user-orders) .pay-mark.px12 {
    font-size: 12px;
}

/* 状态文字上色（.knn-uc 的 .c-yellow 仅提供变量不输出颜色） */
:where(.knn-user-orders) .c-yellow {
    color: #ff9600;
}

:where(.knn-user-orders, .shop-modal-wrap) .c-blue-2 {
    --this-color: #5c7cff;
    --this-bg: rgba(77, 130, 249, 0.1);
}

:where(.knn-user-orders) .b-red {
    --this-bg: #fe3459;
    --this-color: #ffffff;
    background: #fe3459;
    color: #fff;
}

/* --- 懒加载骨架屏 --- */
.knn-user-orders .placeholder {
    background: var(--muted-border-color);
    border-radius: 4px;
    color: transparent !important;
    animation: shop-placeholder-breathe 1.2s ease-in-out infinite;
    pointer-events: none;
}

.knn-user-orders .placeholder.k1 {
    height: 20px;
}

.knn-user-orders .placeholder.s1 {
    width: 70px;
    height: 15px;
    display: inline-block;
}

/* --- 分栏导航 --- */
.knn-user-orders .order-tab-nav {
    padding: 12px 15px;
}

.knn-user-orders .order-tab-nav li + li {
    margin-left: 22px;
}

.knn-user-orders .order-tab-nav li a {
    color: inherit;
    position: relative;
    display: inline-block;
    padding: 2px 0 6px;
}

.knn-user-orders .order-tab-nav li.active a {
    color: var(--focus-color);
    font-weight: bold;
}

.knn-user-orders .order-tab-nav li.active a::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--focus-color);
}

/* --- 分栏面板显隐（AJAX 懒加载，仅激活分栏可见） --- */
.knn-user-orders .knn-order-tab-pane {
    display: none;
}

.knn-user-orders .knn-order-tab-pane.active {
    display: block;
}

/* --- 订单卡片（面板列表与详情弹窗商品行共用） --- */
:where(.knn-user-orders, .shop-modal-wrap) .order-item .order-thumb {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    background: var(--main-border-color);
    overflow: hidden;
    flex-shrink: 0;
}

:where(.knn-user-orders, .shop-modal-wrap) .order-item .order-thumb img,
:where(.knn-user-orders, .shop-modal-wrap) .order-item .order-thumb svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

:where(.knn-user-orders, .shop-modal-wrap) .order-item .order-title {
    font-size: 15px;
    line-height: 1.5;
}

:where(.knn-user-orders, .shop-modal-wrap) .order-item .order-title a {
    color: inherit;
}

:where(.knn-user-orders, .shop-modal-wrap) .order-item .unit-price {
    white-space: nowrap;
}

:where(.knn-user-orders, .shop-modal-wrap) .order-item-author {
    color: inherit;
}

.knn-user-orders .knn-order-pay-form {
    display: inline-block;
}

.knn-user-orders .knn-order-load-more-box {
    padding: 5px 0 15px;
}

/* --- 订单详情弹窗补充工具类 --- */
:where(.shop-modal-wrap) .inflex {
    display: inline-flex;
}

:where(.shop-modal-wrap) .font-normal {
    font-weight: normal;
}

:where(.shop-modal-wrap) .ml20 {
    margin-left: 20px;
}

:where(.shop-modal-wrap) .break-all {
    word-break: break-all;
}

:where(.shop-modal-wrap) .padding-h6 {
    padding-top: 6px;
    padding-bottom: 6px;
}

:where(.shop-modal-wrap) .max-vh7 {
    max-height: 70vh;
    max-height: 70dvh;
}

/* 复制链接前小圆点分隔 */
:where(.shop-modal-wrap) .icon-spot::before {
    content: '';
    width: 4px;
    height: 4px;
    margin: 0 0.5em;
    border-radius: 50%;
    display: inline-block;
    vertical-align: 0.2em;
    background: var(--main-color);
    opacity: 0.3;
}

/* 商家头像：knn_custom_avatar 过滤器会重建 class 为 avatar avatar-{size} photo，
   丢失传入的 avatar-mini/mr10；故直接锁定 img.avatar 尺寸（高于 .knn-uc .avatar 的 100% 规则） */
.shop-modal-wrap img.avatar,
.knn-user-orders img.avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 8px;
    flex-shrink: 0;
    vertical-align: middle;
}

/* 地址/物流行左侧圆形图标列 */
.shop-modal-wrap .icon-header {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--muted-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--muted-2-color);
}

/* 弹窗通栏底部（抵消 .modal-body 内边距全宽铺底） */
.shop-modal-wrap .modal-body .modal-full-footer {
    margin: 15px -24px -24px;
    background: var(--body-bg-color);
    padding: 12px 24px;
    padding-bottom: calc(12px + constant(safe-area-inset-bottom));
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

/* 时间线（自动发货进度） */
.shop-modal-wrap .timeline-box {
    position: relative;
}

.shop-modal-wrap .timeline-content {
    position: relative;
    padding: 6px 6px 6px 28px;
    top: -3px;
}

.shop-modal-wrap .timeline-content::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 13px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--muted-4-color);
    z-index: 1;
}

.shop-modal-wrap .timeline-content::after {
    position: absolute;
    content: '';
    left: 8px;
    top: 18px;
    height: 100%;
    width: 1px;
    bottom: 6px;
    background: var(--main-border-color);
}

.shop-modal-wrap .timeline-content:last-child::after {
    display: none;
}

.shop-modal-wrap .timeline-content:first-child {
    --this-color: var(--focus-color);
}

.shop-modal-wrap .timeline-content:first-child::before {
    left: 4px;
    top: 12px;
    width: 9px;
    height: 9px;
    background: var(--main-bg-color);
    border: 2px solid var(--focus-color);
}

.shop-modal-wrap .timeline-time {
    color: var(--this-color, var(--muted-color));
    margin-bottom: 3px;
}

/* 详情弹窗内层卡片去阴影、收窄内边距（弹窗自身已有容器背景） */
.order-details-modal .zib-widget {
    box-shadow: none;
    background: var(--muted-border-color);
    padding: 15px;
    margin-bottom: 0;
}

.order-details-modal .zib-widget + .zib-widget,
.order-details-modal .zib-widget.mb10 {
    margin-bottom: 10px;
}

.order-details-modal .zib-widget.mb10 + .zib-widget {
    margin-bottom: 0;
}

/* --- 用户中心侧栏订单入口 / 购物车按钮 --- */
.knn-uc .user-order-tab-btn-box .shop-user-order-tab-btn,
.knn-uc item.icon-but-cart {
    display: block;
    cursor: pointer;
    padding: 6px 4px;
    line-height: 1.4;
    box-sizing: border-box; /* 主题无全局 border-box，padding 会撑宽 25% 宽度导致按钮组提前换行 */
}

.knn-uc item.icon-but-cart a {
    color: inherit;
    display: block;
}

.knn-uc .shop-user-order-tab-btn badge.abs-tr {
    position: absolute;
    top: -4px;
    right: -10px;
}

/* --- 移动端适配 --- */
@media (max-width: 767px) {
    .knn-user-orders .order-tab-nav li + li {
        margin-left: 15px;
    }

    :where(.knn-user-orders) .order-item .order-thumb {
        width: 60px;
        height: 60px;
    }

    .shop-modal-wrap .modal-body .modal-full-footer {
        margin: 15px -15px calc(0px - constant(safe-area-inset-bottom));
        margin: 15px -15px calc(0px - env(safe-area-inset-bottom));
        padding: 12px 15px;
        padding-bottom: calc(12px + constant(safe-area-inset-bottom));
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }

    .knn-uc .mb10-sm {
        margin-bottom: 10px;
    }
}

/* ============================================================
 * 26. 支付成功弹窗 · 多彩头部（modal-colorful-header / colorful-bg）
 *    支付成功通知弹窗顶部绿色渐变横幅 + 右上关闭按钮
 * ============================================================ */
.shop-modal-wrap .jb-green {
    --this-color: #fff;
    --this-bg-b: #60e464;
    --this-bg: linear-gradient(135deg, #60e464 10%, #5cb85b 100%);
    color: var(--this-color);
    background: var(--this-bg);
    border: none;
}

.shop-modal-wrap .modal-colorful-header,
.shop-modal-wrap .colorful-bg {
    background-size: 120%;
    overflow: hidden;
    position: relative;
    color: var(--this-color);
    background: var(--this-bg);
}

.shop-modal-wrap .colorful-bg > .colorful-make,
.shop-modal-wrap .colorful-bg > .colorful-make::before,
.shop-modal-wrap .colorful-bg > .colorful-make::after {
    position: absolute;
    color: var(--this-color);
    background: var(--this-bg);
    border-radius: 100%;
    content: ' ';
}

.shop-modal-wrap .colorful-bg > .colorful-make {
    bottom: 0;
    height: 290px;
    width: 323px;
    top: 60%;
}

.shop-modal-wrap .colorful-bg > .colorful-make::before {
    right: -558px;
    bottom: 0;
    height: 300px;
    width: 677px;
    top: -325px;
    transform: rotate(341deg);
    opacity: 0.6;
}

.shop-modal-wrap .colorful-bg > .colorful-make::after {
    left: -262px;
    bottom: 0;
    height: 214px;
    width: 402px;
    top: -170px;
    transform: rotate(326deg);
    opacity: 0.4;
}

.shop-modal-wrap .colorful-bg > .colorful-make + * {
    position: relative;
}

/* 头部绝对定位覆盖弹窗顶部，后续内容以 margin-top 让位 */
.shop-modal-wrap .modal-colorful-header {
    border-radius: 16px 16px 0 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-modal-wrap .modal-body > .modal-colorful-header + * {
    margin-top: calc(120px - 24px);
}

.shop-modal-wrap .modal-colorful-header > .close {
    position: absolute;
    right: 10px;
    top: 10px;
    color: var(--this-color);
    opacity: 0.6;
    font-size: 18px;
    z-index: 9;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 1;
}

.shop-modal-wrap .modal-colorful-header > .close:hover {
    opacity: 1;
}

.shop-modal-wrap .modal-colorful-header > .close.hide {
    display: none;
}

/* 关闭图标与内嵌 svg 图标（弹窗内无 .knn-uc 作用域，需自带尺寸） */
.shop-modal-wrap .ic-close {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.shop-modal-wrap svg.icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.15em;
}

/* ============================================================
 * 27. 商品评价（S7：评分汇总/筛选/评价列表/评价弹窗/移动端入口）
 * ============================================================ */
/* --- 评分汇总区 --- */
.shop-comment-area {
    transition: opacity 0.2s;
}

.shop-comment-box .comment-header {
    padding-bottom: 6px;
    border-bottom: 1px solid var(--main-border-color);
}

.comment-score-detail .score-item + .score-item {
    margin-top: 8px;
}

.comment-score-progress {
    width: 160px;
    height: 6px;
    border-radius: 3px;
    background: var(--main-bg-color-opacity, rgba(128, 128, 128, 0.12));
    overflow: hidden;
    margin-right: 10px;
}

.comment-score-progress .vote-progress {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #ff9a9e 0%, #fc4545 100%);
}

/* --- 筛选条 --- */
.comment-filter .badg,
.comment-filter .but {
    white-space: nowrap;
}

.comment-filter .scroll-x {
    white-space: nowrap;
    padding: 2px 0 6px;
}

/* --- 评价列表 --- */
.shop-commentlist {
    margin: 0;
    padding: 0;
}

.shop-comment-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--main-border-color);
}

.shop-comment-item:last-child {
    border-bottom: none;
}

.shop-comment-item .avatar-img img,
.shop-featured-comment-box .avatar-img img {
    border-radius: 50%;
    display: block;
    object-fit: cover; /* 自定义上传头像可能非正方形，裁切防变形 */
}

.shop-comment-item .avatar-img img {
    width: 40px;
    height: 40px;
}

.shop-comment-item .comment-user-name {
    font-weight: 600;
}

.shop-comment-item .comment-footer {
    padding-left: 50px; /* 头像宽度 + 间距，内容与昵称对齐 */
}

.shop-comment-item .comment-null {
    font-style: italic;
}

/* --- 评价图片：单图限宽，多图方格 --- */
.comment-score-imgs span {
    display: inline-block;
    margin: 0 6px 6px 0;
    border-radius: 6px;
    overflow: hidden;
    vertical-align: top;
}

.comment-score-imgs img {
    display: block;
    cursor: zoom-in;
}

.comment-score-imgs.count-1 img {
    max-width: 300px;
    max-height: 300px;
}

.comment-score-imgs:not(.count-1) img {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

/* --- 商家回复 --- */
.comment-author-reply {
    border-radius: 8px;
    font-size: 0.9em;
    color: var(--muted-color);
}

/* --- 分页 --- */
.shop-comment-paginate .but {
    padding: 4px 14px;
}

/* --- 评价弹窗：评分行 + 图片选择 --- */
.order-comment-from .score-title {
    min-width: 4em;
}

.order-comment-from .comment-upload .preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.order-comment-from .comment-upload .add {
    width: 80px;
    height: 80px;
    border: 1px dashed var(--muted-4-color);
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    transition: 0.2s;
}

.order-comment-from .comment-upload .add:hover {
    border-color: var(--focus-color-opacity6);
}

/* 加号：两条交叉短线 */
.order-comment-from .comment-upload .add::before,
.order-comment-from .comment-upload .add::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--muted-3-color);
    transform: translate(-50%, -50%);
}

.order-comment-from .comment-upload .add::before {
    width: 24px;
    height: 2px;
}

.order-comment-from .comment-upload .add::after {
    width: 2px;
    height: 24px;
}

.order-comment-from .comment-upload .add.hide {
    display: none;
}

.order-comment-from .preview-item {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.order-comment-from .preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.order-comment-from .preview-item .del {
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 0 0 0 8px;
    cursor: pointer;
    font-style: normal;
}

/* --- 移动端宝贝评价入口条 --- */
.shop-featured-comment-box .avatar-img img {
    width: 24px;
    height: 24px;
}

/* --- 评价弹窗（移动端查看全部）：限高滚动 --- */
.shop-comment-modal .shop-comment-area {
    max-height: 65vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- 移动端适配 --- */
@media (max-width: 767px) {
    .comment-score.flex.jsb {
        display: block;
    }

    .comment-score-detail {
        margin-top: 12px;
    }

    .comment-score-progress {
        flex: 1;
        width: auto;
    }

    .comment-score-detail .score-item {
        width: 100%;
    }

    .comment-score-imgs:not(.count-1) img {
        width: 84px;
        height: 84px;
    }

    .shop-comment-item .comment-footer {
        padding-left: 0;
    }
}

/* ============================================================
* 28. 售后（S5：申请弹窗类型/原因单选、退款金额、退货快递输入、售后记录）
* ============================================================ */

/* 类型/原因单选组：radio 隐藏，选中时 but-radio 主色高亮 */
.shop-modal-wrap .after-sale-radio-box {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.shop-modal-wrap .after-sale-type-item input,
.shop-modal-wrap .after-sale-reason-item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.shop-modal-wrap .but.but-radio {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid var(--main-border-color);
    border-radius: 100px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: all 0.2s;
}

.shop-modal-wrap .after-sale-type-item input:checked + .but-radio,
.shop-modal-wrap .after-sale-reason-item input:checked + .but-radio {
    color: var(--focus-color);
    border-color: var(--focus-color);
    background: var(--focus-color-opacity1);
}

/* 售后弹窗内输入：金额/退货快递（无框透明右对齐，对齐确认订单弹窗风格）
   注：refresh_modal 传入的 class 挂在 .modal-dialog 上，需用后代选择器 */
.shop-modal-wrap .after-sale-modal input[type='text'],
.shop-modal-wrap .after-sale-modal input[type='number'] {
    border: none;
    background: transparent;
    outline: none;
    padding: 2px 0;
    color: inherit;
    min-width: 0;
}

.shop-modal-wrap .after-sale-modal .after-sale-form textarea.form-control {
    width: 100%;
    box-sizing: border-box;
}

/* 售后弹窗商品盒缩略图（无 .order-item 祖先，单独限定尺寸） */
.shop-modal-wrap .after-sale-modal .order-thumb {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background: var(--main-border-color);
    overflow: hidden;
    flex-shrink: 0;
}

.shop-modal-wrap .after-sale-modal .order-thumb img,
.shop-modal-wrap .after-sale-modal .order-thumb svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 售后记录条目 */
.shop-modal-wrap .after-sale-record-item {
    font-size: 0.9em;
}

/* ============================================================
* 29. 归档页（商城首页/商品分类/优惠活动/标签：头部筛选条+排序+分页）
* ============================================================ */

/* product-lists-row 为 flex 布局，头部/分页/空态需占满整行 */
#shop .product-lists-row > .shop-term-header,
#shop .product-lists-row > .shop-paginate,
#shop .product-lists-row > .shop-null-box {
    width: 100%;
}

#shop .shop-term-header {
    margin: 8px 8px -8px 8px;
}

#shop .shop-cat-filter {
    padding: 12px 15px;
}

#shop .shop-cat-filter-tab {
    margin-bottom: 10px;
}

#shop .shop-cat-filter-tab > * > * {
    font-size: 1.2em;
    padding: 6px 12px;
}

#shop .shop-cat-filter-child {
    padding: 0 5px;
}

#shop .shop-cat-filter-child a:not(.focus-color) {
    color: var(--muted-color);
}

#shop .shop-cat-filter-child a:not(.focus-color):hover {
    color: var(--focus-color);
}

#shop .shop-cat-filter-child > * {
    padding: 6px 12px;
    display: inline-block;
}

#shop .shop-cat-filter-child + .shop-cat-filter-child {
    border-top: 1px dashed var(--main-border-color);
    margin-top: 6px;
    padding-top: 8px;
}

#shop .shop-cat-filter-child .title-h-left h1 {
    padding: 0;
    margin: 0;
    font-size: 24px;
}

/* 归档分页：与卡片列拉开间距（数字分页样式由主题 pagination-container 提供） */
#shop .shop-paginate {
    margin-top: 12px;
}

/* ------------------------------------------------------------
 * 小卡样式（分类可配置 list_style_style = small）
 * ------------------------------------------------------------ */
#shop .product-item.card.style-small {
    display: inline-flex;
    --body-padding: 0;
    padding: 6px;
}

#shop .product-item.card.style-small .item-thumbnail {
    flex-shrink: 0;
    flex-basis: 98px;
    padding-bottom: 98px;
    margin-right: 10px;
    border-radius: var(--main-radius);
}

#shop .product-item.card.style-small .item-body {
    overflow: hidden;
    flex-direction: column;
    justify-content: space-between;
    display: flex;
    margin-bottom: -2px;
}

#shop .product-item.card.style-small .item-body > * {
    margin-top: 0;
}

#shop .product-item.style-small .img-badge {
    font-size: 11px;
}

#shop .product-item.card:not(.style-small) .img-badge {
    top: 14px;
}

/* 平板：小卡两列 */
@media (max-width: 991px) {
    #shop .product-lists-row .product-item.style-small {
        width: calc(50% - 16px);
    }
}

/* 移动端适配 */
@media (max-width: 767px) {
    #shop .shop-term-header {
        margin: 4px 4px -4px 4px;
    }

    #shop .shop-cat-filter {
        padding: 10px 12px;
    }

    #shop .shop-cat-filter-tab > * > * {
        font-size: 1.1em;
        padding: 5px 10px;
    }

    #shop .shop-cat-filter-child > * {
        padding: 5px 8px;
    }

    #shop .shop-cat-filter-child .title-h-left h1 {
        font-size: 20px;
    }

    /* 手机：小卡单列占满 */
    #shop .product-lists-row .product-item.style-small {
        width: calc(100% - 16px);
    }
}

/* ==========================================================================
   30. 商品收藏 + 推广分享
   ========================================================================== */

/* 收藏按钮激活态：星星点亮 */
#shop .btn-favorite.active .icon,
.shop-modal-wrap .btn-favorite.active .icon,
#shop .btn-favorite.active svg,
.footer-tabbar .btn-favorite.active svg {
    color: #ffb531;
    fill: #ffb531;
}

#shop .btn-favorite.active text {
    color: #ffb531;
    opacity: 1;
}

/* 分享弹窗：商品信息行 */
.shop-share-modal-body {
    min-width: 300px;
}

.shop-share-modal-body .share-product-thumb {
    width: 48px;
    height: 48px;
    border-radius: var(--main-radius, 8px);
    object-fit: cover;
    flex-shrink: 0;
}

.shop-share-modal-body .share-product-title {
    font-size: 14px;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 平台分享按钮：图标上、文字下竖排 */
.shop-share-modal-body .share-btns-box {
    padding: 10px 0;
}

.shop-share-modal-body .share-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 8px 6px;
    border-radius: var(--main-radius, 8px);
    color: var(--muted-color, #8a8a8a);
}

.shop-share-modal-body .share-btn:hover {
    background: var(--muted-border-color, rgba(0, 0, 0, 0.04));
}

.shop-share-modal-body .share-btn icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 22px;
    margin-bottom: 6px;
    color: #fff;
}

.shop-share-modal-body .share-btn icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.shop-share-modal-body .share-btn.qzone icon {
    background: #fec91b;
}

.shop-share-modal-body .share-btn.weibo icon {
    background: #e6162d;
}

.shop-share-modal-body .share-btn.copy icon {
    background: var(--focus-color, #ff7744);
}

.shop-share-modal-body .share-btn text {
    font-size: 12px;
    line-height: 1;
}

/* 二维码 */
.shop-share-modal-body .share-qrcode-img {
    width: 130px;
    height: 130px;
    border-radius: var(--main-radius, 8px);
    border: 1px solid var(--muted-border-color, rgba(0, 0, 0, 0.06));
    padding: 6px;
    background: #fff;
}

/* 推广返佣提示 */
.shop-share-modal-body .share-rebate-tips {
    display: block;
    white-space: normal;
    line-height: 1.6;
    padding: 6px 10px;
    text-align: left;
}

/* 购物车页收藏夹 tab */
#shop .tab-content > .tab-pane {
    display: none;
}

#shop .tab-content > .tab-pane.active {
    display: block;
}

#shop #shop_cart_favorite .shop-favorite-lists {
    min-height: 120px;
}

#shop .shop-favorite-more-btn {
    min-width: 140px;
}