.container {
  &.product {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    gap: 5.625rem;

    .overview {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      justify-content: center;
      width: 100%;
      max-width: 62rem;
      gap: 1.875rem;

      .gallery {
        display: flex;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0;
        flex-direction: column;
        gap: 1.5rem;

        .main {
          position: relative;
          width: 100%;
          overflow: hidden;
          border: 0.0625rem solid var(--background-color-tertiary);
          border-radius: 0.5rem;
          background-image: radial-gradient(
            circle,
            var(--background-color-secondary) 0%,
            var(--background-color-secondary) 42%,
            var(--background-color-primary) 100%
          );

          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
          }
        }

        .thumbs {
          display: flex;
          flex-direction: row;
          width: 100%;
          gap: 1.5rem;

          button {
            position: relative;
            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: 0;
            max-width: 10rem;
            max-height: 10rem;
            padding: 0;
            overflow: hidden;
            border: 0.0625rem solid var(--background-color-tertiary);
            border-radius: 0.375rem;
            background-image: radial-gradient(
              circle,
              var(--background-color-secondary) 0%,
              var(--background-color-secondary) 42%,
              var(--background-color-primary) 100%
            );
            transition: border-color 240ms var(--ease-fluid);

            &.active {
              border-color: var(--color);
            }

            img {
              width: 100%;
              height: 100%;
              object-fit: contain;
              object-position: center;
            }
          }
        }
      }

      .details {
        display: flex;
        position: sticky;
        top: 6rem;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0;
        flex-direction: column;
        height: fit-content;
        gap: 0.75rem;

        h1 {
          color: var(--color-display);
          font-size: var(--font-size-display);
        }

        h2 {
          font-family: var(--font-mono);
        }

        hr {
          margin: 0.75rem 0;
        }

        .options {
          display: flex;
          flex-direction: row;
          width: 100%;
          margin-top: 0.75rem;
          gap: 1.5rem;

          .quantity,
          .size {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;

            input,
            select {
              position: relative;
              width: 100%;
              height: 2.5rem;
              border: 0.0625rem solid var(--background-color-tertiary);
              border-radius: 0.5rem;
              outline-color: transparent;
              outline-style: solid;
              outline-width: 0;
              background-color: var(--background-color-primary);
              transition:
                border-color 240ms var(--ease-fluid),
                outline-color 240ms var(--ease-fluid),
                outline-width 180ms var(--ease-fluid),
                color 240ms var(--ease-fluid);

              &::placeholder {
                color: var(--color-body);
              }

              &:focus-visible,
              &:hover {
                border-color: transparent;
                outline-color: var(--background-color-tertiary);
                outline-width: 0.125rem;
              }
            }
          }

          .quantity {
            width: 30%;

            input {
              padding: 0.75rem;
            }
          }

          .size {
            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: 0;

            select {
              padding-right: 0.75rem;
              padding-left: 0.75rem;
              user-select: none;
            }
          }
        }

        .action {
          width: 100%;
          margin-top: 1.125rem;

          &:focus,
          &:hover {
            .icon {
              transform: scale(0.9);

              .count {
                opacity: 1;
              }

              svg {
                path {
                  &:last-child {
                    transform: rotateX(0deg);
                  }
                }
              }
            }
          }

          .icon {
            position: relative;
            width: 1.5rem;
            height: 1.5rem;
            margin: 0 -0.25rem -0.0625rem 0;
            will-change: transform;

            svg {
              position: relative;
              width: 100%;
              height: 100%;
              transform: translate3d(0, 0, 0);

              path {
                stroke: currentColor;
                stroke-width: 0.125rem;

                &:last-child {
                  transform: rotateX(180deg);
                  transform-origin: 1rem 0.5rem;
                  transition: all 240ms var(--ease-fluid);
                }
              }
            }

            .count {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              font-weight: 900;
              font-size: 0.5rem;
              line-height: 1;
              opacity: 0;
              transition: opacity 240ms var(--ease-fluid);
            }
          }

          .logo-full {
            display: none;
          }
        }
      }
    }

    .related-products {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      gap: 1.875rem;

      h3 {
        color: var(--color-display);
      }

      #products {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0;
        padding: 0;
        gap: 1.5rem;
        list-style: none;

        .item {
          display: flex;
          position: relative;
          flex-direction: column;
          align-items: flex-start;
          justify-content: flex-start;
          width: 20rem;
          height: 100%;
          overflow: hidden;
          border-radius: 1.125rem;
          background-color: var(--background-color-secondary);

          &:focus-within,
          &:hover {
            .thumb {
              img {
                transform: scale(1.06) rotate(-0.6deg);
              }
            }
          }

          .thumb {
            display: flex;
            position: relative;
            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: 0;
            width: 100%;
            min-height: 14rem;
            overflow: hidden;
            background-image: radial-gradient(
              circle,
              var(--background-color-secondary) 0%,
              var(--background-color-secondary) 42%,
              var(--background-color-primary) 100%
            );
            transition: opacity 240ms var(--ease-fluid);

            img {
              width: 100%;
              height: 100%;
              object-fit: contain;
              object-position: center;
              transition: transform 180ms var(--ease-fluid);
              will-change: transform;
            }
          }

          .content {
            display: flex;
            position: relative;
            flex-direction: column;
            width: 100%;
            padding: 0.75rem 1.125rem;

            h3 {
              color: var(--color-display);
            }

            .price {
              font-family: var(--font-mono);
            }

            .item-ribbon {
              position: absolute;
              top: 0;
              right: 1.125rem;
              padding: 0.375rem;
              transform: translateY(-50%);
              border-radius: 0.375rem;
              background-color: var(--orange);
              color: var(--background-color-primary);
              font-weight: 700;
              font-size: 0.625rem;
              line-height: 1;
              text-transform: uppercase;
            }
          }
        }
      }
    }

    .faqs {
      display: flex;
      flex-direction: row;
      width: 100%;
      max-width: 62rem;
      gap: 1.5rem;

      h3 {
        width: fit-content;
        min-width: 42%;
        color: var(--color-display);
      }

      ul {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0;
        margin: 0;
        padding: 0;
        list-style: none;
      }
    }

    @media (max-width: 60rem) {
      .overview {
        flex-direction: column;
      }

      .related-products {
        #products {
          flex-direction: column;

          .item {
            width: 100%;
          }
        }
      }

      .faqs {
        flex-direction: column;

        h3 {
          width: 100%;
        }
      }
    }
  }
}
