:root {
    --bs-body-fontfamily: {{ms?.variables?.body_google_font_family || '-apple-system, BlinkMacSystemFont, sans-serif'}} ;
    --bs-heading-fontfamily:{{ms?.variables?.heading_google_font_family}};
    
    --bs-body-font-size: {{ms.variables.font_size_base}};
    --bs-body-color: {{ms.variables.text_color}};
  
    /* --bs-primary: {{ms?.custom_theme?.theme_variables?.primary ? ms.custom_theme.theme_variables.primary : 'var(--bs-primary)'}}; */
    /* --bs-primary-rgb: {{ms?.custom_theme?.theme_variables?.primary_rgb ? ms.custom_theme.theme_variables.primary_rgb : 'var(--bs-primary-rgb)'}}; */

    --ms-header-height: 80px;
    --ms-shotheader-height: 60px;
    --ms-topheader-height: 35px;
    --ms-megamenu-height: 56px;

    --bs-body-font-family: {{ms?.variables?.body_google_font_family || '-apple-system, BlinkMacSystemFont, sans-serif'}};

    --ms-header-height-mobile: 60px;
    --ms-mobile-innerheaderheight : 50px;
    --ms-autocomplete-mobile-height: 48px;
    --ms-animation-duration: 10s;
}

.ms-th-arrow-style .arrow-btn, .ms-th-arrorw-style .arrow-btn{
	height: 35px; 
	width: 35px;
	top: 50% !important;
	transform: translatey(-50%);
    border-radius: 50%;
    overflow: hidden;
    padding: 8px;
    background-color: #000;
    border: 1px solid #686868;
    background-size: 50%;
    filter: invert(1);
}
.ms-th-indicators [data-bs-target] {
    background-color: var(--bs-primary);
    border-radius: 1rem;
    width: 1rem;
    height: 0.40rem;
    opacity: 0.3;
    border: 0;
    transition: width 0.2s ease, opacity 0.2s ease;
}

.ms-th-indicators [data-bs-target].active {
    opacity: 1;
    width: 1.5rem;
}

.form-control:focus {
	outline: none;
	box-shadow: none;
}

/* SafeSpace Style for APP */
.reactapp_init #header {padding-top:var(--ms-safespace)!important;}
.reactapp_init .modal-dialog,.reactapp_init .offcanvas:not(#offcanvas_sortby),.reactapp_init .ms-safespace-pt{padding-top:var(--ms-safespace)!important}
.reactapp_init .offcanvas.canvas-panel .mobile-nav-item .dropdown-menu .back-nav-item,.reactapp_init .ms-safespace-top{top: var(--ms-safespace) !important;}
.reactapp_init .ms-safespace-mt{margin-top:var(--ms-safespace)!important}


/* SafeSpace Style for mobile */
.ms-th-main-header-height-mobile{height:calc(var(--ms-header-height-mobile) + var(--ms-autocomplete-mobile-height) + var(--ms-safespace))!important;background:#fff;}
.ms-th-header-height-topbar-mobile{height:calc(var(--ms-header-height-mobile) + var(--ms-topheader-height) + var(--ms-autocomplete-mobile-height) + var(--ms-safespace))!important}
.reactapp_init .ms-th-main-headermobile{padding-top:var(--ms-safespace)!important}
.reactapp_init #offcanvas_facet.offcanvas { padding-top: var(--ms-safespace) !important; }
.reactapp_init #offcanvasMenu .dropdown-menu.position-fixed{padding-top:var(--ms-safespace)!important}
.reactapp_init #offcanvasMenu .dropdown-menu.position-fixed > li.position-fixed{top:var(--ms-safespace)!important}


/* Global Style */
.ms-th-body{letter-spacing: 0px !important;font-family: var(--bs-body-font-family) !important;}
.ms-th-body a {text-decoration: none;}
.ms-th-body h1, .ms-th-body h2, .ms-th-body h3, .ms-th-body h4, .ms-th-body h5, .ms-th-body h6{font-family:var(--bs-heading-fontfamily);font-weight:500; letter-spacing: 0;}
.ms-fs-12{font-size: 12px;}
.ms-fs-14{font-size: 14px;}
.ms-fs-15{font-size: 15px;}
.ms-th-badgecounter{top:-6px;right:-6px;width:18px;height:18px}
.ms-th-qty-box{width:80px;height:30px}
.ms-th-qty-btn{min-width:30px}
.ms-th-offcanvas-300{max-width:300px}
.ms-th-user .ms-th-account-login {min-width: 250px;}
.ms-th-linear-shadow{background: linear-gradient(to top, rgba(0,0,0,0.72) 5%, rgba(0,0,0,0.0) 100%);}

img.ms-th-logo,
.ms-th-logo:not(img) > img {max-height: calc(var(--ms-header-height) * 0.9);max-width:100%}
.ms-th-header-height-topbar{position:relative;height:calc(var(--ms-header-height) + var(--ms-topheader-height))}
.ms-th-header-height{height:calc(var(--ms-header-height))}
.ms-th-topheader{height:var(--ms-topheader-height);position:relative;z-index:2;background:var(--ms-th-topbar-bg, #fff);color:var(--ms-th-topbar-text, inherit);transition:height .25s ease,opacity .2s ease,background-color .25s ease,color .25s ease;}
.ms-th-topheader.ms-th-topheader-hidden{height:0!important;opacity:0;border-color:transparent!important;border: none!important;}
.ms-th-topheader a:not(.btn):not([class*="btn-"]){color:var(--ms-th-topbar-link, var(--ms-th-topbar-text, inherit));}
.ms-th-topheader a:not(.btn):not([class*="btn-"]):hover{color:var(--ms-th-topbar-link-hover, inherit);}
.ms-th-main-header{height:var(--ms-header-height);background:var(--ms-th-mainbar-bg, var(--ms-th-bg, #fff));color:var(--ms-th-mainbar-text, var(--ms-th-text, inherit));transition:background-color .25s ease,color .25s ease;}
.ms-th-main-header-mobile{height:var(--ms-header-height-mobile);}

/* Header mainbar/menubar & footer color settings — background_type/text_color/link_color/link_hover_color */
.ms-th-main-header, #ms-megamenu{background:var(--ms-th-mainbar-bg, var(--ms-th-bg, #fff));color:var(--ms-th-mainbar-text, var(--ms-th-text, inherit));}
.ms-th-main-header a:not(.btn):not([class*="btn-"]), #ms-megamenu a:not(.btn):not([class*="btn-"]){color:var(--ms-th-mainbar-link, var(--ms-th-link, inherit));}
.ms-th-main-header a:not(.btn):not([class*="btn-"]):hover, #ms-megamenu a:not(.btn):not([class*="btn-"]):hover{color:var(--ms-th-mainbar-link-hover, var(--ms-th-link-hover, inherit));}
.ms-th-menubar{background:var(--ms-th-menubar-bg, var(--ms-th-mainbar-bg, var(--ms-th-bg, #fff)));color:var(--ms-th-menubar-text, var(--ms-th-mainbar-text, var(--ms-th-text, inherit)));}
.ms-th-menubar a:not(.btn):not([class*="btn-"]){color:var(--ms-th-menubar-link, var(--ms-th-mainbar-link, var(--ms-th-link, inherit)));}
.ms-th-menubar a:not(.btn):not([class*="btn-"]):hover{color:var(--ms-th-menubar-link-hover, var(--ms-th-mainbar-link-hover, var(--ms-th-link-hover, inherit)));}
/* Fixed/scrolled state overrides — only set (see Fixed header color scheme) while scrolled, so these fall back to the resting vars above when unset */
.ms-th-siteheader-fixed .ms-th-main-header, .ms-th-siteheader-fixed #ms-megamenu, .ms-th-siteheader-fixed .ms-th-menubar{background:var(--ms-th-fixed-bg, var(--ms-th-mainbar-bg, var(--ms-th-bg, #fff)));color:var(--ms-th-fixed-text, var(--ms-th-mainbar-text, var(--ms-th-text, inherit)));}
.ms-th-siteheader-fixed .ms-th-main-header a:not(.btn):not([class*="btn-"]), .ms-th-siteheader-fixed #ms-megamenu a:not(.btn):not([class*="btn-"]), .ms-th-siteheader-fixed .ms-th-menubar a:not(.btn):not([class*="btn-"]){color:var(--ms-th-fixed-link, var(--ms-th-mainbar-link, var(--ms-th-link, inherit)));}

.ms-th-footer{background:var(--ms-footer-bg, #fff);color:var(--ms-footer-text, inherit);}
.ms-th-footer a{color:var(--ms-footer-link, inherit);}
.ms-th-footer a:hover{color:var(--ms-footer-link-hover, inherit);}
.ms-th-copyright{background:var(--ms-footer-copyright-bg, transparent);color:var(--ms-footer-copyright-text, inherit);}

/* Autocomplete */
.ms-th-autocomplete-mobile{height:var(--ms-autocomplete-mobile-height);}
.ms-th-autocomplete a, .ms-th-autocomplete .btn {color: var(--bs-body-color) !important;}
.ms-th-truncate-2, .twoline_ellipsis {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}


/* MegaMenu : Header */
.ms-th-megaheader .ms-th-header-height{height:calc(var(--ms-header-height) + var(--ms-megamenu-height))}
.ms-th-megaheader .ms-th-header-height-topbar{height:calc(var(--ms-header-height) + var(--ms-topheader-height) + var(--ms-megamenu-height))}
.ms-th-megaheader .ms-th-megamenu{height:var(--ms-megamenu-height);}

/* V2 */
.ms-header-v2.ms-th-megaheader .ms-th-header-height-topbar{height:calc(var(--ms-header-height) + var(--ms-topheader-height))}

.slick-arrow {cursor: pointer;}
.slick-arrow.slick-disabled {cursor: not-allowed;opacity: 75%;}



.ms-th-topheader .ms-th-ticker-wrap{position:relative;bottom:0;width:100%;overflow:hidden;height:35px;padding-left:100%;box-sizing:content-box}
.ms-th-topheader .ms-th-ticker-wrap .ms-th-ticker:hover{-webkit-animation-play-state:paused;-moz-animation-play-state:paused;-ms-animation-play-state:paused;-o-animation-play-state:paused;animation-play-state:paused}
.ms-th-topheader .ms-th-ticker-wrap .ms-th-ticker{display:inline-block;height:35px;line-height:35px;white-space:nowrap;padding-right:100%;box-sizing:content-box;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-name:ticker;animation-name:ticker;-webkit-animation-duration:var(--ms-animation-duration);animation-duration:var(--ms-animation-duration)}
.ms-th-topheader .ms-th-ticker-wrap .ms-th-ticker-item{display:inline-block;}
/* marquee-section */
@-webkit-keyframes ticker{
    0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);visibility:visible}
    100%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}
}
@keyframes ticker{
    0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);visibility:visible}
    100%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}
}

.ms-th-slick .slick-track{display: flex;}
.ms-th-slick-equal-height .slick-track{display: flex !important;flex-flow: row !important;}
.ms-th-slick-equal-height .slick-track .slick-slide{height:auto !important;}
.ms-th-slick-equal-height .slick-track .slick-slide>div{height:100% !important;}


/* Megamenu css starts */

/* Animated dropdown — overrides BS5 display:none */
.ms-th-megamenu .dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    pointer-events: none;
    display: block !important;
}
.ms-th-megamenu .li.firstlevel.hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Firstlevel animated underline */
.ms-th-megamenu .nav-link.firstlevel {
    position: relative;
    border-bottom: 0;
    transition: color .2s ease;
    font-size: 16px;
    letter-spacing: .01em;
}

.ms-th-megamenu .nav-link.firstlevel::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #1a1a1a;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}

.ms-th-megamenu .li.firstlevel.hover > .nav-link.firstlevel::after,
.ms-th-megamenu .nav-link.firstlevel:hover::after {
    transform: scaleX(1);
}

.ms-th-animation{
    --animate-delay: 0s;
    -webkit-animation-delay:var(--animate-delay);
    animation-delay:var(--animate-delay);
    -webkit-animation-delay:var(--animate-delay);
    animation-delay:var(--animate-delay)
}

/* Chevron rotate on open */
.ms-th-megamenu .bi-chevron-down {
    transition: transform .25s ease;
    display: inline-block;
}
.ms-th-megamenu .li.firstlevel.hover .bi-chevron-down {
    transform: rotate(-180deg);
}

/* Mega col dividers */
.ms-th-mega-col:not(:last-child) {
    border-right: 1px solid #e8e8e4;
}

/* Mega column heading */
.ms-th-col-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #1a1a1a;
    margin-bottom: 1.2rem;
}

/* Mega links */
.ms-th-megamenu .row:not(.flat-menu) .nav-link.secondlevel,
.ms-th-megamenu .flat-menu .nav-link.secondlevel {
    position: relative;
    display: inline-block;
    padding: .4rem 0;
    background: none;
    text-decoration: none;
    font-size: 14px;
}

/* Animated underline left → right */
.ms-th-megamenu .nav-link.secondlevel::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: .2rem;
    width: 100%;
    height: 1px;
    background: #1a1a1a;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s ease;
}

.ms-th-megamenu .nav-link.secondlevel:hover::after {
    transform: scaleX(1);
}

/* Mega col inner padding */
.ms-th-megamenu .ms-th-mega-col {
    padding: 1.5rem 2rem;
}

/* Third-level slide-in panel */
.ms-th-dorpdown-thirdlevel {
    position: absolute;
    left: 100%;
    top: 0;
    background: #fff;
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(4px);
    transition: opacity .18s ease, transform .18s, visibility .18s;
    pointer-events: none;
    z-index: 300;
    border: 1px solid #e8e8e4;
}
.ms-th-dorpdown-thirdlevel .nav-link {
	font-size: 14px;
}
.ms-th-megamenu .megamenu-item.secondlevel:hover > .ms-th-dorpdown-thirdlevel {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}

/* Mega border fix */
.ms-th-megamenu .mega-dropdown.border-0 {
    border-top: 1px solid #e8e8e4 !important;
    border-bottom: 1px solid #e8e8e4 !important;
}

/* Backdrop */
body:has(.dropdown-li.hover)::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 2;
    backdrop-filter: blur(2px);
}
/* Megamenu css ends */


/* Footer */
.ms-scroll-to-top {
    bottom: 2rem;
    right: 2rem;
    width: 2rem;
    height:2rem;
    z-index: 1050;
    transition: background 0.2s, transform 0.2s;
}

.ms-scroll-to-top:hover {
    transform: translateY(-2px);
}
@media (max-width: 768px) {
    .ms-scroll-to-top {
        bottom: 5rem;
        right: .5rem;
    }
}