/* 全セレクタを #moonhifi-root 配下にしてテーマ(dux)のh2/h3等を上書き。フォントも強制 */
#moonhifi-root{ --mh-bg:#f5f5f7; --mh-tile:#fff; --mh-tile2:#fafafa; --mh-ink:#1d1d1f; --mh-sub:#6e6e73; --mh-faint:#86868b; --mh-line:#d2d2d7;
  background:var(--mh-bg); color:var(--mh-ink); overflow:hidden;
  width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:8px 0 28px;
  -webkit-font-smoothing:antialiased; letter-spacing:-.01em; }
#moonhifi-root, #moonhifi-root *{ box-sizing:border-box;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif; }

#moonhifi-root .mh-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:12px; max-width:1040px; margin:0 auto; }
#moonhifi-root .mh-hero{ grid-column:1/-1; background:var(--mh-tile); border-radius:18px; text-align:center; padding:60px 24px 52px; }
#moonhifi-root .mh-logo{ width:88px; height:88px; border-radius:24px; object-fit:cover; display:block; margin:0 auto 22px; box-shadow:0 6px 20px -6px rgba(0,0,0,.28); }
#moonhifi-root .mh-eyebrow{ font-size:19px; font-weight:600; color:var(--mh-sub); margin:0 0 8px; line-height:1.3; }
#moonhifi-root .mh-title{ font-size:clamp(38px,5.6vw,60px); font-weight:700; letter-spacing:-.025em; line-height:1.06; margin:0; color:var(--mh-ink); }
#moonhifi-root .mh-sub{ font-size:clamp(17px,1.6vw,21px); color:var(--mh-sub); margin:12px auto 0; max-width:660px; font-weight:500; line-height:1.5; }
#moonhifi-root .mh-tile{ position:relative; background:var(--mh-tile); border-radius:18px; overflow:hidden; min-height:560px; display:flex; flex-direction:column; align-items:center; text-align:center; padding:46px 22px 0; }
#moonhifi-root .mh-tile.alt{ background:var(--mh-tile2); }
#moonhifi-root .mh-name{ font-size:clamp(26px,3.1vw,40px); font-weight:600; letter-spacing:-.02em; line-height:1.1; margin:0; color:var(--mh-ink); }
#moonhifi-root .mh-price{ font-size:clamp(18px,1.6vw,22px); color:var(--mh-sub); margin:10px 0 0; font-weight:500; line-height:1.3; }
#moonhifi-root .mh-final{ color:var(--mh-ink); font-weight:700; font-variant-numeric:tabular-nums; }
#moonhifi-root .mh-was{ text-decoration:line-through; color:var(--mh-faint); margin-left:8px; font-size:.78em; font-variant-numeric:tabular-nums; }
#moonhifi-root .mh-bd{ font-size:13px; color:var(--mh-ink); margin-top:12px; line-height:1.9; }
#moonhifi-root .mh-bd .lbl{ color:var(--mh-faint); margin-right:6px; }
#moonhifi-root .mh-bd .mono{ font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace; font-size:12px; cursor:pointer; border:none; background:none; color:var(--mh-ink); padding:0; }
#moonhifi-root .mh-bd .mono:hover{ text-decoration:underline; }
#moonhifi-root .mh-buy{ display:inline-block; margin-top:16px; font-size:clamp(16px,1.4vw,18px); font-weight:500; color:var(--mh-ink); text-decoration:none; }
#moonhifi-root .mh-buy:hover{ text-decoration:underline; }
#moonhifi-root .mh-img{ display:block; width:100%; margin-top:20px; flex:1; min-height:230px; }
#moonhifi-root .mh-img img{ width:100%; height:100%; max-height:340px; object-fit:contain; display:block; }

.mh-toast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(16px); background:#1d1d1f; color:#fff; font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans",Meiryo,sans-serif; font-size:14px; font-weight:600; padding:11px 18px; border-radius:12px; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; z-index:99999; box-shadow:0 10px 30px rgba(0,0,0,.3); }
.mh-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.mh-toast b{ font-family:"SF Mono",monospace; color:#e8e8ed; margin-left:6px; }

@media (max-width:734px){ #moonhifi-root .mh-tiles{ grid-template-columns:1fr; } #moonhifi-root .mh-tile{ min-height:500px; } }
@media (prefers-reduced-motion:reduce){ #moonhifi-root *{ transition:none!important; } }

/* テーマのページタイトル帯を非表示（ヒーローと重複）。このCSSはショートコード時のみ読み込み＝当ページ限定 */
.article-title{ display:none !important; }
/* 当ページのテーマ本文ラッパーの白帯/余白を除去（このCSSはショートコード時のみ＝当ページ限定） */
.container{ padding-top:0 !important; padding-bottom:0 !important; }
.pagecontent{ padding-top:0 !important; padding-bottom:0 !important; background:transparent !important; }
.article-content{ padding:0 !important; margin:0 !important; }

/* ===== dux ダークモード対応（html.darking / .sitedark） ===== */
html.darking #moonhifi-root, body.darking #moonhifi-root, html.sitedark #moonhifi-root, body.sitedark #moonhifi-root{
  --mh-bg:#000; --mh-tile:#1c1c1e; --mh-tile2:#161618; --mh-ink:#f5f5f7; --mh-sub:#a1a1a6; --mh-faint:#8e8e93; --mh-line:#38383a;
}
/* 商品画像は白背景の写真が多いため、ダーク時は画像エリアを白パネル化 */
html.darking #moonhifi-root .mh-img, body.darking #moonhifi-root .mh-img,
html.sitedark #moonhifi-root .mh-img, body.sitedark #moonhifi-root .mh-img{
  background:#fff; border-radius:14px; padding:6px;
}

/* ===== ヘッダーをフロント同様の sticky すりガラスに（当ページ限定） ===== */
.header{ position:sticky !important; top:0 !important; z-index:1000 !important;
  background:rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter:saturate(1.6) blur(12px) !important; backdrop-filter:saturate(1.6) blur(12px) !important;
  border-bottom:1px solid rgba(0,0,0,.06) !important; }
html.darking .header, body.darking .header, html.sitedark .header{
  background:rgba(18,22,28,.82) !important; border-bottom-color:rgba(255,255,255,.08) !important; }