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



   HEADER CSS



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







/* Top Sale Bar */



a{text-decoration: none;}



.top-sale {



  height: 35px;



  background: #c92328;



  color: #fff;



  display: flex;



  align-items: center;



  justify-content: center;
  position: relative;



  gap: 18px;



  padding: 0;



  overflow: hidden;



  font-size: 14px;



 /* cursor: pointer;*/



}

  .clean-mega a { font-weight:bold; }

.top-sale .sale-marquee {



  overflow: hidden;



  white-space: nowrap;



  flex: 0 1 auto;



  width: 60%;



  max-width: 600px;



  height: 100%;



}


.top-noti-new{ font-weight: bold;position: absolute;
    right: 20px;
  }
.top-noti-new a{text-align: justify; color: #FFF !important;
  }



.top-sale .sale-marquee-track {



  display: inline-flex;



  align-items: center;



  height: 100%;



  animation: sale-marquee-scroll 12s linear infinite;



}



.top-sale .sale-marquee-link {



  display: inline-flex;



  align-items: center;



  height: 100%;



  color: #fff;



  text-decoration: none;



  white-space: nowrap;



  padding-right: 280px;



}



.top-sale .sale-marquee:hover .sale-marquee-track {



  animation-play-state: paused;



}



@keyframes sale-marquee-scroll {



  0% {



    transform: translateX(0%);



  }



  100% {



    transform: translateX(-50%);



  }



}



.top-sale .sale-marquee-cta {



  color: #fff;



  border: 1px solid #fff;



  padding: 2px 10px;



  text-decoration: none;



  font-size: 11px;



  font-weight: normal;



  margin: 0 0 0 6px;



  display: inline-block;
  font-weight: bold;



}



/* Top Sale Bar - carousel mode (shown instead of the marquee when there is



   more than one active notification) */



.top-sale .sale-carousel {



  position: relative;



  flex: 0 1 auto;



  width: 70%;



  max-width: 600px;



  height: 100%;



  overflow: hidden;



}



.top-sale .sale-carousel-item {



  position: absolute;



  top: 0;



  left: 0;



  width: 100%;



  height: 100%;



  display: flex;



  align-items: center;



  justify-content: center;



  color: #fff;



  text-decoration: none;



  white-space: nowrap;



  transform: translateX(100%);



  transition: transform 0.6s ease;

  font-weight: bold;



}



.top-sale .sale-carousel-item.active {



  transform: translateX(0);



}



.top-sale .sale-carousel-nav {



  flex: 0 0 auto;



  background: transparent;



  border: none;



  color: #fff;



  width: 22px;



  height: 22px;



  padding: 0;



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: 14px;



  line-height: 1;



  cursor: pointer;



  opacity: 0.85;



}



.top-sale .sale-carousel-nav:hover {



  opacity: 1;



}



/* Main Header */



.main-header{



  background:#fff;



  position:relative;



  z-index:40;



}



.header-wrap,



.bs5-scope .header-wrap{



  max-width:100% !important;



  width:100% !important;



  margin-left:auto !important;



  margin-right:auto !important;



}



.header-main-row {



  height: 135px;



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 20px;



  flex-wrap: nowrap;



}







/* Logo */



.brand{



  display:flex;



  align-items:center;



  text-decoration:none;



}



.logo{







  max-height: auto;   /* height badha di */



  width: 320px;   max-width: 320px;



}







/* Search */



.search-box{



  position:relative;



  width:100%;



  height:43px;



  margin:0 !important;



  /* .search-box IS a <form>, and gumby.css has an unscoped `form{margin:0 0 18px}`



     rule. We never declared our own margin, so that 18px bottom margin applied by



     default (not a specificity fight - just nothing overriding it), inflating this



     grid item's box and shifting the visibly-centered content upward within it.



     The explicit height above was a partial fix; this margin override is the real one. */



}



.search-box input {



  width: 100%;



  height: 43px;



  border: 1px solid #d8d8d8 !important;



  border-radius: 28px !important;



  padding: 0 54px 0 25px !important;



  font-size: 13px;



  box-shadow: none !important;



  /* style_v3.60.css has an unscoped `input[type=text]{border:1px solid #ccc;



     box-shadow:inset 0 1px 3px #ddd;border-radius:4px;padding:10px}` that ties



     our .search-box input in specificity. We never declared box-shadow at all,



     so its inset shadow applied uncontested, making the border look different



     from home-preview's clean flat border. */



}



.search-box button{



  position:absolute;



  right:4px;



  top:50%;



  transform:translateY(-50%);



  width:36px;



  height:36px;



  border:0;



  border-radius:50%;



  background:#cf2027;



  color:#fff;



}







/* Service Links */



.header-service{



  display:flex;



  align-items:center;



  gap:50px;



  height:36px;



  /* Same fix as .search-box: this is a grid item inside .header-main-center



     (display:grid), so without an explicit height it stretches to match the



     row height instead of its own 36px icon content, which pushed align-items:



     center's centering point off from the search box next to it. */



}



.header-service a{



  display:flex;



  align-items:center;



  gap:10px;



  color:#111;



  text-decoration:none;



  font-size:12px;



}



.header-service a img{



  width:36px;



  height:36px;



  object-fit:contain;



}







/* Header Icons */



.header-icons {



  display: flex;



  align-items: end;



  gap: 19px;



  justify-content: end;



}



.header-icons a{



  color:#cf2027;



  text-decoration:none;



}



.header-icons i{



  font-size:28px;



}



.header-icons img{



  width:30px;



  height:30px;



  object-fit:contain;



  vertical-align:middle;
  filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(7deg) brightness(119%) contrast(229%);



}



.cart-icon-link{



  position:relative;



  display:inline-block;



}



.cart-count-badge{



  position:absolute;



  top:-8px;



  right:-10px;



  background:#cf2027;



  color:#fff;



  font-size:11px;



  line-height:1;



  padding:3px 5px;



  border-radius:50%;



  min-width:16px;



  text-align:center;



}



.mobile-account-cart{



  display:flex;



  gap:16px;



  flex-wrap:wrap;



}



.mobile-account-cart a{



  color:#cf2027;



  font-weight:600;



  text-decoration:none;



}







/* Navigation */



.nav-menu{



  height:44px;



  background:#f6f6f6;



  border-top:1px solid #e7e7e7;



  border-bottom:1px solid #e7e7e7;



  position:relative;



  z-index:999;



}



.nav-menu .nav-link{



  height:44px;



  display:flex;



  align-items:center;



  padding:0 9px;



  color:#111;



  font-size:12px;



  font-weight:600;



}



.nav-menu .nav-link:hover,



.nav-menu .nav-link.active{



  color:#cf2027;



}







/* Mega Menu */



.nav-menu .navbar-nav,



.nav-menu .nav-item{



  position:static;



}



.menu-has{



  position:relative;



}



.clean-mega,



.simple-menu{



  display:none;



  position:absolute;



  top:44px;



  background:#fff;



  border:1px solid #e5e5e5;



  box-shadow:0 10px 30px rgba(0,0,0,.12);



  z-index:9999;



}



.menu-has:hover > .clean-mega,



.menu-has:hover > .simple-menu,



.menu-has.show > .clean-mega,



.menu-has.show > .simple-menu{



  display:block;



}







.small-mega{width:760px;}



.collections-mega,



.colors-mega,



.size-mega,



.more-mega{width:820px;}







.mega-grid{



  display:grid;



  width:100%;



}



.mega-grid.cols-3{



  grid-template-columns:repeat(3,1fr);



}



.mega-grid.cols-4{



  grid-template-columns:repeat(4,1fr);



}



.mega-grid > div{



  padding:15px 20px;



  border-right:1px solid #eee;



}



.color-swatch{



  display:inline-block;



  width:12px;



  height:12px;



  border-radius:50%;



  border:1px solid rgba(0,0,0,.15);



  margin-right:6px;



  vertical-align:middle;



}



.mega-grid-footer{



  padding:10px 20px;



  border-top:1px solid #eee;



}



.mega-grid > div:last-child{



  border-right:none;



}







.clean-mega a,



.mega-menu a{



  display:block;



  color:#444;



  text-decoration:none;



  font-size:13px;



  padding:7px 0;



}



.clean-mega a:hover,



.mega-menu a:hover{



  color:#cf2027;



  padding-left:5px;



}







.simple-menu{



  min-width:220px;



  padding:8px 0;



}



.simple-menu .dropdown-item{



  padding:10px 15px;



  font-size:13px;



}



.header-service a b {



  font-weight: 600;

  line-height: 1.5;



}







.nav-menu .nav-link {



  font-size: 12px;



  color: #111;



  padding: 12px 8px;



}



.nav-menu .active {



  color: var(--red);



}



.mega-menu {



  width: 100%;



  left: 0;



  right: 0;



  border: 0;



  border-radius: 0;



  padding: 25px 0;



}



.mega-menu h6 {



  color: var(--red);



  font-weight: 700;



}



.mega-menu a {



  display: block;



  color: #333;



  text-decoration: none;



  padding: 5px 0;



  font-size: 14px;



}



















.nav-menu .dropdown:hover > .mega-menu {



  display: block;



  margin-top: 0;



}



.nav-menu .dropdown-toggle::after {



  vertical-align: 0.15em;



}



.mega-menu {



  top: 100%;



}











/* final responsive mega menu/mobile fixes */



.nav-menu .dropdown:hover > .mega-menu {



  display: block;



  opacity: 1;



  visibility: visible;



}



.nav-menu .dropdown .dropdown-toggle {



  cursor: pointer;



}



.mobile-dropdown-toggle {



  width: 100%;



  background: #fff;



  text-align: left;



  border: 0;



  display: flex;



  justify-content: space-between;



  align-items: center;



}



.mobile-mega {



  background: #fafafa;



  border-bottom: 1px solid #eee;



  padding: 10px 18px 15px;



}



.mobile-mega h6 {



  color: var(--red);



  font-size: 13px;



  font-weight: 800;



  margin: 14px 0 7px;



}



.mobile-mega a {



  display: block;



  color: #333;



  text-decoration: none;



  font-size: 13px;



  padding: 7px 0;



  border-bottom: 1px dashed #e5e5e5;



}



.mobile-mega a:last-child {



  border-bottom: 0;



}



















.nav-menu {



  background: #f7f7f7;



  border-color: #e7e7e7 !important;



  height: 45px;



}



.nav-menu .container-fluid {



  height: 100%;



}



.nav-menu .navbar-nav {



  height: 100%;



  align-items: center;



  gap: 0;



}



.nav-menu .nav-link {



  font-size: 13px;



  font-weight: 600;



  color: #202020;



  padding: 15px 9px !important;



  line-height: 1;



  white-space: nowrap;



}



.nav-menu .nav-link.active,



.nav-menu .nav-link:hover {



  color: #cf2430;



}



.nav-menu .dropdown-toggle::after {



  font-size: 11px;



  margin-left: 4px;



}



.mega-menu {



  width: 100%;



  left: 0;



  right: 0;



  top: 100%;



  border: 0;



  border-radius: 0;



  padding: 28px 0;



  background: #fff;



  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.12) !important;



  margin-top: 0;



  opacity: 0;



  visibility: hidden;



  display: block;



  transform: translateY(12px);



  transition: all 0.22s ease;



  pointer-events: none;



}



.nav-menu .dropdown:hover > .mega-menu,



.nav-menu .dropdown.show > .mega-menu {



  opacity: 1;



  visibility: visible;



  transform: translateY(0);



  pointer-events: auto;



}



.mega-menu h6 {



  font-size: 14px;



  font-weight: 800;



  color: #cf2430;



  margin-bottom: 11px;



}



.mega-menu a {



  display: block;



  color: #333;



  text-decoration: none;



  font-size: 13px;



  padding: 7px 0;



}



.mega-menu a:hover {



  color: #cf2430;



  transform: translateX(3px);



}



.promo-box {



  background: #cf2430;



  color: #fff;



  border-radius: 10px;



  min-height: 140px;



  display: flex;



  flex-direction: column;



  align-items: center;



  justify-content: center;



  font-size: 20px;



  text-align: center;



}



.promo-box strong {



  font-size: 28px;



}



.mobile-menu-list .mobile-link {



  display: flex;



  width: 100%;



  padding: 13px 0;



  color: #222;



  text-decoration: none;



  border-bottom: 1px solid #eee;



  font-weight: 600;



}



.offcanvas .logo {



  max-width: 84px;



}















.nav-menu {



  height: 44px !important;



  background: #f6f6f6 !important;



  border-color: #e7e7e7 !important;



  padding: 0 !important;



  position: relative !important;



  z-index: 45 !important;



}



.nav-menu .container {



  max-width: 1240px !important;



}



.nav-menu .navbar-nav {



  height: 44px !important;



  flex-wrap: nowrap !important;



}



.nav-menu .nav-link {



  height: 44px !important;



  display: flex !important;



  align-items: center !important;



  padding: 0 7px !important;



  color: #111 !important;



  font-size: 12px !important;



  font-weight: 600 !important;



  line-height: 1 !important;



  white-space: nowrap !important;



}



.nav-menu .nav-link.active,



.nav-menu .nav-link:hover {



  color: #cf2027 !important;



}



.nav-menu .dropdown-toggle::after {



  margin-left: 4px !important;



  font-size: 11px !important;



}



.mega-menu {



  position: absolute !important;



  left: 0 !important;



  right: 0 !important;



  top: 44px !important;



  width: 100% !important;



  background: #fff !important;



  border: 0 !important;



  border-radius: 0 !important;



  padding: 28px 0 !important;



  margin: 0 !important;



  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.14) !important;



  display: block !important;



  opacity: 0 !important;



  visibility: hidden !important;



  transform: translateY(8px) !important;



  pointer-events: none !important;



  transition: all 0.22s ease !important;



  z-index: 9999 !important;



}



.nav-menu .dropdown:hover > .mega-menu,



.nav-menu .dropdown.show > .mega-menu {



  opacity: 1 !important;



  visibility: visible !important;



  transform: translateY(0) !important;



  pointer-events: auto !important;



}



.mega-menu .container {



  max-width: 1120px !important;



}



.mega-menu h6 {



  font-size: 15px !important;



  font-weight: 800 !important;



  color: #cf2027 !important;



  margin: 0 0 12px !important;



}



.mega-menu a {



  display: block !important;



  text-decoration: none !important;



  color: #333 !important;



  font-size: 14px !important;



  padding: 6px 0 !important;



}



.mega-menu a:hover {



  color: #cf2027 !important;



}



.mega-offer {



  background: #cf2027 !important;



  color: #fff !important;



  border-radius: 12px !important;



  min-height: 145px !important;



  display: flex !important;



  flex-direction: column !important;



  align-items: center !important;



  justify-content: center !important;



  text-align: center !important;



  font-size: 22px !important;



  font-weight: 600 !important;



}



.mega-offer strong {



  font-size: 30px !important;



}



.simple-menu {



  min-width: 190px !important;



  border: 0 !important;



  border-radius: 0 0 8px 8px !important;



  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important;



  padding: 8px !important;



  display: none;



}



.nav-menu .dropdown:hover > .simple-menu {



  display: block !important;



}



.header-main-center {



  display: grid;



  grid-template-columns: 1fr auto;



  align-items: center;



  justify-content: center;



  align-content: center;



  /* justify-items: center; */



  gap: 30px;



  width: 67.8% ;



}







@media (max-width: 1199px) {



  .nav-menu .nav-link {



    font-size: 11px !important;



    padding: 0 5px !important;



  }



}



/* Mobile */



@media (max-width:991px){







  .header-main-row{



    height:44px;



    display:flex;



    justify-content:space-between;



  }



  .logo{max-width:400px;}



  .header-icons i {



    font-size: 26px;



}







  .clean-mega,



  .simple-menu{



    position:static;



    width:100%;



    box-shadow:none;



    border:0;



  }



  .mobile-mega{



    background:#f7f7f7;



    padding:10px 15px;



  }



  .mobile-mega a{



    display:block;



    padding:10px 0;



    border-bottom:1px solid #e5e5e5;



    text-decoration:none;



    color:#333;



  }







  .mobile-mega {



    background: #fafafa !important;



    padding: 10px 16px 16px !important;



    border-bottom: 1px solid #eee !important;



  }



  .mobile-mega h6 {



    font-size: 13px !important;



    color: #cf2027 !important;



    margin: 14px 0 6px !important;



    font-weight: 800 !important;



  }



  .mobile-mega a {



    display: block !important;



    color: #333 !important;



    text-decoration: none !important;



    padding: 7px 0 !important;



    border-bottom: 1px dashed #e1e1e1 !important;



    font-size: 13px !important;



  }



}











/* === FINAL MEGA MENU FIX: centered inside device width === */



@media (min-width: 992px) {



  .nav-menu {



    position: relative !important;



    z-index: 1000 !important;



    overflow: visible !important;



  }



  .nav-menu .container,



  .nav-menu .container-fluid,



  .nav-menu .navbar-collapse,



  .nav-menu .navbar-nav,



  .nav-menu .nav-item.dropdown {



    position: static !important;



    overflow: visible !important;



  }



  .nav-menu .mega-menu {



    position: absolute !important;



    top: 100% !important;



    left: 50% !important;



    right: auto !important;



    width: min(1180px, calc(100vw - 32px)) !important;



    max-width: calc(100vw - 32px) !important;



    margin: 0 !important;



    padding: 28px 36px !important;



    border: 0 !important;



    border-radius: 0 0 10px 10px !important;



    background: #fff !important;



    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14) !important;



    transform: translateX(-50%) translateY(10px) !important;



    opacity: 0 !important;



    visibility: hidden !important;



    pointer-events: none !important;



    overflow: hidden !important;



    z-index: 9999 !important;



  }



  .nav-menu .dropdown:hover > .mega-menu,



  .nav-menu .dropdown.show > .mega-menu,



  .nav-menu .dropdown .mega-menu:hover {



    display: block !important;



    opacity: 1 !important;



    visibility: visible !important;



    pointer-events: auto !important;



    transform: translateX(-50%) translateY(0) !important;



  }



  .mega-menu .container {



    max-width: 100% !important;



    padding: 0 !important;



  }



  .mega-menu .row {



    margin-left: 0 !important;



    margin-right: 0 !important;



  }



  .mega-menu h6 {



    white-space: normal !important;



    line-height: 1.25 !important;



    margin: 0 0 12px !important;



  }



  .mega-menu a {



    white-space: normal !important;



    line-height: 1.35 !important;



    padding: 6px 0 !important;



  }



  .mega-menu .promo-box {



    min-height: 130px !important;



    width: 100% !important;



  }



}







@media (max-width: 991.98px) {



  .nav-menu {



    height: auto !important;



    min-height: 50px !important;



    overflow: visible !important;



  }



  .desktop-menu {



    display: none !important;



  }



  .offcanvas {



    max-width: 88vw !important;



  }



  .mobile-menu-list {



    display: block !important;



  }



  .mobile-dropdown-toggle {



    display: flex !important;



    align-items: center !important;



    justify-content: space-between !important;



    width: 100% !important;



    background: #fff !important;



    border: 0 !important;



    border-bottom: 1px solid #eee !important;



    color: #222 !important;



    font-weight: 700 !important;



    padding: 13px 0 !important;



  }



  .mobile-mega {



    position: static !important;



    width: 100% !important;



    max-width: 100% !important;



    transform: none !important;



    opacity: 1 !important;



    visibility: visible !important;



    pointer-events: auto !important;



    box-shadow: none !important;



    border-radius: 0 !important;



    padding: 8px 15px 14px !important;



    background: #fafafa !important;



  }



  .mobile-mega:not(.show) {



    display: none !important;



  }



  .mobile-mega.show {



    display: block !important;



  }



}







/* === CLEAN CLIENT MENU FIX (no animation dependency) === */



@media (min-width: 992px) {



  .nav-menu {



    height: 45px !important;



    background: #fff !important;



    position: relative !important;



    z-index: 5000 !important;



    overflow: visible !important;



    border-color: #d7d7d7 !important;



  }



  .main-header,



  .nav-menu .container-fluid,



  .nav-menu .navbar-nav,



  .nav-menu .nav-item {



    overflow: visible !important;



  }



  .main-nav-list {



    flex-wrap: nowrap !important;



    gap: 0 !important;



  }



  .nav-menu .nav-link {



    font-size: 12px !important;



    font-weight: bold !important;



    color: #111 !important;



    padding: 0 8px !important;



    height: 43px !important;



    line-height: 43px !important;



    white-space: nowrap !important;



  }



  .nav-menu .nav-link:hover,



  .nav-menu .nav-link.active {



    color: #d71920 !important;



  }



  .nav-menu .dropdown-toggle::after {



    font-size: 10px !important;



    margin-left: 4px !important;



    vertical-align: 0.12em !important;



  }



  .nav-menu .dropdown-menu {



    margin: 0 !important;



  }



  .menu-has:hover > .dropdown-menu,



  .menu-has:focus-within > .dropdown-menu,



  .menu-has.show > .dropdown-menu {



    display: block !important;



    opacity: 1 !important;



    visibility: visible !important;



    pointer-events: auto !important;



  }



  .clean-mega {



    display: none !important;



    position: absolute !important;



    top: 43px !important;



    left: 50% !important;



    right: auto !important;



    transform: translateX(-50%) !important;



    background: #fff !important;



    border: 1px solid #cfcfcf !important;



    border-radius: 0 !important;



    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16) !important;



    padding: 0 !important;



    z-index: 99999 !important;



    overflow: hidden !important;



  }



  .menu-has.show > .clean-mega {



    display: block !important;



  }



  .small-mega {



    width: 760px !important;



  }



  .collections-mega,



  .colors-mega {



    width: 820px !important;



  }



  .size-mega {



    width: 820px !important;



    max-height: 380px !important;



    overflow-y: auto !important;



  }



  .more-mega {



    width: 820px !important;



    max-height: 430px !important;



    overflow-y: auto !important;



  }



  .mega-grid {



    display: grid !important;



    margin: 0 !important;



    width: 100% !important;



  }



  .mega-grid.cols-3 {



    grid-template-columns: repeat(3, 1fr) !important;



  }



  .mega-grid.cols-4 {



    grid-template-columns: repeat(4, 1fr) !important;



  }



  .mega-grid > div {



    padding: 0px !important;



    border-right: 1px solid #eee !important;



    min-width: 0 !important;



  }



  .mega-grid > div:last-child {



    border-right: 0 !important;



  }



  .clean-mega a {



    display: block !important;



    text-decoration: none !important;



    color: #444 !important;

border-left: 3px solid #fff;

    background: #fff !important;



    font-size: 12px !important;



    line-height: 1.35 !important;



    padding: 14px !important;



    white-space: normal !important;



    text-transform: none !important;



  }



  .clean-mega a:hover {



    



background: #F2F3F4 !important;
    border-left: 3px solid #c42626;
    color: #c42626;
    padding: 14px !important;



  }



  .size-head {



    display: grid !important;



    grid-template-columns: 1fr 1fr 2fr !important;



    background: #fff !important;



    border-bottom: 1px solid #eee !important;



    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.12) !important;



  }



  .size-head span {



    display: block !important;



    color: #e00000 !important;



    font-size: 12px !important;



    font-weight: 700 !important;



    padding: 12px 20px !important;



    white-space: nowrap !important;



  }



  .simple-menu {



    display: none !important;



    position: absolute !important;



    top: 43px !important;



    background: #fff !important;



    border: 1px solid #cfcfcf !important;



    border-radius: 0 !important;



    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;



    min-width: 210px !important;



    padding: 6px 0 !important;



    z-index: 99999 !important;



  }



  .menu-has:hover > .simple-menu,



  .menu-has:focus-within > .simple-menu,



  .menu-has.show > .simple-menu {



    display: block !important;



  }



  .simple-menu .dropdown-item {



    font-size: 12px !important;



    color: #444 !important;



    padding: 10px 12px !important;



    white-space: nowrap !important;



  }



  .simple-menu .dropdown-item:hover {



    color: #d71920 !important;



    background: #f7f7f7 !important;



  }



}



@media (max-width: 1199.98px) and (min-width: 992px) {



  .nav-menu .nav-link {



    font-size: 11px !important;



    padding: 0 5px !important;



  }



  .collections-mega,



  .colors-mega,



  .size-mega,



  .more-mega {



    width: 760px !important;



  }



  .small-mega {



    width: 680px !important;



  }



}



@media (max-width: 991.98px) {



  .offcanvas {



    /*width: 330px !important;



    max-width: 88vw !important;*/



    width: 100% !important;



    max-width: 100% !important;



  }



  .mobile-menu-list {



    display: block !important;



  }



  .mobile-link {



    display: flex !important;



    align-items: center !important;



    justify-content: flex-start !important;



    width: 100% !important;



    padding: 13px 10px !important;



    border: 0 !important;



    border-bottom: 1px solid #e8e8e8 !important;



    background: #fff !important;



    color: #111 !important;



    text-decoration: none !important;



    font-size: 14px !important;



    font-weight: 600 !important;



}



  .mobile-dropdown-toggle {



    cursor: pointer !important;



  }



  .mobile-mega {



    position: static !important;



    display: none;



    background: #f8f8f8 !important;



    padding: 6px 14px 12px !important;



    border-bottom: 1px solid #e8e8e8 !important;



    box-shadow: none !important;



    transform: none !important;



    opacity: 1 !important;



    visibility: visible !important;



    width: 100% !important;



  }



  .mobile-mega.show {



    display: block !important;



  }



  .mobile-mega a {



    display: block !important;



    color: #333 !important;



    text-decoration: none !important;



    font-size: 13px !important;



    line-height: 1.35 !important;



    padding: 8px 0 !important;



    border-bottom: 1px solid #e2e2e2 !important;



  }



  .mobile-mega a:last-child {



    border-bottom: 0 !important;



  }



}







/* === FINAL DESKTOP DROPDOWN POSITION FIX ===



   Dropdown now opens under the hovered nav item and is clamped inside the screen.



   No AOS/GSAP animation dependency. */



@media (min-width: 992px) {



  .nav-menu {



    overflow: visible !important;



    position: relative !important;



    z-index: 9990 !important;

    border: 0px !important;



  }



  .nav-menu .navbar-nav,



  .nav-menu .nav-item,



  .nav-menu .dropdown {



    position: static !important;



    overflow: visible !important;



  }



  .clean-mega,



  .simple-menu {



    position: fixed !important;



    top: var(--menu-top, 43px) !important;



    left: var(--menu-left, 0px) !important;



    right: auto !important;



    transform: none !important;



    margin: 0 !important;



    display: block !important;



    opacity: 0 !important;



    visibility: hidden !important;



    pointer-events: none !important;



    max-height: calc(100vh - var(--menu-top, 43px) - 16px) !important;



    overflow-y: auto !important;



    overscroll-behavior: contain !important;



  }



  .menu-has:hover > .clean-mega,



  .menu-has:focus-within > .clean-mega,



  .menu-has.show > .clean-mega,



  .menu-has:hover > .simple-menu,



  .menu-has:focus-within > .simple-menu,



  .menu-has.show > .simple-menu {



    opacity: 1 !important;



    visibility: visible !important;



    pointer-events: auto !important;



  }



  .clean-mega:hover,



  .simple-menu:hover {



    opacity: 1 !important;



    visibility: visible !important;



    pointer-events: auto !important;



  }



}







/* === REQUEST FIX: More menu opens from right + Size heading sub dropdowns === */



@media (min-width: 992px) {



  .more-mega {



    left: var(--menu-left, auto) !important;



    right: auto !important;



  }



  .size-mega {



    overflow: visible !important;



    max-height: none !important;



  }



  /* .size-mega itself must stay overflow:visible so the absolutely-positioned



     .size-panel-odd/.size-panel-runner side panels aren't clipped. Instead, make



     just the long Rectangular/Runner/Round/Square grid scrollable on its own. */



  .size-mega .mega-grid.cols-4 {



    max-height: calc(100vh - var(--menu-top, 43px) - 120px) !important;



    overflow-y: auto !important;



    overscroll-behavior: contain !important;



  }



  .size-head {



    position: relative !important;



    display: grid !important;



    grid-template-columns: 1fr 1fr 2fr !important;



    background: #fff !important;



    border-bottom: 1px solid #dedede !important;



    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.14) !important;



    z-index: 3 !important;



  }



  .size-head-btn {



    height: 38px !important;



    border: 0 !important;



    border-left: 2px solid transparent !important;



    background: #fff !important;



    color: #e00000 !important;



    font-size: 12px !important;



    font-weight: 700 !important;



    text-align: left !important;



    padding: 0 18px !important;



    display: flex !important;



    align-items: center !important;



    justify-content: flex-start !important;



    gap: 6px !important;



    white-space: nowrap !important;



    cursor: pointer !important;



  }



  .size-head-btn:hover,



  .size-head-btn.active {



    border-left-color: #e00000 !important;



    background: #fafafa !important;



  }



  .size-head-btn i {



    font-size: 10px !important;



    line-height: 1 !important;



  }



  .size-panel {



    display: none !important;



    position: absolute !important;



    top: 38px !important;



    width: 264px !important;



    max-height: 315px !important;



    overflow-y: auto !important;



    background: #f4f4f4 !important;



    border: 1px solid #d2d2d2 !important;



    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.18) !important;



    z-index: 8 !important;



    padding: 0 !important;



  }



  .size-panel.show {



    display: block !important;



  }



  .size-panel-odd {



    left: 0 !important;



  }



  .size-panel-runner {



    left: 33.333% !important;



  }



  .size-panel a {



    display: block !important;



    color: #333 !important;



    font-size: 14px !important;



    line-height: 1 !important;



    padding: 10px 14px !important;



    border-bottom: 1px solid #d8d8d8 !important;



    background: #f4f4f4 !important;



    text-decoration: none !important;



  }



  .size-panel a:hover {



    background: #fff !important;



    color: #d71920 !important;



  }



}







/* === MOBILE RESPONSIVE MENU COMPLETE FIX === */



@media (max-width: 991.98px) {



  .offcanvas-body {



    padding-top: 10px !important;



  }



  .mobile-menu-list {



    max-height: calc(100vh - 145px) !important;



    overflow-y: auto !important;



    padding-right: 4px !important;



  }



  .mobile-link.active,



  .mobile-link.current,



  .mobile-link[aria-expanded="true"] {



    color: #d71920 !important;



    font-weight: 800 !important;



    /*background: #fff7f7 !important;*/



  }



  .mobile-link[aria-expanded="true"] i {



    transform: rotate(180deg) !important;



  }



  .mobile-link i {



    transition: transform 0.2s ease !important;



            font-size: 18px;



        padding-left: 9px;



  }



  .mobile-mega {



    padding: 0 !important;



    background: #f7f7f7 !important;



  }



  .mobile-mega a {



    padding: 10px 14px !important;



    font-size: 13px !important;



    color: #222 !important;



    font-weight: 500 !important;



    border-bottom: 1px solid #e2e2e2 !important;



  }



  .mobile-mega a:hover,



  .mobile-mega a.active {



    color: #d71920 !important;



    background: #fff !important;



    font-weight: 700 !important;



  }



  .mobile-sub-toggle {



    width: 100% !important;



    display: flex !important;



    align-items: center !important;



    justify-content: space-between !important;



    padding: 11px 14px !important;



    border: 0 !important;



    border-bottom: 1px solid #ddd !important;



    background: #fff !important;



    color: #d71920 !important;



    font-size: 12px !important;



    font-weight: 800 !important;



    text-align: left !important;



  }



  .mobile-sub-toggle[aria-expanded="true"] {



    background: #fff4f4 !important;



  }



  .mobile-sub-toggle[aria-expanded="true"] i {



    transform: rotate(180deg) !important;



  }



  .mobile-sub-panel {



    background: #eeeeee !important;



    padding: 0 !important;



  }



  .mobile-sub-panel a {



    padding-left: 28px !important;



    background: #eeeeee !important;



  }



  .mobile-size-mega > a {



    background: #f7f7f7 !important;



  }



}







/* === FINAL MOBILE RESPONSIVE DROPDOWN FIX === */



@media (max-width: 991.98px) {



  #mobileMenu .collapse,



  #mobileMenu .collapsing {



    transition: none !important;



    height: auto !important;



  }



  #mobileMenu .collapsing {



    display: block !important;



    overflow: visible !important;



  }



  #mobileMenu .mobile-mega:not(.show),



  #mobileMenu .mobile-sub-panel:not(.show) {



    display: none !important;



  }



  #mobileMenu .mobile-mega.show,



  #mobileMenu .mobile-sub-panel.show {



    display: block !important;



  }



  #mobileMenu .mobile-sub-panel {



    position: static !important;



    width: 100% !important;



    max-height: none !important;



    overflow: visible !important;



    background: #eee !important;



    border: 0 !important;



    box-shadow: none !important;



  }



  #mobileMenu .mobile-sub-toggle.current,



  #mobileMenu .mobile-sub-toggle[aria-expanded="true"],



  #mobileMenu .mobile-dropdown-toggle.current,



  #mobileMenu .mobile-dropdown-toggle[aria-expanded="true"] {



    color: #d71920 !important;



    font-weight: 800 !important;



    background: #fff5f5 !important;



  }



  #mobileMenu .mobile-sub-toggle.current i,



  #mobileMenu .mobile-sub-toggle[aria-expanded="true"] i,



  #mobileMenu .mobile-dropdown-toggle.current i,



  #mobileMenu .mobile-dropdown-toggle[aria-expanded="true"] i {



    transform: rotate(180deg) !important;



  }



  #mobileMenu .mobile-size-mega {



    overflow: visible !important;



  }



}







/* CLIENT FINAL: Desktop mega menus open on CLICK only, not hover */



@media (min-width: 992px) {



  .nav-menu .menu-has:hover > .dropdown-menu,



  .nav-menu .menu-has:focus-within > .dropdown-menu {



    display: none !important;



    opacity: 0 !important;



    visibility: hidden !important;



    pointer-events: none !important;



  }



  .nav-menu .menu-has.show > .dropdown-menu,



  .nav-menu .menu-has.show > .clean-mega,



  .nav-menu .menu-has.show > .simple-menu {



    display: block !important;



    opacity: 1 !important;



    visibility: visible !important;



    pointer-events: auto !important;



    transform: translateY(0) !important;



  }



  .nav-menu .menu-has.show > .nav-link {



    color: #d71920 !important;



    /* font-weight: 700 !important; */



}



  .nav-menu .menu-has:not(.show) > .clean-mega,



  .nav-menu .menu-has:not(.show) > .simple-menu {



    display: none !important;



    opacity: 0 !important;



    visibility: hidden !important;



    pointer-events: none !important;



  }



}







/* === CLIENT FIX: dropdown should not float while page scrolls + More right aligned === */



@media (min-width: 992px) {



  .nav-menu .more-mega {



    left: auto !important;



    right: 8px !important;



  }



}











@media (max-width: 991.98px) {



  body.offcanvas-open {



    overflow: hidden !important;



  }



  #mobileMenu {



    height: 100vh !important;



    max-height: 100vh !important;



    overflow: hidden !important;



  }



  #mobileMenu .offcanvas-header {



    flex: 0 0 auto !important;



  }



  #mobileMenu .offcanvas-body {



    height: calc(100vh - 82px) !important;



    max-height: calc(100vh - 82px) !important;



    overflow-y: auto !important;



    overflow-x: hidden !important;



    padding-bottom: 24px !important;



  }



  #mobileMenu .mobile-menu-list {



    max-height: none !important;



    overflow: visible !important;



    padding-right: 0 !important;



  }



  #mobileMenu .search-box {



    position: sticky;



    top: 0;



    z-index: 3;



    background: #fff;



    margin-bottom: 8px !important;



  }



  .top-sale .sale-marquee {



    flex: 0 1 auto;



    width: 80%;



    max-width: none;



  }



  .top-sale .sale-marquee-track {



    animation-duration: 8s;



  }



  .top-sale .sale-marquee-link {



    padding-right: 120px;



  }



}







.grecaptcha-badge{display: none;     box-shadow: gray 0px 0px 0px !important;} 







.desktop-view{display: block;}







.header-mobile-view{display: none;}











@media (max-width: 767px) {



  .header-wrap, .bs5-scope .header-wrap {

    height: 120px;

}



.desktop-view{display: none;}



.header-mobile-view{display: block;}



  .logo {



    width: 100% !important;



  }



}



@media (max-width: 767px){



  .listBlock .sku {

    width: 100%;

    text-align: left;

}



.listBlock .esize {

    text-align:left;

}



.listBlock .Oprice {

     display: block;

    width: 100%;

    text-align: left;
    margin: 0px;

}



.listBlock .price {

  margin: 0px;

    display: block;

    width: auto;

    text-align: left;

}

.free_shi_text2 {text-align: left;}

.listBlock h3.product_title {

    height: 87px;

}



  .header-wrap{

    padding: 10px 12px;

  }



  .header-main-row{

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: nowrap;   /* logo, search, icons ek hi row mein rahein */

    gap: 10px;

  }



  .brand{

    flex-shrink: 0;

  }

  .brand .logo{

    max-height: 60px;

    width: auto;

  }



  .header-main-center{

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: center;   /* search box center mein aa jayega */

    min-width: 0;

        margin-top: 24%;

        margin-left: 12%;

    }

  .search-box{

   width: 100%;

  max-width: 100%;   /* poori available width le lega, center mein hi rahega */

  margin: 0 auto;

  }

  .search-box input{

    width: 100%;

    min-width: 0;

    font-size: 13px;

    padding: 6px 32px 6px 10px;

  }

  .search-box button{

    right: 6px;

  }



  .header-icons{

    flex-shrink: 0;

    display: flex;

    align-items: center;

    gap: 10px;

  }

  .header-icons img{

    width: 22px !important;

    height: 22px !important;

  }

  .navbar-toggler{

    font-size: 22px;

    padding: 2px 6px;

  }

}



/* ===== SMALL MOBILE ===== */

@media (max-width: 400px){

  .brand .logo{

    max-height: 30px;

  }

  .header-icons{

    gap: 8px;

  }

  .header-icons img{

    width: 20px !important;

    height: 20px !important;

  }

  .search-box input{

    font-size: 12px;

  }

}

@media (min-width: 992px) {
    .nav-menu .navbar-nav, .nav-menu .nav-item, .nav-menu .dropdown {
        position: static !important;
        overflow: visible !important;
    }
}

Bootstrap header */
.bs5-scope,
.bs5-scope * {
    -webkit-font-smoothing: auto !important;
}

.bs5-scope .navbar.navbar-expand-lg .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
}

@media (max-width: 768px) { .col-xs-6 {
    width: 50%;
}
.top-sale .sale-marquee-cta {
  padding: 0px 10px;}


}

@media only screen and (max-width: 767px) {

    .listBlock .mt-2{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        flex-wrap: nowrap;
    }

    .listBlock .price,
    .listBlock .Oprice{
        display: inline-block;
        margin: 0;
        white-space: nowrap;
    }

}