@media (max-width: 768px) {
  .timeline {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    padding-left: 1.5rem;
    position: relative;
  }

  /* Vertical connecting line */
  .timeline::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 20px;
    width: 2px;
    height: 100%;
    background: var(--color-border);
  }

  .timeline-step {
    flex-direction: row;
    align-items: center;
    text-align: left;
    position: relative;
    gap: 1rem;
    width: 100%;
  }

  .timeline-step h6 {
    margin: 0;
    font-size: 0.85rem;
  }

  .circle {
    width: 34px;
    height: 34px;
    font-size: 0.85rem;
    z-index: 1;
  }

  .timeline-line {
    display: none;
  }

   .cart_container {
    padding: 1.5rem 1rem;
  }

  .cart_container .container {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .cart-table-header {
    display: none;
  }

  .cartItem {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
  }

  .cart-product {
    flex-direction: row;
    align-items: flex-start;
  }

  .cart-product img {
    width: 60px;
    height: 60px;
  }

  .cart-product-info h5 {
    font-size: 0.9rem;
  }

  .cart-product-info p {
    font-size: 0.8rem;
  }

  .cart-price,
  .cart-quantity,
  .delete-btn {
    font-size: 0.85rem;
  }

  .cart-quantity {
    gap: 0.3rem;
  }

  .cart-quantity input {
    width: 40px;
    font-size: 0.85rem;
  }

  .qty-btn {
    width: 28px;
    height: 28px;
    font-size: 1rem;
  }

   .coupon-container {
    flex-direction: column;
    align-items: stretch;
    padding: 1rem;
  }

  .coupon-container input,
  .coupon-container button {
    width: 100%;
  }

  .coupon-container button {
    text-align: center;
  }

  .cart-total-container {
    padding: 1.5rem;
  }

  .cart-total-container h3 {
    font-size: 1.2rem;
  }

  .cart-total-row {
    font-size: 0.9rem;
  }

  .cart-total-row.shipping div {
    font-size: 0.85rem;
  }

  .checkout-btn {
    width: 100%;
    padding: 0.9rem;
    font-size: 1rem;
  }


}

@media (max-width: 480px) {
  .timeline {
    gap: 1.5rem;
    padding-left: 1rem;
  }

  .timeline-step h6 {
    font-size: 0.8rem;
  }

  .circle {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
  }
}