#top-search .sec-img{display:none}#top-search .icon-wrap{transition:.2s all}#top-search .icon-wrap:hover{transform:scale(1.1)}#top-search .active:after{content:"";position:absolute;bottom:0;left:50%;margin-left:-8px;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #fff}#top-search .active .icon-wrap{background-color:#ff6072;transform:scale(1.1)}#top-search .active .sec-img{display:block}#top-search .active .def-img{display:none}#scene-nav .arrow-com{position:absolute;top:0;margin-top:4px;height:100%;width:40px;display:flex;align-items:center}#scene-nav .arrow-btn{height:30px;width:30px;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;border-radius:9999px;--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity));box-shadow:0 2px 12px 1px rgba(0,0,0,.08)}#scene-nav .arrow-left{background:linear-gradient(90deg,#fff,transparent)}#scene-nav .arrow-right{background:linear-gradient(270deg,#fff,transparent)}#rec-all .arrow-com{pointer-events:none;position:absolute;top:0;z-index:3;height:100%;width:40px;display:flex;align-items:center}#rec-all .arrow-btn{pointer-events:auto;height:30px;width:30px;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;border-radius:9999px;--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity));box-shadow:0 2px 12px 1px rgba(0,0,0,.08)}#rec-all .arrow-left{background:linear-gradient(90deg,#fff,transparent)}#rec-all .arrow-right{background:linear-gradient(270deg,#fff,transparent)}#rec-all .list-item-com{width:calc((100% - 72px)/4)}@media (min-width: 1416px){.list-item-com{width:calc((100% - 96px)/5)!important}}@media (min-width: 1536px){.list-item-com{width:calc((100% - 24px * 5) / 6)!important}}@media (min-width: 1864px){.list-item-com{width:calc((100% - 24px * 6) / 7)!important}}@media (min-width: 2088px){.list-item-com{width:calc((100% - 168px)/8)!important}}@media (min-width: 2324px){.list-item-com{width:calc((100% - 24px * 8) / 9)!important}}.stick-bar .stick-item{margin-right:8px;min-width:80px;flex-shrink:0;cursor:pointer;overflow:hidden;border-radius:8px;padding:10px 12px;text-align:center;font-size:14px;--un-text-opacity:1;color:rgb(51 51 51 / var(--un-text-opacity));line-height:20px;transition:.3s all}.stick-bar .stick-item:hover{--un-bg-opacity:1;background-color:rgb(247 248 249 / var(--un-bg-opacity))}.stick-bar .active{background:#f2f2f2!important}.stick-bar .arrow-com{pointer-events:none;position:absolute;top:0;z-index:3;height:100%;width:40px;display:flex;align-items:center}.stick-bar .arrow-btn{pointer-events:auto;height:30px;width:30px;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;border-radius:9999px;--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity));box-shadow:0 2px 12px 1px rgba(0,0,0,.08)}.stick-bar .arrow-left{background:linear-gradient(90deg,#fff,transparent)}.stick-bar .arrow-right{background:linear-gradient(270deg,#fff,transparent)}

/* ==========================================================================
   Template Card Action Buttons Overlay (Preview & Use Template)
   Balanced vertical centering, distinct separation (14px gap), and responsive styling
   ========================================================================== */
#rec-all .handle-cover,
.handle-cover {
    bottom: 44px !important;
}

#rec-all .handle-cover .tpl-action-btns,
.handle-cover .tpl-action-btns {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 28px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 24px !important;
    gap: 14px !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
}

#rec-all .handle-cover .tpl-title-overlay,
.handle-cover .tpl-title-overlay {
    position: absolute !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 40px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 0 12px !important;
    z-index: 2 !important;
}

#rec-all .handle-cover .btn-preview-tpl,
.handle-cover .btn-preview-tpl,
#rec-all .handle-cover .btn-use-tpl,
.handle-cover .btn-use-tpl,
#rec-all .handle-cover a[href*="/builder"],
.handle-cover a[href*="/builder"] {
    width: 100% !important;
    max-width: 196px !important;
    height: 38px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    letter-spacing: 0.01em !important;
    margin: 0 !important;
}

#rec-all .handle-cover .btn-preview-tpl,
.handle-cover .btn-preview-tpl {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14) !important;
}

#rec-all .handle-cover .btn-preview-tpl:hover,
.handle-cover .btn-preview-tpl:hover {
    background-color: #f9fafb !important;
    color: #111827 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important;
}

#rec-all .handle-cover .btn-use-tpl,
.handle-cover .btn-use-tpl,
#rec-all .handle-cover a[href*="/builder"],
.handle-cover a[href*="/builder"] {
    background: linear-gradient(135deg, #f06272 0%, #ed5566 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(237, 85, 102, 0.35) !important;
}

#rec-all .handle-cover .btn-use-tpl:hover,
.handle-cover .btn-use-tpl:hover,
#rec-all .handle-cover a[href*="/builder"]:hover,
.handle-cover a[href*="/builder"]:hover {
    background: linear-gradient(135deg, #e04b5d 0%, #d94455 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(237, 85, 102, 0.5) !important;
}

/* Compact rules for horizontal video cards (~165px height) */
#rec-all [style*="height: 16"] .handle-cover .tpl-action-btns,
[style*="height: 16"] .handle-cover .tpl-action-btns {
    bottom: 0 !important;
    gap: 8px !important;
    padding: 0 16px !important;
}

#rec-all [style*="height: 16"] .handle-cover .btn-preview-tpl,
#rec-all [style*="height: 16"] .handle-cover a[href*="/builder"],
[style*="height: 16"] .handle-cover .btn-preview-tpl,
[style*="height: 16"] .handle-cover a[href*="/builder"] {
    height: 30px !important;
    font-size: 12px !important;
    max-width: 170px !important;
}
/* ==========================================================================
   CineLove Hero Banner - Continuous Looping Background Animation
   ========================================================================== */
@keyframes weddingmeBannerLoop {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

.weddingme-banner-track {
    display: flex;
    width: max-content;
    height: 100%;
    animation: weddingmeBannerLoop 120s linear infinite;
    will-change: transform;
}

#top-search:hover .weddingme-banner-track {
    animation-play-state: paused;
}

/* ==========================================================================
   Hero Content Entrance Animations (Slow & Smooth Cinematic Entrance)
   ========================================================================== */
@keyframes heroSlideDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -35px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes heroFadeIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 15px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes heroCtaFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.96);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.hero-anim-down {
    animation: heroSlideDown 2s cubic-bezier(0.25, 1, 0.5, 1) both;
}

.hero-anim-fade {
    animation: heroFadeIn 2.4s cubic-bezier(0.25, 1, 0.5, 1) 0.6s both;
}

.hero-anim-cta {
    animation: heroCtaFadeIn 2s cubic-bezier(0.25, 1, 0.5, 1) 1.2s both;
}