/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* Sticky Price */
div.product div.summary p.price {
  position: sticky;
  top: 0;
  background-color: #fff;
}

/* Back to top button */
#back-to-top {
  position: fixed;
  bottom: clamp(10px, 2vw, 24px);
  right: clamp(10px, 2vw, 24px);
  width: clamp(40px, 4vw, 60px);
  height: clamp(40px, 4vw, 60px);
  border-radius: 50%;
  background: #710711;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: clamp(10px, 1.2vw, 14px);
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 9999;
}
#back-to-top i {
  font-size: clamp(12px, 1.5vw, 22px);
  margin-top: -2px;
}
#back-to-top:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

/* Filters css start - Desktop */

.parentfilters.clearfix {
  display: none !important;
}

.parent_filters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  justify-items: center;
  box-sizing: border-box; /* Include padding in width/height calculations */
  margin-bottom: 10px;
  margin-top: 10px;
}

.parent_filters .item {
  background: white;
  width: 100%;
  display: flex;
  border: 2px solid lightgrey;
  padding-left: 10px;
  box-sizing: border-box; /* Include padding in the item's width/height */
  align-items: center;
  height: 54px;
}

.parent_filters .item.border-now {
  border: 2px solid black;
}

.parent_filters .item span {
  padding: 5px;
  font-size: 18px;
  color: #333;
}

.parent_filters select.item {
  font-size: 18px;
  color: #333;
}

.close_filters .option {
  align-items: center; 
  margin: 0; 
  transition: all .2s ease-in-out; 
  display: inline-flex; 
  padding: 5px 20px; 
  border: 1px solid #707070; 
  border-radius: 20px; 
  font-size:22px;
} 

.close_filters .option .closeMe {
  font-weight: bold;
  cursor: pointer;
  margin-left: 10px; /* Spacing between text and close icon */
  display: flex; /* Ensures the icon is aligned inside the span */
  align-items: center;
}

.et_divi_theme .close_filters .option .closeMe {
  margin-top: 5px;
}

.close_filters {
  margin: 40px 0;
}

.mobile_grand_kids, .reg_filters_mobile {
  display: none;
}

/* Filters end Desktop */

/* Styles for Child Category Links Widget */
.child-category-links.two-column {
  columns: auto;
  column-count: 2;
}

.child-category-links .category-link a {
  display: block;
  padding: 2.5px 0;
  text-transform: uppercase;
  color: #707070;
  font-weight: normal;
}

.child-category-links .category-link a:hover, .child-category-links .category-link a:active {
  text-decoration: underline;
}

/* MEDIA QUERIES */

@media(min-width: 982px) {
  .single-product div.product div.summary p.price,
  .single-product div.product div.summary span.price,
  .single-product div.product div.summary .woocommerce-variation-price {
    position: sticky;
    top: 0px;
    z-index: 10;
    background-color: #fff;
    padding: 10px 0;
    margin-bottom: 10px;
  }
}

/* max-width: 981px */
@media (max-width: 981px) {
  .single-product .flex-control-thumbs {
    transition: opacity 200ms ease, visibility 200ms ease;
  }

  body.wc-hide-gallery-on-scroll .flex-control-thumbs {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: none;
  }

  .child-category-links.two-column {
    columns: auto;
    column-count: 1;
    background: #f1f1f1;
    padding-left: 10px;
  }

  /* Filters mobile start */

  .parent_filters.desktop, .mobile_grand_kids .item img, .mobile_grand_kids .grand_content, .parent_filters.desktop.cols-0  {
    display: none;
}

  .mobile_grand_kids {
      border: 1px solid #707070;
      margin-bottom: 20px;
      background-color: white;
  }

  .mobile_grand_kids span.toggle {
      text-align: left;
      color: #707070;;
      font-size: 20px;
      text-transform: uppercase;
      font-weight: normal;
      margin: 7.5px 0;
      padding: 0 10px;
      display: inline-block;
      width: 100%;
  }

  .mobile_grand_kids span.toggle:after {
      font-family: 'Font Awesome 6 Pro';
      content: "\f078";
      font-weight: 600;
      float: right;
      padding: 0;
      position: relative;
      font-size: 22px;
  }

  .mobile_grand_kids.grand_toggle_open span.toggle:after {
    content: "\f077";
  }

  .mobile_grand_kids .grand_content {
      padding: 0 10px;
  }

  .mobile_grand_kids, .reg_filters_mobile {
      display: block;
  }

  .mobile_grand_kids .item {
      width: 100%;
      display: block;
      color: #707070;
      border-bottom: .5px solid lightgrey;
      padding: 5px 0;
      margin-bottom: 0;
  }

  .mobile_grand_kids .item:last-child {
      border-bottom: none;
  }

  .mobile_grand_kids .item:active {
    background: rgba(0,0,0,0.1);
  }

  .reg_filters_mobile select {
      width: 100%;
      font-size: 20px;
      padding: 10px;
      color: #333;
  }

  .parent_filters .item.border-now {
    border: none;
  }

  /* Filters mobile end */

}