/* picktheshop mockup: the start page (home) */
.sp-top{position:relative;background:var(--vault);color:var(--vault-ink);overflow:hidden;isolation:isolate;padding-bottom:120px}
.sp-top .blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;z-index:-1;animation:drift 18s ease-in-out infinite alternate}
.sp-top .b1{width:520px;height:520px;left:-120px;top:-180px;background:rgba(94,234,212,.35)}
.sp-top .b2{width:460px;height:460px;right:-140px;top:40px;background:rgba(212,175,55,.28);animation-duration:22s}
.sp-top .b3{width:380px;height:380px;left:40%;top:160px;background:rgba(18,183,106,.22);animation-duration:26s}
@keyframes drift{to{transform:translate(60px,40px) scale(1.12)}}
.sp-top::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--vault-line) 1px,transparent 1px),linear-gradient(90deg,var(--vault-line) 1px,transparent 1px);
  background-size:48px 48px;opacity:.28;mask-image:radial-gradient(60% 70% at 50% 20%,#000,transparent)}
.sp-bar{display:flex;align-items:center;gap:14px;height:68px}
.sp-bar .logo{color:var(--vault-ink)}
.sp-links{display:flex;gap:2px;margin-left:auto;align-items:center}
.sp-links a{font-size:14px;text-decoration:none;color:var(--vault-muted);padding:8px 11px;border-radius:999px}
.sp-links a:hover{color:var(--vault-ink);background:rgba(255,255,255,.06)}
@media (max-width:860px){.sp-links a.opt{display:none}}
.country{display:flex;background:rgba(255,255,255,.05);border:1px solid var(--vault-line);border-radius:999px;padding:3px;gap:2px}
.country button{border:0;background:transparent;color:var(--vault-muted);font:500 12.5px/1 var(--sans);padding:7px 10px;border-radius:999px;cursor:pointer;display:flex;gap:6px;align-items:center;white-space:nowrap}
.country button[aria-pressed=true]{background:var(--vault-ink);color:var(--vault)}
.country .fl{font-size:13px;line-height:1}
@media (max-width:560px){.country .nm{display:none}.country button{padding:7px 8px}}
.editbtn{border:1px solid var(--vault-line);background:transparent;color:var(--vault-muted);border-radius:999px;padding:8px 14px;font:500 12px/1 var(--mono);cursor:pointer}
.editbtn:hover{color:var(--vault-ink);border-color:var(--vault-muted)}
.editing .editbtn{background:var(--mint);color:var(--vault);border-color:var(--mint)}
.sp-hero{text-align:center;padding:clamp(34px,6vw,70px) 0 0}
.sp-hero h1{font-size:clamp(38px,5.6vw,72px);letter-spacing:-.03em}
.sp-hero h1 em{color:var(--mint)}
.sp-hero p{color:var(--vault-muted);font-size:clamp(15px,1.5vw,18px);margin:14px auto 0;max-width:52ch}
.modes{position:relative;display:inline-flex;margin:28px auto 0;background:rgba(255,255,255,.05);border:1px solid var(--vault-line);border-radius:999px;padding:4px}
.modes button{position:relative;z-index:1;border:0;background:transparent;color:var(--vault-muted);font:600 13.5px/1 var(--sans);padding:10px 16px;border-radius:999px;cursor:pointer;transition:color .25s}
.modes button[aria-pressed=true]{color:var(--vault)}
.modes .pill{position:absolute;z-index:0;top:4px;bottom:4px;border-radius:999px;background:var(--mint);transition:left .35s cubic-bezier(.3,1.3,.5,1),width .35s cubic-bezier(.3,1.3,.5,1)}
.sbox{max-width:640px;margin:16px auto 0;display:flex;align-items:center;gap:10px;background:var(--card);color:var(--ink);border-radius:999px;padding:7px 7px 7px 20px;
  box-shadow:0 20px 60px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06);transition:box-shadow .3s}
.sbox:focus-within{box-shadow:0 20px 60px -20px rgba(0,0,0,.7),0 0 0 4px rgba(94,234,212,.35)}
.sbox svg{width:20px;height:20px;color:var(--faint);flex:none}
.sbox input{flex:1;min-width:0;border:0;background:transparent;outline:0;color:var(--ink);font:500 17px/1.3 var(--sans);padding:11px 0}
.sbox input::placeholder{color:var(--faint)}
.sbox .btn{padding:13px 20px}
.sp-hint{color:var(--vault-muted);font:500 12px/1.4 var(--mono);text-align:center;margin:16px 0 0}
.sp-hint b{color:var(--vault-ink);font-weight:500}

/* the raised sheet holding the grid */
.sheet-wrap{margin-top:-90px;position:relative;z-index:2}
.sheetc{position:relative;background:var(--card);border:1px solid var(--line);border-radius:30px;box-shadow:var(--shadow-lg);padding:clamp(18px,3vw,34px)}
.sheet-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.sheet-h h2{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.02em}
.sheet-h h2 em{color:var(--muted)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);align-items:center}
.legend span{display:inline-flex;gap:6px;align-items:center}
.swiss{display:none;margin:0 0 18px;border-radius:18px;background:linear-gradient(100deg,#FFF1F0,#FFF8E8);color:#5B1A12;padding:14px 16px;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
@media (prefers-color-scheme:dark){.swiss{background:linear-gradient(100deg,#2A1412,#2A2210);color:#FFD9D3}}
.swiss.on{display:flex}
.swiss b{font:600 18px/1.2 var(--display)}
.swiss p{margin:3px 0 0;font-size:14px;opacity:.85;max-width:62ch}
.swiss .flag{width:34px;height:34px;border-radius:8px;background:#DA291C;display:grid;place-items:center;flex:none}
.swiss .flag svg{width:20px;height:20px}
.swiss .l{display:flex;gap:12px;align-items:center}

.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:20px 10px}
.t{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;padding:8px 4px;border-radius:16px;text-decoration:none;color:var(--ink);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),opacity .3s}
.t.enter{opacity:0;transform:translateY(14px) scale(.96)}
.t .ic{position:relative;width:62px;height:62px;border-radius:18px;background:var(--card);box-shadow:0 1px 2px rgba(15,23,38,.06),0 10px 24px -12px rgba(15,23,38,.3);display:grid;place-items:center;
  border:1px solid var(--line);transition:box-shadow .2s}
.t .ic img{width:32px;height:32px;object-fit:contain;border-radius:6px}
.t .ic .mo{width:100%;height:100%;border-radius:17px;display:grid;place-items:center;font:600 24px var(--display);color:#0F1726}
.t .nm{font:600 13.5px/1.15 var(--sans);text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t .dot{position:absolute;right:-6px;top:-6px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:2.5px solid var(--card);
  font:700 10px/1 var(--sans)}
.t .dot svg{width:11px;height:11px}
.dot.ok{background:var(--ok);color:#03210F}
.dot.mk{background:#5B8DEF;color:#fff}
.dot.gem{background:var(--gold);color:#2A1F00}
.dot.warn{background:var(--warn);color:#2A1600}
.dot.bad{background:var(--bad);color:#fff}
.dot.chk{background:var(--cream-2);color:var(--muted)}
.legend .dot{position:static;width:18px;height:18px;border-width:0}
.legend .dot svg{width:10px;height:10px}
@media (hover:hover){
  .t:hover{transform:translateY(-4px)}
  .t:hover .ic{box-shadow:0 2px 4px rgba(15,23,38,.08),0 22px 40px -18px rgba(15,23,38,.45)}
}
.t .rm{position:absolute;top:-4px;left:10px;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--card);border:0;display:none;place-items:center;cursor:pointer;z-index:3}
.t .rm svg{width:11px;height:11px}
.editing .t.mine .rm{display:grid}
.editing .t.mine{cursor:grab;animation:jig .32s ease-in-out infinite alternate}
.editing .t.mine:nth-child(2n){animation-delay:.12s}
@keyframes jig{from{transform:rotate(-1.2deg)}to{transform:rotate(1.2deg)}}
.t.dragging{opacity:.35}
.t.feat .ic{outline:2px solid var(--gold);outline-offset:3px}
.t.feat .flag{position:absolute;top:-8px;left:50%;transform:translateX(-50%);font:600 8.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--gold);color:#2A1F00;padding:3px 7px;border-radius:999px;z-index:2;white-space:nowrap}
.t.feat{transition:opacity .35s}
.t.add .ic{background:transparent;border:2px dashed var(--line-2);box-shadow:none;color:var(--muted)}
.t.add .ic svg{width:24px;height:24px}
@media (hover:hover){.t.add:hover .ic{border-color:var(--ok);color:var(--ok)}}
.tip{position:absolute;z-index:30;pointer-events:none;background:var(--ink);color:var(--card);border-radius:14px;padding:10px 12px;font-size:12.5px;line-height:1.4;width:220px;
  box-shadow:var(--shadow-lg);opacity:0;transform:translateY(6px);transition:opacity .15s,transform .15s}
.tip.on{opacity:1;transform:none}
.tip b{display:block;font-size:13.5px;margin-bottom:2px}
.tip span{opacity:.8;display:block}
.tip em{font-style:normal;display:inline-flex;gap:5px;align-items:center;margin-top:6px;font-weight:600}
.tip i{width:8px;height:8px;border-radius:50%;display:inline-block}

/* shelves */
.shelves{display:grid;gap:clamp(30px,4vw,46px);margin-top:clamp(40px,5vw,64px)}
.shelf-h{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.shelf-h h3{font-size:clamp(20px,2vw,24px)}
.shelf-h p{margin:4px 0 0;color:var(--muted);font-size:14px}
.arrows{display:flex;gap:6px}
.arrows button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);background:var(--card);cursor:pointer;display:grid;place-items:center;color:var(--ink)}
.arrows button svg{width:16px;height:16px}
.arrows button:hover{border-color:var(--ink)}
@media (hover:none){.arrows{display:none}}
.row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 14px;scrollbar-width:none;mask-image:linear-gradient(90deg,#000 92%,transparent)}
.row::-webkit-scrollbar{display:none}
.sc{scroll-snap-align:start;flex:none;width:230px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:14px;display:flex;flex-direction:column;gap:10px;position:relative;
  transition:transform .25s,box-shadow .25s}
@media (hover:hover){.sc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}}
.sc .hd{display:flex;gap:11px;align-items:center}
.sc .ic{position:relative;width:46px;height:46px;border-radius:14px;background:var(--cream);display:grid;place-items:center;border:1px solid var(--line);flex:none}
.sc .ic img{width:26px;height:26px;border-radius:5px}
.sc .ic .mo{width:100%;height:100%;border-radius:13px;display:grid;place-items:center;font:600 19px var(--display);color:#0F1726}
.sc .ic .dot{position:absolute;right:-6px;top:-6px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;border:2.5px solid var(--card)}
.sc .ic .dot svg{width:10px;height:10px}
.sc b{display:block;font:600 15px/1.2 var(--sans)}
.sc .dom{font:500 11.5px var(--mono);color:var(--muted)}
.sc p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.4;min-height:38px}
.sc .ft{display:flex;justify-content:space-between;align-items:center;margin-top:auto}
.sc .cty{font:500 11px var(--mono);color:var(--muted)}
.pin{border:1px solid var(--line-2);background:transparent;border-radius:999px;padding:7px 11px;font:600 12.5px/1 var(--sans);cursor:pointer;display:inline-flex;gap:5px;align-items:center;color:var(--ink)}
.pin svg{width:13px;height:13px}
.pin:hover{border-color:var(--ok);color:var(--ok-ink)}
.pin.done{background:var(--ok-2);border-color:transparent;color:var(--ok-ink)}
.fly{position:fixed;z-index:80;pointer-events:none;border-radius:14px;transition:transform .7s cubic-bezier(.5,-0.3,.3,1.2),opacity .7s;box-shadow:var(--shadow-lg)}

/* recently checked */
.recent{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media (max-width:1000px){.recent{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.recent{grid-template-columns:1fr 1fr}}
.rc{border-radius:18px;padding:14px;background:var(--card);border:1px solid var(--line);text-decoration:none;display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden}
.rc::before{content:"";position:absolute;inset:0 auto 0 0;width:4px}
.rc.ok::before{background:var(--ok)}.rc.warn::before{background:var(--warn)}.rc.bad::before{background:var(--bad)}
.rc b{font:600 14px/1.25 var(--sans);word-break:break-word}
.rc span{font-size:12.5px;color:var(--muted)}
.rc .pill{align-self:flex-start}

/* deeper band */
.deep{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1000px){.deep{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.deep{grid-template-columns:1fr}}
.dp{border-radius:24px;padding:20px;text-decoration:none;display:flex;flex-direction:column;gap:8px;min-height:190px;transition:transform .25s;position:relative;overflow:hidden}
@media (hover:hover){.dp:hover{transform:translateY(-4px)}}
.dp .k{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.dp b{font:600 22px/1.15 var(--display);letter-spacing:-.015em}
.dp span{font-size:14.5px;opacity:.85}
.dp .go{margin-top:auto;display:inline-flex;gap:6px;align-items:center;font-weight:600;font-size:14px}
.dp .go svg{width:16px;height:16px;transition:transform .2s}
.dp:hover .go svg{transform:translateX(4px)}
.dp.d1{background:var(--vault);color:var(--vault-ink)}
.dp.d2{background:var(--bad-2);color:var(--bad-ink)}
.dp.d3{background:linear-gradient(135deg,#DA291C,#A51E14);color:#fff}
.dp.d4{background:#FFE36E;color:#15130E}

/* check overlay */
.ov{position:fixed;inset:0;z-index:90;background:rgba(5,9,18,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;place-items:center;padding:16px}
.ov.on{display:grid}
.ov .scanner{width:min(520px,100%);animation:pop .4s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.92);opacity:0}}
.ov .acts{display:flex;gap:10px;padding:0 18px 18px;flex-wrap:wrap}
.ov .acts .btn{flex:1}
.ov .x{position:absolute;right:12px;top:10px;border:0;background:transparent;color:var(--vault-muted);cursor:pointer;width:32px;height:32px;border-radius:50%}
.ov .x:hover{background:rgba(255,255,255,.08)}
.ov .x svg{width:16px;height:16px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);opacity:0;z-index:95;background:var(--ink);color:var(--card);font:500 13px/1.3 var(--sans);padding:11px 16px;border-radius:999px;
  box-shadow:var(--shadow-lg);transition:transform .3s,opacity .3s;max-width:calc(100% - 32px);text-align:center}
.toast.on{transform:translate(-50%,0);opacity:1}
.addf{grid-column:1/-1;display:none;max-width:520px;margin:4px auto 0;width:100%;gap:8px;background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:12px}
.addf.on{display:flex}
.addf input{flex:1;min-width:0;border:1px solid var(--line-2);background:var(--card);color:var(--ink);border-radius:12px;padding:11px 12px;font:500 15px var(--sans);outline:0}
.addf input:focus{border-color:var(--ok)}
.addf .btn{padding:11px 16px}
.sp-foot-links{text-align:center;margin-top:22px;font:500 12px var(--mono);color:var(--muted)}
.sp-foot-links button{background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;font:inherit}
button.t{border:0;background:transparent;font:inherit;cursor:pointer;color:var(--ink)}
.legend .dot{border-radius:50%;display:inline-grid;place-items:center;font:700 9px/1 var(--sans)}
.legend .dot.ok{color:#03210F}
.ov .scanner{color:var(--vault-ink)}
.shelves > *,.shelf{min-width:0}
.yh{display:flex;align-items:center;gap:12px}
.sheetc .editbtn{border-color:var(--line-2);color:var(--muted)}
.sheetc .editbtn:hover{color:var(--ink);border-color:var(--ink)}
.editing .sheetc .editbtn{background:var(--ok);border-color:var(--ok);color:#03210F}
@media (max-width:560px){
  .tiles{grid-template-columns:repeat(4,1fr);gap:16px 4px}
  .t{padding:6px 0}
  .t .ic{width:54px;height:54px;border-radius:16px}
  .t .ic img{width:28px;height:28px}
  .t .nm{font-size:11.5px}
  .t .dot{width:20px;height:20px;right:-5px;top:-5px}
  .sp-bar .logo{font-size:19px}
  .sp-bar .logo svg{width:28px;height:28px}
  .country button{padding:7px 7px}
}
/* worldwide directory */
.dnav{position:sticky;top:0;z-index:20;margin:0 -16px 6px;padding:10px 16px;background:color-mix(in srgb,var(--cream) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.dnav-in{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.dnav-in::-webkit-scrollbar{display:none}
.dnav a{flex:none;text-decoration:none;font:600 13.5px/1 var(--sans);padding:9px 13px;border-radius:999px;color:var(--ink-2);border:1px solid var(--line-2);transition:background .2s,color .2s,border-color .2s}
.dnav a:hover{border-color:var(--ink)}
.dnav a.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.shipnote{margin:10px 0 0;font:500 12px/1.4 var(--mono);color:var(--muted)}
.dsec{padding-top:clamp(28px,4vw,44px);scroll-margin-top:70px}
.dgroup{margin-top:6px}
.dlabel{display:inline-block;font:600 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:10px 0 8px}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:14px 8px}
.dt{position:relative;opacity:0;transform:translateY(10px) scale(.97);transition:opacity .45s,transform .45s cubic-bezier(.2,.8,.2,1)}
.dt.in{opacity:1;transform:none}
.dt .t{padding:8px 4px 4px}
.dt .sh{font:500 10.5px/1.2 var(--mono);color:var(--muted);text-align:center;max-width:100%}
.dadd{position:absolute;top:2px;right:calc(50% - 44px);width:24px;height:24px;border-radius:50%;border:1px solid var(--line-2);background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer;
  opacity:0;transform:scale(.8);transition:opacity .15s,transform .15s,background .15s;z-index:3;box-shadow:var(--shadow)}
.dadd svg{width:12px;height:12px}
.dt:hover .dadd,.dadd:focus-visible{opacity:1;transform:none}
.dadd:hover{background:var(--ok);color:#03210F;border-color:var(--ok)}
.dadd.on{opacity:1;transform:none;background:var(--ok-2);color:var(--ok-ink);border-color:transparent}
@media (hover:none){.dadd{opacity:1;transform:none}}
.dt .t .dot{right:-6px;top:-6px}
.dt .ic{position:relative}
.dadd{top:-4px;left:calc(50% - 40px);right:auto}
.worth{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin:8px 0 2px;font:600 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#7A5B00}
.worth::before,.worth::after{content:"";height:1px;background:var(--line-2);flex:1}
.worth span{display:inline-flex;gap:6px;align-items:center}
.worth span::before{content:"★";color:var(--gold);font-size:13px}
@media (prefers-color-scheme:dark){.worth{color:#F5D46E}}
@media (max-width:560px){
  .dgrid{grid-template-columns:repeat(4,1fr);gap:14px 4px}
  .dt .sh{font-size:9.5px}
  .dnav{margin:0 -16px 6px}
}
.shelves:has(.dnav){display:block}