/* Add custom CSS styles below */ 
/* 1. Import the Cairo Font from Google Fonts for mobile devices */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&display=swap');

/* 2. Apply it globally across the storefront */
* {
    font-family: 'Cairo', sans-serif !important;
}


/* Header Elements */ 

.header--mini .header--mini #main-nav:not(.fixed-pinned) .main-nav__content {
      direction: ltr;
}
div#main-nav.main-nav.fixed-pinned.animated.fixed-header{
  direction: ltr;
}
.store-header .main-menu li.root-level>a {
    font-weight: 400;
    font-size: 17px;
    color: #594eff;
}
.gap-1{
      gap: 0.5rem;
}
img, svg, video, canvas, audio, iframe, embed, object {
    width: 30px;
    height: 30px;
}
.header__icons path {
    stroke: #594eff;
      stroke-width: 2px;
}
.store-header .main-menu {
    justify-content: left;
    padding-left: 40px;
}

    .main-nav__content {
        max-width: 90%;
         }
@media (max-width: 480px) {
    .main-nav__content {
        max-width: 100%;
         }
  .gap-1{
      padding-right: 60px;
}
}

/* ==========================================================================
   Header Utility Icons: Wishlist Stroke Thickness & Color Fix
   ========================================================================== */

/* Force the wishlist SVG vectors to match the thinner brand style and color */
a.header--wishlist-icon svg,
a.header--wishlist-icon svg *,
.header--wishlist-icon svg path {
    stroke-width: 1.2px !important;    /* 📐 Match your custom thickness value */
    
    /* 🚀 COLOR FIX */
    stroke: #594eff !important;        /* Forces line paths to stay the right gray */
    fill: none !important;             /* Prevents the icon from accidentally bleeding solid black */
}

/* Ensure the color stays locked even if the button wrapper itself changes state */
a.header--wishlist-icon {
    color: #594eff !important;
}


/* ==========================================================================
   Mobile Menu Color Override (Asset Image Filter Inversion)
   ========================================================================== */

button#storemenu-panel-trigger,
#storemenu-panel-trigger.mburger,
#storemenu-panel-trigger * {
    /* 🚀 THE INVERSION MATRIX: Converts dark gray/black graphic assets directly into #594eff purple */
    filter: invert(34%) sepia(90%) saturate(4155%) hue-rotate(239deg) brightness(101%) contrast(102%) !important;
    
    opacity: 1 !important;
}

/* ==========================================================================
   Mobile Side Menu Flyout Panel (Full Content Layer Reset)
   ========================================================================== */

/* 1. SOLID CANVAS FORCE: Turn the panel and ALL its inner layout blocks pure white */
aside#storemenu-panel,
aside#storemenu-panel div,
aside#storemenu-panel ul,
aside#storemenu-panel li,
.storemenu-panel,
.storemenu-panel * {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* 2. POSITION CONTROL: Shift the entire panel flush right below the white header line */
aside#storemenu-panel {
    top: 0px !important;              /* 📐 Change this number if you need to micro-adjust it up or down */
    opacity: 1 !important;
    z-index: 99999 !important;         /* Floating priority above background layout pieces */
}

/* 3. STRUCTURAL CLEANUP: Strip out rogue inner paddings causing the misalignment */
aside#storemenu-panel .sidebar-content,
aside#storemenu-panel [class*="inner"],
aside#storemenu-panel ul {
    padding-top: 10px !important;     /* Tightly fits your first link item near the top */
    margin-top: 0px !important;
}

/* 4. TYPOGRAPHY CONTROL: Target the text font weight and size inside this menu exclusively */
aside#storemenu-panel a,
aside#storemenu-panel span,
aside#storemenu-panel .menu-item-text {
    /* 🚀 TYPOGRAPHY MODIFIERS */
    font-size: 16px !important;        /* 📐 Text size adjustments */
    font-weight: 400 !important;       /* 📐 Bold factor: 700 (Bold), 600 (Medium), 400 (Regular) */
    
    /* Font Link Colors */
    color: #594eff !important;         /* Dark gray matching your main web design scheme */
    
    /* Touch target spacing */
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    display: block !important;
}


/* ==========================================================================
   Mobile Header Logo Sizing Override
   ========================================================================== */

@media (max-width: 767px) {
    /* Target the image directly inside the navbar brand layout */
    a.navbar-brand.default-logo img,
    .store-header .navbar-brand img {
        width: 140px !important;  /* 📐 ADJUST THIS: Change width to your liking */
        height: auto !important;   /* Keeps the logo aspect ratio perfectly balanced */
        max-height: 40px !important; /* Prevents the header bar from stretching vertically */
        object-fit: contain !important;
    }
}


/* Keep your original layout spacing perfectly intact */
.main-nav {
    margin-top: 50px;
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* Paint the grey background area white without shifting layout boxes */
header.store-header {
    background-color: #ffffff !important;
    background: #ffffff !important;
    /* Create a massive upward shadow to paint over the grey background gap */
    box-shadow: 0 -200px 0 200px #ffffff !important; 
}

/* Ensure the Salla advertisement component stacks safely on top of our white fix */
salla-advertisement, 
.salla-advertisement,
#salla-advertisement {
    position: relative !important;
    z-index: 9999 !important;
}

.swiper{
  padding-top: 70px;
}

/* ==========================================================================
   3. Dynamic Header Floating Layer & Announcement Auto-Close System
   ========================================================================== */

/* Force the parent header framework to sit tightly at the top */
header.store-header,
.store-header {
    position: relative !important;
    width: 100% !important;
    z-index: 9999 !important;
    background-color: #ffffff !important;
}

/* 🚀 THE MATCHING FIX: Overrides the orange space dynamically */
#main-nav.main-nav {
    margin-top: 50px !important; /* Default position when the bar is open */
    transition: margin-top 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Condition A: Collapse the space if Salla registers the hidden/closed state wrapper */
.salla-advertisement-hidden #main-nav.main-nav,
.advertisement-closed #main-nav.main-nav,
.header--mini:not(:has(.salla-advertisement)) #main-nav.main-nav,
body:not(:has(.salla-advertisement)) #main-nav.main-nav {
    margin-top: 0px !important; /* Snaps the navbar up to the absolute top edge */
}

/* Ensure the Salla advertisement component stacks safely on top */
salla-advertisement, 
.salla-advertisement,
#salla-advertisement {
    position: relative !important;
    z-index: 99999 !important;
}

/* Balance out the Swiper layout track to remove the static white gap */
.swiper {
    padding-top: 0px !important;
    margin-top: 0px !important;
}


/******/

/*Slider Banner*/


/* Responsive, fluid text style thatscales safely based on window size */
.responsive-headline {
    text-align: right !important;
    direction: rtl !important;
    font-weight: 400 !important;
    font-size: calc(0.8rem + 2vw) !important; /* Scales fluidly with the window */
    color: #ffffff !important;
    margin-top: 500px !important; /* Negative margin pulls it UP. Change to -20px or -30px to make it even closer */
    margin-bottom: 0px !important; /* Keeps a nice safe gap below it */
    margin-right: 40px !important;
    margin-left: 40px !important;
    padding-top: 0 !important;      /* Removes any inner top spacing */
    display: block !important;
}

.responsive-headline-2 {
    text-align: right !important;
    direction: rtl !important;
    font-weight: bold !important;
    font-size: calc(7rem + 2vw) !important; /* Scales fluidly with the window */
    color: #ffffff !important;
    margin-top: -50px !important; /* Negative margin pulls it UP. Change to -20px or -30px to make it even closer */
    margin-bottom: -15px !important; /* Keeps a nice safe gap below it */
    margin-right: 40px !important;
    margin-left: 40px !important;
    padding-top: 0 !important;      /* Removes any inner top spacing */
    display: block !important;
    white-space: nowrap !important; /* Prevents text from breaking into a messy double line */
}

/* Strict Mobile Override - Only applies to screens 480px or smaller */
@media (max-width: 480px) {
    .responsive-headline {
        font-size: 1.7rem !important; /* Clean scale down for phone screens */
       margin-top: 0px !important; 
       margin-bottom: -10px !important; 
    }
    
    .responsive-headline-2 {
        font-size: 6.2rem !important; /* Safe mobile bounds to prevent clipping */
        margin-top: -30px !important;  /* Proportional pull-up for mobile spacing gap */
        margin-bottom: -10px !important;
     }
}

/* Force Salla's ready-made slider image to align strictly to the bottom */
.swiper-slide img, 
.salla-slider img,
[class*="slider"] img {
    object-fit: cover !important; /* Retains your full-width edge-to-edge layout */
    object-position: bottom center !important; /* Locks the bottom edge (logo area) in full view */
}

/* ==========================================================================
   Stitched Slider Logo Layer (Instant Render Slide-Up Animation) - SCOPED FIX
   ========================================================================== */

/* 🌟 ISOLATION: Added .main-hero-slider wrapper to lock the relative anchors */
.main-hero-slider .swiper-slide a,
.main-hero-slider .salla-slider-inner a,
.main-hero-slider.main-slider .swiper-slide {
    position: relative !important;
}

/* 🎯 Targets ONLY the logo canvas layer generation inside the Main Top Banner Component */
.main-hero-slider .swiper-slide a::before,
.main-hero-slider .salla-slider-inner a::before,
.main-hero-slider.main-slider .swiper-slide::before {
    content: "" !important;
    position: absolute !important;
    display: block !important;
    visibility: visible !important;
    
    background-image: url('https://cdn.files.salla.network/theme/1581403128/5ff8b447-a9bd-4a4a-a5a6-ab120044fcaf.webp') !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    
    right: calc(100% - -650px) !important; 
    left: auto !important;
    bottom: -25px !important;
    margin-bottom: 500px !important;
    margin-right: 40px !important;
    margin-left: -20px !important;
    width: 300px !important;  
    height: 95px !important;  
    
    z-index: 10 !important;    
    pointer-events: none !important;

    /* ⏱️ TOTAL TIME CONTROL: Change 1.5s to make the overall loop faster or slower */
    animation: sallaLogoSlideUp 1.3s ease-out forwards !important;
}

/* ==========================================================================
   Tablet Layout Mode: Slider Logo Horizontal Control Only (768px - 1024px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    .swiper-slide a::before,
    .salla-slider-inner a::before,
    .main-slider .swiper-slide::before {
        /* 1. RESET BASE ALIGNMENT */
        left: auto !important;
        
        /* 2. 🚀 HORIZONTAL CONTROL ONLY */
        right: calc(100% - -250px) !important;   /* 📐 Increase or decrease this percentage/pixel value to move it left or right */
        
        /* 3. INHERIT HEIGHT/BOTTOM FROM DESKTOP DEFAULT */
        /* (We leave height, width, and bottom out so they scale beautifully based on your main desktop settings) */
    }
}


@media (max-width: 767px) {
    .swiper-slide a::before,
    .salla-slider-inner a::before,
    .main-slider .swiper-slide::before {
        right: auto !important; 
        left: 5% !important;
        bottom: 130px !important; 
        width: 240px !important;
        height: 50px !important;
        margin-bottom: 0px !important;
        
        /* Keeps mobile timing identical */
        animation: sallaLogoSlideUp 1.3s ease-out forwards !important;
    }
}

/* ==========================================================================
   Timing-Controlled Keyframes 
   ========================================================================== */
@keyframes sallaLogoSlideUp {
    0% {
        opacity: 0;
        transform: translateY(50px); /* Starts hidden and lower down */
    }
    60% {
        opacity: 0;
        transform: translateY(50px); /* ⏱️ DELAY: Stays hidden/low for 60% of the duration */
    }
    100% {
        opacity: 1;
        transform: translateY(0);    /* Slides up to finish exactly with the button */
    }
}

/* ==========================================================================
   STRICT FIX: Banner Slider Button Dimensions, Weight, Color & Spacing
   ========================================================================== */

/* 1. DESKTOP VIEW: Target dimensions, weight, colors, and desktop spacing */
.swiper-slide .anime-item a .s-button-btn,
.main-slider [class*="anime-item"] a .s-button-btn,
.swiper-slide salla-button .s-button-btn {
    /* 🎨 Your Custom Brand Colors */
    background-color: #e6ff64 !important; 
    color: #594eff !important;            
    border-color: #e6ff64 !important;     
    
    /* 📝 Text Weight */
    font-weight: 400 !important;          
    
    /* 📐 Dimensions */
    width: 180px !important;              
    height: 48px !important;              
    
    /* ↔️ DESKTOP SPACING: Distance from elements above it */
    margin-top: 0px !important;          /* 👈 ADJUST THIS for desktop spacing */
    margin-right: 50px !important;
    margin-left: 50px !important;
    /* Layout preservation rules to keep the text centered perfectly */
    padding: 0 !important;                
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 2. HOVER STATE: Default mouse interactions */
.swiper-slide .anime-item a .s-button-btn:hover,
.main-slider [class*="anime-item"] a .s-button-btn:hover,
.swiper-slide salla-button .s-button-btn:hover {
    background-color: #e6ff64 !important; 
    color: #594eff !important;            
    border-color: #e6ff64 !important;
}

/* ==========================================================================
   4. MOBILE RESPONSIVE OVERRIDES (Screens smaller than 767px)
   ========================================================================== */
@media (max-width: 767px) {
    /* Target the text alignment wrapper parent to force items into center space */
    .swiper-slide .anime-item,
    .main-slider [class*="anime-item"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Centers elements inside the container horizontally */
        text-align: center !important;
        width: 100% !important;
    }

    /* Target the button component itself using your exact layout metrics */
    .swiper-slide .anime-item a .s-button-btn,
    .main-slider [class*="anime-item"] a .s-button-btn,
    .swiper-slide salla-button .s-button-btn {
        display: inline-flex !important;
        
        /* 🚀 THE CENTERING LINE */
        margin-left: auto !important;
        margin-right: auto !important;
        
        /* ↔️ YOUR EXACT SPACING VALUES PRESERVED */
        margin-top: -200px !important;      /* 👈 Kept exactly as requested */
        margin-bottom: 320px !important;    /* 👈 Kept exactly as requested */
        
        /* Optional: You can also tweak mobile width/height here if needed */
        /* width: 160px !important; */
        /* height: 44px !important; */
    }
}

/* ==========================================================================
   THE STRICT COMPONENT FIX: Targets ONLY the main homepage top slider component
   ========================================================================== */

@media (min-width: 768px) {
    /* 🌟 Targets ONLY the primary main slider component, leaving product sliders alone */
    salla-main-slider,
    salla-main-slider .swiper,
    salla-main-slider .swiper-container,
    salla-main-slider .swiper-wrapper,
    salla-main-slider .swiper-slide,
    salla-main-slider .swiper-slide a,
    salla-main-slider .slider-image-wrapper {
        height: 550px !important;
        min-height: 550px !important;
        max-height: 550px !important;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

    /* Force ONLY the images inside the main top slider to fill the window */
    salla-main-slider img {
        height: 100% !important;
        min-height: 550px !important;
        max-height: 550px !important;
        width: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }
}

/* ==========================================================================
   Slider Navigation Numbers (Split Desktop / Mobile Control)
   ========================================================================== */

/* ─── 1. GLOBAL BASE STYLES (Applies to both) ───────────────────────────── */
.s-slider-container .swiper-pagination-bullet {
    background: transparent !important;
    background-color: transparent !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    border: none !important;
}
.s-slider-container .swiper-pagination-bullet .number,
.swiper-pagination-bullet span.number {
    font-weight: bold !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}


/* ==========================================================================
   THE PERFECT SCOPED FIX: Target ONLY the named Main Hero Slider Widget
   ========================================================================== */

/* 🚀 TARGET DESKTOP ONLY: Screens wider than 767px */
@media (min-width: 768px) {
    
    /* 🎯 Strictly isolates the 550px height rules using your new custom class */
    .main-hero-slider,
    .main-hero-slider .swiper,
    .main-hero-slider .swiper-container,
    .main-hero-slider .swiper-wrapper,
    .main-hero-slider .swiper-slide,
    .main-hero-slider .swiper-slide a,
    .main-hero-slider .slider-image-wrapper {
        height: 550px !important;       /* 📐 Your exact target height */
        min-height: 550px !important;
        max-height: 550px !important;   /* Hard-locks the container boundary */
        padding-top: 0px !important;    
        padding-bottom: 0px !important;
    }

    /* 🚀 IMAGE PROTECTION: Forces ONLY your hero graphics to fill the new 550px viewport box */
    .main-hero-slider img,
    .main-hero-slider .swiper-slide img,
    .main-hero-slider .slider-image-wrapper img {
        height: 100% !important;
        min-height: 550px !important;   
        max-height: 550px !important;
        width: 100% !important;
        object-fit: cover !important;   /* Prevents the graphics from squishing or stretching */
        object-position: center !important; 
    }
}


/* ─── 3. MOBILE ONLY POSITION & COLORS (Max-width: 767px) ──────────────── */
@media (max-width: 767px) {
    /* Target every variant of Salla's pagination wrapping code blocks */
    .s-slider-container .swiper-pagination,
    .s-slider-container .swiper-pagination-bullets,
    .s-slider-container div.swiper-pagination-horizontal,
    div[class*="swiper-pagination"] {
        
        /* 1. RESET SALLA NATIVE MOBILE GRID MATRIX */
        position: absolute !important;
        display: flex !important;
        flex-direction: column !important;  /* 🚀 FORCE VERTICAL STACK (01 over 02) */
        align-items: center !important;
        gap: 10px !important;               /* Space gap between the numbers */
        
        width: auto !important;
        height: auto !important;
        transform: none !important;         /* Clear native centering software scripts */

        /* 2. 🚀 THE POSITION CONTROLS (Move anywhere you want) */
        top: auto !important;               /* Leave auto if anchoring to bottom */
        bottom: 140px !important;            /* 📐 VERTICAL: Increase to pull up, decrease to drop down */
        
        /* For Right Side Alignment (RTL layout standard) */
        right: 30px !important;             /* 📐 HORIZONTAL: Increase to push left, decrease to hug the right edge */
        left: auto !important;              /* Clear left lock */
    }

    /* Mobile Text Proportions & Colors */
    .s-slider-container .swiper-pagination-bullet .number,
    .swiper-pagination-bullet span.number {
        color: rgba(255, 255, 255, 0.40) !important; /* Inactive: Dimmed white */
        font-size: 15px !important;
        display: block !important;           /* Blocks row wrap leaks */
    }
    
    .s-slider-container .swiper-pagination-bullet-active .number,
    .swiper-pagination-bullet-active span.number {
        color: #bfff00 !important;                  /* Active: Brand Green */
        font-size: 19px !important;                  /* Pops out active selection slightly */
    }
}

/* ==========================================================================
   Categories
   ========================================================================== */
.my-custom-categories {
    background-color: #ffffff !important;
    }

/* Target the title text directly under the image cards */
.my-custom-categories h3,
.my-custom-categories [class*="title"] {
    font-size: 15px !important;
    font-weight: bold !important;
    color: #594eff !important; /* Forces it to your brand purple */
}

/* ==========================================================================

   Salla Custom Widget: Master Card Grid Configuration Control

   ========================================================================== */



/* 🚀 WHOLE WIDGET WRAPPER: SAFE ULTRA-WIDE PSEUDO BACKGROUND FIX */

.brand-card-grid {

    position: relative !important;

    padding: 40px 0 !important;                /* Top and bottom padding for the section content */

    box-sizing: border-box !important;

}



/* 🚀 MOBILE SCREEN PROTECTION: Forces a 16px safe gap on smaller devices */

@media (max-width: 768px) {

    .brand-card-grid .s-block__content,

    .brand-card-grid div.grid {

        padding-left: 16px !important;

        padding-right: 16px !important;

    }

}



/* Generates an unbreakable full-width color canvas layer underneath without shifting the grid layout */

.brand-card-grid::before {

    content: "" !important;

    position: absolute !important;

    top: 0 !important;

    bottom: 0 !important;

    left: 50% !important;

    /*transform: translateX(-50%) !important;*/

    width: 200vw !important;                    /* Extends safely infinitely past screen view ports */

    

    /* 🎨 GLOBAL BACKGROUND CONTROLS */

    background-color: #594eff !important;       /* Widget-wide signature background color */

    background-image: url('https://cdn.files.salla.network/homepage/1581403128/cc21ecc8-973c-46b8-b91a-6d4cce9d763c.webp') !important;          /* 🖼️ Example: url('your-image-link.jpg') !important; */

    background-size: 1900 !important;

    background-position: center -100 !important;

    background-repeat: repeat !important;

  

    /* 🚀 BACKGROUND ROTATION ENGINE CONTROL */

    /* Adjust '0deg' to your desired angle (e.g., 5deg, -3deg, 180deg). 

       Adjust 'scale(1)' slightly higher (e.g., scale(1.15)) if you rotate heavily to prevent corner clipping! */

    transform: translateX(-50%) rotate(0deg) scale(1) !important;

   

    z-index: 0 !important;                      /* Sits safely behind the interactive elements */

    pointer-events: none !important;

}

@media (max-width: 768px) {
.brand-card-grid::before {
background-size: 1200px !important;
background-position: center !important;
  }  
}

/* FORCES SPACE BETWEEN WIDGET TITLE AND CARDS ROW */

.brand-card-grid .s-block__title {

    position: relative !important;

    z-index: 1 !important;

    margin-bottom: 45px !important;            /* 📐 Adjust this pixel value to get the exact gap you want */

}



/* 1. THE SAFE CARD ANCHOR: Apply the card framing to the links/items ONLY */

.brand-card-grid a,

.brand-card-grid [class*="inner-item"],

.brand-card-grid .s-block-categories-slider-item {

    position: relative !important;

    z-index: 1 !important;

    border: 0px solid #eaeaea !important;       /* Clean, crisp card borders */

    

    /* Elegant rounded top corners & sharp flat bottom corners */

    border-top-left-radius: 16px !important;

    border-top-right-radius: 16px !important;

    border-bottom-left-radius: 0px !important;  

    border-bottom-right-radius: 0px !important;

    

    background-color: #3e33e1 !important;       /* Dynamic blue card canvas background fill */

    padding: 4px !important;                    /* 📐 Lowering this expands the image closer to the card edges */

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important; /* Premium drop shadow depth */

    

    /* Layout Stabilization */

    display: flex !important;

    flex-direction: column !important;

    justify-content: space-between !important;

    align-items: center !important;

    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;

    overflow: hidden !important;

}



/* FORCES COMFORTABLE SPACE AT THE ABSOLUTE BOTTOM & SIDES OF THE CARD */

.brand-card-grid div.mt-4.flex.items-center.justify-between.gap-4.flex-wrap,

.brand-card-grid [class*="slider-item"] div.flex.items-center {

    padding-bottom: 40px !important;           /* Keeps the whitespace height under the text */

    padding-left: 12px !important;          

    padding-right: 12px !important;         

    width: 100% !important;

    box-sizing: border-box !important;

 

  

    /* TEXT CONTAINER CENTERING ENGINE OVERRIDE */

    display: flex !important;

    flex-direction: column !important;          /* Swaps native horizontal row behavior into a vertical line stack */

    justify-content: center !important;

    align-items: center !important;             /* Safely snaps text content elements directly to true card horizontal center */

}



@media (max-width: 768px) {

    .brand-card-grid div.mt-4.flex.items-center.justify-between.gap-4.flex-wrap,

.brand-card-grid [class*="slider-item"] div.flex.items-center {

    padding-bottom: 20px !important; 

  }

}



/* 2. IMAGE PROTECTION & EXPLICIT FIXED CORNER-SHAPING */

.brand-card-grid .item-img img,

.brand-card-grid [class*="item-img"] img,

.brand-card-grid img.relative.z-10 {

    display: block !important;

    visibility: visible !important;

    width: 100% !important;

    height: auto !important;

    object-fit: cover !important;

    padding: 0px !important;                 

    background: transparent !important;

    

    /* YOUR BRILLIANT LAYER FIX ELEVATED DIRECTLY ONTO THE IMAGE ELEMENT */

    z-index: 99999 !important;                  /* Elevates image cleanly above default color overlays */

    filter: none !important;                    /* Disables default theme dark filters */

    opacity: 1 !important;

}



/* Maintain identical layout boundaries on the inner wrapper element */

.brand-card-grid .item-img,

.brand-card-grid [class*="item-img"] {

    display: block !important;

    opacity: 1 !important;

    filter: none !important;                   

}



/* 3. 🚀 TYPOGRAPHY ENGINE CONTROLS */



/* ==========================================================================

   A. 🎯 DEDICATED WIDGET TITLE CONTROLS (Targets your exact screenshot layout)

   ========================================================================== */



/* Overrides Salla's internal layout row positions to lock everything dead-center */

.brand-card-grid .s-block__title .right-side,

.brand-card-grid .s-block__title div {

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;         

    align-items: center !important;

    text-align: center !important;

    width: 100% !important;

    float: none !important;                     /* Kills any legacy layout elements shifting your text */

}



/* Targets the precise title layout element directly */

.brand-card-grid .s-block__title h2,

.brand-card-grid .s-block__title h2.text-center,

.brand-card-grid .s-block__title .right-side h2 {



    padding-bottom: 30px !important;

    padding-top: 30px !important;

  

     /* 🎨 COLOR CONTROL */

    color: #ffffff !important;                  /* Change to your desired headline hex color */

    

    /* 📐 FONT STYLE & WEIGHT CONTROL */

    font-size: 90px !important;                 /* Scale layout text size up or down */

    font-weight: 700 !important;                /* Options: 400 (normal), 700 (bold), 800 (extra bold) */



  

  @media (max-width: 768px) {

    font-size: 70px !important;

     padding-bottom: 0px !important;

     padding-top: 0px !important;

  }  

  

    /* 📍 ALIGNMENT CONTROLS */

    text-align: center !important;              

    display: block !important;

    width: 100% !important;

    margin: 0 auto !important;

}



/* ==========================================================================

   B. INNER CARD CATEGORY TEXT CONTROLS

   ========================================================================== */

.brand-card-grid a h2,

.brand-card-grid a h3,

.brand-card-grid [class*="inner-item"] h2,

.brand-card-grid .s-block-categories-slider-item h2,

.brand-card-grid [class*="name"] {

    margin-top: 14px !important;

    margin-bottom: 6px !important;

    width: 100% !important;                     /* Ensures it claims full block tracking real estate */

    

    /* 🎨 COLOR CONTROL */

    color: #ffffff !important;                  /* Change to your desired text hex color */

    

    /* 📐 FONT SIZE CONTROL */

    font-size: 20px !important;                 /* Increase or decrease to scale text sizing map */

    font-weight: 400 !important;                /* Options: 400 (regular), 500 (medium), 700 (bold) */

    

    /* 📍 ALIGNMENT CONTROL */

    text-align: center !important;              /* Absolute backup center rules layout definition */

}



/* 4. PREMIUM CARD HOVER: Smooth physics lift on user interaction */

.brand-card-grid a:hover,

.brand-card-grid [class*="item"]:hover {

    transform: translateY(-5px) !important;  

    box-shadow: 0 12px 24px rgba(89, 78, 255, 0.08) !important; 

    border-color: #594eff !important;        

}