/* =========================================================
   SPICEST PREMIUM LIGHT LUXURY NAVBAR
========================================================= */

:root{
  --spn-olive: #7F9257;
  --spn-olive-dark: #657746;
  --spn-olive-deep: #4E5E36;
  --spn-olive-soft: #AAB991;

  --spn-cream: #F7F4EA;
  --spn-cream-2: #F1EEE3;

  --spn-white: #FFFFFF;
  --spn-dark: #20221D;
  --spn-text: #55594F;

  --spn-border:
    rgba(100,119,70,.14);

  --spn-shadow:
    0 20px 60px rgba(45,55,34,.10);
}


/* =========================================================
   BODY SPACING FOR FIXED HEADER
========================================================= */

body {
  padding-top: var(--spn-header-height, 138px) !important;
}

@media (max-width: 1199.98px) {
  body {
    padding-top: var(--spn-header-height, 128px) !important;
  }
}

@media (max-width: 991.98px) {
  body {
    padding-top: var(--spn-header-height, 110px) !important;
  }
}

@media (max-width: 575.98px) {
  body {
    padding-top: var(--spn-header-height, 95px) !important;
  }
}


/* =========================================================
   HEADER
========================================================= */


.spn-header{
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 99999;

  opacity: 0;
  transform: translateY(-18px);

  transition:
    opacity .8s cubic-bezier(.22,1,.36,1),
    transform .8s cubic-bezier(.22,1,.36,1),
    box-shadow .35s ease;
}

.spn-header.spn-loaded{
  opacity: 1;
  transform: translateY(0);
}

/* Scroll ke baad premium shadow */
.spn-header.spn-scrolled{
  box-shadow:
    0 15px 45px rgba(45,55,34,.12);
}

/* =========================================================
   TOP BAR
========================================================= */

.spn-topbar{
  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      #F4F1E7,
      #F8F6EF,
      #F0F3E9
    );

  border-bottom:
    1px solid
    rgba(127,146,87,.10);

  max-height: 34px;

  opacity: 1;

  transition:
    max-height .4s ease,
    opacity .3s ease;
}


/* animated shine */

.spn-topbar::before{
  content: "";

  position: absolute;

  top: 0;
  left: -30%;

  width: 20%;
  height: 100%;

  transform:
    skewX(-25deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.65),
      transparent
    );

  animation:
    spnTopShine
    8s ease-in-out infinite;
}


.spn-topbar-inner{
  min-height: 34px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;
}


.spn-top-left,
.spn-top-right{
  display: flex;

  align-items: center;

  gap: 10px;
}


.spn-top-left{
  color:
    #626858;

  font-size: 11px;

  font-weight: 750;

  letter-spacing: .3px;
}


.spn-live-dot{
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--spn-olive);

  box-shadow:
    0 0 0
    4px rgba(127,146,87,.10);

  animation:
    spnPulse
    2s ease-in-out infinite;
}


.spn-top-right a{
  display: inline-flex;

  align-items: center;

  gap: 6px;

  color:
    #74796D;

  text-decoration: none;

  font-size: 11px;

  font-weight: 750;

  transition:
    color .3s ease;
}


.spn-top-right a i{
  color:
    var(--spn-olive);
}


.spn-top-right a:hover{
  color:
    var(--spn-olive-dark);
}


.spn-top-divider{
  width: 1px;
  height: 12px;

  background:
    rgba(127,146,87,.18);
}


/* =========================================================
   SCROLLED HEADER
========================================================= */

.spn-header.spn-scrolled
.spn-topbar{
  max-height: 0;

  opacity: 0;
}


/* =========================================================
   NAVBAR
========================================================= */

.spn-navbar{
  position: relative;

  padding: 0 !important;

  background:
    rgba(255,255,255,.92) !important;

  border-bottom:
    1px solid
    rgba(127,146,87,.12);

  box-shadow:
    0 8px 30px
    rgba(45,55,34,.045);

  backdrop-filter:
    blur(20px)
    saturate(150%);

  -webkit-backdrop-filter:
    blur(20px)
    saturate(150%);

  transition:
    background .4s ease,
    box-shadow .4s ease;
}


.spn-header.spn-scrolled
.spn-navbar{
  background:
    rgba(255,255,255,.96) !important;

  box-shadow:
    0 18px 55px
    rgba(45,55,34,.10);
}


/* subtle bottom light */

.spn-navbar::after{
  content: "";

  position: absolute;

  left: 50%;
  bottom: -1px;

  width: 0;
  height: 1px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--spn-olive-soft),
      transparent
    );

  transition:
    width .6s ease;
}


.spn-header.spn-scrolled
.spn-navbar::after{
  width: 70%;
}


/* =========================================================
   CONTAINER
========================================================= */

.spn-container{
  max-width: 1500px;
}


/* =========================================================
   BRAND / LOGO
========================================================= */

.spn-brand{
  display: inline-flex;

  align-items: center;

  gap: 11px;

  margin-right: 20px;

  padding:
    10px 0 !important;

  text-decoration: none;
}


/* Logo shell - removed box background, logo out of box & bigger */

.spn-logo-shell{
  position: relative;

  flex:
    0 0 auto;

  width: 84px;
  height: 84px;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: visible;

  padding: 0;

  border-radius: 0;

  background: transparent;

  border: none;

  box-shadow: none;

  transition:
    transform .5s
    cubic-bezier(.22,1,.36,1);
}


/* Hide box background pseudo elements */

.spn-logo-shell::before,
.spn-logo-shell::after{
  display: none !important;
}


.spn-logo-img{
  position: relative;

  z-index: 3;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;

  mix-blend-mode: multiply;

  filter:
    drop-shadow(0 4px 10px rgba(45,55,34,.10));

  transition:
    transform .55s
    cubic-bezier(.22,1,.36,1);
}


.spn-brand:hover
.spn-logo-shell{
  transform:
    translateY(-2px);

  box-shadow: none;
}


.spn-brand:hover
.spn-logo-img{
  transform:
    scale(1.08);
}



/* Brand text */

.spn-brand-copy{
  display: flex;

  flex-direction: column;
}


.spn-brand-copy strong{
  color:
    var(--spn-olive-dark);

  font-size: 23px;

  line-height: 1;

  font-weight: 900;

  letter-spacing: -1px;
}


.spn-brand-copy small{
  margin-top: 4px;

  color:
    #8B9184;

  font-size: 11px;

  font-weight: 850;

  letter-spacing: 1.15px;

  text-transform: uppercase;
}


/* =========================================================
   NAV
========================================================= */

.spn-nav{
  display: flex;

  align-items: center;

  gap: 1px;
}


.spn-nav .nav-item{
  position: relative;
}


/* =========================================================
   LINKS
========================================================= */

.spn-nav .spn-link{
  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  overflow: hidden;

  padding:
    8px 12px !important;

  border-radius: 999px;

  color:
    #3D4138 !important;

  background:
    transparent !important;

  font-size: 13px;

  font-weight: 750;

  white-space: nowrap;

  transition:
    color .35s ease,
    background .35s ease,
    transform .35s ease;
}


/* moving light */

.spn-nav .spn-link::before{
  content: "";

  position: absolute;

  left: -100%;
  top: 0;

  width: 50%;
  height: 100%;

  transform:
    skewX(-25deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.75),
      transparent
    );

  transition:
    left .6s ease;
}


.spn-nav .spn-link:hover::before{
  left: 150%;
}


/* bottom indicator */

.spn-nav .spn-link::after{
  content: "";

  position: absolute;

  left: 50%;
  bottom: 5px;

  width: 0;
  height: 2px;

  transform:
    translateX(-50%);

  border-radius: 20px;

  background:
    var(--spn-olive);

  transition:
    width .35s
    cubic-bezier(.22,1,.36,1);
}


.spn-nav .spn-link:hover{
  color:
    var(--spn-olive-dark) !important;

  background:
    rgba(127,146,87,.075) !important;

  transform:
    translateY(-1px);
}


.spn-nav .spn-link:hover::after{
  width: 18px;
}


/* Active */

.spn-nav .spn-link.active{
  color:
    var(--spn-olive-dark) !important;

  background:
    linear-gradient(
      135deg,
      rgba(127,146,87,.15),
      rgba(127,146,87,.075)
    ) !important;

  box-shadow:
    inset 0 0 0
    1px rgba(127,146,87,.10);
}


.spn-nav .spn-link.active::after{
  width: 18px;
}


/* Dropdown arrow */

.spn-dropdown-trigger > i{
  font-size: 11px;

  color:
    var(--spn-olive);

  transition:
    transform .35s ease;
}


.spn-product-dropdown:hover
.spn-dropdown-trigger > i,
.spn-dropdown-trigger.show > i{
  transform:
    rotate(180deg);
}


/* remove bootstrap arrow */

.spn-dropdown-trigger::after{
  display: none !important;
}


/* =========================================================
   PREMIUM DROPDOWN
========================================================= */

.spn-dropdown-menu{
  position: absolute !important;

  left: 50% !important;

  top: calc(100% + 13px) !important;

  width: 490px;

  max-width: 92vw;

  padding: 12px;

  margin: 0 !important;

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

  opacity: 0;

  visibility: hidden;

  display: block !important;

  border:
    1px solid
    rgba(127,146,87,.13);

  border-radius: 24px;

  background:
    rgba(255,255,255,.97);

  box-shadow:
    0 30px 80px
    rgba(45,55,34,.16);

  backdrop-filter:
    blur(20px);

  pointer-events: none;

  transition:
    opacity .35s ease,
    visibility .35s ease,
    transform .45s
    cubic-bezier(.22,1,.36,1);
}


.spn-product-dropdown{
  position: relative;
}

/* Invisible hover bridge for desktop gap */
@media (min-width: 992px){
  .spn-dropdown-menu::after{
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 100%;
    height: 30px;
    background: transparent;
    z-index: 1;
    pointer-events: auto;
  }
}

/* dropdown top arrow */

.spn-dropdown-menu::before{
  content: "";

  position: absolute;

  top: -6px;
  left: 50%;

  width: 13px;
  height: 13px;

  transform:
    translateX(-50%)
    rotate(45deg);

  background:
    #fff;

  border-left:
    1px solid
    rgba(127,146,87,.12);

  border-top:
    1px solid
    rgba(127,146,87,.12);
}


/* Desktop open */

@media (min-width: 992px){

  .spn-product-dropdown:hover
  .spn-dropdown-menu,

  .spn-product-dropdown
  .spn-dropdown-menu.show{

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

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

}


/* =========================================================
   DROPDOWN HEADER
========================================================= */

.spn-dropdown-head{
  position: relative;

  display: flex;

  align-items: center;

  justify-content: space-between;

  overflow: hidden;

  padding:
    17px 18px;

  margin-bottom: 8px;

  border-radius: 17px;

  background:
    linear-gradient(
      135deg,
      #EEF2E6,
      #F8F6EF
    );
}


.spn-dropdown-head::before{
  content: "";

  position: absolute;

  right: -30px;
  top: -45px;

  width: 120px;
  height: 120px;

  border-radius: 50%;

  border:
    1px dashed
    rgba(127,146,87,.20);

  animation:
    spnDropdownCircle
    18s linear infinite;
}


.spn-dropdown-label{
  display: block;

  margin-bottom: 4px;

  color:
    var(--spn-olive);

  font-size: 11px;

  font-weight: 900;

  letter-spacing: 1.3px;

  text-transform: uppercase;
}


.spn-dropdown-head h6{
  margin: 0;

  color:
    var(--spn-dark);

  font-size: 15px;

  font-weight: 850;
}


.spn-dropdown-leaf{
  position: relative;

  z-index: 2;

  width: 40px;
  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 13px;

  color:
    #fff;

  background:
    var(--spn-olive);

  box-shadow:
    0 10px 22px
    rgba(127,146,87,.22);

  animation:
    spnLeafFloat
    4s ease-in-out infinite;
}


/* =========================================================
   PRODUCT GRID
========================================================= */

.spn-dropdown-grid{
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 5px;
}


.spn-product-item{
  position: relative;

  display: flex;

  align-items: center;

  gap: 10px;

  min-height: 67px;

  padding:
    10px;

  overflow: hidden;

  border-radius: 15px;

  color:
    var(--spn-dark);

  text-decoration: none;

  transition:
    background .35s ease,
    transform .35s
    cubic-bezier(.22,1,.36,1);
}


.spn-product-item::before{
  content: "";

  position: absolute;

  inset: 0;

  opacity: 0;

  background:
    linear-gradient(
      135deg,
      rgba(127,146,87,.11),
      rgba(247,244,234,.7)
    );

  transition:
    opacity .35s ease;
}


.spn-product-item:hover{
  color:
    var(--spn-dark);

  transform:
    translateY(-3px);
}


.spn-product-item:hover::before{
  opacity: 1;
}


.spn-product-icon{
  position: relative;

  z-index: 2;

  flex:
    0 0 auto;

  width: 39px;
  height: 39px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 12px;

  color:
    var(--spn-olive);

  background:
    #EEF2E7;

  border:
    1px solid
    rgba(127,146,87,.10);

  transition:
    color .35s ease,
    background .35s ease,
    transform .35s ease;
}


.spn-product-item:hover
.spn-product-icon{
  color:
    #fff;

  background:
    var(--spn-olive);

  transform:
    rotate(-5deg)
    scale(1.05);
}


.spn-product-copy{
  position: relative;

  z-index: 2;

  min-width: 0;

  display: flex;

  flex: 1;

  flex-direction: column;
}


.spn-product-copy strong{
  color:
    #2E322A;

  font-size: 13px;

  font-weight: 850;

  line-height: 1.2;

  white-space: nowrap;
}


.spn-product-copy small{
  margin-top: 3px;

  color:
    #82877C;

  font-size: 11px;

  line-height: 1.3;

  white-space: nowrap;
}


.spn-product-arrow{
  position: relative;

  z-index: 2;

  color:
    var(--spn-olive);

  font-size: 12px;

  opacity: 0;

  transform:
    translateX(-6px);

  transition:
    opacity .35s ease,
    transform .35s ease;
}


.spn-product-item:hover
.spn-product-arrow{
  opacity: 1;

  transform:
    translateX(0);
}


/* =========================================================
   DROPDOWN BOTTOM
========================================================= */

.spn-dropdown-bottom{
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  margin-top: 8px;

  padding:
    11px 13px;

  border-top:
    1px solid
    rgba(127,146,87,.10);
}


.spn-dropdown-bottom > span{
  display: flex;

  align-items: center;

  gap: 6px;

  color:
    #8B9185;

  font-size: 11.5px;
}


.spn-dropdown-bottom > span i{
  color:
    var(--spn-olive);
}


.spn-dropdown-bottom a{
  display: inline-flex;

  align-items: center;

  gap: 6px;

  color:
    var(--spn-olive-dark);

  text-decoration: none;

  font-size: 11.5px;

  font-weight: 900;
}


.spn-dropdown-bottom a i{
  transition:
    transform .3s ease;
}


.spn-dropdown-bottom a:hover i{
  transform:
    translateX(4px);
}


/* =========================================================
   ACTIONS
========================================================= */

.spn-actions{
  display: flex;

  align-items: center;

  gap: 7px;

  margin-left: 16px;
}


/* Icon buttons */

.spn-icon-btn{
  position: relative;

  flex:
    0 0 auto;

  width: 42px;
  height: 42px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid
    rgba(127,146,87,.12);

  border-radius: 50%;

  color:
    #59634A;

  background:
    #F7F8F3;

  text-decoration: none;

  cursor: pointer;

  transition:
    color .35s ease,
    background .35s ease,
    transform .35s
    cubic-bezier(.22,1,.36,1),

    box-shadow .35s ease;
}


.spn-icon-btn:hover{
  color:
    #fff;

  background:
    var(--spn-olive);

  transform:
    translateY(-4px);

  box-shadow:
    0 12px 25px
    rgba(127,146,87,.22);
}


/* =========================================================
   CART COUNT
========================================================= */

.spn-cart-count{
  position: absolute;

  top: -4px;
  right: -4px;

  min-width: 18px;
  height: 18px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding:
    0 4px;

  border:
    2px solid #fff;

  border-radius: 999px;

  color:
    #fff;

  background:
    #E24A4A;

  font-size: 9px;

  font-weight: 900;

  box-shadow:
    0 5px 12px
    rgba(226,74,74,.25);
}


.spn-count-pop{
  animation:
    spnCountPop
    .4s ease;
}


/* =========================================================
   SHOP BUTTON
========================================================= */

.spn-shop-btn{
  position: relative;

  display: inline-flex;

  align-items: center;

  gap: 12px;

  overflow: hidden;

  min-height: 46px;

  padding:
    6px 6px 6px 18px;

  border-radius: 999px;

  color:
    #fff;

  background:
    linear-gradient(
      135deg,
      var(--spn-olive),
      var(--spn-olive-dark)
    );

  text-decoration: none;

  font-size: 12px;

  font-weight: 850;

  box-shadow:
    0 12px 30px
    rgba(127,146,87,.22);

  transition:
    transform .4s
    cubic-bezier(.22,1,.36,1),

    box-shadow .4s ease;
}


.spn-shop-btn::before{
  content: "";

  position: absolute;

  left: -80%;
  top: 0;

  width: 45%;
  height: 100%;

  transform:
    skewX(-25deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.28),
      transparent
    );

  transition:
    left .7s ease;
}


.spn-shop-btn:hover::before{
  left: 140%;
}


.spn-shop-btn:hover{
  color:
    #fff;

  transform:
    translateY(-4px);

  box-shadow:
    0 18px 38px
    rgba(127,146,87,.30);
}


.spn-shop-arrow{
  width: 34px;
  height: 34px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  color:
    var(--spn-olive-dark);

  background:
    #fff;

  transition:
    transform .4s ease;
}


.spn-shop-btn:hover
.spn-shop-arrow{
  transform:
    rotate(-35deg);
}


/* =========================================================
   MOBILE ACTIONS
========================================================= */

.spn-mobile-actions{
  display: flex;

  align-items: center;

  gap: 8px;

  margin-left: auto;
}


/* Custom hamburger */

.spn-menu-toggle{
  width: 43px;
  height: 43px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 4px;

  border:
    1px solid
    rgba(127,146,87,.13);

  border-radius: 14px;

  background:
    #F5F7F0;

  cursor: pointer;
}


.spn-menu-toggle span{
  width: 18px;
  height: 2px;

  border-radius: 20px;

  background:
    var(--spn-olive-dark);

  transition:
    transform .35s ease,
    opacity .35s ease,
    width .35s ease;
}


.spn-menu-toggle span:nth-child(2){
  width: 13px;
}


.spn-menu-toggle.spn-toggle-active
span:nth-child(1){
  transform:
    translateY(6px)
    rotate(45deg);
}


.spn-menu-toggle.spn-toggle-active
span:nth-child(2){
  opacity: 0;

  transform:
    translateX(-8px);
}


.spn-menu-toggle.spn-toggle-active
span:nth-child(3){
  transform:
    translateY(-6px)
    rotate(-45deg);
}


/* =========================================================
   MOBILE SHOP
========================================================= */

.spn-mobile-shop{
  padding-top: 15px;
}


.spn-mobile-shop-btn{
  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  padding:
    13px 16px;

  border-radius: 15px;

  color:
    #fff;

  background:
    linear-gradient(
      135deg,
      var(--spn-olive),
      var(--spn-olive-dark)
    );

  text-decoration: none;

  font-size: 11px;

  font-weight: 850;

  box-shadow:
    0 12px 25px
    rgba(127,146,87,.18);
}


.spn-mobile-shop-btn:hover{
  color:
    #fff;
}


/* =========================================================
   SEARCH OVERLAY
========================================================= */

.spn-search-overlay{
  position: fixed;

  inset: 0;

  z-index: 10050;

  display: flex;

  align-items: flex-start;

  justify-content: center;

  padding:
    130px 20px 30px;

  opacity: 0;

  visibility: hidden;

  background:
    rgba(27,31,23,.42);

  backdrop-filter:
    blur(16px);

  transition:
    opacity .4s ease,
    visibility .4s ease;
}


.spn-search-overlay.spn-search-open{
  opacity: 1;

  visibility: visible;
}


.spn-search-box{
  width: min(720px,100%);

  padding:
    30px;

  border-radius: 28px;

  background:
    rgba(255,255,255,.97);

  border:
    1px solid
    rgba(255,255,255,.6);

  box-shadow:
    0 35px 100px
    rgba(20,25,17,.25);

  opacity: 0;

  transform:
    translateY(-25px)
    scale(.97);

  transition:
    opacity .45s ease,
    transform .5s
    cubic-bezier(.22,1,.36,1);
}


.spn-search-open
.spn-search-box{
  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}


.spn-search-close{
  position: absolute;

  top: 30px;
  right: 30px;

  width: 45px;
  height: 45px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 0;

  border-radius: 50%;

  color:
    #fff;

  background:
    rgba(255,255,255,.14);

  backdrop-filter:
    blur(10px);

  cursor: pointer;

  transition:
    transform .35s ease,
    background .35s ease;
}


.spn-search-close:hover{
  transform:
    rotate(90deg);

  background:
    var(--spn-olive);
}


.spn-search-label{
  display: block;

  margin-bottom: 14px;

  color:
    var(--spn-olive);

  font-size: 8px;

  font-weight: 900;

  letter-spacing: 1.4px;

  text-transform: uppercase;
}


.spn-search-input-wrap{
  display: flex;

  align-items: center;

  gap: 12px;

  padding:
    7px 7px 7px 18px;

  border-radius: 999px;

  background:
    #F3F5EE;

  border:
    1px solid
    rgba(127,146,87,.12);
}


.spn-search-input-wrap > i{
  color:
    var(--spn-olive);
}


.spn-search-input-wrap input{
  min-width: 0;

  flex: 1;

  border: 0;

  outline: 0;

  padding:
    10px 0;

  color:
    var(--spn-dark);

  background:
    transparent;

  font-size: 14px;
}


.spn-search-input-wrap button{
  flex:
    0 0 auto;

  width: 45px;
  height: 45px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 0;

  border-radius: 50%;

  color:
    #fff;

  background:
    var(--spn-olive);

  cursor: pointer;

  transition:
    transform .35s ease;
}


.spn-search-input-wrap button:hover{
  transform:
    rotate(-35deg);
}


.spn-search-suggestions{
  display: flex;

  align-items: center;

  gap: 8px;

  flex-wrap: wrap;

  margin-top: 18px;
}


.spn-search-suggestions span{
  color:
    #979C91;

  font-size: 9px;
}


.spn-search-suggestions a{
  padding:
    6px 10px;

  border-radius: 999px;

  color:
    var(--spn-olive-dark);

  background:
    #EEF2E7;

  text-decoration: none;

  font-size: 8px;

  font-weight: 800;

  transition:
    color .3s ease,
    background .3s ease;
}


.spn-search-suggestions a:hover{
  color:
    #fff;

  background:
    var(--spn-olive);
}


.spn-no-scroll{
  overflow: hidden;
}


/* =========================================================
   DESKTOP WIDTH OPTIMIZATION
========================================================= */

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

  .spn-brand-copy small{
    display: none;
  }


  .spn-brand{
    gap: 7px;

    margin-right: 8px;
  }


  .spn-logo-shell{
    width: 72px;
    height: 72px;
  }


  .spn-brand-copy strong{
    font-size: 20px;
  }


  .spn-nav .spn-link{
    padding:
      10px 8px !important;

    font-size: 9.5px;
  }


  .spn-actions{
    margin-left: 7px;
  }


  .spn-search-btn{
    display: none;
  }


  .spn-shop-btn{
    padding-left: 14px;
  }

}


/* =========================================================
   MOBILE / TABLET
========================================================= */

@media (max-width: 991.98px){

  .spn-topbar{
    display: none;
  }


  .spn-navbar{
    padding:
      0 !important;
  }


  .spn-brand{
    padding:
      8px 0 !important;
  }


  .spn-logo-shell{
    width: 68px;
    height: 68px;

    border-radius: 0;
  }


  .spn-brand-copy strong{
    font-size: 21px;
  }


  .spn-brand-copy small{
    font-size: 5.8px;
  }


  /* Mobile menu card */

  .spn-collapse{
    position: absolute;

    left: 12px;
    right: 12px;

    top: calc(100% + 9px);

    max-height:
      calc(100vh - 100px);

    overflow-y: auto;

    padding:
      14px;

    border-radius: 22px;

    background:
      rgba(255,255,255,.98);

    border:
      1px solid
      rgba(127,146,87,.12);

    box-shadow:
      0 30px 80px
      rgba(45,55,34,.18);

    backdrop-filter:
      blur(20px);
  }


  .spn-nav{
    align-items: stretch;

    gap: 3px;
  }


  .spn-nav .spn-link{
    justify-content:
      space-between;

    width: 100%;

    padding:
      12px 14px !important;

    border-radius: 13px;

    font-size: 11px;
  }


  .spn-nav .spn-link::after{
    display: none;
  }


  /* Mobile dropdown */

  .spn-dropdown-menu{
    position: static !important;

    width: 100%;

    margin:
      7px 0 4px !important;

    padding:
      9px;

    opacity: 1;

    visibility: visible;

    display: none !important;

    transform:
      none !important;

    pointer-events: auto;

    border-radius: 17px;

    background:
      #F6F7F2;

    box-shadow: none;
  }


  .spn-dropdown-menu.show{
    display: block !important;

    animation:
      spnMobileDrop
      .4s
      cubic-bezier(.22,1,.36,1);
  }


  .spn-dropdown-menu::before{
    display: none;
  }


  .spn-dropdown-grid{
    grid-template-columns:
      1fr 1fr;
  }


  .spn-dropdown-head{
    padding:
      14px;
  }


  .spn-product-item{
    background:
      rgba(255,255,255,.75);
  }


  .spn-dropdown-bottom{
    padding-bottom: 4px;
  }

}


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

@media (max-width: 575.98px){

  .spn-container{
    padding-left: 13px;

    padding-right: 13px;
  }


  .spn-brand-copy small{
    display: none;
  }


  .spn-brand-copy strong{
    font-size: 20px;
  }


  .spn-logo-shell{
    width: 60px;
    height: 60px;
  }


  .spn-mobile-actions{
    gap: 6px;
  }


  .spn-mobile-actions
  .spn-icon-btn{
    width: 40px;
    height: 40px;
  }


  .spn-menu-toggle{
    width: 40px;
    height: 40px;

    border-radius: 13px;
  }


  .spn-collapse{
    left: 8px;
    right: 8px;

    padding: 11px;

    border-radius: 19px;
  }


  .spn-dropdown-grid{
    grid-template-columns:
      1fr;
  }


  .spn-dropdown-head h6{
    font-size: 14px;
  }


  .spn-product-item{
    min-height: 61px;
  }


  .spn-search-overlay{
    padding:
      95px 12px 20px;
  }


  .spn-search-box{
    padding:
      22px 17px;

    border-radius: 22px;
  }


  .spn-search-close{
    top: 18px;
    right: 18px;
  }

}


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

@media (max-width: 370px){

  .spn-brand-copy{
    display: none;
  }


  .spn-brand{
    margin-right: 5px;
  }

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes spnTopShine{

  0%,
  65%{
    left: -30%;
  }

  100%{
    left: 130%;
  }

}


@keyframes spnPulse{

  0%,
  100%{
    opacity: 1;
  }

  50%{
    opacity: .4;
  }

}


@keyframes spnLogoRotate{

  to{
    transform:
      rotate(360deg);
  }

}


@keyframes spnDropdownCircle{

  to{
    transform:
      rotate(360deg);
  }

}


@keyframes spnLeafFloat{

  0%,
  100%{
    transform:
      translateY(0)
      rotate(0);
  }

  50%{
    transform:
      translateY(-5px)
      rotate(-5deg);
  }

}


@keyframes spnCountPop{

  0%{
    transform:
      scale(1);
  }

  50%{
    transform:
      scale(1.35);
  }

  100%{
    transform:
      scale(1);
  }

}


@keyframes spnMobileDrop{

  from{
    opacity: 0;

    transform:
      translateY(-8px);
  }

  to{
    opacity: 1;

    transform:
      translateY(0);
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce){

  .spn-topbar::before,
  .spn-live-dot,
  .spn-logo-shell::before,
  .spn-dropdown-head::before,
  .spn-dropdown-leaf{
    animation:
      none !important;
  }


  .spn-header{
    opacity: 1;

    transform: none;
  }

}


/* Navbar ki total height ke liye page spacing */
body{
  padding-top: 108px;
}

/* Scroll ke baad topbar hide hogi */
.spn-header.spn-scrolled .spn-topbar{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

/* Mobile me topbar already hidden hai */
@media (max-width: 991.98px){
  body{
    padding-top: 65px;
  }
}