/*
 Theme Name:   High6 Creatives
 Theme URI:    http://www.high6.com/
 Description:  A Child Theme built for 
 Author:       High6 Creatives
 Author URI:   http://www.high6.com/
 Version:      1.0
 Template:     Divi
*/

body img.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail {
    border: 0px !important;
    width: 252px !important;
}

.woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img{
    margin-bottom: 0px !important
}

ul.products li {
    border-radius: 8px !important;
    border: 1px solid #D7D7D7 !important;
	min-height: 408px !important
}

ul.products span.et_shop_image {
    background: #EFEFEF !important;
    display: flex !important;
    justify-content: center !important;
    height: 252px;
    border-radius: 8px 8px 0px 0px !important;
	overflow: hidden !important;
}

h2.woocommerce-loop-product__title{
    margin-left: 23px !important;
    margin-right: 23px !important;
    color: #272727 !important;
    font-family: 'Outfit';
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    letter-spacing: -0.16px !important;
}

@media (min-width: 768px){
	h2.woocommerce-loop-product__title{
		display: -webkit-box !important;
		-webkit-line-clamp: 2 !important;          /* Number of lines to show */
		-webkit-box-orient: vertical !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		max-height: 60px !important;
		min-height: 60px !important
	}
}

.product-sku{
    margin-left: 23px !important;
    margin-right: 23px !important;
    color: #272727 !important;
    font-family: 'Poppins' !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal !important;
    letter-spacing: -0.12px !important;
    background: #D7D7D7;
    padding: 3px 5px !important;
    border-radius: 4px !important
}

@media (min-width: 981px){
	.product-sku{
		width: max-content !important;
	}
}

.woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price, .woocommerce ul.products li.product .price del, .woocommerce-page ul.products li.product .price del {
    margin: 20px 23px 25px 23px !important;
    color: #272727 !important;
    font-family: 'Outfit' !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 25px !important;
    letter-spacing: -0.2px !important;
}

.woocommerce ul.products img.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail{
    border: 0px !important
}

.woocommerce ul.products li:hover img{
    scale: 103%
}

.woocommerce ul.products li:hover h2{
    color: #E88320 !important
}

.woocommerce ul.products li img,
.woocommerce ul.products li:hover h2,
.woocommerce ul.products li:hover .product-sku{
    -webkit-transition: .4s ease-in-out;
    transition:  .4s ease-in-out;
}

.woocommerce ul.products li:hover .product-sku {
    background: #063F5C;
    color: #fff !important;
}


@media (max-width: 980px){
h2.woocommerce-loop-product__title{
    font-size: 14px !important;
    line-height: 18px !important;        
}

.woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price, .woocommerce ul.products li.product .price del, .woocommerce-page ul.products li.product .price del {
    font-size: 18px !important;
    line-height: 25px !important;  
}
}

@media (max-width: 767px){
h2.woocommerce-loop-product__title{
    font-size: 12px !important;
    line-height: 18px !important;        
}

.product-sku{
    font-size: 12px !important;
    line-height: 18px !important;        
}

.woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price, .woocommerce ul.products li.product .price del, .woocommerce-page ul.products li.product .price del {
    font-size: 16px !important;
    line-height: 22px !important;  
}
}

/* Modal Background Overlay */
.modal-overlay {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: rgba(0,0,0,0.8);
}

/* Modal Inner Container */
.modal-content {
  background-color: #fff;
  margin: 5% auto;
  padding: 40px 30px;
  border-radius: 10px;
  border: 2px solid #FFA94D;
  max-width: 500px;
  width: 90%;
  position: relative;
  font-family: "Poppins", sans-serif;
}

/* Close Button */
.close-modal {
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  color: #333;
}

/* Optional: Disable scroll behind modal */
body.modal-open {
  overflow: hidden;
}

.gravity-modal {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #E88320 transparent; /* Firefox */
}

/* Webkit Browsers (Chrome, Edge, Safari) */
.gravity-modal::-webkit-scrollbar {
    width: 8px;
}

.gravity-modal::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 10px;
}

.gravity-modal::-webkit-scrollbar-thumb {
    background-color: #E88320;
    border-radius: 10px;
}

.gravity-modal .gfield_description.validation_message.gfield_validation_message {
    color: red !important;
    font-size: 12px !important;
}

.gravity-modal input#gform_submit_button_5:hover,
.gravity-modal input#gform_submit_button_2:hover{
    background: #063F5C;
}