:root { --primary: #018BB0; --dark: #000; --light: #f8f9fa; }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; color: #333; }
        header { background: #fff; padding: 15px 0; border-bottom: 2px solid var(--primary); }
        .logo { margin: 0; }
        .logo img { max-width: 200px; height: auto; }
        nav { background: var(--primary); color: #fff; padding: 10px 0; }
        nav ul { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; justify-content: center; }
        nav a { color: #fff; text-decoration: none; font-weight: bold; }
        .hero { background: #eee; height: 300px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
        .hero-banner { width: 100%; height: 100%; object-fit: cover; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
        .product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 20px 0; }
        .product-card { border: 1px solid #ddd; padding: 10px; text-align: center; border-radius: 5px; transition: 0.3s; }
        .product-card:hover { border-color: var(--primary); }
        .product-card img { width: 100%; height: 200px; object-fit: contain; }
        .price-sale { color: var(--primary); font-weight: bold; font-size: 1.2em; }
        footer { background: #333; color: #fff; padding: 30px 0; margin-top: 40px; }
        .social-icons { display: flex; gap: 10px; }
        @media (max-width: 768px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 1024px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }