@charset "UTF-8";
/* ==========================================================================
   category.css — カテゴリー一覧ページ（汎用分類テンプレート）
   読み込み順：normalize.css → bootstrap.min.css → common.css → category.css
   ・common.css の共通コンポーネント（.product-card / .btn / .pager / .crumbs など）は再定義しない。
   ・ここではこのページ固有のレイアウトとパーツのみを追加する。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. カテゴリー紹介（管理画面のHTMLエディタ出力領域）
   -------------------------------------------------------------------------- */
.cat-intro{padding-block:18px 2px}
.cat-intro__box{
  padding:20px clamp(16px,2.6vw,28px) 22px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg,var(--blue) 0%,var(--white) 68%);
}
.cat-intro__title{
  font-size:clamp(21px,2.4vw,27px);
  font-weight:700;
  letter-spacing:.01em;
  color:var(--navy);
}
.cat-intro__title + .editor-content{margin-top:12px}

/* エディタ出力（.editor-content）の共通スタイルは common.css の「5b」に移動 */

/* エディタ出力タイプ2：バナー（複数枚は左右に切り替え） */
.cat-banner{margin-top:var(--gap)}
.cat-banner .slider{
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--bg);
}
/* Slick初期化前は1枚目だけ表示してレイアウト崩れを防ぐ */
.cat-banner .slider:not(.slick-initialized) > div:not(:first-child){display:none}
.cat-banner .slick-slide > a{display:block}
.cat-banner .slick-slide img{
  display:block;
  width:100%;
  aspect-ratio:1200/300;
  object-fit:cover;
  transition:transform .35s var(--ease);
}

/* エディタ出力タイプ3：宣伝画像（1行4枚 × 2行） */
.cat-promos{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--gap);
  margin-top:var(--gap);
}
.cat-promos__item{
  display:block;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--white);
  transition:border-color .16s var(--ease);
}
.cat-promos__item:hover{border-color:var(--line-strong)}
.cat-promos__media{display:block;overflow:hidden}
.cat-promos__media img{
  display:block;
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
}
.cat-promos__label{display:block;padding:9px 11px;font-size:12px;font-weight:600;color:var(--navy)}

.cat-children{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--gap);
  margin-top:var(--gap);
}
.cat-children__item{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--white);
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.cat-children__item:hover{border-color:var(--brand);box-shadow:var(--shadow-sm)}
.cat-children__media{display:block;overflow:hidden;background:var(--bg)}
.cat-children__media img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.cat-children__body{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px}
.cat-children__name{font-size:12.5px;font-weight:700;color:var(--navy)}
.cat-children__count{font-size:10.5px;color:var(--muted);white-space:nowrap}

/* --------------------------------------------------------------------------
   2. 一覧レイアウト
   -------------------------------------------------------------------------- */
.cat-main{padding-block:22px 36px}
.cat-main .product-card{height:100%} /* 4列グリッドでカード高さと価格位置を揃える */

/* 絞り込みパネルと商品グリッドの間隔（lg 以上で広めに取る） */
@media (min-width:992px){
  .cat-layout{--bs-gutter-x:32px}
}

/* ツールバー・絞り込み条件と商品グリッドの間隔
   row の負マージンを打ち消し、カード行の行間（--gap=14px）と同じ間隔に揃える */
.cat-main #productGrid{margin-top:0}

.filter-panel{--bs-offcanvas-width:min(86vw,320px)}

@media (min-width:992px){
  /* 吸着ヘッダーの実高さは category.js が --cat-sticky-top に書き込む */
  .filter-panel{position:sticky;top:var(--cat-sticky-top,124px)}
  /* Bootstrap の offcanvas-lg は lg 以上で .offcanvas-body を flex にするため、通常のブロックに戻す */
  .filter-panel .filter-panel__body{display:block;padding:0}
  .filter-form{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:var(--white);
  }
}

/* --------------------------------------------------------------------------
   3. 絞り込みパネル
   -------------------------------------------------------------------------- */
.filter-panel__head{padding:14px 16px;border-bottom:1px solid var(--line)}
.filter-panel__title{font-size:13px;font-weight:700;color:var(--navy)}

.filter-form__heading{
  display:none;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  font-size:13px;
  font-weight:700;
  color:var(--navy);
}
@media (min-width:992px){
  .filter-form__heading{display:block}
}

.filter-group{padding:15px 16px;border-bottom:1px solid var(--line)}
.filter-group:last-of-type{border-bottom:0}
.filter-group__title{margin-bottom:10px;font-size:12.5px;font-weight:700;color:var(--navy)}

/* チェックボックス（ニコチン濃度・吸入口数など、複数選択の絞り込み）
   Bootstrap の .form-check を土台に、色とサイズだけサイトに合わせる */
.filter-checks{display:flex;flex-direction:column;gap:2px}
.filter-checks .form-check{
  margin:0;
  padding:7px 8px 7px 2.1em;
  border-radius:var(--radius-sm);
  font-size:12.5px;
  color:var(--ink);
  transition:background .16s var(--ease);
}
.filter-checks .form-check:hover{background:var(--blue)}
.filter-checks .form-check-input{
  width:16px;
  height:16px;
  margin-top:.26em;
  margin-left:-2.1em;
  border-color:var(--line-strong);
}
.filter-checks .form-check-input:checked{
  background-color:var(--cta);
  border-color:var(--cta);
}
.filter-checks .form-check-input:focus{
  border-color:var(--cta);
  box-shadow:0 0 0 3px rgba(30,123,239,.22);
}
.filter-checks .form-check-label{line-height:1.5;cursor:pointer}
.filter-checks .form-check-input:checked ~ .form-check-label{font-weight:700;color:var(--navy)}

/* 価格帯 */
.price-range{display:flex;align-items:center;gap:6px}
.price-range__box{
  display:flex;
  align-items:center;
  flex:1 1 0;
  min-width:0;
  padding:0 8px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  background:var(--white);
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.price-range__box:focus-within{border-color:var(--cta);box-shadow:0 0 0 3px rgba(30,123,239,.14)}
.price-range__yen{font-size:11.5px;color:var(--muted)}
.price-range__input{
  width:100%;
  min-width:0;
  height:36px;
  border:0;
  background:transparent;
  color:var(--ink);
  font-size:12.5px;
}
.price-range__input:focus{outline:none}
.price-range__input::placeholder{font-size:11px;color:#a9b8c8}
.price-range__sep{flex:0 0 auto;font-size:11.5px;color:var(--muted)}

.filter-form__submit{
  width:100%;
  margin-top:14px;
  padding:10px;
  font-size:12.5px;
}

.filter-form__reset{
  display:block;
  padding:12px 16px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:11.5px;
  text-align:center;
  text-decoration:underline;
}
.filter-form__reset:hover{color:var(--cta)}

.filter-select{
  padding-block:8px;
  border-color:var(--line-strong);
  border-radius:var(--radius-sm);
  color:var(--ink);
  font-size:12.5px;
}
.filter-select:focus{border-color:var(--cta);box-shadow:0 0 0 3px rgba(30,123,239,.14)}

/* --------------------------------------------------------------------------
   4. ツールバー（件数・表示件数・並び替え）
   -------------------------------------------------------------------------- */
.toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 14px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--white);
}
.toolbar__lead{display:flex;align-items:center;gap:12px;min-width:0}
.filter-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  background:var(--white);
  color:var(--navy);
  font-size:12px;
  font-weight:600;
}
.filter-toggle .bi{font-size:15px}
.filter-toggle:hover{border-color:var(--cta);color:var(--cta)}

.toolbar__count{font-size:12.5px;color:var(--muted)}
.toolbar__count b{margin-inline:2px;font-size:16px;color:var(--navy)}
.toolbar__range{font-size:11px}
.toolbar__side{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-left:auto}
.toolbar__size{display:flex;align-items:center;gap:6px}
.toolbar__size-label{font-size:11.5px;color:var(--muted);white-space:nowrap}
.toolbar__size .form-select{width:auto;min-width:84px;padding-block:5px;font-size:12px}

.sort-tabs{display:flex;gap:4px;padding:3px;border-radius:999px;background:var(--bg)}
.sort-tabs__item{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:7px 14px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  transition:background .16s var(--ease),color .16s var(--ease),box-shadow .16s var(--ease);
}
.sort-tabs__item:hover{background:rgba(255,255,255,.75);color:var(--navy)}
.sort-tabs__item.is-active{background:var(--cta);color:#fff}
.sort-tabs__caret{
  width:0;
  height:0;
  border-right:4px solid transparent;
  border-bottom:5px solid currentColor;
  border-left:4px solid transparent;
  transition:transform .16s var(--ease);
}
.sort-tabs__item[data-dir="desc"] .sort-tabs__caret{transform:rotate(180deg)}

/* --------------------------------------------------------------------------
   5. 適用中の絞り込み条件
   -------------------------------------------------------------------------- */
.active-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.active-filters[hidden]{display:none}
.active-filters__label{font-size:11.5px;color:var(--muted)}
.active-filters__list{display:flex;flex-wrap:wrap;gap:6px}
.active-filters__chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  background:var(--blue);
  color:var(--navy);
  font-size:11.5px;
  transition:border-color .16s var(--ease);
}
.active-filters__chip:hover{border-color:var(--cta)}
.active-filters__x{position:relative;width:10px;height:10px;flex:0 0 auto}
.active-filters__x::before,
.active-filters__x::after{
  content:"";
  position:absolute;
  top:4px;
  left:0;
  width:10px;
  height:1.5px;
  background:currentColor;
}
.active-filters__x::before{transform:rotate(45deg)}
.active-filters__x::after{transform:rotate(-45deg)}
.active-filters__clear{
  margin-left:auto;
  border:0;
  background:none;
  color:var(--muted);
  font-size:11.5px;
  text-decoration:underline;
}
.active-filters__clear:hover{color:var(--cta)}

/* --------------------------------------------------------------------------
   6. カートドロワー（右サイドバーからスライドイン）
   -------------------------------------------------------------------------- */
.cart-drawer{--bs-offcanvas-width:min(92vw,400px)}
.cart-drawer__head{padding:16px 18px;border-bottom:1px solid var(--line)}
.cart-drawer__title{font-size:13.5px;font-weight:700;color:var(--navy)}
.cart-drawer__body{padding:0}
.cart-drawer__empty{padding:30px 18px;font-size:12.5px;color:var(--muted);text-align:center}
.cart-drawer__list{padding:0}
.cart-drawer__item{display:flex;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.cart-drawer__thumb{
  flex:0 0 auto;
  width:64px;
  height:64px;
  border-radius:var(--radius-sm);
  background:var(--bg);
  object-fit:cover;
}
.cart-drawer__info{flex:1 1 auto;min-width:0}
.cart-drawer__brand{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.cart-drawer__name{font-size:12.5px;font-weight:600;line-height:1.5;color:var(--ink)}
.cart-drawer__spec{margin-top:3px;font-size:11px;line-height:1.6;color:var(--muted)}
.cart-drawer__row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px}
.cart-drawer__qty{font-size:11.5px;color:var(--muted)}
.cart-drawer__price{font-size:13.5px;font-weight:700;color:var(--navy)}
.cart-drawer__remove{
  margin-top:7px;
  border:0;
  background:none;
  color:var(--muted);
  font-size:11px;
  text-decoration:underline;
}
.cart-drawer__remove:hover{color:var(--red)}
.cart-drawer__foot{padding:14px 18px 18px;border-top:1px solid var(--line);background:var(--white)}
.cart-drawer__total{display:flex;align-items:baseline;justify-content:space-between;font-size:12.5px;color:var(--muted)}
.cart-drawer__total b{font-size:17px;color:var(--navy)}
.cart-drawer__note{margin-top:5px;font-size:10.5px;color:var(--muted)}
.cart-drawer__checkout{
  display:block;
  width:100%;
  margin-top:13px;
  padding:12px;
  font-size:13.5px;
  text-align:center;
}
.cart-drawer__checkout.is-disabled{opacity:.5;pointer-events:none}
.cart-drawer__link{display:block;margin-top:10px;font-size:11.5px;color:var(--muted);text-align:center;text-decoration:underline}
.cart-drawer__link:hover{color:var(--cta)}
.cart-menu__badge.is-empty{display:none}

/* 数量ステッパー（.qty）は common.css の共通コンポーネントを使う */

/* --------------------------------------------------------------------------
   7. 規格選択モーダル
   -------------------------------------------------------------------------- */
.option-modal .modal-dialog{max-width:600px}
.option-modal .modal-content{max-height:calc(100vh - 32px);border:0;border-radius:var(--radius)}
.option-modal .modal-body{overflow-y:auto}
.option-modal__title{font-size:14px;font-weight:700;color:var(--navy)}
.option-modal__product{display:flex;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.option-modal__thumb{
  flex:0 0 auto;
  width:72px;
  height:72px;
  border-radius:var(--radius-sm);
  background:var(--bg);
  object-fit:cover;
}
.option-modal__meta{min-width:0}
.option-modal__brand{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.option-modal__name{font-size:13px;font-weight:600;line-height:1.5;color:var(--ink)}
.option-modal__price{margin-top:5px;font-size:14px;font-weight:700;color:var(--navy)}
.option-group{margin-top:16px}
.option-group__title{margin-bottom:9px;font-size:12.5px;font-weight:700;color:var(--navy)}
.option-group__list{display:flex;flex-wrap:wrap;gap:7px;max-height:min(46vh,360px);overflow-y:auto;padding-right:3px}
.option-choice{display:inline-flex;position:relative;flex:1 1 158px}
.option-choice__input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.option-choice__box{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  width:100%;
  padding:8px 14px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  background:var(--white);
  color:var(--ink);
  font-size:12.5px;
  cursor:pointer;
  transition:border-color .16s var(--ease),background .16s var(--ease),color .16s var(--ease);
}
.option-choice:hover .option-choice__box{border-color:var(--cta);background:var(--blue)}
.option-choice__input:checked + .option-choice__box{
  border-color:var(--cta);
  background:var(--blue);
  color:var(--navy);
  font-weight:700;
  box-shadow:inset 0 0 0 1px var(--cta);
}
.option-choice__input:focus-visible + .option-choice__box{box-shadow:0 0 0 3px rgba(30,123,239,.22)}
.option-stock-note{margin:9px 0 0;font-size:11px;line-height:1.6;color:#3f8f66}
.option-stock-note.is-low{color:#b06f28}
.option-stock-note.is-out{color:var(--red)}
.option-modal__error{margin:12px 0 0;color:var(--red);font-size:12px;line-height:1.6}
.option-modal__submit{width:100%;padding:11px;font-size:13.5px}

/* --------------------------------------------------------------------------
   8. レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width:991px){
  .cat-intro{padding-block:14px 2px}
  .cat-intro__box{padding:16px 16px 18px}
  .cat-promos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cat-children{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* サイドバーはドロワー（fixed）になり高さを持たないため、縦ガターの余白は消す */
  .cat-layout{--bs-gutter-y:0}
  .toolbar{padding:9px 10px}
  .toolbar__side{width:100%;justify-content:space-between;margin-left:0}
  .sort-tabs{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sort-tabs::-webkit-scrollbar{display:none}
}

@media (max-width:575px){
  .cat-intro__title{font-size:20px}
  .cat-banner .slick-slide img{aspect-ratio:16/9}
  .cat-promos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cat-children{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* ツールバーを2段に収める（1段目：絞り込み・件数・表示件数／2段目：並び替え） */
  .toolbar{gap:8px;padding:9px 10px}
  .toolbar__lead,.toolbar__side{display:contents}
  .filter-toggle{order:1}
  .toolbar__count{order:2;font-size:11.5px}
  .toolbar__range{display:none}
  .toolbar__size{order:3;margin-left:auto}
  .toolbar__size-label{display:none}
  .toolbar__size .form-select{min-width:74px}
  .sort-tabs{order:4;flex:1 1 100%;width:100%}
  .sort-tabs__item{flex:1 1 auto;justify-content:center;padding:7px 8px;font-size:11.5px}
  .active-filters__clear{margin-left:0}
}