/* Only what Polaris web components don't provide: the product card grid, the image picker
   and a sticky selection bar. Everything else is native s-* components. */
[hidden]{display:none!important}
body{margin:0}

.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.pcard{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:12px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);transition:box-shadow .12s}
.pcard:hover{box-shadow:0 0 0 1px rgba(0,0,0,.18),0 4px 10px rgba(0,0,0,.06)}
.pcard.sel{box-shadow:0 0 0 2px #005bd3}
.pcard .img{position:relative;aspect-ratio:1;background:#f7f7f7;cursor:zoom-in}
.pcard .img img{width:100%;height:100%;object-fit:contain;display:block}
.pcard .chk{position:absolute;top:8px;left:8px;z-index:1;background:#fff;border-radius:6px;padding:2px 4px;
  box-shadow:0 1px 2px rgba(0,0,0,.15)}
.pcard .flag{position:absolute;top:8px;right:8px;z-index:1}
.pcard .body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard .t{font-weight:600;font-size:13px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.7em}
.pcard .meta{color:#616161;font-size:12px}
.pcard .prices{display:flex;justify-content:space-between;font-size:12px;gap:8px}
.pcard .prices b{font-size:14px}
.pcard .act{margin-top:auto}

.selbar{position:sticky;top:0;z-index:5}

.imgpick{display:flex;flex-wrap:wrap;gap:10px}
.imgpick .im{width:96px;text-align:center}
.imgpick img{width:96px;height:96px;object-fit:cover;border-radius:8px;border:2px solid #d4d4d4;cursor:pointer;background:#fafafa}
.imgpick .on img{border-color:#005bd3}
.imgpick .off img{opacity:.35}
.imgpick .ctl{display:flex;justify-content:center;gap:4px;margin-top:4px}

.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.gallery img{width:100%;aspect-ratio:1;object-fit:contain;background:#f7f7f7;border-radius:8px}

.thumbcell{width:48px}
.nowrap{white-space:nowrap}
.desc-preview{max-height:220px;overflow:auto;border:1px solid #e3e3e3;border-radius:8px;padding:8px 12px;font-size:13px}
.steps{counter-reset:s}
.pcell{display:flex;align-items:center;gap:12px;min-width:260px}
.acts{display:flex;gap:8px;justify-content:flex-end;white-space:nowrap}
.statnum{font-size:24px;font-weight:650;line-height:1.2}