@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
:root{--red:#d60000;--dark:#202020;--bg:#f4f6f9;--muted:#68707a;--white:#fff;--shadow:0 10px 30px rgba(0,0,0,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Poppins,Arial,sans-serif;background:var(--bg);color:#333}.container{width:92%;max-width:1200px;margin:auto}
.site-header{position:sticky;top:0;z-index:100;background:#fff;box-shadow:0 2px 15px #00000012}.nav{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#222}.brand img{width:68px;height:68px;object-fit:contain}.brand b{display:block;color:var(--red);font-size:24px}.brand small{color:#666}.nav nav{display:flex;gap:20px;align-items:center}.nav a{color:#333;text-decoration:none;font-weight:500}.nav a:hover{color:var(--red)}.nav-admin{color:var(--red)!important}
main{min-height:70vh}.hero{min-height:78vh;display:grid;place-items:center;text-align:center;color:#fff;background:linear-gradient(#0008,#0008),url('https://images.unsplash.com/photo-1581578731548-c64695cc6952?auto=format&fit=crop&w=1800&q=80') center/cover}.hero h1{font-size:clamp(40px,7vw,72px);margin:0 0 10px}.hero p{font-size:clamp(18px,2.4vw,25px)}.btn{display:inline-block;background:var(--red);color:#fff;text-decoration:none;border:0;border-radius:999px;padding:13px 25px;font-weight:600;cursor:pointer}.btn:hover{filter:brightness(.9);transform:translateY(-1px)}
.section{padding:80px 0}.title{text-align:center;margin-bottom:45px}.title h2{color:var(--red);font-size:38px;margin:0 0 8px}.title p{color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:26px}.card{background:#fff;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);transition:.2s}.card:hover{transform:translateY(-5px)}.product-img{height:220px;width:100%;object-fit:cover;background:#eee}.card-content{padding:20px}.card h3{margin:0 0 8px;color:var(--red)}.card p{color:var(--muted);font-size:14px}.price{font-weight:700;margin:12px 0}.filters{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:30px}.filters select,.filters input,.form input,.form select,.form textarea{padding:12px;border:1px solid #ddd;border-radius:10px;background:#fff;width:100%}.filters input,.filters select{max-width:280px}
.about,.contact{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.about img{max-width:100%;border-radius:18px}.contact iframe{width:100%;height:400px;border:0;border-radius:18px}.box{background:#fff;padding:30px;border-radius:18px;box-shadow:var(--shadow)}
.pagination{display:flex;justify-content:center;gap:7px;margin-top:35px;flex-wrap:wrap}.pagination a,.pagination span{padding:9px 14px;border-radius:10px;background:#fff;text-decoration:none;color:#333;box-shadow:0 2px 8px #0000000d}.pagination .active{background:var(--red);color:#fff}
footer{background:var(--dark);color:#fff;text-align:center;padding:35px}.whatsapp{position:fixed;right:22px;bottom:22px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#25d366;color:#fff;text-decoration:none;font-size:32px;box-shadow:0 5px 20px #0005;z-index:200}
.login{min-height:80vh;display:grid;place-items:center}.login .box{width:min(430px,92%)}.login h1{text-align:center;color:var(--red)}.form{display:grid;gap:14px}.form label{font-weight:600;font-size:14px}.alert{padding:12px;border-radius:10px;background:#ffe8e8;color:#a00000;margin-bottom:15px}.success{background:#e8fff0;color:#08712c}.admin-wrap{padding:110px 0 70px}.admin-top{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:25px}.table-wrap{overflow:auto;background:#fff;border-radius:15px;box-shadow:var(--shadow)}table{border-collapse:collapse;width:100%;min-width:700px}th,td{padding:13px;border-bottom:1px solid #eee;text-align:left}th{background:#fafafa}.thumb{width:70px;height:55px;object-fit:cover;border-radius:8px}.actions a{margin-right:6px}.danger{background:#8d0000}.muted{color:var(--muted)}
@media(max-width:800px){.nav{flex-direction:column;padding:12px 0}.nav nav{flex-wrap:wrap;justify-content:center}.about,.contact{grid-template-columns:1fr}.hero{min-height:70vh}.section{padding:55px 0}}