/* =====================================================================
   Share menu — 商品シェアのモーダル
   ===================================================================== */
.share-modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(43, 39, 35, .4);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
  padding: 20px;
}
.share-modal.open { opacity: 1; visibility: visible; }
.share-sheet {
  position: relative; width: 100%; max-width: 360px;
  background: var(--ivory); border: 1px solid var(--line); border-radius: 18px;
  padding: 22px 22px 24px; box-shadow: 0 24px 60px rgba(43, 39, 35, .18);
  transform: translateY(12px) scale(.98); transition: transform .3s;
}
.share-modal.open .share-sheet { transform: none; }
.share-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.share-title { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--ink); }
.share-close { background: none; border: none; font-size: 22px; line-height: 1; color: var(--ink-soft); cursor: pointer; }
.share-name { font-family: var(--mincho); font-size: 13px; color: var(--ink-soft); margin-bottom: 16px; line-height: 1.5; }
.share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.share-opt {
  display: flex; align-items: center; gap: 10px;
  background: var(--ivory-deep); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; font-family: var(--sans); font-size: 13px; color: var(--ink);
  cursor: pointer; text-decoration: none; transition: border-color .25s, transform .2s;
}
.share-opt:hover { border-color: var(--gold-soft); transform: translateY(-1px); }
.share-opt .si {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #fff; font-weight: 600;
}
.share-opt .si.line { background: #06c755; font-size: 8px; letter-spacing: 0; }
.share-opt .si.wa { background: #25d366; }
.share-opt .si.fb { background: #1877f2; }
.share-opt .si.x { background: #000; }
.share-opt .si.ig { background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7); }
.share-opt .si.copy, .share-opt .si.mail { background: var(--ink); }
.share-toast {
  position: absolute; left: 50%; bottom: -14px; transform: translate(-50%, 100%);
  background: var(--ink); color: var(--ivory); font-size: 12px; font-family: var(--mincho);
  padding: 9px 16px; border-radius: 30px; white-space: nowrap; max-width: 90vw;
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.share-toast.show { opacity: 1; }

@media (max-width: 420px) { .share-grid { grid-template-columns: 1fr; } }