/* 商品选购页（/cart）—— 左侧分类 + 右侧产品卡网格 */

/* 参考站的 --primary 实测为 #165dff，这里补同名变量，
   下面的链接与箭头都走 var(--primary)，和参考站一一对应。 */
:root { --primary: #165dff; }

/* 页面走浏览器自己的文档流滚动（滚动条在最右侧），
   不锁 100vh —— 锁了会把滚动关进 .shop-main，滚动条跑到容器内部。
   顶部 padding 让开 fixed header（63px + 20px 间距）。 */
.shop-page {
  --shop-top: 83px;
  /* 底部不留 padding：让左侧白条能一直铺到文档最底下，底部留白交给 .shop-main */
  padding: var(--shop-top) 0 0;
  background: #f5f7fb;
  min-height: 100vh;
  box-sizing: border-box;
  /* 竖向弹性布局：内容不满一屏时，让 .shop-layout 正好撑满剩余高度，
     白条贴到窗口底部，同时不会多出一截可以空滑的空白 */
  display: flex;
  flex-direction: column;
}
/* 真正贴边：不设 max-width 居中。
   侧栏直接顶到视口左侧，只留一条极窄的安全边距。 */
.shop-wrap {
  width: 100%;
  margin: 0;
  /* 承接 .shop-page 的剩余高度，让 .shop-layout 能撑满 */
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  /* 参考站 .shopping-cart-product 是 padding:20px 60px 0 0，
     右侧留 60px，产品卡和底部提示框都不贴右边缘。
     左侧仍是 16px，让侧栏贴近视口左边。 */
  padding: 0 60px 0 16px;
}
/* 顶部区域条占的高度要从 layout 里扣掉，这样 layout 底边 = 屏幕底 */
/* 顶部区域条：照参考站 .nav-top-page-title
   display:flex; gap:10px（子项：返回 / h1.page-title / 描述 p）
   -- 返回：14px 400 #84868c，图标与文字 gap 6px
   -- 分组名：16px 700 #181818
   -- 描述：14px 400 #495057                                            */
.shop-region {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  flex: 0 0 auto;
  font-size: 14px;
  color: #495057;
}
.shop-region__back {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 400; color: #84868c;
  text-decoration: none;
  flex: 0 0 auto;
}
.shop-region__back svg { color: #84868c; }
.shop-region__back:hover,
.shop-region__back:hover svg { color: #0052d9; }
.shop-region__name {
  margin: 0;
  font-size: 16px; font-weight: 700; color: #181818;
  line-height: 1.5;
}
.shop-region__desc {
  margin: 0;
  font-size: 14px; font-weight: 400; color: #495057;
  line-height: 1.5;
}

/* 顶部的「清单」入口只在手机端出现（手机端没有桌面导航的购物车入口） */
.shop-region__cart { display: none; }

/* 两栏骨架 */
.shop-layout {
  display: flex; align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  flex: 1 1 auto;   /* 撑满 .shop-page 剩余高度 */
}
.shop-side {
  flex: 0 0 250px; width: 250px; max-width: 250px;
  display: flex; flex-direction: column;
}
/* 白底竖条：不描边、不圆角，高度跟随 layout 一直铺到屏幕底 */
.shop-sidebar {
  display: flex; flex-direction: column;
  padding: 0 0 12px;
  background: #fff;
  overflow: hidden;
  /* 白条高度由 .shop-side 撑满：内容不满一屏时贴窗口底，
     内容超过一屏时一直铺到文档最底下，都不会中途断掉或空滑 */
  flex: 1 1 auto;
  min-height: 0;
}
.shop-cats-wrap { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.shop-cats-wrap::-webkit-scrollbar { width: 6px; }
.shop-cats-wrap::-webkit-scrollbar-thumb { background: #dfe4ec; border-radius: 3px; }
.shop-main {
  flex: 1 1 auto; min-width: 0;
  /* 页面底部留白移到右栏，左栏白条才能通到底 */
  padding-bottom: 40px;
}

/* 搜索框与下方白色分类条之间留出间距 */
.shop-side > .shop-search { margin-bottom: 12px; }

/* 侧栏内的「产品分类」标题 */
.shop-sidebar .shop-card__head { padding: 15px 20px; border-bottom: 1px solid #eef1f7; }
.shop-sidebar .shop-card__title { margin: 0; font-size: 15px; font-weight: 700; color: #1f2b3d; }

.shop-search { position: relative; }
/* 聚焦时边框慢慢变蓝（.3s），失焦时立刻恢复灰色：
   过渡只写在 :focus 上，离开焦点那一下没有 transition，边就瞬时回灰。 */
.shop-search__input {
  /* 放大镜在左，文字从图标右侧开始 */
  width: 100%; height: 42px; padding: 0 14px 0 40px;
  border: 1px solid #e8ecf4; border-radius: 4px;
  font-size: 13.5px; color: #1f2b3d; background: #fff;
}
/* 聚焦同本站输入框那套：边框慢慢变蓝 + 淡蓝发光（和优惠码/备注输入框一致） */
.shop-search__input:focus {
  outline: none;
  border-color: #0052d9;
  box-shadow:
    0 0 0 2px rgba(0, 82, 217, .04),
    0 4px 12px rgba(0, 82, 217, .06);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.shop-search__btn {
  position: absolute; left: 5px; top: 5px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 4px;
  background: transparent; color: #8792a8; cursor: pointer;
}
.shop-search__btn:hover { color: #0052d9; }

/* 一级分组之间不留间距（原来 gap:2px 会有缝） */
.shop-cats { display: flex; flex-direction: column; gap: 0; }
/* 一级分类：button 形态的手风琴头，点它只展开/收起，不跳转 */
.shop-cat {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 40px; padding: 10px 20px;
  font-size: 14px; color: #1f2b3d;
  line-height: 1.5;
  background: none; border: 0;
  text-align: left; cursor: pointer;
  font-family: inherit;
}
/* 未选中分组的 hover：向选中态看齐（文字、箭头都变蓝），
   只是底色比选中态（#f2f7ff）再浅一档 */
.shop-cat:hover { background: #f8fbff; color: #0052d9; }
.shop-cat-group:not(.is-current) > .shop-cat:hover .shop-cat__arr { color: #0052d9; }
/* 只有「当前所在分组」才变蓝，纯粹展开不收这个颜色 */
/* 当前所在分组的一级条也给底色，但比二级那层（#e0eeff）更浅，
   形成「一级浅、二级深」的层级差 */
.shop-cat-group.is-current > .shop-cat {
  color: #0052d9;
  background: #f2f7ff;
}
.shop-cat__arr {
  flex: 0 0 auto; color: #999;
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
/* 收起朝右，展开转 90° 朝下 */
.shop-cat-group.is-open > .shop-cat .shop-cat__arr { transform: rotate(90deg); }
.shop-cat-group.is-current > .shop-cat .shop-cat__arr { color: #0052d9; }

/* 二级列表：高度由 JS 实测后写 inline height 做过渡。
   （实测这个内核里 grid-template-rows:0fr->1fr 和 max-height 都不参与插值，
     都是到点直接跳，所以只能用真实 height。）
   动画结束把 height 清成 auto，内容变化才不会卡住。 */
.shop-cats__sub {
  width: 100%;
  height: 0;
  overflow: hidden;
  transition: height .32s cubic-bezier(.22,.61,.36,1);
}
.shop-cat-group.is-open > .shop-cats__sub { height: auto; }

/* 二级分类：左侧 3px 透明边，选中变蓝 + 淡蓝底（参考站 .submenu- 那套） */
.shop-sub {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  min-height: 40px; padding: 0 20px 0 26px;
  transition: background-color .2s ease, color .2s ease;
  font-size: 14px; color: #1f2b3d;
  text-decoration: none;
  line-height: 1.5;
  border-left: 3px solid transparent;
}
/* 二级项右侧的特色标签（headline）：红橙系，跳出来、显眼 */
.shop-sub__name { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; }
/* 分组名「CN|测速云1区」：竖线前的 CN 换成同名国旗图标 */
/* 国旗尺寸照 33y.cn 购物车侧栏实测：23x14 / object-fit:cover / 无圆角 */
.shop-sub__flag {
  display: inline-block;
  width: 23px; height: 14px;
  margin-right: 4px;
  object-fit: cover;
  border-radius: 0;
  vertical-align: middle;
  flex: 0 0 auto;
}
.shop-cat__name { display: inline-flex; align-items: center; }
/* 一级分组同一套尺寸 */
.shop-cat__flag {
  display: inline-block;
  width: 23px; height: 14px;
  margin-right: 4px;
  object-fit: cover;
  border-radius: 0;
  vertical-align: middle;
  flex: 0 0 auto;
}
.shop-sub__tag {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  height: 18px; padding: 0 6px;
  margin-left: 8px;
  border-radius: 3px;
  background: #ff6a3d;
  color: #fff;
  font-size: 11px; font-weight: 500; line-height: 1;
  white-space: nowrap;
}
.shop-sub.is-on .shop-sub__tag { background: #f5502a; }

/* 未选中二级项的 hover：和未选中一级分组同色同深浅（#f8fbff），
   选中态仍是更深的 #e0eeff + 蓝左边框 */
.shop-sub:hover { background: #f8fbff; color: #0052d9; }
.shop-sub.is-on:hover { background: #e0eeff; }
.shop-sub.is-on {
  color: #0052d9; font-weight: 500;
  border-left-color: #0052d9;
  background: #e0eeff;
}

/* 分组公告条（登录提示下方）：白底细边，正文颜色由 TinyMCE 内容决定 */
.shop-groupnotice {
  position: relative;
  padding: 10px 16px 10px 20px;
  margin-bottom: 16px;
  background: #fff;
  border: 1px solid #e8ecf4;
  border-radius: 4px;
  color: #5b6779;
  font-size: 13px;
  line-height: 1.8;
  /* 左侧蓝色竖条强调 */
  border-left: 3px solid var(--primary);
}
.shop-groupnotice__inner > *:first-child { margin-top: 0; }
.shop-groupnotice__inner > *:last-child { margin-bottom: 0; }
.shop-groupnotice__inner p { margin: 0 0 4px; }
/* 链接样式与底部提示框保持一致（含尾部小箭头，hover 右移 5px） */
.shop-groupnotice__inner a {
  color: var(--primary);
  text-decoration: none;
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding-right: 20px;
  line-height: normal;
}
.shop-groupnotice__inner a::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 5px;
  height: 5px;
  box-sizing: border-box;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: translateY(-50%) rotate(-45deg);
  transition: right .3s;
}
.shop-groupnotice__inner a:hover { color: var(--primary); text-decoration: none; }
.shop-groupnotice__inner a:hover::after { right: 5px; }

/* 分组自定义字段 tips 的三种状态：true=绿 / false=红 / info=蓝。
   只覆盖底色、描边和左侧竖条颜色，其余沿用上面的 .shop-groupnotice。 */
.shop-groupnotice--ok {
  background: #f2fbf4;
  border-color: #cdebd4;
  border-left-color: #2fa84f;
  color: #1f7a35;
}
.shop-groupnotice--ok .shop-groupnotice__inner a,
.shop-groupnotice--ok .shop-groupnotice__inner a::after { color: #2fa84f; border-color: #2fa84f; }

.shop-groupnotice--warn {
  background: #fff5f5;
  border-color: #ffd7d7;
  border-left-color: #e54545;
  color: #c02b20;
}
.shop-groupnotice--warn .shop-groupnotice__inner a,
.shop-groupnotice--warn .shop-groupnotice__inner a::after { color: #e54545; border-color: #e54545; }

.shop-groupnotice--info {
  background: #eff6ff;
  border-color: #cfe0ff;
  border-left-color: #206bc4;
  color: #1a4f9c;
}
.shop-groupnotice--info .shop-groupnotice__inner a,
.shop-groupnotice--info .shop-groupnotice__inner a::after { color: #206bc4; border-color: #206bc4; }

/* tips 三种类型配对应图标（success / error / info）：
   直接用 assets/img/alert-*.svg 原图，保留图标自带配色
   （绿 rgb(0,180,42) / 红 rgb(245,63,63) / 蓝 #165dff），不跟着文字色改。 */
.shop-groupnotice--ok,
.shop-groupnotice--warn,
.shop-groupnotice--info {
  padding-left: 36px;
}
.shop-groupnotice--ok::before,
.shop-groupnotice--warn::before,
.shop-groupnotice--info::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 13px;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}
.shop-groupnotice--ok::before   { background-image: url("img/alert-success.svg"); }
.shop-groupnotice--warn::before { background-image: url("img/alert-error.svg"); }
.shop-groupnotice--info::before { background-image: url("img/alert-info.svg"); }

/* 分组自定义字段 cpu 的信息卡容器 */
.shop-cpucard { margin-bottom: 16px; }

/* 产品卡片上方的登录提示条：
   浅蓝底 + 左侧信息图标 + 主副两行 + 右侧登录按钮。
   圆角 4px、无阴影，和整站卡片同一套语言。 */
.shop-loginhint {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: #f0f5ff;
  border: 1px solid #dbe6ff;
  border-radius: 4px;
}
/* 图标不带底色，只留线稿，颜色跟着提示条主色 */
.shop-loginhint__icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  color: #1652f0;
}
.shop-loginhint__text { flex: 1 1 auto; min-width: 0; }
.shop-loginhint__title {
  margin: 0;
  font-size: 13.5px; font-weight: 600; color: #1f2b3d;
  line-height: 1.5;
}
.shop-loginhint__desc {
  margin: 2px 0 0;
  font-size: 12.5px; color: #5b6779;
  line-height: 1.5;
}
.shop-loginhint__btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 16px;
  background: #1652f0; color: #fff;
  border-radius: 4px;
  font-size: 13px; text-decoration: none;
  transition: background-color .2s ease;
}
.shop-loginhint__btn:hover { background: #0f45d6; color: #fff; }

/* 排序按钮组：照参考站「默认 / 价格升序 / 价格降序 / 名称 A-Z / 名称 Z-A」 */
.shop-sort {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center;
}
.shop-sort__btn {
  height: 32px; padding: 0 14px;
  border: 1px solid #e8ecf4; border-radius: 4px;
  background: #fff; color: #5b6779;
  font-size: 13px; line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.shop-sort__btn:hover { border-color: #0052d9; color: #0052d9; }
.shop-sort__btn.is-on {
  border-color: #0052d9;
  background: #f2f7ff;
  color: #0052d9;
  font-weight: 500;
}

.shop-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.shop-toolbar__count { font-size: 13px; color: #8792a8; }
.shop-toolbar__count b { color: #1f2b3d; font-weight: 600; }

/* 产品网格：repeat(auto-fill, minmax(var(--shop-card-min), 1fr))
   列数随宽度自动增减，但每列有最小宽度，卡片不会被拉成一条长条。 */
.shop-grid {
  --shop-card-min: 280px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--shop-card-min), 1fr));
  gap: 16px;
}

.shop-item {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid #e8ecf4;
  border-radius: 4px;
  overflow: hidden;
  /* 进场/离场都走同一段过渡：边框变蓝、外发光淡入淡出 */
  transition: border-color .28s ease, box-shadow .28s ease;
}
/* hover：边框慢慢变蓝 + 淡蓝外发光 + 一层柔和阴影（三层叠加，
   发光很淡只做提亮，阴影负责把卡片从背景上托起来） */
.shop-item:hover {
  border-color: #0052d9;
  box-shadow:
    0 0 0 2px rgba(0, 82, 217, .04),
    0 4px 12px rgba(0, 82, 217, .06),
    0 4px 12px rgba(31, 43, 61, .05);
}
.shop-item__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid #eef1f7;
}
.shop-item__name {
  margin: 0;
  font-size: 15px; font-weight: 700; color: #1f2b3d;
  line-height: 1.5;
  word-break: break-word;
}
/* 库存角标：描边 + 浅底三态（有货/库存 N、库存充足、已售罄） */
.shop-item__stock {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 8px;
  border-radius: 4px;
  background: #eaf7ee; color: #1a9e4b;
  box-shadow: inset 0 0 0 1px #c8ebd3;
  font-size: 11.5px;
}
/* 库存偏紧（< 5）：橙色底，提示余量不多 */
.shop-item__stock--low {
  background: #fff2e4;
  color: #e8761a;
  box-shadow: inset 0 0 0 1px #ffd7b0;
}

/* 售罄角标：红色系 */
.shop-item__stock--out {
  background: #fdeceb;
  color: #e6382f;
  box-shadow: inset 0 0 0 1px #f7cfcb;
}
.shop-item__body {
  flex: 1 1 auto;
  padding: 14px 16px;
}
.shop-item__desc {
  margin: 0;
  font-size: 12.5px; color: #5b6779;
  line-height: 1.9;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 商品描述里的表格（后台编辑器产出的 table / .tftable / #tfhover）：
   后台常写成 width="600" 或内联 width，卡片只有 350 左右，会横向捅出卡片、
   被右边的卡片盖住（表现为「最后一列看不见」）。
   这里不拆表格结构，只强制按容器宽度重新排：列宽均分、内容自动换行。 */
.shop-item__desc table {
  width: 100% !important;
  max-width: 100%;
  margin: 0 0 8px;
  table-layout: fixed;
  border-collapse: collapse;
}
.shop-item__desc table th,
.shop-item__desc table td {
  padding: 2px 4px;
  font-size: 12px;
  line-height: 1.6;
  color: inherit;
  white-space: normal;
  word-break: break-word;
  border: 1px solid #eef0f4;
  text-align: left;
}
.shop-item__desc table th {
  font-weight: 500;
  color: #8b95a7;
  background: #fafbfc;
}
.shop-item__foot {
  padding: 0 16px 16px;
}
/* 价格区：上面一行现价（符号上标 + 大号金额 + 起/周期），
   下面一行「(8.0折) 原价¥399.00」——数值照参考站 product-Parameters */
.shop-item__pricing { padding: 0 0 12px; }
.shop-item__price {
  display: flex; align-items: baseline;
  color: #f53f3f;
  line-height: 1.2;
  font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB",
               -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
.shop-item__cur {
  font-size: 14px; font-weight: 700;
  margin-right: 4px;
}
.shop-item__num {
  font-size: 24px; font-weight: 700;
}
.shop-item__period {
  margin-left: 4px;
  font-size: 14px; font-weight: 400; color: #777;
}
.shop-item__orig {
  display: flex; align-items: center;
  margin-top: 4px;
  font-size: 12px;
  color: #777;
}
.shop-item__orig .shop-item__discount {
  color: #ff0003;
  font-weight: 700;
  padding-right: 4px;
}
.shop-item__trial {
  font-size: 13px; color: #333;
  margin: 4px 0 2px;
}
/* 立即购买：方正按钮（无圆角），配色照参考站那种亮蓝实心 */
.shop-item__btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 40px;
  background: #1652f0; color: #fff;
  border: 0; border-radius: 0;
  font-size: 15px; font-weight: 400; text-decoration: none;
  transition: background-color .2s ease;
}
.shop-item__btn:hover { background: #0f45d6; color: #fff; }
/* 售罄卡片：只叠一层灰遮罩，卡片自身的 hover（边框变蓝 + 发光 + 阴影）照旧 */
.shop-item.is-soldout { position: relative; }
.shop-item.is-soldout::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(240, 242, 246, .55);
  pointer-events: none;
}

/* 售罄：灰底灰字，鼠标悬停显示禁止符号（不用 pointer-events:none，
   否则光标不落在按钮上，not-allowed 就不会出现） */
.shop-item__btn--disabled,
.shop-item__btn--disabled:hover {
  background: #eef0f4;
  color: #a9b2c3;
  cursor: not-allowed;
  box-shadow: none;
}

/* 选购页底部提示框：照参考站 .layui-elem-quote.alert-icon.red-theme 的那套值
   ---- 容器 ----  padding:10px 20px 12px 52px; margin-bottom:12px;
                  background:rgba(255,52,52,.1); border:1px solid rgba(255,52,52,.3);
                  color:#B22222; line-height:normal
   ---- 图标 ----  ::before left:20px top:12px 20x20 background-size:cover
   ---- 内层 ----  * { font-size:14px }; a { color:#165dff }
   只有圆角按本站规范改 4px（参考站是直角）。 */
.shop-notice {
  position: relative;
  /* 参考站是产品网格下方 40px（.shopping-product-footer 接在列表后面） */
  margin: 40px 0 12px;
  padding: 10px 20px 12px 52px;
  background: rgba(255, 52, 52, .1);
  border: 1px solid rgba(255, 52, 52, .3);
  border-radius: 4px;
  color: #b22222;
  font-size: 14px;
  line-height: normal;
}
/* 左侧「红圆白叉」图标 */
.shop-notice::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 12px;
  width: 20px;
  height: 20px;
  background-image: url("img/alert-error.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
/* 内层统一 14px（参考站就是 .layui-elem-quote *{font-size:14px}） */
.shop-notice * { font-size: 14px; }
.shop-notice__inner > *:first-child { margin-top: 0; }
.shop-notice__inner > *:last-child { margin-bottom: 0; }
.shop-notice__inner p { margin: 0 0 4px; }
/* 链接用参考站的蓝（--primary），不用红 —— 红字里套蓝链正是人家的做法。
   不加 !important，编辑器里给链接着色（内联 style）依然能盖过这里。 */
/* 链接：照着参考站 .layui-elem-quote a 那套
   display:inline-block + padding-right:20px 给箭头留位；
   箭头是 ::after 5×5 的方框（右/下 2px 边 + rotate(-45deg)）定位 right:10px，
   hover 时 right 从 10px 滑到 5px（往右移 5px），带 .3s 过渡。 */
.shop-notice__inner a {
  color: var(--primary);
  text-decoration: none;
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding-right: 20px;
  /* 参考站的链接行高是 normal，箭头 translateY(-50%) 的基准才和它一致 */
  line-height: normal;
}
.shop-notice__inner a::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 5px;
  height: 5px;
  /* 必须 border-box：否则 5px 内容 + 2px 边框 = 7px 盒子，
     臂长会多 2px、粗细比例也变，看着就比参考站大一号。
     参考站全局是 border-box，所以它 translateY(-50%) 算出来是 -2.5px。 */
  box-sizing: border-box;
  /* 照搬参考站：边框用 var(--primary)，跟着链接主色走 */
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: translateY(-50%) rotate(-45deg);
  transition: right .3s;
}
.shop-notice__inner a:hover { color: var(--primary); text-decoration: none; }
.shop-notice__inner a:hover::after { right: 5px; }

/* 空状态：照搬 fengshangcloud 的 .no-data（插画在上、灰字在下）
   注意：插画不要挂在文字元素上做背景，文字宽度只有内容宽，会把 220px 的图裁掉 */
.shop-empty {
  min-height: 600px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 0 20px;
  text-align: center;
  background: transparent;
  border: 0;
}
.shop-empty::before {
  content: "";
  width: 220px;
  height: 72px;
  margin-bottom: 26px;
  background: url("img/nodata.png") no-repeat center / contain;
}
.shop-empty__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: #8187a1;
}

.shop-pager {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 6px;
  margin-top: 24px;
}
.shop-pager a,
.shop-pager span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 10px;
  border: 1px solid #e8ecf4; border-radius: 4px;
  background: #fff; color: #5b6779;
  font-size: 13px; text-decoration: none;
}
.shop-pager a:hover { border-color: #0052d9; color: #0052d9; }
.shop-pager .active,
.shop-pager span.active {
  background: #0052d9; border-color: #0052d9; color: #fff;
}
.shop-pager .disabled,
.shop-pager span.disabled { color: #c3cad8; pointer-events: none; }

.shop-cats-m {
  display: none;
  gap: 8px;
  margin-bottom: 14px;
}
.shop-cats-m__select {
  flex: 1 1 0; min-width: 0;
  height: 36px; padding: 0 10px;
  border: 1px solid #e8ecf4; border-radius: 4px;
  background: #fff; font-size: 13px; color: #1f2b3d;
}

@media (max-width: 1180px) {
}
@media (max-width: 991px) {
  .shop-layout { flex-direction: column; }
  .shop-side { display: none; }
  .shop-cats-m { display: flex; }
}
@media (max-width: 767px) {
  .shop-page { padding: 61px 0 24px; }  /* 白条要紧贴 header（header 实际高 61px） */
  /* 手机端左右留白对称（桌面右 60px 是给参考站留的白，手机上会变成右侧一大片空白） */
  .shop-wrap { padding: 0 16px; }

  /* 顶部一条：返回 | 分组下拉 | 清单（N个） */
  .shop-region {
    /* 三栏网格：返回 / 分组下拉（真正居中）/ 清单 */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 6px;
    /* 吸顶：滚动时始终贴在 header 下方 */
    position: sticky;
    top: var(--hdr-h, 61px);
    z-index: 90;
    /* 白底通栏条，紧贴 header */
    margin: 0 -16px;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid #eef1f5;
    font-size: 13px;
  }
  .shop-region__back { justify-self: start; font-size: 13px; white-space: nowrap; }
  .shop-region__name,
  .shop-region__desc { display: none; }
  .shop-cats-m {
    display: flex; justify-self: center;
    min-width: 0; margin: 0; justify-content: center;
  }
  .shop-cats-m #catFirst { display: none; }
  .shop-cats-m__select {
    /* 宽度跟文字走，箭头紧贴名称右侧 */
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    height: 34px; padding: 0 18px 0 6px;
    border: 0; background-color: transparent;
    text-align: center;
    font-size: 15px; font-weight: 600; color: #1f2b3d;
    -webkit-appearance: none; appearance: none;
    background-image: url("img/icons/chevron-down.svg");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 12px 12px;
    text-align-last: center;
    /* 点击交给自定义面板，禁用原生下拉和焦点框 */
    pointer-events: none;
    outline: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
  }
  .shop-cats-m__select:focus,
  .shop-cats-m__select:focus-visible,
  .shop-cats-m__select:active {
    outline: none;
    box-shadow: none;
    border: 0;
  }
  .shop-region__cart {
    display: inline-flex;
    justify-self: end;
    font-size: 13px; color: #4e5969;
    text-decoration: none;
    white-space: nowrap;
  }
  .shop-region__cart em { font-style: normal; color: #f5a623; }

  .shop-loginhint { flex-wrap: wrap; gap: 10px; padding: 12px; margin-top: 12px; }
  .shop-groupnotice { margin-top: 12px; }
  .shop-loginhint__btn { width: 100%; }
  .shop-pager a,
  .shop-pager span { min-width: 30px; height: 30px; font-size: 12.5px; }

  /* 卡片样式沿用桌面，只把网格压成单列；
     手机端每张卡按自己的内容高度（不再跟同排最高的卡片等高） */
  .shop-grid { grid-template-columns: 1fr; gap: 12px; align-items: start; }
  .shop-item { height: auto; min-height: 0; align-self: start; }

  /* 排序区：不加白底，和上面的提示拉开距离 */
  .shop-toolbar {
    margin: 14px 0 12px;
    padding: 0;
    background: transparent;
    border: 0;
  }

  /* 排序按钮：强制一行（挤也要挤在一行），整体居中 */
  .shop-sort {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 4px;
    margin: 0;
    padding: 0 0 2px;
    overflow: visible;
    /* 撑满 .shop-toolbar，宽度和下面卡片一致 */
    flex: 1 1 100%;
    width: 100%;
  }
  .shop-sort__btn {
    /* 五个按钮等分整行：按钮宽 + 间距 = 下面卡片的宽度 */
    flex: 1 1 0;
    min-width: 0;
    /* 高度和桌面端保持一致（32px），只压宽度和字号 */
    height: 32px;
    padding: 0 4px;
    font-size: 12px;
    white-space: nowrap;
    text-align: center;
  }
}

/* 产品配置页顶部：分组旗帜（与侧栏 .shop-cat__flag 同尺寸） */
.shop-region__flag {
  display: inline-block;
  width: 23px; height: 14px;
  margin-right: 6px;
  object-fit: cover;
  vertical-align: 0;
  border-radius: 1px;
}

/* ---- 选购页提示框：三种样式（后台「选购页提示」里选） ---- */
.shop-notice--success {
  background: rgba(0, 180, 42, .08);
  border-color: rgba(0, 180, 42, .3);
  color: #0b7a2c;
}
.shop-notice--success::before { background-image: url("img/alert-success.svg"); }

.shop-notice--info {
  background: rgba(22, 93, 255, .08);
  border-color: rgba(22, 93, 255, .28);
  color: #0b3fa8;
}
.shop-notice--info::before { background-image: url("img/alert-info.svg"); }

/* 登录提示图标改用 assets/img/alert-info.svg（引用式，不再内联） */
.shop-loginhint__icon img { display: block; width: 20px; height: 20px; }

/* ---- 手机端分组选择面板（点顶部「分组名」弹出） ---- */
.shop-picker { display: none; }
@media (max-width: 767px) {
  .shop-picker { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-end; }
  .shop-picker[hidden] { display: none; }
  /* 遮罩上不允许再滑动页面 */
  .shop-picker__mask { position: absolute; inset: 0; background: rgba(17, 24, 39, .45); touch-action: none; }
  .shop-picker__sheet {
    position: relative; width: 100%; height: 50vh; max-height: 50vh;
    display: flex; flex-direction: column;
    background: #fff; border-radius: 4px 4px 0 0;
    animation: shopPickerUp .22s ease;
  }
  @keyframes shopPickerUp { from { transform: translateY(24px); opacity: .6 } to { transform: none; opacity: 1 } }
  @keyframes shopPickerDown { from { transform: none; opacity: 1 } to { transform: translateY(24px); opacity: 0 } }
  @keyframes shopPickerMaskOut { from { opacity: 1 } to { opacity: 0 } }
  .shop-picker.is-closing .shop-picker__sheet { animation: shopPickerDown .18s ease forwards; }
  .shop-picker.is-closing .shop-picker__mask { animation: shopPickerMaskOut .18s ease forwards; }
  .shop-picker__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    /* 不要分隔线：标题栏和下面的内容之间不留灰线 */
    border-bottom: 0;
  }
  .shop-picker__title { font-size: 15px; font-weight: 600; color: #1f2b3d; }
  .shop-picker__close {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0;
    /* 只要图标，不要底色框 */
    background: transparent; border: 0; border-radius: 0;
    color: #8792a8; cursor: pointer;
    outline: none; -webkit-tap-highlight-color: transparent;
  }
  .shop-picker__close:hover { color: #4e5969; }
  .shop-picker__body {
    display: grid; grid-template-columns: 132px 1fr;
    flex: 1 1 auto; min-height: 0;
  }
  /* 左栏顶部不要留内边距：否则灰底会在标题栏下方露出一条灰带，像分隔线 */
  .shop-picker__left { overflow-y: auto; background: #f7f8fa; padding: 0; }
  .shop-picker__cat {
    position: relative;
    display: block; width: 100%;
    padding: 12px 12px;
    background: transparent; border: 0;
    text-align: left; font-size: 13px; line-height: 1.5; color: #4e5969;
    cursor: pointer;
  }
  .shop-picker__cat.is-on { background: #fff; color: #165dff; font-weight: 600; }
  .shop-picker__cat.is-on::before {
    content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
    width: 3px; background: #165dff; border-radius: 0 2px 2px 0;
  }
  .shop-picker__right { overflow-y: auto; padding: 0; }
  .shop-picker__pane { display: none; }
  .shop-picker__pane.is-active { display: block; }
  .shop-picker__item {
    display: flex; align-items: center; gap: 8px;
    /* 四周留白 + 圆角描边，选中不是顶满的高亮 */
    margin: 2px 12px;
    padding: 10px 10px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 14px; color: #1f2b3d; text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease;
  }
  .shop-picker__item img { width: 22px; height: 14px; object-fit: cover; border-radius: 1px; flex: 0 0 auto; }
  .shop-picker__item.is-on {
    background: #f2f7ff;
    border-color: #c9dcff;
    color: #165dff;
  }
  .shop-picker__tag {
    flex: 0 0 auto;
    display: inline-flex; align-items: center;
    height: 18px; padding: 0 6px;
    margin-left: auto;
    border-radius: 3px;
    background: #ff6a3d; color: #fff;
    font-size: 11px; font-style: normal; font-weight: 500; line-height: 1;
  }
  .shop-picker__item.is-on .shop-picker__tag { background: #f5502a; }
}

/* 约合每日价格（后台「购物车样式」页可开关）
   只有金额是红色，方括号与「约 /天」保持灰色 */
.shop-item__daily {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 400;
  color: #8a94a6;
  white-space: nowrap;
}
.shop-item__daily-num {
  color: #f53f3f;
  font-weight: 600;
}