/* css/landing-page.css */
* { box-sizing: border-box; }
        /* ✅ নতুন: বাটন থেকে #element-id তে ক্লিক করলে স্মুথলি স্ক্রল হবে */
        html { scroll-behavior: smooth; }
        body { margin: 0; font-family: 'Segoe UI', 'Noto Sans Bengali', system-ui, sans-serif; color: #1f2937; }
        /* ✅ ফিক্স: প্রতিটা সেকশনে ২০px প্যাডিং (উপরে+নিচে ৪০px) হার্ডকোডেড
           ছিল, একাধিক সেকশন থাকলে এটা জমে অনেক বেশি ফাঁকা জায়গা তৈরি করত।
           এখন উপরে-নিচে কমিয়ে ১২px করা হলো (পাশের ২০px অক্ষুণ্ণ), প্রয়োজনে
           প্রতিটা সেকশনে আলাদাভাবে Style ট্যাব থেকে কাস্টম প্যাডিং/স্পেসিং
           সেট করে বাড়ানো-কমানো যাবে (নিচের নতুন "স্পেসিং" কন্ট্রোল দেখুন) */
        /* ✅ সেকশনের ডিফল্ট গ্যাপ খুব ছোট (১০px) — প্রতিটা সেকশনের Layout
           ট্যাব থেকে আলাদাভাবে বাড়ানো/কমানো যায় (section_gap) */
        /* ✅ পর্ব ১ ফিক্স: আগে সেকশনে `margin-bottom: 10px` ছিল। margin
           সবসময় পেজের ব্যাকগ্রাউন্ড (সাদা) দেখায় — তাই সেকশনে রঙ দিলে
           দুই সেকশনের মাঝে একটা সাদা ফালি থেকে যেত। এখন ডিফল্ট মার্জিন
           শূন্য; ফাঁকা জায়গা দরকার হলে সেকশনের নিজের প্যাডিং বা Layout
           ট্যাবের "Section Gap" ব্যবহার করুন — তাতে সেকশনের রঙই টানা
           থাকে, সাদা দাগ পড়ে না। */
        .lp-section { padding: 8px 20px; margin: 0; }
        /* পেজের একদম নিচে বাড়তি ফাঁকা না রাখা */
        .lp-section:last-child { margin-bottom: 0 !important; }
        /* ✅ নতুন: সেকশনের Style ট্যাব থেকে সেট করা কলাম-গ্যাপ
           (--lp-col-gap)। কিছু সেট না থাকলে আগের মতোই ০ — কোনো
           ব্রেকিং চেঞ্জ নেই। */
        /* ✅ Elementor Container: সেকশনের Layout ট্যাব থেকে সেট করা
           flexbox কন্ট্রোলগুলো এখানে প্রয়োগ হয়। কিছু সেট না থাকলে
           আগের আচরণই (row / wrap / শূন্য গ্যাপ) — কোনো ব্রেকিং চেঞ্জ নেই। */
        .lp-section__row {
            display: flex;
            flex-direction: var(--lp-dir, row);
            flex-wrap: var(--lp-wrap, wrap);
            justify-content: var(--lp-justify, flex-start);
            align-items: var(--lp-align, stretch);
            column-gap: var(--lp-col-gap, 0px);
            row-gap: var(--lp-row-gap, 0px);
        }
        /* ✅ নতুন: সেকশনের Style ট্যাব থেকে "Container" বাছলে এই ক্লাস
           যোগ হয় — কন্টেন্ট মাঝখানে সীমাবদ্ধ থাকবে, বড় স্ক্রিনে দুই পাশে
           ফাঁকা জায়গা থাকবে (যেমন সাধারণ ওয়েবসাইট লেআউট)। ডিফল্ট (fluid)
           এই ক্লাস ছাড়াই — আগের মতো ফুল-উইডথ থাকবে, কোনো ব্রেকিং চেঞ্জ না। */
        /* ✅ ডিফল্ট কন্টেইনার প্রস্থ ১১৪০px (Elementor এর ডিফল্টের সমান) —
           সেকশনের Layout ট্যাব থেকে প্রতিটা সেকশনে আলাদাভাবে বদলানো যায় */
        .lp-section__row--container { max-width: var(--lp-container-w, 1140px); margin: 0 auto; width: 100%; }
        .lp-column { min-width: 0; padding: 0 8px; }
        /* ✅ নতুন: কলামের Style ট্যাব থেকে সেট করা উইজেট-গ্যাপ
           (--lp-item-gap) — কলামের ভেতরের প্রতিটা উইজেটের মাঝে।
           `> * + *` ব্যবহার করায় প্রথম উইজেটের উপরে বাড়তি ফাঁকা হয় না। */
        /* ✅ দুই উইজেটের ডিফল্ট গ্যাপ খুব ছোট (৮px) — কলামের Style ট্যাব
           থেকে আলাদাভাবে সেট করা যায় (items_gap)। সেকশন-গ্যাপ ও
           কলাম-গ্যাপের সাথে এটার কোনো সম্পর্ক নেই, সম্পূর্ণ স্বাধীন। */
        .lp-column > * + * { margin-top: var(--lp-item-gap, 8px); }
        /* ✅ উইজেটের নিজের আইটেম-গ্যাপ (গ্যালারি/ক্যারোসেল/আইকন লিস্ট/
           সোশ্যাল আইকন/প্রোডাক্ট গ্রিড) — একই কন্ট্রোল, একই ভ্যারিয়েবল */
        .lp-gallery, .lp-carousel, .lp-social-icons, .lp-icon-list, .lp-product-grid {
            gap: var(--lp-item-gap, 16px);
        }
        /* ✅ ফিক্স: বিভিন্ন উইজেটের ডিফল্ট margin-bottom কমানো হলো
           (১২px → ৮px, ডিভাইডার ২০px → ১৪px) — অনেকগুলো উইজেট একসাথে
           থাকলে এই ছোট মার্জিনগুলোই জমে বড় ফাঁকা জায়গা তৈরি করত */
        .lp-heading { margin: 0 0 8px; }
        /* ✅ ফিক্স: আগে এখানে `line-height: 1.7` হার্ডকোড করা ছিল, যেটা
           Style ট্যাব থেকে সেট করা লাইন-হাইট (wrapper এ inline style
           হিসেবে বসে) কে override করে দিত — তাই এডিটরে কাজ করলেও লাইভ
           ভিউ পেজে কোনো পরিবর্তন দেখা যেত না। এখন `inherit` করায়
           wrapper এ সেট করা মান নিচে পৌঁছায়; কিছু সেট না থাকলে
           নিচের `.lp-section` এর ডিফল্ট 1.7 ই প্রযোজ্য হয়। */
        .lp-text { margin-bottom: 8px; line-height: inherit; }
        /* ডিফল্ট লাইন-হাইট — Style ট্যাব থেকে কিছু সেট না করলে এটাই কাজ করে */
        .lp-section { line-height: 1.7; }
        .lp-image { display: block; margin-bottom: 8px; border-radius: 8px; max-width: 100%; }
        /* ✅ পর্ব ১: বাটনের সব ডিফল্ট এখন এখানে — বিল্ডার-এডিটরের
           `.wpv-button-wrap` এর সাথে হুবহু এক মান, তাই এডিটরে যে মাপে
           দেখবেন ভিউ পেজেও ঠিক সেই মাপেই দেখাবে। ফন্ট সাইজ ইচ্ছে করেই
           `inherit` — Style ট্যাবের ফন্ট সাইজ তাহলে সরাসরি কাজ করে। */
        .lp-button {
            display: inline-block;
            padding: 12px 24px;
            border-radius: 8px;
            background: #000000;
            color: #ffffff;
            font-weight: 600;
            font-size: inherit;
            font-family: inherit;
            line-height: 1.4;
            text-decoration: none;
            cursor: pointer;
        }
        .lp-divider { border: none; border-top: 1px solid #e5e7eb; margin: 14px 0; }
        .lp-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
        .lp-product-card { border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px; text-align: center; }
        .lp-product-card img { width: 100%; height: 160px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; }
        .lp-product-card h4 { margin: 8px 0 4px; font-size: 15px; }
        /* ✅ ধাপ ৫: Tabs/Accordion ইন্টারঅ্যাকটিভ স্টেট */
        .lp-tab-panel { display: none; }
        .lp-tab-panel.lp-tab-active { display: block; }
        .lp-tab-btn { padding: 8px 16px; border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; }
        .lp-tab-btn.lp-tab-active { border-color: #2563eb; color: #2563eb; font-weight: 600; }
        .lp-accordion-item { border-bottom: 1px solid #e5e7eb; padding: 10px 0; }
        .lp-accordion-head { background: none; border: none; cursor: pointer; font-weight: 600; text-align: left; width: 100%; padding: 8px 0; }
        .lp-accordion-body { display: none; padding: 8px 0; }

        /* ✅ ধাপ ৬ (অ্যানিমেশন এক্সটেনশন): এন্ট্রেন্স অ্যানিমেশন — ডিফল্টে
           opacity:0, IntersectionObserver স্ক্রল করে এলে .is-visible যোগ করবে */
        [data-animate] { opacity: 0; }
        [data-animate].is-visible { opacity: 1; }
        [data-animate="fade-in"].is-visible { animation: lpFadeIn var(--anim-duration,600ms) var(--anim-delay,0ms) both; }
        [data-animate="slide-up"].is-visible { animation: lpSlideUp var(--anim-duration,600ms) var(--anim-delay,0ms) both; }
        [data-animate="slide-down"].is-visible { animation: lpSlideDown var(--anim-duration,600ms) var(--anim-delay,0ms) both; }
        [data-animate="slide-left"].is-visible { animation: lpSlideLeft var(--anim-duration,600ms) var(--anim-delay,0ms) both; }
        [data-animate="slide-right"].is-visible { animation: lpSlideRight var(--anim-duration,600ms) var(--anim-delay,0ms) both; }
        [data-animate="zoom-in"].is-visible { animation: lpZoomIn var(--anim-duration,600ms) var(--anim-delay,0ms) both; }
        @keyframes lpFadeIn { from { opacity: 0; } to { opacity: 1; } }
        /* ✅ বাগফিক্স: এন্ট্রেন্স অ্যানিমেশনের keyframe নিজেই transform সেট
           করত (যেমন translateX), যেটা widget-এ কাস্টম Transform (rotate/
           scale/skew) থাকলে সেটাকে সম্পূর্ণ override করে ফেলত — animation
           শেষ হওয়ার পরও (fill-mode:both থাকায়)। এখন `--lp-base-transform`
           CSS ভ্যারিয়েবল দিয়ে দুটো একসাথে কম্বাইন করা হচ্ছে — widget-এর
           নিজস্ব Transform থাকলে সেটা ভ্যারিয়েবলে বসে (নিচে wrapper-এ),
           না থাকলে ডিফল্ট `none`। */
        @keyframes lpSlideUp { from { opacity: 0; transform: var(--lp-base-transform, none) translateY(40px); } to { opacity: 1; transform: var(--lp-base-transform, none) translateY(0); } }
        @keyframes lpSlideDown { from { opacity: 0; transform: var(--lp-base-transform, none) translateY(-40px); } to { opacity: 1; transform: var(--lp-base-transform, none) translateY(0); } }
        @keyframes lpSlideLeft { from { opacity: 0; transform: var(--lp-base-transform, none) translateX(40px); } to { opacity: 1; transform: var(--lp-base-transform, none) translateX(0); } }
        @keyframes lpSlideRight { from { opacity: 0; transform: var(--lp-base-transform, none) translateX(-40px); } to { opacity: 1; transform: var(--lp-base-transform, none) translateX(0); } }
        @keyframes lpZoomIn { from { opacity: 0; transform: var(--lp-base-transform, none) scale(0.8); } to { opacity: 1; transform: var(--lp-base-transform, none) scale(1); } }

        /* ✅ ধাপ ৬: Hover অ্যানিমেশন (builder.css এর সাথে হুবহু সামঞ্জস্যপূর্ণ) */
        .lp-hover-lift { transition: transform 0.25s ease, box-shadow 0.25s ease; }
        .lp-hover-lift:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0,0,0,0.15); }
        .lp-hover-scale { transition: transform 0.25s ease; }
        .lp-hover-scale:hover { transform: scale(1.05); }
        .lp-hover-glow { transition: box-shadow 0.25s ease; }
        .lp-hover-glow:hover { box-shadow: 0 0 20px rgba(37,99,235,0.5); }

        /* ✅ গ্রুপ A, পর্ব ৪: ডিভাইস-ভিত্তিক Visibility — CSS দিয়ে হাইড
           (প্রতিটা ব্রেকপয়েন্ট রেঞ্জে শুধু নিজের ক্লাসটাই কার্যকর হয়, যাতে
           একাধিক hide-ক্লাস একসাথে থাকলেও conflict না হয়) */
        @media (min-width: 992px) { .lp-hide-desktop { display: none !important; } }
        @media (max-width: 991px) and (min-width: 768px) { .lp-hide-tablet { display: none !important; } }
        @media (max-width: 767px) { .lp-hide-mobile { display: none !important; } }

        /* ✅ গ্রুপ B, পার্ব ৯ (Popup Builder ৩/৩): পপআপ ওভারলে + বক্স */
        .lp-popup-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 99999;
            align-items: center;
            justify-content: center;
        }
        .lp-popup-overlay.is-visible { display: flex; }
        .lp-popup-box {
            position: relative;
            background: #fff;
            border-radius: 12px;
            max-width: 90vw;
            max-height: 90vh;
            overflow-y: auto;
            padding: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            animation: lpPopupZoomIn 0.3s ease;
        }
        @keyframes lpPopupZoomIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
        .lp-popup-close {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: none;
            background: #f1f5f9;
            cursor: pointer;
            font-size: 14px;
            z-index: 1;
        }
        @media (max-width: 767px) {
            /* ✅ বাগফিক্স: কলামের ডেস্কটপ width ইনলাইন style="flex:0 0 50%;..."
               দিয়ে বসানো হয় (ডেটা থেকে সরাসরি) — ইনলাইন স্টাইল সবসময়
               স্টাইলশিটের ক্লাস-রুলকে হারিয়ে দেয় (!important ছাড়া), তাই
               এখানে !important ছাড়া মোবাইলে কলাম আসলে width:50% আটকেই
               থেকে যাচ্ছিল, শুধু flex-direction:column (যেটা ইনলাইনে নেই)
               প্রয়োগ হচ্ছিল — ফলে "স্ট্যাক হয়েছে কিন্তু অর্ধেক প্রস্থে আটকে"
               যে বাগ ইউজার রিপোর্ট করেছেন তা তৈরি হচ্ছিল। */
            .lp-section__row { flex-direction: column !important; }
            .lp-column { flex-basis: 100% !important; max-width: 100% !important; }
        }

        /* ✅ ফিক্স (গুরুত্বপূর্ণ): আগে এখানে `[style*="--lp-text-color"] h1, ... a`
           এমন সিলেক্টর ছিল। এটা ওই ভ্যারিয়েবলধারী এলিমেন্টের **সব** নিচের
           এলিমেন্টে মিলে যেত — তাই একটা উইজেটে রঙ বদলালে আশপাশের সব
           টেক্সটের রঙও বদলে যেত।

           এখন কোনো গ্লোবাল সিলেক্টর নেই। প্রতিটা উইজেটের ভেতরের ট্যাগগুলোকে
           শুধু `color: inherit` বলা হয়েছে — অর্থাৎ তারা নিজের র‍্যাপার
           (ওই উইজেটটাই) থেকে রঙ নেয়। ফলে প্রতিটা উইজেট সম্পূর্ণ স্বাধীন:
           একটায় রঙ দিলে অন্যটায় কোনো প্রভাব পড়ে না। উইজেটে নিজের রঙ সেট
           না থাকলে স্বাভাবিক নিয়মে উপরের সেকশন/কলামের রঙ পায় (ঠিক
           Elementor এর মতো)। */
        .lp-heading,
        .lp-text,
        .lp-text p,
        .lp-text span,
        .lp-text strong,
        .lp-text em,
        .lp-text li,
        .lp-blockquote,
        .lp-icon-list,
        .lp-icon-list li {
            color: inherit;
        }


/* css/lp-animations.css */
/* =====================================================================
   ✅ পর্ব ৩: ল্যান্ডিং পেজ অ্যানিমেশন — শেয়ার্ড স্টাইলশিট

   এই একটাই ফাইল বিল্ডার-এডিটর (builder বান্ডেল) ও লাইভ ভিউ পেজ
   (landing-page বান্ডেল) — দুই জায়গাতেই যুক্ত হয়। তাই এডিটরে যে
   অ্যানিমেশন যেভাবে চলবে, ভিউ পেজেও হুবহু সেভাবেই চলবে।

   দুই ধরনের অ্যানিমেশন এখানে আছে:
     ১. লুপ অ্যানিমেশন (lp-loop-*) — থামে না, অনবরত চলতে থাকে।
        টেক্সট, বাটন, ইমেজ — যেকোনো এলিমেন্টে দেওয়া যায়।
     ২. টেক্সট মার্কিং (lp-mark-*) — লেখার নিচে দাগ, চারপাশে গোল বা
        হাইলাইটারের মতো রঙ — বারবার আঁকা ও মুছে যাওয়া।

   গতি ও রঙ কন্ট্রোল হয় CSS ভ্যারিয়েবল দিয়ে, যেগুলো এলিমেন্টের
   inline style-এ বসে:
     --loop-duration  : লুপ অ্যানিমেশনের এক চক্রের সময়
     --loop-delay     : শুরু হতে দেরি
     --mark-color     : দাগ/গোল/হাইলাইটের রঙ
     --mark-width     : দাগের পুরুত্ব
     --mark-duration  : মার্কিং এক চক্রের সময়
   ===================================================================== */

/* ---------------------------------------------------------------
   ১. লুপ অ্যানিমেশন — অনবরত চলতে থাকে
   --------------------------------------------------------------- */
[class*="lp-loop-"] {
    animation-duration: var(--loop-duration, 1.5s);
    animation-delay: var(--loop-delay, 0s);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    /* inline-block না হলে transform কাজ করে না (span/a এর ক্ষেত্রে) */
    display: inline-block;
}

/* সেকশন/কলামে দিলে inline-block করলে লেআউট ভেঙে যেত, তাই সেখানে block */
.lp-section[class*="lp-loop-"],
.lp-column[class*="lp-loop-"],
.lp-widget-wrap[class*="lp-loop-"],
.el-node[class*="lp-loop-"] {
    display: block;
}

/* নাচ — বাঁয়ে-ডানে দুলতে থাকে */
@keyframes lpDance {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    15% { transform: rotate(-6deg) translateY(-3px); }
    30% { transform: rotate(5deg) translateY(0); }
    45% { transform: rotate(-4deg) translateY(-2px); }
    60% { transform: rotate(3deg) translateY(0); }
    75% { transform: rotate(-2deg) translateY(-1px); }
}
.lp-loop-dance { animation-name: lpDance; animation-timing-function: ease-in-out; }

/* লাফানো */
@keyframes lpJump {
    0%, 20%, 55%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-18px); }
    45% { transform: translateY(-18px); }
    70% { transform: translateY(-9px); }
    90% { transform: translateY(-3px); }
}
.lp-loop-jump { animation-name: lpJump; animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1); }

/* স্পন্দন — ছোট-বড় হতে থাকে */
@keyframes lpPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
.lp-loop-pulse { animation-name: lpPulse; animation-timing-function: ease-in-out; }

/* হৃদস্পন্দন — দুইবার ধাক্কা, তারপর বিরতি */
@keyframes lpHeartbeat {
    0%, 28%, 70%, 100% { transform: scale(1); }
    14% { transform: scale(1.14); }
    42% { transform: scale(1.14); }
}
.lp-loop-heartbeat { animation-name: lpHeartbeat; animation-timing-function: ease-out; }

/* ঝাঁকুনি */
@keyframes lpShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); }
    20%, 40%, 60%, 80% { transform: translateX(6px); }
}
.lp-loop-shake { animation-name: lpShake; animation-timing-function: ease-in-out; }

/* ভাসা — ধীরে উপরে-নিচে */
@keyframes lpFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
.lp-loop-float { animation-name: lpFloat; animation-timing-function: ease-in-out; }

/* দোলনা — উপরের কিনারা ধরে ঝুলে দোলে */
@keyframes lpSwing {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(13deg); }
    40% { transform: rotate(-9deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-4deg); }
}
.lp-loop-swing { animation-name: lpSwing; transform-origin: top center; animation-timing-function: ease-in-out; }

/* তাড়া — ঘুরে-বেড়ে মনোযোগ টানে */
@keyframes lpTada {
    0%, 100% { transform: scale(1) rotate(0deg); }
    10%, 20% { transform: scale(0.9) rotate(-3deg); }
    30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
    40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
}
.lp-loop-tada { animation-name: lpTada; animation-timing-function: ease-in-out; }

/* রাবার — টেনে ছেড়ে দেওয়ার মতো */
@keyframes lpRubber {
    0%, 100% { transform: scale(1, 1); }
    30% { transform: scale(1.25, 0.75); }
    40% { transform: scale(0.75, 1.25); }
    50% { transform: scale(1.15, 0.85); }
    65% { transform: scale(0.95, 1.05); }
    75% { transform: scale(1.05, 0.95); }
}
.lp-loop-rubber { animation-name: lpRubber; animation-timing-function: ease-out; }

/* জ্বলজ্বল — আলো ছড়ায় (বাটনে খুব ভালো লাগে) */
@keyframes lpGlow {
    0%, 100% { box-shadow: 0 0 0 0 var(--loop-glow, rgba(59, 130, 246, 0.6)); }
    50% { box-shadow: 0 0 22px 6px var(--loop-glow, rgba(59, 130, 246, 0.6)); }
}
.lp-loop-glow { animation-name: lpGlow; animation-timing-function: ease-in-out; }

/* ঘূর্ণন */
@keyframes lpSpin { to { transform: rotate(360deg); } }
.lp-loop-spin { animation-name: lpSpin; animation-timing-function: linear; }

/* ---------------------------------------------------------------
   ২. টেক্সট মার্কিং — লেখায় দাগ / গোল / হাইলাইট
   ---------------------------------------------------------------
   মূল লেখাটার ভেতরে কোনো পরিবর্তন লাগে না — র‍্যাপারেই ক্লাস বসে,
   দাগটা ::after ছদ্ম-এলিমেন্ট দিয়ে আঁকা হয়। তাই যেকোনো হেডিং,
   টেক্সট বা বাটনে কাজ করে।
   --------------------------------------------------------------- */
[class*="lp-mark-"] {
    position: relative;
    display: inline-block;
}

/* --- (ক) নিচে দাগ — বারবার আঁকা ও মুছে যায় --- */
@keyframes lpMarkUnderline {
    0% { width: 0; opacity: 1; }
    45% { width: 100%; opacity: 1; }
    75% { width: 100%; opacity: 1; }
    100% { width: 0; opacity: 0.4; }
}
.lp-mark-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.12em;
    height: var(--mark-width, 5px);
    background: var(--mark-color, #ef4444);
    border-radius: 999px;
    animation: lpMarkUnderline var(--mark-duration, 3s) ease-in-out infinite;
}

/* --- (খ) হাতে-আঁকা ঢেউখেলানো দাগ --- */
.lp-mark-scribble::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.22em;
    height: calc(var(--mark-width, 5px) * 1.6);
    background-image: repeating-linear-gradient(
        45deg,
        var(--mark-color, #ef4444) 0,
        var(--mark-color, #ef4444) 2px,
        transparent 2px,
        transparent 5px
    );
    animation: lpMarkUnderline var(--mark-duration, 3s) ease-in-out infinite;
}

/* --- (গ) চারপাশে গোল করে ঘেরা — হাতে আঁকার মতো --- */
@keyframes lpMarkCircle {
    0% { clip-path: inset(0 100% 0 0); opacity: 1; }
    45% { clip-path: inset(0 0 0 0); opacity: 1; }
    75% { clip-path: inset(0 0 0 0); opacity: 1; }
    100% { clip-path: inset(0 0 0 100%); opacity: 0.3; }
}
.lp-mark-circle::after {
    content: '';
    position: absolute;
    left: -0.4em;
    right: -0.4em;
    top: -0.22em;
    bottom: -0.22em;
    border: var(--mark-width, 4px) solid var(--mark-color, #ef4444);
    /* অসমান রেডিয়াস — তাই কম্পাসে আঁকা নয়, হাতে আঁকার মতো দেখায় */
    border-radius: 48% 52% 49% 51% / 56% 44% 58% 42%;
    transform: rotate(-1.5deg);
    pointer-events: none;
    animation: lpMarkCircle var(--mark-duration, 3.4s) ease-in-out infinite;
}

/* --- (ঘ) হাইলাইটার পেন — রঙ বুলিয়ে যায় --- */
@keyframes lpMarkHighlight {
    0% { width: 0; }
    45%, 78% { width: 100%; }
    100% { width: 0; }
}
.lp-mark-highlight::before {
    content: '';
    position: absolute;
    left: -0.15em;
    top: 12%;
    bottom: 4%;
    z-index: -1;
    background: var(--mark-color, #fde047);
    border-radius: 3px;
    transform: skewX(-8deg);
    animation: lpMarkHighlight var(--mark-duration, 3s) ease-in-out infinite;
}

/* --- (ঙ) কাটা দাগ — লেখার মাঝ বরাবর --- */
.lp-mark-strike::after {
    content: '';
    position: absolute;
    left: 0;
    top: 52%;
    height: var(--mark-width, 4px);
    background: var(--mark-color, #ef4444);
    border-radius: 999px;
    animation: lpMarkUnderline var(--mark-duration, 3s) ease-in-out infinite;
}

/* --- (চ) বক্স করে ঘেরা --- */
.lp-mark-box::after {
    content: '';
    position: absolute;
    left: -0.3em;
    right: -0.3em;
    top: -0.15em;
    bottom: -0.15em;
    border: var(--mark-width, 3px) solid var(--mark-color, #ef4444);
    border-radius: 4px;
    pointer-events: none;
    animation: lpMarkCircle var(--mark-duration, 3.4s) ease-in-out infinite;
}

/* ---------------------------------------------------------------
   ৩. অ্যাক্সেসিবিলিটি — যে ব্যবহারকারী "কম নড়াচড়া" সেটিং চালু
   রেখেছেন, তাঁর জন্য সব লুপ অ্যানিমেশন বন্ধ (ব্রাউজার/OS সেটিং)।
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    [class*="lp-loop-"],
    [class*="lp-mark-"]::after,
    [class*="lp-mark-"]::before {
        animation: none !important;
    }
    .lp-mark-underline::after,
    .lp-mark-scribble::after,
    .lp-mark-strike::after,
    .lp-mark-highlight::before {
        width: 100%;
    }
    .lp-mark-circle::after,
    .lp-mark-box::after {
        clip-path: none;
    }
}

/* =====================================================================
   ✅ পর্ব ৪: স্লাইডার / আইকন লিস্ট / কাউন্টডাউন — শেয়ার্ড স্টাইল
   (এই ফাইলটা এডিটর ও লাইভ ভিউ দুই জায়গাতেই লোড হয়, তাই চেহারা এক)
   ===================================================================== */

/* ---------- স্লাইডার ---------- */
.lp-carousel {
    position: relative;
    --slides-desktop: 1;
    --slides-mobile: 1;
    --slide-gap: 12px;
}
.lp-carousel-track {
    display: flex;
    gap: var(--slide-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.lp-carousel-track::-webkit-scrollbar { display: none; }
.lp-carousel-slide {
    flex: 0 0 calc((100% - (var(--slides-desktop) - 1) * var(--slide-gap)) / var(--slides-desktop));
    scroll-snap-align: start;
    min-width: 0;
}
@media (max-width: 768px) {
    .lp-carousel-slide {
        flex-basis: calc((100% - (var(--slides-mobile) - 1) * var(--slide-gap)) / var(--slides-mobile));
    }
}

.lp-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111827;
    background: rgba(255, 255, 255, 0.92);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    transition: background 0.15s ease, transform 0.15s ease;
}
.lp-carousel-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.lp-carousel-arrow--prev { left: 8px; }
.lp-carousel-arrow--next { right: 8px; }
.lp-carousel-arrow[disabled] { opacity: 0.35; cursor: default; }

.lp-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 10px;
}
.lp-carousel-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    background: #cbd5e1;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease, width 0.2s ease;
}
.lp-carousel-dot.is-active { background: #111827; width: 22px; border-radius: 999px; }

/* ---------- আইকন লিস্ট ---------- */
.lp-icon-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--lp-item-gap, 8px);
}
.lp-icon-list__item {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------- কাউন্টডাউন ---------- */
.lp-countdown { text-align: center; }
.lp-countdown__label { margin: 0 0 10px; }
.lp-countdown__boxes {
    display: flex;
    gap: var(--cd-gap, 10px);
    justify-content: center;
    flex-wrap: wrap;
}
.lp-cd-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: var(--cd-min-w, 74px);
    padding: var(--cd-pad, 14px) 8px;
    background: var(--cd-box-bg, #111827);
    border-radius: var(--cd-radius, 12px);
}
.lp-cd-num {
    font-size: var(--cd-num-size, 30px);
    font-weight: 800;
    line-height: 1;
    color: var(--cd-num-color, #ffffff);
    font-variant-numeric: tabular-nums;
}
.lp-cd-unit {
    font-size: var(--cd-unit-size, 11px);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--cd-unit-color, #9ca3af);
}

/* ---------- টেক্সট এডিটরের <hr> ---------- */
.lp-text hr, .wpv-editable hr {
    border: none;
    border-top: var(--hr-width, 2px) var(--hr-style, solid) var(--hr-color, #e5e7eb);
    width: var(--hr-length, 100%);
    margin: var(--hr-margin, 14px) auto;
    border-radius: 999px;
}

/* =====================================================================
   ✅ পর্ব ৫: অর্ডার ফর্ম — আধুনিক ডিজাইন (এডিটর ও ভিউ, দুই জায়গায় এক)
   ===================================================================== */
.lp-of {
    --of-accent: #16a34a;
    --of-btn-bg: var(--of-accent);
    --of-btn-color: #ffffff;
    --of-btn-size: 16px;
    --of-btn-radius: 12px;
    --of-btn-pad: 15px;
    --of-btn-width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.07);
}
.lp-of__warning {
    color: #dc2626;
    padding: 12px;
    border: 1px dashed #dc2626;
    border-radius: 8px;
}
.lp-of__title {
    margin: 0 0 16px;
    font-size: 19px;
    font-weight: 800;
    text-align: center;
}
.lp-of__section { margin-bottom: 16px; }
.lp-of__legend {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #94a3b8;
}

/* ---- প্রোডাক্ট ও অপশন কার্ড ---- */
.lp-of__product, .lp-of__option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    margin-bottom: 8px;
    background: #fff;
    border: 1.5px solid #e8ebef;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.lp-of__product:hover, .lp-of__option:hover { border-color: #cbd5e1; }
.lp-of__product input[type="radio"],
.lp-of__product input[type="checkbox"],
.lp-of__option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
/* কাস্টম টিক-বৃত্ত */
.lp-of__check {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    position: relative;
    transition: border-color 0.16s ease, background 0.16s ease;
}
.lp-of__check::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #fff;
    transform: scale(0);
    transition: transform 0.16s ease;
}
:checked ~ .lp-of__check {
    border-color: var(--of-accent);
    background: var(--of-accent);
}
:checked ~ .lp-of__check::after { transform: scale(1); }
.lp-of__product:has(:checked), .lp-of__option:has(:checked) {
    border-color: var(--of-accent);
    background: color-mix(in srgb, var(--of-accent) 6%, #fff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--of-accent) 14%, transparent);
}

.lp-of__thumb {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: 9px;
    background: #f1f5f9;
}
.lp-of__thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}
.lp-of__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
}
.lp-of__price { color: var(--of-accent); font-weight: 700; }
.lp-of__qty {
    flex: 0 0 56px;
    width: 56px;
    padding: 7px;
    text-align: center;
    border: 1.5px solid #e8ebef;
    border-radius: 8px;
}
.lp-of__opt-text { flex: 1; display: flex; flex-direction: column; font-size: 14px; }
.lp-of__opt-text small { color: #94a3b8; font-size: 11px; }

/* ---- ভাসমান-লেবেল ইনপুট ---- */
.lp-of__field { position: relative; margin-bottom: 10px; }
.lp-of__field input,
.lp-of__field textarea {
    width: 100%;
    padding: 18px 13px 7px;
    font-size: 14px;
    font-family: inherit;
    color: inherit;
    background: #fff;
    border: 1.5px solid #e8ebef;
    border-radius: 11px;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.lp-of__field textarea { resize: vertical; min-height: 62px; }
.lp-of__field input:focus,
.lp-of__field textarea:focus {
    outline: none;
    border-color: var(--of-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--of-accent) 14%, transparent);
}
.lp-of__field label {
    position: absolute;
    left: 13px;
    top: 14px;
    font-size: 14px;
    color: #94a3b8;
    pointer-events: none;
    transition: transform 0.14s ease, font-size 0.14s ease, color 0.14s ease;
    transform-origin: left top;
}
/* লেখা থাকলে বা ফোকাস করলে লেবেল উপরে উঠে ছোট হয়ে যায় */
.lp-of__field input:focus + label,
.lp-of__field textarea:focus + label,
.lp-of__field input:not(:placeholder-shown) + label,
.lp-of__field textarea:not(:placeholder-shown) + label {
    transform: translateY(-9px) scale(0.78);
    color: var(--of-accent);
}
.lp-of__field--coupon input { text-transform: uppercase; }

.lp-of__pays { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-of__pay {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: 1.5px solid #e8ebef;
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
    transition: border-color 0.16s ease, background 0.16s ease;
}
.lp-of__pay:has(:checked) {
    border-color: var(--of-accent);
    background: color-mix(in srgb, var(--of-accent) 8%, #fff);
    font-weight: 600;
}

.lp-of__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 16px 0 12px;
    padding: 13px 15px;
    font-weight: 800;
    font-size: 17px;
    background: #f8fafc;
    border-radius: 12px;
}
.lp-of__total .lp-checkout-total__amount { color: var(--of-accent); }

.lp-of__hp { position: absolute; left: -9999px; }

/* ---- অর্ডার বাটন ---- */
.lp-of__submit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: var(--of-btn-width, 100%);
    padding: var(--of-btn-pad, 15px) 26px;
    font-family: inherit;
    font-size: var(--of-btn-size, 16px);
    font-weight: 800;
    color: var(--of-btn-color, #fff);
    background: var(--of-btn-bg, #16a34a);
    border: none;
    border-radius: var(--of-btn-radius, 12px);
    cursor: pointer;
    transition: filter 0.16s ease, transform 0.12s ease;
}
.lp-of__submit:hover { filter: brightness(1.07); }
.lp-of__submit:active { transform: scale(0.985); }
.lp-of__submit[disabled] { opacity: 0.65; cursor: wait; }

.lp-of__spinner { display: none; }
.lp-of__submit.is-loading .lp-of__spinner {
    display: block;
    width: 17px;
    height: 17px;
    border: 2.5px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lpSpin 0.7s linear infinite;
}

.lp-of__status { margin: 9px 0 0; font-size: 13px; text-align: center; }

/* ছোট স্ক্রিনে একটু কম প্যাডিং */
@media (max-width: 480px) {
    .lp-of { padding: 15px; border-radius: 13px; }
}

/* =====================================================================
   ✅ নতুন উইজেট ১: মূল্য অফার (Price Offer)
   ---------------------------------------------------------------------
   ভিডিও অনুযায়ী — আগের দামের উপর লাল কলমে হাতে-আঁকা ✗ কাটা দাগ (দুটো
   ক্রস করা টান), আর অফার দামের নিচে হাতে-আঁকা আন্ডারলাইন। দুটোই
   বারবার আঁকা হয় ও মুছে যায়, অনবরত চলতে থাকে।
   ===================================================================== */
.lp-price-offer {
    --po-mark: #e11d48;
    --po-stroke: 4px;
    --po-speed: 3.2s;
    text-align: center;
}
.lp-price-offer__label {
    margin: 0 0 4px;
    font-weight: 700;
}
.lp-price-offer__row { margin: 6px 0; }

/* --- আগের দাম: ক্রস করা দুটো টান --- */
.lp-price-old {
    position: relative;
    display: inline-block;
    padding: 0 0.15em;
}
.lp-price-old::before,
.lp-price-old::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    height: var(--po-stroke);
    background: var(--po-mark);
    border-radius: 999px;
    transform-origin: left center;
    animation: lpPriceStrike var(--po-speed) ease-in-out infinite;
}
/* প্রথম টান — সামান্য উপরের দিকে হেলানো */
.lp-price-old::before { transform: translateY(-50%) rotate(-7deg); }
/* দ্বিতীয় টান — উল্টো দিকে, তাই ✗ এর মতো ক্রস হয়। সামান্য দেরিতে
   আঁকা হয়, যেন সত্যিই হাতে দুটো টান দেওয়া হয়েছে */
.lp-price-old::after {
    transform: translateY(-50%) rotate(6deg);
    animation-delay: calc(var(--po-speed) * 0.12);
}
@keyframes lpPriceStrike {
    0% { width: 0; opacity: 1; }
    30% { width: 106%; opacity: 1; }
    72% { width: 106%; opacity: 1; }
    100% { width: 0; opacity: 0.35; }
}

/* --- অফার দাম: নিচে হাতে-আঁকা দাগ --- */
.lp-price-new {
    position: relative;
    display: inline-block;
    padding: 0 0.12em;
    font-weight: 800;
    color: var(--po-new-color, inherit);
}
.lp-price-new::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.18em;
    height: calc(var(--po-stroke) * 1.1);
    background: var(--po-mark);
    /* দুই প্রান্ত সরু, মাঝখানে মোটা — কলমের টানের মতো */
    clip-path: polygon(0 45%, 4% 0, 96% 12%, 100% 60%, 96% 100%, 4% 82%);
    animation: lpPriceUnderline var(--po-speed) ease-in-out infinite;
    animation-delay: calc(var(--po-speed) * 0.3);
}
@keyframes lpPriceUnderline {
    0%, 14% { width: 0; opacity: 1; }
    42% { width: 100%; opacity: 1; }
    76% { width: 100%; opacity: 1; }
    100% { width: 0; opacity: 0.35; }
}

.lp-price-offer__note { margin: 8px 0 0; font-weight: 700; }

/* =====================================================================
   ✅ নতুন উইজেট ২: হিরো স্লাইডার (Product Hero Slider)
   ---------------------------------------------------------------------
   প্রতিটা স্লাইডে নিজস্ব ব্যাকগ্রাউন্ড রঙ, পেছনে বিশাল লেখা, সামনে
   প্রোডাক্টের ছবি ও দুই পাশে ভাসমান সাজসজ্জার ছবি।
   ===================================================================== */
.lp-hero-slider {
    position: relative;
    overflow: hidden;
    border-radius: var(--hs-radius, 16px);
}
.lp-hero-slider__viewport { position: relative; }
.lp-hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    background: var(--slide-bg, #f1f5f9);
    opacity: 0;
    visibility: hidden;
    transform: scale(1.03);
    transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s;
}
.lp-hero-slide.is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    z-index: 2;
}
/* পেছনের বিশাল লেখা */
.lp-hero-slide__bgtext {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 100%;
    text-align: center;
    font-size: var(--hs-bgtext-size, 13vw);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--slide-bgtext-color, rgba(0, 0, 0, 0.14));
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}
/* প্রোডাক্টের ছবি — আলতো করে ভাসতে থাকে */
.lp-hero-slide__img {
    position: relative;
    z-index: 3;
    max-height: var(--hs-img-height, 320px);
    width: auto;
    max-width: 82%;
    object-fit: contain;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.18));
    animation: lpFloat 4s ease-in-out infinite;
}
/* দুই পাশের সাজসজ্জার ছবি */
.lp-hero-slide__deco {
    position: absolute;
    z-index: 2;
    width: var(--hs-deco-size, 110px);
    object-fit: contain;
    pointer-events: none;
    animation: lpFloat 5.5s ease-in-out infinite;
}
.lp-hero-slide__deco--1 { left: 6%; top: 26%; animation-delay: 0.4s; }
.lp-hero-slide__deco--2 { right: 7%; top: 18%; animation-delay: 1.1s; }

.lp-hero-slide__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    z-index: 4;
    text-align: center;
    font-size: 14px;
    color: var(--slide-caption-color, #111827);
}
.lp-hero-slider__btn {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 5;
    padding: 8px 20px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--hs-btn-color, #111827);
    background: var(--hs-btn-bg, transparent);
    border: 1.5px solid currentColor;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}
.lp-hero-slider__btn:hover { background: currentColor; }
.lp-hero-slider__btn:hover span { color: var(--slide-bg, #fff); }

.lp-hero-slider__dots {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.lp-hero-slider__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    background: currentColor;
    opacity: 0.32;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: opacity 0.2s ease, height 0.2s ease;
}
.lp-hero-slider__dot.is-active { opacity: 1; height: 20px; border-radius: 999px; }

@media (max-width: 640px) {
    .lp-hero-slide__bgtext { font-size: var(--hs-bgtext-size-mobile, 17vw); }
    .lp-hero-slide__deco { width: calc(var(--hs-deco-size, 110px) * 0.6); }
}

/* =====================================================================
   ✅ নতুন উইজেট ৩: মার্কি / চলমান লেখার টিকার
   ---------------------------------------------------------------------
   "BUY NOW ✦ BUY NOW ✦ ..." — অনবরত পাশে সরতে থাকে। লেখাটা দুইবার
   রেন্ডার করা হয়, তাই কোনো ফাঁক ছাড়াই অসীমভাবে ঘুরতে থাকে।
   ===================================================================== */
.lp-marquee {
    --mq-speed: 18s;
    display: flex;
    overflow: hidden;
    padding: var(--mq-pad, 10px) 0;
    background: var(--mq-bg, #111827);
    color: var(--mq-color, #ffffff);
    border-top: var(--mq-border, 0) solid currentColor;
    border-bottom: var(--mq-border, 0) solid currentColor;
    user-select: none;
    white-space: nowrap;
}
.lp-marquee__track {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--mq-gap, 24px);
    padding-right: var(--mq-gap, 24px);
    min-width: 100%;
    animation: lpMarquee var(--mq-speed, 18s) linear infinite;
}
.lp-marquee--reverse .lp-marquee__track { animation-direction: reverse; }
.lp-marquee:hover .lp-marquee__track { animation-play-state: paused; }

@keyframes lpMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

.lp-marquee__item {
    font-size: var(--mq-size, 20px);
    font-weight: var(--mq-weight, 800);
    letter-spacing: var(--mq-spacing, 0.02em);
    text-transform: var(--mq-transform, none);
}
.lp-marquee__sep {
    font-size: calc(var(--mq-size, 20px) * 0.7);
    opacity: 0.75;
}
.lp-marquee--outline .lp-marquee__item {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--mq-color, #fff);
}

@media (prefers-reduced-motion: reduce) {
    .lp-marquee__track { animation: none; }
    .lp-hero-slide__img, .lp-hero-slide__deco { animation: none; }
}