/* ═══ SLIDE-IN CART DRAWER ═══════════════════════════════════════════════
   Scoped entirely to .chd-* so it cannot collide with main.css, product.css
   or cart.css. Colours come from the shared --ch-* tokens in head.php. */
.chd-scrim{
  position:fixed; inset:0; z-index:9998;
  background:rgba(8,12,20,.5);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  opacity:0; transition:opacity .28s ease;
}
.chd-scrim.chd-on{ opacity:1; }
.chd-scrim[hidden]{ display:none; }

.chd{
  position:fixed; top:0; bottom:0; z-index:9999;
  inset-inline-end:0;                 /* right in LTR, left in RTL */
  width:min(420px, 100vw);
  display:flex; flex-direction:column;
  background:#fff;
  box-shadow:-12px 0 40px rgba(15,23,42,.18);
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.32,.72,.35,1);
  font-family:'Cairo','DM Sans',-apple-system,sans-serif;
  color:var(--ch-ink,#0F172A);
  overscroll-behavior:contain;
}
[dir="rtl"] .chd{ transform:translateX(-100%); box-shadow:12px 0 40px rgba(15,23,42,.18); }
.chd.chd-on{ transform:translateX(0) !important; }
.chd[hidden]{ display:none; }

/* header */
.chd-hd{
  display:flex; align-items:center; gap:10px;
  padding:16px 18px; border-bottom:1px solid var(--ch-border,#E5E7EB);
  flex-shrink:0;
}
.chd-ttl{ display:flex; align-items:center; gap:9px; margin:0; font-size:16px; font-weight:800; flex:1; }
.chd-ttl svg{ width:20px; height:20px; color:var(--ch-p,#FA5B00); flex-shrink:0; }
.chd-count{
  background:var(--ch-p,#FA5B00); color:#fff; font-size:11px; font-weight:800;
  min-width:20px; height:20px; padding:0 6px; border-radius:100px;
  display:inline-flex; align-items:center; justify-content:center;
  font-variant-numeric:tabular-nums;
}
.chd-x{
  width:36px; height:36px; flex-shrink:0; border:0; border-radius:50%;
  background:#F1F5F9; color:#64748B; font-size:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s;
}
.chd-x:hover{ background:var(--ch-p,#FA5B00); color:#fff; }

/* free-shipping progress */
.chd-ship{ padding:12px 18px; background:#FFF7ED; border-bottom:1px solid #FED7AA; flex-shrink:0; }
.chd-ship-txt{ margin:0 0 7px; font-size:12.5px; font-weight:700; color:#9A3412; }
.chd-ship-txt b{ color:var(--ch-p,#FA5B00); }
.chd-ship.chd-done{ background:#F0FDF4; border-bottom-color:#BBF7D0; }
.chd-ship.chd-done .chd-ship-txt{ color:#15803D; }
.chd-ship-track{ height:6px; border-radius:100px; background:#FFE4CC; overflow:hidden; }
.chd-ship.chd-done .chd-ship-track{ background:#DCFCE7; }
.chd-ship-fill{
  height:100%; width:0; border-radius:100px;
  background:var(--ch-p,#FA5B00); transition:width .45s cubic-bezier(.2,.8,.3,1);
}
.chd-ship.chd-done .chd-ship-fill{ background:#16A34A; }

/* body */
.chd-body{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:6px 0; }
.chd-list{ list-style:none; margin:0; padding:0; }
.chd-li{
  display:flex; gap:12px; padding:14px 18px;
  border-bottom:1px solid #F1F5F9;
  animation:chdIn .3s ease both;
}
@keyframes chdIn{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.chd-li.chd-out{ opacity:0; transform:translateX(30px); transition:opacity .2s, transform .2s; }
.chd-img{
  width:68px; height:68px; flex-shrink:0; border-radius:10px; overflow:hidden;
  background:#F1F5F9; border:1px solid var(--ch-border,#E5E7EB);
}
.chd-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.chd-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.chd-nm{
  font-size:13px; font-weight:600; line-height:1.35; color:inherit; text-decoration:none;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.chd-nm:hover{ color:var(--ch-p,#FA5B00); }
.chd-var{ font-size:11.5px; color:#64748B; font-weight:600; }
.chd-row{ display:flex; align-items:center; gap:10px; margin-top:2px; }
.chd-price{ font-size:14px; font-weight:800; color:var(--ch-p,#FA5B00); font-variant-numeric:tabular-nums; }

.chd-qty{
  display:inline-flex; align-items:center;
  border:1.5px solid var(--ch-border,#E5E7EB); border-radius:9px; overflow:hidden; height:30px;
}
.chd-qty button{
  width:28px; height:100%; border:0; background:#fff; cursor:pointer;
  font-size:15px; font-weight:700; color:inherit; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.chd-qty button:hover{ background:#FFF7ED; color:var(--ch-p,#FA5B00); }
.chd-qty button:disabled{ color:#CBD5E1; cursor:default; background:#fff; }
.chd-qty span{
  min-width:26px; text-align:center; font-size:13px; font-weight:700;
  font-variant-numeric:tabular-nums;
  border-inline:1.5px solid var(--ch-border,#E5E7EB); align-self:stretch;
  display:flex; align-items:center; justify-content:center;
}
.chd-rm{
  margin-inline-start:auto; border:0; background:none; cursor:pointer;
  font-size:11.5px; font-weight:700; color:#94A3B8; padding:4px 2px; text-decoration:underline;
}
.chd-rm:hover{ color:#DC2626; }

/* empty + skeleton */
.chd-empty{ padding:56px 26px; text-align:center; }
.chd-empty-ic{ font-size:44px; margin-bottom:10px; }
.chd-empty-t{ margin:0 0 5px; font-size:16px; font-weight:800; }
.chd-empty-s{ margin:0 0 18px; font-size:13px; color:#64748B; line-height:1.55; }
.chd-skel{ padding:14px 18px; }
.chd-skel-row{
  height:68px; border-radius:10px; margin-bottom:14px;
  background:linear-gradient(90deg,#F1F5F9 25%,#E9EEF4 37%,#F1F5F9 63%);
  background-size:400% 100%; animation:chdSkel 1.3s ease infinite;
}
@keyframes chdSkel{ from{background-position:100% 50%} to{background-position:0 50%} }

/* footer */
.chd-ft{
  flex-shrink:0; padding:14px 18px calc(16px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--ch-border,#E5E7EB); background:#fff;
  box-shadow:0 -6px 18px rgba(15,23,42,.05);
}
.chd-saved{
  display:flex; justify-content:space-between; font-size:12.5px; font-weight:700;
  color:#15803D; background:#F0FDF4; border-radius:9px; padding:7px 11px; margin-bottom:10px;
}
.chd-sum{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; font-size:14px; font-weight:700; }
.chd-sub{ font-size:21px; font-weight:800; color:var(--ch-ink,#0F172A); font-variant-numeric:tabular-nums; letter-spacing:-.5px; }
.chd-btn{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:48px; border-radius:12px; border:0;
  font:inherit; font-size:15px; font-weight:800; cursor:pointer; text-decoration:none;
  transition:background .16s, transform .12s;
}
.chd-btn-primary{ background:var(--ch-p,#FA5B00); color:#fff; box-shadow:0 4px 14px rgba(250,91,0,.28); }
.chd-btn-primary:hover{ background:var(--ch-p-press,#E04E00); }
.chd-btn-primary:active{ transform:scale(.99); }
.chd-btn-ghost{ background:#fff; color:var(--ch-ink,#0F172A); border:1.5px solid var(--ch-border,#E5E7EB); margin-top:8px; min-height:44px; font-size:14px; }
.chd-btn-ghost:hover{ background:#F1F5F9; }
.chd :focus-visible{ outline:2px solid var(--ch-p,#FA5B00); outline-offset:2px; }

html.chd-lock{ overflow:hidden; }

/* phone: full-width sheet, bigger targets */
@media (max-width:520px){
  .chd{ width:100vw; }
  .chd-hd{ padding:14px 16px; }
  .chd-x{ width:40px; height:40px; }
  .chd-li{ padding:13px 16px; gap:11px; }
  .chd-img{ width:62px; height:62px; }
  .chd-qty{ height:34px; }
  .chd-qty button{ width:32px; }
  .chd-ft{ padding:13px 16px calc(14px + env(safe-area-inset-bottom,0px)); }
}
@media (prefers-reduced-motion:reduce){
  .chd, .chd-scrim, .chd-li, .chd-ship-fill{ transition:none !important; animation:none !important; }
  .chd-skel-row{ animation:none !important; }
}