/*--------------------------------------------------
  IPD Content - Layer 3
--------------------------------------------------*/

.ipd-layer-3.hidden {
  opacity: 0;
}

.ipd-layer-3.ipd-container {
  top: auto;
}

.ipd-layer-3 {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: var(--black, #000);
  opacity: 1;
  -webkit-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
  z-index: 3;

  .content-holder {
    overflow-y: scroll;
    padding-top: 65.385%;
    
  }

  .ipd-content {
    top: 0;
    left: 0;
    padding: 20px;
    padding-top: 6.349%;
    background-color: rgb(255, 255, 255, 0.9);
  }

  .inner-content {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 40px;
  }

  .product-img-holder {
    width: 100%;

    .product-img {
      width: 100%;
    }
  }

  .img-swap {
    margin-top: 20px;
    cursor: pointer;
    max-width: 200px;
    max-height: 200px;
    
    img {
      width: 100%;
      border: 1px solid var(--gray);
    }
  }

  /*--------------------------------------------------
    Buttons
  --------------------------------------------------*/

  /* 1. Bakery */
  .btn.bakery-btn {
    border-color: var(--bakery);
  }
  .btn.bakery-btn:hover {
    color: var(--black);
    background-color: var(--bakery);
  }

  /* 2. Beverage */
  .btn.beverage-btn {
    border-color: var(--beverage);
  }
  .btn.beverage-btn:hover {
    color: var(--black);
    background-color: var(--beverage);
  }

  /* 3. Dairy */
  .btn.dairy-btn {
    border-color: var(--dairy);
  }
  .btn.dairy-btn:hover {
    color: var(--black);
    background-color: var(--dairy);
  }

  /* 4. Deli */
  .btn.deli-btn {
    border-color: var(--deli);
  }
  .btn.deli-btn:hover {
    color: var(--white);
    background-color: var(--deli);
  }

  /* 5. Floral */
  .btn.floral-btn {
    border-color: var(--floral);
  }
  .btn.floral-btn:hover {
    color: var(--white);
    background-color: var(--floral);
  }

  /* 6. Frozen */
  .btn.frozen-btn {
    border-color: var(--frozen);
  }
  .btn.frozen-btn:hover {
    color: var(--white);
    background-color: var(--frozen);
  }

  /* 7. Grab N Go */
  .btn.grab-n-go-btn {
    border-color: var(--grab-n-go);
  }
  .btn.grab-n-go-btn:hover {
    color: var(--black);
    background-color: var(--grab-n-go);
  }

  /* 8. Meat */
  .btn.meat-btn {
    border-color: var(--meat);
  }
  .btn.meat-btn:hover {
    color: var(--white);
    background-color: var(--meat);
  }

  /* 9. Produce */
  .btn.produce-btn {
    border-color: var(--produce);
  }
  .btn.produce-btn:hover {
    color: var(--black);
    background-color: var(--produce);
  }

  /* 10. Seafood */
  .btn.seafood-btn {
    border-color: var(--seafood);
  }
  .btn.seafood-btn:hover {
    color: var(--white);
    background-color: var(--seafood);
  }

  /*--------------------------------------------------
    Buttons
  --------------------------------------------------*/

  .related-products {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 20px;

    .related-item {
      width: 100%;
      border: 1px solid var(--gray);

      img {
        width: 100%;
      }
    }

    .item-info {
      padding: 20px;

      .item-name {
        font-size: 20px;
        font-weight: 700;
      }
    }

    .view-product-btn {
      display: inline-block;
      padding-top: 10px;
      color: var(--black);
      border-top: 1px solid var(--gray);
      text-decoration: none;
    }
  }
}

/*--------------------------------------------------
  Quick Tip
--------------------------------------------------*/

.quick-tip {
  padding: 10px;
}
#ipd-bakery .quick-tip {
  background-color: var(--bakery);
}
#ipd-beverage .quick-tip {
  background-color: var(--beverage);
}
#ipd-dairy .quick-tip {
  background-color: var(--dairy);
}
#ipd-deli .quick-tip {
  color: var(--white);
  background-color: var(--deli);
}
#ipd-floral .quick-tip {
  color: var(--white);
  background-color: var(--floral);
}
#ipd-frozen .quick-tip {
  background-color: var(--frozen);
}
#ipd-grab-n-go .quick-tip {
  background-color: var(--grab-n-go);
}
#ipd-meat .quick-tip {
  color: var(--white);
  background-color: var(--meat);
}
#ipd-produce .quick-tip {
  background-color: var(--produce);
}
#ipd-seafood .quick-tip {
  color: var(--white);
  background-color: var(--seafood);
}

/*--------------------------------------------------
  min-width: 1300px
--------------------------------------------------*/

@media only screen and (min-width: 81.25em) {
  .ipd-layer-3 {
    .ipd-content {
      padding-top: 80px;
    }
  }
}