/* Additional CSS if needed */

/* 모바일 화면 스타일 */
@media (max-width: 767px) {
  /* Hide the cards on mobile to improve user experience by reducing clutter */
  .address-card {
    display: none;
  }

  /* Style the tabs for mobile */
  .nav-tabs .nav-link {
    border: 1px solid #dee2e6;
    border-radius: 0.25rem 0.25rem 0 0;
    margin-bottom: -1px;
  }

  .tab-content {
    border: none;
  }

  .nav-pills .nav-link.active {
    background-color: var(--bs-primary);
    color: var(--bs-light);
  }

  /* 모바일 화면에서만 적용 */
  .mobile-product-cell {
    min-width: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-product-cell .secDiv {
    display: none; /* 모바일 화면에서 제품명 숨기기 */
  }

  .table-responsive > .table-centered th:nth-child(3), /* Units 컬럼 숨기기 */
  .table-responsive > .table-centered td:nth-child(3),
  .table-responsive > .table-centered th:nth-child(4), /* Total Price 컬럼 숨기기 */
  .table-responsive > .table-centered td:nth-child(4) {
    display: none;
  }
}

/* Prevent content overflow in all columns of the table on desktop view */
@media (min-width: 768px) {
  .table-responsive > .table-centered th,
  .table-responsive > .table-centered td {
    word-break: break-word; /* Ensures long words break to fit within the column */
  }
}

.product-name-truncate {
  max-width: 70px; /* 적절한 최대 너비 설정 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}