/* ===================================
   Product Categories Section (Official Winkflo Style)
   =================================== */

/* Section spacing is handled by .index-section in theme.css */

/* Official Collection Item Styles */
.collection-item {
  position: relative;
  display: block;
  margin-bottom: 17px;
  overflow: hidden;
  cursor: pointer;
  pointer-events: auto !important;
  z-index: 10; /* Ensure category links are above other content */
}

@media only screen and (min-width: 769px) {
  .collection-item {
    margin-bottom: 22px;
  }
}

.collection-item:hover .collection-image {
  transform: scale(1.03);
  transition: all 0.8s ease;
}

/* Collection Image - Landscape (Square) */
.collection-image {
  position: relative;
  transition: transform 0.3s ease;
  background: #ffffff; /* White background for images */
}

.collection-image img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: contain; /* Contain to show full image */
  display: block;
}

.collection-image--landscape {
  padding-top: 75%; /* Official site uses 75% */
  position: relative;
  overflow: hidden;
}

.collection-item--below img {
  object-fit: contain;
}

/* Image Wrap */
.image-wrap {
  background: #ffffff; /* White background like official site */
  overflow: hidden;
}

.image-wrap img:not([role=presentation]) {
  display: block;
}

.collection-image.image-wrap {
  background: #ffffff;
}

/* Collection Item Title (Official Winkflo Theme) */
.collection-item__title {
  display: block;
  z-index: 2;
  font-size: calc(var(--typeCollectionTitle) * .8);
  line-height: 1em;
}

@media only screen and (min-width: 769px) {
  .collection-item__title {
    font-size: var(--typeCollectionTitle);
  }
  
  .medium-up--one-fifth .collection-item__title {
    font-size: 16px;
  }
}

.collection-item--below .collection-item__title {
  margin-top: 5px; /* Official uses 5px */
}

.collection-item__title--heading {
  font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback);
  font-weight: var(--typeHeaderWeight);
  letter-spacing: var(--typeHeaderSpacing);
  line-height: var(--typeHeaderLineHeight);
}

.collection-item__title--center {
  text-align: center;
}

[data-type_product_capitalize=true] .collection-item__title span {
  text-transform: uppercase;
  font-size: .8em;
  letter-spacing: .2em;
}

/* Custom Responsive Class */
.custom_responsive {
  direction: ltr;
}

/* Desktop - Force 5 columns layout (Official Style) */
@media only screen and (min-width: 769px) {
  .index-section .grid.grid--uniform.custom_responsive {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    position: relative;
    z-index: 10; /* Ensure grid is above community section */
  }
  
  .index-section .grid__item.medium-up--one-fifth {
    float: left;
    width: 20%; /* Official uses 20% for 5 columns */
    flex: 0 0 20%;
    position: relative;
    z-index: 10;
  }
  
  .grid-overflow-wrapper {
    overflow: visible;
  }
  
  .collection-item {
    margin-bottom: 22px;
  }
}

/* Grid Overflow Wrapper - Mobile Horizontal Scroll */
@media only screen and (max-width: 768px) {
  .grid-overflow-wrapper {
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative;
    margin: 0 -15px !important;
    scrollbar-width: thin !important;
    scrollbar-color: #888 #f1f1f1 !important;
  }
  
  /* Show scrollbar like official site */
  .grid-overflow-wrapper::-webkit-scrollbar {
    height: 8px !important;
    display: block !important;
  }
  
  .grid-overflow-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 10px;
  }
  
  .grid-overflow-wrapper::-webkit-scrollbar-thumb {
    background: #888 !important;
    border-radius: 10px;
  }
  
  .grid-overflow-wrapper::-webkit-scrollbar-thumb:hover {
    background: #555 !important;
  }
  
  .grid-overflow-wrapper .grid {
    white-space: nowrap !important;
    display: flex !important;
    flex-wrap: nowrap !important;
  }
  
  .grid-overflow-wrapper .grid__item {
    width: 100%;
    flex: 0 0 39vw !important;
    min-width: 39vw !important;
    display: inline-block !important;
    float: none !important;
    white-space: normal;
  }
  
  .grid-overflow-wrapper .grid__item:first-child {
    margin-left: 17px !important;
  }
  
  .grid-overflow-wrapper .grid__item:last-child:after {
    content: "";
    display: inline-block;
    width: 100%;
    margin-right: 17px;
  }
  
  .collection-item {
    margin-bottom: 0 !important;
  }
  
  .collection-item__title {
    font-size: 12px;
  }
}