/*
Theme Name:   	Storefront Child Theme
Theme URI:    	https://github.com/stuartduff/storefront-child-theme
Author:       	Stuart Duff
Author URI:     http://stuartduff.com
Template:     	storefront
Description:  	This is a blank child theme for WooThemes StoreFront theme
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
Tags:         	black, white, light, two-columns, left-sidebar, right-sidebar, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, threaded-comments, accessibility-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
Storefront is based on Underscores http://underscores.me/, (C) 2012-2014 Automattic, Inc.
Resetting and rebuilding styles have been helped along thanks to the fine work of
Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
FontAwesome License: SIL Open Font License - http://scripts.sil.org/OFL
Images License: GNU General Public License v2 or later
*/

/*
 * Add your own custom css below this text.
 */

/*
Remove cart from menu
*/
#site-header-cart {
  display: none
}

/*
 * Hiding cart menu item on all screens
**/
.storefront-primary-navigation>.site-header-cart.menu {
  display: none;
}

/*
 * Hide cart button on single product pages
 **/
div.summary.entry-summary form.cart {
  display: none;
}

/*
* Hide the Welcome title from homepage
*/
.entry-header .entry-title {
  display: none;
}

/*
*  make the logo size smaller for smaller screens
*/
@media (min-width: 584px){
  .woocommerce-active .site-header .site-branding img {
    max-width: 15%;
    height: auto;
  }
}
@media (max-width: 584px){
  .woocommerce-active .site-header .site-branding img {
    max-width: 70px;
    height: auto;
  }
}

/*
*  Resize the flippin' logo
*/
@media screen and (min-width: 768px) {
         .woocommerce-active .site-header .site-branding img {
          max-width: 18%; /* Adjust this percentage up or down to make the logo larger or smaller. */
          }
}


/*
 * Re-styling main menu to the right just for desktop screens
 * https://stackoverflow.com/questions/43703729/remove-shopping-cart-menu-and-align-main-menu-to-the-right-on-storefront-theme

@media (min-width: 768px) {
  .storefront-primary-navigation>.main-navigation {
    float: right !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  .main-navigation ul.menu, .main-navigation ul.nav-menu {
    text-align: right !important;
  }
  .storefront-primary-navigation>.main-navigation>.menu>ul>li {
    text-align: right !important;
  }
  .main-navigation ul.menu>li:first-child, .main-navigation ul.nav-menu>li:first-child {
    margin-left: 0;
  }
  .main-navigation ul.menu>li:last-child, .main-navigation ul.nav-menu>li:last-child {
    margin-right: -1em;
  }
}

/*
* Set padding area at very top of page above logo
*/
.site-header {
  padding-top: 5px;
}

/*
* Remove padding around title area on homepage
*/
.page-template-template-homepage .type-page {
  padding-top: 0;
  padding-bottom: 0;
}

/*
 * set padding below header
 */
#masthead.site-header {
padding-bottom: 2px;
}

/*
 *  bump logo over in line with menu
 */
.custom-logo{
 	margin-left: 12px;
  padding-bottom: 5px
 }


 /*
  *  Move breadcrumb over in line with logo
  * and set padding
*/
.storefront-breadcrumb{
	margin-left: 28px;
  padding-bottom: 8px;
}

/* SEARCH BAR resize */
.site-header .site-search { width: 14.5% !important;  /* Use px values if you want, eg. 350px */ }

 /*
  *  Move content box over in line with logo

 div#content.site-content div.col-full div#primary.content-area{
 	margin-left: 55px;
 }

/*
 * film processing page, service list formatting
 */
.filmList {
  border-bottom: dotted 1px #666;
  padding: 0px 5px 0px 5px;
}

.filmList:hover {
  background-color: #CCC;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px
}

.filmList p {
  margin-top: -12px;
  margin-bottom: 0px;
}

.filmPrice {
  color: #4F0000;
  float: right;
  font-size: 16px;
  margin-top: -26px;
  font-weight: bolder;
}

/*
 * repair page, service list formatting
 */

.repairList {
  border-bottom: dotted 1px #666;
  padding: 0px 5px 0px 5px;
}

.repairList:hover {
  color: #4f0000;
  background-color: #CCC;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px
}

.repairList p {
  margin-top: -12px;
}

.repairPrice {
  color: #4F0000;
  float: right;
  font-size: 16px;
  margin-top: -33px;
  font-weight: bolder;
}


/**
   * @snippet       Edit WooCommerce Product Loop Items Display
   * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
   * @sourcecode    https://businessbloomer.com/?p=26658
   * @author        Rodolfo Melogli
   * @compatible    WooCommerce 3.0.4
   * For screens larger than 660px wide
   */

@media (min-width: 660px) {
  .site-main ul.products li.product {
    width: 100%;
    float: none;
    margin: 0;
  }
  .site-main ul.products {
    border-right: 1px solid white;
    border-bottom: 1px solid white;
    margin: 1em 0;
  }
  .site-main ul.products li.product .product_table {
    display: flex;
    flex-wrap: wrap;
  }
  .site-main ul.products li.product div.one_third {
    width: 51%;
    float: left;
    margin: 0;
    text-align: left;
    background-color: #eee;
    border-left: 1px solid white;
    border-top: 1px solid white;
    padding: 0 1em;
    box-sizing: border-box;
    flex-grow: 1;
    overflow: hidden;
  }
  div.product_table div.one_third span.price {
    clear: none;
    float: right;
    margin: 0;
  }

  div.product_table p.stock-sold {
    padding-top: 1.5em;
    padding-right: 1em;
    background-color: #eee;
    color: red;
    clear: none;
    float: right;
    margin: 0;
  }


div.product_table div.one_third h2.woocommerce-loop-product__title{
  clear: right;
  margin-top: 0.3em;
  margin-bottom: 0;
}

div.product_table div.one_third a.woocommerce-LoopProduct-link.woocommerce-loop-product__link img{
    height: 35px;
    width:  35px;
    clear: none;
    float: left;
    padding-top: 0.3em;
    padding-right: 0.3em;
    margin-bottom: 0;
  }

  div.product_table div.one_third a.woocommerce-LoopProduct-link.woocommerce-loop-product__link img.woocommerce-placeholder{
    visibility: hidden;
  }

}


/*
* Screens under 659px the_widget*/
@media (max-width: 659px){
  .site-main ul.products {
    border: 1px solid grey;
  }
  .site-main ul.products li.product div.one_third {
    margin: 1;
    border-top: 1px dotted grey;
    background-color: #eee;
  }

  div.product_table div.one_third h2.woocommerce-loop-product__title{
    margin-bottom: 0;
  }

  div.product_table div.one_third span.price{
    margin-bottom: 0;
  }

  div.woocommerce.columns-1 ul.products.columns-1 li{
    margin-bottom: 0;
  }

  div.product_table div.one_third a.woocommerce-LoopProduct-link.woocommerce-loop-product__link img{
    display: none;
    margin: 0;
  }

  div.product_table div.one_third {
    clear: both;
    text-align: left;
    margin-bottom: 0;
  }

  div.product_table p.stock-sold{
    background-color: #eee;
    color: red;
    text-align: right;
    margin: 0;
  }
}

/*
* All screen sizes
 */
 /*Remove spacing around breadcrumb*/
div#content.site-content div.col-full nav.woocommerce-breadcrumb{
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
/*Remove blank space below site logo*/
div#page.hfeed.site header#masthead.site-header div.col-full div.site-branding{
margin-bottom: 0px;
}
/*Remove blank space below header area */
div#page.hfeed.site header#masthead.site-header{
margin-bottom: 0px;
}
/* search collapse
https://www.wpbeginner.com/wp-themes/how-to-add-a-search-toggle-effect-in-wordpress/ */
.site-header .search-form {
    position: absolute;
    right: 200px;
    top: 200px;
}

.site-header .search-field {
    background-color: #373737;
    border: none;
    cursor: pointer;
    height: 30px;
    margin: 3px 0;
    padding: 0px;
    position: relative;
    -webkit-transition: width 400ms ease, background 400ms ease;
    transition:         width 400ms ease, background 400ms ease;
    width: 0;
}

.site-header .search-field:focus {
    background-color: #fff;
    border: 2px solid #c3c0ab;
    cursor: text;
    outline: 0;
    width: 230px;
}
.search-form
.search-submit {
display:none;
}