/*
Theme Name: Gotshirts
Theme URI:
Description: Child theme of Shoptimizer
Author: CommerceGurus
Author URI:
Template: shoptimizer
Version: 1.2.2
License:         	GNU General Public License v2 or later
License URI:     	http://www.gnu.org/licenses/gpl-2.0.html
*/

/*

.col-full{
    max-width: 1100px !important;
}
*/

/*  ------------------------------------------
    Constants
    ------------------------------------------
*/
:root {

    --main-font         :       Chivo;

    --font-color:               #363636;
    --heading-font-color:       #646464;
    --light-accent-color:       #f3f3f3;

    --primary-color:            #EB6622;    /* gs orange */
    --secondary-color:          #2A2A2A;    /* gs bruin */
    --nav-color:                #EE7126;    /* gs orange */
    --nav-inv-color:            #FFFFFF;    /* inverted nav (hover or on dark background */

    --form-background-color:    #f8f8f8;
    --icon-color:               #EAEAEA;

    /*
    --background-color:         #ffffff;


    --primary-hover-color:      #000000;
    --primary-text-color:       #FFFFFF;

    --secondary-color:          #CDA630;
    --secondary-text-color:     #022A3E;

    --grey-color:               #D4D4D4;

    --font-color-heading:       #022A3E;

    --b-radius:                 11px;
    */
}

ul.products li.product .button{
    background-color: var(--primary-color) !important;
}

ul.products li.product .button:hover{
    background-color: var(--secondary-color) !important;
}

/*  ------------------------------------------
    Global settings
   ------------------------------------------
*/

body,.elementor-widget-text-editor{
    font-family: sans-serif;                                    /* This is fallback font for old browsers */
    font-family: var(--main-font), sans-serif !important;
    color:  var(--font-color) !important;
}



h1,h2,.elementor-widget-heading .elementor-heading-title{
    color: var(--heading-font-color) !important;
    font-family: var(--main-font), sans-serif !important;

}

h1{
    font-size: 30px !important;
    text-transform: uppercase !important;
}

h2{
    font-size: 25px !important;
    letter-spacing: 0px;
    text-transform: uppercase !important;
}

#content a{
    color: var(--primary-color) !important;
}

#content a:hover{
    color: var(--secondary-color) !important;
}

.button,#content .wp-element-button.wc-block-cart__submit-button{
    background-color: var(--primary-color) !important;
    color: var(--nav-inv-color) !important;
    text-transform: uppercase;
    font-size: 13px;
}

#content .wp-element-button.wc-block-cart__submit-button:hover{
    background-color: var(--secondary-color) !important;
}

.elementor-widget-heading .elementor-heading-title{
    font-weight: 400 !important;
}

/*  ------------------------------------------
    Top bar
    ------------------------------------------
*/

.col-full.topbar-wrapper{
    background-color: var(--light-accent-color) !important;

}

.top-bar{
    font-family: var(--main-font), sans-serif !important;
    font-size: 16px !important;
}

/*  ------------------------------------------
    Header
    ------------------------------------------
*/
.site-header .custom-logo-link img {
    height: 125px !important;
}

/*  ------------------------------------------
    Menu
    ------------------------------------------
*/
.menu-primary-menu-container > ul > li > a{                     /* main-menu font */
    font-family: sans-serif;
    font-family: var(--main-font), sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0px !important;
    text-transform: uppercase !important;

    color: var(--nav-inv-color) !important;
}

@media (max-width: 992px){
    .menu-primary-menu-container > ul > li > a {
        color: var(--nav-color) !important;
    }
}


.menu-primary-menu-container > ul > li > a span::before{
    border-color: var(--nav-color) !important;
}


.menu-primary-menu-container > ul > li > a:hover{
    color: var(--primary-color) !important;
}

footer a{
    color: var(--nav-inv-color) !important;
}

footer a:hover, footer span.widget-title{
    color: var(--primary-color) !important;
}

@media (min-width: 993px) {                                     /* main menu item spacing */
    .menu-primary-menu-container > ul > li > a {
        padding-right: 1em !important;
        padding-left: 1em !important;
    }
}

@media (min-width: 993px) {
    .main-navigation ul.menu > li:not(.full-width) a.sub-menu-link, ul.menu ul li.nolink {
        padding: 1em .8em;
    }
}

@media (max-width: 992px) {
    .site-header .custom-logo-link img {
        width: 50% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        height: auto !important;
    }
}

@media (max-width: 992px) {
    .close-drawer {
        color: var(--nav-color) !important;
    }
}

/*  ------------------------------------------
    .gsinfo en .imagehover (classed for container on a.o. homepage)
    ------------------------------------------
*/

.gsinfo .elementor-widget-icon.elementor-view-default .elementor-icon svg{
    fill: #fff !important;
    background-image: url("/wp-content/themes/gotshirts/img/icon_bg_small.png");
    background-repeat: no-repeat;
    background-position: 0 10px;
    padding: 12px;
    position: relative;
    top: -10px;
    height: 65px;
}

.imagehover {
    transition: all 0.3s ease-in-out;
}

.imagehover:hover
{
    transform: scale(1.2);
    opacity: 0.8;
}

.container {
    overflow: hidden;
}

/*  ------------------------------------------
    archive_product page
    ------------------------------------------
*/

@media (min-width: 993px) {
    body.archive .content-area1 {
        width: 100% !important;
    }
}

#content a.button{
    color: var(--nav-inv-color) !important;
}

.shoptimizer-sorting form.woocommerce-ordering{
    width: 20%;
}

.woocommerce-message .message-inner,.woocommerce-message .message-inner .button{
    background-color: var(--secondary-color) !important;
}

/*  ------------------------------------------
    Contact form
    ------------------------------------------
 */

.gform_wrapper {
    background: var(--form-background-color) none repeat scroll 0 0;
    padding: 30px;
    font-size: 14px;
}

/*  ------------------------------------------
    Contact page
    ------------------------------------------
 */

.contact-info {
    font-size: 0.8em; /* Adjust the font size as needed */
}

.elementor-icon svg {
    fill: var(--icon-color) !important;
}

.elementor-icon svg:hover {
    fill: var(--primary-color) !important;
}