/* =====================================================================
   スマホ・タブレット：ヘッダー下段のカテゴリーバー
   980px以下では上段のナビが隠れるので、代わりにここへ全カテゴリーを並べる
   ===================================================================== */
.mobile-nav{ display:none; }

@media (max-width:980px){
  :root{ --header-h:112px; }
  header.site-header .header-inner{ height:66px; }
  .mobile-nav{
    display:flex;
    gap:6px;
    height:46px;
    align-items:center;
    padding:0 16px 8px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    /* 端を少しぼかして、横に続いていることを伝える */
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
  }
  .mobile-nav::-webkit-scrollbar{ display:none; }
  .mobile-nav a{
    flex:none;
    display:inline-flex;
    align-items:center;
    gap:6px;
    height:32px;
    padding:0 12px;
    border:1px solid var(--border);
    border-radius:3px;
    background:var(--surface);
    font-size:13px;
    font-weight:500;
    color:var(--text-secondary);
    white-space:nowrap;
    transition:color .2s ease, border-color .2s ease, background .2s ease;
  }
  .mobile-nav a::before{
    content:"";
    width:6px; height:6px;
    border-radius:1px;
    background:var(--nav-color, var(--theme));
    opacity:.8;
  }
  .mobile-nav a.is-active{
    color:var(--text-primary);
    border-color:var(--nav-color, var(--theme));
    background:color-mix(in oklab, var(--nav-color, var(--theme)) 12%, var(--surface));
  }
}
@media (max-width:640px){
  .brand-eyebrow{ font-size:9px; }
}