html, body {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  *, *::before, *::after {
    box-sizing: border-box !important;
  }
  
  /* Nav-container must be behind header - set z-index to 1 */
  .nav-container,
  .nav-container.active,
  .nav-container:hover {
    z-index: 2 !important;
  }
  
  /* Header must be above nav-container - set z-index to 10000 */
  /* Override Shopify theme.css .header-sticky { z-index: 20; } */
  .header-sticky,
  .header-section.header-sticky,
  .header-section.header-sticky .header,
  .header-sticky .header,
  .header-section .header,
  .header-section header,
  .header-section[is="sticky-header"],
  .header-section[is="sticky-header"] .header,
  header[is="sticky-header"],
  .shopify-section-header-sticky,
  .shopify-section-header-sticky .header,
  #shopify-section-header,
  #shopify-section-header .header,
  [id^="shopify-section-header"],
  [id^="shopify-section-header"] .header {
    z-index: 10000 !important;
  }
  
  /* Additional specific overrides for all possible header selectors */
  .header-section.header-sticky.header-scrolled,
  .header-section.header-sticky.header-scrolled .header,
  .header-transparent.header-scrolled .header,
  .header-transparent .header {
    z-index: 10000 !important;
  }
  
  /* Desktop: sticky header with space from top */
  @media screen and (min-width: 760px) {
    .header-sticky,
    .header-section.header-sticky {
      position: sticky !important;
      inset-block-start: 10px !important;
      top: 10px !important;
      z-index: 10000 !important;
    }
    
    .header-transparent.header-scrolled .header {
      position: fixed !important;
      inset-block-start: 10px !important;
      top: 10px !important;
      z-index: 10000 !important;
    }
  }
  
  /* Mobile: make header sticky with top padding (like desktop) */
  @media screen and (max-width: 1024px) {
    .header-sticky,
    .header-section.header-sticky,
    .header-section[is="sticky-header"],
    .header-navigation-wrapper.sticky,
    .header-section {
      position: sticky !important;
      top: 10px !important;
      inset-block-start: 10px !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      z-index: 10000 !important;
      bottom: 20px !important;
    }
    
    .header-sticky .header,
    .header-section.header-sticky .header,
    .header-section .header,
    .header-section header,
    .header-transparent.header-scrolled .header,
    .header-transparent .header {
      position: relative !important;
      top: auto !important;
      inset-block-start: auto !important;
      max-width: 100% !important;
      width: 100% !important;
      box-sizing: border-box !important;
      z-index: 10000 !important;
    }
  }
  
  /* TOP NAV LINKS CSS moved to sections/custom-nav-bar.liquid */
  
  /* ============================================
     HEADER SECTION - STICKY AT TOP
     Has space above for nav-bar, header sticks at top
     ============================================ */
  /* Desktop: header sticky with space from top */
  @media screen and (min-width: 1025px) {
    .header-section,
    #shopify-section-header,
    [id^="shopify-section-header"] {
      margin-top: 36px !important; /* Space for nav-bar above */
      margin-bottom: 0 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      position: sticky !important;
      top: 10px !important;
      left: 0 !important;
      right: 0 !important;
      z-index: 10000 !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      background: transparent !important;
      overflow: visible !important;
    }
  }
  
  /* Mobile: header sticky with top padding (like desktop) */
  @media screen and (max-width: 1024px) {
    .header-section,
    #shopify-section-header,
    [id^="shopify-section-header"] {
      margin-top: 36px !important; /* Space for nav-bar above */
      margin-bottom: 0 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      position: sticky !important;
      top: 10px !important;
      left: 0 !important;
      right: 0 !important;
      z-index: 10000 !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      background: transparent !important;
      overflow: visible !important;
    }
  }
  
  /* Header bar positioning */
  .header-section .header[is="sticky-header"],
  .header-section.sticky .header,
  .header-section .header.header-nav-scrolled,
  .header-section .header,
  .header-section header {
    position: relative !important;
    top: auto !important;
    z-index: inherit !important;
    overflow: visible !important; /* Allow nav-bar to show above */
  }
  
  /* Sticky behavior - Desktop only */
  @media screen and (min-width: 1025px) {
    .header-section[is="sticky-header"],
    .header-section.sticky {
      position: sticky !important;
      top: 10px !important;
      inset-block-start: 10px !important;
    }
    
    .header-section[is="sticky-header"] .header,
    .header-section.sticky .header {
      position: relative !important;
      top: auto !important;
    }
  }
  
  /* Mobile: sticky behavior with top padding (like desktop) */
  @media screen and (max-width: 1024px) {
    .header-section[is="sticky-header"],
    .header-section.sticky {
      position: sticky !important;
      top: 10px !important;
      inset-block-start: 10px !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
    
    .header-section[is="sticky-header"] .header,
    .header-section.sticky .header {
      position: relative !important;
      top: auto !important;
      max-width: 100% !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }
  }
  
  /* Main content goes under nav-bar + header */
  main,
  #MainContent,
  .main-content {
    margin-top: -106px !important; /* Pull content up under nav-bar (36px) + header (70px) */
    padding-top: 0 !important;
    position: relative !important;
    z-index: 200 !important;
  }
  
  /* Mobile: Add margin-top to prevent header overlap - applies to all page types */
  @media screen and (max-width: 1024px) {
    /* Hide scrollbar on mobile */
    html, body {
      scrollbar-width: none !important;
      -ms-overflow-style: none !important;
    }
    html::-webkit-scrollbar, body::-webkit-scrollbar {
      display: none !important;
    }

    /* Reset negative margin on mobile */
    main,
    #MainContent,
    .main-content,
    .page-container {
      margin-top: 0 !important;
      padding-top: 0 !important; /* Remove main padding, we'll add it to first section instead */
    }
    
    /* Ensure first section doesn't have negative margins that pull it up above header */
    main > .shopify-section:first-child,
    #MainContent > .shopify-section:first-child,
    .main-content > .shopify-section:first-child,
    .page-container > main > .shopify-section:first-child,
    main > section:first-child,
    #MainContent > section:first-child {
      margin-top: 0 !important;
    }
    
    /* Home page: keep 80px top spacing */
    body.template-index main > .shopify-section:first-child,
    body.template-index #MainContent > .shopify-section:first-child,
    body.template-index .main-content > .shopify-section:first-child {
      padding-top: calc(var(--section-padding-top, 0px) + 80px) !important;
    }
    body.template-index main > .shopify-section:first-child:not(.section--padding),
    body.template-index #MainContent > .shopify-section:first-child:not(.section--padding),
    body.template-index .main-content > .shopify-section:first-child:not(.section--padding) {
      padding-top: 80px !important;
    }

    /* Every other page: reduced top spacing (28px) */
    body:not(.template-index) main > .shopify-section:first-child,
    body:not(.template-index) #MainContent > .shopify-section:first-child,
    body:not(.template-index) .main-content > .shopify-section:first-child {
      padding-top: calc(var(--section-padding-top, 0px) + 28px) !important;
    }
    body:not(.template-index) main > .shopify-section:first-child:not(.section--padding),
    body:not(.template-index) #MainContent > .shopify-section:first-child:not(.section--padding),
    body:not(.template-index) .main-content > .shopify-section:first-child:not(.section--padding) {
      padding-top: 28px !important;
    }
  }
  
  /* First section should display properly */
  main > .shopify-section:first-child,
  #MainContent > .shopify-section:first-child {
    padding-top: 0 !important;
  }
  
  
  /* ============================================
     HEADER - WHITE BACKGROUND WITH ROUNDED CORNERS
     Logo on left, product list in center, icons on right
     Design matches image - white bar with rounded corners
     ============================================ */
  /* Header - white background with rounded corners, everything on ONE LINE */
  .header-section .header,
  .header-section header {
    background: #fff !important;
    padding: 12px 24px !important;
    height: 70px !important; /* Fixed height */
    border-radius: 12px !important; /* Rounded corners like image */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; /* Subtle shadow */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    white-space: nowrap !important; /* Prevent wrapping */
    overflow: hidden !important;
    z-index: 10000 !important; /* Ensure header is above nav-container */
    position: relative !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Desktop: ensure header doesn't overflow container */
  @media screen and (min-width: 1025px) {
    .header-section .header,
    .header-section header {
      max-width: calc(100% - 40px) !important; /* Account for section padding (20px each side) */
      width: calc(100% - 40px) !important;
    }
  }
  
  /* Mobile: ensure header doesn't overflow */
  @media screen and (max-width: 1024px) {
    .header-section .header,
    .header-section header {
      max-width: 100% !important;
      width: 100% !important;
      padding-left: 16px !important;
      padding-right: 16px !important;
    }
    /* Mobile: logo left, search/cart/menu right - hide left (start) icons */
    .header-section .header__icons--start {
      display: none !important;
    }
    /* Mobile: always show menu (hamburger) on the right - override theme center layout */
    .header-section .header__icons--end .menu-drawer-button {
      display: flex !important;
    }
  }
  
  /* Ensure all header content stays on one line */
  .header-section .header__logo,
  .header-section .header__navigation,
  .header-section .header__icons {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  
  /* Navigation menu - no wrapping, everything on one line */
  .header__menu .navbar-nav.main-categories {
    display: flex !important;
    flex-wrap: nowrap !important; /* No wrapping to second line */
    white-space: nowrap !important;
    overflow: visible !important;
    gap: 10px !important; /* Reduced gap */
  }
  
  /* Navigation items - smaller padding to fit on one line */
  .header__menu .navbar-nav.main-categories .nav-item {
    padding: 0 10px !important; /* Reduced padding to fit */
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  
  /* Navigation links - smaller font if needed to fit */
  .header__menu .navbar-nav.main-categories .nav-item a {
    font-size: 13px !important; /* Slightly smaller to fit */
    white-space: nowrap !important;
  }
  
  /* Header container with side margins for rounded corners */
  .header-section {
    padding: 0 20px !important; /* Side padding for rounded corners visibility */
    padding-top: 0 !important; /* No padding-top - remove gap */
    padding-bottom: 0 !important; /* No padding-bottom */
    margin-top: 0 !important; /* No margin-top - remove gap */
    margin-bottom: 0 !important; /* No margin-bottom */
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: sticky !important; /* Sticky - slides down on scroll */
    left: 0 !important;
    right: 0 !important;
    overflow: visible !important;
  }
  
  /* Desktop: ensure header-section doesn't overflow viewport when sticky */
  @media screen and (min-width: 1025px) {
    .header-section {
      max-width: 100% !important;
      width: 100% !important;
      padding-left: 20px !important;
      padding-right: 20px !important;
    }
  }
  
  /* Mobile: ensure header-section doesn't overflow viewport when sticky */
  @media screen and (max-width: 1024px) {
    .header-section {
      max-width: 100% !important;
      width: 100% !important;
      padding-left: 16px !important;
      padding-right: 16px !important;
    }
  }
  
  /* Remove any spacing that creates white gap */
  .header-section .section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  
  /* Ensure header maintains proper positioning */
  .header-section .header {
    position: relative !important;
    margin: 0 auto !important;
    margin-top: 0 !important; /* No top margin - remove gap */
    margin-bottom: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Fix overflow issue - ensure header doesn't exceed container */
  @media screen and (min-width: 1025px) {
    .header-section .header {
      max-width: calc(100% - 40px) !important; /* Account for section padding */
      width: calc(100% - 40px) !important;
    }
  }
  
  /* Remove white corner below logo - ensure logo container has no background artifacts */
  .header-section .header__logo,
  .header-section .header__logo *,
  .header-section .header__logo img,
  .header-section .header__logo svg,
  .header-section .header__logo a,
  .header-section .header__logo a::before,
  .header-section .header__logo a::after,
  .header-section .header__logo::before,
  .header-section .header__logo::after {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  
  .header-section .header__logo::before,
  .header-section .header__logo::after,
  .header-section .header__logo a::before,
  .header-section .header__logo a::after {
    content: none !important;
    display: none !important;
  }
  
  /* Ensure header section doesn't create white corners when sticky */
  .header-section::before,
  .header-section::after {
    content: none !important;
    display: none !important;
  }
  
  /* Remove any white background artifacts from header positioning */
  .header-section .section::before,
  .header-section .section::after {
    content: none !important;
    display: none !important;
  }
  
  
  /* Remove section padding that creates gaps */
  .header-section.section {
    --section-padding-top: 0 !important;
    --section-padding-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Remove any white gap by ensuring header starts immediately after nav-bar */
  #shopify-section-header.section,
  [id^="shopify-section-header"].section {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  
  /* Override any section padding variables */
  #shopify-section-header {
    --section-padding-top: 0 !important;
  }
  
  /* Ensure headers are above website content */
  .topbar-section {
    z-index: 10002 !important; /* Highest - top bar */
  }
  
  
  .header-section {
    z-index: 10000 !important; /* Lower than nav-bar but above content */
  }
  
  /* Ensure main content is below headers */
  main,
  .main-content,
  #MainContent,
  .shopify-section:not(.header-section):not(.topbar-section) {
    position: relative !important;
    z-index: 1 !important; /* Below fixed headers */
  }

  /* Remove any overlay backgrounds and transparent transitions */
  .header-section .header::before,
  .header-section header::before {
    display: none !important;
  }

  /* Header navigation - product list in center */
  .header__navigation {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 1;
  }

  .header__menu .navbar-nav.main-categories {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 0;
    margin: 0;
    list-style: none;
    flex: 1;
  }
  
  .header__menu .navbar-nav.main-categories .nav-item {
    padding: 0 18px;
    list-style: none;
  }
  
  .header__menu .navbar-nav.main-categories .nav-item a {
    color: #333;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 0;
    display: block;
    position: relative;
  }
  
  .header__menu .navbar-nav.main-categories .nav-item:hover a,
  .header__menu .navbar-nav.main-categories .nav-item.active a {
    color: #000;
    font-weight: 600;
  }
  
  .header__menu .navbar-nav.main-categories .nav-item a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #FF0000;
    transform: scaleX(0);
    transition: transform 0.3s ease;
  }

  .hot-deals {
    position: relative;
  }

  .azaadi-glow {
color: #ffffff;
font-weight: bold;
position: relative;
text-transform: uppercase;
background: linear-gradient(90deg, #00b140,rgb(160, 255, 188), #00b140);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shine 10s linear infinite;
text-decoration: none;
}

@keyframes shine {
0% {
  background-position: 200% center;
}
100% {
  background-position: -200% center;
}
}

}

  .new-tag {
    top: 0;
    display: flex;
    align-items: center;
    right: -34px;
    position: absolute;
    padding: 2px 5px;
    font-size: 10px;
    height: 25px !important;
    gap: 2px;
  }
  .header-navigation-wrapper {
    transition: all .4s ease-in-out;
  }
  
  /* Desktop: sticky header navigation wrapper */
  @media screen and (min-width: 1025px) {
    .header-navigation-wrapper.sticky {
      position: fixed;
      left: 0;
      right: 0;
      top: 10px;
      margin: auto;
      z-index: 10000;
      width: 100%;
      transition: all .4s ease-in-out;
    }
  }
  
  /* Mobile: sticky header navigation wrapper with top padding */
  @media screen and (max-width: 1024px) {
    .header-navigation-wrapper.sticky {
      position: sticky;
      left: 0;
      right: 0;
      top: 10px;
      margin: 0;
      z-index: 10000;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      transition: all .4s ease-in-out;
    }
  }
  .navbar-nav {
    padding: 0;
    display: inline-flex;
    align-items: center;
    color: black;
    z-index: 1;
    position: relative;
}


/* Mobile - transparent header overlay and nav text (no forced black on icons) */
@media screen and (max-width: 1023px) {
  .header-transparent:not(.header-scrolled) .header-section .header::before {
    background: transparent !important;
    opacity: 0 !important;
  }

  .header-transparent:not(.header-scrolled) .navbar-nav a,
  .header-transparent:not(.header-scrolled) .nav-link,
  .header-transparent:not(.header-scrolled) .nav-link-text {
    color: white !important;
  }
}
  .navbar-nav li {
      list-style: none;
  }
  .navbar-nav li a {
      padding: 0.8rem 1rem;
  }
  .nav-item {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .nav-item a {
      position: relative;
  }
  .nav-item.active a span {
      color: #FF0000;
      font-weight: 700;
  }
  .nav-item.active a:before {
      content: "";
      position: absolute;
      top: auto;
      left: 1rem;
      right: 1rem;
      bottom: 0;
      height: 3px;
      width: auto;
      background: #FF0000;
      opacity: 1;
      transition: all 0.3s ease;
  }
  .nav-item {
      padding-left: 1rem;
      padding-right: 1rem;
  }
  .nav-item:hover a span {
      color: #FF0000;
      font-weight: 700;
  }
  .nav-item a:before {
      content: "";
      position: absolute;
      top: auto;
      left: 1rem;
      right: 1rem;
      bottom: 0;
      height: 3px;
      width: auto;
      background: #FF0000;
      opacity: 0;
      transition: all 0.3s ease;
  }
  .nav-item:hover a:before{
    opacity: 1;
  }

  .nav-bar-open {
      display: block;
  }
  .nav-bar-open,
  .nav-container {
      position: fixed;
      left: 20px;
      right: auto;
      top: -10px;
      z-index: 1 !important;
  }
  
  .nav-container {
      background-color: rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      padding: 0 30px;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease, padding 0.4s ease, backdrop-filter 0.3s ease;
      width: calc(100% - 40px);
      border-radius: 0 0 16px 16px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  }

  .product-list-nav-buttons {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 12px;
  }
  

  /* Keep nav-container translucent, even when header is transparent */
  .header-transparent:not(.header-scrolled) .nav-container.active {
      background: rgba(255, 255, 255, 0.25) !important;
      backdrop-filter: blur(20px) saturate(180%) !important;
      -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  }

  /* Menu dropdown text should be dark/black, not white (exclude .tag so NEW badge stays white) */
  .header-transparent:not(.header-scrolled) .nav-container.active,
  .header-transparent:not(.header-scrolled) .nav-container.active *:not(.tag):not(.tag *) {
      color: #000 !important;
  }

  .header-transparent:not(.header-scrolled) .nav-container.active .nav-type-wrapper .type-item .type-name,
  .header-transparent:not(.header-scrolled) .nav-container.active .cateNav .cateNavItem {
      color: #000 !important;
  }

  /* Keep NEW tag (and other .tag badges) white on their background */
  .header-transparent:not(.header-scrolled) .nav-container.active .tag,
  .header-transparent:not(.header-scrolled) .nav-container.active .tag.new {
      color: #ffffff !important;
  }
  .nav-container .content-wrapper {
    max-width: 1268px;
    margin: 0 auto;
  }
  .nav-container.active {
    max-height: 600px;
    padding: 12px 30px 20px;
  }
  /* Hide old type wrapper - now using header navigation */
  .nav-container .nav-type-wrapper {
    display: none;
  }
  .nav-container .nav-product-wrapper {
    margin-top: 10px;
  }
  
  /* Product box - remove old styling */
  .nav-product-wrapper .product-box {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
  }
  
  /* Type1 container - main flex layout with left nav and right products */
  .nav-container .nav-product-wrapper .type1 {
    display: none;
    text-align: left;
  }
  .nav-container .nav-product-wrapper .type1.active {
    display: flex;
    flex-direction: row;
    gap: 25px;
    align-items: flex-start;
    padding: 5px 0;
  }
  
  /* Left navigation - vertical menu */
  .nav-container .nav-product-wrapper .cateNav {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: 0;
    background: transparent;
    padding: 5px 20px 5px 5px;
    min-width: 160px;
    max-width: 200px;
    flex-shrink: 0;
    position: relative;
  }
  
  /* Separator line on right of left nav */
  .nav-container .nav-product-wrapper .cateNav::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.6);
  }
  
  /* Left nav items */
  .nav-container .nav-product-wrapper .cateNav .cateNavItem {
    padding: 10px 16px;
    margin-bottom: 4px;
    border-radius: 8px;
    transition: all 0.25s ease;
    cursor: pointer;
    font-size: 14px;
    position: relative;
    overflow: hidden;
  }
  .nav-container .nav-product-wrapper .cateNav .cateNavItem a {
    color: #333;
    text-decoration: none;
    display: block;
    font-weight: 500;
    transition: all 0.25s ease;
  }
  .nav-container .nav-product-wrapper .cateNav .cateNavItem:hover {
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transform: translateX(5px);
  }
  .nav-container .nav-product-wrapper .cateNav .cateNavItem:hover a {
    font-weight: 600;
    color: #000;
  }
  .nav-container .nav-product-wrapper .cateNav .cateNavItem.active {
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
  }
  .nav-container .nav-product-wrapper .cateNav .cateNavItem.active a {
    color: #000;
    font-weight: 700;
  }
  
  /* Product list - right side */
  .nav-container .nav-product-wrapper .product-list {
    flex: 1;
    overflow: visible;
    position: relative;
  }
  .nav-container .product-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: flex-start;
    padding-left: 15px;
  }
  
  /* Product item card - with half-grey rounded background */
  .nav-container .nav-product-wrapper .product-item {
    width: 180px;
    background: transparent;
    border-radius: 12px;
    overflow: visible;
    padding: 10px;
    transition: all 0.3s ease;
    flex-shrink: 0;
    position: relative;
  }
  
  /* Half-grey rounded box behind product */
  .nav-container .nav-product-wrapper .product-item::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    top: 70px;
    height: auto;
    background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%, rgba(240,240,240,0.85) 30%, rgba(235,235,235,0.95) 100%);
    border-radius: 16px;
    z-index: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  }
  
  .nav-container .nav-product-wrapper .product-item > a {
    position: relative;
    z-index: 1;
    display: block;
  }
  
  .nav-container .nav-product-wrapper .product-item:hover {
    transform: translateY(-5px);
  }
  .nav-container .nav-product-wrapper .product-item:hover::before {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  }
  .nav-container .nav-product-wrapper .product-item:hover img {
    transform: scale(1.08);
  }
  
  .nav-container .product-img {
    position: relative;
    width: 100%;
    padding: 6px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    height: 135px;
    z-index: 1;
  }
  .nav-container .nav-product-wrapper .product-item img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    object-position: center center;
    transition: all 0.3s;
  }
  .nav-container .product-wrapper .tags {
    position: absolute;
    top: 50%;
    right: 8px;
    bottom: auto;
    left: auto;
    z-index: 10;
    width: auto;
    height: auto;
    overflow: visible;
    border-radius: 0;
    transform: translateY(-50%);
  }
  .nav-container .product-wrapper .tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    font-size: 8px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    background: #c41e3a;
    border-radius: 4px 0 0 4px;
    border: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    line-height: 1.2;
    font-family: var(--font-MarkOTB), 'Mark OT', 'MarkOT', sans-serif;
    clip-path: none;
    -webkit-clip-path: none;
    width: auto;
    height: auto;
    transform: none;
    margin: 0;
    overflow: visible;
  }
  .nav-container .product-wrapper .tag::before {
    display: none;
  }
  .nav-container .product-wrapper .tag.new::after {
    content: none;
  }
  .nav-container .product-name {
  margin: 8px 0 0px;
  padding-bottom: 0px;
  font-size: 12px;
  color: #000;
  text-align: center;
  line-height: 1.3;
  font-weight: 600;
  position: relative;
  z-index: 1;

  /* Fix for long product names */
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}
  
  /* Product series - hidden by default, shown when active */
  .nav-container .nav-product-wrapper .product-series {
    display: none;
  }
  .nav-container .nav-product-wrapper .product-series.active {
    display: block;
  }
  .nav-container .nav-product-wrapper .product-series .product-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    max-width: 100%;
    width: 100%;
  }

  /* Scrollable product list when more than 8 items - show down arrow to scroll; scrollbar hidden */
  .nav-container .nav-product-wrapper .product-list-scroll-container {
    position: relative;
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .nav-container .nav-product-wrapper .product-list-scroll-container::-webkit-scrollbar {
    display: none;
  }
  .nav-container .nav-product-wrapper .product-list-scroll-arrow {
    display: none;
    position: absolute;
    bottom: 8px;
    right: 8px;
    left: auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
    color: #333;
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    z-index: 20;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: background 0.2s, transform 0.2s;
  }
  .nav-container .nav-product-wrapper .product-list-scroll-container.has-more-rows .product-list-scroll-arrow {
    display: flex;
  }
  .nav-container .nav-product-wrapper .product-list-scroll-arrow:hover {
    background: #f0f0f0;
    transform: scale(1.05);
  }
  .nav-container .nav-product-wrapper .product-list-scroll-arrow svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #333;
    stroke-width: 2.5;
  }
  /* Up arrow - show when user has scrolled down */
  .nav-container .nav-product-wrapper .product-list-scroll-arrow-up {
    display: none;
    position: absolute;
    bottom: 56px;
    right: 8px;
    left: auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
    color: #333;
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    z-index: 20;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: background 0.2s, transform 0.2s;
  }
  .nav-container .nav-product-wrapper .product-list-scroll-container.can-scroll-up .product-list-scroll-arrow-up {
    display: flex;
  }
  .nav-container .nav-product-wrapper .product-list-scroll-arrow-up:hover {
    background: #f0f0f0;
    transform: scale(1.05);
  }
  .nav-container .nav-product-wrapper .product-list-scroll-arrow-up svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #333;
    stroke-width: 2.5;
  }

 .nav-container .nav-type-wrapper .type-box .type-item {
      font-size: 14px;
  }

.product-nav-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 25px;
  width: 100%;
  z-index: 100;
  position: relative;
}

.product-list-nav-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-top: 25px;
  width: 100%;
}

.view-more-btn {
padding: 10px 22px;
background: #FF0000;
color: white !important;
border-radius: 30px;
text-decoration: none;
font-size: 14px;
}

#view-id,
.view-more-btn:visited,
.view-more-btn:active,
.view-more-btn:focus {
color: white !important;
}

.nav-container .product-wrapper {
display: flex;
flex-wrap: wrap;
gap: 15px;
position: relative;
}

  .nav-container .nav-product-wrapper {
  position: relative;
  overflow: visible; /* ensure overlays are visible */
}

/* Position navigation buttons in a bottom row with view all button */
.nav-container .nav-product-wrapper .product-nav-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-top: 25px;
  width: 100%;
  position: relative;
  z-index: 10;
}

/* Center the "View More" button in the row */
.nav-container .nav-product-wrapper .product-nav-buttons .view-more-btn {
  padding: 10px 24px;
  background: #FF0000;
  color: white !important;
  border-radius: 25px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(255, 0, 0, 0.2);
  display: inline-block;
}

.nav-container .nav-product-wrapper .product-nav-buttons .view-more-btn:visited,
.nav-container .nav-product-wrapper .product-nav-buttons .view-more-btn:active,
.nav-container .nav-product-wrapper .product-nav-buttons .view-more-btn:focus {
  color: white !important;
}

.nav-container .nav-product-wrapper .product-nav-buttons .view-more-btn:hover {
  background: #cc0000;
  box-shadow: 0 4px 10px rgba(255, 0, 0, 0.3);
  transform: translateY(-1px);
}

/* Keep existing bottom nav container styles intact */
.product-list-nav-buttons {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
  padding: 10px 0;
  width: 100%;
  position: relative;
  z-index: 10;
  visibility: visible !important;
  opacity: 1 !important;
}

.product-nav-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #FF0000;
  border: none;
  color: #ffffff;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  position: relative;
  visibility: visible !important;
  opacity: 1 !important;
}

.product-nav-btn svg {
  width: 20px;
  height: 20px;
  stroke: #ffffff;
  fill: none;
}

.product-nav-btn:hover {
  background: #cc0000;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.product-nav-btn:disabled,
.product-nav-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  background: #cccccc;
}

.product-nav-btn:not(:disabled):active {
  transform: scale(0.95);
}

.view-more-btn {
  padding: 10px 24px;
  background: #FF0000;
  color: white;
  border-radius: 25px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(255, 0, 0, 0.2);
  display: inline-block;
}

.view-more-btn:hover {
  background: #cc0000;
  box-shadow: 0 4px 10px rgba(255, 0, 0, 0.3);
  transform: translateY(-1px);
}/* Ensure items don't shrink */
.nav-container .nav-product-wrapper .product-item {
flex-shrink: 0;
width: 225px;
height: 225px;
}

/* Mobile - hide buttons, use scroll */
@media screen and (max-width: 600px) {
.product-nav-btn {
  display: none;
}

.nav-container .product-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
}

  .type-link {
      position: relative;
  }
  .type-link .new-tag {
      top: -14px;
      color: #FF0000;
      font-weight: 700;
  }
  .product-item a[data-preorder-handle='vistatab-30'] .product-img img {
      width: 80px;
      object-fit: contain;
  }
  .product-item a[data-preorder-handle='vistatab-10-mini'] .product-img img {
       width: 100px ! IMPORTANT;
       height: 100px !important;
       object-fit: contain;
    }
  .product-item a[data-preorder-handle='neo-r60'] .product-img img {
    width: 94px;
    object-fit: contain;
  }
  .product-item a[data-preorder-handle='power-900'] .product-img img {
    width: 162px !important;
    object-fit: cover;
  }
  .product-item a[data-preorder-handle='power-120'] .product-img img {
    object-fit: contain;
  }
  .dekstop-menu{
    display: block;
  }
  .mobile-menu{
    display: none;
  }
  
  /* Mobile header fixes */
  @media screen and (max-width: 1024px) {
    /* Make header sticky on mobile (like desktop) with top padding */
    .header-section,
    #shopify-section-header,
    [id^="shopify-section-header"],
    .header-navigation-wrapper {
      position: sticky !important;
      top: 10px !important;
      left: 0 !important;
      right: 0 !important;
      margin-top: 36px !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
    
    .header-section[is="sticky-header"],
    .header-section.sticky,
    .header-navigation-wrapper.sticky {
      position: sticky !important;
      top: 10px !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
    
    /* Add margin on top so header doesn't go behind announcement bar */
    .section-header-navigation,
    [id*="shopify-section-header"],
    .shopify-section.header-section {
      margin-top: 36px !important;
      position: sticky !important;
      top: 10px !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
    
    /* When mobile menu is open, header goes behind the menu - COMMENTED OUT for mobile (halo-sidebar-menu-open) */
    /*
    .halo-sidebar-menu-open .header-navigation-wrapper,
    .halo-sidebar-menu-open .section-header-navigation,
    .halo-sidebar-menu-open .header-section,
    .halo-sidebar-menu-open [id*="shopify-section-header"],
    body.halo-sidebar-menu-open .header-navigation-wrapper,
    body.halo-sidebar-menu-open .header-section,
    body.halo-sidebar-menu-open [id*="shopify-section-header"] {
      z-index: 10 !important;
    }
    */
    
    /* Menu drawer should be above the header (halo-sidebar-menu-open selectors commented out for mobile) */
    .halo-sidebar,
    .halo-sidebar.halo-sidebar_menu,
    #MenuDrawer
    /* , .halo-sidebar-menu-open .halo-sidebar,
    .halo-sidebar-menu-open #MenuDrawer,
    body.halo-sidebar-menu-open .halo-sidebar */
    {
      z-index: 99999 !important;
    }
    
    /* Background overlay for menu (halo-sidebar-menu-open commented out for mobile) */
    /* .halo-sidebar-menu-open .background-overlay, */
    .background-overlay {
      z-index: 9998 !important;
    }
    
    /* Fix: hide white sidebar strip on right when mobile menu is open */
    body.has-modal-open .halo-language-currency-sidebar,
    body.has-modal-open .halo-sidebar:not(#MenuDrawer):not(.drawer__inner) {
      visibility: hidden !important;
      opacity: 0 !important;
      transform: translateX(100%) !important;
      pointer-events: none !important;
    }
  }
  
  @media screen and (max-width: 600px){
   .left.hot-deals .new-tag {
      right: -43px !IMPORTANT;
      top: -15px !important;
      color: red;
    }
  .left.hot-deals .menu-name {
      color: red;
    }
    .mobile-menu{
      display: block;
    }
    .dekstop-menu{
      display: none;
    }
    .navbar-nav {
        display: block;
        margin: 0;
    }
    .navbar-nav li {
        padding: 20px 17px 20px;
        border-bottom: 1px solid #e6e6e6;
    }
    .nav-item.active a:before {
        bottom: 0 !important;
    }


    .halo-sidebar {
      max-width: 100%;
    }
    .nav-mobile {
        margin-bottom: 8px;
    }

    #MenuDrawer .nav-mobile .menu-item .menu-link .right {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px;
        min-height: 24px;
    }
    #MenuDrawer .nav-mobile .menu-item .menu-wrapper .title .titleIcon {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px;
        min-height: 24px;
        background-image: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #MenuDrawer .nav-mobile .menu-item .menu-wrapper .title .titleIcon::after {
        display: block !important;
        opacity: 1 !important;
        font-size: 24px !important;
        color: #333 !important;
    }
    .nav-mobile .menu-item.isActive {
        color: #ff0000;
    }
    .nav-mobile .menu-item {
       padding: 22px 15px 24px 15px !important;
       border-bottom: 1px solid #eee;
    }
    .nav-mobile .menu-item .menu-link {
       display: flex;
       justify-content: space-between;
    }
    .nav-mobile .menu-item .menu-link .icon {
        display: inline-block;
        width: 24px;
        height: 24px;
        margin-right: 12px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left center;
        transform: translate(0) ! IMPORTANT;
    }
    .nav-mobile .menu-item .menu-link .left {
        display: flex;
        align-items: center;
    }
    .nav-mobile .menu-item .menu-link .right {
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
        background-image: url(/cdn/shop/files/add.svg?v=1737450369);
        background-repeat: no-repeat;
        background-size: 20px 20px;
        background-position: center;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .nav-mobile .menu-item .menu-link .right::after {
        content: '+';
        font-size: 24px;
        font-weight: 300;
        line-height: 1;
        color: #333;
        position: absolute;
        display: block !important;
        opacity: 1;
        pointer-events: none;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        font-family: 'MarkOT', sans-serif;
    }
    .nav-mobile .menu-item.isActive .right {
        background-image: none !important;
    }
    .nav-mobile .menu-item.isActive .right::after {
        content: '−';
        opacity: 1;
        font-size: 28px;
    }
    
    /* Hide plus sign for items with no submenu (like itel Home) */
    .nav-mobile .menu-item.no-submenu .menu-link .right,
    .nav-mobile .menu-item.no-submenu .right {
        display: none !important;
    }
    .nav-mobile .menu-item .menu-wrapper {
        display: none;
        color: #111;
    }
    .nav-mobile .menu-item.isActive .menu-wrapper {
        display: block !important;
    }
    .nav-mobile .menu-item .menu-wrapper .title {
        padding-left: 25px;
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .nav-mobile .menu-item .title {
        margin-top: 24px;
        padding: 4px 0;
    }
    .nav-mobile .menu-item .level1_box {
        display: none;
    }
    
    /* For items like Tabs and Smart Watches that show products directly (no sub-headings) */
    /* When level has only level1_box as child (no .title), show products directly */
    .nav-mobile .menu-item.isActive .menu-wrapper .level > .level1_box:first-child {
        display: block !important;
    }

    .nav-mobile .menu-item .menu-wrapper .level .title .titleIcon::after {
        content: '+' !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .nav-mobile .menu-wrapper .level.isActive .title .titleIcon::after,
    .nav-mobile .menu-wrapper .level.isAct .title .titleIcon::after {
        content: '−' !important;
    }
    .nav-mobile .menu-item .level1 {
        display: flex;
        flex-wrap: wrap;
        text-align: center;
    }
    .nav-mobile .menu-item .level1 .item {
        width: calc(50% - 4px);
        margin-right: 8px;
        margin-top: 24px;
        border-radius: 16px;
        background-color: #f7f7f7;
        overflow: hidden;
        padding: 16px 12px 16px 12px;
        box-sizing: border-box;
        min-height: 200px;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .nav-mobile .menu-item .level1 .item > a {
        display: flex;
        flex-direction: column;
        height: 100%;
        text-decoration: none;
    }
    .nav-mobile .menu-item .level1 .item:nth-child(2n+2) {
        margin-right: 0;
    }
    .nav-mobile .menu-item .menu-wrapper .title .titleIcon {
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
        background-image: none !important;
        background-repeat: no-repeat;
        background-size: 20px 20px;
        background-position: center;
        flex-shrink: 0;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-mobile .menu-item .menu-wrapper .title .titleIcon::after {
        content: '+';
        font-size: 24px;
        font-weight: 300;
        line-height: 1;
        color: #333;
        position: absolute;
        display: block !important;
        opacity: 1 !important;
        pointer-events: none;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        font-family: 'MarkOT', sans-serif;
        transition: all 0.2s ease;
    }
    .nav-mobile .menu-wrapper .level.isActive .title .titleIcon,
    .nav-mobile .menu-wrapper .level.isAct .title .titleIcon {
        background-image: none !important;
    }
    .nav-mobile .menu-wrapper .level.isActive .title .titleIcon::after,
    .nav-mobile .menu-wrapper .level.isAct .title .titleIcon::after {
        content: '−';
        opacity: 1 !important;
        font-size: 28px;
        font-weight: 300;
    }
    
    /* Show products when level is active */
    .nav-mobile .menu-wrapper .level.isActive .level1_box,
    .nav-mobile .menu-wrapper .level.isAct .level1_box {
        display: block !important;
    }
    .nav-mobile .menu-item .product-img {
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 16px 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 140px;
        box-sizing: border-box;
        overflow: visible;
    }
    .nav-mobile .menu-item .product-img img {
        max-width: 100%;
        max-height: 120px;
        width: auto;
        height: auto;
        object-fit: contain;
        object-position: center center;
        margin: 0 auto;
        display: block;
    }

    #MenuDrawer .nav-mobile .menu-item .level1 .item {
        padding: 16px 12px 16px 12px !important;
        min-height: 200px !important;
        overflow: hidden !important;
        position: relative !important;
    }
    #MenuDrawer .nav-mobile .menu-item .product-img {
        padding: 16px 12px !important;
        min-height: 140px !important;
        overflow: visible !important;
    }
    #MenuDrawer .nav-mobile .menu-item .product-img img {
        max-width: 100% !important;
        max-height: 120px !important;
    }
    #MenuDrawer .nav-mobile .menu-item .level1 .item {
        position: relative !important;
    }
    #MenuDrawer .nav-mobile .menu-item .level1 .item .product-img {
        position: static !important;
    }
    #MenuDrawer .nav-mobile .menu-item .level1 .item .product-img .tags {
        top: 50% !important;
        bottom: auto !important;
        right: 8px !important;
        left: auto !important;
        transform: translateY(-50%) !important;
        overflow: visible !important;
        width: auto !important;
        height: auto !important;
        border-radius: 0 !important;
      }
    #MenuDrawer .nav-mobile .menu-item .level1 .item .product-img .tag {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: auto !important;
        transform: none !important;
        padding: 2px 6px !important;
        font-size: 7px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        background: #c41e3a !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        border-radius: 4px 0 0 4px !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
        overflow: visible !important;
        margin: 0 !important;
        border: none !important;
        line-height: 1.2 !important;
        font-family: var(--font-MarkOTB), 'Mark OT', 'MarkOT', sans-serif !important;
      }
    #MenuDrawer .nav-mobile .menu-item .level1 .item .product-img .tag::before {
        display: none !important;
      }
    #MenuDrawer .nav-mobile .menu-item .level1 .item .product-img .tag.new::after {
        content: none !important;
      }
    #MenuDrawer .nav-mobile .menu-item .level1 .item .product-name {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #333 !important;
    }
    .nav-mobile .menu-item .level1 .item {
        position: relative;
    }
    .nav-mobile .menu-item .level1 .item .product-img {
        position: static;
    }
    .nav-mobile .menu-item .level1 .item .product-img .tags {
        position: absolute;
        top: 50%;
        right: 8px;
        bottom: auto;
        left: auto;
        z-index: 10;
        transform: translateY(-50%);
        width: auto;
        height: auto;
        overflow: visible;
        border-radius: 0;
      }
    .nav-mobile .menu-item .level1 .item .product-img .tag {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 2px 8px;
        font-size: 8px;
        font-weight: 700;
        color: #ffffff;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        white-space: nowrap;
        top: auto;
        right: auto;
        width: auto;
        height: auto;
        background: #c41e3a;
        clip-path: none;
        -webkit-clip-path: none;
        border-radius: 4px 0 0 4px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
        transform: none;
        line-height: 1.2;
        overflow: visible;
        margin: 0;
        border: none;
        font-family: var(--font-MarkOTB), 'Mark OT', 'MarkOT', sans-serif;
      }
    .nav-mobile .menu-item .level1 .item .product-img .tag::before {
        display: none;
      }
    .nav-mobile .menu-item .level1 .item .product-img .tag.new::after {
        content: none;
      }
    .tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 2px 8px;
      border-radius: 4px 0 0 4px;
      font-family: 'MarkOT', sans-serif;
      font-size: 8px;
      font-weight: 700;
      color: #ffffff;
      text-transform: uppercase;
    }
    .tag.new {
      background: #c41e3a;
      border: none;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    }
    .nav-mobile .menu-item .level1 .product-name {
        margin-top: 12px;
        margin-bottom: 0;
        padding: 0 4px;
        text-align: center;
        font-size: 14px;
        line-height: 1.4;
        color: #333;
        display: block;
        visibility: visible;
        opacity: 1;
    }
    .nav-mobile .menu-item .level1 .item .product-name {
        margin-top: 12px !important;
        margin-bottom: 8px !important;
        padding: 0 4px !important;
        text-align: center !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        color: #333 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
        text-overflow: ellipsis !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }
    .item a[data-preorder-handle='vistatab-30'] .product-img img {
      width: 80px;
    }
    .item a[data-preorder-handle='vistatab-10-mini'] .product-img img {
         width: 100px ! IMPORTANT;
        height: 100px !important;
        object-fit: contain;
    }
    .nav-mobile .menu-item .menu-link .left {
        position: relative;
        overflow: visible;
      }
    .nav-mobile .menu-item .menu-link .left .new-tag {
        position: absolute;
        top: 4px;
        right: 4px;
        bottom: auto;
        left: auto;
        width: auto;
        height: auto;
        background: #c41e3a;
        clip-path: none;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
        z-index: 10;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 2px 6px;
        overflow: visible;
        border-radius: 4px 0 0 4px;
        font-size: 7px;
        font-weight: 700;
        color: #ffffff;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        white-space: nowrap;
        line-height: 1.2;
        font-family: var(--font-MarkOTB), 'Mark OT', 'MarkOT', sans-serif;
        border: none;
      }
    .nav-mobile .menu-item .menu-link .left .new-tag::before {
        content: 'NEW';
        display: block;
        font-size: inherit;
        font-weight: inherit;
        color: inherit;
        position: static;
        width: auto;
        height: auto;
        background: none;
        clip-path: none;
        transform: none;
      }
    .nav-mobile .menu-item .menu-link .left .new-tag::after {
        content: none;
      }
    .nav-mobile .menu-item .menu-link .left .new-tag svg {
        display: none;
      }

    /* Mobile menu bottom links - grid of rounded buttons (Products, Brand, itel Home style) */
    .nav-mobile .mobile-menu-bottom-links {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      padding: 20px 15px 24px;
      border-top: 1px solid #eee;
    }
    .nav-mobile .mobile-menu-bottom-links a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      background-color: #f5f5f5;
      border-radius: 12px;
      color: #333;
      font-size: 15px;
      font-weight: 500;
      text-decoration: none;
      min-height: 48px;
      box-sizing: border-box;
      transition: background-color 0.2s ease;
    }
    .nav-mobile .mobile-menu-bottom-links a:hover {
      background-color: #ebebeb;
    }
    .nav-mobile .mobile-menu-bottom-links a::after {
      content: '›';
      font-size: 20px;
      font-weight: 300;
      color: #555;
      flex-shrink: 0;
      margin-left: 8px;
    }
  }


.happy-hour-alert{
  --hh-green: #1cc65e;
  --hh-border:#f4a340;
  --hh-text:#ffffff;

  display: inline-block;
  font-family: 'MarkOT', sans-serif;
  font-weight: 600;
  padding: 10px 26px;
  border: 3px solid var(--hh-border);
  border-radius: 6px;
  background: var(--hh-green);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  color: #ffffff;


  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  transform-origin: center;


  animation:
    hh-dance 1.8s ease-in-out infinite,
    hh-glow  2.2s ease-in-out infinite;
}

.happy-hour-alert > span{
  color: var(--hh-text);
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  letter-spacing: .5px;
  white-space: nowrap;
  text-shadow:
    0 2px 0 rgba(0,0,0,.15),
    0 0 12px rgba(255,255,255,.35);
  position: relative;
  z-index: 2;
}


.happy-hour-alert::after{
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 20%,
    rgba(255,255,255,.55) 35%,
    rgba(255,255,255,0) 50%);
  transform: translateX(-120%) rotate(8deg);
  z-index: 1;
  animation: hh-shine 2.6s linear infinite;
  pointer-events: none;
}


.happy-hour-alert::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
  filter: blur(.2px);
  z-index: 1;
}


.happy-hour-alert:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}


@keyframes hh-dance{
  0%   { transform: translateY(0) rotate(0deg); }
  25%  { transform: translateY(-2px) rotate(-1.2deg); }
  50%  { transform: translateY(0) rotate(0.6deg); }
  75%  { transform: translateY(-1px) rotate(-0.6deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
@keyframes hh-glow{
  0%,100% { box-shadow: 0 6px 16px rgba(0,0,0,.15), 0 0 0 rgba(255,255,255,0); }
  50%     { box-shadow: 0 6px 16px rgba(0,0,0,.15), 0 0 22px rgba(255,255,255,.45); }
}
@keyframes hh-shine{
  0%   { transform: translateX(-120%) rotate(8deg); }
  100% { transform: translateX(120%)  rotate(8deg); }
}


@media (prefers-reduced-motion: reduce){
  .happy-hour-alert,
  .happy-hour-alert::after{
    animation: none;
  }
}