/*!
 * Shop · catálogo (tienda + categorías) y tarjetas de producto
 * Se carga en: tienda, categoría, single (relacionados), carro vacío y páginas de estado de pago (sugeridos).
 */

/* ═════════════ Encabezado ═════════════ */
.mbs-pagehead{padding:28px 0 20px}
.mbs-pagehead__title{font-size:clamp(34px,9vw,52px);line-height:1.02;letter-spacing:-.025em}
.mbs-pagehead__intro{max-width:52ch;margin-top:10px;font-size:16px;color:var(--ink-3)}
@media (min-width:768px){.mbs-pagehead{padding:44px 0 28px}.mbs-pagehead__intro{font-size:17px}}

/* ═════════════ Chips de categorías ═════════════ */
.mbs-chips{display:flex;gap:8px;margin:0 calc(var(--gutter)*-1) 22px;padding:2px var(--gutter);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mbs-chips::-webkit-scrollbar{display:none}
.mbs-chip{flex:none;padding:10px 18px;border:1px solid var(--line-2);border-radius:999px;background:#fff;font-size:14px;line-height:1;text-decoration:none;color:var(--ink);transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease,transform 160ms var(--ease-out)}
.mbs-chip:active{transform:scale(.97)}
.mbs-chip.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
@media (hover:hover) and (pointer:fine){.mbs-chip:not(.is-active):hover{border-color:var(--ink)}}
@media (min-width:1200px){.mbs-chips{margin-inline:0;padding-inline:0}}

/* ═════════════ Destacados (primera jerarquía) ═════════════ */
.mbs-featured{display:grid;gap:20px}
@media (min-width:768px){.mbs-featured{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}

.mbs-hero{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-l);background:var(--surface)}
.mbs-hero__media{position:relative;display:grid;place-items:center;aspect-ratio:1/1;padding:26px 22px;text-decoration:none}
.mbs-hero__media .mbs-img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform 400ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.mbs-hero__media:hover .mbs-img{transform:scale(1.025)}}
.mbs-hero__body{display:flex;flex-direction:column;gap:10px;flex:1;padding:6px 22px 24px}
.mbs-hero__title{font-size:clamp(26px,7vw,32px);line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
.mbs-hero__title a{text-decoration:none}
.mbs-hero__text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;color:var(--ink-2)}
.mbs-hero__buy{display:flex;flex-direction:column;gap:14px;margin-top:auto;padding-top:10px}
.mbs-hero__buy .mbs-price{font-size:22px}
.mbs-hero__actions{display:flex;flex-wrap:wrap;gap:10px}
.mbs-hero__actions .mbs-btn{flex:1 1 140px}
.mbs-hero__form{display:contents}

/* ═════════════ Grilla chica (segunda jerarquía: merch, combos) ═════════════ */
.mbs-grid-sec{margin-top:44px}
.mbs-featured+.mbs-grid-sec{margin-top:52px}
.mbs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 12px}
@media (min-width:640px){.mbs-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 16px}}
@media (min-width:1024px){.mbs-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 20px}}
.mbs-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}

.mbs-card__top{position:relative}
.mbs-card__media{position:relative;display:grid;place-items:center;aspect-ratio:4/5;padding:12%;overflow:hidden;border-radius:var(--r-m);background:var(--surface);text-decoration:none}
.mbs-card__media .mbs-img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform 350ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.mbs-card:hover .mbs-card__media .mbs-img{transform:scale(1.04)}}
.mbs-card .mbs-badge{top:10px;left:10px}
.mbs-card__info{display:block;padding:12px 2px 0;text-decoration:none}
.mbs-card__name{font:500 15px/1.3 var(--font-body);letter-spacing:0}
.mbs-card__price{margin-top:4px;font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.mbs-card__price del{color:var(--ink-3);margin-right:6px}
.mbs-card__price ins{text-decoration:none;color:var(--ink);font-weight:600}
.mbs-card__add{position:absolute;right:10px;bottom:10px;margin:0}

.mbs-quickadd{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line-2);border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;text-decoration:none;box-shadow:0 2px 10px rgba(0,0,0,.08);touch-action:manipulation;transition:background-color 160ms ease,border-color 160ms ease,transform 160ms var(--ease-out)}
.mbs-card__top>.mbs-quickadd{position:absolute;right:10px;bottom:10px}
.mbs-quickadd:active{transform:scale(.92)}
.mbs-quickadd .mbs-icon{width:20px;height:20px}
@media (hover:hover) and (pointer:fine){.mbs-quickadd:hover{background:var(--accent);border-color:var(--accent)}}
.mbs-quickadd[data-state=loading]{pointer-events:none}
.mbs-quickadd[data-state=loading] .mbs-icon{opacity:0}
.mbs-quickadd[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-quickadd[data-state=done]{background:var(--accent);border-color:var(--accent)}
.mbs-quickadd[data-state=done] .mbs-icon{animation:mbs-fade 220ms ease-out}

/* ═════════════ "Próximamente" / vacío ═════════════ */
.mbs-soon{margin-top:44px;padding:36px 24px;border:1.5px dashed var(--line-2);border-radius:var(--r-l);text-align:center}
.mbs-soon h2{font-size:22px}
.mbs-soon p{max-width:40ch;margin:8px auto 0;color:var(--ink-3);font-size:15px}
.mbs-soon a{text-underline-offset:3px}

/* ═════════════ Paginación ═════════════ */
.mbs-pager{margin-top:40px}
.mbs-pager ul{display:flex;justify-content:center;flex-wrap:wrap;gap:6px}
.mbs-pager :is(a,span).page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--line-2);border-radius:999px;font-size:14px;text-decoration:none;color:var(--ink);transition:border-color 160ms ease,background-color 160ms ease}
.mbs-pager .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff}
.mbs-pager .page-numbers.dots{border-color:transparent}
.mbs-pager .mbs-icon{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){.mbs-pager a.page-numbers:hover{border-color:var(--ink)}}

@media (prefers-reduced-motion:reduce){
  .mbs-hero__media .mbs-img,.mbs-card__media .mbs-img{transition:none}
  .mbs-hero__media:hover .mbs-img,.mbs-card:hover .mbs-card__media .mbs-img{transform:none}
}