/* ====================
NOT-FOUND-CART 
==================== */
.not-found-cart {height: calc(100vh - 498px);}
.not-found-cart .container {height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; padding-block: 10px;}
.not-found-cart .container > :first-child { font-size: 32px; text-align: center;}
.not-found-cart a {font-size: 14px; color: var(--c-anchor-blue); text-decoration: underline; margin-top: 5px;}

/* ====================
CART PRODUCT
==================== */
.cart-page .breadcrumb a { text-decoration: unset;}
.cart-page .breadcrumb span {color: var(--c-hover);}
.cart-page .title {font-size: 18px; font-weight: 500; line-height: 1.2; margin-bottom: 8px;}
.cart-page table {width: 100%; border-collapse: collapse; margin-block: 20px 23px;}
.cart-page table :where(th, td) {text-align: left; padding: 10px; border: 1px solid var(--c-cart-br);} 
.cart-page table th {font-size: 13px; text-transform: uppercase; color: var(--c-card-anchor);}
.cart-page table td {font-size: 13px; padding: 15px;}
.cart-page table .product-title {font-size: 13px; font-weight: 700; text-transform: capitalize; color: var(--c-card-anchor);}
.cart-page table label {display: block; margin-bottom: 5px;}
.cart-page table .quantity-input {width: 100%; max-width: 60px; height: 33px; text-align: center; border: 1px solid var(--c-cart-br); border-radius: 5px; margin-bottom: 10px;}
.cart-page table .quantity-btn {display: flex; align-items: center; justify-content: start; gap: 10px;}
.cart-page table .quantity-btn > a {font-size: 13px; text-decoration: underline; color: var(--c-card-anchor); transition: color var(--trans-3);}
.cart-page table .quantity-btn > :first-child {color: var(--c-handshake);}
.cart-page table .quantity-btn > :first-child:hover {color: var(--c-handshake);}
.cart-page table .quantity-btn > a:hover {color: var(--c-hover-lg);}
.cart-page .continue-btn {margin-bottom: 30px;}
.cart-page .continue-btn a {font-size: 14px; color: #fff; background-color: var(--c-detail-buy); padding: 8px 28px; margin-left: auto; transition: background-color var(--trans-3);}
.cart-page .continue-btn a:hover {background-color: var(--c-hover-lg);}

@media only screen and (max-width: 768px) {
    .cart-page table th, .cart-page table td {padding: 8px;}
    .cart-page table td {padding: 10px;}
}

@media only screen and (max-width: 576px) {
    .cart-page table thead {display: none;}
    .cart-page table, .cart-page table tbody, .cart-page table tr, .cart-page table td {display: block; width: 100%;}
    .cart-page table tr {margin-bottom: 15px; border: 1px solid var(--c-cart-br);}
    .cart-page table td {border: none; border-bottom: 1px solid var(--c-cart-br); display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: right;}
    .cart-page table td:last-child {font-weight: 700; border-bottom: none;}
    .cart-page table td::before {content: attr(data-label); font-weight: 700; text-transform: uppercase; font-size: 12px; color: var(--c-card-anchor); text-align: left; margin-right: 10px;}
    .cart-page table td:empty {display: none;}
    .cart-page table .quantity-btn {justify-content: flex-end; flex-direction: column; gap: 2px;}
    .cart-page .continue-btn a {display: block; width: 100%; text-align: center; margin-left: 0;}
    .cart-page table .quantity-wrapper {margin-left: auto; text-align: center;}
}

@media only screen and (max-width: 480px) {
    .cart-page .title {font-size: 16px;}
    .cart-page table td {gap: 6px; padding: 8px;}
    .cart-page table td::before {margin-right: 0;}
    .cart-page table .quantity-btn {justify-content: flex-start;}
}