/* ============================================================
   闪得 店铺小部件 - 独立化适配（叠加在 css/shop.css 之上）
   句柄: shande-shop
   源码里 .shop-sidebar(width:20%) / .shop-content(flex:1) 依赖
   .shop-body 这个 flex 父容器；拆成独立 Elementor 小部件后该父容器
   已不存在，这里让每个小部件各自填满所在列，互不合并。
   ============================================================ */

.shande-shop-header,
.shande-shop-sidebar,
.shande-shop-content {
  width: 100%;
}

/* 分类栏：填满所在列（去掉 20% / 180px 限制） */
.shande-shop-sidebar .shop-sidebar {
  width: 100%;
  max-width: 100%;
  flex-shrink: 1;
}

/* 产品区：填满所在列 */
.shande-shop-content .shop-content {
  width: 100%;
  flex: 1 1 auto;
}

/* 商品区各层允许在 Flex / Grid 中收缩，避免长标题或卡片最小内容宽度
   反向撑宽 Elementor 容器。这里只约束尺寸，不用 overflow 裁掉真实问题。 */
.shande-shop-content,
.shande-shop-content .shop-content,
.shande-shop-content .shop-grid,
.shande-shop-content .shop-grid > * {
  min-width: 0;
  max-width: 100%;
}

/* 任一店铺浮层打开时统一锁定页面滚动。JS 用 token 集合维护，
   只有最后一个浮层关闭后才移除此 class，避免弹窗互相提前解锁。 */
body.shande-shop-scrollocked {
  overflow: hidden;
}

/* 头部：去掉源码里依赖 .shop-page 的外边距，由 Elementor 间距控制 */
.shande-shop-header .shop-header {
  margin-top: 0;
}

/* ============================================================
   工具条：排序 Tab + 右侧「分类」入口
   PC 端只有排序，入口隐藏；手机端入口显形并靠最右。
   ============================================================ */
/* 顶端对齐，不用 align-items:center：
   .shop-sort-tabs 带 margin-bottom:20px，而 flex 居中是按「外边距盒」算的，
   那 20px 会把入口整体往下压约 10px，视觉上就沉到排序栏下方去了。 */
.shande-shop-content .shop-toolbar {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* 排序 Tab 占满剩余宽度，把入口挤到最右 */
.shande-shop-content .shop-toolbar .shop-sort-tabs {
  flex: 1 1 auto;
  min-width: 0;
}

/* 分类入口：PC 端不需要（左侧常驻分类栏），仅手机端出现。
   纯文字图标形态，无边框无圆角无底色。

   垂直对齐用「与 .shop-sort-tab 相同的 10px 上内距」实现，而不是靠位移微调：
   两者上内距一致，文字盒自然落在同一条光学基线上；
   line-height 1.3（12px × 1.3 = 15.6px）也与排序标签的 13px/normal 行盒等高，
   因此排序栏字号或内距若在源码里调整，这里会跟着一起动，不会错位。 */
.shande-shop-content .shop-filter-btn {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  /* 左侧留出触摸余量，右侧不留以与内容区右内距对齐 */
  padding: 10px 0 10px 12px;
  border: 0;
  border-radius: 0;
  background: none;
  color: #4e5969;
  font-size: 12px;
  line-height: 1.3;
  cursor: pointer;
  transition: color .2s;
}

.shande-shop-content .shop-filter-btn:hover,
.shande-shop-content .shop-filter-btn[aria-expanded="true"] {
  color: #096ddd;
}

.shande-shop-content .shop-filter-btn svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

/* ============================================================
   手机端分类栏 → 左侧滑出抽屉
   源码在 768px 下直接 display:none 把分类栏藏掉，等于手机端无法筛选；
   这里改为抽屉：默认移出视口左侧，点工具条的「分类」滑入。
   用 transform 而非 left 位移，避免触发布局回流。
   ============================================================ */

/* 遮罩与抽屉容器在 PC 端保持无痕：遮罩不渲染，抽屉退化为普通侧栏 */
.shande-shop-sidebar .shop-drawer-mask {
  display: none;
}

@media (max-width: 768px) {
  /* 抽屉本体。父级 .shande-shop-sidebar 可能带 overflow/transform，
     fixed 定位在其上会失效，故抽屉直接挂 fixed 并自行管理层级。 */
  .shande-shop-sidebar .shop-drawer {
    position: fixed;
    top: 70px;
    left: 0;
    z-index: 10000;
    width: 78vw;
    max-width: 320px;
    height: calc(100vh - 70px);
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: 2px 0 16px rgba(15, 23, 42, .18);
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(0.22, 1, 0.36, 1);
    visibility: hidden;
  }

  .shande-shop-sidebar .shop-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  /* 遮罩：与抽屉同步淡入，点击关闭 */
  .shande-shop-sidebar .shop-drawer-mask {
    display: block;
    position: fixed;
    inset: 70px 0 0;
    z-index: 9999;
    background: rgba(15, 23, 42, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
  }

  /* 遮罩的开合由 JS 同步 class（见 shande-shop.js::setDrawer）。
     不用 `.shop-drawer.is-open ~ .shop-drawer-mask`：遮罩在 DOM 里位于抽屉之前，
     `~` 只能向后匹配，那样写会静默失效。 */
  .shande-shop-sidebar .shop-drawer-mask.is-open {
    opacity: 1;
    visibility: visible;
  }

  /* 标题栏固定在顶部，分类列表单独滚动 */
  .shande-shop-sidebar .shop-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
  }

  .shande-shop-sidebar .shop-drawer__title {
    font-size: 14px;
    font-weight: 600;
    color: #1d2129;
  }

  .shande-shop-sidebar .shop-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: #86909c;
    cursor: pointer;
  }

  .shande-shop-sidebar .shop-drawer__close svg {
    width: 18px;
    height: 18px;
  }

  .shande-shop-sidebar .shop-drawer__close:hover {
    background: #f2f3f5;
    color: #1d2129;
  }

  /* 分类列表：占满剩余高度并独立滚动，长分类树不会顶掉标题栏。
     -webkit-overflow-scrolling 让 iOS 有惯性滚动。 */
  .shande-shop-sidebar .shop-sidebar {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0;
  }

  /* 动态视口单位避免手机浏览器地址栏伸缩时抽屉底部跳动；
     不支持 dvh 的浏览器继续使用上面的 vh 降级值。 */
  @supports (height: 100dvh) {
    .shande-shop-sidebar .shop-drawer {
      height: calc(100dvh - 70px);
    }
  }

  /* Elementor 横向父容器会给子项注入“高度 100% + 拉伸”。手机换行后，
     这会让商品真实内容高于外层约一行并侵入页脚。只对包含本小部件的结构
     恢复内容高度，保留小部件自身合法的 margin（含用户配置的底部 100px）。 */
  .e-con.e-flex:has(> .e-con > .elementor-widget-shande_shop_content) {
    --container-widget-height: initial !important;
    --container-widget-flex-grow: 0 !important;
    --container-widget-align-self: initial !important;
    --align-items: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .e-con.e-flex:has(> .e-con > .elementor-widget-shande_shop_content)
    > .e-con:has(> .elementor-widget-shande_shop_content) {
    align-self: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .elementor-widget-shande_shop_content > .elementor-widget-container {
    height: auto !important;
  }

  /* 英文排序项较长时整行自然换行，避免挤进右侧分类入口。 */
  .shande-shop-content .shop-toolbar {
    flex-wrap: wrap;
    gap: 0 8px;
    margin-bottom: 12px;
  }

  .shande-shop-content .shop-toolbar .shop-sort-tabs {
    flex-wrap: wrap;
    max-width: 100%;
    margin-bottom: 0;
  }

  .shande-shop-content .shop-sort-tab {
    padding: 8px;
    white-space: nowrap;
  }

  /* 手机端入口显形；空间不足时移到下一行并继续靠右。 */
  .shande-shop-content .shop-filter-btn {
    display: inline-flex;
    margin-left: auto;
    padding: 8px 0;
  }
}

/* PC 端：抽屉容器只是透明包装，不引入任何视觉变化 */
@media (min-width: 769px) {
  .shande-shop-sidebar .shop-drawer__head {
    display: none;
  }
}

/* ============================================================
   关注按钮状态（由 Shande_Follow_Service 渲染，站内多处复用）
   未关注沿用 css/shop.css 的主色渐变；已关注改为低强度描边态，
   与站内「次要操作」视觉一致（白底 + 1px 浅边框 + 深灰字）。
   ============================================================ */

/* 服务输出的是 <button>，需要中和主题按钮默认样式 */
.shande-follow-btn {
  font-family: inherit;
  line-height: 1.4;
  transition: opacity .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}

.shande-follow-btn.is-following {
  background: #fff;
  border: 1px solid var(--border-color, #e2e8f0);
  color: #4e5969;
  font-weight: 500;
}

.shande-follow-btn.is-following:hover {
  border-color: #c9cdd4;
  color: #1d2129;
  opacity: 1;
}

/* 不可关注（自己的店铺 / 店铺异常）：按钮保留占位与形态，仅置灰不可点。
   不输出 data-shande-follow，公共 JS 自然忽略，这里只负责视觉。 */
.shande-follow-btn.is-disabled,
.shande-follow-btn[disabled] {
  background: #f2f4f7;
  border: 1px solid var(--border-color, #e2e8f0);
  color: #a8b0bd;
  cursor: not-allowed;
  opacity: 1;
}

.shande-follow-btn.is-disabled:hover,
.shande-follow-btn[disabled]:hover {
  background: #f2f4f7;
  border-color: var(--border-color, #e2e8f0);
  color: #a8b0bd;
  opacity: 1;
}

/* 请求进行中：按钮尺寸不变，内容整体隐藏，只在正中显示转圈。
   用 color:transparent + 子元素 visibility:hidden 而不是清空文本，
   按钮宽度由原文案撑住，不会在「关注 ↔ 已关注」之间跳动。 */
.shande-follow-btn.is-loading {
  position: relative;
  pointer-events: none;
  color: transparent !important;
}

.shande-follow-btn.is-loading > * {
  visibility: hidden;
}

.shande-follow-btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: shandeFollowSpin .7s linear infinite;
}

/* 已关注态是白底按钮，转圈需换成主色，否则白圈在白底上看不见 */
.shande-follow-btn.is-following.is-loading::after {
  border-color: rgba(9, 109, 221, .28);
  border-top-color: #096ddd;
}

@keyframes shandeFollowSpin {
  to { transform: rotate(360deg); }
}

.shande-follow-btn__icon {
  flex: 0 0 auto;
}

/* 已关注态不显示「+」号 */
.shande-follow-btn.is-following .shande-follow-btn__icon {
  display: none;
}

/* 紧凑尺寸：用于列表 / 详情页作者区等次要位置 */
.shande-follow-btn--sm {
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 5px;
}

/* ============================================================
   店铺分类栏 / 商品区：真实数据 + AJAX 骨架与分页
   ============================================================ */

/* ---------- 分类栏 ---------- */

/* 分类项仅显示名称与展开箭头，不展示商品数量。 */
.shande-shop-sidebar .shop-sidebar__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
}

/* 数量节点继续保留在 DOM 中，避免改动 AJAX 分类数据结构。 */
.shande-shop-sidebar .shop-sidebar__count {
  display: none;
}

/* 覆盖 shop.css 的 3px 左侧选中边框，只保留文字色与背景选中态。 */
.shande-shop-sidebar .shop-sidebar__item.is-active {
  border-left: 0;
  border-inline-start: 0;
}

.shop-sidebar__empty {
  padding: 18px 15px;
  color: #9aa3b2;
  font-size: 13px;
}

/* 分类列表本身在加载中：降低透明度并屏蔽点击，避免连点造成状态错乱 */
.shande-shop-sidebar.is-loading .shop-sidebar {
  opacity: .6;
  pointer-events: none;
}

/* ---------- 骨架屏 ---------- */

.shop-skel {
  display: block;
  border-radius: 6px;
  background: linear-gradient(100deg, #eef1f6 30%, #f7f9fc 50%, #eef1f6 70%);
  background-size: 240% 100%;
  animation: shandeShopSkel 1.15s ease-in-out infinite;
}

.shop-skel--line {
  height: 13px;
}

.shop-skel--short {
  width: 55%;
}

.shop-skel--thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  margin-bottom: 10px;
  border-radius: 8px;
}

/* 分类骨架行：高度与真实分类项对齐，避免填充后跳动 */
.shop-skel-row {
  padding: 13px 15px;
}

/* 商品骨架卡片：与 .shop-product 同处网格，占位尺寸一致 */
.shop-skel-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 10px;
}

@keyframes shandeShopSkel {
  0%   { background-position: 180% 0; }
  100% { background-position: -60% 0; }
}

/* 尊重系统减弱动效设置 */
@media (prefers-reduced-motion: reduce) {
  .shop-skel { animation: none; }
}

/* ---------- 商品网格 ---------- */

/* 服务端渲染的卡片是 <a>，需中和主题链接样式 */
.shande-shop-content a.shop-product,
.shande-shop-content a.shop-product:hover,
.shande-shop-content a.shop-product:focus {
  text-decoration: none;
  color: inherit;
}

.shop-product__noprice {
  font-style: normal;
  font-size: 12.5px;
  font-weight: 400;
  color: #9aa3b2;
}

/* 网格整体换页/切分类时的加载态 */
.shande-shop-content.is-loading .shop-grid {
  opacity: .55;
  transition: opacity .15s ease;
}

.shop-empty {
  grid-column: 1 / -1;
  padding: 56px 20px;
  text-align: center;
  color: #9aa3b2;
  font-size: 14px;
}

/* ---------- 加载更多 ---------- */

.shop-more {
  display: flex;
  justify-content: center;
  padding: 24px 0 6px;
}

.shop-more__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 148px;
  height: 40px;
  padding: 0 26px;
  border: 1px solid #dbe1ea;
  border-radius: 6px;
  background: #fff;
  color: #46505f;
  font-size: 14px;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  /* 它是 span 而非 button，需自行禁用文本选中，避免双击时选到文字 */
  user-select: none;
  -webkit-user-select: none;
  transition: border-color .15s ease, color .15s ease;
}

.shop-more__btn[aria-disabled="true"] {
  cursor: default;
}

.shop-more__btn:hover {
  border-color: #096ddd;
  color: #096ddd;
}

/* 加载中：只留转圈，文字隐藏但保留宽度，避免按钮尺寸跳动 */
.shop-more__btn.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
  border-color: #dbe1ea;
}

.shop-more__btn.is-loading .shop-more__txt {
  visibility: hidden;
}

.shop-more__btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(9, 109, 221, .25);
  border-top-color: #096ddd;
  border-radius: 50%;
  animation: shandeShopSpin .6s linear infinite;
}

@keyframes shandeShopSpin {
  to { transform: rotate(360deg); }
}

/* 全部加载完毕后的提示 */
.shop-more__done {
  color: #9aa3b2;
  font-size: 13px;
}

/* ============================================================
   店铺分类栏 · 三级树（顶级默认收拢，点箭头展开）
   结构：.shop-sidebar__item[data-shop-cat] + .shop-sidebar__sub[data-shop-sub]
   ============================================================ */

/* 名称占满剩余宽度，过长省略，避免把计数与箭头挤出去 */
.shop-sidebar__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 子级容器：默认收拢 */
.shop-sidebar__sub {
  display: none;
}

.shop-sidebar__sub.is-open {
  display: block;
}

/* 箭头是独立热区：点它只展开/收起，点行本身才筛选 */
.shop-sidebar__arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 4px;
  margin-right: -4px;
  border-radius: 4px;
  color: #9aa3b2;
  cursor: pointer;
  transition: transform .18s ease, color .15s ease, background .15s ease;
}

.shop-sidebar__arrow:hover {
  background: #eef2f7;
  color: #096ddd;
}

.shop-sidebar__item.is-open > .shop-sidebar__arrow {
  transform: rotate(180deg);
}

.shop-sidebar__item.is-active > .shop-sidebar__arrow {
  color: inherit;
}

/* 层级缩进：仅加左内距，不改动 shop.css 的既有内距体系 */
.shande-shop-sidebar .shop-sidebar__item--l1 { padding-left: 28px; }
.shande-shop-sidebar .shop-sidebar__item--l2 { padding-left: 42px; }
.shande-shop-sidebar .shop-sidebar__item--l3 { padding-left: 56px; }

/* 子级字号略小、颜色略浅，层级关系一眼可辨 */
.shop-sidebar__item--sub {
  font-size: 12.5px;
  color: #6b7486;
}

.shop-sidebar__item--sub .shop-sidebar__count {
  opacity: .8;
}

/* ==========================================================================
   店铺头部：头像列（头像 + 查看资质）
   「查看资质」从店名旁移到头像正下方，与头像同宽居中。
   ========================================================================== */
.shande-shop-header .shop-avatar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* .shop-info__name a 的 margin-left 只作用于店名旁的链接，这里需要归零 */
.shande-shop-header .shop-avatar-col .shop-qual-link {
  margin: 0;
  font-size: 12px;
  line-height: 1;
  color: #86909c;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s;
}

.shande-shop-header .shop-avatar-col .shop-qual-link:hover {
  color: #096ddd;
}

/* ==========================================================================
   店铺信息区：店名 → 销量 → 标签
   源码顺序是「店名 → 标签 → 销量」，销量作为经营体量更贴近店名，故上移一位。
   源码只给 name / tags 设了 4px 下边距，销量本身没有，换位后需补间距。
   ========================================================================== */
.shande-shop-header .shop-info__stat {
  margin-bottom: 8px;
}

/* 标签行现在是最后一行，去掉源码给它的下边距，避免信息区底部多出空白 */
.shande-shop-header .shop-info__tags:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   资质弹窗：脱敏值、空态、右下角审核印章
   ========================================================================== */

/* 脱敏值只做字距区分，不再挂「已脱敏」小标签（整体是否脱敏由印章与底部说明表达） */
.shande-shop-header .qual-modal__value--masked {
  letter-spacing: 0.5px;
}

.shande-shop-header .qual-modal__empty {
  margin: 0;
  padding: 22px 0;
  text-align: center;
  font-size: 13px;
  color: #86909c;
}

/* dialog 设了 overflow-y:auto，按规范另一轴的 visible 会被当作 auto 计算，
   因此内部任何横向溢出都会冒出一条左右滚动条。印章旋转后的外接盒比自身宽，
   这里显式关掉横轴，避免视觉溢出被当成可滚动内容。 */
.shande-shop-header .qual-modal__dialog {
  overflow-x: hidden;
}

/* 印章走正常流并靠右（margin-left:auto），不用绝对定位：
   绝对定位需要靠 padding-bottom 数值去避让，一旦文案行数变化就会压住内容
   （旋转后外接高约 95px，比自身 78px 更高，很容易算漏）。
   流内布局由浏览器自己撑开高度，任何行数都不会与文字重叠。 */
.shande-shop-header .qual-modal__seal {
  /* 内圈 ::before 需要定位上下文 */
  position: relative;
  /* 右侧留 10px：78px 方块旋转 14° 后两侧各外扩约 8px，留白避免贴边溢出 */
  margin: 18px 10px 2px auto;
  width: 78px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #d9363e;
  border-radius: 50%;
  color: #d9363e;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  letter-spacing: 0.5px;
  transform: rotate(-14deg);
  opacity: 0.82;
  pointer-events: none;
  user-select: none;
}

/* 印章内圈：双线更接近实体章 */
.shande-shop-header .qual-modal__seal::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(217, 54, 62, 0.55);
  border-radius: 50%;
}

/* ==========================================================================
   扫码进店：完整图标与文字按钮，和关注入口放在同一操作区
   ========================================================================= */

.shande-shop-header .shop-info {
  min-width: 0;
  overflow-wrap: anywhere;
}

.shande-shop-header .shop-info__tags {
  flex-wrap: wrap;
}

.shande-shop-header .shop-actions {
  align-items: center;
}

.shande-shop-header .shop-qr-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 7px 13px;
  border: 1px solid #d8e7f9;
  border-radius: 6px;
  background: #f3f8ff;
  color: #096ddd;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}

.shande-shop-header .shop-qr-button:hover {
  border-color: #96bdf0;
  background: #eaf3ff;
  color: #096ddd;
}

.shande-shop-header .shop-qr-button:focus-visible {
  outline: 2px solid #096ddd;
  outline-offset: 3px;
}

.shande-shop-header .shop-qr-button__icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

/* 手机操作区在店铺信息后独占一行，按钮留足触摸面积，文字可换行。
   商品列数和卡片封面尺寸继续使用 Elementor 现有设置。 */
@media (max-width: 768px) {
  /* 资质译文只在头像列内换行，不挤占店铺名称的剩余宽度。 */
  .shande-shop-header .shop-avatar-col {
    flex: 0 0 64px;
    width: 64px;
  }

  .shande-shop-header .shop-avatar-col .shop-qual-link {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    line-height: 1.35;
  }

  .shande-shop-header .shop-actions {
    position: static;
    top: auto;
    right: auto;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 14px;
    gap: 10px;
  }

  .shande-shop-header .shop-actions .shande-follow-btn,
  .shande-shop-header .shop-actions .shop-qr-button {
    flex: 1 1 120px;
    min-width: 0;
    max-width: 100%;
    min-height: 40px;
    height: auto;
    justify-content: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* ==========================================================================
   扫码进店弹窗：二维码即时绘制
   ========================================================================== */

/* 原生关闭按钮保留既有尺寸与图标字号，取消主题按钮的默认填充。 */
.shande-shop-header .qr-modal__close {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 1;
}

/* qrcodejs 会在容器内插入 canvas 与 img，统一居中并去掉源码里的静态背景图位 */
.shande-shop-header .qr-modal__img {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: none;
  background: #fff;
}

.shande-shop-header .qr-modal__img canvas,
.shande-shop-header .qr-modal__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 二维码下方明文地址：便于 PC 端直接复制，也用于核对扫码目标 */
.shande-shop-header .qr-modal__url {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: #a8abb2;
  word-break: break-all;
  text-align: center;
}

/* 二维码库未就绪时的降级链接，避免留一个空白方块 */
.shande-shop-header .qr-modal__fallback {
  padding: 0 14px;
  font-size: 12px;
  line-height: 1.6;
  color: #096ddd;
  text-align: center;
  text-decoration: none;
}

/* ==========================================================================
   商家类型标签
   源码 .shop-info__tag 是橙色（星级用），类型标签改为主色系描边，
   与粉丝数标签区分开。
   ========================================================================== */
.shande-shop-header .shop-info__tag--type {
  background: #eff6ff;
  color: #096ddd;
}

/* Very narrow phones: keep complete product names readable in one column.
   The Elementor outer gutter remains; remove only the duplicated inner gutter.
   Ordinary mobile, tablet, drawer and footer layouts retain their current rules. */
@media (max-width: 360px) {
  .shande-shop-content .shop-content {
    padding-left: 0;
    padding-right: 0;
  }
  .shande-shop-content .shop-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}