/* ───── レイジーローディング誘導 (バウンス矢印) ───── */
/* 商品リスト下に「↓ スクロールしてもっと見る」を表示し、
   ユーザーに下にもコンテンツがあることを示す */
.load-more-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px 24px;
  color: #888;
  user-select: none;
  animation: load-more-fade-in 0.4s ease-out;
}

.load-more-indicator__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: load-more-bounce 1.8s ease-in-out infinite;
}

.load-more-indicator__arrow svg {
  display: block;
}

.load-more-indicator__text {
  font-size: 13px;
  margin-top: 4px;
  letter-spacing: 0.02em;
}

@keyframes load-more-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

@keyframes load-more-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* SP では少しコンパクトに */
@media (max-width: 639px) {
  .load-more-indicator {
    padding: 24px 16px 16px;
  }
  .load-more-indicator__text {
    font-size: 12px;
  }
}

/* Truetagg UI CSS - ハート + ボトムナビ(SP) + ヘッダーアイコン(WEB) + ドロワー */

/* ── ハートボタン（商品カード右下） ── */
.tt-fav-btn { position:absolute; bottom:8px; right:8px; display:flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:none; border-radius:50%; background:rgba(255,255,255,0.92); cursor:pointer; z-index:10; transition:transform .15s; -webkit-tap-highlight-color:transparent; box-shadow:0 1px 4px rgba(0,0,0,0.1); }
.tt-fav-btn:hover { background:#fff; transform:scale(1.1); }
.tt-fav-btn:active { transform:scale(0.95); }
.tt-fav-icon { fill:none; stroke:#4A90D9; stroke-width:2; transition:fill .2s,stroke .2s; }
.tt-fav-btn--active .tt-fav-icon { fill:#4A90D9; stroke:#4A90D9; }
.tt-fav-btn--pop { animation:tt-pop .3s ease; }
@keyframes tt-pop { 0%{transform:scale(1)} 50%{transform:scale(1.35)} 100%{transform:scale(1)} }

/* .tt-fav-btn（ハートボタン）と .product-badges（バッジ）の絶対配置の基準。
   画像枠のサイズ・高さ指定は contents.css 側が一括管理しているため
   ここでは position のみ指定する（aspect-ratio 等は追加しない）。 */
/* ★ 修正: 先頭の . が抜けていたためクラスに効いておらず、
   ハート(.tt-fav-btn)・バッジ(.product-badges)の絶対配置の基準が
   効かなくなっていた。. を補ってクラスセレクタに修正。 */
.products-list-imgbox { position:relative; }

/* ── SP ボトムナビ ── */
.tt-bnav { position:fixed; bottom:0; left:0; right:0; display:none; justify-content:space-around; align-items:center; background:#fff; border-top:1px solid #eee; padding:6px 0; padding-bottom:max(6px, env(safe-area-inset-bottom)); z-index:9990; box-shadow:0 -2px 8px rgba(0,0,0,0.06); }
@media (max-width:768px) { .tt-bnav { display:flex; } body { padding-bottom:60px; } }
@media (min-width:769px) { .tt-bnav { display:none !important; } }
.tt-bnav__item { display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 12px; background:none; border:none; cursor:pointer; text-decoration:none; color:#888; position:relative; -webkit-tap-highlight-color:transparent; transition:color .2s; }
.tt-bnav__item--active { color:#4A90D9; }
.tt-bnav__item--active .tt-bnav__icon { color:#4A90D9; }
.tt-bnav__item--active .tt-bnav__label { color:#4A90D9; font-weight:600; }
.tt-bnav__icon { font-size:20px; line-height:1; color:#555; transition:color .2s; }
.tt-bnav__label { font-size:10px; font-weight:500; }
.tt-bnav__badge { position:absolute; top:-2px; right:4px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:#e74c3c; color:#fff; font-size:9px; font-weight:700; line-height:16px; text-align:center; }
/* ホームアイコン（aタグ）のリンクデフォルトスタイルを打ち消し */
a.tt-bnav__item, a.tt-bnav__item:link, a.tt-bnav__item:visited, a.tt-bnav__item:hover, a.tt-bnav__item:active { color:#888; text-decoration:none; }
a.tt-bnav__item .tt-bnav__icon, a.tt-bnav__item .tt-bnav__label { color:inherit; }

/* ── WEB ヘッダーアイコン ── */
.tt-hdr-icons { display:none; align-items:center; gap:14px; margin-left:auto; }
@media (min-width:769px) { .tt-hdr-icons { display:flex; } }
.tt-hdr-icon { display:flex; align-items:center; gap:5px; padding:6px 8px; background:none; border:none; cursor:pointer; position:relative; color:#555; transition:color .2s; }
.tt-hdr-icon:hover { color:#4A90D9; }
.tt-hdr-icon__emoji { font-size:18px; }
.tt-hdr-icon__label { font-size:12px; color:#888; }
.tt-hdr-icon:hover .tt-hdr-icon__label { color:#4A90D9; }

/* ── ドロワー ── */
.tt-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.35); z-index:9998; }
.tt-drawer { position:fixed; top:0; right:0; bottom:0; width:88vw; max-width:420px; background:#fff; z-index:9999; box-shadow:-4px 0 24px rgba(0,0,0,0.12); transform:translateX(100%); transition:transform .3s cubic-bezier(0.4,0,0.2,1); display:flex; flex-direction:column; }
@media (min-width:769px) { .tt-drawer { width:400px; } }
.tt-drawer--open { transform:translateX(0); }
.tt-drawer__header { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid #eee; flex-shrink:0; }
.tt-drawer__title { font-size:17px; font-weight:700; }
.tt-drawer__count { font-size:13px; color:#888; font-weight:400; margin-left:8px; }
.tt-drawer__actions { display:flex; gap:12px; align-items:center; }
.tt-drawer__clear { background:none; border:none; font-size:12px; color:#e74c3c; cursor:pointer; }
.tt-drawer__close { background:none; border:none; font-size:22px; cursor:pointer; color:#999; line-height:1; }
.tt-drawer__body { flex:1; overflow-y:auto; padding:16px; -webkit-overflow-scrolling:touch; }
.tt-drawer__empty { text-align:center; padding:48px 16px; }
.tt-drawer__empty-icon { font-size:40px; color:#ddd; margin-bottom:12px; }
.tt-drawer__empty p { font-size:13px; color:#aaa; margin:0; }

/* ── ドロワー内カード ── */
.tt-dcard { display:flex; gap:12px; padding:10px; border-radius:10px; border:1px solid #f0f0f0; background:#fafafa; margin-bottom:10px; cursor:pointer; transition:background .15s; }
.tt-dcard:hover { background:#f5f5f5; }
.tt-dcard:last-child { margin-bottom:0; }
.tt-dcard__img { width:80px; height:80px; border-radius:8px; overflow:hidden; flex-shrink:0; background:#f5f5f5; }
.tt-dcard__img img { width:100%; height:100%; object-fit:contain; }
.tt-dcard__info { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:space-between; }
.tt-dcard__brand { font-size:11px; font-weight:700; color:#4A90D9; margin:0; }
.tt-dcard__title { font-size:12px; color:#333; margin:2px 0 0; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tt-dcard__bottom { display:flex; justify-content:space-between; align-items:center; }
.tt-dcard__price { font-size:14px; font-weight:700; }
.tt-dcard__actions { display:flex; gap:8px; align-items:center; }
.tt-dcard__fav { background:none; border:none; font-size:16px; cursor:pointer; color:#ccc; padding:2px; }
.tt-dcard__fav--on { color:#4A90D9; }
.tt-dcard__remove { background:none; border:none; font-size:13px; cursor:pointer; color:#ccc; padding:2px; }
.tt-dcard__remove:hover { color:#e74c3c; }
/* ── ヘッダーアイコン クリック保証 ── */
.tt-hdr-icons { position:relative; z-index:100; }
.tt-hdr-icon { pointer-events:auto; }
header { position:relative; z-index:101; }
header .inner-header { display:flex; align-items:center; }

/* ── ドロワーカード画像フォールバック ── */
.tt-dcard__img img[src=""], .tt-dcard__img img:not([src]) { display:none; }
.tt-dcard__img { background-image:url('assets/img/img_item01.png'); background-size:contain; background-repeat:no-repeat; background-position:center; }

/* ── 商品詳細ページ お気に入りボタン（商品名の下に配置） ── */
.tt-detail-fav { display:inline-flex; align-items:center; gap:8px; padding:8px 20px; border:1.5px solid #ddd; border-radius:24px; background:#fff; cursor:pointer; transition:all .2s; -webkit-tap-highlight-color:transparent; margin-bottom:16px; }
.tt-detail-fav:hover { border-color:#4A90D9; }
.tt-detail-fav svg { fill:none; stroke:#4A90D9; stroke-width:2; transition:fill .2s; width:20px; height:20px; flex-shrink:0; }
.tt-detail-fav--active svg { fill:#4A90D9; }
.tt-detail-fav--active { border-color:#4A90D9; background:#f0f6ff; }
.tt-detail-fav__label { font-size:14px; color:#555; white-space:nowrap; }
.tt-detail-fav--active .tt-detail-fav__label { color:#4A90D9; font-weight:600; }
@media (max-width:639px) { .tt-detail-fav { padding:6px 16px; } .tt-detail-fav__label { font-size:12px; } .tt-detail-fav svg { width:18px; height:18px; } }

/* ── SP検索モーダル z-index（ボトムナビより前面） ── */
.filter-area.is-modal-open { z-index:9995 !important; }
.filter-modal-overlay.is-visible { z-index:9994 !important; }

/* ── 商品詳細 価格グリッド ── */
.offers-grid { display:grid !important; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; width:100%; box-sizing:border-box; }
.offer-card { display:flex !important; flex-direction:column; justify-content:space-between; text-decoration:none; color:inherit; cursor:pointer; background:#fff; border-radius:8px; padding:16px; box-shadow:0 4px 16px rgba(0,0,0,0.06); transition:box-shadow 0.15s; box-sizing:border-box; min-width:0; }
.offer-card:hover { box-shadow:0 4px 20px rgba(0,0,0,0.12); }
.offer-card .price { font-size:20px; font-weight:600; font-family:'Helvetica Neue','Arial',sans-serif; margin:0 0 10px; color:#222; }
.offer-card .shop-name { font-size:14px; color:#555; margin:0 0 14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.offer-card .primary-btn { display:inline-flex; align-items:center; justify-content:center; padding:6px 12px; border-radius:4px; border:1px solid #999; background:#fff; font-size:13px; gap:4px; color:#555; text-decoration:none; white-space:nowrap; }
@media (max-width:639px) {
  .offers-grid { grid-template-columns:1fr !important; gap:10px; }
  .offer-card .price { font-size:28px; }
  .offer-card { padding:20px 16px; }
  .offer-card .shop-name { font-size:13px; margin:0 0 16px; }
  .offer-card .primary-btn { font-size:12px; padding:6px 10px; white-space:nowrap; }
}

/* product-title の余白を調整（お気に入りボタンが下に入るため） */
.product-title { margin-bottom:20px !important; }
@media (max-width:639px) { .product-title { margin-bottom:16px !important; } }

/* ── 商品バッジ（search.htmlから移動して全ページに適用） ── */
.product-badges {
  position: absolute;
  top: 0; left: 0; right: 0;
  pointer-events: none;
  z-index: 2;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.product-badges__top,
.product-badges__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.badge {
  font-size: 10px;
  font-weight: bold;
  padding: 2px 5px;
  border-radius: 3px;
  line-height: 1.3;
  white-space: nowrap;
}
.badge--spread-pct  { background: #e53935; color: #fff; }
.badge--spread-val  { background: #222;    color: #fff; margin-left: auto; }
.badge--store-count { background: rgba(255,255,255,0.9); color: #333; border: 1px solid #ddd; }

/* ── 検索ボックス 固定位置修正（is-fixed クラス付与時のみ） ── */
/* SP: スクロール時のみ検索バーを画面最上部に固定してヘッダーを覆う */
@media (max-width:639px) {
  /* is-fixed が付いていない時（トップ状態）は通常フロー */
  body#top .filter-trigger-wrapper:not(.is-fixed),
  body#search .filter-trigger-wrapper:not(.is-fixed) {
    position:static !important;
  }
  /* is-fixed が付いた時（スクロール時）は画面最上部に固定 */
  body#top .filter-trigger-wrapper.is-fixed,
  body#search .filter-trigger-wrapper.is-fixed {
    position:fixed !important;
    top:0 !important;
    left:0;
    right:0;
    z-index:100 !important;
    background:#fff;
    padding:10px 20px !important;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
  }
}

/* PC: 検索結果ページ スクロール時のみ最上部固定 */
@media (min-width:640px) {
  body#search .filter-area.is-fixed {
    top:0 !important;
    z-index:100 !important;
  }
}

/* ── トップページ バッジ 改行防止 ── */
.product-badges { white-space:nowrap; }
.product-badges .badge { white-space:nowrap; display:inline-block; }
.product-badges__top { display:flex; justify-content:space-between; align-items:flex-start; gap:4px; flex-wrap:nowrap; }
.product-badges__left-col { display:flex; flex-direction:column; gap:3px; align-items:flex-start; }
.product-badges__right { display:flex; align-items:flex-start; }
.product-badges__bottom { display:flex; gap:4px; margin-top:3px; flex-wrap:nowrap; }

/* ── SP: ソート・絞り込みバーのタップ確保 ── */
@media (max-width:639px) {
  #sort-filter-bar {
    position:relative;
    z-index:500;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 0;
    margin-bottom:10px;
    gap:10px;
  }
  #sort-filter-bar select,
  #sort-filter-bar button {
    pointer-events:auto;
    cursor:pointer;
    padding:8px 14px;
    border:1px solid #ddd;
    border-radius:6px;
    background:#fff;
    font-size:13px;
  }
  #sort-filter-bar select {
    -webkit-appearance:menulist;
    appearance:menulist;
  }
  #sort-filter-bar .filter-toggle-btn {
    -webkit-appearance:none;
    appearance:none;
  }
  #client-filter-panel {
    position:relative;
    z-index:500;
    background:#fff;
    padding:16px;
    border-radius:8px;
    margin-bottom:16px;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
  }
}

/* =============================================================
   公式ティアバッジ — badge_mockup_v5_final.html 準拠
   ★ バッジ高さ修正版（2026-05 / 修正反映済み）

   配置: このブロックをそのまま public/assets/css/truetagg-ui.css
        の末尾に追記してください。
        （.product-badges / .product-badges__left-col /
          .product-badges__right / .badge / .badge--store-count /
          .badge--spread-* は既存。ここで追加するのは
          .badge-official 系と .season-tag のみ）

   【この版の修正点 — なぜ inline-block なのか】
   旧版は .badge-official を display:inline-flex で定義していたため、
   既存の .badge（display:inline-block）と行ボックスの高さ計算方式が
   異なり、同じ padding でも公式バッジだけ縦に厚く表示されていた。
   （記事側 / サイト側どちらの公式バッジでも同じ症状）

   既存 .badge と同じ display:inline-block + line-height:1.3 に
   揃えることで、隣の「乖離率」「店舗数」バッジと高さが一致する。
   flex の gap:4px を失う代わりに .season-tag に margin-left:3px を付与。

   ※ このファイルは「高さ修正済みの最終版」です。これ以前に配布した
     truetagg-ui-badge-official.css / badge-official-fix.css は破棄して
     構いません。本番にはまだ何もデプロイされていないため、
     「既存ブロックの差し替え」ではなく「末尾に追記」でOKです。
   ============================================================= */

.badge-official {
  display: inline-block;          /* ← inline-flex から変更（高さを既存 .badge に揃える） */
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;               /* 既存 .badge は 2px 5px。横だけ +1px */
  border-radius: 4px;
  line-height: 1.3;               /* ← 既存 .badge と同じ値を明示（最重要） */
  white-space: nowrap;
  vertical-align: top;            /* 左カラム縦積み時に上端を揃える */
}
.badge-official .season-tag {
  font-size: 8px;
  font-weight: 500;
  opacity: 0.65;
  margin-left: 3px;               /* ← flex gap:4px の代替 */
}

/* 公式EC: 黒地 + 白 */
.badge-official--active {
  background: rgba(20, 20, 20, 0.88);
  color: #fff;
}

/* 公式完売: 中間グレー地 + 白（テキストで明示） */
.badge-official--sold-out {
  background: rgba(120, 120, 120, 0.85);
  color: #fff;
}

/* 準公式（三越伊勢丹 / 楽天 Fashion など）: 薄グレー地 + 黒 */
.badge-official--semi {
  background: rgba(180, 180, 180, 0.85);
  color: #1a1a1a;
}

/* SP: バッジ縮小（既存 .badge と同じ縮小幅に揃える） */
@media (max-width: 639px) {
  .badge-official { font-size: 8px; padding: 1px 5px; }
  .badge-official .season-tag { font-size: 7px; }
}