/*
 * Theme Name: Storefront Pepi
 * Description: Storefront Pepi Child Theme
 * Author: Rob Steinhilber
 * Template: storefront
 * Version: 1.0.0
 * Text Domain: storefront-pepi
 * */
 
body.custom-background.page-template {
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
}
 
#masthead {
   background-color: transparent;
   border: none;
}

.site-header .site-logo-anchor, .site-header .site-logo-link, .site-header .custom-logo-link {
  width: fit-content;
}

@media ( min-width: 768px ) {

  #content > .col-full {
    display: flex;
  }
}

#primary {
   background-color: #fff;
   padding: 30px 40px;
   order: 2;
}

@media ( max-width: 767px ) {
  
  #primary {
    padding: 20px;
  }
}

#secondary {
  order: 1;
}

.site-footer {
  padding: 1em 0 2em;
}

#block-8 {
  margin-bottom: 0;
}

@media ( min-width: 768px ) {
  
  .footer-widgets {
    margin: 0;
    padding: 2em 0;
  }
  
}

.woocommerce-tabs ul.tabs li.active a, ul.products li.product .price, .onsale, .widget_search form::before, .widget_product_search form::before {
	color:#6d288a;
}

.home #main,
.home #post-10 {
 padding-top: 0;
}

.home #post-10 {
  margin-bottom: 20px;
}

.home #post-10 .col-full {
 padding: 0;
 margin: 0!important;
}

.home #post-10 .col-full .entry-content {
 max-width: none;
}

/* ----------------------------------------------------
	Typo
------------------------------------------------------- */

h1, h2, h3, h4, h5, h6, .wc-block-grid__product-title {
  font-weight: 700;
}

@media ( max-width: 767px ) {
  
  h1 {
    font-size: 2em;
  }  
}

.button {
  line-height: 1.2;
  padding:.6em .9em;
}

/* ----------------------------------------------------
	Navigation
------------------------------------------------------- */

.main-navigation ul li a, .site-title a, ul.menu li a, .site-branding h1 a {
  color: #fff;
}

@media ( max-width: 767px ) {
  
  #site-navigation .menu {
    display: none;
    background-color: #261e18;
  }
  
  #site-navigation.toggled .menu {
    display: block;
    padding: 10px 20px;
  }
  
  #site-navigation ul li a {
    padding: .5em 0;
  }
}

@media (min-width: 768px) {
  
  .site-header {
    padding-top: 60px;
  }
  
  .site-header .site-branding img {
    max-width: 347px;
  }
  
  .site-branding, .site-search, .site-header-cart, .site-logo-anchor, .site-logo-link, .custom-logo-link {
    margin-bottom: 20px;
  }
  
  .storefront-primary-navigation > .col-full {
    padding: 0;
    background-color: #261e18;
  }
  
  .main-navigation ul.menu, .main-navigation ul.nav-menu {
    margin-left: 0;
  }
  
  .main-navigation ul.menu > li > a,
  .main-navigation ul.nav-menu > li > a,
  .site-header-cart .cart-contents {
    padding: 1.118em 1em;
  }
  
  .main-navigation ul li a:hover,
  .main-navigation ul li:hover > a,
  .site-title a:hover,
  .site-header ul.menu li.current-menu-item > a,
  a.cart-contents:hover,
  .site-header-cart .widget_shopping_cart a:hover,
  .site-header-cart:hover > li > a {
    color: #aaa;
  }
  
  .woocommerce-active .site-header .main-navigation {
    margin-right: 0;
  }
  
  .site-header-cart .cart-contents {
    padding-right: 1em;
  }
  
}

/* ----------------------------------------------------
  Shop page
------------------------------------------------------- */

.storefront-breadcrumb {
  margin-bottom: 0;
  padding: 0;
}

.storefront-breadcrumb > .col-full {
  background-color: #eee7df;
  max-width: 64.498938em;
  padding: 10px 1em;
}

#secondary.widget-area {
  background-color: #fff7f1;
  width: 26.08695652%;
  margin-right: 0;
  padding: 20px;
}

.col-full > .woocommerce {
  background-color: #fff7f1;
}

.widget .widget-title, .widget .widgettitle {
  font-weight: 600;
  padding-bottom: 0.5em;
}

.products.columns-4 {
  display: flex;
  flex-wrap: wrap;
}

.products.columns-4 li.product {
  display: flex;
  flex-direction: column;
}

a.woocommerce-loop-product__link {
  flex: 1;
}

@media (max-width: 767px) {
  
  #primary,
  #secondary.widget-area {
    width: 100%;
    margin-bottom: 2em;
  }
}

/* ----------------------------------------------------
  WooCommerce overrides
------------------------------------------------------- */

@media (min-width: 768px) {
  
  .storefront-full-width-content.woocommerce-cart .entry-header, .storefront-full-width-content.woocommerce-checkout .entry-header, .storefront-full-width-content.woocommerce-account .entry-header, .storefront-full-width-content .woocommerce-products-header {
      padding: 0 0 3em;
  }
}