/*!
 * Shop · base compartida
 * Tokens + reset acotado + header + footer + botones + avisos + panel del carro ("popover").
 * La cargan TODOS los templates shop (la encola includes/shop/header.php).
 * Todo va con prefijo mbs- y colgado de .mbs-body para no chocar con el tema / Elementor / WooCommerce.
 *
 * Animaciones (skill emilkowalski): solo transform + opacity, ease-out fuerte (.23,1,.32,1) o drawer (.32,.72,0,1),
 * UI < 300 ms, feedback de botón al apretar (scale .97), :hover solo en dispositivos con hover, y prefers-reduced-motion.
 */

/* ═════════════ Tokens ═════════════ */
.mbs-body{
  --bg:#fff;
  --ink:#0a0a0a;
  --ink-2:#3f3f3f;
  --ink-3:#6b6b6b;           /* texto de apoyo: AA sobre blanco y sobre --surface */
  --line:#e8e8e5;
  --line-2:#d5d5d1;
  --surface:#f5f5f3;         /* fondo de las tapas */
  --surface-2:#eeeeeb;
  --accent:#E8D637;          /* SOLO botones principales */
  --accent-hover:#EFDF50;
  --accent-press:#DCCB2B;

  --r-s:10px;
  --r-m:14px;
  --r-l:20px;

  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);

  --font-display:'Fraunces',Georgia,serif;
  --font-body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  --gutter:16px;
  --bar-h:76px;               /* alto de las barras fijas de mobile (Comprar / Pagar) */

  margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  background:var(--bg);color:var(--ink);
  font:400 16px/1.5 var(--font-body);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  overflow-x:clip;
}
@media (min-width:640px){.mbs-body{--gutter:24px}}
@media (min-width:1024px){.mbs-body{--gutter:32px}}

/* ═════════════ Reset acotado (especificidad 0: nunca pisa a los componentes) ═════════════ */
:where(.mbs-body) *,:where(.mbs-body) *::before,:where(.mbs-body) *::after{box-sizing:border-box}
:where(.mbs-body) :is(h1,h2,h3,h4){margin:0;font-family:var(--font-display);font-weight:500;letter-spacing:-.015em;line-height:1.15}
:where(.mbs-body) :is(p,figure,dl,dd){margin:0}
:where(.mbs-body) :is(ol,ul){margin:0;padding:0;list-style:none}
:where(.mbs-body) a{color:inherit}
:where(.mbs-body) img{max-width:100%;height:auto}
:where(.mbs-body) button{font:inherit;color:inherit}
:where(.mbs-body) :focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.mbs-body ::selection{background:var(--accent);color:var(--ink)}
.mbs-body [hidden]{display:none!important}

.mbs-main{flex:1;width:100%;overflow-x:clip}
.mbs-wrap{width:100%;max-width:1160px;margin-inline:auto;padding-inline:var(--gutter)}
.mbs-icon{width:20px;height:20px;flex:none}
.mbs-sr,.mbs-body .screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mbs-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.mbs-skip{position:absolute;left:12px;top:-64px;z-index:100;padding:10px 16px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font-size:13px;transition:top 160ms var(--ease-out)}
.mbs-skip:focus{top:12px}

/* ═════════════ Header ═════════════ */
.mbs-announce{margin:0;padding:9px var(--gutter);background:var(--ink);color:#fff;font-size:12.5px;letter-spacing:.02em;text-align:center}
.mbs-header{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line)}
.mbs-header--checkout{position:static}
.mbs-header__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px}
@media (min-width:768px){.mbs-header__bar{height:68px}}
.mbs-brand{font-family:var(--font-display);font-weight:500;font-size:20px;letter-spacing:-.015em;text-decoration:none;color:var(--ink);white-space:nowrap}
@media (min-width:768px){.mbs-brand{font-size:22px}}

.mbs-nav{display:none}
@media (min-width:768px){
  .mbs-nav{display:flex;gap:28px;margin:0 8px 0 auto;font-size:14px}
  .mbs-nav a{color:var(--ink-2);text-decoration:none;padding:8px 0;transition:color 160ms ease}
}
@media (hover:hover) and (pointer:fine){.mbs-nav a:hover{color:var(--ink)}}

.mbs-cartbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;border-radius:50%;color:var(--ink);text-decoration:none;transition:background-color 160ms ease,transform 160ms var(--ease-out)}
.mbs-cartbtn:active{transform:scale(.94)}
.mbs-cartbtn .mbs-icon{width:24px;height:24px}
@media (hover:hover) and (pointer:fine){.mbs-cartbtn:hover{background:var(--surface)}}
.mbs-cartbtn__count{position:absolute;top:3px;right:1px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--ink);color:#fff;font:600 11px/18px var(--font-body);text-align:center;font-variant-numeric:tabular-nums}
.mbs-cartbtn__count.is-bump{animation:mbs-bump 380ms var(--ease-out)}
@keyframes mbs-bump{40%{transform:scale(1.35)}}

/* Header del checkout: volver · marca · pago seguro */
.mbs-header--checkout .mbs-header__bar{display:grid;grid-template-columns:1fr auto 1fr}
.mbs-header--checkout .mbs-brand{justify-self:center}
.mbs-header__back{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px;color:var(--ink-2);text-decoration:none;justify-self:start}
.mbs-header__secure{display:inline-flex;align-items:center;gap:6px;justify-self:end;font-size:12.5px;color:var(--ink-3)}
.mbs-header__secure .mbs-icon,.mbs-header__back .mbs-icon{width:16px;height:16px}
@media (max-width:420px){.mbs-header__secure span{display:none}}

/* ═════════════ Footer ═════════════ */
.mbs-footer{margin-top:72px;padding:40px 0 32px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3)}
.mbs-footer .mbs-wrap{display:grid;gap:24px}
.mbs-footer__brand p{margin-top:6px;max-width:34ch}
.mbs-footer nav{display:flex;flex-wrap:wrap;gap:6px 22px;align-content:start}
.mbs-footer a{color:var(--ink-2);text-decoration:none;transition:color 160ms ease}
@media (hover:hover) and (pointer:fine){.mbs-footer a:hover{color:var(--ink)}}
.mbs-footer__legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px}
.mbs-footer__qk{display:inline-flex;align-items:center;gap:8px}
.mbs-footer__qk img{height:16px;width:auto;opacity:.55;filter:brightness(0)}
@media (min-width:768px){
  .mbs-footer .mbs-wrap{grid-template-columns:1fr auto;align-items:start}
  .mbs-footer__legal{grid-column:1/-1;padding-top:20px;border-top:1px solid var(--line)}
}
.mbs-footer--min{margin-top:32px;padding:20px 0}
.mbs-footer--min .mbs-wrap{display:block}
.mbs-footer--min .mbs-footer__legal{border:0;padding:0}
@media (max-width:899px){
  .mbs-has-bar .mbs-footer{padding-bottom:calc(var(--bar-h) + 28px + env(safe-area-inset-bottom))}
}

/* ═════════════ Botones ═════════════ */
.mbs-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;padding:0 24px;border:1.5px solid transparent;border-radius:999px;
  font:500 15px/1 var(--font-body);letter-spacing:.005em;text-decoration:none;white-space:nowrap;cursor:pointer;
  touch-action:manipulation;
  transition:background-color 160ms ease,border-color 160ms ease,color 160ms ease,transform 160ms var(--ease-out),opacity 160ms ease;
}
.mbs-btn .mbs-icon{width:18px;height:18px}
.mbs-btn:active{transform:scale(.97)}
.mbs-btn--block{display:flex;width:100%}
.mbs-btn--primary{background:var(--accent);border-color:var(--accent);color:var(--ink);font-weight:600}
.mbs-btn--primary:active{background:var(--accent-press);border-color:var(--accent-press)}
.mbs-btn--ghost{background:#fff;border-color:var(--line-2);color:var(--ink)}
.mbs-btn--dark{background:var(--ink);border-color:var(--ink);color:#fff}
@media (hover:hover) and (pointer:fine){
  .mbs-btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
  .mbs-btn--ghost:hover{border-color:var(--ink)}
  .mbs-btn--dark:hover{background:#262626;border-color:#262626}
}
.mbs-btn:is([disabled],.is-disabled){opacity:.45;pointer-events:none}
.mbs-btn.disabled{opacity:.5}
/* estados del botón al agregar: cargando → agregado */
.mbs-btn[data-state=loading]{pointer-events:none}
.mbs-btn[data-state=loading] .mbs-btn__label{opacity:0}
.mbs-btn[data-state=loading]::after{content:"";position:absolute;width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:mbs-spin 700ms linear infinite}
.mbs-btn[data-state=done] .mbs-btn__label{display:inline-flex;align-items:center;gap:8px;animation:mbs-fade 220ms ease-out}
@keyframes mbs-spin{to{transform:rotate(360deg)}}
@keyframes mbs-fade{from{opacity:0}}

.mbs-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;cursor:pointer;color:var(--ink);transition:background-color 160ms ease,transform 160ms var(--ease-out)}
.mbs-iconbtn:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.mbs-iconbtn:hover{background:var(--surface)}}
.mbs-link{padding:6px 0;border:0;background:none;font-size:13.5px;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2);cursor:pointer;transition:color 160ms ease,text-decoration-color 160ms ease}
@media (hover:hover) and (pointer:fine){.mbs-link:hover{color:var(--ink);text-decoration-color:var(--ink)}}

/* ═════════════ Piezas compartidas ═════════════ */
.mbs-eyebrow{margin:0;font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.mbs-eyebrow a{color:inherit;text-decoration:none}
.mbs-eyebrow--center{text-align:center}

.mbs-price{margin:0;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.mbs-price del{margin-right:8px;font-weight:400;color:var(--ink-3);text-decoration-thickness:1px}
.mbs-price ins{text-decoration:none}
.mbs-price--lg{font-size:26px;letter-spacing:-.01em}
.mbs-price .woocommerce-price-suffix{font-size:.6em;font-weight:400;color:var(--ink-3)}

.mbs-badge{position:absolute;top:12px;left:12px;z-index:2;padding:6px 11px;border-radius:999px;background:var(--ink);color:#fff;font:600 11.5px/1 var(--font-body);letter-spacing:.04em}
.mbs-badge--out{background:#fff;color:var(--ink);border:1px solid var(--line-2)}

.mbs-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 18px}
.mbs-sec-head h2{font-size:22px}
@media (min-width:768px){.mbs-sec-head h2{font-size:26px}}

.mbs-crumbs ol{display:flex;flex-wrap:nowrap;gap:6px;margin:0;padding:14px 0 0;font-size:12.5px;color:var(--ink-3)}
.mbs-crumbs li{flex:none}
.mbs-crumbs li:last-child{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.mbs-crumbs li+li::before{content:"›";margin-right:6px;opacity:.6}
.mbs-crumbs a{text-decoration:none}
@media (hover:hover) and (pointer:fine){.mbs-crumbs a:hover{color:var(--ink)}}

.mbs-prose>*+*{margin-top:.9em}
.mbs-prose a{text-underline-offset:3px}
.mbs-prose ul{list-style:disc;padding-left:1.2em}
.mbs-prose ol{list-style:decimal;padding-left:1.2em}

/* Selector de cantidad (WooCommerce .quantity + botones que agrega shop.js) */
.mbs-body .quantity{display:inline-flex;align-items:center;height:50px;border:1.5px solid var(--line-2);border-radius:999px;background:#fff;overflow:hidden}
.mbs-body .quantity input.qty{width:44px;min-height:0;height:100%;padding:0;border:0;border-radius:0;background:transparent;text-align:center;font:600 16px var(--font-body);color:var(--ink);-moz-appearance:textfield;appearance:textfield;box-shadow:none}
.mbs-body .quantity input.qty::-webkit-outer-spin-button,.mbs-body .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.mbs-qty__btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:100%;border:0;background:transparent;cursor:pointer;color:var(--ink);transition:background-color 160ms ease,transform 160ms var(--ease-out)}
.mbs-qty__btn:active{transform:scale(.9)}
.mbs-qty__btn .mbs-icon{width:16px;height:16px}
@media (hover:hover) and (pointer:fine){.mbs-qty__btn:hover{background:var(--surface)}}

/* Avisos de WooCommerce (todas las pantallas) */
.mbs-body .woocommerce-notices-wrapper:empty{display:none}
.mbs-body :is(.woocommerce-message,.woocommerce-info,.woocommerce-error){
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;
  margin:0 0 16px;padding:14px 16px;list-style:none;border:1px solid var(--line-2);border-left:3px solid var(--ink);border-radius:var(--r-s);background:var(--surface);font-size:14px;line-height:1.45;
  animation:mbs-rise 320ms var(--ease-out);
}
.mbs-body .woocommerce-error li{margin:0}
.mbs-body :is(.woocommerce-message,.woocommerce-info) .button{order:2;padding:0;border:0;background:none;font-weight:600;text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
.mbs-body .woocommerce-error a{font-weight:600}

/* ═════════════ Entrada (ease-out fuerte, transform + opacity, stagger 60 ms; nunca sobre imágenes/LCP) ═════════════ */
@keyframes mbs-rise{from{opacity:0;transform:translateY(12px)}}
.mbs-js .mbs-reveal{animation:mbs-rise 520ms var(--ease-out) backwards;animation-delay:calc(var(--i,0)*60ms + 60ms)}

/* ═════════════ Panel del carro (el "popover" al agregar) ═════════════ */
.mbs-sheet{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--ink);overflow:visible}
.mbs-sheet:not([open]){display:none}
.mbs-sheet::backdrop{background:rgba(10,10,10,.42)}
.mbs-sheet[open]::backdrop{animation:mbs-fade 200ms ease-out}
.mbs-sheet.is-closing::backdrop{opacity:0;transition:opacity 200ms ease-out}

.mbs-sheet__panel{
  position:fixed;left:0;right:0;bottom:0;display:flex;flex-direction:column;
  max-height:min(88svh,680px);padding-bottom:env(safe-area-inset-bottom);
  background:#fff;border-radius:22px 22px 0 0;box-shadow:0 -24px 60px rgba(0,0,0,.18);
  transform-origin:bottom center;will-change:transform;
}
.mbs-sheet[open] .mbs-sheet__panel{animation:mbs-sheet-in 320ms var(--ease-drawer)}
.mbs-sheet.is-closing .mbs-sheet__panel{animation:mbs-sheet-out 220ms var(--ease-drawer) forwards}
.mbs-sheet.is-dragging .mbs-sheet__panel{animation:none;transition:none}
@keyframes mbs-sheet-in{from{transform:translateY(100%)}}
@keyframes mbs-sheet-out{to{transform:translateY(100%)}}

.mbs-sheet__grab{flex:none;width:40px;height:4px;margin:10px auto 0;border-radius:2px;background:var(--line-2);touch-action:none}
.mbs-sheet__head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 8px 6px 20px;touch-action:none}
.mbs-sheet__title{display:flex;align-items:center;gap:10px;font:500 20px/1.2 var(--font-display);letter-spacing:-.015em}
.mbs-sheet__ok{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--ink)}
.mbs-sheet__ok .mbs-icon{width:15px;height:15px;stroke-width:2.4}
.mbs-sheet__ok .mbs-draw{stroke-dasharray:24;stroke-dashoffset:24;animation:mbs-draw 380ms var(--ease-out) 140ms forwards}
@keyframes mbs-draw{to{stroke-dashoffset:0}}

.mbs-sheet__body{display:flex;flex-direction:column;min-height:0;flex:1}
.mbs-sheet__list{flex:1;min-height:0;margin:0;padding:6px 20px;overflow-y:auto;overscroll-behavior:contain}
.mbs-sitem{display:grid;grid-template-columns:76px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);transition:opacity 160ms ease}
.mbs-sitem:last-child{border-bottom:0}
.mbs-sitem.is-busy{opacity:.5;pointer-events:none}
.mbs-sitem.is-new{animation:mbs-flash 1400ms ease-out}
@keyframes mbs-flash{0%,35%{background:var(--surface);box-shadow:-20px 0 0 var(--surface),20px 0 0 var(--surface)}100%{background:transparent;box-shadow:-20px 0 0 transparent,20px 0 0 transparent}}
.mbs-sitem__media{display:block;aspect-ratio:4/5;border-radius:var(--r-s);background:var(--surface);overflow:hidden}
.mbs-sitem__media .mbs-img{display:block;width:100%;height:100%;object-fit:contain;padding:6px}
.mbs-sitem__body{min-width:0;display:flex;flex-direction:column;gap:2px}
.mbs-sitem__name{font-weight:500;font-size:15px;line-height:1.3}
.mbs-sitem__name a{text-decoration:none}
.mbs-sitem__price{font-size:13.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.mbs-sitem__row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:8px}
.mbs-sitem__total{font-size:15px;font-variant-numeric:tabular-nums}
.mbs-sitem dl.variation{font-size:12.5px;color:var(--ink-3)}
.mbs-sitem dl.variation :is(dt,dd){display:inline;margin:0}
.mbs-sitem dl.variation dd p{display:inline}

/* Insignia "Oferta especial" (Retiro en evento): junto al nombre del producto en el panel del carro, /carrito y el checkout. */
.mbs-event-badge{display:inline-flex;align-items:center;gap:5px;margin:0 6px 2px 0;vertical-align:middle}
.mbs-event-badge__logo{display:block;width:18px;height:18px;object-fit:contain;border-radius:4px}
.mbs-event-badge__tag{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:999px;background:var(--accent);color:var(--ink);font:600 10px/1 var(--font-body);letter-spacing:.03em;white-space:nowrap}

.mbs-stepper{display:inline-flex;align-items:center;height:38px;border:1.5px solid var(--line-2);border-radius:999px;background:#fff}
.mbs-stepper__btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:100%;border:0;border-radius:50%;background:transparent;cursor:pointer;color:var(--ink);transition:background-color 160ms ease,transform 160ms var(--ease-out),opacity 160ms ease}
.mbs-stepper__btn .mbs-icon{width:15px;height:15px}
.mbs-stepper__btn:active{transform:scale(.9)}
.mbs-stepper__btn[disabled]{opacity:.3;pointer-events:none}
.mbs-stepper__val{min-width:24px;text-align:center;font:600 14px var(--font-body);font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){.mbs-stepper__btn:hover{background:var(--surface)}}

.mbs-sheet__foot{flex:none;display:grid;gap:10px;padding:16px 20px 18px;border-top:1px solid var(--line);background:#fff}
.mbs-sheet__sub{display:flex;align-items:baseline;justify-content:space-between;font-size:15px}
.mbs-sheet__sub strong{font-size:20px;font-variant-numeric:tabular-nums}
.mbs-sheet__note{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-3)}
.mbs-sheet__note .mbs-icon{width:15px;height:15px}

.mbs-sheet__empty{display:grid;justify-items:center;gap:8px;padding:36px 24px 40px;text-align:center}
.mbs-sheet__empty-ico{display:grid;place-items:center;width:56px;height:56px;margin-bottom:6px;border-radius:50%;background:var(--surface)}
.mbs-sheet__empty-ico .mbs-icon{width:26px;height:26px}
.mbs-sheet__empty-title{font:500 20px var(--font-display)}
.mbs-sheet__empty-text{margin-bottom:12px;color:var(--ink-3);font-size:14.5px}

.mbs-skel{padding:8px 20px 24px}
.mbs-skel__row{display:flex;gap:14px;padding:14px 0}
.mbs-skel__row i{width:76px;aspect-ratio:4/5;border-radius:var(--r-s);background:var(--surface)}
.mbs-skel__row span{flex:1;height:14px;margin-top:6px;border-radius:7px;background:var(--surface)}
.mbs-skel i,.mbs-skel span{animation:mbs-pulse 1200ms ease-in-out infinite}
@keyframes mbs-pulse{50%{opacity:.5}}

/* Desktop: cae debajo del ícono del carro (nace en la esquina superior derecha, no desde el centro) */
@media (min-width:768px){
  .mbs-sheet::backdrop{background:rgba(10,10,10,.22)}
  .mbs-sheet__panel{left:auto;right:max(24px,calc((100vw - 1160px)/2 + 16px));top:72px;bottom:auto;width:400px;max-height:calc(100svh - 96px);border-radius:18px;transform-origin:top right;box-shadow:0 24px 70px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.04)}
  .mbs-sheet[open] .mbs-sheet__panel{animation:mbs-pop-in 220ms var(--ease-out)}
  .mbs-sheet.is-closing .mbs-sheet__panel{animation:mbs-pop-out 160ms var(--ease-out) forwards}
  .mbs-sheet__grab{display:none}
  .mbs-sheet__head{padding-top:14px}
}
@keyframes mbs-pop-in{from{opacity:0;transform:translateY(-6px) scale(.96)}}
@keyframes mbs-pop-out{to{opacity:0;transform:scale(.97)}}

/* Aviso de error (toast) */
.mbs-toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));z-index:200;max-width:min(92vw,420px);padding:12px 18px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;text-align:center;opacity:0;transform:translate(-50%,12px);transition:opacity 200ms ease-out,transform 240ms var(--ease-out);pointer-events:none}
.mbs-toast.is-in{opacity:1;transform:translate(-50%,0)}
.mbs-has-bar .mbs-toast{bottom:calc(var(--bar-h) + 16px + env(safe-area-inset-bottom))}

/* ═════════════ Movimiento reducido: solo fundidos, sin desplazamientos ═════════════ */
@media (prefers-reduced-motion:reduce){
  .mbs-js .mbs-reveal{animation:mbs-fade 200ms ease-out backwards;animation-delay:0ms}
  .mbs-sheet[open] .mbs-sheet__panel,.mbs-sheet.is-closing .mbs-sheet__panel{animation:mbs-fade 160ms ease-out}
  .mbs-sheet.is-closing .mbs-sheet__panel{animation:none;opacity:0}
  .mbs-cartbtn__count.is-bump,.mbs-sitem.is-new{animation:none}
  .mbs-sheet__ok .mbs-draw{animation:none;stroke-dashoffset:0}
  .mbs-btn:active,.mbs-iconbtn:active,.mbs-cartbtn:active,.mbs-qty__btn:active,.mbs-stepper__btn:active{transform:none}
  .mbs-toast{transform:translateX(-50%)}
}

/* Beneficios (lista corta con ícono: single de producto y checkout) */
.mbs-benefits{display:grid;gap:10px;margin-top:22px;padding:18px 0 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-2)}
.mbs-benefits li{display:flex;align-items:center;gap:10px}
.mbs-benefits .mbs-icon{width:18px;height:18px;color:var(--ink)}

/* ═════════════ Pedido: productos con tapa grande ═════════════ */
.mbs-lines{display:grid;gap:14px;margin:0}
.mbs-line{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center}
.mbs-line__media{position:relative;width:108px;aspect-ratio:4/5;flex:none}
.mbs-line__media .mbs-img{display:block;width:100%;height:100%;padding:4px;object-fit:contain;border-radius:12px;background:var(--surface)}
.mbs-line__qty{position:absolute;top:-8px;right:-8px;display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--ink);color:#fff;font:600 12px/1 var(--font-body);font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px #fff}
.mbs-line__name{font:500 16px/1.25 var(--font-display);letter-spacing:-.01em}
.mbs-line__unit{margin-top:4px;font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.mbs-line__total{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;align-self:start;padding-top:2px}
.mbs-line dl.variation{margin-top:2px;font-size:12.5px;color:var(--ink-3)}
.mbs-line dl.variation :is(dt,dd){display:inline;margin:0}
.mbs-line dl.variation dd p{display:inline}
@media (min-width:700px){.mbs-line__media{width:120px}}

/* ═════════════ Header: avatar de Max, enlaces que salen de la tienda, usuario ═════════════ */
.mbs-brand--avatar{display:inline-flex;align-items:center;gap:10px}
.mbs-avatar{display:block;flex:none;width:34px;height:34px;border:1px solid #000;border-radius:50%;background:#fff;overflow:hidden}
.mbs-avatar img{display:block;width:100%;height:100%;object-fit:cover}

/* "Justo ayer ↗" y "Despoblados ↗": la flecha avisa que se sale de la tienda */
.mbs-out{display:inline-flex;align-items:center;gap:3px}
.mbs-out .mbs-icon{width:13px;height:13px;margin-top:-1px;opacity:.65;transition:transform 200ms var(--ease-out),opacity 160ms ease}
@media (hover:hover) and (pointer:fine){.mbs-out:hover .mbs-icon{opacity:1;transform:translate(1px,-1px)}}

/* En mobile la navegación baja a una tira debajo del header (no fija: no le quita alto a la pantalla) */
.mbs-subnav{display:flex;gap:22px;padding:0 var(--gutter);overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);font-size:13.5px}
.mbs-subnav::-webkit-scrollbar{display:none}
.mbs-subnav a{flex:none;display:inline-flex;align-items:center;min-height:42px;color:var(--ink-2);text-decoration:none}
@media (min-width:768px){.mbs-subnav{display:none}}

.mbs-actions{display:flex;align-items:center;gap:2px}
.mbs-user{position:relative}
.mbs-userbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;touch-action:manipulation;transition:background-color 160ms ease,transform 160ms var(--ease-out)}
.mbs-userbtn:active{transform:scale(.94)}
.mbs-userbtn .mbs-icon{width:24px;height:24px}
.mbs-userbtn.is-in::after{content:"";position:absolute;right:9px;bottom:10px;width:9px;height:9px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px #fff}
.mbs-userbtn[aria-expanded=true]{background:var(--surface)}
@media (hover:hover) and (pointer:fine){.mbs-userbtn:hover{background:var(--surface)}}

.mbs-menu{position:absolute;top:calc(100% + 6px);right:-8px;z-index:45;min-width:208px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.14);transform-origin:top right}
.mbs-menu:not([hidden]){animation:mbs-pop-in 180ms var(--ease-out)}
.mbs-menu.is-closing{animation:mbs-pop-out 120ms var(--ease-out) forwards}
.mbs-menu a{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:10px;font-size:14.5px;color:var(--ink);text-decoration:none;transition:background-color 140ms ease}
.mbs-menu a .mbs-icon{width:18px;height:18px;color:var(--ink-3)}
.mbs-menu a.mbs-menu__out{margin-top:7px;color:var(--ink-3)}
.mbs-menu a.mbs-menu__out::before{content:"";position:absolute;left:12px;right:12px;top:-4px;height:1px;background:var(--line)}
.mbs-menu a:active{background:var(--surface-2)}
@media (hover:hover) and (pointer:fine){.mbs-menu a:hover{background:var(--surface)}}

/* ═════════════ Ventanas (ingreso, editar perfil/dirección): mobile sube desde abajo, desktop aparece al centro ═════════════ */
.mbs-modal{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--ink);overflow:visible}
.mbs-modal:not([open]){display:none}
.mbs-modal::backdrop{background:rgba(10,10,10,.42)}
.mbs-modal[open]::backdrop{animation:mbs-fade 200ms ease-out}
.mbs-modal.is-closing::backdrop{opacity:0;transition:opacity 200ms ease-out}
.mbs-modal__panel{
  position:fixed;left:0;right:0;bottom:0;max-height:min(92svh,760px);overflow-y:auto;overscroll-behavior:contain;
  padding:0 20px calc(26px + env(safe-area-inset-bottom));background:#fff;border-radius:22px 22px 0 0;box-shadow:0 -24px 60px rgba(0,0,0,.18);
  transform-origin:bottom center;
}
.mbs-modal[open] .mbs-modal__panel{animation:mbs-sheet-in 320ms var(--ease-drawer)}
.mbs-modal.is-closing .mbs-modal__panel{animation:mbs-sheet-out 220ms var(--ease-drawer) forwards}
.mbs-modal.is-dragging .mbs-modal__panel{animation:none;transition:none}
.mbs-modal__close{position:absolute;top:8px;right:8px;z-index:2}
.mbs-modal .mbs-sheet__grab{position:sticky;top:0}
@media (min-width:768px){
  .mbs-modal::backdrop{background:rgba(10,10,10,.3)}
  .mbs-modal__panel{inset:0;margin:auto;width:min(440px,calc(100vw - 32px));height:fit-content;max-height:calc(100svh - 48px);padding:0 28px 30px;border-radius:20px;transform-origin:center;box-shadow:0 30px 80px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.04)}
  .mbs-modal[open] .mbs-modal__panel{animation:mbs-modal-in 220ms var(--ease-out)}
  .mbs-modal.is-closing .mbs-modal__panel{animation:mbs-modal-out 150ms var(--ease-out) forwards}
  .mbs-modal .mbs-sheet__grab{display:none}
  .mbs-modal__close{top:12px;right:12px}
}
@keyframes mbs-modal-in{from{opacity:0;transform:scale(.96)}}
@keyframes mbs-modal-out{to{opacity:0;transform:scale(.97)}}

/* ═════════════ Ingreso con mail + código, formularios ═════════════ */
.mbs-auth{padding-top:20px}
.mbs-auth__title{display:flex;align-items:center;gap:10px;margin:0 36px 8px 0;font:500 24px/1.15 var(--font-display);letter-spacing:-.015em}
.mbs-auth__title .mbs-icon{width:24px;height:24px;flex:none}
.mbs-auth__text{margin:0 0 20px;font-size:14.5px;line-height:1.5;color:var(--ink-3)}
.mbs-auth__text strong{color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.mbs-auth__form{display:grid;gap:14px}
.mbs-auth__step:not([hidden]){animation:mbs-rise 280ms var(--ease-out)}
.mbs-auth__msg{margin:-4px 0 0;font-size:13.5px;line-height:1.4;color:#b3261e}
.mbs-auth__msg.is-ok{color:var(--ink-2)}
.mbs-auth__links{display:flex;justify-content:space-between;gap:12px}
.mbs-auth__links .mbs-link[disabled]{opacity:.5;cursor:default;text-decoration:none}
.mbs-modal .mbs-auth__title{margin-top:0}

.mbs-field{display:grid;gap:6px;min-width:0}
.mbs-field__label{font-size:12.5px;font-weight:500;letter-spacing:.01em;color:var(--ink-2)}
.mbs-field__label em{font-style:normal;font-weight:400;color:var(--ink-3)}
.mbs-input{display:block;width:100%;min-height:50px;padding:0 16px;border:1.5px solid var(--line-2);border-radius:var(--r-m);background:#fff;font:400 16px/1.2 var(--font-body);color:var(--ink);-webkit-appearance:none;appearance:none;transition:border-color 160ms ease,box-shadow 160ms ease}
select.mbs-input{padding-right:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/18px}
.mbs-input::placeholder{color:#a3a39f}
.mbs-input:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(10,10,10,.08)}
.mbs-input[aria-invalid=true]{border-color:#b3261e}
.mbs-input--code{font:600 28px/1 var(--font-body);letter-spacing:.42em;text-align:center;text-indent:.42em;font-variant-numeric:tabular-nums;min-height:62px}
.mbs-input--code::placeholder{letter-spacing:.42em;color:#cfcfcb}

.mbs-form-grid{grid-template-columns:1fr 1fr}
.mbs-form-grid .mbs-field--full{grid-column:1/-1}
@media (max-width:339px){.mbs-form-grid{grid-template-columns:1fr}}

/* Botón chico en forma de píldora (Editar, Agregar, Volver a comprar) */
.mbs-pill{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 16px;border:1.5px solid var(--line-2);border-radius:999px;background:#fff;font:500 13.5px/1 var(--font-body);color:var(--ink);text-decoration:none;white-space:nowrap;cursor:pointer;touch-action:manipulation;transition:border-color 160ms ease,background-color 160ms ease,transform 160ms var(--ease-out)}
.mbs-pill:active{transform:scale(.97)}
.mbs-pill--solid{border-color:var(--accent);background:var(--accent);font-weight:600}
@media (hover:hover) and (pointer:fine){.mbs-pill:hover{border-color:var(--ink)}.mbs-pill--solid:hover{background:var(--accent-hover);border-color:var(--accent-hover)}}

@media (prefers-reduced-motion:reduce){
  .mbs-menu:not([hidden]),.mbs-menu.is-closing,.mbs-auth__step:not([hidden]){animation:mbs-fade 160ms ease-out}
  .mbs-menu.is-closing{animation:none;opacity:0}
  .mbs-modal[open] .mbs-modal__panel{animation:mbs-fade 160ms ease-out}
  .mbs-modal.is-closing .mbs-modal__panel{animation:none;opacity:0}
  .mbs-out:hover .mbs-icon{transform:none}
  .mbs-userbtn:active,.mbs-pill:active{transform:none}
}