#cart-container {

  display: flex;
  gap: 1.5rem;
  position: relative;

  #cart-items.no-result {

    > li {
      font-size: 1rem;
      line-height: 1.4rem;
      padding: 1rem;
      border-radius: 1rem;
      background-color: var(--bg-fake-white);
    }

  }

  #cart-items {

    width: calc(66% - 1.5rem);
    position: sticky;
    top: 1rem;
    height: fit-content;

    > li {

      display: flex;
      gap: 1rem;

      .cart-item-thumbnail {

        width: 100px;
        height: 100px;
        position: relative;
        flex-shrink: 0;

        a {

          position: relative;
          display: block;
          width: 100%;
          height: 100%;

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

        }
      }

      .cart-item-details {

        display: flex;
        flex: auto;
        align-content: center;
        flex-wrap: wrap;
        gap: .5rem;

        a.cart-item-title {
          font-size: 1rem;
          line-height: 1.2rem;
          text-decoration: none;
          color: var(--alto-black);
          font-family: var(--font-alt);
        }

        ul {

          display: flex;
          flex-wrap: wrap;
          gap: .25rem;
          width: 100%;

          li {
            font-size: .8rem;
            line-height: 1rem;
            margin-right: .75rem;
          }

          li:last-child {
            width: 100%;
            margin-right: 0;
          }

        }

      }

      .cart-item-quantity {

        width: 100px;
        display: flex;
        align-items: center;
        flex-shrink: 0;

        ul {

          display: flex;
          flex-direction: column;
          gap: .25rem;

          li {

            label {
              font-size: .8rem;
              text-transform: uppercase;
              margin-bottom: .25rem;
              display: block;
              text-align: center;
            }

            input {
              width: 100%;
              border: 1px solid var(--bg-grey);
              padding: .25rem;
              border-radius: .5rem;
              font-size: 1rem;
              font-family: var(--font-reg);
              text-align: center;
              background-color: transparent;
              outline: none;
            	-webkit-appearance: none;
            }

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

            input[type=number] {
              -moz-appearance: textfield;
            }

            button {
              background-color: transparent;
              outline: none;
            	-webkit-appearance: none;
              border: none;
              transition: .3s ease-out;
              color: var(--alto-black);
              font-size: .8rem;
              line-height: 1.2rem;
              width: 100%;
              text-align: center;
              cursor: pointer;
            }

            button:hover {
              color: var(--alto-red);
            }

          }

        }

      }

      .cart-item-subtotal {

        width: 100px;
        display: flex;
        align-items: center;
        flex-shrink: 0;
        font-size: .8rem;
        text-transform: uppercase;
        justify-content: flex-end;

      }

    }

    > li:not(:last-child) {
      border-bottom: 1px solid var(--bg-grey);
    }

  }

  #cart-details {

    width: 34%;
    position: relative;
    border: 1px solid var(--alto-red);
    border-radius: .5rem;
    padding: 1rem;

    form {

      flex-wrap: wrap;
      gap: 0;

      fieldset:last-of-type {
        margin-bottom: 0;
      }

      fieldset {
        width: 100%;
        margin-bottom: 1rem;

        label {

          font-size: .8rem;
          line-height: 1.2rem;

          span {

          }

          span.error {
            width: 100%;
            display: block;
            color: var(--alto-red);
          }
        }

        input[type=text] {
          font-size: 1rem;
          border: 1px solid var(--bg-grey);
          padding: .5rem;
          border-radius: .5rem;
        }

        button {
          background-color: var(--alto-white);
          outline: none;
          -webkit-appearance: none;
          border: 1px solid var(--border-grey);
          border-radius: .5rem;
          transition: .3s ease-out;
          color: var(--alto-black);
          font-size: 1rem;
          padding: .5rem;
          width: 100%;
          text-align: center;
          cursor: pointer;
          font-family: var(--font-alt);
        }

        button:hover {
          background-color: var(--alto-black);
          color: var(--alto-white);
        }

        button#payment_btn {
          background: linear-gradient(-65deg,var(--alto-red) 33%, var(--pale-red) 50%,var(--alto-red) 66%);
          background-size:400% 100%;
          border: none;
          color: var(--alto-white);
          padding: 1rem;
        }

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

        button#payment_btn:disabled {
          cursor: default;
          background: var(--bg-grey);
          color: var(--border-grey);
        }

      }

      fieldset.pick_up,
      fieldset.nerd_shipping {
        max-height: 0;
        opacity: 0;
        margin-bottom: 0rem;
        overflow: hidden;
        transition: .15s ease-in-out;
      }

      fieldset.pick_up.current,
      fieldset.nerd_shipping.current {
        max-height: 10000px;
        opacity: 1;
        margin-bottom: 1rem;
      }

      fieldset.pick_up {

        label {
          font-size: 1rem;
          line-height: 1.4rem;
        }

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

      }

      fieldset.radio {

        flex-direction: row;

        input:checked + label {
          background-color: var(--alto-black);
          color: var(--alto-white);
        }

        label {
          display: block;
          width: 50%;
          font-size: .8rem;
          border: 1px solid var(--bg-grey);
          border-radius: .5rem;
          padding: 1rem;
          text-align: center;
          transition: .15s ease-in-out;

          i {
            font-size: 1.5rem;
            display: block;
            margin-bottom: .5rem;
          }

        }

        label:hover {
          cursor: pointer;
        }

        legend {
          font-size: 1rem;
          line-height: 1.4rem;
        }

      }

      dl {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        gap: 1rem;
        padding: 1rem 0;
        margin-bottom: 1rem;
        border-bottom: 1px solid var(--bg-grey);
        border-top: 1px solid var(--bg-grey);

        dt,
        dd {
          font-size: .9rem;
          line-height: 1.3rem;
          width: calc(50% - .5rem);
        }

        dt {

          #items-count {
            display: inline-block;
            margin-left: .25rem;
          }

          #items-count:before {
            content: "(";
          }

          #items-count:after {
            content: ")";
          }

        }

        dd {

          text-align: right;

        }
      }

    }

  }

}

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

  #cart-container {

    flex-direction: column;

    #cart-items,
    #cart-details {
      position: relative;
      width: 100%;
      top: auto;
    }

    #cart-items {

      > li {

        flex-wrap: wrap;
        padding: 1rem 0;

        .cart-item-details,
        .cart-item-subtotal {
          width: calc(100% - 100px - 1rem);
        }

        .cart-item-subtotal {
          font-size: 1rem;
        }

      }

    }

    #cart-details {
      border-left: none;
      border-right: none;
      border-bottom: none;
      padding: 1.5rem 0 0 0;
      border-radius: 0;
    }

  }

}