@media screen and (min-width:768px) {
    .mobile-discover-quickview,.postion-contact,.product-contact {
display:none !important;    
}
.mobile-category-quickview {
display:none !important;    
}
}
@media screen and (max-width:768px) {
/* ===== mobile-discover-quickview 公共框架（手機版從右側滑入的抽屜，產品 / showcase / 行業資訊 / liveprint 共用）
   參考舊站 d:\company\IgpGift 的 .mobile-discover-quickview 實現；樣式已合併至 responsive.css（僅 max-width:768px 生效） ===== */
.mobile-discover-quickview {
    display: block;
    width: 100vw;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20001;
    background: #fff;
    transition: 0.5s all ease;
    transform: translateX(120vw);
    padding: 0;
}
.mobile-discover-quickview.in {
    transform: translateX(0);
}
.header-wrapper {
     z-index: 10000;   
}
.discovers .case-more .btn_add {
font-size:0px !important;    
}
.mobile-discover-quickview .content {
    height: calc(100vh - 60px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 100px;
}

/* 頭部/內容/底部欄樣式無條件生效（抽屜僅在 width<=998 時由 JS 打開，PC 上容器保持 translateX(120vw) 隱藏，無副作用） */
    /* 頭部：返回 + 標題 + 分享 */
    .mobile-discover-quickview .head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 11;
        background-color: #fff;
        width: 100%;
        padding: 7px 0;
    }
    .mobile-discover-quickview .head .quick_close {
        font-size: 37px;
        line-height: 37px;
        padding: 0 15px;
        cursor: pointer;
        color: #333;
    }
    .mobile-discover-quickview .head>.title {
        font-size: 15px;
        font-weight: bold;
        display: -webkit-box;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        max-width: calc(100vw - 180px);
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-align: center;
    }
    .dropdown-content .title, .head .share .dropdown-content .title {
    text-align: center;
    font-weight: bold;
    font-size:15px;
    border-bottom: 1px solid #E5E5E5;
    margin: 0 10px;
    line-height: 2.5;
}
.head .share .dropdown-content a {
    display: block;
    font-size: 16px;
    line-height: 37px;
    font-weight: bold;
}
    .mobile-discover-quickview .head .right {
        width: 94px;
        display: flex;
        justify-content: space-between;
        padding-right: 10px;
    }
    .mobile-discover-quickview .head .right .favorit {
        position: static;
        left: auto;
        top: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #999;
        line-height: normal;
        text-align: center;
        font-size:22px;
        width:37px;
        height:37px;
        padding: 0 8px;
        background: #F6F6F6;
        border-radius: 50%;
        border: none;
    }
    .mobile-discover-quickview .head .right .favorit:hover {
        background: none;
    }
    .mobile-discover-quickview .head .right .favorit:hover i {
        color: #999;
    }
    .mobile-discover-quickview .head .right .favorit.active:hover i {
        color: #FB6B23;
    }
    .mobile-discover-quickview .head .right .favorit i {
        font-size: 22px;
        color: #000;
    }
    .mobile-discover-quickview .head .right .favorit.active i,
    .mobile-discover-quickview .head .right .favorit i.fa-solid {
        color: #FB6B23;
    }
    .mobile-discover-quickview .head .share img {
        width: 37px;
        height: 37px;
        border-radius: 50%;
        padding: 8px;
        background:#F6F6F6;
        cursor: pointer;
    }
    .mobile-discover-quickview .head .share .dropdown-content {
        display: none;
        position: absolute;
        top:39px;
        right: 5px;
        background: #fff;
        border-radius: 15px;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
        padding: 10px 20px;
        min-width: 180px;
        z-index: 9999;
    }
    .mobile-discover-quickview .head .share img.active ~ .dropdown-content,
    .mobile-discover-quickview .head .share:hover .dropdown-content {
        display: block;
    }


    .mobile-discover-quickview .head .share .dropdown-content a:hover {
        background: #f5f5f5;
    }
    .mobile-discover-quickview .head .share .dropdown-content img {
        width: 20px;
        height: 20px;
        padding:0px;
        margin-right: 10px;
    }
    .mobile-discover-quickview .content {
        margin-top: 52px;
        padding-bottom: 54px;
        height: calc(100dvh - 106px);
    }
    /* 底部固定聯繫/詢價欄 */
    .mobile-discover-quickview .quick_contact {
        position: fixed;
        bottom: 0;
        left: 0;
        background: #fff;
        width: 100%;
        padding: 10px;
        z-index: 99999;
        transition: 0.5s all ease;
        box-shadow: 0 0 5px #ccc;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .mobile-discover-quickview .quick_contact .icon {
        width: 40px;
        height: 40px;
        padding: 6px;
        background-color: #F6F6F6;
        border: 1px solid #DEDEDE;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
    .mobile-discover-quickview .quick_contact .icon a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        color: #333;
        text-decoration: none;
    }
    .mobile-discover-quickview .quick_contact .icon .iconfont {
        font-size: 20px;
        line-height: 1;
    }
    .mobile-discover-quickview .quick_contact .contact {
        width: calc(40% - 15px);
        padding: 0 3px;
    }
    .mobile-discover-quickview .quick_contact .enquiry {
        width: calc(55% - 15px);
        padding: 0 3px;
    }
    .mobile-discover-quickview .quick_contact .dropdown {
        width: 100%;
        position: relative;
    }
    .mobile-discover-quickview .quick_contact .dropbtn {
        width: 100%;
        border: 1px solid #DEDEDE !important;
        background-color: #F6F6F6 !important;
        line-height: 28px;
        padding: 5px 10px;
        border-radius: 50px !important;
        display: block;
        text-align: center;
        color: #333;
        cursor: pointer;
        font-size: 14px;
    }
    .mobile-discover-quickview .quick_contact .product_enquiry {
        width: 100%;
        line-height: 28px;
        border: 1px solid #FB6B23 !important;
        background: #fff;
        padding: 5px 10px;
        border-radius: 50px !important;
        text-align: center;
        display: inline-block;
        font-weight: bold;
        color: #000;
        max-width: 100%;
        cursor: pointer;
        font-size: 14px;
    }
    .mobile-discover-quickview .quick_contact .product_enquiry.btn_added {
        background-color: #eee !important;
        color: #00a000;
    }
    .mobile-discover-quickview .quick_contact .dropdown-content {
        display: none;
        position: absolute;
        top:-95px;
        z-index: 2;
        padding: 5px 0;
        border-radius: 10px;
        line-height: 40px;
        width: 40vw;
        max-width: 220px;
        background: #fff;
        box-shadow: 0px 0px 5px #ccc;
        font-size: 14px;
    }
      .mobile-discover-quickview .buttonwrap, .mobile-discover-quickview .product-info .list-icon, .mobile-discover-quickview .buttonwrap, .mobile-discover-quickview .product-info .list-icon, .mobile-discover-quickview .owl-next, .mobile-discover-quickview .owl-prev, .mobile-discover-quickview .pop_type {
        display: none;

    }
    .mobile-discover-quickview .gallery_wrap ul img{
        width: 100%;
    }
    .gallery_wrap ul.printing li .name{
        font-size: 12px;
    }
    .do-quick-enquiry{
        display: none !important;
    }
    .mobile-discover-quickview .gallery_wrap ul{
        width: 100%;
        overflow-x: scroll;
        white-space: nowrap;
        display: grid !important;
        grid-auto-flow: column;
        gap: 10px;
    }
    .mobile-discover-quickview .gallery_wrap ul.case-list li{
        width: 40vw;
        padding: unset;
    }
    .mobile-discover-quickview .gallery_wrap .title{
        font-size: 12px;
    }
    .mobile-product-quickview{
        padding:0;
    }
    .mobile-discover-quickview .info .title {
    padding: 15px 15px 0;
    font-weight: bold;
}

   
    .mobile-discover-quickview .seo_cont,.mobile-discover-quickview .seo_box_in{
        padding: 0 15px;
    }
    .seo_box_in iframe,.seo_box_in img {
    max-width:100% !important;    
    }
     .product_title {
        font-size: 16px !important;
        text-align: left;
        font-weight: bold;
    }
    .mobile-discover-quickview .summary{
        padding: 0 30px;
    }
    .mobile-discover-quickview #single-product .summary{
        padding: 0 15px !important;
    }
        .product_meta {
        font-size: 13px;
        font-weight: bold;
    }
    .mobile-discover-quickview .head,#modal-gallery-list .head,.mobile-discover-quickview .head{
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 0;
        z-index: 11;
        background-color: #fff;
        width: 100%;
        padding: 7px 0;
    }
    .mobile-discover-quickview .head .quick_close,#modal-gallery-list .head .quick_close,.mobile-discover-quickview .quick_close{
        font-size: 30px;
        line-height: 37px;
        padding: 0 20px;
    }
    .mobile-discover-quickview .head .title,#modal-gallery-list .head .title,.mobile-discover-quickview .head .title{
        font-size: 15px;
        font-weight: bold;
        display: -webkit-box;
        max-width: calc(100vw - 100px);
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .mobile-discover-quickview .head .share,#modal-gallery-list .head .share,.mobile-discover-quickview .head .share{
        font-size: 20px;
        line-height: 30px;
    }
    .mobile-discover-quickview .owl-pagination,#modal-gallery-list .owl-pagination,.mobile-discover-quickview .owl-pagination {
        margin:auto;
        text-align: center;
    }
    .mobile-discover-quickview .owl-controls .owl-page,#modal-gallery-list .owl-controls .owl-page,.mobile-discover-quickview .owl-controls .owl-page{
        display: inline-block;
    }
    .mobile-discover-quickview .owl-page span,#modal-gallery-list .owl-page span,.mobile-discover-quickview .owl-page span {
        padding:4px;
        border-radius:20px;
        background:#666;
        float:left;
        margin:5px;
    }
    .mobile-discover-quickview .owl-page.active span,#modal-gallery-list .owl-page.active span,.mobile-discover-quickview .owl-page.active span {
        background:#f60;
    }
    #modal-gallery-list .button_wrap>button, #modal-gallery-list .button_wrap>div,.postion-contact .contact,.mobile-discover-quickview .button_wrap>button, .mobile-discover-quickview .button_wrap>div,.postion-contact .contact {
        width: 33% !important;
        display: inline-block;
    }
    .mobile-discover-quickview .like{
     display:none;
    }
    .mobile-discover-quickview .quick_contact .dropbtn.active + .dropdown-content {
        display: block;
    }
    .mobile-discover-quickview .quick_contact .dropdown-content a {
        display: flex;
        align-items: center;
        padding: 0 15px;
        color: #333;
        text-decoration: none;
    }
    .mobile-discover-quickview .quick_contact .dropdown-content a i {
        margin-right: 8px;
        font-size: 16px;
    }

/* ===== showcase 移動端抽屜內容排版（preview-showcase.html，公共加載）===== */
.mobile-discover-quickview .preview.slick .slick-dots {
    position: static;
    bottom: auto;
    margin-top: -5px;
}
.mobile-discover-quickview .preview.slick .slick-dots li {
    padding: 2px;
    border-radius: 20px;
    width:8px;
    height:8px;
    background: #666;
    margin: 5px;
}
.mobile-discover-quickview .preview.slick .slick-dots li button:before {
    opacity: 0;
}
.mobile-discover-quickview .preview.slick .slick-dots li.slick-active {
    background: #FB6B23;
}
.mobile-discover-quickview .slick-dotted.slick-slider {
margin-bottom:10px; 
width:100%;   
}
.mobile-discover-quickview .slick-dots li button {
 width:8px;
 height:8px;   
}
.slick-dots li button:before  {
width:8px !important;
height:8px !important;    
}
.mobile-discover-quickview .preview.slick img {
    width: 100vw;
    max-width: 100vw;
    max-height: 70vh;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
.mobile-discover-quickview .logo_wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 15px;
}
.mobile-discover-quickview .logo_wrap .comp {
    flex: 1;
    min-width: 0;
    padding-right: 10px;
}
.mobile-discover-quickview .logo_wrap .name {
    font-size: 18px;
    font-weight: bold;
    color: #000;
    line-height: 1.4;
}
.mobile-discover-quickview .logo_wrap .code {
    font-size: 14px;
    margin-top: 4px;
}
.mobile-discover-quickview .logo_wrap .logo {
    flex-shrink: 0;
    width: 120px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mobile-discover-quickview .logo_wrap .logo img {
    width: auto !important;
    max-width: 100%;
    max-height: 100%;
}
.mobile-discover-quickview .intro {
    padding: 0 15px 12px;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}
.mobile-discover-quickview .imgList {
max-width:100vw;    
}
.mobile-discover-quickview .preview {
width:100%;    
}
.mobile-discover-quickview .attach_img {
    padding: 0 15px 15px;
}
.mobile-discover-quickview .attach_img img {
    display: block;
    width: 100%;
    margin-bottom: 10px;
}
/* ===== 產品內容排版（preview/index.html 注入，參考舊站 footer.css .mobile-product-quickview 區塊）===== */
.mobile-discover-quickview .preview_content_in > .row {
    margin: 0;
}
.mobile-discover-quickview .preview img {
    width: 100%;
}
.mobile-discover-quickview .img-view,
.mobile-discover-quickview .desc img,
.mobile-discover-quickview .description img {
    max-width: 100%;
    height: auto !important;
}
.mobile-discover-quickview .gallery_wrap ul {
    padding: 0;
}
.mobile-discover-quickview .gallery_wrap .case-title {
    font-size: 18px;
    padding: 5px 15px;
    font-weight: bold;
}
.mobile-discover-quickview .gallery_wrap .case-title .orange {
    color: #f60;
    font-size: 24px;
    vertical-align: middle;
}
.mobile-discover-quickview .preview_content_in .seo_box_in {
    margin-top: 0;
    padding: 20px 15px;
}
.mobile-discover-quickview .preview_content_in .seo_box_in h3 {
    font-weight: bold !important;
    font-size: 18px;
}
.mobile-discover-quickview .preview_content_in .seo_box_in p:has(>img),
.mobile-discover-quickview .preview_content_in .seo_box_in span:has(>img),
.mobile-discover-quickview .preview_content_in .seo_box_in div:has(>img) {
    text-align: center;
    display: block;
}
.mobile-discover-quickview .preview_content_in .seo_box_in b {
    margin: 20px 0 10px;
    display: inline-block;
}
.mobile-discover-quickview .seo_box_in .detatil-link {
    text-decoration: underline !important;
    font-size: 16px;
}
.dropbtn {
    background-color: #FFF !important;
    color: #000 !important;
    font-size: 14px;
    border: 1px solid !important;
    border-radius: unset !important;
    position:relative;
    cursor: pointer;
    width: 210px;
}
.dropbtn:after{
    content: "\f078"!important;
    display: block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 13px;
    position: absolute;
    top: 12px;
    right: 12%;
}
.button_wrap .dropdown-content a {
    line-height: 2 !important;
}
.dropbtn:hover:after{
    content: "\f077"!important;

}
.dropdown {
    position: relative;
    display: inline-block;
}
@media screen and (max-width: 768px) {    
.discovers .child-cates {
    margin-left: -10px;
    margin-right: -10px;
    margin-top: -20px;
    min-width: 100%;
    background: #F6F7FB;
    border-top: 1px solid #efefef;
}
.color999 {
    color: #999;
}
.summary button {
display:none;    
}
.not_requested {
    display: inline-block;
    color: #999;
    cursor: pointer;
    margin-left: 15px;
    text-decoration: none;
    float: right;
}
    #single-product .not_requested, .product_small .not_requested {
        text-decoration: unset !important;
    }
        .mobile-product-quickview .gallery_wrap ul,
        .mobile-discover-quickview .gallery_wrap ul {
        width: 100%;
        overflow-x: scroll;
        white-space: nowrap;
        padding-left:15px;
        padding-right:15px;
        display: grid !important;
        grid-auto-flow: column;
        /* 統一每列寬度，避免各圖按原圖尺寸顯示導致大小不一 */
        grid-auto-columns: 45%;
        grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
        gap: 10px;
    }
     /* 注意：gallery_wrap 的 DOM 是 ul.case-list > div.case-banner（非 li），
        統一圖片寬高並以 object-fit 裁切，保證各圖顯示一致 */
    
    .mobile-product-quickview .banner-title,
    .mobile-discover-quickview .banner-title {
    padding: 20px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}
.mobile-product-quickview .case-plus,
.mobile-discover-quickview .case-plus {
display:none;    
}
/* case-content 佈局：case-info 居左（單行省略號），case-logo 居右（70px）
   （DOM 順序為 logo 在前，故用 flex order 調整顯示位置） */
.mobile-product-quickview .gallery_wrap .case-content,
.mobile-discover-quickview .gallery_wrap .case-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
    border:1px solid #efefef;
}
.mobile-product-quickview .gallery_wrap .case-content .case-info,
.mobile-discover-quickview .gallery_wrap .case-content .case-info {
    order: 1;
    height: 40px;
    width: calc(100% - 70px);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mobile-product-quickview .gallery_wrap .case-content .case-info case-name,
.mobile-discover-quickview .gallery_wrap .case-content .case-info case-name {
    white-space: nowrap;
    overflow: hidden;
    font-weight: bold !important;
    text-overflow: ellipsis;
}
.mobile-product-quickview .gallery_wrap .case-content .case-info .case-name>a,
.mobile-discover-quickview .gallery_wrap .case-content .case-info .case-name>a {
font-weight:bold !important;    
}
.mobile-product-quickview .gallery_wrap .case-content .case-logo,
.mobile-discover-quickview .gallery_wrap .case-content .case-logo {
    order: 2;
    width: 70px;
    text-align: right;
}
.mobile-product-quickview .gallery_wrap .case-content .case-logo img,
.mobile-discover-quickview .gallery_wrap .case-content .case-logo img {
    max-width: 100%;
    max-height: 35px;
}
.mobile-product-quickview .case-name,
.mobile-discover-quickview .case-name {
display:inline-block;
height: 40px;
line-height: 40px;
width:100%;
white-space: nowrap;  
font-size:12px;
text-overflow: ellipsis;
overflow: hidden;
}
.quickview .gallery_wrap ul li .gallery_item, .mobile-product-quickview .gallery_wrap ul li .gallery_item, .mobile-discover-quickview .gallery_wrap ul li .gallery_item {
    box-shadow: unset;
    border-radius: unset;
    border: 1px solid #efefef;
}
.mobile-product-quickview a.case-name,
.mobile-discover-quickview a.case-name {
font-weight:bold !important;    
}

}




/* ===== mobile-category-quickview 手機版分類選擇抽屜（舊站 footer.css 對應樣式，category.js 以 .active 開關）===== */
.mobile-category-quickview {
    display: block;
    width: 100vw;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20001;
    background: #fff;
    transition: 0.5s all ease;
    transform: translateX(120vw);
    padding: 0;
}
.mobile-category-quickview.active {
    transform: translateX(0);
}
.mobile-category-quickview .shut:after {
    content: '\f104';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    display: block;
    position: absolute;
    left: 10px;
    top: 10px;
    transform: rotateZ(0);
    transition: transform .2s ease-out;
    font-size: 48px;
    font-style: normal;
    width: 50px;
    height: 50px;
    line-height: 38px;
    text-align: center;
    z-index: 999;
    border-radius: 100%;
    background: #e3e3e3;
    cursor: pointer;
}
.mobile-category-quickview .content {
    height: calc(100vh - 60px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 100px;
}
.mobile-category-quickview .title {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    padding: 20px 0;
}
.mobile-category-quickview .category {
    position: relative;
    font-size: 13px;
    padding-bottom: 5px;
}
.mobile-category-quickview .category .parent {
    width: 120px;
    font-weight: bold;
    text-align: right;
    display: inline-block;
    vertical-align: top;
}
.mobile-category-quickview .category .parent:after {
    font-size: 13px;
    content: "\f105";
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    padding-left: 5px;
    font-weight: bold;
    color: #999;
}
.mobile-category-quickview .category .child {
    width: calc(100% - 125px);
    display: inline-block;
}
html[data-lang="eng"] .mobile-category-quickview .category .parent {
    width: 150px;
}
html[data-lang="eng"] .mobile-category-quickview .category .child {
    width: calc(100% - 155px);
}
.mobile-category-quickview .category .child span:before {
    content: "|";
    color: #E0E0E0;
    padding-right: 5px;
    vertical-align: middle;
    display: inline-block;
}
.mobile-category-quickview .category span.active {
    background: #f90;
    color: #fff;
    padding: 2px;
    border-radius: 2px;
}
.mobile-category-quickview .category span:hover {
    color: #f60;
    cursor: pointer;
}
.mobile-category-quickview .category span.active:hover {
    color: #333;
}
.mobile-category-quickview .cateSubmit {
    background: #f90;
    border: none;
    border-radius: 5px;
    padding: 2px 20px;
    margin: 10px 0 20px;
    display: none;
}
.mobile-category-quickview.rel .cateSubmit {
    display: inline-block;
}
.mobile-category-quickview .cateSubmit:hover {
    opacity: 0.8;
}
@media (min-width:768px) {
    .mobile-category-quickview {
        max-width: 860px;
        left: calc(50% - 400px);
        height: 80%;
        top: 10%;
        box-shadow: 1px 1px 5px;
        border-radius: 10px;
    }
    .mobile-category-quickview .content {
        height: 100%;
        overflow-y: auto;
    }
}

/* ===== mobile-product-quickview 手機版產品快速預覽抽屜（舊站 footer.css 對應樣式，以 .active 開關）
   product 類型在普通頁面（如產品分類頁）的快速預覽統一走此抽屜；mobile-discover-quickview 僅承載
   showcase / liveprint / 文章 等 discover 類型頁面的預覽。樣式直接對接舊站 footer.css ===== */
.mobile-product-quickview {
    display: block;
    width: 100vw;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20001;
    background: #fff;
    transition: 0.5s all ease;
    transform: translateX(120vw);
    padding: 0;
}
.mobile-product-quickview.active {
    transform: translateX(0);
}
.mobile-product-quickview .shut:after {
    content: '\f104';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    display: block;
    position: absolute;
    left: 10px;
    top: 10px;
    transform: rotateZ(0);
    transition: transform .2s ease-out;
    font-size: 48px;
    font-style: normal;
    width: 50px;
    height: 50px;
    line-height: 38px;
    text-align: center;
    z-index: 999;
    border-radius: 100%;
    background: #e3e3e3;
    cursor: pointer;
}
.mobile-product-quickview .content {
    margin-top: 52px;
    height: calc(100vh - 60px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 100px;
}
/* 頂部 bar 與 discover 同款後，原本的 .shut 返回箭頭由 head 的 .quick_close 取代，隱藏 */
.mobile-product-quickview .shut {
    display: none;
}
/* 手機版抽屜內隱藏模板自帶的類型標籤 / 原按鈕組 / 快速聯繫圖標（對應舊站 footer.css ≤991px 規則：
   底部已由 JS 追加的 索取報價/快速查詢/了解更多 三按鈕替代，避免與 .buttonwrap 重複） */
.mobile-product-quickview .buttonwrap,
.mobile-product-quickview .product-info .list-icon,
.mobile-product-quickview .pop_type {
    display: none;
}
/* 產品內容排版（preview/index.html 注入的內容） */
.mobile-product-quickview .preview_content_in>.row {
    margin: 0;
}
.mobile-product-quickview .col-sm-12 {
    padding: 0;
}
.mobile-product-quickview .buttonwrap {
    margin-top: 10px;
    margin-bottom: -10px;
}
/* 頂部 bar（與 .mobile-discover-quickview .head 同款：返回 + 標題 + 收藏/分享） */
.mobile-product-quickview .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 11;
    background-color: #fff;
    width: 100%;
    padding: 7px 0;
}
.mobile-product-quickview .head .quick_close {
    font-size: 37px;
    line-height: 37px;
    padding: 0 15px;
    cursor: pointer;
    color: #333;
}
.mobile-product-quickview .head>.title {
    font-size: 15px;
    font-weight: bold;
    display: -webkit-box;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100vw - 180px);
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center;
}
.mobile-product-quickview .head .right {
    width: 94px;
    display: flex;
    justify-content: space-between;
  
}
.mobile-product-quickview .head .like {
    position: static;
    left: auto;
    top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #999;
    line-height: normal;
    text-align: center;
    font-size: 22px;
    width: 37px;
    height: 37px;
    padding: 0 8px;
    background: #F6F6F6;
    border-radius: 50%;
    border: none;
}
.mobile-product-quickview .preview_img .like {
display:none;    
}
.mobile-product-quickview .head .right .like:hover {
    background: none;
}
.mobile-product-quickview .head .right .like:hover i {
    color: #999;
}
.mobile-product-quickview .head .right .like.active:hover i {
    color: #FB6B23;
}
.mobile-product-quickview .head .right .like i {
    font-size: 22px;
}
.mobile-product-quickview .head .right .like.active i,
.mobile-product-quickview .head .right .like i.fa-solid {
    color: #FB6B23;
}
.mobile-product-quickview .head .share img {
    width: 37px;
    height: 37px;
    border-radius: 50%;
    padding: 8px;
    background: #F6F6F6;
    cursor: pointer;
}
.mobile-product-quickview .head .share .dropdown-content {
    display: none;
    position: absolute;
    top: 39px;
    right: 5px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
    padding: 10px 20px;
    min-width: 180px;
    z-index: 9999;
}
.mobile-product-quickview .head .share img.active ~ .dropdown-content,
.mobile-product-quickview .head .share:hover .dropdown-content {
    display: block;
}
.mobile-product-quickview .head .share .dropdown-content a:hover {
    background: #f5f5f5;
}
.mobile-product-quickview .head .share .dropdown-content img {
    width: 20px;
    height: 20px;
    padding: 0;
    margin-right: 10px;
}
.mobile-product-quickview .gallery_wrap ul{
        width: 100%;
        overflow-x: scroll;
        white-space: nowrap;
        display: grid !important;
        grid-auto-flow: column;
        gap: 10px;
    }
    .mobile-product-quickview .gallery_wrap ul.case-list li{
        width: 40vw;
        padding: unset;
    }
    .mobile-product-quickview .gallery_wrap .title{
        font-size: 12px;
    }
    .mobile-product-quickview{
        padding:0;
    }
    .preview_img .owl-prev,.preview_img .owl-next{
     display:none;
    }
   
    .mobile-product-quickview .seo_cont{
        padding: 0 15px;
    }
    .mobile-product-quickview .summary{
        padding: 0 30px;
    }
    .mobile-product-quickview .head,#modal-gallery-list .head,.mobile-discover-quickview .head{
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 0;
        z-index: 11;
        background-color: #fff;
        width: 100%;
        padding: 7px 0;
    }
    .mobile-product-quickview .head .quick_close,#modal-gallery-list .head .quick_close,.mobile-discover-quickview .quick_close{
        font-size: 37px;
        line-height: 37px;
        padding: 0 20px;
    }
    .mobile-product-quickview .head .title,#modal-gallery-list .head .title,.mobile-discover-quickview .head .title{
        font-size: 15px;
        font-weight: bold;
        display: -webkit-box;
        max-width: calc(100vw - 100px);
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .mobile-product-quickview .head .share,#modal-gallery-list .head .share,.mobile-discover-quickview .head .share{
        font-size: 20px;
        line-height: 30px;
    }
    .mobile-product-quickview .owl-pagination,#modal-gallery-list .owl-pagination,.mobile-discover-quickview .owl-pagination {
        margin:auto;
        text-align: center;
    }
    .mobile-product-quickview .owl-controls .owl-page,#modal-gallery-list .owl-controls .owl-page,.mobile-discover-quickview .owl-controls .owl-page{
        display: inline-block;
    }
    .mobile-product-quickview .owl-page span,#modal-gallery-list .owl-page span,.mobile-discover-quickview .owl-page span {
        padding:4px;
        border-radius:20px;
        background:#666;
        float:left;
        margin:5px;
    }
    .mobile-product-quickview .owl-page.active span,#modal-gallery-list .owl-page.active span,.mobile-discover-quickview .owl-page.active span {
        background:#f60;
    }
    /* owl v2 圓點：v2 生成的是 .owl-dots/.owl-dot（v1 的 .owl-pagination/.owl-page 規則不生效），
       產品預覽圖集圓點居中顯示，普通灰點、選中紅點 */
    .mobile-product-quickview .preview .owl-dots,
    .mobile-discover-quickview .preview .owl-dots {
        margin: auto;
        text-align: center;
        padding-top: 10px;
    }
    .mobile-product-quickview .preview .owl-dot,
    .mobile-discover-quickview .preview .owl-dot {
        display: inline-block;
        border:unset;
        background:transparent;
        zoom: 1;
    }
    .mobile-product-quickview .preview .owl-dot span,
    .mobile-discover-quickview .preview .owl-dot span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #666;
        display: block;
    }
    .mobile-product-quickview .preview .owl-dot span {
    margin:0px;    
    }
    .mobile-product-quickview .preview .owl-dot.active span,
    .mobile-discover-quickview .preview .owl-dot.active span {
        background: #f60;
    }
    #modal-gallery-list .button_wrap>button, #modal-gallery-list .button_wrap>div,.postion-contact .contact,.mobile-discover-quickview .button_wrap>button, .mobile-discover-quickview .button_wrap>div,.postion-contact .contact {
        width: 33% !important;
        display: inline-block;
    }
    .mobile-product-quickview .favorit{

    }
  

#modal-gallery-list .head,
.mobile-product-quickview .btn-close,
.mobile-product-quickview .quickview-detail {
    display: none;
}
.mobile-product-quickview .btn-primary {
    font-size: inherit;
}
.mobile-product-quickview .btn_add.enquiried {
    background-color: #FB6B23;
    color: #fff;
}
.mobile-product-quickview .btn_more {
    width: 100%;
    background: #fff;
    color: #333;
    border: 1px solid #333;
    line-height: 40px;
    height: 40px;
    font-size: 16px;
    padding: 0;
    border-radius: 0 !important;
}
/* 底部「快速查詢」按鈕（拷貝自舊站 footer.css，含旋轉漸變邊框動畫） */
.mobile-product-quickview .content .quick_enq_btn {
    font-family: Microsoft Yahei;
    background-color: #363636;
    color: #ffffff;
    border-radius: 6px;
    border: 0;
    position: relative;
    overflow: hidden;
    z-index: 0;
    height: 52px;
    width: 100%;
    font-size: 16px;
}
@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn);
    }
}
@keyframes rotate {
    100% {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn);
    }
}
.mobile-product-quickview .content .quick_enq_btn::before {
    content: '';
    position: absolute;
    z-index: -2;
    left: -30px;
    top: -230px;
    width: 500px;
    height: 500px;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
    -webkit-animation: rotate 4s linear infinite;
    animation: rotate 4s linear infinite;
}
.mobile-product-quickview .content .quick_enq_btn::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: #333;
    border-radius: 5px;
}
.mobile-product-quickview .content .quick_enq_btn:hover {
    text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 20px #82bedc, 0 0 30px #82bedc, 0 0 40px #82bedc, 0 0 50px #82bedc, 0 0 60px #82bedc;
}
.mobile-product-quickview .content .quick_enq_btn::before {
    left: calc((80% - 500px) / 3);
}
.mobile-product-quickview .preview_content_in .seo_box_in {
    margin-top: 0;
    padding: 20px 15px;
}
.mobile-product-quickview .preview_content_in .seo_box_in h3 {
    font-weight: bold !important;
    font-size: 18px;
}
.mobile-product-quickview .preview_content_in .seo_box_in p:has(>img),
.mobile-product-quickview .preview_content_in .seo_box_in span:has(>img),
.mobile-product-quickview .preview_content_in .seo_box_in div:has(>img) {
    text-align: center;
    display: block;
}
.mobile-product-quickview .preview_content_in .seo_box_in b {
    margin: 20px 0 10px;
    display: inline-block;
}
/* 以下規則直接拷貝自舊站 d:\company\IgpGift\css\footer.css 的 .mobile-product-quickview 區塊，
   僅收錄與新站 preview/index.html 模板 DOM 對得上的類；.en 前綴 → html[data-lang="eng"]（新站語言選擇器） */
.mobile-product-quickview .preview img {
    width: 100%;
}
.mobile-product-quickview .img-view,
.mobile-product-quickview .desc img,
.mobile-product-quickview .description img {
    max-width: 100%;
    height: auto !important;
}
.mobile-product-quickview .preview_wrap .wd5 .btn-primary {
    background: #ccc;
    border-color: #ccc;
    width: 100%;
    border-radius: 0;
}
.mobile-product-quickview .gallery_wrap ul {
    padding: 0;
}
.mobile-product-quickview .gallery_wrap .case-title {
    font-size: 18px;
    padding: 5px 15px;
    font-weight: bold;
}
.mobile-product-quickview .gallery_wrap .case-title .orange {
    color: #f60;
    font-size: 24px;
    vertical-align: middle;
}
.mobile-product-quickview .gallery_wrap ul.case-list li {
    width: 50%;
    padding: 0 8px 15px 15px;
}
.mobile-product-quickview .gallery_wrap ul li .gallery_item {
    box-shadow: unset;
    border-radius: unset;
    border: 1px solid #efefef;
}
.mobile-product-quickview .gallery_wrap .title {
    height: 40px;
    line-height: 40px;
    width: calc(100% - 70px);
    font-size: 16px;
}
.mobile-product-quickview .seo_box_in .detatil-link {
    text-decoration: underline !important;
    font-size: 16px;
    float: right;
}
/* ===== postion-contact：手機版產品快速預覽（mobile-product-quickview）的固定底欄 =====
   與 mobile-product-quickview 組合顯示（參考舊站 style_new.css .postion-contact + 新站 quick_contact 風格） */
.postion-contact {
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    width: 100%;
    padding: 10px;
    z-index: 20002;
    transition: 0.5s all ease;
    box-shadow: 0 0 5px #ccc;
    transform: translateX(100vw);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}
.postion-contact.open {
    transform: translateX(0);
}
.postion-contact .case_logo {
    width: 32%;
    padding-right: 6px;
    flex-shrink: 0;
}
.pdr5 .workshow, .pdr5 .workshow.show+div, .pdr5 .workshow+div .dropbtn+div, .wd10 .dropdown-content, .share_icon .dropdown-content, .head .share .dropdown-content, .button_wrap .dropdown .dropdown-content {
    display: none;
}
.postion-contact .case_logo img {
    max-width: 100%;
}
.postion-contact .contact {
    width: 33%;
    padding: 0 3px;
}

.postion-contact .contact .workshow a {
    color: #333;
    font-size: 15px;
    text-decoration: none;
}
.postion-contact .contact .workshow i {
    font-size: 17px;
}
    #modal-gallery-list .company_info .gallery_link, .navbarxx, .postion-contact .wd10 {
        display: none;
    }
    .pdr5 .product_enquiry {
    width: 85%;
    line-height: 28px;
    background: #ff6600 !important;
    padding: 5px 10px;
    border-radius: 50px !important;
    text-align: center;
    display: inline-block;
    color: #fff !important;
}
.postion-contact .contact .dropdown {
    width: 100%;
    position: relative;
}
.postion-contact .contact .dropbtn {
    width: 100%;
    border: 1px solid #DEDEDE !important;
    background-color: #F6F6F6 !important;
    line-height: 28px;
    padding: 5px 10px;
    border-radius: 50px !important;
    display: block;
    text-align: center;
    color: #333;
    cursor: pointer;
    font-size: 12px;
}
.postion-contact .contact .dropdown-content {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    z-index: 99999;
    padding: 5px 0;
    border-radius: 10px;
    line-height: 40px;
    width: 40vw;
    max-width: 220px;
    background: #fff;
    box-shadow: 0px 0px 5px #ccc;
    font-size: 14px;
}
.postion-contact .contact .dropbtn.active + .dropdown-content,
.postion-contact .contact .dropdown:hover .dropdown-content {
    display: block;
}
.postion-contact .contact .dropdown-content a {
    display: block;
    padding: 0 15px;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
}
.postion-contact .contact .dropdown-content a:hover {
    background: #f5f5f5;
}
.postion-contact .contact .dropdown-content a i {
    margin-right: 8px;
    color: #FB6B23;
    width: 16px;
}
.postion-contact .enquiry {
    width: 33%;
    padding: 0 3px;
}
.postion-contact .enquiry .product_enquiry {
    width: 100%;
    line-height: 28px;
    border: 1px solid #FB6B23 !important;
    background: #fff;
    padding: 5px 10px;
    border-radius: 50px !important;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    font-weight: bold;
    color: #000;
    max-width: 100%;
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.postion-contact .enquiry .product_enquiry.btn_added {
    background-color: #eee !important;
    color: #00a000;
}
.postion-contact .wd10 {
    width: 12%;
    text-align: right;
    padding-left: 4px;
    flex-shrink: 0;
}
.postion-contact .wd10 .share {
    position: relative;
    display: inline-block;
}
.postion-contact .wd10 .share img {
    width: 37px;
    height: 37px;
    border-radius: 50%;
    padding: 8px;
    background: #F6F6F6;
    cursor: pointer;
}
.postion-contact .wd10 .share .dropdown-content {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    z-index: 99999;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
    padding: 10px 20px;
    min-width: 180px;
}
.postion-contact .wd10 .share img.active ~ .dropdown-content,
.postion-contact .wd10 .share:hover .dropdown-content {
    display: block;
}
.postion-contact .wd10 .share .dropdown-content .title {
    font-weight: bold;
    margin-bottom: 8px;
    white-space: nowrap;
}
.postion-contact .wd10 .share .dropdown-content a {
    display: block;
    color: #333;
    text-decoration: none;
    line-height: 36px;
    white-space: nowrap;
    font-size: 14px;
}
.postion-contact .wd10 .share .dropdown-content a:hover {
    background: #f5f5f5;
}
.postion-contact .wd10 .share .dropdown-content img {
    width: 20px;
    height: 20px;
    padding: 0;
    margin-right: 10px;
}
/* 極窄屏：隱藏 logo，讓出空間給聯繫/詢價 */
@media (max-width:380px) {
    .postion-contact .case_logo {
        display: none;
    }
    .postion-contact .contact {
        width: 40%;
    }
    .postion-contact .enquiry {
        width: 40%;
    }
    .postion-contact .wd10 {
        width: 20%;
    }
}
/* PC（≥998px，與 mobile.js quick_view_discover 的 mobile/PC 分界一致）隱藏手機版專屬抽屜 */
@media (min-width:998px) {
    .mobile-cart-quickview,
    .mobile-product-quickview,
    .postion-contact {
        display: none;
    }
}
/* mobile-cart-quickview 暫停顯示（用戶要求先隱藏，保留結構與 JS，日後可恢復） */
.mobile-cart-quickview {
    display: none !important;
}
/* 手機端（≤767px）：產品預覽內 .row 兩欄（圖片 / summary）去內邊距，與舊站 footer.css ≤767px 區塊一致 */
@media screen and (max-width:767px) {
    .mobile-product-quickview .preview_content_in .scroll-hide,
    .mobile-product-quickview .preview_content_in .row .col-md-6 {
        padding: 0;
    }
    .mobile-product-quickview .btn_add {
    width:100%;    
    border-radius: 0px !important;
    font-size: 16px;
    height:40px;
      background: #F60;
    color: #fff;
    border: none;
    font-weight: 400;
    }
    .button_inscontainer .buttons{
        width: 95%;
    }
    .index_cate{
        display: none;
    }
  
}

/* ===== /product 產品詳情頁手機端排版（參考舊站 css/product.css ≤767px + product.tpl.php .mobile-show）===== */
.products.product-info .mobile-show{
    display: none;
}
.products.product-info .product-contact{
    display: none;
}
@media screen and (max-width:767px) {
    /* 輪播圖：去掉 PC 的深色底圖/遮罩，改為舊站的白底居中滑動 */
    .products.product-info .pro_imgs{
        background: none;
    }
    .products.product-info .pro_imgs .slick-slide img{
        max-width: calc(100vw - 20px);
        margin: 10px;
        border:4px solid #fff;
        height: auto;

    }

    
    .products.product-info .pro_imgs .slick-prev{
        left: 5px;
        top: calc(50% - 10px);
    }
    .products.product-info .pro_imgs .slick-next{
        right: 5px;
        top: calc(50% - 10px);
    }
    /* 左右裝飾圖隱藏 */
    .products .mos_left{
        display: none;
    }
    /* 產品資訊區全寬 */
    .products.product-info .product_box{
        height: unset;
        padding: 0;
    }
    .product_container{
        min-height: unset;
        margin-right: -10px;
        margin-left: -15px;
    }
    .products .breadcrumb{
        font-size: 13px;
        margin: 5px 10px;
        white-space: nowrap;
        overflow:hidden;
        text-overflow: ellipsis;
        -webkit-overflow-scrolling: touch;
    }
    .product_name h1{
        font-size: 22px;
    }
    .products .product_small span{
        width: 100%;
    }
    .products .product_small,
    .products .product_small a{
        font-size: 13px;
    }
    /* 查詢欄簡化（隱藏標題/描述，去白底圓角） */
    .button_inscontainer{
        padding: 20px 0 0;
        border-radius: unset;
        background-color: unset;
        box-shadow: unset;
    }
    .button_inscontainer .inv_title,
    .button_inscontainer .inv_desc{
        display: none;
    }
    .products.product-info .button_inscontainer.bottom-enquiry{
        display: none;
    }
    /* 產品描述區簡化 */
    .products.product-info .seo_boxx_wrap{
        padding: 55px 0 20px;
        box-shadow: unset;
        margin-right: -5px;
        margin-left:-10px;
    }
    .products.product-info .seo_boxx{
        margin: 0 auto;
        box-shadow: unset;
    }
    /* 手機端快捷查詢區塊（mobile-show）：4 個 icon 各佔 50% → 2×2 排列（跟隨舊站 .wd5=50%） */
    .products.product-info .mobile-show{
        display: block;
        background: #f1f1f1;
        margin-top: 30px;
        margin-left: -50%;
        padding-left: 50%;
        margin-right: -50%;
        padding-right: 50%;
    }
    .products.product-info .mobile-show .wd5{
        width: 50%;
        float: left;
        text-align: center;
    }
    .products.product-info .mobile-show .wd5 img{
        margin-bottom: 5px;
    }
    .products.product-info .mobile-show .pd20{
        padding: 20px 0;
    }
    .products.product-info .mobile-show .pdt20{
        padding-top: 20px;
    }
    .products.product-info .mobile-show .font-24{
        font-size: 24px;
    }
    .products.product-info .mobile-show .font-bold{
        font-weight: bold;
    }
    /* 手機端索取報價按鈕：.buttons 滿寬，使索取報價右緣與下方快速查詢按鈕右緣對齊（跟隨舊站 .buttons 全寬） */
    .products.product-info .button_inscontainer .buttons{
        width: 100%;
    }
    /* 手機端聯絡我們：只隱藏電話/Email 文字（.tel-hide）；WhatsApp/Line 文字照常顯示 */
    .products.product-info .button_inscontainer .contact .tel-hide{
        display: none;
    }
    /* 手機端「相關作品」case-item：跟隨 mobile-product-quickview 排版（上面整行圖片，下方左=公司名、右=logo），一行 2 個
       手機端由 product.js 初始化 owl（一行2個，初始化後 class 為 owl-loaded）；此規則僅在未初始化 owl 時作 grid 兜底 */
    .products.product-info .gallery_wrap .case-list:not(.owl-loaded){
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 0;
    }
    /* 手機端 owl 化後：覆蓋 product.css 的 grid 佈局，改為 flex 讓 owl 正常計算寬度；
       同時設 position:relative，使左右箭頭（absolute）限制在 case-list 區域內 */
    .products.product-info .gallery_wrap .case-list.owl-loaded{
        display: flex;
        position: relative;
        width: 100%;
    }
    .products.product-info .gallery_wrap .case-list.owl-loaded .owl-stage-outer{
        width: 100%;
    }
    .products.product-info .gallery_wrap .case-list.owl-loaded .owl-nav{
        width: 100%;
    }
    .products.product-info .gallery_wrap .case-list.owl-loaded .owl-nav button{
        margin: 0;
        top: 50%;
        transform: translateY(-50%);
    }
    /* 手機端禮品小百科：owl 包裹後，卡片在 owl-item 內撐滿，箭頭垂直居中 */
    .products.product-info .new-article-in.owl-loaded{
        display: flex;
        padding-left: 0;
    }
    .products.product-info .new-article-in.owl-loaded .owl-item .article_item{
        width: 100%;
        margin: 0;
    }
    .products.product-info .new-article-in.owl-loaded .owl-nav button{
        margin: 0;
        top: 50%;
        transform: translateY(-50%);
    }
    /* 手機端相關禮品：owl 包裹後覆蓋 PC 的 flex 佈局，卡片在 owl-item 內撐滿 */
    .products.product-info .relateProduct .content.owl-loaded{
        display: flex;
    }
    .products.product-info .relateProduct .content.owl-loaded .owl-item .product_item_list_n{
        width: 100%;
        margin: 0;
        flex: none;
    }
    .products.product-info .gallery_wrap .case-list .case-item a img{
        width: 100%;
        padding: 0;
    }
    .products.product-info .gallery_wrap .case-list .case-content{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 4px;
        border: 1px solid #efefef;
    }
    .products.product-info .gallery_wrap .case-list .case-content .case-info{
        order: 1;
        width: calc(100% - 70px);
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .products.product-info .gallery_wrap .case-list .case-content .case-name{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: bold;
        text-align: left;
    }
    .products.product-info .gallery_wrap .case-list .case-content .case-logo{
        order: 2;
        width: 70px;
        text-align: right;
    }
    .products.product-info .gallery_wrap .case-list .case-content .case-logo img{
        max-width: 100%;
        max-height: 35px;
    }
    .products.product-info .gallery_wrap .case-list .case-plus{
        display: none;
    }
    /* 標題區：like 與標題同行（跟隨舊站 product.tpl.php 內聯樣式 + product.css ≤767px） */
    .products.product-info .product_name .like{
        position: unset;
        display: inline-block;
        vertical-align: top;
        margin: 0 0 0 15px;
        font-size: 16px;
        line-height: 26px;
    }
    /* 標題下方灰線在手機端隱藏（跟隨舊站 product.css ≤767px .product_name .gray_line） */
    .products.product-info .product_name .gray_line{
        display: none;
    }
    /* 麵包屑連結文字色（跟隨舊站 product.css ≤767px .products .breadcrumb a） */
    .products.product-info .breadcrumb a{
        color: #0B0B0B;
    }
    /* 手機端固定底欄（product-contact，獨立 class 避免與 quickview 的 .postion-contact JS 衝突） */
    .products.product-info .product-contact{
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 10px;
        background: #fff;
        box-shadow: 0 0 5px #ccc;
        z-index: 1999;
    }
    .products.product-info .product-contact:after{
        content: '';
        display: block;
        clear: both;
    }
    .products.product-info .product-contact .pc-w45{
        width: 45%;
        float: left;
        padding-right: 5px;
    }
    .products.product-info .product-contact .pc-w55{
        width: 55%;
        float: left;
        padding-left: 5px;
    }
    .products.product-info .product-contact .btn{
        width: 100%;
        background: rgb(0,162,232);
        font-size: 14px;
        height: 40px;
        line-height: 30px;
        font-weight: bold;
        color: #FFF;
        border-radius: 0;
        padding: 5px;
    }
    .products.product-info .product-contact .btn.pc-social{
        background: #23B14D;
    }
    .products.product-info .product-contact .btn i{
        font-size: 18px;
    }
    /* 頁面內容底部留白，避免被固定底欄遮擋 */
    .products.product-info .page-content{
        padding-bottom: 60px;
    }
}
}

/* ===== 手機版獨立布局 (visible-xs) ===== */

/* ---------- doshow 橘色聯絡橫條：<992px 只保留圖標，隱藏文字 ---------- */
@media (max-width: 1500px) {
    .products .mos_right {
        display: none;
    }
}
@media (max-width: 991px) {
    .doshow .ds-item span,
    .doshow .ds-query {
        display: none;
    }
    /* 只顯示圖標時拉開按鈕間距，避免堆在一起 */
    .doshow > .ds-query + .ds-item,
    .doshow > .ds-item + .whatsapp-container,
    .doshow > .whatsapp-container + .ds-item {
        margin-left: 16px;
    }
}

/* ---------- 禮品分類下拉：小屏讓右側產品內容完整顯示，不被視窗遮擋 ---------- */
@media (max-width: 991px) {
    .header-lower .category-dropdown-panel {
        min-width: 0;
        width: calc(100vw - 32px); /* 對應 header-lower 左右各 16px padding */
    }
    .header-lower .category-product-panel,
    .header-lower .category-product-panel.narrow {
        flex: 1;
        width: auto;
        min-width: 0;
        padding: 15px 16px;
    }
}

/* ---------- 小尺寸螢幕（如 iPad ≤991px）：即使不滾動也使用短名稱 ---------- */
@media (max-width: 991px) {
    .header-wrapper .min-hide {
        display: none !important;
    }
    .header-wrapper .min-show {
        display: inline !important;
    }
}

/* 抽屜初始淡入：最開始 opacity:0，200ms 後再淡入至 1，避免頁面載入瞬間閃出左側內容 */
@keyframes ms-drawer-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ---------- 手機版側邊抽屜 (僅手機尺寸生效) ---------- */
@media (max-width: 767px) {

/* 遮罩層 */
.ms-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 100000000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
}
.ms-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* 抽屜本體 */
.ms-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 78%;
    max-width: 270px;
    background: #F6F7FB;
    z-index: 100000001;
    transform: translateX(-100%);
    transition: transform 0.25s ease, visibility 0.25s;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 12px rgba(0,0,0,0.1);
}
.ms-drawer.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.25s ease, visibility 0s;
}

/* 抽屜頭部 — 關閉按鈕 + 聯絡快捷同行 */
.ms-header { 
     flex: 0 0 auto; 
     height: 80px; 
     display: flex; 
     align-items: center; 
     padding: 5px; 
     padding-top: 0px; 
     gap: 4px; 
 }
.ms-close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    font-size: 20px;
    color: #000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 聯絡快捷列（與關閉按鈕同行） */
.ms-contact-bar { 
     flex: 1; 
     display: flex; 
     justify-content: space-evenly; 
     align-items: center; 
     /* background: #fff; */ 
     border: none; 
     padding: 0; 
     padding-top: 10px; 
     /* padding-bottom: 10px; */ 
     height: 100%; 
 }
.ms-contact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #555;
    font-size: 14px;
    gap: 4px;
    padding: 4px 6px;
    min-width: 52px;
}
.ms-contact-item i {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #E9EAEE;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #000;
}
.ms-contact-item:active {
    opacity: 0.7;
}
/* 電話號碼：不換行，超出隱藏（去掉空格後仍過長時用 … 省略） */
.ms-contact-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* 滾動區 */
.ms-scroll {
    position: relative;
    flex: 1;
    overflow-y: auto;
   
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - 215px);
    margin:5px;
     margin-top:15px;
}

/* 區塊 */
.ms-section { 
     padding: 10px 15px; 
     background: #fff; 
     margin: 0 15px 20px; 
     border-radius: 15px; 
 }
.ms-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #999;
    text-align: center;
    padding: 15px 15px 4px;
    margin: 0;
}

/* 連結列表 */
.ms-link-list { 
     display: flex; 
     /* flex-direction: column; */ 
     gap: 2px; 
 }
.ms-link-list .ms-link { 
     display: inline-block; 
     padding: 8px 0px; 
     text-decoration: none; 
     color: #555; 
     font-size: 14px; 
     border-bottom: 1px solid #f5f5f5; 
     padding-right: 10px; 
 }
.ms-link-list .ms-link:last-child {
    border-bottom: none;
}

/* 搜索框 */
.ms-search-form {
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 20px;
    padding: 0 14px;
    height: 36px;
    gap: 8px;
}
.ms-search-form i {
    color: #999;
    font-size: 13px;
}
.ms-search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    color: #333;
}

/* 預算 */
.ms-budget {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.ms-budget .ms-label {
    font-size: 13px;
    color: #555;
    margin-right: 4px;
}
.ms-budget-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid #ddd;
    border-radius: 14px;
    text-decoration: none;
    font-size: 12px;
    color: #666;
}
.ms-budget-btn:active {
    background: #f0f0f0;
}

/* 連結行 */
.ms-link-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}
.ms-link-row .ms-link {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: #f7f7f7;
    border-radius: 6px;
    font-size: 13px;
}

/* 標籤 */
.ms-tag {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 8px;
    color: #fff;
}
.ms-tag.hot {
    background: #ff4d4f;
}
.ms-tag.new {
    background: #52c41a;
}

/* 分類列表 */
.ms-category-list {
    display: flex;
    flex-direction: column;
}
.ms-cate-block {
    border-bottom: 1px solid #f0f0f0;
}
.ms-cate-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ms-cate-main > a {
    display: block;
    padding: 10px 0;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    flex: 1;
}
.ms-cate-toggle {
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}
.ms-cate-toggle.open {
    transform: rotate(180deg);
}
.ms-cate-sub {
    display: none;
    padding: 6px 0 4px 12px;
}
.ms-cate-sub.open {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    max-height: 80px;
    overflow: hidden;
    align-items: flex-start;
}
.ms-cate-sub.open.all {
    max-height: none;
}
.ms-cate-sub a {
    display: inline-block;
    padding: 4px 0;
    text-decoration: none;
    color: #666;
    font-size: 13px;
    white-space: nowrap;
}
.ms-cate-special {
    display: block;
    padding: 12px 0;
    text-decoration: none;
    color: #ff6600;
    font-size: 14px;
    font-weight: 500;
}

/* ===== 區塊通用 ===== */
.ms-has-title { padding: 14px 16px 6px; }
.ms-title {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    position: relative;
    padding: 0 36px;
}
.ms-title::before,
.ms-title::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 24px;
    height: 1px;
    background: #ddd;
}
.ms-title::before { left: 0; }
.ms-title::after { right: 0; }

/* ===== 我的帳戶 (區塊1) ===== */
.ms-my-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
}
.ms-my-row > i:first-child {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    flex: 0 0 auto;
}
.ms-my-info { flex: 1; display: flex; flex-direction: column; gap: 0; }
.ms-my-label { font-size: 14px;  }
.ms-my-count { font-size: 13px; color: #999; }
.ms-my-arrow { font-size: 12px; color: #ccc; }
.ms-my-pair {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border: none;
}
.ms-my-pair > i:first-child {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    flex: 0 0 36px;
    color: #333;
}
.ms-my-pair-links {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ms-my-link {
    text-decoration: none;
    color: #555;
    font-size: 14px;
}
/* ===== 會員中心 (區塊1，參考舊版 accordion-category 會員行結構) ===== */
.ms-section .ms-event-row.ms-member-entry {
    position: relative;
    padding: 0 10px;
    line-height: 1.5;
    font-size: 16px;
    color: #333;
    background: #fff;
    border-radius: 0;
    margin-bottom: 0;
}
.ms-section .ms-event-row.ms-member-entry .icon {
    flex: 0 0 auto;
}
.ms-section .ms-event-row.ms-member-entry .icon i {
    font-size: 25px;
    color: #333;
}
.ms-section .ms-event-row.ms-member-entry .ms-member-toggle {
    flex: 1;
    min-width: 0;
    color: #333;
    font-size: 14px;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ms-section .ms-event-row.ms-member-entry a {
    align-self: center;
}
.ms-section .ms-event-row.ms-member-entry .p-right {
    position: absolute;
    right: 0;
    padding-right: 10px;
    color: #ccc;
    font-size: 14px;
    text-decoration: none;
    display: none;
}
.ms-section .ms-event-row.ms-member-entry .p-right.active {
    display: inline-block;
}
/* ===== 會員中心展開區域（獨立 ms-section，點擊會員中心顯示） ===== */
.ms-drawer .user-menu {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    background: #F6F7FB;
    border-radius: 0;
    padding: 10px 15px;
    margin: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.ms-drawer .user-menu .accordion-category {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ms-drawer .user-menu li {
    line-height: 40px;
    font-size: 16px;
}
.ms-drawer .user-menu .user-menu-hide {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    cursor: pointer;
    border-bottom: 1px solid #ccc;
}
.ms-drawer .user-menu .user-menu-hide i {
    font-size: 20px;
    color: #333;
}
.ms-drawer .user-menu .user-menu-hide .username {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ms-drawer .user-menu .cate .open-child {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    line-height: 40px;
}
.ms-drawer .user-menu .cate .open-child .icon i {
    font-size: 20px;
    color: #333;
}
.ms-drawer .user-menu .p-link {
    flex: 1;
    min-width: 0;
    color: #333;
    font-size: 16px;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ms-drawer .user-menu .cate.border-bottom {
    border-bottom: 1px solid #ccc;
}
.ms-my-divider {
    color: #ddd;
    font-size: 14px;
}

/* ===== 禮品活動策劃 (區塊2) ===== */
.ms-event-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    text-decoration: none;
    color: #333;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 10px;
}
.ms-event-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #fff;
    font-size: 22px;
}
.icon img { width: 36px; height: 36px; object-fit: contain; }
.ms-event-info { flex: 1; }
.ms-event-name { font-size: 14px; margin-bottom: 0; }
.ms-event-desc { font-size: 12px; color: #ccc; margin-top: 0; }
.ms-event-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    text-align: center;
    padding-top: 10px;
    font-size:14px;
    border-top: 1px solid #ccc;
}
.ms-event-card {
    text-decoration: none;
    color: #333;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.ms-event-card-img {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ms-event-card-img img {
    max-height: 48px;
    max-width: 80%;
    object-fit: contain;
}
.ms-event-card span {
    display: block;
    text-align: center;
    padding: 8px 6px;
    font-size: 12px;
    font-weight: 500;
}

/* ===== 禮品服務 (區塊3) ===== */
.ms-svc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #f5f5f5;
}
.ms-svc-item:last-child { border-bottom: none; }
.ms-svc-item > i:first-child {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex: 0 0 auto;
}
.ms-svc-item-info { flex: 1; }
.ms-svc-item-name { display: block; font-size: 14px; margin-bottom: 1px; }
.ms-svc-item-desc { display: block; font-size: 12px; color: #999; }
.ms-svc-item-more .ms-svc-item-desc { display: block; }

/* ===== 資訊 / 作品參考 (區塊4,5) ===== */
.ms-info-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}
.ms-info-links a {
    width: 33.33%;
    padding: 10px 4px;
    text-decoration: none;
    color: #555;
    font-size: 13px;
    text-align: center;
    border-bottom: 1px solid #f5f5f5;
}

/* ===== 禮品搜索 (區塊6) ===== */
.ms-search-form {
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 20px;
    padding: 0 4px 0 14px;
    height: 38px;
    gap: 6px;
}
.ms-search-form i { color: #999; font-size: 14px; }
.ms-search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    color: #333;
    min-width: 0;
}
.ms-search-submit {
    flex: 0 0 auto;
    height: 32px;
    padding: 0 14px;
    background: #ff6600;
    color: #fff;
    border: none;
    border-radius: 16px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

/* ===== 分類預算 (區塊7) ===== */
.ms-budget {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.ms-budget-label {
    font-size: 13px;
    color: #555;
    white-space: nowrap;
}
.ms-budget-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 14px;
    text-decoration: none;
    font-size: 12px;
    color: #666;
}
.ms-budget-btn span { font-size: 11px; }
.ms-badge-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
.ms-badge-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    background: #f7f7f7;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    color: #555;
}
.ms-badge-hot {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 8px;
    background: #ff4d4f;
    color: #fff;
}
.ms-badge-new {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 8px;
    background: #52c41a;
    color: #fff;
}

/* ===== 需要協助？ (區塊8) ===== */
.ms-help-section {
    background: #fafafa;
    padding-top: 20px;
    padding-bottom: 20px;
}
.ms-help-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 14px;
    text-align: center;
}
.ms-help-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ms-help-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: #fff;
    border-radius: 10px;
    text-decoration: none;
    color: #333;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.ms-help-card > i:first-child {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ff6600;
    flex: 0 0 auto;
}
.ms-help-card-info { flex: 1; }
.ms-help-card-title { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.ms-help-card-desc { font-size: 12px; color: #888; line-height: 1.4; }

/* ===== 語言區 ===== */
.ms-lang-section {
    margin-top: auto;
    border-top: 8px solid #f5f5f5 !important;
}
.ms-lang-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #333;
    font-size: 16px;
    font-weight: 600;
    padding: 4px 0;
}
.ms-lang-link > i:first-child {
    color: #ff6600;
}
.ms-lang-current {
    flex: 1;
    text-align: right;
    font-size: 13px;
    color: #888;
}
.ms-arrow {
    font-size: 12px;
    color: #ccc;
}


.mobile-header-bar.visible-xs {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding: 0 8px;
    background: #fff;
    border-bottom: 1px solid #eee;
    height: 50px;
}

/* 汉堡菜单按钮 (左側) */
.mobile-header-bar .mh-menu-btn {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
}
.mobile-header-bar .mh-menu-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background: #333;
    border-radius: 2px;
}
.mobile-header-bar .mh-menu-btn i {
    font-size: 20px !important;
}

/* LOGO (屏幕寬度正中央) */
.mobile-header-bar .mh-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 50%;
}
.mobile-header-bar .mh-logo img {
    height: 26px;
    width: auto;
    display: block;
}

/* 右側圖標組 */
.mobile-header-bar .mh-icons {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 2px;
}
.mobile-header-bar .mh-icons img {
    width: 22px;
    height: auto;
}
i.iconhome_page_icon-06 {
font-size:24px !important;    
}
.mobile-header-bar .mh-icons i {
    font-size: 30px;
}

.mobile-header-bar .mh-icon-btn {
    position: relative;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    text-decoration: none;
    font-size: 18px;
    border-radius: 50%;
}
.mobile-header-bar .mh-icon-btn:active {
    background: #f0f0f0;
}
.mobile-header-bar .mh-icon-btn.mh-whatsapp {
    color: #25D366;
}
.mobile-header-bar .mh-badge {
    position: absolute;
    top: -8px;
    right:-8px;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    background: #ff6600;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    border-radius: 10px;
    font-weight: 600;
}

/* ---------- 手機版底部 TabBar ---------- */
.mobile-tabbar.visible-xs {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2; /* 在 overlay 與 drawer 之下，確保抽屜展開時能覆蓋 tabbar */
    display: flex !important;
    align-items: stretch;
    background: #fff;
    border-top: 1px solid #e8e8e8;
    box-shadow: 0 -1px 6px rgba(0,0,0,0.04);
    height: 42px;
    padding-bottom: env(safe-area-inset-bottom);
}
#mobQuickEnquiry input, #mobQuickEnquiry textarea {
     border-radius: 20px;
    border: none;
    background: #f3f3f3;
    box-shadow: unset;
} 


.mobile-tabbar .mtb-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #888;
    font-size: 10px;
    line-height: 1;
    padding: 4px 2px;
    transition: color 0.15s;
    position: relative;
}
.mobile-tabbar .mtb-item i {
    font-size: 18px;
    margin-bottom: 3px;
}
.mobile-tabbar .mtb-item.active {
    color: #000;
}
@media (min-width: 361px) and (max-width: 767px) {
    .mobile-tabbar .mtb-item span {
        font-size: 16px;
    }
}
.mobile-tabbar .mtb-center {
    flex: 0 0 44px;
    position: relative;
    top: 0;
}
.mobile-tabbar .mtb-center-logo {
        width: 60px;
        min-height: 60px;
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        margin-top: -30px;
        overflow: hidden;
    }
.mobile-tabbar .mtb-center-logo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}
.mobile-tabbar .mtb-cate:active {
    color: #ff6600;
}


    body {
        padding-top: 50px;
        padding-bottom: 42px;
    }

    /* header-wrapper 在手機版撐滿 */
    .header-wrapper {
        padding-top: 0;
    }

    /* 主內容區適配：手機版作為滾動容器，夾在 fixed header 與 tabbar 之間 */
    .middle-content {
        padding: 0 !important;
        margin: 0 !important;
        height: calc(100vh - 80px);
        overflow: auto;
        overflow-x: hidden;
    }
    /* home-wrap 手機版：高寬參考 middle-content */
    .home-wrap {
        padding: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin: 0 !important;
        height: calc(100vh - 80px);
        overflow: auto;
        overflow-x: hidden;
    }
    /* 隱藏左側欄 */
    #column-left {
        display: none !important;
    }

    /* 列表頁面適配 */
    .list-index {
        padding: 10px !important;
    }

    /* 產品列表網格在手機版 */
    .category-products .product-item,
    .list-products .product-item {
        width: 50% !important;
        float: left;
    }

    /* 頁籤/選項卡文字縮小 */
    .tabs,
    .nav-tabs {
        font-size: 12px;
    }

    /* 浮動詢價按鈕上移，避免遮擋 tabbar */
    .quick_enquiry {
        bottom: 70px !important;
        right: 12px !important;
        display: none;
    }

    /* 底部頁腳顯示在 tabbar 之上（下方已保留 80px padding 空間） */
    .bottom-about,
    .footer-pay,
    .brands {
        position: relative;
        z-index: 1;
    }

    /* 產品卡片的 "+" 按鈕 */
    .buttonwrap .add_cart {
        min-width: 32px;
        font-size: 12px;
    }

    .top-nav{
        display: block;
        margin-left: -20px;
        padding-left: 15px;
        padding-right: 15px;
        transform:unset;
        width: calc(100% + 25px);
    }
    .discovers .pc-nav{
        display: none;
    }
    .top-icon {
        height: 45px;
        background: #E9EAEE;
        border-radius: 30px;
        width: 45px;
        padding: 10px;
        display: inline-block;
        margin-bottom: 5px;
    }
     .top-icon img {
        width: 25px;
    }
    .top-nav .show-menu {
        width: 40px;
        height: 32px;
        padding: 5px 10px;
        position: absolute;
        right: 0;
        top: 0;
        background: #fff;
        box-shadow: -10px 0px 10px 0 #fff;
    }
    .bg-list {
    margin-left: -10px;
        margin-right: -10px;
        background: #F6F7FB;
        padding: 5px;
    }
    .discovers .btn_add {
        font-size: 0;
    }
    .discovers .btn_add.enquiried:after {
        content: "✔";
        color: #00a000;
        font-size: 16px;
    }
      .scroll .top-nav {
        top: 50px;
        width: calc(100% + 20px);
        position: fixed;
        z-index: 1999;
        /* 快速平滑過渡，避免方向切換時頂欄突跳/拖影造成的閃縮 */
        transition: top .25s ease;
    }
   
    .scroll .top-nav .show-menu {
        right: 5px;
    }
    .scroll.d .top-nav {
        top: -40px !important;
        transition: top 0s ease;
    }
    .cate-top .iconclose {
        display: none;
    }
    .top-nav .child-item a {
        display: inline-block;
        text-align: center;
    }
    .top-nav .child-item .cicon {
        width: 50px;
        border-radius: 50%;
        margin-bottom: 2px;
    }
    .cate-top .child-item {
        display:inline-block;
    }
    .cate-top .child-item a {
        font-size:16px;   
    }
    .child-item a {
        font-size:12px;
        text-align:center;
        font-weight:400;    
    }
    .mobile-discover-quickview .description img {
        max-width: 100%;
        height: auto;
    }
    .cate-scroll-item.active {
        color:#333;
        border-bottom: 3px solid #f60;   
        border-radius:0px; 
    }
    .cate-scroll-item {
    font-size:14px !important;
    font-weight:400;    
    }
    .gallery_wrap ul {
        list-style:none;
        text-align: center;
    }
    
    .gallery_wrap ul {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(17%, 1fr));
        gap: 10px;
    }
    .gallery_wrap ul img {
        width:100%;    
    }
    .mobile-product-quickview .gallery_wrap .package img {
        width: 120px;
    }
        .mobile-product-quickview .gallery_wrap .package {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
        .mobile-product-quickview .preview_content_in .seo_box_in h2 {
        font-size: 15px;
    }
    .mobile-product-quickview .seo_box_in .detatil-link {
        font-size: 13px !important;
        padding: 0 !important;
    }
        .products {
        width: 100%;
        margin-left: 0;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .list-items .item .image .desc a{
        color: #838484;
    }




}

/* ---------- 手機版小屏優化 ---------- */

/* 搜索框在極小屏縮小 */
@media (max-width: 360px) {
    .mobile-header-bar {
        padding: 0 6px;
        height: 48px;
        gap: 2px;
    }
    .mobile-header-bar .mh-logo img {
        height: 22px;
    }
    .mobile-header-bar .mh-icon-btn {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
    .mobile-header-bar .mh-menu-btn {
        width: 28px;
    }
    .mobile-header-bar .mh-menu-btn span {
        width: 20px;
    }

    .mobile-tabbar {
        height: 58px;
    }
    .mobile-tabbar .mtb-item i {
        font-size: 16px;
    }
    .mobile-tabbar .mtb-item span {
        font-size: 16px;
        font-weight: 600;
    }
    .mobile-tabbar .mtb-center {
        flex: 0 0 62px;
    }
    .mobile-tabbar .mtb-center-logo {
        width: 48px;
        height: 48px;
    }
    .mobile-tabbar .mtb-center-logo img {
        width: 48px;
        height: 48px;
    }

    body {
        padding-top: 48px;
        padding-bottom: 58px;
    }
}

/* ---------- 舊有的 @media 優化 (保留給桌面版對隱藏元素) ---------- */

/* Logo 在極小屏縮小 (桌面版隱藏時的兼容) */
@media (max-width: 400px) {
    .header-upper .logo-area {
        flex: 0 0 140px;
        width: 140px;
    }
    .header-upper .logo-area img {
        max-height: 36px;
    }
    .header-upper .tool-area {
        gap: 4px;
    }
    .header-upper .tool-area .tool-link,
    .header-upper .tool-area .cart-link {
        padding: 0 2px;
    }
    .header-upper .tool-area .tool-link i,
    .header-upper .tool-area .cart-link i {
        font-size: 15px !important;
    }
    .header-upper .tool-area .cart-badge {
        font-size: 9px;
        min-width: 14px;
        height: 14px;
        line-height: 14px;
    }
    .header-upper .search-area .search-input {
        font-size: 13px;
        padding: 6px 80px 6px 10px;
    }
    .header-upper .search-area .img-search-btn img {
        width: 20px;
    }
    .header-lower .nav-area .nav-item {
        font-size: 12px;
        padding: 8px 7px;
    }
}

/* 手機上分類按鈕文字縮短 */
@media (max-width: 480px) {
    .header-lower .category-btn {
        font-size: 13px;
        padding: 10px 10px;
    }
    .header-lower .nav-area .nav-item {
        font-size: 13px;
        padding: 10px 8px;
    }
    .header-lower .login-area .login-btn {
        font-size: 13px;
        padding: 6px 12px;
    }
}

/* ---------- Footer ---------- */

@media (max-width: 480px) {
    .bottom-about .bottom.col-xs-3 {
        width: 50%;
        max-width: 50%;
        flex: 0 0 50%;
        padding: 4px 8px;
        box-sizing: border-box;
    }
    .bottom-about .bottom ul {
        padding: 0;
    }
    .bottom-about .bottom li a {
        font-size: 13px;
        line-height: 1.8;
    }
    .bottom-about .bottom .list {
        margin-bottom: 10px;
    }
    .footer-pay {
        font-size: 11px;
        padding: 10px 0;
    }
    .footer-pay .picon {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2px;
    }
    .footer-pay .picon img {
        width: 34px;
        height: auto;
        margin: 2px;
    }
    .brands .brand-post {
        padding: 20px 0;
    }
    .brands .brands-title {
        display: block;
        text-align: center;
        margin-bottom: 8px;
    }
    .brands .brands-img {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .brands .brands-img img {
        width: 80px;
        margin: 5px 10px;
    }
    .brands .copyright {
        display: block;
        text-align: center;
        font-size: 11px;
        margin-top: 10px;
    }
}

/* ---------- Quick Enquiry 手機版底部滑入 ---------- */

@media (max-width: 767px) {
    /* 快速查詢 modal 手機版：與舊站一致 — 垂直水平居中、寬度 99%、黑色關閉鈕
       （對應舊站 css/footer.css @media (max-width:767px)：ut_modal width:98%/top:40%、
         .quick_enquiry_close right:0/top:-10px、.btn-close color:#000） */
    .quick_enquiry_mask {
        display: flex !important;
        align-items: center;
        justify-content: center;
        transform: none !important;
        transition: opacity 0.3s, visibility 0.3s;
    }
    .quick_enquiry_mask.active {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    .quick_enquiry_mask .ut_modal {
        width: 99%;
        max-width: 830px;
        margin: 0;
        border-radius: 6px;
        max-height: 90vh;
        overflow-y: auto;
        transform: none;
        position: relative;
        left: auto;
        top: auto;
        bottom: auto;
    }
    .quick_enquiry_mask .ut_modal::before {
        display: none;
    }
    .quick_enquiry_mask .quick_enquiry_close {
        position: absolute;
        right: 0;
        top: -10px;
        z-index: 10;
    }
    .quick_enquiry_mask .btn-close {
        color: #000;
    }
    .quick_enquiry_mask .ut_modal .title-posin {
        font-size: 30px;
    }
    .quick_enquiry_mask .ut_modal .title-desc {
        font-size: 14px;
        margin-bottom: 40px;
    }
    .quick_enquiry_mask .ut_modal .quick_f .form-group label {
        font-size: 13px;
    }
    .quick_enquiry_mask .ut_modal .quick_f .form-control {
        font-size: 14px;
        height: auto;
        margin-bottom: 0;
    }
    .quick_enquiry_mask .enquiry-submit {
        width: 100%;
        max-width: 380px;
        font-size: 14px;
        padding: 12px;
    }
    .quick_enquiry_mask .ut_modal .ut_modal_content {
        padding: 15px;
    }
    .quick_enquiry_mask .position-relative {
        margin: -15px -15px 15px;
        padding: 15px 15px 1px;
    }
    .products .product_box {
        padding: 0;
    }
    .showDetail .pro_imgs .preview.item img {
        width: calc(100vw - 20px);
        height: auto !important;
        max-width:unset !important;
    }
}

/* ===== 手機版快速查詢 (底部滑入浮層 + 遮罩) ===== */
.mob-qe-overlay {
    display: none;
    position: fixed;
    top: 50px;
    left: 0;
    width: 100%;
    height: calc(100% - 50px);
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
}
.mob-qe-overlay.active {
    display: block;
}

/* 成功提交狀態 */
.mob-qe-success {
    text-align: center;
    padding: 40px 20px;
}
.mob-qe-success-icon {
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    background: #52c41a;
    color: #fff;
    font-size: 28px;
    margin-bottom: 16px;
}
.mob-qe-success-msg {
    font-size: 15px;
    color: #666;
}

/* PC 下強制隱藏 */
@media (min-width: 768px) {
    .mob-qe-overlay {
        display: none !important;
    }
}
.mobile-tabbar .mtb-center.active .mtb-center-logo img {
    filter: brightness(0.8);
}

/* ---------- Quickview / Sidebar ---------- */

@media (max-width: 767px) {
    .quickview-enquiry {
        width: 85vw;
    }
    .quickview-enquiry .content {
        padding: 12px;
    }
    .quickview-enquiry .content .input input,
    .quickview-enquiry .content .input textarea {
        font-size: 13px;
    }
}

/* ---------- Login / Register ---------- */

@media (max-width: 480px) {
    .login-register .loginpage {
        width: 100%;
        margin: 0;
        border-radius: 0;
        min-height: 100vh;
    }
    .login-register .loginpage .login,
    .login-register .loginpage .register,
    .login-register .loginpage .forget {
        padding: 20px 16px;
    }
    .login-register .loginpage .login .header .title {
        font-size: 22px;
    }
    .login-register .loginpage .input-row input {
        font-size: 14px;
        height: 40px;
    }
    .login-register .loginpage .submit .btn-submit {
        font-size: 15px;
        padding: 10px 0;
    }
}

/* ---------- Floating enquiry button ---------- */

@media (max-width: 480px) {
    .quick_enquiry {
        width: 50px;
        height: 50px;
        right: 10px;
        bottom: 20px;
    }
    .quick_enquiry .enquiry-img {
        width: 50px;
        height: 50px;
    }
}

/* ---------- Product grid / listing ---------- */

@media (max-width: 480px) {
    .buttonwrap .add_cart {
        font-size: 12px;
        padding: 5px 8px;
    }
}

/* ---------- 手機版語言浮動菜單（排版與電腦版語言下拉一致） ---------- */
.ms-lang-section {
    position: relative;
}
.ms-lang-modal {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 10002;
    background: #fff;
    border-radius: 15px;
    width: 70vw;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 10px 0;
    max-height: 350px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.ms-lang-modal.open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}
.ms-lang-modal .msl-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ms-lang-modal .msl-region {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 3px 16px 3px 20px;
}
.ms-lang-modal .msl-region + .msl-region {
    border-top: 1px solid #f2f2f2;
    margin-top: 6px;
    padding-top: 8px;
}
.ms-lang-modal .msl-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.ms-lang-modal .msl-option {
    display: block;
    color: #333;
    text-decoration: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    line-height: 24px;
}
.ms-lang-modal .msl-option.text-cn {
    font-size: 16px;
}
.ms-lang-modal .msl-option:hover,
.ms-lang-modal .msl-option.active {
    color: #ff6600;
}
.ms-lang-modal .flag-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #f2f2f2;
    object-fit: contain;
    flex-shrink: 0;
}

/* ---------- 手機版頂部/底部完善 ---------- */

@media (max-width: 767px) {
    .header-wrapper {
        padding: 0 !important;
        background: #fff;
    }

    /* 底部頁腳留出 tabbar 空間 */
    .bottom-about,
    .footer-pay {
        padding-bottom: 80px;
    }

    /* 產品卡片價格/按鈕區優化 */
    .buttonwrap {
        padding: 8px 4px;
    }

    /* 列表頁 pagination 在手機版縮小 */
    .pagination,
    .pages {
        font-size: 12px;
    }
    .products .list-items .like,.list-items .btns .ico.icoViewCase{
        display: none;
    }
    .floating-chat-icon {
        bottom: 70px;
    }
    .chat-modal{
        max-width: 800px;
        width: calc(100vw - 48px);
        bottom: 68px;
    }
    .tag_sort .tags{
        display: grid;
        width: 100%;
        grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
        gap: 0;
    }
}

/* 底部 tabbar 適配 iPhone 安全區（基準與 tabbar 高度一致，再追加安全區） */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .mobile-tabbar.visible-xs {
        padding-bottom: env(safe-area-inset-bottom);
    }
    @media (max-width: 767px) {
        body {
            padding-bottom: calc(40px + env(safe-area-inset-bottom));
        }
    }
    @media (max-width: 360px) {
        body {
            padding-bottom: calc(38px + env(safe-area-inset-bottom));
        }
    }
}

/* ===== 手機版搜索面板 (從右側滑入) ===== */
.mob-search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10999;
}
.mob-search {
    width: 100vw;
    height: 100vh;
    position: fixed;
    background: #fff;
    top: 0;
    left: 100vw;
    z-index: 11000;
    overflow-y: auto;
}
.mob-search.show {
    left: 0;
    transition: 0.5s all ease;
}
.mob-search.show.hid {
    left: -100vw;
    transition: 0.1s all ease;
}
.mob-search .top-row {
    padding-top: 40px;
    display: flex;
    align-items: center;
}
.mob-search .top-row .btn-back {
    width: 36px;
    background: transparent;
    border: 0px solid transparent;
}
.mob-search .top-row .btn-back .fa-angle-left{
    font-size: 32px;
    color: #333;
}
.mob-search .top-row .top-search-form {
    width: calc(100% - 52px);
    display: inline-block;
    border-radius: 12px;
    box-shadow: 0 0 5px 0 #efefef;
    position: relative;
    border: 1px solid #ddd;
}
.mob-search .top-row .top-search-form .search-input {
    width: 100%;
    border: none;
    height: 36px;
    line-height: 36px;
    border-radius: 25px;
    padding: 0 55px 0 10px;
}
.mob-search .top-row .top-search-form .btn-search {
    position: absolute;
    right: 5px;
    background: none !important;
    border: none;
    height: 38px;
    color: #333;
    font-size: 14px;
}
.mob-search .top-row .top-search-form .btn-search:after {
    content: "";
    height: 12px;
    border-left: 1px solid #ccc;
    position: absolute;
    left: -2px;
    top: 12px;
}
.mob-search .search-row {
    padding: 0 10px 0 36px;
}
.mob-search .search-row .search_snap{
    position: unset;
    border: none;
    line-height: 40px;
    padding-left: 0;
}
.mob-search .search-row .search_snap img {
    width: 24px;
    vertical-align: text-bottom;
    margin-right: 5px;
}
.mob-search .search_more {
    padding: 10px;
}
.mob-search .search_more .title {
    font-weight: bold;
    padding-left: 15px;
}
.mob-search .search_more ul {
    list-style: none;
    padding-inline-start: 15px;
}
.mob-search .search_more ul li {
    display: inline-block;
    margin-right: 10px;
    font-size: 14px;
}
.mob-search .search_more .history li:before {
    content: url("/image/recent.png");
    margin-right: 6px;
    vertical-align: middle;
}
.mob-search .search_more .rec_cat {
    padding-right: 10px;
}
.mob-search .search_more .list-pics {
    display: grid;
    grid-template-columns: 33.33% 33.33% 33.33%;
    gap: 5px;
    padding: 10px 15px 40px;
}
.mob-search .search_more .list-pics .item {
    position: relative;
}
.mob-search .search_more .list-pics .item img {
    width: 100%;
}
.mob-search .search_more .list-pics .item .cat_title {
    position: absolute;
    left: 3px;
    top: 5px;
    font-weight: bold;
    color: #000;
    font-size: 14px;
    text-shadow: 1px 1px 5px #fff;
}

.mobile-logo.active{
    z-index: 2;
    background: #fff;
}
.mobile-logo.show .top-search-form,
.mobile-logo.active .top-search-form{
    width: calc(100% - 36px);
    max-width: unset;
    transition: 0.5s all ease;
}

@media screen and (max-width: 550px) {
    .btn {
        padding: 6px;
    }
}

/* ---------- 手機端隱藏分類列表排序欄（PC 專屬，手機版不顯示） ---------- */
@media (max-width: 767px) {
    .products .cate_sort {
        display: none !important;
    }
}