/* VAV embroidery hero v3 — isolated to hero only. */
:root{
  --vav-hero-fabric:url('./assets/hero/VAV_HERO_FABRIC_TILE.webp');
  --vav-hero-rest:url('./assets/hero/vav-embroidery-v4/rest-thread.png');
}
#assortment{scroll-margin-top:92px}

body .hero-section.vav-embroidery-hero{
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
  height:75svh!important;
  min-height:690px!important;
  max-height:790px!important;
  padding:0!important;
  border:0!important;
  background-color:#f1eee8!important;
  background-image:var(--vav-hero-fabric)!important;
  background-repeat:repeat!important;
  background-position:0 0!important;
  background-size:260px 240px!important;
}
body .hero-section.vav-embroidery-hero::before,
body .hero-section.vav-embroidery-hero::after{
  display:none!important;
  content:none!important;
}

.vav-embroidery-hero__inner{
  position:relative;
  z-index:1;
  width:min(100% - 64px,1500px);
  height:100%;
  margin:0 auto;
  padding-top:145px;
  display:flex;
  flex-direction:column;
  align-items:center;
  box-sizing:border-box;
}

.vav-embroidery-hero__stage{
  position:relative;
  width:min(925px,64vw);
  aspect-ratio:925/432;
  flex:0 0 auto;
  user-select:none;
  -webkit-user-select:none;
  touch-action:pan-y;
}

.vav-embroidery-hero__semantic{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.vav-embroidery-hero__rest,
.vav-embroidery-hero__canvas{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
}
.vav-embroidery-hero__rest{
  z-index:1;
  object-fit:contain;
  pointer-events:none;
  mix-blend-mode:normal;
  transition:opacity 120ms linear;
}
.vav-embroidery-hero__rest{opacity:1}
.vav-embroidery-hero.vav-embroidery-animating .vav-embroidery-hero__rest{opacity:0}
.vav-embroidery-hero.vav-embroidery-fallback .vav-embroidery-hero__rest{opacity:1}
.vav-embroidery-hero__canvas{
  z-index:2;
  pointer-events:none;
  opacity:0;
  transition:opacity 120ms linear;
}
.vav-embroidery-hero.vav-embroidery-animating .vav-embroidery-hero__canvas{opacity:1}

.vav-embroidery-hero__cta.button{
  position:relative;
  z-index:4;
  width:auto;
  min-width:196px;
  min-height:50px;
  margin-top:12px;
  padding:0 27px;
  justify-content:center;
  border-radius:999px;
  background:#050505!important;
  border-color:#050505!important;
  color:#fff!important;
  box-shadow:0 10px 26px rgba(0,0,0,.15),inset 0 1px rgba(255,255,255,.18)!important;
  font-size:13px;
  font-weight:700;
  letter-spacing:-.01em;
}
.vav-embroidery-hero__cta.button:hover{background:#171717!important}
.vav-embroidery-hero__cta.button:active{transform:scale(.985)}
.vav-embroidery-hero__cta.button:focus-visible{outline:2px solid #050505;outline-offset:5px}

.site-header{z-index:300!important}

@media(max-width:1100px){
  .vav-embroidery-hero__inner{width:min(100% - 48px,1100px);padding-top:142px}
  .vav-embroidery-hero__stage{width:min(840px,78vw)}
}

@media(max-width:900px){
  body .hero-section.vav-embroidery-hero{
    height:auto!important;
    min-height:620px!important;
    max-height:none!important;
  }
  .vav-embroidery-hero__inner{
    width:100%;
    min-height:620px;
    padding:126px 16px 42px;
    justify-content:center;
  }
  .vav-embroidery-hero__stage{
    width:min(720px,calc(100vw - 26px));
  }
  .vav-embroidery-hero__cta.button{
    width:auto;
    min-width:210px;
    min-height:48px;
    margin-top:24px;
    padding-inline:25px;
    font-size:12px;
  }

  /* The mobile navigation has no menu action, so keep only useful controls. */
  .site-header .nav-shell{
    grid-template-columns:72px minmax(0,1fr)!important;
    padding-left:14px!important;
    padding-right:8px!important;
  }
  .site-header .mobile-menu-button{display:none!important}
  .site-header .nav-shell .logo{
    color:#111!important;
    -webkit-text-fill-color:#111!important;
    mix-blend-mode:normal!important;
    filter:none!important;
    opacity:1!important;
    text-shadow:none!important;
    font-size:28px!important;
    justify-self:start;
    transition:color 180ms ease,-webkit-text-fill-color 180ms ease,text-shadow 180ms ease;
  }
  .site-header .nav-shell.nav-logo-on-dark .logo{
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    text-shadow:0 1px 12px rgba(0,0,0,.18)!important;
  }
  .site-header .mobile-nav-pill{justify-self:end}
}

@media(max-width:620px){
  body .hero-section.vav-embroidery-hero{min-height:570px!important}
  .vav-embroidery-hero__inner{min-height:570px;padding:112px 12px 38px}
  .vav-embroidery-hero__stage{width:calc(100vw - 18px)}
  .vav-embroidery-hero__cta.button{margin-top:22px}
}

@media(prefers-reduced-motion:reduce){
  .vav-embroidery-hero__canvas{display:none!important}
  .vav-embroidery-hero__cta.button{transition:none!important}
}