/* =====================================================
   IQOS 購物流程說明
   S型流程線版本
===================================================== */


.shop-flow-section,
.shop-flow-section *{
    box-sizing:border-box;
}


.shop-flow-section{

    width:100%;

    padding:70px 20px;

    background:#f6f6f3;

}



.shop-flow-container{

    max-width:1200px;

    margin:0 auto;

}



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


.shop-flow-title{

    max-width:850px;

    margin:0 auto 55px;

    text-align:center;

}


.shop-flow-title span{

    display:block;

    margin-bottom:10px;

    color:#888;

    font-size:11px;

    font-weight:700;

    letter-spacing:3px;

}



.shop-flow-title h2{

    margin:0 0 15px !important;

    color:#173d40 !important;

    font-size:34px !important;

    font-weight:700 !important;

    line-height:1.45 !important;

}



.shop-flow-title p{

    margin:0 !important;

    color:#666 !important;

    font-size:15px !important;

    line-height:1.8 !important;

}



/* =====================================================
   流程列表
===================================================== */


.shop-flow-list{

    position:relative;

    display:grid;

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

    gap:70px 25px;

    margin:0 !important;

    padding:0 !important;

    list-style:none;

}



/* =====================================================
   流程項目
===================================================== */


.shop-flow-item{

    position:relative;

    z-index:2;

    text-align:center;

}



/* =====================================================
   圓形 ICON
===================================================== */


.shop-flow-icon{

    width:90px;

    height:90px;


    display:flex;

    align-items:center;

    justify-content:center;


    margin:0 auto 18px;


    background:#17494c;


    color:#fff;


    border-radius:50%;


    border:8px solid #f6f6f3;


    font-size:20px;

    font-weight:700;


    box-shadow:

    0 8px 20px rgba(0,0,0,.15);


    transition:.3s ease;

}



.shop-flow-item h3{

    margin:0 0 10px !important;


    color:#222 !important;


    font-size:17px !important;

    font-weight:700 !important;

}



.shop-flow-item p{

    max-width:220px;

    margin:0 auto !important;


    color:#666 !important;


    font-size:14px !important;

    line-height:1.8 !important;

}



/* =====================================================
   S型流程線
   第一排 01→02→03→04
===================================================== */


.shop-flow-item:nth-child(1)::after,
.shop-flow-item:nth-child(2)::after,
.shop-flow-item:nth-child(3)::after{


    content:"";


    position:absolute;


    top:45px;


    left:70%;


    width:60%;


    border-top:2px dashed #a8a8a8;


    z-index:-1;

}





/* =====================================================
   04 ↓ 05 轉折線
===================================================== */


.shop-flow-item:nth-child(4)::after{


    content:"";


    position:absolute;


    top:45px;


    right:-14px;


    width:2px;


    height:90px;


    background:

    repeating-linear-gradient(

        to bottom,

        #a8a8a8 0,

        #a8a8a8 6px,

        transparent 6px,

        transparent 12px

    );


    z-index:-1;


}




/* =====================================================
   第二排 05←06←07←08
===================================================== */


.shop-flow-item:nth-child(5)::after,
.shop-flow-item:nth-child(6)::after,
.shop-flow-item:nth-child(7)::after{


    content:"";


    position:absolute;


    top:45px;


    right:70%;


    width:60%;


    border-top:2px dashed #a8a8a8;


    z-index:-1;


}



/* =====================================================
   第二排反向閱讀
===================================================== */


.shop-flow-item:nth-child(n+5){

    transform:scaleX(-1);

}


.shop-flow-item:nth-child(n+5) > *{

    transform:scaleX(-1);

}



/* =====================================================
   Hover
===================================================== */


@media (hover:hover){


.shop-flow-item:hover .shop-flow-icon{


    transform:translateY(-6px);


    background:#0d3538;


    box-shadow:

    0 14px 30px rgba(0,0,0,.2);


}


}




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


@media(max-width:900px){


.shop-flow-section{

    padding:50px 16px;

}



.shop-flow-title h2{

    font-size:28px !important;

}



.shop-flow-list{

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

    gap:45px 20px;

}


/* 平板取消連線 */

.shop-flow-item::after{

    display:none !important;

}


.shop-flow-item:nth-child(n+5){

    transform:none;

}


.shop-flow-item:nth-child(n+5) > *{

    transform:none;

}



}




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


@media(max-width:600px){


.shop-flow-section{

    padding:35px 10px;

}



.shop-flow-title{

    margin-bottom:35px;

}



.shop-flow-title h2{

    font-size:23px !important;

}



.shop-flow-title p{

    font-size:14px !important;

}



.shop-flow-list{

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

    gap:35px 12px;

}



/* 手機取消線 */

.shop-flow-item::after{

    display:none !important;

}



.shop-flow-item:nth-child(n+5){

    transform:none;

}


.shop-flow-item:nth-child(n+5) > *{

    transform:none;

}



.shop-flow-icon{

    width:62px;

    height:62px;


    border-width:4px;


    font-size:14px;


}



.shop-flow-item h3{

    font-size:14px !important;

}



.shop-flow-item p{

    font-size:12px !important;

    line-height:1.65 !important;

}



}



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


@media(max-width:390px){


.shop-flow-section{

    padding-left:8px;

    padding-right:8px;

}



.shop-flow-icon{

    width:56px;

    height:56px;

}



.shop-flow-item h3{

    font-size:13px !important;

}



.shop-flow-item p{

    font-size:11px !important;

}


}



/* =====================================================
   減少動畫
===================================================== */


@media(prefers-reduced-motion:reduce){


.shop-flow-icon{

    transition:none !important;

}


}