/* WE DANCE website · shop.css (2026-11-05) — /shop and /shop/<slug>. Prefix sp-. Mobile first; design tokens from site.css. */

/* ---------- /shop header ---------- */
.sp-top .lead{margin-bottom:18px}
.sp-facts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sp-facts li{display:flex;gap:10px;align-items:baseline;font-size:15px;color:var(--ink3)}
.sp-facts b{font-family:var(--font-en);font-style:italic;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:13px;color:var(--ink);min-width:62px}
@media (min-width:900px){.sp-facts{grid-template-columns:auto auto auto;gap:28px;justify-content:start}.sp-facts b{min-width:0}}

/* ---------- helper ---------- */
.sp-help-lead{color:var(--ink3);max-width:46em}
.sp-help-grid{display:grid;gap:12px;margin-top:16px}
@media (min-width:640px){.sp-help-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.sp-help-grid{grid-template-columns:repeat(5,1fr)}}
.sp-help h3{font-size:17px;margin-bottom:8px}
.sp-help-l{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sp-help-l li{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;line-height:1.35}
.sp-help-l a{font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line);min-height:28px;display:inline-flex;align-items:center}
.sp-help-l a:hover{text-decoration-color:var(--ink)}
.sp-hp{font-size:13px;color:var(--mute)}
.sp-help-n{font-size:13px;color:var(--mute);margin:10px 0 0}
.sp-help p{font-size:15px}
.sp-help.on{outline:3px solid var(--ink);outline-offset:-3px}
.sp-pick{background:var(--white);padding:16px;margin-top:8px;display:grid;gap:8px;border-left:4px solid var(--ink)}
.sp-pick label{font-weight:700;font-size:15px}
.sp-pick-out{margin:0;font-size:15px}
.sp-pick-out:empty{display:none}
.sp-pick-out a{font-weight:700}
@media (min-width:900px){.sp-pick{grid-template-columns:auto minmax(260px,420px);align-items:center;column-gap:16px}.sp-pick-out{grid-column:1/-1}}

/* ---------- chips ---------- */
.sp-chips{position:sticky;top:var(--hdr-h);z-index:5;background:var(--white);padding:10px 0;margin:-10px 0 18px;flex-wrap:nowrap;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.sp-chips::-webkit-scrollbar{display:none}
.sp-chips .chip{flex:none;min-height:42px}

/* ---------- product grid ---------- */
.sp-cat{margin-bottom:40px;scroll-margin-top:calc(var(--hdr-h) + 70px)}
.sp-cat:last-child{margin-bottom:0}
.sp-cat .sech{margin-bottom:14px;align-items:baseline}
.sp-cat-c{font-size:14px}
.sp-cat-n{font-size:15px;color:var(--ink3);max-width:52em;margin-bottom:16px}
.sp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
@media (min-width:768px){.sp-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 16px}}
@media (min-width:1100px){.sp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sp-card{min-width:0}
.sp-card-a{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.sp-ph{background:var(--paper);clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
.sp-ph img{object-fit:contain;padding:6px;transition:transform .2s}
.sp-card-a:hover .sp-ph img{transform:scale(1.03)}
.sp-rib{position:absolute;left:6px;top:8px}
.sp-card-b{padding:10px 2px 0;display:flex;flex-direction:column;gap:6px;flex:1}
.sp-card-t{font-size:15px;font-weight:700;line-height:1.35;margin:0;overflow-wrap:anywhere}
.sp-card-a:hover .sp-card-t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.sp-card-p{margin:auto 0 0;display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline}
.sp-price{font-family:var(--font-en);font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.sp-st{font-size:13px;font-weight:600;color:var(--ok)}
.sp-st-part{color:var(--gold)}
.sp-st-out{color:var(--mute)}
.sp-st-pre{color:var(--mute)}
@media (min-width:768px){.sp-card-t{font-size:16px}}

/* ---------- product page ---------- */
.sp-hd{padding:14px 0 10px}
.sp-hd .breadcrumb{margin:0}
.sp-hd .breadcrumb a{display:inline-block;padding:6px 0}
.sp-pd{padding-top:20px}
.sp-pd-grid{display:grid;gap:24px}
@media (min-width:768px){.sp-pd-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;align-items:start}}
@media (min-width:1024px){.sp-pd-grid{gap:48px}}
.sp-gal{min-width:0}
@media (min-width:768px){.sp-gal{position:sticky;top:calc(var(--hdr-h) + 16px)}}
.sp-gal-main{background:var(--white)}
.sp-gal-main img{object-fit:contain}
.sp-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:2px}
.sp-thumb{flex:none;width:68px;height:68px;padding:3px;border:2px solid var(--line);background:var(--white);cursor:pointer}
.sp-thumb img{width:100%;height:100%;object-fit:contain}
.sp-thumb[aria-pressed="true"]{border-color:var(--ink)}
.sp-info{min-width:0}
.sp-kick{margin:0 0 6px;font-family:var(--font-en);font-style:italic;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.sp-kick a{color:var(--mute);text-decoration:none}
.sp-h1{font-size:clamp(24px,3.4vw,36px);margin-bottom:10px;overflow-wrap:anywhere}
.sp-tags{margin:0 0 10px}
.sp-tags .tag{margin-left:0;margin-right:6px}
.sp-pd-price{margin:0 0 4px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sp-pd-price b{font-family:var(--font-en);font-size:30px;font-variant-numeric:tabular-nums}
.sp-gst{font-size:13px;color:var(--mute)}
.sp-info>.sp-st{font-size:14px;margin:0 0 14px}
.sp-sum-t{font-size:16px;color:var(--ink3)}
.sp-buy{background:var(--white);padding:18px 16px;margin:18px 0}
@media (min-width:768px){.sp-buy{padding:22px}}
.sp-opt{border:0;margin:0 0 16px;padding:0;min-width:0}
.sp-opt legend{font-weight:800;font-size:15px;margin-bottom:8px;padding:0}
.sp-opt-v{font-weight:600;color:var(--mute)}
.sp-opt-l{display:flex;flex-wrap:wrap;gap:8px}
.sp-ch{position:relative;cursor:pointer}
.sp-ch input{position:absolute;opacity:0;width:1px;height:1px}
.sp-ch span{display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:52px;justify-content:center;padding:6px 14px;
  border:1.5px solid var(--line);background:var(--white);font-weight:700;font-size:14px;line-height:1.2;text-align:center}
.sp-ch input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.sp-ch input:focus-visible+span{outline:2px solid var(--stage);outline-offset:2px}
.sp-ch:hover input:not(:disabled)+span{border-color:var(--ink)}
.sp-ch-out{cursor:not-allowed}
.sp-ch-out span{color:var(--mute2);text-decoration:line-through;background:var(--paper)}
.sp-ch-out small{text-decoration:none;font-weight:600;font-size:11px}
.sp-qty-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 14px}
.sp-qty-l{font-weight:800;font-size:15px}
.sp-qty{display:inline-flex;align-items:stretch;border:1.5px solid var(--line);background:var(--white)}
.sp-qty input{width:52px;min-height:44px;border:0;border-radius:0;text-align:center;padding:0;font-weight:700;-moz-appearance:textfield}
.sp-qty input::-webkit-outer-spin-button,.sp-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sp-qbtn{width:44px;min-height:44px;border:0;background:var(--paper);font-size:20px;font-weight:700;cursor:pointer;color:var(--ink)}
.sp-qbtn:hover{background:var(--line2)}
.sp-sm .sp-qbtn{width:36px;min-height:36px;font-size:17px}
.sp-sm input{width:38px;min-height:36px;font-size:15px}
.sp-add{margin-top:6px}
.sp-buy .form-err{margin:10px 0 0}
.sp-how{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:6px;font-size:14px;color:var(--ink3)}
.sp-how li{padding-left:16px;position:relative}
.sp-how li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:10px;background:var(--ink);transform:skewX(var(--skew))}
.sp-pre{margin:18px 0}
.sp-pre .row{margin:0}
.sp-pre p:last-child{margin-bottom:0}
.sp-h2{font-size:18px;margin-top:22px}
.sp-det{padding-left:20px;margin:0 0 14px;color:var(--ink3)}
.sp-det li{margin-bottom:4px}
.sp-all{font-size:13px;overflow-wrap:anywhere}
.sp-pair{font-size:15px}
.sp-asof{font-size:13px;margin-top:14px}
.sp-more .sp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1100px){.sp-more .sp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- cart button ---------- */
.sp-fab{position:fixed;right:var(--gut);bottom:calc(var(--mbar-h) + 14px + env(safe-area-inset-bottom));z-index:47;display:inline-flex;align-items:center;gap:8px;
  min-height:50px;padding:8px 18px;border:0;background:none;color:#fff;font:inherit;font-weight:800;font-size:15px;cursor:pointer;isolation:isolate}
.sp-fab::before{content:"";position:absolute;inset:0;background:var(--ink);transform:skewX(var(--skew));z-index:-1;box-shadow:0 6px 18px rgba(17,17,17,.25)}
.sp-fab svg{width:22px;height:22px}
.sp-fab-n{min-width:24px;height:24px;padding:0 6px;display:inline-grid;place-items:center;background:#fff;color:var(--ink);font-size:13px;border-radius:999px}
.sp-fab.bump{animation:spbump .35s}
@keyframes spbump{50%{transform:translateY(-4px)}}
@media (min-width:1024px){.sp-fab{bottom:24px;right:28px}}

/* ---------- sheet ---------- */
.sp-sheet .sheet-in{padding-top:20px}
.sp-sheet-h{font-size:22px;margin:0 50px 14px 0;outline:none}
.sp-lines{display:grid;gap:12px}
.sp-line{display:grid;grid-template-columns:64px 1fr;gap:12px;background:var(--white);padding:10px}
.sp-line img{width:64px;height:64px;object-fit:contain;background:var(--paper)}
.sp-line-t{font-weight:700;font-size:15px;line-height:1.3;margin:0 0 2px;overflow-wrap:anywhere}
.sp-line-t a{text-decoration:none}
.sp-line-o{font-size:13px;color:var(--mute);margin:0 0 6px}
.sp-line-r{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.sp-line-p{font-family:var(--font-en);font-weight:700;font-variant-numeric:tabular-nums}
.sp-rm{border:0;background:none;color:var(--mute);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer;min-height:36px;padding:0 4px}
.sp-empty{color:var(--mute);padding:20px 0}
.sp-sum{margin-top:16px;border-top:2px solid var(--ink);padding-top:12px}
.sp-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-weight:700;margin:0 0 6px}
.sp-total b{font-family:var(--font-en);font-size:24px;font-variant-numeric:tabular-nums}
.sp-sum-n{font-size:13px;color:var(--mute)}
.sp-back{border:0;background:none;font:inherit;font-weight:700;font-size:14px;color:var(--ink3);padding:0;min-height:40px;cursor:pointer;margin-bottom:4px}
.sp-co-lines{background:var(--white);padding:10px 12px;margin-bottom:16px;font-size:14px}
.sp-co-lines p{display:flex;justify-content:space-between;gap:12px;margin:0;padding:5px 0;border-bottom:1px solid var(--line2)}
.sp-co-lines p:last-child{border-bottom:0}
.sp-co-lines span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.sp-fs{border:0;padding:0;margin:0 0 14px;min-width:0}
.sp-fs legend{font-weight:800;font-size:16px;margin-bottom:10px;padding:0}
.sp-fs-h{margin:-4px 0 10px}
.sp-pays{display:grid;gap:8px}
@media (min-width:560px){.sp-pays{grid-template-columns:repeat(3,1fr)}}
.sp-pay{position:relative;display:block;cursor:pointer}
.sp-pay input{position:absolute;opacity:0;width:1px;height:1px}
.sp-pay span{display:grid;gap:2px;min-height:56px;padding:10px 12px;border:1.5px solid var(--line);background:var(--white)}
.sp-pay small{font-size:12.5px;color:var(--mute);font-weight:500}
.sp-pay input:checked+span{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.sp-pay input:focus-visible+span{outline:2px solid var(--stage);outline-offset:2px}
.sp-pay-one{margin-bottom:6px}
.sp-co-total{border-top:2px solid var(--ink);padding-top:12px;margin-top:6px}
.sp-paybtn{margin-top:8px}
.sp-soon{margin:12px 0}
.sp-co-act{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:4px}
.sp-co-act .btn{flex:1 1 180px}
.sp-copybox{white-space:pre-wrap;background:var(--white);border:1px dashed var(--line);padding:12px;font-size:13px;margin-top:12px;max-height:240px;overflow:auto;user-select:all}
.sp-toast{position:fixed;left:50%;bottom:calc(var(--mbar-h) + 80px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:61;background:var(--ink);color:#fff;
  padding:10px 16px;font-weight:700;font-size:14px;max-width:calc(100% - 32px);text-align:center}
@media (min-width:1024px){.sp-toast{bottom:90px}}
body.sp-lock{overflow:hidden}

/* filter state (JS) */
.sp-list.filtered .sp-cat[hidden]{display:none}
.sp-help-o{background:transparent;border:1.5px dashed var(--line);clip-path:none}
.sp-buy .hint{font-size:13px;color:var(--mute);margin:-6px 0 12px}
html[data-lang="zh"] .sp-kick,html[data-lang="zh"] .sp-facts b{font-style:normal;font-family:var(--font)}
.sp-co .hint{display:block;font-size:13px;color:var(--mute)}