@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geostar+Fill&family=Roboto+Mono:ital,wght@1,600&display=swap');


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    background-color: #f2f2f2;
  }

  /*-----PAGE ACCUEIL-----*/
#accueil {
    top: 0%;
    position: absolute;
    width: 100%;
    height: 76.9%;
    cursor: default;
}

  /*-----PAGE ACCUEIL HAUT-----*/
#accueil #head {
  position: absolute;
  width: 100%;
  height: 220px;
  box-shadow: -1px 1px 5px 1px #31313138;
  -webkit-box-shadow: -1px 1px 5px 1px #25252538;
  -moz-box-shadow: -1px 1px 5px 1px #2b2b2b38;
  z-index: 10;
  }

  /*-----PAGE ACCUEIL-----*/ 
    
#accueil h1 {
    font-family: sans-serif; 
    margin-right: auto;
    margin-top: auto;
    font-size: 80px;
    text-align: right;
    text-shadow: 2px 2px 5px #000000;
}

#accueil .logo {
	position: relative;
	display: block;
  margin-left: auto;
  margin-right: auto;
  width: 15%;
  height: 80%;
  z-index: 1;
}

#accueil .background {
	position: absolute;
	display: block;
  margin-top: 45px;
  width: 1903px;
  z-index: 1;
  opacity: 1;
}

  #accueil .material-symbols-outlined {
	position: relative;
	display: block;
  top: -37px;
  left: 85%;
  width: 25px;
  height: 25px;
  z-index: 11;
  opacity: 1;
}

  #accueil .password {
	position: relative;
  top: 276px;
  left: 55%;
  width: 22px;
  height: 19px;
  z-index: 1;
  opacity: 0.2;
}

#accueil #menu {
	position: absolute;
  	background-color: #f2f2f2;
    height: 5%;
    z-index: 11;
    right: 44%;
    top: 22%;
    transition: 1s;
    cursor: pointer;
    border-radius: 10px;
	  margin-left: 10%;
	  margin-right: -3%;
}

  /*-----INTERFACE HAUT GAUCHE (CONNEXION & PANIER)-----*/

#hautgauche {
  display: flex;
  width: 100px;
  position: absolute;
  top: 80px;
  left: 300px;
  padding: 0px;
  }

#hautgauche a {
  font-family: 'Hanken Grotesk', sans-serif; 
	line-height: 45px;
	padding: 0 30px;
	text-decoration: none;
  font-weight: bold;
	color: #222222;
	font-size: 16px;
  transition: 0.5s;
  z-index: 11;
  }

#hautgauche a:hover{
color: #5667c5;
}


#hautgauche #connexion {
  top: 10px;
  left: -135px;
  z-index: 1;
  }

#hautgauche #panier {
  top: 10px;
  left: -100px;
  z-index: 1;
  }

  /*-----BARRE DE NAVIGATION-----*/

#menu ul, #menu li {
	margin: 0 auto;
	padding: 0;
	list-style: none
}
#menu ul {
	width: 100%;
}
#menu li {
	float: left;
	display: inline;
	position: relative;
}
#menu a {
	font-family: 'Hanken Grotesk', sans-serif; 
	display: block;
	line-height: 45px;
	padding: 0 14px;
	text-decoration: none;
	color: #222222;
	font-size: 16px;
}
#menu a.dropdown-arrow:after {
	content: "\25BE";
	margin-left: 5px;
}
#menu li a:hover {
	color: #7e98ff;
}
#menu input {
	display: none;
	margin: 0;
	padding: 0;
	height: 45px;
	width: 50;
	opacity: 0;
	cursor: pointer;
}
#menu label {
	display: none;
	line-height: 45px;
	text-align: center;
	position: absolute;
	left: 35px;
}
#menu label:before {
	font-size: 1.6em;
	content: "\2261"; 
	margin-left: 20px;
}
#menu ul.sub-menus{
	height: auto;
	overflow: hidden;
	width: 170px;
	background: #afb1fb;
	position: absolute;
	z-index: 99;
	display: none;
}
#menu ul.sub-menus li {
	display: block;
	width: 100%;
}
#menu ul.sub-menus a {
	color: #111111;
	font-size: 16px;
}
#menu li:hover ul.sub-menus {
	display: block
}
#menu ul.sub-menus a:hover{
	background: #7e98ff;
	color: #444444;
}

  /*----- BARRE DE RECHERCHE -----*/

.search {
  width: 50%;
  position: relative;
  display: flex;
  right: -82%;
  margin-top: -41px;
  box-shadow: -1px 1px 5px 1px #bbbbbb38;
}

#recherche {
  margin-top: 45px;
  margin-left: -23px;
  opacity: 0.6;
  }
.searchTerm {
  background-color: #ffff;
  width: 100%;
  border: 3px solid #ddd;
  border-right: none;
  padding: 10px;
  height: 40px;
  border-radius: 0px 0 0 5px;
  outline: none;
  color: #929292;
}

.searchTerm:focus{
  font-family: 'Hanken Grotesk', sans-serif;
  color: #000000;
}

.searchButton {
  width: 40px;
  height: 40px;
  margin-top: 0px;
  border: 1px solid #93A8FC;
  background: #93A8FC;
  text-align: center;
  color: #fff;
  border-radius: 0 0px 5px 0;
  cursor: pointer;
  font-size: 20px;
}

.wrap{
  width: 30%;
  position: absolute;
  top: 19%;
  left: 60%;
  transform: translate(-50%, -50%);
  z-index: 11;
}

#compte h4 {
  position: absolute; 
  font-family: 'Hanken Grotesk', sans-serif;
  top: 45%;
  left: 42%; 
  font-size: 20px;
  text-align: right;
  z-index: 1;
}

#comptea {
  display: flex;
  width: 100px;
  position: absolute;
  top: 80px;
  left: 300px;
  padding: 0px;
  }

#comptea a {
  font-family: 'Hanken Grotesk', sans-serif; 
	line-height: 45px;
	padding: 0 30px;
	text-decoration: none;
  font-weight: bold;
	color: #222222;
	font-size: 16px;
  transition: 0.5s;
  z-index: 11;
  }


  /*-----CONNEXION-----*/


    
#formulaire h3 {
    background-color: #eeeeee;
    position: absolute; 
    font-family: 'Hanken Grotesk', sans-serif;
    top: 2%;
    left: 35%; 
    font-size: 20px;
    text-align: right;
    z-index: 1;
}

.login-form{
  width:400px;
  padding:40px 30px;
  background:#eeeeee;
  @include border-radius(4px);
  margin:auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 41%;
  @include translateY(-50%);
}
.form-group{
  position: relative;
  margin-bottom:15px;
}

.form-group .material-symbols-outlined{
  position: absolute;
  margin-left: 50px;
}

.form-control{
  width:100%;
  height:50px;
  border:none;
  padding:5px 7px 5px 15px;
  background:#fff;
  color:#666;
  border:2px solid #ddd;
  @include border-radius(4px);
    &:focus, &:focus + .fa{
      border-color:#10CE88;
      color:#7E98FF;
    }
}
.form-group .fa{
  position: absolute;
  right:15px;
  top:17px;
  color:#999;
}
.log-status.wrong-entry {
 @include animation( wrong-log 0.3s);
}
.log-status.wrong-entry .form-control, .wrong-entry .form-control + .fa {
  border-color: #ed1c24;
  color: #ed1c24;
}
.log-btn{
  font-family: 'Hanken Grotesk', sans-serif;
  z-index: 50; 
  cursor: pointer ; 
  background:#7E98FF;
  display:inline-block;
  width:100%;
  font-size:16px;
  height:50px;
  width: 200px; 
  color:#fff;
  text-decoration:none;
  border:none;
  transition: 0.5s;
}

.cre-btn{
  font-family: 'Hanken Grotesk', sans-serif;
  z-index: 50; 
  cursor: pointer ; 
  background:#383838;
  display:inline-block;
  width:100%;
  font-size:16px;
  margin-top: 10px;
  height:50px;
  color:#fff;
  text-decoration:none;
  border:none;
  @include border-radius(4px);
  transition: 0.5s;
}

#formulaire .log-btn:hover{
  	background-color: #697be4;
  }

#formulaire .cre-btn:hover{
  	color: #758aff;
  }
    
.link{
  font-family: 'Hanken Grotesk', sans-serif;
  background-color: #eeeeee;
  color:#C6C6C6;
  float:right;
  font-size:12px;
  margin-bottom:15px;

  &:hover{
    text-decoration: underline;
    color:#8C918F;
  }
}

#subscribeNews{
  font-family: 'Hanken Grotesk', sans-serif;
  background-color: #eeeeee;
   text-decoration: underline;
   color:#8C918F;
  float:right;
  font-size:12px;
  margin-bottom:15px;
}

.alert{
  display:none;
  font-size:12px;
  color:#f00;
  float:left;
}
@include keyframes (wrong-log) {
  0%, 100% { left: 0px;}
  20% , 60%{left: 15px;}
  40% , 80%{left: -15px;}
}



    /*-----footer-----*/


footer {
  position: absolute;
  width: 100%;
  bottom: -800px;
  height: 150px;
  background-color: #f2f2f2;
  z-index: 99;
  box-shadow: 1px -1px 6px 1px #2727278f;
  -webkit-box-shadow: 1px -1px 6px 1px #2727278f;
  -moz-box-shadow: 1px -1px 6px 1px #2727278f;
  }

#location {
  text-align: center;
  margin-top: 80px;
  margin-left: 40px;
  }

#location h4 {
  font-family: 'Hanken Grotesk', sans-serif;
  color: #505050;
  margin-top: 6px;
  font-size: 15px;
  }

#location #locaicon {
	position: relative;
  weigth: 50px;
  top: -22px;
  left: 46.4%;
  z-index: 1;
  opacity: 1;
  }

#basgauche1 {
  margin-top: -115px;
  }

#basgauche1 a {
  font-family: 'Hanken Grotesk', sans-serif; 
  margin-left: -70%;
  height: -50px;
  margin-top: 2px;
	display: block;
	line-height: 5px;
	padding: 0 14px;
	text-decoration: none;
  text-align: center;
	color: #222222;
	font-size: 13px;
  }

#basgauche2 {
  margin-top: -95px;
  }

#basgauche2 a {
  font-family: 'Hanken Grotesk', sans-serif; 
  margin-left: -40%;
  height: -50px;
	display: block;
	line-height: 5px;
	padding: 0 14px;
	text-decoration: none;
  text-align: center;
	color: #222222;
	font-size: 13px;
  }

#basdroite1 {
  margin-top: -70px;
  }

#basdroite1 a {
  font-family: 'Hanken Grotesk', sans-serif; 
  margin-left: 40%;
  height: -50px;
	display: block;
	line-height: 5px;
	padding: 0 14px;
	text-decoration: none;
  text-align: center;
	color: #222222;
	font-size: 13px;
  }

#basdroite2 {
  margin-top: -70px;
  }

#basdroite2 a {
  font-family: 'Hanken Grotesk', sans-serif; 
  margin-left: 70%;
  height: -50px;
	display: block;
	line-height: 5px;
	padding: 0 14px;
	text-decoration: none;
  text-align: center;
	color: #222222;
	font-size: 13px;
  }


.container{
  
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    height: 140vh;
}

.row{
    display: flex;
    gap: 20px;
}

.col-6{
    width: 50%;
}

.single-product{
    width: 1080px;
    position: relative;
}
/** Breadcrumb **/

.single-product .breadcrumb{
    font-family: 'Hanken Grotesk', sans-serif; 
    background: #48484810;
    padding: 8px 4px;
    border-radius: 8px;
    font-size: 15px;
}

.breadcrumb span{
    display: inline-flex;
    flex-direction: row;
    gap: 8px;
    margin-left: 8px;
}
.breadcrumb span:not(:last-child)::after{
    content: '/';
}

.breadcrumb span a{
    text-decoration: none;
    color: var(--primary-color);
}

/** IMAGE DU PRODUIT **/

.single-product .product-image{
    width: 100%;
}

.product-image .product-image-main{
    position: relative;
    display: block;
    height: 480px;
    background: var(--bg-grey);
    padding: px;
}

.product-image-main img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-image-slider{
    display: flex;
    gap: 10px;
    margin: 10px 110px;
}

.product-image-slider img{
    width: 90px;
    height: 90px;
    background: var(--bg-grey);
    padding: 6px;
    cursor: pointer;
}

/** TITRE DU PRODUIT **/

.product-title{
    margin-top: 50px;

}
.product-title h2{
    font-family: 'Hanken Grotesk', sans-serif; 
    font-size: 32px;
    line-height: 2.4rem;
    font-weight: 700;
    letter-spacing: -0.02rem;
}

.product-rating{
    display: flex;
    margin-top: 4px;
    margin-bottom: 10px;
    align-items: center;
}

.product-rating span:not(:last-child){
    color: #ffc600;
}
.product-rating .review{
    font-family: 'Hanken Grotesk', sans-serif; 
    color: var(--grey);
    font-size: 12px;
    font-weight: 500;
}
/** PRIX DU PRODUIT **/
.product-price{
    display: flex;
    position: relative;
    margin: 10px 0;
    align-items: center;
}

.product-price .offer-price{
    font-family: 'Hanken Grotesk', sans-serif; 
    font-size: 48px;
    font-weight: 700;
}
.product-price .sale-price{
    font-family: 'Hanken Grotesk', sans-serif; 
    font-size: 22px;
    font-weight: 500;
    text-decoration: line-through;
    color: var(--grey);
    margin-left: 12px;
}

/** DESCRIPTION DU PRODUIT **/
.product-details{
    margin: 20px 0;
}
.product-details h3{
    font-family: 'Hanken Grotesk', sans-serif; 
    font-size: 18px;
    font-weight: 500;
    text-decoration: underline;
}
.product-details p{
    margin: 10px 0;
    font-size: 14px;
    line-height: 1.2rem;
}

/** TAILLES DU PRODUIT **/
.product-size{
    margin: 30px 0;
}
.product-size h4{
    font-family: 'Hanken Grotesk', sans-serif; 
    font-size: 16px;
    font-weight: 550;
}

.product-size .size-layout{
    margin: 5px 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.product-size .size-layout .size-input{
    display: none;
}
.product-size .size-layout .size{
    font-family: 'Hanken Grotesk', sans-serif;
    background: var(--bg-grey);
    padding: 10px 18px;
    border: 1px solid var(--bg-grey);
    border-radius: 30px;
    margin-left: 0px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}
.product-size .size-layout .size:hover{
    border: 1px solid var(--grey);
}

.product-size .size-layout input[type="radio"]:checked + .size{
    background-color: #c4d0ff;
    border: 5px solid var(--grey);
    color: var(--bg-grey);
    box-shadow: 0 3px 6px var(--shadow);

}


/** COULEUR DU PRODUIT  **/
.product-color{
    margin: 10px 0;
    justify-content: center;
}
.product-color h4{
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 500;
}
.product-color .color-layout{
    margin: 5px 0;
    display: flex;
    gap: 10px;
}

.product-color .color-layout label{
    border-radius: 4px;
    cursor: pointer;
    content: '';
    width: 30px;
    height: 30px;
    display: inline-block;
}

.product-color .color-layout .black{
    
    background-color: black;
}

.product-color .color-layout .red{
    background-color: #93A8FC;
}
.product-color .color-layout .blue{
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 30%, rgba(147,168,252,1) 70%);
}

.product-color .color-layout .white{
    background-color: #ffffff;
}

.product-color .color-layout input[type="radio"]:checked + label{
    box-shadow: 0 3px 6px var(--shadow);
}

.product-color .color-layout .color-input{
    display: none;
}


/** divider **/
.divider{
    display: block;
    height: 1px;
    width: 100%;
    background: #48484830;
    margin: 20px 0;
}

/** PRODUIT GROUPES **/

.product-btn-group{
    display: flex;
    gap: 15px;
}
.product-btn-group .button{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 24px;
    font-size: 16px;
    font-weight: 500;
}

  /*-----AJOUTER AU PANIER / AUX FAVORIS -----*/

.product-btn-group .add-cart{
    
    background-color: var(--bg-grey);
    color: var(--grey);
    border-radius: 4px;
    cursor: pointer;
    transition: 0.5;
}
   
.product-btn-group .add-cart i{
    font-size: 20px;
}
.product-btn-group .add-cart:hover{
    box-shadow: 0 3px 6px var(--shadow);
    background: var(--grey);
    color: #93A8FC;
}

.product-btn-group .heart{
    color: var(--grey);
    cursor: pointer;
}
.product-btn-group .heart i{
    font-size: 20px;
}
.product-btn-group .heart:hover{
    background: var(--grey);
    color: #93A8FC;
}


/** Responsive Mobile **/
@media screen and (max-width:520px) {
    .container{
        padding: 20px;
        height: auto;
    }
    .row{
        display: block;
    }

    .col-6{
        width: 100%;
        display: block;
    }
    .single-product{
        width: 100%;
        position: relative;
    }

    .product-image .product-image-main{
        width: 100%;
        height: 280px;
    }
    .product-image-slider{
        gap: 5px;
    }

    .breadcrumb{
        display: none;
    }

    .product-title h2{
        font-size: 24px;
        line-height: 1.6rem;
    }
    .product-size{
        display: block;
    }
    .product-size .size-layout{
        display: block;
        margin: 10px 0;

    }
    .product-size .size-layout .size{
        padding: 6px 10px;
    }
    .product-btn-group{
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}

/** Responsive Tablette **/
@media  (min-width: 520px ) and (max-width: 1080px) {
   .container{
    display: block;
    height: auto;
    padding: 20px;
   }
    
}

/* Tous les articles */


.image {
  display: block;
  width: 100%;
  height: auto;
  cursor: pointer;
}

.article {
  display:flex;
  flex-wrap:wrap;
  margin-top: 300px;
  margin-left: 500px;
}

.article img{
  padding: 20px 0;
  cursor: pointer;
  width: 350px;
}

.sweatt:hover img {
  transition: 0.7s;
  transform:scale(1.10);
}

.casquette:hover img {
  transition: 0.7s;
  transform:scale(1.10);
}
  
.article .sweatt{
  margin-right: 200px;
  }

.article .article-header{
  display: flex;
  flex-wrap:wrap;
  justify-content: space-between;
}
.article p{
  margin-top: -10px;
}

.product-price2{
    display: flex;
    position: relative;
    margin: 10px 0;
    align-items: center;
}

.product-price2 .offer-price{
    font-family: 'Hanken Grotesk', sans-serif; 
    font-size: 20px;
    font-weight: 700;
}
.product-price2 .sale-price{
    font-family: 'Hanken Grotesk', sans-serif; 
    font-size: 15px;
    font-weight: 500;
    text-decoration: line-through;
    color: var(--grey);
    margin-left: 12px;
}

.product-price2 .coloris{
    font-family: 'Hanken Grotesk', sans-serif; 
    font-size: 15px;
    font-weight: 500;
    color: red;
    margin-left: 12px;
}
  

    /*-----FORMULAIRE DE CONTACT-----*/

.form-header {
			font-family: 'Hanken Grotesk', sans-serif;
			text-align: center;
            font-size: 18px;
            border-bottom: 1px solid #f4f4f4;
            padding: 10px 0;
        }
		
.wrapper {
  padding: 10px 25px;
	margin-top:300px;
  margin-left: 600px;
  width: 710px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
	background-color: #eeeeee;
  border-top: 9px solid #93A8FC;
   }

form {
		
	margin: 30px 50px;
	}

.form-label {
  font-family: 'Hanken Grotesk', sans-serif;
  float: left;
  width: 250px;
  }

.form-row {
margin: 12px 0;
  }

.form-field {
		font-family: 'Hanken Grotesk', sans-serif;
		}

        input,
        textarea,
        select {
		font-family: 'Hanken Grotesk', sans-serif;
            width: 500px;
            height: 28px;
            border: 1px solid #d2d6de;
            padding: 2px 8px;
        }

        textarea {
		font-family: 'Hanken Grotesk', sans-serif;
            height: 50px;
        }

        input[type=radio],
        input[type=checkbox] {
            width: 20px;
            color: red;
            height: 14px;
        }

        input[type=submit],
        input[type=reset] {
		font-family: 'Hanken Grotesk', sans-serif;
            width: 100px;
            margin-right: 50px;
			background-color: #93A8FC;
			border-color: #93A8FC;
			color: #ffffff;
			cursor: pointer;
        }
		input[type=submit]:hover,
        input[type=reset]:hover {
		    background-color: #93A8FC;
        }


.form-field:after {
  content: '';
  display: block;
  clear: both;
        }

        @charset "utf-8";

        @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,600);
        
        html,
        html a {
          -webkit-font-smoothing: antialiased;
          text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
        }
        
        body {
          color: #666;
          font-family: 'Open Sans', sans-serif;
          font-size: 90.5%;
          margin: 0 auto;
        }
        
        a {
          border: 0 none;
          outline: 0;
          text-decoration: none;
        }
        
        strong {
          font-weight: bold;
        }
        
        p {
          margin: 0.90rem 0 0;
        }
        
        #basket-product h1 {
          font-size: 0.90rem;
          font-weight: normal;
          margin: 0;
          padding: 0;
        }
        
        input,
        button {
          border: 0 none;
          outline: 0 none;
        }
        
        button {
          background-color: #666;
          color: #fff;
        }
        
        button:hover,
        button:focus {
          background-color: #555;
        }
        
        img,
        .basket-module,
        .basket-labels,
        .basket-product {
          width: 100%;
        }
        
        input,
        button,
        .basket,
        .basket-module,
        .basket-labels,
        .item,
        .price,
        .quantity,
        .subtotal,
        .basket-product,
        .product-image-basket,
        .product-details-basket {
          float: left;
        }
        
        .price:before,
        .subtotal:before,
        .subtotal-value:before,
        .total-value:before,
        .promo-value:before {
          content: '';
        }
        
        .hide {
          display: none;
        }
        
        
        
        .basket,
        aside {
          padding: 0 1rem;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
        }
        
        .basket {
          margin-top: 15%;
          width: 70%;
        }
        
        .basket-module {
          color: #111;
          left: 101%;
          top: 20%;
        }
        
        label {
          display: block;
          margin-bottom: 0.3125rem;
          font-family: 'Hanken Grotesk', sans-serif;
          font-weight: bold;
        
        }
        
        .promo-code-field {
          font-family: 'Hanken Grotesk', sans-serif;
          border: 1px solid #ccc;
          padding: 0.5rem;
          text-transform: uppercase;
          transition: all 0.2s linear;
          width: 15%;
          -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          -o-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        }
        
        .promo-code-field:hover,
        .promo-code-field:focus {
          border: 1px solid #999;
        }
        
        .promo-code-cta {
          font-family: 'Hanken Grotesk', sans-serif;
          border-radius: 4px;
          font-size: 0.800rem;
          margin-left: 0.625rem;
          padding: 0.6875rem 1.25rem 0.625rem;
          margin-top: -5px;
        }
        
        .basket-labels {
          border-top: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
          margin-top: 1.625rem;
        }
        
        ul {
          list-style: none;
          margin: 0;
          padding: 0;
        }
        
        li {
          color: #111;
          display: inline-block;
          padding: 0.625rem 0;
          font-family: 'Hanken Grotesk', sans-serif;
        }
        
        li.price:before,
        li.subtotal:before {
          content: '';
        }
        
        .item {
          width: 55%;
        }
        
        .price,
        .quantity,
        .subtotal {
          width: 15%;
        }
        
        .subtotal {
          text-align: right;
          font-family: 'Hanken Grotesk', sans-serif;
        }
        
        .remove {
          font-family: 'Hanken Grotesk', sans-serif;
          bottom: 1.125rem;
          float: right;
          position: absolute;
          right: 0;
          text-align: right;
          width: 45%;
        }
        
        .remove button {
          background-color: transparent;
          color: #777;
          float: none;
          text-decoration: underline;
          text-transform: uppercase;
          font-family: 'Hanken Grotesk', sans-serif;
        }
        
        .item-heading {
          padding-left: 4.375rem;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
        }
        
        .basket-product {
          border-bottom: 1px solid #ccc;
          padding: 1rem 0;
          position: relative;
        }
        
        .product-image-basket {
          width: 35%;
        }
        
        .product-details-basket {
          width: 65%;
        }
        
        .product-frame {
          border: 1px solid #aaa;
        }
        
        .product-details-basket {
          padding: 0 1.5rem;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
        }
        
        .quantity-field {
          background-color: #ccc;
          border: 1px solid #aaa;
          border-radius: 4px;
          font-size: 0.625rem;
          padding: 2px;
          width: 3.75rem;
        }
        
        aside {
          float: right;
          position: relative;
          width: 30%;
        }
        
        .summary {
          margin-top: 60%;
          background-color: #eee;
          border: 1px solid #aaa;
          padding: 1rem;
          width: 250px;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
        }
        
        .summary-total-items {
          color: #666;
          font-size: 0.875rem;
          text-align: center;
          font-family: 'Hanken Grotesk', sans-serif;
        }
        
        .summary-subtotal,
        .summary-total {
          border-top: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
          clear: both;
          margin: 1rem 0;
          overflow: hidden;
          padding: 0.5rem 0;
        }
        
        .subtotal-title,
        .subtotal-value,
        .total-title,
        .total-value,
        .promo-title,
        .promo-value {
          color: #111;
          float: left;
          width: 50%;
        }
        
        .summary-promo {
          -webkit-transition: all .3s ease;
          -moz-transition: all .3s ease;
          -o-transition: all .3s ease;
          transition: all .3s ease;
        }
        
        .promo-title {
          float: left;
          width: 70%;
        }
        
        .promo-value {
          color: #8B0000;
          float: left;
          text-align: right;
          font-family: 'Hanken Grotesk', sans-serif;
          width: 30%;
        }
        
        .summary-delivery {
          padding-bottom: 3rem;
        }
        
        .subtotal-value,
        .total-value {
          text-align: right;
          font-family: 'Hanken Grotesk', sans-serif;
        }
        
        .total-title {
          font-weight: bold;
          text-transform: uppercase;
          font-family: 'Hanken Grotesk', sans-serif;
        }
        
        .summary-checkout {
          display: block;
        }
        
        .checkout-cta {
          display: block;
          float: none;
          font-size: 0.75rem;
          text-align: center;
          text-transform: uppercase;
          font-family: 'Hanken Grotesk', sans-serif;
          padding: 0.625rem 0;
          width: 100%;
        }
        
        .summary-delivery-selection {
          border: 1px solid #aaa;
          border-radius: 4px;
          display: block;
          font-size: 0.625rem;
          height: 34px;
          width: 100%;
        }
        
        @media screen and (max-width: 640px) {
          aside,
          .basket,
          .summary,
          .item,
          .remove {
            width: 100%;
          }
          .basket-labels {
            display: none;
          }
          .basket-module {
            margin-bottom: 1rem;
          }
          .item {
            margin-bottom: 1rem;
          }
          .product-image-basket-basket {
            width: 40%;
          }
          .product-details-basket {
            width: 60%;
          }
          .price,
          .subtotal {
            width: 33%;
          }
          .quantity {
            text-align: center;
            font-family: 'Hanken Grotesk', sans-serif;
            width: 34%;
          }
          .quantity-field {
            float: none;
          }
          .remove {
            bottom: 0;
            text-align: left;
            font-family: 'Hanken Grotesk', sans-serif;
            margin-top: 0.75rem;
            position: relative;
          }
          .remove button {
            padding: 0;
          }
          .summary {
            margin-top: 1.25rem;
            position: relative;
          }
        }
        
        @media screen and (min-width: 641px) and (max-width: 960px) {
          aside {
            padding: 0 1rem 0 0;
          }
          .summary {
            width: 28%;
          }
        }
        
        @media screen and (max-width: 960px) {
          main {
            width: 100%;
          }
          .product-details-basket {
            padding: 0 1rem;
          }
        }