/* --------------------------
        Cart Top Row 
---------------------------- */
.cart-top-row .col-12 {
  align-self: end;
  padding: 0;
}
.cart-top-row .col-12:nth-child(2) {
  display: flex;
  justify-content: end;
}

.cart-top-row .bigHD {
  margin-bottom: 10px;
}

.cart-top-row p {
  font-size: 16px;
  color: var(--txt-lite);
  font-weight: 700;
}
.cart-top-row p span {
  color: var(--primary);
}

.cart-top-row button {
  color: var(--txt-lite);
  font-weight: 700;
  transition: var(--Ltrns);
}
.cart-top-row button:hover {
  color: red;
}

@media (max-width: 612px) {
  .cart-top-row p {
    font-size: 13px;
  }
}

/* --------------------------
        Cart Table
---------------------------- */
.table-responsive {
  margin-top: 40px;
  margin-bottom: 30px;
}

.table-responsive::-webkit-scrollbar {
  height: 3px;
  background-color: #eeeeee;
}
.table-responsive::-webkit-scrollbar-thumb {
  background: #cfcfcf;
}

.cart-table tr th,
.cart-table tr td {
  vertical-align: middle;
}

.cart-table tr th:not(:nth-child(2)),
.cart-table tr td:not(:nth-child(2)) {
  margin: auto;
  text-align: center;
}

.cart-table tr td:nth-child(1) {
  width: 5%;
}

.cart-table thead tr th {
  background-color: var(--primary-lite);
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 17px;
}

.cart-table .form-check-input {
  border-color: rgb(192, 191, 191);
}
.cart-table .form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary-lite);
}

/* Particulars css  */
.cart-table .particulars {
  display: flex;
  gap: 20px;
}

.cart-table .particulars .cart-img-box {
  flex-shrink: 0;
}
.cart-table .particulars img {
  width: 150px;
  border: var(--bdr-primary);
  border-radius: var(--sec-bdr);
}

.cart-table .particulars .pro-txt-box {
  flex-grow: 1;
  align-self: end;
}

.cart-table .particulars .pro-txt-box h6 {
  font-size: 15px;
  font-weight: 600;
  color: var(--txt-lite);
  margin: 15px 0;
}
.cart-table .particulars .pro-txt-box h6 span {
  color: var(--primary);
}

/* qty counter */
.cart-table .particulars .pro-txt-box .qty-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 20px;
}

.cart-table .particulars .pro-txt-box .qtyIncDecBox {
  width: 100px;
  border-radius: var(--sec-bdr);
  overflow: hidden;
  border: 1px solid rgba(186, 186, 186, 0.696);
}

.cart-table .particulars .pro-txt-box .qtyIncDecBox input {
  text-align: center;
  font-size: 14px;
  height: 35px;
  margin: 0;
  border-radius: 0;
  border: none;
}

.cart-table .particulars .pro-txt-box .qtyIncDecBox .form-control:focus {
  box-shadow: none;
  border-color: none;
}

.cart-table .particulars .pro-txt-box .qtyIncDecBox .incdec-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cart-table .particulars .pro-txt-box .qtyIncDecBox span {
  background-color: white;
  transition: var(--Ltrns);
  font-size: 10px;
  padding: 3px 10px;
  border: none;
  border-radius: 0;
  color: var(--primary);
  transition: var(--Ltrns);
}

.cart-table .particulars .pro-txt-box .qtyIncDecBox span:hover {
  background-color: var(--primary2-color);
  color: var(--secoundry);
}

/* Subtotal  */
.subtotal {
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  margin: 0;
}

/* Remove btn  */
.remove-item i {
  color: rgb(255, 111, 111);
}

@media (max-width: 800px) {
  .cart-table thead tr th {
    font-size: 15px;
  }

  /* Subtotal  */
  .subtotal {
    font-size: 16px;
  }

  .cart-table .particulars img {
    width: 100px;
  }
}

@media (max-width: 612px) {
  .table-responsive {
    margin-top: 20px;
  }

  .cart-table .particulars img {
    width: 80px;
  }

  /* Particulars css  */
  .cart-table .particulars {
    display: block;
  }

  .cart-table .particulars .cart-img-box {
    margin-bottom: 20px;
  }
}

/* --------------------------
        Total
---------------------------- */
.TotalBox {
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding-bottom: 20px;
  border-bottom: var(--bdr-primary);
}

.TotalBox h6 {
  font-size: 25px;
  font-weight: 700;
  margin: 0;
  color: var(--txt-Dark);
}
.TotalBox h6 span {
  color: var(--secoundry);
}

@media (max-width: 630px) {
  .TotalBox h6 {
    font-size: 18px;
  }
  .TotalBox h6 span {
    display: block;
    padding-top: 5px;
  }
}