/* =====================================================
   patterns.css — Menu open/close patterns
   Depends on: variables.css, layout.css
   ===================================================== */

/* 初期は非表示（layout.cssで .mega-menu {display:none}） */

/* --- モバイル：.is-open はJSが付与する想定（念のため） --- */
.mnav-sheet[hidden] { display: none !important; }
.mnav-sheet[aria-hidden="false"] { display: flex; }

/* シート上端の角丸は不要 */
.mnav-sheet{
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* タブ切り替え（モバイルメニュー） */
.mnav-tabs {
  display: flex;
  border-bottom: 1px solid var(--c-border);
}

.mnav-tab {
  flex: 1;
  padding: .75rem 1rem;
  background: transparent;
  border: 0;
  font-weight: var(--fw-medium);
  color: #666;                 /* 通常：グレー */
}

/* アクティブは文字色のみ変更（下線や背景は付けない） */
.mnav-tab.is-active {
  color: var(--c-brand-blue);
}

/* タブの下線は不要なので削除（もし残っていたら念のため打ち消し） */
.mnav-tab,
.mnav-tab.is-active {
  border-bottom: 0 !important;
}

.mnav-panel { display: none; }
.mnav-panel.is-active { display: block; }

/* オーバーレイ（hidden解除はJS） */
.mnav-overlay[hidden]{ display:none !important; }

/* ===== Breadcrumb spacing ===== */
nav.woocommerce-breadcrumb,
.breadcrumb {
  display: block;
  padding-inline: var(--space-3);   /* 左右12px（モバイル） */
  margin-block: var(--space-2);     /* 上下8px：必要なら調整 */
}

@media (min-width: 768px){
  nav.woocommerce-breadcrumb,
  .breadcrumb {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-gutter); /* 16px */
  }
}