/* Website shell integration for the customer portal. */
body.portal-website-shell{
  --portal-header-offset:8px;
  --portal-header-height:82px;
  --portal-subnav-height:54px;
  padding:0!important;
  overflow-x:hidden;
  background:#0a0a0d;
}

body.portal-website-shell .site-header{
  position:absolute;
  top:var(--portal-header-offset)!important;
  left:8px!important;
  right:8px!important;
  bottom:auto!important;
  z-index:1000;
  width:auto!important;
  max-width:none!important;
  height:var(--portal-header-height)!important;
  min-height:var(--portal-header-height)!important;
  margin:0!important;
  padding:12px 16px!important;
  border-radius:24px!important;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(10,10,13,.94);
  backdrop-filter:blur(18px);
}

body.portal-website-shell .site-header .brand,
body.portal-website-shell .site-header .brand-mark{
  width:auto;
  height:auto;
  border:0;
  border-radius:0;
  color:inherit;
}

body.portal-website-shell .site-header .brand{
  display:flex;
  align-items:center;
  gap:13px;
}

body.portal-website-shell .site-header .brand-mark{
  display:flex;
  width:52px;
  height:52px;
}

body.portal-website-shell .site-header .brand-mark img{
  width:100%;
  height:100%;
  object-fit:contain;
}

body.portal-website-shell .site-header .brand strong,
body.portal-website-shell .site-header .brand small{
  display:block;
}

body.portal-website-shell .site-header .site-nav{
  display:flex;
  align-items:center;
  gap:clamp(14px,2vw,28px);
}

body.portal-website-shell .site-header .site-nav a{
  display:inline-flex;
  color:var(--muted,#bbb3a7);
  text-decoration:none;
}

body.portal-website-shell .site-header .site-nav a:hover,
body.portal-website-shell .site-header .site-nav a.is-active{
  color:var(--gold-light,#ffda83);
}

.portal-subnav{
  position:absolute;
  z-index:990;
  top:calc(var(--portal-header-offset) + var(--portal-header-height));
  left:0;
  right:0;
  height:var(--portal-subnav-height);
  border-bottom:1px solid rgba(232,184,78,.2);
  background:rgba(15,15,18,.97);
  box-shadow:0 10px 28px rgba(0,0,0,.22);
}

.portal-subnav-inner{
  width:min(1440px,100%);
  height:100%;
  margin:0 auto;
  padding:0 clamp(16px,4vw,56px);
  display:flex;
  align-items:center;
  gap:6px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  overscroll-behavior-inline:contain;
}

.portal-subnav a{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:7px 12px;
  border:1px solid transparent;
  border-radius:10px;
  color:#bdb8ae;
  text-decoration:none;
  font-size:.86rem;
  font-weight:750;
  white-space:nowrap;
}

.portal-subnav a:hover{
  color:#fff3d5;
  background:rgba(255,255,255,.045);
}

.portal-subnav a.is-active{
  color:#181107;
  border-color:#e8b84e;
  background:linear-gradient(135deg,#e8b84e,#ffda83);
}

.portal-nav-badge{
  display:inline-grid;
  place-items:center;
  min-width:20px;
  height:20px;
  margin-left:6px;
  padding:0 5px;
  border-radius:999px;
  background:#ef5d69;
  color:#fff;
  font-size:.7rem;
}

body.portal-website-shell main.portal-main{
  width:min(1440px,calc(100% - 36px));
  min-height:calc(100vh - var(--portal-header-offset) - var(--portal-header-height) - var(--portal-subnav-height));
  margin:calc(var(--portal-header-offset) + var(--portal-header-height) + var(--portal-subnav-height)) auto 0;
  padding:clamp(34px,5vw,72px) 0 70px;
}

body.portal-website-shell .site-footer{
  display:block;
  width:100%;
  padding:0;
  color:inherit;
  font-size:inherit;
  border-top:1px solid rgba(232,184,78,.18);
}

body.portal-website-shell .site-footer .shop-footer-inner{
  display:grid;
}

body.portal-website-shell .shop-footer-socials a{
  font-size:.76rem;
  font-weight:800;
}

@media(max-width:1160px){
  body.portal-website-shell{
    --portal-header-offset:8px;
    --portal-header-height:70px;
    --portal-subnav-height:50px;
  }

  body.portal-website-shell .site-header{
    align-items:center;
  }

  body.portal-website-shell .site-header .nav-toggle{
    display:flex;
  }

  body.portal-website-shell .site-header .site-nav{
    display:none;
  }

  body.portal-website-shell .site-header .site-nav.is-open{
    display:flex;
  }

  .portal-subnav{
    top:calc(var(--portal-header-offset) + var(--portal-header-height));
    height:var(--portal-subnav-height);
  }

  body.portal-website-shell main.portal-main{
    min-height:calc(100vh - var(--portal-header-offset) - var(--portal-header-height) - var(--portal-subnav-height));
    margin-top:calc(var(--portal-header-offset) + var(--portal-header-height) + var(--portal-subnav-height));
  }
}

@media(max-width:760px){
  body.portal-website-shell .site-header{
    flex-wrap:nowrap;
    gap:10px;
    padding:8px 10px!important;
    border-radius:18px!important;
  }

  body.portal-website-shell .site-header .brand-copy small{
    display:none;
  }

  body.portal-website-shell .site-header .brand-mark{
    width:44px;
    height:44px;
  }

  body.portal-website-shell .site-header .header-actions .shopstyle-cta{
    display:none;
  }

  .portal-subnav-inner{
    padding:0 10px;
  }

  .portal-subnav a{
    min-height:34px;
    padding:6px 10px;
    font-size:.8rem;
  }

  body.portal-website-shell main.portal-main{
    width:min(100% - 20px,1440px);
    padding:26px 0 48px;
  }
}

@media(max-width:430px){
  body.portal-website-shell .site-header .brand-copy{
    display:none;
  }
}