@import url('https://fonts.googleapis.com/css2?family=Graduate&display=swap');
/* V17 — Mobile-first team garment mockup refinements.
   Preview-only CSS. All original designs, ink choices, and sleeve artwork preserved.
   Applies to five team catalog pages; base garment photos are unchanged. */

/* Use proportional placement zones so a design cannot spill over seams or sleeves.
   Each artwork is contained inside a safe chest rectangle without stretching. */
.product-picture{container-type:inline-size}
.product-picture>img.art{
  left:26%!important;top:25%!important;width:48%!important;height:31%!important;
  object-fit:contain!important;object-position:center center!important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.24))!important;
  pointer-events:none!important;
}
.product-picture[data-style=cotton]>img.art{
  left:26%!important;top:26%!important;width:48%!important;height:29%!important;
}
.product-picture[data-style=dryfit]>img.art{
  left:27%!important;top:26%!important;width:46%!important;height:29%!important;
}
.product-picture[data-style=crewneck]>img.art{
  left:27.5%!important;top:26.5%!important;width:45%!important;height:27%!important;
}
.product-picture[data-style=hoodie]>img.art{
  left:29%!important;top:32%!important;width:42%!important;height:22%!important;
}
.product-picture[data-style=women]>img.art{
  left:29%!important;top:25%!important;width:42%!important;height:27%!important;
}
/* Sleeve placements are tailored to the garment silhouette, not the chest.
   Slight tilt and understated shadows suggest fabric application, not a floating icon. */
.product-picture>img.sleeve-art{
  display:block;position:absolute!important;z-index:2;
  top:29%!important;left:81.8%!important;width:7.6%!important;height:8.4%!important;
  object-fit:contain!important;object-position:center center!important;
  transform:rotate(-10deg) skewY(-2deg)!important;transform-origin:50% 50%;
  filter:brightness(.96) drop-shadow(0 1px 1px rgba(0,0,0,.32))!important;
  pointer-events:none!important;
}
.product-picture[data-style=cotton]>img.sleeve-art{
  left:81.8%!important;top:29%!important;width:7.8%!important;height:8.2%!important;
}
.product-picture[data-style=dryfit]>img.sleeve-art{
  left:81.3%!important;top:29%!important;width:7.6%!important;height:8.2%!important;
}
.product-picture[data-style=crewneck]>img.sleeve-art{
  left:82.3%!important;top:36.5%!important;width:7.4%!important;height:8.8%!important;
}
.product-picture[data-style=hoodie]>img.sleeve-art{
  left:82.3%!important;top:37.5%!important;width:7.4%!important;height:8.8%!important;
}
.product-picture[data-style=women]>img.sleeve-art{
  left:79%!important;top:25%!important;width:7.5%!important;height:7.6%!important;
}
.product-picture>img.sleeve-art[hidden]{display:none!important}

/* Athletic name and number previews — compatible with mobile system fonts.
   This is a sports-style visual treatment; not an assertion of the exact AXO font. */
.product-picture .back-print{
  position:absolute!important;z-index:2!important;
  left:19%!important;width:62%!important;top:18.5%!important;
  text-align:center!important;line-height:1!important;
  pointer-events:none!important;overflow-wrap:normal!important;
  transform:perspective(700px) rotateX(2deg);
  transform-origin:top center;
  font-family:'Graduate',Impact,Haettenschweiler,'Arial Narrow Bold','Arial Black',sans-serif!important;
  font-stretch:condensed;font-style:normal;font-weight:900;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.22));
}
.product-picture[data-style=hoodie] .back-print{top:28%!important}
.product-picture[data-style=crewneck] .back-print{top:19.5%!important}
.product-picture[data-style=dryfit] .back-print{top:20%!important}
.product-picture[data-style=women] .back-print{top:19%!important}
.product-picture .back-name{
  font-family:inherit!important;font-size:clamp(15px,5.5cqw,28px)!important;
  font-style:normal!important;font-weight:900!important;
  font-stretch:condensed;line-height:1.05!important;
  letter-spacing:.08em!important;text-transform:uppercase!important;
  white-space:nowrap!important;max-width:100%!important;
  overflow:hidden!important;text-overflow:clip!important;
  color:var(--print-name,#fff)!important;
  -webkit-text-stroke:var(--name-stroke,0px) var(--name-outline,transparent)!important;
  paint-order:stroke fill;
  text-shadow:0 1px 0 rgba(0,0,0,.20), 0 2px 2px rgba(0,0,0,.12);
}
/* Names longer than a jersey-style line get a smaller size instead of wrapping. */
.product-picture .back-name[data-name-length=long]{font-size:clamp(11px,3.9cqw,19px)!important;letter-spacing:.025em!important}
.product-picture .back-name[data-name-length=medium]{font-size:clamp(13px,4.7cqw,23px)!important;letter-spacing:.055em!important}
.product-picture .back-number{
  display:block;font-family:inherit!important;
  font-size:clamp(64px,25cqw,135px)!important;
  font-style:normal!important;font-weight:900!important;
  font-stretch:condensed;line-height:.92!important;
  letter-spacing:-.012em!important;
  color:var(--print-number,#fff)!important;
  -webkit-text-stroke:var(--number-stroke,0px) var(--number-outline,transparent)!important;
  paint-order:stroke fill;
  transform:scaleX(.87) skewX(-2deg);
  transform-origin:top center;
  text-shadow:0 1px 0 rgba(255,255,255,.05),0 2px 2px rgba(0,0,0,.18);
}
.product-picture .back-number[data-digit-length=three]{font-size:clamp(50px,19cqw,110px)!important;letter-spacing:-.025em!important}
.product-picture .back-number[data-digit-length=one]{font-size:clamp(70px,27cqw,140px)!important}
.product-picture .back-name[hidden],.product-picture .back-number[hidden]{display:none!important}