/* Live Store page (/live-store): compact cards, a hover card with the details, a sheet for phones. Uses the storefront colours. */
.ls{background:var(--paper)}
.ls-hero{padding:10px 0 8px;background:linear-gradient(180deg,#fff,var(--soft))}
.ls-hero h1{font-size:22px;line-height:1.2;margin:0 0 2px;color:var(--ink)}
.ls-hero p{margin:0;color:var(--muted);max-width:640px;font-size:13px;line-height:1.4}
.ls-bar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);padding:12px 0}
.ls-row{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.ls-row+.ls-row{margin-top:10px}
.ls-btn{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:9px 16px;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
.ls-btn:hover{border-color:var(--brand)}
.ls-primary{background:linear-gradient(97deg,#53b2fe,#065af3);border-color:#065af3;color:#fff;box-shadow:0 6px 16px rgba(6,90,243,.22)}
.ls-primary:hover{filter:brightness(1.06)}
.ls-place{display:flex;gap:8px;flex:1;min-width:230px;max-width:460px}
.ls-place input,.ls-search input,#ls-sort{border:1px solid var(--line);border-radius:999px;padding:9px 14px;font:inherit;background:#fff;color:var(--ink);min-width:0}
.ls-place input{flex:1}
.ls-loc{display:inline-flex;align-items:center;gap:6px;background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-weight:600;color:var(--ink);max-width:100%}
.ls-loc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:300px}
.ls-link{border:0;background:none;color:var(--brand);font:inherit;font-weight:700;cursor:pointer;padding:0 0 0 4px}
.ls-filters{align-items:flex-end}
.ls-range{display:grid;gap:2px;min-width:220px;flex:1;max-width:340px;font-size:13px;color:var(--muted)}
.ls-range strong{color:var(--ink);font-size:15px}
.ls-range input{width:100%;accent-color:var(--brand)}
.ls-ticks{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted)}.ls-ticks i{font-style:normal}
.ls-search{position:relative;flex:1.2;min-width:210px}
.ls-search i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted)}
.ls-search input{width:100%;padding-left:36px}
.ls-chk{display:inline-flex;gap:6px;align-items:center;font-size:14px;color:var(--ink);cursor:pointer;margin:0}
.ls-results{padding:18px 0 56px}
.ls-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
#ls-count{font-weight:700;color:var(--ink)}#ls-count small{font-weight:500;color:var(--muted)}
.ls-tabs{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.ls-tabs button{border:0;background:none;padding:7px 18px;font:inherit;font-weight:600;color:var(--muted);cursor:pointer}
.ls-tabs button.on{background:var(--brand);color:#fff}
.ls-empty:empty{display:none}
.ls-empty{padding:34px 16px;text-align:center;color:var(--muted);font-size:16px}
.ls-empty strong{display:block;color:var(--ink);font-size:18px;margin-bottom:4px}
.ls-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
.ls-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:box-shadow .15s,border-color .15s,transform .15s;outline:none}
.ls-card:hover,.ls-card:focus-visible{border-color:#8cc8ff;box-shadow:0 10px 26px rgba(0,110,255,.14);transform:translateY(-2px)}
.ls-img{position:relative;aspect-ratio:1/1;background:#f1f6fc;display:grid;place-items:center;color:#b6c7d9;font-size:34px}
.ls-img img{width:100%;height:100%;object-fit:cover;display:block}
.ls-off{position:absolute;top:8px;left:8px;background:#e8453c;color:#fff;font-size:11px;font-weight:800;border-radius:999px;padding:2px 8px}
.ls-stk{position:absolute;bottom:8px;left:8px;font-size:10.5px;font-weight:700;border-radius:999px;padding:2px 8px;background:#e5f6ee;color:#12754a}
.ls-stk.few{background:#fff1d6;color:#8a5a00}.ls-stk.out{background:#fde7e5;color:#a1271e}
.ls-body{padding:9px 10px 10px;display:grid;gap:3px}
.ls-name{font-weight:700;font-size:13.5px;line-height:1.25;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px}
.ls-price{font-weight:800;color:var(--ink);font-size:16px}.ls-price s{font-weight:500;color:var(--muted);font-size:12px;margin-left:5px}.ls-price small{font-weight:500;color:var(--muted);font-size:11px}
.ls-st{font-size:11.5px;color:var(--muted);display:flex;gap:4px;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ls-st b{color:var(--brand-dark);font-weight:700}
.ls-dot{width:7px;height:7px;border-radius:50%;background:#98a7b8;flex:none}.ls-dot.on{background:var(--green)}
.ls-more{text-align:center;margin-top:18px}
.ls-note{margin:22px 0 0;text-align:center;font-size:12.5px;color:var(--muted)}
.ls-stores{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.ls-store{background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 14px;display:grid;gap:5px}
.ls-store h3{margin:0;font-size:16px;color:var(--ink)}.ls-store .biz{font-size:12px;color:var(--muted)}
.ls-store p{margin:0;font-size:13px;color:var(--ink)}
.ls-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.ls-actions a,.ls-actions button{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600;text-decoration:none;cursor:pointer;font-family:inherit}
.ls-actions a:hover,.ls-actions button:hover{border-color:var(--brand);color:var(--brand-dark)}
.ls-actions .wa{background:#25d366;border-color:#25d366;color:#fff}.ls-actions .wa:hover{color:#fff;filter:brightness(1.05)}
/* hover card (devices with a mouse) */
.ls-pop{position:absolute;z-index:60;width:330px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 22px 56px rgba(10,60,110,.22);padding:12px;display:grid;gap:8px;pointer-events:none}
.ls-pop[hidden]{display:none}
.ls-pop h4,.ls-sheet h2{margin:0;color:var(--ink);line-height:1.2}.ls-pop h4{font-size:16px}
.ls-thumbs{display:flex;gap:6px}.ls-thumbs img{width:62px;height:62px;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:#f1f6fc;cursor:pointer}
.ls-thumbs img.on{border-color:var(--brand);box-shadow:0 0 0 2px rgba(0,140,255,.25)}
.ls-pop .big{width:100%;height:170px;object-fit:contain;background:#f6f9fd;border-radius:12px}
.ls-short{font-size:13px;color:var(--ink);font-weight:600}.ls-det{font-size:12.5px;color:var(--muted);line-height:1.5;white-space:pre-line;max-height:96px;overflow:hidden}
.ls-kv{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--muted)}.ls-kv b{color:var(--ink)}
.ls-sbox{border-top:1px dashed var(--line);padding-top:8px;display:grid;gap:3px;font-size:12.5px;color:var(--ink)}.ls-sbox .nm{font-weight:700}.ls-sbox .mut{color:var(--muted)}
.ls-open{font-weight:700;color:#12754a}.ls-closed{font-weight:700;color:#a1271e}
/* sheet (tap on a phone, click on a desktop) */
.ls-modal{position:fixed;inset:0;z-index:100;background:rgba(11,42,74,.55);display:flex;align-items:flex-end;justify-content:center;padding:0}
.ls-modal[hidden]{display:none}
.ls-sheet{position:relative;background:#fff;width:100%;max-width:760px;max-height:92vh;overflow:auto;border-radius:22px 22px 0 0;padding:18px 18px 22px;display:grid;gap:12px}
.ls-x{position:absolute;right:12px;top:12px;border:0;background:#eef4fb;border-radius:50%;width:34px;height:34px;cursor:pointer;color:var(--ink);z-index:2}
.ls-sheet .big{width:100%;max-height:300px;object-fit:contain;background:#f6f9fd;border-radius:14px}
.ls-sheet h2{font-size:22px;padding-right:40px}.ls-sheet .ls-price{font-size:22px}
.ls-sheet .ls-det{max-height:none;font-size:14px}
@media(min-width:760px){.ls-modal{align-items:center;padding:20px}.ls-sheet{border-radius:22px}}
@media(max-width:700px){.ls-hero h1{font-size:19px}.ls-grid{grid-template-columns:repeat(2,1fr)}.ls-range{max-width:none}.ls-bar{position:static}}
@media(hover:none){.ls-pop{display:none!important}}
.ls-grid[hidden],.ls-stores[hidden],.ls-more [hidden]{display:none!important}

.ls-sentinel{height:1px}
.ls-loading{text-align:center;color:var(--muted);padding:16px;font-weight:600}
.ls-spin{display:inline-block;width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--brand);border-radius:50%;vertical-align:-3px;margin-right:6px;animation:lsSpin .8s linear infinite}
@keyframes lsSpin{to{transform:rotate(360deg)}}
.ls-end{text-align:center;color:var(--muted);padding:14px;font-size:14px}
.ls-timer{margin-top:10px;font-size:16px;color:var(--ink)}.ls-timer b{font-size:22px;font-variant-numeric:tabular-nums}
.ls-paused{opacity:.6;pointer-events:none}
.ls-empty a{color:var(--brand);font-weight:700}

/* the note to the customer, one small block under the heading */
.ls-note-wrap { padding: 8px 0 0; }
.ls-note { display: flex; gap: 8px; align-items: flex-start; margin: 0; background: #fff8e6; border: 1px solid #f3dc9b; border-radius: 8px; padding: 6px 10px; color: #4a3b0c; font-size: .76rem; line-height: 1.35; }
.ls-note > i { color: #c98a00; flex: none; font-size: .95rem; line-height: 1.2; }
@media (prefers-color-scheme: dark) { .ls-note { background: #2b2410; border-color: #5c4a14; color: #eadfb8; } }

.ls-ws { display: inline-block; margin: 2px 0 4px; padding: 1px 7px; border-radius: 999px; background: #e8f1ff; color: #0b4fb3; font-size: .72rem; line-height: 1.5; }
.ls-ws b { font-weight: 700; }
@media (prefers-color-scheme: dark) { .ls-ws { background: #14233f; color: #9cc3ff; } }