/* ── Başlık ── */
.spt-head {
    max-width: var(--bb-container);
    margin-inline: auto;
    padding: 0 var(--bb-pad-x)
}

.spt-head h1 {
    font-family: var(--bb-font-display);
    font-size: var(--bb-display-m);
    line-height: var(--bb-lh-tight);
    letter-spacing: var(--bb-ls-display);
    color: var(--bb-cacao-700)
}

.spt-head__sub {
    font-size: var(--bb-text-m);
    color: var(--bb-on-light-dim);
    margin-top: var(--bb-2);
    max-width: 54ch
}

/* ── İki kolon yerleşim ── */
.spt-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, .9fr);
    gap: var(--bb-6);
    align-items: start
}

/* ── Sol: satırlar ── */
.spt-lines {
    display: flex;
    flex-direction: column
}

.spt-count {
    font-size: var(--bb-text-s);
    color: var(--bb-on-light-dim);
    font-weight: 600;
    margin-bottom: var(--bb-4);
    padding-bottom: var(--bb-3);
    border-bottom: 1px solid var(--bb-border)
}

.spt-line {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    gap: var(--bb-5);
    align-items: center;
    padding: var(--bb-4) 0;
    border-bottom: 1px solid var(--bb-border)
}

.spt-line__media {
    width: 88px;
    height: 88px;
    border-radius: var(--bb-r-md);
    background: var(--bb-surface-2);
    display: grid;
    place-items: center;
    overflow: hidden
}

.spt-line__media img {
    width: 82%;
    height: 82%;
    object-fit: contain
}

.spt-line__info {
    min-width: 0
}

.spt-line__title {
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-l);
    font-weight: 700;
    color: var(--bb-cacao-700);
    line-height: 1.15;
    overflow-wrap: anywhere;
    word-break: break-word
}

.spt-line__meta {
    font-size: var(--bb-text-xs);
    color: var(--bb-on-light-dim);
    margin-top: var(--bb-1);
    overflow-wrap: anywhere
}

.spt-line__unit {
    font-size: var(--bb-text-xs);
    color: var(--bb-on-light-dim);
    margin-top: 4px
}

.spt-line__rm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--bb-3);
    font-size: var(--bb-text-xs);
    font-weight: 600;
    color: var(--bb-on-light-dim);
    transition: color var(--bb-dur-fast) var(--bb-ease-standard)
}

.spt-line__rm:hover {
    color: var(--bb-error)
}

.spt-line__rm:active {
    transform: scale(.97)
}

.spt-line__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--bb-3);
    text-align: right
}

.spt-line__price {
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-xl);
    font-weight: 700;
    color: var(--bb-cacao-700);
    line-height: 1;
    white-space: nowrap
}

/* Adet kontrolü */
.spt-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-r-pill)
}

.spt-qty button {
    width: 34px;
    height: 34px;
    border-radius: var(--bb-r-pill);
    background: transparent;
    font-weight: 700;
    font-size: 18px;
    color: var(--bb-cacao-700);
    display: grid;
    place-items: center;
    transition: background var(--bb-dur-fast) var(--bb-ease-standard), color var(--bb-dur-fast) var(--bb-ease-standard)
}

.spt-qty button:hover {
    background: var(--bb-surface-2)
}

.spt-qty button:active {
    background: var(--bb-teal-500);
    color: #fff
}

.spt-qty button:disabled {
    opacity: .3;
    pointer-events: none
}

.spt-qty .num {
    min-width: 30px;
    text-align: center;
    font-weight: 700;
    font-size: var(--bb-text-m);
    color: var(--bb-cacao-700)
}

/* ── Sağ: özet ── */
.spt-summary {
    position: sticky;
    top: 100px;
    background: var(--bb-surface-raised);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-r-lg);
    padding: var(--bb-6);
    box-shadow: var(--bb-e1)
}

.spt-summary h3 {
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-xl);
    letter-spacing: .01em;
    color: var(--bb-cacao-700);
    margin-bottom: var(--bb-4)
}

.spt-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--bb-3);
    padding: var(--bb-2) 0;
    font-size: var(--bb-text-m);
    color: var(--bb-ink-700)
}

.spt-row span:last-child {
    font-weight: 600;
    color: var(--bb-cacao-700)
}

.spt-row--free span:last-child {
    color: var(--bb-success)
}

.spt-row.spt-total {
    border-top: 1px solid var(--bb-border);
    margin-top: var(--bb-3);
    padding: var(--bb-4) 0 0
}

.spt-row.spt-total .lbl {
    font-weight: 700;
    font-size: var(--bb-text-l);
    color: var(--bb-cacao-700)
}

.spt-row.spt-total .val {
    font-family: var(--bb-font-display);
    font-size: var(--bb-display-s);
    color: var(--bb-cacao-700)
}

.spt-ship-hint {
    font-size: var(--bb-text-xs);
    color: var(--bb-on-light-dim);
    margin: var(--bb-3) 0 var(--bb-4);
    line-height: var(--bb-lh-snug)
}

.spt-ship-hint b {
    color: var(--bb-cacao-700)
}

.spt-ship-bar {
    height: 4px;
    border-radius: var(--bb-r-pill);
    background: var(--bb-ink-100);
    overflow: hidden;
    margin-top: var(--bb-2)
}

.spt-ship-bar i {
    display: block;
    height: 100%;
    border-radius: var(--bb-r-pill);
    background: var(--bb-teal-500);
    width: 0;
    transition: width var(--bb-dur-slow) var(--bb-ease-standard)
}

.spt-row--save {
    color: var(--bb-teal-700, #0f766e);
    font-weight: 700;
}
.spt-kupon {
    margin: var(--bb-4) 0;
    padding: 14px;
    border-radius: 14px;
    background: linear-gradient(120deg, rgba(63,180,180,.08), rgba(201,162,75,.08));
    border: 1px solid rgba(201,162,75,.28);
}
.spt-kupon__lbl {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bb-cacao-700);
}
.spt-kupon__row {
    display: flex;
    gap: 8px;
}
.spt-kupon__row .bb-input {
    flex: 1;
    min-width: 0;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
}
.spt-kupon__hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--bb-on-light-dim);
}
.spt-kupon__hint.ok {
    color: var(--bb-teal-700, #0f766e);
    font-weight: 700;
}
.spt-kupon__hint.no {
    color: #b45309;
    font-weight: 700;
}

.spt-summary__cta {
    margin-top: var(--bb-4)
}

.spt-trust {
    display: flex;
    flex-direction: column;
    gap: var(--bb-2);
    margin-top: var(--bb-5);
    padding-top: var(--bb-4);
    border-top: 1px solid var(--bb-border)
}

.spt-trust span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--bb-text-xs);
    color: var(--bb-on-light-dim)
}

.spt-trust span .ic {
    color: var(--bb-teal-600);
    font-size: 13px
}

.spt-summary__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bb-3);
    margin-top: var(--bb-4);
    flex-wrap: wrap
}

.spt-continue {
    font-size: var(--bb-text-s);
    font-weight: 600;
    color: var(--bb-cacao-600)
}

.spt-continue:hover {
    color: var(--bb-teal-700)
}

.spt-clear {
    font-size: var(--bb-text-xs);
    font-weight: 600;
    color: var(--bb-on-light-dim);
    background: transparent;
    transition: color var(--bb-dur-fast) var(--bb-ease-standard)
}

.spt-clear:hover {
    color: var(--bb-error)
}

/* ── Boş durum ── */
.spt-empty {
    text-align: center;
    max-width: 480px;
    margin-inline: auto;
    padding: var(--bb-7) var(--bb-4)
}

.spt-empty .em {
    width: 88px;
    height: 88px;
    border-radius: var(--bb-r-pill);
    margin: 0 auto var(--bb-5);
    display: grid;
    place-items: center;
    font-size: 42px;
    background: var(--bb-surface-2)
}

.spt-empty h2 {
    font-family: var(--bb-font-display);
    font-size: var(--bb-display-s);
    color: var(--bb-cacao-700);
    margin-bottom: var(--bb-3)
}

.spt-empty p {
    color: var(--bb-on-light-dim);
    font-size: var(--bb-text-m);
    margin-bottom: var(--bb-5)
}

/* ── Öneriler ── */
.spt-reco {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--bb-5)
}

/* Güvence bandı */
.spt-feats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--bb-5)
}

@media (max-width:980px) {
    .spt-grid {
        grid-template-columns: 1fr;
        gap: var(--bb-5)
    }

    .spt-summary {
        position: static;
        top: auto
    }

    .spt-reco {
        grid-template-columns: repeat(2, 1fr)
    }

    .spt-feats {
        grid-template-columns: 1fr;
        gap: var(--bb-4)
    }
}

@media (max-width:560px) {
    .spt-line {
        grid-template-columns: 64px 1fr;
        gap: var(--bb-3);
        row-gap: var(--bb-4)
    }

    .spt-line__media {
        width: 64px;
        height: 64px
    }

    .spt-line__right {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: left
    }

    .spt-reco {
        grid-template-columns: 1fr
    }

    .spt-line__rm {
        padding-block: 6px;
        min-height: 32px
    }

    .spt-qty button {
        width: 44px;
        height: 44px;
        font-size: 20px
    }

    .spt-qty .num {
        min-width: 40px
    }
}

@media (max-width:480px) {
    .spt-summary {
        padding: var(--bb-5)
    }

    .spt-summary__foot {
        flex-direction: column;
        align-items: stretch;
        gap: var(--bb-3)
    }

    .spt-summary__foot .spt-continue {
        text-align: center
    }

    .spt-clear {
        width: 100%;
        text-align: center
    }
}