/* Findability V21.6
   Restores the last known-good V21.4 navigation behaviour and retains the
   successful V21.5 Templates hosting-card spacing/alignment.
*/
:root{
  --fnd-v216-ink:#071820;
  --fnd-v216-orange:#E4572E;
  --fnd-v216-menu-line:rgba(255,255,255,.14);
}

/* ---------------------------
   TEMPLATES HOSTING CARDS
   --------------------------- */
body.fnd-v216-templates .template-plan-grid{
  align-items:stretch!important;
}
body.fnd-v216-templates .template-plan-grid > article{
  min-height:0!important;
}
body.fnd-v216-templates .template-plan-grid > article > ul{
  margin-top:26px!important;
}
body.fnd-v216-templates .fnd-v216-actions{
  display:flex!important;
  flex-direction:row!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:10px!important;
  width:auto!important;
  min-height:48px!important;
  height:48px!important;
  margin:22px 0 0!important;
  padding:0!important;
}
body.fnd-v216-templates .fnd-v216-actions > .fnd-plan-buy,
body.fnd-v216-templates .fnd-v216-actions > [data-fnd-buy]{
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  width:auto!important;
  height:48px!important;
  min-height:48px!important;
  max-height:48px!important;
  margin:0!important;
  padding-top:0!important;
  padding-bottom:0!important;
  align-self:stretch!important;
  line-height:1!important;
  transform:none!important;
  position:static!important;
  inset:auto!important;
}
body.fnd-v216-templates .fnd-v216-actions > .fnd-v216-cart-control{
  box-sizing:border-box!important;
  position:static!important;
  inset:auto!important;
  transform:none!important;
  display:inline-grid!important;
  place-items:center!important;
  align-self:stretch!important;
  flex:0 0 48px!important;
  width:48px!important;
  min-width:48px!important;
  max-width:48px!important;
  height:48px!important;
  min-height:48px!important;
  max-height:48px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid #071820!important;
  background:#fff!important;
  color:#071820!important;
  line-height:1!important;
  vertical-align:top!important;
}
body.fnd-v216-templates .fnd-v216-actions > .fnd-v216-cart-control svg{
  display:block!important;
  width:18px!important;
  height:18px!important;
  margin:0!important;
  position:static!important;
  transform:none!important;
}
body.fnd-v216-templates .fnd-v212-plan-actions,
body.fnd-v216-templates .fnd-v213-plan-actions,
body.fnd-v216-templates .fnd-v214-plan-actions,
body.fnd-v216-templates .fnd-v215-actions{
  margin-top:22px!important;
  padding-top:0!important;
}

/* ---------------------------
   DESKTOP INVERSE HEADER
   This is the known-good V21.4 behaviour restored under a V21.6 class.
   --------------------------- */
@media (min-width:821px){
  header.header{
    transition:background-color .22s ease,border-color .22s ease,
               box-shadow .22s ease,color .22s ease;
  }
  header.header nav>a,
  header.header .fnd-icon-link{
    transition:color .18s ease,border-color .18s ease;
  }
  header.header.fnd-v216-inverse{
    background:var(--fnd-v216-ink)!important;
    border-bottom-color:rgba(255,255,255,.14)!important;
    box-shadow:0 8px 28px rgba(7,24,32,.12)!important;
  }
  header.header.fnd-v216-inverse nav>a,
  header.header.fnd-v216-inverse .fnd-icon-link{
    color:#fff!important;
  }
  header.header.fnd-v216-inverse nav>a:hover,
  header.header.fnd-v216-inverse .fnd-icon-link:hover{
    color:var(--fnd-v216-orange)!important;
    border-color:var(--fnd-v216-orange)!important;
  }
  header.header.fnd-v216-inverse>.btn{
    background:var(--fnd-v216-orange)!important;
    border-color:var(--fnd-v216-orange)!important;
    color:#fff!important;
  }
  header.header.fnd-v216-inverse>a[aria-label="Findability home"] .logo-frame{
    width:176px!important;
    height:54px!important;
    overflow:visible!important;
    background:url("/findability-logo-white.png") left center / contain no-repeat!important;
  }
  header.header.fnd-v216-inverse>a[aria-label="Findability home"] .logo-frame img{
    opacity:0!important;
    width:1px!important;
    height:1px!important;
    position:absolute!important;
    inset:auto!important;
  }
}

/* ---------------------------
   MOBILE FULL-SCREEN MENU
   Restores the exact solid-Deep-Ink treatment the user approved.
   --------------------------- */
@media (max-width:820px){
  body:has(header.header details.mobile-menu[open]){
    overflow:hidden!important;
  }
  header.header details.mobile-menu{
    position:static!important;
  }
  header.header details.mobile-menu>summary{
    position:relative;
    z-index:1003;
    list-style:none!important;
    cursor:pointer;
    letter-spacing:.1em;
    font-size:12px!important;
    font-weight:900!important;
  }
  header.header details.mobile-menu>summary::-webkit-details-marker{
    display:none!important;
  }
  header.header details.mobile-menu[open]>summary{
    position:fixed!important;
    top:24px!important;
    right:24px!important;
    z-index:1003!important;
    color:#fff!important;
    font-size:0!important;
    padding:12px 0!important;
  }
  header.header details.mobile-menu[open]>summary::after{
    content:"CLOSE";
    font-size:12px!important;
    letter-spacing:.12em;
    font-weight:900;
  }
  header.header details.mobile-menu>div{
    display:none!important;
  }
  header.header details.mobile-menu[open]>div{
    display:flex!important;
    position:fixed!important;
    inset:0!important;
    z-index:1001!important;
    width:100vw!important;
    height:100dvh!important;
    max-height:none!important;
    overflow-y:auto!important;
    flex-direction:column!important;
    gap:0!important;
    padding:82px 28px 34px!important;
    color:#fff!important;
    background:var(--fnd-v216-ink)!important;
    background-image:none!important;
    box-shadow:none!important;
    counter-reset:fnd-v216-nav;
  }
  header.header details.mobile-menu[open]>div::before{
    content:"";
    display:block;
    flex:0 0 auto;
    width:168px;
    height:48px;
    margin:0 0 18px;
    background:url("/findability-logo-white.png") left center / contain no-repeat;
  }
  header.header details.mobile-menu[open]>div>a{
    counter-increment:fnd-v216-nav;
    position:relative;
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr);
    align-items:center;
    flex:0 0 auto;
    min-height:58px;
    padding:10px 2px!important;
    border-bottom:1px solid var(--fnd-v216-menu-line)!important;
    color:#fff!important;
    background:transparent!important;
    text-decoration:none!important;
    font-size:clamp(20px,5.6vw,25px)!important;
    font-weight:750!important;
    line-height:1.05!important;
    letter-spacing:-.01em!important;
  }
  header.header details.mobile-menu[open]>div>a::before{
    content:counter(fnd-v216-nav,decimal-leading-zero);
    color:var(--fnd-v216-orange);
    font-size:9px;
    font-weight:900;
    letter-spacing:.15em;
  }
  header.header details.mobile-menu[open]>div>a:hover,
  header.header details.mobile-menu[open]>div>a:focus-visible{
    color:var(--fnd-v216-orange)!important;
    outline:none!important;
  }
  header.header details.mobile-menu[open]>div>a.fnd-mobile-account,
  header.header details.mobile-menu[open]>div>a.fnd-mobile-cart{
    font-size:clamp(20px,5.6vw,25px)!important;
    font-weight:750!important;
  }
  header.header details.mobile-menu[open]>div>a.fnd-mobile-cart{
    display:flex!important;
    align-items:center!important;
    min-height:58px!important;
    gap:0!important;
  }
  header.header details.mobile-menu[open]>div>a.fnd-mobile-cart::before{
    flex:0 0 42px!important;
    width:42px!important;
  }
  header.header details.mobile-menu[open]>div>a.fnd-mobile-cart b,
  header.header details.mobile-menu[open]>div>a.fnd-mobile-cart [data-findability-cart-count]{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    display:inline-grid!important;
    place-items:center!important;
    flex:0 0 auto!important;
    min-width:24px!important;
    width:auto!important;
    height:24px!important;
    margin:0 0 0 10px!important;
    padding:0 7px!important;
    background:var(--fnd-v216-orange)!important;
    color:#fff!important;
    font-size:10px!important;
    font-weight:900!important;
    line-height:1!important;
  }
  header.header details.mobile-menu[open]>div::after{
    content:"BE FOUND. BE TRUSTED. BE CHOSEN.";
    display:block;
    flex:0 0 auto;
    margin-top:24px;
    padding-top:20px;
    border-top:1px solid var(--fnd-v216-menu-line);
    color:#fff;
    font-size:10px;
    font-weight:900;
    letter-spacing:.16em;
    line-height:1.5;
  }

  body.fnd-v216-templates .template-plan-grid > article > ul{
    margin-top:24px!important;
  }
  body.fnd-v216-templates .fnd-v216-actions{
    margin-top:20px!important;
    gap:9px!important;
  }
}