/* ==========================================================================
   Product List — onoretty EC-CUBE
   公式商品販売一覧ページ（BEM / モバイルファースト）
   Figma「公式商品販売」(node 1:53856) に基づく実装
   Design Tokens: design/tokens/*.css を参照
   ========================================================================== */

/* ------------------------------------------------------------------
   Breadcrumb Bar
   Figma node 1:53857 — 長方形 12073
   bg=#d9dce3, width=1367, height=66
   margin-top: 20px (124 - 104), margin-right: 39px (1920 - 1881)
   padding-left: 34px (548-514), padding-top: 22px, padding-bottom: 6px
   テキスト: Noto Sans JP Medium 16px, line-height 38px, color #000
   separator gap: left 10px, right 12px
   ------------------------------------------------------------------ */

.p-page__breadcrumb-bar {
  background: var(--color-bg-gray-4, #d9dce3);
  min-height: var(--breadcrumb-height, 66px);
  height: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 20px 16px 0;
  padding: 0 16px;
  font-family: var(--font-family-ja);
  font-size: var(--font-size-sm-2, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  color: #000;
  line-height: 38px;
}

@media (min-width: 768px) {
  .p-page__breadcrumb-bar {
    font-size: var(--font-size-md, 1rem);
  }
}

@media (min-width: 1920px) {
  .p-page__breadcrumb-bar {
    margin: 20px 39px 0 var(--sidebar-margin-right, 101px);
    padding: 0 var(--breadcrumb-padding-x, 34px);
    height: var(--breadcrumb-height, 66px);
    flex-wrap: nowrap;
  }
}

.p-page__breadcrumb-bar a {
  color: #000;
  text-decoration: none;
}

.p-page__breadcrumb-bar a:hover {
  text-decoration: underline;
}

.p-page__breadcrumb-bar .breadcrumb-separator {
  margin: 0 12px 0 10px;
  color: #000;
}

/* ------------------------------------------------------------------
   Section Header (公式商品販売 title area)
   Figma node 1:53863 — "ONORESHO OFFICIAL WEAR"
     Inter Regular 32px, line-height 106px, color #364360, center
   Figma node 1:53862 — "全国己書公式ウェア販売"
     Inter/Noto Sans JP Regular 15px, line-height 64px,
     letter-spacing 0.45px, color #364360, center
   位置: EN=y265, JA=y315 → gap=50px from top to top
         breadcrumb bottom=y190 → margin-top=75px
         JA bottom → NEW ARRIVAL top: ~65px
   ------------------------------------------------------------------ */

.p-product-list-header {
  text-align: center;
  padding: 20px 16px;
  margin-top: var(--page-title-margin-top, 75px);
  margin-bottom: var(--page-title-margin-bottom, 50px);
}

@media (min-width: 1920px) {
  .p-product-list-header {
    padding: 0;
    margin-left: var(--section-content-margin-left, 104px);
  }
}

.p-product-list-header__title-en {
  font-family: var(--font-family-en);
  font-size: 1.25rem;
  font-weight: var(--font-weight-normal, 400);
  color: var(--color-primary, #364360);
  letter-spacing: var(--letter-spacing-7xl, 2.1px);
  line-height: 1.3;
  margin-bottom: 8px;
}

@media (min-width: 768px) {
  .p-product-list-header__title-en {
    font-size: 2rem;  /* 32px — Figma */
    line-height: 1.3;
  }
}

.p-product-list-header__title {
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm-2, 0.875rem);
  font-weight: var(--font-weight-normal, 400);
  color: var(--color-primary, #364360);
  letter-spacing: var(--letter-spacing-base, 0.45px);
  line-height: 1.3;
}

@media (min-width: 768px) {
  .p-product-list-header__title {
    font-size: var(--font-size-sm, 0.9375rem);  /* 15px — Figma */
  }
}

/* ------------------------------------------------------------------
   Product Grid
   Figma: 5 columns on PC, 249px cards, 30px gap
   SP: 2 columns
   ------------------------------------------------------------------ */

.product_page .p-product-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4, 16px);
  padding: 0 16px;
}

@media (min-width: 768px) and (max-width: 1919px) {
  .product_page .p-product-list {
    grid-template-columns: repeat(3, 1fr);
    padding: 0 24px;
  }
}

@media (min-width: 1920px) {
  .product_page .p-product-list {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--grid-product-gap-x, 30px);
    padding: 0;
  }
}

/* ------------------------------------------------------------------
   Product Card
   Figma node 1:53917 — 商品名テキスト
     Noto Sans JP Medium 13px, line-height normal (100%), color #000
   Figma: 249x249 image, border 1px solid #707070
   ------------------------------------------------------------------ */

.product_page .p-product-card {
  border: none;
  border-radius: 0;
  background: transparent;
}

.product_page .p-product-card:hover {
  box-shadow: none;
  opacity: 0.85;
}

.product_page .p-product-card__img {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-bg-white, #ffffff);
  border: 1px solid var(--color-text-muted, #707070);
  border-radius: var(--radius-none, 0);
}

.product_page .p-product-card__name {
  font-family: var(--font-family-ja);
  font-size: var(--font-size-2xs, 0.6875rem);
  font-weight: var(--font-weight-medium, 500);
  color: #000;
  padding: var(--product-card-margin-bottom, 12px) 0 0;
  line-height: normal;
}

@media (min-width: 768px) {
  .product_page .p-product-card__name {
    font-size: var(--font-size-xs, 0.8125rem);  /* 13px — Figma */
  }
}

.product_page .p-product-card__price {
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs, 0.8125rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-primary, #364360);
  padding: var(--space-1, 4px) 0 0;
}

/* ------------------------------------------------------------------
   Category Filter (override pages.css)
   ------------------------------------------------------------------ */

.product_page .p-category-filter {
  display: flex;
  gap: 0;
  margin-bottom: var(--space-4, 16px);
  border-bottom: 1px solid var(--color-bg-gray-4, #d9dce3);
}

.product_page .p-category-filter__item {
  padding: var(--space-3, 12px) var(--space-5, 20px);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-size: var(--font-size-sm-2, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-primary, #364360);
  background: transparent;
  transition: var(--transition-fast, 0.2s);
}

.product_page .p-category-filter__item:hover,
.product_page .p-category-filter__item.is-active {
  background: transparent;
  color: var(--color-primary, #364360);
  border-bottom-color: var(--color-primary, #364360);
}

/* ------------------------------------------------------------------
   Category Section (カテゴリ別セクション)
   Figma node 1:53892 — "NEW ARRIVAL" / 1:53893 — "Tシャツ" 等
     Inter/Noto Sans JP Regular 20px, line-height 64px,
     letter-spacing 0.6px, color #364360
   区切り線: heading top → divider = 34px, divider → grid = 30px
   セクション間: 101px
   ------------------------------------------------------------------ */

.p-category-section {
  margin-bottom: 0;
  padding: 0 var(--space-4, 16px);
}

.p-category-section:first-of-type {
  margin-top: 0;
}

.p-category-section + .p-category-section {
  margin-top: var(--section-gap, 101px);
}

@media (min-width: 1920px) {
  .p-category-section {
    padding: 0;
    margin-left: var(--section-content-margin-left, 104px);
    margin-right: 38px;
  }
}

.p-category-section__title {
  font-family: var(--font-family-base);
  font-size: 1rem;
  font-weight: var(--font-weight-normal, 400);
  color: var(--color-primary, #364360);
  letter-spacing: 0.6px;
  margin: 0;
  padding: 0;
  line-height: 1.3;
}

@media (min-width: 768px) {
  .p-category-section__title {
    font-size: var(--font-size-2xl, 1.25rem);  /* 20px — Figma */
  }
}

.p-category-section__divider {
  border: none;
  border-top: 1px solid var(--color-primary, #364360);
  margin: var(--section-heading-to-divider, 34px) 0 var(--section-divider-to-grid, 30px);
}

.p-category-section .p-product-list {
  padding: 0;
}

/* ------------------------------------------------------------------
   Info Section (配送・お支払い)
   ------------------------------------------------------------------ */

/* no additional overrides needed — styled via layout.css tokens */

/* ------------------------------------------------------------------
   Page wrapper adjustments
   ------------------------------------------------------------------ */

.product_page .p-page {
  max-width: none;
  padding: 0 0 var(--space-12, 48px);
}

.product_page .p-page__title {
  display: none;
}

.product_page .p-page__breadcrumb {
  display: none;
}

/* ==================================================================
   オリジナル商品制作 — Figma「オリジナル商品制作」(node 1:53514)
   3列大型カード、363x352px、カテゴリ名中央20px、価格なし
   ================================================================== */

/* タイトル 32px 中央揃え */
.p-product-list-header__title--lg {
  font-size: 1.5rem;
  text-align: center;
}
@media (min-width: 768px) {
  .p-product-list-header__title--lg {
    font-size: 2rem;  /* 32px */
  }
}

/* サブタイトル 15px 中央揃え */
.p-product-list-header__subtitle {
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs, 0.8125rem);
  font-weight: var(--font-weight-normal, 400);
  color: var(--color-primary, #364360);
  letter-spacing: var(--letter-spacing-base, 0.45px);
  text-align: center;
  margin: 4px 0 24px;
}
@media (min-width: 768px) {
  .p-product-list-header__subtitle {
    font-size: var(--font-size-sm, 0.9375rem);
  }
}

/* 3列グリッド — Figma: 363x352, 3col, gap 90px横 / 91px縦 */
.product_page .p-product-list.p-product-list--original {
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 768px) {
  .product_page .p-product-list.p-product-list--original {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 60px;
  }
}
@media (min-width: 1400px) {
  .product_page .p-product-list.p-product-list--original {
    gap: 40px 90px;
  }
}

/* 大型カード画像 — Figma: 363x352 */
.product_page .p-product-card--original {
  border: none;
}

.product_page .p-product-card__img--original {
  aspect-ratio: 363 / 352;
  border: none;
  overflow: hidden;
  border-radius: 0;
}

.product_page .p-product-card__img--original img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* カテゴリ名ラベル — Figma: 20px 中央揃え #364360 */
.p-product-card__category-name {
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm, 0.9375rem);
  font-weight: var(--font-weight-normal, 400);
  color: var(--color-primary, #364360);
  text-align: center;
  margin: 8px 0 0;
  line-height: 1.4;
}
@media (min-width: 768px) {
  .p-product-card__category-name {
    font-size: var(--font-size-2xl, 1.25rem);  /* 20px */
  }
}