:root{--primary-color:#e4393c;--primary-color-light:#fff5f5;--primary-dark:#d12c2f;--gold:#e4393c;--gold-dark:#d12c2f;--gold-light:#fff5f5;--dark:#333;--t2-bg:#f5f5f5}
body.tpl-template4{background:#f5f5f5;color:#333;font-family:-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
body.tpl-template4 .topbar{background:#f7f7f7;color:#999;height:32px;line-height:32px;font-size:12px;border-bottom:1px solid #eee}
body.tpl-template4 .topbar-left a,body.tpl-template4 .topbar-right a{color:#999;margin-left:14px}
body.tpl-template4 .topbar-left a:hover,body.tpl-template4 .topbar-right a:hover{color:#e4393c}
body.tpl-template4 .fav-link{margin-left:14px}
body.tpl-template4 .header-main{background:#fff;padding:18px 0;border-bottom:none}
body.tpl-template4 .logo{width:180px}
body.tpl-template4 .logo .logo-text{color:#e4393c;font-size:28px;font-weight:700;letter-spacing:1px}
body.tpl-template4 .search-box{flex:1;max-width:560px;margin:0 30px 0 10px}
body.tpl-template4 .search-box form{display:flex;border:2px solid #e4393c;border-radius:22px;overflow:hidden;background:#fff}
body.tpl-template4 .search-box input{flex:1;border:none;outline:none;padding:9px 18px;font-size:14px;color:#333;background:transparent;border-radius:0}
body.tpl-template4 .search-box button{background:#e4393c;color:#fff;border:none;padding:0 24px;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s;border-radius:0}
body.tpl-template4 .search-box button:hover{background:#d12c2f}
body.tpl-template4 .header-nav-mini{display:flex;gap:12px;font-size:13px;color:#666;margin-left:auto}
body.tpl-template4 .header-nav-mini a{padding:7px 14px;border-radius:16px;color:#666;background:#f5f5f5;transition:all .2s}
body.tpl-template4 .header-nav-mini a:hover,body.tpl-template4 .header-nav-mini a.active{color:#e4393c;background:#fff5f5;font-weight:500}
body.tpl-template4 .main-nav{background:#fff;height:auto;line-height:normal;border-bottom:2px solid #e4393c}
body.tpl-template4 .nav-category{width:200px;position:relative;z-index:100}
body.tpl-template4 .nav-category-title{background:#e4393c;color:#fff;font-size:15px;font-weight:600;height:44px;line-height:44px;padding:0 18px;cursor:pointer;display:flex;align-items:center;gap:8px;border-radius:4px 4px 0 0}
body.tpl-template4 .nav-category-title i{font-size:16px}
body.tpl-template4 .nav-category-list{position:absolute;left:0;right:0;top:100%;background:#fff;border:1px solid #f0e2e2;border-top:none;box-shadow:0 8px 20px rgba(0,0,0,.08);display:none;border-radius:0 0 4px 4px}
body.tpl-template4 .nav-category.open .nav-category-list{display:block}
body.tpl-template4 .nav-category-item{display:flex;align-items:center;justify-content:space-between;padding:11px 18px;color:#555;font-size:13px;transition:all .2s;border-bottom:1px solid #f7f7f7}
body.tpl-template4 .nav-category-item:hover{background:#fff5f5;color:#e4393c}
body.tpl-template4 .nav-category-main{font-weight:600}
body.tpl-template4 .nav-category-sub{color:#bbb;font-size:11px}
body.tpl-template4 .nav-category-item i{color:#ccc;font-size:12px}
body.tpl-template4 .nav-menu{display:flex;margin-left:30px;align-items:center}
body.tpl-template4 .nav-menu li{margin:0;list-style:none}
body.tpl-template4 .nav-menu a{display:inline-block;color:#444;font-size:15px;padding:0 22px;line-height:44px;position:relative;transition:color .2s}
body.tpl-template4 .nav-menu a:hover{color:#e4393c}
body.tpl-template4 .nav-menu a.active{color:#e4393c;font-weight:600}
body.tpl-template4 .nav-menu a.active::after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:3px;background:#e4393c;border-radius:2px 2px 0 0}
body.tpl-template4 .nav-dot{display:none !important}
body.tpl-template4 main{padding-bottom:0}
body.tpl-template4 main>.container{padding:0}
body.tpl-template4 .t4-container{width:1200px;margin:0 auto}
.t4-hero{padding:18px 0 0}
.t4-hero-box{position:relative;height:450px;border-radius:8px;overflow:hidden;box-shadow:0 6px 18px rgba(228,57,60,.12)}
.t4-hero-track{height:100%;position:relative}
.t4-hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .7s ease;display:flex;align-items:center}
.t4-hero-slide.is-active{opacity:1;z-index:1}
.t4-hero-content{padding:0 60px;color:#fff;max-width:560px}
.t4-hero-content h2{font-size:40px;font-weight:800;line-height:1.2;margin-bottom:14px;text-shadow:0 2px 10px rgba(0,0,0,.2)}
.t4-hero-content p{font-size:18px;color:rgba(255,255,255,.92);margin-bottom:26px;text-shadow:0 1px 6px rgba(0,0,0,.15)}
.t4-hero-btn{display:inline-block;background:#fff;color:#e4393c;font-size:15px;font-weight:700;padding:12px 34px;border-radius:25px;transition:all .25s;box-shadow:0 4px 14px rgba(0,0,0,.15)}
.t4-hero-btn:hover{background:#e4393c;color:#fff;transform:translateY(-2px)}
.t4-hero-dots{position:absolute;right:30px;bottom:22px;z-index:5;display:flex;gap:8px}
.t4-hero-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer;transition:all .25s}
.t4-hero-dot.is-active{background:#fff;width:24px;border-radius:6px}
.t4-cats{padding:18px 0 4px}
.t4-cats-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;background:#fff;border-radius:8px;padding:22px 14px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.t4-cat-item{display:flex;flex-direction:column;align-items:center;gap:12px;padding:12px 6px;border-radius:8px;transition:background .2s;text-decoration:none}
.t4-cat-item:hover{background:#faf5f5}
.t4-cat-icon{width:56px;height:56px;border-radius:50%;color:#fff;font-size:22px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(0,0,0,.12)}
.t4-cat-name{font-size:14px;color:#444}
.t4-cat-item:hover .t4-cat-name{color:#e4393c}
.t4-products{padding:18px 0 0}
.t4-sec-hd{display:flex;align-items:baseline;gap:14px;margin-bottom:16px}
.t4-sec-hd h2{font-size:22px;font-weight:700;color:#333;padding-left:12px;border-left:4px solid #e4393c;line-height:1.1}
.t4-sec-sub{font-size:13px;color:#999}
.t4-sec-more{margin-left:auto;font-size:13px;color:#999;text-decoration:none;transition:color .2s}
.t4-sec-more:hover{color:#e4393c}
.t4-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.t4-card{background:#fff;border-radius:8px;overflow:hidden;transition:transform .25s,box-shadow .25s;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.t4-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.1)}
.t4-card-img{display:block;width:100%;padding-top:100%;background-size:cover;background-position:center;background-color:#f7f7f7;position:relative}
.t4-card-img .prod-tag{position:absolute;left:10px;top:10px;background:#e4393c;color:#fff;font-size:11px;padding:3px 10px;border-radius:3px;z-index:2}
.t4-card-body{padding:12px 14px 14px}
.t4-card-name{display:block;font-size:14px;color:#333;line-height:1.5;height:42px;overflow:hidden;text-decoration:none;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.t4-card-name:hover{color:#e4393c}
.t4-card-meta{display:flex;align-items:baseline;justify-content:space-between}
.t4-card-price{color:#e4393c;font-size:18px;font-weight:700}
.t4-card-sales{font-size:12px;color:#aaa}
.t4-features{padding:26px 0 0;background:#fff}
.t4-features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;background:#fff;border:1px solid #f5f5f5;border-bottom:none;border-radius:8px 8px 0 0;padding:30px 40px}
.t4-feature-item{display:flex;align-items:center;gap:14px;justify-content:center}
.t4-feature-icon{width:46px;height:46px;border-radius:50%;background:#fff5f5;color:#e4393c;font-size:20px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.t4-feature-text h4{font-size:15px;font-weight:600;color:#333;margin-bottom:2px}
.t4-feature-text p{font-size:12px;color:#aaa;margin:0}
body.tpl-template4 .footer-service-bar{background:#fff5f5;border-top:1px solid #f0dcdc;margin-top:30px;padding:14px 0}
body.tpl-template4 .footer-service-item{color:#e4393c;font-size:13px;font-weight:600}
body.tpl-template4 a.footer-service-item:hover{color:#d12c2f}
body.tpl-template4 .footer{background:#fff;color:#999;padding:34px 0 18px;border-top:1px solid #f0f0f0}
body.tpl-template4 .footer-row{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap}
body.tpl-template4 .footer-left{flex:0 0 auto}
body.tpl-template4 .footer-logo{color:#e4393c;font-weight:700}
body.tpl-template4 .footer-desc{color:#999;font-size:13px;line-height:1.8}
body.tpl-template4 .footer-center{flex:1;max-width:520px}
body.tpl-template4 .footer-center-text{color:#555;font-size:16px;line-height:1.7}
body.tpl-template4 .footer-center-links{margin-top:14px;display:flex;gap:18px}
body.tpl-template4 .footer-center-links a{color:#888;font-size:13px}
body.tpl-template4 .footer-center-links a:hover{color:#e4393c}
body.tpl-template4 .footer-service-right{flex:0 0 auto;text-align:right}
body.tpl-template4 .footer-service-right h4{color:#555;font-size:15px}
body.tpl-template4 .footer-service-right p{color:#999;font-size:13px;line-height:1.8}
body.tpl-template4 .footer-help{background:#e4393c;color:#fff;display:inline-block;padding:6px 18px;border-radius:15px;font-size:13px;margin-top:6px}
body.tpl-template4 .footer-help:hover{background:#d12c2f;color:#fff}
body.tpl-template4 .footer-bottom{background:#fafafa;color:#bbb;border-top:1px solid #f5f5f5}
body.tpl-template4 .crumb{margin-top:14px}
body.tpl-template4 .page-wrap,body.tpl-template4 .inner-main{background:#f5f5f5}
body.tpl-template4 .panel{background:#fff;border-radius:8px;border:none;box-shadow:0 2px 8px rgba(0,0,0,.04)}
@media (max-width:1230px){body.tpl-template4 .t4-container{width:100%;padding:0 15px}
body.tpl-template4 .t4-grid{grid-template-columns:repeat(3,1fr)}
body.tpl-template4 .t4-cats-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:991px){body.tpl-template4 .header-nav-mini{display:none}
body.tpl-template4 .main-nav{display:none}
body.tpl-template4 .t4-hero-box{height:320px}
body.tpl-template4 .t4-hero-content h2{font-size:28px}
body.tpl-template4 .t4-features-grid{grid-template-columns:repeat(2,1fr);gap:18px}
}
@media (max-width:575px){body.tpl-template4 .t4-grid{grid-template-columns:repeat(2,1fr)}
body.tpl-template4 .t4-cats-grid{grid-template-columns:repeat(2,1fr)}
body.tpl-template4 .t4-hero-box{height:220px}
body.tpl-template4 .t4-hero-content{padding:0 24px}
body.tpl-template4 .t4-hero-content h2{font-size:22px}
body.tpl-template4 .t4-hero-btn{padding:8px 20px;font-size:13px}
}
body.tpl-template4 .header-cart-btn{display:flex;align-items:center;gap:8px;padding:10px 22px;border:1px solid #e5e5e5;border-radius:24px;color:#555;font-size:14px;text-decoration:none;background:#fff;transition:all .2s}
body.tpl-template4 .header-cart-btn:hover{border-color:#e4393c;color:#e4393c}
body.tpl-template4 .header-cart-btn i{font-size:18px}
body.tpl-template4 .nav-menu{margin-left:0}
body.tpl-template4 .nav-menu li:first-child a{padding-left:0}
body.tpl-template4 .contact-panel{padding:40px}
body.tpl-template4 .contact-title{font-size:28px;font-weight:700;color:#333;margin-bottom:30px}
body.tpl-template4 .contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:30px}
body.tpl-template4 .contact-card{background:#fafafa;border-radius:8px;padding:30px;text-align:center}
body.tpl-template4 .contact-icon{font-size:36px;color:#e4393c;margin-bottom:14px}
body.tpl-template4 .contact-card h3{font-size:16px;font-weight:600;color:#333;margin-bottom:12px}
body.tpl-template4 .contact-info{font-size:15px;color:#555;line-height:1.6}
body.tpl-template4 .contact-sub{font-size:13px;color:#999;margin-top:4px}
body.tpl-template4 .contact-service{border-top:1px solid #f0f0f0;padding-top:30px}
body.tpl-template4 .contact-service h2{font-size:18px;font-weight:600;color:#333;margin-bottom:12px}
body.tpl-template4 .contact-service p{font-size:14px;color:#666;line-height:1.8}
@media (max-width:991px){body.tpl-template4 .contact-grid{grid-template-columns:1fr}}
/* user center */
body.tpl-template4 .t4-user-layout{display:grid;grid-template-columns:260px 1fr;gap:20px;padding:20px 0 40px}
body.tpl-template4 .t4-user-sidebar{background:#fff;border-radius:8px;padding:24px;box-shadow:0 2px 8px rgba(0,0,0,.04);align-self:start}
body.tpl-template4 .t4-user-info{text-align:center;margin-bottom:20px}
body.tpl-template4 .t4-user-avatar{width:70px;height:70px;border-radius:50%;background:#6c5ce7;color:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 12px}
body.tpl-template4 .t4-user-name{font-size:15px;font-weight:600;color:#333}
body.tpl-template4 .t4-user-menu{list-style:none;padding:0;margin:0}
body.tpl-template4 .t4-user-menu li{border-bottom:1px solid #f5f5f5}
body.tpl-template4 .t4-user-menu li:last-child{border-bottom:none}
body.tpl-template4 .t4-user-menu a{display:block;padding:12px 4px;color:#555;font-size:14px}
body.tpl-template4 .t4-user-menu a.active{color:#e4393c;background:#fff5f5;border-radius:4px}
body.tpl-template4 .t4-user-menu a:hover{color:#e4393c}
body.tpl-template4 .t4-user-main{display:flex;flex-direction:column;gap:20px}
body.tpl-template4 .t4-user-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
body.tpl-template4 .t4-user-stat{background:#fff;border-radius:8px;padding:24px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.04)}
body.tpl-template4 .t4-user-stat-num{font-size:28px;font-weight:700;color:#e4393c;margin-bottom:6px}
body.tpl-template4 .t4-user-stat-label{font-size:13px;color:#888}
body.tpl-template4 .t4-user-section{background:#fff;border-radius:8px;padding:24px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
body.tpl-template4 .t4-user-section-title{font-size:16px;font-weight:600;color:#333;margin-bottom:20px}
body.tpl-template4 .t4-user-form .t4-form-group{margin-bottom:16px}
body.tpl-template4 .t4-user-form label{display:block;font-size:13px;color:#666;margin-bottom:6px}
body.tpl-template4 .t4-user-form input,body.tpl-template4 .t4-user-form textarea{width:100%;padding:10px 12px;border:1px solid #e5e5e5;border-radius:4px;font-size:14px;outline:none}
body.tpl-template4 .t4-user-form input:focus,body.tpl-template4 .t4-user-form textarea:focus{border-color:#e4393c}
body.tpl-template4 .t4-user-btn{background:#e4393c;color:#fff;border:none;padding:10px 24px;border-radius:4px;font-size:14px;cursor:pointer}
body.tpl-template4 .t4-user-btn:hover{background:#d12c2f}
body.tpl-template4 .t4-user-msg{padding:12px 16px;border-radius:4px;margin-bottom:16px;font-size:14px}
body.tpl-template4 .t4-user-msg-success{background:#f6ffed;border:1px solid #b7eb8f;color:#52c41a}
body.tpl-template4 .t4-user-msg-error{background:#fff2f0;border:1px solid #ffccc7;color:#ff4d4f}
/* orders */
body.tpl-template4 .t4-order-tabs{display:flex;gap:8px;background:#fff;border-radius:8px;padding:16px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
body.tpl-template4 .t4-order-tabs a{padding:8px 20px;border-radius:4px;font-size:14px;color:#555}
body.tpl-template4 .t4-order-tabs a.active{color:#e4393c;border-bottom:2px solid #e4393c}
body.tpl-template4 .t4-order-tabs a:hover{color:#e4393c}
body.tpl-template4 .t4-order-list{display:flex;flex-direction:column;gap:16px}
body.tpl-template4 .t4-order-empty{background:#fff;border-radius:8px;padding:60px 20px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.04);color:#999}
body.tpl-template4 .t4-order-empty p{margin-bottom:16px}
body.tpl-template4 .t4-user-btn-outline{display:inline-block;border:1px solid #e5e5e5;color:#555;padding:8px 24px;border-radius:4px;font-size:14px}
body.tpl-template4 .t4-user-btn-outline:hover{border-color:#e4393c;color:#e4393c}
body.tpl-template4 .t4-order-card{background:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.04);overflow:hidden}
body.tpl-template4 .t4-order-header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:#fafafa;border-bottom:1px solid #f5f5f5;font-size:13px;color:#666}
body.tpl-template4 .t4-order-status{color:#e4393c;font-weight:600}
body.tpl-template4 .t4-order-body{padding:16px 20px}
body.tpl-template4 .t4-order-item{display:flex;gap:12px;align-items:center;margin-bottom:12px}
body.tpl-template4 .t4-order-item:last-child{margin-bottom:0}
body.tpl-template4 .t4-order-item img{width:60px;height:60px;object-fit:cover;border-radius:4px}
body.tpl-template4 .t4-order-item-title{font-size:14px;color:#333;margin-bottom:4px}
body.tpl-template4 .t4-order-item-meta{font-size:13px;color:#999}
body.tpl-template4 .t4-order-footer{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-top:1px solid #f5f5f5;font-size:13px;color:#666}
body.tpl-template4 .t4-order-total{color:#e4393c;font-weight:600;font-size:15px}
/* footer */
body.tpl-template4 .footer.t4-footer{background:#fff;border-top:none;padding:20px 0 20px;text-align:center}
body.tpl-template4 .t4-footer-links{margin-bottom:10px;font-size:14px}
body.tpl-template4 .t4-footer-links a{color:#555}
body.tpl-template4 .t4-footer-links a:hover{color:#e4393c}
body.tpl-template4 .t4-footer-sep{color:#ddd;margin:0 10px}
body.tpl-template4 .t4-footer-info{font-size:13px;color:#999;line-height:1.8}
body.tpl-template4 .t4-footer-info p{margin:4px 0}
body.tpl-template4 .t4-footer-info a{color:#999}
body.tpl-template4 .t4-footer-info a:hover{color:#e4393c}
/* page content */
body.tpl-template4 .page-content{padding:40px}
body.tpl-template4 .page-title{font-size:24px;font-weight:700;color:#333;margin-bottom:20px}
body.tpl-template4 .page-body{font-size:14px;line-height:1.8;color:#555}
body.tpl-template4 .page-body p{margin-bottom:12px}
body.tpl-template4 .page-empty{padding:60px 20px;text-align:center;color:#999}
body.tpl-template4 .crumb{font-size:13px;color:#999;margin-bottom:14px}
body.tpl-template4 .crumb a{color:#666}
body.tpl-template4 .crumb a:hover{color:#e4393c}
body.tpl-template4 .crumb .sep{margin:0 6px;color:#ccc}
@media (max-width:991px){body.tpl-template4 .t4-user-layout{grid-template-columns:1fr}body.tpl-template4 .t4-order-tabs{overflow-x:auto}}
@media (max-width:575px){body.tpl-template4 .t4-user-stats{grid-template-columns:1fr}}