.images-container {
    border-bottom: 1px lightgray;
}
.details-row { */
    margin-top: 10px;
}
.details-row h6 {
    color: #240046;
}
.advert-container h4 {
    color: #240046;
}
.similar-ad-container {
    padding: 10px;
    padding-bottom: 5px;
    border-top: 1px solid lightgray;
    /* margin-top: 10px; */
}
.user-name-title {
    background-color:#240046;
    color: white;
    padding: 0 5px;
}
.sad-link {
    text-decoration: none;
    color: #240046;
}
.sad-price {
    margin-top: 5px;
    margin-bottom: 0;
}
.seller-details-container {
    border: 1px solid lightgray;
    margin-bottom: 20px;
}
.seller-details-container h6 {
    margin: 10px 0;
}
.similar-container {
    /* border: 1px solid lightgray; */
    margin-bottom: 10px;
}

@media (max-width: 571px) {
    .similar-container {
        margin: 5px;
    }
}

/* Target the images in the main slider for consistent styling (optional, but good practice) */
.slider-single .slick-slide img {
  width: 100%;
  height: auto; /* Let the height be determined by the image */
}

/* ---------------------------------------------------------------- */
/* STYLING FOR THE NAVIGATION SLIDER (THUMBNAILS) */
/* ---------------------------------------------------------------- */

/* 1. Target the slide wrapper that contains the image */
.slider-nav .slick-slide {
  /* This ensures all slides take up equal width/space as defined by slick */
  /* Remove any conflicting padding/margin if present in your default CSS */
  padding: 0 2px; /* Keep your existing inline padding if you want spacing */
  box-sizing: border-box;
}

/* 2. Target your custom image wrapper inside the thumbnail slide */
.slider-nav .image-slider-container {
  /* Set a fixed aspect ratio or height for the container. 
     Using a fixed height is simpler for your request. */
  height: 140px; /* Adjust this value (e.g., 100px) to your desired thumbnail height */
  overflow: hidden; /* Hide any content that tries to escape */
  background-color: #b3b3b3; /* The requested grey background color */
  display: flex; /* Helps center the image */
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */
  border-radius: 0.25rem; /* Matches your 'rounded' class if you want borders */
}

/* 3. Target the image within the container */
.slider-nav .image-slider-container img {
  width: 100%; /* Default width is 100% of the container */
  height: 100%; /* Default height is 100% of the container */
  
  /* Key property: This tells the image how to fit */
  object-fit: contain; 
  
  /* 'contain' scales the image down to fit completely within the container. 
     If the image is portrait, it will be centered, and the grey background will show on the left/right.
     If the image is landscape, it will stretch to 100% width, fill the container, and no grey background will show.
  */
}

/* 4. Optional: Highlight the active thumbnail */
.slider-nav .slick-slide.is-active .image-slider-container {
    border: 3px solid #9470B5; /* Example border color for active slide */
}
.advert-description ul {
    list-style: none;
}
.advert-description ul li {
    border: 1px solid #D9D9D9;
    margin-top: 5px;
    background-color: #ededed;
    padding: 2px 5px;
}
.advert-description h6 {
    margin-left: 10px;
    margin-bottom: 15px;
    margin-top: 5px;
}
.description-container {
    padding-top: 10px;
    border: 1px solid lightgray;
    margin-bottom: 20px;
}

@media (max-width: 571px) {
    .slider-nav .image-slider-container {
        height: 90px;
    }
    .advert-description ul {
        margin-right: 20px;
    }
    .seller-details-container {
        width: 90%;
        margin-left: 20px;
        /* margin-right: 20px; */
    }
    .description-container {
        width: 90%;
        margin-left: 20px;
        margin-bottom: 20px;
    }
}