/* ============================================================
   MAISON PHILIPA — cart UI (header button + slide-out drawer)
   Loaded on every page. Colours/fonts read the site tokens with
   hard fallbacks so this also works on index.html, which keeps
   its own inline styles.
   ============================================================ */

/* ---------- header actions ---------- */
.head-actions{display:inline-flex;align-items:center;gap:12px;flex:none;}
.mpc-cartbtn{
  position:relative;flex:none;
  width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:none;cursor:pointer;font:inherit;
  color:var(--ink,#2b2622);
  box-shadow:inset 0 0 0 1px var(--hairline,rgba(43,38,34,.12));
  transition:box-shadow .35s ease, transform .35s cubic-bezier(.19,1,.22,1);
}
.mpc-cartbtn:hover{box-shadow:inset 0 0 0 1px var(--ink,#2b2622);transform:translateY(-1px);}
.mpc-cartbtn svg{width:20px;height:20px;display:block;}
.mpc-badge{
  position:absolute;top:-3px;right:-5px;
  min-width:19px;height:19px;padding:0 5px;border-radius:100px;
  display:grid;place-items:center;
  background:var(--navy,#113251);color:#fff;
  font-size:.66rem;font-weight:600;letter-spacing:.02em;line-height:1;
  box-shadow:0 0 0 2px var(--ivory,#f6f0e7);
}
.mpc-badge[hidden]{display:none;}
.mpc-badge.bump{animation:mpc-bump .5s cubic-bezier(.19,1,.22,1);}
@keyframes mpc-bump{0%{transform:scale(.6)}55%{transform:scale(1.18)}100%{transform:scale(1)}}

/* ---------- overlay + drawer shell ---------- */
.mpc-overlay{
  position:fixed;inset:0;z-index:1490;
  background:rgba(13,29,46,.38);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;
  transition:opacity .55s ease;
}
.mpc-overlay.open{opacity:1;pointer-events:auto;}
.mpc-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:1500;
  width:min(430px,94vw);
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--surface,#fbf8f3) 0%,var(--ivory,#f6f0e7) 100%);
  border-left:1px solid var(--hairline,rgba(43,38,34,.12));
  box-shadow:-40px 0 90px -40px rgba(17,50,81,.5);
  transform:translateX(105%);visibility:hidden;
  transition:transform .65s cubic-bezier(.19,1,.22,1), visibility 0s linear .65s;
}
.mpc-drawer.open{transform:none;visibility:visible;transition:transform .65s cubic-bezier(.19,1,.22,1);}
html.mpc-lock,html.mpc-lock body{overflow:hidden;}
.mpc-drawer.is-busy .mpc-body{opacity:.55;pointer-events:none;}

/* ---------- drawer head ---------- */
.mpc-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:26px 26px 16px;
}
.mpc-title{
  font-family:var(--font-display,"Jost",system-ui,sans-serif);
  font-weight:380;font-size:1.55rem;letter-spacing:-.01em;line-height:1.1;
  color:var(--ink,#2b2622);
}
.mpc-count{
  font-style:italic;font-weight:400;font-size:.95rem;letter-spacing:.02em;
  color:var(--gold,#b08d57);margin-left:6px;white-space:nowrap;
}
.mpc-close{
  position:relative;flex:none;width:38px;height:38px;border-radius:50%;
  background:none;border:none;cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--hairline,rgba(43,38,34,.12));
  transition:box-shadow .35s ease, transform .5s cubic-bezier(.19,1,.22,1);
}
.mpc-close:hover{box-shadow:inset 0 0 0 1px var(--ink,#2b2622);transform:rotate(90deg);}
.mpc-close span::before,
.mpc-close span::after{
  content:"";position:absolute;left:50%;top:50%;width:14px;height:1px;
  background:var(--ink,#2b2622);
}
.mpc-close span::before{transform:translate(-50%,-50%) rotate(45deg);}
.mpc-close span::after{transform:translate(-50%,-50%) rotate(-45deg);}

/* ---------- "Added to your cart" affirmation ---------- */
.mpc-note{
  margin:0 26px;max-height:0;overflow:hidden;
  opacity:0;transform:translateY(-4px);
  font-family:var(--font-display,"Jost",system-ui,sans-serif);
  font-style:italic;font-size:.95rem;letter-spacing:.01em;
  color:var(--gold,#b08d57);
  border-bottom:1px solid transparent;
  transition:max-height .5s cubic-bezier(.19,1,.22,1), opacity .5s ease,
             transform .5s cubic-bezier(.19,1,.22,1), padding .5s ease,
             border-color .5s ease;
}
.mpc-note::before{
  content:"";display:inline-block;vertical-align:middle;
  width:22px;height:1px;background:var(--gold,#b08d57);margin-right:10px;
}
.mpc-note.show{
  max-height:56px;opacity:1;transform:none;padding-bottom:12px;
  border-bottom-color:var(--hairline,rgba(43,38,34,.12));
}

/* ---------- line items ---------- */
.mpc-body{
  flex:1;overflow-y:auto;overscroll-behavior:contain;
  padding:4px 26px 24px;
  transition:opacity .3s ease;
}
.mpc-line{
  display:grid;grid-template-columns:74px minmax(0,1fr) auto;gap:16px;
  padding:18px 0;border-bottom:1px solid var(--hairline,rgba(43,38,34,.12));
}
.mpc-line:first-child{border-top:1px solid var(--hairline,rgba(43,38,34,.12));}
.mpc-thumb{
  width:74px;aspect-ratio:1;border-radius:16px;overflow:hidden;
  background:var(--paper,#f3ecdf);
  box-shadow:inset 0 0 0 1px var(--hairline,rgba(43,38,34,.12));
}
.mpc-thumb img{width:100%;height:100%;object-fit:contain;padding:8%;mix-blend-mode:multiply;}
.mpc-line-title{
  font-family:var(--font-display,"Jost",system-ui,sans-serif);
  font-weight:400;font-size:1.04rem;line-height:1.25;color:var(--ink,#2b2622);
}
.mpc-line-colour{
  margin-top:3px;
  font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft,#6d6459);
}
.mpc-qty{
  margin-top:12px;display:inline-flex;align-items:center;
  border-radius:100px;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--hairline,rgba(43,38,34,.12));
}
.mpc-qty button{
  width:30px;height:30px;display:grid;place-items:center;
  background:none;border:none;cursor:pointer;font:inherit;
  font-size:.95rem;line-height:1;color:var(--ink-soft,#6d6459);
  transition:color .3s ease, background .3s ease;
}
.mpc-qty button:hover{color:var(--ink,#2b2622);background:rgba(255,255,255,.7);}
.mpc-qty-n{
  min-width:26px;text-align:center;
  font-size:.85rem;font-weight:600;color:var(--ink,#2b2622);
}
.mpc-line-side{
  display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;
  gap:12px;padding:2px 0 4px;
}
.mpc-line-price{
  font-family:var(--font-display,"Jost",system-ui,sans-serif);
  font-size:1.05rem;color:var(--navy,#113251);
}
.mpc-remove{
  background:none;border:none;cursor:pointer;padding:2px 0;
  font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft,#6d6459);
  border-bottom:1px solid transparent;
  transition:color .3s ease, border-color .3s ease;
}
.mpc-remove:hover{color:var(--ink,#2b2622);border-bottom-color:var(--ink,#2b2622);}

/* ---------- empty state ---------- */
.mpc-empty{
  padding:64px 10px 40px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.mpc-empty svg{width:42px;height:42px;color:var(--gold,#b08d57);opacity:.85;margin-bottom:10px;}
.mpc-empty-t{
  font-family:var(--font-display,"Jost",system-ui,sans-serif);
  font-style:italic;font-weight:360;font-size:1.45rem;color:var(--ink,#2b2622);
}
.mpc-empty-s{font-size:.9rem;color:var(--ink-soft,#6d6459);max-width:22em;}
.mpc-empty-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  padding:13px 24px;border-radius:100px;text-decoration:none;
  font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink,#2b2622);
  box-shadow:inset 0 0 0 1px var(--hairline,rgba(43,38,34,.12));
  transition:box-shadow .3s ease;
}
.mpc-empty-link:hover{box-shadow:inset 0 0 0 1px var(--ink,#2b2622);}

/* ---------- footer ---------- */
.mpc-foot{
  border-top:1px solid var(--hairline,rgba(43,38,34,.12));
  padding:18px 26px calc(22px + env(safe-area-inset-bottom, 0px));
  background:var(--surface,#fbf8f3);
  box-shadow:0 -24px 50px -40px rgba(17,50,81,.4);
}
.mpc-subrow{display:flex;justify-content:space-between;align-items:baseline;gap:14px;}
.mpc-subrow span{
  font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft,#6d6459);
}
.mpc-subrow b{
  font-family:var(--font-display,"Jost",system-ui,sans-serif);
  font-weight:400;font-size:1.6rem;color:var(--navy,#113251);
}
.mpc-checkout{
  margin-top:14px;width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:17px 28px;border-radius:100px;border:none;cursor:pointer;
  background:var(--navy,#113251);color:#fff;
  font-family:var(--font-body,"Inter",-apple-system,sans-serif);
  font-size:.92rem;font-weight:600;letter-spacing:.04em;
  box-shadow:0 22px 44px -20px rgba(17,50,81,.5);
  transition:background .5s ease;
}
.mpc-checkout:hover{background:var(--accent-deep,#31496b);}
.mpc-checkout .mpc-arrow{transition:transform .35s cubic-bezier(.19,1,.22,1);}
.mpc-checkout:hover .mpc-arrow{transform:translateX(4px);}
.mpc-reassure{
  margin-top:12px;text-align:center;
  font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft,#6d6459);
}

/* PDP add-to-cart buttons while a request is in flight */
[data-checkout].is-busy{opacity:.65;pointer-events:none;}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .mpc-overlay,.mpc-drawer,.mpc-note,.mpc-body,.mpc-cartbtn,.mpc-close,
  .mpc-checkout .mpc-arrow{transition:none;}
  .mpc-badge.bump{animation:none;}
}