@layer components {
  .product-detail {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg-x3);
    width: 100%;
    max-width: var(--max-reach-md);
    margin-inline: auto;
  }

  /* --- Gallery --- */

  .product-detail__gallery {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .product-detail__slide-show-container {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    background-color: var(--color-primary-1);
  }

  .product-detail__slide-show {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    gap: var(--space-lg-x3);
    width: 100%;
    height: 100%;
  }

  .product-detail__slide-show-image-container {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    scroll-snap-align: center;
    display: flex;
    align-items: center;
  }

  .product-detail__slide-show-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    border-radius: var(--border-radius-2);
    background-color: var(--color-white);
    padding: var(--space-lg-x1);
  }

  .product-detail__slide-show-controls {
    display: flex;
    gap: var(--space-sm-x2);
    position: absolute;
    right: var(--space-md);
    bottom: var(--space-md);

    button {
      flex-shrink: 0;
    }
  }

  .product-detail__selector-box {
    /* width and translation shenanigans to allow for shadows to go through while still retaining scrolling */
    display: flex;
    gap: var(--space-sm-x2);
    width: calc(100% + 2 * var(--space-sm-x2));
    overflow-x: scroll;
    padding-block: var(--space-sm-x2) var(--space-md);
    margin-block: calc(-1 * var(--space-sm-x2)) calc(-1 * var(--space-md));
    padding-inline: var(--space-sm-x2);
    translate: calc(-1 * var(--space-sm-x2));
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black var(--space-sm-x2),
      black calc(100% - var(--space-sm-x2)),
      transparent 100%
    );
  }

  .product-detail__selector-box-image-container {
    width: var(--length-20);
    height: auto;
    aspect-ratio: 1 / 1;
    box-shadow: var(--shadow-3);
    cursor: pointer;
    transition: all 100ms ease-out;
    position: relative;
    flex-shrink: 0;

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      display: block;
      background-color: var(--color-primary-5);
      opacity: 0;
      transition: inherit;
    }

    @media (any-hover: hover) {
      &:hover {
        scale: 0.98;

        &::after {
          opacity: 0.2;
        }
      }
    }

    &:active {
      scale: 0.9;

      &::after {
        opacity: 0.4;
      }
    }
  }

  .product-detail__selector-box-image-container[data-selected="true"] {
    --product-detail__selector-box-image-container-selected-opacity: 0.6;

    cursor: auto;

    &::after {
      opacity: var(
        --product-detail__selector-box-image-container-selected-opacity
      );
    }

    @media (any-hover: hover) {
      &:hover {
        scale: 1;

        &::after {
          opacity: var(
            --product-detail__selector-box-image-container-selected-opacity
          );
        }
      }
    }

    &:active {
      scale: 1;

      &::after {
        opacity: var(
          --product-detail__selector-box-image-container-selected-opacity
        );
      }
    }
  }

  .product-detail__selector-box-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--border-radius-2);
    background-color: var(--color-white);
    padding: var(--space-sm-x1);
  }

  /* --- Info --- */

  .product-detail__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg-x1);
  }

  .product-detail__collection {
    font-size: var(--font-size-sm-x2);
    color: var(--color-primary-5);
    text-decoration: underline;
    width: fit-content;

    @media (any-hover: hover) {
      &:hover {
        color: var(--color-primary-4);
      }
    }

    &:active {
      color: var(--color-primary-6);
    }
  }

  .product-detail__info-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x2);
  }

  .product-detail__title {
    font-size: var(--font-size-lg-x3);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-7);
    line-height: var(--line-height-tightest);
  }

  .product-detail__specs-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x3);
  }

  .product-detail__sku,
  .product-detail__weight {
    font-size: var(--font-size-sm-x2);
    color: var(--color-neutral-5);
    line-height: var(--line-height-tightest);
  }

  .product-detail__pricing {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm-x2);
  }

  .product-detail__price {
    font-size: var(--font-size-md);
    line-height: var(--line-height-tightest);
  }

  .product-detail__ex-gst {
    font-size: var(--font-size-sm-x3);
    color: var(--color-neutral-5);
  }

  .product-detail__amount {
    color: var(--color-primary-6);
  }

  .product-detail__amount--wholesale {
    font-weight: var(--font-weight-bold);
  }

  .product-detail__description-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .product-detail__short-description {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-8);
    line-height: var(--line-height-loosest);
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >=40rem) {
  }

  /* break-md: 48rem (768px) */
  @media (width >=48rem) {
    .product-detail {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-lg-x1);
      align-items: start;
      max-width: none;
    }

    .product-detail__title {
      font-size: var(--font-size-lg-x4);
    }
  }

  /* break-lg-x1: 64rem (1024px) */
  @media (width >=64rem) {
  }

  /* break-lg-x2: 80rem (1280px) */
  @media (width >=80rem) {
    .product-detail {
      gap: var(--space-lg-x3);
    }
  }
}