.cart-drawer { 
    position: fixed; 
    inset: 0; 
    z-index: 120; 
    visibility: hidden; 
    pointer-events: none; 
} 
 
.cart-drawer.is-open { 
    visibility: visible; 
    pointer-events: auto; 
} 
 
.drawer-overlay { 
    position: absolute; 
    inset: 0; 
    width: 100%; 
    height: 100%; 
    padding: 0; 
    border: 0; 
    background: rgba(5, 31, 49, 0.56); 
    opacity: 0; 
    transition: opacity 220ms ease; 
} 
 
.cart-drawer.is-open .drawer-overlay { 
    opacity: 1; 
} 
 
.drawer-panel { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: min(100%, 430px); 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    background: var(--surface); 
    box-shadow: -18px 0 60px rgba(9, 58, 90, 0.22); 
    transform: translateX(100%); 
    transition: transform 240ms ease; 
    outline: 0; 
} 
 
.cart-drawer.is-open .drawer-panel { 
    transform: translateX(0); 
} 
 
.drawer-header { 
    min-height: 76px; 
    padding: 16px 18px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 16px; 
    border-bottom: 1px solid var(--border); 
    background: linear-gradient(135deg, var(--navy-strong), var(--navy)); 
    color: #fff; 
} 
 
.drawer-heading { 
    min-width: 0; 
} 
 
.drawer-title { 
    margin: 0; 
    color: #fff; 
    font-size: 22px; 
    line-height: 1.2; 
} 
 
.drawer-close { 
    position: relative;
    width: 44px; 
    height: 44px; 
    flex: 0 0 auto; 
    padding: 0; 
    border: 1px solid rgba(255, 255, 255, 0.22); 
    border-radius: 14px; 
    background: rgba(255, 255, 255, 0.08); 
    color: #fff; 
} 
 
.drawer-close:hover { 
    background: rgba(255, 255, 255, 0.15); 
} 

.drawer-close span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
}

.drawer-close span:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
}

.drawer-close span:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}
 
.drawer-body { 
    min-height: 0; 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    overflow-y: auto; 
    background: var(--background); 
} 
 
.drawer-items { 
    padding: 16px; 
    display: grid; 
    gap: 12px; 
} 
 
.drawer-item { 
    display: grid; 
    grid-template-columns: 86px minmax(0, 1fr); 
    gap: 14px; 
    padding: 12px; 
    border: 1px solid var(--border); 
    border-radius: 18px; 
    background: var(--surface); 
    box-shadow: var(--shadow-small); 
} 
 
.drawer-image-wrap { 
    width: 86px; 
    height: 86px; 
    border-radius: 14px; 
    overflow: hidden; 
    background: var(--surface-blue); 
} 
 
.drawer-image-link, 
.drawer-image-link img { 
    width: 100%; 
    height: 100%; 
} 
 
.drawer-image-link img { 
    object-fit: cover; 
} 
 
.drawer-item-content { 
    min-width: 0; 
    display: grid; 
    gap: 10px; 
} 
 
.drawer-item-head { 
    display: flex; 
    align-items: flex-start; 
    justify-content: space-between; 
    gap: 10px; 
} 
 
.drawer-product-info { 
    min-width: 0; 
} 
 
.drawer-product-name { 
    margin: 0 0 4px; 
    color: var(--navy); 
    font-size: 15px; 
    line-height: 1.3; 
    font-weight: 800; 
} 
 
.drawer-product-meta { 
    color: var(--text-muted); 
    font-size: 13px; 
    line-height: 1.45; 
} 
 
.drawer-remove { 
    width: 34px; 
    height: 34px; 
    flex: 0 0 auto; 
    padding: 0; 
    border: 0; 
    border-radius: 10px; 
    background: var(--brand-pale); 
    color: var(--text-muted); 
    font-size: 20px; 
    line-height: 1; 
} 
 
.drawer-remove:hover { 
    background: var(--error-soft); 
    color: var(--error); 
} 
 
.drawer-item-bottom { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 10px; 
} 
 
.drawer-quantity, 
.drawer-quantity-static { 
    min-height: 38px; 
    display: inline-flex; 
    align-items: center; 
    border: 1px solid var(--border-strong); 
    border-radius: 999px; 
    background: var(--surface-blue); 
    overflow: hidden; 
} 
 
.drawer-quantity-static { 
    padding: 0 13px; 
    color: var(--text-muted); 
    font-size: 13px; 
    font-weight: 700; 
} 
 
.drawer-quantity-button { 
    width: 38px; 
    height: 38px; 
    padding: 0; 
    border: 0; 
    background: transparent; 
    color: var(--navy); 
    font-size: 19px; 
    font-weight: 800; 
} 
 
.drawer-quantity-button:hover { 
    background: var(--brand-soft); 
} 
 
.drawer-quantity-value { 
    min-width: 30px; 
    text-align: center; 
    color: var(--navy); 
    font-size: 14px; 
    font-weight: 800; 
} 
 
.drawer-price { 
    color: var(--navy); 
    font-size: 16px; 
    font-weight: 900; 
    white-space: nowrap; 
} 
 
.drawer-summary { 
    margin-top: auto; 
    padding: 18px; 
    border-top: 1px solid var(--border); 
    background: #fff; 
    box-shadow: 0 -14px 34px rgba(9, 58, 90, 0.06); 
} 
 
.drawer-subtotal { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 18px; 
    margin-bottom: 14px; 
} 
 
.drawer-subtotal-label { 
    color: var(--text-muted); 
    font-size: 15px; 
    font-weight: 700; 
} 
 
.drawer-subtotal-value { 
    color: var(--navy-strong); 
    font-size: 22px; 
    font-weight: 900; 
} 
 
.drawer-actions { 
    display: grid; 
    gap: 10px; 
} 
 
.drawer-checkout, 
.drawer-cart-link { 
    width: 100%; 
} 
 
.drawer-empty { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    padding: 46px 24px; 
    text-align: center; 
} 
 
.drawer-empty-icon { 
    width: 74px; 
    height: 74px; 
    display: grid; 
    place-items: center; 
    margin-bottom: 18px; 
    border-radius: 24px; 
    background: linear-gradient(135deg, var(--brand-soft), var(--accent-soft)); 
    color: var(--brand); 
} 
 
.drawer-empty-icon svg { 
    width: 34px; 
    height: 34px; 
} 
 
.drawer-empty-title { 
    margin-bottom: 8px; 
    font-size: 24px; 
} 
 
.drawer-empty-text { 
    max-width: 300px; 
    margin-bottom: 20px; 
    color: var(--text-muted); 
    font-size: 15px; 
} 
 
.cart-drawer.is-loading .drawer-body { 
    opacity: 0.6; 
    pointer-events: none; 
} 
 
@media (min-width: 768px) { 
    .drawer-header { 
        min-height: 84px; 
        padding-left: 22px; 
        padding-right: 22px; 
    } 
 
    .drawer-items { 
        padding: 20px; 
        gap: 14px; 
    } 
 
    .drawer-summary { 
        padding: 22px; 
    } 
} 
 
@media (min-width: 1280px) { 
    .drawer-panel { 
        width: 470px; 
    } 
}