/* 共有トークン(:root)は design-foundation.css へ分離（2026-06-11 EC統一・admin と共通の正本） */
@import url("./design-foundation.css?v=05fc36de");

/* 書体：Noto Sans TC 一本（2026-08-13 本城さん決定・admin2 と同じ）。
   これまでは書体を配らず端末任せだったため、Windows では英数＝Arial／中文＝微軟正黑體の
   混成になり、線の太さも字面の高さも揃わなかった（＝「弱い・ちぐはぐ」の正体）。
   欧文も漢字も同一設計の1書体で描く＝全端末で同じ見え方。判断材料は font-family-catalog.html。
   ・太さは 400 と 700 の2つだけ読む（design-foundation.css の2段階運用に合わせる）。
   ・CJK は Google Fonts が文字コード帯ごとに分割配信するため、実際に使う塊しか落ちてこない。
   ・display=swap＝落ちてくるまでは下の fallback で描き、届いたら差し替える（文字が消えない）。 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap");

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* 中身が短いページ（結帳完了など）でもフッターが画面下端に届くように、
     body を縦のフレックス＋最低1画面ぶんの高さにする。余った高さは
     design-chrome.js が footer 直前に差し込む .site-footer-push が吸い取る（2026-07-03）。
     旧: padding-bottom 40px（右下フローティングボタン用の余白）はフッター下に
     無地の帯として残ってしまうため廃止。ボタンとの間隔はフッター自身の高さで足りる。 */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* 背景はフラットな var(--paper)（2026-06-11 確定値。
     左端の青グラデ重ねは廃止） */
  background: var(--paper);
  color: var(--ink);
  /* 売場全体の書体はここ1か所が正本（2026-08-13 Noto Sans TC 一本化）。
     以降は fallback＝Web フォントが届く前／読めない環境向けの保険。 */
  font-family: "Noto Sans TC", "Helvetica Neue", Arial, "Microsoft JhengHei", sans-serif;
  line-height: 1.5;
}

/* design-chrome.js が footer 直前に差し込むスペーサー。縦フレックスの余りを
   全部ここへ集める＝footer が画面下端に届く（上の body コメント参照）。 */
.site-footer-push {
  flex: 1 0 auto;
}

button,
a {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

/* placeholder は全体で控えめに（単一ソース＝--hint）。:where() で詳細度0に保ち、
   個別ページが必要なら上書きできる。opacity:1 は Firefox の既定減光を打ち消す。 */
:where(input, textarea)::placeholder {
  color: var(--hint);
  opacity: 1;
}

/* .logo は design-foundation.css へ移設（B2 構造CSS統一・2026-06-11。admin と共有） */

/* ========================================================================
   店舗からのお知らせバー（ヘッダー最上部・開閉可能）
   マークアップは design-chrome.js が注入。ここはスタイルのみ（単一ソース）。
   ======================================================================== */
.announce-bar {
  --announce-ico: var(--ph-megaphone);
  position: relative;
  z-index: 49;
  overflow: hidden;
  max-height: 48px;
  background: var(--ink);
  color: #fff;
  transition: max-height 0.34s ease, opacity 0.34s ease;
}

.announce-bar.is-collapsed {
  max-height: 0;
  opacity: 0;
}

.announce-inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 40px;
  padding: 0 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.announce-track {
  display: grid;
  justify-items: center;
  touch-action: pan-y;
  user-select: none;
}

.announce-msg {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(2px);
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s;
  pointer-events: none;
}

a.announce-msg:hover span:last-child {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.announce-msg.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.announce-ico {
  width: 15px;
  height: 15px;
  flex: none;
  background: var(--flag-yellow);
  -webkit-mask: var(--announce-ico) center / contain no-repeat;
  mask: var(--announce-ico) center / contain no-repeat;
}

.announce-dots {
  display: flex;
  gap: 6px;
}

.announce-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
  transition: background 0.2s ease, transform 0.2s ease;
}

.announce-dot.is-active {
  background: #fff;
  transform: scale(1.25);
}

.announce-close {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
}

.announce-close::before,
.announce-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.7px;
  border-radius: 999px;
  background: currentColor;
}

.announce-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.announce-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.announce-close:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* .top-shell / .top-shell::before / .top-main / .brand は design-foundation.css へ移設
   （B2 構造CSS統一・2026-06-11。admin と共有の骨組み正本）。
   モバイルの .top-main 上書きは下の media query に残る（EC 固有のため）。 */

.page-grid {
  /* body が縦フレックス（footer 下端寄せ・2026-07-03）になったため、flex の子は
     margin:0 auto だけだと「中身の幅」まで縮む（検索0件でページ全体が痩せる）。
     width:100% で常に全幅を確保し、max-width 超過分だけ auto margin が中央寄せする。 */
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
}

.primary-nav {
  display: flex;
  gap: 0;
  overflow: auto;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
}

.primary-nav a {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 64px;
  align-items: center;
  /* ピルの“はみ出し”をやめ、左右パディングとしてリンク内に内包する。
     これで overflow:auto による先頭/末尾ピルの見切れが起きない。
     隣接テキストの間隔は 11+11=22px で従来どおり。
     2026-09-04 本城さん指摘「ピルのバランスがずれる」→実測で文字の墨が帯の中心より1px下・左右の余白7pxが上下(9/7)より窮屈だった。
     下に2px足して文字を1px持ち上げ(上下8/8)、左右は 12px にして余白 9px（隣との文字間隔 24px）。 */
  padding: 0 12px 2px;
}

/* ピル本体（hover / active 共通の“形”）。既定は透明で、色だけ状態で差し替える。
   ::before を z-index:-1 で文字の背面に敷く。isolation で帯の背面へ落ちないよう固定。
   上端のブラジル帯と線が競合しないよう、アクティブも下線は不使用。 */
.primary-nav a::before {
  content: "";
  position: absolute;
  top: 50%;
  /* リンク枠の左右から 4px 内側に置く＝隣のピルとの間に 8px(4+4) の隙間。
     リンクのクリック領域(padding 11px)はそのままで、テキスト間隔も 22px を維持。
     2026-09-04 左右 3px へ（ピル内の余白 9px＝上下 8px と釣り合わせる。隣のピルとは 6px 空く）。 */
  left: 3px;
  right: 3px;
  height: 30px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: transparent;
  z-index: -1;
  transition: background 0.15s ease;
}

/* hover＝ごく薄いグレーのピル（--fill を白寄りに混ぜて一段淡く）。
   文字も muted→ink で軽く持ち上げる。 */
.primary-nav a:hover {
  color: var(--ink);
}

.primary-nav a:hover::before {
  background: color-mix(in srgb, var(--fill) 60%, var(--surface));
}

/* アクティブ＝ブルー淡ティントのピル。hover より後に置き、アクティブを最優先
   （アクティブ項目を hover してもブルーのまま）。 */
.primary-nav a[aria-current="page"] {
  color: var(--blue);
  font-weight: 700;
}

.primary-nav a[aria-current="page"]::before {
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.top-search {
  min-width: 0;
}

.top-search input {
  width: 100%;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 58px 0 40px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 400;
}

.top-search {
  position: relative;
}

.top-search::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  background: var(--muted);
  -webkit-mask: var(--ph-search) center / contain no-repeat;
  mask: var(--ph-search) center / contain no-repeat;
  pointer-events: none;
}

.top-search input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent);
  /* 入力中は ⌘K ヒントが消える（右の余白58pxは不要）。ブラウザ標準の消去(✕)が
     右端に収まるよう右余白を詰め、✕が中途半端に浮くのを防ぐ。 */
  padding-right: 16px;
}

.top-actions {
  display: flex;
  gap: 10px;
}

.top-actions button {
  position: relative;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.top-actions .cart-badge,
.top-actions .fav-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* 收藏バッジはハート演出と揃えてローズ色 */
.top-actions .fav-badge {
  background: #ff5b7f;
}

/* 會員通知の未読バッジ（會員アイコン右上）。慣例どおり赤系でカート/收藏と区別 */
.top-actions .notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.top-actions .cart-badge:empty,
.top-actions .fav-badge:empty,
.top-actions .notif-badge:empty {
  display: none;
}

.top-actions button::before,
.top-actions button::after {
  content: "";
  position: absolute;
  left: 50%;
  box-sizing: border-box;
  transform: translateX(-50%);
}

/* ヘッダーのアクションアイコン＝Phosphor を単一マスクで表示（色は ink）。
   旧来の複数 ::before/::after による手作り図形は廃止。差し替えは :root の --ph-* だけ。 */
.top-actions .icon-user::before,
.top-actions .icon-cart::before,
.top-actions .icon-fav::before,
.top-actions .icon-news::before,
.top-actions .icon-menu::before,
.top-actions .icon-lang::before,
.top-actions .icon-search::before {
  top: 50%;
  left: 50%;
  width: 19px;
  height: 19px;
  transform: translate(-50%, -50%);
  background: var(--ink);
  -webkit-mask: var(--_ph) center / contain no-repeat;
  mask: var(--_ph) center / contain no-repeat;
}

.top-actions .icon-user::before   { --_ph: var(--ph-user); }
.top-actions .icon-cart::before   { --_ph: var(--ph-cart); }
.top-actions .icon-fav::before    { --_ph: var(--ph-heart); }
.top-actions .icon-news::before   { --_ph: var(--ph-megaphone); }
.top-actions .icon-search::before { --_ph: var(--ph-search); }
.top-actions .icon-menu::before   { --_ph: var(--ph-list); }
.top-actions .icon-lang::before   { --_ph: var(--ph-globe); }

/* ── 表示言語の切替（2026-10-07）。PC＝地球アイコン→選択枠／スマホ＝≡メニュー内／フッター共通。
   スマホのヘッダーはアイコンが既に多いので地球アイコンは出さない。 */
.lang-pop {
  position: fixed;
  z-index: 1200;
  min-width: 160px;
  padding: 6px;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
}
.lang-pop button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.lang-pop button:hover,
.lang-pop button:focus-visible { background: color-mix(in srgb, var(--ink) 6%, transparent); outline: none; }
.lang-pop button[aria-checked="true"] { font-weight: 700; }
.lang-pop button[aria-checked="true"]::after {
  content: "";
  width: 15px;
  height: 15px;
  margin-left: auto;
  padding-left: 16px;
  background: var(--blue);
  -webkit-mask: var(--ph-check) right center / 15px 15px no-repeat;
  mask: var(--ph-check) right center / 15px 15px no-repeat;
}

/* 言語の選択肢の国旗（選択枠・≡メニュー・フッター共通）。日本の白地が背景に溶けないよう細い枠 */
.lang-flag {
  flex: none;
  width: 18px;
  height: 12px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent);
}
.lang-pop button { gap: 10px; }

/* ふわっと開く：枠は少し上から、言語は1つずつ時間差で。地球アイコンは乗せると少し回る */
.lang-pop {
  transform-origin: top right;
  animation: lang-pop-in .22s cubic-bezier(.2, .8, .2, 1) both;
}
.lang-pop::before {                 /* アイコンと枠の間の隙間でも閉じない「橋」 */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}
.lang-pop button { animation: lang-item-in .3s cubic-bezier(.2, .8, .2, 1) both; }
.lang-pop button:nth-child(2) { animation-delay: .04s; }
.lang-pop button:nth-child(3) { animation-delay: .08s; }
.lang-pop button .lang-flag { transition: transform .18s ease; }
.lang-pop button:hover .lang-flag { transform: scale(1.12); }
.lang-pop.is-leaving { animation: lang-pop-out .14s ease-in both; pointer-events: none; }
@keyframes lang-pop-in {
  from { opacity: 0; transform: translateY(-6px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes lang-item-in {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes lang-pop-out {
  to { opacity: 0; transform: translateY(-4px) scale(.98); }
}
.top-actions .icon-lang::before { transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.top-actions .icon-lang:hover::before,
.top-actions .icon-lang[aria-expanded="true"]::before { transform: translate(-50%, -50%) rotate(-25deg); }
@media (prefers-reduced-motion: reduce) {
  .lang-pop, .lang-pop button, .lang-pop.is-leaving { animation: none; }
  .top-actions .icon-lang::before { transition: none; }
}
.hm-lang button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* 日本語表示は日本の字形（Noto Sans JP は i18n.js が日本語の時だけ読む） */
html:lang(ja) body {
  font-family: "Noto Sans JP", "Noto Sans TC", "Helvetica Neue", Arial, sans-serif;
}

/* ハンバーガー（サイトメニュー）と分類チップ列はモバイル専用。PC は従来の文字ナビ。 */
.top-actions .icon-menu {
  display: none;
}

.cat-strip {
  display: none;
}

/* メガホン＝お知らせの再表示ボタン。お知らせを閉じている間だけ現れ、
   非表示中は青ドットで気づかせる。 */
.top-actions .icon-news.has-news::after {
  top: 6px;
  right: 6px;
  left: auto;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--blue);
  border: 1.5px solid var(--paper);
  transform: none;
}

.top-actions .icon-search {
  display: none;
}

.page-grid {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  padding: 0 var(--padx);
}

/* 左サイドバーのあるグリッドページでは、本文下の余白を body ではなく各カラム内側
   （.product-field の下 72px ／ .sidebar の下 56px）で確保し、page-grid 自体を画面
   下端まで伸ばす。こうするとサイドバーの仕切り線（.sidebar の border-right）が
   画面下まで途切れずハッキリ届く（旧: body の下余白 40px の分だけ線が手前で止まっていた）。
   サイドバーの無い単独ページ（story/mypage 等）は従来どおり body 下余白を保つ。 */
body:has(.page-grid) {
  padding-bottom: 0;
}

/* 骨組み（sticky・高さ・スクロール・縦線）は design-foundation.css の .sidebar へ移設
   （B2 面2・2026-06-11。admin と共有）。ここは EC 固有の余白だけ。 */
.sidebar {
  /* 左パディングは 0。page-grid 側が既に左 --padx を確保しているので、ここで
     さらに --padx を足すと中身（分類リスト）がロゴより --padx 分だけ右にずれる。
     0 にすることでサイドバーの中身の左端＝ヘッダーのロゴの左端で揃う
     （ユーザー指定 2026-06-08）。右 22px は仕切り線(border-right)との間隔。 */
  padding: 16px 22px 56px 0;
}

/* 売場のサイドバーだけ、独自スクロールをやめてページ全体のスクロールに合わせる
   （2026-08-10 本城さん指示）。季別を足して中身が画面の高さを超え、細いスクロールバーが
   常時見えるようになったため。畳む案は採らず、サイドバーごと一緒に流す。
   骨組み（sticky・高さ・overflow）は design-foundation.css 側＝admin と共有なので
   そちらは触らず、#priceSection を持つ売場サイドバーだけをここで上書きする。
   ※ 必ず PC 幅（≥941px）に閉じ込めること。≤940 のサイドバーは「下から出るシート」
     ＝position:fixed / max-height / overflow-y:auto が命なので、ここで static を
     全幅に効かせると、シートが流れの中に居座って画面下に高さぶんの空白が出る
     （2026-08-11 実害：トップのヒーロー直下に約640pxの白い空白）。 */
@media (min-width: 941px) {
  .sidebar:has(#priceSection) {
    position: static;
    height: auto;
    overflow: visible;
  }
}
/* リロード時のチラつき対策: app.js が「件数バッジ・尺寸・價格スライダー」を“後から”
   組み立てるため、その途中（件数0・空ヒストグラム・既定レンジ・尺寸の入替）が一瞬見える。
   旧方式＝サイドバーを丸ごと cloak。だがモバイル（縦積み）は画面上部に高さ約444pxの
   空白帯、PC でも左カラムが空欄になり「壊れて見える」のが難点だった。
   新方式＝静的な“分類名・顏色スウォッチ”は即表示し、JS が値を入れる部分だけ
   準備完了（.is-ready）まで控えめに隠す。PC/モバイル共通の挙動。
   ・visibility は領域を確保するので、表示時にレイアウトがガタつかない。
   ・売場サイドバー限定（#priceSection を持つもの）。記事ページ等の同名 .sidebar
     （app.js 非搭載・chrome.js が中身を注入）は対象外。
   ・JS 不達時の保険として index.html 末尾に setTimeout の .is-ready 付与も置く。 */
.sidebar:has(#priceSection):not(.is-ready) [data-filter-count],
.sidebar:has(#priceSection):not(.is-ready) #priceSection,
.sidebar:has(#priceSection):not(.is-ready) #sizeSection {
  visibility: hidden;
}

/* 「絞り込み中」サマリー＝商品一覧の上に置く横長バー（applied-filters）。
   選択中フィルタを青淡チップで集約（各 ✕ で個別解除）。チップは app.js が注入。
   旧: サイドバー上部に置いていたが、選択増でチップが縦に伸びて下のセクションを
   押し下げる欠点があったため、幅の広い一覧側へ移設した。 */
.filter-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 0 0 18px;
}
.filter-summary.is-empty {
  display: none;
}
.filter-summary .fs-lead {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.filter-summary .fs-chips {
  display: contents;
}
.fs-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  color: var(--blue);
  font-size: 11.5px;
  font-weight: 700;
}
.fs-chip button {
  border: 0;
  background: none;
  color: inherit;
  padding: 0;
  font-size: 11px;
  line-height: 1;
  opacity: 0.7;
}
.fs-chip button:hover {
  opacity: 1;
}
/* サマリーを facet（分類/場景/尺寸/顏色/價格）ごとに小見出し付きでグループ化。
   .fs-chips は display:contents なので各 .fs-group が filter-summary の flex 項目として
   まとまって折り返す。✕ ボタンの直親は依然 .fs-chip なので個別解除は無改変で動く。 */
.fs-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.fs-facet {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.04em;
}
.filter-summary .filter-clear {
  margin-left: auto;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--muted);
  /* 物差し（type-ruler-catalog.html）＝飾り段は 11px が下限。10px は小さすぎた。 */
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* .side-section / .side-section h2 / .side-link（土台）は design-foundation.css へ移設
   （B2 面3・2026-06-11。admin のアプリメニューと共有）。ここは EC 売場固有の差分だけ。 */
.cat-section {
  border-top: 0;
  padding-top: 2px;
}

/* 分類アイコン（派生3）。箱で囲わない素アイコン＝CSS mask で塗る。
   通常＝--muted の line／選択＝--blue の fill（mask-image を fill 版へ差替）。
   絵柄は data-filter-value 別に下で割当て（--m=line／--mf=fill）。 */
.side-link .cat-ic {
  width: 20px;
  height: 20px;
  align-self: center;
  color: var(--muted);
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
  /* color はトランジションしない：mask 背景(currentColor)に color 遷移を掛けると
     一部エンジンでマスク背景が再描画されず色が固まるため。切替は line→fill と同じく瞬時。 */
}
.side-link.active .cat-ic {
  color: var(--blue);
  -webkit-mask-image: var(--mf);
  mask-image: var(--mf);
}
.cat-section .side-link[data-filter-value=""] .cat-ic,
.cat-chip[data-cat=""] .cat-ic { --m: var(--ph-cat-all); --mf: var(--ph-cat-all-fill); }
.cat-section .side-link[data-filter-value="footwear"] .cat-ic,
.cat-chip[data-cat="footwear"] .cat-ic { --m: var(--ph-cat-shoe); --mf: var(--ph-cat-shoe-fill); }
.cat-section .side-link[data-filter-value="wear"] .cat-ic,
.cat-chip[data-cat="wear"] .cat-ic { --m: var(--ph-cat-wear); --mf: var(--ph-cat-wear-fill); }
.cat-section .side-link[data-filter-value="accessory"] .cat-ic,
.cat-chip[data-cat="accessory"] .cat-ic { --m: var(--ph-cat-acc); --mf: var(--ph-cat-acc-fill); }
.cat-section .side-link[data-filter-value="bag"] .cat-ic,
.cat-chip[data-cat="bag"] .cat-ic { --m: var(--ph-cat-bag); --mf: var(--ph-cat-bag-fill); }

/* 場景・尺寸 = chip（複選想定）。選択＝青淡ピル化のみで示す。
   ✓ は撤去（選択時に幅が広がり右の要素が改行される問題＋ユーザー判断で不要）。 */
.scene-grid,
.size-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.scene-grid button,
.scene-grid a.scene-chip,
.size-grid button {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 13px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 400;
}

.size-grid button {
  justify-content: center;
  min-width: 38px;
}

/* markup（index.html の場景／app.js 生成のサイズ）に残る <i class="ck"> は
   常に非表示。幅 0・margin 0 で選択時も寸法が変わらず、改行が起きない。 */
.scene-grid button .ck,
.size-grid button .ck {
  display: none;
}

.scene-grid button:hover,
.scene-grid a.scene-chip:hover,
.size-grid button:hover {
  border-color: color-mix(in srgb, var(--ink) 26%, var(--line));
}

.scene-grid button.active,
.size-grid button.active,
.scene-grid button[aria-pressed="true"],
.size-grid button[aria-pressed="true"] {
  border-color: transparent;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  color: var(--blue);
  font-weight: 700;
}

/* 分類の小分類 = チェックリスト（複選・案A 先頭ボックス角丸）。
   分類で対象カテゴリ（服裝など）を選んだ時だけ #subcatSection ごと出る。
   四角＝複数選べる、を非言語に示す。選択で青塗り＋白✓（共通 --ph-check）。 */
.subcat-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.subcat-list button {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 0;
  border-radius: 9px;
  padding: 8px 10px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 400;
  text-align: left;
}
.subcat-list button:hover {
  background: color-mix(in srgb, var(--ink) 3.5%, transparent);
}
.subcat-list .cl-box {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1.5px solid var(--fill-strong);
  display: grid;
  place-items: center;
}
.subcat-list .cl-box::after {
  content: "";
  width: 12px;
  height: 12px;
  background: #fff;
  -webkit-mask: var(--ph-check-bold) center / contain no-repeat;
  mask: var(--ph-check-bold) center / contain no-repeat;
  transform: scale(0);
  transition: transform 0.14s ease;
}
.subcat-list button[aria-pressed="true"] {
  color: var(--blue);
  font-weight: 700;
}
.subcat-list button[aria-pressed="true"] .cl-box {
  background: var(--blue);
  border-color: var(--blue);
}
.subcat-list button[aria-pressed="true"] .cl-box::after {
  transform: scale(1);
}
/* 款式に添える底の記号（FG·MG / TF / IN）。名前が主役なので薄く・小さく・細く。
   選択時は件数 b と同じ青に寄せて、行全体が一つの塊に見えるようにする。 */
.subcat-list .subcat-code {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.02em;
  margin-left: 4px;
}
.subcat-list button[aria-pressed="true"] .subcat-code {
  color: var(--blue);
}
.subcat-list b {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.subcat-list button[aria-pressed="true"] b {
  color: var(--blue);
}

/* 顏色 = 丸スウォッチ（複選想定）。選択でその色自身のリング（--sw-ring）＋中央に白 ✓（--sw-on で淡色は黒✓）。
   7色（黑/白/紅/青/黃/綠/其他）を必ず1列に収めるため repeat(7,1fr) の等分グリッド。
   サイドバー幅が変わっても折り返さない（flex-wrap だと幅次第で2列化していた）。 */
.swatches {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  place-items: center;
  gap: 6px 0;
}

.swatches button {
  position: relative;
  /* 24px に縮小（隣の選択リング同士がくっつかないよう少し小さく離す） */
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: var(--sw);
  /* 選択リングの色＝その色自身（--sw）。白だけは白地で見えないのでグレーに上書き。 */
  --sw-ring: var(--sw);
}

/* 白は白地に白だと輪郭が消えるので、白スウォッチだけ淡いグレーの縁を残す。
   色付きスウォッチは地色だけで縁が分かるので縁線は不要。選択時の輪も白だけグレーに。 */
.swatches button[data-url-key="white"] {
  --sw-ring: #c9ced4;
  box-shadow: inset 0 0 0 1px #d3d7dd;
}

/* 其他 = 中空の点線リング（色を足さず「その他／指定なし」を静かに示す）。
   選択時はグレーのリング＋中央 ✓（淡色用に --sw-on をグレーに）。 */
.swatches button.is-other {
  --sw-on: #6a7078;
  --sw-ring: #6a7078;
  background: transparent;
  border: 1.5px dashed #c3c8ce;
  box-shadow: none;
}

.swatches button.active,
.swatches button[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--sw-ring);
}

.swatches button.is-other.active,
.swatches button.is-other[aria-pressed="true"] {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--sw-ring);
}

.swatches button.active::after,
.swatches button[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 13px;
  height: 13px;
  background: var(--sw-on, #fff);
  -webkit-mask: var(--ph-check) center / contain no-repeat;
  mask: var(--ph-check) center / contain no-repeat;
}

/* 價格 = ヒストグラム＋デュアルレンジ。分布を背景に見せ、2つのつまみで範囲指定。
   ネイティブ range を2本重ねる定番手法（つまみだけ pointer-events:auto）で
   ドラッグ／タッチ／キーボードを堅牢に扱う。 */
.price-filter {
  padding-top: 2px;
}
.price-hist {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 40px;
  margin-bottom: 10px;
}
.price-hist i {
  flex: 1;
  min-height: 3px;
  border-radius: 2px 2px 0 0;
  background: var(--fill-strong);
  transition: background 0.15s ease;
}
.price-hist i.inb {
  background: color-mix(in srgb, var(--blue) 55%, var(--surface));
}
.price-range {
  position: relative;
  height: 16px;
}
.price-range .track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--fill-strong);
}
.price-range .track-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: var(--blue);
}
.price-range input[type="range"] {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 16px;
  margin: 0;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.price-range input[type="range"]::-webkit-slider-runnable-track {
  background: transparent;
  border: 0;
}
.price-range input[type="range"]::-moz-range-track {
  background: transparent;
  border: 0;
}
.price-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: var(--surface);
  border: 2px solid var(--blue);
  box-shadow: 0 2px 5px rgba(20, 24, 34, 0.2);
  cursor: pointer;
}
.price-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: var(--surface);
  border: 2px solid var(--blue);
  box-shadow: 0 2px 5px rgba(20, 24, 34, 0.2);
  cursor: pointer;
}
.price-range input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 26%, transparent);
}
.price-vals {
  display: flex;
  justify-content: space-between;
  margin-top: 13px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 分類を変えると尺寸チップが入れ替わる「連動」を非言語で見せる演出。
   チップが下からふわっと出現し、セクションが淡く一度光る。 */
@keyframes sizePop {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}
.size-grid button.pop,
.subcat-list button.pop {
  animation: sizePop 0.26s ease both;
}
@keyframes sideFlash {
  0% { background: color-mix(in srgb, var(--blue) 9%, transparent); }
  100% { background: transparent; }
}
.side-section.flash {
  animation: sideFlash 0.6s ease;
  border-radius: 10px;
}
@media (prefers-reduced-motion: reduce) {
  .size-grid button.pop,
  .subcat-list button.pop { animation: none; }
  .side-section.flash { animation: none; }
}

.product-field {
  min-width: 0;
  /* 右パディングは 0。商品の右端を、ヘッダー右のアイコン群の右端（＝page-grid の
     右内端）にピッタリ揃える。左 --padx はサイドバーの仕切り線との間隔として維持。
     ロゴ↔サイドバー左端の整合（.sidebar 参照）と左右で対称（ユーザー指定 2026-06-08）。
     ※モバイル（≤940px・1カラム）は下の media query で左右とも 0 にし、ヘッダーの
       ロゴ／アイコンと左右端を揃える（横余白は page-grid の --padx が担う）。 */
  padding: 30px 0 72px var(--padx);
}

.field-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  margin-bottom: 24px;
}

h1,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 8px;
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1;
  letter-spacing: 0;
}

/* index ストアフロントの見出しは共通 h1（clamp 30-56px）だと大きすぎたので
   field-hero 限定で一段小さくする（他ページの h1 には影響させない）。 */
.field-hero h1 {
  font-size: clamp(24px, 2.6vw, 34px);
  /* 物差し＝見出し 1.25（2026-08-13 案③採用）。 */
  line-height: 1.25;
}

.field-hero p:not(.eyebrow) {
  max-width: 56ch;
  margin-bottom: 0;
  color: var(--muted);
  /* 物差し＝本文 14.5px／1.85／.02em。 */
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0.02em;
}

.field-tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.tool {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 14px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.tool.active {
  border-color: var(--blue);
  color: var(--ink);
}

.quick-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.quick-map a {
  display: grid;
  gap: 22px;
  min-height: 92px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 13px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
}

.quick-map span {
  font-size: 13px;
  font-weight: 700;
}

.quick-map i {
  display: block;
  width: 54px;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--yellow));
}

.shelf-note {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
  margin-bottom: 16px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.shelf-note strong {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.shelf-note span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  gap: 24px 22px;
}

.skeleton-card {
  display: grid;
  gap: 9px;
  min-width: 0;
  border-radius: 6px;
  color: inherit;
}

.skeleton-card::before {
  content: "";
  display: block;
  width: 54px;
  height: 2px;
  background: transparent;
}

.skeleton-card:hover::before {
  background: linear-gradient(90deg, var(--blue), var(--yellow));
}

.skeleton-media {
  aspect-ratio: 1;
  border-radius: 5px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.5), transparent),
    var(--fill);
}

.skeleton-title,
.skeleton-price,
.skeleton-swatches i {
  display: block;
  border-radius: 2px;
  background: var(--fill-strong);
}

.skeleton-title {
  width: var(--title-w, 76%);
  height: 9px;
}

/* 骨架は淡いグレー1系統で統一（媒体=--fill / 文字バー=--fill-strong の2段だけ）。
   旧 price は ink 72% の“ほぼ黒”でカード内に強い濃淡ノイズが出ていた＝撤去し、
   タイトルと同じ --fill-strong（上の共通ルール）に揃える。差は幅と高さで付ける。 */
.skeleton-price {
  width: var(--price-w, 42%);
  height: 12px;
}

.skeleton-swatches {
  display: flex;
  gap: 5px;
}

.skeleton-swatches i {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--swatch, var(--fill));
  border: 1px solid var(--line);
}

.ai-dock {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 80;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: min(760px, calc(100vw - 48px));
  transform: translateX(-50%);
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 10px 12px 10px 14px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow);
  backdrop-filter: saturate(1.18) blur(14px);
  transition: opacity .2s ease, transform .28s cubic-bezier(.22, 1, .36, 1);
}

.ai-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--ink);
}

.ai-main {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.ai-main > span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.ai-chips {
  display: flex;
  gap: 6px;
  overflow: hidden;
}

.ai-chips button {
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 10px;
  background: var(--paper);
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
}

/* 上部検索バーの Ctrl+K / ⌘K ヒント（PC ビューのみ。モバイルでは非表示）。 */
.search-kbd {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 7px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 10.5px;
  font-weight: 400;
  pointer-events: none;
  transition: opacity .15s ease;
}

/* 入力中はヒントを引っ込めて邪魔しない。 */
.top-search input:focus ~ .search-kbd {
  opacity: 0;
}

.ai-send {
  position: relative;
  width: 38px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
}

.ai-send::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  background: #fff;
  -webkit-mask: var(--ph-send) center / contain no-repeat;
  mask: var(--ph-send) center / contain no-repeat;
}

/* AI ドックの開閉。閉じると右下の丸い呼び出しボタン(.ai-launcher)だけが残り、
   いつでも呼び戻せる。表示中はランチャーを隠すので入口は常に1つ（固定方針#5）。 */
.ai-dock.is-collapsed {
  opacity: 0;
  transform: translateX(-50%) translateY(26px) scale(.96);
  pointer-events: none;
}

/* ドック右上の控えめな閉じるボタン（ピルの縁に半分かかる小さな丸）。 */
.ai-close {
  position: absolute;
  top: -10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--muted);
  cursor: pointer;
  transition: color .15s ease, background .15s ease, transform .15s ease;
}

.ai-close:hover {
  color: var(--ink);
  background: var(--paper);
  transform: scale(1.08);
}

.ai-close::after {
  content: "";
  width: 13px;
  height: 13px;
  background: currentColor;
  -webkit-mask: var(--ph-x) center / contain no-repeat;
  mask: var(--ph-x) center / contain no-repeat;
}

/* 右下フローティングのランチャー。ドックを閉じている間だけ現れる。 */
.ai-launcher {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 81;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 14px 32px -10px color-mix(in srgb, var(--blue) 60%, transparent), var(--shadow);
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px) scale(.82);
  pointer-events: none;
  transition: opacity .24s ease, transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease;
}

.ai-launcher.is-shown {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.ai-launcher.is-shown:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -10px color-mix(in srgb, var(--blue) 66%, transparent), var(--shadow);
}

.ai-launcher::after {
  content: "";
  width: 26px;
  height: 26px;
  background: #fff;
  -webkit-mask: var(--ph-chat) center / contain no-repeat;
  mask: var(--ph-chat) center / contain no-repeat;
}

/* 右下フローティングの LINE 呼び出しボタン。トースト(z-index 90)より背面で、
   通知が出たら隠れて構わない方針。既定は白地＋モノトーンのロゴで静か、
   ホバーで LINE グリーンに色づく。 */
.line-launcher {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 81;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 26px -14px rgba(15, 23, 42, .5);
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px) scale(.82);
  pointer-events: none;
  transition: opacity .24s ease, transform .08s ease,
    background-color .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.line-launcher.is-shown {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.line-launcher svg {
  width: 34px;
  height: 34px;
  display: block;
}

/* 吹き出し＝薄いスレート、文字＝白。静かなモノトーン状態。 */
.line-launcher .ll-bubble {
  fill: #94a3b8;
  transition: fill .28s ease;
}

.line-launcher .ll-mark {
  fill: #fff;
  transition: fill .28s ease;
}

/* ホバー／フォーカスで LINE グリーンに点灯し、ロゴは公式配色（白吹き出し＋緑文字）へ反転。 */
.line-launcher.is-shown:hover,
.line-launcher.is-shown:focus-visible {
  background: #06c755;
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -12px color-mix(in srgb, #06c755 62%, transparent);
}

.line-launcher.is-shown:hover .ll-bubble,
.line-launcher.is-shown:focus-visible .ll-bubble {
  fill: #fff;
}

.line-launcher.is-shown:hover .ll-mark,
.line-launcher.is-shown:focus-visible .ll-mark {
  fill: #06c755;
}

/* =========================================================================
   AI 店員 チャットドロワー（右スライド・全ページ共有）。
   カート/詳細ドロワーと同じ所作（translateX + 暗幕）で意匠を統一する。
   ========================================================================= */
.chat-backdrop {
  position: fixed;
  inset: 0;
  z-index: 96;
  background: color-mix(in srgb, var(--ink) 34%, transparent);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .32s ease, visibility .32s ease;
}

.chat-backdrop.show {
  opacity: 1;
  visibility: visible;
}

.chat-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 97;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(420px, 100vw);
  height: 100vh;
  transform: translateX(104%);
  border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: saturate(1.1) blur(10px);
  box-shadow: var(--shadow);
  transition: transform .34s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

.chat-drawer.open {
  transform: translateX(0);
}

/* ── ヘッダー ───────────────────────────── */
.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}

.chat-id {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.chat-avatar {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--ink);
}

.chat-avatar::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #22b07d;
  border: 2px solid var(--surface);
}

.chat-id-text {
  display: grid;
  line-height: 1.25;
  min-width: 0;
}

.chat-id-text strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.chat-id-text span {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

.chat-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.chat-newchat {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}

.chat-newchat:hover {
  color: var(--ink);
  border-color: var(--blue);
}

.chat-close-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}

.chat-close-btn:hover {
  color: var(--ink);
  border-color: var(--blue);
}

.chat-close-btn::after {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--ph-x) center / contain no-repeat;
  mask: var(--ph-x) center / contain no-repeat;
}

/* ── 会話ログ ───────────────────────────── */
.chat-log {
  overflow-y: auto;
  padding: 18px 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  scrollbar-width: thin;
}

.chat-day {
  align-self: center;
  margin: 0 0 2px;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 400;
}

.chat-row {
  display: flex;
  gap: 8px;
  max-width: 100%;
}

.chat-row.is-me {
  justify-content: flex-end;
}

.chat-av {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--ink);
  align-self: flex-end;
}

.chat-bubble {
  max-width: 80%;
  padding: 10px 13px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 400;
}

.chat-bubble strong {
  font-weight: 700;
}

.is-bot .chat-bubble {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  border-bottom-left-radius: 5px;
}

.is-me .chat-bubble {
  background: color-mix(in srgb, var(--blue) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--blue) 26%, var(--line));
  color: var(--ink);
  border-bottom-right-radius: 5px;
}

/* 提案チップ（ボット発話の下に左揃え、アバター幅ぶんインデント） */
.chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: -4px 0 0 34px;
}

.chat-chip {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--line));
  border-radius: 999px;
  background: var(--surface);
  color: var(--blue);
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}

.chat-chip:hover {
  background: color-mix(in srgb, var(--blue) 10%, var(--surface));
  transform: translateY(-1px);
}

/* インライン商品カード（横スクロール） */
.chat-cards {
  display: flex;
  gap: 10px;
  margin: 2px 0 0 34px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}

.chat-card {
  flex: none;
  width: 142px;
  scroll-snap-align: start;
  display: grid;
  grid-template-rows: 104px auto;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}

.chat-card:hover {
  border-color: color-mix(in srgb, var(--blue) 40%, var(--line));
  transform: translateY(-2px);
}

.chat-card img {
  width: 100%;
  height: 104px;
  object-fit: contain;
  background: var(--fill);
  padding: 6px;
}

.chat-card-body {
  display: grid;
  gap: 6px;
  padding: 9px 10px 11px;
}

.chat-card h4 {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-card-price {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.chat-card-add {
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease;
}

.chat-card-add:hover {
  background: var(--blue);
}

/* タイピングインジケータ（フェーズB用に定義） */
.chat-typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  border-bottom-left-radius: 5px;
  background: var(--surface);
}

.chat-typing i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--muted);
  animation: chat-typing 1.2s infinite ease-in-out;
}

.chat-typing i:nth-child(2) { animation-delay: .15s; }
.chat-typing i:nth-child(3) { animation-delay: .3s; }

@keyframes chat-typing {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .chat-typing i { animation: none; }
}

/* ── 入力欄 ───────────────────────────── */
.chat-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.chat-composer input {
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 16px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
}

.chat-composer input:focus {
  outline: none;
  border-color: var(--blue);
}

.chat-send {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  cursor: pointer;
}

.chat-send::after {
  content: "";
  width: 18px;
  height: 18px;
  background: #fff;
  -webkit-mask: var(--ph-send) center / contain no-repeat;
  mask: var(--ph-send) center / contain no-repeat;
}

@media (max-width: 940px) {
  :root {
    --header-h: 98px;
  }

  .top-main,
  .field-hero,
  .page-grid {
    grid-template-columns: 1fr;
  }

  /* モバイル帯の余白（2026-08-11 調整）。上12 / 行間12 / 下14 の等間隔になるよう
     padding-top は旗ストライプ(--flag-h 4px)の分を足した 16px を採る。 */
  .top-main {
    position: relative;
    gap: 10px;
    padding-top: 16px;
    padding-bottom: 10px;
  }

  /* 1列時もロゴリンクを行全体へ広げず、タップハイライトをロゴ周辺だけにする。 */
  .top-main .brand {
    justify-self: start;
    width: calc(132px * var(--logo-scale, 1));
    /* 右のアイコン列（36px）と同じ行高にして、ロゴとアイコンの上下中心をそろえる。 */
    min-height: 36px;
  }

  /* リンク幅を表示幅に絞っても、ロゴ本体のレイアウト幅と行高は維持する。 */
  .top-main .brand .logo {
    flex-shrink: 0;
  }

  .top-search {
    position: absolute;
    top: 62px;
    left: var(--padx);
    right: var(--padx);
    z-index: 2;
    width: auto;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity .16s ease, transform .16s ease;
  }

  .top-shell.search-open .top-search {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* Ctrl+K ヒントは PC ビュー専用。モバイルは物理キー無し＋検索はオーバーレイなので隠す。 */
  .search-kbd {
    display: none;
  }

  .top-search input {
    padding-right: 16px;
  }

  /* 文字ナビ（全部商品/販售據點）はハンバーガーへ移設（2026-07-13）。
     その場所には分類チップ列（.cat-strip）を出す。 */
  .primary-nav {
    display: none;
  }

  .top-actions {
    position: absolute;
    right: var(--padx);
    top: 16px;
  }

  .top-actions .icon-search,
  .top-actions .icon-menu {
    display: block;
  }

  /* 言語はスマホでは≡メニューの中（ヘッダーのアイコンをこれ以上増やさない） */
  .top-actions .icon-lang {
    display: none;
  }

  /* 分類チップ列＝横スクロールの1行。グリッド子は min-width:0 が無いと中身の
     横幅で列を押し広げ、ページ全体が横にはみ出す（grid の min-width:auto 地雷）。 */
  .cat-strip {
    order: 3;
    display: flex;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 0 4px;
  }

  .cat-strip::-webkit-scrollbar {
    display: none;
  }

  .top-shell.search-open .cat-strip {
    /* 検索欄の下端とカテゴリーチップが接しないよう、開閉時だけ8px空ける。 */
    padding-top: 46px;
  }

  /* スクロール追従ヘッダー（2026-08-20 本城さん要望）。縦が貴重なスマホでは、
     下へ読み進める間だけ帯を上へ逃がし、少しでも上へ戻すと即戻す。
     .is-tucked を付け外しするのは design-chrome.js の wireHeaderAutoHide だけ。
     PC（941px 以上）にはこの規則自体が無いので、クラスが残っても隠れない。 */
  .top-shell {
    transition: transform .22s ease;
    will-change: transform;
  }

  .top-shell.is-tucked {
    transform: translateY(-100%);
  }

  .cat-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 13px;
    background: var(--surface, #fff);
    color: var(--ink);
    font: inherit;
    /* 物差し＝主導線はサイドバーと同じ 14.5px。太さは「並びは 400・選択中だけ 700（青）」
       ＝2026-08-13 本城さん指摘に合わせる。 */
    font-size: 14.5px;
    font-weight: 400;
    white-space: nowrap;
  }

  /* 先頭アイコン＝PCサイドバーと同じ絵柄（通常 line・選択中 fill の青）。 */
  .cat-chip .cat-ic {
    flex: none;
    width: 18px;
    height: 18px;
    margin-left: -3px;
    color: var(--muted);
    background: currentColor;
    -webkit-mask: var(--m) center / contain no-repeat;
    mask: var(--m) center / contain no-repeat;
  }

  .cat-chip[aria-pressed="true"] .cat-ic {
    color: var(--blue);
    -webkit-mask-image: var(--mf);
    mask-image: var(--mf);
  }

  .cat-chip b {
    font-size: 11px;
    font-weight: 700;
    color: var(--hint);
  }

  .cat-chip b:empty {
    display: none;
  }

  .cat-chip[aria-pressed="true"] {
    border-color: var(--blue);
    color: var(--blue);
    font-weight: 700;
    background: color-mix(in srgb, var(--blue) 7%, var(--surface, #fff));
  }

  .cat-chip[aria-pressed="true"] b {
    color: var(--blue);
  }

  /* 検索語で0件の分類はサイドバー同様うっすら＋押せなく（迷子防止）。 */
  .cat-chip.is-off {
    opacity: .45;
    pointer-events: none;
  }

  .sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 22px;
  }

  .quick-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  :root {
    --padx: 16px;
    /* ロゴと右側の操作群の間に残っている余白を使い、スマホだけ少し拡大。 */
    --logo-scale: 0.760;
  }

  body {
    padding-bottom: 40px;
  }

  /* 5つの操作ボタンを少し大きくし、横の余白を詰めてタップしやすくする。 */
  .top-actions {
    gap: 8px;
  }

  .top-actions button {
    width: 36px;
    height: 36px;
  }

  .top-actions .icon-user::before,
  .top-actions .icon-cart::before,
  .top-actions .icon-fav::before,
  .top-actions .icon-news::before,
  .top-actions .icon-menu::before,
  .top-actions .icon-search::before {
    width: 20px;
    height: 20px;
  }

  /* 360px以下は幅を優先し、ロゴとボタンが重ならないよう従来値に近づける。 */
  @media (max-width: 360px) {
    :root {
      --logo-scale: 0.720;
    }

    .top-actions {
      gap: 6px;
    }

    .top-actions button {
      width: 34px;
      height: 34px;
    }

    .top-actions .icon-user::before,
    .top-actions .icon-cart::before,
    .top-actions .icon-fav::before,
    .top-actions .icon-news::before,
    .top-actions .icon-menu::before,
    .top-actions .icon-search::before {
      width: 19px;
      height: 19px;
    }
  }

  .product-field {
    padding-top: 22px;
    /* モバイルは1カラム（サイドバーは下シートで流れに無い）。横の余白は page-grid 側
       の --padx だけで足りるので、product-field 自身の左右パディングは 0 にする。
       こうすると見出し・件数・商品の左右端が、ヘッダーのロゴ／アイコンの左右端と
       ピタリ揃う（デスクトップで左端=ロゴ・右端=アイコンに揃えたのと同じ整合）。
       以前ここで右に --padx を足していたら本文だけ左右 16px 内側にズレていた。 */
    padding-left: 0;
    padding-right: 0;
  }

  .field-tools {
    justify-content: flex-start;
  }

  .quick-map {
    grid-template-columns: 1fr;
  }

  .shelf-note {
    display: grid;
  }

  .skeleton-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 12px;
  }

  .ai-dock {
    grid-template-columns: auto minmax(0, 1fr) auto;
    width: calc(100vw - 24px);
    bottom: 12px;
  }

  .ai-chips {
    display: none;
  }

  .ai-launcher {
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
  }

  .ai-launcher::after {
    width: 23px;
    height: 23px;
  }

  .line-launcher {
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
  }

  .line-launcher svg {
    width: 30px;
    height: 30px;
  }

  /* お知らせバー：狭幅では本文を詰め、ドットは省く（×と再表示で十分）。 */
  .announce-inner {
    padding: 0 40px;
    gap: 10px;
  }

  .announce-msg {
    font-size: 12px;
  }

  .announce-dots {
    display: none;
  }
}

/* ============================================================
   モバイル絞り込み（売場のみ）：左サイドバーを「下バー＋下からシート」へ。
   2026-06-08 確定（_lab/mobile-filter-proposals の案3改）。
   ・PC は一切変えない（このブロックは ≤940 だけ）。
   ・対象は売場サイドバー .sidebar--shop のみ。記事ページ等の .sidebar は対象外。
   ・部品（下バー/暗幕/排序シート/シート見出し）は mobile-filter.js が body に注入。
   ・暗幕は見た目だけでタッチを透過。表示中も背面の売場をスクロールできる。
   ・縦は詰めず（自然な余白のまま）、scroll-hide で稼ぐ。
   ・アイコンは Phosphor：篩選=sliders-horizontal / 排序=sort-ascending。
   ============================================================ */

/* 既定（PC含む全幅）では注入部品を隠す。表示は ≤940 でのみ。 */
.mf-bar,
.mf-scrim,
.sidebar .mf-head,
.sidebar .mf-sortrow { display: none; }

@media (max-width: 940px) {
  /* --- 売場サイドバー＝下からのシート（記事の .sidebar は従来どおり積む） --- */
  .sidebar--shop {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0; /* フロスト島の周囲から背面が見えないよう画面下端まで閉じる */
    height: auto;
    /* 内容の見える上端は従来の54vhのまま。下バー背面の62pxだけ
       シートを下へ延長し、サイトの流れが見える隙間を塞ぐ。 */
    max-height: calc(54vh + 62px);
    z-index: 1200;
    border: 0;
    border-radius: 18px 18px 0 0;
    background: var(--surface, #fff);
    box-shadow: 0 -22px 50px -16px rgba(16, 18, 28, .5);
    /* 62px=島の上端、22px=従来の下余白。内容は下バーの裏へ潜らせない。 */
    padding: 0 var(--padx) calc(84px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    transform: translateY(calc(100% + 90px));
    transition: transform .26s cubic-bezier(.22, .61, .36, 1);
  }
  body.mf-filters-open .sidebar--shop { transform: translateY(0); }

  /* シート見出し（注入）。グリップ＋タイトル＋件数＋重設＋✕。上部に貼り付く。 */
  .sidebar--shop .mf-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 0 10px;
    margin-bottom: 2px;
    background: var(--surface, #fff);
    border-bottom: 1px solid var(--line);
    touch-action: none; /* 見出し帯＝ドラッグ面（グリップを下へなぞる＝閉じる）。スクロールに奪わせない */
  }
  .sidebar--shop .mf-grip {
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: #d7d7dd;
  }
  .sidebar--shop .mf-title { font-size: 16px; font-weight: 700; color: var(--ink); }
  .sidebar--shop .mf-count { font-size: 13px; font-weight: 400; color: var(--muted); }
  .sidebar--shop .mf-reset {
    margin-left: auto;
    border: 0;
    background: none;
    color: var(--blue);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 6px;
  }
  .sidebar--shop .mf-close {
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
  }

  /* --- 排序：篩選シート上部に同居するピル列（≤940 のみ表示） --- */
  .sidebar--shop .mf-sortrow {
    display: block;
    padding: 10px 0 11px;
    border-bottom: 1px solid var(--line);
  }
  .sidebar--shop .mf-sortrow-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 9px;
    font-size: 13px;
    font-weight: 400;
    color: var(--ink);
  }
  .sidebar--shop .mf-sortrow-label svg { width: 15px; height: 15px; }
  .sidebar--shop .mf-sortrow-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .sidebar--shop .mf-sortpill {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 12px;
    background: var(--surface, #fff);
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
  }
  .sidebar--shop .mf-sortpill[aria-pressed="true"] {
    border-color: var(--blue);
    color: var(--blue);
    font-weight: 700;
    background: color-mix(in srgb, var(--blue) 7%, var(--surface, #fff));
  }

  /* --- 下バー＝フロストの一体島（案3 V2+V3）。地は透明で、島だけが浮く --- */
  .mf-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1300;
    box-sizing: border-box;
    /* 下12px＝島の下端の浮き。島(50px)の上端が画面下から 62px に来る＝シート/暗幕の bottom:62 と一致。 */
    padding: 8px var(--padx) calc(12px + env(safe-area-inset-bottom, 0px));
    background: transparent;
    pointer-events: none; /* 透明な余白はタップを透過。拾うのは島だけ。 */
    transition: transform .25s ease;
  }
  /* スクロールで引っ込める／シート開中・ドロワー開中は出さない判断は JS。is-hidden で下げる。 */
  .mf-bar.is-hidden { transform: translateY(calc(100% + 6px)); }
  /* カート/詳細ドロワーが開いている間は下バーを隠す（重なり防止）。 */
  body:has(#cartDrawer.open) .mf-bar,
  body:has(#detailDrawer.open) .mf-bar { transform: translateY(calc(100% + 6px)); pointer-events: none; }

  /* 1枚のすりガラス島。ヘッダーと同素材で画面全体の質感をそろえる。 */
  .mf-island {
    flex: 1;
    pointer-events: auto;
    display: flex;
    align-items: stretch;
    height: 50px;
    border-radius: 16px;
    overflow: hidden;
    background: color-mix(in srgb, var(--surface, #fff) 86%, transparent);
    backdrop-filter: saturate(1.18) blur(14px);
    -webkit-backdrop-filter: saturate(1.18) blur(14px);
    border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
    box-shadow: 0 12px 30px -14px rgba(20, 24, 40, .34);
  }

  /* 仕切り線（左右セグメントの境目） */
  .mf-divide {
    flex: none;
    align-self: center;
    width: 1px;
    height: 24px;
    background: var(--line);
  }

  /* --- 篩選セグメント（左・内容なりの幅） --- */
  .mf-trigger {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
  }
  .mf-trigger-ic { position: relative; flex: none; display: inline-flex; }
  .mf-trigger-ic svg { width: 18px; height: 18px; }
  .mf-caret { width: 13px; height: 13px; color: var(--muted); transition: transform .2s ease; }
  .mf-trigger.is-active .mf-trigger-ic { color: var(--blue); }
  .mf-trigger.is-open { background: color-mix(in srgb, var(--blue) 8%, transparent); color: var(--blue); }
  .mf-trigger.is-open .mf-caret { color: var(--blue); transform: rotate(180deg); }

  /* 篩選バッジ（アイコン右上・適用中の数）。カート側と同じ作法＝左右対称。 */
  .mf-badge {
    position: absolute;
    top: -6px;
    right: -7px;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 999px;
    background: var(--blue);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--surface, #fff);
  }
  .mf-badge.show { display: inline-flex; }

  /* --- カートセグメント（右・残り全部） --- */
  .mf-cart {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    text-align: left;
  }
  /* カートアイコン＋右上の商品数バッジ（篩選バッジと同じ作法） */
  .mf-cart-ic { position: relative; flex: none; display: inline-flex; align-items: center; }
  .mf-cart-ic svg { width: 21px; height: 21px; }
  .mf-cart-num {
    position: absolute;
    top: -6px;
    right: -7px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 999px;
    background: var(--blue);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--surface, #fff);
  }
  .mf-cart-num.show { display: inline-flex; }
  .mf-cart-label { font-weight: 400; color: var(--ink); }

  /* 金額チップ（V3）＝淡い青＋「›」。右端へ寄せて「押して進む」合図に。 */
  .mf-cart-chip {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 5px 8px 5px 11px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue) 11%, var(--surface, #fff));
    color: var(--blue);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
  }
  .mf-cart-chip svg { width: 13px; height: 13px; flex: none; }
  .mf-cart-total { white-space: nowrap; }
  /* 空カート＝主張しない（チップと数バッジを伏せ、ラベルだけグレーに）。タップで空状態のドロワー。 */
  .mf-cart.is-empty .mf-cart-chip { display: none; }
  .mf-cart.is-empty .mf-cart-label { color: var(--muted); }

  /* --- 薄い暗幕。見た目だけにし、タッチは背面の売場へ完全に透過させる。 --- */
  .mf-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1150;
    background: rgba(16, 18, 28, .22);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
  .mf-scrim.show { opacity: 1; }

  /* 排序は篩選シートへ統合したので、一覧上のセグメントは隠す（件数は残す）。 */
  #sortPills { display: none; }

  /* 最後の商品の下クリアランスは既存 .product-field の padding-bottom:72px が
     下バー(62px)を上回るので別途不要（body:has(.page-grid) が body 余白を 0 に固定するため
     body へ足しても効かない）。 */

  /* reduced-motion 配慮 */
  @media (prefers-reduced-motion: reduce) {
    .sidebar--shop,
    .mf-bar { transition: none; }
  }
}

/* ========================================================================
   ハンバーガーメニュー（モバイル・右スライドの引き出し）
   マークアップは design-chrome.js（mountMenu）が注入。中身の正本は NAV 配列。
   開閉ボタン(.icon-menu)はモバイルのみ表示なので、この引き出しも実質モバイル専用。
   z-index はモバイル下バー(1300)より前面＝どの重なりでも最前で開く。
   ======================================================================== */
.hm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: rgba(20, 22, 26, .42);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.hm-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

.hm-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1510;
  width: min(80vw, 310px);
  display: flex;
  flex-direction: column;
  /* 白（--surface）で、地の --paper より半歩明るく浮かせる。左の境界線は引かず、
     影だけで手前にあることを示す＝線が増えない（2026-08-20 本城さん決定 案④）。 */
  background: var(--surface);
  box-shadow: -24px 0 60px rgba(16, 18, 22, .14);
  transform: translateX(102%);
  transition: transform .22s ease;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.hm-drawer.open {
  transform: none;
}

/* 頭は「選單」を小さく字間を開けて置くだけ。太い見出しにしない＝中身が主役。 */
.hm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 22px 12px;
  font-size: 15px;
}

.hm-head strong {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .24em;
  color: var(--muted);
}

.hm-close {
  border: 0;
  background: transparent;
  font-size: 16px;
  line-height: 1;
  color: var(--ink);
  opacity: .45;
  padding: 4px 8px;
  cursor: pointer;
}

.hm-nav {
  display: flex;
  flex-direction: column;
  padding: 2px 0;
  overflow-y: auto;
}

/* 1行＝絵記号＋見出し＋一行の説明。枠も当たりも置かず、細い線と余白だけで整える。 */
.hm-nav a {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 22px;
  color: var(--ink);
}

/* 仕切りは端まで引かず内側だけ（先頭行の上には引かない）。 */
.hm-nav a:not(:first-of-type)::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 1px;
  background: color-mix(in srgb, var(--line) 55%, transparent);
}

/* 絵記号は Phosphor の単一マスク。どの絵を出すかは a 側の --hm-ico で決める
   （＝この1本のルールだけで全項目に効く）。 */
.hm-ico {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  background: var(--muted);
  -webkit-mask: var(--hm-ico) center / contain no-repeat;
  mask: var(--hm-ico) center / contain no-repeat;
}

.hm-nav [data-hm-ico="all"]    { --hm-ico: var(--ph-cat-all); }
.hm-nav [data-hm-ico="shoe"]   { --hm-ico: var(--ph-cat-shoe); }
.hm-nav [data-hm-ico="pin"]    { --hm-ico: var(--ph-pin); }
.hm-nav [data-hm-ico="team"]   { --hm-ico: var(--ph-team); }
.hm-nav [data-hm-ico="star"]   { --hm-ico: var(--ph-star); }
.hm-nav [data-hm-ico="shield"] { --hm-ico: var(--ph-shield); }
.hm-nav [data-hm-ico="news"]   { --hm-ico: var(--ph-megaphone); }

.hm-lb {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.35;
}

.hm-note {
  display: block;
  font-style: normal;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.5;
}

.hm-nav a[aria-current="page"] {
  color: var(--blue);
}

.hm-nav a[aria-current="page"] .hm-ico {
  background: var(--blue);
}

.hm-nav a[aria-current="page"] .hm-note {
  color: color-mix(in srgb, var(--blue) 55%, var(--muted));
}

/* 足元＝會員・收藏・購物車への近道。上部アイコンと同じ行き先だが、
   選單を開いたまま迷わないための出口として置く。 */
.hm-foot {
  margin-top: auto;
  padding: 10px 28px 22px;
}

.hm-quick-row {
  display: flex;
  justify-content: space-between;
}

/* ≡メニュー内の言語3択（ピル型・選択中が白く浮く） */
.hm-lang {
  display: flex;
  gap: 4px;
  margin: 0 0 16px;
  padding: 4px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.hm-lang button {
  flex: 1;
  min-height: 36px;
  padding: 0 4px;
  white-space: nowrap;
  border: 0;
  border-radius: 9px;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}
.hm-lang button[aria-current="true"] {
  background: var(--surface, #fff);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .14);
}

.hm-quick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
}

.hm-quick .hm-ico {
  width: 19px;
  height: 19px;
  margin-top: 0;
}

.hm-quick[data-hm-ico="user"]  { --hm-ico: var(--ph-user); }
.hm-quick[data-hm-ico="heart"] { --hm-ico: var(--ph-heart); }
.hm-quick[data-hm-ico="cart"]  { --hm-ico: var(--ph-cart); }

@media (prefers-reduced-motion: reduce) {
  .hm-drawer,
  .hm-backdrop { transition: none; }
}

/* 動きを減らす設定の端末では、追従ヘッダーの滑りだけ止める（出る/隠れるは同じ）。 */
@media (max-width: 940px) and (prefers-reduced-motion: reduce) {
  .top-shell {
    transition: none;
  }
}