﻿/********** CSS ADD **********/
/* Pager */
.pager{margin:0; padding:0 8px; border:0;}
.pager ul{display:block;}
.pager li{float:none; margin:0;}
.pager li.previous-page{float:left;}
.pager li.previous-page a{background-image:url(../image/ButtonBack.png); background-position:left center; background-size:22px 22px; background-repeat:no-repeat; background-color:transparent;}
.pager li.next-page{float:right;}
.pager li.next-page a{background-image:url(../image/ButtonNext.png); background-position:left center; background-size:22px 22px; background-repeat:no-repeat; background-color:transparent;}
.pager li.current-page span{font-weight:600; background:rgba(90,79,207,.1);}
.pager li.current-page, .pager li.individual-page{margin:0 4px;}
.pager li *{min-width:36px; height:36px; padding:0; border:0; color:#000; font-weight:200; line-height:36px;}

/* product grid__item Box */
.product-grid{margin:0;}
.product-grid .item-grid{display:flex; display:-ms-flexbox; flex-wrap:wrap;}
.product-grid .item-box{flex:0 0 50%; float:none; width:auto; padding:0; margin:0 0 56px;}
.product-grid .item-box .product-item{position:relative; height:100%; margin:0 8px; padding-bottom:92px;}
.product-grid .item-box .picture{margin:0 0 20px; background:#F9F9FD;}
.product-grid .item-box .picture a:after{display:none; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); content:"沒有圖片"; font-size:18px; font-weight:200;}
.product-grid .item-box .picture.no-photo-item img{display:none;}
.product-grid .item-box .picture.no-photo-item a:after{display:block;}
.product-grid .item-box .details{text-align:center;}
.product-grid .item-box .product-title{height:auto; margin-bottom:20px; padding:0 20px;}
.product-grid .item-box .prices{min-height:auto; margin-bottom:20px; line-height:1;}
.product-grid .item-box .prices span{margin:0 5px; color:#000; font-size:14px; font-weight:200; vertical-align:middle;}
.product-grid .item-box .buttons{position:absolute; bottom:0; width:100%; text-align:center;}
.product-grid .item-box input[type="button"]{height:auto; padding:8px 0; margin-top:20px; font-weight:400;}

/* product grid__item Box__ajax cart button wrapper */
.ajax-cart-button-wrapper{width:100%;}
.ajax-cart-button-wrapper .pd-qty-wrapper{min-height:36px; max-height:36px;}
.ajax-cart-button-wrapper.soldout-item input[type="number"], .ajax-cart-button-wrapper.soldout-item input[type="button"].button-2{display:none;}
.ajax-cart-button-wrapper.soldout-item input[type="button"].button-soldout{display:block;}

/* page */
.page .success-paid-item{margin-bottom:30px; text-align:center;}
.page .success-paid-item img{width:70px;}
.page .fieldset{width:100%;}
.page .form-fields{width:400px; max-width:100%; margin:0 auto; padding:0; border:0;}
.page .inputs{margin: 0 0 20px !important;}
.page .inputs.multi-flied{margin-bottom:5px !important;}
.page .inputs input, .checkout-page .inputs input{display:block; width:100% !important; border:1px solid #d9d9d9 !important;}
.page .inputs input:focus, .checkout-page .inputs input:focus{border-color:#000 !important;}
.page .inputs .date-picker-wrapper{display:flex; width:100%;}
.page .inputs .date-picker-wrapper select{flex:1; max-width:none; border:1px solid #d9d9d9;}
.page .inputs label, .checkout-page .inputs label{display:block; width:auto; margin:0 0 5px 0; text-align:left; font-weight:200;}
.page .inputs label a, .checkout-page .inputs label a, a.alink-item{text-transform:none; font-weight:400; color:#5a4fcf;}
.page .inputs label[for=create-acc] a span:first-child, .page .inputs label[for=contact-us] a span:first-child{color:#000; font-weight:200;}
.page .inputs label[for=forgot-password], .checkout-page .inputs label[for=forgot-password]{margin:5px 0 0 0; line-height:20px; text-align:right;}
.page .inputs label[for=forgot-password] a, .checkout-page .inputs label[for=forgot-password] a{display:inline-block; line-height:1; font-size:12px;}
.page .inputs label[for=create-acc], .page .inputs label[for=contact-us], .page .inputs label[for=login-acc], .page .inputs label[for=back-to-home], .checkout-page .inputs label[for=create-acc]{margin:0; text-align:center;}
.page .button-1, .mini-shopping-cart input[type="button"]{width:100%; margin:0; padding:8px 40px !important; font-size:14px; font-weight:400; letter-spacing:normal; transition:none;}
.page .buttons{max-width:400px; margin:0 auto; font-size:0;}
.page .buttons .inputs{margin:40px 0 0 0 !important;}
.page .common-buttons{float:left; width:100%; padding:12px 0; border-bottom:1px solid #d9d9d9;}
.page .common-buttons .button-2{float:left; width:auto; border:none; margin:0; background:none; background-size:22px 22px; background-repeat:no-repeat; color:#000; font-weight:400; transition:none;}
.page .common-buttons .button-2.continue-shopping-button{padding:0 24px; background-image:url("../image/ButtonBack.png"); background-position:left center;}
.page .common-buttons .button-2.update-cart-button{float:right; padding:0 24px 0 0; background-image:url("../image/ButtonBarbagecan.png"); background-position:right center; color:#5a4fcf;}
.page .common-buttons .button-2.update-cart-button.hidden-item{color:#ccc; background-image:url("../image/ButtonBarbagecan-Grey.png"); cursor:auto; opacity:1 !important;}
.page .form-fields-item{margin:0 0 40px;}
.page .form-fields-item .title-container{display:flex; justify-content:space-between;}
.page .form-fields-item .title-container .inputs{margin:5px 0 !important;}
.page .form-fields-item .checkbox-container{text-align:left;}
.page .form-fields-item label, .page .form-fields-container label{flex:2; font-weight:200 !important; color:#000 !important; text-align:left;}
.page .form-fields-item.enter-email .inputs{margin:0 0 5px 0 !important;}
.page .form-fields-item.enter-address, .page .form-fields-item.pick-up-address{display:none; margin:40px 0;}
.page .form-fields-container{float:left; width:100%; text-align:left;}
.page .form-fields-container > input + label{margin-right:10px;}
.page .form-fields-container #shippingoption_0:checked ~ .enter-address, .page .form-fields-container #shippingoption_1:checked ~ .pick-up-address{display:block;}

/* toggle item */
.toggle-item{border:0; border-bottom:1px solid #d9d9d9;}
.toggle-item:first-child{border-top:1px solid #d9d9d9;}
.toggle-item > input, .basic-search .inputs > input{position:absolute; left:-999999999px;}
.toggle-item label{display:table; padding:15px 0; line-height:1;}
.toggle-item label span, .toggle-item label:after{display:table-cell; vertical-align:middle;}
.toggle-item label span{width:100%; font-size:18px; letter-spacing:.06em;}
.toggle-item label:after{content:"+"; font-size:24px; font-weight:lighter;}
.toggle-item .toggle-content{display:none;}
.toggle-item .toggle-content p, .about-content p{margin:0 0 15px; font-size:15px; font-weight:200; letter-spacing:.06em;} 
.toggle-item .toggle-content select{width:100%; margin-bottom:15px; border:1px solid #d9d9d9;}
.toggle-item .toggle-content .tags{display:none; margin-bottom:15px; padding:0;}
.toggle-item .toggle-content .tags .tag-title{margin:0 10px 0 0; font-weight:400; font-size:12px !important; letter-spacing:.06em;}
.toggle-item .toggle-content .tags li, .toggle-item .toggle-content .tags a{line-height:1;}
.toggle-item .toggle-content .tags li{margin:0 20px 0 0; padding:5px 0; font-weight:200;}
.toggle-item .toggle-content .price-range{display:flex;}
.toggle-item .toggle-content .price-range > span{margin:0 10px;}
.toggle-item input:checked ~ label:after{content:"−";}	
.toggle-item #pdDes01:checked ~ .toggle-content, .toggle-item #pdDes02:checked ~ .toggle-content, .toggle-item #pdDes03:checked ~ .toggle-content{display:block !important;}

/* toggle item__side 2 */
.side-2{margin-bottom:30px;}
.side-2 .toggle-item > label{display:none;}
.side-2 .toggle-item .toggle-content{display:table !important; width:100%;}
.side-2 .toggle-item .toggle-content .toggle-tt{display:table-cell; width:22%; font-weight:200;}
.side-2 .toggle-item .toggle-content select{display:table-cell;}
.side-2 .toggle-item:nth-last-child(n+2){border:0;}

/* product selectors */
.product-selectors{display:table; width:100%; padding:0 8px;}
.product-selectors > div{display:table-cell; margin:0; padding:0 !important; font-size:14px; font-weight:200;}
.product-selectors > div > span, .product-selectors > div > select{width:auto !important;}
.product-selectors > div > span{padding:0 5px 0 0;}
.product-selectors .product-viewmode, .product-selectors .product-page-size{display:none !important;}
.product-selectors .product-sorting{text-align:right;}
.product-selectors .product-sorting select{min-width:150px;}
.product-selectors .product-result-data{text-align:left;}

/* html__home page */
.html-home-page .master-wrapper-content, .html-topic-page .master-wrapper-content{margin-top:0; padding:56px 0 0 !important;}

/* html__product details page */
.html-category-page .master-wrapper-content, .html-search-page .master-wrapper-content{padding:20px 0 0 !important;}

/* html__category page and search_page */
.html-category-page .center-2, .html-search-page .center-2{margin:0 0 56px;}
.html-category-page .side-2 .block, .html-search-page .side-2 .block{margin:0 8px;}
.html-category-page .side-2 .block label span, .html-search-page .side-2 .block label span{font-weight:400;}
.html-category-page .side-2 .block input[type="number"], .html-search-page .side-2 .block input[type="number"]{border-color:#d9d9d9;}

/* html__topic page */
.html-topic-page .picture-slide{background:url("../image/aboutus_01.jpg"); background-repeat:no-repeat; background-size:cover; background-position:center center;}
.html-topic-page .picture-slide .slider-title h1{color:#fff;}
.html-topic-page .page{text-align:left;}
.html-topic-page .page .page-body .about-content:last-child{padding:0;}
.html-topic-page .about-content{padding-bottom:56px; margin:0 8px;}
.html-topic-page .about-content h4{margin-bottom:15px; font-weight:400;}
.html-topic-page .about-content p:last-child{margin:0;}

/* group for hover */
a:hover, a img:hover, input[type="submit"]:hover, input[type="button"]:hover, button[type="submit"]:hover, label:hover{opacity:.75 !important; text-decoration:none !important; cursor:pointer;}
.header-pp-logo > a:hover, .header-pp-logo > a img:hover, .item-box a:hover, .item-box a img:hover, .cart-item-row a:hover, .cart-item-row a img:hover{opacity:1 !important; cursor:pointer;}
input[type="button"].button-soldout:hover, input[type="button"].button-dim:hover, .breadcrumb li.active-step a:hover, .order-progress li.active-step a:hover, .order-progress li.inactive-step a:hover, .project-essential .pj-des .picture a:hover, .project-essential .pj-des .picture a img:hover, .filled-list label:hover, .basic-search .inputs label:hover, .pager li > span:hover{opacity:1 !important; cursor:auto;}
.breadcrumb li a:hover, .block .tags li a:hover, .item-box a:hover, .cart a, .cart a:hover, .pager li a:hover{color:#000 !important;}
.toggle-item label:hover{color:#5a4fcf;}
.item-box:hover{box-shadow:none !important;}
.item-box:hover .picture{box-shadow:0 25px 35px -5px rgb(0 0 0 / 10%); -webkit-box-shadow:0 25px 35px -5px rgb(0 0 0 / 10%); transition:all .3s;}
