/* main product */

.product {
  padding-top: var(--gap-l);

  .product--wrapper {
    display: grid;
    grid-template-areas: 'media details';
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
    padding-bottom: var(--gap);
    border-bottom: var(--border);

    .product-media {
      grid-area: media;
      display: flex;
      flex-direction: column;
      gap: var(--gap);
      
      .media-image {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        border: var(--border);
        
        .media-stickers {
          position: absolute;
          left: 0;
          top: var(--gap);
          padding: var(--gap-xxs) var(--gap-xs);
          background-color: var(--cherry);
          color: var(--white);

          span {
            position: absolute;
            width: max-content;
            height: 100%;
            left: 100%;
            top: 0;
            display: flex;
            align-items: center;
            background-color: var(--gold);
            padding: 0 var(--gap-xs);
            font-size: var(--font-20);
            font-weight: var(--font-light);
            color: var(--carbon);
          }
        }
      }

      .media-labels {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--gap-s);

        svg {
          height: 4rem;
          width: auto;
        }
      }
    }

    .product-details {
      grid-area: details;
      display: flex;
      flex-direction: column;
      gap: var(--gap);
      background-image: url(/cdn/shop/files/curvy-gold-pattern.png?v=1769615244);
      background-size: 20rem;
      background-repeat: repeat;
      padding: var(--gap);

      .product-details__title {
        em {
          font-weight: var(--font-medium);
          font-style: italic;
          opacity: .8;
        }
      }

      .product-details__description {
        color: var(--carbon);
      }

      .product-details__variants {
        display: flex;
        flex-direction: column;
        gap: var(--gap-s);

        .variants-formats,
        .variants-types {
          display: flex;
          gap: var(--gap-s);
          flex-wrap: wrap;

          & > * {
            min-width: 5rem;
            height: 3rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--gap-xs);
          }

          h2 {
            font-size: var(--font-28);
            background-color: var(--espresso);
            color: var(--white);
          }

          a {
            border: var(--border);
            background-color: var(--chalk);
            color: var(--espresso);
            opacity: .8;
            transition: var(--transition-all);

            &:hover {
              color: var(--jungle);
              border-color: var(--jungle);
              opacity: 1;
            }
          }
        }

        .variants-types {
          & > * {
            min-width: 9rem;
            padding-left: var(--gap-xs);
            padding-right: var(--gap-xs);
          }

          h2 {
            background-color: var(--color);
            color: var(--white);
          }

          a {
            border-color: var(--color);
          }
        }
      }

      .product-details__buy {
        display: flex;
        flex-direction: column;
        gap: var(--gap-s);

        .product-price {
          display: flex;
          align-items: baseline;
          gap: var(--gap-s);

          .end-price {
            font-size: var(--font-32);
            font-weight: var(--font-bold);
          }

          .price__pqr {
            span {
              &::before {
                content: '(';
              }

              &::after {
                content: ')';
              }
            }
          }
        }

        .buy-form form {
          display: flex;
          gap: var(--gap-s);
          flex-wrap: wrap;

          quantity-input {
            width: 12rem;
            height: 3.5rem;
            border: var(--border);
            background-color: var(--white);
            padding: var(--gap-xxs);
            align-items: center;

            .quantity__button {
              width: 2.75rem;
              height: 2.75rem;
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: var(--smoke);
              transition: var(--transition-background-color);
              cursor: pointer;

              &:hover {
                background-color: var(--gold);
              }

              svg {
                width: 1rem;
                height: 1rem;
              }
            }

            .quantity__input {
              font-family: var(--font-family);
              font-size: var(--font-24);
              font-weight: var(--font-medium);
              color: var(--carbon);
            }
          }

          .product-button {
            width: 20rem;
            height: 3.5rem;
            border: 0;
            background-color: var(--espresso);
            color: var(--white);
            transition: var(--transition-background-color);
            cursor: pointer;

            &:not(:disabled):hover {
              background-color: var(--jungle);
            }

            &:disabled {
              background-color: var(--slate);
              cursor: not-allowed;
            }

            & > span {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: var(--gap-xs);
            }

            .spinner {
              width: 2.5rem;
              height: 2.5rem;
              display: none;
            }
          }
        }
      }

      .product-info {
        padding-top: var(--gap);

        .product-info__items {
          column-gap: var(--gap);
          row-gap: var(--gap-xs);
        }
      }
    }
  }
}

@media only screen and (max-width: 989px) {
  .product {
    .product--wrapper {
      grid-template-areas: 'media' 'details';
      grid-template-columns: 1fr;

      .product-media {
        gap: var(--gap-s);

        .media-image {
          width: 100%;
          padding-top: 100%;

          img {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            object-fit: contain;
          }
        }

        .media-labels {
          svg {
            height: 3rem;
          }
        }
      }
    }
  }
}

/* product type details */

.product-type-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  padding-top: var(--gap);
  padding-bottom: var(--gap);
  border-bottom: var(--border);

  .details-content {
    display: flex;
    flex-direction: column;
    gap: var(--gap);

    .details-content__features {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: var(--gap-xs) var(--gap);
    }

    .details-content__misc {
      display: flex;
      flex-direction: column;
      gap: var(--gap-s);

      .nutrition-table {
        display: flex;
        flex-direction: column;
        border: var(--border);

        & > div {
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          gap: var(--gap-s);
          padding: var(--gap-xxs) var(--gap-s);
        }

        .uneven {
          background-color: var(--smoke);
        }
      }
    }
  }

  .details-media {
    position: relative;
    min-height: 20rem;
  }
}

@media only screen and (max-width: 989px) {
  .product-type-details {
    grid-template-columns: 1fr;
  }
}

/* product recommendations */

product-recommendations {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
  padding-top: var(--gap);

  .product-recommendations__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--gap);
  }
}

@media only screen and (max-width: 989px) {
  product-recommendations {
    .product-recommendations__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}