/* mg-affiliate 商品ボックス
   design token(mg-tokens.css)を fallback 付きで利用。トークン未読込の素テーマでも
   破綻せず描画され(fallback は概ね旧値。意図的に角丸 10→12px・hover opacity .88→.9 等を
   リッチ化調整)、配色は共通commerce paletteの明示設定に従う。
   ボタン背景色は LinkboxRenderer が inline 指定(運営者可変)のため CSS では触れず、
   hover lift / focus リング / transition のみ補完する。 */
.mga-box{
    /* ボックス専用テーマ変数。既定は OS 非追従の明色（運用者の「背景デフォルト明るく」）。
       semantic token(--mg-color-*)は :root の prefers-color-scheme で OS ダークに追従して黒くなるため、
       既定では参照しない。配色は data-theme="auto"(OS追従)/"dark"(常時暗色)のときだけ切替わる。
       各モードのコントラストは下部のパレットで一括設定（WCAG AA 以上）。 */
    --mga-bg:var(--mg-commerce-bg,#ffffff);
    --mga-border:var(--mg-commerce-border,#e3e6eb);
    --mga-text:var(--mg-commerce-text,#1e1e1e);
    --mga-text-muted:var(--mg-commerce-text-muted,#6b7280);
    --mga-price:var(--mg-commerce-price,#c0392b);
    --mga-meta:var(--mg-commerce-meta,#666666);
    --mga-rank:var(--mg-commerce-rank,#b12704);
    --mga-feature:var(--mg-commerce-feature,#333333);
    --mga-chip-bg:var(--mg-commerce-chip-bg,#f0f0f1);
    --mga-chip-text:var(--mg-commerce-chip-text,#6b6b6b);
    --mga-image-size:130px;
    position:relative;
    display:flex;gap:16px;align-items:flex-start;
    border:1px solid var(--mga-border);
    border-radius:var(--mg-radius-lg,12px);
    padding:16px;margin:1.6em 0;
    background:var(--mga-bg);
    box-shadow:var(--mg-shadow-sm,0 1px 3px rgba(0,0,0,.05));
    transition:box-shadow .2s ease,transform .2s ease;
}
/* 景表法/ステマ規制対応の可視 PR ラベル(右上・控えめ) */
.mga-box__pr{
    position:absolute;top:8px;right:10px;
    font-size:10px;font-weight:700;line-height:1;letter-spacing:.04em;
    color:var(--mga-chip-text);
    background:var(--mga-chip-bg);
    padding:3px 6px;border-radius:4px;
}
.mga-box:hover{
    box-shadow:var(--mg-shadow-md,0 4px 16px rgba(15,23,42,.1));
    transform:translateY(-2px);
}
.mga-box[data-image-size="thumbnail"]{--mga-image-size:70px}
.mga-box[data-image-size="compact"]{--mga-image-size:96px}
.mga-box[data-image-size="large"]{--mga-image-size:180px}
.mga-box[data-image-size="xlarge"]{--mga-image-size:240px}
.mga-box[data-image-size="fluid"]{--mga-image-size:320px}
.mga-box__img{flex:0 1 var(--mga-image-size);width:var(--mga-image-size);max-width:100%;text-align:center;overflow:hidden;border-radius:var(--mg-radius-sm,6px)}
.mga-box__img-link{display:block;max-width:100%}
.mga-box__img img{display:block;width:var(--mga-image-size);height:var(--mga-image-size);max-width:100%;object-fit:contain;border-radius:var(--mg-radius-sm,4px);transition:transform .25s ease}
.mga-box:hover .mga-box__img img{transform:scale(1.04)}
.mga-box__body{flex:1;min-width:0;overflow-wrap:anywhere}
/* 商品identity未確定の記事CTA。画像・価格の空欄を作らず、MGAの配色/余白/ボタンだけを共有する。 */
.mga-box--article-links{display:block}
.mga-box--article-links .mga-box__body{width:100%}
/* PR チップ(右上・絶対配置)がタイトル先頭行に被らないよう右に余白を確保（画像なし/縦積み/スマホでも安全）。 */
.mga-box__title{font-weight:700;line-height:1.45;margin:0 0 4px;padding-right:2.4em;font-size:1.02em;color:var(--mga-text)}
.mga-box__info{font-size:.82em;color:var(--mga-text-muted);margin-bottom:6px}
.mga-box__price{font-weight:700;color:var(--mga-price);margin-bottom:12px;font-size:1.05em;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
.mga-box__price--sale{border-left:3px solid #c0392b;padding-left:8px}
.mga-box__price-label{font-size:.78em;color:#c0392b;flex-basis:100%}
.mga-box__price-current{font-weight:800}
.mga-box__price-original{font-size:.82em;font-weight:600;color:var(--mga-text-muted);text-decoration-thickness:1px}
.mga-box__btns{--mga-button-basis:calc(33.333% - 6px);display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
/* 同じ行は等幅。画像横など狭い領域では可読幅を下回る前に折り返す。 */
.mga-box__btns > :is(.mga-box__btn,.mga-box__offer){flex:1 1 max(var(--mga-button-basis),min(100%,10rem));max-width:100%}
/* 店舗別価格とボタンを1つのレイアウト単位にし、既存のPC/SP列指定を共有する。 */
.mga-box__offer{display:flex;flex-direction:column;min-width:0;gap:4px}
.mga-box__offer > .mga-box__btn{width:100%;flex:1 0 auto}
.mga-box__offer-price{color:var(--mga-text-muted,#64748b);font-size:.75em;line-height:1.4;text-align:center;overflow-wrap:anywhere}
.mga-box__offer-asof{display:block;font-size:.9em}
.mga-box__btn{display:inline-flex;align-items:center;justify-content:center;min-width:0;min-height:44px;box-sizing:border-box;padding:9px 18px;border-radius:var(--mg-radius-sm,5px);color:#fff!important;font-weight:700;text-decoration:none;font-size:.9em;line-height:1.2;text-align:center;overflow-wrap:anywhere;transition:opacity .2s,transform .1s,box-shadow .15s}
/* AA: Amazon ブランドの橙地に白文字は 2.17。地の色は変えず濃文字で 8.68 を確保する。 */
.mga-box__btn--amazon{color:#111!important}
/* AA: 親テーマ既定のリンク青 #2f89e2 は白地で 3.62。島のリンク濃度 (#1a5fb4=6.29) へ寄せる。 */
.mga-box__title-link{color:#1a5fb4}
.mga-box__btn:hover{opacity:.9;transform:translateY(-1px)}
.mga-box__btn:active{transform:translateY(1px)}
.mga-box__btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.45)}
/* セールボタンは黄リング(box-shadow)を持つため、focus 時に消えないよう黄+青を連結 */
.mga-box__btn--onsale:focus-visible{box-shadow:0 0 0 2px #ffd54f,0 0 0 5px rgba(37,99,235,.45)}
.mga-box__btn--review{background-color:#555}
/* A9: 控えめな小リンク。ボタン共通スタイルを継承しない独立クラス */
.mga-box__review{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;font-size:12px;color:#3d7d85;text-decoration:none;background:none;padding:2px 0;font-weight:400;line-height:1.4}
.mga-box__review:hover{text-decoration:underline;color:#2f6b73}
/* セールバッジ（旧商品データ互換・期間内のみ表示） */
.mga-box__btn--onsale{display:inline-flex;flex-direction:column;align-items:center;line-height:1.15;box-shadow:0 0 0 2px #ffd54f}
.mga-box__sale{font-size:.72em;font-weight:700;background:#fff;color:#c0392b;padding:1px 7px;border-radius:3px;margin-bottom:3px}
/* 画像未取得プレースホルダ（19.7.0・最小登録直後のレイアウト保護） */
.mga-box__img-placeholder{display:flex;align-items:center;justify-content:center;width:var(--mga-image-size);height:var(--mga-image-size);max-width:100%;background:#f3f4f6;color:#9ca3af;font-size:.75em;border:1px dashed #d1d5db;border-radius:6px}
/* ボックス上部のセール中バナー（19.4.0・期間内のみ描画・色はボタン内バッジと同系統） */
.mga-box__sale-banner{font-size:.82em;font-weight:700;background:#fdecea;color:#c0392b;border:1px solid #f5c6cb;padding:4px 10px;border-radius:4px;margin-bottom:6px;display:block}
.mga-box__sale-banner-label{background:#c0392b;color:#fff;padding:1px 6px;border-radius:3px;margin-right:4px;font-size:.9em}
/* ボタン列数（btnLayoutPC / SP） */
.mga-box__btns--pc-2{--mga-button-basis:calc(50% - 4px)}
/* pc-3 / pc-fit / 未指定は共通の最大3列。末尾の行も残り幅を均等に使う。 */
.mga-box__btns--pc-text > :is(.mga-box__btn,.mga-box__offer){flex:0 0 auto}
@media(max-width:600px){.mga-box{flex-direction:column}.mga-box__img{flex-basis:auto}.mga-box__btns > :is(.mga-box__btn,.mga-box__offer){flex:1 1 100%;text-align:center}.mga-box__btns--sp-2 > :is(.mga-box__btn,.mga-box__offer){flex:1 1 max(calc(50% - 4px),min(100%,8rem))}}
@media(max-width:360px){.mga-box{padding:12px;gap:12px}.mga-box__btns--sp-2 > :is(.mga-box__btn,.mga-box__offer){flex-basis:100%}}
.mga-box img.mg-commerce-image--fallback{object-fit:contain;background:#f3f4f6;transform:none}
.mga-box:hover img.mg-commerce-image--fallback{transform:none}

/* 画像単体モード。通常ボックスと同じ取得画像・計測リンク・PR表示を使い、本文情報だけ省く。 */
.mga-box--image-only{display:inline-flex;width:auto;max-width:100%;padding:10px;vertical-align:top}
.mga-box--image-only .mga-box__img{flex:0 1 var(--mga-image-size)}
/* image_only の幅契約は ProductImageSize::imageOnlyPolicy が正本。responsive は
   min(100%, --mga-image-only-max) で本文幅へ追従し height:auto で元画像比率を維持する
   （正方形のレターボックスを作らない）。上限pxを変えるときは PHP 側の map と同時に更新する。 */
.mga-box--image-only[data-image-size="large"]{--mga-image-only-max:560px}
.mga-box--image-only[data-image-size="xlarge"]{--mga-image-only-max:720px}
.mga-box--image-only[data-image-size="fluid"]{--mga-image-only-max:340px}
.mga-box--image-only[data-image-fit="responsive"]{display:flex;width:100%;max-width:var(--mga-image-only-max)}
.mga-box--image-only[data-image-fit="responsive"] .mga-box__img{width:100%;flex-basis:100%}

/* 16.11.0: 価格取得時点ノート（景表法対応・小さく控えめに） */
.mga-box__price-asof {
    margin-left: 6px;
    font-size: 11px;
    color: var(--mga-text-muted);
    font-weight: normal;
}

.mga-box__price-source {
  display: inline-block;
  margin-left: .5em;
  color: var(--mga-muted, #666);
  font-size: .72em;
  font-weight: 500;
}
/* moshimo インプレッションタグ（不可視） */
.mga-imptag {
    position: absolute;
    width: 1px;
    height: 1px;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* Product and ranking colors share mg-commerce-palette.css. */
@media (prefers-reduced-motion: reduce) {
    .mga-box,.mga-box__img img,.mga-box__btn{transition:none}
    .mga-box:hover{transform:none}
    .mga-box:hover .mga-box__img img{transform:none}
}

/* ボックス外観カスタマイザ（旧商品データ互換・①-4）。data 属性が無い=既定で現行描画のまま(無退行)。
   旧表示は grid だが mga-box は flex のため、同等の見た目を flex で対応付ける。 */
/* 画像位置: t=上(縦積み・画像中央) / r=右。既定 l(左)は属性無し。 */
.mga-box[data-img="t"]{flex-direction:column}
.mga-box[data-img="t"] .mga-box__img{flex-basis:auto;align-self:center}
.mga-box[data-img="r"]{flex-direction:row-reverse}
/* PC レイアウト: big=画像120px / imgbig=画像140px。既定(属性無し)は 130px。 */
.mga-box[data-lyt-pc="big"] .mga-box__img{flex-basis:120px}
.mga-box[data-lyt-pc="big"] .mga-box__img img{width:120px;height:120px}
.mga-box[data-lyt-pc="imgbig"] .mga-box__img{flex-basis:140px}
.mga-box[data-lyt-pc="imgbig"] .mga-box__img img{width:140px;height:140px}
/* 新しい共通 image_size が明示される場合は、旧保存形式の box_layout_pc より優先する。 */
.mga-box[data-image-size] .mga-box__img{flex-basis:var(--mga-image-size);width:var(--mga-image-size)}
.mga-box[data-image-size] .mga-box__img img,
.mga-box[data-image-size] .mga-box__img-placeholder{width:var(--mga-image-size);height:var(--mga-image-size)}
.mga-box--image-only[data-image-fit="responsive"] .mga-box__img,
.mga-box--image-only[data-image-fit="responsive"] .mga-box__img img,
.mga-box--image-only[data-image-fit="responsive"] .mga-box__img-placeholder{width:100%}
/* 同詳細度で後出しの .mga-box[data-image-size] 規則が wrapper の flex-basis を
   --mga-image-size 固定へ戻すため、幅(width)だけでなく basis も最終側で再宣言する。 */
.mga-box--image-only[data-image-fit="responsive"] .mga-box__img{flex-basis:100%}
.mga-box--image-only[data-image-fit="responsive"] .mga-box__img img{height:auto}
.mga-box--image-only[data-image-fit="responsive"] .mga-box__img-placeholder{height:auto;aspect-ratio:1/1}
.mga-box--image-only[data-image-fit="fixed"] .mga-box__img img{height:auto}
/* 内在解像度未満の引き伸ばし(ぼけ)を runtime が data-mg-commerce-image-fit=intrinsic で
   抑える。枠幅は cap に関わらずコンテナ幅のままなので再評価しても振動しない。
   このセレクタは上の responsive/fixed 幅ルールと同詳細度のため、必ずそれらより後に置く。 */
.mga-box--image-only .mga-box__img img[data-mg-commerce-image-fit="intrinsic"]{width:auto;height:auto;max-width:100%;margin-inline:auto}
/* ボタン角丸: off=ほぼ角 / on=やや丸 / round=丸。既定(属性無し)は .mga-box__btn 既存値。 */
.mga-box[data-btn-radius="off"] .mga-box__btn{border-radius:1px}
.mga-box[data-btn-radius="on"] .mga-box__btn{border-radius:6px}
.mga-box[data-btn-radius="round"] .mga-box__btn{border-radius:999px}
.mga-box[data-btn-radius="0"] .mga-box__btn{border-radius:0}
.mga-box[data-btn-radius="4"] .mga-box__btn{border-radius:4px}
.mga-box[data-btn-radius="8"] .mga-box__btn{border-radius:8px}
.mga-box[data-btn-radius="12"] .mga-box__btn{border-radius:12px}
.mga-box[data-btn-radius="50"] .mga-box__btn{border-radius:50px}

/* Retained display controls; the attribute is emitted only for a saved choice. */
.mga-box[data-btn-style="outline"] .mga-box__btn{background:transparent!important;border:1px solid var(--mga-shop-color,currentColor);color:var(--mga-shop-color,currentColor)!important}
@media(max-width:600px){
    .mga-box[data-lyt-mb="vrtcl"]{flex-direction:column}
    .mga-box[data-lyt-mb="flex"]{flex-direction:row;align-items:flex-start}
    .mga-box[data-lyt-mb="flex"] .mga-box__img{flex-basis:100px;max-width:35%}
    .mga-box[data-lyt-mb="flex"][data-img="r"]{flex-direction:row-reverse}
}
.mga-box[data-sale-effect="flash"] .mga-box__sale{animation:mga-sale-flash 1.5s ease-in-out infinite}
@keyframes mga-sale-flash{50%{opacity:.5}}
@media(prefers-reduced-motion:reduce){.mga-box[data-sale-effect="flash"] .mga-box__sale{animation:none}}

/* Amazon 由来のスペック（ブランド / 売れ筋順位 / 商品特徴）。控えめに本文中へ。 */
.mga-box__meta{display:flex;flex-wrap:wrap;gap:4px 12px;margin:4px 0;font-size:12px;color:var(--mga-meta)}
.mga-box__rank{color:var(--mga-rank);font-weight:600}
/* 26.6.0: AliExpress 拡張（好评率/販売数/店舗/動画あり）。既存メタ行の控えめ表示に揃える。 */
.mga-box__shop{font-weight:500}
.mga-box__video{color:var(--mga-rank,#c00);font-weight:600}
.mga-box__features{margin:6px 0 4px;padding-left:1.2em;font-size:13px;line-height:1.6;color:var(--mga-feature)}
.mga-box__features li{margin:0;list-style:disc}
/* 楽天 売れ筋ランキング（[rakuten_ranking]・G4 #35） */
.mga-rakuten-ranking{--mga-rakuten-image-size:70px;position:relative;min-width:0;border:1px solid var(--mg-color-border,#e2e8f0);border-radius:8px;padding:12px 14px;margin:1.5em 0}
.mga-rakuten-ranking[data-image-size="compact"]{--mga-rakuten-image-size:96px}
.mga-rakuten-ranking[data-image-size="standard"]{--mga-rakuten-image-size:130px}
.mga-rakuten-ranking[data-image-size="large"]{--mga-rakuten-image-size:180px}
.mga-rakuten-ranking[data-image-size="xlarge"]{--mga-rakuten-image-size:240px}
.mga-rakuten-ranking[data-image-size="fluid"]{--mga-rakuten-image-size:min(320px,32vw)}
.mga-rakuten-ranking__head{font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.mga-rakuten-ranking__list{min-width:0;list-style:none;margin:0;padding:0;counter-reset:none}
.mga-rakuten-ranking__item{display:flex;align-items:center;min-width:0;gap:10px;padding:8px 0;border-top:1px solid var(--mg-color-border,#eef2f7)}
.mga-rakuten-ranking__item:first-child{border-top:none}
.mga-rakuten-ranking__rank{flex:0 0 24px;text-align:center;font-weight:700;color:#bf0000}
.mga-rakuten-ranking__img{flex:0 0 var(--mga-rakuten-image-size);width:var(--mga-rakuten-image-size);height:var(--mga-rakuten-image-size);max-width:100%;object-fit:contain;border-radius:4px}
.mga-rakuten-ranking__link{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;text-decoration:none;font-size:.95em;line-height:1.35}
.mga-rakuten-ranking__link:hover{text-decoration:underline}
.mga-rakuten-ranking__price{flex:0 0 auto;font-weight:700;color:#bf0000;white-space:nowrap}
@media (max-width:640px){.mga-rakuten-ranking[data-image-size="fluid"]{--mga-rakuten-image-size:clamp(96px,28vw,240px)}.mga-rakuten-ranking__item{align-items:flex-start;flex-wrap:wrap}.mga-rakuten-ranking__img{--mga-rakuten-image-size:min(110px,32vw)}.mga-rakuten-ranking__price{margin-left:34px;font-size:.9em}}

/* 24.6.0: 読者限定クーポン(コピー可能) */
.mga-coupon{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0;padding:8px 10px;border:1px dashed var(--mga-border);border-radius:8px;background:var(--mga-chip-bg)}
.mga-coupon__label{font-size:.78em;font-weight:700;color:var(--mga-text-muted);letter-spacing:.02em}
.mga-coupon__code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:700;font-size:1.02em;color:var(--mga-text);letter-spacing:.06em;user-select:all;background:var(--mga-bg);border:1px solid var(--mga-border);border-radius:6px;padding:2px 8px}
.mga-coupon__copy{display:inline-flex;align-items:center;gap:5px;cursor:pointer;border:1px solid var(--mga-border);background:var(--mga-bg);color:var(--mga-text);border-radius:6px;padding:4px 10px;font-size:.85em;font-weight:600;line-height:1.2;transition:background .12s,border-color .12s}
.mga-coupon__copy:hover{background:var(--mga-chip-bg);border-color:var(--mga-text-muted)}
.mga-coupon__copy:focus-visible{outline:2px solid var(--mg-color-primary,#2271b1);outline-offset:1px}
.mga-coupon__copy--done{border-color:#1a7f37;color:#1a7f37}
.mga-coupon__icon{flex:0 0 auto}
.mga-coupon__meta{display:inline-flex;flex-wrap:wrap;gap:8px;font-size:.8em;color:var(--mga-text-muted)}
.mga-coupon__off{font-weight:700;color:var(--mga-price)}
/* 24.8.0(要望書P2-6): coupon_note= 補足1行("8%OFF・7/31まで")。off と同じ強調・長文でも折返す */
.mga-coupon__note{font-weight:700;color:var(--mga-price)}
.mga-coupon__done{font-size:.82em;font-weight:700;color:#1a7f37}

/* 記事の参照リンク（LinkboxRenderer の mg-article-references）: 素テーマの既定リンク色は
   明色背景で AA 未満（#2f89e2 on #f4f5f7 = 3.32:1）。プラグイン側でコントラストを保証する。
   明色 #1a5fb4 = 5.76:1（#f4f5f7）/ 6.29:1（#fff）。暗色 #8ab4f8 = 7.36:1（#1f2430）/
   7.99:1（#1d1d1f 実測）。 */
.mg-article-references {
    box-sizing: border-box;
    margin: 1.6em 0;
    padding: 14px 16px;
    border: 1px solid var(--mg-color-border-light, #e3e6eb);
    border-radius: var(--mg-radius-sm, 8px);
    overflow-wrap: anywhere;
}
.mg-article-references .mg-article-references__title {
    margin: 0 0 8px;
    line-height: 1.5;
}
.mg-article-references ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.mg-article-references li + li {
    border-top: 1px solid var(--mg-color-border-light, #e3e6eb);
}
.mg-article-references li a {
    display: block;
    min-height: 44px;
    box-sizing: border-box;
    padding: 8px 0;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.mg-article-references a { color: #1a5fb4; }
.mg-article-references a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (prefers-color-scheme: dark) {
    :root:not(.mg-force-light) .mg-article-references a { color: #8ab4f8; }
    :root:not(.mg-force-light) .mg-article-references,
    :root:not(.mg-force-light) .mg-article-references li + li { border-color: #4b5563; }
}

/* Partial product data uses the same purchase buttons; only overflow is collapsed. */