/* =====================================================
 品牌資訊頁統一樣式
 IQOS / PLOOM / GLO
===================================================== */


/* ==========================
 外層
========================== */


.brand-guide-page{


    width:1100px;

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

    margin:40px auto;

    color:#222;

    font-family:

    Arial,
    "Microsoft JhengHei",
    sans-serif;


}



.brand-guide-page *{

    box-sizing:border-box;

}



.brand-guide-page img{


    max-width:100%;

    display:block;


}





.brand-section{


    margin-bottom:60px;


}







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


.brand-hero{


    height:320px;

    background:#111;

    border-radius:18px;

    display:flex;

    align-items:center;

    padding:45px 60px;

    margin-bottom:60px;


}



.brand-hero-content{


    max-width:650px;

    color:#fff;


}



.brand-hero h1{


    font-size:38px;

    line-height:1.4;

    margin-bottom:20px;


}



.brand-hero p{


    color:#ddd;

    line-height:1.9;

    font-size:16px;


}







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


.brand-title{


    text-align:center;

    margin-bottom:35px;


}




.brand-title h1,
.brand-title h2{


    font-size:32px;

    font-weight:700;

    margin-bottom:15px;


}



.brand-title p{


    color:#666;

    line-height:1.8;

    font-size:15px;


}







/* ==========================
 主機介紹
========================== */


.brand-info-card{


    display:flex;

    background:#fff;

    border:1px solid #eee;

    border-radius:16px;

    overflow:hidden;


}




.brand-info-image{


    width:45%;


}



.brand-info-image img{


    width:100%;

    height:300px;

    object-fit:contain;

    background:#f7f7f7;


}




.brand-info-text{


    width:55%;

    padding:35px;


}



.brand-info-text h3{


    font-size:26px;

    margin-bottom:15px;


}



.brand-info-text p{


    color:#666;

    line-height:1.8;


}



.brand-info-text li{


    line-height:2;

}







/* ==========================
 產品卡片
========================== */


.brand-product-grid{


    display:grid;

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

    gap:22px;


}





.brand-product-card{


    background:#fff;

    border:1px solid #eee;

    border-radius:16px;

    overflow:hidden;

    transition:.3s;


}



.brand-product-card:hover{


    transform:translateY(-5px);

    box-shadow:

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


}




.brand-product-image{


    background:#f7f7f7;


}



.brand-product-image img{


    width:100%;

    height:250px;

    object-fit:contain;


}




.brand-product-content{


    padding:25px;


}




.brand-product-content h3{


    font-size:24px;

    margin-bottom:15px;


}



.brand-product-content p{


    color:#666;

    line-height:1.8;


}



.brand-product-content li{


    line-height:2;


}







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


.brand-btn{


    display:inline-block;

    margin-top:15px;

    padding:10px 25px;

    background:#111;

    color:#fff;

    border-radius:25px;

    text-decoration:none;

    font-size:14px;


}



.brand-btn:hover{


    background:#333;

    color:#fff;


}







/* ==========================
 主機推薦
========================== */


.brand-choice-section{


    margin-bottom:60px;


}




.brand-choice-grid{


    display:grid;

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

    gap:20px;


}



.brand-choice-card{


    background:#f7f7f7;

    border-radius:15px;

    padding:30px;

    text-align:center;


}



.brand-choice-card h3{


    font-size:18px;

    color:#777;


}




.brand-choice-card strong{


    display:block;

    font-size:24px;

    margin:15px 0;


}



.brand-choice-card p{


    color:#666;

    line-height:1.8;


}







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


.brand-compare-box{


    background:#202329;

    border-radius:18px;

    padding:15px;

    overflow-x:auto;


}



.brand-compare-box table{


    width:100%;

    min-width:850px;

    border-collapse:collapse;

    color:#fff;


}




.brand-compare-box th{


    padding:22px;

    border-bottom:1px solid #444;

    font-size:18px;


}




.brand-compare-box td{


    padding:20px;

    border-bottom:1px solid #333;

    text-align:center;


}



.brand-compare-box span{


    display:block;

    color:#999;

    font-size:13px;

    margin-bottom:8px;


}




.brand-compare-box strong{


    font-size:17px;


}







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


.brand-accessory-grid{


    display:grid;

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

    gap:20px;


}




.brand-accessory-card{


    background:#fff;

    border:1px solid #eee;

    border-radius:15px;

    overflow:hidden;


}



.brand-accessory-image{


    background:#f7f7f7;


}




.brand-accessory-image img{


    width:100%;

    height:230px;

    object-fit:contain;


}



.brand-accessory-content{


    padding:22px;


}




.brand-accessory-content h3{


    font-size:21px;


}



.brand-accessory-content p{


    color:#666;

    line-height:1.8;


}



.brand-accessory-content li{


    line-height:2;


}







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


.brand-custom-section{


    margin:60px 0;


}




.brand-custom-box{


    display:flex;

    align-items:center;

    gap:40px;

    background:#111;

    color:#fff;

    padding:40px;

    border-radius:18px;


}




.brand-custom-text{


    width:55%;


}



.brand-custom-text h2{


    font-size:32px;


}



.brand-custom-text p{


    color:#ccc;

    line-height:1.9;


}




.brand-custom-image{


    width:45%;


}




.brand-custom-image img{


    width:100%;

    border-radius:15px;


}






.brand-tag span{


    display:inline-block;

    padding:7px 15px;

    background:#333;

    border-radius:20px;

    margin:5px;

    font-size:13px;


}







/* ==========================
 使用手冊
========================== */


.brand-manual-grid{


    display:grid;

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

    gap:22px;


}




.brand-manual-card{


    border:1px solid #eee;

    border-radius:15px;

    overflow:hidden;


}




.brand-manual-image{


    background:#f7f7f7;


}



.brand-manual-image img{


    width:100%;

    height:220px;

    object-fit:contain;


}



.brand-manual-content{


    padding:25px;


}







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


.brand-faq-section{


    margin-top:60px;


}



.brand-faq-item{


    padding:22px 0;

    border-bottom:1px solid #eee;


}



.brand-faq-item h3{


    font-size:20px;


}



.brand-faq-item p{


    color:#666;

    line-height:1.8;


}







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


@media(max-width:992px){


.brand-guide-page{


    width:auto;


}



.brand-product-grid,
.brand-choice-grid,
.brand-manual-grid{


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


}



.brand-accessory-grid{


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


}


}








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


@media(max-width:768px){


.brand-guide-page{


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

    margin:25px auto;


}



.brand-hero{


    height:auto;

    padding:35px 25px;


}



.brand-hero h1{


    font-size:28px;


}



.brand-info-card{


    display:block;


}



.brand-info-image,
.brand-info-text{


    width:100%;


}



.brand-product-grid,
.brand-choice-grid,
.brand-accessory-grid,
.brand-manual-grid{


    grid-template-columns:1fr;


}



.brand-product-image img{


    height:220px;


}



.brand-custom-box{


    display:block;

    padding:25px;


}



.brand-custom-text,
.brand-custom-image{


    width:100%;


}



.brand-custom-image{


    margin-top:25px;


}


}