/* Retail page: "brand to shelf". Price tags, aisle signs, barcodes, shelf labels. Red leads, blue supports.
   Premium light (white + blush tint). Dark only in the scheme tag, aisle sign numbers and the limits box header. */
.x-retail{--hair:#ece1e1;--soft:#fdf6f6;--h:#0d0f14;--body:#454b5c;--ok:#16a34a;--amb:#e8a317;--sp:clamp(84px,9vw,136px);color:var(--body)}
.x-retail .in{max-width:1220px;padding:0 32px}
.x-retail :is(h1,h2,h3){color:var(--h);font-weight:700;letter-spacing:-.03em}
.x-retail .sec{padding:var(--sp) 0;position:relative}
.x-retail .sec:nth-of-type(odd){background:var(--soft)}
.x-retail .sh{max-width:800px;margin-bottom:44px}.x-retail .sh.c{margin:0 auto 44px;text-align:center}
.x-retail .sh h2{font-size:clamp(28px,3.2vw,44px);line-height:1.1;font-weight:800}
.x-retail .sh .intro{font-size:18.5px;line-height:1.6;color:#5b6172}
.x-retail p{line-height:1.72}.x-retail .sec p+p{margin-top:16px}
.x-retail a{color:var(--red);text-decoration-color:rgba(205,33,34,.35)}
.x-retail .btn{border-radius:999px;padding:16px 28px}
.x-retail .btn.gh{border:1px solid var(--hair);background:#fff;color:var(--h)}
.x-retail .tick{margin-top:20px}.x-retail .tick li{display:flex;gap:12px;margin-bottom:12px}.x-retail .tick svg{flex:none;margin-top:4px;color:var(--red)}
.x-retail .note{font-size:14px;color:#7a8091;margin-top:14px}
.x-retail .fg{border-radius:16px;border:1px solid var(--hair);box-shadow:0 1px 2px rgba(13,15,20,.04),0 28px 56px -34px rgba(13,15,20,.3);margin:0}
.x-retail .fg figcaption{font-size:13.5px;color:#7a8091;border-color:var(--hair);background:#fff}
.x-retail .tab{display:inline-block;font:700 12px var(--f1);letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin:0 0 12px}
.x-retail .h3{font-size:20px;margin:40px 0 8px}.x-retail .sub{max-width:760px;margin-bottom:18px}
.x-retail table{min-width:0}
.x-retail :is(.scp-g,.sto-g,.sal-g,.b2b-g,.ana-g,.prc-g,.cst-g,.ch-g) .sh h2{font-size:clamp(26px,2.6vw,40px);line-height:1.12}
.x-retail :is(.scp-g,.sto-g,.sal-g,.b2b-g,.ana-g,.prc-g,.cst-g,.ch-g) .sh{margin-bottom:24px}
.x-retail .bc{display:block;width:100%;height:22px;fill:var(--h)}
.x-retail .hole{position:absolute;left:50%;top:12px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fff;border:2px solid #d9c9c9}

/* hero: hanging price tags */
.x-retail .hero{position:relative;padding:28px 0 96px;background:linear-gradient(180deg,#fff,#fdf3f3);overflow:hidden}
.x-retail .crumb{position:relative;display:flex;gap:8px;font-size:13.5px;color:#7a8091;margin-bottom:56px}.x-retail .crumb a{color:#7a8091;text-decoration:none}.x-retail .crumb b{color:var(--h)}.x-retail .crumb i{font-style:normal;color:#b8bfcc}
.x-retail .hg{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center}
.x-retail .eb{display:inline-flex;align-items:center;gap:8px;font:600 13px var(--f1);color:var(--red);background:#fff;border:1px solid var(--hair);padding:8px 16px;border-radius:999px;margin-bottom:26px;max-width:100%}
.x-retail h1{font-size:clamp(34px,4vw,58px);line-height:1.06;letter-spacing:-.04em;font-weight:800}
.x-retail h1 em{font-style:normal;color:var(--red)}
.x-retail .lead{font-size:19px;line-height:1.62;margin:24px 0;max-width:660px}
.x-retail .pts{display:grid;gap:10px;margin-bottom:32px}.x-retail .pts li{display:flex;gap:8px;align-items:center;font:600 14.5px var(--f1);color:var(--h)}.x-retail .pts svg{color:var(--ok);flex:none}
.x-retail .tags{position:relative;padding:20px 10px 0}
.x-retail .rod{height:10px;border-radius:6px;background:linear-gradient(#c9cfdc,#8a90a0);box-shadow:0 6px 12px -6px rgba(13,15,20,.4)}
.x-retail .tgs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 6px}
.x-retail .tag{position:relative;padding:40px 16px 14px;border-radius:14px 14px 10px 10px;background:#fff;border:1px solid var(--hair);transform-origin:50% -26px;animation:swing 4.2s ease-in-out infinite;animation-delay:calc(var(--i)*-.9s);box-shadow:0 26px 40px -26px rgba(13,15,20,.45);margin-top:26px;text-align:center;clip-path:polygon(22% 0,78% 0,100% 12%,100% 100%,0 100%,0 12%)}
.x-retail .tag:before{content:"";position:absolute;left:50%;top:-26px;width:2px;height:30px;background:#b8bfcc}
.x-retail .tag small{display:block;font:700 11px var(--f1);letter-spacing:.12em;text-transform:uppercase;color:#8a90a0}
.x-retail .tag b{display:block;font:800 24px/1.15 var(--f1);color:var(--h);margin:8px 0 6px;letter-spacing:-.02em}
.x-retail .tag span{display:block;font-size:12.5px;line-height:1.4;color:#6b7182;min-height:36px;margin-bottom:10px}
.x-retail .t-r b{color:var(--red)}.x-retail .t-b b{color:var(--blue)}
.x-retail .t-k{background:var(--h);border-color:var(--h)}.x-retail .t-k b{color:#fff;font-size:20px}.x-retail .t-k span,.x-retail .t-k small{color:#c3c8d5}.x-retail .t-k .bc{fill:#fff}
@keyframes swing{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.x-retail .sku{display:flex;flex-direction:column;gap:4px;margin:26px 6px 0;padding:14px 18px;border-radius:12px;background:#fff;border:1px dashed #e2c4c4}
.x-retail .sku span{display:flex;gap:8px;align-items:center;font:700 14px var(--f1);color:var(--h)}.x-retail .sku svg{color:var(--red)}.x-retail .sku em{font-style:normal;font-size:13.5px;color:#6b7182}

/* barcode stats */
.x-retail .cds{padding:0 0 26px;background:#fdf3f3}
.x-retail .cdg{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.x-retail .cd{padding:16px 20px 18px;border-radius:12px;background:#fff;border:1px solid var(--hair)}.x-retail .cd .bc{height:26px;opacity:.85}
.x-retail .cd b{display:block;font:800 32px/1 var(--f1);color:var(--h);margin-top:12px}.x-retail .cd:first-child b{color:var(--red)}.x-retail .cd small{display:block;margin-top:6px;font-size:13px;color:#6b7182}

/* answer: shelf labels */
.x-retail .ans{padding:var(--sp) 0;background:#fff}
.x-retail .an-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:56px;align-items:center}
.x-retail .an-t h2{font:600 16px var(--f2);letter-spacing:0;color:#7a8091;margin-bottom:14px}
.x-retail .speak{font:500 clamp(21px,2.1vw,28px)/1.5 var(--f1);letter-spacing:-.015em;color:var(--h)}
.x-retail .lbls{display:grid;gap:8px}
.x-retail .lbl{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;padding:12px 14px;border-radius:6px;background:#fff;border:1px solid var(--hair);border-left:6px solid var(--red);box-shadow:0 10px 20px -16px rgba(13,15,20,.35)}
.x-retail .lbl:nth-child(even){border-left-color:var(--blue)}
.x-retail .lbl span{font:700 11px var(--f1);letter-spacing:.1em;text-transform:uppercase;color:#8a90a0}.x-retail .lbl b{font:600 14.5px var(--f1);color:var(--h)}

/* scope: two layers */
.x-retail .scp-g{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px;align-items:start}
.x-retail .tip{margin-top:22px;padding:22px 24px;border-radius:14px;background:#fff;border:1px solid var(--hair)}.x-retail .tip h3{font-size:17px;margin-bottom:6px}.x-retail .tip p{font-size:15.2px}
.x-retail .lyr{display:grid;gap:8px;margin-bottom:18px}
.x-retail .ly{padding:18px 20px;border-radius:14px}.x-retail .ly.t{background:var(--red);color:#fff;transform:translateX(-10px);box-shadow:0 20px 34px -22px var(--red)}.x-retail .ly.c{background:#fff;border:1px solid var(--hair)}
.x-retail .ly p{display:flex;gap:8px;align-items:center;justify-content:space-between;font:800 15px var(--f1)!important;margin-bottom:10px}.x-retail .ly p em{font:600 12px var(--f1);font-style:normal;opacity:.8}.x-retail .ly.t a{color:#fff}
.x-retail .ly ul{display:flex;flex-wrap:wrap;gap:6px}.x-retail .ly li{padding:6px 10px;border-radius:999px;font:600 12.5px var(--f1)}
.x-retail .ly.t li{background:rgba(255,255,255,.18)}.x-retail .ly.c li{background:var(--soft);color:var(--h)}.x-retail .ly.c p{color:var(--h)}

/* who: aisle signs */
.x-retail .ais{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.x-retail .ai{padding:0 0 20px;border-radius:14px;background:#fff;border:1px solid var(--hair);overflow:hidden}
.x-retail .ai .sign{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--blue);color:#fff}.x-retail .ai:nth-child(even) .sign{background:var(--red)}
.x-retail .sign b{font:800 22px var(--f1)}.x-retail .sign span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.18)}
.x-retail .ai h3{font-size:16.5px;line-height:1.3;margin:16px 18px 8px}
.x-retail .ai p{margin:0!important;padding:6px 18px 0;font-size:14.2px;line-height:1.55;color:var(--h)}.x-retail .ai small{display:block;font:700 11px var(--f1);letter-spacing:.12em;text-transform:uppercase;color:#8a90a0}.x-retail .ai p+p small{color:var(--red)}

/* stores */
.x-retail .sto-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:start}
.x-retail .plst{margin-top:18px;padding:20px;border-radius:14px;background:#fff;border:1px solid var(--hair)}
.x-retail .plst table{width:100%;border-collapse:collapse}.x-retail .plst td{padding:12px 4px;border-top:1px solid var(--hair);font-size:15px;color:var(--h)}.x-retail .plst tr:first-child td{border-top:0}
.x-retail .plst td small{display:block;font-size:12.5px;color:#8a90a0}.x-retail .plst td:last-child{text-align:right;font:800 18px var(--f1);color:var(--red)}
.x-retail .sto-v .tick{padding:20px 22px;border-radius:14px;background:#fff;border:1px solid var(--hair);margin-top:12px}

/* sell-through tanks */
.x-retail .st{position:relative;background:#fff;padding:var(--sp) 0}
.x-retail .st-g{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px;align-items:start}
.x-retail .st-l h2{font-size:clamp(28px,3vw,42px);line-height:1.12;font-weight:800;margin-bottom:20px}
.x-retail .tss{display:grid}
.x-retail .ts{display:grid;grid-template-columns:54px 1fr;gap:16px;min-height:52vh;align-content:center;opacity:.35;transition:opacity .35s}
.x-retail .ts.done{opacity:.6}.x-retail .ts.on{opacity:1}
.x-retail .ts span{font:800 30px var(--f1);color:transparent;-webkit-text-stroke:1.3px var(--red)}.x-retail .ts.on span{color:var(--red);-webkit-text-stroke:0}
.x-retail .ts b{display:block;font:700 22px var(--f1);color:var(--h);margin-bottom:6px}.x-retail .ts p{font-size:16.5px}
.x-retail .st-r{position:sticky;top:12vh;padding:28px;border-radius:22px;background:linear-gradient(180deg,#fff,#fdf3f3);border:1px solid var(--hair);box-shadow:0 40px 80px -50px rgba(205,33,34,.5)}
.x-retail .tks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:end}
.x-retail .tnk{text-align:center}
.x-retail .glass{position:relative;height:300px;border-radius:18px 18px 22px 22px;border:3px solid #d9c9c9;background:rgba(255,255,255,.7);overflow:hidden}
.x-retail .glass:before{content:"";position:absolute;left:10%;top:8%;bottom:8%;width:8%;border-radius:8px;background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.2));z-index:2}
.x-retail .liq{position:absolute;left:0;right:0;bottom:0;height:var(--f,0%);transition:height .9s cubic-bezier(.3,.9,.3,1)}
.x-retail .liq:before{content:"";position:absolute;left:-50%;right:-50%;top:-10px;height:20px;border-radius:45%;background:inherit;animation:wave 3s linear infinite}
@keyframes wave{to{transform:translateX(25%)}}
.x-retail .p1 .liq{background:var(--red)}.x-retail .p2 .liq{background:var(--blue)}.x-retail .p3 .liq{background:var(--h)}
.x-retail .bub{position:absolute;left:50%;bottom:6px;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.6);animation:bub 2.4s ease-in infinite}.x-retail .p2 .bub{animation-duration:3s}.x-retail .p3 .bub{animation-duration:3.6s}
@keyframes bub{from{transform:translateY(0);opacity:.8}to{transform:translateY(-220px);opacity:0}}
.x-retail .pc{position:absolute;left:0;right:0;top:12px;z-index:3;font:800 22px var(--f1);color:var(--h)}
.x-retail .tnk span{display:block;font:800 16px var(--f1);color:var(--h);margin-top:12px}.x-retail .tnk small{font-size:12.5px;color:#6b7182}
.x-retail .gap{margin:18px 0 0!important;padding:12px 16px;border-radius:12px;background:#fff;border:1px dashed #e2c4c4;font-size:14.5px;color:var(--h)}.x-retail .gap b{font:800 22px var(--f1);color:var(--red)}.x-retail .gap em{font-style:normal;color:#8a90a0;font-size:12.5px}
.x-retail .dms{background:var(--soft)!important}
.x-retail .dms-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}
.x-retail .dmb{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.x-retail .dmb li{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:12px;background:#fff;border:1px solid var(--hair);font-size:14.6px;line-height:1.5;color:var(--h)}
.x-retail .dmb span{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--blush);color:var(--red)}

/* salesman */
.x-retail .sal-g{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;align-items:start}
.x-retail .sal-v{position:sticky;top:84px;max-width:400px}
.x-retail .beat{margin-top:22px;padding:20px;border-radius:14px;background:#fff;border:1px solid var(--hair)}
.x-retail .beat svg{display:block;width:100%;height:auto}
.x-retail .bp{fill:none;stroke:#c9cfdc;stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2s ease}.x-retail .beat.vis .bp{stroke-dashoffset:0;stroke:var(--blue)}
.x-retail .beat circle{stroke:#fff;stroke-width:3;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .4s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(.3s + var(--i)*.25s)}.x-retail .beat.vis circle{transform:none}
.x-retail .o1{fill:var(--ok)}.x-retail .o2{fill:var(--blue)}.x-retail .o0{fill:#c9cfdc}
.x-retail .bl{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;font-size:12.5px;color:#6b7182}.x-retail .bl i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px}

/* wholesale: six different icon motions */
.x-retail .wcs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.x-retail .wc{padding:26px;border-radius:16px;background:#fff;border:1px solid var(--hair)}
.x-retail .wi{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--blush);color:var(--red)}
.x-retail .wc:nth-child(3n+2) .wi{background:#eef0fd;color:var(--blue)}.x-retail .wc:nth-child(3n) .wi{background:var(--h);color:#fff}
.x-retail .wi svg{transform-origin:center}
.x-retail .w-cr svg{animation:wCr 2.6s ease-in-out infinite}@keyframes wCr{0%,60%,100%{transform:none}70%{transform:translateX(-4px)}80%{transform:translateX(4px)}90%{transform:translateX(-2px)}}
.x-retail .w-sc svg{animation:wSc 3s ease-in-out infinite}@keyframes wSc{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg) scale(1.08)}}
.x-retail .w-cl svg{animation:wCl 2.8s ease-in-out infinite}@keyframes wCl{0%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}60%{transform:translateY(0)}}
.x-retail .w-ex svg{animation:wEx 3.4s steps(1) infinite}@keyframes wEx{0%,48%{transform:none}50%,58%{transform:scale(.88)}60%,100%{transform:none}}
.x-retail .w-pr svg{animation:wPr 2.2s linear infinite}@keyframes wPr{0%{clip-path:inset(0 100% 0 0)}60%,100%{clip-path:inset(0 0 0 0)}}
.x-retail .w-gs svg{animation:wGs 3s ease-in-out infinite}@keyframes wGs{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(3px) rotate(4deg)}}
.x-retail .wc h3{font-size:18px;margin:16px 0 8px}.x-retail .wc p{font-size:15px;line-height:1.6}

/* b2b: reorder demo */
.x-retail .b2b-g{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px;align-items:start}
.x-retail .ro{position:relative;margin-bottom:18px;padding:22px;border-radius:18px;background:#fff;border:1px solid var(--hair);box-shadow:0 40px 70px -46px rgba(205,33,34,.5);overflow:hidden}
.x-retail .roh{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.x-retail .roh b{display:flex;gap:8px;align-items:center;font:800 15.5px var(--f1);color:var(--h)}.x-retail .roh svg{color:var(--red)}.x-retail .roh span{font-size:12.5px;color:#8a90a0}
.x-retail .ro ul{display:grid;gap:6px}.x-retail .ro li{display:flex;justify-content:space-between;padding:10px 12px;border-radius:10px;background:var(--soft);font-size:14px;color:var(--h);transition:.3s}
.x-retail .ro.done li{background:#e8f6ef;animation:pop .4s ease both}.x-retail .ro.done li:nth-child(2){animation-delay:.1s}.x-retail .ro.done li:nth-child(3){animation-delay:.2s}
@keyframes pop{50%{transform:scale(1.03)}}
.x-retail .rof{display:flex;justify-content:space-between;align-items:center;margin-top:14px}.x-retail .rof span{font-size:13.5px;color:#6b7182}.x-retail .rof b{color:var(--h)}
.x-retail .rob{padding:11px 20px!important;font-size:14px!important}.x-retail .ron{font-size:12.5px;color:#8a90a0;margin-top:10px!important}

/* loyalty */
.x-retail .loy-h{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:end;margin-bottom:30px}.x-retail .loy-h .sh{margin:0}
.x-retail .lcs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:28px}
.x-retail .lc{padding:26px;border-radius:16px;background:#fff;border:1px solid var(--hair);border-top:4px solid var(--red)}.x-retail .lc:nth-child(2){border-top-color:var(--blue)}.x-retail .lc h3{font-size:18px;margin-bottom:8px}.x-retail .lc p{font-size:15.2px}

/* compare */
.x-retail .cmp-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:28px;align-items:start}
.x-retail .tw{overflow-x:auto;border-radius:14px;border:1px solid var(--hair);background:#fff}
.x-retail .tt{width:100%;border-collapse:collapse;min-width:560px!important}.x-retail .tt th,.x-retail .tt td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--hair);font-size:14.5px}
.x-retail .tt thead th{font:700 12.5px var(--f1);letter-spacing:.06em;text-transform:uppercase;color:#7a8091;background:var(--soft)}
.x-retail .tt td:first-child{font-weight:600;color:var(--h)}.x-retail .tt .hl{background:var(--blush);color:var(--h);font-weight:600}.x-retail .tt thead .hl{background:var(--red);color:#fff}.x-retail .tt tr:last-child td{border-bottom:0}
.x-retail .bbn{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:18px 22px;border-radius:12px;background:#eef0fd;color:var(--h)}.x-retail .bbn svg{flex:none;color:var(--blue);margin-top:3px}

/* analytics */
.x-retail .ana-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:56px;align-items:start}
.x-retail .ana-v{position:sticky;top:84px}
.x-retail .mts{display:grid;gap:10px;margin-bottom:20px}
.x-retail .mts li{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:18px 20px;border-radius:14px;background:#fff;border:1px solid var(--hair)}
.x-retail .mts span{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--blush);color:var(--red)}.x-retail .mts li:nth-child(even) span{background:#eef0fd;color:var(--blue)}
.x-retail .mts b{display:block;font:700 16.5px var(--f1);color:var(--h)}.x-retail .mts p{font-size:15px;line-height:1.55;margin-top:2px!important}

/* process: shelf rows */
.x-retail .prc-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:56px;align-items:start}
.x-retail .prc-v{position:sticky;top:84px}
.x-retail .shelf{display:grid;grid-template-columns:1fr 1fr;gap:26px 14px}
.x-retail .shelf li{position:relative;padding:20px 22px 26px;border-radius:12px 12px 4px 4px;background:#fff;border:1px solid var(--hair)}
.x-retail .shelf li:after{content:"";position:absolute;left:-8px;right:-8px;bottom:-12px;height:10px;border-radius:3px;background:linear-gradient(#d9c9c9,#bfaeae)}
.x-retail .pn{font:800 13px var(--f1);color:var(--red)}.x-retail .shelf h3{font-size:17.5px;margin:4px 0 6px}.x-retail .shelf p{font-size:15px;line-height:1.6}

/* cost */
.x-retail .cst-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:start}
.x-retail .cfs{display:grid;gap:8px}.x-retail .cfs li{display:flex;gap:16px;align-items:center;padding:14px 18px;border-radius:12px;background:#fff;border:1px solid var(--hair);font-size:15px;color:var(--h)}
.x-retail .cfs span{flex:none;font:800 18px var(--f1);color:transparent;-webkit-text-stroke:1.2px var(--red)}
.x-retail .lim{margin-top:20px;padding:24px 26px;border-radius:14px;background:var(--h);color:#d3d7e2}.x-retail .lim h3{display:flex;gap:8px;align-items:center;font-size:18px;margin-bottom:8px;color:#fff}.x-retail .lim svg{color:#ff9d9d}

/* checklist */
.x-retail .ch-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:56px;align-items:start}
.x-retail .qs{display:grid;gap:8px;margin-bottom:20px}
.x-retail .qs label{position:relative;display:flex;gap:14px;align-items:flex-start;padding:15px 18px;border-radius:12px;background:#fff;border:1px solid var(--hair);cursor:pointer}
.x-retail .qs input{position:absolute;opacity:0}.x-retail .cbx{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid #c9b4b4;color:transparent;margin-top:2px;transition:.2s}
.x-retail .qs input:checked+.cbx{background:var(--red);border-color:var(--red);color:#fff}.x-retail .qs input:checked~.q{color:#9aa0ae;text-decoration:line-through}
.x-retail .q{font-size:15.5px;line-height:1.5;color:var(--h);font-weight:500}
.x-retail .ch-f{position:sticky;top:84px}

/* cities */
.x-retail .cts{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:30px 0 28px}
.x-retail .cts li{padding:22px;border-radius:14px;background:#fff;border:1px solid var(--hair)}.x-retail .cts li:first-child{background:var(--red);border-color:var(--red)}.x-retail .cts li:first-child :is(h3,p,svg){color:#fff}
.x-retail .cts h3{display:flex;gap:8px;align-items:center;font-size:16.5px;margin-bottom:8px}.x-retail .cts svg{color:var(--blue)}.x-retail .cts p{font-size:14.5px;line-height:1.55}

/* faq */
.x-retail .fqs{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.x-retail .fq{border-radius:14px;background:#fff;border:1px solid var(--hair)}
.x-retail .fq summary{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 20px;cursor:pointer;list-style:none}.x-retail .fq summary::-webkit-details-marker{display:none}
.x-retail .fq h3{font-size:16.5px;line-height:1.4;letter-spacing:-.01em}
.x-retail .fq i{flex:none;width:28px;height:28px;border-radius:50%;background:var(--blush);position:relative}.x-retail .fq i:before,.x-retail .fq i:after{content:"";position:absolute;left:8px;right:8px;top:13px;height:2px;background:var(--red)}.x-retail .fq i:after{transform:rotate(90deg);transition:.25s}.x-retail .fq[open] i:after{transform:none}
.x-retail .fq[open]{border-color:var(--red)}.x-retail .fq p{padding:0 20px 20px;font-size:15.5px}

/* final */
.x-retail .fin{padding:var(--sp) 0;background:#fff}
.x-retail .fcard{display:grid;grid-template-columns:1fr 220px;gap:40px;align-items:center;padding:56px;border-radius:28px;background:linear-gradient(135deg,#fff,#fdf0f0);border:1px solid var(--hair);box-shadow:0 60px 100px -60px rgba(205,33,34,.45)}
.x-retail .fcard h2{font-size:clamp(28px,3vw,42px);line-height:1.1;font-weight:800}.x-retail .fl>p{margin:16px 0 28px;max-width:640px;font-size:17.5px}
.x-retail .ftag{position:relative;padding:44px 18px 16px;border-radius:14px 14px 10px 10px;background:var(--red);color:#fff;text-align:center;clip-path:polygon(22% 0,78% 0,100% 12%,100% 100%,0 100%,0 12%);transform-origin:50% 0;animation:swing 4s ease-in-out infinite}
.x-retail .ftag small{display:block;font:700 11px var(--f1);letter-spacing:.12em;text-transform:uppercase;opacity:.8}.x-retail .ftag b{display:block;font:800 24px var(--f1);margin:6px 0 12px}.x-retail .ftag .bc{fill:#fff}
.x-retail .addr{font-size:13.5px!important;color:#7a8091;margin:24px 0 0!important}

/* related */
.x-retail .sbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.x-retail .sb{display:grid;grid-template-columns:auto 1fr;column-gap:14px;padding:20px;border-radius:14px;background:#fff;border:1px solid var(--hair);text-decoration:none;transition:.25s}
.x-retail .sb svg{grid-row:span 2;color:var(--red);align-self:center}.x-retail .sb b{font:600 15px var(--f1);color:var(--h)}.x-retail .sb span{font-size:13.5px;color:#6b7182}.x-retail .sb:hover{border-color:var(--red)}
.x-retail .more{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:30px}.x-retail .more a{padding:9px 16px;border-radius:999px;background:#fff;border:1px solid var(--hair);color:var(--h);text-decoration:none;font:600 14px var(--f1)}
.x-retail .rel .k{color:var(--red)}

/* reveal */
.x-retail .rv{opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*60ms)}.x-retail .rv.vis{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.x-retail .rv{opacity:1;transform:none;transition:none}.x-retail *{animation:none!important}}

/* responsive */
@media (max-width:1100px){.x-retail .cts{grid-template-columns:repeat(3,1fr)}.x-retail .sbs,.x-retail .ais{grid-template-columns:1fr 1fr}.x-retail .wcs,.x-retail .dmb{grid-template-columns:1fr 1fr}}
@media (max-width:900px){
 .x-retail .in{padding:0 20px}
 .x-retail :is(.hg,.an-g,.scp-g,.sto-g,.st-g,.dms-g,.sal-g,.b2b-g,.loy-h,.cmp-g,.ana-g,.prc-g,.cst-g,.ch-g,.fcard,.lcs){grid-template-columns:minmax(0,1fr);gap:32px}
 .x-retail :is(.sal-v,.ana-v,.prc-v,.ch-f){position:static;max-width:420px;margin:0 auto;width:100%}
 .x-retail .st-g{display:flex;flex-direction:column-reverse;gap:20px}.x-retail .st-r{top:56px;z-index:2;padding:16px;width:100%}.x-retail .glass{height:120px}.x-retail .pc{font-size:16px;top:6px}.x-retail .tnk span{font-size:14px;margin-top:6px}.x-retail .tnk small{display:none}.x-retail .gap{margin-top:10px!important;font-size:13px}
 .x-retail .ts{min-height:40vh}.x-retail .fqs{grid-template-columns:1fr}.x-retail .ftag{width:200px;margin:0 auto}.x-retail .ly.t{transform:none}}
@media (max-width:640px){
 .x-retail{font-size:16.5px}.x-retail .tgs{grid-template-columns:1fr 1fr}.x-retail .t-k{grid-column:1/-1}.x-retail .tag b{font-size:21px}
 .x-retail :is(.ais,.sbs,.wcs,.dmb,.cts,.shelf){grid-template-columns:1fr}.x-retail .cdg{grid-template-columns:1fr 1fr}.x-retail .cd b{font-size:26px}
 .x-retail .fcard{padding:36px 22px}.x-retail .hero .btns .btn{width:100%}}
/* v2: tanks heading above the grid */
.x-retail .st-h{max-width:760px;margin-bottom:10px}.x-retail .st-h h2{font-size:clamp(28px,3vw,42px);line-height:1.12;font-weight:800}
/* ===== review 2026-11-04 grid centring (no empty slot in the last row) */
@media (min-width:641px){.x-retail .ais{display:flex;flex-wrap:wrap;justify-content:center;column-gap:14px;row-gap:14px}.x-retail .ais>*{flex:0 1 calc((100% - 42px) / 4);min-width:0}}
@media (min-width:641px) and (max-width:900px){.x-retail .ais>*{flex-basis:calc((100% - 14px) / 2)}}