/* ============================================================
   DERMA MUSE | cart drawer
   Structure follows the PC drawer (pc-drawer/local/index.html): slide-in panel,
   inclusions band, gift strip with meter, item rows, upsell dock, value-stack
   footer. Nothing else is shared. Palette, type and copy are Derma Muse only,
   and the cart is held in memory, so this touches no store.
   ============================================================ */

.dmd-scrim{
  position:fixed;inset:0;background:rgba(30,12,36,.52);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease;z-index:2147482000
}
.dmd-scrim.is-open{opacity:1;visibility:visible}

.dmd{
  --dmd-brand:#3B1A45;
  --dmd-accent:#7B5EC7;
  --dmd-wash:#F1ECFB;
  --dmd-ivory:#F9F6F4;
  --dmd-hair:#E6E0E6;
  --dmd-ink:#1A1A1A;
  --dmd-mute:#5B5560;
  /* dvh so the mobile URL bar collapsing does not leave the footer off-screen */
  position:fixed;top:0;right:0;height:100%;height:100dvh;width:498px;max-width:94vw;z-index:2147482001;
  display:flex;flex-direction:column;background:#fff;color:var(--dmd-ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  transform:translateX(102%);transition:transform .34s cubic-bezier(.4,0,.2,1);
  box-shadow:-16px 0 46px rgba(30,12,36,.26)
}
.dmd.is-open{transform:translateX(0)}
.dmd *{box-sizing:border-box}
.dmd button{font-family:inherit}

/* ---------- header ---------- */
.dmd-head{
  display:flex;align-items:center;gap:12px;padding:14px 18px 13px;flex:0 0 auto;color:#fff;
  background:
    radial-gradient(120% 140% at 8% 0%,rgba(123,94,199,.55),transparent 62%),
    linear-gradient(168deg,#4A2158 0%,var(--dmd-brand) 62%,#2F1438 100%)
}
.dmd-title{
  font-family:"Playfair Display",Georgia,serif;font-size:19px;font-weight:500;
  color:#fff;line-height:1
}
.dmd-count{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(255,255,255,.16);color:#fff;border-radius:999px;padding:5px 10px;
  border:1px solid rgba(255,255,255,.22)
}
.dmd-x{
  margin-left:auto;width:28px;height:28px;display:grid;place-items:center;cursor:pointer;
  border:0;background:none;color:#fff;border-radius:50%
}
.dmd-x:hover{background:rgba(255,255,255,.16)}
.dmd-x:focus-visible{outline:2px solid #fff;outline-offset:2px}
.dmd-x svg{width:17px;height:17px}
.dmd button:focus-visible{outline:2px solid var(--dmd-accent);outline-offset:2px}

/* ---------- inclusions band ----------
   Three facts, each computed from the actual cart. No permanently-full meter. */
.dmd-band{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 12px;flex:0 0 auto;
  padding:6px 14px;background:var(--dmd-ivory);border-bottom:1px solid var(--dmd-hair);
  font-size:10.5px;color:var(--dmd-mute);line-height:1.3
}
.dmd-band span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.dmd-band span + span::before{
  content:"";width:3px;height:3px;border-radius:50%;background:rgba(123,94,199,.45);margin-right:8px
}
.dmd-band b{font-weight:700;color:var(--dmd-brand)}

/* ---------- gift meter ---------- */
.dmd-gift{
  flex:0 0 auto;padding:10px 18px;background:linear-gradient(180deg,var(--dmd-wash),#fff);
  border-bottom:1px solid var(--dmd-hair)
}
.dmd-gift-row{display:flex;align-items:center;gap:12px}
.dmd-gift-thumb{
  width:38px;height:38px;flex:0 0 38px;border-radius:10px;overflow:hidden;background:#fff;
  border:1px solid var(--dmd-hair);position:relative
}
.dmd-gift-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.dmd-gift-txt{flex:1;min-width:0}
.dmd-gift-txt b{display:block;font-size:12.5px;font-weight:600;color:var(--dmd-brand);line-height:1.3}
.dmd-gift-txt small{display:block;font-size:11px;color:var(--dmd-mute);margin-top:2px}
.dmd-gift-price{white-space:nowrap;text-align:right}
.dmd-gift-price em{
  display:block;font-style:normal;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dmd-accent)
}
.dmd-gift-price s{display:block;font-size:11.5px;color:#9A93A0}
/* display:block matters, it is a <span> and would otherwise ignore the height
   and render as a full-size blob over the first item row */
.dmd-meter{
  display:block;height:5px;border-radius:999px;background:rgba(123,94,199,.18);
  margin-top:7px;overflow:hidden
}
.dmd-meter i{
  display:block;height:5px;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--dmd-accent),var(--dmd-brand));transition:width .5s ease
}

/* ---------- items ---------- */
/* min-height:0 lets this actually scroll inside the flex column instead of
   pushing the dock and footer off the bottom */
.dmd-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 18px 8px}
.dmd-item{display:grid;grid-template-columns:52px 1fr auto;gap:11px;padding:11px 0;border-bottom:1px solid var(--dmd-hair)}
.dmd-item:last-child{border-bottom:0}
.dmd-item-mid{min-width:0}
.dmd-item-img{
  width:52px;height:52px;border-radius:9px;overflow:hidden;background:var(--dmd-ivory);
  border:1px solid var(--dmd-hair)
}
.dmd-item-img img{width:100%;height:100%;object-fit:cover;display:block}
.dmd-item-name{font-size:13.5px;font-weight:600;color:var(--dmd-brand);line-height:1.3}
.dmd-item-meta{font-size:12px;color:var(--dmd-mute);margin-top:2px}
/* badges share one row, the stepper always starts its own */
.dmd-item-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.dmd-item-plan,.dmd-item-free{
  display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;
  font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap
}
.dmd-item-plan{background:var(--dmd-wash);color:var(--dmd-brand)}
.dmd-item-free{background:var(--dmd-brand);color:#fff}
.dmd-qty{
  display:flex;width:max-content;align-items:center;margin-top:7px;
  border:1px solid var(--dmd-hair);border-radius:999px;overflow:hidden
}
.dmd-qty button{
  width:24px;height:24px;border:0;background:#fff;color:var(--dmd-brand);cursor:pointer;
  font-size:15px;line-height:1;display:grid;place-items:center
}
.dmd-qty button:hover{background:var(--dmd-wash)}
.dmd-qty span{min-width:24px;text-align:center;font-size:13px;font-weight:600;color:var(--dmd-brand)}
.dmd-item-right{
  text-align:right;white-space:nowrap;display:flex;flex-direction:column;align-items:flex-end;gap:1px
}
.dmd-item-price{font-size:15px;font-weight:700;color:var(--dmd-ink);line-height:1.2}
.dmd-item-was{font-size:11.5px;color:#9A93A0;text-decoration:line-through}
.dmd-remove{
  margin-top:6px;border:0;background:none;padding:0;cursor:pointer;
  font-size:11px;color:#9A93A0;text-decoration:underline;text-underline-offset:2px
}
.dmd-remove:hover{color:var(--dmd-brand)}

/* ---------- empty ---------- */
.dmd-empty{padding:52px 24px;text-align:center}
.dmd-empty h4{
  font-family:"Playfair Display",Georgia,serif;font-size:21px;font-weight:500;
  color:var(--dmd-brand);margin:0 0 8px
}
.dmd-empty p{margin:0 0 20px;font-size:14px;color:var(--dmd-mute);line-height:1.6}

/* ---------- upsell dock ---------- */
.dmd-dock{flex:0 0 auto;border-top:1px solid var(--dmd-hair);background:var(--dmd-ivory);padding:10px 18px 11px}
.dmd-dock-h{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:7px;
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dmd-mute)
}
.dmd-dock-rail{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.dmd-dock-rail::-webkit-scrollbar{display:none}
.dmd-up{
  flex:0 0 auto;display:flex;align-items:center;gap:9px;
  background:#fff;border:1px solid var(--dmd-hair);border-radius:999px;padding:5px 6px 5px 5px
}
.dmd-up img{width:32px;height:32px;flex:0 0 32px;border-radius:50%;object-fit:cover;background:var(--dmd-ivory)}
.dmd-up b{display:block;font-size:12px;font-weight:600;color:var(--dmd-brand);line-height:1.2;white-space:nowrap}
.dmd-up span{display:block;font-size:11px;color:var(--dmd-mute);margin-top:1px;white-space:nowrap}
.dmd-up s{color:#9A93A0;margin-left:3px}
.dmd-up button{
  flex:0 0 auto;border:1px solid var(--dmd-brand);background:#fff;color:var(--dmd-brand);
  border-radius:999px;padding:6px 13px;font-size:11.5px;font-weight:700;cursor:pointer;
  transition:background .16s ease,color .16s ease
}
.dmd-up button:hover{background:var(--dmd-brand);color:#fff}
.dmd-up button:disabled{opacity:.45;cursor:default;background:#fff;color:var(--dmd-brand)}

/* ---------- value stack footer ---------- */
.dmd-foot{flex:0 0 auto;border-top:1px solid var(--dmd-hair);padding:11px 18px 14px;background:#fff}
.dmd-line{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--dmd-mute);padding:2px 0}
.dmd-line b{color:var(--dmd-ink);font-weight:600}
.dmd-line--save b,.dmd-line--save{color:var(--dmd-accent);font-weight:600}
.dmd-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-top:7px;padding-top:9px;border-top:1px solid var(--dmd-hair)
}
.dmd-total span{font-size:13px;font-weight:600;color:var(--dmd-brand)}
.dmd-total b{font-size:20px;font-weight:700;color:var(--dmd-brand)}
.dmd-co{
  display:block;width:100%;margin-top:10px;border:0;border-radius:10px;cursor:pointer;
  background:var(--dmd-brand);color:#fff;font:600 16px/1.2 inherit;padding:14px 20px;
  transition:background .18s ease,transform .18s ease
}
.dmd-co:hover{background:var(--dmd-accent);transform:translateY(-1px)}
.dmd-ladder{
  display:flex;flex-wrap:wrap;justify-content:center;gap:5px 13px;margin-top:9px;
  font-size:10.5px;color:var(--dmd-mute)
}
.dmd-ladder span{display:inline-flex;align-items:center;gap:5px}
.dmd-ladder svg{width:13px;height:13px;color:var(--dmd-accent)}
.dmd-keep{
  display:block;width:100%;margin-top:7px;border:0;background:none;cursor:pointer;
  font-size:12px;color:var(--dmd-mute);text-decoration:underline;text-underline-offset:3px
}
.dmd-keep:hover{color:var(--dmd-brand)}

/* ---------- mobile ----------
   Same information, less air. Every horizontal pad drops 18 -> 13, every
   vertical rhythm tightens, and the footer clears the iOS home bar. */
@media (max-width:520px){
  .dmd{width:100%;max-width:100%}

  .dmd-head{padding:11px 13px 9px;gap:9px}
  .dmd-title{font-size:17.5px}
  .dmd-count{font-size:10px;padding:4px 8px}

  .dmd-band{padding:5px 10px;gap:3px 9px;font-size:10px}
  .dmd-band span + span::before{margin-right:6px}

  .dmd-gift{padding:8px 13px}
  .dmd-gift-row{gap:9px}
  .dmd-gift-thumb{width:34px;height:34px;flex:0 0 34px;border-radius:8px}
  .dmd-gift-txt b{font-size:12px}
  .dmd-gift-txt small{font-size:10.5px;margin-top:1px}
  .dmd-gift-price em{font-size:11px}
  .dmd-gift-price s{font-size:10.5px}
  .dmd-meter{margin-top:6px;height:4px}
  .dmd-meter i{height:4px}

  .dmd-body{padding:0 13px 6px}
  .dmd-item{grid-template-columns:48px 1fr auto;gap:10px;padding:9px 0}
  .dmd-item-img{width:48px;height:48px}
  .dmd-item-name{font-size:13px}
  .dmd-item-meta{font-size:11.5px}
  .dmd-item-badges{margin-top:4px;gap:4px}
  .dmd-item-plan,.dmd-item-free{font-size:9px;padding:2px 7px}
  .dmd-qty{margin-top:6px}
  .dmd-item-price{font-size:14px}
  .dmd-remove{margin-top:5px}

  .dmd-empty{padding:34px 18px}
  .dmd-empty h4{font-size:19px}
  .dmd-empty p{font-size:13.5px;margin-bottom:14px}

  .dmd-dock{padding:8px 13px 9px}
  .dmd-dock-h{margin-bottom:6px;font-size:9.5px}
  .dmd-dock-rail{gap:8px}
  .dmd-up{padding:4px 5px 4px 4px;gap:8px}
  .dmd-up img{width:28px;height:28px;flex:0 0 28px}
  .dmd-up b{font-size:11.5px}
  .dmd-up span{font-size:10.5px}
  .dmd-up button{padding:5px 11px;font-size:11px}

  .dmd-foot{padding:9px 13px calc(11px + env(safe-area-inset-bottom,0px))}
  .dmd-line{font-size:12px;padding:1px 0}
  .dmd-total{margin-top:6px;padding-top:8px}
  .dmd-total span{font-size:12.5px}
  .dmd-total b{font-size:19px}
  .dmd-co{padding:13px 18px;font-size:15.5px;margin-top:9px;border-radius:9px}
  .dmd-ladder{margin-top:8px;gap:4px 11px;font-size:10px}
  .dmd-ladder svg{width:12px;height:12px}
  .dmd-keep{margin-top:6px;font-size:11.5px}
}
/* short phones: the ladder is the first thing that can go */
@media (max-width:520px) and (max-height:700px){
  .dmd-ladder{display:none}
  .dmd-dock-h{display:none}
  .dmd-dock{padding-top:9px}
}
@media (prefers-reduced-motion:reduce){
  .dmd,.dmd-scrim,.dmd-meter i{transition:none}
}