/* listing-detail.css — T3-2: /listing/ 詳細ページ CV 改善
   ロード条件: lhchild_is_listing_detail() → /listing/ のみ
   スコープ: .hp-listing--view-page（詳細ページ）のみ
   触れないもの: href / WooCommerce hooks / wc-ajax / cart / checkout / account
   ブランドトークン: tokens.css :root 変数経由のみ（!important 禁止）
   ============================================================ */

/* ── 価格ボックス（サイドバー primary attributes）── */
.hp-listing--view-page .hp-listing__attributes--primary {
    background-color: var(--c-paper);
    border-color: var(--c-border);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-sm);
}

/* 価格値のテキスト強調 */
.hp-listing--view-page .hp-listing__attributes--primary .hp-listing__attribute {
    background-color: var(--c-mist);
    border-radius: var(--r-xs);
    font-weight: 800;
    color: var(--c-accent-deep);
}

.hp-listing--view-page .hp-listing__attributes--primary .hp-listing__attribute:not(:last-child) {
    border-bottom-color: var(--c-border-soft);
}

/* ── 購入CTAコンテナ（hp-widget として sidebar に出力）── */
/* padding は stickySidebar の高さ計算を狂わせるため付与しない。
   内部余白は .hp-form / .hp-listing__action が持つ既存 margin に委ねる。 */
.hp-listing--view-page .hp-listing__actions--primary.hp-widget {
    background-color: var(--c-paper);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-sm);
}

/* ── 購入/予約ボタン（form submit + anchor action 両方対応）── */
.hp-listing--view-page .hp-listing__actions--primary button.hp-listing__action,
.hp-listing--view-page .hp-listing__actions--primary input[type="submit"].hp-listing__action,
.hp-listing--view-page .hp-listing__actions--primary .hp-form__button {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    border-radius: var(--r-sm);
    font-weight: 700;
    font-size: var(--fs-sm);
    letter-spacing: .02em;
}

/* store.css の hp-button 定義と重複しないよう、未適用のクラスのみ補完 */
.hp-listing--view-page .hp-listing__actions--primary .hp-form--listing-buy .hp-form__button {
    background: var(--c-accent);
    color: var(--c-on-accent);
    border: 2px solid var(--c-accent);
    transition:
        background var(--dur) var(--ease),
        transform var(--dur-fast) var(--ease);
}

.hp-listing--view-page .hp-listing__actions--primary .hp-form--listing-buy .hp-form__button:hover {
    background: var(--c-accent-deep);
    border-color: var(--c-accent-deep);
    transform: translateY(-1px);
}

/* ── 出品者ブロック（sidebar に埋め込まれる vendor block）── */
.hp-listing--view-page .hp-vendor--view-block {
    border-color: var(--c-border);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-sm);
    background-color: var(--c-paper);
    transition: box-shadow var(--dur) var(--ease);
}

.hp-listing--view-page .hp-vendor--view-block:hover {
    box-shadow: var(--shadow-md);
}

.hp-listing--view-page .hp-vendor--view-block .hp-vendor__footer {
    border-top-color: var(--c-border-soft);
}

/* ── ページタイトル ── */
.hp-listing--view-page .hp-listing__title {
    color: var(--c-ink);
    line-height: 1.3;
}

/* ── カテゴリリンク ── */
.hp-listing--view-page .hp-listing__categories a {
    color: var(--c-text-mute);
    text-decoration: none;
}

.hp-listing--view-page .hp-listing__categories a:hover {
    color: var(--c-accent);
}

/* ── モバイル: CTA コンテナを視覚的に強調 ──
   （HivePress sticky JS はデスクトップのみ動作するため、
     スマホではサイドバーがメインコンテンツ下部にフローする。
     アクセントボーダーで埋もれないよう強調する。）  */
@media (max-width: 47.99em) {
    .hp-listing--view-page .hp-listing__actions--primary.hp-widget {
        border-top: 3px solid var(--c-accent);
        box-shadow: var(--shadow-md);
    }

    .hp-listing--view-page .hp-listing__attributes--primary {
        border-top: 3px solid var(--c-accent-soft);
    }
}

/* ── ダークモード補完（tokens.css 変数で自動対応済みだが bg の念押し）── */
html[data-theme="dark"] .hp-listing--view-page .hp-listing__attributes--primary,
html[data-theme="dark"] .hp-listing--view-page .hp-listing__actions--primary.hp-widget,
html[data-theme="dark"] .hp-listing--view-page .hp-vendor--view-block {
    background-color: var(--c-paper);
    border-color: var(--c-border);
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .hp-listing--view-page .hp-listing__attributes--primary,
    html:not([data-theme="light"]) .hp-listing--view-page .hp-listing__actions--primary.hp-widget,
    html:not([data-theme="light"]) .hp-listing--view-page .hp-vendor--view-block {
        background-color: var(--c-paper);
        border-color: var(--c-border);
    }
}

/* ============================================================
   T3-3: 詳細ページ CV ブロック（旧 inline #wn-store-listing-detail-cv-style）
   .wn-lcv-sticky / .wn-lcv-operator / .wn-lcv-info（JSで sidebar・説明後に注入）
   ============================================================ */
body .wn-lcv-sticky { position: static; padding: 1.25rem; margin: 0 0 1.25rem; background: #fff; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.08); border: 1px solid rgba(0,0,0,.06); }
body .wn-lcv-sticky__price-row { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: .65rem; border-bottom: 1px solid rgba(0,0,0,.08); margin-bottom: .75rem; }
body .wn-lcv-sticky__price-label { font-size: .78rem; color: #888; font-weight: 600; }
body .wn-lcv-sticky__price { font-size: 1.7rem; font-weight: 800; color: var(--c-accent, #F26B22); letter-spacing: -.01em; }
body .wn-lcv-sticky__meta { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin: 0 0 .85rem; }
body .wn-lcv-sticky__meta div { display: flex; flex-direction: column; gap: .15rem; }
body .wn-lcv-sticky__meta dt { margin: 0; font-size: .68rem; font-weight: 600; color: #999; letter-spacing: .04em; }
body .wn-lcv-sticky__meta dd { margin: 0; font-size: .85rem; font-weight: 700; color: #1a1a1a; line-height: 1.3; }
body .wn-lcv-sticky__cta { display: block; text-align: center; padding: .75rem 1rem; margin: 0 0 .5rem; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: .95rem; transition: transform .15s ease, box-shadow .15s ease; }
body .wn-lcv-sticky__cta--primary { background: var(--c-accent, #F26B22); color: #fff; box-shadow: 0 3px 10px rgba(242,107,34,.25); }
body .wn-lcv-sticky__cta--primary:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(242,107,34,.35); }
body .wn-lcv-sticky__cta--secondary { background: #fff; color: #1a1a1a; border: 1.5px solid rgba(0,0,0,.12); }
body .wn-lcv-sticky__cta--secondary:hover { border-color: var(--c-accent, #F26B22); color: var(--c-accent, #F26B22); }
body .wn-lcv-sticky__hint { margin: .75rem 0 0; font-size: .72rem; color: #888; line-height: 1.6; text-align: center; }
body .wn-lcv-sticky__hint a { color: var(--c-accent, #F26B22); text-decoration: none; }
body .wn-lcv-sticky__hint a:hover { text-decoration: underline; }
body .wn-lcv-operator { padding: 1.1rem; margin: 0 0 1.25rem; background: linear-gradient(180deg, #fff 0%, rgba(242,107,34,.03) 100%); border-radius: 12px; border: 1px solid rgba(0,0,0,.06); }
body .wn-lcv-operator__head { display: flex; align-items: center; gap: .75rem; margin-bottom: .85rem; }
body .wn-lcv-operator__avatar { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--c-accent, #F26B22); color: #fff; border-radius: 50%; font-size: 1.1rem; font-weight: 700; flex-shrink: 0; }
body .wn-lcv-operator__name { margin: 0; font-size: .95rem; font-weight: 800; color: #1a1a1a; }
body .wn-lcv-operator__role { margin: 0; font-size: .72rem; color: #888; }
body .wn-lcv-operator__stats { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; text-align: center; }
body .wn-lcv-operator__stats li { padding: .45rem .25rem; background: rgba(255,255,255,.8); border-radius: 6px; display: flex; flex-direction: column; gap: .1rem; }
body .wn-lcv-operator__stats .num { font-size: 1rem; font-weight: 800; color: var(--c-accent, #F26B22); line-height: 1.1; }
body .wn-lcv-operator__stats .num small { font-size: .65em; }
body .wn-lcv-operator__stats .lbl { font-size: .65rem; color: #888; line-height: 1.3; }
body .wn-lcv-operator__cred { margin: 0 0 .65rem; padding: .5rem .65rem; font-size: .72rem; line-height: 1.5; background: rgba(15,76,129,.08); border-radius: 6px; color: #2a2f3a; }
body .wn-lcv-operator__more { display: block; text-align: center; font-size: .8rem; font-weight: 700; color: var(--c-accent, #F26B22); text-decoration: none; }
body .wn-lcv-operator__more:hover { text-decoration: underline; }
body .wn-lcv-info { margin: 2rem 0; padding: 1.5rem 0 0; border-top: 1px solid rgba(0,0,0,.08); }
body .wn-lcv-info__h2 { margin: 0 0 1.25rem; font-size: 1.25rem; font-weight: 800; color: var(--c-ink); }
body .wn-lcv-info__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 700px) { body .wn-lcv-info__grid { grid-template-columns: 1fr; } }
body .wn-lcv-info__box { padding: 1rem 1.1rem; background: rgba(0,0,0,.02); border-radius: 8px; border-left: 3px solid var(--c-accent, #F26B22); }
body .wn-lcv-info__box--excludes { border-left-color: #C20E0E; }
body .wn-lcv-info__box--duration { border-left-color: #2A4D7A; }
body .wn-lcv-info__box--prepare  { border-left-color: #2f9e6d; }
body .wn-lcv-info__h3 { margin: 0 0 .5rem; font-size: .9rem; font-weight: 800; color: #1a1a1a; }
body .wn-lcv-info__box ul { margin: 0; padding: 0 0 0 1.1rem; list-style: disc; }
body .wn-lcv-info__box ul li { margin: .2rem 0; font-size: .85rem; line-height: 1.65; color: #2a2f3a; }
body .wn-lcv-info__box p { margin: 0; font-size: .85rem; line-height: 1.65; color: #2a2f3a; }
html[data-theme="dark"] body .wn-lcv-sticky,
html[data-theme="dark"] body .wn-lcv-operator { background: #1f2430; border-color: rgba(255,255,255,.1); }
html[data-theme="dark"] body .wn-lcv-sticky__price-label,
html[data-theme="dark"] body .wn-lcv-sticky__meta dt,
html[data-theme="dark"] body .wn-lcv-operator__role,
html[data-theme="dark"] body .wn-lcv-operator__stats .lbl,
html[data-theme="dark"] body .wn-lcv-sticky__hint { color: #aab1bf; }
html[data-theme="dark"] body .wn-lcv-sticky__meta dd,
html[data-theme="dark"] body .wn-lcv-operator__name,
html[data-theme="dark"] body .wn-lcv-info__h3,
html[data-theme="dark"] body .wn-lcv-info__box ul li,
html[data-theme="dark"] body .wn-lcv-info__box p { color: #e6e8ed; }
html[data-theme="dark"] body .wn-lcv-operator__stats li { background: rgba(255,255,255,.04); }
html[data-theme="dark"] body .wn-lcv-operator__cred { background: rgba(15,76,129,.25); color: #cfd6e2; }
html[data-theme="dark"] body .wn-lcv-info__box { background: rgba(255,255,255,.03); }
html[data-theme="dark"] body .wn-lcv-sticky__cta--secondary { background: rgba(255,255,255,.05); color: #e6e8ed; border-color: rgba(255,255,255,.15); }

/* ============================================================
   sticky-fix: JS の position:fixed(+px固定left) をやめ、
   CSS position:sticky で列に追従（リサイズ安全）。
   listing-detail.js が destroy 後に .lhchild-css-sticky を付与する。
   ============================================================ */
body.hp-template--listing-view-page .hp-page__sidebar .inner-wrapper-sticky.lhchild-css-sticky {
    position: sticky;
    top: 32px;
    align-self: flex-start;
}