/*
Theme Name:   	La petite ébénisterie
Author:       	Antoine Wislet
Author URI:     lapetiteebenisterie.be
Template:     	storefront
Description:  	This is a custom StoreFront child theme for La petite ébénisterie
Version:      	1.0.0
Text Domain:  	lpeshop
Requires at least: 6.0.1
Tested up to: 6.0.1
Requires PHP: 8.0

WC requires at least: 8.1.1
WC tested up to: 8.1.1
*/

@font-face {
    font-family: logoFont;
    src: url(./assets/fonts/GloriaHallelujah-Regular.ttf);
}

.use-logo-font {
    font-family: logoFont;
}

.hide-on-mobile,
.hide-on-mobile.is-flex-constrained {
  display: none !important;
}

@media (min-width: 768px) {
  .hide-on-tablet,
  .hide-on-tablet.is-flex-constrained {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .d-on-tablet:not(.is-flex-constrained) {
    display: block !important;
  }

  .d-on-tablet.is-flex-constrained {
    display: flex !important;
  }
}

@media (min-width: 1200px) {
  .hide-on-desktop,
  .hide-on-desktop.is-flex-constrained {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  .d-on-desktop.is-flex-constrained {
    display: flex !important;
  }

  .d-on-desktop:not(.is-flex-constrained) {
    display: block !important;
  }
}

/*
 * HEADER STYLE
 */
.lpe-header-container {
  display: flex;
  flex-direction: row;
  color: black;
}

.lpe-header-container.light {
  color: white;
}

.lpe-brand {
  padding: 1.2em 1em;
}

/* 
 * Desktop menu management 
 */
#lpe-desktop-menu .lpe-nav {
  flex-basis: 34%;
}

#lpe-desktop-menu .lpe-brand {
  flex-basis: 33%;
}

#lpe-desktop-menu .lpe-cart {
  flex-basis: 33%;
}

/* 
 * Tablet menu management 
 */
#lpe-tablet-menu .lpe-nav {
  flex-basis: 52%;
}

#lpe-tablet-menu .lpe-brand {
  flex-basis: 28%;
}

#lpe-tablet-menu .lpe-cart {
  flex-basis: 20%;
}

#lpe-tablet-menu .site-header-cart.menu.lpe-header li {
  margin: 0 0.5em;
}

#lpe-tablet-menu .lpe-nav nav {
  display: flex;
  width: 100%;
  flex-direction: row;
  place-content: flex-end;
}

/* 
 * Mobile menu management 
 */
#lpe-mobile-menu .lpe-brand {
  flex-basis: 30%;
}

#lpe-mobile-menu .lpe-rest {
  flex-basis: 70%;
  place-content: flex-end;
  align-items: center;
}

#lpe-mobile-menu .site-header-cart.menu.lpe-header li {
  margin: 0 0.5em;
}

.lpe-menu-toggle {
  padding: 0 0.5em;
  background-color: transparent;
  color: black;
  font-size: 1.3em;
}

.lpe-handheld-navigation {
  background-color: white;
  color: black;
  width: 45vw;
  display: block;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10;
}

body:has(#wpadminbar) .lpe-handheld-navigation {
  top: 45px;
}

.lpe-handheld-navigation .handheld-navigation ul.menu>li>a  {
  color: black;
  padding-left: 2em;
}

.lpe-handheld-navigation {
  overflow: hidden;
  max-width: 0;
  width: 0;
  transition: all,ease,.8s;
}

.main-navigation.toggled .lpe-handheld-navigation {
  max-width: 9999px;
  width: 45vw;
}





.lpe-rest .lpe-nav {
  flex-basis: 60% !important;
}

.lpe-header-container.d-on-tablet nav {
  text-align: right;
}



.lpe-rest {
  display: flex;
  flex-direction: row;
}

.lpe-rest .lpe-cart {
  flex-basis: 40% !important;
}

.site-header-cart.menu.lpe-header {
  padding: 1.6em 1em;
  width: auto !important;
}

.site-header-cart.menu.lpe-header li {
  display: inline-block;
  margin: 0 1em;
}

/* .site-header-cart.menu.lpe-header a {
  color: white;
} */

.lpe-header.title {
  text-align: center;
  font-size: 1.2em;
  font-family: logoFont;
}

.lpe-header.title a {
  color: black;
}

.lpe-main-banner {
	margin-top: -160px;
}

body:has(.lpe-accueil) #masthead {
  background-color: #00000061;
  border: none;
}

.storefront-primary-navigation {
  border-bottom: 1px solid #707070;
}

body:has(.lpe-accueil) .storefront-primary-navigation {
  border-bottom: none !important;
}

body:has(.lpe-accueil) .lpe-header-container,
.lpe-header-container.light {
  color: white;
}

body:has(.lpe-accueil) .cart-content.lpe-header,
body:has(.lpe-accueil) .site-header-cart.menu.lpe-header>li>a {
  color: inherit;
}

body:has(.lpe-accueil) .lpe-header-container .main-navigation ul.menu>li>a, 
body:has(.lpe-accueil) .lpe-header-container .main-navigation ul.nav-menu>li>a,
body:has(.lpe-accueil) .lpe-header-container .main-navigation .lpe-menu-toggle,
body:has(.lpe-accueil) .lpe-header-container .lpe-header.title a   {
  color: white;
}

/* Let mobile menu link in black color */
body:has(.lpe-accueil) .lpe-header-container .main-navigation .handheld-navigation ul.menu>li>a {
  color: black;
}

/* Hide search bar on top header */
.site-search {
  display: none;
}

/* Remove top space on top header */
#masthead {
  padding-top: 0;
  margin-bottom: 2em;
}


/* Remove breadcrumb - We are not use it */
.storefront-breadcrumb {
    display: none !important;
}

/* Add margin on title page that have no title*/
.content-area.no-title {
  margin-top: 3em;
  margin-bottom: 3em;
}

/* Remove Unused margin below page */
.content-area,
.site-main,
.page {
    margin-bottom: 0 !important;
}

body:has(.lpe-accueil) .lpe-header-container .main-navigation ul.menu>li>a, 
body:has(.lpe-accueil) .lpe-header-container .main-navigation ul.nav-menu>li>a,
body:has(.lpe-accueil) .lpe-header-container .main-navigation .lpe-menu-toggle,
body:has(.lpe-accueil) .lpe-header-container .lpe-header.title a   {
  color: white;
}

/* Display the current active menu item */
.current-menu-item,
.current_page_parent,
.main-navigation ul.menu>li:hover,
.main-navigation ul.nav-menu>li:hover  {
    text-decoration: underline;
    text-underline-offset: 10px;
}

/*
 *
 * FOOTER STYLE
 *
 */
.lpe-footer-container ul>li>a {
  text-decoration: none;
}

.lpe-footer-container ul>li>a:hover  {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.lpe-footer-container { 
  margin-top: 1em; 
}

.lpe-footer-container ul { 
  list-style: none; 
  margin-left: 1em;
}

.lpe-footer-container ul>li:not(:last-child) { 
  margin-bottom: 3px;  
}

.lpe-footer-header {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .lpe-footer-container ul>li:not(:last-child) { 
    margin-bottom: 15px;  
  }
}

@media (min-width: 1200px) {
  .lpe-footer-container ul>li:not(:last-child) { 
    margin-bottom: 3px;  
  }
}


/*
 *
 * GLOABL STYLE
 *
 */
.no-margin {
  margin: 0 !important;
}

.no-margin-bottom {
  margin-bottom: 0 !important;
}

.margin-auto {
  margin: auto;
}

.font-light,
.font-light h1,
.font-light h2,
.font-light h3,
.font-light h4,
.font-light h5,
.font-light h6 {
  color: #DDDED6;
}

.icon-border i,
i.icon-border  {
  border: 1px solid;
}

.icon-mb-07 i {
  margin-bottom: 0.7em;
} 

.lpe-icon-top {
  align-self: flex-start;
}
.lpe-icon-top i {
  margin-top: 0.3em;
}

.no-margin-bottom {
  margin-bottom: 0 !important;
}

.margin-tb-1 {
  margin-top: 1em;
  margin-bottom: 1em;
}

.margin-tb-2 {
  margin-top: 2em !important;
  margin-bottom: 2em !important;
}

.margin-top-1 {
  margin-top: 1em !important;
}

.margin-top-2 {
  margin-top: 2em !important;
}

.gap-2 {
  gap: 2em !important;
}

.gap-5 {
  gap: 5em !important;
}

.justify-center {
  justify-content: center !important;
}

.width-full {
  width: 100% !important;
}



/*
 *
 * Word In Progress Page Style
 * 
 */
.wip-page {
    position: absolute;
  height: 100vh !important;
  width: 100vw !important;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
      bottom: 0;
  z-index: 1000;
}

.wip-page-content {
       height: 100vh;
}

.wip-card {
      margin: auto!important;
      width: 400px;
    max-width: 450px;
  min-width: 250px;
  padding: 15px;
  box-shadow: 3px 3px 11px 2px rgba(0,0,0,0.3);
  border-radius: 2em;
}

body:has(.wip-page) {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/*
 *
 * OVERRIDE STOREFRONT THEME STYLE
 *
 */
 body {
  font-family: "Segoe UI","Source Sans Pro","HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
 }

.site-footer {
  padding: 1.618em 0 5em;
  padding-left: max(1.25rem, 5vw);
  padding-right: max(1.25rem, 5vw);
  background-color: #DDDED6;
}

@media (min-width: 768px) {
  .site-footer {
    padding: 1.618em 0 0em;
    padding-left: max(1.25rem, 5vw);
    padding-right: max(1.25rem, 5vw);
  }

  .site-footer .col-full {
    max-width: 90em;
  }
}

/* Override Mobile menu icon */
.storefront-handheld-footer-bar ul li.my-account>a::before {
  content: "";
}
.storefront-handheld-footer-bar ul li.cart>a::before {
  content: "";
}
.storefront-handheld-footer-bar ul li>a {
  background: #DDDED6;
}

/* Hide shop sorting */
.storefront-sorting {
  display: none !important;
}
/* Hide variations on Prenom Product */
.lpeshop-prenom-variations {
  display: none;
}
/* Display title on variations Price on Prenom Product */
.lpeshop-prenom-variation-price::before,
.lpeshop-prenom-single-variation .woocommerce-variation-price::before {
  content: 'Prix du prénom';
}

#lpeshop-firstname-error {
  font-size: 0.8em;
  margin: 0;
  margin-top: -15px;
  margin-bottom: 15px;
  margin: -1.4em 0 1.41575em;
  color: #c90000;
}
.woocommerce-invalid #lpeshop_prenom:focus {
  outline-color: #e2401c !important;
}

.lpeshop-field-container {
  margin: 0 0 2em;
}

.lpe-pez-container {
  margin-top: 2em;
  margin-left: 0em;
}

.lpe-prez-item-description {
  align-self: flex-start;
  padding-left: 1em;
  margin-right: 1em;
}

.lpe-rounded-explain-picture figure {
  min-height: 850px !important;
  border-radius: 290px;
}

.lpe-rounded-explain-picture .wp-block-media-text__content{
  margin-left: 4em;
}

@media (max-width: 600px) {
  .lpe-mobile-padding {
    padding: 0 !important;
  }

  .lpe-rounded-explain-picture figure {
    min-height: 350px !important;
    border-radius: 290px;
  }

  .lpe-rounded-explain-picture .wp-block-media-text__content{
    margin-left: 0em;
  }
}

.lpe-max-width-250 {
  max-width: 250px;
}


.lpe-search-wrapper {
  transition: all,ease,.8s;
  height: 0px;
  overflow: hidden;

  position: absolute;
  margin-top: 4em;
  display: flex;
  left: 50%;
  transform: translate(-50%, -50%);

  z-index: 1;
}
.lpe-search-wrapper.open {
  height: 50px;
}

.onsale {
  color: #a70606 !important;
  border-color: #a70606 !important;
}


/*
 *
 * OVERRIDE WP BLOCK STYLES
 *
 */
.wp-block-separator {
  border-bottom: 1px solid;
  margin-top: 0;
  margin-bottom: 0;
  border: none;
}

.wp-block-separator.alignwide.lpe-separator {
  width: 100% !important;
  margin: 1.41575em auto 1.41575em !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

h4.lpe-subtitle {
  font-size: 1.2em !important;
  font-weight: 400 !important;
}



/*
 *
 * LPE Styles
 *
 */
 .lpe-text-line-through {
  text-decoration: line-through;
 }
 .lpe-text-line-through.red {
  text-decoration-color: #a70606;
 }

 .lpe-promo-price {
  font-weight: 700;
 }