body{
  &.page-our-story,
  &.page-product-guide,
  &.page-community,
  &.page-center,
  &.page-reef{
    padding-top: 40px;
    @media only screen and (max-width: 959px) {
      /* padding-top: 90px !important; */
    }
  }
  &:not(.index):not(.page-our-story):not(.page-product-guide):not(.page-community):not(.page-center):not(.page-reef){
    padding-top: 200px;
    @media only screen and (max-width: 959px) {
      padding-top: 100px !important;
    }
  }
  
}
body{
  &.index{
    padding-top: 0px;
  }
  
}

/** TOP BANNER */
.topbanner-wrap{
  &:after{
    display: none;
  }

  p {
    margin-bottom: 0px;
    padding: 5px 10px 10px;
  }

  @media only screen and (max-width: 959px) {
    /* padding-top: 45px !important; */

    p{
      position: relative;
      z-index: 11;
    }
  }
}


/** HEADER */
body.index,
body.page-our-story,
body.page-product-guide,
body.page-community,
body.page-center,
body.page-reef{
  .header-container {
    padding: 20px 10px 80px !important;
  }
  .header-container.shrink{
    .logo-desktop{
      background-image: url("lu-logo-2025-mb.png");
      height: 48.27px !important;
      margin-top: 0px !important;
    }
    .header-logo{
      padding-top: 0px !important;
    }
  }
  .header-section{
    background: linear-gradient(to bottom, rgba(34, 31, 32, 1) 0%, rgba(34, 31, 32, 0) 90%) !important;

    .logo-desktop{
      background-image: url("lu-logo-2025.png");
    }

    .logo-mobile {
      background-image: url("lu-logo-2025-mb.png");
    }

    .login-cart {
      .icon-user{
        background-image: url('person-2025.png');
      }
      .icon-cart1{
        background-image: url('cart-2025.png');
      }
    }
  }
}
body:not(.index):not(.page-our-story):not(.page-community):not(.page-center):not(.page-reef):not(.page-product-guide){
  /* #shopify-section-header .header-container {
    padding: 20px 10px 20px !important;
  } */

  @media only screen and (max-width: 959px) {
    #shopify-section-header .header-container {
      padding-bottom: 0px !important;
    }
  }
  
  .header-section{
    
    .logo-desktop{
      background-image: url("lu-logo-2025-dark.png");
    }
    .logo-mobile {
      background-image: url("lu-logo-2025-mb-dark.png");
    }

    .login-cart {
      .icon-user{
        background-image: url('person-2025-dark.png');
      }
      .icon-cart1{
        background-image: url('cart-2025-dark.png');
      }

      .svg-user path{
        fill: #231F20;
      }
      .svg-cart path{
        fill: #231F20;
      }
  
      .cart-count{
        color: #231F20;
      }
    }

    
  }

  @media only screen and (max-width: 959px) {
      &.nav-open{
        .header-section{
          .topbanner-wrap{
              p{
                color: #231F20;
              }
            }
          .login-cart {
            .icon-user{
              background-image: url('person-2025-green.png');
            }
            .icon-cart1{
              background-image: url('cart-2025-green.png');
            }
            .cart-count{
              color: #45C1C8;
            }
          }
        }
      }
  }

  .header-container{
    .header-logo{
      padding-top: 0px !important;
    }
  }
  .header-container.shrink{
    .header-logo{
      padding-top: 0px !important;
    }
    .logo-desktop{
        background-image: url("lu-logo-2025-mb-dark.png");
        height: 48.27px !important;
        margin-top: 0px !important;
    }
  }
}
#shopify-section-header .header-container {
  .main-menu,
  .login-cart {
    flex: 1;
  }

  @media only screen and (max-width: 959px) {
    padding: 0px 10px 20px !important;
  }
  

  .main-menu{
    #nav{
      margin-top: 0px !important;
      display: flex;
      align-items: center;
      height: 100%;

      .nav-align--center ul{
        text-align: left;
      }

      .sub_submenu_list li{
        border-top: 1px solid #ECECEC;
        &:first-child{
          border-top: 0px;
        }
        &> a{
          padding: 2px 5px;
        }
      }

      /* New Mega Menu*/
      .submenu_list li:first-child:hover .sub_submenu_list {
        display: flex;
        flex-wrap: wrap;
        width: 640px;
        li{
          width: 50%;
          border-top: 0 !important;
          box-sizing: border-box;
          border-bottom: 1px solid #ECECEC;
          &> a{
            padding: 10px 5px !important;
          }

          &:last-child{
            border-bottom: 0px;
          }
        }

        li:nth-child(odd){
          border-right: 1px solid #ECECEC;
        }
      }

      a.show-product-image{
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;

        div.product-information{
          display: flex;
          flex-direction: column;
          gap: 5px;
          
          .menu-tags{
            display: flex;
            gap: 5px;

            span{
              font-size: 10px;
              font-weight: bold;
              border-radius: 12px;
              padding: 4px 10px;
              
              &.gray{
                background-color: #E8E8E8;
                color: #221F20;
              }

              &.green{
                background-color: #45C1C8;
                color: #FFF;
              }

              &.teracotta,
              &.red{
                background-color: #F5A78E;
                color: #221F20;
              }
            }
          }
        }
      }
    }

    .icon-down-arrow:before {
        font-weight: bold;
    }

    #nav > ul.menu-navigation > li{
      &:hover > a{
          border-bottom: 2px solid #45C1C8;
      }

      > a{
        border-bottom: 2px solid transparent;
      }
    }

    @media only screen and (max-width: 959px) {
      order: 0;
      width: 20% !important;
    }
  }

  .header-logo {
    flex: 0 0 auto;
    z-index: 10;

    &>a{
      display: flex;
      justify-content: center;
    }

    .logo-desktop {
      display: block;
      width: 103px;
      height: 98.41px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      transition: height 0.2s ease;
      margin-top: 15px;
      
      img{
        display: none;
      }
    }
    .logo-mobile {
      display: none;
      width: 133px;
      height: 48.27px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      
      img{
        display: none;
      }
    }

    @media (max-width: 959px) {
      .logo-mobile {
        display: block; 
      }
      .logo-desktop {
        display: none;
      }
    }
  }

  .login-cart {
    z-index: 10;

    ul{
      justify-content: right;
      gap: 5px;
      margin-top: 0px;
      margin-right: 0px;
      align-items: center;
      height: 100%;
    }

    #customer_login_link,
    .cart_button{
      display: flex;
      align-items: center;
    }

    .svg-cart{
      /* background-image: url('cart-2025.png'); */
      width: 28px;
      height: 28px;

      @media only screen and (max-width: 959px) {
        width: 24px;
        height: 24px;
      }
    }

    .cart-count{
      background-color: transparent !important;
      top: 1px;
      left: 0px;
      font-size: 11px;
      font-weight: 400;
      height: 30px;
      width: 28px;
      display: flex;
      justify-content: center;
      align-items: center;

      @media only screen and (max-width: 959px) {
        top: 2px;
        width: 24px;
        height: 24px;
        font-size: 9px;
      }
    }

    
    
  }

  .header-logo img{
    max-height: 128.41px;
  }

  .icon-user{
    /* background-image: url('person-2025.png'); */
    width: 30px;
    height: 30px;

    @media only screen and (max-width: 959px) {
      width: 24px;
      height: 24px;
    }
  }

  .svg-user{
    /* background-image: url('person-2025.png'); */
    width: 28px;
    height: 28px;

    @media only screen and (max-width: 959px) {
      width: 24px;
      height: 24px;
    }
  }
  

  &::after{
    display: none;
  }
}

body.index,
body.page-our-story,
body.page-product-guide,
body.page-community,
body.page-center,
body.page-reef{
  .main-menu{
    #nav ul.menu-navigation > li{
      &>a, 
      a.sub-menu--link {
        color: #fff !important;
      }
    }
  }

  #mobile_nav{
    .slicknav_btn {
      .icon-menu{
        background-image: url('mobile-menu-icon-2.png');
        background-repeat: no-repeat;
        background-position: center;
      }

      &.slicknav_open{
        .icon-menu{
          background-image: url('mobile-menu-icon-close.png');
        }
      }
    }

    ul li a, 
    ul li a:visited, 
    ul li a:active, 
    ul li.slicknav_open .slicknav_parent-link a
    a.slicknav_btn, 
    .mobile_currency select{
      color: white !important;
    }
  }
}
body:not(.index):not(.page-our-story):not(.page-community):not(.page-center):not(.page-reef):not(.page-product-guide){
  .main-menu{
    #nav ul.menu-navigation > li{
      &>a, 
      a.sub-menu--link {
        color: #231F20 !important;
      }
    }

  }

  #mobile_nav{
    .slicknav_btn {
      .icon-menu{
        background-image: url('mobile-menu-icon-dark-2.png');
        background-repeat: no-repeat;
        background-position: center;
      }

      &.slicknav_open{
        .icon-menu{
          background-image: url('mobile-menu-icon-dark-close.png');
        }
      }
    }

    .slicknav_nav{
      background-color: #FAF3E6 !important;
      
      &>li:not(:last-child){
        border-bottom: 1px solid #fff !important;
      }
    }

    ul.slicknav_nav {
      top: -95px;

      @media only screen and (max-width: 959px) {
        padding: 200px 13px;
      }
    }

    ul li a, 
    ul li a:visited, 
    ul li a:active, 
    a.slicknav_btn, 
    .mobile_currency select{
      color: #45C1C8 !important;
    }
  }

  
}
.main-menu {

  @media (max-width: 959px) {
    #nav{
      display: none !important;
    }
  }

  #nav ul.menu-navigation > li{
    &>a, 
    a.sub-menu--link {
      font-weight: 300 !important;
      font-size: 14px !important;
    }
    
  }

  #nav ul li .submenu_list {
    border-radius: 15px;
    padding: 15px 0px 15px 8px;
    width: auto;
    left: 0px;
    max-width: 178px;
    width: 143px;
  }
  #nav ul li .submenu_list > li{
    padding-right: 30px;
    width: 110%;
    .icon-right-arrow{
      display: none;
    }
  }
  #nav ul li .submenu_list li a{
    text-transform: uppercase;
    font-size: 14px;
    line-height: 1.3;
    &:hover{
      color: #45C1C8 !important;
    }
  }

  #menu ul ul {
    border-radius: 15px;
    padding: 10px 10px;
    width: 329px;
    left: 150px;
    top: -16px;
  }



  /** Mobile Nav */
  #mobile_nav{
    display: none;
    left: unset;
    right: unset;
    width: 100%;
    margin-top: 0px !important;

    @media only screen and (max-width: 959px) {
      display: block;

      .icon-down-arrow, .icon-right-arrow, .icon-left-arrow{
        display: none;
      }
    }
    
    .icon-menu-wrapper{
      padding-top: 10px;

      @media only screen and (max-width: 959px) {
        padding-top: 15px;
      }
    }
    .icon-menu{
      width: 24px;
      height: 24px;
      padding: 0px !important;
      &:before{
        display: none;
      }
    }

    .slicknav_btn {
      z-index: 11;
    }

    ul.slicknav_nav {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 60px 13px;
      top: 0px;
      left: 0;
      right: 0;
      background-color: #45C1C8 !important;
      border-bottom: 1px solid #45C1C8;
      height: 100vh;
      
      &>li{
        padding: 30px 0px 20px !important;
        width: 100%;
        text-align: center;

        a.sub-menu--link,
        &> a{
          font-size: 30px !important;
          font-weight: 400 !important;
        }

        a.slicknav_item{
          display: none !important;
        }

        &:not(:last-child){
          border-bottom: 1px solid rgba(255, 255, 255, 0.4);
        }
      }

      @media only screen and (max-width: 959px) {
        padding: 100px 13px;
      }
    }

    

    ul.submenu_list{
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 20px;
      
      li{
        width: 100%;
        padding-left: 0px !important; 
        text-align: center;

        a{
          font-size: 18px;
          font-weight: 300 !important;
        }
      }
    }

  }
}

.page-center{
  .page-banner-section{
    margin-bottom: 90px !important;
  }
}