*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#1f3248;background:#eef3f8}
a{text-decoration:none;color:inherit}

.s3-bg{position:fixed;inset:0;z-index:0;background:radial-gradient(circle at 15% -10%,#d9ecff,transparent 45%),radial-gradient(circle at 105% 0,#dff9ec,transparent 35%),linear-gradient(180deg,#f4f8fc,#edf3f8)}

.s3-nav{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:230px minmax(300px,1fr) auto;gap:12px;align-items:center;padding:10px 14px;margin:10px auto 0;width:min(1400px,calc(100% - 20px));border:1px solid #d4e1ef;border-radius:14px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px)}
.s3-brand{display:flex;align-items:center;gap:10px;font-weight:700;color:#113650}
.s3-brand img{width:64px;height:40px;object-fit:cover;border-radius:8px}
.s3-search{display:flex;align-items:center;border:1px solid #cad9e9;border-radius:10px;overflow:hidden;background:#fff}
.s3-search input{flex:1;border:0;padding:10px 12px;font-size:14px;outline:none}
.s3-search button{border:0;background:#eff5fb;padding:10px 14px;cursor:pointer}
.s3-links{display:flex;align-items:center;gap:10px;white-space:nowrap}
.s3-links a{font-size:14px;color:#2f4b67}
.s3-btn{padding:7px 12px;border-radius:999px;background:#11795f;color:#fff !important}
.s3-cart b{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;border-radius:10px;background:#ef4e4e;color:#fff;font-size:12px;padding:0 5px;margin-left:4px}

.s3-hero{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:14px;align-items:stretch;width:min(1400px,calc(100% - 20px));margin:12px auto 0;padding:22px;border-radius:18px;color:#fff;background:linear-gradient(125deg,#0f466f,#0f7b66 58%,#299767);box-shadow:0 18px 34px rgba(9,47,73,.26)}
.s3-kicker{display:inline-block;font-size:12px;padding:4px 10px;border:1px solid rgba(255,255,255,.38);border-radius:999px;background:rgba(255,255,255,.14)}
.s3-hero h1{margin:10px 0 0;font-size:42px;line-height:1.1}
.s3-lead{margin:10px 0 0;max-width:720px;line-height:1.65;color:rgba(255,255,255,.92)}
.s3-chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.s3-chip-row span{font-size:12px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35)}
.s3-hero-side{display:grid;gap:8px}
.s3-hero-side div{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22)}
.s3-hero-side strong{font-size:22px}
.s3-hero-side span{font-size:12px;color:rgba(255,255,255,.88)}

.s3-msg-wrap{position:relative;z-index:1;width:min(1400px,calc(100% - 20px));margin:8px auto 0;display:grid;gap:6px}
.s3-msg{padding:8px 12px;border-radius:8px;background:#eaf4ff;border:1px solid #bdd9f7;color:#2b4f72}

.s3-main{position:relative;z-index:1;display:grid;grid-template-columns:250px minmax(0,1fr);gap:12px;align-items:start;width:min(1400px,calc(100% - 20px));margin:12px auto 18px}
.s3-filter{position:sticky;top:78px;border:1px solid #d5e2f0;border-radius:14px;background:rgba(255,255,255,.9);padding:12px}
.s3-filter h3{margin:8px 0;font-size:14px;color:#1f3b56}
.s3-pill-wrap{display:flex;flex-wrap:wrap;gap:6px}
.s3-pill{font-size:12px;padding:5px 10px;border-radius:999px;background:#f6f9fd;border:1px solid #d4e1ee;color:#2d4863}
.s3-pill.active{background:#1f7ae0;color:#fff;border-color:#1f7ae0}
.s3-anchor{margin-top:10px;padding-top:10px;border-top:1px solid #dce7f2;display:grid;gap:6px}
.s3-anchor a{font-size:13px;color:#2d5a84;padding:6px 8px;border-radius:8px}
.s3-anchor a.active,.s3-anchor a:hover{background:#edf5ff;color:#1a4f82}

.s3-content{display:grid;gap:12px}
.s3-carousel{position:relative;border:1px solid #d5e3f1;border-radius:14px;background:rgba(255,255,255,.9);overflow:hidden;box-shadow:0 12px 22px rgba(15,40,64,.08)}
.s3-carousel-track{display:flex;transition:transform .45s ease}
.s3-slide{min-width:100%;display:grid;grid-template-columns:45% 55%}
.s3-slide-media{display:block;height:clamp(220px,30vw,360px);overflow:hidden}
.s3-slide-media img{display:block;width:100%;height:100%;min-height:0;object-fit:cover;object-position:center}
.s3-slide-info{padding:18px}
.s3-tag{display:inline-block;padding:4px 10px;border-radius:999px;background:#ffecba;color:#8c6306;font-size:12px;border:1px solid #f4d584}
.s3-slide-info h2{margin:10px 0 0;color:#173954;font-size:28px;line-height:1.2}
.s3-slide-info p{margin:8px 0 0;color:#5d7387;line-height:1.6}
.s3-meta{margin-top:12px;color:#385873;font-size:13px}
.s3-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.s3-btn-line,.s3-btn-solid{font-size:13px;padding:7px 12px;border-radius:8px;border:1px solid #bfd0e2;background:#fff;cursor:pointer}
.s3-btn-solid{background:#127a63;color:#fff;border-color:#127a63}
.s3-nav-btn{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:17px;border:1px solid #cfe0ef;background:rgba(255,255,255,.92);cursor:pointer;font-size:22px;line-height:1}
.s3-nav-btn.prev{left:10px}.s3-nav-btn.next{right:10px}

.s3-waterfall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.s3-promo{border-radius:12px;padding:14px;color:#fff;min-height:120px;box-shadow:0 10px 16px rgba(16,34,50,.15)}
.s3-promo span{display:inline-block;padding:3px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.15);font-size:11px}
.s3-promo h4{margin:10px 0 0;font-size:24px}
.s3-promo p{margin:7px 0 0;font-size:13px;line-height:1.55;color:rgba(255,255,255,.92)}
.s3-promo.big{min-height:180px}
.s3-promo.red{background:linear-gradient(150deg,#ef5959,#ca2f2f)}
.s3-promo.green{background:linear-gradient(150deg,#20a879,#107c60)}
.s3-promo.blue{background:linear-gradient(150deg,#2d87eb,#1d63bd)}
.s3-promo.dark{background:linear-gradient(150deg,#40556f,#29394f)}

.s3-section{scroll-margin-top:86px;border:1px solid #d7e4f2;border-radius:14px;background:rgba(255,255,255,.9);padding:12px}
.s3-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.s3-head h3{margin:0;font-size:22px;color:#183b56}
.s3-head a{font-size:12px;color:#4f7392}
.s3-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.s3-card{position:relative;border:1px solid #dce8f3;border-radius:12px;background:linear-gradient(165deg,#fff,#f2f8fd);padding:10px}
.s3-thumb{display:block;border-radius:10px;overflow:hidden}
.s3-thumb img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.s3-card h4{margin:9px 0 0;font-size:16px;color:#1f3e5a}
.s3-card p{margin:6px 0 0;font-size:12px;color:#60778d;line-height:1.5;min-height:38px}
.s3-bottom{margin-top:10px;display:flex;justify-content:space-between;align-items:center}
.s3-bottom strong{color:#c93d3d;font-size:20px}
.s3-bottom button{border:1px solid #bdd0e3;border-radius:8px;background:#fff;padding:5px 10px;font-size:12px;cursor:pointer}
.s3-ribbon{position:absolute;left:-1px;top:10px;padding:4px 10px;border-radius:0 8px 8px 0;font-size:11px;font-weight:700;color:#fff}
.s3-ribbon.hot{background:linear-gradient(90deg,#ef5f5f,#c93131)}
.s3-ribbon.sale{background:linear-gradient(90deg,#2c8bea,#1e64c0)}
.s3-empty{grid-column:1/-1;text-align:center;padding:30px;color:#607288}
.s3-pager{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.s3-page-btn{display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border-radius:999px;background:#fff;border:1px solid #cfe0ef;color:#28527a;font-size:13px}
.s3-page-btn:hover{background:#edf5ff;border-color:#9fc3e8}
.s3-page-info{font-size:13px;color:#5e768c}

@media (max-width:1200px){
  .s3-main{grid-template-columns:1fr}
  .s3-filter{position:relative;top:0}
}

@media (max-width:980px){
  .s3-nav{grid-template-columns:1fr;gap:8px}
  .s3-links{overflow:auto}
  .s3-hero{grid-template-columns:1fr}
  .s3-slide{grid-template-columns:1fr}
  .s3-slide-media{height:220px}
  .s3-waterfall{grid-template-columns:1fr}
}

@media (max-width:640px){
  .s3-hero h1{font-size:30px}
  .s3-head h3{font-size:18px}
  .s3-grid{grid-template-columns:1fr}
  .s3-nav-btn{display:none}
}