/* ===============================================
  * 共通の構造 *
=============================================== */

@media (min-width: 768px) {
  .coordinate-list__inner {
    padding-right: 6.25%;
    padding-left: 6.25%;
  }

  #pagination [data-parts=pager] {
    justify-content: center;
  }
}


/*
 * ボタン
 */

.coordinate-list__button--category-parent {
  --color-font: var(--color-font-primary);
  --color-bg: #fff;
  --color-border: var(--color-font-primary);

  padding: .75rem;
  background-color: var(--color-bg);
  border: solid 1px var(--color-border);
  border-radius: 3px;

  color: var(--color-font);
  font-family: var(--font-eng);
  font-weight: 600;
  font-size: .9375rem;
  font-style: italic;
  letter-spacing: .05em;
  line-height: 1;
  text-align: center;
}
@media (min-width: 768px) {
  .coordinate-list__button--category-parent {
    padding: .75rem;
    border: none;
    border-radius: 0;

    font-size: 1rem;
  }
}

.coordinate-list__button--category-parent[data-state-selected=active] {
  --color-font: #fff;
  --color-bg: var(--color-font-primary);
}

.coordinate-list__button--category-child {
  --color-font: var(--color-primary);
  --color-bg: #fff;
  --color-border: var(--color-primary);

  padding: .375rem;
  background-color: var(--color-bg);
  border: solid 1px var(--color-border);
  border-radius: 3px;

  color: var(--color-font);
  font-size: .75rem;
  letter-spacing: .08em;
  line-height: 1;
  text-align: center;
}
@media (min-width: 768px) {
  .coordinate-list__button--category-child {
    font-size: .875rem;
  }
}

.coordinate-list__button--category-child::before {
  content: "#";
}

.coordinate-list__button--category-child[data-state-selected=active] {
  --color-font: #fff;
  --color-bg: var(--color-primary);

  pointer-events: none;
}


/*
 * テキスト
 */

.coordinate-list__text--title-category-child {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 2;
}
@media (min-width: 768px) {
  .coordinate-list__text--title-category-child {
    display: block;

    font-size: 1.125rem;
    text-align: center;
  }
}




/* ===============================================
  * コーディネート一覧ページの見出しエリア *
=============================================== */

.coordinate-list__heading-container {
  display: grid;
  row-gap: 1.875rem;
}


.coordinate-list__category-tree--parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .9rem;

  padding: 0 var(--padding-horizontal);
}
@media (min-width: 768px) {
  .coordinate-list__category-tree--parent {
    display: flex;
    gap: 0;

    width: fit-content;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
    border: solid 1px var(--color-font-primary);
    border-radius: 4px;
    overflow: hidden;
  }
}

.coordinate-list__category-tree--child {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;

  padding: 0 var(--padding-horizontal);
}
@media (min-width: 768px) {
  .coordinate-list__category-tree--child {
    justify-content: center;
    gap: .625rem;
  }
}

.coordinate-list__category-tree--child > li[data-state-selected=active] {
  width: 100%;
  order: -1;
}

@media (min-width: 768px) {
  .coordinate-list__category-tree--parent > li:not(:last-of-type) {
    border-right: solid 1px var(--color-font-primary);
  }
}




/* ===============================================
  * コーディネート一覧ページの商品エリア *
=============================================== */

@media (min-width: 768px) {
  .product-list__list[data-cols=regular] {
    --column: 5;
    --gap-vertical: 2.5rem;
    --gap-horizontal: 1.42%;
  }
}

.product-list__sort-container {
  border-right: none;
}

.product-list__image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}