/* ===================================================
   RESPONSIVE KOŠÍK
   Breakpoints:
     - Small phones  : max 400px   — stacked right panel
     - Medium phones : 401–540px   — info+spinner side-by-side
     - Large phones  : 541–640px   — info+spinner side-by-side, wider
     - Tablets       : 641–900px   — full 5-col grid
     - Small laptops : 901–1024px  — full 5-col grid
     - Desktop       : 1025px+     — base styles
   =================================================== */


/* =====================================================
   SMALL PHONES — max 400px
   Card = [image panel] | [right column stacked]
   ===================================================== */
@media (max-width: 400px) {

    .container { padding: 14px 10px 44px; }

    .header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 18px;
        padding-bottom: 12px;
    }

    .header img { height: 44px; }
    .progress { font-size: 10px; gap: 4px; }

    .cart { padding: 10px 8px; border-radius: 12px; }
    .cart-header { display: none; }

    .cart-item {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 0;
        padding: 0;
        overflow: hidden;
        border-radius: 12px;
        border: 1px solid #e9ecef !important;
        background: #fff;
        margin-bottom: 10px;
        position: relative;
    }

    .cart-item-product {
        flex: 0 0 95px;
        width: 95px;
        align-self: stretch;
        background: #f0f2f5;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0;
        gap: 0;
        padding: 0;
    }

    .cart-item-product img {
        width: 100%;
        height: 100%;
        min-height: 130px;
        object-fit: contain;
        border-radius: 0;
        background: transparent;
        padding: 8px;
    }

    .cart-item-info--desktop { display: none; }

    .cart-item-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1 1 0;
        padding: 10px 30px 10px 12px;
        gap: 6px;
        min-width: 0;
        position: relative;
    }

    .cart-item-right > .cart-item-info { display: block; }

    .cart-item-right .cart-item-info h4 {
        font-size: 13px;
        font-weight: 700;
        white-space: normal;
        line-height: 1.3;
        color: #1a1a1a;
    }

    .cart-item-right .cart-item-info p {
        font-size: 11px;
        color: #7a8594;
        margin-top: 1px;
    }

    .cart-item-right .quantity { justify-content: flex-start; }

    .input-spinner { height: 34px; }
    .input-spinner button { width: 30px; }
    .input-spinner span { min-width: 28px; font-size: 13px; }

    .cart-item-prices {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .cart-item-right .price {
        font-size: 11px;
        color: #9aa5b4;
        text-align: left;
        display: block;
    }

    .cart-item-right .total-price {
        font-size: 13px;
        font-weight: 700;
        color: #414833;
        text-align: left;
        display: block;
    }

    .cart-item-right .cart-item-delete {
        position: absolute;
        top: 7px;
        right: 7px;
        display: flex;
    }

    .cart-item-right .cart-item-delete input[type="image"] {
        width: 15px;
        height: 15px;
        opacity: 0.4;
    }

    .total-section { padding: 12px 6px 4px; }
    .total { font-size: 15px; }

    .cart-footer { flex-direction: column; gap: 8px; padding: 12px 6px 0; }
    .cart-footer a, .cart-footer button { width: 100%; text-align: center; }
    .cart-footer button { padding: 12px 14px; font-size: 13px; }
}


/* =====================================================
   MEDIUM PHONES — 401px – 540px
   Right panel grid: [info | spinner] / [prices]
   ===================================================== */
@media (min-width: 401px) and (max-width: 540px) {

    .container { padding: 16px 12px 46px; }

    .header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 18px;
        padding-bottom: 12px;
    }

    .header img { height: 46px; }
    .progress { font-size: 11px; gap: 5px; }

    .cart { padding: 12px 10px; border-radius: 12px; }
    .cart-header { display: none; }

    .cart-item {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 0;
        padding: 0;
        overflow: hidden;
        border-radius: 12px;
        border: 1px solid #e9ecef !important;
        background: #fff;
        margin-bottom: 10px;
        position: relative;
    }

    .cart-item-product {
        flex: 0 0 105px;
        width: 105px;
        align-self: stretch;
        background: #f0f2f5;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0;
        gap: 0;
        padding: 0;
    }

    .cart-item-product img {
        width: 100%;
        height: 100%;
        min-height: 130px;
        object-fit: contain;
        border-radius: 0;
        background: transparent;
        padding: 8px;
    }

    .cart-item-info--desktop { display: none; }

    /* 2-row grid: [info | spinner] / [prices full width] */
    .cart-item-right {
        display: grid;
        grid-template-rows: auto auto;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "info    spinner"
            "prices  prices";
        align-items: center;
        flex: 1 1 0;
        padding: 10px 30px 10px 13px;
        gap: 6px 10px;
        min-width: 0;
        position: relative;
    }

    .cart-item-right > .cart-item-info {
        grid-area: info;
        display: block;
    }

    .cart-item-right > .quantity {
        grid-area: spinner;
        justify-content: flex-end;
    }

    .cart-item-prices {
        grid-area: prices;
        display: flex;
        gap: 10px;
        align-items: baseline;
    }

    .cart-item-right .cart-item-info h4 {
        font-size: 13px;
        font-weight: 700;
        white-space: normal;
        line-height: 1.3;
        color: #1a1a1a;
    }

    .cart-item-right .cart-item-info p {
        font-size: 11px;
        color: #7a8594;
        margin-top: 2px;
    }

    .input-spinner { height: 34px; }
    .input-spinner button { width: 30px; }
    .input-spinner span { min-width: 28px; font-size: 13px; }

    .cart-item-right .price {
        font-size: 11px;
        color: #9aa5b4;
        text-align: left;
        display: block;
    }

    .cart-item-right .total-price {
        font-size: 13px;
        font-weight: 700;
        color: #414833;
        text-align: left;
        display: block;
    }

    .cart-item-right .cart-item-delete {
        position: absolute;
        top: 7px;
        right: 7px;
        display: flex;
    }

    .cart-item-right .cart-item-delete input[type="image"] {
        width: 15px;
        height: 15px;
        opacity: 0.4;
    }

    .total-section { padding: 12px 8px 4px; }
    .total { font-size: 15px; }

    .cart-footer { flex-direction: column; gap: 8px; padding: 12px 8px 0; }
    .cart-footer a, .cart-footer button { width: 100%; text-align: center; }
    .cart-footer button { padding: 12px 16px; font-size: 13px; }
}


/* =====================================================
   LARGE PHONES — 541px – 640px
   Same grid layout, slightly more room
   ===================================================== */
@media (min-width: 541px) and (max-width: 640px) {

    .container { padding: 18px 14px 48px; }

    .header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 20px;
        padding-bottom: 14px;
    }

    .header img { height: 50px; }
    .progress { font-size: 12px; gap: 6px; }

    .cart { padding: 14px 12px; border-radius: 12px; }
    .cart-header { display: none; }

    .cart-item {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 0;
        padding: 0;
        overflow: hidden;
        border-radius: 12px;
        border: 1px solid #e9ecef !important;
        background: #fff;
        margin-bottom: 12px;
        position: relative;
    }

    .cart-item-product {
        flex: 0 0 115px;
        width: 115px;
        align-self: stretch;
        background: #f0f2f5;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0;
        gap: 0;
        padding: 0;
    }

    .cart-item-product img {
        width: 100%;
        height: 100%;
        min-height: 135px;
        object-fit: contain;
        border-radius: 0;
        background: transparent;
        padding: 10px;
    }

    .cart-item-info--desktop { display: none; }

    .cart-item-right {
        display: grid;
        grid-template-rows: auto auto;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "info    spinner"
            "prices  prices";
        align-items: center;
        flex: 1 1 0;
        padding: 12px 32px 12px 14px;
        gap: 8px 12px;
        min-width: 0;
        position: relative;
    }

    .cart-item-right > .cart-item-info {
        grid-area: info;
        display: block;
    }

    .cart-item-right > .quantity {
        grid-area: spinner;
        justify-content: flex-end;
    }

    .cart-item-prices {
        grid-area: prices;
        display: flex;
        gap: 12px;
        align-items: baseline;
    }

    .cart-item-right .cart-item-info h4 {
        font-size: 14px;
        font-weight: 700;
        white-space: normal;
        line-height: 1.3;
        color: #1a1a1a;
    }

    .cart-item-right .cart-item-info p {
        font-size: 12px;
        color: #7a8594;
        margin-top: 2px;
    }

    .cart-item-right .price {
        font-size: 12px;
        color: #9aa5b4;
        text-align: left;
        display: block;
    }

    .cart-item-right .total-price {
        font-size: 14px;
        font-weight: 700;
        color: #414833;
        text-align: left;
        display: block;
    }

    .cart-item-right .cart-item-delete {
        position: absolute;
        top: 8px;
        right: 8px;
        display: flex;
    }

    .cart-item-right .cart-item-delete input[type="image"] {
        width: 16px;
        height: 16px;
        opacity: 0.4;
    }

    .total-section { padding: 14px 8px 6px; }
    .total { font-size: 16px; }

    .cart-footer { flex-direction: column; gap: 10px; padding: 14px 8px 0; }
    .cart-footer a, .cart-footer button { width: 100%; text-align: center; }
    .cart-footer button { padding: 13px 16px; font-size: 14px; }
}


/* =====================================================
   TABLETS — 641px – 900px
   Full 5-col grid, delete as real centred grid cell
   ===================================================== */
@media (min-width: 641px) and (max-width: 900px) {

    .container { padding: 22px 20px 56px; }
    .header img { height: 60px; }
    .cart { padding: 24px 18px; }

    .cart-header {
        grid-template-columns: 1fr 130px 85px 85px 36px;
        font-size: 11px;
    }

    .cart-header > div:nth-child(3),
    .cart-header > div:nth-child(4) {
        display: block;
        text-align: center;
    }

    .cart-item {
        grid-template-columns: 1fr 130px 85px 85px 36px;
    }

    /* Restore grid pass-through */
    .cart-item-right { display: contents; }
    .cart-item-prices { display: contents; }
    .cart-item-right > .cart-item-info { display: none; }
    .cart-item-info--desktop { display: block; }

    /* Delete: normal centred grid cell */
    .cart-item-right .cart-item-delete {
        position: static;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .price { display: block; font-size: 13px; text-align: center; }
    .total-price { display: block; font-size: 14px; text-align: center; }

    .cart-item-info h4 { font-size: 14px; }
    .cart-item-product img { width: 72px; height: 72px; }

    .cart-footer { flex-wrap: wrap; gap: 10px; }
    .cart-footer button { padding: 11px 20px; }
}


/* =====================================================
   SMALL LAPTOPS — 901px – 1024px
   ===================================================== */
@media (min-width: 901px) and (max-width: 1024px) {

    .container { padding: 24px 24px 60px; }

    .cart-header { grid-template-columns: 1fr 145px 95px 95px 40px; }
    .cart-item   { grid-template-columns: 1fr 145px 95px 95px 40px; }

    .cart-item-right { display: contents; }
    .cart-item-prices { display: contents; }
    .cart-item-right > .cart-item-info { display: none; }
    .cart-item-info--desktop { display: block; }

    .cart-item-right .cart-item-delete {
        position: static;
        display: flex;
        justify-content: center;
        align-items: center;
    }

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


/* =====================================================
   DESKTOP — 1025px+
   ===================================================== */
@media (min-width: 1025px) {

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

    .cart-item-right .cart-item-delete {
        position: static;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}