/* =====================================================
 IQOS + PLOOM 品牌資訊頁統一CSS
===================================================== */


/* ==============================
 主容器
============================== */


.iqos-guide-page,
.ploom-guide-page{


    width:1100px;

    max-width:calc(100% - 40px);

    margin:40px auto;

    color:#222;

    font-family:

    Arial,
    "Microsoft JhengHei",
    sans-serif;


}



.iqos-guide-page *,
.ploom-guide-page *{

    box-sizing:border-box;

}



.iqos-guide-page img,
.ploom-guide-page img{

    max-width:100%;

    display:block;

}



.iqos-block,
.ploom-block{

    margin-bottom:60px;

}





/* ==============================
 Banner
============================== */


.iqos-hero,
.ploom-hero{


    height:320px;

    background:#111;

    border-radius:18px;

    display:flex;

    align-items:center;

    padding:45px 60px;

    margin-bottom:60px;


}




.iqos-hero-content,
.ploom-hero-content{


    max-width:650px;

    color:#fff;


}




.iqos-hero h1,
.ploom-hero h1{


    font-size:38px;

    line-height:1.4;

    margin-bottom:20px;


}




.iqos-hero p,
.ploom-hero p{


    color:#ddd;

    line-height:1.9;


}







/* ==============================
 標題
============================== */


.iqos-title,
.ploom-title{


    text-align:center;

    margin-bottom:35px;


}



.iqos-title h2,
.ploom-title h2{


    font-size:32px;

    margin-bottom:15px;


}



.iqos-title p,
.ploom-title p{


    color:#666;

    line-height:1.8;

}





/* ==============================
 主機介紹左右卡
============================== */


.iqos-info-card,
.ploom-info-card{


    display:flex;

    border:1px solid #eee;

    border-radius:16px;

    overflow:hidden;

    background:#fff;


}



.info-image,
.ploom-info-image{


    width:45%;


}



.info-image img,
.ploom-info-image img{


    width:100%;

    height:300px;

    object-fit:contain;

    background:#f7f7f7;


}





.info-text,
.ploom-info-text{


    width:55%;

    padding:35px;


}



.info-text li,
.ploom-info-text li{


    line-height:2;


}






/* ==============================
 三款主機卡片
============================== */


.iqos-product-grid,
.ploom-product-grid{


    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:22px;


}




.iqos-product-card,
.ploom-product-card{


    border:1px solid #eee;

    border-radius:16px;

    overflow:hidden;

    background:#fff;


}



.product-img,
.ploom-product-image{


    background:#f7f7f7;


}



.product-img img,
.ploom-product-image img{


    width:100%;

    height:250px;

    object-fit:contain;


}



.product-body,
.ploom-product-content{


    padding:25px;


}



.product-body h3,
.ploom-product-content h3{


    font-size:24px;


}




.product-body li,
.ploom-product-content li{


    line-height:2;


}







/* ==============================
 按鈕
============================== */


.iqos-btn,
.ploom-btn{


    display:inline-block;

    margin-top:15px;

    padding:10px 25px;

    background:#111;

    color:#fff;

    border-radius:25px;

    text-decoration:none;


}


.iqos-btn:hover,
.ploom-btn:hover{


    color:#fff;

    background:#333;


}







/* ==============================
 比較表
============================== */


.iqos-table-box,
.ploom-compare-box{


    background:#202329;

    padding:15px;

    border-radius:18px;

    overflow-x:auto;


}



.iqos-table-box table,
.ploom-compare-box table{


    width:100%;

    min-width:850px;

    border-collapse:collapse;

    color:#fff;


}



.iqos-table-box th,
.ploom-compare-box th{


    padding:22px;

    border-bottom:1px solid #444;

}


.iqos-table-box td,
.ploom-compare-box td{


    padding:20px;

    text-align:center;

    border-bottom:1px solid #333;


}



.ploom-compare-box span{


    display:block;

    color:#999;

    font-size:13px;


}



.ploom-compare-box strong{


    font-size:18px;


}








/* ==============================
 選擇推薦
============================== */


.choice-grid,
.ploom-choice-grid,
.ploom-recommend-grid{


    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;


}



.choice-card,
.ploom-choice-card,
.ploom-recommend-card{


    background:#f7f7f7;

    padding:30px;

    border-radius:15px;

    text-align:center;


}



.choice-card strong,
.ploom-choice-card strong,
.ploom-recommend-card h3{


    display:block;

    font-size:24px;

    margin:15px 0;


}







/* ==============================
 配件
============================== */


.accessory-grid,
.ploom-accessory-grid{


    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;


}




.accessory-card,
.ploom-accessory-card{


    border:1px solid #eee;

    border-radius:15px;

    overflow:hidden;

    background:#fff;


}



.accessory-image img,
.ploom-accessory-image img{


    width:100%;

    height:230px;

    object-fit:contain;

    background:#f7f7f7;


}



.accessory-content,
.ploom-accessory-content{


    padding:22px;


}







/* ==============================
 客製展示
============================== */


.custom-display-box,
.ploom-custom-box{


    display:flex;

    align-items:center;

    gap:40px;

    background:#111;

    color:#fff;

    padding:40px;

    border-radius:18px;


}



.custom-display-text,
.ploom-custom-text{


    width:55%;


}



.custom-display-image,
.ploom-custom-image{


    width:45%;


}



.custom-display-image img,
.ploom-custom-image img{


    border-radius:15px;


}






/* ==============================
 手冊
============================== */


.manual-grid,
.brand-manual-grid{


    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:22px;


}



.manual-card,
.brand-manual-card{


    border:1px solid #eee;

    border-radius:15px;

    overflow:hidden;


}



.manual-image img,
.brand-manual-image img{


    width:100%;

    height:220px;

    object-fit:contain;

    background:#f7f7f7;


}



.manual-content,
.brand-manual-content{


    padding:25px;


}







/* ==============================
 FAQ
============================== */


.faq-item,
.brand-faq-item{


    padding:22px 0;

    border-bottom:1px solid #eee;


}



.faq-item p,
.brand-faq-item p{


    color:#666;

    line-height:1.8;


}







/* ==============================
 平板
============================== */


@media(max-width:992px){


.iqos-product-grid,
.ploom-product-grid,
.choice-grid,
.ploom-choice-grid,
.ploom-recommend-grid{


    grid-template-columns:repeat(2,1fr);


}



.ploom-accessory-grid,
.accessory-grid{


    grid-template-columns:repeat(2,1fr);


}


}







/* ==============================
 手機
============================== */


@media(max-width:768px){


.iqos-guide-page,
.ploom-guide-page{


    width:auto;

    max-width:calc(100% - 30px);


}



.iqos-hero,
.ploom-hero{


    height:auto;

    padding:35px 25px;


}



.iqos-hero h1,
.ploom-hero h1{


    font-size:28px;


}



.iqos-info-card,
.ploom-info-card{


    display:block;


}



.info-image,
.info-text,
.ploom-info-image,
.ploom-info-text{


    width:100%;


}



.iqos-product-grid,
.ploom-product-grid,
.choice-grid,
.ploom-choice-grid,
.ploom-recommend-grid,
.ploom-accessory-grid,
.accessory-grid,
.manual-grid,
.brand-manual-grid{


    grid-template-columns:1fr;


}



.custom-display-box,
.ploom-custom-box{


    display:block;

    padding:25px;


}



.custom-display-text,
.custom-display-image,
.ploom-custom-text,
.ploom-custom-image{


    width:100%;


}



.ploom-custom-image,
.custom-display-image{


    margin-top:25px;


}


}
/* =====================================================
 PLOOM 使用手冊 + FAQ
 Part 4 CSS
===================================================== */


/* ===============================
 PLOOM使用手冊區
=============================== */


.ploom-manual-section{

    margin-bottom:70px;

}





.ploom-manual-grid{


    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:22px;


}







/* 手冊卡片 */


.ploom-manual-card{


    background:#fff;

    border:1px solid #eeeeee;

    border-radius:16px;

    overflow:hidden;

    transition:.3s;


}



.ploom-manual-card:hover{


    transform:translateY(-5px);

    box-shadow:

    0 10px 25px rgba(0,0,0,.08);


}






/* 手冊圖片 */


.ploom-manual-image{


    background:#f7f7f7;

    display:flex;

    align-items:center;

    justify-content:center;


}




.ploom-manual-image img{


    width:100%;

    height:230px;

    object-fit:contain;


}






/* 手冊內容 */


.ploom-manual-content{


    padding:25px;


}




.ploom-manual-content h3{


    font-size:23px;

    font-weight:600;

    margin-bottom:15px;

    color:#222;


}




.ploom-manual-content p{


    font-size:14px;

    line-height:1.8;

    color:#666;

    margin-bottom:15px;


}




.ploom-manual-content ul{


    padding-left:20px;

    margin-bottom:20px;


}





.ploom-manual-content li{


    font-size:14px;

    line-height:2;

    color:#555;


}







/* 使用手冊按鈕 */

.ploom-manual-content .ploom-btn{


    display:inline-block;

    padding:10px 24px;

    background:#111;

    color:#fff;

    border-radius:25px;

    text-decoration:none;

    font-size:14px;


}



.ploom-manual-content .ploom-btn:hover{


    background:#333;

    color:#fff;


}









/* ===============================
 PLOOM FAQ
=============================== */


.ploom-faq-section{


    margin-top:70px;

    margin-bottom:50px;


}





.ploom-faq-list{


    max-width:900px;

    margin:0 auto;


}






.ploom-faq-item{


    padding:25px 0;

    border-bottom:1px solid #eeeeee;


}





.ploom-faq-item h3{


    font-size:20px;

    font-weight:600;

    color:#222;

    margin-bottom:12px;


}





.ploom-faq-item p{


    font-size:15px;

    line-height:1.9;

    color:#666;

    margin:0;


}







/* ===============================
 SEO文字區
=============================== */


.ploom-faq-item strong{


    color:#111;

}







/* ===============================
 平板
=============================== */


@media(max-width:992px){



.ploom-manual-grid{


    grid-template-columns:repeat(2,1fr);


}



}








/* ===============================
 手機
=============================== */


@media(max-width:768px){



.ploom-manual-grid{


    grid-template-columns:1fr;


}




.ploom-manual-image img{


    height:220px;


}




.ploom-manual-content{


    padding:20px;


}




.ploom-manual-content h3{


    font-size:21px;


}




.ploom-faq-list{


    width:100%;


}





.ploom-faq-item{


    padding:20px 0;


}





.ploom-faq-item h3{


    font-size:18px;


}




.ploom-faq-item p{


    font-size:14px;


}



}