h3#makeyourselfcomfortable {margin: 0;font-weight: var(--fw-black);font-size: clamp(2rem, calc(2rem + 1vw), 4rem);}
h3#makeyourselfcomfortable + p {font-weight: var(--fw-medium);font-size: clamp(1.2rem, calc(1.2rem + 1vw), 1.8rem);}
.section.style-tag-container {padding: 0;margin: 0;}
main > .section.quick-links-bar-container {margin: 0;padding: 0;}.quick-links-bar ul {padding: 0;}@media (width > 900px) {.tabs-wrapper, .columns-scroll-container {--content-max-width: 94%;inline-size: var(--content-max-width);margin-inline: auto;}}h2 strong { font-weight: bold; }dialog.details-modal { line-height: var(--body-font-line-height);}
:where(.bestsellers, .whats-hot).content-carousel[class*="slide-count"].aspect-ratio-unset .slide-img :where(picture, img) {aspect-ratio: 3/3.6;} :where(.bestsellers, .whats-hot) .slide-copy {padding-block-start: .25em;} :where(.bestsellers, .whats-hot) .slide-copy sup {font-size: 55%;} .content-block.overlay:not(:has(> a)), .content-block.overlay > a {display: block;} .target-recos.content-carousel .carousel-slides-wrapper {margin-block-start: 1em;} .target-recos.content-carousel .heading-wrapper {padding-inline: 0;} .content-carousel .heading-wrapper {margin-block-start: 1em;}
.target-recos.content-carousel .heading-wrapper h2 {padding-inline: var(--outter-gutter);} main > .section > div.content-carousel-wrapper {--content-max-width:100%;}
.section.content-carousel-container {padding-inline: 0;} .carousel-slide .slide-copy strong, .carousel-slide .slide-copy > p strong {font-size: 130%; margin-block-end: .7em; font-weight: 900; display: block; min-height: 2lh; text-transform: uppercase;} .carousel-slide .slide-copy strong sup, .carousel-slide .slide-copy > p strong sup {font-size: 55%;} .content-carousel.slide-count-3 .carousel-slides-wrapper {--peek: 0.125;}
@media (width <= 599px) {.carousel-fallback-nav button,.content-carousel .carousel-slides-wrapper::scroll-button(left),.content-carousel .carousel-slides-wrapper::scroll-button(right) {
background: url('data:image/svg+xml,<svg width="12" height="21" viewBox="0 0 12 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.71484 1.94455L9.94342 10.5001L1.71484 19.0557" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>') 55% 50% / 20% no-repeat, radial-gradient(#fff 40%, black 45%, transparent 48%);border: none;}}
.details-align-top button.details-icon {place-content: start;} .details-align-top .details-icon::after {mask-position: 0% 10%;}
@media (width >= 600px) {
main > .section > div.content-carousel-wrapper:not(:has(.full-bleed)) {--content-max-width: 94%; margin-inline: auto;}
.content-carousel[class*="slide-count"] .carousel-slide {flex-grow: 1;} main > .section > div.content-carousel-wrapper:not(:has(.full-bleed)) ul {--content-max-width: 100%;}
.content-block.overlay-lg:not(:has(> a)), .content-block.overlay-lg > a {display: block;} }
@media (width <=900px) {.details-icon::after {mask-position: 50% 45%;}}
@media (width >= 900px), (min-width: 900px) {
main > :is(.section.full, .section.full-bleed, .section.hero, .section.fragment-container) > div, main > .section:has(.full, .full-bleed, .hero, .block.full-bleed) > div {margin:0;}} main > .section {@media (width >= 900px), (min-width: 900px) {margin-block-end:1em;}}
@media (width >= 1200px) {
.target-recos.content-carousel .heading-wrapper h2 {padding-inline: 0;} .target-recos.content-carousel .carousel-slides-wrapper {padding-inline: 0;}
.target-recos.content-carousel {padding-inline: 1em;} .content-carousel .heading-wrapper {padding-inline: 0;}
.carousel-slide .slide-copy, .carousel-slide .slide-copy > p {font-size: clamp(1.2rem, .7rem + 0.5vw, 1.8rem);}
main > .section > div.content-carousel-wrapper:not(:has(.full-bleed)) ul {padding-inline: 0;}}
@media (width >= 1800px) {
[class*="content"]:not(.default-content-wrapper) :where(.button, button) {scale: 1.2; transform-origin: top;} [class*="content"]:not(.default-content-wrapper) .slide-copy :where(.button, button) {scale: 1.2; transform-origin: top left;} [class*="content"]:not(.default-content-wrapper) :where(button:not(.close)) {transform-origin: left;}}
HAPPY CINCO DE MAYO!
FREE SHIPPING with Hanes Rewards Today Only ¡
[{<span class=button primary>Sign In/Up</span>
<style> .cinco-bnr {--button-primary-background: #FED444;--button-primary-color: black;} .cinco-bnr .block-copy img {display: none;} .cinco-bnr .block-copy {padding: 0;margin-block: auto 0;height: max-content;} .cinco-bnr .block-copy :where(h1, p) {color: white;} .cinco-bnr h1 {font-weight: 900;margin: 0;line-height: 1.2;} .cinco-bnr h1 u {text-decoration: none;display: block;font-size: 55%;font-weight: 600;} .cinco-bnr p {font-size: clamp(1rem, 1rem + .45vw, 2rem);margin-inline-start: 1em;position: relative;} .cinco-bnr p button {margin-inline-start: -.8em;} .cinco-bnr p strong {font-weight: 900;} @media (width >= 375px) {.cinco-bnr .block-copy {margin-block: auto 1em;}} @media (width >= 600px) { .cinco-bnr .desktop-img img{min-height:10em;} .cinco-bnr .block-copy {margin-block: auto;width: max-content;margin-inline: auto;} .cinco-bnr .button {margin-block-end: 0;}} @media (width >= 900px) {.cinco-bnr h1 {font-size: clamp(2rem, 3rem + 2vw, 5rem);line-height: 1;} .cinco-bnr h1 u {letter-spacing: .3em;} .cinco-bnr p {line-height: 1.4;font-size: clamp(1.2rem, 1rem + .75vw, 2rem);margin-inline-start: 1.2em;} .cinco-bnr p button {margin-inline-start: 0;}} @media (width >= 1200px) {.cinco-bnr .block-copy img {display: block;position: absolute;translate: 32% 50%;width: 11%;right: 0;} .cinco-bnr h1 {font-size: clamp(2rem, 4.2rem + 2vw, 8rem);} .cinco-bnr p {font-size: clamp(1.2rem, 1.2rem + 1vw, 2.2rem);}} @media (width >= 1800px) {.cinco-bnr h1 {font-size: clamp(2rem, 3rem + 3.6vw, 10.6rem);} .cinco-bnr p {font-size: clamp(1.2rem, 1.4rem + 1vw, 3.6rem); margin-inline-start: 0.6em;}} </style>}]
Ship Free With Hanes Rewards
Get free standard shipping when you sign up or log in to your Hanes Rewards account. Joining Hanes Rewards is free and easy. Standard shipping rates apply to guests. Returns are always free for members and guests. For U.S. delivery addresses only. Offer valid 5/5/26.
[{<h1><span class=small>— A MOTHER OF A DEAL —</span> EXTRA 20% OFF
<span>SITEWIDE ¡</span> </h1>}]
[{<style>.mothers-deal {background: #ccd1fa;} .mothers-deal h1 {font-weight: 900;line-height: 1;margin: 0;} .mothers-deal h1 span {display: block;} .mothers-deal h1 .small {font-size: 50%;font-weight: 400;line-height: 1.8;} .mothers-deal h1 span:has(button) {margin-inline-start: 15px;} .mothers-deal h1 span button {margin-inline-start: -15px;} .mothers-deal .block-copy {position: relative;padding: 1em;} .mothers-deal .block-copy p > picture {position: absolute;} .mothers-deal .block-copy p > picture:nth-child(1) {top: 1%;right: 0;width: 17%;} .mothers-deal .block-copy p > picture:nth-child(2) {bottom: 4px;left: 0;width: 20%;} @media (width >= 600px) {.mothers-deal .block-copy p > picture {display: none;} .mothers-deal .block-copy {position: absolute;padding: 1em;width: 53%;margin-inline-start: auto;display: grid;place-content: center;} .mothers-deal h1 span:has(button) {margin-inline-start: 10px;display: flex;justify-content: center;} .mothers-deal .details-icon::after {-webkit-mask-position-y: 25%;} .mothers-deal h1 span button {margin-inline-start: 0;place-content: start;} .mothers-deal .block-copy {padding-block-start: 2em;} .mothers-deal h1 .small {font-size: 40%;} .mothers-deal h1 {font-size: clamp(2rem, 2.8rem + 2.4vw, 8rem);}} @media (width >= 1800px) {.mothers-deal h1 {font-size: clamp(2rem, 4rem + 2.4vw, 10rem); line-height: 1;}.mothers-deal h1 span button {height: auto;align-content: start;} .mothers-deal .details-icon::after {-webkit-mask-position-y: 70%;}}</style>}]
EXTRA 20% OFF SITEWIDE
Discount reflected at checkout. No code needed. Offer valid 5/7/26 through 5/12/26 at 11:59 pm EST.
[{<h1><span class=small>RED, WHITE & BLUE,</span><span class=red>FREE SHIPPING</span>FOR YOU ¡</h1>
<p>No Minimum or Hanes Rewards Account Required.</p>
<style>.rgb-shipping {padding-block: 0 1em; color: white;background: linear-gradient(90deg, #2b2b7b 40%, #1e1b4c);text-align: center;}.rgb-shipping h1 {font-size: clamp(2rem, 3rem + 2vw, 4rem);font-weight: 700;line-height: 1;margin: 0 0 0.1em;}.rgb-shipping h1 .small {font-weight: 900;display: block;letter-spacing: .15em;font-size: 42%;line-height: 1.4;}.rgb-shipping h1 .red {display: block;font-weight: 900;color: #DA291C;font-size: 110%; -webkit-text-stroke: 3px white; paint-order: stroke fill;}@media (width >= 600px) {.rgb-shipping {background: linear-gradient(90deg, #2b2b7b 65%, #1e1b4c 85%);}}@media (width >= 1200px) {.rgb-shipping p {font-size: clamp(1.4rem, .8rem + .4vw, 2rem);}.rgb-shipping h1 .red {display: inline-block;margin-inline-end: .3em; font-size: 100%;}.rgb-shipping h1 {font-size: clamp(2rem, 3rem + 2vw, 6rem);}.rgb-shipping h1 .small {font-size: 48%;}}@media (width >= 1800px) {.rgb-shipping h1 {font-size: clamp(2rem, 4rem + 2vw, 9rem);}.rgb-shipping h1 .small {margin-block-end:.3em;}.rgb-shipping button {margin-block-end: -.3em}} </style>}]
Everything Ships Free
Get free standard shipping on your order. No minimum qualifier, code, or Hanes Rewards account required. For U.S. delivery addresses only. Offer valid 5/20/26 through 5/26/26 at 11:59 pm EST.
Trending this SPRING Comfy, colorful bestsellers
you’ll wear on repeat.
BUY 3 + GET 20% OFF ¡
[{<span class=button primary>SHOP NOW</span>}]
TEES, SHORTS & MORE BUY 3+ GET 20% OFF
To receive an additional 20% off, place 3 or more activewear items in your shopping cart, selecting size and color for each. Select styles, excludes Clearance. You may mix and match men, women, unisex, and kids. Discount reflected at checkout. No code needed. For U.S. delivery addresses only.
.trending-spring {margin-block-end: 1em;}.trending-spring .block-copy {background: #D8F4FF;max-width: 90%;margin: auto;border-radius: 50%;aspect-ratio: 1;border: 2px solid black;text-align: center;display: flex;flex-flow: column;align-items: center;justify-content: center;padding-block: 1em 0.3em;}
.trending-spring .block-copy h1 {font-size: clamp(1.2rem, 0.9rem + 1vw, 3rem);margin: 0;}
.trending-spring .block-copy h1 strong {display: block;font-size: 400%;line-height: 0.9;}
.trending-spring .block-copy h1::after {content: '';display: block;background: var(--text-color);width: .7em;aspect-ratio: 1;border-radius: 50%;margin: 1em auto;}
.trending-spring .block-copy p {font-size: clamp(1.2rem, 1.2rem + 1vw, 4rem);margin: 0;font-weight: bold;line-height: 1;}
.trending-spring .block-copy p strong {display: flex;font-size: 220%;align-items: end;text-indent: 20px;}
.trending-spring .block-copy .button {margin-block-end: 0;}
@media (width >= 380px) {
.trending-spring .block-copy h1 {font-size: clamp(1.2rem, 1.2rem + 1.2vw, 3rem);}
.trending-spring .block-copy p {font-size: clamp(1.2rem, 1.4rem + 1.4vw, 4rem);}}
@media (width >= 600px) {
.trending-spring .block-copy {max-width: 40%;border-width: 4px;}
.trending-spring .block-copy h1 {font-size: clamp(1.2rem, 0.9rem + 0.6vw, 3rem);}
.trending-spring .block-copy p {font-size: clamp(1.2rem, 1rem + 1vw, 4rem);}}
@media (width >= 900px) {
.trending-spring .block-copy h1 {font-size: clamp(1.2rem, 1rem + 1vw, 3rem);}
.trending-spring .block-copy p {font-size: clamp(1.2rem, 1.6rem + 1vw, 4rem);}
.trending-spring .block-copy p strong {align-items: center;}
.trending-spring .details-icon::after {mask-position: 10% 0%;}
.trending-spring .block-copy h1::after{width: 0.3em;}}
@media (width >= 1200px) {
.trending-spring .block-copy h1 {font-size: clamp(1.2rem, 1.2rem + 1.2vw, 3rem);}
.trending-spring .block-copy p {font-size: clamp(1.2rem, 2rem + 1.2vw, 4rem);}
}
@media (width >= 1800px) {
.trending-spring .block-copy h1 {font-size: clamp(1.2rem, 1rem + 2vw, 3.6rem);}
.trending-spring .block-copy p {font-size: clamp(1.2rem, 1.4rem + 2vw, 4.4rem);}}
[{<div class=copy>
<h1>HERE COMES<br>SUMMER</h1>
<p>Get into a sunny state of mind with<br>
lightweight tees, tanks & shorts</p>
<span class=button secondary>shop men</span>
</div>
<div class=promotion><p><strong>20%<br> OFF</strong>3 OR MORE ¡</p></div>
<style>
.comes-summer {overflow: clip;}
.comes-summer .block-copy > p:has(picture) {display: none;}
.comes-summer .block-copy {padding: 0; display: flex;}
.comes-summer .copy {padding: 1em; display: flex ;flex-flow: column; align-items: center; margin-block-start: auto; background: rgb(0 0 0 / .3); color: white; width: 100%;}
.comes-summer .promotion {padding: .25em 2% 1em calc(9% + .5ch); position: absolute; aspect-ratio: 1; background: url(./media_1a01d4539b2d18171d975fde634d2083810e17f84.png?width=750&format=png&optimize=medium) center / 100% no-repeat; display: flex; justify-content: center; align-items: center; top: -1.75em; right: 0; font-weight: 700;line-height: 1.2;font-size: clamp(1.2rem, 1rem + 1vw, 2rem);}
.comes-summer h1 {font-weight: 900; line-height: 1; margin-block: 0 ; font-size: clamp(3rem, 3rem + 2vw, 5rem); text-shadow: 0 3px 0 rgb(0 0 0 / .15);}
.comes-summer .promotion strong {display: block; font-size: 350%; font-weight: 900;line-height: .85; translate: -0.5ch 0;}
.comes-summer .promotion button:after {mask-position: 0% 45%;}
@media (width >= 600px) {
.comes-summer .copy {padding: 1em 3% 0; width: max-content; align-items: end; margin-inline-start: auto;}
.comes-summer h1 {font-size: clamp(3rem, 3rem + 1vw, 5rem);}
.comes-summer .promotion {top:-1.2em;padding: 1.25em 0.5em 2em calc(1.55em + 1ch); font-size: clamp(1.2rem, 1rem + 0.5vw, 2rem);}
.comes-summer .promotion strong {translate: -.8ch 0;}
.comes-summer .promotion strong:first-line {letter-spacing: -.05em;}
}
@media (width >= 900px) {
.comes-summer h1 {font-size: clamp(3rem, 2rem + 1.8vw, 8rem);}
.comes-summer p {font-size: clamp(1.2rem, 1rem + .5vw, 2.2rem);}
.comes-summer .promotion p {font-size: clamp(1.2rem, 1rem + .7vw, 5rem);}
.comes-summer .promotion {padding: 1.25em 1% 2em calc(3% + 0.5ch);translate: 0 -50%;top: 27%; right: 1.5em; font-size: clamp(1.2rem, 1rem + 1vw, 2rem);}
.comes-summer .promotion strong {translate: -0.7ch 0;}
}
@media (width >= 1200px) {
.comes-summer h1 {font-size: clamp(3rem, 3rem + 1.8vw, 8rem);}
.comes-summer p {font-size: clamp(1.2rem, 1rem + .87vw, 2.2rem);}
.comes-summer .promotion p {font-size: clamp(1.2rem, 1.4rem + 1vw, 5rem);}
.comes-summer .promotion {padding: 1.25em 2.5% 2em calc(4.5% + 0.5ch);}
.comes-summer .promotion strong {translate: -0.4ch 0;}
}
@media (width >= 1800px) {
.comes-summer h1 {font-size: clamp(3rem, 4rem + 2vw, 8rem);}
.comes-summer p {font-size: clamp(1.2rem, 1.8rem + 1.4vw, 3rem);}
.comes-summer .promotion p {font-size: clamp(1.2rem, 1.4rem + 1vw, 5rem);}
.comes-summer .promotion {padding: 1.5em 2.5% 2.5em calc(4.5% + 0.5ch);}
.comes-summer .copy {padding-block: 1.75em 2em;}
}
</style>}]
TEES, SHORTS & MORE BUY 3+ GET 20% OFF
To receive an additional 20% off, place 3 or more activewear items in your shopping cart, selecting size and color for each. Select styles, excludes Clearance. You may mix and match men, women, unisex, and kids. Discount reflected at checkout. No code needed. For U.S. delivery addresses only.
[{
<fieldset>
<label for=whatshot tabindex=0>What’s Hot
<input type=radio id=whatshot name=whatshotbestsellers value=style checked>
</label>
<label for=bestsellers tabindex=0>Bestsellers
<input type=radio id=bestsellers name=whatshotbestsellers value=bestsellers />
</label>
</fieldset>
<style>.radio-tabs .block-copy {padding: 0 1em .5em;white-space: nowrap;} .radio-tabs fieldset input {display: none;} .radio-tabs .block-copy fieldset {border-bottom: 4px solid var(--clr-neutral-60);} .radio-tabs fieldset {display: flex;border: none;gap: 0 2em;padding: 0;position: relative;font-size: clamp(1.4rem, 1.4rem + 1vw, 2rem);} .radio-tabs fieldset label {font-weight: 600;color: transparent;position: relative;cursor: pointer;text-transform: uppercase;font-size: var(--heading-font-size-s);padding-block-end: 7px;} .radio-tabs fieldset label::after {content: attr(for);color: var(--text-color-gray);text-transform: capitalize;position: absolute;inset: 0;font-weight: 500;text-transform: uppercase;} .radio-tabs fieldset label:has(input:checked) {color: var(--text-color);text-decoration: underline;text-underline-offset: 12px;text-decoration-thickness: 4px;font-weight: 700;} .radio-tabs fieldset label:has(input:checked)::after {display: none;} main > .section.radio-tabs > div {--content-max-width: 100%;} .radio-tabs .carousel-slide .slide-copy {padding-block-start: .5em;} .radio-tabs .carousel-slide .slide-copy, .radio-tabs .carousel-slide .slide-copy p:not(.promo) {font-weight: 600;font-size: clamp(1.2rem, 0.9rem + 0.5vw, 1.8rem);} .radio-tabs .carousel-slide .promo {font-size: clamp(1rem, 1rem + 0.8vw, 2rem);} .radio-tabs .carousel-slide .slide-copy sup, .radio-tabs .carousel-slide .slide-copy p sup {font-size: 55%;} .radio-tabs {display: grid;grid-template-rows: max-content max-content;grid-template-columns: 1fr;} .radio-tabs .content-block-wrapper {grid-row: 1;width: 100%;} .radio-tabs .content-carousel-wrapper {grid-row: 2;width: 100%;grid-column: 1;} .radio-tabs .carousel-slides-wrapper {background: var(--background-color);} .radio-tabs:has(input#whatshot:checked) .content-carousel-wrapper:not(:has([aria-labelledby="whats-hot"])) {display: none;} .radio-tabs:has(input#bestsellers:checked) .content-carousel-wrapper:not(:has([aria-labelledby="bestsellers"])) {display: none;}
@media (width >= 900px) {main > .section.radio-tabs > div {--content-max-width: 94%;} .radio-tabs .block-copy {padding: 0 0 .5em;}.radio-tabs fieldset label {font-size: var(--heading-font-size-xl);padding-block-end: 5px;} .radio-tabs .carousel-slide .promo {font-size: clamp(1rem, 1rem + 0.7vw, 2.4rem);}}</style>
}]
CUSTOMER FAVORITES
[{
<div class=small-only style="padding:177.78% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/1186304763?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share" referrerpolicy="strict-origin-when-cross-origin" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Hanes Everyday Tee mb"></iframe></div>
<div class=large-only style="padding:56.77% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/1186304761?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share" referrerpolicy="strict-origin-when-cross-origin" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Hanes Everyday Tee DT"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
<a href=/men/collections/everyday-tee class=button secondary>Shop Now <span class=sr-only>Everyday Tee</span></a>
<style>.everyday-tee {margin-block-end: 1em;} .everyday-tee .block-copy {padding: 0;}
.everyday-tee {position: relative; isolation: isolate;}
.everyday-tee .button {position: absolute;inset: auto 50% 12% auto;z-index: calc(infinity + 1);width: max-content;translate: 50% 0;}
.content-block a.button.secondary:is(:hover, :focus-visible) {color: var(--button-secondary-color-hover);}</style>}]
PERFECT
FLEX TEE
[{<p class=small-only> The classic men’s undershirt. Redefined. </p>
<p class=large-only>The classic men’s undershirt. Redefined. <br>
Made for comfort with an ultra-soft, lightweight <br>
modal-spandex blend that moves with you, it has a <br>
body-skimming fit that won’t show under clothes.</p>
<span class=button tertiary>Shop Now</span>}]
.flex-tee .block-copy {padding: 1.5em;background: rgb(0 0 0 / .6);color: white;text-align: center;height: max-content;margin-block-start: auto;}
.flex-tee h3 {font-size: clamp(2rem, 4rem + 3vw, 5.2rem);font-weight: 900;margin: 0 0 0.2em;line-height: 1;}
.flex-tee p {font-size: clamp(1.2rem, 1.3rem + 1vw, 2.2rem);}
.flex-tee .block-copy .button {margin-block-end:0;}
@media (width >= 600px) {.flex-tee .block-copy {display: flex;flex-flow: column;align-items: start;justify-content: center;height: 100%;width: 50%;margin: 0 0 0 auto;text-align: left;padding-inline: 5%;}
.flex-tee h3 {font-size: clamp(2rem, 2rem + 2vw, 5.2rem);}
.flex-tee p {font-size: clamp(1.2rem, .8rem + .4vw, 2rem);}}
@media (width >= 1200px) {.flex-tee p {line-height: 1.4;font-size: clamp(1.2rem, 1.8rem + 1vw, 1.8rem);}
.flex-tee h3 {font-size: clamp(2rem, 4rem + 2.6vw, 8rem);}}
@media (width >= 1800px) {.flex-tee p {font-size: clamp(1.2rem, 2rem + 1vw, 2rem);}
.flex-tee h3 {font-size: clamp(2rem, 5rem + 4vw, 11rem);}
.flex-tee .button {transform-origin: left top;margin-block-start: 2em;}}