/*
Theme Name: TikTok Mart Woo V3
Theme URI: https://tiktokmarts.com
Author: RMA
Description: TikTok viral products theme with hero section and category bar
Version: 3.0
*/

body { margin:0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background:#fff; color:#111; }
.top-bar { background:#000; color:#fff; text-align:center; padding:8px 12px; font-size:12px; letter-spacing:.5px; font-weight:600; }
.site-header { position:sticky; top:0; background:#fff; border-bottom:1px solid #eee; padding:12px 20px; display:flex; justify-content:space-between; align-items:center; z-index:100; }
.logo { font-weight:900; font-size:22px; text-decoration:none; color:#000; }
.logo span { color:#FF0050; }
.cat-bar { background:#fff; border-bottom:1px solid #eee; padding:10px 0; overflow-x:auto; white-space:nowrap; position:sticky; top:57px; z-index:90; }
.cat-bar-inner { max-width:1200px; margin:0 auto; padding:0 20px; display:flex; gap:10px; }
.cat-pill { display:inline-flex; padding:8px 16px; border-radius:999px; background:#f5f5f5; font-size:13px; font-weight:700; text-decoration:none; color:#000; border:1px solid #eee; }
.cat-pill:hover, .cat-pill.active { background:#000; color:#fff; }
.cat-pill.pink { background:#FF0050; color:#fff; border-color:#FF0050; }
.site-content { max-width:1200px; margin:0 auto; padding:0 0 20px; }

/* Hero */
.hero { background: linear-gradient(105deg, #fff 0%, #fff 55%, #FFF0F5 100%); padding:60px 20px; border-bottom:1px solid #f0f0f0; }
.hero-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.2fr .8fr; gap:30px; align-items:center; }
@media(max-width:800px){ .hero-inner{grid-template-columns:1fr; } }
.badge { display:inline-flex; align-items:center; gap:6px; background:#000; color:#fff; padding:6px 12px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; }
.badge-dot { width:6px; height:6px; background:#00F2EA; border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.hero h1 { font-size:52px; line-height:0.95; font-weight:900; margin:16px 0; letter-spacing:-1.5px; }
.hero h1 span { background: linear-gradient(90deg, #FF0050, #00F2EA); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.hero p.sub { font-size:16px; color:#555; line-height:1.5; max-width:480px; margin:0 0 24px; }
.btns { display:flex; gap:12px; flex-wrap:wrap; }
.btn-primary { background:#000; color:#fff; padding:14px 28px; border-radius:999px; font-weight:800; text-decoration:none; display:inline-flex; }
.btn-secondary { background:#fff; color:#000; padding:14px 28px; border-radius:999px; font-weight:800; text-decoration:none; border:1px solid #ddd; }
.stats { display:flex; gap:24px; margin-top:36px; border-top:1px solid #eee; padding-top:24px; }
.stat b { display:block; font-size:22px; font-weight:900; }
.stat span { font-size:12px; color:#777; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.woocommerce ul.products li.product { border:1px solid #eee; border-radius:12px; padding:10px; }