/* styles.css - core styling including background slider and search styles */
:root{
  --overlay: rgba(0,0,0,0.35);
}

/* Full-screen fixed slider container */
.bg-slider{
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

/* Each slide uses background-image, absolutely stacked and faded via keyframes */
/* Replace slide1.jpg, slide2.jpg, slide3.jpg with your referenced images in assets/images/ */
.bg-slide{
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: 0;
  animation: slidefade 18s linear infinite;
}
.bg-slide.s1{ background-image: url('/assets/images/slide1.jpg'); animation-delay: 0s; }
.bg-slide.s2{ background-image: url('/assets/images/slide2.jpg'); animation-delay: 6s; }
.bg-slide.s3{ background-image: url('/assets/images/slide3.jpg'); animation-delay: 12s; }

/* subtle dark overlay */
.bg-overlay{
  position: fixed; inset: 0; background: linear-gradient(rgba(0,0,0,0.22), rgba(0,0,0,0.22)); z-index:0;
}

/* Fade keyframes */
@keyframes slidefade{
  0% { opacity: 0; transform: scale(1.02); }
  5% { opacity: 1; transform: scale(1); }
  30% { opacity: 1; transform: scale(1); }
  35% { opacity: 0; transform: scale(0.98); }
  100% { opacity: 0; }
}

/* Make body cover full height similar to Bootstrap example */
html,body{ height:100%; }

/* Search suggestions */
#searchSuggestions { max-height: 320px; overflow:auto; }
#searchSuggestions .list-group-item { cursor:pointer; }

/* product detail layout small niceties */
.product-attributes dt { font-weight:600; }
.product-attributes dd { margin-bottom: 0.75rem; }

/* responsive tweaks */
@media (max-width:576px){
  .search-wrap { padding:0 10px; }
}