#webshop-demo{--cio-stage-h:300px;--cio-stage-h-m:340px}.cio-sh-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.cio-sh-head .cio-h{margin:0;display:grid}.cio-sh-head .cio-h>span{grid-area:1/1;white-space:nowrap}.cio-sh-head small{font-size:11.5px;color:var(--cio-muted);margin-left:8px;font-weight:500}.cio-sh-cart{position:relative;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#1b1640;background:var(--cio-accent);border-radius:8px;padding:7px 11px}.cio-sh-cart svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.cio-sh-badge{position:absolute;top:-8px;right:-8px;min-width:19px;height:19px;border-radius:999px;background:var(--cio-surface);color:var(--cio-ink);border:1.5px solid var(--cio-line);font-size:11px;font-weight:800;display:grid;place-items:center}.cio-sh-badge i{font-style:normal;grid-area:1/1}.cio-scene.is-active .cio-sh-badge .b-mid{animation:cio-sh-bmid var(--len,2s) linear var(--d,0s) both}@keyframes cio-sh-bmid{0%{opacity:0;transform:scale(.6)}12%{opacity:1;transform:none}92%{opacity:1}to{opacity:0}}.cio-scene.is-active .cio-sh-cart.a-bump{animation:cio-sh-bump .45s ease var(--d,0s) both}@keyframes cio-sh-bump{40%{transform:scale(1.08)}to{transform:none}}.cio-sh{display:grid;grid-template-columns:112px 1fr;gap:14px}.cio-sh-cats{display:grid;gap:4px;align-content:start}.cio-sh-cats span{height:26px;border-radius:7px;display:flex;align-items:center;padding:0 9px;font-size:11.5px;color:var(--cio-muted);white-space:nowrap}.cio-sh-cats .is-on{background:var(--cio-brand-soft);font-weight:700;color:var(--cio-brand-text)}.cio-scene.is-active .cio-sh-cats .sw-off{animation:cio-sh-off .3s ease var(--d,0s) both}.cio-scene.is-active .cio-sh-cats .sw-on{animation:cio-sh-on .3s ease var(--d,0s) both}@keyframes cio-sh-off{0%{background:var(--cio-brand-soft);color:var(--cio-brand-text);font-weight:700}to{background:transparent;color:var(--cio-muted);font-weight:400}}@keyframes cio-sh-on{to{background:var(--cio-brand-soft);color:var(--cio-brand-text);font-weight:700}}.cio-sh-swap{position:relative}.cio-sh-swap>.cio-sh-list+.cio-sh-list{position:absolute;inset:0 0 auto}.cio-sh-list{display:grid;gap:8px}.cio-sh-prod{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;border:1px solid var(--cio-line);border-radius:10px;padding:7px 10px 7px 7px;background:var(--cio-surface)}.cio-sh-img{width:44px;height:38px;border-radius:7px;background:var(--cio-canvas);display:grid;place-items:center}.cio-sh-img svg{width:28px;height:22px;stroke:var(--cio-muted);fill:none;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}.cio-sh-info{display:grid;gap:6px;min-width:0}.cio-sh-info .cio-bar:first-child{width:78%;background:var(--cio-fill)}.cio-sh-info .cio-bar:last-child{width:55%;height:6px}.cio-sh-info strong{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cio-sh-buy{display:flex;align-items:center;gap:10px}.cio-sh-price{font-size:12px;font-weight:700;color:var(--cio-muted);display:flex;align-items:center;gap:4px;white-space:nowrap}.cio-sh-price:after{content:"";width:34px;height:7px;border-radius:4px;background:var(--cio-bar)}.cio-sh-price small{font-size:10.5px;font-weight:600;order:2}.cio-sh-add{position:relative;display:grid;font-size:11.5px;font-weight:700;border-radius:7px;padding:6px 10px;background:var(--cio-brand);color:var(--cio-on-brand);min-width:88px;text-align:center}.cio-sh-add>span{grid-area:1/1}.cio-sh-add .is-after{opacity:0}.cio-sh-panel{border:1px solid var(--cio-line);border-radius:10px;padding:10px 12px}.cio-sh-line{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;padding:5px 0}.cio-sh-line+.cio-sh-line{border-top:1px solid var(--cio-line)}.cio-sh-line .cio-sh-img{width:30px;height:26px}.cio-sh-line .cio-sh-img svg{width:20px;height:16px}.cio-sh-line strong{font-size:12px;font-weight:600}.cio-sh-kind{font-size:10.5px;font-weight:700;border-radius:999px;padding:3px 8px;white-space:nowrap;background:var(--cio-canvas);color:var(--cio-muted)}.cio-sh-kind.is-month{background:var(--cio-brand-soft);color:var(--cio-brand-text)}.cio-sh-foot{position:absolute;left:24px;right:24px;bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:12px}.cio-sh-foot .cio-note{position:static}.cio-sh-order{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;border:1px solid var(--cio-line);border-radius:10px;padding:8px 12px 8px 8px;margin-bottom:14px}.cio-sh-chip{display:grid;justify-items:end}.cio-sh-chip span{grid-area:1/1;font-size:11.5px;font-weight:700;border-radius:999px;padding:5px 10px;white-space:nowrap}.cio-sh-chip .c1{background:var(--cio-brand-soft);color:var(--cio-brand-text)}.cio-sh-chip .c2{background:#f5a30029;color:#c07d00;opacity:0}.dark .cio-sh-chip .c2{color:#ffc24d}.cio-sh-chip .c3{background:#1fae6b24;color:var(--cio-ok);opacity:0}.cio-scene.is-active .cio-sh-c2{animation:cio-sh-mid 1.1s ease var(--d,0s) both}@keyframes cio-sh-mid{0%{opacity:0}15%{opacity:1}85%{opacity:1}to{opacity:0}}.cio-sh-log{display:grid;gap:9px;padding-left:4px}.cio-sh-log div{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--cio-ink)}.cio-sh-log .cio-check{width:20px;height:20px}.cio-sh-list.is-names .cio-sh-price:after{display:none}@media(max-width:620px){.cio-sh-cart{font-size:0;gap:0;padding:8px 10px}.cio-sh-info strong{white-space:normal;line-height:1.25}.cio-sh-prod{grid-template-columns:38px 1fr auto;gap:10px}.cio-sh-prod .cio-sh-img{width:38px}.cio-sh-head small{display:none}.cio-sh{grid-template-columns:1fr}.cio-sh-cats,.cio-sh-buy .cio-sh-price{display:none}.cio-sh-add{min-width:78px}.cio-sh-foot{flex-direction:column;align-items:stretch}.cio-sh-foot .cio-btn{align-self:flex-end}.cio-sh-line .cio-sh-kind{font-size:10px}}.webshop-card-strip[data-astro-cid-cpro4isv]{opacity:.25;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,black 45%);mask-image:linear-gradient(to right,transparent,black 45%)}.webshop-card-img[data-astro-cid-cpro4isv]{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;transform:scale(1.6)}