/* One-click share: card icon, modal button, action sheet, toast */

.pcard{position:relative}

.pcard-share{position:absolute;top:9px;right:9px;z-index:3;width:30px;height:30px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(0,0,0,.08);border-radius:50%;background:rgba(255,255,255,.94);
  color:#5C6066;cursor:pointer;padding:0;box-shadow:0 1px 3px rgba(0,0,0,.10);
  transition:background .15s,color .15s,transform .15s}
.pcard-share:hover{background:#fff;color:#1A1A1A;transform:translateY(-1px)}
.pcard-share:focus-visible{outline:2px solid #E87532;outline-offset:2px}
.pcard-share svg{width:15px;height:15px;display:block}

.modal-share{position:absolute;top:12px;right:56px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;
  border:1px solid #E3E3E3;border-radius:999px;background:rgba(255,255,255,.92);
  font-size:.78rem;font-weight:500;color:#444;cursor:pointer;
  transition:background .15s,color .15s}
.modal-share:hover{background:#F5F5F5;color:#1A1A1A}
.modal-share svg{width:13px;height:13px;display:block}

/* action sheet */
.shs{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center}
.shs[hidden]{display:none}
.shs-back{position:absolute;inset:0;background:rgba(0,0,0,.42)}
.shs-panel{position:relative;width:100%;max-width:400px;margin:16px;
  background:#fff;border-radius:14px;padding:20px 20px 14px;
  box-shadow:0 24px 60px rgba(0,0,0,.28)}
.shs-h{font-size:1rem;font-weight:600;color:#1A1A1A}
.shs-sub{font-size:.8rem;color:#6B7280;margin:3px 0 14px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shs-opt{display:flex;align-items:center;gap:12px;width:100%;padding:12px 12px;
  border:1px solid #EAEAEA;border-radius:10px;background:#fff;margin-bottom:8px;
  font-size:.88rem;color:#1A1A1A;cursor:pointer;text-align:left;
  font-family:inherit;transition:background .14s,border-color .14s}
.shs-opt:hover{background:#F7F8FA;border-color:#DCDCDC}
.shs-opt .ic{width:30px;height:30px;flex:0 0 30px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;background:#F2F4F7;color:#4B5563}
.shs-opt .ic svg{width:15px;height:15px;display:block}
.shs-opt small{display:block;font-size:.72rem;color:#8A9099;font-weight:400;margin-top:1px}
.shs-x{width:100%;padding:11px;border:0;background:none;color:#6B7280;
  font-size:.84rem;cursor:pointer;font-family:inherit;border-radius:8px}
.shs-x:hover{background:#F5F5F5}

.shs-toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(8px);
  z-index:500;background:#1A1A1A;color:#fff;font-size:.82rem;padding:10px 18px;
  border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.shs-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* share button used on static product pages */
.share-btn{display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  padding:9px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.12);color:#fff;font-size:.82rem;font-weight:500;
  cursor:pointer;font-family:inherit;backdrop-filter:blur(6px);
  transition:background .15s,border-color .15s}
.share-btn:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.7)}
.share-btn svg{width:14px;height:14px;display:block}

@media(max-width:640px){
  .shs{align-items:flex-end}
  .shs-panel{max-width:none;margin:0;border-radius:16px 16px 0 0;padding-bottom:18px}
}