/* ============================================================
   cart_responsive_320_8k.css — адаптив для кошика
   bodyClass: page-cart
   Підключається через data_head.php (не inline в body)
   ============================================================ */
.cart-page {
    box-sizing: border-box;
    width: min(100% - 32px, 1200px);
    margin: 30px auto !important;
    padding: 0 !important;
}
.cart-page *, .cart-page *::before, .cart-page *::after { box-sizing: border-box; }
.cart-page h1 { line-height: 1.2; overflow-wrap: anywhere; }
.cart-table-wrap {
    width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.cart-table-wrap table { width: 100% !important; min-width: 760px; }
.cart-table-wrap th, .cart-table-wrap td { vertical-align: middle; }
.cart-table-wrap td:first-child { min-width: 280px; }
.cart-table-wrap td:first-child > div { min-width: 0; }
.cart-table-wrap td:first-child > div > div { min-width: 0; overflow-wrap: anywhere; }
.cart-table-wrap img { flex: 0 0 60px; }
.cart-sale-badges, .cart-sale-badge { max-width: 100%; }
.cart-sale-badge { white-space: normal; overflow-wrap: anywhere; }
#checkoutBtn { max-width: 100%; }

@media (max-width: 600px) {
    .cart-page { width: calc(100% - 24px); margin: 16px auto !important; padding: 0 !important; }
    .cart-page .breadcrumb { margin-bottom: 12px !important; font-size: .82rem !important; overflow-wrap: anywhere; }
    .cart-page h1 { font-size: clamp(1.35rem, 6vw, 1.75rem); margin-bottom: 14px; }
    .cart-page .alert { font-size: .88rem; overflow-wrap: anywhere; }

    .cart-table-wrap { overflow: visible; }
    .cart-table-wrap table { display: block; min-width: 0; width: 100% !important; }
    .cart-table-wrap thead { display: none; }
    .cart-table-wrap tbody, .cart-table-wrap tfoot { display: block; width: 100%; }

    .cart-table-wrap tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        margin: 0 0 12px;
        padding: 10px 12px;
        border: 1px solid #eee !important;
        border-radius: 12px;
        background: #fff !important;
        box-shadow: 0 2px 10px rgba(0,0,0,.04);
    }
    .cart-table-wrap tbody td {
        display: block;
        min-width: 0 !important;
        width: 100% !important;
        padding: 7px 4px !important;
        border: 0 !important;
    }
    .cart-table-wrap tbody td:first-child {
        grid-column: 1 / -1;
        padding-bottom: 10px !important;
    }
    .cart-table-wrap tbody td:nth-child(2)::before,
    .cart-table-wrap tbody td:nth-child(3)::before,
    .cart-table-wrap tbody td:nth-child(4)::before,
    .cart-table-wrap tbody td:nth-child(5)::before {
        display: block; margin-bottom: 3px; color: #888; font-size: .72rem; font-weight: 600;
    }
    .cart-table-wrap tbody td:nth-child(2)::before { content: "Ціна"; }
    .cart-table-wrap tbody td:nth-child(3)::before { content: "Кількість"; }
    .cart-table-wrap tbody td:nth-child(4)::before { content: "Сума"; }
    .cart-table-wrap tbody td:nth-child(5)::before { content: "Дія"; }
    .cart-table-wrap tbody td:nth-child(5) { text-align: right; }
    .cart-table-wrap tbody td:first-child > div {
        width: 100%; align-items: flex-start !important;
    }
    .cart-table-wrap tbody td:first-child img {
        width: 60px !important; height: 60px !important;
    }
    .cart-table-wrap tbody td:first-child a,
    .cart-table-wrap tbody td:first-child span { overflow-wrap: anywhere; }
    .qty-control { gap: 6px !important; }
    .qty-btn { flex: 0 0 32px; width: 32px !important; height: 32px !important; }
    .qty-value { min-width: 22px; text-align: center; font-weight: 600; }
    .cart-free-note, .cart-bonus-hint { overflow-wrap: anywhere; }
    .cart-remove { padding: 6px 0; }

    .cart-table-wrap tfoot tr {
        display: grid; grid-template-columns: 1fr auto; align-items: center; width: 100%;
        border-top: 2px solid #eee;
    }
    .cart-table-wrap tfoot td { display: block; width: auto !important; padding: 12px 4px !important; border: 0; }
    .cart-table-wrap tfoot td:first-child { grid-column: 1; text-align: left !important; }
    .cart-table-wrap tfoot td:last-child { grid-column: 2; text-align: right !important; }

    .cart-page > div:last-of-type { margin-top: 16px !important; text-align: center !important; }
    #checkoutBtn { width: 100%; min-height: 46px; padding: 12px 18px !important; font-size: .95rem !important; }
}

@media (min-width: 601px) and (max-width: 900px) {
    .cart-page { width: calc(100% - 32px); margin: 22px auto !important; }
    .cart-table-wrap table { min-width: 720px; }
}
@media (min-width: 901px) and (max-width: 1280px) {
    .cart-page { width: min(calc(100% - 48px), 1100px); }
}
@media (min-width: 1281px) and (max-width: 1920px) {
    .cart-page { width: min(1200px, calc(100% - 64px)); }
}
@media (min-width: 1921px) and (max-width: 2560px) {
    .cart-page { width: min(1400px, calc(100% - 96px)); }
    .cart-table-wrap table { font-size: 1.02rem; }
    .cart-table-wrap th, .cart-table-wrap td { padding: 13px !important; }
}
@media (min-width: 2561px) and (max-width: 3840px) {
    .cart-page { width: min(1600px, calc(100% - 140px)); }
    .cart-table-wrap table { font-size: 1.05rem; }
    .cart-table-wrap th, .cart-table-wrap td { padding: 15px !important; }
}
@media (min-width: 3841px) and (max-width: 5120px) {
    .cart-page { width: min(1800px, calc(100% - 180px)); }
    .cart-table-wrap table { font-size: 1.08rem; }
    .cart-table-wrap th, .cart-table-wrap td { padding: 17px !important; }
}
@media (min-width: 5121px) and (max-width: 7680px) {
    .cart-page { width: min(2100px, calc(100% - 240px)); }
    .cart-table-wrap table { font-size: 1.1rem; }
    .cart-table-wrap th, .cart-table-wrap td { padding: 19px !important; }
}
@media (min-width: 7681px) {
    .cart-page { width: min(2400px, calc(100% - 320px)); }
    .cart-table-wrap table { font-size: 1.12rem; }
    .cart-table-wrap th, .cart-table-wrap td { padding: 21px !important; }
}
@media (max-width: 360px) {
    .cart-page { width: calc(100% - 16px); }
    .cart-table-wrap tbody tr { padding: 8px; }
    .cart-table-wrap tbody td { font-size: .84rem; }
    .cart-table-wrap tbody td:first-child { font-size: .88rem; }
    .cart-table-wrap tbody td:first-child img {
        width: 52px !important; height: 52px !important; flex-basis: 52px !important;
    }
}