/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:product-cards (INDEX:319) */
.product-cards-section{
    background: var(--bg-color);
    padding-top: var(--pc-padding-top);
    padding-bottom: var(--pc-padding-bottom);

    @media(max-width:768px){
      padding-top: var(--mob-padding-top);
      padding-bottom: var(--mob-padding-bottom);
    }

    .product-cards-container {
      .product-cards-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;

        @media (max-width: 768px) {
          gap: 12px;
        }

        .product-card {
          display: flex;
          border-radius: 16px;
          overflow: hidden;
          background-color: #fff;

          &.product-card-large {
            width: 100%;

            .card-img {
              width: 50%;
            }

            .card-info {
              width: 50%;
              padding: 32px 48px;

              .card-title {
                font-size: 24px;
              }

              .card-description {
                font-size: 14px;
                margin-bottom: 56px;
              }

              .card-buttons {
                gap: 16px;

                .card-btn {
                  font-size: 16px;
                  padding: 10px 0;

                  svg {
                    height: 21px;
                  }
                }
              }
            }
          }

          &.product-card-medium {
            flex-direction: column;
            width: calc((100% - 20px * 2) / 3);
            padding: 20px 24px 24px;

            .card-img {
              height: 270px;
              margin-bottom: 20px;
            }

            .card-info {
              width: 100%;

              .card-title {
                font-size: 20px;
              }

              .card-description {
                font-size: 14px;
              }

              .card-buttons {
                .card-btn {
                  font-size: 11px;
                  padding: 8px 0;

                  svg {
                    height: 14px;
                  }
                }
              }
            }
          }

          &.product-card-small {
            flex-direction: column;
            width: calc((100% - 20px * 3) / 4);
            padding: 20px 16px 24px;

            .card-img {
              height: 210px;
              margin-bottom: 20px;
            }

            .card-info {
              width: 100%;

              .card-title {
                font-size: 16px;
              }

              .card-description {
                font-size: 12px;
              }

              .card-buttons {
                .card-btn {
                  font-size: 9px;
                  padding: 4px 0;

                  svg {
                    height: 11px;
                  }
                }
              }
            }
          }

          @media (max-width: 768px) {
            &.product-card-mobile-large {
              flex-direction: column;
              width: 100%;
              padding: 0;

              .card-img {
                width: 100%;
                height: 160px;
              }

              .card-info {
                width: 100%;
                padding: 18px 22px;

                .card-title {
                  font-size: 20px;
                }

                .card-description {
                  font-size: 14px;
                  margin-bottom: 0;
                }

                .card-price {
                  margin-bottom: 8px;

                  .price-current {
                    font-size: 18px;
                  }

                  .price-original {
                    font-size: 12px;
                  }
                }

                .card-buttons {
                  gap: 8px;

                  .card-btn {
                    font-size: 10px;
                    padding: 8px 0;

                    svg {
                      height: 13px;
                    }
                  }
                }
              }

            }

            &.product-card-mobile-small {
              flex-direction: column;
              width: calc((100% - 12px * 1) / 2);
              padding: 12px 10px;

              .card-img {
                width: 100%;
                height: 132px;
                margin-bottom: 12px;
              }

              .card-info {
                width: 100%;
                padding: 0;

                .card-title {
                  font-size: 10px;
                }

                .card-description {
                  font-size: 8px;
                  margin-bottom: 0;
                }

                .card-price {
                  margin-bottom: 8px;

                  .price-current {
                    font-size: 12px;
                  }

                  .price-original {
                    font-size: 8px;
                  }
                }

                .card-buttons {
                  gap: 8px;

                  .card-btn {
                    font-size: 6px;
                    padding: 2px 0;

                    svg {
                      height: 8px;
                    }
                  }
                }
              }

            }
          }

          .card-img {
            width: 100%;
            position: relative;

            img {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .card-info {
            .card-title {
                color: #1A1A1A;
                font-size: 16px;
                font-weight: 500;
                line-height: 120%;
                padding: 0;
                margin: 0 0 8px;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            .card-description {
              color: #6B6B6B;
              font-size: 12px;
              font-weight: 300;
              line-height: 140%;
              margin: 0 0 24px;

              @media (max-width: 768px) {
                margin: 0 0 12px;
              }

              ul {
                margin: 0;
                padding-left: 16px;
              }
            }

            .card-price {
              display: flex;
              align-items: center;
              margin-bottom: 12px;

              .price-current {
                color: #BC0041;
                font-size: 20px;
                font-weight: 400;
                line-height: 120%;
              }

              .price-original {
                color: #BDBDBD;
                font-size: 14px;
                font-weight: 300;
                line-height: 120%;
                text-decoration-line: line-through;
                margin-left: 8px;
              }
            }

            .card-buttons {
              display: grid;
              grid-template-columns: repeat(2, 1fr);
              gap: 8px;

              @media (max-width: 768px) {
                gap: 4px;
              }

              .card-btn {
                color: #4A5106;
                font-size: 9px;
                font-weight: 520;
                line-height: 130%;
                padding: 6px 0;
                border-radius: 999px;
                border: 2px solid #4A5106;
                text-decoration: none;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 3px;

                svg {
                  height: 100%;
                  width: auto;
                }
              }
            }
          }
        }
      }
    }
  }
/* END_SECTION:product-cards */