.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
	border: 0px solid #ccc;
	display: block;
	margin: 0 auto 10px auto;	
}


/* effect mouse over product image */

.woocommerce ul.products li.product a:hover img, .woocommerce-page ul.products li.product a:hover img {
	transform: scale(1.0) !important;
    /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);*/
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0)!important;

}



/* Tabs */


.woocommerce #content div.product .woocommerce-tabs,
.woocommerce div.product .woocommerce-tabs,
.woocommerce-page #content div.product .woocommerce-tabs,
.woocommerce-page div.product .woocommerce-tabs {
    border-top: 0px solid #939598;
    border-bottom: 0px solid #939598;
}

.woocommerce #content div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce-page #content div.product .woocommerce-tabs ul.tabs li,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li {
    border-bottom: 0px solid #939598;
}

.woocommerce #content div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce-page #content div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li.active {
    border-bottom: 0px solid #939598;
}

/* Tab Panel */
.single-product.woocommerce .woocommerce-tabs .panel h2,
.single-product.woocommerce-page .woocommerce-tabs .panel h2 {
	padding-bottom: 0;
	margin-bottom: 5px;
}



	

	
	
	/*newtab dior*/
/* --- Reset กล่องแท็บเดิม --- */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    /*margin-right: 30px;*/
	margin: 0 20px;
    padding: 0;
    position: relative;
    z-index: auto;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after {
   border: 0px solid #fff !important; }


/* --- เส้นใต้เมื่อ hover หรือ active --- */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: inline-block;
    font-weight: 500;
    color: #666;
    padding: 8px 0;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    color: #000;
    border-bottom: 2px solid #000;
}

/* --- แถบเมนูแท็บเรียงซ้ายแนวนอน --- */
.woocommerce-tabs ul.tabs {
    display: flex;
	justify-content: center; /* <<< จุดสำคัญ */
    border-bottom: 1px solid #ccc;
    padding-left: 0;
    margin-bottom: 20px;
    list-style: none;
}

/* --- เนื้อหาแต่ละแท็บ --- */
.woocommerce-Tabs-panel {
    padding-top: 20px;
    font-size: 15px;
    line-height: 1.7;
}

/* ซ่อนหัวข้อ H2 ที่ซ้ำ */
.woocommerce-Tabs-panel > h2 {
    display: none;
}
	
	
	/*******************************************************************/
	
/* Tabs */

/*
.woocommerce #content div.product .woocommerce-tabs,
.woocommerce div.product .woocommerce-tabs,
.woocommerce-page #content div.product .woocommerce-tabs,
.woocommerce-page div.product .woocommerce-tabs {
    border-top: 0px solid #939598;
    border-bottom: 0px solid #939598;
}

.woocommerce #content div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce-page #content div.product .woocommerce-tabs ul.tabs li,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li {
    border-bottom: 0px solid #939598;
}

.woocommerce #content div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce-page #content div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li.active {
    border-bottom: 0px solid #939598;
}

*/

/* Tab Panel */
/*
.single-product.woocommerce .woocommerce-tabs .panel h2,
.single-product.woocommerce-page .woocommerce-tabs .panel h2 {
	padding-bottom: 0;
	margin-bottom: 5px;
}
*/

/* Turn "side tabs" into top tabs */
/*
	.woocommerce-tabs ul.tabs,
	.woocommerce div.product .woocommerce-tabs ul.tabs,
	.woocommerce-page #content div.product .woocommerce-tabs ul.tabs,
	.woocommerce-page div.product .woocommerce-tabs ul.tabs {
	    list-style: none;
	  	padding: 0 0 0 5px;
	    margin: 0 0 5px 0;
	    overflow: hidden;
	    position: relative;
	  	width: 100%;
	}
	
	.woocommerce #content div.product .woocommerce-tabs ul.tabs li,
	.woocommerce div.product .woocommerce-tabs ul.tabs li,
	.woocommerce-page #content div.product .woocommerce-tabs ul.tabs li,
	.woocommerce-page div.product .woocommerce-tabs ul.tabs li {
	}
	
	.woocommerce #content div.product .woocommerce-tabs ul.tabs li.active,
	.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
	.woocommerce-page #content div.product .woocommerce-tabs ul.tabs li.active,
	.woocommerce-page div.product .woocommerce-tabs ul.tabs li.active {
	    background: #FFFFFF;
	    z-index: 2;
	    border-bottom-color: #FFFFFF;
	}
    
  */  
	
	/*custom ***********************/
/*
	.woocommerce div.product .woocommerce-tabs ul.tabs::before {  
     border-bottom: 0px solid #cfc8d8 !important; 
      }
	  
	  .woocommerce-Tabs-panel > h2 {
		  display: none;
		}
		
	.woocommerce div.product .woocommerce-tabs .panel {
			margin: 2em !important; 
			padding: 0;
		}	
  */      
        
	/*custom ***********************/
/*	.woocommerce #content div.product .woocommerce-tabs ul.tabs li,
	.woocommerce div.product .woocommerce-tabs ul.tabs li,
	.woocommerce-page #content div.product .woocommerce-tabs ul.tabs li,
	.woocommerce-page div.product .woocommerce-tabs ul.tabs li {
	    border: 1px solid #d3ced2;
	    background-color: #ebe9eb;
	    display: inline-block;
	    position: relative;
	    z-index: 0;
	    border-radius: 4px 4px 0 0 !important;
	    margin: 0 -5px;
	    padding: 0 1em;
	}
	.woocommerce div.product .woocommerce-tabs ul.tabs li:before {
		content: ''; 
	}
	.woocommerce div.product .woocommerce-tabs ul.tabs li:after {
		content: ''; 
	}
	
	.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	    color: inherit;
	    text-shadow: inherit;
	}
	
	.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	    display: inline-block;
	    padding: .5em 0;
	    font-weight: 700;
	    color: #515151;
	    text-decoration: none;
	}
	
	.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	    display: inline-block;
	    padding: .5em 0;
	    font-weight: 700;
	    color: #515151;
	    text-decoration: none;
	}
	
	.woocommerce #content div.product .woocommerce-tabs .panel,
	.woocommerce div.product .woocommerce-tabs .panel,
	.woocommerce-page #content div.product .woocommerce-tabs .panel,
	.woocommerce-page div.product .woocommerce-tabs .panel {
		padding: 0;
		width: 100%;
	}
*/	
	
	
	
	
	
	

/*********************************/

/* product image */
.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
    float: left;
    width: 40%;
}


.woocommerce div.product div.images .flex-control-thumbs li img {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.woocommerce div.product div.images .flex-control-thumbs li img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}


.woocommerce .woocommerce-breadcrumb, .woocommerce-page .woocommerce-breadcrumb {
    line-height: 15px;
    font-size: 13px;
    font-weight: 300;
    margin: 0 auto 30px auto;
    text-align: left !important;
}


.single-product.woocommerce .entry-summary, .single-product.woocommerce-page .entry-summary {
    margin: 1.5em 0 0;
}


/******************    product zoom icon ****************************/
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    top: 1em !important; 
}


/*********************  ซ่อนเส้นกรอบในหน้า Product detail  ***************************************/
.woocommerce div.product div.images .flex-viewport {
    border: 0px solid #ccc !important;
}


/* === Layout Container (Login / Register Box) === */
.woocommerce form.woocommerce-form-login,
.woocommerce form.woocommerce-form-register {
    max-width: 400px;
    margin: auto;
    padding: 2rem;
    border: none;
    box-shadow: none;
    background: #fff;
    /*font-family: 'Roboto', sans-serif;*/
}

/* === Fancy Input Floating Label === */
.woocommerce-form-row {
    position: relative;
    margin-bottom: 2rem;
}

.woocommerce-form-row input.input-text {
    border: none;
	border-top: 0px !important;
	border-left: 0px !important;
	border-right: 0px !important;
    border-bottom: 1px solid #ccc !important;
    border-radius: 0;
    background: transparent;
    padding: 14px 0;
    font-size: 14px;
    width: 100%;
    font-family: inherit;
    transition: border-color 0.3s;
}

.woocommerce-form-row input.input-text:focus {
    outline: none;
    border-bottom: 1px solid #000;
}

/* === Floating Label Effect === */
.woocommerce-form-row label {
    /*position: absolute;*/
    top: 10px;
    left: 0;
    font-size: 16px;
    color: #aaa;
    pointer-events: none;
    transition: 0.2s ease all;
}

.woocommerce-form-row input.input-text:focus + label,
.woocommerce-form-row input.input-text:not(:placeholder-shown) + label {
    top: -10px;
    font-size: 12px;
    color: #000;
}

/* === Submit Button (Dior Style) === */
.woocommerce button.button {
    background-color: #000;
    color: #fff;
    border-radius: 6px;
    padding: 0.75rem;
    text-transform: uppercase;
    font-weight: bold;
    width: 100%;
    font-size: 16px;
}

/* === Error / Message Styling === */
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-message {
    font-size: 0.9rem;
    color: #c00;
    border: none;
    background: none;
    padding: 0;
    margin-top: 5px;
}

/* === Required Mark (*) Styling === */
.woocommerce form .form-row .required {
    color: #000;
}



.woocommerce form .form-row input.input-text, .woocommerce-page form .form-row input.input-text {
  
 padding: 15px 0 15px;
 margin: 0 0 20px;

}


/* เพิ่ม padding product desc ในตัวเลือกสี size */
.woocommerce #content div.product form.cart .variations td.value, .woocommerce div.product form.cart .variations td.value, .woocommerce-page #content div.product form.cart .variations td.value, .woocommerce-page div.product form.cart .variations td.value 
{ padding: 10px 0 2px 0 !important; }






@media screen and (max-width: 768px) {

.woocommerce #content div.product div.images, .woocommerce #content div.product div.summary, .woocommerce div.product div.images, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.images, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.images, .woocommerce-page div.product div.summary {
        float: none;
        width: 100%;
    }
	
/* product image */
.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
    float: left;
    width: 100%;
}
	
	
	
.woocommerce div.product .woocommerce-tabs .panel {
			margin: 0em !important; 
			padding: 0;
		}
		
/* product list page column*/
    .woocommerce.columns-4 ul.products li.product, body.full-width ul.products li.product, .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .post-type-archive-product.woocommerce.shopstar-shop-full-width ul.products li.product, .post-type-archive-product.woocommerce.shopstar-shop-full-width ul.products li.product, .archive.woocommerce.shopstar-shop-full-width ul.products li.product {
        width: 48% !important;
        margin: 0 1% 35px !important;
		padding:0.5%;
    }
	
	
.woocommerce ul.products li.product h2, .woocommerce-page ul.products li.product h2, .woocommerce ul.products li.product h3, .woocommerce-page ul.products li.product h3, ul.product_list_widget li .product-title {
    font-size: 11px !important; }




.woocommerce ul.products li.product .price, .woocommerce #content ul.products li.product span.price, .woocommerce-page #content ul.products li.product span.price {
    
   font-size: 12px !important; }	
   
.woocommerce #content div.product p.price, .woocommerce-page #content div.product p.price, .woocommerce-page div.product p.price {
    font-size: 20px !important;  
}
   
 .woocommerce #content div.product .product_title, .woocommerce div.product .product_title, .woocommerce-page #content div.product .product_title, .woocommerce-page div.product .product_title {
      font-size: 16px !important;  
  
}  


/******************  my account page   *******************/
.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 100%;
}


.woocommerce-account .woocommerce-MyAccount-content {
    width: 100%;
}


.woocommerce-MyAccount-navigation li {
    margin: 0 0 0.9em 0;
    border-bottom: dotted 0.3px #ccc;
}

			
	
}