/* ---------- TIENDA ---------- */
/* Producto estrella: tarjeta compacta de una fila (jersey del aficionado, título y precio, flecha). Toda la tarjeta abre el flujo */
.promo{position:relative;overflow:hidden;display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;padding:12px 14px 12px 10px;border-radius:var(--r-card);background:var(--grad);color:var(--white);text-align:left;box-shadow:var(--shadow-card);transition:transform .15s}
.promo:hover{transform:translateY(-2px)}
.promo:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.promo::before{content:"";position:absolute;width:420px;height:420px;right:-300px;top:-250px;border-radius:50%;border:1px solid rgba(126,222,241,.22);pointer-events:none}
.promo-art{display:block;width:96px;height:106px;background:radial-gradient(closest-side,rgba(73,129,214,.6),rgba(73,129,214,.12) 65%,transparent)}
/* Alto fijo y ancho completo: el SVG centra el jersey con su viewBox (sin width:auto, que Safari calcula en 0) */
.promo-art svg.jersey{display:block;width:100%;height:100%;filter:drop-shadow(0 10px 10px rgba(4,11,31,.5))}
.promo .sheen{animation:jf-sheen 6s ease-in-out 1s infinite}
.promo-tx{position:relative;display:flex;flex-direction:column;gap:3px;min-width:0}
.promo-tx .eyebrow{color:var(--cyan);letter-spacing:.06em;white-space:nowrap}
.promo-t{font-size:1.12rem;line-height:1.2}
.promo-price{margin-top:3px;font-size:.8rem;color:var(--on-dark-2)}
.promo-price b{color:var(--white);font-variant-numeric:tabular-nums;white-space:nowrap}
.promo-go{position:relative;flex:none;width:40px;height:40px;border-radius:50%;background:var(--p2143);display:grid;place-items:center;box-shadow:0 6px 16px rgba(33,137,201,.4)}
.promo-go svg{width:18px;height:18px}
/* La tarjeta se adapta a su propio ancho: en teléfonos angostos se achican la playera, el título y la flecha */
.promo-wrap{container-type:inline-size}
@container (max-width:300px){
  .promo{grid-template-columns:70px minmax(0,1fr) auto;gap:10px;padding:10px 12px 10px 6px}
  .promo-art{width:70px;height:80px}
  .promo-t{font-size:1rem}
  .promo-tx .eyebrow{font-size:.66rem;letter-spacing:.06em}
  .promo-go{width:34px;height:34px}
}

.products{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.prod{background:#fff;border-radius:var(--r-tile);overflow:hidden;box-shadow:var(--shadow-white);text-align:left;display:flex;flex-direction:column;transition:transform .15s}
.prod:hover{transform:translateY(-2px)}
.prod .img{aspect-ratio:1;background:var(--bg-card);display:grid;place-items:center;position:relative;padding:14px}
.prod .img svg{width:100%;height:100%;max-height:150px}
.prod .img .tag{position:absolute;left:10px;top:10px}
.prod .tx{padding:10px 12px 12px;display:flex;flex-direction:column;gap:2px;flex:1}
.prod .tx b{font-size:.9rem;color:var(--navy);line-height:1.25}
.prod .tx small{font-size:.74rem;color:var(--muted)}
.prod .price{margin-top:auto;padding-top:6px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--navy)}
.prod .price s{color:var(--gray-med);font-weight:400;margin-right:6px;font-size:.8rem}
.cart-bar{display:flex;align-items:center;gap:12px;width:100%;margin-bottom:14px;padding:10px 14px 10px 10px;border-radius:var(--r-tile);background:var(--navy-g1);color:var(--white);text-align:left;box-shadow:var(--shadow-card)}
.cart-bar .ic{position:relative;flex:none;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.12);display:grid;place-items:center}
.cart-bar .ic svg{width:20px;height:20px}
.cart-bar .tx{flex:1;min-width:0}
.cart-bar b{display:block;font-size:.92rem}
.cart-bar small{display:block;font-size:.78rem;color:var(--on-dark-2);font-variant-numeric:tabular-nums}
.cart-bar .go{display:inline-flex;align-items:center;gap:2px;font-weight:700;font-size:.85rem;color:var(--cyan)}
.cart-bar .go svg{width:16px;height:16px}
.benefit{display:flex;gap:12px;align-items:center;background:#fff;border-radius:var(--r-tile);padding:12px 14px;box-shadow:var(--shadow-white)}
.benefit svg{width:24px;height:24px;color:var(--p2143);flex:none}
.benefit b{color:var(--navy)}
.benefit small{color:var(--muted);display:block;font-size:.8rem}

.pd{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.pd .stage{background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow-white);padding:20px;position:relative;display:grid;place-items:center}
.pd .stage svg{width:100%;max-width:380px;height:auto}
.pd .stage.photo{padding:0;overflow:hidden;background:var(--white)}
.pd .stage.photo svg{max-width:none}
svg.jersey{display:block;width:100%;height:auto}
.jprint.dark{mix-blend-mode:multiply}
.prod .img.photo,.cart-item .im.photo{padding:0;background:var(--white);overflow:hidden}
.prod .img.photo svg{max-height:none}
.prod-img{display:block;width:100%;height:100%;object-fit:contain;background:var(--white)}
.pd .stage.photo .prod-img{width:100%;min-width:0;aspect-ratio:1;height:auto}
.opts{display:flex;flex-direction:column;gap:18px}
.opts h1{font-size:1.4rem;color:var(--navy)}
.opts .price{font-size:1.5rem;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.opts .price small{font-size:.85rem;font-weight:500;color:var(--muted);margin-left:8px}
.sizes{display:flex;gap:8px;flex-wrap:wrap}
.sz{width:52px;height:44px;border-radius:12px;background:var(--gray-lightest);font-weight:700;color:var(--navy)}
.sz.on{background:var(--navy);color:#fff}
.switch{width:48px;height:28px;border-radius:14px;background:var(--gray-light);position:relative;flex:none;transition:.2s}
.switch::before{content:"";position:absolute;inset:-8px -4px}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.switch.on{background:var(--p2143)}
.switch.on::after{left:23px}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--gray-light);border-radius:12px;height:50px}
.qty button{width:44px;height:100%;display:grid;place-items:center;color:var(--navy)}
.qty button svg{width:18px;height:18px}
.qty span{min-width:32px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.addrow{display:flex;gap:10px}
.addrow .btn{flex:1;min-width:0;padding:0 12px;gap:6px}
.addrow .qty button{width:40px}

.cart-item{display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:center;background:#fff;border-radius:var(--r-tile);padding:12px;box-shadow:var(--shadow-white)}
.cart-item .im{width:72px;height:72px;border-radius:12px;background:var(--bg-card);display:grid;place-items:center;padding:6px}
.cart-item .im svg{width:100%;height:100%}
.cart-item b{color:var(--navy);display:block;font-size:.92rem}
.cart-item small{color:var(--muted);font-size:.78rem;display:block}
.cart-item .pr{font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;text-align:right}
.cart-item .rm{min-height:40px;min-width:40px;padding:0 4px;margin:-6px -4px -12px auto;display:block;font-size:.75rem;color:var(--red);font-weight:700}
.pts-use{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 12px;margin-bottom:4px;border-radius:14px;background:rgba(255,255,255,.1);color:#fff;text-align:left}
.pts-use .tx{flex:1;min-width:0}
.pts-use b{display:block;font-size:.92rem}
.pts-use small{display:block;font-size:.78rem;color:var(--on-dark-2)}
.pts-use .switch{flex:none}
.pts-use .switch.on{background:var(--celeste)}
.pts-use .switch.on::after{background:var(--navy-g1)}

/* ---------- Rediseño de la Tienda (spec 16) ---------- */
/* Catálogo: zona oscura arriba */
.shop-zone{padding-bottom:30px}
.zone-dark .cart-bar{background:var(--glass);border:1px solid var(--glass-line);box-shadow:none}
.zone-dark .promo{border:1px solid rgba(126,222,241,.22);box-shadow:0 12px 30px rgba(4,11,31,.45)}
/* Rejilla clara: tarjetas blancas con la foto y el precio en Saira */
.prod{border:1px solid var(--gray-lightest)}
.prod .price{font-family:var(--tech);font-size:1.15rem;letter-spacing:.02em}
.prod .price s{font-family:var(--font)}
/* Producto: cabe en el alto; la imagen toma el espacio que sobra */
.pd-fit{height:100%;display:flex;flex-direction:column}
.pd-img{flex:1 1 0;min-height:150px;max-height:340px;margin-top:6px;border-radius:var(--r-card);background:var(--white);box-shadow:var(--shadow-white);overflow:hidden;display:grid;place-items:center}
.pd-img svg,.pd-img .prod-img{width:100%;height:100%;object-fit:contain}
.pd-info{padding-top:14px}
.pd-info h1{margin-top:4px;font-family:var(--tech);font-size:1.6rem;letter-spacing:.01em;color:var(--navy-g1)}
.pd-price{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:6px}
.pd-price b{font-family:var(--tech);font-size:1.5rem;color:var(--navy-g1);font-variant-numeric:tabular-nums}
.pd-price s{color:var(--gray-med)}
.pd-earn{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:.85rem;color:var(--muted)}
/* Barra fija de compra o de pago: vidrio oscuro sobre la tabbar flotante */
.buybar{position:absolute;z-index:35;left:12px;right:12px;bottom:calc(var(--tab-h) + 22px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--r-float);background:var(--glass-strong);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border:1px solid var(--glass-line);box-shadow:0 12px 30px rgba(4,11,31,.35);color:var(--white)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .buybar{background:rgba(4,11,31,.94)} }
main:has(.buybar){padding-bottom:calc(var(--tab-h) + 104px + env(safe-area-inset-bottom))}
/* Con el desglose abierto, la barra crece: la lista suma ese alto para que el último artículo no quede tapado */
main:has(.paybar.open){padding-bottom:calc(var(--tab-h) + 290px + env(safe-area-inset-bottom))}
.buybar .qty{height:48px;border-color:rgba(255,255,255,.3)}
.buybar .qty button{color:var(--white)}
.buybar>.btn{flex:1;min-width:0;height:48px;padding:0 12px}
/* Carrito: total y "Pagar" siempre a la mano; el desglose se abre hacia arriba */
.paybar{flex-direction:column;align-items:stretch;gap:8px}
.pb-main{display:flex;align-items:center;gap:10px}
.pb-total{flex:1;min-width:0;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:8px;min-height:48px;padding:0 6px;text-align:left;color:var(--white)}
.pb-total span{grid-column:1;font-size:.76rem;color:var(--on-dark-2)}
.pb-total b{grid-column:1;font-family:var(--tech);font-size:1.35rem;line-height:1.1;font-variant-numeric:tabular-nums}
.pb-total svg{grid-column:2;grid-row:1/3;width:20px;height:20px;rotate:-90deg;transition:rotate .2s}
.paybar.open .pb-total svg{rotate:90deg}
.pb-main .btn{flex:none;height:48px}
.pb-detail[hidden]{display:none}
.pb-detail{max-height:55vh;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:4px 6px 8px;border-bottom:1px solid var(--glass-line)}
.pb-l{display:flex;justify-content:space-between;gap:12px;font-size:.88rem;font-variant-numeric:tabular-nums}
.pb-l.disc{color:var(--cyan)}
.pb-l .pts svg{color:var(--white)}
.pay-note{margin-top:14px;font-size:.75rem}
/* Pedido confirmado */

/* Carrito: el título va en el header (spec 20); aquí queda el número de artículos */
.cart-count{margin-bottom:12px}
.empty-masc{padding-top:18px}

/* Al cambiar de categoría la rejilla se reemplaza con un fundido corto (sin volver a pintar la vista) */
.products.swap{animation:prod-swap .28s ease both}
@keyframes prod-swap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Pedido confirmado (hoja oscura): Cruz Azulito y Blu festejan alrededor de una palomita neón */
.oc{display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--white);padding-bottom:4px}
.oc-stage{position:relative;width:100%;max-width:340px;height:150px;margin:2px auto 6px;display:grid;grid-template-columns:1fr auto 1fr;align-items:end}
.oc-stage::before{content:"";position:absolute;left:50%;bottom:0;width:260px;height:36px;margin-left:-130px;border-radius:50%;background:radial-gradient(closest-side,rgba(61,139,255,.55),transparent);pointer-events:none}
.oc-m{position:relative;height:140px;width:auto;justify-self:center}
.oc-ca{animation:oc-hop .6s cubic-bezier(.3,1.5,.5,1) .1s both,oc-bob 2.4s ease-in-out .8s infinite}
.oc-blu{animation:oc-hop .6s cubic-bezier(.3,1.5,.5,1) .25s both,oc-bob 2.4s ease-in-out 1.2s infinite}
.oc-check{position:relative;align-self:center;margin-bottom:28px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:var(--white);background:radial-gradient(circle,rgba(61,139,255,.55),rgba(61,139,255,.15) 70%);box-shadow:0 0 0 2px var(--neon),var(--neon-glow);animation:oc-pop .5s cubic-bezier(.3,1.6,.5,1) both}
.oc-check svg{width:28px;height:28px;stroke-width:2.6}
.oc-spark{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--neon-2);box-shadow:0 0 8px var(--neon-2),0 0 16px var(--neon);opacity:0;animation:oc-spark 2.2s ease-out infinite}
.oc-spark.s1{left:42%;top:8px}.oc-spark.s2{left:58%;top:18px;animation-delay:.5s}.oc-spark.s3{left:36%;top:52px;animation-delay:1s}.oc-spark.s4{left:64%;top:48px;animation-delay:1.5s}
@keyframes oc-hop{from{opacity:0;transform:translateY(24px) scale(.85)}to{opacity:1;transform:none}}
@keyframes oc-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes oc-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes oc-spark{0%{opacity:0;transform:scale(.4)}20%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-22px) scale(.6)}}
.oc .eyebrow{color:var(--cyan);margin-top:4px}
.oc h2{font-family:var(--tech);font-size:2rem;line-height:1.05;letter-spacing:.02em;text-transform:uppercase;margin-top:4px}
.oc-sub{margin-top:8px;font-size:.9rem;line-height:1.45;color:var(--on-dark-2);max-width:32ch}
.oc-sub b{font-family:var(--tech);font-size:1.05rem;letter-spacing:.06em;color:var(--white)}
.oc-pts{margin-top:16px;width:100%;padding:14px 16px;border-radius:var(--r-tile);background:var(--glass);border:1px solid var(--glass-line);display:flex;flex-direction:column;align-items:center;gap:2px}
.oc-num{display:inline-flex;align-items:center;gap:10px}
.oc-num svg{width:30px;height:30px;filter:drop-shadow(0 2px 6px rgba(4,11,31,.5))}
.oc-num b{font-family:var(--tech);font-size:2.4rem;line-height:1;letter-spacing:.01em;text-shadow:0 0 12px var(--neon),0 0 26px rgba(61,139,255,.6)}
.oc-pts small{font-size:.78rem;color:var(--on-dark-2)}
.oc-used{margin-top:8px;font-size:.8rem;color:var(--on-dark-2)}
.oc-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:18px}
.oc-acts .btn{min-width:0;padding:0 10px}
@media (max-width:340px){ .oc-m{height:112px} .oc-stage{height:122px} .oc h2{font-size:1.7rem} .oc-acts{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .oc-spark{display:none} }
@media (max-height:640px){ .oc-stage{height:112px;margin-bottom:2px} .oc-m{height:104px} .oc-check{width:48px;height:48px;margin-bottom:22px} .oc h2{font-size:1.6rem} .oc-sub{margin-top:4px} .oc-pts{margin-top:10px;padding:10px 14px} .oc-num b{font-size:2rem} .oc-acts{margin-top:12px;grid-template-columns:1fr 1fr} }

@media (max-height:640px){ .oc-stage{height:104px} .oc-m{height:96px} }

/* En 320 px "Ver mis puntos" y "Seguir comprando" no caben lado a lado, aunque el teléfono sea bajo: van apilados */
@media (max-width:340px){ .oc-acts{grid-template-columns:1fr} }