/* Universal Image System - Ensures all images load with correct paths */

/* Image Reset and Base Styles */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Responsive Images */
img[loading="lazy"] {
  background-color: #f5f5f5;
}

/* Product Images */
.product-image,
.product-img,
.product-photo {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  background-color: #f5f5f5;
}

/* Gallery Images */
.gallery-image,
.gallery-img,
.carousel-image {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* Thumbnail Images */
.thumb-image,
.thumbnail,
.category-thumb {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
}

/* Badge/Icon Images */
.badge-image,
.icon-image,
.small-image {
  max-width: 100%;
  height: auto;
}

/* Section Images (Hero, Banner, etc) */
.section-image,
.banner-image,
.hero-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Category/Collection Images */
.category-image,
.collection-image,
.collection-thumb {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* Image Container Wrappers */
.image-wrapper,
.img-wrapper,
.image-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #f5f5f5;
}

.image-wrapper img,
.img-wrapper img,
.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Aspect Ratio Containers */
.img-1-1 {
  aspect-ratio: 1 / 1;
}

.img-4-3 {
  aspect-ratio: 4 / 3;
}

.img-16-9 {
  aspect-ratio: 16 / 9;
}

.img-3-4 {
  aspect-ratio: 3 / 4;
}

/* Image with overlay */
.image-overlay-container {
  position: relative;
  overflow: hidden;
  background-color: #f5f5f5;
}

.image-overlay-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.image-overlay-container:hover img {
  transform: scale(1.05);
}

/* Image Alignment Utilities */
.img-center {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
}

.img-center img {
  max-width: 100%;
  height: auto;
}

/* Broken Image Handling */
img[alt]:not([src*="."]):after,
img:broken {
  content: attr(alt);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  color: #999;
  font-size: 12px;
  padding: 10px;
  text-align: center;
  min-height: 100px;
}

/* Brand/Logo Images */
.brand-logo,
.logo-image,
.site-logo {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Ensure sport-pics directory images load properly */
/* This helps with relative path resolution */
[src*="sport-pics/"],
[src*="sport-pics\\"] {
  /* Images from sport-pics directory */
}

/* Responsive image styles */
@media (max-width: 768px) {
  .product-image,
  .gallery-image,
  .section-image {
    max-width: 100%;
    height: auto;
  }
}