/*
 * Sweatec 主题 —— 把 OpenCart 4.1 的 Bootstrap 5 标记贴成旧站的皮
 *
 * 方案 A：移植【视觉层】（配色、字体、尺寸、版面意图），在 OC4 自己的模板上重新贴皮，
 * 不搬 OC2 的 Bootstrap 3 DOM 结构。
 *
 * 为什么不整树照搬旧模板：
 *   旧站是 BS3 + .tpl，OC 4.1 是 BS5 + Twig，DOM 类名与栅格系统完全不同。
 *   硬搬进来等于放弃 OpenCart 今后所有的模板兼容与安全更新 —— 而 sweatec.com
 *   和 sweatec.cn 变成现在这个烂摊子，成因正是主题被改到无法再跟随升级。
 *
 * 设计令牌取自旧站 catalog/view/theme/default/sweatec/css/main.css（实测提取）：
 *   主色 #40bcf6（sweatec 蓝，出现 19 次）  强调 #e0162a（红）  点缀 #c8a93f（金）
 *   正文 #232323 / #666      页面底色 #f7f7f7    顶部条 #f8f8f8 + 下边框 #f1f6f7
 *   内容宽度 1000px          字体 微软雅黑 / Helvetica Neue / Arial
 */

:root {
    --sw-primary:    #40bcf6;
    --sw-primary-dk: #1ba3e0;
    --sw-accent:     #e0162a;
    --sw-gold:       #c8a93f;
    --sw-text:       #232323;
    --sw-muted:      #666;
    --sw-bg:         #f7f7f7;
    --sw-topbar:     #f8f8f8;
    --sw-border:     #e8e8e8;
    --sw-width:      1170px;   /* = 旧站 Bootstrap 3 的 .container 宽度 */
}

/* ── 基础 ───────────────────────────────────────────────────────── */
body {
    background: var(--sw-bg);
    color: var(--sw-text);
    /* 旧站正文用的是宋体 12px，在现代屏幕上过小且渲染差。
       保留中文优先的意图，改用微软雅黑打头、字号提到 14px。
       这是方案 A 里我唯一主动偏离旧站的地方 —— 可读性优先，其余全部照旧。 */
    font-family: "Microsoft YaHei", "微软雅黑", "Helvetica Neue", Arial, "PingFang SC", sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

a { color: var(--sw-primary-dk); text-decoration: none; }
a:hover { color: var(--sw-primary); text-decoration: underline; }


/* ── 按钮 ───────────────────────────────────────────────────────── */
.btn-primary {
    background-color: var(--sw-primary);
    border-color: var(--sw-primary);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--sw-primary-dk);
    border-color: var(--sw-primary-dk);
}
.btn-outline-primary { color: var(--sw-primary); border-color: var(--sw-primary); }
.btn-outline-primary:hover { background: var(--sw-primary); color: #fff; }
.btn-danger { background-color: var(--sw-accent); border-color: var(--sw-accent); }

/* ── 标题 ───────────────────────────────────────────────────────── */
h1, h2, h3, h4 { color: var(--sw-text); font-weight: 600; }
h1 { font-size: 26px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }

/* 区块标题下的蓝色短线 —— 旧站首页各板块的标志性样式 */
.content-top h2, .content-top h3,
#content > h1, #content > h2 {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.content-top h2::after, .content-top h3::after,
#content > h1::after, #content > h2::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 48px; height: 3px;
    background: var(--sw-primary);
}

/* ── 商品卡片 ───────────────────────────────────────────────────── */
.product-thumb {
    background: #fff;
    border: 1px solid var(--sw-border);
    border-radius: 2px;
    transition: box-shadow .2s, border-color .2s;
    margin-bottom: 20px;
}
.product-thumb:hover {
    border-color: var(--sw-primary);
    box-shadow: 0 2px 12px rgba(64, 188, 246, .18);
}
.product-thumb .image img { width: 100%; height: auto; }
.product-thumb .caption { padding: 14px; min-height: 110px; }
.product-thumb .caption h4 { font-size: 15px; margin-bottom: 8px; }
.product-thumb .caption h4 a { color: var(--sw-text); }
.product-thumb .caption h4 a:hover { color: var(--sw-primary); }
.product-thumb .description { color: var(--sw-muted); font-size: 13px; }

.price { color: var(--sw-accent); font-size: 18px; font-weight: 600; }
.price-old { color: #999; text-decoration: line-through; font-size: 14px; font-weight: 400; }
.price-new { color: var(--sw-accent); }
.price-tax { color: var(--sw-muted); font-size: 12px; font-weight: 400; }

/* ── 轮播 ───────────────────────────────────────────────────────── */
.carousel-item img { width: 100%; height: auto; }
.carousel-indicators [data-bs-target] { background-color: var(--sw-primary); }

/* ── 侧栏与列表 ─────────────────────────────────────────────────── */
.list-group-item.active { background: var(--sw-primary); border-color: var(--sw-primary); }
.list-group-item a { color: var(--sw-text); }
.list-group-item a:hover { color: var(--sw-primary); }

/* ── 表单 ───────────────────────────────────────────────────────── */
.form-control:focus, .form-select:focus {
    border-color: var(--sw-primary);
    box-shadow: 0 0 0 .2rem rgba(64, 188, 246, .2);
}

/* ── 移动端 ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    h1 { font-size: 21px; }
}

/* ── 英文站字体（旧站 header.tpl 里内联的 @font-face，挪到这里）────
   旧站用 * { font-family: … !important } 全局压制，会连带压掉 Font Awesome 6 的
   图标字体（OC 4.1 用的是 "Font Awesome 6 Free"，不在旧站那份字体清单里），
   所以改为只落在 body 上靠继承生效，不用 !important。视觉一致，图标不会变方块。 */
@font-face {
    font-family: 'EnglishFont_Regular';
    src: url('../css/font/LiberationSans-Regular.woff') format('woff'),
         url('../css/font/LiberationSans-Regular.ttf')  format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'EnglishFont_Regular';
    src: url('../css/font/LiberationSans-Bold.woff') format('woff'),
         url('../css/font/LiberationSans-Bold.ttf')  format('truetype');
    font-weight: bold;
    font-display: swap;
}
html[lang^="en"] body,
html[lang^="en"] body button,
html[lang^="en"] body input,
html[lang^="en"] body select,
html[lang^="en"] body textarea {
    font-family: EnglishFont_Regular, Arial, "Helvetica Neue", sans-serif;
}