/* ==========================================================================
   MNM 商品詳細ページ & カートUI 完全統合スタイル（完全差し替え版）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PC 2カラムレイアウト & 右カラムSticky追従
   -------------------------------------------------------------------------- */
/* コンテナ全体 */
.fs-l-pageMain .fs-c-productMainInfo,
.fs-l-pageMain .fs-c-productDetailInfo {
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 38px;
    padding-right: 38px;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    color: #000;
    line-height: 1.6;
    letter-spacing: 0.02em;
}

/* PC表示時：横2列レイアウトの右側グループ（商品情報エリア）に追従を設定 */
@media (min-width: 768px) {
    .fs-l-pageMain .fs-c-productMainInfo__secondary,
    .fs-l-pageMain .fs-c-productDetailInfo__secondary {
        position: sticky;
        top: 130px; /* ヘッダー高さ + 余白 */
        max-height: calc(100vh - 150px);
        overflow-y: auto;
        padding-right: 12px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .fs-l-pageMain .fs-c-productMainInfo__secondary::-webkit-scrollbar,
    .fs-l-pageMain .fs-c-productDetailInfo__secondary::-webkit-scrollbar {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   2. システム標準パーツのタイポグラフィ（「権威化しない」「説明しない」デザイン）
   -------------------------------------------------------------------------- */
/* 商品名 */
.fs-c-productNameHeading,
.fs-c-productNameHeading__name,
.fs-c-productName {
    font-size: 20px !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
    color: #000 !important;
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
}

/* 価格 */
.fs-c-productPrice,
.fs-c-productPrice__price {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #000 !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 24px !important;
}
.fs-c-productPrice__tax {
    font-size: 11px !important;
    color: #666 !important;
    font-weight: normal !important;
}

/* 独自コメント1（キャッチコピー ＆ リード文） */
.fs-c-productComment--1,
.mnm-concept-area {
    font-size: 13px !important;
    line-height: 1.8 !important;
    color: #111 !important;
    margin-bottom: 32px !important;
}

/* --------------------------------------------------------------------------
   3. カート & バリエーション選択（カラー/サイズ）パーツのフラット化
   -------------------------------------------------------------------------- */
.fs-c-productCart {
    margin-bottom: 32px !important;
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

/* バリエーション選択テーブル */
table.fs-c-productVariationTable {
    width: 100% !important;
    border: none !important;
    border-collapse: collapse !important;
    margin-bottom: 20px !important;
}
.fs-c-productVariationTable th,
.fs-c-productVariationTable td {
    border: none !important;
    background: transparent !important;
    padding: 8px 0 !important;
    font-size: 12px !important;
    color: #000 !important;
}

/* バリエーション（カラー・サイズ）プルダウン選択肢 */
select.fs-c-productVariation__select {
    width: 100% !important;
    height: 48px !important;
    padding: 0 16px !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    background-color: #fff !important;
    font-size: 12px !important;
    letter-spacing: 0.05em !important;
    color: #000 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 12px !important;
    cursor: pointer;
}
select.fs-c-productVariation__select:focus {
    outline: none !important;
}

/* Add to Cart ボタン */
.fs-c-cartButton__button {
    display: block !important;
    width: 100% !important;
    height: 52px !important;
    line-height: 52px !important;
    background-color: #000 !important;
    color: #fff !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    text-align: center !important;
    transition: all 0.2s ease !important;
    cursor: pointer;
}
.fs-c-cartButton__button:hover {
    background-color: #fff !important;
    color: #000 !important;
}

/* 入出荷予定日・予約コメント・各種表示パーツの調整 */
.fs-c-productReservation,
.fs-c-productShippingDate,
.fs-c-productNotice {
    font-size: 12px !important;
    color: #333 !important;
    margin-bottom: 16px !important;
}

/* --------------------------------------------------------------------------
   4. アコーディオン & セットアップ案内 (フリーパーツ用)
   -------------------------------------------------------------------------- */
.mnm-accordion-wrapper {
    margin-top: 32px;
}
.mnm-accordion {
    border-top: 1px solid #e1e1e1;
}
.mnm-accordion details {
    border-bottom: 1px solid #e1e1e1;
}
.mnm-accordion summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    list-style: none;
    font-weight: 500;
}
.mnm-accordion summary::-webkit-details-marker {
    display: none;
}
.mnm-accordion summary::after {
    content: '+';
    font-size: 16px;
    font-weight: 300;
    color: #000;
}
.mnm-accordion details[open] summary::after {
    content: '−';
}
.mnm-accordion-content {
    padding-bottom: 20px;
    font-size: 12px;
    color: #333;
    line-height: 1.7;
}
.mnm-accordion-content p {
    margin-bottom: 12px;
}
.mnm-accordion-content ul {
    list-style: disc;
    padding-left: 18px;
    margin-bottom: 12px;
}

/* セットアップリンク */
.mnm-setup-link {
    margin-top: 36px;
    padding-top: 18px;
    border-top: 1px solid #000;
}
.mnm-setup-link a {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    letter-spacing: 0.05em;
    color: #000;
    text-decoration: none;
}
.mnm-setup-link a:hover {
    opacity: 0.6;
}

/* --------------------------------------------------------------------------
   5. スマホ（SP）レスポンシブ (1カラム化)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .fs-l-pageMain .fs-c-productMainInfo,
    .fs-l-pageMain .fs-c-productDetailInfo {
        padding-left: 16px;
        padding-right: 16px;
    }
    .fs-l-pageMain .fs-c-productMainInfo__secondary,
    .fs-l-pageMain .fs-c-productDetailInfo__secondary {
        position: static !important;
        max-height: none !important;
        overflow-y: visible !important;
        padding-right: 0 !important;
    }
}

/* --------------------------------------------------------------------------
   バリエーション選択（サイズ・カラー）の選択中カラーをブルーからグレーに変更
   -------------------------------------------------------------------------- */

/* 1. 選択されたパネル（ボタン）の背景色をグレーに変更 */
.fs-c-variationPanelList__radio:checked + .fs-c-variationPanelList__panel,
.fs-c-variationPanelList__radio:checked + .fs-c-variationPanelList__panel .fs-c-variationPanelList__panel__content {
    background: #666666 !important;
    background-color: #666666 !important;
    border-color: #666666 !important;
}

/* 2. 選択中のボタン内の文字色（S, 在庫切れ, BLACKなど）を白文字にする */
.fs-c-variationPanelList__radio:checked + .fs-c-variationPanelList__panel,
.fs-c-variationPanelList__radio:checked + .fs-c-variationPanelList__panel *,
.fs-c-variationPanelList__radio:checked + .fs-c-variationPanelList__panel .fs-c-variationPanelList__panel__content * {
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   バリエーション画像削除 & サムネイル下テキストの非表示
   -------------------------------------------------------------------------- */

/* 1. カラー選択ボタン内のサムネイル画像を消す */
.fs-c-variationPanelList__panel img,
.fs-c-productVariation__image {
    display: none !important;
}

/* 2. 商品メイン画像下のサムネイルについている英語テキスト（BLACK等）を消す */
figcaption.fs-c-productThumbnail__image__caption {
    display: none !important;
}

/* --------------------------------------------------------------------------
   カラー選択肢の枠の高さをサイズ選択肢に合わせる設定
   -------------------------------------------------------------------------- */

/* 1. パネル全体の最小高さを揃え、余白・表示位置を最適化 */
.fs-c-variationPanelList__panel__content {
    min-height: 56px !important;
    height: 56px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 8px !important;
    box-sizing: border-box !important;
}

/* 2. 画像表示エリアの完全非表示（高さ確保の干渉防止） */
.fs-c-variationPanelList__panel__image {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
}

/* --------------------------------------------------------------------------
   バリエーション選択テキストの完全中央揃え（改行時対応）
   -------------------------------------------------------------------------- */

/* ラベルテキスト（「ECLIPSE YELLOW」など）を常に幅100%・中央揃えにする */
.fs-c-variationPanelList__panel__label {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

/* 子要素テキストも一括で中央揃えを指定 */
.fs-c-variationPanelList__panel__content,
.fs-c-variationPanelList__panel__content * {
    text-align: center !important;
}

/* ドロワーメニューの「Category」表示を消す */
.fs-p-drawer__heading,
.fs-p-drawer__buttonContainer {
    display: none !important;
}


/* 商品の空欄列を自動で非表示にする */
.mnm-accordion details:has(.mnm-accordion-content:empty) {
    display: none;
}
.mnm-setup-link:empty {
    display: none;
}

/* 商品個別送料パーツ 非表示 */
.fs-c-productPostage{display:none}

/* 商品送料無料パーツ 移動 */
.fs-c-productPrices {
    display: inline-flex;
    width: auto;
    vertical-align: baseline;
}
.mnm-shipping-free {
    display: inline-flex;
    margin-left: 8px;
    font-size: 14px;
    vertical-align: baseline;
}

/* =========================================================
   カテゴリーページ 商品一覧 カスタマイズ
   テーマのオリジナルCSSの末尾に追記
   ========================================================= */

/* ---- 調整値はここだけ触れば済むようにまとめる ---------- */
:root {
  --pl-name-size:     13px;  /* 商品名フォントサイズ（価格と同値にする） */
  --pl-name-lh:       1.4;   /* 商品名の行間 */
  --pl-cart-padding:  6px;   /* カートに入れるボタンの上下パディング */
  --pl-control-gap:   4px;   /* 価格〜カートボタン間の余白 */
  --pl-icon-size:     28px;  /* ＋アイコンの直径 */
  --pl-icon-offset:   8px;   /* 画像の端からのアイコン位置 */
}
/* -------------------------------------------------------- */

/* =========================================================
   カテゴリーページ 商品一覧 カスタマイズ
   テーマのオリジナルCSSの末尾に追記
   ========================================================= */

/* ---- 調整値はここだけ触れば済むようにまとめる ---------- */
:root {
  --pl-name-size:     13px;  /* 商品名フォントサイズ（価格と同値） */
  --pl-name-lh:       1.4;   /* 商品名の行間 */
  --pl-cart-padding:  6px;   /* カートに入れるボタンの上下パディング */
  --pl-control-gap:   4px;   /* 価格〜カートボタン間の余白 */
  --pl-icon-size:     32px;  /* ＋アイコンの直径 */
  --pl-icon-offset:   10px;  /* 画像の端からのアイコン位置 */
}
/* -------------------------------------------------------- */


/* 1. 商品名を価格と同サイズまで縮小
   ------------------------------------------------------ */
.fs-c-productListItem__productName,
.fs-c-productListItem__productName .fs-c-productName__name {
  font-size: var(--pl-name-size);
  line-height: var(--pl-name-lh);
}


/* 2. 虫眼鏡アイコンを「＋」に変更し、写真の上に重ねる
   ------------------------------------------------------
   position:absolute は基準要素の構造に依存して破綻するため、
   負のマージンでボタンを画像の上へ引き上げる方式にしている。
   引き上げ量 = アイコン直径 + 画像端からの距離。
   ------------------------------------------------------ */

.fs-c-productListItem__viewMoreImageButton {
  position: relative;   /* 重なり順の基準（配置には使わない） */
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  margin: calc(-1 * (var(--pl-icon-size) + var(--pl-icon-offset)))
          var(--pl-icon-offset)
          0
          0;
  padding: 0;
  pointer-events: none;  /* 帯全体が画像リンクのクリックを奪わないように */
}

/* ボタン本体だけクリックを受け付ける */
.fs-c-productListItem__viewMoreImageButton > * {
  pointer-events: auto;
}

/* 丸ボタン化 */
.fs-c-productListItem__viewMoreImageButton .fs-c-button--viewMoreImage,
.fs-c-productListItem__viewMoreImageButton button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pl-icon-size);
  height: var(--pl-icon-size);
  min-width: 0;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 50%;
  background-color: #fff;
  background-image: none;  /* 元アイコンが画像指定だった場合の保険 */
  color: #000;             /* theme のリンク色（青）の継承を止める */
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

/* 虫眼鏡グリフを「＋」に差し替え */
.fs-c-productListItem__viewMoreImageButton button::before {
  font-family: inherit;    /* アイコンフォントを解除 */
  content: "+";
  font-size: calc(var(--pl-icon-size) * .6);
  font-weight: 300;
  line-height: 1;
  color: inherit;
}

/* 元アイコンが ::after 側で描画されている場合の打ち消し */
.fs-c-productListItem__viewMoreImageButton button::after {
  content: none;
}


/* 3. 「カートに入れる」ボタンの上下余白を圧縮
   ------------------------------------------------------ */
.fs-c-productListItem__control {
  margin-top: var(--pl-control-gap);
  margin-bottom: 0;
}

.fs-c-productListItem__control .fs-c-button--addToCart--list {
  padding-top: var(--pl-cart-padding);
  padding-bottom: var(--pl-cart-padding);
}


/* 4. アイテム間の区切り線を削除
   ------------------------------------------------------ */
.fs-c-productList__list,
.fs-c-productList__list__item,
.fs-c-productListItem {
  border-top: none;
  border-bottom: none;
}


/* 5.（任意）商品名の行数差でカードの高さがずれるのを防ぐ
   ------------------------------------------------------
   1行の商品名と2行の商品名が混在すると価格とカートボタンの
   位置が左右でずれる。2行ぶんの高さを確保して揃える場合は
   下のコメントを外す。
   ------------------------------------------------------ */
/*
.fs-c-productListItem__productName {
  min-height: calc(var(--pl-name-size) * var(--pl-name-lh) * 2);
}
*/

/* ---- 追記：画像〜商品名の余白 ---------------------------- */
:root {
  --pl-name-gap: 12px;   /* 画像下端から商品名までの見た目の余白 */
}

/* アイコンの引き上げ量はそのままに、後続要素だけ押し下げる
   （2番のブロックの margin 一括指定の下辺だけを上書きする） */
.fs-c-productListItem__viewMoreImageButton {
  margin-bottom: calc(var(--pl-icon-offset) + var(--pl-name-gap));
}


/* =========================================================
   商品ページ 画像の縦横比を 4:5 に統一
   テーマのオリジナルCSSに追記
   ========================================================= */

:root {
  --pd-img-ratio: 4 / 5;     /* 統一したい縦横比 */
  --pd-img-bg:    #f0f0f0;   /* 商品写真の背景色に合わせる（要確認） */
}


/* ---- メイン画像 ---------------------------------------- */
.fs-c-productMainImage__image,
.fs-c-productCarouselMainImage__image {
  display: block;
  aspect-ratio: var(--pd-img-ratio);
  background-color: var(--pd-img-bg);
  overflow: hidden;
}

.fs-c-productMainImage__image img,
.fs-c-productCarouselMainImage__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* cover にすると上下が切れるので contain 固定 */
}


/* ---- サムネイル ---------------------------------------- */
.fs-c-productThumbnail__image,
.fs-c-productCarouselMainImage__expandButton + * .fs-c-productThumbnail__image {
  display: block;
  aspect-ratio: var(--pd-img-ratio);
  background-color: var(--pd-img-bg);
  overflow: hidden;
}

.fs-c-productThumbnail__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* ---- 拡大表示（ライトボックス）-------------------------
   拡大時は元画像をそのまま見せたいので枠は固定しない。
   拡大側も4:5に揃える場合は下のコメントを外す。
   ------------------------------------------------------ */
/*
.fs-c-productImageModal__image,
.fs-c-productImageModal__close + * img {
  aspect-ratio: var(--pd-img-ratio);
  background-color: var(--pd-img-bg);
  object-fit: contain;
}
*/

/* =========================================================
   空のページ見出しを非表示（横棒・余白ごと消える）
   ========================================================= */
.fs-c-heading--page:empty {
  display: none;
}

/* LOOKBOOKページの上部余白を詰める（必要に応じて）
   .mnm-lb を直接の子に持つ pageMain だけに限定 */
.fs-l-pageMain:has(> .mnm-lb) {
  padding-top: 0;
}