/* SP（989px 以下）の絞り込みを、右からの全画面ドロワーにする。
 *
 * PC は従来どおり左の常時展開サイドバー。ここのルールは基本的に
 * 989px 以下だけに当て、PC 側の見た目には触らない。
 *
 * 見た目はヘッダーのハンバーガーメニュー（左から出る全画面ドロワー）に合わせる:
 * 地色 #f5f5f5・白い角丸カード・丸い白の閉じるボタン。
 */

/* ── 一覧側: 対象商品数の隣に置く「絞り込み」ボタン ───────────────── */
.nb-filters-open {
  display: none; /* PC では出さない（左のサイドバーがあるため） */
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 0;
  border-radius: 4px;
  background: rgb(22, 135, 6);
  color: #fff;
  font: inherit;
  font-size: 1.4rem;
  line-height: 1.2;
  cursor: pointer;
}

.nb-filters-open .svg-wrapper {
  display: inline-flex;
  width: 17px;
  height: 17px;
}

.nb-filters-open .svg-wrapper svg {
  width: 17px;
  height: 17px;
}

.nb-filters-open__badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #fff;
  color: rgb(22, 135, 6);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* ── 一覧側: 効いている絞り込みのタグ ────────────────────────────── */
.nb-active-filters {
  display: none; /* PC はサイドバーのチェック状態で分かるので出さない */
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}

.nb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 10px;
  border: 1px solid #cfe6c9;
  border-radius: 999px;
  background: #eef6ec;
  color: #14670a;
  font-size: 1.2rem;
  text-decoration: none;
}

.nb-chip__x {
  font-size: 1.4rem;
  line-height: 1;
}

.nb-chip--clear {
  border-color: transparent;
  background: transparent;
  color: #767676;
  text-decoration: underline;
}

/* ── ドロワー本体 ──────────────────────────────────────────────── */
.nb-drawer__head,
.nb-drawer__foot,
.nb-drawer__scrim,
.custom-filter__summary {
  display: none; /* PC では使わない（カテゴリは常時展開で中身が見えている） */
}

@media screen and (max-width: 989px) {
  .nb-filters-open { display: inline-flex; }

  .nicobay-collection .product-count-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
  }

  .nb-active-filters { display: flex; }

  /* パネルは常に DOM に置いて画面外へ逃がす。開閉でグリッドの位置は動かない。 */
  .nicobay-collection__sidebar {
    width: 100%;
  }

  .nb-drawer__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, .35);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
  }

  .nicobay-collection__sidebar[data-nb-open="true"] .nb-drawer__scrim {
    opacity: 1;
    visibility: visible;
  }

  .nicobay-collection__sidebar > .custom-filters-sidebar {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 9999;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: #f5f5f5;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .3s ease, visibility .3s ease;
    display: flex;
    flex-direction: column;
  }

  .nicobay-collection__sidebar[data-nb-open="true"] > .custom-filters-sidebar {
    transform: translateX(0);
    visibility: visible;
  }

  /* PC 用の見出しはドロワーでは使わない（頭のバーに置き換える）。 */
  .custom-filters-sidebar__title { display: none; }

  .nb-drawer__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 10px 18px;
  }

  .nb-drawer__title {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 700;
    color: #1a1a1a;
  }

  .nb-drawer__close {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
    color: #000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .custom-facets-form {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* 各カテゴリは白い角丸カード。既定は畳んだ状態で開く
     （ブランドだけで 23 項目あり、全部開くと結局スクロールが要るため）。 */
  .custom-filter-section {
    background: #fff;
    border-radius: 8px;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }

  .custom-filter-section--switch {
    padding: 0;
    margin: 0;
    border-bottom: 0;
  }

  .custom-switch {
    padding: 14px 16px;
    gap: 10px;
  }

  .custom-switch__text { font-size: 1.5rem; font-weight: 700; }

  .custom-filter__title {
    gap: 10px;
    padding: 15px 16px;
    border-bottom: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
  }

  .custom-filter__title-text { flex: 0 0 auto; }

  .custom-filter__summary {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.3rem;
    font-weight: 400;
    color: #8a8a8a;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .custom-filter__summary[data-nb-on] {
    color: rgb(22, 135, 6);
    font-weight: 700;
  }

  .custom-filter__toggle-icon { margin: 0; transform: rotate(0deg); }
  .custom-filter__title[data-nb-open="true"] .custom-filter__toggle-icon { transform: rotate(180deg); }

  /* 開閉は data-nb-open で制御する。aria-hidden 側の指定は PC 用。 */
  .custom-filter__content,
  .custom-filter__content[aria-hidden="false"] { max-height: 0; }
  .custom-filter__content[data-nb-open="true"] { max-height: 1400px; }

  /* 選択肢はピル。行で積むより 1 画面に収まる数が増える。 */
  .custom-filter__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 14px;
  }

  .custom-filter__item { margin: 0; }

  .custom-filter__label {
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid #dcdcdc;
    border-radius: 999px;
  }

  .custom-filter__checkmark {
    position: static;
    transform: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid #c4c4c4;
    border-radius: 3px;
    background: #fff;
  }

  .custom-filter__checkbox:checked ~ .custom-filter__checkmark {
    background: rgb(22, 135, 6);
    border-color: rgb(22, 135, 6);
  }

  .custom-filter__checkmark:after {
    left: 4.5px;
    top: 1px;
    width: 4px;
    height: 8px;
    border-color: #fff;
    border-width: 0 2px 2px 0;
  }

  /* ピルの中では、未チェック時のホバー色（PC 用）は使わない。 */
  .custom-filter__label:hover .custom-filter__checkbox:not(:checked) ~ .custom-filter__checkmark { background-color: #fff; }

  .custom-filter__text { margin: 0; font-size: 1.3rem; }
  .custom-filter__checkbox:checked ~ .custom-filter__text { color: rgb(22, 135, 6); font-weight: 700; }

  /* 下端の操作バー。チェックのたびに遷移せず、ここで 1 回だけ確定する。 */
  .nb-drawer__foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid #e6e6e6;
  }

  .nb-drawer__clear {
    flex: 0 0 auto;
    padding: 8px 4px;
    border: 0;
    background: none;
    color: #767676;
    font: inherit;
    font-size: 1.4rem;
    text-decoration: underline;
    cursor: pointer;
  }

  .nb-drawer__apply {
    flex: 1 1 auto;
    padding: 14px;
    border: 0;
    border-radius: 6px;
    background: rgb(22, 135, 6);
    color: #fff;
    font: inherit;
    font-size: 1.5rem;
    font-weight: 700;
    cursor: pointer;
  }

  .nb-drawer__apply[disabled] { background: #cfcfcf; cursor: default; }

  /* ドロワーを開いている間は背面をスクロールさせない。 */
  html.nb-filters-open-lock,
  html.nb-filters-open-lock body { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .nb-drawer__scrim,
  .nicobay-collection__sidebar > .custom-filters-sidebar { transition: none; }
}