/* ==========================================================================
   ALTURA — slide-out cart drawer (visual shell only, no commerce logic)
   ========================================================================== */

.dw-overlay{
  position:fixed; inset:0; z-index:98;
  background:rgba(7,11,18,.62);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden;
  transition:opacity .45s ease,visibility .45s;
}
.dw-overlay.open{ opacity:1; visibility:visible; }

.dw{
  position:fixed; top:0; right:0; bottom:0; z-index:99;
  width:min(420px,100vw);
  background:var(--void);
  border-left:1px solid var(--line);
  display:flex; flex-direction:column;
  transform:translateX(101%); visibility:hidden;
  transition:transform .52s cubic-bezier(.22,.61,.36,1),visibility .52s;
  box-shadow:-24px 0 70px rgba(0,0,0,.5);
}
/* visibility must flip instantly on open or close.focus() lands on a hidden
   element and silently no-ops (a11y audit 8/27); the .52s visibility easing
   remains on the closed state so the exit still animates. */
.dw.open{ transform:translateX(0); visibility:visible;
  transition:transform .52s cubic-bezier(.22,.61,.36,1), visibility 0s; }

.dw__hd{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 24px; border-bottom:1px solid var(--line);
}
.dw__hd h2{
  font-family:var(--f-display); font-weight:700; font-size:14px;
  letter-spacing:.22em; text-transform:uppercase;
}
.dw__x{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:rgba(244,246,248,.66); transition:background .3s ease,color .3s ease;
}
.dw__x:hover{ background:rgba(244,246,248,.07); color:var(--ink); }
.dw__x svg{ width:15px; height:15px; }

.dw__ship{ padding:18px 24px; border-bottom:1px solid var(--line); }
.dw__shipmsg{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(244,246,248,.56);
  display:flex; align-items:center; gap:8px;
}
.dw__shipmsg b{ color:var(--steel-soft); font-weight:600; }
.dw__shipmsg svg{ width:13px; height:13px; color:var(--steel-soft); flex:none; }
.dw__bar{
  margin-top:11px; height:3px; border-radius:100px;
  background:rgba(244,246,248,.09); overflow:hidden;
}
.dw__fill{
  height:100%; width:0; border-radius:100px;
  background:linear-gradient(90deg,var(--steel),var(--steel-soft));
  transition:width .6s cubic-bezier(.22,.61,.36,1);
}

.dw__body{ flex:1; overflow-y:auto; padding:24px; }
.dw__empty{
  height:100%; min-height:200px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; text-align:center;
}
.dw__empty svg{ width:34px; height:34px; color:rgba(143,179,217,.4); }
.dw__empty p{
  font-family:var(--f-display); font-weight:700; font-size:13px;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(244,246,248,.6);
}
.dw__empty small{
  display:block; max-width:28ch; font-family:var(--f-body); font-size:12px;
  font-weight:300; letter-spacing:0; text-transform:none; line-height:1.7;
  color:rgba(244,246,248,.4);
}

.dw__ft{ padding:22px 24px; border-top:1px solid var(--line); }
.dw__sub{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin-bottom:16px;
}
.dw__sub span{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(244,246,248,.5);
}
.dw__sub b{ font-family:var(--f-display); font-weight:800; font-size:19px; }
.dw__go{
  width:100%; justify-content:center; padding:16px 24px; border-radius:100px;
  background:var(--ink); color:var(--dark);
  font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
}
.dw__go:disabled{
  background:rgba(244,246,248,.1); color:rgba(244,246,248,.34);
  cursor:not-allowed;
}
.dw__note{
  margin-top:14px; text-align:center;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(244,246,248,.3);
}

@media (prefers-reduced-motion:reduce){
  .dw,.dw-overlay,.dw__fill{ transition-duration:.001ms !important; }
}

/* --- live cart lines ------------------------------------------------------ */
.dwline{
  display:grid; grid-template-columns:56px 1fr auto; gap:13px;
  padding:15px 0; border-bottom:1px solid var(--line); align-items:center;
}
.dwline__img{
  width:56px; aspect-ratio:1/1.02; border-radius:8px; overflow:hidden;
  background:radial-gradient(130% 100% at 50% 16%,#1e293b,#111a29 44%,#070b12 82%);
  display:flex; align-items:center; justify-content:center;
}
.dwline__img img{ height:80%; width:auto; object-fit:contain; }
.dwline__name{
  font-family:var(--f-display); font-weight:700; font-size:11.5px;
  letter-spacing:.06em; text-transform:uppercase; line-height:1.3;
}
.dwline__meta{ margin-top:4px; font-size:10.5px; font-weight:300; color:rgba(244,246,248,.5); }
.dwline__rm{
  margin-top:6px; font-family:var(--f-mono); font-size:8.5px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(244,246,248,.4); transition:color .3s ease;
}
.dwline__rm:hover{ color:#e08585; }
.dwline__price{ font-family:var(--f-display); font-weight:800; font-size:13px; white-space:nowrap; }
.dw__go{ text-decoration:none; }

/* [hidden] must beat the flex display rule (same bug class as the shop empty-state) */
.dw__empty[hidden]{ display:none; }
.dwline__save{ font-style:normal; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9px;
  letter-spacing:.08em; text-transform:uppercase; color:#8fb3d9; margin-left:6px; }