:root{
  --orange:#ee4d2d;
  --orange-2:#f53d2d;
  --orange-3:#ff6633;
  --bg:#f5f5f5;
  --ink:#333;
  --muted:#757575;
  --line:#e8e8e8;
  --header-grad:linear-gradient(-180deg,#f53d2d 0%,#ff6633 100%);
  --wrap:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Helvetica Neue",Roboto,Arial,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  line-height:1.4;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}

/* ===== HEADER ===== */
.site-header{background:var(--header-grad);color:#fff;position:sticky;top:0;z-index:50;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.topbar{font-size:13px}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;height:34px}
.topbar a{opacity:.95}
.topbar a:hover{opacity:.75}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:0}
.topbar-left li,.topbar-right li{position:relative;padding:0 12px}
.topbar-left li::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);height:12px;width:1px;background:rgba(255,255,255,.4)}
.topbar-left li:last-child::after,.topbar-left .follow::after{display:none}
.topbar-left .follow{display:flex;align-items:center;gap:8px}
.ico-fb,.ico-ig{width:16px;height:16px;border-radius:3px;background:rgba(255,255,255,.85);display:inline-block;position:relative}
.ico-fb::before{content:"f";position:absolute;inset:0;color:var(--orange);font-weight:800;text-align:center;line-height:16px;font-size:12px;font-family:Georgia,serif}
.ico-ig{border-radius:5px}
.ico-ig::before{content:"";position:absolute;inset:3px;border:2px solid var(--orange);border-radius:50%}
.topbar-right li{padding:0 10px}
.topbar-right a{display:flex;align-items:center;gap:4px}
.topbar-right .auth a{font-weight:600}
.i{display:inline-block;width:15px;height:15px;opacity:.95;background:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.i-bell{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a6 6 0 0 0-6 6v4l-2 3v1h16v-1l-2-3V8a6 6 0 0 0-6-6zm0 20a3 3 0 0 0 3-3H9a3 3 0 0 0 3 3z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a6 6 0 0 0-6 6v4l-2 3v1h16v-1l-2-3V8a6 6 0 0 0-6-6zm0 20a3 3 0 0 0 3-3H9a3 3 0 0 0 3 3z'/%3E%3C/svg%3E")}
.i-help{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 16a1.2 1.2 0 1 1 0-2.4A1.2 1.2 0 0 1 12 18zm1.6-6.1c-.7.5-.9.8-.9 1.4v.3h-1.5v-.4c0-1.1.4-1.7 1.2-2.3.7-.5.9-.8.9-1.3 0-.6-.5-1-1.2-1-.8 0-1.3.5-1.4 1.3L9 9.6C9.2 8 10.4 7 12.1 7c1.7 0 2.9 1 2.9 2.4 0 1-.5 1.7-1.4 2.5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 16a1.2 1.2 0 1 1 0-2.4A1.2 1.2 0 0 1 12 18zm1.6-6.1c-.7.5-.9.8-.9 1.4v.3h-1.5v-.4c0-1.1.4-1.7 1.2-2.3.7-.5.9-.8.9-1.3 0-.6-.5-1-1.2-1-.8 0-1.3.5-1.4 1.3L9 9.6C9.2 8 10.4 7 12.1 7c1.7 0 2.9 1 2.9 2.4 0 1-.5 1.7-1.4 2.5z'/%3E%3C/svg%3E")}
.i-globe{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm6.9 6h-2.5a14 14 0 0 0-1.1-3.1A8 8 0 0 1 18.9 8zM12 4a12 12 0 0 1 1.6 4h-3.2A12 12 0 0 1 12 4zM4.3 14a8 8 0 0 1 0-4h2.9a16 16 0 0 0 0 4zm.8 2h2.5a14 14 0 0 0 1.1 3.1A8 8 0 0 1 5.1 16zm2.5-8H5.1a8 8 0 0 1 3.6-3.1A14 14 0 0 0 7.6 8zM12 20a12 12 0 0 1-1.6-4h3.2A12 12 0 0 1 12 20zm2.4-6H9.6a14 14 0 0 1 0-4h4.8a14 14 0 0 1 0 4zm.3 5.1a14 14 0 0 0 1.1-3.1h2.5a8 8 0 0 1-3.6 3.1zM16.8 14a16 16 0 0 0 0-4h2.9a8 8 0 0 1 0 4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z'/%3E%3C/svg%3E")}
.caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #fff;margin-left:3px}

.mainbar-inner{display:flex;align-items:center;gap:30px;padding:16px 16px 22px}
.logo{display:flex;align-items:center;gap:6px;color:#fff;flex-shrink:0}
.logo-bag{width:42px;height:42px;fill:#fff}
.logo-text{font-size:30px;font-weight:700;letter-spacing:-.5px}
.search{flex:1;max-width:920px}
.search-box{display:flex;background:#fff;border-radius:3px;padding:3px;align-items:center}
.search-box input{flex:1;border:0;outline:0;padding:9px 12px;font-size:14px;color:#222;background:transparent}
.search-btn{background:var(--orange);border:0;border-radius:2px;width:60px;height:34px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:opacity .15s}
.search-btn:hover{opacity:.9}
.search-btn svg{width:18px;height:18px;fill:#fff}
.search-keywords{display:flex;gap:14px;margin-top:6px;font-size:12px;color:#fff;flex-wrap:wrap;height:16px;overflow:hidden}
.search-keywords a{opacity:.95}
.search-keywords a:hover{text-decoration:underline}
.cart{flex-shrink:0;position:relative;padding:0 8px}
.cart svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.cart-count{position:absolute;top:-8px;right:-2px;background:#fff;color:var(--orange);font-size:11px;font-weight:700;border-radius:10px;padding:0 5px;border:1px solid var(--orange);line-height:15px}

/* ===== PAGE ===== */
.page{padding-top:18px;padding-bottom:30px}
.card{background:#fff;border-radius:3px;margin-bottom:14px;box-shadow:0 1px 1px rgba(0,0,0,.05)}
.card-title{font-size:16px;color:#555;font-weight:500;text-transform:uppercase;padding:18px 20px;border-bottom:1px solid #f0f0f0;letter-spacing:.4px}

/* ===== HERO ===== */
.hero{display:flex;gap:6px;margin-bottom:14px}
.hero-carousel{flex:2;position:relative;border-radius:3px;overflow:hidden;aspect-ratio:24/9}
.slides{display:flex;height:100%;transition:transform .5s ease}
.slide{min-width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 56px;color:#fff;position:relative;overflow:hidden}
.slide h3{font-size:34px;font-weight:800;margin-bottom:10px;text-shadow:0 2px 8px rgba(0,0,0,.15)}
.slide p{font-size:16px;opacity:.95;margin-bottom:18px}
.slide .cta{background:#fff;color:#ee4d2d;font-weight:700;padding:10px 22px;border-radius:30px;display:inline-block;font-size:14px}
.slide .big-emoji{font-size:120px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.2))}
.car-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.75);border:0;width:30px;height:42px;font-size:22px;color:#555;cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center;transition:background .15s}
.car-arrow:hover{background:#fff}
.car-arrow.prev{left:0;border-radius:0 3px 3px 0}
.car-arrow.next{right:0;border-radius:3px 0 0 3px}
.dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:3}
.dots button{width:18px;height:5px;border-radius:3px;border:0;background:rgba(255,255,255,.6);cursor:pointer;padding:0}
.dots button.active{background:#fff}
.hero-side{flex:1;display:flex;flex-direction:column;gap:6px}
.side-banner{flex:1;border-radius:3px;background:linear-gradient(135deg,var(--g1),var(--g2));display:flex;align-items:center;justify-content:space-between;padding:0 22px;color:#fff;overflow:hidden;cursor:pointer;transition:transform .2s}
.side-banner:hover{transform:scale(1.01)}
.sb-text b{display:block;font-size:20px}
.sb-text span{font-size:13px;opacity:.9}
.sb-emoji{font-size:46px}

/* ===== QUICK LINKS ===== */
.quicklinks{background:#fff;border-radius:3px;display:grid;grid-template-columns:repeat(10,1fr);padding:18px 8px;margin-bottom:14px;box-shadow:0 1px 1px rgba(0,0,0,.05)}
.ql{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 4px;text-align:center;cursor:pointer}
.ql .ql-ico{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;background:#fff5f1}
.ql span{font-size:12px;color:#444;line-height:1.2}
.ql:hover .ql-ico{transform:translateY(-2px);transition:transform .2s}

/* ===== CATEGORIES ===== */
.cat-grid{display:grid;grid-template-columns:repeat(10,1fr)}
.cat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px 6px;border-right:1px solid #f5f5f5;border-bottom:1px solid #f5f5f5;text-align:center;cursor:pointer;transition:box-shadow .15s}
.cat:hover{box-shadow:0 2px 12px rgba(0,0,0,.12);position:relative;z-index:2}
.cat .cat-ico{font-size:34px}
.cat span{font-size:12px;color:#333;min-height:30px}

/* ===== FLASH SALE ===== */
.flash-head{display:flex;align-items:center;gap:24px;padding:16px 20px}
.flash-logo{display:flex;align-items:center;gap:4px}
.bolt{font-size:22px}
.flash-word{color:var(--orange);font-weight:800;font-size:22px;font-style:italic;letter-spacing:.5px}
.countdown{display:flex;align-items:center;gap:4px}
.cd-box{background:#333;color:#fff;font-weight:700;border-radius:2px;padding:3px 5px;min-width:26px;text-align:center;font-size:15px}
.cd-sep{color:#333;font-weight:700}
.see-all{margin-left:auto;color:var(--orange);font-size:13px}
.see-all:hover{opacity:.8}
.flash-row{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;padding:0 6px 18px}
.flash-item{padding:10px 8px;text-align:center;cursor:pointer;border-radius:3px;transition:box-shadow .15s}
.flash-item:hover{box-shadow:0 2px 12px rgba(0,0,0,.12)}
.flash-thumb{aspect-ratio:1;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:54px;margin-bottom:8px;position:relative;overflow:hidden}
.flash-price{color:var(--orange);font-weight:600}
.flash-price b{font-size:17px}
.flash-bar{margin-top:8px;height:16px;border-radius:10px;background:#ffe0d4;position:relative;overflow:hidden}
.flash-bar i{position:absolute;inset:0;width:var(--p);background:linear-gradient(90deg,#ffac8e,#ff5419);border-radius:10px}
.flash-bar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;font-weight:600;text-shadow:0 0 2px rgba(0,0,0,.3)}
.flash-disc{position:absolute;top:0;right:0;background:#ffd400;color:#ee4d2d;font-size:11px;font-weight:700;padding:1px 4px;border-radius:0 0 0 4px;line-height:1.3}
.flash-disc small{display:block;font-size:9px;text-align:center;font-weight:500}

/* ===== DAILY DISCOVER ===== */
.discover-title{text-align:center;color:var(--orange);font-size:18px;font-weight:600;letter-spacing:1px;padding:16px;border-bottom:4px solid var(--orange);background:#fff;margin-bottom:14px;border-radius:2px}
.product-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.product{background:#fff;border-radius:2px;cursor:pointer;border:1px solid transparent;transition:border-color .15s,box-shadow .15s,transform .15s;overflow:hidden;position:relative}
.product:hover{border-color:var(--orange);box-shadow:0 2px 16px rgba(0,0,0,.14);transform:translateY(-1px)}
.p-thumb{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:64px;position:relative;overflow:hidden}
.p-badge{position:absolute;top:0;left:0;background:linear-gradient(135deg,#ffd9cc,#ff6e4a);color:#fff;font-size:10px;font-weight:700;padding:2px 5px}
.p-mall{position:absolute;top:0;right:0;background:var(--orange);color:#fff;font-size:10px;font-weight:700;padding:2px 5px;border-radius:0 0 0 3px}
.p-body{padding:8px}
.p-name{font-size:13px;color:#000;line-height:1.35;height:36px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:8px}
.p-pricerow{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.p-price{color:var(--orange);font-weight:500}
.p-price b{font-size:17px;font-weight:600}
.p-old{color:#bbb;text-decoration:line-through;font-size:12px}
.p-disc{margin-left:auto;background:#fef6e9;color:#ee712a;font-size:11px;font-weight:600;padding:1px 3px;border-radius:2px}
.p-meta{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:11px;color:var(--muted)}
.p-stars{color:#ffce3d}
.p-fav{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.0);font-size:16px;opacity:0;transition:opacity .15s}
.product:hover .p-fav{opacity:.8}

.load-more{display:flex;justify-content:center;margin:24px 0}
.load-more button{background:#fff;border:1px solid var(--orange);color:var(--orange);padding:11px 90px;border-radius:2px;cursor:pointer;font-size:14px;font-weight:500;transition:background .15s}
.load-more button:hover{background:#fff5f1}

/* ===== FOOTER ===== */
.site-footer{background:#fbfbfb;border-top:4px solid var(--orange);margin-top:10px;color:#555;font-size:12px}
.footer-cols{display:grid;grid-template-columns:1.1fr 1fr 1.2fr .8fr 1.1fr;gap:24px;padding:40px 16px 30px;border-bottom:1px solid #eee}
.fcol h4{text-transform:uppercase;font-size:13px;color:#222;margin-bottom:16px;letter-spacing:.3px}
.fcol ul li{margin-bottom:9px}
.fcol ul li a{color:#888}
.fcol ul li a:hover{color:var(--orange)}
.pay-grid{display:flex;flex-wrap:wrap;gap:6px}
.pay{background:#fff;border:1px solid #eee;border-radius:2px;padding:5px 7px;font-size:10px;font-weight:700;color:#444;min-width:46px;text-align:center}
.pay.visa{color:#1a1f71}.pay.mc{color:#eb001b}.pay.jcb{color:#0b4ea2}.pay.amex{color:#006fcf}.pay.cod{color:#ee4d2d}
.follow-list li a{display:flex;align-items:center;gap:8px;color:#888}
.follow-list .i{background:#888;width:16px;height:16px}
.i-fb,.i-ig,.i-tt,.i-tw,.i-yt{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E")}
.app-dl{display:flex;gap:12px}
.qr{width:80px;height:80px;border:1px solid #eee;padding:4px;background:#fff}
.qr svg{width:100%;height:100%}
.app-badges{display:flex;flex-direction:column;gap:6px}
.badge{background:#fff;border:1px solid #ddd;border-radius:3px;padding:5px 8px;font-size:11px;color:#444;white-space:nowrap}
.footer-bottom{padding:22px 16px 40px;color:#999}
.country{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:16px}
.country span{color:#666}
.country a{color:#999}.country a:hover{color:var(--orange)}
.copyright{margin-bottom:10px}
.copyright span{color:#bbb}
.policies{display:flex;gap:18px;flex-wrap:wrap}
.policies a{color:#999}.policies a:hover{color:var(--orange)}

/* ===== BACK TO TOP ===== */
.to-top{position:fixed;right:24px;bottom:30px;width:42px;height:42px;border-radius:4px;border:1px solid var(--line);background:#fff;color:#888;font-size:20px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s;box-shadow:0 2px 8px rgba(0,0,0,.12);z-index:40}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{color:var(--orange)}

/* ===== RESPONSIVE ===== */
@media (max-width:1000px){
  .quicklinks{grid-template-columns:repeat(5,1fr)}
  .cat-grid{grid-template-columns:repeat(5,1fr)}
  .flash-row{grid-template-columns:repeat(3,1fr)}
  .product-grid{grid-template-columns:repeat(3,1fr)}
  .footer-cols{grid-template-columns:1fr 1fr}
  .search-keywords{display:none}
}
@media (max-width:680px){
  .topbar,.cart-count{display:none}
  .mainbar-inner{flex-wrap:wrap;gap:14px;padding:12px}
  .logo-text{font-size:24px}
  .hero{flex-direction:column}
  .hero-side{flex-direction:row}
  .quicklinks{grid-template-columns:repeat(4,1fr)}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .flash-row{grid-template-columns:repeat(2,1fr)}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .footer-cols{grid-template-columns:1fr}
  .slide h3{font-size:22px}
  .slide .big-emoji{font-size:70px}
  .load-more button{padding:11px 50px}
}
