/*Extra CSS for Recent Beans */

.header-item--logo {
  position: relative;
}

.site-nav__dropdown {
  border-top: 26px solid var(--colorNav);
  padding-top: 70px;
  /*top: 109px;*/
}

.site-nav__link {
  padding: 20px 15px;
}

.site-header.site-header--stuck .site-header__logo img {
  max-width: 130px !important;
}

#ReCharge {
  padding-top: 80px;
}
  
@media (max-width:768px) {
  .collection-filter {
    top: 105px !important;
  }
}

.index-section.with-crack {
  margin: 0;
}

.product-block {
  .variant-input-wrap {
    input[type=radio]:checked+label {
      background-color: #FFFFFF;
      box-shadow: 0 0 0 2px #E3C16E;
      border-radius: 2px;
    }

    .variant-input[data-value="Whole Bean"],
    .variant-input[data-value="Cafetiere/French Press (Coarse ground)"],
    .variant-input[data-value="Filter (Medium Grind)"],
    .variant-input[data-value="AeroPress (Medium Fine Grind)"],
    .variant-input[data-value="Espresso (Fine Grind)"],
    .variant-input[data-value="Extra Fine"],
    .variant-input[data-value="250g"],
    .variant-input[data-value="500g"],
    .variant-input[data-value="1KG"]
    {
      label {
        align-content: flex-end;
        text-align: center;
        height: 120px;
        width: 100px;
        background-size: 48px;
        background-position: center 25px;
        background-repeat: no-repeat;
        padding: 0.5rem;
        font-size: 0.8rem;
        line-height: 0.8rem;
      }
    }

    .variant-input[data-value="Whole Bean"] label { background-image: url('variation-whole-bean@2x.png'); }
    .variant-input[data-value="Cafetiere/French Press (Coarse ground)"] label { background-image: url('variation-coarse@2x.png'); }
    .variant-input[data-value="Filter (Medium Grind)"] label { background-image: url('variation-medium@2x.png'); }
    .variant-input[data-value="AeroPress (Medium Fine Grind)"] label { background-image: url('variation-medium-fine@2x.png'); }
    .variant-input[data-value="Espresso (Fine Grind)"] label { background-image: url('variation-fine@2x.png'); }
    .variant-input[data-value="Extra Fine"] label { background-image: url('variation-extra-fine@2x.png'); }
    .variant-input[data-value="250g"] label { background-image: url('variation-bag-250g@2x.png'); }
    .variant-input[data-value="500g"] label { background-image: url('variation-bag-500g@2x.png'); }
    .variant-input[data-value="1KG"] label { background-image: url('variation-bag-1000g@2x.png'); }
  }
}

.featured-collection {
  padding: 40px 0;
  background-color: #FFFFFF;

  @media only screen and (min-width:769px){
    padding: 75px 0;
  }

  .grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
    justify-content: center;

    .grid__item {
      padding-left: 0;
    }
  }
}

.template-collection,
.template-search {
  .main-content {
    background-color: #ffffff;

    .grid {
      display: flex;
      flex-wrap: wrap;
      gap: 40px;
      align-items: flex-start;
      justify-content: space-between;
      margin: 0;
 
      @media screen and (max-width: 1360px) {
        justify-content: flex-start;
      }

      @media screen and (max-width: 920px) {
        justify-content: center;
      }

      .grid__item {
        padding-left: 0;

        .product-grid-item {
          /* width: 446px; */

          @media screen and (max-width: 1500px) {
            width: 400px;
          }
        }
      }
    }
  }
}

.product-recommendations-placeholder {
  .grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
    justify-content: center;
  }
}

.collection-hero--overlay {
  position: relative;
}

.collection-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  pointer-events: none;
  z-index: 1;
}

/* Ensure the content like title and breadcrumbs stays on top */
.collection-hero__content {
  position: relative;
  z-index: 2;
}

.rb-grid {
  display: flex;
  gap: 40px;
  justify-content: space-evenly;
  flex-wrap: wrap;
}