/* Club Confidant — mini cart drawer (lane F).
   Compositor whitelist only: transform + opacity. Backdrop blur allowed on the veil.
   Palette: var(--cc-ink-accent, #B4473C) for interactive TEXT; #66CAC8 decorative only. */

.m-drawer{
  position:fixed;inset:0;z-index:90;
}
.m-drawer[hidden]{display:none}

.m-drawer .drawer-veil{
  position:absolute;inset:0;
  background:rgba(0,0,0,.45);
  opacity:0;
}
.m-drawer.is-open .drawer-veil{opacity:1}

.m-drawer .drawer-panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(420px,92vw);
  background:var(--cc-white,#fff);
  display:flex;flex-direction:column;
  box-shadow:-6px 0 24px rgba(0,0,0,.18);
  transform:translateX(100%);
}
.m-drawer.is-open .drawer-panel{transform:translateX(0)}

@media (prefers-reduced-motion: no-preference){
  .m-drawer .drawer-veil{
    transition:opacity 300ms var(--e-out,cubic-bezier(.22,.61,.36,1));
  }
  .m-drawer .drawer-panel{
    transition:transform 300ms var(--e-out,cubic-bezier(.22,.61,.36,1));
  }
}

@media (prefers-reduced-motion: reduce){
  .m-drawer .drawer-veil,
  .m-drawer .drawer-panel{
    transition-duration:.01ms !important;
  }
}

/* ---------- head ---------- */
.drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--cc-line,#E6E6E6);
  flex:0 0 auto;
}
.drawer-head h2{margin:0;font-size:17px;font-weight:700}
.drawer-close{
  width:44px;height:44px;min-width:44px;min-height:44px;
  border:0;background:none;cursor:pointer;
  font-size:24px;line-height:1;color:var(--cc-text,#333);
  display:flex;align-items:center;justify-content:center;
}
.drawer-close:hover{color:var(--cc-ink-accent,#B4473C)}

/* ---------- items ---------- */
.drawer-items{
  list-style:none;margin:0;padding:0;
  flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.drawer-items[hidden]{display:none}

.drawer-item{
  display:grid;
  grid-template-columns:56px minmax(0,1fr) auto;
  gap:10px;align-items:start;
  padding:12px 16px;border-bottom:1px solid var(--cc-line,#E6E6E6);
}
.drawer-item.is-busy{opacity:.55}

.drawer-item-thumb{width:56px;height:56px;flex:0 0 auto;background:var(--cc-bg,#F6F6F6)}
.drawer-item-thumb img{width:56px;height:56px;object-fit:contain;display:block}

.drawer-item-info{min-width:0}
.drawer-item-title{
  margin:0 0 6px;font-size:13px;font-weight:700;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.qty-stepper{display:inline-flex;align-items:center;border:1px solid var(--cc-line,#E6E6E6)}
.qty-btn{
  width:44px;height:44px;border:0;background:var(--cc-tint,#FBEFE9);
  color:var(--cc-ink-accent,#B4473C);font-size:18px;line-height:1;
  font-family:inherit;cursor:pointer;
}
.qty-btn:hover{background:var(--cc-ink-accent,#B4473C);color:#fff}
.qty-btn:disabled{opacity:.4;cursor:not-allowed}
.qty-value{
  min-width:3ch;height:44px;display:flex;align-items:center;justify-content:center;
  font-size:14px;text-align:center;
}

.drawer-item-side{
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
}
.drawer-item-price{
  font-size:14px;font-weight:700;color:var(--cc-ink-accent,#B4473C);
  text-align:right;white-space:nowrap;
}
.drawer-item-remove{
  width:44px;height:44px;min-width:44px;border:0;background:none;cursor:pointer;
  font-size:18px;line-height:1;color:var(--cc-muted,#B3B3B3);
}
.drawer-item-remove:hover{color:var(--cc-sale,#D0021B)}
.drawer-item-remove:disabled{opacity:.4;cursor:not-allowed}

.drawer-empty{
  margin:0;padding:36px 16px;text-align:center;color:var(--cc-muted,#B3B3B3);
  flex:1 1 auto;
}
.drawer-empty[hidden]{display:none}

/* ---------- foot ---------- */
.drawer-foot{
  flex:0 0 auto;padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--cc-line,#E6E6E6);
  display:flex;flex-direction:column;gap:8px;
}
.drawer-total{font-size:15px;font-weight:700}
.drawer-total span{color:var(--cc-ink-accent,#B4473C);font-size:19px}
.drawer-cutoff{margin:0;font-size:11px;color:var(--cc-muted,#B3B3B3)}
.drawer-foot .btn-checkout,
.drawer-foot .btn-add{
  width:100%;justify-content:center;text-align:center;
}

.drawer-panel :focus-visible{
  outline:2px solid var(--cc-ink-accent,#B4473C);outline-offset:2px;
}

/* -- v3.1: line items stagger-slide as the drawer opens -- */
@media (prefers-reduced-motion: no-preference){
  .m-drawer.is-open .drawer-items > li{
    animation:drawer-item-in 320ms cubic-bezier(.22,.61,.36,1) both;
  }
  .m-drawer.is-open .drawer-items > li:nth-child(1){animation-delay:60ms}
  .m-drawer.is-open .drawer-items > li:nth-child(2){animation-delay:110ms}
  .m-drawer.is-open .drawer-items > li:nth-child(3){animation-delay:160ms}
  .m-drawer.is-open .drawer-items > li:nth-child(4){animation-delay:210ms}
  .m-drawer.is-open .drawer-items > li:nth-child(5){animation-delay:260ms}
  .m-drawer.is-open .drawer-items > li:nth-child(n+6){animation-delay:300ms}
  @keyframes drawer-item-in{
    from{opacity:0;transform:translateX(24px)}
    to{opacity:1;transform:none}
  }
}