:root {
  --container-width: 100%;
  --sidebar-width: 15%; /* Reduced sidebar width */
  --product-grid-width: 85%; /* Increased product grid width */
  --gap: 15px; /* Smaller gap for tighter layout */
  --card-bg-color: #f8f9fa; /* Light background color for cards */
  --card-border-color: #ddd; /* Subtle border color for cards */
  --hover-bg-color: #e6f7ff; /* Light blue background on hover */
}

/* Layout adjustments */
.container, .page-content {
  max-width: var(--container-width);
  margin: auto;
  padding: 30px;
}

.product-page-layout {
  display: flex;
  justify-content: space-between;
}

.filter-sidebar {
  width: var(--sidebar-width);
}

.product-listing {
  width: var(--product-grid-width);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Smaller product cards */
  gap: var(--gap);
  padding: 30px 0;
}

/* Card styling */
.card {
  background-color: var(--card-bg-color);
  border: 1px solid var(--card-border-color);
  border-radius: 15px;
  box-shadow: 0px 0px 1px 1px red;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
  background-color: var(--hover-bg-color);
  border-color: #00aaff; /* Bright border on hover */
}

/* Product Image Styling */
.card-img-top {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/* Card Title Styling */
.card-title {
  color: #007bff; /* Bright blue for the product name */
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 0.5rem;
}

/* Price and Stock Status Styling */
.card .price {
  color: #28a745; /* Green for price */
  font-weight: bold;
  font-size: 1em;
}

.card .out-of-stock {
  color: #dc3545; /* Red for out of stock */
  font-weight: bold;
}

/* Hover Effect */
.card:hover .card-title {
  color: #0056b3; /* Darker blue on hover */
}

.card:hover .price {
  color: #1c7430; /* Darker green on hover */
}

/* Responsive adjustments for tablet and mobile */
@media (max-width: 992px) {
  .product-page-layout {
    flex-direction: column;
  }
  .filter-sidebar, .product-listing {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .product-listing {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Smaller cards for mobile */
    gap: 10px;
  }
}