/**
 * product.css
 */

/* Component: ProductSingle */
.product-single {
  display: grid;
  /* minmax(0, …) lets a column shrink below its content, otherwise the slide track's width stretches the grid past .container. */
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 48px;
  margin-bottom: 64px;

  .product-gallery {
    display: flex;
    flex-direction: row-reverse;
    gap: 12px;
    min-width: 0;
  }

  .product-gallery-main {
    position: relative;
    flex: 1;
    min-width: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--border-radius-default);
    background: var(--color-white);
  }

  .product-gallery-track {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .product-gallery-slide {
    display: block;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .product-gallery-thumbs {
    display: flex;
    flex: 0 0 64px;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
  }

  .product-gallery-thumb {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--color-grey-light);
    border-radius: var(--border-radius-default);
    background: var(--color-white);
    transition: var(--global-transition);
    cursor: pointer;

    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    &.is-active,
    &:hover,
    &:focus {
      border-color: var(--color-black);
    }
  }

  .product-summary {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }

  .product-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .product-brand a {
    color: var(--color-grey-dark);
    font-size: var(--font-size-small);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;

    &:hover,
    &:focus {
      color: var(--color-black-light);
      text-decoration: underline;
    }
  }

  .product-title {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
  }

  .product-price {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-black);
    font-size: var(--font-size-h4);

    del {
      margin-right: 6px;
      color: var(--color-grey-dark);
    }

    ins {
      padding: 2px 8px;
      border-radius: 4px;
      background-color: var(--color-primary-dark);
      color: var(--color-white);
      font-weight: 500;
    }

    &:has(ins) {
      gap: 8px;
      flex-direction: row-reverse;
      justify-content: flex-end;
      padding-top: 4px;
    }
  }

  .product-add-to-cart {
    margin-top: 8px;

    .quantity {
      display: none;
    }

    .single_add_to_cart_button {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      padding: 16px !important;
      border-radius: var(--border-radius-default);
      background: var(--color-primary) !important;
      color: var(--color-black-light);
      font-family: var(--font-family-headings);
      text-align: center;
      transition: var(--global-transition);

      &::before {
        content: '';
        flex: none;
        width: 16px;
        height: 16px;
        background: var(--color-white);
        mask: url('../../images/icons/icon-basket-48x48.png') no-repeat center / contain;
        -webkit-mask: url('../../images/icons/icon-basket-48x48.png') no-repeat center / contain;
      }

      &:not(:disabled, .is-ok, .is-error):hover,
      &:not(:disabled, .is-ok, .is-error):focus {
        background: var(--color-primary-dark) !important;
      }

      &:disabled {
        background: var(--color-grey-light) !important;
        color: var(--color-grey-dark) !important;
        cursor: not-allowed;

        &::before {
          background: var(--color-grey-dark);
        }
      }

      /* Add to cart feedback, set by product.js while the request runs and for a moment after */
      &.is-loading {
        opacity: 0.6;
        cursor: progress;
      }

      &.is-ok,
      &.is-error {
        color: var(--color-white);
      }

      /* The result swaps the icon's mask instead of printing a character, so the label does not shift. */
      &.is-ok {
        background: var(--color-black) !important;

        &::before {
          mask-image: url('../../images/icons/icon-check-48x48.png');
          -webkit-mask-image: url('../../images/icons/icon-check-48x48.png');
        }
      }

      &.is-error {
        background: var(--color-red) !important;

        &::before {
          mask-image: url('../../images/icons/icon-close-48x48.png');
          -webkit-mask-image: url('../../images/icons/icon-close-48x48.png');
        }
      }
    }
  }

  .product-highlights {
    font-size: var(--font-size-medium);
    line-height: 1.6;
  }

  .product-usps {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
  }

  .product-usps-item {
    padding: 0 12px;
    border-left: 1px solid var(--color-grey-light);
    color: var(--color-grey-dark);
    font-size: var(--font-size-small);

    &:first-child {
      padding-left: 0;
      border-left: none;
    }

    &:only-child {
      padding-right: 0;
    }

    .product-stock {
      margin-top: 0;
    }
  }
}

/* Component: Upsells */
.upsells {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--color-grey-light);

  /* Styled like the brand name, in the heading's own colour. */
  .upsells-title {
    font-size: var(--font-size-small);
    font-weight: 600;
    line-height: var(--line-height-body);
  }

  .upsells-track {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .upsells-item {
    height: 56px;
    min-width: 0;
  }
}

/* Mobile: ProductSingle */
@media (max-width: 767px) {
  .product-single {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-bottom: 48px;

    .product-gallery {
      flex-direction: column;
    }
  
    .product-gallery-thumbs {
      flex: 0 0 auto;
      flex-direction: row;
      overflow-x: auto;
      overflow-y: visible;
    }
  
    .product-gallery-thumb {
      flex: 0 0 48px;
      width: 48px;
      height: 48px;
    }
  }
}