/* Shared EN/FR/DE visualizer improvements. Scoped to the current index page. */
.visualizer-usability .visualizer-app { max-width: 1240px; margin-inline: auto; }
.visualizer-usability .surface-box-title { padding-right: 0; }
.visualizer-usability .surface-box-title h1 { font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.35; }
.visualizer-usability .surface-picker-box { padding: 20px; }
.visualizer-usability .step-label,
.visualizer-usability .control-label { font-size: .85rem; line-height: 1.5; }
.visualizer-usability .surface-step-block > strong,
.visualizer-usability .surface-material-row > strong,
.visualizer-usability .surface-detail-panel > strong { font-size: 1rem; line-height: 1.5; }
.visualizer-usability .choice-row button,
.visualizer-usability .choice-grid button,
.visualizer-usability .color-choice-list button,
.visualizer-usability .layout-choice-list button { min-height: 44px; padding: 10px 12px; font-size: .9rem; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
.visualizer-usability .surface-core-row { grid-template-columns: minmax(0, 1fr); margin-top: 20px; padding-top: 20px; }
.visualizer-usability .surface-core-choice .core-button-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.visualizer-usability .surface-core-choice .core-button-grid button { padding: 12px; }
.visualizer-usability .surface-core-choice .core-button-grid strong { font-size: .9rem; line-height: 1.45; }
.visualizer-usability .surface-core-choice .core-button-grid span { font-size: .85rem; line-height: 1.5; }
.visualizer-usability #selectedPrice,
.visualizer-usability #corePriceInfo,
.visualizer-usability .color-preview-info em { font-size: .9rem; line-height: 1.55; }
.visualizer-usability .surface-selected-product h2 { font-size: 1.05rem; line-height: 1.4; overflow-wrap: anywhere; }
.visualizer-usability #selectedMaterial { font-size: .8rem; line-height: 1.5; }
.visualizer-usability .unit-price-note { color: var(--muted); font-size: .82rem; line-height: 1.5; margin: 10px 0; }
.visualizer-usability .selected-summary-quote { min-height: 44px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; font-size: .9rem; line-height: 1.4; }
.visualizer-usability .top-layout-summary span,
.visualizer-usability .top-layout-summary p { font-size: .8rem; line-height: 1.4; }
.visualizer-usability .top-layout-summary strong { font-size: .95rem; line-height: 1.5; }
.visualizer-usability .selection-status:empty { display: none; }
.visualizer-usability .selection-status { padding: 12px; border-left: 3px solid var(--accent); background: var(--accent-soft); font-size: .9rem; line-height: 1.6; }
.visualizer-usability #tatamiVisualizerHeri .heri-picker { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.visualizer-usability #tatamiVisualizerHeri .heri-preview-panel { order: 0; }
.visualizer-usability .heri-options { order: 1; width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.visualizer-usability .heri-options summary { cursor: pointer; min-height: 44px; box-sizing: border-box; padding: 12px 16px; color: var(--accent); font-size: .95rem; font-weight: 700; }
.visualizer-usability .heri-options label { display: block; margin: 12px 16px 6px; font-size: .9rem; }
.visualizer-usability #heriSearch { display: block; box-sizing: border-box; width: calc(100% - 32px); margin: 0 16px; padding: 12px; font: inherit; font-size: 16px; border: 1px solid #81968b; border-radius: 6px; }
.visualizer-usability #heriSearchCount { margin: 8px 16px; font-size: .85rem; }
.visualizer-usability #tatamiVisualizerHeri .heri-grid { margin: 0 16px 16px; max-height: 340px; }
.visualizer-usability #heri-grid button[hidden] { display: none !important; }
.visualizer-usability #heri-grid button span { font-size: .85rem; line-height: 1.4; }
.visualizer-usability :is(button, a, summary, input):focus-visible { outline: 3px solid #b07829; outline-offset: 3px; }
.visualizer-usability button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent); }

@media (min-width: 981px) {
    .visualizer-usability.index2-top-summary .sticky-preview-pair {
        /* Keep the taller, readable summary in the page flow. */
        position: static !important;
        grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr) !important;
        width: 100% !important;
    }
    .visualizer-usability.index2-top-summary .surface-selected-product { position: static !important; }
    .visualizer-usability.index2-top-summary .sticky-preview-pair .room-reference img { max-height: 420px !important; object-fit: contain !important; }
}

@media (max-width: 980px) {
    .visualizer-usability .visualizer-app { width: 100%; padding: 16px !important; box-sizing: border-box; }
    .visualizer-usability .studio,
    .visualizer-usability .preview-column { display: grid; width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); }
    .visualizer-usability.index2-top-summary .sticky-preview-pair {
        position: static !important; display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: "reference" "summary" "core" !important;
        gap: 12px !important; width: 100% !important;
        max-height: none !important; padding: 0 !important;
    }
    .visualizer-usability.index2-top-summary .room-reference { grid-area: reference !important; margin: 0 !important; }
    .visualizer-usability.index2-top-summary .room-reference img { width: 100% !important; height: auto !important; max-height: 340px !important; object-fit: contain !important; }
    .visualizer-usability.index2-top-summary .surface-selected-product {
        grid-area: summary !important; position: static !important;
        grid-template-columns: 96px minmax(0, 1fr) !important;
        gap: 12px !important; padding: 16px !important;
        width: 100% !important; min-height: 0 !important; box-sizing: border-box;
    }
    .visualizer-usability.index2-top-summary .surface-selected-product > div:last-child { padding: 0 !important; min-width: 0 !important; }
    .visualizer-usability.index2-top-summary .top-selected-image-combo { grid-column: 1 !important; grid-row: 1 !important; }
    .visualizer-usability.index2-top-summary .selected-summary-quote { position: static !important; width: 100% !important; margin-top: 12px !important; padding: 12px !important; font-size: .9rem !important; }
    .visualizer-usability.index2-top-summary #selectedName { font-size: 1.05rem !important; line-height: 1.4 !important; }
    .visualizer-usability.index2-top-summary #selectedMaterial { font-size: .8rem !important; line-height: 1.5 !important; }
    .visualizer-usability.index2-top-summary #selectedPrice { font-size: .9rem !important; line-height: 1.55 !important; }
    .visualizer-usability.index2-top-summary .top-core-preview { grid-area: core !important; padding: 12px !important; box-sizing: border-box; }
    .visualizer-usability .surface-basic-controls,
    .visualizer-usability .surface-material-stack,
    .visualizer-usability .surface-picker-row,
    .visualizer-usability .color-display-frame { grid-template-columns: minmax(0, 1fr); }
    .visualizer-usability .surface-picker-box { padding: 16px; min-width: 0; }
    .visualizer-usability .surface-box-title { padding-right: 0; }
    .visualizer-usability .core-info-popup { position: static; margin-top: 8px; width: 100%; box-sizing: border-box; }
    .visualizer-usability .core-info-popup::after { display: none; }
    .visualizer-usability .layout-only-row { width: 100% !important; }
    .visualizer-usability .share-panel button { min-width: 44px; min-height: 44px; }
}

@media (max-width: 560px) {
    .visualizer-usability .visualizer-app { padding: 12px !important; }
    .visualizer-usability.index2-top-summary .surface-selected-product { grid-template-columns: minmax(0, 1fr) !important; }
    .visualizer-usability.index2-top-summary .top-selected-image-combo { max-width: 160px; }
    .visualizer-usability .surface-core-choice .core-button-grid { grid-template-columns: minmax(0, 1fr); }
    .visualizer-usability .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .visualizer-usability .color-choice-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.visualizer-usability .share-panel { gap: 8px; }
.visualizer-usability .social-share-buttons button { width: auto; min-width: 44px; min-height: 44px; padding: 10px 14px; border-radius: 6px; overflow: visible; font-size: .85rem; }
@media (min-width: 981px) {
    .visualizer-usability.index2-top-summary .sticky-preview-pair .room-reference,
    .visualizer-usability.index2-top-summary .sticky-preview-pair .room-reference img { max-width: none !important; }
}
@media (max-width: 560px) {
    .visualizer-usability .share-panel > button { flex: 1 1 140px; }
    .visualizer-usability .social-share-buttons { flex-wrap: wrap; }
}

/* Show the photo on every core option, including touch screens. */
.visualizer-usability .surface-core-choice .core-button-grid button { width: 100%; height: auto; box-sizing: border-box; align-content: start; }
.visualizer-usability .core-choice-image { display: block; width: 100%; height: 160px; margin-bottom: 8px; object-fit: contain; background: #f6f5f1; border-radius: 4px; }
@media (max-width: 560px) {
    .visualizer-usability .core-choice-image { height: 150px; }
}

@media (max-width: 980px) {
    .visualizer-usability .core-info-popup { display: none; }
    .visualizer-usability .core-option-wrap.is-popup-open .core-info-popup { display: grid; }
}

/* ===== 2026-10-22 価格のまとめ・縁の絞り込み・スマホの下部バー ===== */
/* 価格のまとめ（1枚の価格・枚数・概算） */
.visualizer-usability .price-summary { margin: 10px 0 12px; padding: 12px 14px; border: 1px solid var(--line, #dfe5e1); border-radius: 8px; background: #fbfcfb; white-space: normal; font-size: .9rem; line-height: 1.5; color: inherit; }
.visualizer-usability .price-summary .ps-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-top: 1px solid #e8ece9; }
.visualizer-usability .price-summary .ps-row:first-child { border-top: 0; padding-top: 0; }
.visualizer-usability .price-summary .ps-row span { color: #3d4b44; }
.visualizer-usability .price-summary .ps-row strong { font-size: 1rem; white-space: nowrap; color: #17231f; }
.visualizer-usability .price-summary .ps-main strong { font-size: 1.35rem; color: #0f5c45; }
.visualizer-usability .price-summary .ps-total strong { font-size: 1.15rem; color: #0f5c45; }
.visualizer-usability .price-summary .ps-sub { margin: 0 0 6px; font-size: .8rem; line-height: 1.5; color: #5b6862; }
.visualizer-usability .price-summary .ps-note { margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed #d5ddd8; font-size: .78rem; line-height: 1.5; color: #5b6862; }
.visualizer-usability .price-summary .ps-contact { margin: 0; font-weight: 700; }

/* 縁：色・柄の絞り込み */
.visualizer-usability .heri-filters { padding: 12px 16px 0; }
.visualizer-usability .heri-filter-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.visualizer-usability .heri-filter-row button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 12px; border: 1px solid #c7d1cb; border-radius: 999px; background: #fff; color: #23332b; font: inherit; font-size: .85rem; cursor: pointer; }
.visualizer-usability .heri-filter-row button[aria-pressed="true"] { background: #0f5c45; border-color: #0f5c45; color: #fff; box-shadow: none; }
.visualizer-usability .heri-filter-row button i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); display: inline-block; }
.visualizer-usability .heri-pattern-row button { min-height: 36px; padding: 6px 12px; font-size: .8rem; border-radius: 6px; }
.visualizer-usability #heri-grid .heri-thumb { position: relative; }
.visualizer-usability #heri-grid .heri-extra { display: block; font-style: normal; font-size: .7rem; line-height: 1.3; color: #8a5a14; }
.visualizer-usability #tatamiVisualizerHeri .heri-grid { max-height: 420px; }

/* スマホの下部バー（選んだ畳・価格・概算・見積もりボタン） */
.mobile-quote-bar { display: none; }
@media (max-width: 980px) {
    .mobile-quote-bar:not([hidden]) {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
        display: flex; align-items: center; gap: 10px;
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
        background: #fff; border-top: 1px solid #d5ddd8; box-shadow: 0 -6px 18px rgba(18,40,30,.12);
    }
    .mobile-quote-bar img { width: 52px; height: 52px; flex: 0 0 52px; object-fit: cover; border-radius: 6px; background: #f2f2ee; }
    .mobile-quote-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.3; }
    .mobile-quote-text strong { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mobile-quote-text span { font-size: .8rem; color: #3d4b44; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mobile-quote-text span:last-child { font-weight: 700; color: #0f5c45; font-size: .9rem; }
    .mobile-quote-bar a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 999px; background: #0f5c45; color: #fff !important; font-weight: 800; font-size: .9rem; text-decoration: none; }
    body.has-mobile-quote-bar { padding-bottom: 78px; }

    /* 縦に並べたときの順番：写真 → 選んだ内容と価格 → 操作 → 共有ボタンは最後 */
    .visualizer-usability .preview-column { display: flex !important; flex-direction: column; }
    .visualizer-usability .preview-column > .sticky-preview-pair { order: 1; }
    .visualizer-usability .preview-column > .catalog-section { order: 2; }
    .visualizer-usability .preview-column > .contact-cta { order: 3; }
    .visualizer-usability .preview-column > .size-note { order: 4; }
    .visualizer-usability .preview-column > .share-panel { order: 5; margin-top: 16px; }

    /* 操作ボタンは指で押しやすい大きさに */
    .visualizer-usability .choice-row button,
    .visualizer-usability .choice-grid button,
    .visualizer-usability .color-choice-list button,
    .visualizer-usability .layout-choice-list button { min-height: 48px; font-size: 1rem; }
    .visualizer-usability .surface-step-block > strong,
    .visualizer-usability .surface-material-row > strong,
    .visualizer-usability .surface-detail-panel > strong { font-size: 1.05rem; }
    .visualizer-usability .heri-options summary { min-height: 48px; font-size: 1rem; }
    .visualizer-usability #heri-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
    .visualizer-usability.index2-top-summary .room-reference img { max-height: 260px !important; }
    .visualizer-usability .price-summary .ps-main strong { font-size: 1.25rem; }
}
.visualizer-usability #selectedPrice.price-summary { white-space: normal !important; }
@media (max-width: 980px) {
    /* 芯材：スマホでは2列・写真を小さくして、ページを短く */
    .visualizer-usability .surface-core-choice .core-button-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
    .visualizer-usability .core-choice-image { height: 90px !important; }
    .visualizer-usability .surface-core-choice .core-button-grid button { padding: 8px !important; }
    .visualizer-usability .surface-core-choice .core-button-grid strong { font-size: .85rem; }
    .visualizer-usability .surface-core-choice .core-button-grid span { font-size: .78rem; }
    .visualizer-usability .layout-choice-list button { font-size: .95rem; white-space: nowrap; overflow-wrap: normal; }
}

/* ---- 2026-10-28：樹脂（Synthetic）では床暖房対応の芯材を選べない表示 ---- */
.visualizer-usability .core-button-grid button.is-unavailable { opacity: .5; cursor: not-allowed; filter: grayscale(1); background: #f3f3f1; }
.visualizer-usability .core-button-grid button.is-unavailable:hover { background: #f3f3f1; }
.visualizer-usability .core-unavailable-note { display: block; margin-top: 4px; font-size: .75rem; font-weight: 800; color: #8a3b2b; }
.visualizer-usability .core-rule-note { margin: 6px 0 10px; padding: 8px 10px; background: #fff6e8; border: 1px solid #f0d3a8; border-radius: 6px; font-size: .85rem; line-height: 1.5; color: #6b4a1a; }
.visualizer-usability .core-rule-note[hidden] { display: none; }

/* ---- 2026-10-28：スマホの仕上げ ---- */
.visualizer-usability .core-option-wrap { min-width: 0; }
.visualizer-usability .core-choice-image { display: block; width: 100%; max-width: 100%; object-fit: cover; }
@media (max-width: 980px) {
    /* 間取り：写真を上、畳数のボタンを下に4列で並べる（右側の縦長の列と空白をなくす） */
    .visualizer-usability .layout-only-row { width: 100% !important; }
    .visualizer-usability .layout-selector-card { grid-template-columns: 1fr !important; min-height: 0 !important; }
    .visualizer-usability .layout-display-frame img { height: 200px !important; }
    .visualizer-usability .layout-display-frame p { min-height: 0; font-size: .85rem; }
    .visualizer-usability .layout-choice-list { grid-template-rows: none !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 10px; border-left: 0 !important; border-top: 1px solid var(--line); }
    .visualizer-usability .layout-choice-list button { min-height: 44px; border: 1px solid var(--line) !important; border-radius: 6px; font-size: .9rem; }
}

/* ---- 2026-10-28：USD・EUR の目安表示と通貨の切り替え ---- */
.visualizer-usability .price-summary .ps-currency { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin: 0 0 8px; }
.visualizer-usability .price-summary .ps-currency span { margin-right: 4px; font-size: .75rem; color: #5b6862; }
.visualizer-usability .price-summary .ps-currency button { min-width: 44px; min-height: 32px; padding: 4px 8px; border: 1px solid #c9d3cd; border-radius: 999px; background: #fff; color: #17231f; font: inherit; font-size: .75rem; font-weight: 800; cursor: pointer; }
.visualizer-usability .price-summary .ps-currency button.is-active { background: #0f5c45; border-color: #0f5c45; color: #fff; }
.visualizer-usability .price-summary .ps-fx { display: block; margin-top: 2px; font-size: .8rem; font-weight: 700; color: #5b6862; text-align: right; }
.visualizer-usability .price-summary .ps-fx-note { margin-top: 4px; }

/* 2026-10-28：芯材の写真はクリックで大きく表示 */
.visualizer-usability .core-choice-image, .visualizer-usability .core-info-popup img { cursor: zoom-in; }
/* 拡大表示：スマホでも画面からはみ出さないように。開いている間は下のバーを隠す */
.image-lightbox { padding: 16px !important; }
.image-lightbox img { max-width: calc(100vw - 32px) !important; max-height: calc(100vh - 96px) !important; width: auto; height: auto; }
body:has(.image-lightbox.is-open) .mobile-quote-bar { display: none !important; }
@media (max-width: 980px) {
    /* 芯材の説明（タップで開く）：カードの下に、2列ぶんの幅で重ねて表示（写真と文を読みやすく） */
    .visualizer-usability .core-option-wrap { position: relative; }
    .visualizer-usability .core-info-popup { position: absolute !important; top: calc(100% + 6px); bottom: auto; z-index: 50; margin-top: 0; width: calc(200% + 8px) !important; max-width: none !important; grid-template-columns: 96px minmax(0, 1fr) !important; }
    .visualizer-usability .core-option-wrap:nth-child(odd) .core-info-popup { left: 0; right: auto; }
    .visualizer-usability .core-option-wrap:nth-child(even) .core-info-popup { right: 0; left: auto; }
    .visualizer-usability .core-info-popup img { width: 96px !important; height: 96px !important; }
}