.recommend p {
    font-size: 14px;
}

/* ===== 主题变量（默认浅色） ===== */
:root {
    --bg: #f8f9fa;
    --text: #212529;
    --muted: #6c757d;
    --card-bg: #ffffff;
    --card-border-color: #dee2e6;
    --primary-bg: #0d6efd;
    --primary-text: #ffffff;
    --secondary-outline-text: #6c757d;
    --secondary-outline-border: #6c757d;
    --success-outline-text: #198754;
    --success-outline-border: #198754;
}

/* 深色主题变量 */
[data-theme="dark"] {
    --bg: #17181a;
    --text: #e9ecef;
    --muted: #b0b3b8;
    /* 更深一些的卡片背景，提升暗色层次 */
    --card-bg: #15171a;
    /* 暗色下使用轻微亮描边，边界更柔和 */
    --card-border-color: rgba(255, 255, 255, 0.08);
    --primary-bg: #3a78f5;
    --primary-text: #ffffff;
    --secondary-outline-text: #e0e0e0;
    --secondary-outline-border: #8a8a8a;
    --success-outline-text: #86efac;
    --success-outline-border: #2a9d62;
}

/* 使用变量渲染基础组件 */
body { background: var(--bg); color: var(--text); }
.card { background-color: var(--card-bg); border-color: var(--card-border-color); }
.card .card-title, .card .inventory, .goods-introduction-cate { color: var(--text); }
/* 商品标题：允许自动换行，长英文/连续字符也能断行 */
.product-card .card-title { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.btn-primary { background-color: var(--primary-bg); border-color: var(--primary-bg); color: var(--primary-text); }
/* 确保“重新结算”等主按钮文本在明暗主题下均为白色 */
a.btn.btn-primary, .btn.btn-primary { color: #ffffff !important; }
html[data-bs-theme="dark"] a.btn.btn-primary, [data-theme="dark"] a.btn.btn-primary { color: #ffffff !important; }
.btn-outline-secondary { color: var(--secondary-outline-text); border-color: var(--secondary-outline-border); }
.btn-outline-success { color: var(--success-outline-text); border-color: var(--success-outline-border); }
.text-muted { color: var(--muted)!important; }

/* 页面容器背景：跟随主题切换（解决卡片下方背景不变化问题） */
.main-container {
  background-color: var(--bg) !important;
  transition: background-color .2s ease;
}
/* 让包裹容器保持透明，显示出 body 的主题背景 */
.main-container .container,
.main-container .good-card,
.main-container .order-card,
.page-wrapper,
.notice,
.category {
  background-color: transparent !important;
}

/* 公告栏与后续内容之间增加少量间距（移动端与桌面端均适用） */
.notice { margin-bottom: .75rem; }


/* 深色主题下：统一卡片与模态的描边与阴影美化 */
html[data-bs-theme="dark"] .card,
[data-theme="dark"] .card {
  /* 使用变量定义的更深背景与柔和亮描边 */
  background-color: var(--card-bg);
  border-color: var(--card-border-color);
  border-radius: .75rem;
  /* 轻环 + 下投影，增强层次但不过分抢眼 */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 10px 24px rgba(0, 0, 0, 0.45);
}

/* 浅色主题下：统一卡片圆角（与暗色一致） */
html[data-bs-theme="light"] .card,
[data-theme="light"] .card {
  border-radius: .75rem;
}
html[data-bs-theme="dark"] .card:hover,
[data-theme="dark"] .card:hover {
  /* 悬停时略微提亮边缘与加深阴影 */
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.10),
    0 14px 32px rgba(0, 0, 0, 0.55);
  transform: translateY(-1px);
}
html[data-bs-theme="dark"] .card-header,
[data-theme="dark"] .card-header {
  background-color: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.07);
}
html[data-bs-theme="dark"] .modal-content,
[data-theme="dark"] .modal-content {
  background-color: var(--card-bg);
  border-color: var(--card-border-color);
  border-radius: .75rem;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 18px 40px rgba(0, 0, 0, 0.55);
}
html[data-bs-theme="dark"] .dropdown-menu,
[data-theme="dark"] .dropdown-menu {
  background-color: #14161a;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 28px rgba(0,0,0,.55);
}
/* 暗色主题：下拉项文字更亮，悬停更清晰 */
html[data-bs-theme="dark"] .dropdown-menu .dropdown-item,
[data-theme="dark"] .dropdown-menu .dropdown-item {
  color: #e8e8e8 !important;
}
html[data-bs-theme="dark"] .dropdown-menu .dropdown-item:hover,
[data-theme="dark"] .dropdown-menu .dropdown-item:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.06);
}
html[data-bs-theme="dark"] .dropdown-menu .dropdown-item.active,
[data-theme="dark"] .dropdown-menu .dropdown-item.active,
html[data-bs-theme="dark"] .dropdown-menu .dropdown-item:active,
[data-theme="dark"] .dropdown-menu .dropdown-item:active {
  color: #ffffff !important;
  background-color: rgba(19, 227, 207, 0.12);
}

/* 导航按钮美化：渐变与胶囊形态 */
.btn-pill { border-radius: 999px; }
.btn-gradient {
  background-image: linear-gradient(135deg, #1e6fff, #0b4ae2);
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(14, 74, 225, .25);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.btn-gradient:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(14, 74, 225, .28); }
.btn-gradient:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(14, 74, 225, .2); }
.navbar .btn-gradient.btn-sm { padding: .375rem .75rem; line-height: 1; }

/* 深色主题下按钮对比度与阴影优化 */
html[data-bs-theme="dark"] .btn-gradient,
[data-theme="dark"] .btn-gradient {
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}

/* 深色主题下：统一输入框暗色样式（登录/注册等表单） */
html[data-bs-theme="dark"] .form-control,
[data-theme="dark"] .form-control {
    background-color: #1f1f1f;
    color: #e8e8e8;
    border-color: #343a40;
    /* 保证暗色主题下输入光标可见并闪烁（白色） */
    caret-color: #ffffff;
}
html[data-bs-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .form-control::placeholder {
    color: #b0b3b8;
}
html[data-bs-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-control:focus {
    background-color: #1b1b1b;
    color: #ffffff;
    border-color: #4c6ef5;
    box-shadow: none;
}

/* 亮色主题与默认：确保输入框光标颜色可见（黑灰色） */
.form-control,
html[data-bs-theme="light"] .form-control,
[data-theme="light"] .form-control {
  caret-color: #222222;
}

/* 亮色主题：统一输入框文字颜色为灰色，提升可读性 */
html[data-bs-theme="light"] .form-control,
[data-theme="light"] .form-control {
  color: #5b5b5b;              /* 常规文字 */
  -webkit-text-fill-color: #5b5b5b; /* 兼容 iOS/Safari */
}
html[data-bs-theme="light"] .form-control::placeholder,
[data-theme="light"] .form-control::placeholder {
  color: #9aa0a6;              /* 浅灰占位符 */
}
html[data-bs-theme="light"] .form-control:focus,
[data-theme="light"] .form-control:focus {
  color: #333333;              /* 聚焦时稍微加深 */
  -webkit-text-fill-color: #333333;
  box-shadow: none;            /* 避免主题阴影冲突 */
}

/* 亮色主题：搜索栏专用输入框文字与占位符颜色（首页搜索框） */
[data-bs-theme="light"] .goods-search input[type="text"] {
  color: #5f6368;
  -webkit-text-fill-color: #5f6368;
}
[data-bs-theme="light"] .goods-search input[type="text"]::placeholder {
  color: #9aa0a6;
}

/* 亮色主题：搜索框内部线条改为圆角并去除方形阴影 */
html[data-bs-theme="light"] .goods-search .search-bar {
  border-radius: 28px;         /* 与暗色主题保持一致的圆角外观 */
  overflow: hidden;            /* 裁剪内部高亮，避免出现直角线条 */
}
html[data-bs-theme="light"] .goods-search input.form-control,
html[data-bs-theme="light"] .goods-search input[type="text"] {
  border-radius: 24px !important; /* 输入框自身也使用圆角，避免直线收尾 */
  border: none !important;        /* 去边框，避免顶部/底部直线 */
  box-shadow: none !important;    /* 移除默认内阴影 */
  outline: none;                  
}
html[data-bs-theme="light"] .goods-search input[type="text"]:focus {
  box-shadow: none !important;    /* 聚焦时也不出现直线阴影 */
}

/* 亮色主题：去除外边框线条，仅在聚焦时轻微高亮 */
html[data-bs-theme="light"] .goods-search .search-bar {
  background-color: #ffffff;
  border: none !important;
}
html[data-bs-theme="light"] .goods-search .search-bar:focus-within {
  border: none !important;
  box-shadow: none !important; /* 输入时不出现任何阴影 */
  outline: none;               /* 移除默认轮廓 */
}

/* 深色背景下页眉纯黑，并统一导航文字与图标 */
[data-theme="dark"] .header { background-color: #000; }
[data-theme="dark"] .navbar { background: transparent; }
[data-theme="dark"] .navbar .navbar-brand,
[data-theme="dark"] .navbar .nav-link { color: #f8f9fa; }
[data-theme="dark"] .navbar .nav-link.active { color: #ffffff; }
[data-theme="dark"] .navbar .navbar-toggler { border: none; background: transparent; color: #fff; box-shadow: none; }
[data-theme="dark"] .navbar .navbar-toggler-icon { filter: none; }
[data-theme="dark"] .navbar-light .navbar-brand,
[data-theme="dark"] .navbar-light .nav-link { color: #f8f9fa; }

/* 小屏按钮和链接的展示优化 */
@media (max-width: 576px) {
    a.btn, button.btn { 
        display: inline-flex; 
        align-items: center; 
        gap: .35rem; 
        min-height: 36px; 
        font-size: 14px; 
        padding: 6px 10px; 
    }
    .toggle-color { display: inline-flex !important; }
}

/* 导航折叠按钮去边框与单线汉堡图标（Unicorn） */
.navbar .navbar-toggler {
  border: none;
  background: transparent;
  box-shadow: none;
  color: #000; /* 浅色主题下图标为黑色 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 12px;
  line-height: 0;
  transition: box-shadow .25s ease, transform .2s ease, background-color .25s ease;
  will-change: transform, box-shadow;
}
.navbar .navbar-toggler:focus { box-shadow: none; }
[data-theme="light"] .navbar .navbar-toggler:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px rgba(0,0,0,.08), 0 8px 18px rgba(0,0,0,.18);
}
[data-theme="dark"] .navbar .navbar-toggler, html[data-bs-theme="dark"] .navbar .navbar-toggler { color: #fff; }
.navbar .navbar-toggler:hover { transform: translateY(-1px); }
[data-theme="dark"] .navbar .navbar-toggler:hover, html[data-bs-theme="dark"] .navbar .navbar-toggler:hover {
  box-shadow: 0 0 0 2px rgba(255,255,255,.14), 0 8px 22px rgba(0,0,0,.65);
}
.navbar .navbar-toggler-icon {
  display: inline-block;
  width: 28px;
  height: 20px;
  vertical-align: middle;
  position: relative;
  background: none !important;
  transition: transform .2s ease, filter .25s ease;
  will-change: transform, filter;
}

.navbar .navbar-toggler-icon::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 28px;
  height: 3px;
  background-color: currentColor;
  border-radius: 999px;
  transform: translateY(-50%);
  box-shadow:
    0 -6px 0 0 currentColor,
    0  6px 0 0 currentColor;
  transition: box-shadow .25s ease, width .25s ease;
}

/* 折叠按钮悬停时图标上浮与线条扩散 */
.navbar .navbar-toggler:hover .navbar-toggler-icon { transform: translateY(-1px); }
.navbar .navbar-toggler:hover .navbar-toggler-icon::before {
  box-shadow:
    0 -7px 0 0 currentColor,
    0  7px 0 0 currentColor;
  width: 30px;
}

/* 切换按钮图标跟随主题显示 */
.toggle-color [data-mod] { display: none; }
[data-theme="light"] .toggle-color [data-mod="light"],
[data-bs-theme="light"] .toggle-color [data-mod="light"] { display: inline; color: #6c757d; }
[data-theme="dark"] .toggle-color [data-mod="dark"],
[data-bs-theme="dark"] .toggle-color [data-mod="dark"] { display: inline; }

/* 主题切换按钮外观优化 */
.toggle-color {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background-color: transparent; /* 去掉黑框背景 */
  border: none; /* 去掉边框 */
  color: #fff; /* 图标统一白色 */
  transition: box-shadow .12s ease, transform .12s ease, filter .12s ease, background-color .12s ease;
}
.toggle-color svg { width: 23px; height: 23px; }
[data-theme="dark"] .toggle-color,
[data-bs-theme="dark"] .toggle-color {
  background-color: transparent; /* 暗色也移除黑框背景 */
  color: #fff;
}
.toggle-color:hover { box-shadow: none; transform: translateY(-1px); }
.toggle-color:active { transform: translateY(0); box-shadow: none; }

.category {
    padding-top: 40px;
    padding-bottom: 20px;
}

/* 页眉高度与左缩进调整（Unicorn） */
.header {
  padding-top: .25rem;
  padding-bottom: .25rem;
}
.header .navbar {
  padding-top: .25rem;
  padding-bottom: .25rem;
}
.header .navbar .container-fluid {
  padding-left: 0;
  padding-right: .75rem;
}
.header .container {
  padding-left: 0;
  padding-right: .75rem;
}
.header .navbar-brand {
  margin-left: 0;
  padding-left: 0;
}
.header .navbar-nav .nav-link {
  padding-top: .35rem;
  padding-bottom: .35rem;
}

.separator {
    display: block;
    width: 60px;
    height: 5px;
    margin: 15px auto 15px;
    background-color: #cccccc;
    position: relative;
    border: 1px solid #cccccc;
}

.separator:after {
    width: 30px;
    height: 5px;
    background: #333333;
    position: absolute;
    top: -1px;
    left: -1px;
    content: "";
}

.category-menus li {
    display: inline-block;
    margin: 4px;
}
/* 分类按钮：圆角外观与 hover 动画 */
.category-menus .btn {
  border-radius: 9999px; /* 胶囊圆角 */
  transition: box-shadow .25s ease, transform .2s ease, border-color .25s ease, background-color .25s ease, color .25s ease;
  will-change: box-shadow, transform;
}
.category-menus .btn:hover {
  transform: translateY(-1px);
  /* 默认主题：轻微光环 + 下投影 */
  box-shadow: 0 0 0 2px rgba(108,117,125,.18), 0 8px 20px rgba(73,73,73,.35);
}
/* 深色主题：hover 时亮边更明显，阴影更深 */
[data-theme="dark"] .category-menus .btn:hover {
  border-color: rgba(0, 166, 255, 0.507);
  box-shadow: 0 0 0 2px rgba(0, 166, 255, 0.507), 0 8px 22px rgba(0, 166, 255, 0.507);
}

.goods-buy {
    line-height: 40px;
    font-size: 13px;
}


.goods-introduction-cate {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}



.buy-form label {
    font-size: 16px;
}

/* 购买页：紧凑表单间距与上缩 */
.buy-form.mt-3 { margin-top: 0 !important; }
.buy-form .form-group { margin-bottom: .1rem; }
.buy-form .col-form-label { margin-bottom: .1rem; }
@media (max-width: 576px) {
  .buy-form.mt-3 { margin-top: .08rem !important; }
  .buy-form .form-group { margin-bottom: .45rem; }
  .buy-form .col-form-label { margin-bottom: .1rem; }
}
/* 购买页：标题下库存与价格并排 */
.buy-header .buy-meta-row { display: flex; align-items: center; justify-content: flex-start; gap: .75rem; flex-wrap: wrap; }
.buy-header .buy-meta-row h6 { margin: 0; }
/* 购买页价格图标与数值的内联样式 */
.buy-header .price-inline { display: inline-flex; align-items: center; gap: .25rem; line-height: 1; }
.buy-header .price-inline .ali-icon { font-size: .85rem; }
/* 价格标签与图标的间距更自然 */
.buy-header .price-inline .price-label { margin-right: .25rem; }
@media (min-width: 768px) { .buy-header .price-inline .ali-icon { font-size: .95rem; } }

/* 页面标题居中并增加上下间距（登录/注册/查询订单等） */
.page-title-box { text-align: center; margin-top: 1.8rem; margin-bottom: .8rem; }
h4.page-title, .page-title-box .page-title { text-align: center; margin: 0 0 .8rem; }

/* 商品卡片统一尺寸与布局 */
.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    /* 圆角、描边与阴影 */
    border-radius: .75rem; /* 约 12px */
    border: 1px solid var(--card-border-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    overflow: hidden;
    /* hover 动画过渡 */
    transition: box-shadow .25s ease, transform .2s ease, border-color .25s ease;
    will-change: box-shadow, transform;
}
.product-card .card-img-top {
    display: block;
    width: 100%;
    height: auto;
    /* 统一显示比例，封面更大并上对齐显示 */
    aspect-ratio: 1 / 1;
    object-fit: contain;
    object-position: top center;
    /* 内框：浅色/深色下均使用卡片描边颜色，顶部间隙更小 */
    background-color: rgba(0,0,0,0.04);
    border: 1px solid var(--card-border-color);
    padding: .35rem .45rem .45rem; /* 上边距更小 */
    /* 四角圆角，与卡片保持一致 */
    border-radius: .75rem;
}
.product-card .card-body {
    display: flex;
    flex-direction: column;
    min-height: 0; /* 去掉桌面端底部多余空间 */
    padding-left: .45rem;
    padding-right: .45rem;
    padding-bottom: 8px; /* 与移动端一致贴底 */
}
/* 商品卡片左上角状态徽章：置于图片之上 */
.product-card .badge.position-absolute {
  z-index: 5;
}
.product-card .card-title {
    font-size: .8rem;                     /* 桌面端标题稍微缩小 */
    line-height: 1.25;
    /* 固定显示两行，超出省略 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
    /* 即使内容不足两行也占位两行高度，保证对齐 */
    min-height: calc(1.25em * 2);
    max-height: calc(1.25em * 2);
}
/* 覆盖全局 fr 浮动，保证下单按钮在底部右侧 */
.product-card .card-body > .fr {
    float: none;
    align-self: flex-end;
    margin-top: auto;
}
@media (max-width: 576px) {
    /* 移动端：上对齐，内外框更小，封面更大（方形比例） */
    .product-card .card-img-top {
        aspect-ratio: 1 / 1;
        object-fit: contain;
        object-position: top center;
        border-radius: .6rem;
        /* 继续上移，顶部几乎贴边 */
        padding-top: 0 !important;
        padding-right: .36rem;
        padding-bottom: .36rem;
        padding-left: .36rem;
        /* 进一步向上挪动，消除残余顶部间隙 */
        margin-top: -12px;
    }
    /* 移动端阴影与圆角略微收敛，视觉更柔和 */
    /* 移动端：价格胶囊外框效果（与截图一致） */
    .product-card .btn-price {
        padding: .12rem .46rem !important; /* 明确覆盖 .btn-sm 默认内边距 */
        font-size: .76rem;                 /* 字号降低以匹配库存文字高度 */
        border-radius: 999px;               /* 胶囊圆角 */
        border-width: 2px;                  /* 外框清晰 */
        background: transparent;            /* 保持描边样式 */
        line-height: 1;                     /* 按行高计算整体高度 */
    }
    /* 不在 .product-card 包裹内的场景也生效（home 列表） */
    .btn-price,
    .btn-price.btn-sm {
        padding: 0 .34rem !important;      /* 取消上下内边距，进一步减小高度 */
        font-size: .66rem !important;      /* 再小一档，贴近库存文本高度 */
        gap: .18rem !important;            /* 收紧图标与数字的横向间距 */
        height: 1.1rem !important;         /* 固定更矮的外框高度 */
        min-height: unset !important;      /* 清除可能的框架默认最小高度 */
        box-sizing: border-box;            /* 高度包含边框 */
        vertical-align: middle;            /* 与邻近文本的行框居中对齐 */
        border-radius: 999px !important;
        border-width: 1px !important;      /* 边框更细，视觉更轻 */
        background: transparent !important;
        line-height: 1 !important;         /* 与库存行高度更接近 */
    }
    .product-card .btn-price strong,
    .btn-price strong { font-weight: 600; }
    .product-card .btn-price .ali-icon,
    .btn-price .ali-icon {
        font-size: .66rem !important;     /* 图标与文字同级，避免增高 */
        line-height: 1;
        margin-right: .18rem;              /* 略收紧图标与数字的间距 */
    }

  /* 移动端：压缩价格按钮和下单按钮的上下间距 */
  .product-card .btn-price {
        margin-bottom: .15rem;
  }
  .product-card .btn-primary {
        margin-top: .12rem;
        margin-bottom: .12rem;
  }
    .product-card {
        border-radius: .6rem;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    }
}

/* 价格按钮更小图标与对齐 */
.btn-price {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    line-height: 1;
    /* 收紧按钮宽度：减少水平内边距并略降字号 */
    padding: .2rem .22rem;
    font-size: .8rem;
    white-space: nowrap;
}
.btn-price .ali-icon {
    display: inline-block;
    width: 1em;
    font-size: .85em;
    vertical-align: middle;
}
@media (min-width: 768px) {
  .btn-price .ali-icon { font-size: .95rem; }
}

/* 库存与价格同排，垂直居中对齐 */
.price-stock-row {
    display: flex;
    align-items: baseline; /* 与库存文本基线对齐，视觉更整齐 */
    justify-content: flex-start;
    gap: .5rem;
    flex-wrap: wrap; /* 移动端允许换行 */
}
.price-stock-row .inventory {
    color: #6c757d;
    font-size: .875rem;
    margin: 0;
}
/* 在同一行展示价格与下单按钮 */
.price-stock-row .fr { margin-top: 0; align-self: center; float: none; flex: 0 0 auto; white-space: nowrap; margin-left: auto; }

/* 桌面端：价格在上行，按钮居中置于下方 */
@media (min-width: 768px) {
  .price-stock-row { flex-wrap: wrap; align-items: baseline; gap: .6rem; }
  .price-stock-row .inventory { flex: 0 0 auto; white-space: nowrap; }
  /* 价格与折扣并排不换行，按钮另起一行 */
  .price-stock-row > .d-flex { flex: 0 0 auto; flex-wrap: nowrap; white-space: nowrap; }
  /* 下单按钮独占下一行并居中 */
  .price-stock-row .fr {
    flex: 0 0 100%;
    order: 3;
    margin-left: 0;
    display: inline-flex;
    justify-content: center;
    margin-top: .05rem; /* 桌面端按钮上方间隙更小 */
  }
  /* 桌面端下单按钮宽度更长一些 */
  .product-card .btn.btn-primary.fr {
    width: 72%;
    padding: .42rem .88rem;
    font-size: .88rem;
    border-radius: 9999px !important; /* 桌面端更圆的角 */
  }
}

/* 移动端：按钮布局与桌面一致，置于卡片底部并加宽 */
@media (max-width: 576px) {
  .price-stock-row { flex-wrap: wrap; align-items: baseline; gap: .6rem; }
  .price-stock-row .inventory { flex: 0 0 auto; white-space: nowrap; }
  .price-stock-row > .d-flex { flex: 0 0 auto; flex-wrap: nowrap; white-space: nowrap; }
  .price-stock-row .fr {
    flex: 0 0 100%;
    order: 3;
    margin-left: 0;
    display: inline-flex;
    justify-content: center;
    margin-top: .10rem;    /* 上方空隙更紧凑 */
    margin-bottom: 0 !important; /* 下方进一步收紧到最小 */
  }
  .product-card .btn.btn-primary.fr {
    width: 92%;
    padding: .26rem .9rem;  /* 进一步降低高度，字号不变 */
    font-size: .9rem;       /* 保持原字体大小 */
    border-radius: 9999px !important;   /* 移动端更圆的角 */
    margin-bottom: 0 !important;  /* 按钮本身下方贴底 */
  }
}

/* 首页商品卡之间的栅格间距（更紧凑） */
.goods-list .row {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: .75rem;
}
/* 移除列上不必要的上下内边距，避免额外空隙 */
.goods-list .col.category {
  padding-top: 0;
  padding-bottom: 0;
}
@media (max-width: 576px) {
  .goods-list .row { --bs-gutter-x: .75rem; --bs-gutter-y: .24rem !important; }
}

  /* 移动端商品卡不至于过宽：居中并限制最大宽度 */
  @media (max-width: 576px) {
  /* 移动端左对齐，避免最后一项居中 */
  .goods-list .row { justify-content: flex-start; }
  /* 改为两列布局：让每个列占据 50% 宽度 */
  .goods-list .row > .col { flex: 0 0 50%; max-width: 50%; }
}

/* 移动端最小左边距，避免元素贴边 */
@media (max-width: 576px) {
  .header .container,
  .header .navbar .container-fluid { padding-left: .5rem; padding-right: .75rem; }
}

/* 深色主题下的描边与边缘阴影（更清晰的层次） */
[data-theme="dark"] .product-card {
  /* 轻微亮色描边，提升边界识别度 */
  border-color: rgba(255, 255, 255, .10);
  /* 外环+下投影的组合阴影，边缘更有层次 */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.073),
    0 8px 20px rgba(73, 73, 73, 0.65);
}
[data-theme="dark"] .product-card:hover {
  border-color: rgba(255, 255, 255, .16);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, .14),
    0 14px 36px rgba(0, 145, 255, 0.429);
  transform: translateY(-2px);
}

/* 默认主题：hover 时稍微抬升并增强阴影层次 */
.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}

/* 浅色主题：账单页“立即支付”按钮渐变胶囊配色，与暗色一致 */
html[data-theme="light"] .pay-now .btn.btn-dark,
html[data-bs-theme="light"] .pay-now .btn.btn-dark {
  border-radius: 9999px;
  padding: 0.7rem 1.6rem;
  font-weight: 600;
  color: #fff;
  border: 0;
  background-image: linear-gradient(135deg, #17ead9 0%, #2468ff 100%);
  box-shadow:
    0 0 0 3px rgba(32, 232, 210, 0.35), /* 外圈亮色描边 */
    0 10px 24px rgba(0, 0, 0, 0.28),     /* 浅色主题下阴影稍浅 */
    0 0 22px rgba(32, 232, 210, 0.18);   /* 轻微外发光 */
  transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
}
html[data-theme="light"] .pay-now .btn.btn-dark .ali-icon,
html[data-bs-theme="light"] .pay-now .btn.btn-dark .ali-icon {
  font-size: 1.05rem;
  margin-right: .4rem;
}
html[data-theme="light"] .pay-now .btn.btn-dark:hover,
html[data-bs-theme="light"] .pay-now .btn.btn-dark:hover {
  transform: translateY(-1px);
  background-image: linear-gradient(135deg, #1cebdc 0%, #2a72ff 100%);
  box-shadow:
    0 0 0 4px rgba(45, 242, 220, 0.45),
    0 14px 28px rgba(0, 0, 0, 0.35),
    0 0 28px rgba(45, 242, 220, 0.28);
}
/* 暗色主题：账单页“立即支付”按钮渐变胶囊配色（仅作用于确认页容器） */
html[data-theme="dark"] .pay-now .btn.btn-dark,
html[data-bs-theme="dark"] .pay-now .btn.btn-dark {
  border-radius: 9999px;
  padding: 0.7rem 1.6rem;
  font-weight: 600;
  color: #fff;
  border: 0;
  background-image: linear-gradient(135deg, #17ead9 0%, #2468ff 100%);
  box-shadow:
    0 0 0 3px rgba(32, 232, 210, 0.35), /* 外圈亮色描边 */
    0 10px 24px rgba(0, 0, 0, 0.55),     /* 下投影 */
    0 0 22px rgba(32, 232, 210, 0.18);   /* 轻微外发光 */
  transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
}
html[data-theme="dark"] .pay-now .btn.btn-dark .ali-icon,
html[data-bs-theme="dark"] .pay-now .btn.btn-dark .ali-icon {
  font-size: 1.05rem;
  margin-right: .4rem;
}
html[data-theme="dark"] .pay-now .btn.btn-dark:hover,
html[data-bs-theme="dark"] .pay-now .btn.btn-dark:hover {
  transform: translateY(-1px);
  background-image: linear-gradient(135deg, #1cebdc 0%, #2a72ff 100%);
  box-shadow:
    0 0 0 4px rgba(45, 242, 220, 0.45),
    0 14px 28px rgba(0, 0, 0, 0.60),
    0 0 28px rgba(45, 242, 220, 0.28);
}

/* 暗色主题：卡片边缘光晕更亮（不影响浅色） */
html[data-theme="dark"] .card,
html[data-bs-theme="dark"] .card {
  border-color: rgba(255,255,255,0.16);
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,0.16), /* 更亮的细描边 */
    0 8px 22px rgba(0,0,0,0.55),        /* 下投影层次 */
    0 0 26px rgba(30, 220, 255, 0.10);  /* 轻微外发光提升边缘亮度 */
}
html[data-theme="dark"] .card:hover,
html[data-bs-theme="dark"] .card:hover {
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.20),
    0 10px 28px rgba(0,0,0,0.60),
    0 0 32px rgba(30, 220, 255, 0.14);
}

/* 移动端商品卡片整体再小一点（宽度、内边距、字体、按钮） */
@media (max-width: 576px) {
  /* 卡片栅格列更窄，整体视觉更小巧 */
  .goods-list .row > .col { width: 82% !important; max-width: 340px; }
  /* 图片保持原图比例，不裁剪不过度拉伸 */
  .product-card .card-img-top { height: auto; width: 100%; max-height: 240px; object-fit: contain; border-top-left-radius: .6rem; border-top-right-radius: .6rem; }
  /* 内容区收紧内边距与最小高度 */
.product-card .card-body { padding: .5rem .36rem 5px !important; min-height: 0; }
  /* 标题与库存字体更小，但仍固定三行并省略 */
  .product-card .card-title {
    font-size: .7rem;        /* 移动端再小一点 */
    line-height: 1.25;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;    /* 移动端限制两行 */
    line-clamp: 2;
    white-space: normal;
    min-height: calc(1.25em * 2);
    max-height: calc(1.25em * 2);
  }
  .price-stock-row { gap: .3rem; align-items: baseline; }
  .price-stock-row .inventory { font-size: .78rem; }
  /* 价格与下单按钮整体更小一档 */
  .product-card .btn { padding: .28rem .48rem; font-size: .78rem; }
  .product-card .btn.btn-primary.fr { padding: .3rem .56rem; font-size: .8rem; border-radius: 9999px !important; }
}
/* Dark theme: ensure badge text readable on dark backgrounds */
html[data-bs-theme="dark"] .badge,
html[data-bs-theme="dark"] .badge.bg-success,
html[data-bs-theme="dark"] .badge.bg-warning,
html[data-bs-theme="dark"] .badge.bg-info,
html[data-bs-theme="dark"] .badge.bg-primary,
html[data-bs-theme="dark"] .badge.bg-secondary {
  color: #ffffff !important;
}
html[data-bs-theme="light"] .badge.bg-success,
html[data-bs-theme="light"] .badge.bg-primary,
html[data-bs-theme="light"] .badge.bg-danger {
  color: #ffffff !important;
}
/* ------------------------------
   商品卡片图片统一高度与裁剪
   说明：不同尺寸比例的商品图导致卡片高度不一致，
   这里改为方形容器 + object-fit: contain，使图片整体更小、显示更广，
   同时保持栅格对齐与一致的可视区域。
--------------------------------- */
.product-card .card-img-top {
  width: 100%;
  height: auto;             /* 跟随宽度，方形容器控制可视区域 */
  aspect-ratio: 1 / 1;      /* 保持方形，展示更广内容 */
  object-fit: contain;      /* 显示更完整的图片，避免过度裁剪 */
  object-position: center;  /* 居中显示主体 */
  padding: .28rem;          /* 轻微内边距，视觉“缩小一点” */
  background-color: rgba(0,0,0,0.03);
  display: block;
}
/* 小屏（手机）适配：略减内边距，提升可视面积 */
@media (max-width: 575.98px) {
  .product-card .card-img-top { padding: .22rem; }
}
/* 大屏（桌面）适配：略增内边距，维持“更广”与舒适留白 */
@media (min-width: 992px) {
  .product-card .card-img-top { padding: .32rem; }
}
/* 桌面端（Web）：增大搜索框字体并增加左侧内边距，避免贴边 */
@media (min-width: 768px) {
  .goods-search input[type="text"] {
    font-size: 16px;
    padding-left: 1.25rem !important; /* 覆盖页面样式的 .75rem */
  }
}
/* 暗色主题：增强首页搜索框容器的边缘可见性 */
html[data-bs-theme="dark"] .goods-search .search-bar {
  background-color: #1e1f22;           /* 比输入框略浅，形成层次 */
  border: 1px solid rgba(255,255,255,.28) !important; /* 边缘更亮，提高可见度 */
  border-radius: 28px;                  /* 保持圆角外观 */
  padding: 0 10px;                      /* 高度与白色主题一致 */
  box-shadow: 0 0 0 2px rgba(255,255,255,.08) !important; /* 外沿柔和光晕 */
  overflow: hidden;                     /* 避免高亮外圈被裁剪产生缺口 */
}
html[data-bs-theme="dark"] .goods-search .search-bar:focus-within {
  border-color: #8ab4f8 !important;     /* 聚焦时更亮 */
  box-shadow: 0 0 0 2px rgba(138,180,248,.25) !important; /* 聚焦外沿更明显 */
  outline: none;                        /* 防止浏览器默认 outline 造成断裂 */
}

/* 暗色主题：搜索输入框去边框/阴影，保证高亮连续无断裂 */
html[data-bs-theme="dark"] .goods-search input[type="text"] {
  border: none !important;
  box-shadow: none !important;
  outline: none;
}
html[data-bs-theme="dark"] .goods-search input[type="text"]:focus {
  box-shadow: none !important;
}
/* 亮/暗色主题：让内部线条与外部阴影左右贴合，无空隙 */
html[data-bs-theme="light"] .goods-search .search-bar,
html[data-bs-theme="dark"] .goods-search .search-bar {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html[data-bs-theme="light"] .goods-search input.form-control,
html[data-bs-theme="light"] .goods-search input[type="text"],
html[data-bs-theme="dark"] .goods-search input.form-control,
html[data-bs-theme="dark"] .goods-search input[type="text"] {
  border-radius: 28px !important; /* 与容器一致的圆角，线条到边缘 */
}
/* 缩短价格按钮长度以避免换行（统一覆盖） */
.btn-price {
  gap: .14rem !important;
  padding: .16rem .22rem !important;
}
.btn-price .ali-icon {
  width: .9em !important;
  font-size: .8em !important;
  margin-right: .12rem !important;
}
@media (max-width: 576px) {
  .product-card .btn-price { padding: .10rem .32rem !important; font-size: .72rem !important; }
  .btn-price, .btn-price.btn-sm { padding: 0 .24rem !important; gap: .12rem !important; }
  .product-card .btn-price .ali-icon, .btn-price .ali-icon { font-size: .64rem !important; margin-right: .12rem !important; }
}
/* ------------------------------
   桌面端（Web）下单页：整体字体略增 + 下单按钮更宽
   仅作用于 unicorn 主题买页的卡片区（.good-card 内）
--------------------------------- */
/* 移动端：同步减小标题区域与上方图片的垂直间距 + 与上图左右对齐 */
@media (max-width: 767.98px) {
  .good-card .card-body.p-4 {
    padding-top: .25rem !important;
    padding-left: .25rem !important;  /* 与上方图片列 .px-1 左右一致 */
    padding-right: .25rem !important; /* 与上方图片列 .px-1 左右一致 */
  }
  /* 移动端：标题字号略小，且增大与库存/价格的间距 */
  .good-card .buy-header .card-title { font-size: 0.95rem; margin-bottom: .55rem !important; }
  /* 移动端：下单按钮更宽并居中，覆盖 #submit.fit-content */
  /* 移动端：压缩下单按钮高度（降低垂直内边距） */
  .good-card #submit.btn,
  .good-card #submit.btn.btn-primary,
  .good-card #submit.btn.btn-outline-primary {
    padding-top: .38rem !important;
    padding-bottom: .38rem !important;
    min-height: 2.35rem !important;
  }
  /* 移动端：减少按钮下方卡片底部留白 */
  .good-card .card-body.p-4 { padding-bottom: 0.05rem !important; }
  .good-card .btn.btn-primary,
  .good-card .btn.btn-outline-primary,
  .good-card #submit.btn,
  .good-card #submit.btn.btn-primary,
  .good-card #submit.btn.btn-outline-primary {
    width: 92%;
    max-width: none;
    display: inline-flex;
    justify-content: center;
    margin: .6rem auto 0;
    padding: .56rem 1.25rem;
    font-size: 1rem;
    border-radius: 9999px !important;
  }
}
/* 购买页：库存/价格与邮箱之间的间距更紧凑（无论是否有促销/限购提示） */
.good-card .buy-header ~ .buy-form { margin-top: .12rem !important; }
@media (max-width: 767.98px) { .good-card .buy-header ~ .buy-form { margin-top: .10rem !important; } }
@media (min-width: 768px) {
  /* 买页：进一步减少标题区域与上方图片的垂直间距 */
  .good-card .card-body.p-4 { padding-top: .35rem !important; }
  /* 标题与价格/库存信息字体提升 */
  .good-card .buy-header .card-title { font-size: 1.35rem; margin-bottom: .70rem !important; }
  .good-card .buy-header .buy-meta-row { font-size: .98rem; }

  /* 覆盖图片底部外边距（替代 .mb-3），显著收紧间距 */
  .good-card img.product-image { margin-bottom: .2rem !important; }

  /* 表单区整体字号提升，输入框文本更易读 */
  .good-card .buy-form { font-size: 1.02rem; }
  .good-card .buy-form label,
  .good-card .buy-form .buy-title { font-size: 1rem; }
  .good-card .buy-form .form-control { font-size: 1.02rem; }

  /* 支付方式卡片字体与图标进一步增大，提升可读性 */
  .good-card .pay-grid { font-size: 1.08rem; }
  /* 提高支付方式按钮高度：增大垂直内边距与最小高度 */
  .good-card .pay-grid .pay-type { padding: .80rem 1rem; min-height: 2.4rem; font-size: 1.06rem; }
  .good-card .pay-grid .ali-icon { font-size: 1.08rem; }

  /* 下单按钮再加宽并居中（适配 outline 风格 + #submit） */
  .good-card .btn.btn-primary,
  .good-card .btn.btn-outline-primary,
  .good-card #submit.btn,
  .good-card #submit.btn.btn-primary,
  .good-card #submit.btn.btn-outline-primary {
    width: 55%;
    max-width: 550px;
    display: inline-flex;
    justify-content: center;
    margin: .6rem auto 0;
    padding: .50rem 1.35rem;
    font-size: 1.06rem;
    border-radius: 9999px !important;
  }
}
/* ---------------------------------
   Dark theme: reduce brightness for
   product images (home & buy pages)
--------------------------------- */
html[data-bs-theme="dark"] .product-card .card-img-top { filter: brightness(0.85) !important; }
html[data-bs-theme="dark"] .good-card img.product-image { filter: brightness(0.85) !important; }
html[data-bs-theme="dark"] .buy-product img { filter: brightness(0.85) !important; }