/* 智慧控制盒產品頁：沿用 farmerpack.css 的新品發表式版型（fp- 開頭），產品線色維持品牌綠（.fp 預設變數），
   這裡只補上主視覺背景與本頁專用的區塊（cb- 開頭）。舊版頁面保留在 repo 根目錄 Docs/舊版頁面/products-smart-control-box-2026-10/ */

/* ── 主視覺：溫室照片壓暗，去背產品照浮在上面、以綠色光暈襯底 ── */
.fp-cbox .fp-hero {
    --fp-accent-ink: var(--fp-accent-glow);
    background:
        radial-gradient(ellipse 60% 45% at 50% 80%, rgba(var(--fp-brand-rgb), 0.24), transparent 70%),
        linear-gradient(180deg, rgba(10, 13, 11, 0.76) 0%, rgba(10, 13, 11, 0.88) 55%, var(--fp-ink) 100%),
        url("../../img/products/control_box/control_box_hero.webp") center 40% / cover no-repeat,
        var(--fp-ink);
    color: var(--fp-text);
    padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
}

/* 照片較亮處（溫室屋頂）：麵包屑、定義句比其他深色區塊的 --fp-dim 再亮一些 */
.fp-cbox .fp-hero .fp-breadcrumb ol,
.fp-cbox .fp-hero .fp-definition {
    color: rgba(232, 242, 235, 0.86);
}

.fp-cbox .fp-hero .fp-breadcrumb li + li::before {
    color: var(--fp-dim);
}

.fp-cbox .fp-hero .fp-lead {
    max-width: 40rem;
    color: rgba(242, 247, 243, 0.88);
}

/* 去背產品照：原照片底部是線材與固定架，以遮罩淡出 */
.cb-hero-photo {
    display: block;
    width: min(360px, 66vw);
    height: auto;
    margin: 2.25rem auto 0;
    filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 44px rgba(var(--fp-glow-rgb), 0.22));
    -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
}

/* ── 痛點段落：置中、限寬 ── */
.cb-pain .fp-section-head {
    margin-bottom: 0;
}

/* ── 設備場景：4 張卡片 ── */
.cb-scenarios {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

/* fp-card 預設佔便當盒 6 欄中的 2 欄，這裡一張一欄 */
.cb-scenarios .fp-card {
    grid-column: auto;
    min-height: 0;
}


.cb-devices {
    justify-content: center;
    margin-top: 2rem;
}

.fp-light .cb-devices li {
    border-color: #d2d2d7;
    background: #fff;
    color: #1d1d1f;
}

@media (max-width: 991.98px) {
    .cb-scenarios {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .cb-scenarios {
        grid-template-columns: 1fr;
    }
}

/* ── 既有設備：接法流程的說明句 ── */
.cb-flow-caption {
    margin: 1.5rem auto 0;
    max-width: 36rem;
    text-align: center;
    color: var(--fp-dim);
}

/* ── 實體按鍵：按鍵外觀＋說明 ── */
.cb-keys {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
}

.cb-keys li {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    color: #3a3a3c;
}

.cb-key {
    flex: 0 0 auto;
    min-width: 4.25rem;
    padding: 0.45rem 0.9rem;
    border-radius: 0.65rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* 按鍵底色與白字對比 4.5:1 以上 */
.cb-key-on { background: var(--green-700); }
.cb-key-off { background: #b3261e; }
.cb-key-auto { background: #1d5fa8; }

/* ── 兩種款式：接法（三段箭頭）、選擇指南表 ── */
.cb-model-icon {
    color: var(--fp-accent-ink);
}

.cb-wiring {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 1.25rem 0 1.5rem;
    padding: 0;
}

.cb-wiring li {
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: var(--fp-soft);
    color: #1d1d1f;
    font-size: 0.92rem;
    font-weight: 600;
}

.cb-wiring li + li::before {
    content: "→";
    margin-right: 0.5rem;
    margin-left: -0.15rem;
    color: var(--fp-accent-ink);
    font-weight: 700;
}

.cb-guide-table {
    --bs-table-bg: transparent;
}

.cb-guide-table th {
    color: #515154;
    font-weight: 600;
    white-space: nowrap;
}

.cb-guide-table td {
    color: #3a3a3c;
}

.cb-guide-table td:nth-child(2) {
    white-space: nowrap;
}

.cb-help {
    display: flex;
    align-items: center;
    gap: 1rem 1.25rem;
    margin-top: 1.5rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--fp-radius);
    background: var(--fp-soft);
    color: #1d1d1f;
}

.cb-help > .bi {
    font-size: 1.75rem;
    color: var(--fp-accent-ink);
    line-height: 1;
}

.cb-help p {
    flex: 1 1 auto;
}

.cb-help .fp-btn {
    flex: 0 0 auto;
}

@media (max-width: 767.98px) {
    .cb-help {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── 案例：說明段落與連結 ── */
.cb-case figcaption p {
    margin-bottom: 1rem;
}

/* ── 結尾行動呼籲：田野空拍壓暗（背景圖放在 CSS 檔不會依語言換圖，所以要用沒有文字的照片；
   原本的 control_box_summary.webp 手機螢幕上有中文 App 介面，2026-10 換掉） ── */
.cb-finale {
    background:
        linear-gradient(180deg, rgba(10, 13, 11, 0.8), rgba(10, 13, 11, 0.88)),
        url("../../img/backgrounds/background-farm.webp") center 60% / cover no-repeat,
        var(--fp-ink);
}

.cb-finale .fp-lead {
    max-width: 40rem;
    margin: 1.25rem auto 0;
    color: rgba(242, 247, 243, 0.86);
}