/* Side cart (slide-in panel). Every class starts with jsc- so nothing clashes with main.css. */

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/dmsans/dmsans-latin.woff2') format('woff2');
}

html.jsc-lock { overflow: hidden; }

.jsc {
    --jsc-ink: #15171c;
    --jsc-muted: #5a5f6b;
    --jsc-line: #e7e9ee;
    --jsc-field: #f3f4f7;
    --jsc-accent: #d3122a;
    position: fixed;
    inset: 0;
    z-index: 100000;
    font-family: 'DM Sans', 'Poppins', sans-serif;
    color: var(--jsc-ink);
    -webkit-font-smoothing: antialiased;
}

.jsc[hidden] { display: none; }

.jsc *,
.jsc *::before,
.jsc *::after { box-sizing: border-box; }

.jsc-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 12, 16, .5);
    opacity: 0;
    cursor: pointer;
    transition: opacity .3s ease;
}

.jsc-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 480px;
    max-width: calc(100% - 32px);
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 28px;
    background: #fff;
    box-shadow: -24px 0 48px rgba(10, 12, 16, .12);
    transform: translateX(100%);
    transition: transform .38s cubic-bezier(.22, .8, .3, 1);
    outline: none;
}

.jsc.is-open .jsc-overlay { opacity: 1; }
.jsc.is-open .jsc-panel { transform: none; }

/* Header */
.jsc-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 84px;
    border-bottom: 1px solid var(--jsc-line);
}

.jsc-head-title { display: flex; align-items: center; gap: 10px; }

.jsc-title { font-size: 20px; font-weight: 600; line-height: 1; }

.jsc-badge {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--jsc-ink);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

/* Close: an X that turns into a minus on hover */
.jsc-close {
    position: relative;
    flex: none;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background-color .3s ease;
}

.jsc-close::before,
.jsc-close::after {
    content: "";
    position: absolute;
    left: 9px;
    right: 9px;
    top: 50%;
    height: 1.3px;
    margin-top: -.65px;
    background: var(--jsc-ink);
    transition: transform .3s ease;
}

.jsc-close::before { transform: rotate(45deg); }
.jsc-close::after { transform: rotate(-45deg); }
.jsc-close:hover { background: rgba(21, 23, 28, .05); }
.jsc-close:hover::before,
.jsc-close:hover::after { transform: rotate(0deg); }
.jsc-close:focus { outline: none; }
.jsc-close:focus-visible { outline: 2px solid var(--jsc-ink); outline-offset: 2px; }

/* Items */
.jsc-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 24px 0;
}

.jsc-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.jsc-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    transition: opacity .2s ease;
}

.jsc-item.is-busy { opacity: .5; pointer-events: none; }

.jsc-thumb {
    flex: none;
    width: 88px;
    height: 88px;
    border-radius: 12px;
    background: var(--jsc-field);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.jsc-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.jsc-info { flex: 1; min-width: 0; }

.jsc .jsc-name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--jsc-ink);
    text-decoration: none;
}

.jsc .jsc-name:hover { color: var(--jsc-ink); text-decoration: underline; }

.jsc-meta { margin-top: 2px; font-size: 13px; color: var(--jsc-muted); }

.jsc-price { margin-top: 4px; font-size: 14px; color: var(--jsc-muted); }

.jsc-controls {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.jsc-qty {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid #e3e6eb;
    border-radius: 10px;
    overflow: hidden;
}

.jsc-qty button {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    font: 500 18px 'DM Sans', 'Poppins', sans-serif;
    line-height: 1;
    color: var(--jsc-ink);
    cursor: pointer;
}

.jsc-qty button:hover { background: var(--jsc-field); }
.jsc-qty button:disabled { color: #b5b9c2; cursor: default; background: transparent; }

.jsc-qty-val { min-width: 32px; text-align: center; font-size: 14px; font-weight: 600; }

.jsc-remove {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    color: var(--jsc-muted);
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}

.jsc-remove:hover { color: var(--jsc-ink); }

/* Empty, loading and error states */
.jsc-state {
    height: 100%;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    color: var(--jsc-muted);
    font-size: 15px;
}

.jsc-state-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--jsc-field);
    display: flex;
    align-items: center;
    justify-content: center;
}

.jsc-state-title { font-size: 18px; font-weight: 700; color: var(--jsc-ink); }

.jsc .jsc-shop {
    margin-top: 8px;
    height: 52px;
    padding: 0 32px;
    border-radius: 14px;
    background: var(--jsc-accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
    text-decoration: none;
}

.jsc .jsc-shop:hover { color: #fff; }

.jsc-error {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #fde8ea;
    color: #9b0f20;
    font-size: 13px;
}

.jsc-spinner {
    width: 28px;
    height: 28px;
    border: 2.5px solid #e3e6eb;
    border-top-color: var(--jsc-ink);
    border-radius: 50%;
    animation: jscSpin .8s linear infinite;
}

@keyframes jscSpin { to { transform: rotate(360deg); } }

/* Footer */
.jsc-foot {
    flex: none;
    border-top: 1px solid var(--jsc-line);
    padding: 20px 0 26px;
}

.jsc-foot[hidden] { display: none; }

.jsc-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--jsc-muted);
}

.jsc-row[hidden] { display: none; }

.jsc-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 17px;
    font-weight: 700;
}

.jsc-total strong { font-size: 18px; font-weight: 800; }

.jsc-taxnote { margin: 6px 0 0; font-size: 13px; color: var(--jsc-muted); }

.jsc .jsc-checkout {
    margin-top: 18px;
    height: 60px;
    border-radius: 14px;
    background: var(--jsc-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .12em;
    text-decoration: none;
    transition: transform .2s ease;
}

.jsc .jsc-checkout:hover { color: #fff; transform: translateY(-2px); }

.jsc-viewcart-wrap { margin-top: 8px; text-align: center; }

.jsc .jsc-viewcart {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    color: var(--jsc-ink);
    text-decoration: underline;
    text-underline-offset: 6px;
}

.jsc .jsc-viewcart:hover { color: #000; }

.jsc a:focus-visible,
.jsc button:focus-visible { outline: 2px solid var(--jsc-ink); outline-offset: 2px; }

/* Add to Cart button while the item is being added */
.jsc-adding { opacity: .6; pointer-events: none; }

@media (max-width: 576px) {
    .jsc-panel { padding: 0 20px; }
    .jsc-head { height: 72px; }
    .jsc-close { width: 44px; height: 44px; }
    .jsc-close::before,
    .jsc-close::after { left: 12px; right: 12px; }
    .jsc-thumb { width: 76px; height: 76px; }
    .jsc-qty button { width: 40px; height: 40px; }
    .jsc-foot { padding: 16px 0 22px; }
    .jsc .jsc-checkout { height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
    .jsc-overlay,
    .jsc-panel,
    .jsc-close,
    .jsc-close::before,
    .jsc-close::after,
    .jsc-item,
    .jsc .jsc-checkout { transition: none; }
    .jsc-spinner { animation-duration: 2s; }
}