/**
 * Gadget Finder — Shared Frontend Product Styles
 *
 * Shared layout & component styles for product grids and cards.
 * All finder-tool styles are in gf-finder-shared.css.
 *
 * Dependencies: gf-finder-shared.css
 * Prefix: gf- (gadget-finder)
 * @since 6.0.0
 */

/* ====================================================================
   Product Grid (Comparison)
   ==================================================================== */
.gf-compare-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    max-width: var(--gf-max-width, 1000px);
    margin: 0 auto;
    padding: 1.25rem;
}

/* ====================================================================
   Product Card (Standalone embeds)
   ==================================================================== */
.gf-product-card {
    background: var(--gf-white, var(--mg-white));
    border: 1px solid var(--gf-gray-200, var(--mg-gray-200));
    border-radius: var(--gf-radius-md, 10px);
    padding: 1.25rem;
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.gf-product-card:hover {
    box-shadow: var(--mg-shadow-lg);
}

.gf-product-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--gf-radius-sm, 6px);
}

.gf-product-title {
    font-size: 1.05em;
    font-weight: 600;
    margin: 0.5rem 0 0.25rem;
    color: var(--gf-gray-900, var(--mg-gray-900));
}

.gf-product-brand {
    color: var(--gf-gray-500, var(--mg-gray-500));
    font-size: 0.85em;
}

.gf-product-price {
    font-size: 1.15em;
    font-weight: 700;
    color: var(--gf-error, var(--mg-red-400));
}

/* ショートコードカードの一時的な読み込み不可メッセージ。赤字の "失敗" 表現を避け、
   控えめなボーダー＋ミュート文字色で「いまは出せないだけ」と穏やかに伝える（背景なし）。 */
.gf-card-unavailable {
    border: 1px solid var(--mg-color-border-light, #e2e4e7);
    border-radius: var(--mg-radius-sm, 6px);
    padding: var(--mg-space-md, 12px);
    color: var(--mg-color-text-muted, #50575e);
}

/* ====================================================================
   Bridge: bf / cf → gf (backward compat)
   ==================================================================== */
.bf-container,
.cf-container {
    max-width: var(--gf-max-width, 1000px);
    margin: 0 auto;
    padding: 1.25rem;
}

.bf-loading,
.cf-loading {
    text-align: center;
    padding: 2.5rem;
    color: var(--gf-gray-400, var(--mg-gray-400));
}

.bf-compare-container,
.cf-compare-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.bf-product-card,
.cf-product-card {
    background: var(--gf-white, var(--mg-white));
    border: 1px solid var(--gf-gray-200, var(--mg-gray-200));
    border-radius: var(--gf-radius-md, 10px);
    padding: 1.25rem;
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.bf-product-card:hover,
.cf-product-card:hover {
    box-shadow: var(--mg-shadow-lg);
}

.bf-product-image,
.cf-product-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--gf-radius-sm, 6px);
}

.bf-product-title,
.cf-product-title {
    font-size: 1.05em;
    font-weight: 600;
    margin: 0.5rem 0 0.25rem;
    color: var(--gf-gray-900, var(--mg-gray-900));
}

.bf-product-brand,
.cf-product-brand {
    color: var(--gf-gray-500, var(--mg-gray-500));
    font-size: 0.85em;
}

.bf-product-capacity,
.cf-product-wattage {
    color: var(--gf-gray-700, var(--mg-gray-700));
    font-weight: 500;
}

.bf-product-price,
.cf-product-price {
    font-size: 1.15em;
    font-weight: 700;
    color: var(--gf-error, var(--mg-red-400));
}

/* ===== Accessibility: Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {

    .gf-product-card,
    .bf-product-card,
    .cf-product-card {
        transition: none;
    }
}

/* ===== 製品比較ブロック(AbstractComparisonBlock のフロント出力) =====
   従来このテーブル CSS は admin 限定の gf-finder-admin.css のみにあり、フロントでは
   UA 既定で描画されていた(行ラベルの th[scope=row] が太字+中央寄せになる)。
   ブロックの 'style' => 'gf-finder-frontend' でこのシートを自動 enqueue し、
   フロントでも読みやすく・行ラベルを normal/left に正規化する。 */
/* モバイルで 3〜4 列が画面外へ溢れるのを防ぐ横スクロール枠(従来 admin シートのみに存在した)。 */
.gf-comparison-table-wrap,
.bf-comparison-table-wrap,
.cf-comparison-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.2em 0;
}
.gf-comparison-table,
.bf-comparison-table,
.cf-comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2em 0;
}
.gf-comparison-table th,
.gf-comparison-table td,
.bf-comparison-table th,
.bf-comparison-table td,
.cf-comparison-table th,
.cf-comparison-table td {
    padding: var(--mg-space-sm, 8px) var(--mg-space-md, 12px);
    border-bottom: 1px solid var(--mg-color-border-light, #e2e4e7);
    text-align: left;
    vertical-align: top;
}
/* 行ラベル(spec 名)= th[scope=row]。td 時代の見た目(normal weight)を維持しつつ a11y を確保 */
.gf-comparison-table th[scope="row"],
.bf-comparison-table th[scope="row"],
.cf-comparison-table th[scope="row"] {
    font-weight: 600;
    color: var(--mg-color-text-muted, #50575e);
    white-space: nowrap;
}
.gf-comparison-table th[scope="col"],
.bf-comparison-table th[scope="col"],
.cf-comparison-table th[scope="col"] {
    font-weight: 700;
}

/* 比較表サムネイル: width/height 属性で CLS を抑止しつつ、responsive 維持・歪み回避を CSS で担保。 */
.gf-comparison-img,
.bf-comparison-img,
.cf-comparison-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 6px;
}

/* 比較表「詳細を見る」: 従来 CSS 未定義でプレーンリンク化＝CV 動線が弱く、タップ標的も WCAG 2.5.5
   未達だった。primary ボタン化＋44px タップ標的＋キーボード可視フォーカスを付与。 */
.gf-comparison-btn,
.bf-comparison-btn,
.cf-comparison-btn {
    display: inline-block;
    box-sizing: border-box;
    min-height: 44px;
    padding: 11px 16px;
    background: var(--mg-color-primary, #2563eb);
    color: #fff !important;
    text-decoration: none;
    border-radius: var(--mg-radius-sm, 6px);
    font-weight: 600;
    text-align: center;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.gf-comparison-btn:hover,
.bf-comparison-btn:hover,
.cf-comparison-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.gf-comparison-btn:focus-visible,
.bf-comparison-btn:focus-visible,
.cf-comparison-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.5);
}

/* 比較表の星評価。renderStarRating は空の <span class="..-star ..-star-full"> を出力するため、
   グリフ(★/☆)は CSS の ::before で描画する。従来フロントには glyph 定義が無く星が一切出ていなかった。 */
.gf-stars,
.bf-stars,
.cf-stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    line-height: 1;
}
.gf-star,
.bf-star,
.cf-star {
    font-size: var(--mg-text-lg, 1.1em);
}
.gf-star-full::before,
.bf-star-full::before,
.cf-star-full::before {
    content: "\2605"; /* ★ */
    color: var(--mg-color-warning, #f0b429);
}
.gf-star-empty::before,
.bf-star-empty::before,
.cf-star-empty::before {
    content: "\2606"; /* ☆ */
    color: var(--mg-gray-300, #cbd5e1);
}
/* 半星: 既定は塗り星(無退行のフォールバック)。background-clip 対応環境では左半分のみ塗る。 */
.gf-star-half::before,
.bf-star-half::before,
.cf-star-half::before {
    content: "\2605";
    color: var(--mg-color-warning, #f0b429);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .gf-star-half::before,
    .bf-star-half::before,
    .cf-star-half::before {
        background: linear-gradient(90deg, var(--mg-color-warning, #f0b429) 50%, var(--mg-gray-300, #cbd5e1) 50%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}
.gf-rating-number,
.bf-rating-number,
.cf-rating-number {
    margin-inline-start: var(--mg-space-xs, 4px);
    font-size: var(--mg-text-sm, 0.9em);
    color: var(--mg-color-text-muted, #50575e);
}

/* 本文先頭へフォールバック注入される商品画像(外部Amazon画像)。width/height 属性で CLS を
   抑えつつ、responsive 維持・歪み回避は CSS で行う(inline style を増やさない方針)。 */
.mg-injected-thumb {
    max-width: 100%;
    height: auto;
}

/* ===== 関連商品ブロック(商品単体末尾・商品→商品/一覧 内部回遊) ===== */
.mg-related-products {
    margin: 2em 0 0;
    padding: 16px 18px;
    border: 1px solid var(--mg-color-border-light, #e2e4e7);
    border-radius: var(--mg-radius-md, 10px);
    background: var(--mg-color-bg-alt, #f7f8fa);
}
.mg-related-products > h2 {
    font-size: 1.05rem;
    margin: 0 0 10px;
    padding: 0;
    border: 0;
}
.bf-related__list,
.cf-related__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px 18px;
}
.bf-related__item,
.cf-related__item {
    margin: 0;
    padding: 4px 0;
    border-bottom: 1px solid var(--mg-color-border-light, #eef0f2);
}
.bf-related__item a,
.cf-related__item a {
    text-decoration: none;
    line-height: 1.5;
}
.bf-related__item a:hover,
.cf-related__item a:hover {
    text-decoration: underline;
}
.bf-related__more,
.cf-related__more {
    margin: 12px 0 0;
}
.bf-related__more a,
.cf-related__more a {
    font-weight: 600;
    text-decoration: none;
}
@media (prefers-color-scheme: dark) {
    .mg-related-products {
        background: var(--mg-color-surface, #1f2430);
        border-color: var(--mg-color-border, #39414f);
    }
}