/* Carrito Tukofi: panel lateral blanco, misma letra y mismos gestos que el resto de la página */
.carrito-velo{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .5s}
html.carrito-abierto .carrito-velo{opacity:1;pointer-events:auto}
html.carrito-abierto{overflow:hidden}
.carrito{position:fixed;top:0;right:0;bottom:0;z-index:401;width:min(420px,100%);background:#fff;color:#101010;font-family:"Montserrat",sans-serif;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .6s cubic-bezier(.7,0,.2,1);-webkit-font-smoothing:antialiased;box-shadow:-20px 0 60px rgba(0,0,0,.12)}
html.carrito-abierto .carrito{transform:none}
.carrito *{box-sizing:border-box;margin:0;padding:0}
.carrito button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.carrito a{color:inherit;text-decoration:none}
.carrito i{font-style:normal}

.carrito-cab{display:flex;justify-content:space-between;align-items:center;padding:22px 28px 18px;border-bottom:1px solid rgba(0,0,0,.1)}
.carrito-cab h2{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.carrito-cuenta{opacity:.45;margin-left:4px;font-weight:500;letter-spacing:0}
.carrito-cerrar{width:30px;height:30px;margin-right:-8px;font-size:26px;line-height:1;font-weight:300;transition:opacity .3s}
.carrito-cerrar:hover{opacity:.5}

/* envío gratis: texto y barrita */
.carrito-envio{padding:16px 28px 0}
.carrito-envio-txt{font-size:11.5px;font-weight:500;letter-spacing:.02em;min-height:16px}
.carrito-envio-txt b{font-weight:700}
.carrito-barra{height:2px;margin-top:10px;background:rgba(0,0,0,.1);overflow:hidden}
.carrito-barra i{display:block;height:100%;width:0;background:#101010;transition:width .7s cubic-bezier(.2,.7,.2,1)}

/* lista */
.carrito-lista{list-style:none;flex:1;overflow-y:auto;padding:6px 28px}
.carrito-item{display:grid;grid-template-columns:72px 1fr auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid rgba(0,0,0,.1)}
.carrito-img{display:grid;place-items:center;aspect-ratio:1;background:#f4f2ed;overflow:hidden;border-radius:2px}
.carrito-img img{width:78%;height:auto;filter:drop-shadow(0 6px 8px rgba(0,0,0,.18));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.carrito-img:hover img{transform:translateY(-3px) scale(1.04)}
.carrito-info h3{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.carrito-info p{margin-top:3px;font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#6b6b6b}
.carrito-cant{display:inline-flex;align-items:center;height:30px;margin-top:10px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6);border-radius:3px}
.carrito-cant button{width:28px;height:100%;font-size:14px;transition:opacity .3s}
.carrito-cant button:hover{opacity:.5}
.carrito-cant output{min-width:22px;text-align:center;font-size:12px;font-weight:600}
.carrito-der{display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right}
.carrito-der b{font-size:13px;font-weight:600;letter-spacing:.03em}
.carrito-quitar{font-size:10.5px;font-weight:500;letter-spacing:.04em;opacity:.5;text-decoration:underline;text-underline-offset:3px;transition:opacity .3s}
.carrito-quitar:hover{opacity:1}

/* vacío */
.carrito-vacio{flex:1;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:40px 28px;text-align:center;font-size:13px;font-weight:500}
.carrito.vacio .carrito-vacio{display:flex}
.carrito.vacio .carrito-lista,.carrito.vacio .carrito-pie,.carrito.vacio .carrito-envio{display:none}
.carrito-vacio a{display:inline-flex;gap:8px;font-size:12px;font-weight:600;border-bottom:1px solid currentColor;padding-bottom:2px}
.carrito-vacio a i{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.carrito-vacio a:hover i{transform:translateX(4px)}

/* pie */
.carrito-pie{padding:18px 28px 26px;border-top:1px solid rgba(0,0,0,.1);background:#fff}
.carrito-sub{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.carrito-sub b{font-size:16px;font-weight:600;letter-spacing:.02em;text-transform:none}
.carrito-nota{margin-top:6px;font-size:10.5px;font-weight:500;letter-spacing:.02em;color:#6b6b6b}
.carrito-btn{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;height:46px;margin-top:16px;border-radius:3px;background:#101010;color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.02em;transition:color .4s,box-shadow .4s}
.carrito-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;transform:scaleY(0);transform-origin:50% 100%;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.carrito-btn:hover{color:#101010;box-shadow:inset 0 0 0 1px #101010}
.carrito-btn:hover::before{transform:none}
.carrito-btn i{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.carrito-btn:hover i{transform:translateX(4px)}
.carrito-seguir{display:block;margin:14px auto 0;font-size:11px;font-weight:500;letter-spacing:.04em;opacity:.55;transition:opacity .3s}
.carrito-seguir:hover{opacity:1}

/* contador sobre el ícono de la bolsa (toma el color del ícono; el número se invierte solo) */
[data-carrito]{position:relative}
.carrito-n{position:absolute;top:-5px;right:-9px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:currentColor;font-family:"Montserrat",sans-serif;font-size:9.5px;font-weight:700;line-height:16px;text-align:center;letter-spacing:0;transition:transform .4s cubic-bezier(.2,.7,.2,1),opacity .3s}
.carrito-n{color:#fff;mix-blend-mode:difference}
.carrito-n.cero{opacity:0;transform:scale(.4)}
.carrito-n.salta{animation:carrito-salta .5s cubic-bezier(.2,.7,.2,1)}
@keyframes carrito-salta{40%{transform:scale(1.35)}}
html.liviano .carrito,html.liviano .carrito-velo,html.liviano .carrito-barra i{transition:none}
@media (prefers-reduced-motion:reduce){.carrito,.carrito-velo{transition:none}.carrito-n.salta{animation:none}}