/* Lubechem — interactive product share widget */
.lc-share { position: relative; margin: 22px 0 4px; }

.lc-share-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 14px/1 inherit; color: #1d4ed8;
  background: #eff4ff; border: 1px solid #dbe6ff; border-radius: 999px;
  padding: 10px 18px; cursor: pointer; transition: all .18s ease;
}
.lc-share-btn:hover { background: #1d4ed8; color: #fff; border-color: #1d4ed8; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(29,78,216,.25); }
.lc-share-btn svg { transition: transform .25s ease; }
.lc-share-btn:hover svg { transform: rotate(-12deg) scale(1.08); }
.lc-share-btn.pulse { animation: lc-pulse .5s ease; }
@keyframes lc-pulse { 0% { box-shadow: 0 0 0 0 rgba(29,78,216,.45);} 100% { box-shadow: 0 0 0 14px rgba(29,78,216,0);} }

/* popover */
.lc-share-pop {
  position: absolute; z-index: 60; left: 0; top: calc(100% + 10px);
  width: 320px; max-width: 88vw;
  background: #fff; border: 1px solid #eaecf0; border-radius: 16px;
  box-shadow: 0 20px 50px -12px rgba(16,24,40,.25);
  padding: 16px;
  opacity: 0; transform: translateY(-8px) scale(.97); transform-origin: top left;
  pointer-events: none; transition: opacity .2s ease, transform .2s cubic-bezier(.2,.9,.3,1.3);
}
.lc-share.open .lc-share-pop { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.lc-share-head { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 15px; color: #101828; margin-bottom: 12px; }
.lc-share-x { background: none; border: 0; font-size: 22px; line-height: 1; color: #98a2b3; cursor: pointer; padding: 0 2px; }
.lc-share-x:hover { color: #101828; }

/* network grid */
.lc-share-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lc-share-net {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-decoration: none; border: 0; background: none; cursor: pointer;
  font: 600 11px/1.1 inherit; color: #475467; padding: 8px 2px; border-radius: 12px;
  transition: background .15s ease, transform .15s ease;
}
.lc-share-net:hover { background: #f7f8fa; transform: translateY(-2px); }
.lc-share-net svg { width: 40px; height: 40px; padding: 9px; border-radius: 50%; color: #fff; box-sizing: border-box; }
.lc-share-net span { color: #475467; }
.lc-share-net.na svg { background: #475467; }
.lc-share-net.wa svg { background: #25d366; }
.lc-share-net.fb svg { background: #1877f2; }
.lc-share-net.x  svg { background: #000; }
.lc-share-net.tg svg { background: #29a9eb; }
.lc-share-net.li svg { background: #0a66c2; }
.lc-share-net.pi svg { background: #e60023; }
.lc-share-net.em svg { background: #ea4335; }

/* copy link row */
.lc-share-link { display: flex; gap: 6px; margin-top: 14px; }
.lc-share-url {
  flex: 1; min-width: 0; font-size: 12px; color: #475467;
  border: 1px solid #eaecf0; border-radius: 10px; padding: 0 10px; background: #f9fafb;
}
.lc-share-copy {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font: 600 12px/1 inherit; color: #fff; background: #1d4ed8; border: 0;
  border-radius: 10px; padding: 9px 12px; cursor: pointer; transition: background .15s ease;
}
.lc-share-copy svg { width: 16px; height: 16px; }
.lc-share-copy:hover { background: #1742b8; }
.lc-share-copy.done { background: #16a34a; }

/* QR */
.lc-share-qrbtn {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  font: 600 12px/1 inherit; color: #475467; background: #f7f8fa; border: 1px solid #eaecf0;
  border-radius: 10px; padding: 9px 12px; cursor: pointer; width: 100%; justify-content: center;
}
.lc-share-qrbtn svg { width: 16px; height: 16px; }
.lc-share-qrbtn:hover { background: #eef0f3; }
.lc-share-qr { max-height: 0; overflow: hidden; transition: max-height .3s ease; text-align: center; }
.lc-share-qr.on { max-height: 220px; margin-top: 10px; }
.lc-share-qr img { width: 160px; height: 160px; border: 1px solid #eaecf0; border-radius: 12px; padding: 6px; background: #fff; }

@media (max-width: 480px) {
  .lc-share-pop { left: 0; right: auto; }
}