/* Overall Container */
.pdpCollections-wrapper {
    margin-block: 1rem;
    padding-block: .5rem;
    border-block: 1px solid #dedede;
}

/* Bold Title */
.pdpCollections-title {
    font-size: 24px;
    font-weight: 800;
    color: #3b3b3b;
    margin-bottom: 1.5rem;
    text-align: left;
}

/* Flex Container for Cards */
.pdpCollections-cards {
    display: flex;
    gap: 1.2rem; 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    scroll-snap-type: x mandatory;
    padding-bottom: 15px; 
    
    
    scrollbar-width: none; 
}
.pdpCollections-cards::-webkit-scrollbar {
    display: none; 
}

/* The Link/Card Wrapper */
.pdpCollections-link {
    text-decoration: none;
    scroll-snap-align: start; 
    
    /* Desktop sizing: Adjust the '25%' if you want 3 or 5 cards per row instead of 4 */
    flex: 0 0 calc(25% - 15px); 
    min-width: 220px; 
}

/* Card Interior Layout */
.pdpCollections-card {
    display: flex;
    flex-direction: column;
}

/* Image Styling */
.pdpCollections-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 5px 5px 0px 0px;
}

/* Text Styling */
.pdpCollections-name {
    font-size: 1rem;
    color: #3b3b3b;
    line-height: 1.4;
    text-align: left;
    padding: .6rem 1rem;
    background: #fafafa;
    border-radius: 0px 0px 5px 5px;
    border: 1px solid #d9d9d9;
    display: flex;
    align-items: center;
}

.pdpCollections-name::after{
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' fill='black' stroke='black' stroke-width='2' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  order: 2;
  transition: transform 0.3s ease;
  line-height: 1;
  margin-left: auto;
  padding: .3rem .4rem;
  background: #d2b98b;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: .7;
}


a:hover .pdpCollections-name::after,
.banner-slide:hover .bannerView__splide::before {
  transform: translateX(4px);
    opacity: 1;
}

/* --- MOBILE SPECIFIC STYLING --- */
@media (max-width: 1024px) {
    .pdpCollections-link {
        flex: 0 0 80%; 
    }
    
    .pdpCollections-cards {
        gap: 1rem;
    }
}