/* =========================================================
   0) 共通：コンテナ最大幅（全ページ）
   ========================================================= */
.ec-layoutRole .ec-layoutRole__contents,
.ec-headerNaviRole,
.ec-headerRole,
.ec-footerRole__inner{
  width: 100%;
  max-width: 1600px;     /* 1280 / 1600 など好みで */
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* =========================================================
   1) 共通：フォントサイズを変数で一括管理
   ========================================================= */
:root{
  --fs-base: 0.875rem; /* 14px相当（root=16px想定） */
  --lh-base: 1.6;

  /* Bootstrap系変数（テーマが var(--bs-body-font-size) を使う場合に効く） */
  --bs-body-font-size: var(--fs-base);
  --bs-body-line-height: var(--lh-base);

  /* 左カラムカテゴリ見た目 */
  --cat-parent-fs: 0.95rem;
  --cat-child-fs:  0.90rem;
  --cat-radius: 8px;
  --cat-sep: rgba(0,0,0,.10);
  --cat-bg-parent: rgba(0,0,0,.03);
  --cat-bg-hover:  rgba(0,0,0,.06);
  --cat-active-bg: rgba(45,130,255,.10);
  --cat-active-bar: rgba(45,130,255,.55);
}

body{
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

/* （任意）見出し抑制 */
h1{ font-size: 1.4rem; }
h2{ font-size: 1.2rem; }
h3{ font-size: 1.05rem; }

/* =========================================================
   2) ヘッダー：右側ナビを「2段」固定（PCのみ）
   上段：お問い合わせ〜カタログ（.ec-headerExtraNav）
   下段：新規会員登録/お気に入り/ログイン（login.twig）＋カート
   ※ 既存の navRow / ExtraNav / LoginWrap を利用
   ========================================================= */
@media (min-width: 768px){

  /* 右側全体を2段グリッド（左=ナビ群 / 右=カート） */
  .ec-headerNaviRole__right{
    display: grid !important;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 8px;
    align-items: center;
    justify-content: end;
    justify-items: end;
  }

  /* nav（上段＋下段）を左列に固定 */
  .ec-headerNaviRole__right .ec-headerNaviRole__nav{
    grid-column: 1;
    grid-row: 1 / 3;
    display: block !important;
    min-width: 0;
  }

  /* cart は下段右列 */
  .ec-headerNaviRole__right .ec-headerRole__cart{
    grid-column: 2;
    grid-row: 2;
    display: flex !important;
    align-items: center;
    white-space: nowrap;
    justify-self: end;
  }

  /* navRow を2段化：wrapさせて上段(ExtraNav)を100%に */
  .ec-headerNaviRole__right .ec-headerNaviRole__navRow{
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    column-gap: 12px;
    row-gap: 8px;
    min-width: 0;
  }

  /* 上段：追加リンクを1行・全幅 */
  .ec-headerNaviRole__right .ec-headerExtraNav{
    flex: 0 0 100%;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .ec-headerNaviRole__right .ec-headerExtraNav__item{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }

  /* 下段：login.twig 側を横並び維持 */
  .ec-headerNaviRole__right .ec-headerLoginWrap{
    display: flex !important;
    align-items: center;
    white-space: nowrap;
    min-width: 0;
  }

  .ec-headerNaviRole__right .ec-headerLoginWrap .ec-headerNav,
  .ec-headerNaviRole__right .ec-headerLoginWrap .ec-headerNav--inline{
    display: flex !important;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .ec-headerNaviRole__right .ec-headerLoginWrap .ec-headerNav__item,
  .ec-headerNaviRole__right .ec-headerLoginWrap a{
    white-space: nowrap;
  }
}

/* =========================================================
   3) 注文画面：サブ見出し微調整
   ========================================================= */
body#page_shopping .ec-rectHeading--sub{ margin: 0 0 .5em; }
body#page_shopping .ec-rectHeading--sub h3{
  font-size: 14px;
  margin: 0;
}

/* =========================================================
   4) 注文画面：配送/支払 選択カード（.ec-choiceCard）
   - 配送：カード全体クリック（色で選択）
   - 支払：1行目 [名称][手数料] / 2行目以降 [説明/ロゴ]
   ========================================================= */
#page_shopping .ec-choiceCard{
  --cc-gap-x: .6rem;
  --cc-gap-y: .45rem;

  position: relative;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid #e4e4e4;
  border-radius: 6px;
  background: #fafafa;
  overflow: hidden;
}

/* 配送（カードボタン） */
#page_shopping .ec-choiceCard--delivery{
  display: flex;
  flex-direction: column;
  gap: var(--cc-gap-y);
  align-items: flex-start;

  width: 100%;
  text-align: left;
  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
}

/* 配送：選択状態 */
#page_shopping .js-delivery-card.is-selected{
  background: rgba(45,130,255,.10);
}
#page_shopping .js-delivery-card.is-selected .ec-choiceCard__title{ font-weight: 700; }
#page_shopping .js-delivery-card.is-selected .ec-choiceCard__desc{ color: #333; }

/* 配送select本体（Twig側で既に隠していてもOK） */
#page_shopping .js-delivery-select{ display: none; }

/* 支払（2列：手数料右寄せ） */
body[id^="page_shopping"] .ec-choiceCard--payment{
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--cc-gap-x);
  row-gap: var(--cc-gap-y);
  align-items: start;
  cursor: pointer;
}

/* 選択状態の背景レイヤ（:has なしで確実に出す） */
#page_shopping .ec-choiceCard__state{
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
  transition: background .15s ease;
}
#page_shopping .ec-choiceCard__radio:checked + .ec-choiceCard__state{
  background: rgba(45,130,255,.10);
}

/* ラジオ：点は見せない（checked状態だけ利用） */
#page_shopping .ec-choiceCard__radio{
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

/* ラベル：テーマの四角枠(疑似要素)をこのカード内だけ無効化 */
#page_shopping .ec-choiceCard__label{
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
  cursor: pointer;

  display: inline-flex;
  align-items: flex-start;
  gap: .35rem;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#page_shopping .ec-choiceCard__label::before,
#page_shopping .ec-choiceCard__label::after{ content: none !important; }

/* タイトル */
#page_shopping .ec-choiceCard__title{ display: inline; }

/* 手数料（支払のみ） */
#page_shopping .ec-choiceCard__fee{
  grid-column: 2;
  grid-row: 1;
  z-index: 1;
  white-space: nowrap;
  color: #666;
  font-size: .9em;
  align-self: start;
}

/* 説明/ロゴ：2行目以降 */
#page_shopping .ec-choiceCard__desc,
#page_shopping .ec-choiceCard__media{
  grid-column: 1 / -1;
  z-index: 1;
  white-space: pre-line;
}

/* 選択中の文字だけ少し強調 */
#page_shopping .ec-choiceCard__radio:checked ~ .ec-choiceCard__label{ font-weight: 700; }
#page_shopping .ec-choiceCard__radio:checked ~ .ec-choiceCard__desc{ color: #333; }

/* 税率別内訳（税率 0%対象 / 内消費税）を非表示 */
.ec-totalBox__taxRate{ display: none !important; }

/* =========================================================
   5) 左カラムカテゴリ（.ec-categoryNaviRole .ec-itemNav__nav）
   - 親カテゴリは必ず縦1列
   - hover開閉を完全無効化
   - JS付与の is-open / catnav-open の枝だけ展開
   ========================================================= */

/* ルートul：縦並び固定（多列/横並びを潰す） */
.ec-categoryNaviRole .ec-itemNav__nav{
  display: block !important;
  column-count: 1 !important;
  columns: 1 !important;
  column-gap: 0 !important;
}

/* ルートli */
.ec-categoryNaviRole .ec-itemNav__nav > li{
  float: none !important;
  width: auto !important;
  display: block !important;
  break-inside: avoid !important;
  margin: 0 0 6px 0 !important;
}

/* サブメニュー：デフォルト閉じる＋dropdown化を禁止 */
.ec-categoryNaviRole .ec-itemNav__nav li > ul{
  display: none !important;

  position: static !important;
  left: auto !important;
  top: auto !important;

  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;

  margin: 6px 0 10px 0 !important;
  padding-left: 14px !important;
  border-left: 2px solid rgba(0,0,0,.12) !important;
  background: transparent !important;
}

/* open枝だけ表示（高さ潰れ対策で flow-root） */
.ec-categoryNaviRole .ec-itemNav__nav li.is-open > ul,
.ec-categoryNaviRole .ec-itemNav__nav ul.catnav-open{
  display: flow-root !important;
}

/* hoverで開く挙動を完全無効化 */
.ec-categoryNaviRole .ec-itemNav__nav li:hover > ul{ display: none !important; }
.ec-categoryNaviRole .ec-itemNav__nav li.is-open:hover > ul{ display: flow-root !important; }

/* 子カテゴリリンク：見た目補正 */
.ec-categoryNaviRole .ec-itemNav__nav li > ul a{
  display: block !important;
  padding: 6px 0 !important;
  color: #333 !important;
  background: transparent !important;
}

/* 子階層liのfloat等を解除 */
.ec-categoryNaviRole .ec-itemNav__nav li > ul > li{
  float: none !important;
  position: static !important;
  display: block !important;
  height: auto !important;
  overflow: visible !important;
}

/* PC時：子リンクがfloatされているテーマ対策 */
@media (min-width: 768px){
  .ec-categoryNaviRole .ec-itemNav__nav li > ul > li > a{
    float: none !important;
    width: 100% !important;
    background: transparent !important;
    color: #333 !important;
  }
}

/* =========================================================
   6) 左カラムカテゴリ：見た目（ツリーメニュー風）
   ========================================================= */

/* 左寄せ固定 */
.ec-categoryNaviRole .ec-itemNav__nav,
.ec-categoryNaviRole .ec-itemNav__nav a{
  text-align: left !important;
}

/* ルート（親）リンク */
.ec-categoryNaviRole .ec-itemNav__nav > li > a{
  display: block !important;
  font-size: var(--cat-parent-fs) !important;
  font-weight: 700 !important;
  padding: 10px 12px !important;
  border: 1px solid var(--cat-sep) !important;
  border-radius: var(--cat-radius) !important;
  background: var(--cat-bg-parent) !important;
  color: #333 !important;
}

.ec-categoryNaviRole .ec-itemNav__nav > li > a:hover{
  background: var(--cat-bg-hover) !important;
}

/* 子カテゴリのコンテナ（JS側で ul.catnav-submenu を付けている前提） */
.ec-categoryNaviRole .ec-itemNav__nav ul.catnav-submenu{
  margin: 6px 0 10px 8px !important;
  padding: 6px 0 6px 10px !important;
  border-left: 2px solid var(--cat-sep) !important;
}

/* 子カテゴリリンク */
.ec-categoryNaviRole .ec-itemNav__nav ul.catnav-submenu > li > a{
  display: block !important;
  font-size: var(--cat-child-fs) !important;
  font-weight: 400 !important;
  padding: 7px 8px 7px 12px !important;
  border-radius: 6px !important;
  color: #333 !important;
  background: transparent !important;
}
.ec-categoryNaviRole .ec-itemNav__nav ul.catnav-submenu > li > a:hover{
  background: var(--cat-bg-hover) !important;
}

/* 現在選択（JSで catnav-active を付ける想定） */
.ec-categoryNaviRole .ec-itemNav__nav li.catnav-active > a{
  background: var(--cat-active-bg) !important;
  border-left: 3px solid var(--cat-active-bar) !important;
  padding-left: calc(12px - 3px) !important;
}

/* has-child：開閉アイコン */
.ec-categoryNaviRole .ec-itemNav__nav li.has-child > a{
  position: relative !important;
  padding-right: 28px !important;
}
.ec-categoryNaviRole .ec-itemNav__nav li.has-child > a::after{
  content: "▶";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .8em;
  opacity: .55;
}
.ec-categoryNaviRole .ec-itemNav__nav li.has-child.is-open > a::after{
  content: "▼";
  opacity: .70;
}

/* =========================================================
   7) catalogorder（/catalogorder）専用
   ========================================================= */
body[id^="page_catalog_order"] .ec-errorMessage,
body[id^="page_catalog_order"] .ec-errorMessage li,
body[id^="page_catalog_order"] .ec-FormError,
body[id^="page_catalog_order"] .ec-FormError li,
body[id^="page_catalog_order"] ul.ec-errorMessage,
body[id^="page_catalog_order"] ul.ec-errorMessage li{
  color: #d00;
  font-weight: 700;
}

body[id^="page_catalog_order"] .catalogorder-items input,
body[id^="page_catalog_order"] .catalogorder-items select,
body[id^="page_catalog_order"] .catalogorder-items textarea{
  width: 100%;
  box-sizing: border-box;
}

body[id^="page_catalog_order"] .catalogorder-ym,
body[id^="page_catalog_order"] .catalogorder-telSplit{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

body[id^="page_catalog_order"] .catalogorder-telSplit input{
  max-width: 160px;
}

/* =========================================================
   8) 商品詳細（body_class = product_page）
   - 説明ブロックを常に全幅で縦積み
   - 仏具セット画像一覧：2列（300px固定）＋中央寄せ、SPは1列
   ========================================================= */
body.product_page .ec-productRole__description,
body.product_page .spec,
body.product_page .setNote,
body.product_page .bw{
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* 任意：仕様テキスト（商品説明内を <div class="spec">…</div> で囲うと安定） */
body.product_page .spec{
  margin: 10px 0 12px;
  line-height: 1.7;
}

/* 任意：注意文（<p class="setNote">…</p> にすると狙い撃ち） */
body.product_page .setNote{
  margin: 10px 0 6px;
}

/* 仏具セット一覧：2列（固定300px）で間延びを防止 */
body.product_page .bw{
  display: grid !important;
  grid-template-columns: repeat(2, 300px) !important;
  justify-content: center;
  column-gap: 32px;
  row-gap: 22px;
  margin-top: 10px;
}

body.product_page .bi{ text-align:center; }

body.product_page .bi > p{
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.35;
}

body.product_page .bi img{
  width: 300px;
  max-width: 100%;
  height: auto;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 6px;
  cursor: zoom-in;
}

/* SP：1列 */
@media (max-width: 768px){
  body.product_page .bw{
    grid-template-columns: 1fr !important;
    justify-content: stretch;
  }
}
/* === 商品詳細：説明（description）を必ず全幅に戻す（テーマのfloat/widthを無効化） === */
body#page_product_detail .ec-productRole__description{
  display: block !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* === 仏具セット：2列（300px基準）を強制。狭い場合は列が縮む === */
body#page_product_detail .bw{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 300px)) !important; /* 2列固定（必要なら縮む） */
  justify-content: center;
  column-gap: 32px;
  row-gap: 22px;
  margin-top: 10px;
}

/* 画像はセル幅いっぱい（最大300px） */
body#page_product_detail .bw .bi img{
  width: 100%;
  max-width: 300px;
  height: auto;
}

/* SPは1列 */
@media (max-width: 768px){
  body#page_product_detail .bw{
    grid-template-columns: 1fr !important;
    justify-content: stretch;
  }
  body#page_product_detail .bw .bi img{
    width: 300px;
    max-width: 100%;
  }
}
/* .bw の中に紛れ込む <br> をグリッドアイテム化させない */
body#page_product_detail .bw > br{
  display: none !important;
}