:root{ --primary:#FF6B00; --primary-dark:#E55F00; --dark:#0F172A; }
    body { font-family: 'Poppins', sans-serif; background: #F8FAFC; padding-top: 80px; }
    h1,h2,h3,h4,h5{ font-family: 'Montserrat', sans-serif; font-weight: 800; }
    
    /* SAME NAVBAR AS INDEX */
    .navbar{ background: rgba(15,23,42,0.95); backdrop-filter: blur(10px); padding: 15px 0; }
    .navbar-brand{ font-weight: 800; font-size: 1.5rem; color: var(--primary) !important; display:flex; align-items:center; }
    .navbar-brand img{ height: 40px; width: auto; margin-right: 10px; }
    .nav-link{ color: #fff !important; font-weight: 500; margin-left: 15px; }
    .nav-link:hover, .btn-cta{ background: var(--primary); color: #fff !important; border-radius: 8px; padding: 8px 18px !important; }

    .page-header { background: linear-gradient(135deg, rgba(15,23,42,0.9), rgba(255,107,0,0.8)); color: #fff; padding: 80px 0; text-align: center; }
    
    .card-product{ position: relative; border: none; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 8px 30px rgba(0,0,0,0.08); transition: 0.3s; margin-bottom: 30px; }
    .card-product:hover{ transform: translateY(-8px); box-shadow: 0 12px 40px rgba(255,107,0,0.15); }
    
    .product-img-wrap{
      position: relative; /* key for centering tooltip */
      overflow: hidden;
    }
    .card-product img{ 
      height: 220px; 
      object-fit: cover; 
      display: block;
      width: 100%;
    }
    .price-tag{ color: var(--primary); font-weight: 700; font-size: 1.2rem; }
    
    /* HOVER TOOLTIP - CENTERED */
    .product-tooltip{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(15,23,42,0.92);
      color: #fff;
      padding: 10px 18px;
      border-radius: 12px;
      font-size: 0.9rem;
      font-weight: 700;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      z-index: 10;
      pointer-events: none;
      border: 2px solid var(--primary);
      box-shadow: 0 6px 20px rgba(0,0,0,0.25);
      backdrop-filter: blur(4px);
    }
    .card-product:hover .product-tooltip{
      opacity: 1;
      visibility: visible;
    }
    
    .btn-primary { background: var(--primary); border: none; border-radius: 10px; font-weight: 600; }
    .btn-primary:hover { background: var(--primary-dark); }
    
    .filter-btn { margin: 5px; border-radius: 20px; border: 2px solid var(--primary); color: var(--primary); background: #fff; font-weight: 600; }
    .filter-btn:hover, .filter-btn.active { background: var(--primary); color: #fff; }
    
    .cart-badge { background: red; color: #fff; border-radius: 50%; padding: 2px 7px; font-size: 12px; }