/* 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_HERO_EMBROIDERY_REST.webp');
}
#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(910px,64vw);
  aspect-ratio:910/440;
  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;
}
.vav-embroidery-hero__canvas{
  z-index:2;
  pointer-events:none;
}

.vav-embroidery-hero__cta.button{
  position:relative;
  z-index:4;
  width:262px;
  min-height:56px;
  margin-top:10px;
  padding:0 24px;
  justify-content:space-between;
  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__canvas{display:none!important}
  .vav-embroidery-hero__cta.button{
    width:min(258px,82vw);
    min-height:52px;
    margin-top:24px;
    padding-inline:20px;
    font-size:12px;
  }
}

@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),(hover:none),(pointer:coarse){
  .vav-embroidery-hero__canvas{display:none!important}
  .vav-embroidery-hero__cta.button{transition:none!important}
}