.svg-defs{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
[data-colorway=black]{
  --fabric:#1b1b19;
  --seam:#3a3934;
  --ink:#efeee9;
  --cord:#efeee9;
  --aglet:#8c8b84
}
[data-colorway=bone]{
  --fabric:#d8d1c1;
  --seam:#a69e8b;
  --ink:#151511;
  --cord:#151511;
  --aglet:#6b675c
}
[data-colorway=amber]{
  --fabric:#e2a843;
  --seam:#a87a2c;
  --ink:#11110d;
  --cord:#11110d;
  --aglet:#5a4520
}
[data-colorway=charcoal]{
  --fabric:#3c3c38;
  --seam:#5a5a53;
  --ink:#efeee9;
  --cord:#d8d1c1;
  --aglet:#8c8b84
}
[data-colorway=olive]{
  --fabric:#4b4e37;
  --seam:#6c7051;
  --ink:#ebe6d0;
  --cord:#ebe6d0;
  --aglet:#8c8b74
}
.swatch[data-color=black]{
  background:#1b1b19
}
.swatch[data-color=bone]{
  background:#d8d1c1
}
.swatch[data-color=amber]{
  background:#e2a843
}
.swatch[data-color=charcoal]{
  background:#3c3c38
}
.swatch[data-color=olive]{
  background:#4b4e37
}

/* Hoodie drawing */
.hoodie-art{
  display:block;
  width:100%;
  height:auto;
  overflow:visible
}
.h-body{
  fill:var(--fabric);
  transition:fill .45s var(--ease)
}
.h-sheen{
  fill:url(#hoodie-sheen)
}
.h-floor{
  fill:url(#hoodie-floor)
}
.h-rib{
  fill:url(#hoodie-rib)
}
.h-inner{
  fill:#000;
  fill-opacity:.45
}
.h-shade{
  fill:#000;
  fill-opacity:.2
}
.h-seam{
  fill:none;
  stroke:var(--seam);
  stroke-width:1.4;
  stroke-linecap:round;
  transition:stroke .45s var(--ease)
}
.h-stitch{
  fill:none;
  stroke:var(--seam);
  stroke-width:1;
  stroke-dasharray:3 2.5;
  transition:stroke .45s var(--ease)
}
.h-fold{
  fill:none;
  stroke:#000;
  stroke-opacity:.2;
  stroke-width:1.6;
  stroke-linecap:round
}
.h-pocket{
  fill:#000;
  fill-opacity:.07;
  stroke:var(--seam);
  stroke-width:1.4;
  stroke-linejoin:round;
  transition:stroke .45s var(--ease)
}
.h-cord{
  fill:none;
  stroke:var(--cord);
  stroke-width:2.6;
  stroke-linecap:round
}
.h-aglet{
  stroke:var(--aglet);
  stroke-width:3.6;
  stroke-linecap:round
}
.h-eyelet{
  fill:var(--fabric);
  stroke:var(--aglet);
  stroke-width:1.6
}
.h-ink{
  fill:var(--ink);
  transition:fill .45s var(--ease)
}
.h-accent{
  fill:var(--amber)
}
.h-patch-ring{
  fill:none;
  stroke:var(--seam);
  stroke-width:2;
  stroke-dasharray:2 2
}
.print-type{
  font-family:var(--font);
  font-weight:800
}
.print-mono{
  font-family:var(--mono);
  font-size:6.5px;
  letter-spacing:.1em
}
.motion-enabled .hoodie-art:not([hidden]){
  animation:art-in .5s var(--ease)
}
@keyframes art-in{
  from{
    opacity:0;
    transform:translateY(10px) scale(.98)
  }
  to{
    opacity:1;
    transform:none
  }
}

/* Shared controls */
.view-toggle{
  display:flex;
  border:1px solid #3a3933
}
.view-toggle button{
  border:0;
  background:none;
  padding:8px 12px;
  font:.6rem var(--mono);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  min-height:34px;
  transition:background .2s,color .2s
}
.view-toggle button+button{
  border-left:1px solid #3a3933
}
.view-toggle button[aria-pressed=true]{
  background:var(--text);
  color:#080808
}
.view-toggle button:hover:not([aria-pressed=true]){
  color:var(--text)
}
.swatches{
  display:flex;
  gap:10px
}
.swatch{
  width:30px;
  height:30px;
  border-radius:50%;
  border:1px solid #ffffff2b;
  padding:0;
  position:relative;
  transition:transform .2s var(--ease)
}
.swatch:hover{
  transform:scale(1.08)
}
.swatch:after{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:1px solid transparent;
  transition:border-color .2s
}
.swatch[aria-pressed=true]:after{
  border-color:var(--amber)
}

/* Hero */
.merch-hero{
  display:grid;
  grid-template-columns:1fr 1.08fr;
  gap:70px;
  align-items:center;
  padding-block:70px 110px
}
.merch-copy,.merch-stage{
  min-width:0
}
.merch-copy>.eyebrow{
  color:#c9c8c0;
  margin-bottom:32px
}
.merch-hero h1{
  font-size:clamp(4rem,7.4vw,7.2rem);
  line-height:.93;
  font-weight:800;
  letter-spacing:-.074em;
  margin:0 0 30px
}
.merch-hero h1 em{
  font-style:normal;
  color:var(--amber)
}
.merch-lead{
  font-size:1.06rem;
  line-height:1.7;
  max-width:440px;
  color:#b3b2aa;
  margin:0
}
.buy-box{
  margin-top:40px;
  border-top:1px solid var(--line);
  max-width:520px
}
.buy-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px 0;
  border-bottom:1px solid var(--line)
}
.buy-label,.option-name{
  font:.65rem var(--mono);
  letter-spacing:.06em;
  color:var(--muted);
  text-transform:uppercase
}
.buy-label>span,.option-name>span{
  color:var(--text)
}
.buy-row>div:first-child{
  display:flex;
  flex-direction:column;
  gap:8px
}
.buy-price{
  font-size:2rem;
  font-weight:600;
  letter-spacing:-.04em
}
.drop-tag{
  font:.57rem var(--mono);
  letter-spacing:.06em;
  color:var(--amber);
  border:1px solid #6a5330;
  padding:8px 11px
}
.sizes{
  display:flex;
  gap:6px
}
.sizes button{
  min-width:44px;
  min-height:40px;
  padding:0 10px;
  border:1px solid #3a3933;
  background:none;
  font:.7rem var(--mono);
  color:#c9c8c0;
  transition:background .2s,color .2s,border-color .2s
}
.sizes button:hover{
  border-color:#77756b
}
.sizes button[aria-pressed=true]{
  background:var(--text);
  border-color:var(--text);
  color:#080808
}
.merch-actions{
  display:flex;
  align-items:center;
  gap:25px;
  margin-top:30px
}
.merch-stage{
  position:relative;
  background:#0c0c0b;
  border:1px solid var(--line);
  padding:20px 26px 24px;
  isolation:isolate
}
.merch-stage:before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(circle at 50% 45%,#000 30%,transparent 78%)
}
.stage-bar,.card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font:.6rem var(--mono);
  letter-spacing:.06em;
  color:#87867c
}
.stage-art{
  position:relative;
  width:min(100%,480px);
  margin:26px auto 8px
}
.pins{
  position:absolute;
  inset:0;
  pointer-events:none
}
.pin{
  position:absolute;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--amber);
  color:#080808;
  font:.55rem var(--mono);
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 2px #080808,0 0 0 7px #edb34d38;
  transition:transform .25s var(--ease),box-shadow .25s
}
.pin-1{
  left:66%;
  top:12%
}
.pin-2{
  left:65%;
  top:54%
}
.pin-3{
  left:59%;
  top:76%
}
.pin-4{
  left:15%;
  top:87%
}
.spec-legend{
  list-style:none;
  margin:18px 0 0;
  padding:18px 0 0;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 24px;
  font-size:.82rem;
  color:#c9c8c0
}
.spec-legend li{
  display:flex;
  align-items:center;
  gap:12px;
  cursor:default;
  transition:color .2s
}
.spec-legend li>span{
  font:.58rem var(--mono);
  color:var(--amber)
}
.spec-legend li:hover{
  color:var(--text)
}
.merch-stage:has(.legend-1:hover) .pin-1,.merch-stage:has(.legend-2:hover) .pin-2,.merch-stage:has(.legend-3:hover) .pin-3,.merch-stage:has(.legend-4:hover) .pin-4{
  transform:translate(-50%,-50%) scale(1.25);
  box-shadow:0 0 0 2px #080808,0 0 0 11px #edb34d48
}

/* Lineup */
.lineup-section{
  padding-block:115px;
  border-top:1px solid var(--line)
}
.lineup{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:65px
}
.product-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  background:#0c0c0b;
  border:1px solid var(--line);
  transition:border-color .3s,transform .4s var(--ease)
}
.product-card:hover{
  border-color:#4c4b44
}
.card-top{
  padding:12px 12px 12px 18px;
  border-bottom:1px solid var(--line)
}
.card-art{
  padding:34px 34px 20px;
  background:radial-gradient(circle at 50% 42%,#1c1c19,#0c0c0b 72%)
}
.card-body{
  display:flex;
  flex-direction:column;
  gap:16px;
  flex:1;
  padding:22px 22px 0;
  border-top:1px solid var(--line)
}
.card-title{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px
}
.card-title h3{
  font-size:1.55rem;
  font-weight:600;
  letter-spacing:-.045em;
  margin:0
}
.card-title strong{
  font-size:1.15rem;
  font-weight:500;
  color:#dedcd2
}
.card-body>p{
  margin:0;
  font-size:.9rem;
  line-height:1.65;
  color:var(--muted)
}
.card-options{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-top:4px
}
.patch-picker{
  display:flex;
  flex-direction:column;
  gap:10px;
  border-top:1px solid var(--line);
  padding-top:14px
}
.patches{
  display:flex;
  flex-wrap:wrap;
  gap:6px
}
.patches button{
  width:44px;
  height:44px;
  padding:4px;
  border:1px solid #3a3933;
  border-radius:50%;
  background:none;
  transition:border-color .2s,transform .2s var(--ease)
}
.patches button:hover{
  transform:translateY(-2px)
}
.patches button[aria-pressed=true]{
  border-color:var(--amber)
}
.patches img{
  width:100%;
  height:100%;
  border-radius:50%
}
.card-link{
  display:flex;
  justify-content:space-between;
  margin-top:auto;
  padding:18px 0 20px;
  border-top:1px solid var(--line);
  font-size:.85rem;
  font-weight:600
}
.card-link>span{
  display:inline-block;
  color:var(--amber);
  transition:transform .25s
}
.card-link:hover{
  color:var(--amber)
}
.card-link:hover>span{
  transform:translate(3px,-3px)
}

/* Details */
.details-section{
  border-top:1px solid var(--line);
  background:#0a0a09;
  padding-block:110px
}
.detail-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:65px;
  border-top:1px solid var(--line)
}
.detail{
  padding:30px 28px 26px 0
}
.detail+.detail{
  padding-left:28px;
  border-left:1px solid var(--line)
}
.detail-number{
  display:block;
  font:.62rem var(--mono);
  color:var(--amber);
  margin-bottom:28px
}
.detail h3{
  font-size:1.3rem;
  font-weight:600;
  letter-spacing:-.035em;
  margin:0 0 12px
}
.detail p{
  margin:0;
  font-size:.9rem;
  line-height:1.7;
  color:var(--muted)
}
.size-guide{
  margin-top:60px;
  border-block:1px solid var(--line)
}
.size-guide summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding:24px 0;
  cursor:pointer;
  list-style:none;
  font-size:1rem
}
.size-guide summary::-webkit-details-marker{
  display:none
}
.size-guide summary>span{
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap
}
.size-guide summary .eyebrow{
  margin:0;
  color:var(--amber)
}
.size-guide summary:after{
  content:'+';
  color:var(--amber);
  font-size:22px;
  transition:transform .25s
}
.size-guide[open] summary:after{
  transform:rotate(45deg)
}
.size-table-wrap{
  overflow-x:auto
}
.size-table{
  width:100%;
  min-width:480px;
  border-collapse:collapse;
  font:.75rem var(--mono)
}
.size-table th,.size-table td{
  padding:14px 12px;
  text-align:left;
  border-top:1px solid var(--line);
  font-weight:400
}
.size-table thead th{
  color:var(--muted);
  border-top:0
}
.size-table tbody th{
  color:var(--muted)
}
.size-note{
  font:.62rem var(--mono);
  color:#87867c;
  margin:6px 0 24px
}

@media(max-width:1150px){
  .merch-hero{
    gap:40px
  }
  .merch-hero h1{
    font-size:7.4vw
  }
  .merch-actions{
    flex-wrap:wrap;
    gap:18px
  }
  .lineup{
    grid-template-columns:repeat(2,1fr)
  }
  .detail-grid{
    grid-template-columns:repeat(2,1fr)
  }
  .detail:nth-child(3){
    padding-left:0;
    border-left:0
  }
  .detail:nth-child(n+3){
    border-top:1px solid var(--line);
    margin-top:20px
  }
}
@media(max-width:760px){
  .merch-hero{
    grid-template-columns:1fr;
    padding-block:40px 70px;
    gap:50px
  }
  .merch-copy>.eyebrow{
    font-size:.62rem;
    margin-bottom:24px
  }
  .merch-hero h1{
    font-size:clamp(3rem,15vw,5.4rem);
    margin-bottom:22px
  }
  .merch-lead{
    font-size:1rem
  }
  .buy-row{
    flex-wrap:wrap
  }
  .sizes button{
    min-width:42px;
    padding:0 8px
  }
  .merch-stage{
    padding:16px 16px 20px
  }
  .stage-bar{
    font-size:.52rem
  }
  .pin{
    width:24px;
    height:24px;
    font-size:.48rem
  }
  .spec-legend{
    font-size:.78rem;
    gap:10px 16px
  }
  .lineup-section{
    padding-block:70px
  }
  .lineup{
    grid-template-columns:1fr;
    margin-top:34px;
    max-width:500px;
    margin-inline:auto
  }
  .details-section{
    padding-block:70px
  }
  .detail-grid{
    grid-template-columns:1fr;
    margin-top:34px
  }
  .detail,.detail+.detail,.detail:nth-child(3){
    padding:24px 0 22px;
    padding-left:0;
    border-left:0;
    margin-top:0
  }
  .detail+.detail{
    border-top:1px solid var(--line)
  }
  .detail-number{
    margin-bottom:18px
  }
  .size-guide{
    margin-top:40px
  }
  .size-guide summary{
    font-size:.92rem
  }
}
@media(max-width:360px){
  .spec-legend{
    grid-template-columns:1fr
  }
  .swatches{
    gap:8px
  }
}