/********** NOTIFICATIONS & POPUPS Begin **********/
.bar-notification {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
    width: 100%;
    padding: 15px 25px 15px 10px;
    line-height: 16px;
    color: #fff;
    opacity: 0.95;
}

    .bar-notification.success {
        background-color: #4bb07a;
    }

    .bar-notification.error {
        background-color: #e4444c;
    }

    .bar-notification.info {
        color: #31708f;
        background-color: #d9edf7;
    }

    .bar-notification.warning {
        color: #fff;
        background-color: #f9c05c;
    }

    .bar-notification.white {
        font-size: 16px;
        color: #666;
        background-color: #fff;
    }

    .bar-notification.del {
        font-size: 16px;
        color: #666;
        background-color: #fffafa;
    }

    .bar-notification .content {
        /*float: left;*/
        text-align: center;
        margin: 0 10px 0 0;
        font-size: 15px;
        height: auto;
    }

        .bar-notification .content a {
            color: #fff;
            text-decoration: underline;
        }

    .bar-notification .closeicon {
        position: absolute;
        top: 0;
        right: 0;
        width: 32px;
        height: 32px;
        margin: 7px;
        background: #fff url('../images/close.png') center no-repeat;
        cursor: pointer;
    }
/********** NOTIFICATIONS & POPUPS End **********/

/********** CONTENT NOTIFICATIONS & POPUPS Begin **********/
.content-bar-notification {
    min-height: 60px;
    padding: 15px 25px 15px 10px;
    line-height: 16px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 35px 0 rgb(154 161 171 / 15%);
    box-shadow: 0 0 35px 0 rgb(154 161 171 / 15%);
    position: fixed;
    left: 260px;
    top: 70px;
    right: 0;
    z-index: 10;
}

    .content-bar-notification.success {
        background-color: #4bb07a;
    }

    .content-bar-notification.error {
        background-color: #e4444c;
    }

    .content-bar-notification.info {
        color: #31708f;
        background-color: #d9edf7;
    }

    .content-bar-notification.warning {
        color: #fff;
        background-color: #f9c05c;
    }

    .content-bar-notification.white {
        font-size: 16px;
        color: #666;
        background-color: #fff;
    }

    .content-bar-notification.del {
        font-size: 16px;
        color: #666;
        background-color: #fffafa;
    }

    .content-bar-notification .content {
        /*float: left;*/
        text-align: center;
        margin: 0 10px 0 0;
        font-size: 16px;
        height: auto;
    }

        .content-bar-notification .content a {
            color: #fff;
            text-decoration: underline;
        }

    .content-bar-notification .closeicon {
        position: absolute;
        top: 0;
        right: 0;
        width: 32px;
        height: 32px;
        margin: 7px;
        background: #fff url('../images/close.png') center no-repeat;
        cursor: pointer;
    }
/********** CONTENT NOTIFICATIONS & POPUPS End **********/

/********** 修正如果 jquery ui 放在 bootstrap前先載入，則 dialog 的 close icon 會顯示不出來 Begin **********/
.ui-dialog-titlebar-close {
    padding: 0 !important;
    border: 1px solid #c5c5c5;
}

    .ui-dialog-titlebar-close:after {
        content: '';
        width: 16px;
        height: 16px;
        display: inline-block;
        /* Change path to image*/
        background-image: url(jquery-ui-1.13.2/images/ui-icons_777777_256x240.png);
        background-position: -96px -128px;
        background-repeat: no-repeat;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -8px;
        margin-left: -8px;
    }

.ui-dialog-buttonset button {
    border: 1px solid #c5c5c5;
}
/********** 修正如果 jquery ui 放在 bootstrap前先載入，則 dialog 的 close icon 會顯示不出來 End **********/

/*Product Image Hover---------------------------------------------*/
.hov-img0 {
    display: block;
    overflow: hidden;
}

    .hov-img0 img {
        width: 100%;
        -webkit-transition: transform 0.9s ease;
        -o-transition: transform 0.9s ease;
        -moz-transition: transform 0.9s ease;
        transition: transform 0.9s ease;
    }

    .hov-img0:hover img {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
    }

/*---------------------------------------------*/

/*========== Sold Out Begin ==========*/
.product-item {
    position: relative;
    overflow: hidden;
}

    .product-item .product-image img {
        max-height: 100%;
        max-width: 100%;
        width: auto;
        height: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    .product-item:hover .product-image img {
        opacity: 0.9;
        height: auto;
        max-width: 100%;
        border: none;
        outline: none;
        transition: all 0.4s ease 0s;
        -moz-transition: all 0.4s ease 0s;
        -webkit-transition: all 0.4s ease 0s;
        -o-transition: all 0.4s ease 0s;
    }

    /*.product-item .sold-out::before {*/
        /*background: rgba(255,255,255,0.7);*/
        /*background: rgba(248,219,230, 0.7);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1;
    }

    .product-item .sold-out::after {
        z-index: 1;
        content: "Sold out";
        text-align: center;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.25em;
        color: #fff;
        position: absolute;
        width: 6em;
        padding: 1em;
        top: 50%;
        left: 50%;
        margin-top: -2.2em;
        margin-left: -3em;
        outline: #fff solid 2px;
        outline-offset: -2px;
        letter-spacing: .1em;
        -webkit-box-shadow: border-box;
        -moz-box-shadow: border-box;
        box-shadow: border-box;
    }*/

    .product-item .product-image {
        /*background: #000;*/
        border: 1px solid #eaeaea;
        /*min-width: 70px;*/
        width: 100%;
        height: 264px;
        overflow: hidden;
        position: relative;
    }

        .product-item .product-image.sold-out::before {
            /*background: rgba(255,255,255,0.7);*/
            background: rgba(248,219,230, 0.7);
            content: "";
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
            z-index: 1;
        }

        .product-item .product-image.sold-out::after {
            z-index: 1;
            content: "Sold out";
            text-align: center;
            font-size: 18px;
            font-weight: 700;
            line-height: 1.25em;
            color: #fff;
            position: absolute;
            width: 6em;
            padding: 1em;
            top: 50%;
            left: 50%;
            margin-top: -2.2em;
            margin-left: -3em;
            outline: #fff solid 2px;
            outline-offset: -2px;
            letter-spacing: .1em;
            -webkit-box-shadow: border-box;
            -moz-box-shadow: border-box;
            box-shadow: border-box;
        }

        .product-item .product-image.restricted::before {
            background: rgba(255, 255, 255, 0.85);
            content: "";
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
            z-index: 1;
        }

        /*.product-item .product-image.restricted::after {
            z-index: 1;
            content: "18+ Restricted";
            text-align: center;
            font-size: 18px;
            font-weight: 700;
            line-height: 1.25em;
            color: #c0392b;*/ /* 鮮明紅色字 */
            /*position: absolute;
            width: 8em;
            padding: 1em;
            top: 50%;
            left: 50%;
            margin-top: -2.2em;
            margin-left: -4em;
            outline: #c0392b solid 2px;
            outline-offset: -2px;
            letter-spacing: .1em;
            background: #ffffff;
            border-radius: 0.3em;
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
        }*/

        .product-item .product-image.restricted::after {
            z-index: 2;
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100px;
            height: 100px;
            margin-top: -50px;
            margin-left: -50px;
            background-image: url("https://www.zd8.com.tw/images/R18.png");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }
/*========== Sold Out End ==========*/

/*========== 修正 bootstrap-touchspin 顯示問題 Begin ==========*/
.bootstrap-touchspin-down, .bootstrap-touchspin-up {
    --cz-btn-padding-x: 0.9rem;
    --cz-btn-padding-y: 0.45rem;
}

[data-toggle="touchspin"] {
    padding: 0.45rem 0.8rem;
    text-align: center;
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.5;
}

/*修正主選單若變兩行，縮小兩行之間的間距*/
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
    }
}
/*========== 修正 bootstrap-touchspin 顯示問題 End ==========*/

/*========== 購物車，提示免運門檻文字 Begin ==========*/
#ucShoppingCart_shippingfee-label {
    float: left;
    padding: 3px 6px;
    margin-right: 5px;
    background-color: #979797;
    color: #fff;
    vertical-align: middle;
}

#ucShoppingCart_shippingfee-txt {
    font-size: 14px;
    padding-top: 6px;
}
/*========== 購物車，提示免運門檻文字 End ==========*/

/*========== Image RWD Setting Begin ==========*/
@media (min-width:320px) { 
    /* smartphones, iPhone, portrait 480x320 phones */
    .product-item .product-image {
        border: 1px solid #eaeaea;
        width: 100%;
        height: 150px;
        overflow: hidden;
        position: relative;
    }
}

@media (min-width:481px) { 
    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
    .product-item .product-image {
        border: 1px solid #eaeaea;
        width: 100%;
        height: 150px;
        overflow: hidden;
        position: relative;
    }
}

@media (min-width:641px) { 
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
    .product-item .product-image {
        border: 1px solid #eaeaea;
        width: 100%;
        height: 180px;
        overflow: hidden;
        position: relative;
    }
}

@media (min-width:961px) { 
    /* tablet, landscape iPad, lo-res laptops ands desktops */
    .product-item .product-image {
        border: 1px solid #eaeaea;
        width: 100%;
        height: 220px;
        overflow: hidden;
        position: relative;
    }
}

@media (min-width:1025px) { 
    /* big landscape tablets, laptops, and desktops */
    .product-item .product-image {
        border: 1px solid #eaeaea;
        width: 100%;
        height: 264px;
        overflow: hidden;
        position: relative;
    }
}

@media (min-width:1281px) {
    /* hi-res laptops and desktops */
    .product-item .product-image {
        border: 1px solid #eaeaea;
        width: 100%;
        height: 264px;
        overflow: hidden;
        position: relative;
    }
}
/*========== Image RWD Setting End ==========*/

.customText {
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 40px;
    text-align: center;
    color: #fff;
    background-color: #f772c6;
    font-size: 14px;
    border-radius: 8px;
    z-index: 1;
}

/* .divSpCusCt p 是要避免使用 CKEditor 編輯時 Html P 去套用到 Bootstrap P */
.divSpCusCt p {
    margin-top: 0px;
    margin-bottom: 0px;
}

/* 修正回到最上方按鈕位置 */
.btn-scroll-top {
    bottom: 8.00rem;
}