/* ========================================================================================================

                   【 Pagination Control 】 >> 產品頁面頁數檢閱 / 前後頁操縱

        * 基本 : 
        .product-page-control .product-page-size .dropdown.open ul.dropdown-menu

        * Product Listing 上 :
        #product_listing .product-page-control .product-page-size .dropdown.open ul.dropdown-menu

        * Product Listing 下 :
        #product_listing #product_lists .product_list .product-page-control .product-page-size .dropdown.open ul.dropdown-menu

        * Search Result Content 上 :
        #search_content > div > .product-page-control .product-page-size .dropdown.open ul.dropdown-menu 

        * Search Result Content 下 :
        #search_content > .product-page-control .product-page-size .dropdown.open ul.dropdown-menu



======================================================================================================== */

/* 標題 + Sort by + Page Control 區域 */
div#categoryheader {
    margin: 0 0 15px;
}

/* 全部圓角 */
.product-page-control .btn-default, 
.product-page-text input, 
.product-page-control button,
#Sortblock .btn-default {
    border-radius: 3px;
}


/***************************** Category Name (標題區) ******************************/

/* 標題區 */
#categoryName {
    display: block;
    width: 100%;
}




/***************************** Sort by ******************************/

/* Sort by >> 下拉選單 */
#Sortblock ul.dropdown-menu {
    left: auto !important;
    position: absolute;
    left: 56px !important;
    top: 39px;
    width: 100px;
}

#Sortblock {
    position: relative;
    padding-left: 0px !important;
}

#Sortblock .sorttitle, 
#Sortblock button, 
#Sortblock {
    float: unset;
    right: unset;
}

/* Sort by >> Wording 靠左 */
#Sortblock .sorttitle {
    margin-right: 5px;
    /*
    position: absolute;
    left: 0;
    */
}

/* 1024 以上 */
@Media (min-width: 1024px) {

    /* 縮短 sort by */
    #Sortblock {
    width:195px;
    width: auto;
    display: inline-block !important;
    }

 }












/***************************** Page Control ( 有分為上區(兩個都.product-page-control 包起來) / 下區(多一個 .product_list 包 .product-page-control) ) ******************************/

/* product-page-size (顯示 item) >> All 下拉選單 (上面區域 + 下面區域) */
.product-page-control .product-page-size ul.dropdown-menu {
    position: absolute;
    min-width: 90px !important;
    width: 95px;

    left: auto;
    right: auto;
    top: auto;
    /* bottom: auto; */

    /*
    transform: translateX(5%);
    */

    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* Product Listing >> UL(下拉選單顯示 item) >> 上面 + 下面區域 */
#product_listing #product_lists .product_list .product-page-control .product-page-size ul.dropdown-menu/* Product Listing 下 */,
#product_listing .product-page-control .product-page-size ul.dropdown-menu/* Product Listing 上 */ {
    /* transform: translateX(14%); */
    transform: translateX(6%);
}

/* Product Listing >> UL(下拉選單顯示 item) >> 上面區域) */
#product_listing .product-page-control .product-page-size ul.dropdown-menu {
    /* top: calc(98.2% - 0px); */
}

/* Product Listing >> UL(下拉選單顯示 item) >> 下面區域) */
#product_listing #product_lists .product_list .product-page-control .product-page-size ul.dropdown-menu,
.product_list .product-page-control .product-page-size ul.dropdown-menu {
    /*
    left: 38.85% !important;
    left: calc(50% - 99px) !important;

    left: calc(50% - 95px) !important;
    top: calc(100% - 33px) !important;
    */

    /*
    top: auto !important;
    bottom: calc(7.8% - -0px) !important;
    */
}





/* 上面 + 下面的 Page Control */
.product_list .product-page-control .product-page-index a i:before /*下面的*/,
.product_list .product-page-control .product-page-index a i /*下面的*/,
.product_list .product-page-control .product-page-index a /*下面的*/,
.product_list .product-page-control .product-page-index /*下面的*/,
.product_list .product-page-control .product-page-size /*下面的*/,
.product_list .product-page-control/*下面的*/,

.product-page-control .product-page-index a i::before /*上面的*/,
.product-page-control .product-page-index a i /*上面的*/,
.product-page-control .product-page-index a /*上面的*/,
.product-page-control .product-page-index /*上面的*/,
.product-page-control .product-page-size /*上面的*/,
.product-page-control {
    display: inline-block;
    width: auto;

    display: flex;
    align-items: center; /* 項目垂直置中 >> 作用於單行（或單列）內的所有子項目 */
    align-content: center; /* 垂直置中 >> 作用於多行（或多列）的子項目 */
    justify-content: center; /* 水平置中 */
}

/* 下拉選單區 (Item) >> btn 預設 */
.product_list .product-page-control .btn-default, 

.product-page-control .btn-default {
    margin: 0;
}

/* 下拉選單區 (Item) >> 客製 */
.product_list .product-page-control button,

.product-page-control button {
    border-color: #eee;
    min-width: 57px;
    width: auto !important;
    padding: 6px 8px;
}



.product-page-control .dropdown btn.btn-default, 
.product-page-control .dropdown .btn-default, 

.product_list .product-page-text input,
.product-page-text input,

.product_list .product-page-control button,
.product-page-control button {
    font-size: 1em;
}


/* Showing Page */
.product-page-control .dropdown .btn-default, 
.product_list .product-page-control button,
.product_list .product-page-size,

.product-page-control button,
.product-page-size {
    margin: 0 8px;
}


/* Showing Page >> Button */
.product-page-control .dropdown btn.btn-default, 
.product-page-control .dropdown .btn-default, 
.product_list .product-page-control button,
.product_list .product-page-size button

.product-page-control button,
.product-page-size button {
}

/* Showing Page >> 文字 >> Showing & of... */
.product-page-control .dropdown .btn-default, 

.product_list .product-page-control button,
.product_list .product-page-size span,

.product-page-control button,
.product-page-size span {
    margin: 0 7px;
}

/* 統一文字 >> Showing & of... */
.product-page-text span,
.product_list .product-page-size span,
.product-page-size span {
    font-size: 0.96em;
}

/* 統一文字 >> Showing & of... */
.product-page-control .dropdown button.btn-default span.page-size, 
button span.page-size, 
.product_list .product-page-text input, 
.product-page-text input,
.product_list .product-page-control .btn-default, 
.product-page-control .btn-default {
    font-size: 1em;
    color: #000;
    font-weight: 400;
}


/* Showing Page >> 文字 >> Showing & of... */
/* .product-page-text span,  */
.product_list .product-page-size span,
.product-page-size span {
    color: #888;
}

.product_list .product-page-size span:last-child,
.product-page-size span:last-child {
margin-right: 0;
}

/* Showing Page >> 文字 >> of... */
.product_list .product-page-size span.total-page-size,

.product-page-control button,
.product-page-size span.total-page-size {
    margin: 0 2px;
}

.product_list .product-page-control button,
.product_list .product-page-text input,

.product-page-control button,
.product-page-text input {
    text-align: center;
    border: 1px solid #cccccc;
}


/* 下拉選單區 (Item) >> 客製 >> 下箭頭 */
.product_list .product-page-control button,
.product_list .product-page-control .btn .caret,

.product-page-control button,
.product-page-control .btn .caret {
    margin: 10px 0 10px 5px;
}

/* 頁面 >> 客製 >> 下箭頭 */
.product_list .product-page-control .product-page-size .btn .caret,

.product-page-control .product-page-size .btn .caret {
    margin: 10px 5px 10px 0px;
}

/* 左右箭頭 + Button */
.product-page-control .dropdown .btn-default, 

.product_list .product-page-control button,
.product_list .product-page-index a.btn,

.product-page-control button,
.product-page-index a.btn {
    width: auto;
    /* display: inline-block; */
    min-width: unset;
    min-width: 30px;
    position: relative;
    cursor: pointer;
}


.product_list .product-page-control button,
.product-page-control button,

.product_list .product-page-text input,
.product-page-text input {
    padding: 6px;
}

/* 輸入頁碼 >> 尚未輸入 */
.product_list .product-page-text input,
.product-page-text input {
    color: #666;
    margin: 0 5px;
    transition: all .2s linear 0s;
    transition: all .2s ease-in-out 0s;
}

/* 輸入頁碼 >> Hover 效果 */
.product_list .product-page-text input:focus, 
.product-page-text input:focus,
.product_list .product-page-text input:active, 
.product-page-text input:active,
.product_list .product-page-text input:hover, 
.product-page-text input:hover {
    color: #000;
    border: 1px solid #333;
    border: 1px solid #61aaf7;
    border: 1px solid #006399;
    filter: drop-shadow(1px 2px 3px rgba(48, 107, 125, 0.25));
    background-color: #f4f4f4;
    background-color: #f1f1f1;
    transition: all .2s linear 0s;
    transition: all .2s ease-in-out 0s;
}



/* 左右箭頭 >> 一般狀態 */
.product_list .product-page-index a.btn, 
.product-page-index a.btn {
    font-size: 1.5em;
    font-size: 1.6em;
    padding: 6px;
    padding: 6px 6px 8px;
    color: #006399;
    color: #2292d3;
}

/* 左右箭頭 >> 一般狀態:hover */
.product_list .product-page-index a.btn:hover, 
.product-page-index a.btn:hover {
    color: #15b5ea;
}


/* 左右箭頭 >> disable 無頁面狀態 */
.product_list .product-page-index a.btn.disabled, 
.product-page-index a.btn.disabled {
    color: #eaeaea;
}


/* 左右箭頭 >> 一般狀態:active */
.product_list .product-page-index a.btn:active, 
.product-page-index a.btn:active {
    box-shadow: unset !important;
}



/* 左右箭頭 > i */
.product_list .product-page-index a.btn i, 
.product-page-index a.btn i {
    font-size: inherit;
}


/* Showing 旁的結果 >> ...of */
.product-page-size span.page-result {
    border-right: 1px solid #eaeaea;
    position: relative;
    left: 5px;
    padding-right: 10px;
    margin-left: 5px;
}

/* Showing 旁的結果 >> ...of */
span.page-result .current-page-info, 
span.page-result span.total-page-size {
/*color: #333;*/
}

/* Showing 旁的結果 >> ...of */
span.page-result span.current-page-info {
margin-right: 2px;
}
















/***************************** Search Content( 有分為上區 / 下區 ) ******************************/

/* Search Content 上面 + 下面 Page Control */
#search_content > .product-page-control .product-page-size ul.dropdown-menu /* 下面 Page Control */, 
#search_content > div > .product-page-control .product-page-size ul.dropdown-menu /* 上面 Page Control */ {
    transform: translateX(4%);
}

/* Search Content 上面 Page Control */
#search_content > div > .product-page-control .product-page-size ul.dropdown-menu {
    /*
    top: 134px;
    right: 210px;
    */
    
    /*
    top: calc(5.2% - 0px);
    */
}

/* Search Content 下面 Page Control */
#search_content > .product-page-control .product-page-size ul.dropdown-menu {
    /*
    bottom: 40px;
    right: 436px;
    */

    /* 
    top: auto !important;
    bottom: calc(1.6% - -0px);
    */
}












/***************************** Listing Page + Search Content ( 有分為上區 / 下區 ) ******************************/


/* Listing Page + Result Page >> 下面 >> 要置中 */
#search_content > .product-page-control .product-page-size,
#product_listing #product_lists .product_list .product-page-control .product-page-size {
    margin-left: 0px;
}




















/* =========================================================================
                             RWD (All)
 ========================================================================= */


@media (min-width: 810px) {}



/* 1024 以上 */
@Media (min-width: 1024px) {

    /* 上面 + 下面的 Page Control */
    .product_list .product-page-control.visible-lg-block .product-page-index a i:before /*下面的*/,
    .product_list .product-page-control.visible-lg-block .product-page-index a i /*下面的*/,
    .product_list .product-page-control.visible-lg-block .product-page-index a /*下面的*/,
    .product_list .product-page-control.visible-lg-block .product-page-index /*下面的*/,
    .product_list .product-page-control.visible-lg-block .product-page-size /*下面的*/,
    .product_list .product-page-control.visible-lg-block /*下面的*/,

    .product-page-control.visible-lg-block .product-page-index a i::before /*上面的*/,
    .product-page-control.visible-lg-block .product-page-index a i /*上面的*/,
    .product-page-control.visible-lg-block .product-page-index a /*上面的*/,
    .product-page-control.visible-lg-block .product-page-index /*上面的*/,
    .product-page-control.visible-lg-block .product-page-size /*上面的*/,
    .product-page-control.visible-lg-block {
    display: inline-block;
    width: auto;

    display: flex !important;
    align-items: center; /* 項目垂直置中 >> 作用於單行（或單列）內的所有子項目 */
    align-content: center; /* 垂直置中 >> 作用於多行（或多列）的子項目 */
    justify-content: center; /* 水平置中 */
    }

    .product-page-control .product-page, 
    .product-page-control .product-page-size, 
    .product-page-control {
    /* 結尾 >> 右邊
    justify-content: end; 
    */
    }

    /* 標題 + Sort by + Page Control 區域 >> Page Control */
    #categoryheader .product-page-control,
    .product-page-control:not(.product_list .product-page-control) {
    float: right;
    }

}


@media (max-width: 1023px) {


    /* 上面 + 下面的 Page Control (行動裝置隱藏) */
    .product_list .product-page-control.visible-lg-block .product-page-index a i:before /*下面的*/,
    .product_list .product-page-control.visible-lg-block .product-page-index a i /*下面的*/,
    .product_list .product-page-control.visible-lg-block .product-page-index a /*下面的*/,
    .product_list .product-page-control.visible-lg-block .product-page-index /*下面的*/,
    .product_list .product-page-control.visible-lg-block .product-page-size /*下面的*/,
    .product_list .product-page-control.visible-lg-block /*下面的*/,

    .product-page-control.visible-lg-block .product-page-index a i::before /*上面的*/,
    .product-page-control.visible-lg-block .product-page-index a i /*上面的*/,
    .product-page-control.visible-lg-block .product-page-index a /*上面的*/,
    .product-page-control.visible-lg-block .product-page-index /*上面的*/,
    .product-page-control.visible-lg-block .product-page-size /*上面的*/,
    .product-page-control.visible-lg-block {
    display: none;
    }

}


@media (max-width: 820px) {

    #categoryheader .core-container #product_listing h1 {
    margin: 10px 0px 25px;
    }

    /* 上面 + 下面的 Page Control */
    .product-page-control.visible-lg-block {
    margin: 30px 0 0px !important;
    }

}