/* --- Custom CSS for Single Product Page --- */
    
    /* Give extra top padding so content is not overlapped by the fixed navbar */
    body {
      padding-top: 80px;
    }
    
    /* Container for the product image and info */
    .product-container {
      flex-direction: column;
      gap: 2rem;
    }
    @media (min-width: 768px) {
      .product-container {
        display: flex;
        align-items: center;
      }
    }
    
    /* Left column: product image */
    .product-image-column {
      flex: 1 1 40%;
      text-align: center;
    }
    .product-img {
      width: 100%;
      max-height: 400px;
      object-fit: contain;
    }
    
    /* Right column: product info */
    .product-info-column {
      flex: 1 1 60%;
      padding: 1rem;
    }
    
    /* Typography and spacing for product details */
    .product-info-column h1 {
      font-size: 2rem;
      font-weight: 600;
      margin-bottom: 1rem;
    }
    .product-info-column .price {
      font-size: 1.5rem;
      font-weight: 500;
      margin-bottom: 1.5rem;
      color: #0d6efd; /* primary blue accent */
    }
    .product-info-column .btn {
      min-width: 150px;
      margin-bottom: 1rem;
    }
    
    /* Tabs for product details & ingredients */
    .nav-tabs .nav-link {
      font-weight: 500;
      padding: 0.75rem 1.5rem;
    }
    .tab-content {
      padding-top: 1rem;
    }
    .product-description {
      font-size: 1rem;
      line-height: 1.6;
      text-align: justify;
    }