/* ============================================
   LURE CAROUSEL — 共通スタイル
   全ルアーガイド記事で使用
   ============================================ */

/* ===== PRODUCT CAROUSEL WRAPPER ===== */
.product-carousel {
  margin: 20px 0 28px;
}

.carousel-label {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.carousel-label::before {
  content: '';
  width: 20px;
  height: 1.5px;
  background: rgba(255,255,255,.2);
  border-radius: 2px;
}

/* ===== TIER FILTER TABS ===== */
.carousel-tier-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.tier-tab {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.45);
  font-size: .72rem;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.1);
  cursor: pointer;
  transition: all .2s;
  letter-spacing: .04em;
}
.tier-tab:hover {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.8);
}
.tier-tab.active {
  color: #000;
  border-color: transparent;
}
.tier-tab[data-tier="all"].active   { background: rgba(255,255,255,.85); }
.tier-tab[data-tier="ss"].active    { background: linear-gradient(135deg,#FFE66D,#F7971E); }
.tier-tab[data-tier="s"].active     { background: linear-gradient(135deg,#a78bfa,#7c3aed); }
.tier-tab[data-tier="a"].active     { background: linear-gradient(135deg,#34d399,#059669); }
.tier-tab[data-tier="b"].active     { background: rgba(148,163,184,.9); color: #1e293b; }

/* ===== CAROUSEL TRACK ===== */
.carousel-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.carousel-track::-webkit-scrollbar {
  height: 4px;
}
.carousel-track::-webkit-scrollbar-track {
  background: rgba(255,255,255,.04);
  border-radius: 2px;
}
.carousel-track::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.18);
  border-radius: 2px;
}
.carousel-track::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.35);
}

/* ===== CAROUSEL CARD ===== */
.carousel-card {
  flex: 0 0 162px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  scroll-snap-align: start;
  transition: border-color .2s, transform .2s;
  position: relative;
}
.carousel-card:hover {
  border-color: rgba(255,255,255,.18);
  transform: translateY(-2px);
}
.carousel-card.hidden {
  display: none;
}

/* ===== TIER BADGE ===== */
.c-tier-badge {
  font-size: .6rem;
  font-weight: 900;
  padding: 2px 9px;
  border-radius: 4px;
  letter-spacing: .06em;
  align-self: flex-start;
}
.c-tier-ss { background: linear-gradient(135deg,#FFE66D,#F7971E); color: #000; }
.c-tier-s  { background: linear-gradient(135deg,#a78bfa,#7c3aed); color: #fff; }
.c-tier-a  { background: linear-gradient(135deg,#34d399,#059669); color: #fff; }
.c-tier-b  { background: rgba(148,163,184,.25); color: rgba(255,255,255,.6); }

/* SS tier card highlight */
.carousel-card.tier-ss {
  border-color: rgba(247,151,30,.22);
  background: rgba(247,151,30,.04);
}
.carousel-card.tier-ss:hover {
  border-color: rgba(247,151,30,.4);
}

/* ===== PRODUCT IMAGE ===== */
.carousel-card .rakuten-img {
  height: 86px;
  background: rgba(255,255,255,.06);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-card .rakuten-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* ===== CARD TEXT ===== */
.c-card-name {
  font-size: .78rem;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  line-height: 1.4;
  flex: 1;
}
.c-card-maker {
  font-size: .66rem;
  color: rgba(255,255,255,.35);
  letter-spacing: .02em;
}
.carousel-card .rakuten-price {
  font-size: .78rem;
  color: #fbbf24;
  font-weight: 700;
  min-height: 1.1em;
}

/* ===== BUY BUTTON ===== */
.carousel-card .btn-rakuten {
  display: block;
  text-align: center;
  background: #bf0000;
  color: white;
  font-size: .72rem;
  font-weight: 800;
  padding: 7px 8px;
  border-radius: 6px;
  letter-spacing: .03em;
  transition: background .2s;
  margin-top: auto;
  white-space: nowrap;
}
.carousel-card .btn-rakuten:hover {
  background: #e60012;
}

/* ===== CAROUSEL SECTION WRAPPER (in article) ===== */
.carousel-section {
  background: rgba(6,13,26,.95);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 20px 22px;
  margin: 24px 0;
}
.carousel-section-title {
  font-size: .8rem;
  font-weight: 800;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 4px;
}
.carousel-section-sub {
  font-size: .76rem;
  color: rgba(255,255,255,.3);
  margin-bottom: 16px;
}

/* ===== TIER COUNT PILLS ===== */
.tier-count-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.tier-count-pill {
  font-size: .66rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  letter-spacing: .04em;
  border: 1px solid transparent;
}
.tcp-ss { background: rgba(247,151,30,.12); color: #F7971E; border-color: rgba(247,151,30,.2); }
.tcp-s  { background: rgba(124,58,237,.12); color: #a78bfa; border-color: rgba(124,58,237,.2); }
.tcp-a  { background: rgba(16,185,129,.12); color: #34d399; border-color: rgba(16,185,129,.2); }
.tcp-b  { background: rgba(148,163,184,.08); color: rgba(148,163,184,.7); border-color: rgba(148,163,184,.15); }