@use '../utilities';
@use '../components/columns';
@use '../components/wave-img';
@use '../components/button';

h1,
h2 {
  margin-bottom: utilities.space(4);
}

.single-product {
  .column-img {
    text-align: center;
  }

  .product-gallery {
    width: 100%;
    max-width: 48rem;
    margin-inline: auto;
  }

  .product-gallery-main {
    .product-main-image {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      border-radius: 1.6rem;
      box-shadow: 0 1.4rem 3rem rgb(0 0 0 / 18%);
      background-color: utilities.$primary;

      &.placeholder {
        display: block;
      }
    }
  }

  .product-gallery-thumbs {
    display: flex;
    justify-content: center;
    gap: utilities.space(2);
    margin-top: utilities.space(4);

    .product-gallery-thumb {
      flex: 1;
      max-width: 10rem;
      padding: 0;
      border: none;
      background: transparent;
      cursor: pointer;

      .product-thumb-image {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 1.2rem;
        background-color: utilities.$primary;
      }
    }
  }

  .column-content {
    margin-top: utilities.space(6);
  }

  .product-title-single {
    font-size: 3.2rem;
    margin-bottom: utilities.space(2);
  }

  .product-price-single {
    margin-bottom: utilities.space(4);
    font-weight: 800;
    font-size: 3rem;
    color: utilities.$text-dark;

    bdi {
      color: utilities.$text-dark;
    }
  }

  .product-description-single {
    margin-bottom: utilities.space(4);
  }

  .product-add-to-cart {
    .cart {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: utilities.space(2);
    }

    .quantity {
      display: inline-flex;
      align-items: center;
      padding: 0.6rem 1.4rem;
      border-radius: 0.6rem;
      border: 1px solid utilities.$primary;
      background-color: utilities.$background-light;

      .qty {
        width: 4.4rem;
        text-align: center;
        border: none;
        background: transparent;
        font-weight: 600;
        font-size: 1.6rem;
        outline: none;
      }
    }

    button.single_add_to_cart_button {
      @include button.btn-base;
      @include button.btn-arrow-primary;
      @include button.btn-bg-secondary;
    }
  }
}

@media screen and (width >= 1280px) {
  .single-product {
    .column-content {
      margin-top: 0;
    }

    .product-title-single {
      font-size: 4.8rem;
    }
  }
}