/* ============================================================
   Manekineko-AI — Product Page "Refined Kyoto" v4
   WebDAV /content/css/custom.css

   設計原則:
     Phase 1 — 骨格レイアウト（カラム比率・ボタン配置）
     Phase 2 — フォント・色（最小限）
     Phase 3 — 余白・リズム・視線導線

   縦リズム設計（モックv4準拠）:
     brand   → mb:10px   （密）
     title   → mb:20px   line-height:1.45
     price   → mb:28px   （呼吸を入れてCTAゾーンへ）
     options → mb:24px
     ATC btn → padding:20px  mb:10px
     wishlist→ padding:15px
     desc    → mt:36px  pt:36px  border-top

   リズムの考え方:
     上（識別情報）は密に → 下（行動・詳細）は広く
     10 → 20 → 28 → 36 と余白が段階的に広がる
   ============================================================ */


/* ================================================================
   PHASE 1: PDP 骨格レイアウト
   ================================================================ */

/* ── 1-A. カラム比率 58:42 ──────────────────────────────────── */

@media (min-width: 801px) {
  .productView .productView-images {
    width: 58% !important;
  }
  .productView .productView-details {
    width: 42% !important;
    min-width: 0;
    padding-left: 2rem;
    padding-right: 1rem;
  }
}

@media (min-width: 1441px) {
  .productView .productView-images {
    width: 58% !important;
  }
  .productView .productView-details {
    width: 42% !important;
    padding-left: 2.5rem;
    padding-right: 1rem;
  }
}


/* ── 1-B. CTAゾーン構造修正 ──────────────────────────────────
   テーマ既存: add-to-cart-buttons=calc(100%-4.64rem) + wishlist=4.64rem 横並び
   → ATC右にWishlistアイコンがくっつく「不自然な隙間」の正体
   修正: 全て縦積み・全幅に統一
   ──────────────────────────────────────────────────────────── */

/* ATC + ウォレットボタンのコンテナ：全幅化 */
.productView .productView-options .add-to-cart-buttons {
  width: 100% !important;
  float: none !important;
  display: block !important;
}

/* ATC送信ボタンのコンテナ */
.productView .productView-options .form-addToCart {
  width: 100%;
  float: none !important;
  margin-top: 0;
  padding-left: 0;
}

/* ATC送信ボタン本体 */
.productView .productView-options .form-addToCart .button--primary,
.productView .productView-options .form-addToCart #form-action-addToCart {
  width: 100% !important;
  display: block !important;
  border-radius: 0 !important;
  text-align: center;
}

/* Wishlistフォーム：横並びから全幅縦積みに */
.productView .productView-options .form-wishlist {
  display: block !important;
  width: 100% !important;
  float: none !important;
  margin-top: 10px;
}

/* Wishlistボタン：アイコンだけ→テキスト付き全幅に */
.productView .productView-options .form-wishlist .dropdown-menu-button-wishList {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 14px 24px;
  border: 1px solid #E5E2DC !important;
  border-radius: 0;
  background: transparent !important;
}


/* ── 1-C. 説明エリア構造 ────────────────────────────────────── */

.productView-description {
  clear: both;
}

/* Description内のインラインstyle上書き */
.productView-description .productView-description span,
.productView-description .productView-description font {
  font-size: inherit !important;
  font-family: inherit !important;
  line-height: inherit !important;
}


/* ================================================================
   PHASE 2: フォント・色
   ================================================================ */

/* ── 商品タイトル ────────────────────────────────────────────── */
.productView .productView-title {
  font-family: 'Cormorant Garamond', 'Georgia', serif !important;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.5px;
  color: #1A1A18;
  text-transform: none;
}

.productView.uppercaseTitles .productView-title {
  text-transform: none !important;
}

/* ── ブランド名 ──────────────────────────────────────────────── */
.productView .productView-brand {
  font-family: 'Inter', -apple-system, 'Helvetica Neue', sans-serif !important;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #7A7772;
}

/* ── 価格 ────────────────────────────────────────────────────── */
.productView .productView-price {
  font-family: 'Inter', -apple-system, 'Helvetica Neue', sans-serif !important;
  font-weight: 500;
  color: #1A1A18;
  letter-spacing: 0.5px;
}

.productView .productView-price .price--rrp,
.productView .productView-price .price--non-sale {
  color: #AAA8A3;
  text-decoration: line-through;
  font-weight: 400;
}

.productView .productView-price .price--saving {
  color: #B09E7C;
}

/* ── ATCボタンの色 ───────────────────────────────────────────── */
.productView .productView-options .form-addToCart .button--primary,
.productView .productView-options .form-addToCart #form-action-addToCart {
  background-color: #1A1A18 !important;
  border-color: #1A1A18 !important;
  color: rgba(255,255,255,0.9) !important;
  font-family: 'Inter', -apple-system, 'Helvetica Neue', sans-serif !important;
  transition: background-color 0.3s, border-color 0.3s;
}

.productView .productView-options .form-addToCart .button--primary:hover,
.productView .productView-options .form-addToCart #form-action-addToCart:hover {
  background-color: #333331 !important;
  border-color: #333331 !important;
}

/* ── Wishlistボタンの色（Phase3でレイアウト・サイズ指定済み）── */
.productView .productView-options .form-wishlist .dropdown-menu-button-wishList {
  font-family: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  text-transform: uppercase;
  transition: all 0.3s;
}

.productView .productView-options .form-wishlist .dropdown-menu-button-wishList:hover {
  border-color: #AAA8A3 !important;
  color: #4A4845;
}

/* ── フォーム要素 ────────────────────────────────────────────── */
.productView .productView-options .form-input--incrementTotal {
  border-color: #E5E2DC;
  border-radius: 0;
  font-family: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
}

.productView .productView-options .form-label {
  font-family: 'Inter', -apple-system, 'Helvetica Neue', sans-serif !important;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #4A4845;
}

.productView .productView-options .form-input,
.productView .productView-options .form-select {
  font-family: 'Inter', -apple-system, 'Helvetica Neue', sans-serif !important;
  border-color: #E5E2DC;
  border-radius: 0;
}

.productView .productView-options .form-input:focus,
.productView .productView-options .form-select:focus {
  border-color: #B09E7C;
}

/* ── タブ見出し ──────────────────────────────────────────────── */
.productView-description .tabs .tab-title {
  font-family: 'Inter', -apple-system, 'Helvetica Neue', sans-serif !important;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #7A7772;
  transition: color 0.3s;
}

.productView-description .tabs .tab-title:hover {
  color: #1A1A18;
}

.productView-description .tabs .tab.is-active .tab-title {
  color: #1A1A18;
}

.productView-description .tabs .tab.is-active {
  border-top-color: #B09E7C;
  border-top-width: 2px;
}

/* ── レビュー・関連商品 ──────────────────────────────────────── */
.productReviews .page-heading,
.productView-upsell .page-heading {
  font-family: 'Cormorant Garamond', 'Georgia', serif !important;
  font-weight: 400;
  letter-spacing: 1px;
}

.productReviews .page-heading span::after,
.productView-upsell .page-heading span::after {
  border-color: #B09E7C;
}

.productView-upsell .card-title a {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-weight: 400;
  color: #1A1A18;
}

/* ── パンくず ────────────────────────────────────────────────── */
.breadcrumbs .breadcrumb {
  font-family: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 11px;
  color: #AAA8A3;
  letter-spacing: 1px;
}

.breadcrumbs .breadcrumb a {
  color: #AAA8A3;
  transition: color 0.3s;
}

.breadcrumbs .breadcrumb a:hover {
  color: #4A4845;
}

/* ── ギャラリー・サムネイル ──────────────────────────────────
   「静かに切り替わる」雰囲気: ゆっくりしたtransition +
   アクティブ時の繊細なborder
   ──────────────────────────────────────────────────────────── */

/* メイン画像のフェード */
.productView .productView-images .productView-img-container img {
  transition: opacity 0.5s ease;
}

/* サムネイル: 非アクティブは控えめ、ホバーでゆっくり浮かぶ */
.productView .productView-images .productView-thumb {
  opacity: 0.5;
  transition: opacity 0.4s ease, border-color 0.4s ease;
  border-bottom: 2px solid transparent;
}

.productView .productView-images .productView-thumb:hover {
  opacity: 0.8;
}

.productView .productView-images .productView-thumb.is-active {
  opacity: 1;
  border-bottom-color: #1A1A18;
}

/* サムネイル画像リスト全体の余白 */
.productView .productView-images .productView-thumbnails {
  margin-top: 12px;
}


/* ================================================================
   PHASE 3: 余白・リズム・視線導線
   縦リズム: 10 → 20 → 28 → 36（上は密、下は広く）
   ================================================================ */

/* ── 3-A. タイトルの余白設計 ─────────────────────────────────
   呼吸感のある行間 + 下マージンで価格との間に静けさを
   ──────────────────────────────────────────────────────────── */

.productView .productView-title {
  line-height: 1.45 !important;
  margin-bottom: 20px !important;
}

@media (min-width: 801px) {
  .productView .productView-title {
    margin-top: 4px;
    margin-bottom: 24px !important;
  }
}


/* ── 3-B. ブランド → タイトルの接続 ──────────────────────────
   ブランド名はタイトルに寄せる（密の関係）
   ──────────────────────────────────────────────────────────── */

.productView .productView-brand {
  margin-bottom: 10px !important;
}


/* ── 3-C. 価格の存在感と呼吸 ─────────────────────────────────
   タイトルから少し離す → 価格の下にしっかり余白 →
   CTAゾーン（数量・ボタン）への視線移動をスムーズに
   ──────────────────────────────────────────────────────────── */

.productView .productView-price {
  font-size: 20px !important;
  margin-top: 4px;
  margin-bottom: 28px !important;
  padding-bottom: 28px;
  border-bottom: 1px solid #EDEBE6;
}

@media (min-width: 801px) {
  .productView .productView-price {
    font-size: 22px !important;
  }
}


/* ── 3-D. CTAゾーン ──────────────────────────────────────────
   数量 → ATC → Wishlist を1つの視覚ブロックとして設計。
   ATCが主役。周囲に呼吸をもたせて「ここがCTA」と伝える。
   ──────────────────────────────────────────────────────────── */

/* 数量フィールド：CTAゾーンの入口。ラベルを控えめに */
.productView .productView-options .form-field--increments {
  margin-top: 0;
  margin-bottom: 24px;
  padding-top: 0;
}

.productView .productView-options .form-field--increments .form-label {
  margin-bottom: 8px;
  font-size: 11px;
  color: #7A7772;
}

/* ATCボタン：主役
   - padding上下を大きく → 高さで存在感
   - font-sizeを上げすぎない → letter-spacingで上品に
   - 上に少し余白 → 数量との間に「間」を作る */
.productView .productView-options .form-addToCart .button--primary,
.productView .productView-options .form-addToCart #form-action-addToCart {
  padding: 22px 24px !important;
  font-size: 12px !important;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* ATCコンテナ */
.productView .productView-options .form-addToCart {
  margin-bottom: 0;
}

/* Wishlist：ATCの下、控えめに
   テーマ既存の「小さなハートアイコンが右に浮く」を解消済み（Phase1）
   ここではスタイルの統一のみ */
.productView .productView-options .form-wishlist .dropdown-menu-button-wishList {
  font-size: 11px;
  letter-spacing: 2px;
  color: #7A7772;
}

.productView .productView-options .form-wishlist .dropdown-menu-button-wishList .icon svg {
  fill: #7A7772;
  stroke: #7A7772;
  width: 14px;
  height: 14px;
  transition: fill 0.3s, stroke 0.3s;
}

.productView .productView-options .form-wishlist .dropdown-menu-button-wishList:hover .icon svg {
  fill: #4A4845;
  stroke: #4A4845;
}

/* ペイメントボタン（Apple Pay等）: 繊細な区切り */
.productView .productView-options .add-to-cart-wallet-buttons {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #EDEBE6;
}


/* ── 3-E. オプションエリアの下余白 ───────────────────────────
   ボタン群の前にしっかり区切り
   ──────────────────────────────────────────────────────────── */

.productView .productView-options {
  padding-bottom: 24px;
}


/* ── 3-F. スペック行の余白 ───────────────────────────────────
   ラベルと値の行間を整える
   ──────────────────────────────────────────────────────────── */

.productView .productView-details .productView-info-name,
.productView .productView-details .productView-info-value {
  font-size: 14px;
  line-height: 1.8;
  padding: 6px 0;
}


/* ── 3-G. Description 格上げ ─────────────────────────────────
   セクションとしての存在感を出す:
   - 上に余白 + border で区切り
   - 文字サイズを読みやすいレベルに
   - line-height をゆったり
   ──────────────────────────────────────────────────────────── */

/* Descriptionセクション全体 */
article.productView-description {
  margin-top: 36px;
  padding-top: 36px;
}

/* 説明セクション見出し（"Description"等） */
.productView-description .productView-title {
  font-family: 'Inter', -apple-system, 'Helvetica Neue', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #7A7772;
  margin-bottom: 20px !important;
  padding-bottom: 14px;
  border-bottom: 1px solid #EDEBE6;
}

/* Descriptionの本文 */
.productView-description .productView-description {
  font-family: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 15px;
  line-height: 2;
  color: #4A4845;
}

/* タブ内本文 */
.productView-description .tab-content {
  font-family: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 15px;
  line-height: 2;
  color: #4A4845;
  padding: 28px 0 36px;
}

.productView-description .tab-content h2,
.productView-description .tab-content h3,
.productView-description .tab-content h4 {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-weight: 400;
  color: #1A1A18;
  margin-bottom: 12px;
}

.productView-description .tab-content p {
  margin-bottom: 20px;
}


/* ── 3-H. 右カラムの空気感 ───────────────────────────────────
   モックの「静けさ」を構造ではなく余白と密度で再現:
   - 画像上端に揃える
   - rating・細かいUI要素は控えめに
   - 各ブロック間に「間」を持たせる
   ──────────────────────────────────────────────────────────── */

@media (min-width: 801px) {
  .productView .productView-product {
    padding-top: 0;
    margin-top: 0;
  }
}

/* レーティング（星）を控えめに: 存在するが主張しない */
.productView .productView-rating {
  margin-top: 4px;
  margin-bottom: 8px;
  opacity: 0.6;
  transition: opacity 0.3s;
}

.productView .productView-rating:hover {
  opacity: 1;
}

/* Gift wrapping / shipping info: テキストを控えめに */
.productView .productView-options .form-label--alternate {
  font-size: 12px;
  color: #7A7772;
  letter-spacing: 0.5px;
}

/* 右カラム下部 — social links を静かに */
.productView .socialLinks {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #EDEBE6;
  opacity: 0.5;
  transition: opacity 0.3s;
}

.productView .socialLinks:hover {
  opacity: 1;
}


/* ================================================================
   PHASE 4: GreatZakka スタイル — 右カラム短い説明文
   説明文の「Note」以降を抽出し、ATCボタンの下に配置（JSで注入）
   ================================================================ */

/* ── 4-A. 右カラム内の短い説明文 ─────────────────────────────
   GreatZakka風: 購入ブロックの一部として溶け込む
   - 控えめなサイズ
   - 穏やかな色
   - 上下に呼吸
   - 太字なし・箇条書きなし
   ──────────────────────────────────────────────────────────── */

.mnk-short-desc {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #EDEBE6;
  font-family: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 13.5px;
  line-height: 1.9;
  color: #4A4845;
  font-weight: 400;
  letter-spacing: 0.2px;
  max-width: 420px;
}

/* 強調やボールドを打ち消す（穏やかなトーン維持）*/
.mnk-short-desc strong,
.mnk-short-desc b {
  font-weight: 400;
}

/* リンクがあれば控えめに */
.mnk-short-desc a {
  color: #7A7772;
  border-bottom: 1px solid #E5E2DC;
  transition: color 0.3s, border-color 0.3s;
}

.mnk-short-desc a:hover {
  color: #4A4845;
  border-color: #AAA8A3;
}

/* Gift wrapping / shipping info との間 */
.mnk-short-desc + .productView-info-bulkPricing,
.mnk-short-desc ~ .form-label--alternate {
  margin-top: 20px;
}


/* ================================================================
   UTILITY
   ================================================================ */

.eapps-instagram-feed .eapps-link {
  display: none !important;
}