/* Mijn lijst (ls-) en Mijn collectie (cl-), in dezelfde stijl als de rest (base.css):
   witte kaarten (12 px hoeken), lichte binnenvlakken, alles in Plus Jakarta Sans met cijfers van gelijke breedte. */
.ls-app,.cl-app{--ls-r:var(--r, 4px);--ls-mono:var(--font-mono, ui-monospace, monospace);font-family:var(--font-body);color:var(--ink)}
.ls-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.ls-app .btn,.cl-app .btn,.ls-app .btn-sm,.ls-app .seg button,.cl-app .seg button{min-height:44px}
.ls-app .btn[aria-disabled="true"],.ls-app .stepper button[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.ls-app h2,.cl-app h2{font:700 22px/28px var(--font-body);letter-spacing:-.005em}
.ls-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ls-msg{margin-top:8px;font-size:13px;font-weight:600;color:var(--good)}
.ls-money{font-family:var(--ls-mono);font-weight:700;white-space:nowrap}
.ls-num,.ls-count,.cl-num,.cl-tab-n,.ls-shop-n{font-family:var(--ls-mono);font-variant-numeric:tabular-nums}
.ls-num{display:inline-block;font-size:12px;font-weight:700;line-height:18px;padding:0 6px;border-radius:var(--r-chip, 2px);color:var(--ink);background:var(--panel-2)}
.ls-noimg{font:600 12px var(--ls-mono);color:var(--ink-2)}
.ls-input{width:100%;min-height:44px;font:600 13px/18px var(--ls-mono);color:var(--ink);background:var(--panel);border:1px solid transparent;border-radius:var(--ls-r);padding:0 12px}
.ls-input::placeholder{font:400 14px var(--font-body);color:var(--ink-2)}
.ls-input:focus{outline:none;border-color:var(--blue);background:var(--surface)}
.ls-field{display:flex;flex-direction:column;gap:4px;margin-top:12px}
.ls-field label,.ls-out label{font:600 11px/14px var(--ls-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2)}

/* indeling: lijst links, verdeling rechts op brede schermen */
.ls-app{display:grid;gap:16px;align-items:start;margin-top:16px}
@media (min-width:1000px){
  .ls-app.ls-2col{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:auto 1fr;gap:24px}
  .ls-2col .ls-list,.ls-2col .ls-share{grid-column:1}
  .ls-2col .ls-plan{grid-column:2;grid-row:1 / span 2;position:sticky;top:calc(var(--head-h,0px) + 16px)}
  .ls-2col .ls-home{grid-column:1 / -1}
}
.ls-sec{background:var(--surface);border-radius:var(--r-card, 8px);box-shadow:var(--shadow);padding:16px;min-width:0}
@media (min-width:768px){.ls-sec{padding:24px}}
.ls-sec > h2{display:flex;align-items:center;gap:8px}
.ls-count{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:var(--r-chip, 2px);background:var(--blue-soft);color:var(--blue);font-size:12px;font-weight:700}
.ls-sub{font:700 11px/14px var(--ls-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);margin:20px 0 8px}
.ls-kicker{font:700 11px/14px var(--ls-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);margin-bottom:4px}
.ls-loading{color:var(--ink-2)}
.ls-empty p + p{margin-top:4px}
.ls-home a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}

/* items op de lijst */
.ls-items{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.ls-item{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:8px 16px;align-items:center;padding:12px;border-radius:var(--r-card, 8px);background:var(--panel)}
.ls-thumb{width:72px;height:72px;display:grid;place-items:center;background:var(--surface);border-radius:var(--ls-r);overflow:hidden;box-shadow:var(--shadow)}
.ls-thumb img{width:100%;height:100%;object-fit:contain;display:block;padding:4px}
.ls-info{min-width:0;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.ls-name{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:24px;font-size:16px;font-weight:700;line-height:22px;color:var(--ink)}
a.ls-name:hover{text-decoration:underline}
a.ls-name:hover .ls-num{text-decoration:none}
.ls-meta{font-size:13px;color:var(--ink-2);display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.ls-oos{color:var(--warn);font-weight:600}
.ls-items-oos .ls-item{opacity:.7}
.ls-ctl{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.stepper{display:inline-flex;align-items:center;border-radius:var(--ls-r);background:var(--surface);box-shadow:var(--shadow)}
.stepper button{width:40px;height:40px;border:0;background:none;font:700 16px var(--font-body);cursor:pointer;color:var(--ink)}
.stepper button:hover{background:var(--panel-2)}
.ls-qty{display:inline-block;min-width:28px;text-align:center;font:700 14px var(--ls-mono)}
.ls-qtyx{font:700 13px var(--ls-mono);color:var(--ink)}
.ls-rm{color:var(--ink-2)}
.ls-item-read{grid-template-columns:72px minmax(0,1fr)}
@media (max-width:560px){
  .ls-item,.ls-item-read{grid-template-columns:56px minmax(0,1fr)}
  .ls-thumb{width:56px;height:56px}
  .ls-ctl{grid-column:1 / -1;justify-content:space-between}
}

/* verdeling over winkels */
.ls-plan-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.ls-seg{background:var(--panel)}
.ls-grand{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:2px 12px;margin-top:16px}
.ls-grand-l{font:700 11px/14px var(--ls-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
.ls-grand-v{font:900 36px/40px var(--font-body);letter-spacing:-.015em;text-align:right;white-space:nowrap}
.ls-grand-meta{grid-column:1 / -1;font:500 12px/18px var(--ls-mono);color:var(--ink-2);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ls-save{margin-top:12px;padding:10px 12px;background:var(--good-soft);color:var(--good);border-radius:var(--ls-r);font-weight:700;font-size:13px}
.ls-save-cost{background:var(--panel);color:var(--ink-2)}
.ls-plan > .small{margin-top:8px}
.ls-shops{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.ls-shop{border-radius:var(--r-card, 8px);background:var(--panel);padding:12px}
.ls-shop-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.ls-shop-name{display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--ls-r);background:var(--surface);font:700 13px/18px var(--ls-mono);color:var(--ink)}
.ls-shop-n{font-size:11px;color:var(--ink-2)}
.ls-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.ls-line{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 12px;align-items:center;padding:8px 10px;border-radius:var(--ls-r);background:var(--surface)}
.ls-line-name{font-size:13px;font-weight:600;min-width:0}
.ls-line-price{text-align:right;color:var(--ink);font-weight:700}
.ls-unit{display:block;font:500 11px var(--ls-mono);color:var(--ink-2);white-space:nowrap}
.ls-go{white-space:nowrap}
.ls-sum{margin:8px 0 0;padding:0 4px}
.ls-sum > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:3px 0;font-size:13px;color:var(--ink-2)}
.ls-sum dt{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.ls-sum dd{margin:0;font:600 12px var(--ls-mono);white-space:nowrap}
.ls-pts dd{color:var(--good)}
.ls-sum .ls-sum-total{border-top:1px solid var(--panel-4);margin-top:4px;padding-top:6px;color:var(--ink);font-weight:700}
.ls-sum .ls-sum-total dd{font-size:14px;font-weight:700}
.ls-est{font:600 10px/16px var(--ls-mono);color:var(--warn);background:var(--warn-soft);border-radius:var(--r-chip, 2px);padding:0 5px;white-space:nowrap}
.ls-hint{font-size:12px;color:var(--ink-2)}
.ls-foot{margin-top:12px}
@media (max-width:560px){
  .ls-line{grid-template-columns:minmax(0,1fr) auto}
  .ls-line .ls-go{grid-column:1 / -1;width:100%}
}

/* delen en afvinken: bovenaan, met één hoofdknop "Deel je verlanglijst" */
.ls-share > .small{margin-top:8px}
.ls-share > .ls-field:first-of-type{margin-top:0}
.ls-share-main{margin-top:12px}
.ls-share-main .btn{width:100%;gap:8px}
@media (min-width:600px){.ls-share-main .btn{width:auto}}
.ls-share-sub{margin-top:8px;font-size:13px;line-height:19px;color:var(--ink-2)}
.ls-coll-link{margin-top:12px}  /* "Mijn collectie", onderaan de verlanglijst */
.ls-coll-link a{display:inline-flex;align-items:center;min-height:40px;font-weight:600}
.ls-out{margin-top:12px;display:flex;flex-direction:column;gap:4px}
.ls-out-row{display:flex;gap:8px}
.ls-out-row .ls-input{flex:1;min-width:0}
.ls-owned{margin:4px 0 0;padding:0;list-style:none}
.ls-owned a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.ls-owner{margin-top:12px;padding:12px;border-radius:var(--ls-r);background:var(--panel)}
.ls-owner .ls-btns{margin-top:8px}
.ls-claim-item{grid-template-columns:72px minmax(0,1fr) minmax(0,340px)}
.ls-claim-item .ls-go{margin-top:4px}
.ls-claim{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end}
.ls-claim .ls-by{flex:1 1 140px;width:auto;min-width:0;background:var(--surface)}
.ls-claim .btn{flex:none}
.ls-claimed{display:flex;align-items:center;gap:8px;font:600 12px var(--ls-mono);color:var(--good)}
.ls-claimed::before{content:"";width:8px;height:8px;flex:none;background:var(--good);border-radius:50%}
/* right after "Ik koop dit": the reassurance for the giver, with a stamp that fx.js stamps in */
.ls-done{margin:6px 0 0;font-size:13px;line-height:1.45;color:var(--good)}
.ls-stamp{display:inline-block;margin-right:4px;padding:1px 8px;border:2px solid var(--good);border-radius:8px;background:var(--good-soft);font-weight:800;transform:rotate(-3deg)}
.is-claimed .ls-thumb{opacity:.65}
@media (max-width:700px){
  .ls-claim-item{grid-template-columns:56px minmax(0,1fr)}
  .ls-claim-item .ls-thumb{width:56px;height:56px}
  .ls-claim{grid-column:1 / -1;justify-content:flex-start}
}

/* collectie: overzicht */
.cl-app{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.cl-summary,.cl-local{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow);padding:16px}
@media (min-width:768px){.cl-summary,.cl-local{padding:24px}}
.cl-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.cl-stats>div{background:var(--panel);border-radius:var(--r);padding:10px 12px;min-width:0}
.cl-stats dt{font:600 11px/14px var(--font-body);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2)}
.cl-stats dd{margin:2px 0 0;font:800 24px/30px var(--font-body);letter-spacing:-.02em;overflow-wrap:anywhere}
.cl-stats dd.cl-d{margin:0;font:500 12px/16px var(--font-body);letter-spacing:0;color:var(--ink-2)}
@media (max-width:560px){.cl-stats{grid-template-columns:1fr 1fr}.cl-stats>div:first-child{grid-column:1 / -1}}
.cl-vs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;font-size:13px;line-height:18px;color:var(--ink-2)}
.cl-summary .small{margin-top:8px}
.cl-local-h{display:flex;gap:12px;align-items:flex-start}
.cl-lock{width:40px;height:40px;border-radius:var(--r);background:var(--blue-tint);color:var(--blue);display:grid;place-items:center;flex:none}
.cl-app .cl-local h2{font:700 16px/22px var(--font-body)}
.cl-local .ls-btns{margin-top:12px}
.cl-tabs{align-self:flex-start}
.cl-tab-n{font-size:12px;opacity:.85}
.cl-grid{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.cl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.cl-cell{min-width:0;display:flex}
.cl-card{flex:1;min-width:0;display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-areas:"img mid" "price price";gap:10px 12px;align-items:center;padding:12px;background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow);color:var(--ink);text-decoration:none}
a.cl-card:hover{text-decoration:none}
a.cl-card:hover .cl-name{text-decoration:underline}
.cl-img{grid-area:img;display:grid;place-items:center;width:64px;height:64px;background:var(--panel);border-radius:var(--r);overflow:hidden;font-size:12px;font-weight:700;color:var(--ink-2)}
.cl-img img{width:100%;height:100%;object-fit:contain;padding:4px;display:block}
.cl-mid{grid-area:mid;min-width:0;display:flex;flex-direction:column;gap:2px}
.cl-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;line-height:16px;color:var(--ink-2)}
.cl-top .tag{margin-left:auto}
.cl-name{font:700 15px/20px var(--font-body);overflow-wrap:anywhere}
.cl-meta{font-size:12px;line-height:16px;color:var(--ink-2)}
.cl-price{grid-area:price;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;padding:8px 10px;border-radius:var(--r);background:var(--panel)}
.cl-price span{font-size:12px;line-height:16px;color:var(--ink-2)}
.cl-price b{margin-left:auto;font:800 16px/22px var(--font-body)}
.cl-price .cl-off{flex-basis:100%;text-align:right;color:var(--good);font-weight:600}
.cl-empty p + p{margin-top:4px}
.ls-sec > .empty{margin-top:12px;box-shadow:none;background:var(--panel)}