.elementor-14 .elementor-element.elementor-element-ba5a101{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-14 .elementor-element.elementor-element-8cd7ce6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-14 .elementor-element.elementor-element-b15e4ab{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-14 .elementor-element.elementor-element-5d96ecc{--display:flex;}.elementor-14 .elementor-element.elementor-element-d694fde{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-14 .elementor-element.elementor-element-9b9858f{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:-0px -0px -0px -0px;}.elementor-14 .elementor-element.elementor-element-9b9858f.elementor-element{--align-self:center;}.elementor-14 .elementor-element.elementor-element-601064f > .elementor-widget-container{margin:-27px 0px 0px 0px;}.elementor-14 .elementor-element.elementor-element-d3b4ad8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-14 .elementor-element.elementor-element-6899b88{--display:flex;}.elementor-14 .elementor-element.elementor-element-3ba3563{--display:flex;}@media(max-width:767px){.elementor-14 .elementor-element.elementor-element-5d96ecc{--margin-top:-72px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for html, class: .elementor-element-9b9858f */<!-- START: Velinor Flexible Align Title (v6) -->
<div id="velinor-flexible-title-v6">

    <!-- Styles are scoped to this unique ID to prevent conflicts -->
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');

        /* --- Main Title Wrapper --- */
        /* This wrapper NO LONGER forces alignment. It lets Elementor control it. */
        #velinor-flexible-title-v6 {
            width: 100%;
            /* The parent container (Elementor column) will handle the alignment. */
            padding: 20px 0;
        }

        /* --- Animated Title Styling --- */
        #velinor-flexible-title-v6 .flexible-title-text {
            /* This is the key change: 'inline-block' allows the element to be aligned
               like text using Elementor's Horizontal Align controls. */
            display: inline-block;

            /* Visual styles remain the same */
            background: linear-gradient(90deg, #a855f7, #f97316);
            padding: 15px 30px;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            color: white;
            font-family: 'Poppins', sans-serif;
            font-size: 2.5rem;
            font-weight: 700;
            text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.25);
            transition: opacity 0.4s ease-in-out;
        }

        /* Responsive adjustments for mobile */
        @media (max-width: 768px) {
            #velinor-flexible-title-v6 .flexible-title-text {
                font-size: 1.8rem;
                padding: 12px 25px;
            }
        }
    </style>

    <h2 class="flexible-title-text"></h2>

    <script>
        (function() {
            document.addEventListener('DOMContentLoaded', function() {
                const titleElement = document.querySelector('#velinor-flexible-title-v6 .flexible-title-text');
                if (titleElement) {
                    const phrases = ["Hot Selling", "New Arrivals", "Trending Now"];
                    let phraseIndex = 0;

                    function updateTitleText() {
                        titleElement.style.opacity = 0;
                        setTimeout(() => {
                            phraseIndex = (phraseIndex + 1) % phrases.length;
                            titleElement.textContent = phrases[phraseIndex];
                            titleElement.style.opacity = 1;
                        }, 400);
                    }

                    titleElement.textContent = phrases[0];
                    setInterval(updateTitleText, 3500);
                }
            });
        })();
    </script>

</div>
<!-- END: Velinor Flexible Align Title -->/* End custom CSS */
/* Start custom CSS for wd_products, class: .elementor-element-601064f *//* 1. Hide the product categories from the shop page */
.wd-product-cats {
    display: none;
}

/* 2. Add rounded corners to all products in the grid */
.wd-product {
    border-radius: 12px;
    overflow: hidden; /* Important: This makes the image inside respect the rounded corners */
}

/* 3. Hide any REAL star ratings to avoid duplicates */
.product-grid-item .star-rating {
    display: none;
}

/* 4. Add a FAKE 5-star rating after the product title */
.wd-product .wd-entities-title::after {
    content: '★★★★★'; /* This is the 5-star text */
    color: #FFC107;      /* This is a gold/yellow color for the stars */
    display: block;      /* Puts the stars on their own line */
    text-align: center;  /* Aligns the stars to the center */
    margin-top: 8px;     /* Adds some space below the product title */
    font-size: 1em;      /* Adjust the size of the stars if needed */
}/* End custom CSS */