.cart-form-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
}

/* Empty Cart Page */
.cart-empty-page {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  gap: 2rem;

  font-size: 1.5rem;
  text-align: center;
}

/* Cart with items */
form.newcom-commerce-cart-form {
  display: flex;
  align-items: start;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2rem;
  width: 100%;
  text-align: left;

  /* Prezzi */
  .newcom-price {
    position: relative;
    display: flex;
    justify-content: end;
    font-size: 0.95rem;

    .newcom-price-main {
      font-size: 1.5rem;
    }
  }

  /* Tabella Prodotti */
  .cart-items {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--background-color);
    color: var(--color);

    &,
    * {
      --color: #000;
      --background-color: #fff;
      color: var(--color);
    }

    /* Righe prodotti */
    .cart-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      gap: 1rem 2rem;
      padding: 0.5rem 0.75rem;
      border-bottom: 2px solid #d2d2d2;

      .group {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem 2rem;

        .col,
        .form-item {
          margin: 0;
          padding: 0;
        }
      }
    }

    /* Gruppi */
    .group-left {
      flex: 0 0 110px; /* uguale a colonna immagine */
    }

    .group-right {
      flex: 1 1 auto;
    }

    .group-bottom {
      flex: 0 0 20px; /* uguale a colonna rimuovi */
    }

    /* Colonne */
    .col-image {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 110px;

      img {
        max-width: 100%;
      }
    }

    .col-product {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      max-width: 170px;

      .product-title {
        display: inline-flex;
        flex-direction: column;
        gap: 0.5rem;
        font-size: 0.85rem;

        strong,
        b {
          font-size: 1rem;
        }
      }
    }

    /* Colonne con label */
    .col-list_price,
    .col-promo,
    .col-sell_price,
    .col-qty,
    .col-totale {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 0.5rem;

      > .label {
        margin-top: -0.5rem;
        margin-bottom: 0.5rem;
        font-size: 0.8rem;
      }
    }

    /* Prezzi allineati a destra */
    .col-list_price,
    .col-sell_price,
    .col-totale {
      align-items: end;
    }

    /* Prezzo di listino */
    .col-list_price {
      flex: 0 0 80px;

      .newcom-price::before {
        content: " ";

        position: absolute;
        top: 50%;
        left: -5%;

        width: 110%;
        border-bottom: 1px solid red;
        -moz-transform: rotate(-20deg);
        -webkit-transform: rotate(-20deg);
        -o-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
        transform: rotate(-20deg);
      }
    }

    /* Sconto Promo */
    .col-promo {
      flex: 0 0 140px;

      .sconto-badge {
        display: inline-flex;
        color: #fff;
        text-transform: uppercase;
        padding: 0.25rem 0.5rem;
        padding-top: 0.35rem;
        border-radius: 3px;
        background: var(--promo-color);
      }

      .sconto-valore {
        display: flex;
        align-items: center;
        gap: 0.25rem;

        margin-bottom: 0.25rem;
        margin-top: -0.25rem;

        &,
        * {
          color: var(--promo-color);
        }
      }
    }

    /* Prezzo unitario */
    .col-sell_price {
      flex: 0 0 80px;
    }

    /* Quantità */
    .col-qty {
      flex: 0 0 60px;

      .label.qty-label {
        margin-top: calc((0.5rem - 5px) * -1);
      }

      input {
        text-align: center;
      }
    }

    /* Totale */
    .col-totale {
      flex: 0 0 80px;
    }

    /* Pulsante rimuovi */
    .col-remove {
      flex: 0 0 20px;

      i {
        font-size: 1.2rem;

        &:hover {
          color: #b20000;
          cursor: pointer;
        }
      }

      .btn-remove {
        display: none;
      }
    }
  }

  /* Coupon & Riepilogo */
  .cart-coupon,
  .cart-summary {
    --color: #000;
    display: flex;
    justify-content: flex-end;
    max-width: 400px;

    > .form-wrapper {
      display: flex;
      flex-direction: row;
      align-items: start;
      justify-content: start;
      flex-wrap: wrap;
      gap: 0.5rem;
      width: 100%;
      padding: 1rem 2rem;
      background: #e9e9e9;

      > h3 {
        flex: 0 0 100%;
        text-align: center;
        margin-bottom: 0.5rem;
      }

      .form-item {
        max-width: 200px;
      }

      input {
        max-width: 100%;
      }
    }
  }

  /* Solo Coupon */
  .cart-coupon {
    --color: #000;
    max-width: 450px;

    > .form-wrapper {
      justify-content: center;
      background-color: #e1f8d4;

      .coupon-description {
        width: 100%;
        text-align: center;
      }
    }

    input.form-submit {
      --background-color: var(--promo-color);
      --background-color-hover: var(--promo-color-hover);
      padding-top: 0.6rem;
      padding-bottom: 0.5rem;
      color: #fff !important;
    }
  }

  /* Solo Riepilogo */
  .cart-summary {
    --color: #000;

    > .form-wrapper {
      padding-right: 65px;
    }

    .summary-title {
      /* per centrarlo rispetto alle righe sotto (metà del padding-right del wrapper) */
      padding-left: 32;
      padding-left: 32.5px;
    }

    .summary-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 0 0 auto;
      width: 100%;

      .summary-label,
      .summary-value {
        display: flex;
        align-items: center;
        justify-content: start;
      }

      .summary-label {
        flex: 0 0 auto;
        width: 230px;
      }

      .summary-details {
        display: none;
        flex: 0 0 auto;
      }

      .summary-value {
        flex: 0 0 auto;
        width: 65px;
        justify-content: end;
      }

      /* Sconto coupon */
      &.promo-discount {
        .summary-label span {
          background-color: var(--promo-color);
          color: #fff;
          padding: 0.25rem 0.5rem;
          padding-top: 0.35rem;
        }

        .summary-value {
          color: var(--promo-color);
        }
      }

      /* Spedizione gratuita */
      &.free-shipping {
        .summary-label .newcom-price {
          width: 25px;
          margin-right: 0.15rem;

          .newcom-price-main {
            font-size: inherit;

            &::before {
              position: absolute;
              display: block;
              content: " ";
              width: 100%;
              top: 36%;
              right: -11%;
              border-bottom: 1px solid red;
              --deg: -26deg;
              -moz-transform: rotate(var(--deg));
              -webkit-transform: rotate(var(--deg));
              -o-transform: rotate(var(--deg));
              -ms-transform: rotate(var(--deg));
            }
          }
        }

        .summary-details,
        .summary-value {
          color: var(--promo-color);
        }
      }

      /* Totale ordine */
      &.order-total {
        padding-top: 0.5rem;
        border-top: 2px solid #c6c6c6;

        .newcom-price,
        .newcom-price .newcom-price-main {
          font-size: 1.5rem;
        }
      }
    }

    /* Aggiusto width a summary-details se ci sono spese di spedizione gratuite */
    &.with-free-shipping {
      .summary-label {
        width: 150px;
      }

      .summary-details {
        display: flex;
        width: 55px;
      }
    }
  }

  /* Actions */
  .cart-actions {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    gap: 1rem;

    .btn-checkout,
    .btn-update {
      display: none;
    }

    /* Procedi */
    .nc-cart-proceed-button {
      --color: #000;

      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      font-size: 1.1rem;
      text-decoration: none;
      padding: 0.75rem 1.5rem;
      border-radius: 0.35rem;
      background-color: #F7CA00;
      cursor: pointer;
    }
  }
}

/* Solo desktop */
body.is-desktop form.newcom-commerce-cart-form {
  /* Pulsante Procedi */
  .nc-cart-proceed-button:hover {
    background-color: #F9D94B;
    opacity: 1;
  }
}

/* Solo mobile */
body.is-mobile {
  #cart-form-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  form.newcom-commerce-cart-form {
    max-width: 390px;

    /* Righe prodotti */
    .cart-items {
      gap: 2rem;

      .cart-item {
        flex-wrap: wrap;
        align-items: start;
        justify-content: start;
        gap: 0.5rem 1.5rem;
        padding: 0.5rem 0;

        &:not(:last-child) {
          border-bottom: 2px solid #737373 !important;
        }

        .group {
          position: relative;
          align-items: start;
          justify-content: start;

          &.group-right {
            flex-direction: column;
            flex: 1 1 auto;
            max-width: calc(100% - 110px - 1.5rem);
            gap: 0.75rem 0.5rem;
            z-index: 2;
          }

          &.group-bottom {
            flex: 1 1 auto;
            width: 100%;
            margin-top: -2.8rem;
            z-index: 1;
          }

          /* Colonne */
          .col {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            flex: 1 1 auto;
            width: 100%;

            .label {
              margin: 0 !important;
            }

            /* Prezzi */
            .newcom-price,
            .newcom-price .newcom-price-main {
              font-size: 1.1rem;
            }

            /* Colonna prodotto */
            &.col-product {
              margin-bottom: 0.5rem;
            }

            /* Colonna totale */
            &.col-totale {
              padding-top: 1rem;
              padding-bottom: 1rem;
              border-top: 2px solid #ccc !important;
              font-weight: bold;
              font-size: 1.1rem;

              .newcom-price,
              .newcom-price .newcom-price-main {
                font-size: 1.3rem;
              }
            }
          }
        }
      }
    }

    /* Riepilogo */
    .cart-summary {
      width: 100%;

      .cart-summary-wrapper {
        width: 100%;
        padding: 1rem !important;
      }
    }
  }
}