.section.shop.hero{
  min-height: 45vh;
  overflow-x: clip;
}

.section.shop.hero .tittle{
  display: flex;
  flex-direction: column;
  grid-column-end: 4;
  margin: calc(var(--default-padding-frame) * 3) 0 0 0;
}
.section.shop.hero .category-image-preview{
  grid-column-start: 5;
  grid-column-end: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.section.shop.hero .category-image-preview img{
  width: 100%;
  height: 160%;
  object-fit: cover;
  -webkit-filter: drop-shadow(0px 8px 20px rgb(0 0 0 / 16%));
  filter: drop-shadow(0px 8px 20px rgb(0 0 0 / 16%));
}
.section.shop.hero .background-image::before{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#020298+0,020a77+100 
  background: linear-gradient(to bottom, rgb(2 2 152 / 60%) 0%, rgb(28 39 199 / 95%) 100%);
  */
}
.section.shop.hero .background-image::after{

}

.section.shop.hero .constraint>.add-padding>.container>.tittle .hero-path-container{
  display: flex;
  margin-bottom: 0;
  align-items: center;
}
.section.shop.hero .constraint>.add-padding>.container>.tittle h1{
    font-size: 4.8em;
    text-shadow: 0 0 50px #00000054;
}
.section.shop.hero .constraint>.add-padding>.container>.tittle .hero-path-container h4,
.section.shop.hero .constraint>.add-padding>.container>.tittle .hero-path-container h5{
  margin-block-start: 0;
  margin-block-end: 0;
  color: rgb(255 255 255 / 82%);
  text-shadow: 0 0 30px #00000054;
}
.section.shop.hero .constraint>.add-padding>.container>.tittle .hero-path-container h4:hover,
.section.shop.hero .constraint>.add-padding>.container>.tittle .hero-path-container h5:hover{
  color: #ffffff;
  color: var(--primary-brand-color);
}
.section.shop.hero .constraint>.add-padding>.container>.tittle .hero-path-container span.arrow,
.section.shop.hero .constraint>.add-padding>.container>.tittle .hero-path-container span.arrow{
  display: flex;
  align-items: center;
  justify-content: center;
  fill: #ffffffa8;
  margin: 3px calc(var(--default-items-margin) / 2) 0 calc(var(--default-items-margin) / 8);
}
.section.shop.hero .constraint>.add-padding>.container>.tittle .hero-path-container span.arrow:last-child,
.section.shop.hero .constraint>.add-padding>.container>.tittle .hero-path-container span.arrow:last-child{
  display: none;
}
.section.shop.hero .constraint>.add-padding>.container>.tittle .hero-path-container .arrow svg,
.section.shop.hero .constraint>.add-padding>.container>.tittle .hero-path-container .arrow svg{
  fill:inherit;
  height: 20px;
  width: 20px;
}
#hero-bg-shape{
  z-index: 9;
  width: auto;
  height: var(--home-hero-section-height);
  height: 190%;
  bottom: -1px;
  right: 0;
  display: block;
  position: absolute;
}
.shop-toolbar-top{
  position:sticky;
  top: calc((var(--default-padding-frame) / 2) + var(--header-logo-height));
  margin: 0 0 0 0;
  background-color: #eeeeee;
  background: linear-gradient(to bottom, rgb(245 245 245) 60%, rgba(253, 253, 253, 1) 100%);
  z-index: 10;
  transition: all 250ms ease-in-out;
}
.scrolling .shop-toolbar-top{
  top: 0;
  
}
.scrolling.up .shop-toolbar-top{
  top: calc((var(--default-padding-frame) / 2) + var(--header-logo-height));
}

.shop-toolbar-top.is-pinned{
  
}
.scrolling .shop-toolbar-top.is-pinned,
.scrolling.up .shop-toolbar-top.is-pinned{
  background: linear-gradient(to bottom, rgb(255, 255, 255) 60%, rgba(253, 253, 253, 1) 100%);
}
.shop-toolbar-top::after{
  content: "";
  display: block;
  width: 100%;
  height: 60px;
  position: absolute;
  top: 100%;
  background: linear-gradient(to bottom, rgba(253, 253, 253, 1) 0%, rgba(253, 253, 253, 0) 100%);
  z-index: 1;
  will-change: height;
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  -ms-transition: all 250ms ease-in-out;
  -o-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
}
.shop-toolbar-top.is-pinned::after{
  height: 40px;
}
.shop-toolbar-top .constraint .add-padding{
  will-change: padding;
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  -ms-transition: all 250ms ease-in-out;
  -o-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
}
.shop-toolbar-top.is-pinned .constraint .add-padding{
  padding: calc((var(--default-padding-frame) / 2)) var(--default-padding-frame) ;
}

.shop-toolbar-top ul{
  grid-column-start: 1;
  grid-column-end: 7;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0;
  list-style: none;
  margin: 0;
  gap: 0;
  position: relative;
  gap:calc(var(--default-items-margin) / 2);
}

.shop-toolbar-top ul li{
  background-color: #f9f9f900;
  color: var(--color-shade-dark-800);
  border-radius:  20px 20px 20px 20px;
  position: relative;
}
.shop-toolbar-top ul li.rounded{
  border-radius:  50%;
}

.shop-toolbar-top ul li a{
  padding: calc(var(--default-items-padding) * 1.2) calc(var(--default-items-padding) * 1.6);
  display: flex;
  box-sizing: border-box;
  align-items: center;
  will-change: padding;
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  -ms-transition: all 250ms ease-in-out;
  -o-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
}

.shop-toolbar-top.is-pinned ul li a{
  padding: calc(var(--default-items-padding) / 1.2) calc(var(--default-items-padding) * 1.6);
}
.shop-toolbar-top ul li.selectd{
  background-color: #ffffff;
  box-shadow: 0px 8px 20px 0 rgb(0 0 0 / 8%);
  color: var(--primary-brand-color);
}
.shop-toolbar-top ul li:hover{
  box-shadow: 0px 8px 20px 0 rgb(0 0 0 / 8%);
  color: var(--primary-brand-color);
  z-index: 1;
  background-color: #f9f9f9;
}
.shop-toolbar-top ul li.selectd:hover{
  background-color: #ffffff;
  box-shadow: 0px 8px 20px 0 rgb(0 0 0 / 8%);
  color: var(--primary-brand-color);
}
.shop-toolbar-top ul li.with-icon a{
  padding: calc(var(--default-items-padding) * 1) calc(var(--default-items-padding) * 1);
}
.shop-toolbar-top.is-pinned ul li.with-icon a{
  padding: calc(var(--default-items-padding) / 1.2) calc(var(--default-items-padding) / 1.2);
}
.shop-toolbar-top ul li a h4,
.shop-toolbar-top ul li a h5{
  margin-block-start: 0;
  margin-block-end: 0;
}
.shop-toolbar-top ul li a.remove-filter{
  display: none;
  position: absolute;
  right: -12px;
  top: -12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 4px;
  box-shadow: 0px 8px 20px 0 rgb(0 0 0 / 8%);
  cursor: pointer;
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  -ms-transition: all 250ms ease-in-out;
  -o-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
}
.shop-toolbar-top ul li a.remove-filter:hover{
  box-shadow: 0px 8px 20px 0 rgb(0 0 0 / 32%);
  background-color: rgba(255, 255, 255, 1);
}
.shop-toolbar-top ul li a.remove-filter svg{
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  -ms-transition: all 250ms ease-in-out;
  -o-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
}
.shop-toolbar-top ul li a.remove-filter:hover svg{
  transform: scale(1.1);
  fill: var(--color-error);
}
.shop-toolbar-top ul li.selectd a.remove-filter{
  display: flex;
}
/*
.shop-toolbar-top ul li:first-child{
  border-radius: 20px 0 0 20px;
}
.shop-toolbar-top ul li:last-child{
  border-radius:  0 20px 20px 0;
}
  */
.section.shop.products{
  min-height: 50vh;
}
.products-ul{
  list-style: none;
  padding: 0;
  margin: 0 0 calc(var(--default-items-margin) * 4);
  grid-column-start: 1;
  grid-column-end: 7;
  gap: calc(var(--default-items-margin) * 2);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.products-ul li{
  width: 100%;
  border-radius: 24px;

  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  -ms-transition: all 250ms ease-in-out;
  -o-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
}
.products-ul li:hover{
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.products-ul li a{
  display: block;
  box-sizing: border-box;
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  -ms-transition: all 250ms ease-in-out;
  -o-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
  box-sizing: border-box;
  border-width: 5px;
  border-color: #fff;
  border-style: solid;
  border-radius: 20px;
}
.products-ul li a .image-cont{
  width: 100%;
  position: relative;
}
.products-ul li a .image-cont::after{
  content: "";
  display: block;
  width: 100%;
  padding-bottom:70%;
}
.products-ul li a .image-cont img{
  position: absolute;
  width: 80%;
  height: 80%;
  object-fit: contain;
  margin: 10%;
}
.products-ul li a .description{
  text-align: center;
  margin: 0 calc(var(--default-items-margin) / 2) calc(var(--default-items-margin) * 2);
}
.products-ul li a .description h4{
  margin: 0 auto 0.33em;
  font-size: 1.35em;
}
.products-ul li a .description h3{
  margin: 0 auto 0.33em;
}
.products-ul li a .description h5{
  font-weight: 500;
  max-width: 300px;
  margin: 0 auto 0.33em;
  font-weight: 400;
  color: var(--color-shade-dark-600);
}
.products-ul li a .description ul{
  margin: calc(var(--default-items-margin) * 0.5) auto calc(var(--default-items-margin) * 2);
  list-style: none;
  padding: 0;
  color: var(--color-shade-dark-600);
  font-weight: 500;
  opacity: 0;
  max-width: 75%;
}
.products-ul li:hover a .description ul{
  opacity: 1;
}
.products-ul li a .description ul li:hover {
  box-shadow: unset;
}
.products-ul li a .description ul li{
  margin: calc(var(--default-items-margin) / 4) 0 calc(var(--default-items-margin) / 4);
}
@media screen and (min-width: 1921px) and (max-width: 2560px){
  .section.shop.hero{
    min-height: 35vh;
  }
}
@media screen and (min-width: 1901px) and (max-width: 1920px){
  .section.shop.hero{
    min-height: 35vh;
  }
}

@media screen and (min-width: 1801px) and (max-width: 1900px){
  .section.shop.hero{
    min-height: 30vh;
  }
}
@media screen and (min-width: 1701px) and (max-width: 1800px){
  .section.shop.hero{
    min-height: 30vh;
  }
}
@media screen and (min-width: 1601px) and (max-width: 1700px){
  .section.shop.hero{
    min-height: 30vh;
  }
}
@media screen and (min-width: 1560px) and (max-width: 1600px){
  .section.shop.hero{
    min-height: 30vh;
  }
}
@media screen and (min-width: 1441px) and (max-width: 1559px){
  .section.shop.hero{
    min-height: 30vh;
  }
}
@media screen and (min-width: 1366px) and (max-width: 1440px){
  .section.shop.hero{
    min-height: 30vh;
  }
}
@media screen and (min-width: 1260px) and (max-width: 1365px){
  .section.shop.hero{
    min-height: 30vh;
  }
}
@media screen and (min-width: 1160px) and (max-width: 1259px){
  .section.shop.hero{
    min-height: 30vh;
  }
}
@media screen and (min-width: 1020px) and (max-width: 1159px){
  .section.shop.hero{
    min-height: 30vh;
  }
}
@media screen and (min-width:0px) and (max-width:1019px) {
  .products-ul{
    grid-template-columns: repeat(1, 1fr);
  }
  .shop-toolbar-top .constraint .add-padding{
    padding: calc((var(--default-padding-frame) / 2)) var(--default-padding-frame);
  }
  .section.shop.hero .constraint>.add-padding>.container>.tittle .hero-path-container{
    justify-content: center;
  }
  .products-ul li a .description ul{
    opacity: 1;
  }
  .products-ul li a .description h4{
    max-width: 75%;
  }
  .shop-toolbar-top ul li a{
    white-space: nowrap;
  }
  .shop-toolbar-top ul{
    overflow-x: scroll;
    overflow-y: overlay;
    padding: calc(var(--default-padding-frame) / 2) 0;
    justify-content: flex-start;
    scroll-snap-align: start;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
  }
  .shop-toolbar-top ul.filter-no-2{
    justify-content: center;
  }
  .shop-toolbar-top ul li{
    scroll-snap-align: start;
  }
  .section.shop.hero .tittle{
    grid-column-end: 7;
    grid-row-start: 2;
    grid-row-end: 2;
    margin: calc(var(--default-padding-frame) * 2) 0 0 0;
  }
  .section.shop.hero .category-image-preview{
    grid-row-start: 1;
    grid-row-end: 1;
    grid-column-start: 1;
    grid-column-end: 7;
    margin: calc(var(--default-padding-frame) * 4) 0 0 0;
    aspect-ratio: 4 / 2;
    position: relative;
  }
  .section.shop.hero .category-image-preview img{
    width: 130%;
    height: auto;
    object-fit: contain;
    margin: 0 auto 0 0;
    position: absolute;
    margin-right: 0;
  }
  .section.shop.hero .constraint>.add-padding>.container>.tittle h1{
    font-size: 2.8em;
    color: rgb(0 0 0 / 82%);
    margin-block-start: calc(var(--default-items-margin) / 2);
    text-align: center;
  }
  .section.shop.hero .constraint .add-padding{
    padding: var(--default-padding-frame) var(--default-padding-frame) 0;
  }
  .section.shop.hero .constraint>.add-padding>.container>.tittle .hero-path-container h4,
  .section.shop.hero .constraint>.add-padding>.container>.tittle .hero-path-container h5{
    color: rgba(0, 0, 0, 0.82);
  }

  .section.shop.hero .constraint>.add-padding>.container>.tittle .hero-path-container span.arrow,
  .section.shop.hero .constraint>.add-padding>.container>.tittle .hero-path-container span.arrow{
    fill: rgb(0 0 0 / 66%);
  }
  .section.shop.hero .background-image::before{
    background: linear-gradient(180deg, rgb(5 5 5 / 40%) 0%, rgba(21, 21, 21, 0) 98.69%);
  }
}