/* 閲覧履歴（recent.js）共通スタイル
 * - 詳細ページ末尾の横スクロールカルーセル（[data-recent-carousel]）
 * - /recent ページのタイプ別グリッド（[data-recent-list]）
 * - ヘッダーの「履歴」リンク件数バッジ（[data-recent-header-count]）
 */

/* ── 共通カード ── */
.gs-recent-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 0.55rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  min-width: 0;
}
.gs-recent-card:hover {
  border-color: #2f6db4;
  box-shadow: 0 2px 6px rgba(47, 109, 180, 0.08);
}
.gs-recent-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f6f6f6;
  border-radius: 6px;
  overflow: hidden;
}
.gs-recent-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.gs-recent-noimg {
  display: block;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, #f1f1f1 25%, transparent 25%, transparent 75%, #f1f1f1 75%) 0 0/12px 12px,
    #fafafa;
}
.gs-recent-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.gs-recent-type {
  font-size: 0.72rem;
  color: #6f6f6f;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.gs-recent-brand {
  font-size: 0.78rem;
  color: #555;
}
.gs-recent-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1c1c1c;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 詳細ページ末尾の横スクロールカルーセル ── */
.gs-recent-carousel-wrap {
  max-width: 1080px;
  margin: 2rem auto 1.5rem;
  padding: 0 1rem;
}
.gs-recent-carousel-wrap h2 {
  font-size: 1.05rem;
  margin: 0 0 0.7rem;
  border-left: 4px solid #2f6db4;
  padding-left: 0.6rem;
}
.gs-recent-scroll {
  display: flex;
  gap: 0.65rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
}
.gs-recent-scroll > .gs-recent-card {
  flex: 0 0 160px;
  scroll-snap-align: start;
}
@media (max-width: 600px) {
  .gs-recent-scroll > .gs-recent-card {
    flex: 0 0 140px;
  }
}

/* ── ヘッダー「履歴」リンクの件数バッジ ── */
[data-recent-header-count] {
  position: relative;
}
[data-recent-header-count].has-count::after {
  content: attr(data-count);
  position: absolute;
  top: -4px;
  right: -10px;
  background: #2f6db4;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  padding: 2px 5px;
  min-width: 16px;
  text-align: center;
}