/*!
 *    FileName:  productpageStyles.css
 *      Author:  Johann Olivares
 *        Date:  09/29/2020
 *
 * Description: selectors for formatting the index file for E-Fit website
 *				 
 *
 */
 /*import CSS styles from index.css*/

 
/*Product Detail Styles*/
#product-details-container {
	display: grid;
	grid-template-columns: 50% 50%;
	gap: 15px;
	padding: 50px;
	max-width: 1200px;
	margin: auto;
}
#img-container {
	height: 100%;
}
#img-container img {
    height: auto;
    width: 100%;
    object-fit: cover;
}

#details-container {
	text-align: left;
	padding: 0px 25px;
}
.item-name h1 {
    text-align: left;
    font-weight: 500;
    padding: 0px;
    margin: 0px;
    margin-bottom: 10px;
}
.item-price h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0px;
    padding: 0px;
}
.item-description p {
	text-align: left;
	font-size: 15px;
	padding: 15px 0px;
}
.product-attributes {
    display: flex;
    flex-direction: column;
    padding: 0px 15px;
    margin: 0px 0px 25px 0px;
    font-size: 15px;
    gap: 10px;
}
.item-cart-action {
	font-size: 20px;
	margin: auto;
	padding: 1%;
}
#item-size {
    display: block;
    width: 100%;
    font-size: 18px;
    padding: 10px;
    margin-bottom: 10px;
}
.item-add-btn  {

	display: block;
	width: 100%;
}
.size-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.size-option {
  position: relative;
}

.size-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.size-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  height: 50px;
  border: 2px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

/* Hover */
.size-option span:hover {
  border-color: #000;
}

/* Selected */
.size-option input:checked + span {
  border-color: #000;
  background: #000;
  color: #fff;
}

/* Focus (keyboard users) */
.size-option input:focus + span {
  outline: 2px solid #000;
  outline-offset: 2px;
}

.product-qty {
	border: 1px solid black;
	display: block;
	width: 75px;
	font-size: 18px;
	padding: 10px;
	margin-bottom: 10px;
}

.qty-control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 2px solid #000;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 15px;
  width: 100%;
}

.qty-btn {
  width: 35%;
  height: 100%;
  background: #fff;
  border: none;
  font-size: 18px;
  font-weight: 600;
  color: #000;
  cursor: pointer;
  transition: background 0.2s ease;
}

/*.qty-btn:hover {*/
/*  background: #000;*/
/*  color: #fff;*/
/*}*/

.product-qty {
  width: 48px;
  height: 100%;
  border: none;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  outline: none;
}

/* Remove arrows (Chrome / Safari) */
.product-qty::-webkit-inner-spin-button,
.product-qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.product-qty {
  -moz-appearance: textfield;
}


#favorite-btn {
    display: block;
    width: 100%;
    margin-top: 15px;
}
/*End of Product Detail Styles*/


@media (max-width: 1024px) {
     #product-details-container {
    	display: grid;
    	grid-template-columns: auto;
    	padding: 25px;
    	max-width: 1200px;
    }
    #img-container img {
        height: 100% !important;
        width: 100%;
        object-fit: cover;
    }
    .item-name h1 {
        font-size: 22px;
        font-weight: 600;
        padding: 0px;
        margin: 0px;
        margin-bottom: 10px;
    }
    .item-price h2 {
        font-size: 18px;
        font-weight: 600;
        margin: 0px;
        padding: 0px;
    }
    .item-description p {
    	text-align: left;
    	font-size: 15px !important;
    	padding: 15px 0px;
    }
    .product-attributes {
        display: flex;
        flex-direction: column;
        padding: 0px 15px;
        margin: 0px 0px 25px 0px;
        gap: 10px;
    }
    .profuct-attributes li {
        font-size: 15px !important;
    }
}

@media (max-width: 767px) {
    #product-details-container {
    	grid-template-columns: auto;
    	padding: 25px 15px;
    }
    #img-container img {
        width: 100%;
        object-fit: cover;
    }
    #details-container {
    	padding: 25px 0px;
    }
    .item-name h1 {
        text-align: left;
        font-weight: 500;
        margin-bottom: 10px;
    }
    .item-price h2 {
        font-size: 18px;
        margin-bottom: 10px;
    }
    .item-description p {
    	padding: 15px 0px;
    }
    .product-attributes {
        padding: 15px;
        margin: 0px 0px 15px 0px;
        font-size: 15px;
    }
    .item-cart-action {
    	font-size: 15px;
    }
    #item-size {
        font-size: 15px;
        padding: 10px;
        margin-bottom: 10px;
    }
    .item-add-btn  {
        border: 1px solid #000;
    	font-size: 15px;
    	padding: 10px;
    }
    .product-qty {
    	width: 75px;
    	font-size: 15px;
    }
}