body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; }
.navbar-brand { letter-spacing: 0.3px; }

/* Make sure the page fills the viewport */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Flex layout to anchor the footer */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Main content expands to fill remaining space */
main {
  flex: 1 0 auto;
}

/* Footer styling — already styled by Bootstrap, but we can refine it */
footer {
  flex-shrink: 0;
  background-color: #111; /* overrides Bootstrap bg-dark if needed */
  color: #f8f9fa;
  text-align: center;
  padding: 2rem 0;
  margin-top: auto; /* ensures it sits at the bottom */
  font-size: 0.9rem;
  letter-spacing: 0.3px;
}

/* Optional: make sure the container text stays centered */
footer p {
  margin-bottom: 0;
}

#productGallery img, #productGallery video {
  cursor: pointer;
  transition: transform .2s ease;
}
#productGallery img:hover {
  transform: scale(1.03);
}
#lightbox {
  z-index: 1055;
  display: flex;
}

.card-img-top {
  transition: transform 0.2s ease-in-out;
}
.card-img-top:hover {
  transform: scale(1.03);
}
.card {
  border-radius: 1rem;
}
.empty-state img {
  opacity: 0.6;
  transition: opacity 0.3s ease-in-out;
}
.empty-state img:hover {
  opacity: 1;
}