/*
 * 商品詳細。
 * モバイルファースト。画像｜商品情報の 2 カラム (PC) + 状態バッジオーバーレイ + 仕様テーブル +
 * 関連商品グリッド。--genre-color は当該ジャンルのテーマ色を .product-detail に注入する
 * (パンくず hover・見出し下線・価格アクセント)。関連商品グリッド (.product-grid / .product-card*)
 * は common.css の共有スタイルを使う。
 */
.product-detail {
    /* .site-main 上パディングを打ち消し、パンくず帯をヘッダ直下へ (旧 body_header 踏襲) */
    margin-top: calc(-1 * var(--shop-main-pad-block));
    padding-block: 0 32px;
}

/* ===== パンくず (旧: ヘッダ直下の全幅グレー帯 #f2f2f2。テキストは中央 container) ===== */
.pd-breadcrumb {
    margin-bottom: 24px;
    padding-block: 10px;
    background: var(--shop-head-bg);
    font-size: 0.8rem;
    color: var(--shop-muted);
}

.pd-breadcrumb-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.pd-breadcrumb-row + .pd-breadcrumb-row {
    margin-top: 4px;
}

.pd-breadcrumb-item {
    color: var(--shop-muted);
    text-decoration: none;
}

.pd-breadcrumb-item:hover {
    color: var(--genre-color);
    text-decoration: underline;
}

.pd-breadcrumb-current {
    color: var(--shop-text);
    font-weight: 700;
}

.pd-breadcrumb-sep {
    color: #bbb;
}

/* ===== レイアウト (カテゴリサイドバー + 本文) ===== サイドバー自体の表示可否は共有
 * .genre-sidebar が PC かつホバー端末でのみ表示 (common.css)。 */
.pd-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pd-content {
    min-width: 0; /* grid/flex 子のはみ出し防止 */
}

/* 横並びに切り替える条件は `.genre-sidebar` の表示条件と揃える (幅だけでなくホバー可否も見る)。
 * 揃えないと、幅 1000px 以上のホバー不可端末で「横並びだがサイドバーは order:2・幅指定なし」となり、
 * 販促ブロックが本文の右の細い列に出て本文幅も縮む。 */
@media (width >= 1000px) and (hover: hover) {
    .pd-layout {
        flex-direction: row;
        align-items: flex-start;
    }

    .pd-content {
        flex: 1 1 auto;
    }
}

/* ===== 2 カラム (画像｜情報) ===== */
.pd-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

/* ===== 画像スライダー ===== */
.pd-main-image {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border: 1px solid var(--shop-border);
    border-radius: 4px;
    overflow: hidden;
}

.pd-main-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pd-noimage {
    color: #bbb;
    font-size: 0.9rem;
}

/* 在庫/販売状態バナー。商品一覧カードと見せ方を揃える (画像上部に全幅の帯・白文字中央・
 * 状態色 opacity 0.8)。色は旧 banner_*.svg の実測値 (橙 #ec9128 / 赤 #ff4040 / 灰 #565656)。
 * 現行本番の詳細ページ自体はアイコン表示だが、一覧と統一する方針。 */
.pd-badge {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 28px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    background: rgb(86 86 86 / 80%);
}

/* 注意 (購入可): 残りわずか・まもなく終売/休売 → 橙 */
.pd-badge-low-stock,
.pd-badge-ending-soon,
.pd-badge-suspending-soon {
    background: rgb(236 145 40 / 80%);
}

/* 欠品中 (在庫切れ) → 赤 */
.pd-badge-out-of-stock {
    background: rgb(255 64 64 / 80%);
}

/* 販売終了・休売 → 灰 */
.pd-badge-discontinued,
.pd-badge-suspended {
    background: rgb(86 86 86 / 80%);
}

.pd-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.pd-thumb {
    width: 64px;
    height: 64px;
    padding: 0;
    background: #f5f5f5;
    border: 2px solid var(--shop-border);
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
}

.pd-thumb.is-active {
    border-color: var(--genre-color);
}

/* contain はメイン画像 (.pd-main-img) と現行本番踏襲 (旧 `.sub .sub_image .img` は
 * 正方形の枠に background-size: contain)。cover にすると縦長・横長の画像が枠外を
 * 切り落とされ、中央の一部しか見えない。 */
.pd-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ===== 商品情報 ===== */
.pd-info-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    font-size: 0.85rem;
    color: var(--shop-muted);
}

.pd-temp {
    padding: 2px 8px;
    color: #fff;
    background: var(--shop-category-bg);
    border-radius: 2px;
}

/* お気に入り ★。カードの ★ と同じ JS / endpoint を使う。
 * 未登録はグレーの輪郭、登録済みは金の塗り (カード ★ の SVG と同じ配色)。 */
.pd-favorite {
    padding: 4px 8px;
    margin-left: auto;
    font-size: 1.1rem;
    color: #ccc;
    cursor: pointer;
    background: none;
    border: 1px solid var(--shop-border);
    border-radius: 4px;
}

.pd-favorite.is-favorited {
    color: #dca81f;
}

.pd-favorite:hover {
    opacity: 0.8;
}

.pd-favorite:disabled {
    cursor: default;
    opacity: 0.5;
}

.pd-name {
    margin-top: 8px;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--shop-text);
}

.pd-tax-mark {
    display: inline-block;
    margin-top: 8px;
    padding: 2px 8px;
    font-size: 0.75rem;
    color: var(--shop-accent);
    border: 1px solid var(--shop-accent);
    border-radius: 2px;
}

.pd-price-box {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--shop-border);
}

.pd-regular-price {
    display: block;
    font-size: 0.85rem;
    color: #999;
    text-decoration: line-through;
}

.pd-sale-price {
    display: block;
    margin-top: 2px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--shop-accent);
}

.pd-tax-suffix {
    margin-left: 4px;
    font-size: 0.8rem;
    font-weight: 400;
}

.pd-purchase {
    margin-top: 16px;
}

/* 数量セレクト (商品詳細)。カートに入れるボタンの直上に配置。セレクト自体は shop 共通の
 * <select> スタイル (common.css) を使い、ここではラベルと横並びのレイアウトだけ整える。 */
.pd-qty {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.pd-qty-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--shop-text);
}

/* カート追加ボタン (商品詳細)。共通ボタン (.btn) とは別役割の CTA。旧の「カートアイコン追加」を
 * 商品詳細では利便性のため拡大表示した位置づけ。現状のボタン型 (全幅・赤・太字) を維持する。
 * data-cart-add・cart.js がカート追加を行う。 */
.pd-cart-btn {
    width: 100%;
    max-width: 320px;
    padding: 14px 16px;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    background: var(--shop-accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.pd-cart-btn:hover {
    opacity: 0.85;
}

.pd-cart-note {
    margin-left: 6px;
    font-size: 0.8rem;
    font-weight: 400;
}

.pd-unavailable {
    padding: 12px 16px;
    font-weight: 700;
    color: var(--shop-muted);
    text-align: center;
    background: var(--shop-subtle-bg);
    border-radius: 4px;
}

.pd-arrival {
    margin-top: 8px;
    font-size: 0.9rem;
    color: var(--shop-text);
}

.pd-alternative {
    margin-top: 8px;
    font-size: 0.9rem;
}

.pd-alternative a {
    color: var(--genre-color);
    text-decoration: underline;
}

.pd-note {
    margin-top: 16px;
    font-size: 0.9rem;
    line-height: 1.7;
}

/* ===== 仕様テーブル ===== */
.pd-spec {
    width: 100%;
    margin-top: 16px;
    font-size: 0.85rem;
    border-collapse: collapse;
}

.pd-spec th,
.pd-spec td {
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
    border: 1px solid var(--shop-border);
}

.pd-spec th {
    width: 32%;
    font-weight: 700;
    color: var(--shop-muted);
    background: var(--shop-subtle-bg);
}

.pd-disclaimer {
    margin-top: 16px;
    font-size: 0.75rem;
    line-height: 2; /* 12px×2=24px。旧本番 (line-height:1.5rem=24px) と行間を一致 */
    color: var(--shop-muted);
}

/* 見出し・各免責文とも余白 0 で、行間 24px の均等リズムを崩さない */
.pd-disclaimer-lead {
    margin: 0;
}

.pd-disclaimer-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pd-inquiry {
    margin-top: 8px;
    font-size: 0.85rem;
}

.pd-inquiry a {
    color: var(--genre-color);
    text-decoration: underline;
}

/* ===== キーワードタグ ===== */
.pd-keywords {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-top: 16px;
}

.pd-keywords-label {
    font-size: 0.8rem;
    color: var(--shop-muted);
}

.pd-keyword-tag {
    padding: 2px 10px;
    font-size: 0.8rem;
    color: var(--shop-text);
    text-decoration: none;
    background: var(--shop-subtle-bg);
    border: 1px solid var(--shop-border);
    border-radius: 999px;
}

.pd-keyword-tag:hover {
    color: var(--genre-color);
    border-color: var(--genre-color);
}

/* ===== 見出し (レビュー / 関連商品) ===== */
.pd-section-title {
    padding-bottom: 8px;
    margin-block: 32px 16px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--shop-text);
    border-bottom: 2px solid var(--genre-color);
}

.pd-reviews {
    margin-top: 16px;
}

/* 関連商品ツールバー (.cl-toolbar) と適用状態バー (.cl-resultbar*) は、カテゴリ商品一覧・
 * 特集商品一覧と同じマークアップ・同じ共有スタイル (common.css) を使う。
 * かつて .pd-* として複製していたが、枠・背景・トグル色が食い違っていたため統合した。 */

.pd-empty {
    padding: 24px 0;
    color: var(--shop-muted);
    text-align: center;
}

/* ===== PC (2 カラム) ===== */
@media (width >= 768px) {
    .pd-main {
        grid-template-columns: minmax(0, 420px) 1fr;
        gap: 32px;
        align-items: start;
    }
}