/* Checkout only: visually separate courses from the page and retain table semantics. */
.cart-cards { border-collapse: separate; border-spacing: 0 12px; table-layout: fixed; width: 100%; }
.cart-cards thead th { border: 0; vertical-align: middle; color: #46535e; font-size: .875rem; text-align: center; }
.cart-cards thead th:first-child { width: 43%; text-align: left; }
.cart-cards thead th:nth-child(2) { width: 16%; }
.cart-cards thead th:nth-child(3) { width: 20%; }
.cart-cards thead th:nth-child(4) { width: 13%; }
.cart-cards thead th:last-child { width: 8%; }
.cart-cards tbody td { background: #fff; border-top: 1px solid #c8d2da; border-bottom: 1px solid #c8d2da; padding: 20px 12px; vertical-align: middle; text-align: center; box-shadow: none; }
.cart-cards tbody td:first-child { border-left: 1px solid #c8d2da; border-radius: 14px 0 0 14px; text-align: left; }
.cart-cards tbody td:last-child { border-right: 1px solid #c8d2da; border-radius: 0 14px 14px 0; }
.cart-cards .cart-course-details { display: flex; align-items: center; gap: 16px; }
.cart-cards .cart-course-copy { min-width: 0; }
.cart-cards .cart-item-image { flex: 0 0 80px; width: 80px; height: 80px; padding: 8px; border-radius: 12px; }
.cart-cards .cart-course-name { color: #153b2c; font-weight: 700; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
.cart-cards .cart-course-name:hover { text-decoration: underline; }
.cart-cards .cart-course-language { display: block; margin-top: 6px; color: #46535e; font-size: .875rem; }
.cart-cards .counter-container { width: 146px; height: 48px; padding: 0; gap: 0; margin: auto; border: 1px solid #85949f; border-radius: 8px; background: #fff; align-items: stretch; overflow: visible; }
.cart-cards .quantity-adjust { width: 44px; min-width: 44px; min-height: 44px; border: 0; background: #edf3f0; color: #153b2c; font: inherit; font-size: 1.4rem; cursor: pointer; }
.cart-cards .quantity-adjust:first-child { border-radius: 7px 0 0 7px; border-right: 1px solid #85949f; }
.cart-cards .quantity-adjust:last-child { border-radius: 0 7px 7px 0; border-left: 1px solid #85949f; }
.cart-cards .quantity-adjust:hover:not(:disabled) { background: #dcece2; }
.cart-cards .quantity-adjust:disabled { opacity: .45; cursor: default; }
.cart-cards .quantity-input { min-width: 0; width: 56px; flex: 1; }
.cart-cards .cart-remove-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: #52616b; border: 1px solid #c8d2da; border-radius: 8px; background: #fff; }
.cart-cards .cart-remove-btn:hover { color: #a31d2a; background: #fff1f2; border-color: #a31d2a; }
.cart-cards button:focus-visible, .cart-cards input:focus-visible, .cart-cards a:focus-visible { outline: 3px solid #007a48; outline-offset: 3px; }
.cart-cards .cart-line-total { white-space: nowrap; }
@media (max-width: 991.98px) {
    .cart-cards, .cart-cards tbody { display: block; width: 100%; }
    .cart-cards thead { display: none; }
    .cart-cards tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 12px; background: #fff; border: 1px solid #c8d2da; border-radius: 14px; padding: 16px; margin: 0 0 16px; }
    .cart-cards tbody td, .cart-cards tbody td:first-child, .cart-cards tbody td:last-child { display: block; width: auto; padding: 0; border: 0; border-radius: 0; margin: 0; text-align: left; background: transparent; }
    .cart-cards .cart-course-cell { grid-column: 1 / -1; }
    .cart-cards .cart-course-details { gap: 12px; align-items: flex-start; }
    .cart-cards .cart-item-image { flex-basis: 64px; width: 64px; height: 64px; }
    .cart-cards .cart-quantity-cell { grid-column: 1; grid-row: 3; }
    .cart-cards .cart-remove-cell { grid-column: 2; grid-row: 3; align-self: end; justify-self: end; }
    .cart-cards tbody td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 6px; color: #46535e; font-size: .8125rem; font-weight: 400; }
    .cart-cards .counter-container { margin: 0; }
    .cart-cards tbody .cart-line-total { text-align: right; }
}
