@charset "utf-8";

/* ==========================================================================
   商品検索一覧：リスト／グリッド表示切替
   ・表示切替UI（選択中の絞り込み条件エリアの右端）
   ・グリッド表示（PC 4列 / SP 2列）
   .p-products-all-item__results 配下のDOM構造は変更せず、CSSのみで組み替える
   ========================================================================== */

/* --------------------------------------------------------------------------
   表示切替UI
   -------------------------------------------------------------------------- */
.p-products-all-item-search__view {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  margin-left: auto;
}

@media screen and (max-width: 767px) {
  .p-products-all-item-search__view {
    margin-right: 15px;
  }
}

.p-products-all-item-search__view__button {
  display: flex;
  align-items: center;
  height: 25px;
  padding: 0 8px;
  border: solid 1px #a3a3a3;
  background-color: #fff;
  color: #484848;
  font-size: 12px;
  letter-spacing: 0.72px;
  line-height: 1;
  cursor: pointer;
}

.p-products-all-item-search__view__button:first-child {
  border-radius: 2px 0 0 2px;
}

.p-products-all-item-search__view__button:last-child {
  margin-left: -1px;
  border-radius: 0 2px 2px 0;
}

.p-products-all-item-search__view__button:hover {
  border-color: #00a2e6;
  color: #00a2e6;
}

.p-products-all-item-search__view__button:focus-visible {
  outline: 2px solid #004da1;
  outline-offset: 2px;
}

.p-products-all-item-search__view__button.is-selected {
  z-index: 1;
  position: relative;
  border-color: #004da1;
  background-color: #004da1;
  color: #fff;
  cursor: default;
}

.p-products-all-item-search__view__icon {
  display: block;
  position: relative;
  width: 14px;
  height: 14px;
}

.p-products-all-item-search__view__icon::before {
  display: block;
  position: absolute;
  left: 0;
  background-color: currentColor;
  content: "";
}

/* リストアイコン：横棒3本 */
.p-products-all-item-search__view__button--list .p-products-all-item-search__view__icon::before {
  top: 1px;
  width: 14px;
  height: 2px;
  box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor;
}

/* グリッドアイコン：正方形4つ */
.p-products-all-item-search__view__button--grid .p-products-all-item-search__view__icon::before {
  top: 0;
  width: 6px;
  height: 6px;
  box-shadow: 8px 0 0 currentColor, 0 8px 0 currentColor, 8px 8px 0 currentColor;
}

/*【TW 1.0】#45025（ECPF-3983）対応 検索結果をグリッド表示に切り替えできるようにする Start.*/
/* --------------------------------------------------------------------------
   グリッド表示：一覧のカラム組み
   -------------------------------------------------------------------------- */
.p-products-all-item.is-view-grid .p-products-all-item__results .product-grid .productMoreGrid {
  display: grid;
  align-items: start;
}

@media screen and (min-width: 768px),
print {
  .p-products-all-item.is-view-grid .p-products-all-item__results .product-grid .productMoreGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 10px;
  }
}

@media screen and (max-width: 767px) {
  .p-products-all-item.is-view-grid .p-products-all-item__results .product-grid .productMoreGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 8px;
    padding: 0 15px;
  }
}
/*【TW 1.0】#45025（ECPF-3983）対応 検索結果をグリッド表示に切り替えできるようにする End.*/

.p-products-all-item.is-view-grid .p-products-all-item__item {
  padding: 20px 0;
}

/* 横並びになるため、リスト表示用の行区切り線は無効化する */
.p-products-all-item.is-view-grid .p-products-all-item__item + .p-products-all-item__item {
  margin-top: revert;
  border-top: none;
}

/* --------------------------------------------------------------------------
   グリッド表示：商品カード
   -------------------------------------------------------------------------- */
.p-products-all-item.is-view-grid .p-products-all-item-product {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "product_label"
    "product_image"
    "product_wishlist"
    "product_name"
    "product_price"
    "product_spec"
    "product_buttons";
  row-gap: 10px;
}

.p-products-all-item.is-view-grid .p-products-all-item-product__image,
.p-products-all-item.is-view-grid .p-products-all-item-product__image--soldout {
  width: 100%;
  margin-top: 0;
  padding: 0;
}

/* 商品ごとの縦横比の違いで高さがばらつかないよう、画像枠の比率を固定する */
.p-products-all-item.is-view-grid .p-products-all-item-product__image a,
.p-products-all-item.is-view-grid .p-products-all-item-product__image--soldout a {
  display: block;
  aspect-ratio: 1 / 1;
}

.p-products-all-item.is-view-grid .p-products-all-item-product__image a > img,
.p-products-all-item.is-view-grid .p-products-all-item-product__image--soldout a > img {
  height: 100%;
  object-fit: contain;
}

/* ラベル */
.p-products-all-item.is-view-grid .p-product-item__label-wrapper {
  width: auto;
  max-width: 100%;
  margin: 0;
  gap: 4px;
}

.p-products-all-item.is-view-grid .p-product-item__label-wrapper .p-product-item__label {
  max-width: 100%;
}

/* 比較リスト */
.p-products-all-item.is-view-grid .p-area-add-wish-list {
  margin-top: 0;
  font-size: 12px;
}

/* 商品名 */
.p-products-all-item.is-view-grid .p-products-all-item-product__name {
  max-width: none;
  letter-spacing: 0.6px;
}

.p-products-all-item.is-view-grid .p-products-all-item-product__name__text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: 14px;
  line-height: 1.4;
  word-break: break-all;
}

.p-products-all-item.is-view-grid .p-products-all-item-product__useditem {
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 6px;
}

.p-products-all-item.is-view-grid .p-products-all-item-product__useditem__status {
  margin-left: 0;
  font-size: 12px;
}

/* 価格・出荷目安・レビュー */
.p-products-all-item.is-view-grid .p-products-all-item-product__number {
  font-size: 22px;
  letter-spacing: 0.5px;
}

.p-products-all-item.is-view-grid .p-products-all-item-product__shipment,
.p-products-all-item.is-view-grid .p-products-all-item-product__shipment--red,
.p-products-all-item.is-view-grid .p-products-all-item-product__shipment--days {
  margin-right: 0;
  font-size: 11px;
}

.p-products-all-item.is-view-grid .p-products-all-item-product__shipment--days {
  display: block;
  width: auto;
  line-height: 1.4;
}

.p-products-all-item.is-view-grid .p-products-all-item-product__review a {
  font-size: 12px;
}

.p-products-all-item.is-view-grid .p-products-all-item-product__review a > img {
  width: 64px;
}

/* スペック表 */
.p-products-all-item.is-view-grid .p-products-all-item-product__spec {
  max-width: none;
}

.p-products-all-item.is-view-grid .p-products-all-item-product__spec table {
  width: 100%;
  table-layout: fixed;
}

/* 「＋ 続きを表示する」が最終行に重ならないよう余白を確保する */
.p-products-all-item.is-view-grid .p-products-all-item-product__spec__body.over-7-specs {
  padding-bottom: 22px;
}

.p-products-all-item.is-view-grid .p-products-all-item-product__spec__body.over-7-specs::after {
  font-size: 12px;
  white-space: nowrap;
}

.p-products-all-item.is-view-grid .p-products-all-item-product__spec__item {
  width: 40%;
  padding: 4px;
  font-size: 11px;
  letter-spacing: 0;
  word-break: break-all;
}

.p-products-all-item.is-view-grid .p-products-all-item-product__spec__text {
  padding-left: 6px;
  font-size: 11px;
  letter-spacing: 0;
  word-break: break-all;
}

/* ボタン */
/* base.cssのgrid-areaはSP専用のため、PCでも明示してカードを7行構成に揃える */
.p-products-all-item.is-view-grid .p-products-all-item-product__buttons {
  grid-area: product_buttons;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.p-products-all-item.is-view-grid .p-products-all-item-product__link,
.p-products-all-item.is-view-grid .p-products-all-item-product__link--detail,
.p-products-all-item.is-view-grid .p-products-all-item-product__link--cart {
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  height: 40px;
  font-size: 14px;
  letter-spacing: 0.5px;
}

.p-products-all-item.is-view-grid .p-products-all-item-product__link--cart {
  margin: 10px 0 0;
}

.p-products-all-item.is-view-grid .p-products-all-item-product__buttons img {
  width: 14px;
  margin-right: 8px;
}

/* --------------------------------------------------------------------------
   グリッド表示：SPは文字サイズを縮小し、表示項目を省略して閲覧性を確保する
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {

  /* スペック表は横幅が足りないため、項目名を値の上へ積んで縦積みにする */
  .p-products-all-item.is-view-grid .p-products-all-item-product__spec table,
  .p-products-all-item.is-view-grid .p-products-all-item-product__spec tbody,
  .p-products-all-item.is-view-grid .p-products-all-item-product__spec tr,
  .p-products-all-item.is-view-grid .p-products-all-item-product__spec__item,
  .p-products-all-item.is-view-grid .p-products-all-item-product__spec__text {
    display: block;
    width: auto;
  }

  .p-products-all-item.is-view-grid .p-products-all-item-product__spec tr + tr {
    margin-top: 6px;
  }

  /* 項目名は値より小さく、背景色なしで補助的に見せる */
  .p-products-all-item.is-view-grid .p-products-all-item-product__spec__item {
    padding: 0;
    background: none;
    border-top: none;
    color: #7f7f7f;
    font-size: 10px;
    font-weight: normal;
    line-height: 1.3;
  }

  .p-products-all-item.is-view-grid .p-products-all-item-product__spec__text {
    padding: 0;
    font-size: 11px;
    line-height: 1.3;
  }

  /* 行をブロック化したため、7行目以降の折りたたみを指定し直す */
  .p-products-all-item.is-view-grid .p-products-all-item-product__spec__body.over-7-specs tr:nth-of-type(n+7) {
    display: none;
  }

  .p-products-all-item.is-view-grid .p-products-all-item-product__spec__body.over-7-specs.specs-shown tr:nth-of-type(n+7) {
    display: block;
  }

  .p-products-all-item.is-view-grid .p-product-item__label-wrapper .p-product-item__label {
    height: 20px;
    font-size: 10px;
    line-height: 20px;
  }

  .p-products-all-item.is-view-grid .p-products-all-item-product {
    row-gap: 8px;
  }

  .p-products-all-item.is-view-grid .p-products-all-item-product__name__text {
    -webkit-line-clamp: 2;
    font-size: 12px;
  }

  .p-products-all-item.is-view-grid .p-products-all-item-product__number {
    font-size: 18px;
  }

  .p-products-all-item.is-view-grid .p-products-all-item-product__shipment,
  .p-products-all-item.is-view-grid .p-products-all-item-product__shipment--red,
  .p-products-all-item.is-view-grid .p-products-all-item-product__shipment--days {
    font-size: 10px;
  }

  .p-products-all-item.is-view-grid .p-products-all-item-product__useditem__text {
    padding: 4px 6px;
    font-size: 10px;
  }

  .p-products-all-item.is-view-grid .p-products-all-item-product__useditem__status {
    font-size: 11px;
  }

  .p-products-all-item.is-view-grid .p-products-all-item-product__review a {
    font-size: 11px;
  }

  .p-products-all-item.is-view-grid .p-products-all-item-product__review a > img {
    width: 56px;
  }

  .p-products-all-item.is-view-grid .p-products-all-item-product__link,
  .p-products-all-item.is-view-grid .p-products-all-item-product__link--detail,
  .p-products-all-item.is-view-grid .p-products-all-item-product__link--cart {
    height: 36px;
    font-size: 12px;
  }

  .p-products-all-item.is-view-grid .p-products-all-item-product__link--cart {
    margin-top: 8px;
  }

  .p-products-all-item.is-view-grid .p-products-all-item-product__buttons img {
    width: 12px;
    margin-right: 6px;
  }
}

/* --------------------------------------------------------------------------
   グリッド表示：同じ行のカードで各段の高さを揃える
   カードが一覧グリッドの7トラックを占有し、行の高さを共有する（subgrid）。
   非対応ブラウザでは各カードが独立した高さになる。
   -------------------------------------------------------------------------- */
@supports (grid-template-rows: subgrid) {

  /*【TW 1.0】#45025（ECPF-3983）対応 検索結果をグリッド表示に切り替えできるようにする Start.*/
  /* align-contentを指定しないと、絞り込みナビの高さに合わせて伸びた分が
     各トラックへ分配され、件数が少ないときに縦へ間延びする */
  .p-products-all-item.is-view-grid .p-products-all-item__results .product-grid .productMoreGrid {
    align-content: start;
    align-items: stretch;
  }
  /*【TW 1.0】#45025（ECPF-3983）対応 検索結果をグリッド表示に切り替えできるようにする End.*/

  .p-products-all-item.is-view-grid .p-products-all-item__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    grid-row: span 7;
  }

  .p-products-all-item.is-view-grid .p-products-all-item-product {
    grid-template-rows: subgrid;
    grid-row: span 7;
    row-gap: normal;
  }
}