/* OBSESSION PREMIUM STORE NAVIGATION V1 */

/* ---------- DESKTOP HEADER ---------- */

.header{
  position:sticky!important;
  top:0!important;
  z-index:1200!important;
  background:rgba(255,253,249,.96)!important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(93,70,43,.10)!important;
  box-shadow:0 7px 26px rgba(43,31,19,.045);
}

.header .nav{
  min-height:76px;
}

.navlinks > a,
.navlinks > .dropdown > .dropbtn{
  position:relative;
}

.navlinks > a.obs-nav-active,
.navlinks > .dropdown.obs-nav-active > .dropbtn{
  color:#8d6529!important;
  font-weight:700!important;
}

@media(min-width:1181px){
  .navlinks > a.obs-nav-active::after,
  .navlinks > .dropdown.obs-nav-active > .dropbtn::after{
    content:"";
    position:absolute;
    left:20%;
    right:20%;
    bottom:-14px;
    height:1px;
    background:#b18443;
  }
}


/* ---------- STORE CATEGORY RAIL ---------- */

.obs-store-rail{
  position:relative;
  z-index:1100;
  background:#17120e;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.obs-store-rail-inner{
  width:min(1180px,calc(100% - 36px));
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  overflow-x:auto;
  scrollbar-width:none;
}

.obs-store-rail-inner::-webkit-scrollbar{
  display:none;
}

.obs-store-rail a{
  position:relative;
  flex:0 0 auto;
  padding:13px 18px;
  color:rgba(255,255,255,.76);
  text-decoration:none;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  white-space:nowrap;
  transition:.2s ease;
}

.obs-store-rail a:hover,
.obs-store-rail a.obs-rail-active{
  color:#fff;
}

.obs-store-rail a.obs-rail-active::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:7px;
  height:1px;
  background:#d1ab69;
}


/* ---------- MOBILE DRAWER ---------- */

.obs-nav-backdrop{
  display:none;
}

.obs-mobile-nav-head{
  display:none;
}

@media(max-width:1180px){

  body.obs-nav-open{
    overflow:hidden!important;
  }

  .menu-btn{
    position:relative;
    z-index:1302;
  }

  .header .navlinks{
    display:flex!important;
    position:fixed!important;
    z-index:1305!important;
    top:0!important;
    bottom:0!important;
    inset-inline-start:0!important;

    width:min(88vw,390px)!important;
    height:100dvh!important;

    padding:0 22px 34px!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:0!important;

    overflow-y:auto!important;

    background:#fffdf9!important;
    border:0!important;
    box-shadow:18px 0 60px rgba(25,18,12,.18)!important;

    transform:translateX(-105%);
    visibility:hidden!important;

    transition:
      transform .28s cubic-bezier(.22,.61,.36,1),
      visibility .28s ease!important;
  }

  html[dir="rtl"] .header .navlinks{
    transform:translateX(105%);
    box-shadow:-18px 0 60px rgba(25,18,12,.18)!important;
  }

  body.obs-nav-open .header .navlinks,
  .header .navlinks.open{
    transform:translateX(0)!important;
    visibility:visible!important;
  }

  .obs-mobile-nav-head{
    display:flex;
    position:sticky;
    top:0;
    z-index:2;
    min-height:88px;
    align-items:center;
    justify-content:space-between;

    margin:0 -22px 10px;
    padding:15px 22px;

    background:#fffdf9;
    border-bottom:1px solid #eee5da;
  }

  .obs-mobile-nav-brand{
    display:flex;
    flex-direction:column;
    color:#221911;
    line-height:1;
  }

  .obs-mobile-nav-brand strong{
    font-family:"Cormorant Garamond",Georgia,serif;
    font-size:24px;
    letter-spacing:.10em;
  }

  .obs-mobile-nav-brand small{
    margin-top:5px;
    color:#a27a40;
    font-size:8px;
    letter-spacing:.30em;
  }

  .obs-mobile-nav-close{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;

    border:1px solid #e8ded1;
    border-radius:50%;
    background:#fff;
    color:#2b2119;

    font-size:22px;
    line-height:1;
    cursor:pointer;
  }

  .header .navlinks > a,
  .header .navlinks > .dropdown > .dropbtn{
    width:100%!important;
    min-height:54px!important;

    display:flex!important;
    align-items:center!important;

    margin:0!important;
    padding:14px 4px!important;

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

    color:#2c231c!important;
    font-size:13px!important;
    font-weight:700!important;

    text-decoration:none!important;
  }

  .header .navlinks > a.obs-nav-active,
  .header .navlinks > .dropdown.obs-nav-active > .dropbtn{
    color:#9a7135!important;
  }

  .header .navlinks .dropdown{
    width:100%!important;
  }

  .header .navlinks .dropmenu{
    position:static!important;
    width:100%!important;
    min-width:0!important;

    display:none!important;

    padding:3px 0 10px 15px!important;

    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  html[dir="rtl"] .header .navlinks .dropmenu{
    padding-left:0!important;
    padding-right:15px!important;
  }

  .header .navlinks .dropdown.open > .dropmenu{
    display:grid!important;
  }

  .header .navlinks .dropmenu a{
    padding:11px 10px!important;

    border-bottom:1px solid rgba(134,103,61,.09)!important;

    color:#6e6257!important;
    font-size:11px!important;
    text-decoration:none!important;
  }

  .obs-nav-backdrop{
    display:block;
    position:fixed;
    z-index:1300;
    inset:0;

    background:rgba(21,15,10,.42);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:.25s ease;
  }

  body.obs-nav-open .obs-nav-backdrop{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .obs-store-rail-inner{
    width:100%;
    justify-content:flex-start;
    padding:0 8px;
  }

  .obs-store-rail a{
    padding:12px 13px;
    font-size:9px;
  }
}

@media(max-width:520px){
  .header .navlinks{
    width:92vw!important;
  }
}


/* OBSESSION STORE RAIL DISABLED V1 */
.obs-store-rail{
  display:none!important;
}