/* ==========================================================================
   Added-to-cart sheet (E1). On every page, like the car dialog.
   A panel from the right on desktop, a bottom sheet on mobile.
   Markup: app/Views/partials/_cart_sheet.php + app/Views/cart/_sheet.php.
   Behaviour: assets/js/sp/cart.js.
   ========================================================================== */

.sp-sheet {
    position: fixed; inset: 0 0 0 auto; margin: 0;
    width: min(440px, 100%); height: 100dvh; max-width: none; max-height: none; padding: 0;
    border: 0; border-radius: var(--sp-r-xl) 0 0 var(--sp-r-xl);
    background: var(--sp-paper); color: var(--sp-ink); box-shadow: var(--sp-shadow-pop);
    overflow: hidden;
}
.sp-sheet::backdrop { background: var(--sp-scrim); backdrop-filter: blur(3px); }
.sp-sheet[open] { animation: sp-sheet-side var(--sp-open) var(--sp-ease); }
.sp-sheet[open]::backdrop { animation: sp-sheet-fade var(--sp-open) ease; }
body.sp:has(.sp-sheet[open]) { overflow: hidden; }

.sp-sheet-body { display: flex; flex-direction: column; gap: 20px; height: 100%; padding: 24px 28px 28px; overflow: auto; overscroll-behavior: contain; }
.sp-sheet-head { display: flex; align-items: center; gap: 12px; }
.sp-sheet-head h2 { flex: 1; display: flex; align-items: center; gap: 10px; font-size: var(--sp-fs-h3); font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
.sp-sheet-ok { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--sp-ok-bg); color: var(--sp-ok); }
.sp-sheet-ok svg { width: 17px; height: 17px; }

/* The added line */
.sp-added { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 16px; align-items: start; }
.sp-added-img { display: grid; place-items: center; aspect-ratio: 1; padding: 8px; border-radius: var(--sp-r-tile); background: var(--sp-surface); overflow: hidden; }
.sp-added-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.sp-added-img svg { width: 50%; height: 50%; color: var(--sp-ink-faint); }
.sp-added-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sp-added-name { font-size: var(--sp-fs-body); font-weight: 600; line-height: 1.3; color: var(--sp-ink); overflow-wrap: anywhere; }
body.sp .sp-added-name:hover { color: var(--sp-ink); text-decoration: underline; text-underline-offset: 3px; }
.sp-added-meta { font-size: var(--sp-fs-xs); color: var(--sp-ink-soft); font-variant-numeric: tabular-nums; }
.sp-added-line { margin-top: 4px; font-size: var(--sp-fs-ui); font-variant-numeric: tabular-nums; }

/* Cart total */
.sp-added-cart { display: grid; gap: 12px; padding: 16px; border-radius: var(--sp-r-ctl); background: var(--sp-surface); }
.sp-added-sum { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--sp-fs-ui); }
.sp-added-sum .sp-price { font-size: var(--sp-fs-lg); }

/* Two ways on: the cart, or back to where the shopper was */
.sp-sheet-actions { display: grid; gap: 10px; }
/* Icon at the left edge, text after it, a trailing arrow on the way forward */
.sp-sheet-btn { justify-content: flex-start; gap: 14px; padding: 8px 20px; text-align: left; white-space: normal; line-height: 1.25; }
.sp-sheet-btn svg { width: 20px; height: 20px; }
.sp-sheet-btn > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-sheet-btn small { font-size: var(--sp-fs-xs); font-weight: 400; color: var(--sp-ink-soft); overflow-wrap: anywhere; }
.sp-sheet-actions .sp-btn--outline { font-size: var(--sp-fs-body); }

@media (max-width: 700px) {
    .sp-sheet {
        inset: auto 0 0 0; width: 100%; height: auto; max-height: 92dvh;
        border-radius: var(--sp-r-xl) var(--sp-r-xl) 0 0;
    }
    .sp-sheet[open] { animation-name: sp-sheet-up; }
    .sp-sheet-body { height: auto; max-height: 92dvh; gap: 16px; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); }
    .sp-added { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
}

@keyframes sp-sheet-side { from { transform: translateX(100%); } }
@keyframes sp-sheet-up { from { transform: translateY(100%); } }
@keyframes sp-sheet-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .sp-sheet[open], .sp-sheet[open]::backdrop { animation: none; }
}