/*
 * Bootstrap 3 → 5 兼容垫片
 *
 * 为什么需要它：
 *   旧站的 header / footer 是 Bootstrap 3 标记，而 OC 4.1 的商品/分类/结账/账户页是
 *   Bootstrap 5 标记。两套框架的 CSS 同时加载会互相覆盖（.container/.row/.col-* 同名不同实现），
 *   这正是上一轮首页排版崩掉的原因。
 *
 * 所以只在【首页】整套换成 BS3（首页正文 1292 行全是 BS3 标记，非换不可），
 * 其余页面保持 BS5，靠这个文件把 header/footer 用到的少数 BS3 独有类补回来。
 * 补的是 BS5 里【不存在】的类 —— 绝不重定义 .container/.row/.col-*，那会打架。
 *
 * 首页也会加载本文件：BS3 已经原生提供这些类，此处规则与 BS3 等价，重复无害。
 */

/* ── 内容宽度 ───────────────────────────────────────────────────
   旧站 .container 是 Bootstrap 3 的 1170px；BS5 到 xxl 会放到 1320px，
   页脚会比旧站宽一截。钉死 1170，两种模式下与旧站一致。 */
.container { max-width: 1170px; }

/* ── 浮动（BS5 叫 float-start/float-end）─────────────────────────── */
.pull-left  { float: left  !important; }
.pull-right { float: right !important; }

/* ── 响应式显隐（BS5 叫 d-none / d-*-block，断点也不同）───────────── */
@media (max-width: 767px)  { .hidden-xs { display: none !important; } }
@media (min-width: 768px) and (max-width: 991px)  { .hidden-sm { display: none !important; } }
@media (min-width: 992px) and (max-width: 1199px) { .hidden-md { display: none !important; } }
@media (min-width: 1200px) { .hidden-lg { display: none !important; } }

/* ── 栅格偏移（BS5 叫 offset-md-*）───────────────────────────────── */
.col-xs-offset-3 { margin-left: 25%; }
@media (min-width: 768px)  { .col-sm-offset-3 { margin-left: 25%; } }
@media (min-width: 992px)  { .col-md-offset-6 { margin-left: 50%; } }

/* ── 图片与块（BS5 叫 img-fluid / mx-auto d-block）──────────────── */
.img-responsive { display: block; max-width: 100%; height: auto; }
.center-block   { display: block; margin-left: auto; margin-right: auto; }

/* ── 行内列表（BS5 需要 .list-inline-item，旧标记没有）──────────── */
.list-inline { padding-left: 0; list-style: none; margin-left: -5px; }
.list-inline > li { display: inline-block; padding-left: 5px; padding-right: 5px; }

/* ── .well（BS5 已移除，移动端菜单用它）─────────────────────────── */
.well {
    min-height: 20px; padding: 19px; margin-bottom: 20px;
    background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px;
}

/* ── 下拉箭头（BS5 用伪元素，旧标记用 <span class="caret">）─────── */
.caret {
    display: inline-block; width: 0; height: 0; margin-left: 2px;
    vertical-align: middle; border-top: 4px dashed; border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}
.dropdown-menu-right { right: 0; left: auto; }

/* ── Glyphicons（BS3 自带字体，BS5 完全移除）─────────────────────
   只补 header/footer 实际用到的 5 个图标，字体文件随扩展一起部署。 */
@font-face {
    font-family: 'Glyphicons Halflings';
    src: url(../fonts/glyphicons-halflings-regular.woff2) format('woff2'),
         url(../fonts/glyphicons-halflings-regular.woff)  format('woff'),
         url(../fonts/glyphicons-halflings-regular.ttf)   format('truetype');
    font-display: swap;
}
.glyphicon {
    position: relative; top: 1px; display: inline-block;
    font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: 400;
    line-height: 1; -webkit-font-smoothing: antialiased;
}
.glyphicon-search:before        { content: "\e003"; }
.glyphicon-heart-empty:before   { content: "\e143"; }
.glyphicon-shopping-cart:before { content: "\e116"; }
.glyphicon-list:before          { content: "\e056"; }
.glyphicon-map-marker:before    { content: "\e062"; }
.glyphicon-arrow-right:before   { content: "\e092"; }   /* 知识库面包屑 */

/* ── 折叠（BS3 的 .collapse 默认 display:none，BS5 相同，无需补）──
   但 BS5 的 .collapse:not(.show) 才隐藏 —— 旧标记不带 .show，行为一致。 */

/* ── xs 栅格（BS5 的最小断点叫 .col-*，没有 -xs- 这一档）──────────
   ⚠️ 必须锁在 <768px 里。BS3 的 .col-xs-* 是无条件规则，靠【文件内的先后顺序】
   被后面的 .col-sm-*/.col-md-* 覆盖；本文件在 bootstrap.min.css 之后加载，
   不加媒体查询就会反过来压住 .col-md-3，首页 logo 列会从 25% 变成 50%、
   把右侧图标挤到下一行。只补 <768px 这一段，正是 BS5 缺的那一段。 */
@media (max-width: 767px) {
    .col-xs-3  { position: relative; float: left; width: 25%;  padding-right: 15px; padding-left: 15px; }
    .col-xs-6  { position: relative; float: left; width: 50%;  padding-right: 15px; padding-left: 15px; }
    .col-xs-12 { position: relative; float: left; width: 100%; padding-right: 15px; padding-left: 15px; }
}

/* ── 旧站正文里的 BS3 浮动栅格（信息页内容存在数据库里，改不动）────
   download_app 的三张图用 col-xs-12 col-lg-4，父元素 .app_info 不是 .row。
   BS3 里这些列是 float 所以并排；BS5 里是 flex 子项，父元素不是 flex 就竖排。
   给这几个已知的旧版块单独恢复浮动，不动 BS5 自己的栅格。 */
.app_info::after { content: ""; display: table; clear: both; }
.app_info > [class*="col-"] { float: left; }

/* ── 知识库（newsblog）补齐 ─────────────────────────────────────
   旧模板把这几处写成内联的绝对定位（left:630px / left:450px），
   窗口一窄就跑出容器。改成类，行为一致但不会溢出。 */
.kb-search { position: relative; text-align: right; margin: 20px 0; padding-right: 90px; }
.kb-search .select_input { max-width: 100%; padding-left: 8px; }
.kb-search .button_input { right: 0; top: 0; cursor: pointer; }
.body-kb ul { list-style: none; padding-left: 0; }
.list_li .list_desc   { position: absolute; left: 450px; top: 0; margin: 0; }
.list_li .list_viewed { position: absolute; right: 20px; top: 0; }
.kb-empty { font-size: 20px; text-align: center; padding: 40px 0; }
@media (max-width: 991px) {
    .list_li .list_desc, .list_li .list_viewed { position: static; display: block; }
    .kb-search { padding-right: 0; }
    .kb-search .button_input { position: static; }
}

/* ── 账户下拉（用户反馈"样式太难看"，这里是有意比旧站好看）────── */
#top-links .dropdown-menu {
    min-width: 170px; padding: 6px 0; margin-top: 6px;
    border: 1px solid #e3e8ea; border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
    background: #fff; font-size: 13px;
}
#top-links .dropdown-menu > li > a {
    display: block; padding: 8px 16px; color: #333; white-space: nowrap;
    text-decoration: none; border-left: 3px solid transparent;
}
#top-links .dropdown-menu > li > a:hover {
    background: #f2faff; color: #0099ff; border-left-color: #40bcf6;
}

/* ── 顶部购物车：图标 + 数量角标 + 下拉 ─────────────────────── */
.sw-cart { display: inline-block; position: relative; }
.sw-cart > a { color: inherit; text-decoration: none; }
.sw-cart-count {
    position: absolute; top: -6px; right: -10px; min-width: 17px; height: 17px;
    padding: 0 4px; border-radius: 9px; background: #e0162a; color: #fff;
    font-size: 11px; line-height: 17px; text-align: center; font-weight: 700;
}
.sw-cart-menu {
    min-width: 340px; max-width: 92vw; padding: 10px;
    border: 1px solid #e3e8ea; border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .12); font-size: 13px; text-align: left;
}
.sw-cart-table, .sw-cart-sum { width: 100%; }
.sw-cart-table td { padding: 6px 4px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
.sw-cart-thumb img { width: 46px; height: auto; border: 1px solid #eee; }
.sw-cart-opt { color: #999; font-size: 11px; }
.sw-cart-qty, .sw-cart-total { white-space: nowrap; text-align: right; }
.sw-cart-rm { border: 0; background: none; color: #e0162a; font-size: 18px; line-height: 1; cursor: pointer; }
.sw-cart-sum td { padding: 3px 4px; text-align: right; }
.sw-cart-sum tr:last-child td { font-weight: 700; }
.sw-cart-act { margin: 8px 0 0; display: flex; justify-content: space-between; }
.sw-cart-empty { padding: 26px 10px; text-align: center; color: #999; }

/* ── 商品数量加减 ──────────────────────────────────────────── */
.sw-qty { display: inline-flex; align-items: stretch; }
.sw-qty .sw-qty-btn {
    width: 36px; border: 1px solid #ced4da; background: #f5f7f8; color: #333;
    font-size: 16px; line-height: 1; cursor: pointer; user-select: none;
}
.sw-qty .sw-qty-btn:hover { background: #40bcf6; border-color: #40bcf6; color: #fff; }
.sw-qty input[name="quantity"] {
    width: 56px; text-align: center; border-radius: 0;
    border-left: 0; border-right: 0; min-width: 0;
}
/* 商品页的数量在 BS5 的 .input-group 里，圆角要交给最外面那两个按钮 */
.input-group > .sw-qty { display: inline-flex; }
.input-group > .sw-qty .sw-qty-btn:first-child { border-radius: 0; }

/* 两个下拉都靠右对齐：BS5 交给 Popper 定位（会写内联 transform/left），
   而顶栏这两个在页面最右侧，Popper 算出来会溢出视口。直接钉死右对齐。 */
.sw-cart .dropdown-menu,
#top-links .dropdown-menu {
    right: 0 !important; left: auto !important;
    top: 100% !important; transform: none !important;
}

/* 旧主题给 .dropdown-menu / td a 定了宽度与 16px 字号，购物车下拉会被挤成一列一个词。
   这里按 .sw-cart 作用域覆盖掉，不影响其他下拉。 */
.sw-cart .sw-cart-menu { width: 370px; min-width: 370px; }
.sw-cart .sw-cart-table { table-layout: fixed; }
.sw-cart .sw-cart-table td { font-size: 13px; line-height: 1.45; }
.sw-cart .sw-cart-table td a { font-size: 13px; color: #232323; }
.sw-cart .sw-cart-table td a:hover { color: #0099ff; }
.sw-cart-thumb { width: 58px; }
.sw-cart-qty   { width: 38px; }
.sw-cart-total { width: 72px; }
.sw-cart-rm    { padding: 0 2px; }
.sw-cart .sw-cart-act a { font-size: 13px; }

/* 旧主题的 .well / #top-links li 规则会渗进来：下拉底色发灰、行高过大、
   底部两个按钮被拆成两行。按作用域收一下。 */
.sw-cart .sw-cart-menu { background: #fff; }
.sw-cart .sw-cart-menu > li { display: block; padding: 0; line-height: 1.45; }
.sw-cart .sw-cart-act {
    display: flex !important; align-items: center; justify-content: space-between;
    gap: 12px; padding-top: 8px; border-top: 1px solid #f0f0f0;
}
.sw-cart .sw-cart-act a { white-space: nowrap; }
#top-links .dropdown-menu > li { line-height: 1.3; }

/* 商品名列要宽一点，否则长名字一行一个词 */
.sw-cart .sw-cart-menu { width: 420px; min-width: 420px; }
.sw-cart .sw-cart-table { table-layout: auto; }
.sw-cart .sw-cart-table td:nth-child(2) { width: 52%; }