/*
Theme Name:   	Storefront Child Theme
Theme URI:    	https://extrawoo.com/storefront-child-theme
Author:       	Extra Woo
Author URI:     https://extrawoo.com
Template:     	storefront
Description:  	Child theme for the Storefront WooCommerce theme. You can replace all this information with your own.
Version:      	1.0.0
License:      	GNU General Public License v2 or later
License URI:  	http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  	storefront

/*
 * Add your own custom css below this text.
 */
.woocommerce-store-notice.demo_store {
    background-color: #FF0000; /* change this to any color you want */
    color: #FFFFFF;            /* text color */
}
/* Remove all focus/click outline and dim effects site-wide */
a:focus,
a:active,
button:focus,
button:active,
input:focus,
input:active,
textarea:focus,
textarea:active,
ul.products li.product a:focus,
ul.products li.product a:active {
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

/* Removes the max-width constraint on single product pages */
.single-product .site-main {
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
}

/* Adjusts the primary content container */
.single-product #primary {
    width: 100%;
    float: none;
}
/* 1. Force the 4-column grid to be much tighter */
.brand-thumbnails.columns-4 {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important; /* This controls the gap between icons */
    margin: 0 auto !important;
}

/* 2. Shrink the individual brand items */
.brand-thumbnails.columns-4 li {
    width: auto !important; /* Breaks the "4 columns" wide rule */
    max-width: 100px !important; /* Adjust this to make icons smaller/larger */
    margin: 0 !important;
    float: none !important; /* Storefront uses floats, we want flex */
    list-style: none !important;
}

/* 3. Make the actual images tiny */
.brand-thumbnails.columns-4 li img {
    width: 60px !important; /* Set your preferred icon size here */
    height: auto !important;
    filter: grayscale(100%); /* Optional: makes them look cleaner/subtle */
    opacity: 0.7;
    transition: 0.3s;
}

.brand-thumbnails.columns-4 li img:hover {
    filter: grayscale(0%);
    opacity: 1;
}
.stock-in { color: green !important; font-weight: 500; }
.stock-out { color: red !important; font-weight: 500; }