.App{min-height:100vh;display:flex;flex-direction:column}main{flex:1}.header{background-color:var(--white);box-shadow:0 2px 10px #0000001a;position:sticky;top:0;z-index:100}.header-content{display:flex;justify-content:space-between;align-items:center;padding:15px 0}.logo{font-size:2rem;font-weight:700;color:var(--primary-color);text-decoration:none}.logo span{color:var(--secondary-color)}.nav{display:flex;list-style:none;gap:30px}.nav a{text-decoration:none;color:var(--text-color);font-weight:500;transition:color .3s ease}.nav a:hover,.nav a.active{color:var(--secondary-color)}.mobile-menu-toggle{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer}.footer{background-color:var(--primary-color);color:var(--white);padding:40px 0 20px;margin-top:auto}.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px;margin-bottom:30px}.footer-section h3{margin-bottom:15px;color:var(--accent-color)}.footer-section p,.footer-section a{color:#bdc3c7;text-decoration:none;line-height:1.8}.footer-section a:hover{color:var(--white)}.footer-bottom{text-align:center;padding-top:20px;border-top:1px solid #34495e;color:#95a5a6}.hero{background:linear-gradient(135deg,var(--primary-color) 0%,var(--secondary-color) 100%);color:var(--white);padding:100px 0;text-align:center}.hero h1{font-size:3.5rem;margin-bottom:20px;font-weight:700}.hero p{font-size:1.3rem;margin-bottom:30px;opacity:.9}.hero-buttons{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}.categories{background-color:var(--light-gray)}.category-card{text-align:center;padding:40px 20px}.category-icon{font-size:3rem;color:var(--secondary-color);margin-bottom:20px}.product-card{text-align:center}.product-image{width:100%;height:250px;object-fit:cover;border-radius:10px;margin-bottom:15px}.product-price{font-size:1.2rem;font-weight:700;color:var(--secondary-color);margin-bottom:10px}.product-original-price{text-decoration:line-through;color:var(--medium-gray);margin-left:10px}@media (max-width: 768px){.header-content{flex-wrap:wrap}.nav{display:none;width:100%;flex-direction:column;gap:15px;padding-top:20px}.nav.active{display:flex}.mobile-menu-toggle{display:block}.hero h1{font-size:2.5rem}.hero p{font-size:1.1rem}.hero-buttons{flex-direction:column;align-items:center}.hero-buttons .btn{width:200px}}:root{--primary-color: #5f4891;--secondary-color: #e74c3c;--accent-color: #f39c12;--text-color: #333;--light-gray: #f8f9fa;--medium-gray: #6c757d;--dark-gray: #343a40;--white: #ffffff;--border-color: #dee2e6}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:var(--text-color);background-color:var(--white)}.container{max-width:1200px;margin:0 auto;padding:0 20px}.btn{display:inline-block;padding:12px 24px;background-color:var(--secondary-color);color:var(--white);text-decoration:none;border-radius:5px;border:none;cursor:pointer;font-size:16px;font-weight:500;transition:all .3s ease}.btn:hover{background-color:#c0392b;transform:translateY(-2px)}.btn-outline{background-color:transparent;color:var(--secondary-color);border:2px solid var(--secondary-color)}.btn-outline:hover{background-color:var(--secondary-color);color:var(--white)}.section{padding:60px 0}.section-title{text-align:center;font-size:2.5rem;margin-bottom:20px;color:var(--primary-color)}.section-subtitle{text-align:center;font-size:1.2rem;color:var(--medium-gray);margin-bottom:50px;max-width:600px;margin-left:auto;margin-right:auto}.grid{display:grid;gap:30px}.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.grid-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.grid-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.card{background:var(--white);border-radius:10px;box-shadow:0 5px 15px #0000001a;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}.card:hover{transform:translateY(-5px);box-shadow:0 10px 25px #00000026}.card-image{width:100%;height:200px;object-fit:cover}.card-content{padding:20px}.card-title{font-size:1.3rem;margin-bottom:10px;color:var(--primary-color)}.card-text{color:var(--medium-gray);margin-bottom:15px}@media (max-width: 768px){.container{padding:0 15px}.section{padding:40px 0}.section-title{font-size:2rem}.grid{gap:20px}}