/* POS System page. Builds on the shared .we2 and .ec components. */
.pos .pos-demo{max-width:560px;justify-self:end;width:100%}
.pos-demo__body{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);background:#fbfaf7;color:#1c1a16;min-height:300px}
.pos-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px;align-content:start}
.pos-tile{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:2px;padding:12px;background:#fff;border:1px solid #d8d2c2;transition:border-color .2s,transform .2s}.pos-tile:hover{border-color:#1466ff;transform:translateY(-2px)}.pos-tile:focus-visible{outline:2px solid var(--blue)}
.pos-tile b{font-size:14px}.pos-tile span{font-size:12.5px;color:#6a645a}.pos-tile.is-out{opacity:.45;pointer-events:none}
.pos-rec{padding:12px 14px;border-left:1px solid #d8d2c2;background:#fff;display:grid;gap:8px;align-content:start}.pos-rec__h{font:600 11px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:#6a645a}
.pos-rec ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;max-height:130px;overflow:auto}.pos-rec li{display:flex;justify-content:space-between;font-size:13.5px;border-bottom:1px dashed #e2dccd;padding-bottom:3px}.pos-rec li.is-empty{color:#8a8374;border:0}
.pos-rec__t{display:flex;justify-content:space-between;font-size:16px;border-top:2px solid #1c1a16;padding-top:6px}.pos-rec__b{display:flex;gap:8px}.pos-rec__b .we2-btn{min-height:40px;padding:0 14px;font-size:14px}
.pos-rec__m{font-size:12.5px;color:#0c8f5b;min-height:1.2em}
.pos-sync{display:grid;grid-template-columns:auto 1fr 1fr;gap:10px 14px;align-items:center;padding:10px 14px;border-top:1px solid var(--line);background:#fff;font-size:13px}.pos-sync__d{width:10px;height:10px;border-radius:50%;background:#c9d1de}.pos-sync__d.pulse{background:#1466ff;animation:pos-p .9s}
@keyframes pos-p{0%{box-shadow:0 0 0 0 rgba(20,102,255,.6)}100%{box-shadow:0 0 0 14px rgba(20,102,255,0)}}
.pos-feat{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pos-feat li{background:#fff;border:1px solid var(--line);padding:0 0 18px;display:grid;align-content:start;transition:border-color .25s,transform .25s,box-shadow .25s}.pos-feat li:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:0 18px 36px -26px rgba(20,102,255,.55)}
.pos-feat svg{display:block;width:100%;height:auto;aspect-ratio:12/7;background:#f3f6fa linear-gradient(#e3e9f3 1px,transparent 1px) 0 0/20px 20px;border-bottom:1px solid var(--line);margin-bottom:14px}.pos-feat h3{font-size:18px;padding-inline:18px}.pos-feat p{padding:6px 18px 0;color:var(--ink2);font-size:15px}
.pos-feat .a1{transition:transform .5s;transform-box:fill-box}.pos-feat li:hover .a1{transform:translateX(6px)}
.pos-roll{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,24px)}.pos-roll li{border-top:2px solid #2a3340;padding-top:12px;display:grid;gap:4px}.pos-roll span{font:500 12px var(--font-mono);color:#79a8ff}.pos-roll b{font-size:20px;color:#fff}.pos-roll p{color:#aab6c8;font-size:14.5px}
.pos-links{list-style:none;margin:20px 0 0;padding:16px 0 0;border-top:1px solid #232a36;display:flex;flex-wrap:wrap;gap:8px 24px}.pos-links a{color:#9bbcff;text-decoration:none;font-size:14.5px}.pos-links a:hover{text-decoration:underline}
@media (max-width:1100px){.pos-feat{grid-template-columns:repeat(2,1fr)}}
@media (max-width:1000px){.pos .pos-demo{justify-self:stretch;max-width:none}}
@media (max-width:760px){.pos-demo__body{grid-template-columns:minmax(0,1fr)}.pos-rec{border-left:0;border-top:1px solid #d8d2c2}.pos-feat,.pos-roll{grid-template-columns:minmax(0,1fr)}.pos-sync{grid-template-columns:auto 1fr}.pos-sync__o{grid-column:1/-1}}