/* ==========================================================================
   Related Products
   ========================================================================== */

.related-products-header {
   display: flex;
   justify-content: space-between;
}

.related-products-nav {
   display: flex;
   gap: 0.6rem;
}

.related-products-nav button {
   width: 2.25rem;
   height: 2.25rem;
   padding: 0;
   border: none;
   display: flex;
   justify-content: center;
   align-items: center;
   --pico-background-color: #f5f5f5;
}

.related-products-nav .svg-icon {
   width: 1.5rem !important;
}

.related-products-wrapper h2 {
   margin-bottom: 2rem;
}

ul.related-products {
   display: flex;
   gap: 0.8rem;
   margin: 0;
   padding: 0;
   overflow-x: scroll;
   -webkit-overflow-scrolling: touch;
   letter-spacing: normal;
}

ul.related-products li {
   list-style: none;
   margin-bottom: 1rem;
   position: relative;
   width: 30%;
   min-width: 30%;
}

.related-product {
   display: flex;
   flex-direction: column;
   text-decoration: none;
   transition: opacity var(--pico-transition);
}

.related-product:hover, .related-product:active, .related-product:focus {
   opacity: .75;
}

.related-product img {
   border-radius: 0.25rem;
   margin-bottom: 0.8rem;
   aspect-ratio: 1 / 1;
}

.related-product h3 {
   color: var(--static-dark-color);
   margin-bottom: 0.1rem;
   font-size: 1.15rem;
   font-weight: 500;
}

.related-product>span {
   color: #707072;
   font-size: 0.95rem;
   margin-bottom: 0.5rem;
}

.related-product p {
   color: var(--static-dark-color);
   display: flex;
   flex-wrap: wrap;
   font-size: 1.05rem;
   font-weight: 500;
   gap: 0.2rem;
}

.related-product p ins {
   color: var(--static-dark-color);
   width: 100%;
}

.related-product p del {
   color: #707072;
   font-weight: 400;
   width: 100%;
}

/* Related Products: Tablet Styles
   ========================================================================== */

@media(max-width: 980px) {
   ul.related-products li {
      width: 40%;
      min-width: 40%;
   }
}

/* Related Products: Mobile Styles
   ========================================================================== */

@media(max-width: 768px) {
   ul.related-products li {
      width: 80%;
      min-width: 80%;
   }
}