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;}}
[{<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.
[{<div class=copy>
<h1>HERE COMES<br>SUMMER</h1>
<p>Prepare for sunny days & playdates<br>
with warm-weather essentials</p>
<span class=button secondary>Shop Kids</span>
</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; 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);}
.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; margin-block: 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; overflow-x: auto;} .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);} @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);}}
.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;}
.radio-tabs fieldset label[for=whatshot]::after {content: 'What’s Hot';} </style>
}]
[{
<fieldset>
<label for=category tabindex=0>SHOP BY CATEGORY
<input type=radio id=category name=categoryage value=category checked>
</label>
<label for=age tabindex=0>SHOP BY AGE
<input type=radio id=age name=categoryage value=age />
</label>
</fieldset>
<style>
.radio-tabs:has(input#category:checked) .content-carousel-wrapper:not(:has([aria-labelledby="shop-by-category"])) {display: none;}
.radio-tabs:has(input#age:checked) .content-carousel-wrapper:not(:has([aria-labelledby="shop-by-age"])) {display: none;}
.radio-tabs fieldset label[for=category]::after {content: 'SHOP BY CATEGORY';}
.radio-tabs fieldset label[for=age]::after {content: 'SHOP BY AGE';} </style>
}]
a[title="Kids potty trainers"] .slide-copy {display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;inset: 50% 0 10% 0;}
a[title="Kids potty trainers"] .slide-copy p {font-size: clamp(1.2rem, 1rem + 2.4vw, 3rem);margin: 0;}
a[title="Kids potty trainers"] img[alt="Hanes"] {max-width: 70%;margin-inline:auto; margin-block-end: .5em;}
a[title="Kids potty trainers"] img[alt="potty trainers"] {max-width: 90%;margin-inline:auto; margin-block-end: .5em;}
a[title="Kids potty trainers"] .button {margin-block-end: 0;}
@media (width >= 600px) {
a[title="Kids potty trainers"] .slide-copy {inset: 0 auto 0 68%;width: 25%;}
a[title="Kids potty trainers"] .slide-copy p {font-size: clamp(1.2rem, 1rem + .8vw, 3rem);margin: 0;}}
@media (width >= 1800px) {
a[title="Kids potty trainers"] .slide-copy p {font-size: clamp(1.2rem, 1rem + 1.2vw, 3rem);margin: 0;}
a[title="Kids potty trainers"] img[alt="potty trainers"] {max-width: 100%;}
a[title="Kids potty trainers"] img[alt="Hanes"] {max-width: 90%;}}
[aria-labelledby="kids-protective-underwear"] [data-slide-index="0"] p:nth-child(3) picture:nth-child(2) {display: none;}
[aria-labelledby="kids-protective-underwear"] [data-slide-index="0"] .slide-copy {text-align: center;padding: 15% 1em 2em}
[aria-labelledby="kids-protective-underwear"] [data-slide-index="0"] [alt="comfort, period. Period Underwear"] {max-width: 85%;margin: 0 auto 1.5em;}
[aria-labelledby="kids-protective-underwear"] [data-slide-index="0"] p {font-size: clamp(1.2rem, 1.2rem + 1.2vw, 3rem);line-height: 1.2;margin: 0 0 1em;}
[aria-labelledby="kids-protective-underwear"] [data-slide-index="0"] p strong {font-size: 125%;line-height: 1.4;display: block;text-transform: uppercase;max-width: 18ch;margin: .2lh auto;font-weight: 900;}
[aria-labelledby="kids-protective-underwear"] [data-slide-index="0"] .ctas {display: flex;gap: 1em;justify-content: center;}
[aria-labelledby="kids-protective-underwear"] [data-slide-index="0"] .button {margin: 0;}
@media (width >= 600px) {
[aria-labelledby="kids-protective-underwear"] [data-slide-index="0"] p {font-size: clamp(1.2rem, 1rem + 0.8vw, 3rem); margin: 0;}
[aria-labelledby="kids-protective-underwear"] [data-slide-index="0"] p:nth-child(3) picture:nth-child(2) {display: block;}
[aria-labelledby="kids-protective-underwear"] [data-slide-index="0"] p:nth-child(3) picture:nth-child(1) {display: none;}
[aria-labelledby="kids-protective-underwear"] [data-slide-index="0"] .slide-copy {display: grid;grid-template-columns: 1fr 1fr 1.3fr;align-items: center;padding: 1em;text-align: left;}
[aria-labelledby="kids-protective-underwear"] [data-slide-index="0"] p:has(.ctas) {display: contents;}
[aria-labelledby="kids-protective-underwear"] [data-slide-index="0"] p strong {grid-column: 1;font-size: 100%;margin-inline: 0;}
[aria-labelledby="kids-protective-underwear"] [data-slide-index="0"] [alt="comfort, period. Period Underwear"] {margin: 0 auto;}
[aria-labelledby="kids-protective-underwear"] [data-slide-index="0"] p:nth-child(2) {grid-area: 1/1/ span 3/1;margin: 0;}
[aria-labelledby="kids-protective-underwear"] [data-slide-index="0"] p:nth-child(3) {grid-area: 1/2/ span 3/2;}
[aria-labelledby="kids-protective-underwear"] [data-slide-index="0"] p:nth-child(1) {grid-area: 1/3/1/3;height: max-content;margin: auto 0 0;}
[aria-labelledby="kids-protective-underwear"] [data-slide-index="0"] p:nth-child(4) {text-align: center;grid-area: 2/3/2/3;height: max-content;margin-block: 1em;}
[aria-labelledby="kids-protective-underwear"] [data-slide-index="0"] .ctas {grid-area: 3/3/3/3;align-self: start;}}
@media (width >= 1000px) {
[aria-labelledby="kids-protective-underwear"] [data-slide-index="0"] p:nth-child(2) {font-size: clamp(1.2rem, 1rem + 1.4vw, 3rem);margin: 12% 0 0 5%;}
[aria-labelledby="kids-protective-underwear"] [data-slide-index="0"] p:nth-child(4) {font-size: clamp(1.2rem, 1rem + .6vw, 2rem);}}
@media (width >= 1200px) {
[aria-labelledby="kids-protective-underwear"] [data-slide-index="0"] .slide-copy {grid-template-columns: 1fr 1.3fr 1fr;grid-auto-rows;grid-template-rows: 2fr 1fr 2fr;}}
@media (width >= 1800px) {
[aria-labelledby="kids-protective-underwear"] [data-slide-index="0"] p:nth-child(2) {font-size: clamp(1.2rem, 1rem + 1.8vw, 4.4rem);}
[aria-labelledby="kids-protective-underwear"] [data-slide-index="0"] p:nth-child(4) {font-size: clamp(1.2rem, 1rem + 1vw, 2.4rem);}
[aria-labelledby="kids-protective-underwear"] [data-slide-index="0"] .ctas {gap: 2em;}}