.wc-drawer {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
    background: transparent;
    color: var(--sp-gray-900, #212121);
    font-family: var(--sp-font, 'Roboto', sans-serif);
}

.wc-drawer:not([open]) {
    display: none;
}

.wc-drawer[open] {
    display: block;
}

.wc-drawer::backdrop {
    background: rgba(27, 58, 75, 0.45);
}

.wc-drawer__panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: min(100vw, 28rem);
    height: 100vh;
    background: var(--sp-white, #fff);
    box-shadow: -4px 0 24px rgba(27, 58, 75, 0.18);
    outline: none;
}

@media (min-width: 768px) {
    .wc-drawer__panel {
        width: min(100vw, 26rem);
    }
}

@media (min-width: 992px) {
    .wc-drawer__panel {
        width: min(100vw, 28rem);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .wc-drawer[open] .wc-drawer__panel {
        animation: wc-drawer-slide-in 180ms ease-out;
    }
}

@keyframes wc-drawer-slide-in {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

.wc-drawer__chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex: 0 0 auto;
    padding: 0.85rem 1rem;
    background: linear-gradient(180deg, var(--sp-steel-100, #e8ecef) 0%, #dfe6ea 100%);
    border-bottom: 1px solid var(--sp-steel-300, #b0bec5);
}

.wc-drawer__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--sp-navy-700, #1b3a4b);
    outline: none;
}

.wc-drawer__close {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border: 0;
    background: transparent;
    color: var(--sp-navy-700, #1b3a4b);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.wc-drawer__close:hover,
.wc-drawer__close:focus-visible {
    background: rgba(27, 58, 75, 0.08);
}

.wc-drawer__close:disabled {
    color: var(--sp-gray-400, #bdbdbd);
    cursor: not-allowed;
}

.wc-drawer__body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 1rem 1.15rem;
}

.wc-drawer__footer {
    flex: 0 0 auto;
    padding: 0.85rem 1.15rem 1rem;
    border-top: 1px solid var(--sp-steel-200, #d1d9e0);
    background: var(--sp-white, #fff);
}

.library-basket-drawer__status {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.library-basket-drawer__status--error {
    color: var(--sp-red-700, #c62828);
}

.library-basket-drawer__empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.25rem 0;
}

.library-basket-drawer__empty-icon {
    font-size: 1.75rem;
    color: var(--sp-steel-400, #90a4ae);
}

.library-basket-drawer__count {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sp-gray-600, #757575);
}

.library-basket-drawer__table {
    width: 100%;
    border-collapse: collapse;
}

.library-basket-drawer__table th,
.library-basket-drawer__table td {
    padding: 0.5rem 0.35rem;
    border-bottom: 1px solid var(--sp-steel-200, #d1d9e0);
    text-align: left;
    vertical-align: middle;
}

.library-basket-drawer__line {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-width: 0;
}

.library-basket-drawer__thumb {
    position: relative;
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 3.25rem;
    border-radius: 2px;
    background: var(--sp-steel-100, #e8ecef);
    overflow: hidden;
}

.library-basket-drawer__thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%),
        var(--sp-steel-100, #e8ecef);
    pointer-events: none;
}

.library-basket-drawer__thumb-img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.library-basket-drawer__line-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1 1 auto;
}

.library-basket-drawer__title {
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--sp-navy-700, #1b3a4b);
    overflow-wrap: anywhere;
}

.library-basket-drawer__qty-slot {
    min-height: 0;
}

.library-basket-drawer__price-col,
.library-basket-drawer__actions-col {
    white-space: nowrap;
    width: 1%;
}

.library-basket-drawer__total {
    margin: 0;
    font-weight: 700;
    color: var(--sp-navy-700, #1b3a4b);
}

.library-basket-drawer__hint {
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
    color: var(--sp-gray-600, #757575);
}