/* Product Grid Customization */
/* WooCommerce product grid styling */
.woocommerce ul.products {
    margin: 0 auto; /* Center the product grid horizontally by setting automatic margins on both sides */
    padding: 0; /* Remove default padding */
    display: flex; /* Use Flexbox for layout control, allowing items to be aligned easily */
    flex-wrap: wrap; /* Allow the products to wrap into multiple rows if necessary */
    gap: 10px; /* Adds space of 10px between each product */
}

/* Styling for individual product items */
.woocommerce ul.products li.product {
    margin: 0; /* Remove margin around each product item */
    padding: 0; /* Remove padding inside each product item */
    border: none; /* Remove border around each product */
    flex: 1 0 14%; /* Ensure each product takes up 14% of the row (6 products per row) */
    display: flex; /* Use Flexbox to control layout */
    flex-direction: column; /* Align content vertically inside each product item */
    transition: transform 0.3s ease, box-shadow 0.1s ease; /* Smooth transition for scale and box-shadow on hover */
}

/* Hover effect for product items */
.woocommerce ul.products li.product:hover {
    transform: scale(1.05); /* Slightly zooms in the product item on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow when the product is hovered */
}

/* Styling for product title */
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
    font-size: 12px; /* Set title font size */
    color: #0100F8; /* Set title color */
    font-weight: normal; /* Set font weight to normal */
    display: -webkit-box; /* Use a box model for limiting title lines */
    -webkit-line-clamp: 3; /* Limit title to 3 lines */
    -webkit-box-orient: vertical; /* Set box orientation to vertical for multi-line clamping */
    overflow: hidden; /* Hide overflowed content */
    text-overflow: ellipsis; /* Show ellipsis (...) for truncated text */
    height: 50px; /* Set fixed height for title to ensure uniformity */
}

/* Styling for the price of the product */
.woocommerce ul.products li.product .price {
    text-align: left; /* Aligns the price text to the left */
    margin-bottom: 10px; /* Adds a 10px margin below the price */
    font-size: 18px; /* Sets the font size of the price to 18px */
    color: #000; /* Sets the color of the price to black (#000) */
}

/* Styling for the discounted price (ins) */
.woocommerce ul.products li.product .price ins {
    color: #ff0000; /* Sets the color of the discount price to red */
    font-size: 18px; /* Sets the font size of the discounted price to 18px */
    font-weight: bold; /* Makes the discounted price bold */
}

/* Styling for the original price (del) */
.woocommerce ul.products li.product .price del {
    color: #000; /* Sets the color of the original price to black */
    font-size: 14px; /* Sets the font size of the original price to 14px */
}

/* Styling for the "Add to Cart" button */
.woocommerce ul.products li.product .button {
    display: flex; /* Enables flexbox layout for centering the button's content */
    justify-content: center; /* Centers the content (text) horizontally inside the button */
    align-items: center; /* Centers the content (text) vertically inside the button */
    width: 100%; /* Makes the button take up the full width of its container */
    padding: 6px; /* Adds 6px padding inside the button for spacing */
    border-radius: 0; /* Removes any rounded corners, so the button has sharp edges */
    font-weight: bold; /* Makes the text inside the button bold */
    border: none; /* Removes the button's border */
    transition: background-color 0.3s ease; /* Adds a smooth transition effect when the background color changes */
}



/* Hide forcely Header & Footer from page-id-1432 (Member Area) */
.page-id-1432 header,  
.page-id-1432 footer {  
    display: none !important;	
}


/* Hide Forecely Comparison button from main page */
.shopengine_comparison_add_to_list_action {
    display: none !important;
}

/* Hide Forecely image toggle magnifying glass from product image */
.shopengine-product-image-toggle {
    display: none !important;
}


/* Default link color and font size in product description */
a {
  color: blue; /* Link ka default color blue */
  font-size: 16px; /* Link ka font size, aap isay adjust kar sakte hain */
  text-decoration: none; /* Agar underline nahi chahte to */
}

/* Hover state for links in product description pages */
a:hover {
  color: darkblue; /* Jab link par hover kiya jaye */
}

/* Active state for links in product description pages (jab link click ho) */
a:active {
  color: red; /* Jab link active ho */
}

/* Visited state for links in product description pages (jab link pehli dafa visit ho) */
a:visited {
  color: purple; /* Jab link pehli dafa visit ho */
}

/* Mobile aur Desktop view ke liye in product description pages */
@media only screen and (max-width: 768px) {
  a {
    color: blue; /* Mobile view mein link ka color blue hi rahe */
    font-size: 16px; /* Mobile mein same font size */
  }
}


/* Product Description ki H1 se H4 Desktop view ke liye */
h1 {
  font-size: 32px;
}

h2 {
  font-size: 28px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 20px;
}

/* Product Description ki H1 se H4 Mobile view ke liye */
@media only screen and (max-width: 768px) {
  h1 {
    font-size: 28px;
  }

  h2 {
    font-size: 24px;
  }

  h3 {
    font-size: 20px;
  }

  h4 {
    font-size: 16px;
  }
}

/* Member Area Page Product Grid for Mobile */
@media only screen and (max-width: 768px) {
  .woocommerce ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding-left: 10px !important; /* Added left spacing */
  }

  .woocommerce ul.products li.product {
    flex: 0 0 31% !important;
    max-width: 31% !important;
  }
}