
.maboutique { width:90%; margin-left:5%; text-align:center; }
.listProduct .item img { width: 90%; filter: drop-shadow(0 50px 20px #0009); }
.listProduct { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.listProduct .item { background-color: #aaf1aa; padding: 20px; border-radius: 20px; overflow:hidden; text-align:center; }
.listProduct .item h2 { font-size:0.7em; font-weight: 500; }
.listProduct .item .price { letter-spacing: 7px; font-size: small;  text-align:center; }
.listProduct .item button { background-color: #353432; color: #eee; padding: 5px 10px; border-radius: 20px; margin-top: 10px; border: none; cursor: url('../images/souris_chanvre.png') 10 10, pointer; }
.promotion { left:-10%; background-color:green; color:honeydew; font-size:0.7em; z-index:1; box-sizing:border-box; padding:5px; text-align:center;
             width:120%; height:60px; position:relative; transform: rotate(-5deg); filter: drop-shadow(5px 0px 10px honeydew); }
.correctPromo { margin-top:-70px; }
.correctPageCart { z-index:1; }
.cartTab { width: 400px; background-color: darkslategray; color: #eee; position: fixed; top: 0; right: 0; bottom: 0; inset: 0 -400px 0 auto; display: grid;
          grid-template-rows: 70px 1fr 40px 70px; transition: transform .5s; z-index:11; }
body.showCart .cartTab { inset: 0 0 0 auto; }
body.showCart .container { transform: translateX(-200px); }
/* body.showCart header { transform: translateX(-200px); } */

.cartTab h1 { padding: 20px; margin: 0; font-family: "typewriter"; font-weight: 300; }
.cartTab .totalCart { padding-right: 30px; font-family: "typewriter"; text-align:right; color: honeydew; }
.cartTab .btn { display: grid; grid-template-columns: repeat(2, 1fr); min-height:60px; }
.cartTab .btn button { background-color: forestgreen; border: none; font-family: "typewriter"; font-size: 1em; font-weight: 500; cursor: pointer; }
.cartTab .btn .close { background-color: honeydew; }
.cartTab .listCart .item img { width: 100%; }
.cartTab .listCart .item { display: grid; grid-template-columns: 70px 145px 60px 1fr; gap: 8px; text-align: center; align-items: center;
                          font-family: Arial; font-size: 0.9em; }
.listCart .quantity span { display: inline-block; box-sizing:border-box; padding-top:4px; width: 25px; height: 25px; background-color: honeydew;
                          color: #555; border-radius: 50%; cursor: pointer; }
.listCart .quantity span:nth-child(2) { background-color: transparent; color: honeydew; }
.listCart .item:nth-child(even) { background-color: #eee1; }
.listCart { overflow: auto; }
.listCart::-webkit-scrollbar { width: 0; }

.totalrecap { display: grid; grid-template-columns: 70% 1fr; gap:40px; position:relative; z-index:1; }
.finalcart { width: 100%; color: #eee; z-index:11;  }
.finalcart .item img { width: 100%; }
.finalcart .item { display: grid; grid-template-columns: 70px 60% 100px 1fr; gap: 8px; text-align: center; align-items: center;
                          font-family: Arial; font-size: 0.7em; }
.finalcart .quantity span { display: inline-block; box-sizing:border-box; width: 25px; height: 25px; background-color: darkgreen;
                          color: honeydew; border-radius: 50%; cursor: pointer; }
.finalcart .quantity span:nth-child(2) { background-color: transparent; color: darkgreen; }
.finalcart .item:nth-child(even) { border-top: 2px dashed #aaf1aa; border-bottom: 2px dashed #aaf1aa; }
.finalcart { overflow: auto; }
.finalcart::-webkit-scrollbar { width: 0; }

.recap { background-color:#aaf1aa; border-radius:30px; padding:20px; box-sizing:border-box; font-size:0.8em; }
.recap h2 { font-size: 1.4em; font-weight: 500; text-align:left; }
.listrecap { color:#333; display: grid; grid-template-columns: 1fr 1fr; }
.listrecap span:nth-child(even) { text-align:right; }
.listrecap span { margin-bottom:3px; }
.listrecap span:nth-child(7), .listrecap span:nth-child(8) { margin-top:7px; font-size:1.1em; font-weight: bold; color:darkgreen; }
.listrecap span:nth-child(9), .listrecap span:nth-child(10) { font-size:0.7em; }

.checkout { text-align:center; margin-top:20px; }
.checkout button { background-color: #353432; color: #eee; padding: 10px 20px; border-radius: 20px; border: none; cursor: url('../images/souris_chanvre.png') 10 10, pointer; }
.categories { text-align:center; }
.categories a { background-color: #353432; color: #eee; padding: 10px 20px; border-radius: 20px; border: none; font-size:0.7em;
                text-decoration:none; cursor: url('../images/souris_chanvre.png') 10 10, pointer; }

.valideCart { visibility:hidden; }
.recapitulatif { font-size: 1em; padding-left:0; display:none; }
.adresexp { display:none; }
.showCategories { display:block; }



@media screen and (max-width: 992px) {
  .listProduct {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .listProduct {
    grid-template-columns: repeat(2, 1fr);
  }
  .cartTab { width: 100%; inset: 0 -100% 0 auto; }
  .cartTab .listCart .item { grid-template-columns: 50px 145px 60px 1fr; }
  .listProduct .item h2 { font-size:0.5em; }
  .showCategories { display:none; }
}
