/* 电商动态积木的样式 —— 类目导航面板 / 品牌墙 / 类目商品分组。
 *
 * 由 website_sale 自己发（view/templates.xml 的 base_frontend_layout 补丁插 <link>），
 * 不塞进 website 的 snippets.css：那一份是 tools/build_snippet_css.py 从 Odoo 的片段
 * SCSS 编出来的**产物**，手改会在下一次重跑生成器时无声消失。
 *
 * 配色一律走主题变量（--o-color-* / --bs-*），只在没有对应变量的地方用中性灰。
 * 写死颜色的话，换主题时这几个积木会是全站唯一没跟着变的那几块。
 *
 * ⚠️ 前台与建站器画布共用这一份。画布是 srcdoc iframe，继承父页面 base URL，
 * 页面 <head> 里的 <link> 在画布里同样生效 —— 编辑态与访客态因此不会对不上
 * （同 website 的 grid.css 那条注释）。
 */

/* ══════════════════ 通用 ══════════════════ */

/* 建站器画布里的"这里将显示…"提示条。前台不会出现（填充器只在 Editor 时产出）。 */
.o_wsale_snippet_notice {
  border-style: dashed;
}

/* ══════════════════ 类目导航面板 ══════════════════ */

.o_wsale_catnav {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: .5rem;
  overflow: hidden;
  background: var(--bs-body-bg, #fff);
  /* 面板比左栏高时整体跟着长，不裁切；矮时左栏撑满（min-height 由内容定）。 */
  min-height: 20rem;
}

/* ── 左栏：一级类目 ── */
.o_wsale_catnav_aside {
  flex: 0 0 15rem;
  max-width: 15rem;
  background: var(--bs-secondary-bg, #f8f9fa);
  border-right: 1px solid var(--bs-border-color, #dee2e6);
  padding: .5rem 0;
  /* 类目多到装不下时**只让左栏自己滚**，不撑高整块积木。 */
  max-height: 34rem;
  overflow-y: auto;
}

.o_wsale_catnav_root_link {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  color: inherit;
  text-decoration: none;
  font-size: .95rem;
  line-height: 1.4;
}

.o_wsale_catnav_root_name {
  flex: 1 1 auto;
  /* 类目名可以很长（"微控制器 / 逻辑器件"），两行封顶后省略，不推歪箭头。 */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.o_wsale_catnav_chevron {
  flex: 0 0 auto;
  opacity: .35;
  transition: opacity .15s ease;
}

.o_wsale_catnav_root:hover .o_wsale_catnav_root_link,
.o_wsale_catnav_root.active .o_wsale_catnav_root_link {
  background: var(--bs-body-bg, #fff);
  color: var(--o-color-1, #714b67);
  font-weight: 600;
}

.o_wsale_catnav_root:hover .o_wsale_catnav_chevron,
.o_wsale_catnav_root.active .o_wsale_catnav_chevron {
  opacity: 1;
}

.o_wsale_catnav_icon {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
  flex: 0 0 auto;
}

/* ── 右侧：二三级面板 ── */
.o_wsale_catnav_panels {
  flex: 1 1 auto;
  min-width: 0; /* 不给的话内部的长链接行会把 flex 容器撑破 */
  padding: 1.25rem 1.5rem;
}

/* 默认全部隐藏，显示哪一个由 .active 决定。
   ★ 用 display:none 而不是 visibility：面板叠在一起时后面那些仍会占位，
   积木会平白高出好几屏。 */
.o_wsale_catnav_panel {
  display: none;
}

.o_wsale_catnav_panel.active {
  display: block;
}

/* **无 JS 兜底**：脚本没跑时至少显示第一个面板，否则右边一大片空白，看着就是
   积木坏了 —— 而建站器画布**一定**会走到这一支：画布把 <script> 全剥掉
   （见 vertex editor 的说明）。JS 一跑就给容器打上 o_has_active，这条兜底随即让位。 */
.o_wsale_catnav_panels:not(.o_has_active) > .o_wsale_catnav_panel:first-child {
  display: block;
}

.o_wsale_catnav_panel_head {
  margin-bottom: 1rem;
}

.o_wsale_catnav_panel_title {
  font-size: 1.15rem;
  font-weight: 700;
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.o_wsale_catnav_panel_title:hover {
  color: var(--o-color-1, #714b67);
}

.o_wsale_catnav_group {
  padding-bottom: .75rem;
  margin-bottom: .75rem;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.o_wsale_catnav_group:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.o_wsale_catnav_group_title {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  margin-bottom: .5rem;
}

.o_wsale_catnav_group_title:hover {
  color: var(--o-color-1, #714b67);
}

.o_wsale_catnav_leaf {
  display: block;
  padding: .2rem 0;
  font-size: .9rem;
  color: var(--bs-secondary-color, #6c757d);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.o_wsale_catnav_leaf:hover {
  color: var(--o-color-1, #714b67);
}

/* 5 列版式：Bootstrap 没有 col-lg-2.4，用自定义 flex 基准补上 */
@media (min-width: 992px) {
  .o_wsale_catnav_leaves .o_wsale_col_5 {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

/* 窄屏：左栏与面板堆叠，左栏变成横向滚动的标签条 */
@media (max-width: 767.98px) {
  .o_wsale_catnav {
    flex-direction: column;
    min-height: 0;
  }
  .o_wsale_catnav_aside {
    flex: 0 0 auto;
    max-width: none;
    max-height: none;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    padding: 0;
  }
  .o_wsale_catnav_root {
    flex: 0 0 auto;
  }
  .o_wsale_catnav_root_link {
    white-space: nowrap;
    padding: .6rem .9rem;
  }
  .o_wsale_catnav_root_name {
    -webkit-line-clamp: 1;
  }
  .o_wsale_catnav_chevron {
    display: none;
  }
  .o_wsale_catnav_panels {
    padding: 1rem;
  }
}

/* ══════════════════ 品牌墙 ══════════════════ */

.o_wsale_brand_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 100%;
  padding: 1rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: .5rem;
  background: var(--bs-body-bg, #fff);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

.o_wsale_brand_card:hover {
  border-color: var(--o-color-1, #714b67);
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08);
  transform: translateY(-2px);
}

.o_wsale_brand_logo_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 3.5rem;
}

.o_wsale_brand_logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* 灰度到彩色是品牌墙的惯例做法，让一排 logo 观感统一；hover 才现原色。
     ★ 不用 opacity 压：白底 logo 压透明度会糊成一片。 */
  filter: grayscale(100%);
  opacity: .75;
  transition: filter .15s ease, opacity .15s ease;
}

.o_wsale_brand_card:hover .o_wsale_brand_logo {
  filter: none;
  opacity: 1;
}

/* 没传 logo 的品牌出名字 —— 破图框比没有 logo 糟得多，而"刚建好还没传图"
   是最常见的状态。 */
.o_wsale_brand_fallback {
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
  color: var(--bs-secondary-color, #6c757d);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.o_wsale_brand_name {
  font-size: .85rem;
  text-align: center;
  color: var(--bs-secondary-color, #6c757d);
}

.o_wsale_brand_count {
  font-size: .75rem;
  color: var(--bs-secondary-color, #6c757d);
  opacity: .8;
}

/* ══════════════════ 类目商品分组 ══════════════════ */

.o_wsale_cat_group_head {
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  padding-bottom: .5rem;
}

/* ══════════════════ 5 列网格 ══════════════════ */
/* Bootstrap 的 12 栏分不出 5 列。商品网格选 5 列时由 Go 下发 o_wsale_col_5，
   在这里给 20% 基准（栅格 class 由 Go 算好下发，模板里不做算术）。 */
@media (min-width: 992px) {
  .o_wsale_snippet_grid .o_wsale_col_5,
  .o_wsale_brands_grid .o_wsale_col_5,
  .o_wsale_mega_cats .o_wsale_col_5 {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

/* ══════════════════ 页头 mega menu 的三档版式 ══════════════════
 *
 * 分栏（默认，`.o_wsale_mega_cats`）不需要专属规则 —— 它就是一行 Bootstrap 栅格，
 * 面板由 website 的 header.css 撑成整页宽（`.o_mega_menu { width: 100% }`）。
 * 下面两档要动的正是那个前提。
 */

/* ── ① 悬浮（flyout）───────────────────────────────────────────
 * 图示形态（DigiKey / Mouser 那类目录站）：**挂在那颗菜单项下面**的一张窄卡片，
 * 鼠标停在哪个一级类目，哪一项的二/三级就从右边贴着浮出来。
 *
 * ★★★ 横竖两个方向的锚点**不在同一个盒子上**，这一条是整块最容易改坏的地方：
 *    - 竖直方向要贴**导航条底边**。用户 2026-08-23 报的"偏移了很多"就是这个：
 *      片段自带 `pt24 pb24`，而 theme.css 的间距 utility 是
 *      `calc(24px * var(--o-spacing-scale))`、本站 scale 1.35 —— 卡片悬在导航条
 *      下方 32.4px 的空中，中间一段透明。分栏档里那圈留白是面板的内边距（对的），
 *      悬浮档里它只是把卡片推下去。这一档清零。
 *    - 水平方向要贴**那颗菜单项**。第一版靠 `.container` 的内容边缘对齐，真栈量出来
 *      1600 视口下卡片 left=152、按钮 left=152，看着是齐的 —— **那纯属巧合**：这份
 *      菜单恰好是导航条第一项，换到第二项就整个错开，而版式一个字都没改。
 *
 *    两者冲突：给 li 加 `position:relative` 能对齐水平，但 `top:100%` 跟着变成
 *    "菜单项底边"，卡片就压进页头里去了（实测 1000 视口下菜单项换行，卡片顶边比
 *    导航条底边高 48px，直接盖住页头下半截）。
 *
 *    解法是 **`left: auto`**：绝对定位元素在 `left/right/width` 都是 auto 时，
 *    用的是它的**静态位置** —— 也就是"不定位的话它会在哪儿"，即那颗 li 的内容
 *    左边缘。而包含块仍是 `nav.navbar`（li 上挂着 position-static），所以
 *    `top: 100%` 量的还是导航条。一个属性同时拿到两个锚点，不用 JS。
 *    bootstrap 的 `.dropdown-menu[data-bs-popper]{top:100%;left:0}` 特异度 (0,2,0)
 *    正好打平，所以下面第二条选择器带上 `[data-bs-popper]` 压到 (0,3,0)。
 * ★ `pointer-events: none` 留着：`.o_mega_menu` 的盒子现在收缩到卡片大小了，但
 *    片段/容器的内边距一旦被谁改回来，那圈透明的边就会挡住下面的商品，而
 *    `data-bs-auto-close="outside"` 认为点在菜单**里面**、连关都不关 —— 表现是
 *    页面卡死。卡片自己收回 auto。
 * ★ 代价（已知，未修）：二级面板从卡片右边浮出，这份菜单要是挂在导航条**最右边**，
 *    面板会顶到视口外。宽度按 100vw 夹了一道，够用到菜单项落在左侧 2/3 内；真要挂
 *    最右边，得再给一档"向左浮出"的开关。
 */
.o_mega_menu:has(.o_wsale_mega_flyout),
.o_mega_menu:has(.o_wsale_mega_flyout)[data-bs-popper] {
  /* width:auto 压 header.css 的 width:100%；两者都是 (0,2,0)，靠加载顺序 */
  width: auto;
  left: auto;                    /* ← 静态位置 = 那颗菜单项的左边缘 */
  background-color: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: none;
}

/* 片段与容器的留白清零：卡片贴着导航条挂下来。间距 utility 带 !important，
   这里也得带（(0,2,0) + !important）。 */
.o_mega_menu:has(.o_wsale_mega_flyout) > .s_mega_menu_wsale_categories {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.o_mega_menu:has(.o_wsale_mega_flyout) .container,
.o_mega_menu:has(.o_wsale_mega_flyout) .container-fluid {
  width: auto;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* 片段根节点的底色也要撤掉。website 的 header.css 里有一条
   `.o_mega_menu > .o_colored_level { background-color: var(--o-cc-bg) }`
   （它在补 theme.css 抹平 o_cc 底色的坑，见那边的注释），特异度 (0,2,0)；
   这里 (0,3,0) 压过它，不必 !important，也不影响另外两档。 */
.o_mega_menu:has(.o_wsale_mega_flyout) > .o_colored_level {
  background-color: transparent;
}

.o_wsale_mega_flyout {
  /* 浮出面板的定位面。列表宽度只此一处，面板的 left/width 都从它算 —— 两处各写
     一个数的话，改宽列表就会在中间裂出一条缝或者盖住第一列。 */
  --o-wsale-flyout-w: 17rem;
  position: relative;
  pointer-events: auto;
}

.o_wsale_mega_flyout_list {
  width: var(--o-wsale-flyout-w);
  max-width: 100%;
  padding: .5rem 0;
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: var(--o-wsale-mega-radius, 0);
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .14);
  /* 类目多到装不下时列表自己滚，不把页头撑掉半屏。 */
  max-height: min(70vh, 40rem);
  overflow-y: auto;
}

/* 浮出面板是 li 的**子节点**，定位却要相对整块 —— 所以 li 保持 static。
   给 li 设 relative 的话面板会贴着那一行，宽度也只剩一行的高度可用。 */
.o_wsale_mega_flyout_item {
  position: static;
}

.o_wsale_mega_flyout_link {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  color: inherit;
  text-decoration: none;
  font-size: .95rem;
  line-height: 1.4;
}

.o_wsale_mega_flyout_name {
  flex: 1 1 auto;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.o_wsale_mega_flyout_chevron {
  flex: 0 0 auto;
  opacity: .35;
  transition: opacity .15s ease;
}

.o_wsale_mega_flyout_item:hover > .o_wsale_mega_flyout_link,
.o_wsale_mega_flyout_item:focus-within > .o_wsale_mega_flyout_link {
  background: var(--bs-secondary-bg, #f8f9fa);
  color: var(--o-color-1, #714b67);
  font-weight: 600;
}

.o_wsale_mega_flyout_item:hover > .o_wsale_mega_flyout_link .o_wsale_mega_flyout_chevron {
  opacity: 1;
}

/* 「查看全部」压在最后一格，与类目行区分开（截断之后没有它，用户以为店里
   就这几个类目）。 */
.o_wsale_mega_flyout_more {
  margin-top: .25rem;
  padding-top: .25rem;
  border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.o_wsale_mega_flyout_all {
  display: block;
  padding: .5rem 1rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--o-color-1, #714b67);
  text-decoration: none;
}

/* 浮出面板：贴着列表右边，**零间距**。留一条缝的话鼠标从列表移到面板的途中
   两边都不 hover，面板当场收起 —— 那条缝里没有任何东西能把 hover 接住，
   而面板本身是 li 的后代，只要一路都在 li 的盒子里 hover 就不会断。 */
.o_wsale_mega_flyout_panel {
  display: none;
  position: absolute;
  top: 0;
  left: var(--o-wsale-flyout-w);
  /* ★ 不能写 `calc(100% - ...)`：定位祖先是那颗菜单项（宽百来像素），算出来是负数，
     min() 取负、面板被夹成 0 宽 —— 表现是"停上去什么也没浮出来"。按视口算。 */
  width: min(46rem, calc(100vw - var(--o-wsale-flyout-w) - 4rem));
  min-height: 100%;
  max-height: min(70vh, 40rem);
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-left: 0;
  border-radius: 0 var(--o-wsale-mega-radius, 0) var(--o-wsale-mega-radius, 0) 0;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .14);
  z-index: 1;
}

.o_wsale_mega_flyout_item:hover > .o_wsale_mega_flyout_panel,
.o_wsale_mega_flyout_item:focus-within > .o_wsale_mega_flyout_panel {
  display: block;
}

.o_wsale_mega_flyout_panel_head {
  margin-bottom: 1rem;
}

.o_wsale_mega_flyout_panel_title {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: inherit;
  text-decoration: none;
}

.o_wsale_mega_flyout_panel_title:hover {
  color: var(--o-color-1, #714b67);
}

.o_wsale_mega_flyout_group_title {
  display: block;
  margin-bottom: .35rem;
  font-weight: 600;
  font-size: .95rem;
  color: inherit;
  text-decoration: none;
}

.o_wsale_mega_flyout_group_title:hover {
  color: var(--o-color-1, #714b67);
}

.o_wsale_mega_flyout_leaf {
  display: block;
  padding: .15rem 0;
  font-size: .875rem;
  color: var(--bs-secondary-color, #6c757d);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.o_wsale_mega_flyout_leaf:hover {
  color: var(--o-color-1, #714b67);
}

/* 窄屏与触屏：没有 hover 就没有"浮出"这回事 —— 展开成一份缩进的嵌套清单。
   ★ 这条同时兜住**手指**：`(hover: none)` 覆盖真正的触屏，而带触摸屏的笔记本
   仍按鼠标走（同 wsale_snippets.js 里 isTouchLike 的判据）。JS 一行都不用，
   建站器画布（<script> 被剥光）里因此也是对的。 */
@media (max-width: 991.98px), (hover: none) {
  .o_wsale_mega_flyout_list {
    width: 100%;
    max-height: none;
    overflow: visible;
    box-shadow: none;
  }
  .o_wsale_mega_flyout_panel {
    display: block;
    position: static;
    width: auto;
    max-height: none;
    overflow: visible;
    padding: 0 1rem .75rem 2rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .o_wsale_mega_flyout_panel_head {
    display: none; /* 上面那行类目名就是标题，再来一遍是重复 */
  }
  .o_wsale_mega_flyout_chevron {
    transform: rotate(90deg);
    opacity: .5;
  }
}

/* 竖排导航（汉堡/侧栏）里同样按嵌套清单走：抽屉本来就窄，再浮一层出去会跑到
   屏幕外面。这里不能只靠上面那条宽度媒体查询 —— 侧栏版式在 ≥lg 也是竖排的。
   ★ 上面那组"锚到菜单项"的规则要在这里**逐条撤回**：它们与 header.css 的
     `.o_mega_menu_is_offcanvas .o_mega_menu` 特异度打平 (0,2,0)，而本文件加载在
     后面 —— 不撤的话抽屉里的面板会缩成卡片那么宽、且脱离随流排布。 */
.o_mega_menu_is_offcanvas .o_mega_menu:has(.o_wsale_mega_flyout) {
  position: static;
  width: 100%;
}

.o_mega_menu_is_offcanvas .o_wsale_mega_flyout_list {
  width: 100%;
  max-height: none;
  overflow: visible;
  box-shadow: none;
}

.o_mega_menu_is_offcanvas .o_wsale_mega_flyout_panel {
  display: block;
  position: static;
  width: auto;
  max-height: none;
  overflow: visible;
  padding: 0 1rem .75rem 2rem;
  border: 0;
  box-shadow: none;
}

/* ── 圆角：侧栏那个开关落在 section 上，看得见的却是卡片 ──────────
 * 「圆角」是通用开关（builtin_options 的 classOption('rounded')），它往**积木根节点**
 * 也就是 section 上加 bootstrap 的 rounded-* 类。可悬浮档里 section 是透明的舞台、
 * 图卡档里 section 只是底板 —— 圆的是卡片，卡片的 border-radius 写死在下面这几条
 * 规则里，于是"圆角：无"点了没反应，而类确实加上去了、两边代码看着都对。
 *
 * 把 section 上那组类换算成一个变量转发给卡片。**没有任何 rounded-* 类 = 没有圆角**
 * —— 只有这样"无"才真的是无（"无"这一档发出的是空字符串，也就是把类删掉，
 * 没法用"有没有类"以外的信号区分"没选过"和"选了无"）。想要圆角就在侧栏选一档。
 */
.s_mega_menu_wsale_categories            { --o-wsale-mega-radius: 0; }
.s_mega_menu_wsale_categories.rounded    { --o-wsale-mega-radius: var(--bs-border-radius, .375rem); }
.s_mega_menu_wsale_categories.rounded-1  { --o-wsale-mega-radius: var(--bs-border-radius-sm, .25rem); }
.s_mega_menu_wsale_categories.rounded-2  { --o-wsale-mega-radius: var(--bs-border-radius, .375rem); }
.s_mega_menu_wsale_categories.rounded-3  { --o-wsale-mega-radius: var(--bs-border-radius-lg, .5rem); }
.s_mega_menu_wsale_categories.rounded-4  { --o-wsale-mega-radius: var(--bs-border-radius-xl, 1rem); }
.s_mega_menu_wsale_categories.rounded-5  { --o-wsale-mega-radius: var(--bs-border-radius-xxl, 2rem); }
/* pill 在一张几百像素高的卡片上照抄 50rem 会削成橄榄球，夹到 1.5rem。 */
.s_mega_menu_wsale_categories.rounded-pill { --o-wsale-mega-radius: 1.5rem; }

/* ── ② 图卡（cards）────────────────────────────────────────────
 * 一级类目的图 + 名字铺成一排卡片。没传图的出名字，不出破图框（同品牌墙）。
 */
.o_wsale_mega_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  height: 100%;
  padding: .75rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: var(--o-wsale-mega-radius, 0);
  background: var(--bs-body-bg, #fff);
  color: inherit;
  text-decoration: none;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

.o_wsale_mega_card:hover {
  border-color: var(--o-color-1, #714b67);
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08);
  transform: translateY(-2px);
}

.o_wsale_mega_card_media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 5rem;
}

.o_wsale_mega_card_img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 没传图时的占位图标。**不拿类目名顶替** —— 卡片下面那行本来就是名字，
   顶替的结果是同一个词上下印两遍（品牌墙那边名字是可关的，这里不是）。 */
.o_wsale_mega_card_ph {
  font-size: 2rem;
  color: var(--bs-border-color, #dee2e6);
}

.o_wsale_mega_card_name {
  font-size: .9rem;
  font-weight: 600;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}