body { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); min-height: 100vh; }
.product-card { transition: all 0.3s ease; border: none; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); }
.product-card img { object-fit: cover; height: 220px; width: 100%; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Header Modern Design */
.navbar { box-shadow: 0 2px 20px rgba(0,0,0,0.1); background: linear-gradient(45deg, #ffffff 0%, #f8f9fa 100%) !important; }
.navbar-brand { font-weight: 600; color: #2c3e50 !important; }
.nav-link { 
  font-weight: 500; 
  transition: all 0.3s ease; 
  color: #495057 !important; 
  border-radius: 8px;
  padding: 8px 16px !important;
  margin: 0 2px;
  background: linear-gradient(145deg, #ffffff, #f1f3f4);
  box-shadow: 2px 2px 6px rgba(0,0,0,0.1), -1px -1px 3px rgba(255,255,255,0.8);
  border: 1px solid rgba(0,0,0,0.05);
}
.nav-link:hover { 
  color: #007bff !important; 
  transform: translateY(-2px); 
  box-shadow: 3px 3px 8px rgba(0,0,0,0.15), -2px -2px 5px rgba(255,255,255,0.9);
  background: linear-gradient(145deg, #f8f9fa, #ffffff);
}
.nav-link.active { 
  color: #007bff !important; 
  background: linear-gradient(145deg, #e3f2fd, #bbdefb);
  box-shadow: inset 2px 2px 4px rgba(0,0,0,0.1), inset -1px -1px 2px rgba(255,255,255,0.5);
}

/* Topbar Gradient */
.topbar-gradient { background: linear-gradient(90deg, #6c757d 0%, #495057 100%); }

/* Slider adaptive height (no crop, no letterbox) */
.slider-frame{display:block;background:transparent}
.slider-frame img{width:100%;height:auto;object-fit:contain}

/* Multi-level dropdown */
.dropdown-menu .dropdown-toggle:after{content:''}
.dropdown-submenu{position:relative}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-left:.1rem;margin-right:.1rem}
.dropdown-submenu>.dropdown-menu{display:none}
.dropdown-submenu>.dropdown-menu.show{display:block}
.dropdown-menu{min-width:220px}
.dropdown-item{white-space:normal}

/* Hover open for desktop */
@media (min-width: 992px){
  .dropdown:hover>.dropdown-menu{display:block}
  .dropdown-submenu:hover>.dropdown-menu{display:block}
}

/* Image zoom on hover */
.zoom-wrap{display:block;position:relative;overflow:hidden;border-radius:.25rem;background:#fff}
.zoom-wrap img{transition:transform .25s ease;transform-origin:center center}
.zoom-wrap:hover img{transform:scale(1.96)}
.product-card .zoom-wrap{height:220px}
.product-card .zoom-wrap img{height:100% !important;width:100%;object-fit:cover}
.product-card .zoom-wrap:hover img{transform:none !important}
.zoom-480{height:480px}
.zoom-480 img{height:100% !important;width:100%;object-fit:contain}

/* Lightbox modal */
.lightbox-img{max-height:85vh;width:100%;height:auto;object-fit:contain;background:transparent}

/* Smooth animations */
.btn{transition:all 0.3s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.form-control,.form-select{transition:all 0.3s ease}
.form-control:focus,.form-select:focus{transform:scale(1.02);box-shadow:0 0 0 0.2rem rgba(0,123,255,0.25)}
.card{transition:all 0.3s ease}
.list-group-item{transition:all 0.3s ease}
.list-group-item:hover{background-color:#f8f9fa;transform:translateX(4px)}
.carousel-item{transition:transform 0.6s ease-in-out}
.navbar-nav .nav-link{transition:all 0.3s ease}
.pagination .page-link{transition:all 0.3s ease}
.pagination .page-link:hover{transform:translateY(-2px)}

/* Pulse animation for important elements */
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}
.btn-primary{animation:pulse 2s infinite}
.navbar-brand img{transition:all 0.3s ease}
.navbar-brand:hover img{transform:scale(1.1)}