/**
* 2007-2023 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author    PrestaShop SA <contact@prestashop.com>
*  @copyright 2007-2023 PrestaShop SA
*  @license   http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*
* Don't forget to prefix your containers with your own identifier
* to avoid any conflicts with others containers.
*/
/* styles.css */
/* styles.css */
.jlcwKConfig-container {
  margin-bottom: 40px;
  padding-top: 10px;
}
@media (max-width:1240px) {
  .jlcwKConfig-container {
    padding-top: 25px;
  }
}

.block-title {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f9f9f9;
  border-bottom: 1px solid #ccc;
  padding: 10px;
}

.block-content {
  display: none;
  padding: 10px;
}

.toggle-icon {
  font-weight: bold;
  font-size: 1.5em;
}

#step-gravure .option-container {
  border: 1px solid #f1f1f1;
  width: 300px;
  margin-bottom: 20px;
  padding: 5px;
}

#step-gravure .option-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

#step-gravure  input[type="checkbox"] {
  margin-right: 10px;
  align-self: flex-start;
}

#step-gravure  .price {
  margin-left: auto;
}

#step-gravure .option-description {
  font-size: 12px;
}

#step-gravure  .option-description p {
  margin: 5px 0;
}

#step-gravure  span.price {
  text-align: right;
}
#step-gravure label {
  text-align: left;
}

.item {
  cursor: pointer;
}

img.img-configurateur {
  position: absolute;
  right: 20px;
}

@media (max-width:1024px) {
  img.img-configurateur {
    right: 0px;
  }
  #configurateur-step {
    padding: 0 10px;
  }
  #description-couteau-personnaliser p,
  #description-couteau-personnaliser ul {
    padding: 0 15px;
  }
}

#matieres-container ul.itemlist  li {
  display: inline-block;
}

#mitres-container ul.itemlist li {
  display: inline-block;
  margin-right: 10px;
}
#ressorts-container ul.itemlist li {
  display: inline-block;
  margin-right: 10px;
}

#tailles-container ul.itemlist li {
  display: inline-block;
  margin-right: 10px;
  border: 1px solid;
  padding: 5px;
  margin-right: 10px;
  border-radius: 10px;
  border-color: #e4dddd;
}


#configurateur-img-dessus {
  height: 300px;
}

div#configurateur-img-face {
  height: 300px;
}
@media (max-width:768px) {
  div#configurateur-img-face {
    height: 190px;
    position: absolute;
    width: 100%;
    top: 0;
    background: var(--color-grey1);
    left: 0;
  }

}

div#configurateur-img-dessus {
  display: none;
}

.step-block:not(#step-manche) li.item.userchoice {
  border: 1px solid #E6740F;
  border-radius: 12px;
} 
.jlcwKConfig-PriceValue {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-main);
}
/*Configurateur de couteaux*/
/*En-tete*/
.jlcwKConfig-header {
  /* position: fixed;
  background: var(--color-light);
  top: 170px;
  width: 100%;
  left: 0;
  border-bottom: 1px solid var(--color-grey3);
  padding: 55px 0 15px 0;
  z-index: 1; */
}
.jlcwKConfig-title {
  flex:1;
}
@media (max-width: 1240px) {
  .jlcwKConfig-header {
    /* top: 105px; */
  }
}
.jlcwKConfig-header .container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.jlcwKConfig-header .container::after {
  display: none;
}
.jlcwKConfig-headPrice {
  font-size: 22px;
  color:var(--color-main);
  font-weight: 700;
}
@media (max-width:1024px) {
  /* .jlcwKConfig-header {
    top: 115px;
  } */
}
@media (max-width:768px) {
  .jlcwKConfig-header {
    position: fixed;
    display: flex;
    bottom: 0;
    background: #000000;
    top: unset;
    width: 100vw;
    left: 0;
    opacity: 1;
    z-index: 10;
    padding: 10px 0;
    min-height: 50px;
  }
  .jlcwKConfig-PriceLabel {
    color: #ffffff;
  }
  .jlcwKConfig-header .add-to-cart {
    background-color: var(--color-main);
    padding: 5px 15px;
    margin-left: 10px;
    font-size: 14px;
  }
  .jlcwKConfig .container {
    column-gap: 10px;
    align-items: center;
    height: 50px;
    padding: 0;
  }
  .jlcwKConfig-header .jlcwKConfig-PriceValue {
    font-size: 18px;
  }
  .jlcwKConfig-header .jlcwKConfig-fakeCde {
    order: 3;
  }
  .jlcwKConfig-header .jlcwKConfig-headPrice {
    order: 2;
    color: #fff;
  }
  .jlcwKConfig-header .jlcwKConfig-PriceValue {
    color: #fff;
  }
  .jlcwKConfig-header .jlcwKConfig-PriceLabel {
    color: #fff;
  }
  .jlcwKConfig-title, .jlcwKConfig-PriceLabel {
    display: none;
  }
  .jlcwKConfig-header .container {
    justify-content: flex-end;
  }
  body.ce-kit-2 .jlcwKConfig-title h2 {
    text-align: left;
  }
  .jlcwKConfig-title{
    width: 100%;
  }
  .jlcwKConfig-title h2{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
 
}
/*Fin en-tete*/


/*Specifique bloc message interruption*/
.jlcwKConfig-container #holiday{
  background: var(--color-light2);
  padding: 0;
}
.jlcwKConfig-container #holiday .col-md-12 {
  min-height: 0;
}
.jlcwKConfig-container #holiday p{
  padding: 10px 18px;
}
div#preview {
  height: auto;
  background-color: var(--color-grey1);
  position: sticky;
  top: 120px;
  min-height: 300px;
}
@media (max-width:768px) {
  div#preview {
    min-height: unset;
  }
}
#previewImage {
  max-width: 100%;
}
@media (max-width:769px) {
  /* .jlcwKConfig-container #holiday{
    padding-top: 52px;
  } */
  div#preview {
    height: 265px;
    position: fixed;
    top: 105px;
    width: 100%;
    z-index: 2;
    overflow: hidden;
  }
  div#configurateur-img-face:before, div#configurateur-img-dessus:before {
    display:none;
  }
  #configurateur-img-dessus {
    position: absolute;
    display: block;
    z-index: 3;
    width: 100%;
    top: 0;
    background: var(--color-grey1);
    left: 0;
    height: 190px;
  }
  /* #configurateur-step {
    padding-top: 80px;
  } */
  .jlcwKConfig-container {
    padding-top: 200px;
  }
}
@media (max-width:495px) {
  .jlcwKConfig-container {
    padding-top: 150px;
  }
  div#preview {
    height: 210px;
  }
  /* #configurateur-step {
    padding-top: 30px;
  } */
}
@media (max-width:400px) {
  /* .jlcwKConfig-container #holiday{
    padding-top: 52px;
  } */
  div#preview {
    height: 25vh;
  }
  /* #configurateur-step {
    padding-top: 19vh;
  } */

}
/*Fin bloc message interruption*/
body.ce-kit-2 .jlcwKConfig-title h2 {
  font-size: 30px;
  font-family: 'HK Grotesk';
}
.jlcwKConfig-title .fa-cog:before {
  content:'';
  display: inline-block;
  background-image: url('img/jlcwkconf-title.png');
  background-repeat: no-repeat;
  height: 32px;
  width: 32px;
}

.jlcwKConfig-container .block-content {
  padding: 0 30px 10px 30px;
  font-weight: 500;
}
@media (max-width:768px) {
  .jlcwKConfig-container .block-content {
    padding: 0 10px 10px 15px;
  }
}

.jlcwKConfig-PriceLabel {
  font-size: 16px;
  color: var(--color-dark);
  font-weight: 600;
}

.jlcwKConf-helpLink {
  margin-bottom: 15px;
  text-decoration:none;
  display: inline-block;
}
.jlcwKConfig-container .block-title {
  background: var(--color-light);
  border-bottom: none;
  padding: 10px 5px 10px 10px;
  position: relative;
}
.jlcwKConfig-container .block-title .h3 {
  font-size: 14px;
  line-height: 1.4em; 
  font-weight: 500;
  margin-bottom: 0;
  text-transform: uppercase;
  padding-right: 29px; /*ajout zone reservee si ligne pas assez longue*/
}
.jlcwKConf-titleIcon {
  position: absolute;
  right: 8px;
  top: 10px;
}
.jlcwKConfig-container .item {
  display: flex;
  flex-direction: column;
  max-width: calc(50% - 10px);
  padding: 5px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
}
#step-modele ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}
#step-modele img {
  background: var(--color-dark);
  border-radius: 5px;
  padding: 5px;
}
.btn-navstep { /*Englobe les boutons et permet de gerer leur alignement*/
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  column-gap: 10px;
}
.jlcwKConfig-container .btn_next {
  background: none;
  border: 1px solid var(--color-dark);
  color: var(--color-dark);
  cursor: pointer;
  display: inline-block;
 /* float :right; */
  margin-bottom:2px;
  border-radius: 20px;
  padding: 5px 15px;
  font-size: 14px;
  font-weight: 600;
  background: #E6740F;
  opacity: 1;
  font-family: "HK Grotesk", sans-serif;
  border-color: transparent;
  color: var(--color-light);
}
.jlcwKConfig-container .btn_next:hover,
.jlcwKConfig-container .btn_prev:hover {
  background-color:#1c1c1c;
}
#matieres-container img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  padding: 2px;
  border: 4px solid var(--color-light);
}
#matieres-container ul.itemlist {
  /* display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap; */
  
  display: grid;
  grid-template-columns: repeat(6,16.5%);
  grid-column-gap: 2px;
  grid-row-gap: 1px;
}
#matieres-container ul.itemlist li {
  
}
#tailles-container ul.itemlist li {
  padding: 15px 45px;
  margin-bottom: 10px;
  min-width: 128px;
  font-weight: 700;
}
#tailles-container ul.itemlist li.userchoice {
  border:1px solid var(--color-main);
}
#matieres-container ul.itemlist li.userchoice img {
  border-color: var(--color-main);
}
#lames-container ul.itemlist li {
  width: 50%;
}
#lames-container ul.itemlist{
  display: flex;
  flex-direction: row;
}
#lames-container ul.itemlist li img {
  max-width: 100%;
}
.jlcwKConfig-container #step-gravure .option-container {
  border: none;
  width: 100%;
}
.jlcwKConfig-container #step-gravure .option-container label{
  font-weight: 700;
  min-width: 100px;
  margin-right: 10px;
}
.jlcwKConf-selectionLabel {
  margin-bottom: 8px;
}

div#configurateur-img-face , div#configurateur-img-dessus  {

}
.step--check .jlcwKConf-titleIcon {
  color:#48B741;
}
div#configurateur-img-face:before , div#configurateur-img-dessus:before {
  content:'';
  background-image:url('img/origin-france-config.png');
  background-size:cover;
  height: 100px;
  width: 100px;
  position: absolute;
  bottom: 0;
  left: 50px;
}

.jlcwKConfig-container .btn_next[disabled]  {
  background-color: var(--color-main);
  color: var(--color-light);
  opacity: 0.5;
  border-color: transparent;

}

.jlcwKConfig-modal .modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

/*Boutons & panier*/
.jlcwConfig-configActions {
  padding: 20px 0 10px 20px;
}
@media (max-width:768px) {
  .jlcwConfig-configActions {
    padding: 10px 10px 10px 15px;
  }
}

.jlcwKConfig-container .add-to-cart .material-icons{
  display: none;
}
.jlcwKConfig-add-to-cart-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.jlcwKConfig-Currency {
  color: var(--color-main);
  font-size: 22px;
  font-weight: 600;
}
.jlcwKConfig-container .partage-knife:active,
.jlcwKConfig-container .partage-knife:hover,
.jlcwKConfig-container .partage-knife:focus {
  background: none !important;
  color: var(--color-main);
  border: none;
}
.jlcwKConfig-container .partage-knife {
  background: none;
  color: black;
  padding: 10px 0 0 0;
}

.jlcwKConfig-container .partage-knife .material-icons {
  margin-right: 0;
}

span#see-view-top,   span#see-view-front {
  display: none;
  padding: 4px 10px;
  border: none;
  margin: 2px;
  border-radius: 15px;
  background: black;
  color: white;
  position: relative;
  top: 13px;
  left: 5px;
  z-index: 10;
}

@media (min-width:768px) {
  span#see-view-top,   span#see-view-front {
    display: none!important;
  }
}

body.ce-kit-2 .jlcwKConfig-header h1 {
  color: #313A3E;
  font-family: "HK Grotesk", sans-serif;
  font-size: 30px;
  font-weight: 500;
  margin-top : inherit;
  line-height: 40px;
}

.cart-products-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 767px) {
  .cart-products-intro {
    padding: 25px 0;
  }
}
.cart-products-intro .cart-products-count{
  font-weight: 400;
  margin-bottom: 5px;
}
.cart-products-intro .cart-products-count2{
  font-weight: 400;
  font-size: 20px;
}
#blockcart-modal .cart-content p.cart-products-count2 {
  color:#E6740F;
}

.progress-bar-container {
  position: relative;
  width: 100%;
  margin: 20px 0;
}

.progress-bar {
  background-color: #e0e0e0;
  height: 5px;
  border-radius: 5px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  width: 0;
  background-color: var(--color-main);;
  transition: width 0.3s ease-in-out;
}

.progress-steps {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: -7px;
  width: 100%;
}

.progress-step {
  width: 20px;
  height: 20px;
  background-color: #e0e0e0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: white;
}

.progress-step.active {
  background-color: var(--color-main);;
}

.progress-step.completed {
  background-color: var(--color-main);;
}

.jlcwKConfig-container .btn_prev {
  background: none;
  border: 1px solid var(--color-dark);
  color: var(--color-dark);
  cursor: pointer;
  display: inline-block;
  /* margin-right: auto; */
  margin-bottom: 2px;
  border-radius: 20px;
  padding: 5px 15px;
  font-size: 14px;
  font-weight: 600;
  background: #575554;
  opacity: 1;
  font-family: "HK Grotesk", sans-serif;
  border-color: transparent;
  color: var(--color-light);
}

.btn.jsConfigFakeCde:not(.btn-primary, .btn-secondary) {
  display: none; /*on masque le bouton par defaut qui sera activé par script uniquement sur mobile*/
  margin-right: 10px;
  padding: 8px 15px ;
}
/*on force le bouton du bandeau a ne jamais s'afficher sur desktop dans le bandeau du haut*/
@media (min-width:769px) {
  .jsConfigFakeCde {
    visibility: hidden;
  }
}