:root .sig--web-storefront { display: flex; container-type: inline-size; padding: clamp(12px, 2.6cqw, 28px); }
:root .sig--web-storefront svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:root .sig--web-storefront .sf__pa svg, :root .sig--web-storefront .sf__hart svg { width: 100%; height: 100%; stroke: none; }
:root .sig--web-storefront .sf { --a: #5fbf8f; --b: #1f5e45; --bg: #eef7f1; --ink: #173d2f; position: relative; flex: 1; display: grid; grid-template-columns: clamp(170px, 20%, 230px) 1fr; gap: clamp(10px, 1.6cqw, 18px); text-align: left; }
:root .sig--web-storefront .sf__rail { display: flex; flex-direction: column; gap: 8px; padding: 14px 12px; border-radius: 16px; background: #17151b; border: 1px solid rgba(255, 255, 255, .08); color: #e9e4ee; }
:root .sig--web-storefront .sf__adm { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 600 13px/1 var(--f-display); }
:root .sig--web-storefront .sf__adm svg { width: 26px; height: 26px; padding: 5px; border-radius: 8px; background: var(--v); color: #fff; }
:root .sig--web-storefront .sf__lab { margin: 8px 4px 2px; color: #a79fb0; font: 600 10px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; }
:root .sig--web-storefront .sf__ch { display: grid; gap: 4px; list-style: none; margin: 0; padding: 0; }
:root .sig--web-storefront .sf__ch li { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 10px; transition: background .4s, box-shadow .4s; }
:root .sig--web-storefront .sf__ch li i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
:root .sig--web-storefront .sf__ch li b { display: block; font: 600 12px/1.15 var(--f-display); }
:root .sig--web-storefront .sf__ch li small { color: #a79fb0; font-size: 11px; }
:root .sig--web-storefront .sf__ch li.on { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
:root .sig--web-storefront .sf__ch li.on i { box-shadow: 0 0 0 4px rgba(255, 255, 255, .08), 0 0 12px currentColor; }
:root .sig--web-storefront .sf__rule { display: flex; align-items: center; gap: 8px; padding: 9px; border-radius: 10px; background: rgba(255, 255, 255, .04); color: #d5cddd; font: 500 11.5px/1.25 var(--f-body); transition: background .4s, color .4s; }
:root .sig--web-storefront .sf__rule svg { font-size: 15px; color: var(--lilac); }
:root .sig--web-storefront .sf__rule span { flex: 1; }
:root .sig--web-storefront .sf__rule em { position: relative; width: 26px; height: 15px; border-radius: 999px; background: #3a3540; flex: none; transition: background .35s; }
:root .sig--web-storefront .sf__rule em::after { content: ""; position: absolute; left: 2px; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; transition: transform .4s var(--ease-out); }
:root .sig--web-storefront .sf__rule.on { background: rgba(161, 0, 255, .16); color: #fff; }
:root .sig--web-storefront .sf__rule.on em { background: var(--v); }
:root .sig--web-storefront .sf__rule.on em::after { transform: translateX(11px); }
:root .sig--web-storefront .sf__sync { margin: auto 4px 0; display: flex; align-items: center; gap: 7px; color: #a79fb0; font: 500 11px/1.3 var(--f-body); }
:root .sig--web-storefront .sf__sync i { width: 7px; height: 7px; border-radius: 50%; background: #3ecf7a; box-shadow: 0 0 10px #3ecf7a; animation: sfPulse 2.4s ease-in-out infinite; }
@keyframes sfPulse{ 50% { opacity: .4; } }
:root .sig--web-storefront .sf__store { display: flex; flex-direction: column; min-width: 0; border-radius: 16px; overflow: hidden; background: #fff; color: var(--ink); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85); transition: background .6s; }
:root .sig--web-storefront .sf__url { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #efedf1; }
:root .sig--web-storefront .sf__url i { width: 9px; height: 9px; border-radius: 50%; background: #d3cfd8; }
:root .sig--web-storefront .sf__dom { margin-left: 8px; flex: 1; max-width: 260px; padding: 4px 10px; border-radius: 6px; background: #fff; color: #4a4550; font: 500 11.5px/1.2 var(--f-body); transition: opacity .3s; }
:root .sig--web-storefront .sf__nav { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid color-mix(in srgb, var(--a) 22%, #eee); }
:root .sig--web-storefront .sf__logo { font: 700 clamp(14px, 2cqw, 18px)/1 var(--f-display); letter-spacing: -.04em; color: var(--b); transition: color .6s; }
:root .sig--web-storefront .sf__logo::before { content: ""; display: inline-block; width: .7em; height: .7em; margin-right: .35em; border-radius: 30% 50%; background: var(--a); vertical-align: -.05em; transition: background .6s; }
:root .sig--web-storefront .sf__cats { display: flex; gap: 12px; flex: 1; color: #5b5560; font: 500 12px/1 var(--f-display); }
:root .sig--web-storefront .sf__cats i { font-style: normal; }
:root .sig--web-storefront .sf__cart { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--b); color: #fff; font-size: 16px; transition: background .6s; }
:root .sig--web-storefront .sf__bar { display: flex; align-items: center; gap: 7px; padding: 10px 16px 0; }
:root .sig--web-storefront .sf__fl { display: inline-flex; align-items: center; gap: 5px; color: #5b5560; font: 600 11.5px/1 var(--f-display); }
:root .sig--web-storefront .sf__chip { padding: 6px 10px; border-radius: 999px; border: 1px solid #e3dfe7; color: #4a4550; font: 500 11px/1 var(--f-display); transition: all .35s var(--ease-out); white-space: nowrap; }
:root .sig--web-storefront .sf__chip.on { background: var(--b); border-color: var(--b); color: #fff; }
:root .sig--web-storefront .sf__ew { margin-left: auto; color: #6c6672; font: 500 10.5px/1 var(--f-body); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
:root .sig--web-storefront .sf__grid { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: clamp(7px, 1.2cqw, 12px); padding: 12px 16px 16px; min-height: 260px; }
:root .sig--web-storefront .la { grid-template-areas: "hero hero p1 p2" "hero hero p3 p4" "txt txt txt txt"; }
:root .sig--web-storefront .lb { grid-template-areas: "txt p1 p2 p3" "txt hero hero p4" "txt hero hero p4"; }
:root .sig--web-storefront .lc { grid-template-areas: "p1 hero hero hero" "p2 hero hero hero" "p3 p4 txt txt"; }
:root .sig--web-storefront .lf { grid-template-areas: "hero hero p2 p4" "hero hero p2 p4" "txt txt txt txt"; }
:root .sig--web-storefront .sf__t { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-radius: 12px; background: var(--bg); transition: background .6s; will-change: transform; }
:root .sig--web-storefront .sf__t.out { display: none; }
:root .sig--web-storefront [data-a="hero"] { grid-area: hero; }
:root .sig--web-storefront [data-a="txt"] { grid-area: txt; }
:root .sig--web-storefront [data-a="p1"] { grid-area: p1; }
:root .sig--web-storefront [data-a="p2"] { grid-area: p2; }
:root .sig--web-storefront [data-a="p3"] { grid-area: p3; }
:root .sig--web-storefront [data-a="p4"] { grid-area: p4; }
:root .sig--web-storefront .sf__t--hero { display: flex; align-items: flex-end; padding: clamp(12px, 2cqw, 22px); color: #fff; background: radial-gradient(90% 120% at 90% 10%, color-mix(in srgb, var(--a) 80%, #fff), transparent 60%), linear-gradient(135deg, var(--a), var(--b)); }
:root .sig--web-storefront .sf__t--hero > div { position: relative; z-index: 1; }
:root .sig--web-storefront .sf__hk { display: block; color: color-mix(in srgb, var(--a) 25%, #fff); font: 600 10.5px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
:root .sig--web-storefront .sf__hl { display: block; font: 700 clamp(16px, 3.1cqw, 34px)/1.02 var(--f-display); letter-spacing: -.045em; max-width: 12ch; }
:root .sig--web-storefront .sf__go { display: inline-block; margin-top: 10px; padding: 7px 12px; border-radius: 999px; background: #fff; color: var(--b); font: 600 11px/1 var(--f-display); }
:root .sig--web-storefront .sf__hart { position: absolute; right: 4%; top: 8%; width: 46%; height: 70%; display: flex; align-items: flex-end; justify-content: flex-end; }
:root .sig--web-storefront .sf__hart svg { width: 58%; height: auto; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .25)); }
:root .sig--web-storefront .sf__hart svg + svg { width: 36%; margin-left: -14%; }
:root .sig--web-storefront .sf__t--p { display: flex; flex-direction: column; padding: 8px; background: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a) 22%, #ece9ef); }
:root .sig--web-storefront .sf__pa { flex: 1; min-height: 0; display: grid; place-items: center; border-radius: 8px; background: var(--bg); padding: 6%; transition: background .6s; }
:root .sig--web-storefront .sf__pa svg { max-height: 100%; width: auto; }
:root .sig--web-storefront .sf__t--p b { margin: 6px 2px 2px; font: 600 clamp(10.5px, 1.4cqw, 13px)/1.15 var(--f-display); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root .sig--web-storefront .sf__pf { display: flex; align-items: center; gap: 4px; padding: 0 2px; }
:root .sig--web-storefront .sf__sw { width: 9px; height: 9px; border-radius: 50%; background: var(--a); }
:root .sig--web-storefront .sf__sw + .sf__sw { background: var(--b); }
:root .sig--web-storefront .sf__pf em { margin-left: auto; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: var(--b); color: #fff; font-size: 12px; transition: background .6s; }
:root .sig--web-storefront .sf__tag { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 999px; background: var(--v); color: #fff; font: 600 9.5px/1 var(--f-display); opacity: 0; transform: translateY(-6px) scale(.9); transition: opacity .3s, transform .5s var(--ease-back); }
:root .sig--web-storefront .sf__tag svg { stroke-width: 2.6; }
:root .sig--web-storefront .tagged .sf__tag { opacity: 1; transform: none; }
:root .sig--web-storefront .sf__t--txt { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 12px 16px; background: color-mix(in srgb, var(--bg) 60%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a) 18%, #eee); }
:root .sig--web-storefront .sf__t--txt small { color: color-mix(in srgb, var(--b) 75%, #777); font: 600 10px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; }
:root .sig--web-storefront .sf__t--txt b { font: 700 clamp(13px, 1.9cqw, 18px)/1.15 var(--f-display); letter-spacing: -.03em; color: var(--b); }
:root .sig--web-storefront .sf__t--txt i { height: 6px; width: 80%; max-width: 280px; border-radius: 3px; background: color-mix(in srgb, var(--a) 25%, #e9e6ec); }
:root .sig--web-storefront .sf__t--txt i + i { width: 55%; }
:root .sig--web-storefront .swap .sf__dom, :root .sig--web-storefront .swap .sf__logo, :root .sig--web-storefront .swap .sf__hl { opacity: 0; }
:root .sig--web-storefront .sf__hl, :root .sig--web-storefront .sf__logo { transition: opacity .25s, color .6s; }
:root .sig--web-storefront .sf__cur { position: absolute; left: 0; top: 0; z-index: 10; width: 20px; height: 20px; opacity: 0; transition: opacity .3s; pointer-events: none; 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-storefront .sf__cur.on { opacity: 1; }
:root .sig--web-storefront .sf__cur.click::after { content: ""; position: absolute; left: -9px; top: -9px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--v); animation: sfRing .55s ease-out forwards; }
@keyframes sfRing{ from { transform: scale(.3); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
@container (max-width: 640px){:root .sig--web-storefront .sf { grid-template-columns: 1fr; }
:root .sig--web-storefront .sf__rail { padding: 8px; gap: 6px; }
:root .sig--web-storefront .sf__adm, :root .sig--web-storefront .sf__lab, :root .sig--web-storefront .sf__sync, :root .sig--web-storefront .sf__ch li small { display: none; }
:root .sig--web-storefront .sf__ch { grid-template-columns: repeat(3, 1fr); }
:root .sig--web-storefront .sf__ch li { padding: 7px; justify-content: center; }
:root .sig--web-storefront .sf__ch li b { font-size: 11px; }
:root .sig--web-storefront .sf__cats, :root .sig--web-storefront .sf__ew, :root .sig--web-storefront .sf__chip[data-c="2"] { display: none; }
:root .sig--web-storefront .sf__nav { justify-content: space-between; }
:root .sig--web-storefront .sf__grid { min-height: 300px; padding: 10px; }
:root .sig--web-storefront .sf__hart { display: none; }

}
:root .sig--web-storefront .sf { height: clamp(330px, 46cqw, 540px); }
:root .sig--web-storefront .sf__store { min-height: 0; }
:root .sig--web-storefront .sf__grid { min-height: 0; }
:root .sig--web-storefront .sf__pa svg { height: 100%; width: auto; max-width: 100%; }
:root .sig--web-storefront .sf__hart { height: 62%; width: 50%; }
:root .sig--web-storefront .sf__hart svg { height: 100%; width: auto; }
:root .sig--web-storefront .sf__hart svg + svg { height: 60%; width: auto; }
@container (max-width: 640px){:root .sig--web-storefront .sf { height: auto; }
:root .sig--web-storefront .sf__grid { height: 320px; flex: none; }
 }
:root .sig--web-storefront .la { grid-template-rows: 1fr 1fr .52fr; grid-template-areas: "hero hero p1 p2" "hero hero p3 p4" "txt txt txt txt"; }
:root .sig--web-storefront .lb { grid-template-rows: .52fr 1fr 1fr; grid-template-areas: "txt txt txt txt" "p1 hero hero p2" "p3 hero hero p4"; }
:root .sig--web-storefront .lc { grid-template-rows: 1fr 1fr .52fr; grid-template-areas: "p1 p2 hero hero" "p3 p4 hero hero" "txt txt hero hero"; }
:root .sig--web-storefront .lf { grid-template-rows: 1fr 1fr .52fr; grid-template-areas: "hero hero p2 p4" "hero hero p2 p4" "txt txt txt txt"; }
:root .sig--web-storefront { text-align: left; }