/* BLKFOG mobile navigation — full-screen editorial drawer */
@media (max-width: 991px) {
  html body #mobile-menu.side-menu.mobile-menu {
    width: 100vw !important;
    width: 100dvw !important;
    max-width: none !important;
    min-width: 0 !important;
    background: #FAFAF8 !important;
    color: #242321 !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html body #mobile-menu .mobile-menu-inner {
    box-sizing: border-box;
    width: 100% !important;
    min-height: 100%;
    background: #FAFAF8 !important;
    padding: 30px 28px 36px !important;
    border: 0 !important;
  }
  html body #mobile-menu .toggle-nav,
  html body #mobile-menu .toggle-nav .icon-nav { color: #242321 !important; }
  html body #mobile-menu #mobile-nav { margin-top: 66px; }
  html body #mobile-menu #mobile-nav > ul { margin: 0; padding: 0; list-style: none; }
  html body #mobile-menu #mobile-nav > ul > li {
    position: relative;
    border-bottom: 1px solid rgba(36,35,33,.13);
    margin: 0;
  }
  html body #mobile-menu #mobile-nav > ul > li > a,
  html body #mobile-menu #mobile-nav > ul > li > a:visited {
    display: block;
    padding: 20px 34px 20px 0;
    color: #242321 !important;
    opacity: 1 !important;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .085em;
    line-height: 1.3;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: none !important;
  }
  html body #mobile-menu #mobile-nav > ul > li > a:hover,
  html body #mobile-menu #mobile-nav > ul > li.current-menu-item > a { color: #A54D24 !important; }
  html body #mobile-menu #mobile-nav .sub-menu { padding: 8px 0 18px 14px; }
  html body #mobile-menu #mobile-nav .sub-menu a { color: #55514d !important; font-size: 13px; letter-spacing: .04em; }
  html body #mobile-menu #mobile-nav button.toggle { right: 0; }
  html body #mobile-menu .mobile-menu-bottom { border-top: 1px solid rgba(36,35,33,.13); }
}
@media (max-width: 380px) {
  html body #mobile-menu .mobile-menu-inner { padding-left: 22px !important; padding-right: 22px !important; }
  html body #mobile-menu #mobile-nav > ul > li > a { font-size: 15px; }
}
@media (max-width:991px){html body #mobile-menu #mobile-nav > ul > li{border:0!important}html body #mobile-menu #mobile-nav > ul > li:nth-child(5){border-top:1px solid rgba(36,35,33,.18)!important;margin-top:24px!important;padding-top:20px!important}}
/* BLKFOG wordmark and secondary navigation hierarchy */
@media (max-width: 991px) {
  html body #mobile-menu .mobile-menu-inner { position: relative; }
  html body #mobile-menu .mobile-menu-inner::before {
    content: "";
    display: block;
    position: absolute;
    top: 31px;
    left: 28px;
    width: 156px;
    height: 42px;
    background: url("https://blkfog.com/wp-content/uploads/2026/02/BLKFOG-header-logo-black.svg") left center / contain no-repeat;
    pointer-events: none;
  }
  html body #mobile-menu #mobile-nav { margin-top: 94px; }
  html body #mobile-menu #mobile-nav > ul > li:nth-child(n+5) > a,
  html body #mobile-menu #mobile-nav > ul > li:nth-child(n+5) > a:visited {
    padding-top: 13px;
    padding-bottom: 13px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .105em;
    color: #595550 !important;
  }
  html body #mobile-menu #mobile-nav > ul > li:nth-child(n+5) > a:hover {
    color: #A54D24 !important;
  }
  html body #mobile-menu #mobile-nav > ul > li:nth-child(5) {
    margin-top: 26px !important;
    padding-top: 22px !important;
  }
}
@media (max-width: 380px) {
  html body #mobile-menu .mobile-menu-inner::before { left: 22px; width: 140px; }
}

/* Align navigation text with the header wordmark */
@media (max-width: 991px) {
  html body #mobile-menu #mobile-nav {
    margin-left: -28px !important;
    margin-right: -28px !important;
  }
  html body #mobile-menu #mobile-nav > ul > li > a {
    padding-left: 28px !important;
  }
  html body #mobile-menu #mobile-nav > ul > li:nth-child(5) {
    margin-left: 28px !important;
    margin-right: 28px !important;
  }
  html body #mobile-menu #mobile-nav > ul > li:nth-child(5) > a {
    padding-left: 0 !important;
  }
}
@media (max-width: 380px) {
  html body #mobile-menu #mobile-nav {
    margin-left: -22px !important;
    margin-right: -22px !important;
  }
  html body #mobile-menu #mobile-nav > ul > li > a { padding-left: 22px !important; }
  html body #mobile-menu #mobile-nav > ul > li:nth-child(5) { margin-left: 22px !important; margin-right: 22px !important; }
}

/* Override Sober's 36px mobile nav indentation */
@media (max-width:991px){html body #mobile-menu .mobile-nav{padding-left:0!important;}}

/* Secondary navigation: restrained typography and comfortable touch targets */
@media (max-width: 991px) {
  html body #mobile-menu #mobile-nav > ul > li:nth-child(n+5) > a,
  html body #mobile-menu #mobile-nav > ul > li:nth-child(n+5) > a:visited {
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: .055em !important;
    line-height: 1.5 !important;
    min-height: 44px;
    box-sizing: border-box;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    color: #57524e !important;
  }
  html body #mobile-menu #mobile-nav > ul > li:nth-child(n+5) > a:hover { color: #A54D24 !important; }
  html body #mobile-menu #mobile-nav > ul > li:nth-child(5) { padding-top: 16px !important; }
}

/* Instagram signature: separate final navigation section */
@media (max-width: 991px) {
  html body #mobile-menu #mobile-nav > ul > li:last-child {
    border-top: 1px solid rgba(36,35,33,.18) !important;
    margin-top: 30px !important;
    padding-top: 22px !important;
    margin-left: 28px !important;
    margin-right: 28px !important;
  }
  html body #mobile-menu #mobile-nav > ul > li:last-child > a,
  html body #mobile-menu #mobile-nav > ul > li:last-child > a:visited {
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
    padding: 10px 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .02em !important;
    text-transform: none !important;
    color: #242321 !important;
  }
  html body #mobile-menu #mobile-nav > ul > li:last-child > a::before {
    content: "◎";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    border: 1.7px solid currentColor;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 20px;
    line-height: 1;
    font-weight: 400;
  }
}
@media (max-width: 380px) {
  html body #mobile-menu #mobile-nav > ul > li:last-child { margin-left: 22px !important; margin-right: 22px !important; }
}

/* Utility refinement: same ink and visual weight, calmer than primary links */
@media (max-width:991px) {
 html body #mobile-menu #mobile-nav > ul > li:nth-child(n+5) > a,
 html body #mobile-menu #mobile-nav > ul > li:nth-child(n+5) > a:visited {
   color:#242321!important;
   font-size:14px!important;
   font-weight:600!important;
   letter-spacing:.07em!important;
 }
 /* Remove misplaced Instagram ornament from Contact/last item. */
 html body #mobile-menu #mobile-nav > ul > li:last-child {
   border-top:0!important;
   margin-top:0!important;
   padding-top:0!important;
 }
 html body #mobile-menu #mobile-nav > ul > li:last-child > a,
 html body #mobile-menu #mobile-nav > ul > li:last-child > a:visited {
   display:block!important;
   font-size:14px!important;
   font-weight:600!important;
   letter-spacing:.07em!important;
   text-transform:uppercase!important;
   padding:12px 28px!important;
 }
 html body #mobile-menu #mobile-nav > ul > li:last-child > a::before {
   content:none!important;
   display:none!important;
 }
}
@media(max-width:380px){
 html body #mobile-menu #mobile-nav > ul > li:last-child > a {padding-left:22px!important;}
}

/* Final hierarchy: Our Story is primary; utilities begin with Order Tracking. */
@media (max-width:991px) {
 html body #mobile-menu #mobile-nav > ul > li:nth-child(5) {
   border-top:0!important;
   margin-top:0!important;
   padding-top:0!important;
 }
 html body #mobile-menu #mobile-nav > ul > li:nth-child(5) > a,
 html body #mobile-menu #mobile-nav > ul > li:nth-child(5) > a:visited {
   font-size:17px!important;
   font-weight:600!important;
   letter-spacing:.085em!important;
   line-height:1.3!important;
   padding:20px 28px!important;
   color:#242321!important;
 }
 html body #mobile-menu #mobile-nav > ul > li:nth-child(6) {
   border-top:1px solid rgba(36,35,33,.18)!important;
   margin-top:24px!important;
   padding-top:18px!important;
   margin-left:28px!important;
   margin-right:28px!important;
 }
 html body #mobile-menu #mobile-nav > ul > li:nth-child(6) > a {padding-left:0!important;}
 html body #mobile-menu #mobile-nav > ul > li:last-child {
   border-top:1px solid rgba(36,35,33,.18)!important;
   margin-top:28px!important;
   padding-top:18px!important;
   margin-left:28px!important;
   margin-right:28px!important;
 }
 html body #mobile-menu #mobile-nav > ul > li:last-child > a,
 html body #mobile-menu #mobile-nav > ul > li:last-child > a:visited {
   display:inline-flex!important;
   align-items:center!important;
   gap:11px!important;
   padding:12px 0!important;
   font-size:14px!important;
   font-weight:600!important;
   letter-spacing:.02em!important;
   text-transform:none!important;
 }
 html body #mobile-menu #mobile-nav > ul > li:last-child > a::before {
   content:"◎"!important;
   display:inline-flex!important;
   align-items:center;
   justify-content:center;
   width:21px;
   height:21px;
   border:1.7px solid currentColor;
   border-radius:6px;
   box-sizing:border-box;
   font-size:20px;
   line-height:1;
   font-weight:400;
 }
}
@media(max-width:380px){
 html body #mobile-menu #mobile-nav > ul > li:nth-child(5) > a {padding-left:22px!important;}
 html body #mobile-menu #mobile-nav > ul > li:nth-child(6),
 html body #mobile-menu #mobile-nav > ul > li:last-child {margin-left:22px!important;margin-right:22px!important;}
}

/* Final polish: exact left alignment and Sober's bundled Font Awesome Instagram */
@media (max-width:991px) {
 html body #mobile-menu #mobile-nav > ul > li:nth-child(n+6):not(:last-child) {
   margin-left:28px!important;
   margin-right:28px!important;
 }
 html body #mobile-menu #mobile-nav > ul > li:nth-child(n+6):not(:last-child) > a,
 html body #mobile-menu #mobile-nav > ul > li:nth-child(n+6):not(:last-child) > a:visited {
   padding-left:0!important;
   padding-right:0!important;
   color:#242321!important;
 }
 html body #mobile-menu #mobile-nav > ul > li:last-child > a::before {
   content:"\\f16d"!important;
   font-family:FontAwesome!important;
   font-style:normal!important;
   font-weight:normal!important;
   font-size:20px!important;
   line-height:1!important;
   border:0!important;
   border-radius:0!important;
   width:22px!important;
   height:22px!important;
   display:inline-flex!important;
   align-items:center!important;
   justify-content:center!important;
 }
}
@media(max-width:380px) {
 html body #mobile-menu #mobile-nav > ul > li:nth-child(n+6):not(:last-child) {
   margin-left:22px!important;
   margin-right:22px!important;
 }
}

/* Correct Instagram Font Awesome glyph: CSS escape must be interpreted, not printed. */
@media(max-width:991px){
 html body #mobile-menu #mobile-nav > ul > li:last-child > a::before {
   content:"\f16d"!important;
   font-family:"FontAwesome"!important;
   font-size:20px!important;
   font-weight:400!important;
   font-style:normal!important;
   display:inline-flex!important;
   width:22px!important;
   height:22px!important;
   margin-right:2px!important;
   border:0!important;
   line-height:1!important;
 }
}

/* Final alignment: Contact follows same exact left edge as Order Tracking */
@media(max-width:991px){
 html body #mobile-menu #mobile-nav > ul > li:nth-child(7) {
   margin-left:28px!important;
   margin-right:28px!important;
 }
 html body #mobile-menu #mobile-nav > ul > li:nth-child(7) > a,
 html body #mobile-menu #mobile-nav > ul > li:nth-child(7) > a:visited {
   padding-left:0!important;
   padding-right:0!important;
   margin-left:0!important;
   text-indent:0!important;
 }
 /* Closing rule below the Instagram signature */
 html body #mobile-menu #mobile-nav > ul > li:last-child {
   border-bottom:1px solid rgba(36,35,33,.18)!important;
   padding-bottom:22px!important;
 }
}
@media(max-width:380px){
 html body #mobile-menu #mobile-nav > ul > li:nth-child(7) {
   margin-left:22px!important;
   margin-right:22px!important;
 }
}

/* Final targeted correction: fifth link starts on the same x-axis as primary links. */
@media(max-width:991px) {
 html body #mobile-menu #mobile-nav > ul > li:nth-child(5) {
   margin-left:0!important;
   margin-right:0!important;
 }
 html body #mobile-menu #mobile-nav > ul > li:nth-child(5) > a,
 html body #mobile-menu #mobile-nav > ul > li:nth-child(5) > a:visited {
   padding-left:28px!important;
   margin-left:0!important;
   text-indent:0!important;
 }
 /* Divider must sit below the complete Instagram row, not between icon and label. */
 html body #mobile-menu #mobile-nav > ul > li:last-child {
   border-bottom:0!important;
   padding-bottom:0!important;
   position:relative!important;
 }
 html body #mobile-menu #mobile-nav > ul > li:last-child::after {
   content:""!important;
   display:block!important;
   position:relative!important;
   clear:both!important;
   width:100%!important;
   height:1px!important;
   margin-top:20px!important;
   background:rgba(36,35,33,.18)!important;
 }
 html body #mobile-menu #mobile-nav > ul > li:last-child > a {
   display:flex!important;
   width:100%!important;
   align-items:center!important;
   justify-content:flex-start!important;
   gap:11px!important;
   box-sizing:border-box!important;
 }
}
@media(max-width:380px) {
 html body #mobile-menu #mobile-nav > ul > li:nth-child(5) > a {padding-left:22px!important;}
}

/* Requested signature: vertical separator between Instagram icon and BLKFOG. */
@media(max-width:991px) {
 html body #mobile-menu #mobile-nav > ul > li:last-child {
   border-bottom:0!important;
 }
 html body #mobile-menu #mobile-nav > ul > li:last-child::after {
   content:none!important;
   display:none!important;
 }
 html body #mobile-menu #mobile-nav > ul > li:last-child > a {
   gap:10px!important;
 }
 html body #mobile-menu #mobile-nav > ul > li:last-child > a::before {
   border:0!important;
   border-right:1px solid rgba(36,35,33,.35)!important;
   box-sizing:content-box!important;
   padding-right:12px!important;
   width:20px!important;
   height:22px!important;
   margin-right:0!important;
 }
}

/* Consistent rust hover/focus across every mobile navigation link, including Instagram glyph. */
@media(max-width:991px) {
 html body #mobile-menu #mobile-nav > ul > li > a:hover,
 html body #mobile-menu #mobile-nav > ul > li > a:focus-visible,
 html body #mobile-menu #mobile-nav > ul > li > a:hover::before,
 html body #mobile-menu #mobile-nav > ul > li > a:focus-visible::before,
 html body #mobile-menu #mobile-nav > ul > li:nth-child(n+5) > a:hover,
 html body #mobile-menu #mobile-nav > ul > li:nth-child(n+5) > a:focus-visible,
 html body #mobile-menu #mobile-nav > ul > li:last-child > a:hover,
 html body #mobile-menu #mobile-nav > ul > li:last-child > a:focus-visible {
   color:#A54D24!important;
 }
 html body #mobile-menu #mobile-nav > ul > li > a::before {
   transition:color .18s ease;
 }
}

/* Utility links: force same rust hover as primary navigation */
@media(max-width:991px){
 html body #mobile-menu #mobile-nav > ul > li:nth-child(n+6):not(:last-child) > a:hover,
 html body #mobile-menu #mobile-nav > ul > li:nth-child(n+6):not(:last-child) > a:focus-visible,
 html body #mobile-menu #mobile-nav > ul > li:nth-child(n+6):not(:last-child):hover > a {
   color:#A54D24!important;
 }
}



/* BLKFOG MOBILE NAV V2 — editorial sections with stable document flow */
@media(max-width:991px){
 html body #mobile-menu #mobile-nav{
   position:relative!important;
   display:flex!important;
   flex-direction:column!important;
   padding-bottom:30px!important;
 }
 html body #mobile-menu #mobile-nav > ul{
   position:static!important;
   order:1!important;
 }
 html body #mobile-menu #mobile-nav > ul > li:first-child::before,
 html body #mobile-menu #mobile-nav > ul > li:nth-child(6)::before{
   display:block!important;
   font-size:10px!important;
   font-weight:700!important;
   line-height:16px!important;
   letter-spacing:.12em!important;
   color:#242321!important;
   white-space:nowrap!important;
 }
 html body #mobile-menu #mobile-nav > ul > li:first-child::before{
   content:"01  —  EXPLORE BLKFOG"!important;
   margin:0 0 24px 45px!important;
 }
 html body #mobile-menu #mobile-nav > ul > li:nth-child(6){
   border-top:1px solid rgba(36,35,33,.18)!important;
   padding-top:24px!important;
   margin-top:24px!important;
 }
 html body #mobile-menu #mobile-nav > ul > li:nth-child(6)::before{
   content:"02  —  THE ESSENTIALS"!important;
   margin:0 0 17px!important;
 }
 html body #mobile-menu #mobile-nav > ul > li:last-child{
   margin-top:25px!important;
   padding-top:20px!important;
 }
 html body #mobile-menu #mobile-nav::before{
   content:"03  —  BLKFOG / 2026"!important;
   display:block!important;
   position:static!important;
   order:2!important;
   width:auto!important;
   height:auto!important;
   margin:26px 28px 0!important;
   padding:24px 0 0!important;
   border-top:1px solid rgba(36,35,33,.18)!important;
   color:#A54D24!important;
   font-size:10px!important;
   font-weight:700!important;
   line-height:16px!important;
   letter-spacing:.13em!important;
   pointer-events:none!important;
 }
 html body #mobile-menu #mobile-nav::after{
   content:"SMALL BATCH APPAREL.\A BORN IN THE FOG. BUILT BY THE TIDE."!important;
   display:block!important;
   position:static!important;
   order:3!important;
   white-space:pre-line!important;
   margin:13px 28px 0!important;
   padding:0 38px 0 0!important;
   border:0!important;
   color:#242321!important;
   font-size:12px!important;
   font-weight:600!important;
   line-height:29px!important;
   letter-spacing:.055em!important;
 }
 html body #mobile-menu #mobile-nav > ul::after{
   content:"↗"!important;
   display:block!important;
   position:absolute!important;
   right:28px!important;
   bottom:32px!important;
   color:#A54D24!important;
   font-size:23px!important;
   line-height:29px!important;
   font-weight:400!important;
   pointer-events:none!important;
 }
}
@media(max-width:380px){
 html body #mobile-menu #mobile-nav > ul > li:first-child::before{margin-left:39px!important;}
 html body #mobile-menu #mobile-nav::before{margin-left:22px!important;margin-right:22px!important;}
 html body #mobile-menu #mobile-nav::after{margin-left:22px!important;margin-right:22px!important;}
 html body #mobile-menu #mobile-nav > ul::after{right:22px!important;}
}


/* V2 stable editorial labels — never split a label across the first link */
@media(max-width:991px){
 html body #mobile-menu #mobile-nav > ul > li:first-child::after,
 html body #mobile-menu #mobile-nav > ul > li:nth-child(6)::after{
   content:none!important;
   display:none!important;
 }
 html body #mobile-menu #mobile-nav > ul > li:first-child::before,
 html body #mobile-menu #mobile-nav > ul > li:nth-child(6)::before{
   display:block!important;
   position:static!important;
   width:auto!important;
   height:auto!important;
   white-space:nowrap!important;
   color:#A54D24!important;
   font-size:10px!important;
   font-weight:700!important;
   letter-spacing:.11em!important;
   line-height:16px!important;
 }
 html body #mobile-menu #mobile-nav > ul > li:first-child::before{
   content:"01 — EXPLORE BLKFOG"!important;
   margin:0 28px 20px!important;
 }
 html body #mobile-menu #mobile-nav > ul > li:nth-child(6)::before{
   content:"02 — THE ESSENTIALS"!important;
   margin:0 0 17px!important;
 }
 html body #mobile-menu #mobile-nav > ul > li:nth-child(-n+5) > a{
   padding-top:20px!important;
   padding-bottom:20px!important;
 }
 html body #mobile-menu #mobile-nav > ul > li:first-child > a{padding-top:0!important;}
 html body #mobile-menu #mobile-nav > ul > li:nth-child(6){
   margin-top:24px!important;
   padding-top:24px!important;
 }
 html body #mobile-menu #mobile-nav > ul > li:nth-child(6) > a{
   padding-top:0!important;
 }
 html body #mobile-menu #mobile-nav > ul > li:nth-child(n+7):not(:last-child) > a{
   padding-top:12px!important;
   padding-bottom:12px!important;
 }
}
@media(max-width:380px){
 html body #mobile-menu #mobile-nav > ul > li:first-child::before{
   margin-left:22px!important;
   margin-right:22px!important;
 }
}

/* Brand tagline beneath the drawer wordmark; keep closing signature concise. */
@media(max-width:991px){
 html body #mobile-menu .mobile-menu-inner::after{
   content:"BORN IN THE FOG. BUILT BY THE TIDE."!important;
   display:block!important;
   position:absolute!important;
   top:78px!important;
   left:28px!important;
   right:60px!important;
   width:auto!important;
   height:auto!important;
   font-size:9px!important;
   font-weight:600!important;
   line-height:15px!important;
   letter-spacing:.085em!important;
   color:#68615B!important;
   pointer-events:none!important;
 }
 html body #mobile-menu #mobile-nav::after{
   content:"SMALL BATCH APPAREL."!important;
   line-height:29px!important;
 }
 html body #mobile-menu #mobile-nav > ul::after{
   bottom:32px!important;
 }
}
@media(max-width:380px){
 html body #mobile-menu .mobile-menu-inner::after{
   left:22px!important;
   right:50px!important;
   font-size:8px!important;
 }
}

/* Consistent Essentials rhythm: equal spacing for Contact, Tracking and Cart */
@media(max-width:991px){
 html body #mobile-menu #mobile-nav > ul > li:nth-child(6) > a,
 html body #mobile-menu #mobile-nav > ul > li:nth-child(7) > a,
 html body #mobile-menu #mobile-nav > ul > li:nth-child(8) > a{
   display:block!important;
   box-sizing:border-box!important;
   margin-top:0!important;
   margin-bottom:0!important;
   padding-top:11px!important;
   padding-bottom:11px!important;
   line-height:18px!important;
 }
 html body #mobile-menu #mobile-nav > ul > li:nth-child(6) > a{
   padding-top:0!important;
 }
 html body #mobile-menu #mobile-nav > ul > li:nth-child(6),
 html body #mobile-menu #mobile-nav > ul > li:nth-child(7),
 html body #mobile-menu #mobile-nav > ul > li:nth-child(8){
   margin-bottom:0!important;
 }
}

/* Equal baseline-to-baseline utility rhythm; remove Sober list-item height differences. */
@media(max-width:991px){
 html body #mobile-menu #mobile-nav > ul > li:nth-child(6),
 html body #mobile-menu #mobile-nav > ul > li:nth-child(7),
 html body #mobile-menu #mobile-nav > ul > li:nth-child(8){
   min-height:0!important;
   height:auto!important;
   padding-bottom:0!important;
   margin-bottom:0!important;
 }
 html body #mobile-menu #mobile-nav > ul > li:nth-child(6) > a,
 html body #mobile-menu #mobile-nav > ul > li:nth-child(7) > a,
 html body #mobile-menu #mobile-nav > ul > li:nth-child(8) > a{
   display:flex!important;
   align-items:center!important;
   height:40px!important;
   min-height:40px!important;
   box-sizing:border-box!important;
   padding-top:0!important;
   padding-bottom:0!important;
   margin:0!important;
   line-height:18px!important;
 }
}

/* WooCommerce live cart quantity badge — Essentials / Your Cart only */
@media(max-width:991px){
 html body #mobile-menu #mobile-nav > ul > li:nth-child(8) > a{
   display:flex!important;
   align-items:center!important;
   justify-content:space-between!important;
   gap:12px!important;
   width:100%!important;
 }
 html body #mobile-menu #mobile-nav .blkfog-mobile-cart-count{
   flex:0 0 auto!important;
   display:inline-flex!important;
   align-items:center!important;
   justify-content:center!important;
   box-sizing:border-box!important;
   width:26px!important;
   min-width:26px!important;
   height:26px!important;
   border:1px solid rgba(36,35,33,.32)!important;
   border-radius:50%!important;
   background:transparent!important;
   color:#242321!important;
   font-size:11px!important;
   font-weight:700!important;
   line-height:1!important;
   letter-spacing:0!important;
   text-align:center!important;
   transition:background-color .2s ease,color .2s ease,border-color .2s ease!important;
 }
 html body #mobile-menu #mobile-nav .blkfog-mobile-cart-count.has-items{
   background:#A54D24!important;
   border-color:#A54D24!important;
   color:#fff!important;
 }
}

/* BLKFOG: make the existing homepage link the visible mobile wordmark. */
@media (max-width: 991px) {
 html body #mobile-menu .mobile-menu-inner::before { display: none !important; }
 html body #mobile-menu .mobile-menu-inner > a.blkfog-drawer-home {
  display: block !important; position: absolute !important; z-index: 5 !important;
  top: 31px !important; left: 28px !important; width: 156px !important; height: 42px !important;
  background: url("https://blkfog.com/wp-content/uploads/2026/02/BLKFOG-header-logo-black.svg") left center / contain no-repeat !important;
 }
 html body #mobile-menu .mobile-menu-inner > a.blkfog-drawer-home:focus-visible { outline: 2px solid #A54D24; outline-offset: 4px; }
}
@media (max-width: 380px) { html body #mobile-menu .mobile-menu-inner > a.blkfog-drawer-home { left: 22px !important; width: 140px !important; } }

/* BLKFOG mobile drawer: keep the theme header behind the drawer and tighten the intro. */
@media (max-width:991px) {
 html body #mobile-menu.mobile-menu,
 html body #mobile-menu.side-menu.mobile-menu {
  position:fixed!important; top:0!important; left:0!important;
  height:100vh!important; height:100dvh!important;
  z-index:999999!important;
 }
 html body #mobile-menu .mobile-menu-inner::before {content:none!important;display:none!important;background:none!important;}
 html body #mobile-menu .mobile-menu-inner > a.blkfog-drawer-home {
  z-index:10!important; top:26px!important; left:28px!important;
  width:156px!important; height:42px!important;
 }
 html body #mobile-menu #mobile-nav {margin-top:48px!important;}
}
@media (max-width:380px) {
 html body #mobile-menu .mobile-menu-inner > a.blkfog-drawer-home {left:22px!important;}
}

/* BLKFOG: hide Sober search control inside mobile drawer only. */
@media(max-width:991px){
 html body #mobile-menu .search-form,
 html body #mobile-menu .search-field,
 html body #mobile-menu .search-toggle,
 html body #mobile-menu .search-icon,
 html body #mobile-menu .search-button,
 html body #mobile-menu .header-search,
 html body #mobile-menu .menu-item-search,
 html body #mobile-menu [class*="search-toggle"],
 html body #mobile-menu [class*="search-icon"]{display:none!important;}
}

/* Drawer header cleanup: remove duplicate generated tagline and clear the first section. */
@media(max-width:991px){
 html body #mobile-menu .mobile-menu-inner::after{content:none!important;display:none!important;}
 html body #mobile-menu #mobile-nav{margin-top:76px!important;}
}

/* Drawer close button: anchor it top-right above the logo, independent of theme positioning. */
@media(max-width:991px){
 html body #mobile-menu .mobile-menu-inner{position:relative!important;}
 html body #mobile-menu .mobile-menu-inner > .toggle-nav{
  display:flex!important;align-items:center!important;justify-content:center!important;
  position:absolute!important;top:26px!important;right:24px!important;left:auto!important;
  width:44px!important;height:44px!important;margin:0!important;padding:0!important;
  z-index:100!important;visibility:visible!important;opacity:1!important;
  color:#242321!important;cursor:pointer!important;
 }
 html body #mobile-menu .mobile-menu-inner > .toggle-nav .icon-nav{color:#242321!important;opacity:1!important;}
 html body #mobile-menu .mobile-menu-inner > a.blkfog-drawer-home{z-index:20!important;}
}
@media(max-width:380px){html body #mobile-menu .mobile-menu-inner > .toggle-nav{right:18px!important;}}

/* Restore the BLKFOG signature under the logo, without overlapping section 01. */
@media(max-width:991px){
 html body #mobile-menu .mobile-menu-inner::after{
  content:"BORN IN THE FOG. BUILT BY THE TIDE."!important;
  display:block!important;position:absolute!important;
  top:79px!important;left:28px!important;right:76px!important;
  width:auto!important;height:auto!important;
  color:#68615B!important;font-size:9px!important;font-weight:600!important;
  line-height:14px!important;letter-spacing:.085em!important;
  white-space:nowrap!important;pointer-events:none!important;
  z-index:15!important;
 }
}
@media(max-width:380px){
 html body #mobile-menu .mobile-menu-inner::after{left:22px!important;font-size:8px!important;letter-spacing:.05em!important;}
}

/* Final primary-link rhythm: tighter vertical spacing, unchanged section breaks. */
@media(max-width:991px){
 html body #mobile-menu #mobile-nav > ul > li:nth-child(-n+5) > a,
 html body #mobile-menu #mobile-nav > ul > li:nth-child(-n+5) > a:visited{
  padding-top:12px!important;
  padding-bottom:12px!important;
 }
 html body #mobile-menu #mobile-nav > ul > li:first-child > a,
 html body #mobile-menu #mobile-nav > ul > li:first-child > a:visited{padding-top:0!important;}
}

/* Final approved drawer offset. */
@media (max-width: 991px) {
 html body #mobile-menu #mobile-nav { margin-top: 100px !important; }
}

/* BLKFOG Cinematic Reveal — motion only, no layout changes. */
@media(max-width:991px) and (prefers-reduced-motion:no-preference){
 html body #mobile-menu .mobile-menu-inner > a.blkfog-drawer-home,
 html body #mobile-menu .mobile-menu-inner::after,
 html body #mobile-menu #mobile-nav > ul > li,
 html body #mobile-menu #mobile-nav::before,
 html body #mobile-menu #mobile-nav::after{
  transition:opacity .32s ease, transform .42s cubic-bezier(.22,1,.36,1)!important;
 }
 html body #mobile-menu:not(.open):not(.active):not(.opened) .mobile-menu-inner > a.blkfog-drawer-home,
 html body #mobile-menu:not(.open):not(.active):not(.opened) .mobile-menu-inner::after,
 html body #mobile-menu:not(.open):not(.active):not(.opened) #mobile-nav > ul > li{
  opacity:0;
  transform:translateY(12px);
 }
 html body #mobile-menu #mobile-nav > ul > li:nth-child(1){transition-delay:.08s!important;}
 html body #mobile-menu #mobile-nav > ul > li:nth-child(2){transition-delay:.125s!important;}
 html body #mobile-menu #mobile-nav > ul > li:nth-child(3){transition-delay:.17s!important;}
 html body #mobile-menu #mobile-nav > ul > li:nth-child(4){transition-delay:.215s!important;}
 html body #mobile-menu #mobile-nav > ul > li:nth-child(5){transition-delay:.26s!important;}
 html body #mobile-menu #mobile-nav > ul > li:nth-child(n+6){transition-delay:.28s!important;}
 html body #mobile-menu #mobile-nav > ul > li > a{transition:color .18s ease!important;}
}
@media(max-width:991px) and (prefers-reduced-motion:reduce){
 html body #mobile-menu #mobile-nav > ul > li,
 html body #mobile-menu .mobile-menu-inner > a.blkfog-drawer-home{transition:none!important;animation:none!important;}
}

/* Cinematic Reveal v2 — trigger keyframes from Sober's verified .open class. */
@media(max-width:991px) and (prefers-reduced-motion:no-preference){
 @keyframes bfDrawerReveal{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
 html body #mobile-menu.open .mobile-menu-inner > a.blkfog-drawer-home{animation:bfDrawerReveal .38s cubic-bezier(.22,1,.36,1) both!important;}
 html body #mobile-menu.open .mobile-menu-inner::after{animation:bfDrawerReveal .4s cubic-bezier(.22,1,.36,1) .07s both!important;}
 html body #mobile-menu.open #mobile-nav > ul > li{animation:bfDrawerReveal .46s cubic-bezier(.22,1,.36,1) both!important;}
 html body #mobile-menu.open #mobile-nav > ul > li:nth-child(1){animation-delay:.10s!important;}
 html body #mobile-menu.open #mobile-nav > ul > li:nth-child(2){animation-delay:.145s!important;}
 html body #mobile-menu.open #mobile-nav > ul > li:nth-child(3){animation-delay:.19s!important;}
 html body #mobile-menu.open #mobile-nav > ul > li:nth-child(4){animation-delay:.235s!important;}
 html body #mobile-menu.open #mobile-nav > ul > li:nth-child(5){animation-delay:.28s!important;}
 html body #mobile-menu.open #mobile-nav > ul > li:nth-child(n+6){animation-delay:.32s!important;}
 html body #mobile-menu.open #mobile-nav::before,
 html body #mobile-menu.open #mobile-nav::after{animation:bfDrawerReveal .4s ease .35s both!important;}
}
@media(max-width:991px) and (prefers-reduced-motion:reduce){
 html body #mobile-menu.open #mobile-nav > ul > li,
 html body #mobile-menu.open .mobile-menu-inner > a.blkfog-drawer-home{animation:none!important;}
}

/* Cinematic Reveal v3: defer stagger until the Sober panel has slid onscreen. */
@media(max-width:991px) and (prefers-reduced-motion:no-preference){
 html body.side-menu-opened #mobile-menu.open .mobile-menu-inner > a.blkfog-drawer-home{
  animation:bfDrawerReveal .55s cubic-bezier(.22,1,.36,1) .35s both!important;
 }
 html body.side-menu-opened #mobile-menu.open .mobile-menu-inner::after{
  animation:bfDrawerReveal .55s cubic-bezier(.22,1,.36,1) .42s both!important;
 }
 html body.side-menu-opened #mobile-menu.open #mobile-nav > ul > li{
  animation-name:bfDrawerReveal!important;
  animation-duration:.58s!important;
  animation-timing-function:cubic-bezier(.22,1,.36,1)!important;
  animation-fill-mode:both!important;
 }
 html body.side-menu-opened #mobile-menu.open #mobile-nav > ul > li:nth-child(1){animation-delay:.50s!important;}
 html body.side-menu-opened #mobile-menu.open #mobile-nav > ul > li:nth-child(2){animation-delay:.58s!important;}
 html body.side-menu-opened #mobile-menu.open #mobile-nav > ul > li:nth-child(3){animation-delay:.66s!important;}
 html body.side-menu-opened #mobile-menu.open #mobile-nav > ul > li:nth-child(4){animation-delay:.74s!important;}
 html body.side-menu-opened #mobile-menu.open #mobile-nav > ul > li:nth-child(5){animation-delay:.82s!important;}
 html body.side-menu-opened #mobile-menu.open #mobile-nav > ul > li:nth-child(n+6){animation-delay:.90s!important;}
}

/* BLKFOG active page marker — rust rail on the left, no layout shift. */
@media(max-width:991px){
 html body #mobile-menu #mobile-nav > ul > li.current-menu-item > a,
 html body #mobile-menu #mobile-nav > ul > li.current_page_item > a,
 html body #mobile-menu #mobile-nav > ul > li.current-menu-ancestor > a,
 html body #mobile-menu #mobile-nav > ul > li.current_page_ancestor > a{
  color:#A54D24!important;
  position:relative;
 }
 html body #mobile-menu #mobile-nav > ul > li.current-menu-item > a::before,
 html body #mobile-menu #mobile-nav > ul > li.current_page_item > a::before,
 html body #mobile-menu #mobile-nav > ul > li.current-menu-ancestor > a::before,
 html body #mobile-menu #mobile-nav > ul > li.current_page_ancestor > a::before{
  content:""!important;
  position:absolute!important;
  display:block!important;
  width:3px!important;
  height:20px!important;
  left:-12px!important;
  top:50%!important;
  margin-top:-10px!important;
  border-radius:2px!important;
  background:#A54D24!important;
  pointer-events:none!important;
 }
}

/* Cart badge gentle scale on count update */
@keyframes blkfogCountGrow{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@media(max-width:991px) and (prefers-reduced-motion:no-preference){#mobile-menu .blkfog-mobile-cart-count.blkfog-count-grow{animation:blkfogCountGrow .42s ease-in-out!important}}

/* Play badge grow once when the mobile drawer becomes visible. */
@media(max-width:991px) and (prefers-reduced-motion:no-preference){
 body.side-menu-opened #mobile-menu.open .blkfog-mobile-cart-count{
  animation:blkfogCountGrow .42s ease-in-out 1.65s both!important;
 }
}

/* Bottom signature: one-line VANISLE ORIGINAL, existing arrow stays on the right. */
@media(max-width:991px){
 html body #mobile-menu #mobile-nav::after{
  content:"VANISLE ORIGINAL"!important;
  white-space:nowrap!important;
  line-height:29px!important;
  min-height:29px!important;
 }
 html body #mobile-menu #mobile-nav > ul::after{
  bottom:0!important;
 }
}

/* Align the closing arrow with VANISLE ORIGINAL, not the full menu. */
@media(max-width:991px){
 html body #mobile-menu #mobile-nav > ul::after{display:none!important;content:none!important;}
 html body #mobile-menu #mobile-nav::after{
  background-image:linear-gradient(135deg,transparent 43%,#A54D24 44%,#A54D24 54%,transparent 55%)!important;
  background-size:12px 12px!important;
  background-position:right center!important;
  background-repeat:no-repeat!important;
 }
}