/* =========================================================
   CART
   ========================================================= */
.cart-page [hidden],
.promo [hidden] { display: none !important; }

.cart-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px 64px;
}

/* Title */
.cart-title {
    display: flex; align-items: center; gap: 12px;
    margin: 12px 0 24px;
    font-size: 32px; font-weight: 800; letter-spacing: -.01em; color: var(--text);
}
.cart-title__count {
    min-width: 30px; height: 26px; padding: 0 10px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface); border: 1px solid var(--border);
    font-size: 13px; font-weight: 700; color: var(--text-secondary);
}
.cart-title__count:empty { display: none; }

/* Layout */
.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 40px;
    align-items: start;
}
.cart-main { min-width: 0; }

.cart-page.is-empty .cart-layout,
.cart-page.is-empty .cart-mobilebar { display: none; }

/* Free delivery progress */
.cart-freeship {
    margin-bottom: 8px; padding: 12px 16px;
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
}
.cart-freeship__text { margin-bottom: 8px; font-size: 13.5px; color: var(--text); }
.cart-freeship__text strong { font-weight: 700; }
.cart-freeship__bar {
    height: 6px; overflow: hidden; border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.cart-freeship__bar span {
    display: block; width: 0; height: 100%; border-radius: inherit;
    background: var(--accent); transition: width .3s ease;
}
.cart-freeship.is-done .cart-freeship__text { margin: 0; color: var(--success); font-weight: 600; }
.cart-freeship.is-done .cart-freeship__bar { display: none; }

/* Items */
.cart-items { display: flex; flex-direction: column; }

.cart-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 18px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
}
.cart-row:first-child { padding-top: 8px; }

.cart-row__image {
    width: 96px; height: 112px; padding: 8px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: 12px; background: var(--image-bg);
}
.cart-row__image img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

.cart-row__body { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-width: 0; }
.cart-row__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cart-row__info { min-width: 0; }

.cart-row__name { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; }
.cart-row__name a { color: inherit; text-decoration: none; }
.cart-row__name a:hover { text-decoration: underline; text-underline-offset: 3px; }

.cart-row__meta { display: flex; flex-wrap: wrap; margin-top: 4px; font-size: 13px; color: var(--text-secondary); }
.cart-row__meta > * + *::before { content: "·"; margin: 0 6px; opacity: .6; }
.cart-row__brand { color: var(--text); font-weight: 500; }

.cart-row__price { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cart-row__total { font-size: 17px; font-weight: 700; color: var(--text); }
.cart-row__unit { margin-top: 2px; font-size: 12px; color: var(--text-secondary); }

.cart-row__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Quantity */
.cart-qty {
    display: inline-flex; align-items: center; height: 38px;
    border: 1px solid var(--border); border-radius: 999px;
}
.cart-qty button {
    width: 38px; height: 100%; border: 0; border-radius: 999px; background: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: var(--text); cursor: pointer; transition: background .15s;
}
.cart-qty button:hover:not(:disabled) { background: var(--surface); }
.cart-qty button:disabled { opacity: .3; cursor: default; }
.cart-qty button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cart-qty span { min-width: 24px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Remove */
.cart-remove {
    display: inline-flex; align-items: center; gap: 6px;
    margin-right: -8px; padding: 6px 8px; border: 0; border-radius: 8px; background: none;
    font-size: 13px; color: var(--text-secondary); cursor: pointer;
    transition: color .15s, background .15s;
}
.cart-remove:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); }

/* Installment hint — cart-da altda boşluq */
.cart-page .cart-installment { margin-bottom: 15px; }

/* Empty */
.cart-empty { display: none; }
.cart-page.is-empty .cart-empty {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 64px 16px; text-align: center;
}
.cart-empty__icon {
    width: 72px; height: 72px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface); color: var(--text-secondary);
}
.cart-empty p { margin: 0; font-size: 16px; color: var(--text-secondary); }
.cart-empty__link { width: auto; margin-top: 8px; padding: 0 28px; }

/* Toast */
.cart-toast {
    position: fixed; left: 50%; bottom: 24px; z-index: 1000;
    display: flex; align-items: center; gap: 16px;
    padding: 12px 16px; border-radius: 12px;
    background: var(--text); color: var(--bg); font-size: 14px;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .35);
    opacity: 0; pointer-events: none; transform: translate(-50%, 20px);
    transition: opacity .2s, transform .2s;
}
.cart-toast.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.cart-toast button {
    padding: 0; border: 0; background: none; cursor: pointer;
    font-size: 14px; font-weight: 700; color: inherit;
    text-decoration: underline; text-underline-offset: 3px;
}

/* Mobile bar */
.cart-mobilebar { display: none; }
.cart-mobilebar__total span { display: block; font-size: 12px; color: var(--text-secondary); white-space: nowrap;}
.cart-mobilebar__total strong { font-size: 18px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.cart-mobilebar .btn { flex: 1; max-width: 260px; margin: 0; padding: 0 24px; }

@media (max-width: 900px) {
    .cart-layout { grid-template-columns: 1fr; gap: 24px; }
    .cart-summary { position: static; }
    .cart-page { padding-bottom: 110px; }

    .cart-mobilebar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
        display: flex; align-items: center; justify-content: space-between; gap: 16px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: var(--bg); border-top: 1px solid var(--border);
        box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .15);
        transition: transform .2s;
    }
    .cart-mobilebar.is-hidden { transform: translateY(100%); }
    .cart-toast { bottom: 96px; }
}

@media (max-width: 600px) {
    .cart-title { margin-bottom: 16px; font-size: 26px; }
    .cart-row { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 16px 0; }
    .cart-row__image { width: 76px; height: 92px; padding: 6px; }
    .cart-row__head { flex-direction: column; gap: 6px; }
    .cart-row__price { display: flex; align-items: baseline; gap: 8px; text-align: left; }
    .cart-row__name { font-size: 15px; }
    .cart-remove span { display: none; }
    .cart-summary { padding: 20px 16px; }
}


/* =========================================================
   CART SKELETON
   ========================================================= */
.cart-page .sk,
.cart-row--skeleton .cart-row__image {
    border-radius: 6px;
    background: linear-gradient(90deg,
    var(--surface) 0%,
    color-mix(in srgb, var(--border) 70%, var(--surface)) 50%,
    var(--surface) 100%);
    background-size: 200% 100%;
    animation: cart-sk 1.2s ease-in-out infinite;
}
@keyframes cart-sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Skelet sətir: real sətirlə eyni ölçü */
.cart-row--skeleton .cart-row__image { border-color: transparent; border-radius: 12px; }
.cart-row--skeleton .cart-row__info { flex: 1; min-width: 0; }
.cart-row--skeleton .sk--line { height: 16px; margin-bottom: 8px; }
.cart-row--skeleton .sk--sm { height: 12px; }
.cart-row--skeleton .sk--pill { width: 112px; height: 38px; border-radius: 999px; }

/* Xülasədə yer tutan bloklar — yalnız yüklənərkən */
.cart-summary__sk { display: none; }
.cart-page.is-loading .cart-summary__sk { display: block; }
.cart-summary__sk--installment { height: 76px; margin-top: 14px; border-radius: 10px; }
.cart-summary__sk--bonus { width: 70%; height: 18px; margin: 14px auto 0; }

/* Xülasədəki rəqəmlər */
.cart-page.is-loading .cart-summary__row strong,
.cart-page.is-loading .cart-summary__total strong,
.cart-page.is-loading #cartItemsLabel {
    display: inline-block; min-width: 64px;
    color: transparent; border-radius: 6px;
    background: var(--border); opacity: .6;
}
.cart-page.is-loading .cart-summary__total strong { min-width: 110px; height: 30px; }

@media (prefers-reduced-motion: reduce) {
    .cart-page .sk,
    .cart-row--skeleton .cart-row__image { animation: none; }
}

/* =========================================================
   CART PAGE
   ========================================================= */
@media (max-width: 600px) {
    .cart-page { padding-top: 12px; }
    .cart-title { margin: 8px 0 12px; font-size: 24px; }

    /* Sətir: şəkil solda, sağda 3 cərgə
       [ad ............ 🗑]
       [brend · ölçü     ]
       [− 1 +     233.00 ₼] */
    .cart-row:not(.cart-row--skeleton) {
        grid-template-columns: 72px minmax(0, 1fr) auto;
        grid-template-areas:
            "img name remove"
            "img meta meta"
            "img qty  price";
        column-gap: 12px;
        row-gap: 2px;
        align-items: start;
        padding: 14px 0;
    }
    .cart-row:not(.cart-row--skeleton) :is(.cart-row__body, .cart-row__head, .cart-row__info, .cart-row__actions) {
        display: contents;
    }

    .cart-row .cart-row__image {
        grid-area: img;
        width: 72px; height: 88px; padding: 6px; border-radius: 10px;
    }

    .cart-row__name {
        grid-area: name;
        font-size: 14.5px; line-height: 1.3;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }

    /* Mobildə yalnız brend və ölçü; cins və tip gizli */
    .cart-row__meta { grid-area: meta; margin-top: 2px; font-size: 12.5px; }
    .cart-row__meta > span:not(.cart-row__brand):not(:last-child) { display: none; }

    .cart-row .cart-remove {
        grid-area: remove;
        width: 32px; height: 32px; padding: 0; margin: -6px -6px 0 0;
        justify-content: center;
    }
    .cart-remove span { display: none; }

    .cart-row .cart-qty {
        grid-area: qty;
        justify-self: start; align-self: center;
        height: 34px; margin-top: 10px;
    }
    .cart-qty button { width: 34px; }

    .cart-row .cart-row__price {
        grid-area: price;
        align-self: center; margin-top: 10px;
        display: block; text-align: right;
    }
    .cart-row__total { font-size: 15px; }
    .cart-row__unit { font-size: 11.5px; }

    /* Skelet sətir */
    .cart-row--skeleton { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 14px 0; }
    .cart-row--skeleton .cart-row__image { width: 72px; height: 88px; }

    /* Xülasə */
    .cart-summary { padding: 16px; }
    .cart-summary__title { margin-bottom: 12px; font-size: 16px; }
    .cart-summary__total strong { font-size: 22px; }
    .cart-installment { font-size: 12.5px; }
}