@charset "UTF-8";
/* ==========================================================
   天下一 カテゴリ・月別ページ 表示切替（標準 / リスト）
   対象：#sort-controls の後に続く #category-thumbnail の一覧だけ
         （検索結果・トップページの一覧には効かない）
   PC: 768px以上 / スマホ: 767px以下
   ========================================================== */

/* ---------- 切替ボタン（既存の並べ替えボタンに色を合わせる） ---------- */
.tk-view-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0 10px;
}

.tk-view-toggle__label {
  margin-right: 2px;
  color: #666;
  font-size: 14px;
}

.tk-view-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 5px 12px;
  border: 1px solid #999;
  border-radius: 3px;
  background: #f5f5f5;
  color: #000;
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
}
.tk-view-toggle__btn.is-active {
  border-color: #ff7e00;
  background: #ffdb00;
}
.tk-view-toggle__btn:focus-visible {
  outline: 2px solid #ff7e00;
  outline-offset: 2px;
}

.tk-view-toggle__icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* ---------- リスト表示（共通） ---------- */
.tk-view-list #sort-controls ~ #category-thumbnail #item-list {
  display: block;
}

.tk-view-list #sort-controls ~ #category-thumbnail .item-thumbnail {
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #ddd;
}

.tk-view-list #sort-controls ~ #category-thumbnail .item-thumb-name {
  width: auto;
  height: auto;
}

/* <a> の中の5要素を grid で並べ直す */
.tk-view-list #sort-controls ~ #category-thumbnail .item-thumb-name > a {
  display: grid;
  align-items: center;
  padding: 12px 8px;
  color: inherit;
  text-decoration: none;
}
.tk-view-list #sort-controls ~ #category-thumbnail .item-thumb-name > a:hover {
  background: #fafafa;
}

/* 画像 */
.tk-view-list #sort-controls ~ #category-thumbnail .item-imagethumb {
  grid-area: img;
  align-self: start;
  width: 100%;
  height: auto;
}
.tk-view-list #sort-controls ~ #category-thumbnail .item-imagethumb img {
  width: 100%;
  height: 100%;
}
/* NEW の三角を小さく */
.tk-view-list #sort-controls ~ #category-thumbnail .item-imagethumb.new::before {
  border-top-width: 32px;
  border-right-width: 32px;
}
.tk-view-list #sort-controls ~ #category-thumbnail .item-imagethumb.new::after {
  top: 5px;
  left: 0;
  font-size: 9px;
}

/* 商品名 */
.tk-view-list #sort-controls ~ #category-thumbnail .item-thumb-name p {
  grid-area: name;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.5;
}

/* ラベル（メーカー・程度・特価品など） */
.tk-view-list #sort-controls ~ #category-thumbnail .item-icon {
  grid-area: icon;
  flex-wrap: wrap;
  gap: 4px;
  width: auto;
  height: auto;
  margin: 6px 0 0;
}

/* 程度の星 */
.tk-view-list #sort-controls ~ #category-thumbnail .recommend-star {
  grid-area: star;
  width: auto;
  max-width: none;
  height: auto;
  margin: 6px 0 0;
}
.tk-view-list #sort-controls ~ #category-thumbnail .recommend-star img {
  width: 80px;
  height: auto;
}

/* 価格・在庫 */
.tk-view-list #sort-controls ~ #category-thumbnail .t-center {
  grid-area: price;
  width: auto;
  height: auto;
  font-size: 13px;
  line-height: 1.5;
  text-align: right;
}
.tk-view-list #sort-controls ~ #category-thumbnail .t-center .price {
  font-size: 22px;
}

/* ---------- PC（768px以上）：画像 | 名前・ラベル・星 | 価格 ---------- */
@media screen and (min-width: 768px) {
  .tk-view-list #sort-controls ~ #category-thumbnail .item-thumb-name > a {
    grid-template-columns: 120px minmax(0, 1fr) 190px;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "img name  price"
      "img icon  price"
      "img star  price";
    column-gap: 20px;
  }
}

/* ---------- スマホ（767px以下）：画像 | 名前 / ラベル / 星・価格 ---------- */
@media screen and (max-width: 767px) {
  .tk-view-toggle {
    padding: 0;
  }
  .tk-view-toggle__label,
  .tk-view-toggle__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .tk-view-toggle__btn {
    padding: 6px 10px;
  }
  /* スマホの並べ替えボタンの選択色（#444）に合わせる */
  .tk-view-toggle__btn.is-active {
    border-color: #444;
    background: #444;
    color: #fff;
  }

  .tk-view-list #sort-controls ~ #category-thumbnail .item-thumb-name > a {
    grid-template-columns: 96px auto minmax(0, 1fr);
    grid-template-areas:
      "img name  name"
      "img icon  icon"
      "img star  price";
    column-gap: 10px;
    padding: 10px 4px;
  }
  .tk-view-list #sort-controls ~ #category-thumbnail .item-thumb-name p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 14px;
  }
  .tk-view-list #sort-controls ~ #category-thumbnail .item-icon span {
    font-size: 12px;
  }
  .tk-view-list #sort-controls ~ #category-thumbnail .recommend-star {
    align-self: end;
  }
  .tk-view-list #sort-controls ~ #category-thumbnail .recommend-star img {
    width: 64px;
  }
  .tk-view-list #sort-controls ~ #category-thumbnail .t-center {
    align-self: end;
    margin-top: 6px;
    font-size: 11px;
  }
  .tk-view-list #sort-controls ~ #category-thumbnail .t-center .price {
    font-size: 18px;
  }
}