css
/* ==========================================================================
   FINAL PERFECT INSTAGRAM ICON INJECTION
   ========================================================================== */

/* 1. Format the pink circle base precisely */
.block-social a, 
.social-icons a,
footer [class*="social"] a,
a[href*="instagram"],
a[href*="insta"] {
    background-color: #E1306C !important; /* Official Instagram Pink */
    background: #E1306C !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important; /* Makes it a perfect circle */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    
    /* Hide the original broken text string safely */
    font-size: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    
    position: relative !important;
    transition: background-color 0.2s ease !important;
}

/* 2. Inject a standard crisp white camera icon font directly into the circle center */
.block-social a::before, 
.social-icons a::before,
footer [class*="social"] a::before,
a[href*="instagram"]::before,
a[href*="insta"]::before {
    content: "\f16d" !important; /* Universal Instagram icon code */
    font-family: "FontAwesome", "Font Awesome 5 Brands", "Font Awesome 6 Brands", "PrestaShopIcon" !important;
    font-weight: 400 !important;
    font-style: normal !important;
    text-indent: 0 !important; /* Bring back visibility for the icon shape */
    font-size: 20px !important; /* Clean sizing inside the 40px circle */
    color: #FFFFFF !important; /* Sharp, crisp white icon color */
    display: inline-block !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
}

/* 3. Smooth hover state interaction */
.block-social a:hover, 
.social-icons a:hover,
a[href*="instagram"]:hover,
a[href*="insta"]:hover {
    background-color: #C13584 !important; /* Deeper magenta tone on hover */
}

css
/* Ensure product grid elements have a consistent height and clean structure */
.product-miniature {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

/* Handle titles cleanly instead of hard-clipping them midway */
.product-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to exactly 2 lines maximum */
    -webkit-box-orient: vertical;  
    overflow: hidden;
    text-overflow: ellipsis;
    height: 3em; /* Ensures a strict, uniform box height across all products */
}

/* Align price and shopping cart buttons at a fixed bottom base */
.product-description-block {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

css
/* Target the product list item wrappers */
.products .product-miniature, 
.featured-products .product-miniature {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    position: relative;
}

/* Ensure the title container does not dynamically shove pricing downward */
.product-title {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Uniform 2-line constraint */
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.8em;
    margin-bottom: 10px;
}

css
/* Force the text block to truncate cleanly at 2 lines maximum */
.product-title, .product-title a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 2.8em !important;
    text-overflow: ellipsis !important;
}

/* Align price tags neatly below the fixed text lines */
.product-price-and-shipping {
    margin-top: 10px !important;
    display: block !important;
}