/* =========================================================
   MALIK SHOP — carrito (16-oct-2026). Usa las mismas piezas de pedido.css (mk-modal, mk-box, mk-go…):
   aquí solo va lo propio de la bolsa: botón del menú, botón flotante, renglones con cantidad y aviso.
   ========================================================= */
/* botón de la bolsa en el menú (junto a ES/EN) */
.hd-acts{grid-row:1;grid-column:2;justify-self:end;display:flex;align-items:center;gap:8px}
.hd-acts .lang{grid-row:auto;grid-column:auto}
.bolsa-b,.bolsa-fab{position:relative;display:inline-grid;place-items:center;cursor:pointer;color:var(--mk-ink,#0a0a0a)}
.bolsa-b{width:34px;height:30px;border:1.5px solid #8d939b;border-radius:3px;background:linear-gradient(180deg,#ffffff 0%,#f1f3f5 44%,#dde1e5 50%,#eef0f3 56%,#fafbfc 100%)}
.bolsa-b svg,.bolsa-fab svg{width:18px;height:18px}
.bolsa-b i,.bolsa-fab i{position:absolute;top:-7px;right:-8px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;display:none;place-items:center;
  font:700 10px/18px -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-style:normal;color:#fff;
  background:linear-gradient(180deg,#2b2f36 0%,#0b0c0e 48%,#000 52%,#1b1e23 100%);box-shadow:0 0 0 2px #fff}
.bolsa-b.tiene i,.bolsa-fab.tiene i{display:grid}
.bolsa-b:hover{filter:brightness(.96)}
.bolsa-b.salto,.bolsa-fab.salto{animation:mkSalto .5s cubic-bezier(.2,.9,.2,1)}
@keyframes mkSalto{30%{transform:scale(1.18)}60%{transform:scale(.94)}100%{transform:none}}

/* botón flotante (siempre a mano al bajar por la página) */
.bolsa-fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:1500;width:54px;height:54px;border-radius:50%;
  border:2px solid transparent;color:#fff;background:linear-gradient(180deg,#2b2f36 0%,#0b0c0e 48%,#000 52%,#1b1e23 100%) padding-box,linear-gradient(180deg,#ffffff 0%,#9aa0a8 48%,#3b4047 52%,#d6dade 100%) border-box;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.3)}
.bolsa-fab[hidden]{display:none}
.bolsa-fab svg{width:22px;height:22px}
.bolsa-fab i{top:-3px;right:-3px;color:#0a0a0a;background:#fff;box-shadow:0 0 0 2px #0a0a0a}
body.mk-abierto .bolsa-fab{display:none}
@media (min-width:861px){.bolsa-fab{display:none!important}}

/* renglones de la bolsa */
.mk-items{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mk-it{display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:start;padding:10px;border:1.5px solid var(--mk-line,#d9dcdf);background:#fff}
.mk-it.mal{border-color:#b42318;box-shadow:0 0 0 3px rgba(180,35,24,.1)}
.mk-it img{width:72px;height:72px;object-fit:contain;background:#fff}
.mk-it-in{min-width:0}
.mk-it .mk-pn{margin:0 0 3px}
.mk-it-s{margin:0 0 9px;font-size:12.5px;color:var(--mk-dim,#6f757d);line-height:1.4}
.mk-it-s b{color:var(--mk-ink,#0a0a0a)}
.mk-it .mk-pr{padding-top:2px;white-space:nowrap}
.mk-qty{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mk-qty button[data-a="menos"],.mk-qty button[data-a="mas"]{width:34px;height:34px;display:grid;place-items:center;border:1.5px solid var(--mk-ink,#0a0a0a);background:#fff;cursor:pointer;font-size:18px;line-height:1;color:var(--mk-ink,#0a0a0a)}
.mk-qty button:disabled{opacity:.35;cursor:not-allowed}
.mk-qty output{min-width:26px;text-align:center;font-family:var(--mk-font);font-size:13px}
.mk-quitar{margin-left:6px;border:0;background:none;padding:6px 2px;font-size:12.5px;color:var(--mk-dim,#6f757d);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.mk-quitar:hover{color:#b42318}
.mk-mt{margin-top:10px}
.mk-cj small{color:var(--mk-dim,#6f757d);font-size:11.5px}
.mk-vacia{display:grid;justify-items:center;text-align:center;gap:10px;padding:46px 10px}
.mk-vacia svg{width:46px;height:46px;padding:12px;border:1.5px solid var(--mk-ink,#0a0a0a);box-sizing:content-box}
.mk-vacia h2{font-family:var(--mk-font);font-weight:400;font-size:15px;letter-spacing:.08em;text-transform:uppercase;margin:0}
.mk-vacia p{font-size:14px;line-height:1.5;color:#33373d;max-width:30ch;margin:0}
.mk-editar{border:0;background:none;padding:0;font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer;color:inherit}
.mk-sz b{color:var(--mk-ink,#0a0a0a)}
@media (max-width:520px){
  .mk-it{grid-template-columns:60px 1fr}
  .mk-it img{width:60px;height:60px}
  .mk-it .mk-pr{grid-column:2;justify-self:start;padding-top:0}
}

/* aviso "se agregó a tu bolsa" */
.mk-toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));z-index:1900;width:min(420px,calc(100vw - 32px));display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  padding:10px 10px 10px 12px;background:#fff;border:1.5px solid var(--mk-ink,#0a0a0a);box-shadow:0 18px 40px -16px rgba(10,12,16,.35);font-family:var(--mk-body);color:var(--mk-ink,#0a0a0a);
  transform:translate(-50%,24px);opacity:0;pointer-events:none;transition:transform .28s cubic-bezier(.2,.9,.2,1),opacity .2s}
.mk-toast.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.mk-toast img{width:44px;height:44px;object-fit:contain;background:#fafafa}
.mk-toast img[src=""]{display:none}
.mk-toast p{margin:0;min-width:0;display:grid;gap:2px;font-size:13px;line-height:1.35}
.mk-toast p b{font-family:var(--mk-font);font-weight:400;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.mk-toast p span{color:var(--mk-dim,#6f757d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-toast-b{min-height:40px;padding:0 12px;border:2px solid transparent;color:#fff;cursor:pointer;white-space:nowrap;font-family:var(--mk-font);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--mk-chrome) padding-box,var(--mk-rim) border-box}
/* con el botón flotante, el aviso se corre para no taparlo */
@media (max-width:860px){.mk-toast{bottom:calc(84px + env(safe-area-inset-bottom))}}

/* botón que acaba de agregar */
.agregado{filter:brightness(1.15)}
@media (prefers-reduced-motion:reduce){.mk-toast{transition:none}.bolsa-b.salto,.bolsa-fab.salto{animation:none}}

/* ===== 16-oct-2026 · NÍTIDA ===== */
/* el botón de la bolsa con el mismo cromo y el mismo alto que ES/EN, alineados */
.hd-acts{gap:6px}
.bolsa-b{height:30px;width:34px;box-sizing:border-box;border:2px solid transparent;background:var(--chrome-face,linear-gradient(180deg,#fff,#dde1e5)) padding-box,var(--chrome-rim,linear-gradient(180deg,#fff,#9aa0a8 50%,#fff)) border-box}
.hd-acts .lang{height:30px;box-sizing:border-box;display:inline-grid;place-items:center;padding:0 8px}
/* en el teléfono el aviso "se agregó" sale ARRIBA: así no tapa el botón que se acaba de tocar ni el flotante */
@media (max-width:860px){
  .mk-toast{top:calc(10px + env(safe-area-inset-top));bottom:auto;transform:translate(-50%,-24px);width:min(420px,calc(100vw - 24px))}
  .mk-toast.on{transform:translate(-50%,0)}
}
/* pantallas angostas: foto + texto en una fila y el botón "Ver bolsa" abajo a todo el ancho (nada se corta) */
@media (max-width:520px){
  .mk-toast{grid-template-columns:auto minmax(0,1fr);gap:8px 10px;padding:9px 10px}
  .mk-toast img{width:40px;height:40px}
  .mk-toast p b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mk-toast-b{grid-column:1/-1;min-height:38px}
}
/* el flotante nunca tapa los botones del final del pie */
@media (max-width:860px){body:has(#bolsaFab:not([hidden])) .foot{padding-bottom:calc(86px + env(safe-area-inset-bottom))}}
.bolsa-b,.hd-acts .lang{box-shadow:0 0 0 1px rgba(30,34,40,.30),0 2px 4px rgba(20,24,30,.10)}
/* el nombre de la prenda en el aviso se lee completo (hasta 2 líneas) en vez de cortarse con "…" */
.mk-toast p span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* 28-oct-2026: aviso cuando la bolsa se ajusta sola (talla con menos unidades) */
.mk-bolsa .mk-ajuste{margin:0 0 12px;padding:10px 12px;background:#fff8e6;border:1.5px solid #f2d48a;color:#7a4d00;font-weight:600}