/* overrides.css - scoped to home page */

/* Scope to index.html by using body.home */
body.home .topnav { background: #ffffff; padding:8px 16px; position:static; border-bottom:1px solid rgba(0,0,0,0.06); }
body.home .topnav ul { margin:0; padding:0; list-style:none; display:flex; gap:1rem; align-items:center; }
body.home .topnav a { color:#222222; text-decoration:none; padding:6px 8px; display:inline-block; font-weight:600; }
body.home .topnav a:hover { color:#1ebdd1; }

/* Make banner and spotlight images use flex flow and bottom-aligned images */
body.home section.banner.style1, body.home section.spotlight.style1 { display:flex; align-items:flex-start !important; }
body.home section.banner.style1 .content, body.home section.spotlight.style1 .content { box-sizing:border-box; }

body.home section.banner.style1 .image,
body.home section.spotlight.style1 .image {
  position: relative !important;
  display: -webkit-flex !important;
  display: -ms-flexbox !important;
  display: flex !important;
  align-items: flex-end !important; /* bottom-align images */
  justify-content: center !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Conservative default for all images on the home page */
body.home .image img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  background: transparent;
}

/* Orientation specific sizing - JS will add .portrait or .landscape to the .image container */
body.home .image.portrait { width: 20%; max-width: 24rem; }
body.home .image.portrait img { max-height: 60vh; }

body.home .image.landscape { width: 36%; max-width: 48rem; }
body.home .image.landscape img { max-height: 70vh; }

/* Specific tweaks for wishlist section (keeps it small and right aligned on wide screens) */
body.home #wishlist .image.portrait { width: 12%; max-width: 16rem; }
body.home #wishlist .image.landscape { width: 20%; max-width: 28rem; }

/* Portrait images: let image determine container height, avoid stretching */
body.home .image.portrait { align-self: flex-start !important; height: auto !important; display: block !important; }
body.home .image.portrait img { max-height: none !important; height: auto !important; width: auto !important; display: block !important; margin: 0 !important; }

/* For banners specifically, bottom-align portrait images so they don't leave whitespace below */
body.home section.banner.style1 .image.portrait { align-self: flex-end !important; }
body.home section.banner.style1 .image.portrait img { margin-bottom: 0 !important; }

/* Mobile: stack content and scale images to a sensible percentage of the viewport */
@media screen and (max-width: 736px) {
  body.home section.banner.style1,
  body.home section.spotlight.style1 { -webkit-flex-direction: column-reverse !important; -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; align-items: center !important; }
  body.home section.banner.style1 .content,
  body.home section.spotlight.style1 .content { width: 100% !important; padding-left: 1.25rem !important; max-width: none !important; }
  body.home .image { width: 100% !important; margin-left: 0 !important; padding: 0 !important; align-self: center !important; }
  body.home .image img { width: 60% !important; margin: 0.75rem auto !important; display: block !important; object-fit: contain !important; }
  /* Ensure portrait images are centered on narrow screens */
  body.home .image.portrait { align-self: center !important; }
  body.home section.banner.style1 .image.portrait { align-self: center !important; }
}

/* Fixes: allow small widths and prevent cropping/disappearance */
body.home section.spotlight.style1 .image,
body.home section.banner.style1 .image { min-width: 0 !important; }

body.home .spotlight.style1 .image img,
body.home .banner.style1 .image img {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 70vh !important;
  object-fit: contain !important;
  object-position: center !important;
  opacity: 1 !important;
}

/* Ensure scrollex animations don't keep images hidden */
body.home .image.is-inactive img,
body.home .spotlight.onscroll-image-fade-in.is-inactive .image img,
body.home .spotlight.onscroll-image-fade-right.is-inactive .image img {
  opacity: 1 !important;
  transform: none !important;
}