:root .sig--web-cart { display: flex; container-type: inline-size; padding: clamp(14px, 3.6cqw, 30px); }
:root .sig--web-cart svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:root .sig--web-cart .wc__art svg, :root .sig--web-cart .wc__li svg, :root .sig--web-cart .wc__fly svg { width: 100%; height: 100%; stroke: none; }
:root .sig--web-cart .wc { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; }
:root .sig--web-cart .wc__app { position: relative; flex: 1; display: grid; grid-template-rows: auto 1fr; max-height: 520px; border-radius: 18px; overflow: hidden; background: #fbfaf8; color: #1f1c1a; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .06); }
:root .sig--web-cart .wc__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fff; border-bottom: 1px solid #eee9e3; }
:root .sig--web-cart .wc__brand { display: flex; align-items: center; gap: 8px; font: 700 13px/1 var(--f-display); letter-spacing: -.02em; white-space: nowrap; }
:root .sig--web-cart .wc__brand i { width: 22px; height: 22px; border-radius: 7px; background: conic-gradient(from 200deg, #a100ff, #e3b8ff, #a100ff); }
:root .sig--web-cart .wc__search { flex: 1; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border-radius: 999px; background: #f2eee9; color: #6f6862; font: 400 12px/1 var(--f-body); min-width: 0; }
:root .sig--web-cart .wc__search em { font-style: normal; }
:root .sig--web-cart .wc__cart { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: #1f1c1a; color: #fff; font-size: 18px; }
:root .sig--web-cart .wc__badge { position: absolute; right: -6px; top: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; background: var(--v); color: #fff; font: 700 10.5px/1 var(--f-display); transform: scale(0); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); box-shadow: 0 0 0 2px #fff; }
:root .sig--web-cart .wc__badge.on { transform: scale(1); }
:root .sig--web-cart .wc__view { grid-area: 2 / 1; padding: clamp(12px, 2.6cqw, 20px); min-height: 0; transition: opacity .5s, transform .7s var(--ease-out), visibility .7s; }
:root .sig--web-cart [data-v="co"] .wc__view--shop, :root .sig--web-cart [data-v="shop"] .wc__view--co { opacity: 0; visibility: hidden; }
:root .sig--web-cart [data-v="co"] .wc__view--shop { transform: translateX(-8%) scale(.97); }
:root .sig--web-cart [data-v="shop"] .wc__view--co { transform: translateX(8%); }
:root .sig--web-cart .wc__cats { display: flex; gap: 6px; list-style: none; margin: 0 0 12px; padding: 0; }
:root .sig--web-cart .wc__cats li { padding: 6px 11px; border-radius: 999px; border: 1px solid #e6e0d9; color: #5d5650; font: 500 11.5px/1 var(--f-display); }
:root .sig--web-cart .wc__cats li.on { background: #1f1c1a; border-color: #1f1c1a; color: #fff; }
:root .sig--web-cart .wc__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.8cqw, 14px); }
:root .sig--web-cart .wc__card { display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 10px; border-radius: 14px; background: #fff; border: 1px solid #eee8e1; animation: wcIn .7s var(--ease-out) both; animation-delay: calc(var(--i) * 90ms); transition: transform .4s var(--ease-out), box-shadow .4s; }
:root .sig--web-cart .wc__card.hit { transform: translateY(-3px); box-shadow: 0 14px 26px -16px rgba(60, 20, 0, .35); }
@keyframes wcIn{ from { opacity: 0; transform: translateY(14px); } }
:root .sig--web-cart .wc__art { aspect-ratio: 1 / .78; border-radius: 10px; background: var(--bg); display: grid; place-items: center; padding: 8%; }
:root .sig--web-cart .wc__card b { font: 600 clamp(11.5px, 2.3cqw, 14px)/1.2 var(--f-display); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root .sig--web-cart .wc__sw { display: flex; align-items: center; gap: 4px; }
:root .sig--web-cart .wc__sw i { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
:root .sig--web-cart .wc__sw small { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; color: #2c7a43; font: 500 10.5px/1 var(--f-body); }
:root .sig--web-cart .wc__add { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 2px; padding: 8px 6px; border-radius: 9px; background: #1f1c1a; color: #fff; font: 600 11px/1 var(--f-display); transition: transform .15s, background .3s; white-space: nowrap; }
:root .sig--web-cart .wc__add.press { transform: scale(.94); background: var(--v); }
:root .sig--web-cart .wc__fly { position: absolute; left: 0; top: 0; z-index: 8; pointer-events: none; display: grid; place-items: center; padding: 6%; border-radius: 10px; background: transparent; }
:root .sig--web-cart .wc__steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 4px 0 16px; padding: 0; counter-reset: s; }
:root .sig--web-cart .wc__steps li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; color: #8c847d; font: 500 10.5px/1 var(--f-display); }
:root .sig--web-cart .wc__steps li::before { counter-increment: s; content: ""; width: 12px; height: 12px; border-radius: 50%; background: #fbfaf8; box-shadow: 0 0 0 2px #ddd5cc; transition: background .4s, box-shadow .4s; }
:root .sig--web-cart .wc__steps li.on { color: #1f1c1a; }
:root .sig--web-cart .wc__steps li.on::before { background: var(--v); box-shadow: 0 0 0 2px var(--v); }
:root .sig--web-cart .wc__steps li.cur::before { box-shadow: 0 0 0 2px var(--v), 0 0 0 6px rgba(161, 0, 255, .18); }
:root .sig--web-cart .wc__bar { position: absolute; left: 12.5%; right: 12.5%; top: 5px; height: 2px; background: #e4ddd5; }
:root .sig--web-cart .wc__bar span { position: absolute; inset: 0; background: var(--v); transform-origin: left; transform: scaleX(0); transition: transform .7s var(--ease-out); }
:root .sig--web-cart .wc__cobody { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(10px, 2.4cqw, 18px); }
:root .sig--web-cart .wc__list, :root .sig--web-cart .wc__form { transition: opacity .45s, transform .6s var(--ease-out); }
:root .sig--web-cart .wc__list { display: grid; gap: 8px; align-content: start; }
:root .sig--web-cart .wc__li { display: grid; grid-template-columns: 44px 1fr; gap: 2px 10px; align-items: center; padding: 8px; border-radius: 12px; background: #fff; border: 1px solid #eee8e1; }
:root .sig--web-cart .wc__li span { grid-row: span 2; width: 44px; height: 44px; padding: 5px; border-radius: 9px; background: var(--bg); }
:root .sig--web-cart .wc__li b { font: 600 12.5px/1.2 var(--f-display); }
:root .sig--web-cart .wc__li small { color: #776f68; font-size: 11px; }
:root .sig--web-cart .wc__form { display: grid; gap: 9px; align-content: start; }
:root .sig--web-cart .wc__form label { display: grid; gap: 4px; color: #776f68; font: 500 10.5px/1 var(--f-display); }
:root .sig--web-cart .wc__in { height: 30px; padding: 0 10px; border-radius: 8px; background: #fff; border: 1px solid #e3dcd4; color: #1f1c1a; font: 400 12px/28px var(--f-body); white-space: nowrap; overflow: hidden; }
:root .sig--web-cart .wc__pay { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
:root .sig--web-cart .wc__pay span { padding: 8px 4px; border-radius: 8px; border: 1px solid #e3dcd4; background: #fff; text-align: center; color: #4e4741; font: 500 11px/1 var(--f-display); transition: all .3s; }
:root .sig--web-cart .wc__pay span.on { border-color: var(--v); box-shadow: 0 0 0 1px var(--v); color: #5a00a0; background: #f8f0ff; }
:root .sig--web-cart .wc__buy { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 8px; border-radius: 10px; background: var(--v); color: #fff; font: 600 12px/1 var(--f-display); transition: transform .15s; box-shadow: 0 10px 20px -10px rgba(161, 0, 255, .8); white-space: nowrap; }
:root .sig--web-cart .wc__buy.press { transform: scale(.95); }
:root .sig--web-cart .wc__done { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; opacity: 0; pointer-events: none; transition: opacity .5s .15s; }
:root .sig--web-cart .wc__done > svg { width: 70px; height: 70px; stroke: var(--v); stroke-width: 3; }
:root .sig--web-cart .wc__done circle { stroke-dasharray: 145; stroke-dashoffset: 145; transition: stroke-dashoffset .9s var(--ease-out) .2s; }
:root .sig--web-cart .wc__done path { stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset .5s var(--ease-out) .8s; }
:root .sig--web-cart .wc__done b { font: 700 clamp(15px, 3cqw, 20px)/1.2 var(--f-display); letter-spacing: -.03em; }
:root .sig--web-cart .wc__done small { display: inline-flex; align-items: center; gap: 6px; color: #6a625b; font-size: 12px; }
:root .sig--web-cart .is-done .wc__list, :root .sig--web-cart .is-done .wc__form { opacity: 0; transform: scale(.96); }
:root .sig--web-cart .is-done .wc__done { opacity: 1; }
:root .sig--web-cart .is-done .wc__done circle, :root .sig--web-cart .is-done .wc__done path { stroke-dashoffset: 0; }
:root .sig--web-cart .wc__note { position: absolute; z-index: 9; left: 50%; top: -6px; width: min(360px, 92%); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: rgba(32, 28, 38, .92); backdrop-filter: blur(12px); color: #fff; box-shadow: 0 24px 40px -14px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08); transform: translate(-50%, -30px) scale(.94); opacity: 0; transition: transform .7s var(--ease-out), opacity .35s; }
:root .sig--web-cart .wc__note.on { transform: translate(-50%, 0); opacity: 1; }
:root .sig--web-cart .wc__note > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--v); font-size: 17px; }
:root .sig--web-cart .wc__note.on > span svg { animation: wcBell 1s .3s ease-in-out; transform-origin: 50% 10%; }
@keyframes wcBell{ 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
:root .sig--web-cart .wc__note b { display: block; font: 600 13px/1.2 var(--f-display); }
:root .sig--web-cart .wc__note small { color: #d6cde0; font-size: 11.5px; }
:root .sig--web-cart .wc__note em { align-self: start; color: #bdb3c8; font: 400 10.5px/1 var(--f-body); font-style: normal; }
:root .sig--web-cart .wc__cur { position: absolute; left: 0; top: 0; z-index: 10; width: 20px; height: 20px; opacity: 0; transition: opacity .3s; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8-6.5 1.8L9.5 19z' fill='%23fff' stroke='%23111' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); }
:root .sig--web-cart .wc__cur.on { opacity: 1; }
:root .sig--web-cart .wc__cur.click::after { content: ""; position: absolute; left: -9px; top: -9px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--v); animation: wcRing .55s ease-out forwards; }
@keyframes wcRing{ from { transform: scale(.3); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
@container (max-width: 470px){:root .sig--web-cart .wc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root .sig--web-cart .wc__card:nth-child(3) { display: none; }
:root .sig--web-cart .wc__search em { display: none; }
:root .sig--web-cart .wc__search { flex: 0 0 30px; justify-content: center; padding: 0; margin-left: auto; }
:root .sig--web-cart .wc__cobody { grid-template-columns: 1fr; }
:root .sig--web-cart .wc__list { grid-template-columns: 1fr 1fr; }
:root .sig--web-cart .wc__li { grid-template-columns: 32px 1fr; }
:root .sig--web-cart .wc__li span { width: 32px; height: 32px; }
:root .sig--web-cart .wc__li small { display: none; }

}
:root .sig--web-cart .snap .wc__view, :root .sig--web-cart .snap .wc__list, :root .sig--web-cart .snap .wc__form, :root .sig--web-cart .snap .wc__done, :root .sig--web-cart .snap .wc__done circle, :root .sig--web-cart .snap .wc__done path { transition: none !important; }
:root .sig--web-cart .wc__promo { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding: 12px 14px; border-radius: 14px; overflow: hidden; color: #fff; background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--pa) 70%, #fff), transparent 60%), linear-gradient(120deg, var(--pb), color-mix(in srgb, var(--pb) 70%, var(--pa))); animation: wcIn .7s var(--ease-out) both; }
:root .sig--web-cart .wc__promo b { display: block; font: 700 clamp(14px, 2.9cqw, 19px)/1.1 var(--f-display); letter-spacing: -.03em; }
:root .sig--web-cart .wc__promo small { color: color-mix(in srgb, var(--pa) 30%, #fff); font: 500 11.5px/1 var(--f-body); }
:root .sig--web-cart .wc__pa { width: 52px; height: 52px; flex: none; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .3)); animation: wcFloat 4s ease-in-out infinite alternate; }
:root .sig--web-cart .wc__pa svg { width: 100%; height: 100%; }
@keyframes wcFloat{ to { transform: translateY(-5px) rotate(-6deg); } }
@container (max-width: 470px){:root .sig--web-cart .wc__promo { padding: 9px 12px; }
:root .sig--web-cart .wc__pa { width: 40px; height: 40px; }
 }
:root .sig--web-cart .wc__pa svg { stroke: none; }
:root .sig--web-cart { text-align: left; }