/* ============================================================
   sy.css — 恩俊煜百货 商城样式（第一部分：基础+页头+首页）
   ============================================================ */
:root{
  --brand:#1a5fb4;
  --brand-dark:#123f7a;
  --accent:#e8a33d;
  --accent-soft:#fdf3e3;
  --bg:#f5f7fa;
  --bg2:#eef1f5;
  --card:#ffffff;
  --line:#e4e8ee;
  --txt:#2b3442;
  --txt2:#5c6b7f;
  --txt3:#8b97a8;
  --ok:#2e9e5b;
  --radius:10px;
  --shadow:0 2px 10px rgba(31,45,66,.07);
  --shadow-lg:0 6px 24px rgba(31,45,66,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",Arial,sans-serif;color:var(--txt);background:var(--bg);font-size:15px;line-height:1.7}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-dark)}
ul,ol{list-style:none}
input,textarea,select,button{font-family:inherit;font-size:inherit;outline:none}
button{cursor:pointer;border:none;background:none}

.sy-container{max-width:1240px;margin:0 auto;padding:0 16px}

/* ---------- 顶部信息条 ---------- */
.sy-topbar{background:#1c2b3f;color:#c7d3e2;font-size:13px}
.sy-topbar-in{display:flex;justify-content:space-between;align-items:center;height:38px}
.sy-topbar a{color:#c7d3e2}
.sy-topbar a:hover{color:#fff}
.sy-topbar .sy-tb-phone{color:#ffd28a;font-weight:600}

/* ---------- 页头 ---------- */
.sy-header{background:#fff;border-bottom:2px solid var(--brand);position:sticky;top:0;z-index:100;box-shadow:0 1px 6px rgba(20,40,70,.06)}
.sy-header-in{display:flex;align-items:center;gap:28px;height:76px}
.sy-logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.sy-logo img{height:44px;width:auto}
.sy-logo b{font-size:20px;color:var(--brand-dark);letter-spacing:1px;white-space:nowrap}
.sy-logo small{display:block;font-size:11px;color:var(--txt3);font-weight:400;letter-spacing:2px}
.sy-nav{flex:1;display:flex;gap:4px;justify-content:flex-end;flex-wrap:wrap}
.sy-nav a{padding:8px 15px;color:var(--txt);font-size:15px;border-radius:6px;white-space:nowrap}
.sy-nav a:hover{color:var(--brand);background:var(--bg2)}
.sy-nav a.sy-on{color:#fff;background:var(--brand);font-weight:600}
.sy-header-r{display:flex;align-items:center;gap:12px;flex-shrink:0}
.sy-cart{position:relative;display:flex;align-items:center;gap:6px;background:var(--accent-soft);color:#9a6b1d;padding:8px 14px;border-radius:8px;font-size:14px;font-weight:600}
.sy-cart em{position:absolute;top:-8px;right:-8px;background:#d63c3c;color:#fff;font-style:normal;font-size:11px;min-width:20px;height:20px;line-height:20px;text-align:center;border-radius:10px;padding:0 5px}
.sy-cart svg{width:20px;height:20px;fill:currentColor}
.sy-user a{padding:8px 13px;font-size:14px;border:1px solid var(--line);border-radius:8px;color:var(--txt2)}
.sy-user a:hover{border-color:var(--brand);color:var(--brand)}

/* ---------- 移动端头部 ---------- */
.sy-mhead{display:none;align-items:center;justify-content:space-between;height:60px}
.sy-mhead .sy-logo img{height:36px}
.sy-mburger{display:flex;flex-direction:column;gap:5px;padding:10px}
.sy-mburger span{width:22px;height:2px;background:var(--brand-dark);border-radius:2px}
.sy-mnav{display:none;background:#fff;border-top:1px solid var(--line);padding:6px 16px 14px}
.sy-mnav a{display:block;padding:12px 4px;border-bottom:1px solid var(--line);color:var(--txt)}
.sy-mnav a.sy-on{color:var(--brand);font-weight:600}

/* ---------- 轮播 ---------- */
.sy-hero{position:relative;background:#dfe6ef;overflow:hidden}
.sy-hero-slide{position:relative}
.sy-hero-slide picture{display:block}
.sy-hero-slide img{width:100%;height:480px;object-fit:cover}
.sy-hero-cap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;background:linear-gradient(90deg,rgba(12,28,48,.55),rgba(12,28,48,.15) 60%,transparent);text-align:center;color:#fff}
.sy-hero-cap h2{font-size:42px;font-weight:700;text-shadow:0 2px 12px rgba(0,0,0,.35);letter-spacing:2px}
.sy-hero-cap p{font-size:19px;opacity:.95;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.sy-hero-cap a{display:inline-block;margin-top:10px;background:var(--accent);color:#3c2c0c;font-weight:600;padding:11px 30px;border-radius:30px;font-size:15px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.sy-hero-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.sy-hero-dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer}
.sy-hero-dots i.sy-on{background:#fff;width:26px;border-radius:6px}

/* ---------- 区块通用 ---------- */
.sy-sec{padding:52px 0}
.sy-sec-alt{background:#fff}
.sy-sec-head{text-align:center;margin-bottom:34px}
.sy-sec-head h2{font-size:28px;color:var(--brand-dark);letter-spacing:2px;position:relative;display:inline-block;padding-bottom:12px}
.sy-sec-head h2::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:46px;height:3px;background:var(--accent);border-radius:2px}
.sy-sec-head p{color:var(--txt3);font-size:14px;margin-top:8px}

/* ---------- 服务条 ---------- */
.sy-serv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sy-serv-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 18px;display:flex;align-items:center;gap:14px}
.sy-serv-item svg{width:40px;height:40px;flex-shrink:0;fill:none;stroke:var(--brand);stroke-width:1.6}
.sy-serv-item h4{font-size:16px;color:var(--brand-dark)}
.sy-serv-item p{font-size:13px;color:var(--txt2);margin-top:3px}

/* ---------- 公司简介 ---------- */
.sy-about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:44px;align-items:center}
.sy-about-img{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg)}
.sy-about-img img{width:100%;height:420px;object-fit:cover}
.sy-about-txt h3{font-size:24px;color:var(--brand-dark);margin-bottom:14px}
.sy-about-txt p{color:var(--txt2);margin-bottom:12px;text-align:justify}
.sy-about-txt ul{margin-top:8px}
.sy-about-txt li{padding:7px 0 7px 26px;position:relative;color:var(--txt2)}
.sy-about-txt li::before{content:"";position:absolute;left:4px;top:15px;width:8px;height:8px;border-radius:3px;background:var(--accent)}
.sy-more{display:inline-block;margin-top:14px;background:var(--brand);color:#fff;padding:10px 26px;border-radius:8px;font-size:14px}

/* ---------- 分类图文 ---------- */
.sy-catrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center;margin-bottom:46px}
.sy-catrow.sy-rev .sy-catrow-img{order:2}
.sy-catrow-img{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.sy-catrow-img img{width:100%;height:340px;object-fit:cover;transition:transform .5s}
.sy-catrow:hover .sy-catrow-img img{transform:scale(1.03)}
.sy-catrow-txt h3{font-size:24px;color:var(--brand-dark);margin-bottom:12px}
.sy-catrow-txt p{color:var(--txt2);margin-bottom:10px;text-align:justify}
.sy-catrow-txt .sy-more{background:var(--accent);color:#3c2c0c}

/* ---------- 商品卡 ---------- */
.sy-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.sy-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:box-shadow .25s,transform .25s;display:flex;flex-direction:column}
.sy-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.sy-card-img{aspect-ratio:1/1;overflow:hidden;background:#fff;position:relative}
.sy-card-img img{width:100%;height:100%;object-fit:contain;transition:transform .4s}
.sy-card:hover .sy-card-img img{transform:scale(1.06)}
.sy-card-body{padding:13px 14px 15px;display:flex;flex-direction:column;flex:1}
.sy-card-body h3{font-size:14px;color:var(--txt);font-weight:600;line-height:1.45;height:2.9em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sy-card-price{display:flex;align-items:baseline;gap:8px;margin-top:10px}
.sy-card-price b{color:#d63c3c;font-size:18px}
.sy-card-price span{color:var(--txt3);font-size:12px;text-decoration:line-through}
.sy-card-btn{margin-top:auto;text-align:center;background:var(--bg2);color:var(--brand-dark);padding:8px 0;border-radius:7px;font-size:13px;margin-top:12px}
.sy-card:hover .sy-card-btn{background:var(--brand);color:#fff}

/* ---------- 列表页横幅 ---------- */
.sy-page-banner{position:relative;background:#1c2b3f;color:#fff;padding:54px 0 46px;text-align:center;overflow:hidden}
.sy-page-banner::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(26,95,180,.35),rgba(26,95,180,.08))}
.sy-page-banner h2{font-size:30px;letter-spacing:3px;position:relative}
.sy-page-banner p{color:#cdd9e8;font-size:14px;margin-top:8px;position:relative}
.sy-crumb{position:relative;margin-top:12px;font-size:13px;color:#9fb0c5}
.sy-crumb a{color:#cdd9e8}
.sy-crumb a:hover{color:#fff}

/* ---------- 列表页主体 ---------- */
.sy-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:26px;padding:30px 0 56px}
.sy-side{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;height:fit-content}
.sy-side h3{font-size:16px;color:var(--brand-dark);padding-bottom:12px;border-bottom:2px solid var(--bg2);margin-bottom:12px}
.sy-side a{display:block;padding:10px 12px;border-radius:7px;color:var(--txt2);font-size:14px;margin-bottom:4px}
.sy-side a:hover{background:var(--bg2);color:var(--brand)}
.sy-side a.sy-on{background:var(--brand);color:#fff}
.sy-main .sy-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.sy-main h2.sy-cattitle{font-size:20px;color:var(--brand-dark);margin-bottom:18px;padding-left:12px;border-left:4px solid var(--accent)}
.sy-pager{display:flex;justify-content:center;gap:8px;margin-top:30px}
.sy-pager a,.sy-pager span{min-width:38px;height:38px;line-height:38px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:7px;font-size:14px;color:var(--txt2)}
.sy-pager a:hover{border-color:var(--brand);color:var(--brand)}
.sy-pager span.sy-on{background:var(--brand);color:#fff;border-color:var(--brand)}