@charset "utf-8";
/* ==========================================================================
   CORE UI LOGIC & LAYOUT ARCHITECTURE
   ==========================================================================
   MODULE: RTL Layout Engine & State Management
   AUTHOR: Senior Developer
   
   DESCRIPTION:
   This stylesheet serves as the primary controller for advanced UI behaviors.
   It manages:
   1. Strict Stacking Contexts (Z-Index Hierarchy) for tooltips and headers.
   2. Layout enforcement for Right-to-Left (RTL) grid alignment.
   3. Component-level overrides to ensure UI stability across devices.
   ========================================================================== */

/* =======================================================
   1. HERO SECTION: LAYOUT & TYPOGRAPHY (RTL)
   ======================================================= */

/* Force 'Transform your look' text to right */
[dir="rtl"] .section-cosmetic-hero-shop .text-body-1 {
    text-align: right !important;
}

/* Force icons to align start (Right in RTL) */
[dir="rtl"] .environment-list {
    justify-content: flex-start !important; 
    display: flex !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Hero Slide & Text Alignment */
[dir="rtl"] .swiper-hero-main-thumb .swiper-slide {
    display: flex !important;
    justify-content: flex-start !important;
}

[dir="rtl"] .section-cosmetic-hero-shop .col-left {
    text-align: right !important;
    margin-right: 0 !important;
    margin-left: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

[dir="rtl"] .title-slide, 
[dir="rtl"] .fade-item-2 {
    width: 100% !important;
    text-align: right !important;
    display: flex !important;
    justify-content: flex-start !important;
}

[dir="rtl"] .title-slide {
    font-family: "Heebo", sans-serif !important;
}

/* Explore Now Button Alignment */
[dir="rtl"] .section-cosmetic-hero-shop .fade-item-2 {
    display: flex !important;
    justify-content: flex-start !important;
    margin-right: 0 !important;
    margin-left: auto !important;
    width: 100% !important;
}

[dir="rtl"] .section-cosmetic-hero-shop .btn-wrap {
    margin-right: 0 !important;
    margin-left: auto !important;
}

/* =======================================================
   2. HERO ICONS: PLATINUM GLOW & SCALE EFFECT
   ======================================================= */

/* Base State - Platinum Color & Soft Glow */
.environment-list li i.mdi {
    color: #E5E4E2 !important; 
    text-shadow: 0 0 8px rgba(229, 228, 226, 0.5) !important;
    transition: all 0.4s ease-in-out !important;
    background: transparent !important;
}

/* Hover Effect - Subtle Zoom & Brighter Glow */
.environment-list li {
    transition: all 0.4s ease-in-out !important;
    cursor: pointer;
}

.environment-list li:hover {
    transform: scale(1.15) !important; /* Scale without shifting layout */
}

.environment-list li:hover i.mdi {
    color: #FFFFFF !important;
    text-shadow: 0 0 15px rgba(255, 255, 255, 1) !important;
}

/* =======================================================
   3. RESPONSIVE HEIGHT & SPACING (NO-SCROLL FIX)
   ======================================================= */

/* --- DESKTOP: Lift items up to prevent scrolling --- */
@media (min-width: 992px) {
    [dir="rtl"] .section-cosmetic-hero-shop .container-5 > .row.d-flex.align-items-end {
        margin-top: -50px !important; 
    }
    [dir="rtl"] .environment-list {
        margin-bottom: 18px !important; 
        margin-top: -15px !important; 
    }
    [dir="rtl"] .section-cosmetic-hero-shop .text-body-1 {
        line-height: 1.2 !important;
    }
}

/* --- MOBILE: Reset to original order to avoid collision --- */
@media (max-width: 991px) {
    [dir="rtl"] .section-cosmetic-hero-shop .container-5 > .row.d-flex.align-items-end {
        margin-top: 30px !important; 
    }
    [dir="rtl"] .environment-list {
        justify-content: center !important;
        margin-top: 25px !important;
        margin-bottom: 15px !important;
    }
    [dir="rtl"] .section-cosmetic-hero-shop .text-body-1 {
        text-align: center !important;
        line-height: 1.4 !important;
    }
}

/* =======================================================
   HERO PRODUCT BOXES: FINAL RTL & POSITIONING FIX
   ======================================================= */

/* 1. Move the Action List (Plus/Cross Icon) to the LEFT */
[dir="rtl"] .swiper-hero-thumb .action-shop-list {
    right: auto !important;
    left: 10px !important;
    margin-right: 0 !important;
    display: block !important; 
}

/* Force the Plus icon container to stay Left */
[dir="rtl"] .swiper-hero-thumb .btn-add-shop {
    right: auto !important;
    left: 0 !important;
    float: left !important;
}

/* 2. Keep Badges Beside Each Other on the RIGHT */
[dir="rtl"] .swiper-hero-thumb .product-badge-list {
    right: 10px !important;
    left: auto !important;
    display: flex !important;
    flex-direction: row !important; 
    gap: 5px !important;
    justify-content: flex-end !important;
}

/* 3. Align Text to the Right without adding height */
[dir="rtl"] .swiper-hero-thumb .card-product_info {
    text-align: right !important;
    direction: rtl !important;
    padding: 10px 15px !important;
}

/* 4. Maintain Hero Height (No Scrolling) */
.swiper-hero-thumb .card-product {
    margin-bottom: 0 !important;
    height: auto !important;
}

/* =======================================================
   HERO PRODUCT BOX: CATEGORY TEXT
   ======================================================= */
[dir="rtl"] .swiper-hero-thumb .product__cate {
    font-family: 'Heebo', sans-serif !important;
    font-weight: 500 !important; 
    font-size: 14px !important;  
    letter-spacing: 0.5px !important;
    color: #9066ff !important; /* Light Purple to stand out on dark cards */
    text-align: right !important;
    margin-bottom: 4px !important;
    display: block !important;
}

/* =======================================================
   BEBLOOM MASTER STYLE: HEBREW REVEAL + LIGHT PURPLE GLOW
   ======================================================= */

.bebloom-motion-wrapper {
    background: transparent;
    padding: 25vh 0;
    display: flex;
    justify-content: center; 
    align-items: center;     
    width: 100% !important;
    overflow: hidden;
    direction: rtl !important; /* Fixed for Hebrew */
}

.bebloom-reveal-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: center;
    margin: 0 auto !important; 
    width: 100%;
}

.bebloom-reveal-line {
    font-family: 'Heebo', sans-serif !important; /* Switched to Heebo for perfect Hebrew typography */
    font-weight: 700 !important; /* Bolder looks better for large Hebrew text */
    font-size: 11vw !important;  
    line-height: 1.1 !important;
    display: block;
    margin: 0 auto !important;
    white-space: nowrap;
    
    /* INITIAL STATE: Blends into your #1c1c1c background */
    color: #1c1c1c; 
    opacity: 0;
    transform: translateY(80px); 
    transition: all 1.8s cubic-bezier(0.15, 0.85, 0.35, 1);
    filter: blur(25px); 
    will-change: transform, opacity, filter;
}

/* THE BEBLOOM GLOW: Hyper-Realistic Studio Platinum */
.bebloom-reveal-line.active {
    /* 1. THE CORE: Icy, luminous silver (much cleaner than flat gray) */
    color: #F2F2F7 !important; 
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    
    /* 2. THE 3D GLOW (Layered Cinematic Lighting)
       Layer 1: A tight, bright white rim-light to make the edges pop.
       Layer 2: A medium, cool-toned metallic halo.
       Layer 3: A massive, deep ambient dispersion (studio light bleed).
    */
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 0.5), 
        0 15px 30px rgba(190, 190, 210, 0.4), 
        0 30px 70px rgba(140, 140, 160, 0.3) !important; 
}

/* MOBILE OPTIMIZATION: BEBLOOM RESPONSIVE FIX */
@media (max-width: 768px) {
    .bebloom-reveal-line {
        font-size: 16vw !important; 
        white-space: normal !important; 
        word-wrap: break-word !important;
        width: 90% !important;
        margin: 0 auto !important;
        transform: translateY(40px);
        filter: blur(15px);
    }
    .bebloom-reveal-container {
        gap: 5px;
        padding: 0 20px; 
    }
    .bebloom-motion-wrapper {
        padding: 10vh 0;
    }
}

@media (max-width: 380px) {
    .bebloom-reveal-line {
        font-size: 18vw !important; 
    }
}



/* =======================================================
   TAB PRODUCTS: MATCHING YOUR PHOTOSHOP DESIGN
   ======================================================= */
.card-product {
    background-color: #242424 !important; 
    border: none !important; 
    border-radius: 8px !important; 
    transition: all 0.3s ease !important;
}

.card-product .card-product_wrapper {
    background-color: #242424 !important;
    overflow: hidden !important;
}

.card-product .product-img img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

.card-product_info {
    background-color: #242424 !important;
    padding: 15px !important;
}

.card-product .product__name {
    color: #E5E4E2 !important; 
}

.card-product .price-new {
    color: #FFFFFF !important; 
}

/* =======================================================
   BEAUTIFUL SECTION: CENTERED + SCALED + LOCKED
   ======================================================= */
[dir="rtl"] .section-cosmetic-beautiful .ic-head {
    display: flex !important;           
    align-items: center !important;     
    justify-content: center !important; 
    margin: 0 auto 20px auto !important; 
    width: 90px !important;
    height: 90px !important;
    background-color: #141414 !important; 
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; 
    transform-origin: center center !important; 
}

[dir="rtl"] .section-cosmetic-beautiful .ic-head i,
[dir="rtl"] .section-cosmetic-beautiful .ic-head .mdi {
    font-size: 55px !important;
    line-height: 1 !important;
    color: #E5E4E2 !important; 
    text-shadow: 0 0 8px rgba(229, 228, 226, 0.6) !important;
    background: transparent !important;
    margin: 0 !important; 
    padding: 0 !important;
}

[dir="rtl"] .section-cosmetic-beautiful .ic-head:hover {
    transform: scale(1.15) !important; 
    background-color: #1A1A1A !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5) !important;
}

[dir="rtl"] .section-cosmetic-beautiful .ic-head:hover i {
    color: #FFFFFF !important;
    text-shadow: 0 0 15px rgba(255, 255, 255, 1) !important;
}

/* =======================================================
   HOME SLIDER: FIX GAP, ALIGNMENT & FONTS
   ======================================================= */
[dir="rtl"] .title-slide {
    text-align: right !important; 
    width: fit-content !important; 
    max-width: 100% !important;
    display: block !important; 
    justify-content: flex-start !important;
    font-family: 'Heebo', sans-serif !important;
    line-height: 1.2 !important;
    padding-right: 0 !important; 
}

[dir="rtl"] .title-slide span {
    display: inline !important; 
    word-spacing: normal !important; 
    letter-spacing: normal !important;
}

[dir="rtl"] .title-slide .fw-normal { font-weight: 300 !important; }
[dir="rtl"] .title-slide .fw-bold { font-weight: 700 !important; }

/* =======================================================
   2. FOOTER: OBSIDIAN MAGAZINE EDITION V3 (CLEAN)
   ======================================================= */

.tf-footer-5,
.tf-footer-5 .tf-footer-wrap {
    padding-top: 80px;
    border-radius: 30px 30px 0 0;
    background-image: none !important; 
    background: linear-gradient(180deg, #1C1C1C 0%, #000000 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #EBEBF5 !important;
}

.tf-footer-5 .mag-title {
    font-size: 2rem !important; 
    font-weight: 900 !important;
    letter-spacing: 4px !important;
    color: #EBEBF5 !important;
    margin-bottom: 20px !important;
}

.tf-footer-5 .mag-subtitle {
    font-size: 1.2rem !important; 
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: #9066ff !important; 
    margin-bottom: 25px !important;
}

.tf-footer-5 .footer-description {
    font-size: 0.95rem !important;
    line-height: 1.8 !important;
    opacity: 0.7 !important;
    color: #EBEBF5 !important;
}

.footer-socials {
    display: flex !important;
    gap: 20px !important; 
    margin-top: 25px !important;
}
.footer-socials .social-link i {
    font-size: 28px !important; 
    color: #EBEBF5 !important;
    transition: all 0.3s ease !important;
}
.footer-socials .social-link:hover i {
    color: #9066ff !important; 
    transform: scale(1.15) !important;
}

.tf-footer-5 .mag-link {
    color: #EBEBF5 !important;
    opacity: 0.8;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-block;
    padding: 6px 0;
    font-size: 1rem !important; 
}
.tf-footer-5 .mag-link:hover {
    color: #9066ff !important; 
    transform: translateX(-5px); 
    opacity: 1;
}

.bebloom-digital-signature {
    color: #FFFFFF !important;
    font-weight: 900 !important;
    letter-spacing: 3px !important;
    font-size: 0.75rem !important;
    margin-top: 5px !important;
    text-transform: uppercase;
}

.tf-footer-5 .text-copy {
    color: #EBEBF5 !important;
    opacity: 0.5 !important;
}

.footer-main-grid {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
}

.footer-bottom_cont {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 15px !important;
}

.footer-spacer, .ft-bottom-center, .payment-col {
    flex: 1 !important; 
}
.ft-bottom-center { text-align: center !important; }

.payment-col {
    display: flex !important;
    justify-content: flex-end !important; 
}

.tf-footer-5 .br-line.line-foot {
    background-color: rgba(235, 235, 245, 0.1) !important;
}

/* =======================================================
   MOBILE RESPONSIVE & MENU FIX
   ======================================================= */
@media (max-width: 991px) {
    .footer-main-grid { text-align: center !important; flex-direction: column !important; }
    .footer-bottom_cont { flex-direction: column !important; gap: 20px !important; }
    .footer-socials { justify-content: center !important; }
    .payment-col { justify-content: center !important; }
    
    .tf-footer-5 .tf-collapse-content {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
    }
    .tf-footer-5 .footer-col-block {
        margin-bottom: 25px !important;
    }
}

/* =======================================================
   3. GLOBAL UI ELEMENTS
   ======================================================= */
::-webkit-scrollbar { width: 10px !important; }
::-webkit-scrollbar-track { background: #1c1c1c !important; }
::-webkit-scrollbar-thumb {
    background-color: #4B1450 !important; /* Changed to Velvet Purple */
    border-radius: 6px !important;
    border: 2px solid #1c1c1c !important;
}
::-webkit-scrollbar-thumb:hover { background-color: #8224e3 !important; }

:root, body, h1, h2, h3, h4, h5, h6, 
.title, .btn, .action, span, p, a, li, input {
    font-family: 'Heebo', sans-serif !important;
}
h1, h2, h3, .title { font-weight: 800 !important; letter-spacing: normal !important; }
.title span { font-weight: 300 !important; font-family: 'Heebo', sans-serif !important; }

/* =======================================================
   FINAL MARQUEE FIX
   ======================================================= */
.infiniteSlide-container {
    width: 100% !important;
    overflow: hidden !important;
    background: transparent !important;
    display: block;
    position: relative;
    padding-top: 50px !important;  
    padding-bottom: 50px !important; 
}
.infiniteSlide-track {
    display: flex !important;
    width: max-content !important;
    align-items: center !important; 
    transform: translate3d(0, 0, 0);
    will-change: transform;
    animation-name: seamlessLoopRight;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.slide-group {
    display: flex !important;    
    align-items: center !important; 
}

@keyframes seamlessLoopRight {
    0%   { transform: translate3d(-50%, 0, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

.infiniteSlide-track h2.loop-text {
    font-family: 'Heebo', sans-serif !important;
    font-weight: 500 !important; 
    font-size: 55px !important;
    color: #EBEBF5 !important; /* Platinum instead of gray */
    letter-spacing: 0.5px !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    line-height: 1 !important; 
}

.br-dot {
    width: 10px !important;      
    height: 10px !important;     
    background-color: #9066ff !important; /* Light Purple dot */
    border-radius: 50% !important;
    margin-left: 60px !important;
    margin-right: 60px !important;
    flex-shrink: 0; 
    display: inline-block !important; 
}

.infiniteSlide-container:active .infiniteSlide-track { animation-play-state: paused !important; cursor: grabbing; }
@media (hover: hover) { .infiniteSlide-container:hover .infiniteSlide-track { animation-play-state: paused !important; cursor: grab; } }

/* =======================================================
   4. PRODUCT GRID & HEADERS
   ======================================================= */
[dir="rtl"] .section-comestic-tab-product .h4 {
    color: #FFFFFF !important;
    font-family: 'Heebo', sans-serif !important;
    font-weight: 700 !important;
}

[dir="rtl"] .section-comestic-tab-product .s-header-2 a.tf-btn-line span.text-body-1.fw-medium {
    color: #EBEBF5 !important;
    font-size: 28px !important;
    font-family: 'Heebo', sans-serif !important;
    font-weight: 400 !important;
    -webkit-text-fill-color: #EBEBF5 !important;
}

[dir="rtl"] .section-comestic-tab-product a.tf-btn-line::after {
    background-color: #EBEBF5 !important;
    height: 1px !important;
    opacity: 0.8 !important;
}

[dir="rtl"] .section-comestic-tab-product .s-header-2 {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 40px !important;
}

/* --- BADGE FIX: PLATINUM OVER PURPLE BACKGROUND --- */
[dir="rtl"] .section-comestic-tab-product .product-badge {
    font-size: 14px !important; 
    font-family: 'Heebo', sans-serif !important;
    font-weight: 700 !important; 
    text-transform: uppercase !important; 
    letter-spacing: 1.5px !important; 
    line-height: 1 !important;
    padding: 6px 14px !important;
    height: auto !important;
    min-height: 30px !important;
    border-radius: 2px !important; 
    
    background-color: #4B1450 !important; /* Velvet Purple */
    color: #EBEBF5 !important; /* PLATINUM TEXT FIX (Was Black) */
    box-shadow: 0 2px 8px rgba(75, 20, 80, 0.4) !important; /* Purple Shadow */
}

/* =======================================================
   5. PRODUCT ACTIONS (HOVER BUTTONS)
   ======================================================= */
[dir="rtl"] .card-product .action-shop-list {
    position: relative !important;
    overflow: visible !important;
    z-index: 20 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[dir="rtl"] .card-product .btn-add-shop {
    position: relative !important;
    z-index: 5 !important;
    background-color: #f2f2f2;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

[dir="rtl"] .card-product .product-action-list {
    position: absolute !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    bottom: 100% !important; 
    left: 50% !important;
    transform: translateX(-50%) translateY(10px) !important;
    margin-bottom: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

[dir="rtl"] .card-product .action-shop-list:hover .product-action-list,
[dir="rtl"] .card-product .action-shop-list.active .product-action-list {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
    transform: translateX(-50%) translateY(0) !important;
}

[dir="rtl"] .card-product .product-action-list .action-card {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    color: #000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    transition: all 0.2s ease !important;
}

/* BUTTON HOVER FIX (WAS INVISIBLE WHITE) */
[dir="rtl"] .card-product .product-action-list .action-card:hover {
    background: #4B1450 !important; /* Velvet Purple */
    color: #FFFFFF !important; /* White Icon */
}

/* =======================================================
   6. Z-INDEX FIXES (HEADER & TOOLTIPS)
   ======================================================= */
[dir="rtl"] .card-product:hover {
    z-index: 100 !important; 
    position: relative !important;
}
[dir="rtl"] .tooltip {
    z-index: 999 !important;
    white-space: nowrap !important;
}
header, #header, .header, .tf-header, .header-inner, .header-sticky {
    z-index: 1001 !important; 
    position: relative;
}
.section-comestic-tab-product {
    z-index: 1 !important; 
    position: relative !important;
}

/* =======================================================
   7. BEAUTIFUL SECTION (ZIGZAG LAYOUT & LUXURY COLORS)
   ======================================================= */
[dir="rtl"] .icon-triple-leave,
[dir="rtl"] .section-cosmetic-beautiful .s-header-3 .icon {
    color: #E5E4E2 !important; 
    fill: #E5E4E2 !important;
    filter: drop-shadow(0px 0px 8px rgba(229, 228, 226, 0.4)) !important; 
}

[dir="rtl"] .section-cosmetic-beautiful .s-header-3 h3,
[dir="rtl"] .section-cosmetic-beautiful .s-header-3 .title {
    color: #FFFFFF !important;
    font-family: 'Heebo', sans-serif !important;
    font-weight: 800 !important;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3) !important; 
}

[dir="rtl"] .wg-icon-2 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background-color: #141414 !important; 
    border: 1px solid #333333 !important; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.6) !important;
    border-radius: 8px !important; 
    min-height: 320px; 
}

[dir="rtl"] .section-cosmetic-beautiful .wg-icon-2 .icon,
[dir="rtl"] .section-cosmetic-beautiful .wg-icon-2 svg,
[dir="rtl"] .section-cosmetic-beautiful .wg-icon-2 i,
[dir="rtl"] .section-cosmetic-beautiful .wg-icon-2 span.icon-box {
    color: #E5E4E2 !important;
    fill: #E5E4E2 !important;
    stroke: #E5E4E2 !important;
    filter: drop-shadow(0px 0px 6px rgba(255, 255, 255, 0.4)) !important;
}

[dir="rtl"] .section-cosmetic-beautiful .wg-icon-2 .title {
    font-family: 'Heebo', sans-serif !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    margin-bottom: 10px !important;
    background: linear-gradient(135deg, #FFFFFF 0%, #D9D9D9 50%, #A6A6A6 100%) !important;
    -webkit-background-clip: text !important;

    background-clip: text !important;
    color: transparent !important;
}

[dir="rtl"] .section-cosmetic-beautiful .sub-title {
    font-family: 'Heebo', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;            
    color: #ABABAB !important; 
}

/* DESKTOP */
@media (min-width: 992px) {
    [dir="rtl"] .section-cosmetic-beautiful .ms-auto { margin: 0 !important; }
    [dir="rtl"] .section-cosmetic-beautiful .container-5 { position: relative !important; margin: 0 auto !important; }
    [dir="rtl"] .section-cosmetic-beautiful .row { display: flex !important; gap: 10px !important; }
    [dir="rtl"] .section-cosmetic-beautiful .row:first-of-type { 
        justify-content: flex-end !important; 
        margin-bottom: 380px !important; 
    }
    [dir="rtl"] .section-cosmetic-beautiful .row.row-s2 { justify-content: flex-start !important; }
    [dir="rtl"] .section-cosmetic-beautiful .wg-icon-2.s1 { transform: translateY(-130px) !important; margin-top: 0 !important; }
    [dir="rtl"] .section-cosmetic-beautiful .wg-icon-2.s2 { transform: translateY(0) !important; margin-top: 0 !important; }
    [dir="rtl"] .section-cosmetic-beautiful .img-item.item-1 {
        position: absolute !important;
        left: 0 !important; right: 0 !important;
        margin-left: auto !important; margin-right: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important; 
        z-index: 10 !important; 
        width: auto !important;
        max-width: 650px !important;
        pointer-events: none !important;
    }
    [dir="rtl"] .section-cosmetic-beautiful .img-item:not(.item-1) { z-index: 0 !important; position: absolute !important; }
    [dir="rtl"] .section-cosmetic-beautiful .wrap { padding-top: 160px !important; padding-bottom: 120px !important; overflow: visible !important; }
}

/* MOBILE */
@media (max-width: 991px) {
    [dir="rtl"] .section-cosmetic-beautiful .wrap { position: relative !important; }
    [dir="rtl"] .section-cosmetic-beautiful .row {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important; 
        align-items: center !important;
        position: relative !important;
        z-index: 5 !important; 
        margin-bottom: 15px !important; 
    }
    [dir="rtl"] .section-cosmetic-beautiful .wg-icon-2.s1,
    [dir="rtl"] .section-cosmetic-beautiful .wg-icon-2.s2 { transform: none !important; margin-top: 0 !important; }
    [dir="rtl"] .section-cosmetic-beautiful .img-item.item-1 {
        position: absolute !important;
        top: 50% !important; left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin-top: 100px !important; 
        z-index: 0 !important; 
        width: 100% !important; 
        max-width: 600px !important; 
        display: block !important;
        right: auto !important;
    }
    [dir="rtl"] .section-cosmetic-beautiful .img-item:not(.item-1) { z-index: -1 !important; }
}

/* =======================================================
   BEAUTIFUL SECTION: MOBILE LEAVES
   ======================================================= */
[dir="rtl"] .section-cosmetic-beautiful {
    overflow: hidden !important; 
    position: relative !important;
}
@media (max-width: 991px) {
    [dir="rtl"] .section-cosmetic-beautiful .img-item.item-2,
    [dir="rtl"] .section-cosmetic-beautiful .img-item.item-3 {
        display: block !important;
        position: absolute !important;
        z-index: 0 !important;
        opacity: 1 !important;
    }
    [dir="rtl"] .section-cosmetic-beautiful .img-item.item-2 {
        top: -50px !important;  
        left: -80px !important; 
        right: auto !important;
    }
    [dir="rtl"] .section-cosmetic-beautiful .img-item.item-2 img {
        width: 300px !important; 
        max-width: none !important; 
        height: auto !important;
        filter: blur(5px) !important; 
        transform: rotate(25deg) !important;
    }
    [dir="rtl"] .section-cosmetic-beautiful .img-item.item-3 {
        bottom: -40px !important; 
        right: -60px !important;  
        left: auto !important;
        top: auto !important;
    }
    [dir="rtl"] .section-cosmetic-beautiful .img-item.item-3 img {
        width: 250px !important; 
        max-width: none !important;
        height: auto !important;
        filter: none !important;
        transform: rotate(-15deg) !important;
    }
}

/* =======================================================
   LOOKBOOK SECTION: PLATINUM & BLACK VELVET FIX
   ======================================================= */
[dir="rtl"] .section-cosmetic-lookbook .col-left {
    background: linear-gradient(180deg, #363636 0%, #1c1c1c 100%) !important;
    background-color: #1c1c1c !important;
    border: 1px solid #333333 !important; 
}
[dir="rtl"] .section-cosmetic-lookbook .s-header-3 .title,
[dir="rtl"] .section-cosmetic-lookbook .s-header-3 .title span {
    color: #FFFFFF !important; 
    -webkit-text-fill-color: #FFFFFF !important;
    font-family: 'Heebo', sans-serif !important;
    font-weight: 700 !important; 
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3) !important;
}

[dir="rtl"] .section-cosmetic-lookbook .nav-prev-swiper,
[dir="rtl"] .section-cosmetic-lookbook .nav-next-swiper {
    background-color: transparent !important; 
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #E5E4E2 !important; 
    font-size: 30px !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
[dir="rtl"] .section-cosmetic-lookbook .nav-prev-swiper:hover,
[dir="rtl"] .section-cosmetic-lookbook .nav-next-swiper:hover {
    color: #FFFFFF !important; 
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6)) !important;
    background-color: transparent !important; 
    transform: scale(1.1) !important;
}

/* =======================================================
   RESTOCK SECTION (BULGARI STYLE)
   ======================================================= */
[dir="rtl"] .section-cosmetic-restock {
    background-color: #1c1c1c !important;
}
[dir="rtl"] .section-cosmetic-restock .title,
[dir="rtl"] .section-cosmetic-restock .title .fw-bold {
    color: #FFFFFF !important;
    font-family: 'Heebo', sans-serif !important;
    font-weight: 700 !important;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3) !important;
}
[dir="rtl"] .section-cosmetic-restock .title .fw-regular,
[dir="rtl"] .section-cosmetic-restock .title span:first-child {
    font-weight: 300 !important; 
    text-decoration: none !important; 
    border-bottom: none !important;
    color: #E5E4E2 !important; 
    display: inline-block !important; 
}
[dir="rtl"] .section-cosmetic-restock a.link,
[dir="rtl"] .section-cosmetic-restock a.link span {
    color: #888888 !important; 
    text-decoration: underline !important;
    font-family: 'Heebo', sans-serif !important;
    transition: all 0.3s ease !important;
}
[dir="rtl"] .section-cosmetic-restock a.link:hover,
[dir="rtl"] .section-cosmetic-restock a.link:hover span {
    color: #FFFFFF !important; 
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5) !important;
}
[dir="rtl"] .section-cosmetic-restock .tag-list a {
    color: #CCCCCC !important; 
    border: 1px solid #444444 !important;
    background: transparent !important;
    transition: all 0.3s ease !important;
}
[dir="rtl"] .section-cosmetic-restock .tag-list a:hover {
    color: #FFFFFF !important;
    border-color: #4B1450 !important; /* Update tag border to Purple */
    background-color: #4B1450 !important; /* Update tag bg to Purple */
}
[dir="rtl"] .section-cosmetic-restock .nav-prev-swiper, 
[dir="rtl"] .section-cosmetic-restock .nav-next-swiper {
    background-color: #333333 !important;
    color: #FFFFFF !important;
    border-color: #555555 !important;
}

[dir="rtl"] .section-cosmetic-restock .tf-btn-line {
    font-size: 28px !important; 
    font-family: 'Heebo', sans-serif !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    color: #CCCCCC !important; 
}
[dir="rtl"] .section-cosmetic-restock .tf-btn-line * {
    color: #CCCCCC !important;
    -webkit-text-fill-color: #CCCCCC !important; 
}
[dir="rtl"] .section-cosmetic-restock .tf-btn-line::before {
    background-color: #CCCCCC !important; 
    bottom: 0 !important;
    height: 1px !important;
}
[dir="rtl"] .section-cosmetic-restock .tf-btn-line:hover,
[dir="rtl"] .section-cosmetic-restock .tf-btn-line:hover * {
    color: #9066ff !important; /* Purple hover */
    -webkit-text-fill-color: #9066ff !important;
}
[dir="rtl"] .section-cosmetic-restock .tf-btn-line:hover::before {
    background-color: #9066ff !important;
}

/* =======================================================
   BEBLOOM SLIDER: MOBILE PERFORMANCE FIX
   ======================================================= */
#image-compare {
    touch-action: pan-y;
    position: relative;
    width: 100%;
    background: #000;
}
.icv__control, 
.icv__img, 
.icv__label {
    transform: translateZ(0) !important;
    will-change: left, opacity !important;
}

/* BEFORE & AFTER TEXT PLATINUM FIX */
.icv__label {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500 !important;
    direction: rtl !important;
    color: #EBEBF5 !important; /* FIXED FROM OLD SAND COLOR */
    background-color: rgba(10, 10, 10, 0.6) !important;
    backdrop-filter: blur(10px);
    transition: opacity 0.2s ease !important; 
    pointer-events: none;
}

/* =======================================================
   BEBLOOM LOOKBOOK FIX (NUCLEAR ORDER METHOD)
   ======================================================= */
#bebloom-rtl-slider .card-product_info {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}
#bebloom-rtl-slider .info-left {
    order: 2 !important;       
    text-align: right !important; 
    padding-left: 15px !important; 
    padding-right: 0 !important;
    flex-grow: 1 !important;   
}
#bebloom-rtl-slider .action-shop-list {
    order: 1 !important;       
    margin: 0 !important;
}
#bebloom-rtl-slider .btn-add-shop { margin: 0 !important; }

#bebloom-rtl-slider .product__cate,
#bebloom-rtl-slider .product__name,
#bebloom-rtl-slider .product__price {
    direction: rtl !important;
    text-align: right !important;
    display: block !important;
}
#bebloom-rtl-slider .product-badge-list {
    left: auto !important;
    right: 10px !important;
    top: 10px !important;
}

/* =======================================================
   BEBLOOM TOOLTIP & Z-INDEX FIX (RTL SLIDER)
   ======================================================= */
#bebloom-rtl-slider .swiper-slide,
#bebloom-rtl-slider .card-product,
#bebloom-rtl-slider .card-product_info {
    overflow: visible !important; 
    z-index: auto !important;     
}
#bebloom-rtl-slider .tooltip {
    z-index: 9999 !important; 
    white-space: nowrap !important; 
    opacity: 0; 
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}
#bebloom-rtl-slider .hover-tooltip.tooltip-left .tooltip {
    right: auto !important;     
    left: 120% !important;      
    top: 50% !important;        
    transform: translateY(-50%) !important;
    bottom: auto !important;
}
#bebloom-rtl-slider .hover-tooltip:hover .tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) translateX(5px) !important; 
}
#bebloom-rtl-slider .hover-tooltip.tooltip-left .tooltip::before {
    left: -4px !important; 
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(45deg) !important;
    border-color: transparent transparent #000 #000 !important; 
}

/* =======================================================
   DARK GLAMOUR FAQ (PLATINUM EDITION FIX)
   ======================================================= */
.faq-accordion_item-5 {
    background: transparent !important;       
    border: none !important;                  
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; 
    margin-bottom: 0 !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    border-radius: 0 !important;
    animation: revealBlur linear both; 
    animation-timeline: view();
    animation-range: entry 5% cover 25%;
    transition: background 0.3s ease, border-color 0.3s ease;
}
.faq-accordion_item-5:last-child {
    border-bottom: none !important;
}

/* FIXED FROM OLD SAND TO PLATINUM MIST */
.faq-accordion_item-5 .accordion-action .text {
    font-family: 'Heebo', sans-serif !important; 
    color: #EBEBF5 !important; /* WAS #D4C5A5 */
    font-size: 16px !important;    
    font-weight: 700 !important;   
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}
.faq-accordion_item-5 .accordion-action:hover .text,
.faq-accordion_item-5 .accordion-action[aria-expanded="true"] .text {
    color: #FFFFFF !important;     
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

.faq-accordion_item-5 .accordion-content p,
.faq-accordion_item-5 .accordion-content .text-body-4 {
    font-family: 'Heebo', sans-serif !important;
    color: #E0E0E0 !important;     
    font-size: 15px !important;    
    line-height: 1.7 !important;   
    font-weight: 400 !important;   
    margin-top: 8px !important;
    opacity: 0.9;
}

/* PLUS ICON FIX TO PLATINUM MIST */
.faq-accordion_item-5 .ic-wrap .icon {
    color: #EBEBF5 !important; /* WAS #D4C5A5 */     
    font-size: 14px !important;    
    transition: transform 0.3s ease;
}
.faq-accordion_item-5 .accordion-action[aria-expanded="true"] .ic-wrap .icon {
    transform: rotate(180deg);
    color: #FFFFFF !important;
}

@keyframes revealBlur {
    from { opacity: 0; filter: blur(10px); transform: translateY(30px); }
    to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* =======================================================
   BEBLOOM GALLERY (Final: Poppins Big & Clean)
   ======================================================= */
#bebloom-insta-unique,
#bebloom-insta-unique .title,
#bebloom-insta-unique .title span,
#bebloom-insta-unique .btn-wrap,
#bebloom-insta-unique .text-body-4 {
    font-family: 'Poppins', sans-serif !important;
}

#bebloom-insta-unique .title {
    color: #C0C0C0 !important;
    line-height: 1.2; 
    cursor: default;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), text-shadow 0.4s ease;
}
#bebloom-insta-unique .title:hover {
    transform: scale(1.05); 
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3), 0 0 30px rgba(255, 255, 255, 0.2);
}

#bebloom-insta-unique .title .light-text {
    font-weight: 300 !important;
    font-size: 20px; 
    opacity: 0.9;
    letter-spacing: 0.5px;
}
#bebloom-insta-unique .title .bold-text {
    display: inline-block;
    font-weight: 600 !important; 
    font-size: 32px !important;  
    margin-top: 8px;             
    letter-spacing: 0.5px;
    color: #E0E0E0 !important;   
}

#bebloom-insta-unique .btn-wrap {
    border-color: rgba(192, 192, 192, 0.6) !important;
    color: #C0C0C0 !important;
    background: transparent !important;
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
    transition: all 0.4s ease;
    margin-top: 20px; 
}
#bebloom-insta-unique .btn-wrap:hover {
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
}

/* FORCE HIDE SHOPPING CART SIDEBAR */
#shoppingCart {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* =======================================================
   HEADER: EXACT HTML GLASSY MENU OVERRIDE 
   ======================================================= */

/* 1. Target the exact sub-menu class from your HTML */
.tf-header-5 .box-nav-menu .has-sub_menu .sub-menu {
    /* The Obsidian Glass Background */
    background: rgba(28, 28, 28, 0.75) !important; 
    background-color: rgba(28, 28, 28, 0.75) !important;
    background-image: none !important; 
    
    /* The Blur Engine */
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    
    /* Premium border and shadow */
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important;
    
    /* Force text to align right for Hebrew */
    text-align: right !important;
    padding: 10px 0 !important;
}

/* 2. Kill the solid white on the list items */
.tf-header-5 .box-nav-menu .has-sub_menu .sub-menu li {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

/* 3. Text styling for the links (Platinum Mist) */
.tf-header-5 .box-nav-menu .has-sub_menu .sub-menu .sub-item {
    color: #EBEBF5 !important;
    background: transparent !important;
    background-color: transparent !important;
    font-family: 'Heebo', sans-serif !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    padding: 8px 20px !important;
    display: block !important;
}

/* 4. The Hover State (Light Purple Velvet Glow) */
.tf-header-5 .box-nav-menu .has-sub_menu .sub-menu .sub-item:hover {
    color: #9066ff !important; 
    background-color: rgba(255, 255, 255, 0.05) !important; 
    padding-right: 25px !important; /* Elegant RTL bump to the right */
}