/* ----- Variables ----- */
/* ----- Global ----- */
 * {
	 box-sizing: border-box;
}


.sac_product img {
	 max-width: 100%;
	 filter: drop-shadow(1px 1px 3px #a6a6a6);
}

/* ----- Product Section ----- */
 .sac_product {
	 display: grid;
	 grid-template-columns: 0.9fr 1fr;
	 margin: auto;
	 padding: 3.5em 0;
	 min-width: 40%;
	 max-width: 40%;
	 background-color: white;
	 border-radius: 5px;
	 border: 5px solid red;
	 height: 600px;

}

/* ----- Photo Section ----- */
 .sac_product__photo {
	 position: relative;
	 display: grid;
	 grid-template-columns: 0.9fr 1fr;
	 margin: auto;
	 padding: 2.5em 0;
	 width: 40%;
	 border: 5px solid blue;
}
 .sac_photo-container {
	 position: relative;
	 left: -2.0em;
	 display: grid;
	 grid-template-rows: 1fr;
	 height: 600px;
	 border-radius: 6px;
	 box-shadow: 4px 4px 25px -2px rgba(0, 0, 0, 0.3);

}
 .sac_photo-container_right {
	 position: relative;
	 border-radius: 6px;
	 box-shadow: 4px 4px 25px -2px rgba(0, 0, 0, 0.3);


}

 .sac_photo-main {
	 border-radius: 6px 6px 0 0;
	 background-color: #9be010;
	 background: radial-gradient(#e5f89e, #96e001);
}
 .sac_photo-main .controls {
	 display: flex;
	 justify-content: space-between;
	 padding: 0.8em;
	 color: #fff;
}
 .sac_photo-main .controls i {
	 cursor: pointer;
}
 .sac_photo-main img {
	 position: absolute;
	 left: -3.5em;
	 top: 1em;
	 max-width: 110%;
	 filter: saturate(150%) contrast(120%) hue-rotate(10deg) drop-shadow(1px 20px 10px rgba(0, 0, 0, 0.3));

}

 .sac_photo-album {
	 padding: 0.7em 1em;
	 border-radius: 0 0 6px 6px;
	 background-color: #fff;
}
 .sac_photo-album ul {
	display: flex;
	justify-content: space-around;
    list-style-type: none;
}
 .sac_photo-album li {
	 float: left;
	 width: 80px;
	 height: 80px;
	 padding: 7px;
	 border: 1px solid #a6a6a6;
	 border-radius: 3px;
	 list-style-type: none;
}
/* ----- Informations Section ----- */
 .sac_product__info {
	 padding: 0.8em 0;
	 float: right;
	 border: 5px solid orange;
}

 .sac_title h1 {
	 margin-bottom: 0.1em;
	 color: #4c4c4c;
	 font-size: 1.5em;
	 font-weight: 900;
}
 .sac_title span {
	 font-size: 0.7em;
	 color: #a6a6a6;
}
 .sac_price {
	 margin: 1.5em 0;
	 color: #ff3f40;
	 font-size: 1.2em;
}
 .sac_price span {
	 padding-left: 0.15em;
	 font-size: 2.9em;
}
 .sac_variant {
	 overflow: auto;
}
 .sac_variant h3 {
	 margin-bottom: 1.1em;
}
 .sac_variant li {
	 float: left;
	 width: 35px;
	 height: 35px;
	 padding: 3px;
	 border: 1px solid transparent;
	 border-radius: 3px;
	 cursor: pointer;
	 list-style-type: none;
}
 .sac_variant li:first-child, .variant li:hover {
	 border: 1px solid #a6a6a6;
	 list-style-type: none;
}
 .sac_variant li:not(:first-child) {
	 margin-left: 0.1em;
}

 .sac_description2 {
	 font-size: 0.8em;
	 list-style: disc;
	 margin-left: 1em;
}

 .sac_description {
	 clear: left;
	 margin: 2em 0;
}
 .sac_description h3 {
	 margin-bottom: 1em;
}
 .sac_description ul {
	 font-size: 0.8em;
	 list-style: disc;
	 margin-left: 1em;
}
 .sac_description li {
	 text-indent: -0.6em;
	 margin-bottom: 0.5em;
}

 .sac_btn {
	 float: right-side;
	 width: auto;
	 height: 45px;
	 padding: 3px;
	 border: 1px solid transparent;
	 border-radius: 3px;
	 cursor: pointer;
	 list-style-type: none;
}

 .sac_buy--btn {
	 padding: 1.0em 2.1em;
	 border: none;
	 border-radius: 7px;
	 font-size: 0.8em;
	 font-weight: 700;
	 letter-spacing: 1.3px;
	 color: #fff;
	 background-color: #ff3f40;
	 box-shadow: 2px 2px 25px -7px #4c4c4c;
	 cursor: pointer;
}
 .sac_buy--btn:active {
	 transform: scale(0.97);
}
.sac_notify-badge{
    position: absolute;
    right:-10px;
    top:10px;
    background:red;
    text-align: center;
    border-radius: 30px 30px 30px 30px;
    color:white;
    padding:3px 6px;
    font-size:15px;
}