/* Main CSS */
.top-bar{background:#111;color:#fff;display:flex;justify-content:space-between;gap:10px;padding:8px 20px;font-size:14px;align-items:center;flex-wrap:wrap}.top-bar a{color:#d4af37;text-decoration:none}.top-bar a:hover{text-decoration:underline}@media(max-width:768px){.top-center{display:none}.top-bar{font-size:12px;padding:8px 12px}}

.header{position:sticky;top:0;background:#111;color:#fff;padding:14px 0;z-index:999}.nav-container{display:flex;justify-content:space-between;align-items:center}.navbar a,.nav-actions a,.logo{color:#fff;text-decoration:none;margin:0 10px}.navbar a:hover,.nav-actions a:hover{color:#d4af37}


@media (max-width:768px){
nav ul{flex-direction:column}
.hero{padding:40px 15px}
.products-grid,.categories-grid,.features-grid{grid-template-columns:1fr!important}
img{max-width:100%;height:auto}
.header,.topbar{flex-wrap:wrap}
}

.search-suggestions{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ddd;z-index:9999;max-height:260px;overflow:auto}
.suggestion-item{padding:10px;cursor:pointer}
.suggestion-item:hover{background:#f5f5f5}


/* UI/UX animations */
.fade-up{opacity:0;transform:translateY(24px);transition:all .6s ease}
.fade-up.visible{opacity:1;transform:none}
.hover-lift{transition:transform .25s ease, box-shadow .25s ease}
.hover-lift:hover{transform:translateY(-6px);box-shadow:0 10px 24px rgba(0,0,0,.15)}
button,a.btn{transition:all .25s ease}
button:hover,a.btn:hover{transform:scale(1.03)}