/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.5.1767070568
Updated: 2025-12-30 04:56:08

*/

.woocommerce ul.products li.product a img {
    width: 100%;
   max-height: 381px;         /* adjust as needed */
    object-fit: contain;    /* THIS is the magic */
    background: #f5f5f5;    /* optional: clean neutral backdrop */
}

/* Container setup */
 
.woocommerce-loop-product__title {
    display: -webkit-box;       /* Needed for line clamping */
    -webkit-line-clamp: 2;      /* Number of lines to show */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;     /* Prevent long words from breaking layout */
}


 .flip-container {
    perspective: 1000px;
    width: 100%;
    position: relative;
/* 	 min-height: 381px; */
	     aspect-ratio: 2 / 3; /* width:height = 2:3, adjust as needed */
}

@media (max-width: 768px) {
/* 	.flip-container{
	      min-height: 233px;
         overflow: hidden;	
	}
	 */

 
}


.flip-container .flipper {
    position: relative;
    width: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-container:hover .flipper {
    transform: rotateY(180deg);
}

.flip-container .front,
.flip-container .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    top: 0;
    left: 0;
}

.flip-container .back {
    transform: rotateY(180deg);
}

.flip-container img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.products .add_to_cart_button {
    width: 100%;
    text-align: center;
}


/* Functionality: Custom thumbnail size in product image gallery
 * Date:  2021-03-10
 * Author: Rafael Azuaje
 */

/* DESKTOP */
.woocommerce .flex-control-thumbs {
    margin: 10px 0px 10px -5px !important; /* Thumbnails separation top and bottom */
    width: 100% !important; /* Controls width of thumbnails container on desktop - Horizontally */
	display: flex;
}
/* Controls thumbnails width on desktop - vertically
 * Enable this ONLY for VERTICAL display
 */ 
ol.flex-control-nav.flex-control-thumbs li {
	width: 15% !important; 
}
/* Enable this ONLY for HORIZONTAL display */
/*ol.flex-control-nav.flex-control-thumbs li {
	width: 18% !important; 
}*/

/* PHONES */
@media (max-width:414px){
	ol.flex-control-nav.flex-control-thumbs li {
		width: 18% !important; /* Controls thumbnails width on mobile - Horizontally */
	}
}

/* TABLETS */
@media (min-width:568px) and (max-width:768px){
	/* Controls thumbnails container width on tablet - vertically
	 * Enable this ONLY for VERTICAL display */
	.woocommerce .flex-control-thumbs {
    	margin: 10px 0px 10px -5px !important; 
    	width: 15% !important;
	}
	/* Controls width of thumbnails container on tablet - horizontally
	 * Enable this ONLY for HORIZONTAL display */
	/*.woocommerce .flex-control-thumbs {
    	width: 70% !important; 
	}*/
	ol.flex-control-nav.flex-control-thumbs li {
		width: 90% !important; /* Controls thumbnails image width on tablet - vertically */
	}
}
@media (min-width:769px) and (max-width:1024px){
	/* Controls thumbnails container width on tablet - vertically
	 * Enable this ONLY for VERTICAL display */
	.woocommerce .flex-control-thumbs {
    	margin: 10px 0px 10px -5px !important; 
    	width: 12% !important;
	}
	/* Controls width of thumbnails container on tablet - horizontally
	 * Enable this ONLY for HORIZONTAL display */
	/*.woocommerce .flex-control-thumbs {
    	width: 70% !important; 
	}*/
	ol.flex-control-nav.flex-control-thumbs li {
		width: 100% !important; /* Controls thumbnails image width on tablet - vertically */
	}
}

/* Functionality: Product page image thumbnails on left side
 * Date:  2021-03-10
 * Author: Rafael Azuaje
 * Disable this segment if you want to display horizontally
 */
@media (min-width:568px) {
	.woocommerce .flex-control-nav { 
		position: absolute; 
		top:-10px; 
		left: 0px;
	}
	.flex-control-thumbs {
		display: flex;
		flex-direction: column;
	}
}
@media (min-width:568px) and (max-width:768px){
	.woocommerce .flex-viewport {
		width: 86.5% !important;
		left: 100px !important;
	}
}
@media (min-width:769px) and (max-width:1024px){
	.woocommerce .flex-viewport {
		width: 87% !important;
		left: 95px !important;
	}
}
@media (min-width:1025px){
	.woocommerce .flex-viewport {
		width: 85% !important;
		left: 98px  !important;
	}	
}




/* WooCommerce variation tabs */
.variation-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.variation-tab {
    padding: 10px 16px;
    border: 1px solid #333;
    cursor: pointer;
    background: #fff;
    font-weight: 500;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.variation-tab.active {
    background: #000;
    color: #fff;
}
.delivery-options {
    width: 100%;
    display: block;
}
.woocommerce-variation-add-to-cart {
flex-wrap: wrap!important;	

}
.elementor-product-simple .cart{
	flex-wrap: wrap!important;	
}


.quantity-cat {
    display: flex;
    gap: 10px;
    align-items: center;
   
}

.quantity-wrapper {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    height: 40px;
}

.quantity-wrapper input.qty {
    width: 60px;
    text-align: center;
    border: none;
    outline: none;
}

.qty-btn {
    background-color: #218838;
    border: none;
    padding: 0 12px;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
	color:#fff;
}

.qty-btn:hover {
    background-color: #218838;
}

.single_add_to_cart_button {
    padding: 0 20px;
    height: 40px;
    border-radius: 6px;
}
.single_add_to_cart_button {
    background: #218838 !important;
    padding: 4px 20px !important;
}
button:focus{
	   background-color: #218838!important;
     
}