/* =============================================================
   components/product-card.css
   4種類のカードレイアウト（Figma NEW キャンバス実測値）
   ============================================================= */

/* ─────────────────────────────────────────────────────────────
   Type A: 横スクロール大型カード
   使用: トップページ ランキング・おすすめ各セクション
   カード: 220px × 344px（画像300px + テキスト44px）
   ───────────────────────────────────────────────────────────── */

/* スクロールラッパー: サブ見出し直後の上余白 / カルーセルドット下の下余白 */
.js-scroll-wrap {
  margin-top: var(--space-subheading-content);   /* 25px */
  margin-bottom: var(--space-border-subheading); /* 20px: ドット→次サブ見出し */
}

.product-scroll {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--content-pad);  /* スナップ位置を左パディング分オフセット */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--content-pad);  /* 20px */
}

.product-scroll::-webkit-scrollbar { display: none; }

.product-scroll__track {
  display: flex;
  gap: var(--scroll-card-gap);  /* 20px */
}

.product-scroll-card {
  width: var(--scroll-card-w);     /* 220px */
  flex-shrink: 0;
  scroll-snap-align: start;
  color: inherit;
  text-decoration: none;
  display: block;
}

.product-scroll-card__thumb {
  width: var(--scroll-card-w);     /* 220px */
  height: var(--scroll-card-img-h); /* 300px */
  position: relative;
  overflow: hidden;
  background: #E8E8E8;
}

.product-scroll-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  display: block;
}

.product-scroll-card__body {
  padding: 10px 0;
}

.product-scroll-card__title {
  font-family: var(--font-ui);
  font-size: var(--text-scroll-title);  /* 16px */
  font-weight: var(--fw-regular);
  line-height: var(--lh-scroll-title);  /* 24px */
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────
   Type B: 2列グリッドカード
   使用: トップページ セール中/素人/おすすめ / 作品詳細「同じ女優の作品」
   カード幅: grid 1fr 自動 (375px幅で約161.5px)
   画像縦横比: 590:800（パッケージ実測値）
   ───────────────────────────────────────────────────────────── */

.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--grid-col-gap);  /* 12px */
  row-gap: var(--grid-row-gap);     /* 15px */
  padding: 0 var(--content-pad);    /* 20px */
}

.product-grid-card {
  color: inherit;
  text-decoration: none;
  display: block;
  min-width: 0;
}

.product-grid-card__thumb {
  width: 100%;
  aspect-ratio: 118 / 169;
  overflow: hidden;
  position: relative;
  background: #E8E8E8;
}

.product-grid-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  display: block;
}

.product-grid-card__body {
  padding: 10px 0;
}

/* 素人セクションのみ中央トリミング */
.section-content--amateur .product-grid-card__thumb img,
.section--amateur .product-list__thumb img {
  object-position: center;
}

.product-grid-card__title {
  font-family: var(--font-ui);
  font-size: var(--text-grid-title);  /* 14px */
  font-weight: var(--fw-regular);
  line-height: var(--lh-grid-title);  /* 20px */
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────
   横長画像の右トリミング（AVパッケージ表面 = 右半分）
   position: absolute + right: 0 で右端に寄せ、overflow: hidden で左を切る
   ───────────────────────────────────────────────────────────── */

.product-scroll-card__thumb.is-landscape img,
.product-grid-card__thumb.is-landscape img,
.product-list__thumb.is-landscape img {
  object-position: right center;
}

/* ─────────────────────────────────────────────────────────────
   Type C: 水平リスト型
   使用: 作品一覧ページ
   サムネ: 118×161px（左）/ テキスト: 198px（右）
   バッジはテキストエリアの先頭に配置（サムネ上ではない）
   ───────────────────────────────────────────────────────────── */

.product-list {
  display: flex;
  flex-direction: column;
  gap: var(--list-row-gap);   /* 25px */
  align-items: center;
  padding: var(--list-pad-y) 0;  /* 40px 0 */
}

.product-list__item {
  display: flex;
  gap: var(--list-item-gap);   /* 19px */
  align-items: flex-start;
  padding: 0 var(--content-pad);  /* 20px */
  width: 100%;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.product-list__thumb {
  width: var(--list-thumb-w);   /* 118px */
  height: var(--list-thumb-h);  /* 161px */
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  background: #E8E8E8;
}

.product-list__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  display: block;
}

/* テキストエリア: バッジ → タイトルの縦並び。flex: 1 でサムネ残り幅を自動充填 */
.product-list__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-list__title {
  font-family: var(--font-ui);
  font-size: var(--text-grid-title);  /* 14px */
  font-weight: var(--fw-regular);
  line-height: var(--lh-grid-title);  /* 20px */
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 「詳細を見る」ボタン（Type-C カード内） */
.product-list__detail-btn {
  display: inline-block;
  background: #000000;
  color: #FFFFFF;
  padding: 8px 24px;
  border-radius: 24px;
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: var(--fw-regular);
  line-height: 1;
  margin-top: 12px;
  align-self: flex-start;
}

.product-list__detail-btn:hover,
.product-list__detail-btn:active {
  opacity: 0.75;
}

/* アイテム間区切り線（.product-list 内、各 item の後に配置） */
.product-list__divider {
  width: var(--list-divider-w);  /* 100px */
  height: 1px;
  background: var(--color-border);
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────
   Type D: 1列大判カード（フル幅）
   使用: 女優詳細ページ 人気作品TOP10 / 最新作品TOP10
   画像: 375px × 252px（フル幅）/ 情報エリア: 295px
   ───────────────────────────────────────────────────────────── */

.product-hero-card {
  width: 100%;
  color: inherit;
  text-decoration: none;
  display: block;
}

.product-hero-card__image {
  width: 100%;
  height: var(--hero-img-h);  /* 252px */
  object-fit: cover;
  object-position: top;
  display: block;
  background: #E8E8E8;
}

.product-hero-card__info {
  background: var(--color-white);
  padding: 20px var(--content-pad) 0;
  min-height: var(--hero-info-h);  /* 295px */
}

.product-hero-card__title {
  font-family: var(--font-ui);
  font-size: var(--text-product-title);  /* 20px */
  font-weight: var(--fw-medium);
  line-height: var(--lh-product-title);  /* 28px */
  color: var(--color-text);
}

.product-hero-card__stars {
  font-size: var(--text-star);  /* 11px */
  line-height: var(--lh-product-title);
  margin-top: 8px;
}

.product-hero-card__stars .star {
  color: var(--color-star);  /* #DCCD2A */
}

.product-hero-card__stars .count {
  color: var(--color-text);
}

/* ─────────────────────────────────────────────────────────────
   作品一覧ページ専用オーバーライド（list.php）
   ───────────────────────────────────────────────────────────── */

/* サムネ幅: 150px × 215px（118:169比率） */
.product-list--page .product-list__thumb {
  width: 150px;
  height: 215px;
}

/* ボタン間隔調整: list底padding 40px → 0px（section-ctaのmargin-top: 30pxと合計50px） */
.product-list--page {
  padding-bottom: 0;
}

/* タイトル行数上限なし（作品一覧ページは全文表示） */
.product-list--page .product-list__title {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
}

/* ─────────────────────────────────────────────────────────────
   ラベル: 新作 / N%OFF
   サムネ div（position: relative）内に絶対配置
   ───────────────────────────────────────────────────────────── */

.card-label {
  position: absolute;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  border-radius: 2px;
  z-index: 2;
  line-height: 1.4;
  pointer-events: none;
  white-space: nowrap;
}

.card-label--new {
  top: 6px;
  left: 6px;
  background: #ff0000;
}

.card-label--discount {
  bottom: 6px;
  left: 6px;
  background: #ff7800;
}

/* ヒーローバナー内の「新作」ラベルのみ 160% 拡大 */
.hero-banner__slide .card-label--new {
  font-size: 18px;
  padding: 3px 13px;
  top: 10px;
  left: 10px;
}

/* ボタングループ（垂直 19px間隔、中央揃え） */
.product-hero-card__btn-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
  margin-top: 30px;
  padding-bottom: 30px;
}

/* ─────────────────────────────────────────────────────────
   campaign 機能（依頼 docs_campaign Phase B）
   ───────────────────────────────────────────────────────── */
/* トップの期間限定キャンペーンバナー（新着情報とランキングの間・幅80%中央） */
.campaign-banner {
  display: block;
  max-width: 80%;
  margin-inline: auto;
  margin-top: 25px;   /* 新着情報との間隔（依頼 2026-06-07） */
}
.campaign-banner img {
  width: 100%;
  height: auto;
  display: block;
}
/* campaign 一覧の素人(videoc)作品サムネは中央揃え（pl無し＝単独縦長表紙のため）。
   非素人(videoa)は既存 .product-list__thumb.is-landscape（right center）を流用。
   ※トップの .section--amateur 系セクションCSSには非干渉（per-item クラス） */
.product-list__thumb.is-amateur img {
  object-position: center;
}