/*-

WOOCOMMERCE for Hatch 
---------------------
Description: WooCommerce extension designed to integrate with the Hatch framework
Version: 1.0.0
Developers: Obox Themes
Developer URI: http://oboxthemes.com

-*/


/*---------------------------*/
/*- HEADER CART -------------*/
.header-cart{
    display: inline-block;
    float: right;
    margin: 0 10px;
    position: relative;
}
.header-cart .icon-cart{
    font-weight: 600;
}
.header-cart .cart-total{
    line-height: normal;
    border-radius: 100px;
}


/*---------------------------*/
/*- PRICE & AMOUNT SETUP ----*/
.price{display: inline-block;}
.amount{color: #93B25E; font-weight: 600;}
.price del{color: #999; margin-right: 5px;}
del .amount{color: #999; font-weight: 400;}

/*---------------------------*/
/*- ON SALE SETUP -----------*/
.onsale{
    padding: 2px 10px;
    background: #454545;
    border-radius: 0 0 4px 4px;
    position: absolute;
    top: 0px;
    left: 20px;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
}

/*---------------------------*/
/*- REMOVE ------------------*/
.remove{display: block; width: 16px; height: 16px; background: #E1574C url(https://www.nicharry.com/wp-content/plugins/hatch-woocommerce/assets/images/cross.png) center no-repeat; background-size: 16px 16px; border-radius: 100%; text-indent: -999px; overflow: hidden;}
.remove:hover{background-color: #B0453D;}

/*---------------------------*/
/*- STAR RATINGS ------------*/
.star-rating{width: 90px; height: 16px; background: url(https://www.nicharry.com/wp-content/plugins/hatch-woocommerce/assets/images/woocommerce/star.png) repeat-x left 0; background-size: 18px 48px;}
.star-rating span{background: url(https://www.nicharry.com/wp-content/plugins/hatch-woocommerce/assets/images/woocommerce/star.png) repeat-x left -32px; height: 0; padding-top: 16px; overflow: hidden; float: left; background-size: 18px 48px;}
.stars{overflow: hidden; margin-bottom: 0;}
.stars span{width: 90px; height: 16px; position: relative; float: left; background: url(https://www.nicharry.com/wp-content/plugins/hatch-woocommerce/assets/images/woocommerce/star.png) repeat-x left 0; background-size: 18px 48px;}
.stars span a{float: left; position: absolute; left: 0; top: 0; width: 16px; height: 0; padding-top: 16px; overflow: hidden;}
.stars span a:hover, p.stars span a:focus{background: url(https://www.nicharry.com/wp-content/plugins/hatch-woocommerce/assets/images/woocommerce/star.png) repeat-x left -16px; background-size: 18px 48px;}
.stars a.active{background: url(https://www.nicharry.com/wp-content/plugins/hatch-woocommerce/assets/images/woocommerce/star.png) repeat-x left -32px; background-size: 18px 48px;}
.stars span a.star-1{width: 18px; z-index: 10; }
.stars span a.star-2{width: 36px; z-index: 9; }
.stars span a.star-3{width: 54px; z-index: 8; }
.stars span a.star-4{width: 72px; z-index: 7; }
.stars span a.star-5{width: 90px; z-index: 6; }

/*---------------------------*/
/*- SHOP PAGE ---------------*/
.woocommerce-result-count-container{padding: 10px; background: #f5f5f5; border-radius: 4px;}
.woocommerce-result-count{float: left; color: #000; font-size: 1.6rem; line-height: 30px;}
.woocommerce-ordering{float: right; font-size: 1.2rem;}
.woocommerce-ordering select{height: 30px; font-size: 1.2rem;}

/*---------------------------*/
/*- PRODUCTS SETUP ----------*/
.products{overflow: hidden;}
.products li{padding: 20px; background: #f5f5f5; border-radius: 4px; overflow: hidden;}
.products li a:first-child{display: block;}
.products .img-wrap{margin: -20px -20px 20px;}
.products .img-wrap img{display: block;}
.products h3{margin: 0px 0px 10px; font-size: 2.0rem; font-weight: 400;}
.products li .star-rating{position: absolute; top: 8px; right: 10px;}
.products .price{display: inline-block; margin: 0 0 20px;}
.products .button.add_to_cart_button{}
.products .added_to_cart{padding: 4px 10px; text-transform: uppercase; font-size: 1.0rem; font-weight: 600;}

/*---------------------------*/
/*- RELATED PRODUCTS --------*/
.related h2{margin-bottom: 15px; font-size: 2.4rem;}
.related.products li.product{float: left; width: 32%; margin-right: 2%; position: relative;}
.related.products li.product:nth-child(3n+3){margin-right: 0;}


/*---------------------------*/
/*- PRODUCT SINGLE ----------*/

    /*-----------------------*/
    /*- PRODUCT IMAGES ------*/
    .product-images{position: relative;}
    .product-images img{display: block; border-radius: 4px;}

        /*-------------------*/
        /*- PRODUCT THUMBS --*/
        .thumbnails a{display: inline-block; width: 23.5%; margin: 10px 2% 0 0;}
        .thumbnails a:nth-child(4n+4){margin-right: 0;}
        .thumbnails a img{display: block;}

    /*-----------------------*/
    /*- PRODUCT DESCRIPTION -*/
    .entry-title{font-size: 4.4rem;}/*-- section-title.large --*/
    div[itemprop="offers"]{margin: 0px 0 20px; font-size: 2.4rem;}
    div[itemprop="description"]{margin-bottom: 20px; font-size: 2.0rem; color: #8F8F8F;}/*-- section-title --*/
    div[itemprop="description"] p{margin-bottom: 16px;}

        /*-------------------*/
        /*- STOCK -----------*/
        .stock{font-size: 1.2rem; text-transform: uppercase; margin-bottom: 20px;}
        .stock.in-stock{color: #93B25E;}

        /*-------------------*/
        /*- PRODUCT CART ----*/
        .cart{margin-bottom: 20px; overflow: hidden;}
        .quantity{float: left; margin-right: 20px;}
        .quantity input{float: left; height: 30px;}
        .quantity .qty{width: 60px; height: 30px; text-align: center; border-left: none; border-right: none; border-radius: 0px;}
        .minus, .plus{width: 40px; background: #454545; border-radius: 4px 0 0 4px; color: #fff; font-weight: 600; text-align: center;}
        .plus{border-radius: 0 4px 4px 0;}
        .single_add_to_cart_button{float: left;}

        /*-------------------*/
        /*- PRODUCT META ----*/
        .product_meta{padding: 10px; margin-bottom: 20px; background: #f5f5f5; border-radius: 4px;}
        .product_meta span{display: block; font-size: 1.1rem; font-weight: 600;}
        .product_meta span span{display: inline; font-weight: normal; text-transform: none;}
        .product_meta span a{font-weight: normal; text-transform: none;}

    /*-----------------------*/
    /*- WOOCOMMERCE TABS ----*/
    .woocommerce-tabs{margin-bottom: 20px; overflow: hidden;}
    .woocommerce-tabs .panel{padding: 20px; background: #f3f3f3; border-radius: 0 4px 4px 4px;}

    .woocommerce-tabs .tabs{padding: 20px 0 0; background: #fff; text-align: center; overflow: hidden; border-radius: 4px 4px 0 0;}
    .woocommerce-tabs .tabs li{float: left; margin-right: 10px;}
    .woocommerce-tabs .tabs a{display: block; padding: 6px 15px; background: #eee; border-radius: 4px 4px 0 0; font-weight: 600; color: #8F8F8F;}
    .woocommerce-tabs .tabs a:hover{color: #454545; background: #F3F3F3;}
    .woocommerce-tabs .tabs .active a{background: #F3F3F3; color: #454545;}


/*---------------------------*/
/*- ENTRY CONTENT -----------*/
.entry-content{font-size: 1.6rem;}

.entry-content p{margin-bottom: 16px;}
.entry-content ul{list-style: disc; margin: 0 0 26px;}
.entry-content ul li{list-style: disc; margin: 0 0 6px 30px;}

.entry-content ol{list-style: decimal; margin: 0 0 26px;}
.entry-content ol li{list-style: decimal; margin: 0 0 6px 20px;}

.entry-content ul ul, .entry-content ul ol, .entry-content ol ol, .entry-content ol ul{margin-bottom: 0;}

.entry-content a{border-bottom: 1px solid #ddd;}
.entry-content a:hover{border-color: #999;}

.entry-content dl{margin: 0 0 26px;}
.entry-content dd{margin-left: 36px;}

.entry-content code, .entry-content pre{}
.entry-content img{display: block; max-width: 98%; height: auto;}

.entry-content h1{font-size: 3.2rem; margin-bottom: 26px; color: #323232;}
.entry-content h2{font-size: 2.2rem; margin-bottom: 16px; color: #323232;}
.entry-content h3{font-size: 1.8rem; margin-bottom: 16px; color: #323232;}
.entry-content h4{font-size: 1.6rem; margin-bottom: 16px; color: #323232;}
.entry-content h5{font-size: 1.4rem; margin-bottom: 16px; color: #323232;}

.entry-content blockquote{padding-left: 26px; margin-bottom: 20px; font-weight: 600; font-size: 2.0rem;}


/*---------------------------*/
/*- SIDEBAR/WIDGET SETUP ----*/
.sidebar .amount{font-size: 1.2rem;}

/*---------------------------*/
/*- PRODUCT LIST ------------*/
.product_list_widget li{overflow: hidden; position: relative;}
.product_list_widget img{float: right; max-width: 40px; border-radius: 4px;}
.product_list_widget a{display: block;}

/*---------------------------*/
/*- SHOPPING CART -----------*/
table.shop_table{margin-bottom: 20px;}
table .product-remove{width: 16px;}
table .product-thumbnail{width: 65px;}
table .product-thumbnail img{max-width: 65px; border-radius: 4px;}
table .product-price{text-align: right;}
table .product-quantity{text-align: center;}
table .product-subtotal{text-align: right;}
table .actions{text-align: right;}

    table .product-quantity .quantity{display: inline-block; float: none; margin: 0;}

    /*-----------------------*/
    /*- COUPON --------------*/
    .coupon{float: left; width: 50%; font-size: 0; text-align: left;}
    .coupon label{display: none;}
    .coupon input[type=text]{max-width: 150px; border-right-width: 0; border-radius: 4px 0 0 4px;}
    .coupon .button{border-radius: 0 4px 4px 0;}

/*---------------------------*/
/*- CART COLLATERALS --------*/
.cart-collaterals{float: right; width: 49%;}

.cart_totals h2,
.shipping_calculator h2{margin-bottom: 15px; font-size: 2.4rem;}

/*---------------------------*/
/*- CHECKOUT PAGE -----------*/

    /*-----------------------*/
    /*- LOGIN FORM ----------*/
    .woocommerce .login{max-width: 490px; padding: 20px; margin-bottom: 20px; background: #f5f5f5; border-radius: 4px;}
    .woocommerce .login p:first-child{margin-bottom: 26px; max-width: 740px; font-size: 1.6rem;}
    .woocommerce .login .inline{display: inline; font-weight: normal;}
    .woocommerce .login .lost_password a{font-size: 1.2rem; border-bottom: 1px solid #ddd;}

    /*-----------------------*/
    /*- COUPON FORM ---------*/
    .checkout_coupon{max-width: 490px; padding: 20px; margin-bottom: 20px; background: #f5f5f5; border-radius: 4px;}
    .checkout_coupon p{display: inline-block; margin: 0 10px 0 0;}

    /*-----------------------*/
    /*- CREATE ACCOUNT ------*/
    .create-account{max-width: 490px; padding: 10px; margin-bottom: 20px; background: #f5f5f5; border-radius: 4px;}
    div.create-account{padding: 20px;}
    .create-account input[type="checkbox"]{display: inline; margin: 0 5px 0 0; vertical-align: middle;}
    .create-account label{display: inline;}
    .create-account p:first-child{margin-bottom: 26px; max-width: 740px; font-size: 1.6rem;}
    .create-account .form-row{margin-bottom: 0;}

    /*-----------------------*/
    /*- BILLING FORM --------*/
    .woocommerce-billing-fields h3{margin-bottom: 15px; font-size: 2.4rem;}

    .woocommerce-shipping-fields h3{margin-bottom: 15px;}
    .woocommerce-shipping-fields h3 label{display: inline-block; vertical-align: middle; font-size: 2.4rem; font-weight: 200;}
    .woocommerce-shipping-fields h3 input{display: inline;}

    .woocommerce .required{color: #c00; border: none;}

/*---------------------------*/
/*- WOO-COLUMNS -------------*/
.col2-set{overflow: hidden; margin-bottom: 40px;}
.col-1{float: left; width: 49%; margin-right: 2%;}
.col-2{float: left; width: 49%;}


/*---------------------------*/
/*- ORDER REVIEW ------------*/
#order_review{overflow: hidden;}
#order_review_heading{margin-bottom: 15px; font-size: 2.4rem;}
#order_review .shop_table{float: left; width: 49%; margin-right: 2%}

#order_review #payment{float: left; width: 49%; background: #f5f5f5; border-radius: 4px;}
#order_review .payment_methods li{padding: 10px; border-bottom: 1px solid #eee;}
#order_review .payment_methods input[type="radio"]{display: inline; margin: 0 5px 0 0; vertical-align: middle;}
#order_review .payment_methods label{display: inline;}
#order_review .payment_methods label img{display: none;}
#order_review .payment_box{display: block; clear: both; margin: 10px 0 0; padding: 10px; background: #fff; border-radius: 4px;}

#order_review .form-row{margin: 0; padding: 10px;}
#order_review .button{width: 100%;}

    /*-----------------------*/
    /*- ORDER TERMS FORM ----*/
    #order_review .form-row.terms{margin: 5px 0 0; padding: 0; text-align: center;}
    #order_review .form-row.terms input[type="checkbox"]{display: inline; margin: 0 5px 0 0; vertical-align: middle;}
    #order_review .form-row.terms label{display: inline; vertical-align: middle; font-size: 1.2rem; font-weight: normal;}

/*---------------------------*/
/*- INFORMATION PAGES -------*/
.col2-set .title{padding: 0; margin-bottom: 26px;}
.col2-set .title h3{display: inline; margin-bottom: 10px;}
.col2-set .title .edit{display: inline; margin-left: 15px; font-size: 1.2rem;}

.woocommerce .order_details{border: 2px solid #eee; margin: 0 0 26px 0; padding: 0; list-style: none;}
.woocommerce .order_details li{padding: 10px; border-bottom: 1px solid #eee; list-style: none;}
.woocommerce .order_details li:last-child{border-bottom: none;}
.woocommerce .order_details:empty{display: none;}

/*---------------------------*/
/*- WOOMESSAGES -------------*/
.woocommerce-message{padding: 10px; background: #F5F5F5; overflow: hidden; margin-bottom: 20px; border-radius: 6px; font-size: 1.6rem;}
.woocommerce-message a{margin-right: 10px; vertical-align: baseline;}

.woocommerce-info{padding: 10px; background: #F5F5F5; overflow: hidden; margin-bottom: 20px; border-radius: 6px;}


/*-------------------------------*/
/*- CART WIDGET -----------------*/
/*-------------------------------*/
.cart_list li{
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}
section[class*=' off-canvas-'] .cart_list li{
    border-bottom-color: #777;
}
.cart_list .quantity{
    font-size: 1.2rem;
}
.widget_shopping_cart .total{
    margin: 10px 0;
}
.widget_shopping_cart .total .amount{
    float: right;
}


/*-------------------------------*/
/*- WOOCOMMERCE - SUPER SINGLE --*/
/*-------------------------------*/
.special.product-images{padding: 500px 0 0; overflow: hidden;}
.special.product-images .woocommerce-main-image{position: absolute; width: 100%; bottom: 0;}
.special.product-images .thumbnails-container{}
.special.product-images .thumbnails{overflow: hidden; margin-left: 510px; margin-bottom: 20px; position: relative; z-index: 2;}
.special.product-images .thumbnails a{display: block; float: left; max-width: 120px; margin-right: 20px; border-radius: 4px;}
.special.product-images .thumbnails img{display: block; border-radius: 4px; border: 4px solid #fff;}



/*-------------------------------*/
/*- RESPONSIVE ------------------*/
/*-------------------------------*/

@media only screen and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px) {

    /*---------------------------*/
    /*- HEADER CART -------------*/
    .header-cart{
        display: none;
    }

    /*---------------------------*/
    /*- PRODUCT LISTS -----------*/
    .related.products li.product{
        clear: both;
        width: auto;
        max-width: 100%;
        margin: 0 0 20px;
    }

    /*---------------------------*/
    /*- SHOPPING CART -----------*/
    table .product-remove{
        width: 16px;
    }
    
    table .product-price,
    table .product-subtotal{
        text-align: center;
    }
    
    table .product-thumbnail,
    table .product-quantity{
        display: none;
    }
    table .actions{
        text-align: left;
    }
    table .actions input,
    table .actions button{
    }
    table .actions .button{
        width: 100%;
        height: 30px;
        padding: 0 8px;
        margin-top: 5px;
        border-radius: 4px;
    }

        /*-----------------------*/
        /*- COUPON --------------*/
        .coupon{
            float: none;
            width: auto;
            margin-bottom: 15px;
        }
        .actions .coupon input[type="text"]{
            width: 100%;
            max-width: none;
            border-radius: 4px 4px 0 0;
            border-bottom-width: 0;
            border-right-width: 2px;
        }
        .actions .coupon .button{
            margin-top: 0;
            border-radius: 0 0 4px 4px;
        }

    /*---------------------------*/
    /*- CART COLLATERALS --------*/
    .cart-collaterals{
        float: none;
        width: auto;
    }
    .cart_totals th,
    .cart_totals td{
        display: block;
        width: 100%;
    }

    /*---------------------------*/
    /*- WOO-COLUMNS -------------*/
    .col2-set{
        margin-bottom: 20px;
    }
    .col-1,
    .col-2{
        float: none;
        width: auto;
        margin: 0;
    }


    /*---------------------------*/
    /*- ORDER REVIEW ------------*/
    #order_review .shop_table{
        float: none;
        width: auto;
        margin: 0 0 20px;
    }
    #order_review #payment{
        float: none;
        width: auto;
    }
    
}