.cart-drawer { position: fixed; inset: 0; z-index: 200; }
.cart-drawer[hidden] { display: none; }
body.admin-bar .cart-drawer { top: 32px; }
@media (max-width: 782px) {
body.admin-bar .cart-drawer { top: 46px; }
}
.cart-drawer__overlay {
position: absolute; inset: 0;
background: rgba(15, 14, 12, .55);
opacity: 0;
transition: opacity .25s var(--ease);
}
.cart-drawer.is-open .cart-drawer__overlay { opacity: 1; }
.cart-drawer__panel {
position: absolute; top: 0; right: 0; bottom: 0;
width: min(420px, 100%);
background: var(--paper);
box-shadow: -20px 0 50px -20px rgba(0, 0, 0, .5);
display: flex; flex-direction: column;
transform: translateX(100%);
transition: transform .3s var(--ease);
}
.cart-drawer.is-open .cart-drawer__panel { transform: translateX(0); }
.cart-drawer__head {
flex: none;
display: flex; align-items: center; justify-content: space-between;
padding: 20px 22px;
border-bottom: 1px solid var(--line);
}
.cart-drawer__title {
font-family: var(--font-head); font-weight: 800; text-transform: uppercase;
letter-spacing: .03em; font-size: 1rem; color: var(--text-primary);
}
.cart-drawer__close {
flex: none;
width: var(--ctl-icon); height: var(--ctl-icon);
border: 1px solid transparent; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
padding: 0; background: var(--panel-hi); color: var(--text-primary);
cursor: pointer;
transition: background .18s, color .18s, border-color .18s, transform .18s var(--ease);
}
.cart-drawer__close:hover {
background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.cart-drawer__close:active { transform: scale(.92); }
.cart-drawer__close:focus-visible { outline: none; box-shadow: var(--ring); }
.cart-drawer__close .icon { width: 16px; height: 16px; }
.cart-drawer__body {
flex: 1; min-height: 0;
display: flex; flex-direction: column;
}
.cart-drawer__scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px; }
.cart-drawer__empty {
height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; gap: 16px; padding: 20px;
}
.cart-drawer__empty-icon {
width: 64px; height: 64px; border-radius: 50%;
background: var(--paper-2); border: 1px solid var(--line);
display: flex; align-items: center; justify-content: center;
}
.cart-drawer__empty-icon .icon { width: 26px; height: 26px; color: var(--accent); }
.cart-drawer__empty p { color: var(--muted); margin: 0; }
.cart-drawer__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cart-drawer__item {
position: relative;
display: flex; gap: 14px;
padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.cart-drawer__item:last-child { border-bottom: none; }
.cart-drawer__item-media {
flex: none;
width: 64px; height: 64px;
overflow: hidden;
border-radius: var(--radius-sm);
box-shadow: var(--lift);
}
.cart-drawer__item-media a { display: block; width: 100%; height: 100%; }
.cart-drawer__item-media img {
width: 100%; height: 100%;
aspect-ratio: 1 / 1; object-fit: cover;
border-radius: 0;
background: var(--panel-deep) center 78% / cover no-repeat url(../img/prod-bg.webp);
}
.cart-drawer__item-body { flex: 1; min-width: 0; }
.cart-drawer__item-name {
margin: 0 0 2px; font-family: var(--font-head); font-weight: 700; font-size: .92rem;
color: var(--text-primary); line-height: 1.3;
}
.cart-drawer__item-name a:hover { color: var(--accent); }
.cart-drawer__item-size { margin: 0; font-size: .78rem; color: var(--muted); }
.cart-drawer__item-foot {
margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.cart-drawer__qty { padding: 2px; }
.cart-drawer__qty .product-qty-btn { width: 30px; height: 30px; font-size: 1rem; }
.cart-drawer__qty .product-qty-btn:disabled { color: var(--text-faint); cursor: not-allowed; background: transparent; }
.cart-drawer__qty-val {
min-width: 26px; text-align: center;
font-family: var(--font-head); font-weight: 700; font-size: .92rem; color: var(--text-primary);
}
.cart-drawer__qty.is-loading { opacity: .55; pointer-events: none; }
.cart-drawer__item-max { margin: 6px 0 0; font-size: .74rem; color: var(--gold); }
.cart-drawer__item-price { font-family: var(--font-head); font-weight: 800; font-size: .92rem; color: var(--text-primary); }
.cart-drawer__item-rimuovi {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 10px; padding: 4px 0;
font-family: var(--font-head); font-weight: 700; font-size: .74rem;
text-transform: uppercase; letter-spacing: .06em;
color: var(--muted); text-decoration: none;
transition: color .15s;
}
.cart-drawer__item-rimuovi .icon { width: 12px; height: 12px; }
.cart-drawer__item-rimuovi:hover,
.cart-drawer__item-rimuovi:focus-visible { color: var(--accent-text); }
.cart-drawer__item-rimuovi:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; }
.cart-drawer__body.updating { opacity: .5; pointer-events: none; }
.cart-drawer__foot {
flex: none;
padding: 18px 22px 22px;
border-top: 1px solid var(--line);
display: flex; flex-direction: column; gap: 12px;
}
.cart-drawer__subtotal {
display: flex; justify-content: space-between; align-items: baseline;
font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; color: var(--text-primary);
}
.cart-drawer__view,
.cart-drawer__checkout { display: flex; width: 100%; }
@media (max-width: 480px) {
.cart-drawer__panel { width: 100%; }
}