/**
 * theme-shop.css — リファインド・ライト（Shop モード：読む・選ぶ・買う）
 *
 * 使い方: Shop 系ページ（商品一覧/詳細/カート/フォーム等）の
 *   {% block stylesheet %} 内で {% include 'Block/_theme_shop.twig' %}
 *
 * 純白の量販店ライトから、温かみのある上質ライトへ。
 * 背景はオフホワイト、本文は温かいチャコール、見出しはセリフ、差し色はゴールド。
 * Stage（ダーク）と同じデザイン言語（ゴールド/フォント/ボタン/余白）で統一感を保つ。
 * ※ ヘッダーはライト既定のまま、フッターは既存のダークがブランドの“締め”になる。
 */

/* ===== ページ地：温かいオフホワイト ===== */
html { background: #f7f4ee !important; }
body {
  background-color: #f7f4ee !important;
  background-image:
    radial-gradient(120% 70% at 50% -8%, rgba(212, 175, 55, 0.07) 0%, rgba(212, 175, 55, 0) 46%) !important;
  color: #2b2620;
}
#page-loader { background-color: #f7f4ee !important; }

/* main 直下のインライン薄グレー地（#f9f9f9 等）も温かい地へ寄せる */
main[style*="background"] { background-color: transparent !important; }

/* ===== タイポgrafia：見出しはセリフで上質に ===== */
main h1, main h2, main h3,
.shop-title, .ec-headingTitle {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  letter-spacing: .04em;
  /* 色は固定しない：独自ダークヒーロー等の明色見出しを潰さないため、
     各ページ本来の色 or 本文色(#2b2620)を継承させる */
}
/* ラテン装飾ラベル（任意で .shop-eyebrow を付与） */
.shop-eyebrow {
  display: inline-block;
  font-family: var(--font-decorative);
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--color-primary);
  margin-bottom: 10px;
}
/* セクションの金ヘアライン（任意で .shop-rule） */
.shop-rule { border: none; border-top: 1px solid rgba(212, 175, 55, 0.35); margin: 28px 0; }
hr { border: none; border-top: 1px solid rgba(31, 27, 22, 0.08); }

/* ===== リンク ===== */
main a:not(.btn):not(.hk-btn):not(.action-button):hover { color: var(--color-primary-dark); }

/* ===== ボタン：Stage と同じ .hk-btn を、ライト用に最適化 ===== */
.hk-btn--primary {
  background: linear-gradient(135deg, #d4af37 0%, #c9a227 100%);
  color: #1c1404;
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
}
.hk-btn--primary:hover { box-shadow: 0 10px 28px rgba(212, 175, 55, 0.42); }
.hk-btn--ghost { border: 1px solid rgba(31, 27, 22, 0.28); color: #1f1b16; }
.hk-btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }

/* ===== カード：白＋やわらかい影で“紙の上の作品”感 ===== */
.card, .panel {
  background: #ffffff;
  border: 1px solid rgba(31, 27, 22, 0.07);
  box-shadow: 0 2px 12px rgba(31, 27, 22, 0.05);
  border-radius: 12px;
}

/* ===== 商品サムネは黒下地で“光らせる”（黒/白1:1画像が映える） =====
   一覧/詳細でサムネ枠に .shop-thumb を付けると、商品が暗背景で際立つ */
.shop-thumb { background: #14110d; border-radius: 10px; overflow: hidden; }
.shop-thumb img { mix-blend-mode: normal; }