.productSpecifications {
  position: relative;

  .innerWrapper {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    .collectionSelectionWrapper {
      width: 100%;
      padding: 0 25px;

      @media (min-width: 768px) {
      padding: 0 50px;
      }

      .collectionTabs {
        display: flex;
        justify-content: flex-start;
        gap: 15px;
        list-style: none;
        padding: 0;
        margin: 0;

        .collectionTab {
          font-family: var(--primaryFont);
          font-size: 20px;
          font-weight: 600;
          padding: 15px 35px;
          border-radius: 20px 20px 0 0;
          background-color: var(--grey);

          @media (min-width: 768px) {
            font-size: clamp(var(--h2min), calc(23.24px + 0.35vw), var(--h2max));
          }

          &:hover {
            cursor: pointer;
          }

          &.active {
            color: var(--green);
            background-color: var(--black);
          }
        }
      }
    }

    .collectionWrapper {
      display: flex;
      flex-direction: column;
      gap: 50px;
      width: 100%;
      padding: 25px;
      border: 3px solid var(--black);
      border-radius: var(--roundedCorners);

      &[hidden] {
        display: none;
      }

      .collectionOverview,
      .collectionSpecifications,
      .collectionColors,
      .collectionGradientRange,
      .collectionDisclaimer {
        h2 {
          font-size: clamp(var(--h3min), calc(23.24px + 0.35vw), var(--h3max));
        }
      }

      .collectionOverview {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 35px 50px;
        background-color: var(--grey);
        border-radius: var(--roundedCorners);

        h1, h2, h3, h4, h5, h6, ol, ul, p {
          max-width: 800px;
        }

        strong {
          font-size: 22px;
          font-weight: 700;
        }
      }

      .collectionSpecifications {
        display: grid;
        grid-template-columns: 1fr;
        gap: 35px;
        padding: 50px 25px;
        border: 2px solid var(--black);
        border-radius: var(--roundedCorners);

        @media (min-width: 480px) {
          grid-template-columns: repeat(2, 1fr);
        }

        @media (min-width: 768px) {
          display: flex;
          flex-direction: column;
          justify-content: center;
          flex-direction: row;
        }

        @media (min-width: 1280px) {
          padding: 35px 50px;
          gap: 100px;
        }

        .squareTileSpecifications,
        .interlockingTileSpecifications,
        .rollSizeSpecifications,
        .gaugeSpecifications {
          display: flex;
          flex-direction: column;
          align-items: center;
          flex-grow: 1;
          gap: 15px;

          @media (min-width: 1280px) {
            flex-grow: 0;
          }

          svg {
            width: 100px;
            height: 100px;
          }

          .title {
            text-align: center;
            font-size: 20px;

            @media (min-width: 1280px) {
              font-size: 22px;
            }
          }

          .content {
            font-size: 16px;

            >:first-child { margin-top: 0; }
            >:last-child { margin-bottom: 0; }
          }
        }
      }

      .collectionColors {
        padding: 0 50px;
        border: 2px solid var(--black);
        border-radius: var(--roundedCorners);

        .title {
          padding: 35px 0;
          margin-bottom: 0;
        }

        &.colorFamilyGroupings {
           padding: 0;

          .title {
            padding: 35px 50px;
          }
        }

        .colors {
          display: flex;
          flex-wrap: wrap;
          gap: 35px;
          padding: 35px 50px;

          &.colorFamilyGroupings {
            padding: 0 0 50px 0;
          }

          @media (min-width: 1024px) {
            padding: 35px 0;
          }

          .color {
            .colorImage {
              overflow: hidden;

              .image {
                display: block;
                width: 100%;
                height: 100%;
              }

              &.swatchFill {
                aspect-ratio: 2 / 1;
                width: 200px;
                max-width: 100%;
                border-radius: var(--roundedCornersSmall);

                .image {
                  object-fit: cover;
                }
              }

              &.swatchContain {
                aspect-ratio: 1 / 1;
                width: 100px;
                max-width: 100%;

                @media (min-width: 1024px) {
                  width: 150px;
                }

                .image {
                  object-fit: contain;
                }
              }
            }

            .colorDetails {
              display: flex;
              justify-content: center;
              align-items: center;
              gap: 7px;
              padding: 10px 15px;

              .colorName {
                font-weight: 600;
              }

              .colorSku {
                position: relative;
              }
            }
          }
        }

        .colorFamilyGroup {
          display: flex;
          flex-direction: column;

          @media (min-width: 1024px) {
            flex-direction: row;
            align-items: center;
          }

          &:nth-child(odd of .colorFamilyGroup) {
            background-color: var(--grey);
          }

          .colorFamilyDetails {
            width: 300px;
            flex-shrink: 0;
            padding: 50px 50px 0 50px;

            @media (min-width: 1024px) {
              padding: 0 50px;
            }

            .colorFamilyName {
              font-size: 22px;
              text-transform: uppercase;
              font-weight: 700;
            }

            .colorFamilyDescription {
              font-size: 16px;
            }
          }
        }
      }

      .collectionGradientRange {
        padding: 35px 50px;
        border: 2px solid var(--black);
        border-radius: var(--roundedCorners);

        .title {
          padding-bottom: 35px;
          margin-bottom: 0;
        }

        img {
          width: 100%;
        }

        .graidentNumbers {
          display: flex;
          justify-content: space-between;
          padding-top: 10px;

          p {
            font-weight: 700;
            display: flex;
            gap: 25px;
          }
        }
      }

      .collectionDisclaimer {
        .content {
          font-size: 16px;
          font-style: italic;
          width: 100%;
        }
      }
    }
  }
}