/* =============================================================
   NAFCO RENEWAL 2026 — 商品一覧専用スタイル（list.css）
   対象: /products/list.php（リスト表示）・/user_data/grid.php（グリッド表示）
   ※ 商品一覧はコーディングデータの提供がないため、TOPのデザイントークン
     （common.css の :root）と design.md（先方提示）を基準に新規作成。
   内容: 一覧2カラムレイアウト・ツールバー・商品カード（nf-lcard）・
         ページネーション・周辺ブロック（side-category等 旧マークアップ）の調整
   読み込み: common.css の後・上記2ページのみ（site_frame.tpl の isRenewal 分岐）
   ※ 本ファイルは一覧2ページでしか読み込まれないため、#container 等の
     ID指定の上書きをページスコープなしで書いてよい。
   ============================================================= */

/* -------------------------------------------------------------
   レイアウト（2カラム）
   site_main.tpl の構造: #container > #topcolumn / #leftcolumn /
   #main_column / #bottomcolumn。旧CSS（import.css）の float・固定幅と
   common.css の #container 全幅化（TOP用）をここで上書きする。
------------------------------------------------------------- */
body.nf-renewal #container {
    max-width: var(--w-container);
    margin: 0 auto;
    padding: 0 var(--sp4);
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 0 var(--gutter);
    font-family: var(--font-base);
}
/* セレクタは「body.nf-renewal #container ○○」形式で書くこと:
   旧CSS（style_new.css 等）に `#container #main_column.colnum2 { max-width: calc(100% - 230px) }`
   のような ID2つの高詳細度指定があり、`body.nf-renewal #main_column` では負ける */
body.nf-renewal #container #topcolumn {
    grid-column: 1 / -1;
    width: auto;
    float: none;
    margin: 0;
    padding: var(--sp3) 0 0;
}
body.nf-renewal #container #leftcolumn {
    grid-column: 1;
    width: auto;
    max-width: none;
    float: none;
    margin: 0;
    padding: var(--sp4) 0;
}
body.nf-renewal #container #main_column,
body.nf-renewal #container #main_column.colnum2 {
    grid-column: 2;
    width: auto;
    max-width: none; /* style_new.css の calc(100% - 230px) を打ち消して右いっぱいに */
    float: none;
    margin: 0;
    padding: var(--sp4) 0;
}
body.nf-renewal #container #bottomcolumn {
    grid-column: 1 / -1;
    width: auto;
    float: none;
    margin: 0;
    padding: var(--sp6) 0;
}
body.nf-renewal #container #undercolumn {
    width: auto;
    max-width: none;
    float: none;
    margin: 0;
    padding: 0;
}

/* -------------------------------------------------------------
   パンくずリスト（nf-breadcrumb）
   renewal2026_22_breadcrumb.tpl（TopNavi 配置）
------------------------------------------------------------- */
.nf-breadcrumb {
  font-family: var(--font-base);
  font-size: 12px;
  padding: var(--sp2) 0;
}
.nf-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.nf-breadcrumb__item {
  color: var(--color-text-secondary);
}
.nf-breadcrumb__item:not(:last-child)::after {
  content: '›';
  margin: 0 var(--sp2);
  color: var(--color-border-strong);
}
.nf-breadcrumb__item a {
  color: var(--color-text-secondary);
  text-decoration: none;
}
.nf-breadcrumb__item a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}
.nf-breadcrumb__item--current {
  color: var(--color-text-primary);
  font-weight: var(--fw-heading);
}
@media (max-width: 767px) {
  .nf-breadcrumb {
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nf-breadcrumb__list { flex-wrap: nowrap; }
}

/* -------------------------------------------------------------
   商品一覧ヘッダー（nf-cathead / nf-childcat / nf-tokushelf）
   renewal2026_26_product_head.tpl（旧 product-head の nf- 化。TopNavi 配置）
------------------------------------------------------------- */
.nf-cathead {
  font-family: var(--font-base);
  margin: var(--sp3) 0 var(--sp5);
}
.nf-cathead__title {
  display: flex;
  align-items: center;
  gap: var(--sp3);
}
.nf-cathead__icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}
.nf-cathead__name {
  font-size: 22px;
  font-weight: var(--fw-heading);
  color: var(--color-text-primary);
  line-height: 1.4;
}
.nf-cathead__comment {
  margin-top: var(--sp3);
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

/* 子カテゴリ絞り込み */
.nf-childcat {
  margin-top: var(--sp5);
}
.nf-childcat__title {
  font-size: 15px;
  font-weight: var(--fw-heading);
  color: var(--color-text-primary);
  padding-bottom: var(--sp2);
  margin-bottom: var(--sp3);
  border-bottom: 2px solid var(--color-accent);
}
.nf-childcat__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp2) var(--sp4);
}
.nf-childcat__item a {
  display: flex;
  align-items: center;
  gap: var(--sp2);
  padding: var(--sp2);
  border: var(--bd);
  border-radius: var(--r-s);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: 13px;
  transition: border-color .15s, color .15s;
}
.nf-childcat__item a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.nf-childcat__thumb {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}
.nf-childcat__name {
  line-height: 1.4;
}
.nf-childcat__more {
  display: none; /* PCは全件表示のため非表示。SPのみ表示 */
  width: 100%;
  margin-top: var(--sp3);
  padding: var(--sp2);
  background: none;
  border: none;
  color: var(--color-accent);
  font-family: var(--font-base);
  font-size: 13px;
  font-weight: var(--fw-heading);
  text-align: right;
  cursor: pointer;
}

/* 注目の特集（nf-shelf の横スクロール構造を流用） */
.nf-tokushelf {
  margin-top: var(--sp6);
}
.nf-tokushelf__title {
  font-size: 18px;
  font-weight: var(--fw-heading);
  color: var(--color-text-primary);
  margin-bottom: var(--sp3);
}
.nf-tokushelf .nf-shelf__list {
  display: flex;
  gap: var(--sp3);
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.nf-tokushelf .nf-shelf__list::-webkit-scrollbar { display: none; }
.nf-tokushelf__item {
  flex-shrink: 0;
  width: 260px;
  text-decoration: none;
  color: var(--color-text-primary);
}
.nf-tokushelf__img {
  width: 100%;
  height: auto;
  border-radius: var(--r-m);
  border: var(--bd);
}
.nf-tokushelf__desc {
  display: block;
  margin-top: var(--sp1);
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-secondary);
}
@media (max-width: 767px) {
  .nf-cathead__name { font-size: 18px; }
  .nf-childcat__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* SP: 4件目以降は隠し、「その他の分類を見る」で展開 */
  .nf-childcat__more { display: block; }
  .nf-childcat__item--extra { display: none; }
  .nf-childcat--expanded .nf-childcat__item--extra { display: block; }
  .nf-tokushelf__item { width: 70%; }
}

/* -------------------------------------------------------------
   他のカテゴリー（nf-othercat）
   renewal2026_29_other_category.tpl（旧 other_category の nf- 化。BottomNavi 配置）
------------------------------------------------------------- */
.nf-othercat {
  font-family: var(--font-base);
  margin: var(--sp5) 0;
  background: var(--color-bg-secondary);
  border-radius: var(--r-m);
  padding: var(--sp4);
}
.nf-othercat__title {
  font-size: 13px;
  font-weight: var(--fw-heading);
  color: var(--color-text-primary);
  margin-bottom: var(--sp3);
}
.nf-othercat__title span { color: var(--color-accent); }
.nf-othercat__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp2);
}
.nf-othercat__item a {
  display: flex;
  align-items: center;
  gap: var(--sp2);
  padding: var(--sp2);
  background: var(--color-bg-primary);
  border-radius: var(--r-s);
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: 12px;
  transition: color .15s;
}
.nf-othercat__item a:hover { color: var(--color-accent); }
.nf-othercat__item--back a {
  justify-content: center;
  color: var(--color-text-secondary);
}
.nf-othercat__thumb {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}
.nf-othercat__name { line-height: 1.4; }
@media (max-width: 767px) {
  .nf-othercat__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------
   検索キーワード表示バナー（nf-kwbanner）
   renewal2026_30_keyword_banner.tpl（旧 keyword_banner_image の nf- 化。TopNavi 配置）
------------------------------------------------------------- */
.nf-kwbanner {
  margin: var(--sp4) 0;
}
.nf-kwbanner__item {
  text-align: center;
  margin: var(--sp4) 0;
}
.nf-kwbanner__item img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-m);
  display: inline-block;
}
.nf-kwbanner__desc {
  display: block;
  margin-top: var(--sp1);
  font-size: 12px;
  color: var(--color-text-secondary);
}

/* -------------------------------------------------------------
   ハウスクリーニング販促（旧 house_cleaning ブロック #contentWrap）
   自前CSS（user_data/nafco_reform/css/style.css）で完結する特定カテゴリ
   （21080101〜06）専用の販促のため当面旧のまま使用し、
   common.css のリセットからだけ保護する（legacy.css と同じ詳細度0ガード）
------------------------------------------------------------- */
:where(body.nf-renewal #contentWrap) *,
:where(body.nf-renewal #contentWrap) *::before,
:where(body.nf-renewal #contentWrap) *::after {
  box-sizing: content-box;
}
:where(body.nf-renewal #contentWrap) img {
  display: inline-block;
  max-width: none;
}
:where(body.nf-renewal #contentWrap) a {
  color: revert;
  text-decoration: revert;
}

/* -------------------------------------------------------------
   MainHead 作り込み特集（set_products=#ProductSetBlock /
   itemList_outdoor=#itemList_contentWrap）
   自前CSSで完結する特集（特定商品/カテゴリでのみ表示）のため当面旧のまま。
   幅計算がずれる box-sizing だけ content-box に戻す（画像レイアウトのため
   img/a は作り込み側の指定に任せて触らない）。
------------------------------------------------------------- */
:where(body.nf-renewal #ProductSetBlock) *,
:where(body.nf-renewal #ProductSetBlock) *::before,
:where(body.nf-renewal #ProductSetBlock) *::after,
:where(body.nf-renewal #itemList_contentWrap) *,
:where(body.nf-renewal #itemList_contentWrap) *::before,
:where(body.nf-renewal #itemList_contentWrap) *::after {
  box-sizing: content-box;
}

/* -------------------------------------------------------------
   PRO用お知らせ（nf-pronews）
   renewal2026_24_news_pro.tpl（旧 news-nafcoPRO の nf- 化。TopNavi 配置）。
   臨時のお知らせのため、テーマ色ではなく注意喚起のオレンジ固定。
------------------------------------------------------------- */
.nf-pronews {
  --nf-pronews-color: #e8623a;
  font-family: var(--font-base);
  margin: var(--sp3) 0;
}
.nf-pronews__link {
  display: flex;
  align-items: center;
  gap: var(--sp4);
  border: 1px solid var(--nf-pronews-color);
  border-radius: var(--r-m);
  background: var(--color-bg-primary);
  padding: var(--sp3) var(--sp4);
  color: var(--nf-pronews-color);
  font-size: 14px;
  text-decoration: none;
  transition: background .15s;
}
.nf-pronews__link:hover {
  background: #fdf1ec;
  color: var(--nf-pronews-color);
}
.nf-pronews__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--fw-heading);
  white-space: nowrap;
  flex-shrink: 0;
}
.nf-pronews__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--nf-pronews-color);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  flex-shrink: 0;
}
.nf-pronews__date {
  white-space: nowrap;
  flex-shrink: 0;
}
.nf-pronews__title {
  font-weight: var(--fw-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nf-pronews__arrow {
  margin-left: auto;
  font-size: 10px;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .nf-pronews__link {
    flex-wrap: wrap;
    gap: var(--sp1) var(--sp3);
  }
  .nf-pronews__title { white-space: normal; }
}

/* -------------------------------------------------------------
   ツールバー（並び順・表示件数・表示方法）
------------------------------------------------------------- */
.nf-ltoolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp2) var(--sp5);
    padding: var(--sp3) var(--sp4);
    background: var(--color-bg-secondary);
    border-radius: var(--r-m);
    font-size: 13px;
    color: var(--color-text-primary);
}
.nf-ltoolbar__label {
    color: var(--color-text-secondary);
    font-size: 12px;
    margin-right: var(--sp1);
}
.nf-ltoolbar__sort--pc {
    display: flex;
    align-items: center;
    gap: var(--sp3);
}
.nf-ltoolbar__sort--sp {
    display: none;
}
.nf-ltoolbar__sortlink {
    color: var(--color-text-secondary);
    text-decoration: none;
    padding: 2px 0;
    border-bottom: 2px solid transparent;
    transition: color 0.15s;
}
.nf-ltoolbar__sortlink:hover {
    color: var(--color-accent);
}
.nf-ltoolbar__sortlink--active {
    color: var(--color-text-primary);
    font-weight: var(--fw-heading);
    border-bottom-color: var(--color-accent);
}
.nf-ltoolbar__num {
    display: flex;
    align-items: center;
    margin-left: auto;
}
.nf-ltoolbar__select {
    font-family: var(--font-base);
    font-size: 13px;
    padding: 4px 8px;
    border: var(--bd-strong);
    border-radius: var(--r-s);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
}
.nf-ltoolbar__disp {
    display: flex;
    align-items: center;
    gap: var(--sp1);
}
.nf-ltoolbar__dispbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--r-s);
    opacity: 0.45;
    transition: opacity 0.15s;
}
.nf-ltoolbar__dispbtn img {
    width: 24px;
    height: 24px;
}
a.nf-ltoolbar__dispbtn:hover {
    opacity: 0.8;
}
.nf-ltoolbar__dispbtn--active {
    opacity: 1;
    background: var(--color-bg-primary);
    border: var(--bd);
}

/* -------------------------------------------------------------
   件数表示
------------------------------------------------------------- */
.nf-plist__count {
    margin: var(--sp4) 0 var(--sp3);
    font-size: 13px;
    color: var(--color-text-secondary);
}
.nf-plist__count-num {
    font-size: 16px;
    font-weight: var(--fw-heading);
    color: var(--color-text-primary);
    margin-right: 2px;
}

/* -------------------------------------------------------------
   商品カード（nf-lcard）共通
   一覧用のリッチカード（棚用 nf-card より情報量が多い）。
   カード全面リンクは .nf-lcard__overlay（旧 a.list_box 相当）。
   お気に入り・レビュー等の操作要素は z-index で上に載せる。
------------------------------------------------------------- */
.nf-lcard {
    position: relative;
    border: var(--bd);
    border-radius: var(--r-xs);
    background: var(--color-bg-primary);
    padding: var(--sp3);
    font-family: var(--font-base);
    transition: box-shadow 0.15s;
}
.nf-lcard:hover {
    box-shadow: var(--shadow);
}
.nf-lcard__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--r-xs);
}
.nf-lcard__thumb {
    border-radius: var(--r-xs);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}
.nf-lcard__thumb > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    aspect-ratio: 1;
}
/* キャンペーン画像はサムネ全面オーバーレイ（詳細 detail.css の .campaign_images と同方式）。
   pointer-events:none でカード全面リンク（.nf-lcard__overlay）等のクリックを妨げない */
.nf-lcard__campaign {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
}
.nf-lcard__campaign img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.nf-lcard__name {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-primary);
    font-weight: var(--fw-heading);
    /* 品名は3行固定（クライアントFB 2026-07-23）:
       4行以上は3行で省略、3行未満は空きを確保して売価の高さを揃える */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    min-height: 4.5em; /* line-height 1.5 × 3行 */
}
.nf-lcard__price {
    color: var(--color-price);
}
.nf-lcard__price .nf-price__old {
    display: inline-block;
    margin-right: var(--sp2);
}
.nf-lcard__pricegrid {
    display: flex;
    gap: var(--sp5);
    flex-wrap: wrap;
}
.nf-lcard__pricelabel {
    display: block;
    font-size: 11px;
    color: var(--color-text-secondary);
    margin-bottom: 2px;
}
.nf-lcard__point {
    font-size: 12px;
    color: var(--color-text-secondary);
}
.nf-lcard__point .netpoint {
    color: var(--color-accent-dark);
    font-size: 13px;
}
.nf-lcard__bulk {
    font-size: 12px;
    color: var(--color-text-secondary);
}
.nf-lcard__cost {
    font-size: 12px;
    color: var(--color-text-secondary);
}
.nf-lcard__stock {
    font-size: 12px;
    color: var(--color-text-secondary);
}
.nf-lcard__soldout {
    font-size: 13px;
    font-weight: var(--fw-heading);
    color: #c00;
}
.nf-lcard__comment {
    font-size: 12px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nf-lcard .zv-summary {
    position: relative;
    z-index: 2;
    font-size: 12px;
}
.nf-lcard__status {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp1);
    margin-top: var(--sp2);
}
.nf-lcard__status img {
    height: 20px;
    width: auto;
}
/* お気に入りボタン（ハート）。ajax 用クラス favorite_btn-add / -del は変更しないこと */
.nf-lcard__fav {
    position: absolute;
    top: var(--sp2);
    right: var(--sp2);
    z-index: 2;
}
.nf-lcard__fav .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: var(--bd);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    transition: color 0.15s;
}
.nf-lcard__fav .btn::before {
    content: "♥";
}
.nf-lcard__fav .favorite_btn-add {
    color: var(--color-border-strong);
}
.nf-lcard__fav .favorite_btn-add:hover {
    color: #e05a7a;
}
.nf-lcard__fav .favorite_btn-del {
    color: #e0245e;
}
/* まとめ買い関連商品（リスト表示のみ） */
.nf-lcard__related {
    position: relative;
    z-index: 2;
    margin-top: var(--sp3);
    border-top: var(--bd);
    padding-top: var(--sp3);
}
.nf-lcard__related-title {
    font-size: 12px;
    font-weight: var(--fw-heading);
    color: var(--color-text-secondary);
    margin-bottom: var(--sp2);
}
.nf-lcard__related-list {
    display: flex;
    gap: var(--sp3);
    flex-wrap: wrap;
}
.nf-lcard__related-list a {
    display: flex;
    align-items: center;
    gap: var(--sp2);
    font-size: 12px;
    color: var(--color-text-primary);
    text-decoration: none;
}
.nf-lcard__related-list a:hover {
    color: var(--color-accent);
}
.nf-lcard__related-list img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    background: var(--color-bg-secondary);
    border-radius: var(--r-xs);
}
.nf-lcard__related-price {
    font-weight: var(--fw-price);
}

/* -------------------------------------------------------------
   リスト表示（横型カード・1列）
------------------------------------------------------------- */
.nf-plist--list .nf-plist__items {
    display: flex;
    flex-direction: column;
    gap: var(--sp3);
}
.nf-plist--list .nf-lcard {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: var(--sp4);
}
.nf-plist--list .nf-lcard__thumb {
    width: 200px;
}
.nf-plist--list .nf-lcard__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp2);
}
.nf-plist--list .nf-lcard__status {
    grid-column: 1 / -1;
}
.nf-plist--list .nf-lcard__comment {
    -webkit-line-clamp: 3;
}

/* -------------------------------------------------------------
   グリッド表示（タイル型カード）
------------------------------------------------------------- */
/* PCは旧デザイン（product_grid.css）と同じ1行4商品。
   auto-fill だと画面幅次第で3列に落ちるため固定列にする */
.nf-plist--grid .nf-plist__items {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp3);
}
.nf-plist--grid .nf-lcard {
    display: flex;
    flex-direction: column;
    gap: var(--sp2);
}
.nf-plist--grid .nf-lcard__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp1);
    flex: 1;
}
.nf-plist--grid .nf-lcard__comment {
    -webkit-line-clamp: 2;
}
.nf-plist--grid .nf-lcard__pricegrid {
    gap: var(--sp2);
}

/* -------------------------------------------------------------
   ページネーション（$tpl_strnavi の出力を調整）
------------------------------------------------------------- */
.nf-plist__navi {
    margin: var(--sp6) 0;
    text-align: center;
    font-size: 14px;
}
.nf-plist__navi a,
.nf-plist__navi strong,
.nf-plist__navi span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 var(--sp2);
    margin: 0 2px;
    border: var(--bd);
    border-radius: var(--r-s);
    color: var(--color-text-primary);
    text-decoration: none;
    background: var(--color-bg-primary);
}
.nf-plist__navi a:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.nf-plist__navi strong {
    background: var(--color-accent);
    border-color: var(--color-accent);
    /* カレントページの文字は白（クライアントFB 2026-07-23）。
       SC_PageNavi.php が <strong style='color:red'> を出力するため !important が必須 */
    color: #fff !important;
}

/* -------------------------------------------------------------
   絞り込みパネル（nf-sfilter）
   renewal2026_21_side_filter.tpl + list.js（絞り込み初期化）。
   絞り込み候補は本文の非表示データから移送されるため、
   .price_list / .side_category / .side_spec_masters（移送内容側のクラス）も
   ここでスタイルする。
------------------------------------------------------------- */
.nf-sfilter {
    font-family: var(--font-base);
    font-size: 13px;
}
/* SP用開閉ボタン（PCでは非表示） */
.nf-sfilter__toggle {
    display: none;
}
.nf-sfilter__panel {
    border: var(--bd);
    border-radius: var(--r-m);
    background: var(--color-bg-primary);
    padding: var(--sp4);
}
.nf-sfilter__group {
    border-bottom: var(--bd);
    padding-bottom: var(--sp3);
    margin-bottom: var(--sp3);
}
.nf-sfilter__group:last-of-type {
    border-bottom: none;
    margin-bottom: var(--sp2);
}
.nf-sfilter__title,
.nf-sfilter__group dt h3 {
    font-size: 13px;
    font-weight: var(--fw-heading);
    color: var(--color-text-primary);
    margin-bottom: var(--sp2);
    line-height: 1.5;
}
.nf-sfilter__input {
    width: 100%;
    font-family: var(--font-base);
    font-size: 13px;
    padding: 6px 10px;
    border: var(--bd-strong);
    border-radius: var(--r-s);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
}
.nf-sfilter__input:focus {
    outline: none;
    border-color: var(--color-accent);
}
/* カテゴリ・価格帯のリンクリスト（移送されてくる ul/li/.price_list を含む） */
.nf-sfilter__cats a,
.nf-sfilter__prices .price_list a {
    display: block;
    padding: 4px 0 4px var(--sp3);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 12px;
    line-height: 1.6;
    position: relative;
}
.nf-sfilter__cats a::before,
.nf-sfilter__prices .price_list a::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-top: 1px solid var(--color-accent);
    border-right: 1px solid var(--color-accent);
    transform: translateY(-50%) rotate(45deg);
}
.nf-sfilter__cats a:hover,
.nf-sfilter__prices .price_list a:hover {
    color: var(--color-accent);
}
.nf-sfilter__cats li.current > a {
    color: var(--color-text-primary);
    font-weight: var(--fw-heading);
}
.nf-sfilter__cats ul ul {
    padding-left: var(--sp3);
}
/* スペック絞り込み（html_checkboxes の label+checkbox が移送されてくる） */
.side_spec_masters label {
    display: block;
    font-size: 12px;
    color: var(--color-text-secondary);
    padding: 3px 0;
    cursor: pointer;
}
.side_spec_masters label:hover {
    color: var(--color-accent);
}
.side_spec_masters input[type="checkbox"] {
    margin-right: 6px;
    accent-color: var(--color-accent);
}
/* 価格帯の直接入力 */
.nf-sfilter__pricerange {
    display: flex;
    align-items: center;
    gap: var(--sp1);
    margin-top: var(--sp2);
}
.nf-sfilter__input--price {
    width: 5.5em;
}
.nf-sfilter__pricesep {
    color: var(--color-text-secondary);
}
/* 絞り込み実行ボタン */
.nf-sfilter__submit {
    display: block;
    width: 100%;
    padding: 10px 0;
    margin-top: var(--sp2);
    background: var(--color-accent);
    color: #fff;
    font-family: var(--font-base);
    font-size: 13px;
    font-weight: var(--fw-heading);
    border: none;
    border-radius: var(--r-m);
    cursor: pointer;
    transition: background 0.15s;
}
.nf-sfilter__submit:hover {
    background: var(--color-accent-dark);
}
.nf-sfilter__back {
    display: inline-block;
    margin-top: var(--sp3);
    font-size: 12px;
    color: var(--color-text-secondary);
    text-decoration: none;
}
.nf-sfilter__back:hover {
    color: var(--color-accent);
}

/* -------------------------------------------------------------
   PROカテゴリトップ（renewal2026/products/pro.tpl / pro_grid.tpl）
   LP部（#proTool・インフォグラフィック・特集リンク）は旧CSS
   （product_list.css / protool/list.css / protool/style.css。tpl側で読込）で
   スタイルされる。1カラム化は pro_lp.tpl 内の style、配色は theme-pro.css。

   旧マークアップ保護: legacy.css と同じ「:where() 詳細度0ガード」を
   #proTool 限定で適用し、common.css のグローバルリセット
   （img{display:block} でカテゴリ一覧のアイコンが縦積みになる等）を
   後勝ちでのみ打ち消す。旧CSSの明示指定は常に優先される。
------------------------------------------------------------- */
:where(body.nf-renewal #proTool) *,
:where(body.nf-renewal #proTool) *::before,
:where(body.nf-renewal #proTool) *::after {
  box-sizing: content-box;
}
:where(body.nf-renewal #proTool) img {
  display: inline-block;
  max-width: none;
}
:where(body.nf-renewal #proTool) a {
  color: revert;
  text-decoration: revert;
}

/* -------------------------------------------------------------
   周辺ブロック（旧マークアップ）の調整
   side-category / パンくず / 下部の棚は既存ブロックをそのまま配置している
   （db/NFCEC-1243.sql 参照）。旧CSSも読み込まれたままのため、ここでは
   リニューアルの見た目に馴染ませる最小限の調整のみ行う。
   renewal2026 版ブロックへの置換は表示確認後に個別判断（要確認）。
------------------------------------------------------------- */
body.nf-renewal #leftcolumn {
    font-family: var(--font-base);
}
body.nf-renewal #leftcolumn img {
    max-width: 100%;
    height: auto;
}
body.nf-renewal #topcolumn {
    font-size: 13px;
}
body.nf-renewal #bottomcolumn img {
    max-width: 100%;
    height: auto;
}

/* -------------------------------------------------------------
   SP（〜767px）
------------------------------------------------------------- */
@media (max-width: 767px) {
    body.nf-renewal #container {
        grid-template-columns: minmax(0, 1fr);
        padding: 0 var(--sp4);
    }
    body.nf-renewal #container #topcolumn,
    body.nf-renewal #container #leftcolumn,
    body.nf-renewal #container #main_column,
    body.nf-renewal #container #main_column.colnum2,
    body.nf-renewal #container #bottomcolumn {
        grid-column: 1;
    }
    /* #nfSideFilter（絞り込みパネル）は list.js が .page-count の直後（メイン内）へ移動する */
    body.nf-renewal #container #leftcolumn {
        padding: 0;
    }

    /* 絞り込みパネル: SPは「絞り込み条件を追加」ボタンで開閉 */
    .nf-sfilter {
        margin: var(--sp2) 0 var(--sp3);
    }
    .nf-sfilter__toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--sp2);
        width: 100%;
        padding: 10px 0;
        background: var(--color-bg-primary);
        border: var(--bd-strong);
        border-radius: var(--r-m);
        font-family: var(--font-base);
        font-size: 13px;
        font-weight: var(--fw-heading);
        color: var(--color-text-primary);
        cursor: pointer;
    }
    .nf-sfilter__toggle::after {
        content: "";
        width: 7px;
        height: 7px;
        border-right: 2px solid var(--color-accent);
        border-bottom: 2px solid var(--color-accent);
        transform: rotate(45deg) translateY(-2px);
        transition: transform 0.15s;
    }
    .nf-sfilter__toggle--open::after {
        transform: rotate(225deg) translateY(-2px);
    }
    .nf-sfilter__panel {
        display: none;
        margin-top: var(--sp2);
    }
    .nf-sfilter__panel--open {
        display: block;
    }

    .nf-ltoolbar {
        gap: var(--sp2) var(--sp3);
        padding: var(--sp2) var(--sp3);
    }
    .nf-ltoolbar__sort--pc {
        display: none;
    }
    .nf-ltoolbar__sort--sp {
        display: block;
    }
    .nf-ltoolbar__label {
        display: none;
    }
    .nf-ltoolbar__num {
        margin-left: 0;
    }
    .nf-ltoolbar__disp {
        margin-left: auto;
    }

    .nf-plist--list .nf-lcard {
        grid-template-columns: 120px minmax(0, 1fr);
        gap: var(--sp3);
        padding: var(--sp2);
    }
    .nf-plist--list .nf-lcard__thumb {
        width: 120px;
    }
    .nf-plist--list .nf-lcard__comment {
        -webkit-line-clamp: 2;
    }

    .nf-plist--grid .nf-plist__items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sp2);
    }
    .nf-plist--grid .nf-lcard {
        padding: var(--sp2);
    }

    .nf-lcard__name {
        font-size: 13px;
    }
    .nf-lcard__pricegrid {
        gap: var(--sp2);
    }
}

/* -------------------------------------------------------------
   カードの「カートに入れる」ボタン（NFCEC-1229）
   overlay(z-index:1) の上でクリックさせるため position/z-index を付与。
   規格あり=<a>（詳細へ）／規格なし=<button.js-cart-ajax>（Ajax追加）で見た目共通。
------------------------------------------------------------- */
.nf-lcard__cart-btn {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    background: var(--color-ui-dark);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
}
.nf-lcard__cart-btn:hover { background: #444; }
.nf-lcard__cart-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
/* <a> 版が旧 #container a の色に負けないよう明示（詳細の cart-btn と同じ対策） */
a.nf-lcard__cart-btn,
a.nf-lcard__cart-btn:link,
a.nf-lcard__cart-btn:visited,
a.nf-lcard__cart-btn:hover { color: #fff; }

/* グリッド: カード最下部に全幅 */
.nf-plist--grid .nf-lcard__cart-btn { display: flex; width: 100%; margin-top: auto; }
/* リスト: 最下段の全幅行に置き、右寄せ */
.nf-plist--list .nf-lcard__cart-btn { grid-column: 1 / -1; justify-self: end; margin-top: var(--sp2); }

@media (max-width: 767px) {
    .nf-lcard__cart-btn { height: 40px; font-size: 13px; }
    .nf-plist--list .nf-lcard__cart-btn { justify-self: stretch; }
}

/* -------------------------------------------------------------
   切り替え中ローディングオーバーレイ（list.js の nfListLoading が挿入）
   並び順・表示件数・表示方法・ページ送り・絞り込みの全画面リロード中に表示。
   z-index はニュースモーダル（common.css: 1000）より上
------------------------------------------------------------- */
.nf-loading {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
    cursor: wait;
    z-index: 1100;
}
.nf-loading__spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(0, 0, 0, 0.15);
    border-top-color: var(--color-ui-dark);
    border-radius: 50%;
    animation: nfLoadingSpin 0.8s linear infinite;
}
@keyframes nfLoadingSpin {
    to { transform: rotate(360deg); }
}