/*
Theme Name: Ewebot - Child
Author: GT3themes
Author URI: http://gt3themes.com
Description: -
Version: 1.0
Template: ewebot
*/
@import url("../ewebot/style.css");
@media(min-width:600px)
{
	.woocommerce table.shop_attributes th{
	min-width:250px;
}
}
@media(max-width:768px){
	.woocommerce table.shop_attributes td p{
		font-size:14px;
	}
	.woocommerce table.shop_attributes th{
		font-size:16px;
	}
	.woocommerce div.product>.woocommerce-tabs .panel {
    padding: 10px;
}
	.single-product.woocommerce div.product .product_title{
		font-size:24px;
	}
}
/* 1. Reset the list container to allow 100px items to sit in a row */
.flex-control-nav.flex-control-thumbs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important; /* Slightly larger gap for larger thumbs */
    width: 100% !important;
    padding: 0 !important;
    margin: 20px 0 0 0 !important;
}

/* 2. Force the List Item (LI) to be exactly 100x100 */
.flex-control-nav.flex-control-thumbs li {
    width: 100px !important;
    height: 100px !important; /* Matches your request */
    float: none !important; 
    margin: 0 !important;   
    flex: 0 0 100px !important; /* Ensures they stay exactly 100px wide */
    cursor: pointer;
    background-color: #f9f9f9; /* Optional: light background for non-square images */
}

/* 3. Force the image to fit without cropping */
.flex-control-nav.flex-control-thumbs li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; 
    display: block !important;
    opacity: 0.6; 
    transition: all 0.3s ease;
}

/* 4. Highlight the active thumbnail */
.flex-control-nav.flex-control-thumbs li img.flex-active {
    opacity: 1 !important;
    outline: 2px solid #222; /* Adds a nice focus ring to the active thumb */
}