/* GT StoreFront Map - 共通マップスタイル */

.gt-sfm-map-wrap {
  position: relative;
}

.gt-sfm-map {
  width: 100%;
  margin: 1em 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
}

/* InfoWindow のスタイル（JSと連携） */
.gt-sfm-info {
  font-size: 14px;
  line-height: 1.6;
  max-width: 250px;
  color: #333;
}

.gt-sfm-info img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 8px;
  border-radius: 4px;
}

.gt-sfm-info a {
  color: #0066cc;
  text-decoration: underline;
  font-weight: bold;
}

.gt-sfm-info p {
  margin: 0.5em 0 0;
  font-size: 13px;
}

.gt-sfm-geolocate-button {
  color: #000 !important;
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 1001;  
  background: #fff;
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.gt-sfm-geolocate-button:hover {
    background: #f1f1f1;
}

/* Leaflet のズームボタンの下線を消す */
.leaflet-control-zoom a {
  text-decoration: none !important;
}
.leaflet-control-zoom a:hover {
  text-decoration: none !important;
}
/* Leafletクレジット表示 */
.leaflet-control-attribution {
  font-size: 11px !important;
  color: #555 !important;
  padding: 2px 6px !important;
}

/* --- Leaflet × WordPress テーマ干渉対策（鉄板） --- */
.leaflet-container img,
.leaflet-container .leaflet-image-layer,
.leaflet-container .leaflet-tile,
.leaflet-container .leaflet-marker-icon,
.leaflet-container .leaflet-marker-shadow,
.leaflet-container .leaflet-zoom-animated img {
  max-width: none !important; /* テーマの img{max-width:100%} を無効化 */
}

/* 見切れ/はみ出し防止（念のため） */
.gt-sfm-map-wrap,
.gt-sfm-map {
  position: relative;
  overflow: hidden;
}
.gt-sfm-map {
  width: 100%;
  min-height: 320px; /* 既に高さが指定されていても安全側 */
}

/* （任意）Safari等の滲み対策 */
.leaflet-container .leaflet-tile { image-rendering: auto; }
.leaflet-container .leaflet-popup-content img,
.leaflet-container .leaflet-popup-content picture img,
.leaflet-container .leaflet-popup-content video {
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  max-height: 50vh;
  object-fit: contain;
  display: block;
}

/* 余白とあふれ対策（任意だが安定） */
.leaflet-container .leaflet-popup-content {
  overflow: hidden;
  word-break: break-word;
}
.leaflet-container .leaflet-popup-content figure,
.leaflet-container .leaflet-popup-content .gt-sfm-media {
  margin: 0 0 .5rem 0;
}

/* --- GT-SFM: Popup 画像を幅固定・高さ自動にする（可変: CSS変数） --- */
.gt-sfm-map-wrap {
  --gt-sfm-popup-img-width: 250px;
}

/* 画像: 固定幅 / 高さ auto / 比率維持 */
.gt-sfm-map-wrap .leaflet-popup-content img,
.gt-sfm-map-wrap .leaflet-popup-content picture img {
  width: var(--gt-sfm-popup-img-width) !important;
  max-width: none !important;
  height: auto !important;
  object-fit: contain;
  display: block;
}

/* ポップアップ本体が画像幅に素直に追従するよう微調整（必要に応じて） */
.gt-sfm-map-wrap .leaflet-popup-content {
  overflow: hidden;
  /* min-width: calc(var(--gt-sfm-popup-img-width) + 20px); */ /* 余白込みで固定したい場合に有効化 */
}

/* スマホ等、画面幅が狭い場合は 90vw を上限に可変 */
@media (max-width: 420px) {
  .gt-sfm-map-wrap {
    --gt-sfm-popup-img-width: 90vw;
  }
}