#product-title {

  h1 {
    font-size: 1.5rem;
    line-height: 1.9rem;
    margin-bottom: .25rem;
  }

  #models {
    font-size: .9rem;
    line-height: 1.3rem;
    font-family: var(--font-alt);
    display: block;
    margin-top: .25rem;

  }

  #brand {

    font-size: .9rem;
    line-height: 1.3rem;
    font-family: var(--font-alt);

    a {
      cursor: pointer;
      color: var(--alto-black);
    }

  }

}

#product-details {

  display: flex;
  gap: 2rem;

  #product-images,
  #product-details {
    width: calc(50% - 1rem);
  }

  #product-images {

    display: inline-flex;
    flex-wrap: wrap;
    gap: 1rem;
    max-height: 414px;
    position: sticky;
    top: 1rem;

    #thumbnails-container {

      width: 10%;
      display: block;
      overflow-y: auto;
      scroll-snap-type: y mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: none;
      scrollbar-width: none;

      #thumbnails {

        display: flex;
        flex-direction: column;
        gap: 1rem;

        a {

          display: block;
          border: 2px solid var(--bg-grey);
          border-radius: .5rem;
          overflow: hidden;
          padding-bottom: 100%;
          position: relative;
          transition: .3s ease-out;

          img {
            max-width: 100%;
            max-height: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }

        }

        a.current {
          border-color: var(--border-grey);
        }

      }

    }

    #full {

      position: relative;
      display: flex;
      width: calc(90% - 1rem);
      height: 100%;
      transition: .3s ease-out;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: none;
      scrollbar-width: none;
      /* border-radius: .5rem; */
      /* box-shadow: rgba(0,0,0,.75) 0 0 6px 0; */

      > div {

        width: 100%;
        padding-bottom: 100%;
        scroll-snap-align: start;
        flex-shrink: 0;
        position: relative;
        cursor: pointer;

        img {
          max-width: 100%;
          max-height: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }

    }

  }

  #product-images:after {
    content: var(--zoom_description);
    font-size: 1rem;
    color: var(--border-grey);
    text-align: center;
    width: 100%;
    padding-left: calc(10% + 1rem);
  }

  #product-details {

    display: flex;
    gap: 1.5rem;
    flex-direction: column;

    ul#product_colors {

      display: flex;
      gap: 1rem;
      flex-wrap: wrap;

      li {
        position: relative;
        display: block;
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        transition: .15s ease-out;
        cursor: pointer;
        border: 1px solid var(--variationbg);
        overflow: hidden;
      }

      li:before,
      li:after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }

      li:before {
        background-color: var(--variationbg);
        z-index: 1;
      }

      li:after {
        transition: .15s ease-out;
        background: linear-gradient(-65deg, var(--variationbg) 33%, rgba(255,255,255,0.5) 50%, var(--variationbg) 66%);
        background-size:400% 100%;
        z-index: 3;
      }

      li.current {
        border-color: var(--alto-white);
        border-width: 2px;
        box-shadow: rgba(0,0,0,.75) 0 0 6px 0;
      }

      li:not(.current):hover:after {
        animation: singleProductAddToCartEffect 1.5s infinite;
        box-shadow: rgba(0,0,0,.75) 0 0 6px 0;
      }

    }

    dl#selected_variation {

      display: flex;

      dt,
      dd {
        font-size: 1rem;
      }

      dt {
        width: 5rem;
      }

      dd {

        width: calc(100% - 5.5rem);

        ul {

          position: relative;
          display: block;

          li {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            z-index: 1;
            transition: .15s ease-out;
          }

          li.current {
            opacity: 1;
            z-index: 2;
          }

        }

      }

    }

    #price-container {

      position: relative;
      overflow: hidden;

      .price {

        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        font-size: 1rem;
        align-items: center;
        border-top: 1px solid var(--border-grey);
        padding-top: 1.5rem;
        opacity: 0;
        z-index: 1;
        transition: .15s ease-out;

        dt {
          display: inline-block;
          width: 100px;
          text-align: right;
        }

        dd {

          display: inline-block;
          width: calc(100% - .5rem - 100px);

          .msrp-price {
            text-decoration: line-through;
          }

          .current-price {

            font-size: 1.4rem;
            color: var(--alto-red);
            text-decoration: none;
            font-weight: 600;

            sup {
              font-size: .8rem;
              margin-left: .1rem;
              vertical-align: super;
              top: .125rem;
              position: relative;
            }

          }

          .savings {
            color: var(--alto-red);
          }

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

            strong {
              font-weight: 600;
            }

            em {
              font-size: .8rem;
              line-height: 1.2rem;
            }

          }

        }

      }

      .price.current {
        opacity: 1;
        position: relative;
        z-index: 2;
      }

    }

    #quantity-add-to-cart.disabled {

      form.form-pnwf {
        max-height: 0;
        overflow: hidden;
      }

      #quantity-cannot-to-cart {
        max-height: 10000px;
        opacity: 1;
        overflow: visible;
      }
    }

    #quantity-add-to-cart.still-loading,
    #quantity-add-to-cart.success {

      form.form-pnwf {
        opacity: 0;
      }

    }

    #quantity-add-to-cart.success {

      form.form-pnwf {
        max-height: 0;
        overflow: hidden;
      }

      #quantity-add-to-cart-success {
        max-height: 10000px;
        opacity: 1;
        overflow: visible;
      }

    }

    #quantity-add-to-cart {

      form.form-pnwf {

        flex-wrap: wrap;
        gap: 1rem;
        opacity: 1;
        transition: .15s ease-in-out;

        fieldset {
          width: calc(50% -.5rem);
          align-items: center;
          flex: 1;
        }

        fieldset:first-child {

          flex-direction: row-reverse;
          justify-content: flex-end;
          gap: 0;

          button#quantity-substract,
          button#quantity-add,
          input {
            font-size: .8rem;
            line-height: 1.1rem;
            border: 1px solid var(--bg-grey);
            padding: .5rem;
            text-align: center;
          }

          button#quantity-add {
            border-radius: 1.3rem 0 0 1.3rem;
          }

          button#quantity-substract {
            border-radius: 0 1.3rem 1.3rem 0;
          }

          input {
            font-size: 1rem;
            border-left: none;
            border-right: none;
            font-family: var(--font-alt);
            width: 4rem;
            -moz-appearance: textfield;
          }

          input::-webkit-outer-spin-button,
          input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
          }

          label {
            font-size: 1rem;
            font-family: var(--font-alt);
            padding-right: .5rem;
          }

        }

        fieldset:last-child {

          input {
            width: 100%;
            color: var(--alto-white);
            padding: .5rem 1rem;
            border-radius: 1.3rem;
            font-size: 1rem;
            font-family: var(--font-alt);
            background: linear-gradient(-65deg,var(--alto-red) 33%, var(--pale-red) 50%,var(--alto-red) 66%);
            background-size:400% 100%;
          }

          input:hover {
            animation: singleProductAddToCartEffect 2s infinite;
            transform: scale(1.05);
            box-shadow: rgba(0,0,0,.75) 0 0 6px 0;
          }

        }

      }

      #quantity-add-to-cart-success,
      #quantity-cannot-to-cart {

        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: opacity .15s ease-in-out;

        a {
          width: calc(50% - .5rem);
          text-align: center;
          text-decoration: none;
          padding: .5rem 1rem;
          border-radius: 1.3rem;
          font-size: 1rem;
          font-family: var(--font-alt);
          background-size: 400% 100% !important;
          transition: .15s ease-in-out;
        }

        a:first-child {
          color: var(--alto-white);
          background: linear-gradient(-65deg, var(--alto-red) 33%, var(--pale-red) 50%, var(--alto-red) 66%);
        }

        a:last-child {
          color: var(--alto-black);
          background: linear-gradient(-65deg, var(--alto-white) 33%, var(--bg-fake-white) 50%, var(--alto-white) 66%);
          border: 1px solid var(--bg-grey);
        }

        a:hover {
          animation: singleProductAddToCartEffect 2s infinite;
          transform: scale(1.05);
          box-shadow: rgba(0,0,0,.75) 0 0 6px 0;
        }

      }

    }

    #product-return {

      border-bottom: 1px solid var(--border-grey);
      padding-bottom: 1.5rem;
      margin-top: -1rem;
      font-size: .8rem;
      line-height: 1.2rem;

      a {
        color: var(--alto-black);
        transition: .3s ease-out;

        i {
          text-decoration: underline;
          transition: .3s ease-out;
        }
      }

      a:hover,
      a:hover i {
        color: var(--alto-red);
        text-decoration-color: var(--alto-red);
      }

    }

    dl#product-specs {

      display: flex;
      flex-wrap: wrap;

      dt,
      dd {
        width: 50%;
        font-size: 1rem;
        line-height: 1.4rem;
        padding: .5rem;
        border-top: 1px solid var(--border-grey);
        align-content: center;
        background-color: var(--alto-white);
        position: relative;
      }

      dt:nth-of-type(even),
      dd:nth-of-type(even) {
        background-color: var(--bg-fake-white);
      }

      dt:last-of-type,
      dd:last-of-type {
        border-bottom: 1px solid var(--border-grey);
      }

      dt:first-of-type {
        border-radius: .5rem 0 0 0;
      }

      dd:first-of-type {
        border-radius: 0 .5rem 0 0;
      }

      dt:last-of-type {
        border-radius: 0 0 0 .5rem;
      }

      dd:last-of-type {
        border-radius: 0 0 .5rem 0;
      }

      dt {
        border-left: 1px solid var(--border-grey);
        border-right: 1px solid var(--border-grey);
      }

      dd {

        border-right: 1px solid var(--border-grey);
        transition: .15s ease-out;

        #brand-logo {

          text-align: center;
          display: block;
          width: 100%;
          padding: .5rem;

          svg {

            max-width: 66%;
            display: inline-block;

            path {
              fill: var(--alto-black);
            }

          }

        }

      }

      dt:hover+dd,
      dd:hover {
        transform: scale(1.1);
        box-shadow: rgba(0,0,0,.75) 0 0 6px 0;
        border-radius: .5rem;
        border: 1px solid var(--border-grey);
        z-index: 3;
      }

    }

    #product_description {

      font-size: 1rem;
      line-height: 1.4rem;

      > * {
        margin-bottom: 1rem;
      }

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

      h1 {
        /* font-size: 1.2rem; */
        font-weight: 600;
        font-family: var(--font-alt);
      }

    }

  }

}

@keyframes singleProductAddToCartEffect {
  0% {
    background-position: right;
  }
}

@media only screen and (max-width: 700px)  {

  #product-title {
    margin-bottom: 2rem;
  }

  #product-details {

    flex-direction: column;

    #product-images,
    #product-details {
      width: 100%;
    }

    #product-images {

      flex-direction: column-reverse;
      max-height: fit-content;

      #thumbnails-container {

        width: 100%;

        #thumbnails {

          flex-direction: row;

          a {
            display: inline-block;
            width: 20%;
            padding-bottom: 20%;
            flex-shrink: 0;
          }

        }

      }

      #full {
        width: 100%;
      }

    }

    #product-images:after {
      display: none;
    }

    #product-details {

      #quantity-add-to-cart {

        form.form-pnwf {

          fieldset:last-child {

            input {
              padding: 1rem;
              border-radius: 2rem;
              font-size: 1.2rem;
            }

          }
        }

        #quantity-add-to-cart-success,
        #quantity-cannot-to-cart {

          a {
            width: 100%;
            padding: 1rem;
            border-radius: 2rem;
            font-size: 1.2rem;
          }
        }

      }

      #product-return {
        a {
          display: block;
        }
      }
    }

  }

}