/* Shared cart drawer + toast — themed by each layout through CSS variables */

.mm-scrim{
  position:fixed;inset:0;background:rgba(42,30,20,.42);
  opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:900;
}
.mm-scrim.on{opacity:1;pointer-events:auto}

.mm-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(412px,100%);
  background:var(--mm-surface,#fffdf8);color:var(--mm-ink,#2a211a);
  font-family:var(--mm-body,"Work Sans",system-ui,sans-serif);
  display:flex;flex-direction:column;z-index:910;
  transform:translateX(102%);
  transition:transform .38s cubic-bezier(.4,0,.16,1);
  box-shadow:-28px 0 60px -34px rgba(30,20,12,.5);
}
.mm-drawer.on{transform:none}

.mm-head{
  display:flex;align-items:center;gap:.6rem;
  padding:1.25rem 1.4rem 1.1rem;border-bottom:1px solid var(--mm-border,rgba(42,33,26,.14));
}
.mm-head b{font-family:var(--mm-display,"Fraunces",serif);font-weight:600;font-size:1.15rem;letter-spacing:-.01em}
.mm-head .mm-n{font-size:.72rem;opacity:.6;font-weight:400}
.mm-x{
  margin-left:auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font-size:1.15rem;line-height:1;color:inherit;background:var(--mm-wash,rgba(42,33,26,.06));
  transition:background .2s ease;cursor:pointer;border:0;
}
.mm-x:hover{background:rgba(42,33,26,.12)}

.mm-body{flex:1;overflow-y:auto;padding:.35rem 1.4rem 1rem}
.mm-empty{padding:3.2rem 0 2rem;text-align:center;font-size:.86rem;line-height:1.6;opacity:.72}
.mm-empty b{display:block;font-family:var(--mm-display,"Fraunces",serif);font-size:1.1rem;font-weight:600;opacity:1;margin-bottom:.3rem}

.mm-line{display:flex;gap:.85rem;padding:1rem 0;border-bottom:1px dashed var(--mm-border,rgba(42,33,26,.16))}
.mm-thumb{width:54px;flex:none;opacity:.95}
.mm-thumb svg,.mm-thumb img{display:block;width:100%;height:auto;border-radius:4px}
.mm-info{flex:1;min-width:0}
.mm-info b{display:block;font-size:.88rem;font-weight:500}
.mm-unit{font-size:.7rem;opacity:.62;margin-top:.2rem}
.mm-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:.55rem}
.mm-qty{display:inline-flex;align-items:center;border:1px solid var(--mm-border,rgba(42,33,26,.2));border-radius:999px;padding:.1rem}
.mm-qty button{
  width:23px;height:23px;border-radius:50%;display:grid;place-items:center;
  font-size:.9rem;line-height:1;background:none;border:0;color:inherit;cursor:pointer;
}
.mm-qty button:hover{background:rgba(42,33,26,.08)}
.mm-qty span{min-width:20px;text-align:center;font-size:.78rem}
.mm-amt{font-size:.92rem;font-weight:500;white-space:nowrap}
.mm-rm{
  margin-top:.4rem;font-size:.68rem;text-decoration:underline;text-underline-offset:2px;
  opacity:.6;background:none;border:0;color:inherit;cursor:pointer;padding:0;
}
.mm-rm:hover{opacity:1;color:var(--mm-accent,#a2543b)}

.mm-foot{padding:1rem 1.4rem 1.35rem;border-top:1px solid var(--mm-border,rgba(42,33,26,.14));background:var(--mm-foot,#faf4e8)}
.mm-input{
  width:100%;padding:.7rem .85rem;margin-bottom:.5rem;border-radius:10px;
  border:1px solid var(--mm-border,rgba(42,33,26,.2));background:var(--mm-surface,#fffdf8);
  font-family:inherit;font-size:.84rem;color:inherit;
}
.mm-input::placeholder{opacity:.45}
.mm-input:focus{outline:2px solid var(--mm-focus,rgba(162,84,59,.4));outline-offset:1px;border-color:transparent}
.mm-total{display:flex;align-items:baseline;justify-content:space-between;margin-top:.7rem}
.mm-total span{font-size:.78rem;opacity:.7}
.mm-total b{font-family:var(--mm-display,"Fraunces",serif);font-size:1.35rem;font-weight:600}
.mm-note{margin:.25rem 0 .8rem;font-size:.68rem;line-height:1.5;opacity:.6}
.mm-wa{
  width:100%;display:flex;align-items:center;justify-content:center;gap:.55rem;
  background:#1c9a55;color:#fff;border:0;border-radius:var(--mm-btn-radius,999px);
  padding:.92rem 1rem;font-family:inherit;font-size:.88rem;font-weight:500;cursor:pointer;
  transition:background .2s ease,transform .2s ease;
}
.mm-wa svg{width:17px;height:17px;flex:none}
.mm-wa:hover:not(:disabled){background:#168448;transform:translateY(-1px)}
.mm-wa:disabled{background:#cfc7b8;color:#7a7165;cursor:not-allowed}

.mm-toast{
  position:fixed;left:50%;bottom:1.4rem;z-index:920;
  transform:translate(-50%,180%);
  display:flex;align-items:center;gap:.7rem;
  background:var(--mm-ink,#2a211a);color:var(--mm-surface,#fffdf8);
  border-radius:999px;padding:.55rem .6rem .55rem 1.05rem;
  font-family:var(--mm-body,"Work Sans",sans-serif);font-size:.79rem;
  box-shadow:0 18px 34px -18px rgba(0,0,0,.55);
  transition:transform .4s cubic-bezier(.34,1.35,.64,1);
  max-width:calc(100vw - 2rem);
}
.mm-toast.on{transform:translate(-50%,0)}
.mm-toast button{
  background:rgba(255,255,255,.16);color:inherit;border:0;border-radius:999px;
  padding:.38rem .8rem;font-family:inherit;font-size:.75rem;cursor:pointer;white-space:nowrap;
}

.mm-jar{display:block}
.mm-jar svg{display:block;width:100%;height:auto}

.mm-bump{animation:mmBump .45s ease}
@keyframes mmBump{40%{transform:scale(1.08)}70%{transform:scale(.99)}}

.mm-drawer :focus-visible{outline:2px solid var(--mm-focus,rgba(162,84,59,.5));outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .mm-drawer,.mm-scrim,.mm-toast{transition:none}
}