/* ============================================================
   GT Stripe Payment : archive-layout.css (GeneratePress対応)
   ============================================================ */

/* ============================================================
   共通：全アーカイブ共通リセット
   ============================================================ */
body.post-type-archive-product {
  box-sizing: border-box;
}

/* ========================================================
   タイトルを .gtsp-archive-list と同じ横幅・中央揃えにする
   ======================================================== */
body.gtsp-archive-type1 .gtsp-archive-title {
  margin: 0 auto;
  padding: 0 1rem 1rem;
  font-size: 1.5rem;
  text-align: center;
}

/* ============================================================
   Type1 : カード型（GoodWood型 3カラム）
   ============================================================ */

/* これまでの .site-main はやめる */
body.gtsp-archive-type1 .gtsp-archive-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: flex-start;
  margin: 0 auto;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

body.gtsp-archive-type1 .gtsp-archive-list > article {
  flex: 1 1 calc(33.333% - 2rem);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-align: center;
}

body.gtsp-archive-type1 .gtsp-archive-list > article:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* 以下は共通でOK */
body.gtsp-archive-type1 .inside-article {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* アイキャッチも noimg も同じ表示にする */
body.post-type-archive-product .post-image img,
body.post-type-archive-product .inside-article img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4/3;
  object-fit: cover;
}


body.gtsp-archive-type1 .entry-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 1rem 1rem 0.5rem;
}

body.gtsp-archive-type1 .entry-summary p {
  font-size: 0.9rem;
  font-weight: bold;
  margin: 0 1rem 1rem;
  color: #111;
}


/* レスポンシブ */
/* PC: 3カラム */
body.gtsp-archive-type1 .gtsp-archive-list > article {
  flex: 1 1 calc(33.333% - 2rem);
}

/* タブレット: 2カラム */
@media screen and (max-width: 768px) {
  body.gtsp-archive-type1 .gtsp-archive-list > article {
    flex: 1 1 calc(50% - 2rem);
  }
}

/* スマホ: 1カラム */
@media screen and (max-width: 480px) {
  body.gtsp-archive-type1 .gtsp-archive-list > article {
    flex: 1 1 100%;
  }
}


/* ============================================================
   Type2 : リスト型（横並び）
   ============================================================ */

body.gtsp-archive-type2 .site-main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

body.gtsp-archive-type2 .site-main > article {
  display: flex;
  gap: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.gtsp-archive-type2 .site-main > article:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

body.gtsp-archive-type2 .post-image {
  flex: 0 0 200px;
}

body.gtsp-archive-type2 .post-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
}

body.gtsp-archive-type2 .inside-article {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
}

body.gtsp-archive-type2 .entry-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

body.gtsp-archive-type2 .entry-summary p {
  font-size: 0.9rem;
  margin: 0;
}

/* ============================================================
   Type3 : グリッド型（よりシンプル）
   ============================================================ */

body.gtsp-archive-type3 .site-main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin: 0 auto;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

body.gtsp-archive-type3 .site-main > article {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.gtsp-archive-type3 .site-main > article:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

body.gtsp-archive-type3 .post-image img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

body.gtsp-archive-type3 .entry-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 1rem 1rem 0.5rem;
}

body.gtsp-archive-type3 .entry-summary p {
  font-size: 0.9rem;
  font-weight: bold;
  margin: 0 1rem 1rem;
  color: #111;
}

/* アーカイブページング*/
/* ページネーションをセンター寄せ */
/* WordPressデフォルトの navigation/pagination の干渉を殺す */
.gtsp-pagengnavi .navigation.pagination {
  all: unset;
  display: block;
  text-align: center;
}

.gtsp-pagengnavi .nav-links {
  display: inline-flex;
  justify-content: center;
  flex-wrap: wrap;
}

.gtsp-pagengnavi .page-numbers {
  display: inline-block;
  margin: 0 5px;
  padding: 6px 12px;
  border: 1px solid #ddd;
  text-decoration: none;
  color: #333;
}

.gtsp-pagengnavi .page-numbers.current {
  background: #333;
  color: #fff;
  border-color: #333;
}
.gtsp-pagengnavi .next.page-numbers{
  font-size: 1em!important;
  padding: 0.5em 0.5em 0.2em!important;
}
.gtsp-pagengnavi .prev.page-numbers{
  font-size: 1em!important;
  padding: 0.5em 0.5em 0.2em!important;
}


/* シングル商品ページの横幅をアーカイブと合わせる */
/* シングル商品ページ用：アーカイブと同じ幅にする */
body.single-product .gtsp-single-container {
  margin: 0 auto;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

body.single-product .gtsp-single-title {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 1rem;
  text-align: center;
}

body.single-product .gtsp-single-header img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 1rem;
}

body.single-product .gtsp-single-content {
  font-size: 1rem;
  line-height: 1.7;
}

body.single-product .gtsp-product-meta {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
}

body.single-product .gtsp-product-meta li {
  margin-bottom: 0.5rem;
  font-weight: bold;
}