@charset "UTF-8";
/* CSS Document */

html{
	font-size:12px;
	line-height:1.4;	
}
a.anchor{
	float:none;	
}
.anchor .center{ 
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	max-height: 65px;
	text-align: center;
}
/*img{
	width:100%;
	height:auto;
}*/	
.bannerCopyWrap {
	position: absolute;
	z-index: 1;
	display: inline-block;
	width: 100px;
	text-align: center;
	top: auto;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	height: 50px;
}


.productBx {
	position: relative;
	display: inline-block;
	margin: 15px;
	vertical-align: top;
	width: 245px;
	min-height: 495px;
	/*min-height:335px;
	aspect-ratio:200/335;*/
}

.indBasePrice {
        position: fixed;
    z-index: 5;
    background-color: white;
    /*height: 100%;
    width: 100%;*/
    width:0;
    height:0;
    top: 0;
    left: 0;
    /*-webkit-transition: width 0.75s, height 0.75s;
    transition: width 0.75s, height 0.75s;*/
}

.indBasebox{
	position: relative;
	/*min-height: 505px;
	width: 47%;*/
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: top;
	text-align: right;
	margin: 1.1% 1.1% 7%;
	display: inline-block;
	max-width: 224px;	
	transition:all 1s linear;
	
}

    .indBasebox .more-pricing {
        cursor: pointer;
        font-size: 0.8rem;
        text-decoration: underline;
        color: blue;
    }

.indBasebox a {
	width: 100%;
	height: 100%;
	display: inline-block;
	float: none;
	font-weight: 400;
	position: relative;	
}

.indBasebox img {
	height: 334px;
	width: 219px;
	padding: 0;
	display: inline-block;
	margin:0;
	position: relative;
	transition:opacity 1s ease-in-out;
	z-index:1;
	/*min-height:335px;*/
	/*aspect-ratio:220/335;*/
}

.indBasebox img:nth-child(2) {
	position: absolute;
	z-index: 0;
	left: 0;
	top: 0;
	display:inline-block;
	opacity:0;
}
.indBasebox .button {
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 50px;
	display: none;
	text-align:center;
	transition:display 1s ease-in-out;
	width:100%;
	max-width:85%;	
	z-index:1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.colorbox {
	width: 15px;
	display: inline-block;
	height: 15px;
	margin: .2%;
	overflow: hidden;
	box-shadow: 0 0 2px -1px black;
	border-radius: 2px;
}

.colorbox input[type=image]{
	width:100%;	
	height:auto;
	cursor:default;
	float:left;
}
.height13{
	height:1rem;
}

.copyWrapper {
	margin: 0px auto;
	text-align: center;
	width: 97%;
	/*max-width:800px;*/
	clear: both;
	position: relative;
}
	.copyWrapper .promoContent {
		/*width:80%;*/
		margin:auto;
	}
#no-resultpromoCopy {
	margin: 10% auto;
	text-align: center;
	width: 97%;
	max-width: 800px;
	min-height: 350px;
}
/*.pageHead h1 {
	text-align: center;
	font-size:50px;
	font-size:3.125rem;
	line-height:1.2;
	margin:1rem 0;
}*/

h2{
	font-size: 40px;
	font-size:2.5rem;
	text-align: inherit;
	color:inherit;
	margin:1rem 0;
	line-height:1.3;	
}

p{
	font-size: 20px;
	font-size:1.25rem;
	line-height:1.45;
	color:#222;
	margin:1rem 0 0;
	font-weight:200;
	text-align:center;
	max-width:90%;
}

/*b{
	font-weight:300;	
}*/

.baseName,
.colorList,
.sizeOptions,
.priceRange,
.productAvail {
	width: 100%;
	overflow: hidden;
	text-align: left;
	margin: 5px 0;
	/*padding: 1px;*/
	font-size: .75rem;
}

.in-stock-avail {
	color: #6cae06;
	font-weight: bold;
}

.priceRange {
}

.baseName{
	font-size:20px;
	font-size:1.0rem;
	
}
.baseSupplier {
	font-size: .85rem;
	text-align: left;
	color: blue;
	text-decoration: underline;
	cursor: pointer;
}
	.baseSupplier a {
		font-size: .85rem;
		min-height: initial !important;
	}
.customPromo,
.customBanner {
	display: inline-block;
	width: 100%;
	position: relative;
	/*min-height:1200px;*/
	/*margin-bottom:225px;*/
}

.customBanner a{
	width:100%;	
}

.upIcon{
	background-repeat: no-repeat;
	background-image: url('https://assets.apliiq.com/images/Upload/icon-cta-sprite.png');
	background-size: 60px auto;
	background-position:center -250px;
	height:60px;
	width:60px;
	border-radius:50px;
	background-color:rgba(0,0,0,.2);
	cursor:pointer;	
	display:block;
	margin:16px auto 100px;
}
.upIcon:after{
	content:'back to top';
	position:absolute;
	bottom:70px;
	text-align: center;
	width:100px;
	left:0;
	right:0;
	margin:auto;
}

@-webkit-keyframes arrow { 
	0% { -webkit-transform: translate3d(0, 0, 10px) rotateX(37deg); opacity: 0; }
	20% { -webkit-transform: translate3d(0, 0, 10px) rotateX(0); opacity: 1; }
	60% { -webkit-transform: translate3d(0, 0, 10px) rotateX(0); opacity: 1; }
	80% { -webkit-transform: translate3d(0, 0, 10px) rotateX(0); opacity: 1; }
	100% { -webkit-transform: translate3d(0, 0, 10px) rotateX(-45deg); opacity: 0; } }

@keyframes arrow { 
	0% { transform: translate3d(0, 0, 10px) rotateX(37deg); opacity: 0; }
	20% { transform: translate3d(0, 0, 10px) rotateX(0); opacity: 1; }
	60% { transform: translate3d(0, 0, 10px) rotateX(0); opacity: 1; }
	80% { transform: translate3d(0, 0, 10px) rotateX(0); opacity: 1; }
	100% { transform: translate3d(0, 0, 10px) rotateX(-45deg);}
}
.downAnchorArrow {
	width: 100%;
	height: auto;
	max-width: 60px;
	opacity:0;
	-webkit-animation-timing-function: cubic-bezier(0.5, 0.2, 0.3, 1.0);
	animation-timing-function: cubic-bezier(0.5, 0.2, 0.3, 1.0);
	-webkit-transform-origin: 0 0 -12px;
	transform-origin: 0 0 -12px;
	cursor:pointer;
}
.downAnchorArrow {
	opacity: 1;
	-webkit-animation-name: arrow;
	animation-name: arrow;
	-webkit-animation-duration: 5s;
	animation-duration: 5s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}
#promoCopy {
    height: 250px!important;
    overflow: hidden!important;
    -webkit-mask-image:
        -webkit-gradient(linear, left top, left bottom,
            from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
    transition: all 0.5s linear;
	width:80%;
}
.imgWithTxt{
	position:relative;
}

.imgLabel{
	position:absolute;
	bottom:0px;
	text-align:center;
	width:100%
}
.banner{
	background-color: #f9f9f9;
    padding: 25px;
    margin: 10px auto;
    width: 90% !important;
    border-radius: 10px;
}
.catalogCopy #promoCopy{
	height:100% !important;
	width:100% !important;
	-webkit-mask-image: none !important;
}
    
.imgWrap{
	margin: 15px auto;
    display: block;
}   
#promoCopy p{
	width: 100% !important;
    font-size: 1.25rem;
    line-height: 1.5rem;
    max-width: 800px;
	display: block;
	margin:auto;
	
}
#promoCopy img{
	width: 480px;
	height:auto;
	margin:auto;
}

#promoCopy .small{
	width: 300px !important;
}
#promoCopy .xsmall{
	width: 150px !important;
}
#promoCopy .imgContainer{
	display:flex;
	position:relative;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

#promoCopy ul{
	text-align: start;
    margin: auto;
    display: flex;
	flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

#promoCopy li a{
	color: #000;
    text-decoration: underline;
    font-weight: 400;
    font-family: 'Questrial',sans-serif;
    line-height: inherit;
	font-size:1rem;
}

#promoCopy li{
	font-family: 'Open Sans';
    font-size: 1.25rem;
    line-height: 1.35;
    min-width: 250px;
	max-width:480px;
    margin: 45px 10px 25px 10px;
	display: inline-flex;
	flex-direction:column;
}
#promoCopy .flip{
	color:white;
	background-color:black;
}

#promoCopy .emphasis{
	box-shadow:15px 15px lightgrey;
	padding:25px;
}

#promoCopy b{
	font-weight: 600;
}
#promoCopy h1, .promoHeader h1{
	min-height:64px;
	font-size: 2rem;
}
#promoCopy h2 {
	font-size: 1.5rem !important;
}
.promo-target{
	 cursor: pointer;
}

#promoCopy.expand {
    height: 100% !important;
    -webkit-mask-image: none !important;

}
/*.target {*/
	/*cursor: pointer !important;
	position: absolute;
	top: 0;
	right: 0 */
	/*position: relative;
	line-height: 0;
	width: 13px;
	cursor: pointer;
}*/
.target2 {
	width: 25px;
	font-size: 3.5rem;
	transform: rotate(-90deg);
	margin: auto;
	font-weight: bold;
	margin-top: 90px;
}

.target::before {
	content: '»';
	font-weight: bold;
	font-size: 3.5rem;
	transform: rotate(90deg);
	position: absolute;
	right: 0;
	color: #000;
}
.expand .target::before {
	content: '»';
	font-weight: bold;
	font-size: 3.0rem;
	transform: rotate(-90deg);
	position: absolute;
	right: 0;
	color: #00000091;
}
 
/***FILTER SELECTIONS START***/
.filters {
	display: block;
	background-color: #000000c7; /*#3f3f3f26; #f5f5f5;*/
	/*overflow: hidden;*/
	padding: 5px 0 15px 0;
}
	.filters .filters-wrap {
		padding: 0 1%;
		display: block;
		float: left;
		width: 50%;
		height: 90px;
	}
.breadcrumbs {
	text-align: left;
	padding: 10px 10px 10px 5%;
	width: 100%;
	float: left;
}
.breadcrumbs .breadcrumbs-wrap {
    font-style: italic;
    margin: 6px 0;
}
.breadcrumbs .product-cnt {
    font-size: .8rem;
    padding-left: 10px;
}

.filter-lbl {
	text-align: left;
	font-size: 0.80rem;
	padding: 15px 0 5px 0;
	color: white;
}
.filter-selected {
    padding: 0px 0px 0px 10px;
    box-shadow: 0px 0px 0px 1px black;
}
.filter-selected, .filter-lbls div {
	font-size: .9rem !important;
	line-height: 32px;
	box-shadow: 0px 0px 0px 1px #797979;
	background-color: white;
	cursor: pointer;
	border-radius: 2px;
	text-align: left;
}
.filter-selected::after {
    content: '\25BD';
    float: right;
    cursor: pointer;
	padding: 0px 3px 0px 3px;
}
.filter-lbls {
    height: 0;
    overflow: hidden;
    display: none;
    border: 1px solid silver;
}
    .filter-lbls .sub-img {
        background-size: 50px;
        background-repeat: no-repeat;
        background-position: center;
        height: 40px;
        width: 60px;
        display: block;
        float: left;
        box-shadow: none;
    }
.filter-items {
	text-align:left;
}
    .filter-items .sub-name {
        display: block;
        line-height: 32px;
        padding: 0 10px;
    }
        .filter-items .sub-name a {
            width: 100%;font-size: .9rem;
        }

		.filter-items .sub-name a.sub-item {
			font-size: .8rem;
		}

.filter-lbls.open {
	height: auto;
	overflow: auto;
	display: block;
	position: absolute;
	z-index: 10;
	background-color: white;
	max-height: 320px;
	width: 350px;
	box-shadow: 2px 3px 4px 0px silver;
}

/*.bottom-filter .filter-lbls.open{
	bottom: 147px;
}*/


.filter-lbls.open .searchTerm {
	margin: 5% 0;
	float: inherit;
}
.pagination-filter-wrap {
	/*height: 45px;
	margin:50px auto;
	width: 90%;*/
	height: 45px;
	margin: 0px 5%;
	width: 90%;
	display: inline-block;
	float: left;
}
	.pagination-filter-wrap .filter-selected {
		/*color: black;
		font-weight: bolder;*/
		background-color: #c0c0c059;
	}
.pagesize-filter-wrap {
	width: 135px !important;
}
/***FILTER SELECTIONS END***/
/**CATALOG pages pagination START ****/
.ctaButtonWrap {
    margin:35px;
}
    .ctaButtonWrap a {
        text-decoration: underline;
        color: blue;
        padding: 0 5px;
    }
/****CATALOG pages pagination END ****/
@media screen and (min-width:321px){
	html{
		font-size: 15px;
	}
	
}

@media screen and (min-width:768px){
	html{
		font-size: 16px;
	}	
	/*.indBasebox{
		margin: 1.1%;	
	}*/
    .priceRange {
        font-size: .7rem;
    }
    .indBasePrice {
        overflow: hidden;
        position: relative;
        z-index: 1;
        /*height: initial;
        width: initial;*/
        top: initial;
        left: initial;
    }
	#promoCopy {
		
    height: 150px!important;
	}
	p{
		max-width:480px !important;
	}

	.copyWrapper .promoContent {
		width: 80%;
	}
	.filters .filters-wrap {
		width: 33%;
	}

	.pagination-filter-wrap {
		width:auto;
		margin: 0 0 0 5%;
	}
	.pagesize-filter-wrap {
		margin: 0 0 0 15px;
	}
	.pagesize-filter-wrap2 {
		margin: 0 0 0 5%;
		width: 135px;
	}
}

@media screen and (min-width:1023px){
	html{
		font-size: 17px;
	  }
	  
	.indBasebox {		
		background-image: url('https://assets.apliiq.com/images/loading.gif');
		background-size:30px auto;
		background-position:center;
		background-repeat:no-repeat;
		/*width:310px;*/
	}
	.indBasebox a {
		background-color: #fff;
		min-height: 342px;
	}

    .breadcrumbs .breadcrumbs-wrap {
        margin: 10px 0;
    }
	.filters .filters-wrap {
		width: 20%;
	}
	
}
@media screen and (min-width:1025px) {
    .indBasebox:hover .button {
        display: block;
    }

    .upIcon:hover {
        background-color: rgba(0,0,0,.5);
    }

    a.back:hover {
        color: red;
        background-position: -18px -895px;
        cursor: pointer;
    }

	.filter-selected::after {
		padding: 0px 5px 0px 5px !important;
		font-weight: bold;
	}

    .filter-selected, .filter-lbls div {
        font-size: .85rem !important;
    }

    .filter-items .sub-name a {
        font-size: .85rem;
    }
	.filters .filters-wrap {
		width: 205px;
	}

}
/* ================================================================
   Catalog promotional content system
   Append this section to the existing promo catalog stylesheet.
   The new component selectors are scoped to the opt-in
   .promo-layout--catalog-split class. Existing #promoCopy rules remain
   untouched for backwards compatibility with legacy brand pages.
   ================================================================ */

/* Opt-in wrappers used by Index.cshtml. */
.promo-layout--catalog-split {
    --catalog-ink: #171717;
    --catalog-muted: #626262;
    --catalog-border: #dedede;
    --catalog-soft: #f6f6f4;
    --catalog-soft-alt: #efefe9;
    --catalog-accent: #111111;
    --catalog-white: #ffffff;
    box-sizing: border-box;
}

#catalogPromoBottom.promo-layout--catalog-split {
    clear: both;
    width: 100%;
    max-width: 1440px;
    height: auto !important;
    margin: 48px auto 30px;
    padding: 0 3%;
    overflow: visible !important;
    box-sizing: border-box;
}

#catalogPromoBottom.promo-layout--catalog-split:empty {
    display: none;
}

#catalogPromoBottom.promo-layout--catalog-split .catalog-content__bottom {
    display: block;
    width: 100%;
}


.promo-layout--catalog-split .catalog-content {
    --catalog-ink: #171717;
    --catalog-muted: #626262;
    --catalog-border: #dedede;
    --catalog-soft: #f6f6f4;
    --catalog-soft-alt: #efefe9;
    --catalog-accent: #111111;
    --catalog-white: #ffffff;
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin: 18px auto 34px;
    color: var(--catalog-ink);
    background: var(--catalog-white);
    overflow: visible;
}

.promo-layout--catalog-split .catalog-content__inner {
    width: 100%;
}

.promo-layout--catalog-split .catalog-section {
    box-sizing: border-box;
    width: 100%;
}

.promo-layout--catalog-split .catalog-section + .catalog-section {
    margin-top: 28px;
}

.promo-layout--catalog-split .catalog-eyebrow {
    display: block;
    margin: 0 0 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.3;
    text-transform: uppercase;
}

.promo-layout--catalog-split .catalog-section-heading {
    max-width: 780px;
    margin: 0 auto 22px;
    text-align: center;
}

.promo-layout--catalog-split .catalog-section-heading h2,
.promo-layout--catalog-split .catalog-hero h1,
.promo-layout--catalog-split .catalog-service-callout h2,
.promo-layout--catalog-split .catalog-cta-panel h2 {
    margin-top: 0;
    color: var(--catalog-ink);
    line-height: 1.08;
}

.promo-layout--catalog-split .catalog-section-heading h2 {
    margin-bottom: 10px;
    font-size: clamp(1.7rem, 3vw, 2.45rem);
}

.promo-layout--catalog-split .catalog-section-heading p {
    margin: 0;
    color: var(--catalog-muted);
    font-size: 1rem;
    line-height: 1.65;
}

/* Hero */
.promo-layout--catalog-split .catalog-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
    min-height: 430px;
    border: 1px solid var(--catalog-border);
    border-radius: 18px;
    background: var(--catalog-soft);
    overflow: hidden;
}

.promo-layout--catalog-split .catalog-hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(34px, 5vw, 72px);
}

.promo-layout--catalog-split .catalog-hero h1 {
    max-width: 760px;
    margin-bottom: 18px;
    font-size: clamp(2.15rem, 4.2vw, 4.3rem);
}

.promo-layout--catalog-split .catalog-hero__summary {
    max-width: 720px;
    margin: 0;
    color: var(--catalog-muted);
    font-size: clamp(1rem, 1.5vw, 1.16rem);
    line-height: 1.7;
}

.promo-layout--catalog-split .catalog-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.promo-layout--catalog-split .catalog-benefits li {
    position: relative;
    padding-left: 21px;
    font-size: 0.95rem;
    font-weight: 600;
}

.promo-layout--catalog-split .catalog-benefits li::before {
    position: absolute;
    top: 0.4em;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--catalog-accent);
    content: "";
}

.promo-layout--catalog-split .catalog-hero__actions,
.promo-layout--catalog-split .catalog-service-callout__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
}

.promo-layout--catalog-split .catalog-hero__media {
    min-height: 100%;
    background: #e7e7e2;
}

.promo-layout--catalog-split .catalog-hero__media a,
.promo-layout--catalog-split .catalog-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
}

.promo-layout--catalog-split .catalog-hero__media img {
    min-height: 430px;
    object-fit: cover;
    object-position: center;
}

/* Buttons and links */
.promo-layout--catalog-split .catalog-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    border: 1px solid var(--catalog-accent);
    border-radius: 999px;
    font-size: 0.93rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.promo-layout--catalog-split .catalog-button:hover,
.promo-layout--catalog-split .catalog-button:focus-visible {
    transform: translateY(-1px);
}

.promo-layout--catalog-split .catalog-button--primary {
    color: var(--catalog-white);
    background: var(--catalog-accent);
}

.promo-layout--catalog-split .catalog-button--primary:hover,
.promo-layout--catalog-split .catalog-button--primary:focus-visible {
    color: var(--catalog-white);
    background: #343434;
}

.promo-layout--catalog-split .catalog-button--secondary {
    color: var(--catalog-accent);
    background: transparent;
}

.promo-layout--catalog-split .catalog-button--secondary:hover,
.promo-layout--catalog-split .catalog-button--secondary:focus-visible {
    color: var(--catalog-white);
    background: var(--catalog-accent);
}

.promo-layout--catalog-split .catalog-text-link,
.promo-layout--catalog-split .catalog-category-card__content > a {
    color: var(--catalog-ink);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

/* Quick links */
.promo-layout--catalog-split .catalog-quick-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 4px 0;
}

.promo-layout--catalog-split .catalog-quick-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--catalog-border);
    border-radius: 999px;
    color: var(--catalog-ink);
    background: var(--catalog-white);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.promo-layout--catalog-split .catalog-quick-links a:hover,
.promo-layout--catalog-split .catalog-quick-links a:focus-visible {
    border-color: var(--catalog-ink);
    background: var(--catalog-soft);
}

/* Trust strip */
.promo-layout--catalog-split .catalog-trust-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--catalog-border);
    border-radius: 16px;
    overflow: hidden;
}

.promo-layout--catalog-split .catalog-trust-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    padding: 26px;
    background: var(--catalog-white);
}

.promo-layout--catalog-split .catalog-trust-item + .catalog-trust-item {
    border-left: 1px solid var(--catalog-border);
}

.promo-layout--catalog-split .catalog-trust-item__number {
    color: #8a8a8a;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.promo-layout--catalog-split .catalog-trust-item h2 {
    margin: 0 0 8px;
    font-size: 1.08rem;
    line-height: 1.25;
}

.promo-layout--catalog-split .catalog-trust-item p {
    margin: 0;
    color: var(--catalog-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

/* Category recommendation cards */
.promo-layout--catalog-split .catalog-recommendations,
.promo-layout--catalog-split .catalog-guide,
.promo-layout--catalog-split .catalog-faq {
    padding: clamp(34px, 5vw, 64px) 0;
}

.promo-layout--catalog-split .catalog-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.promo-layout--catalog-split .catalog-category-card {
    border: 1px solid var(--catalog-border);
    border-radius: 14px;
    background: var(--catalog-white);
    overflow: hidden;
}

.promo-layout--catalog-split .catalog-category-card__image {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--catalog-soft);
}

.promo-layout--catalog-split .catalog-category-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 240ms ease;
}

.promo-layout--catalog-split .catalog-category-card:hover .catalog-category-card__image img {
    transform: scale(1.025);
}

.promo-layout--catalog-split .catalog-category-card__content {
    padding: 22px;
}

.promo-layout--catalog-split .catalog-category-card__content h3 {
    margin: 0 0 9px;
    color: var(--catalog-ink);
    font-size: 1.22rem;
}

.promo-layout--catalog-split .catalog-category-card__content p {
    margin: 0 0 16px;
    color: var(--catalog-muted);
    line-height: 1.6;
}

/* Service callout */
.promo-layout--catalog-split .catalog-service-callout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 0;
    border-radius: 18px;
    background: var(--catalog-ink);
    color: var(--catalog-white);
    overflow: hidden;
}

.promo-layout--catalog-split .catalog-service-callout__content,
.promo-layout--catalog-split .catalog-service-callout__aside {
    padding: clamp(30px, 4vw, 54px);
}

.promo-layout--catalog-split .catalog-service-callout__content h2,
.promo-layout--catalog-split .catalog-service-callout__content p,
.promo-layout--catalog-split .catalog-service-callout__content .catalog-eyebrow,
.promo-layout--catalog-split .catalog-service-callout__content .catalog-text-link,
.promo-layout--catalog-split .catalog-service-callout__aside h3,
.promo-layout--catalog-split .catalog-service-callout__aside li,
.promo-layout--catalog-split .catalog-service-callout__aside .catalog-text-link {
    color: var(--catalog-white);
}

.promo-layout--catalog-split .catalog-service-callout__content h2 {
    max-width: 760px;
    margin-bottom: 14px;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
}

.promo-layout--catalog-split .catalog-service-callout__content p {
    max-width: 760px;
    margin: 0;
    color: #d0d0d0;
    line-height: 1.65;
}

.promo-layout--catalog-split .catalog-service-callout__aside {
    border-left: 1px solid #444;
    background: #272727;
}

.promo-layout--catalog-split .catalog-service-callout__aside h3 {
    margin: 0 0 15px;
    font-size: 1.18rem;
}

.promo-layout--catalog-split .catalog-service-callout__aside ul {
    margin: 0 0 18px;
    padding-left: 20px;
}

.promo-layout--catalog-split .catalog-service-callout__aside li {
    margin: 0 0 9px;
    color: #d7d7d7;
    line-height: 1.5;
}

/* Guide */
.promo-layout--catalog-split .catalog-guide-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.promo-layout--catalog-split .catalog-guide-card {
    padding: 24px;
    border: 1px solid var(--catalog-border);
    border-radius: 14px;
    background: var(--catalog-soft);
}

.promo-layout--catalog-split .catalog-guide-card h3 {
    margin: 0 0 9px;
    font-size: 1.08rem;
}

.promo-layout--catalog-split .catalog-guide-card p {
    margin: 0;
    color: var(--catalog-muted);
    line-height: 1.6;
}

/* CTA */
.promo-layout--catalog-split .catalog-cta-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: clamp(28px, 4vw, 50px);
    border: 1px solid var(--catalog-border);
    border-radius: 16px;
    background: var(--catalog-soft-alt);
}

.promo-layout--catalog-split .catalog-cta-panel h2 {
    margin-bottom: 9px;
    font-size: clamp(1.6rem, 2.6vw, 2.35rem);
}

.promo-layout--catalog-split .catalog-cta-panel p {
    margin: 0;
    color: var(--catalog-muted);
    line-height: 1.6;
}

.promo-layout--catalog-split .catalog-cta-panel .catalog-button {
    flex: 0 0 auto;
}

/* FAQ */
.promo-layout--catalog-split .catalog-faq-list {
    max-width: 900px;
    margin: 0 auto;
    border-top: 1px solid var(--catalog-border);
}

.promo-layout--catalog-split .catalog-faq-list details {
    border-bottom: 1px solid var(--catalog-border);
}

.promo-layout--catalog-split .catalog-faq-list summary {
    position: relative;
    padding: 20px 44px 20px 0;
    color: var(--catalog-ink);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.45;
    list-style: none;
}

.promo-layout--catalog-split .catalog-faq-list summary::-webkit-details-marker {
    display: none;
}

.promo-layout--catalog-split .catalog-faq-list summary::after {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    content: "+";
    font-size: 1.35rem;
    font-weight: 400;
}

.promo-layout--catalog-split .catalog-faq-list details[open] summary::after {
    content: "−";
}

.promo-layout--catalog-split .catalog-faq-list details p {
    max-width: 800px;
    margin: -4px 0 20px;
    color: var(--catalog-muted);
    line-height: 1.65;
}

/* Existing expand/collapse hook */
#promoCopy.promo-layout--catalog-split > .promo-target.target2 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 18px auto 0;
    border: 1px solid var(--catalog-border);
    border-radius: 50%;
    color: var(--catalog-ink);
    background: var(--catalog-white);
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
    transition: transform 160ms ease, background-color 160ms ease;
}

#promoCopy.promo-layout--catalog-split > .promo-target.target2:hover,
#promoCopy.promo-layout--catalog-split > .promo-target.target2:focus-visible {
    background: var(--catalog-soft);
}

#promoCopy.promo-layout--catalog-split.expand > .promo-target.target2 {
    transform: rotate(90deg);
}

/* Tablet */
@media (max-width: 1024px) {
    .promo-layout--catalog-split .catalog-hero {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
    }

    .promo-layout--catalog-split .catalog-trust-strip,
    .promo-layout--catalog-split .catalog-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .promo-layout--catalog-split .catalog-trust-item:nth-child(3) {
        grid-column: 1 / -1;
        border-top: 1px solid var(--catalog-border);
        border-left: 0;
    }

    .promo-layout--catalog-split .catalog-guide-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile */
@media (max-width: 767px) {
    .promo-layout--catalog-split .catalog-content {
        margin-top: 12px;
        margin-bottom: 24px;
    }

    .promo-layout--catalog-split .catalog-section + .catalog-section {
        margin-top: 20px;
    }

    .promo-layout--catalog-split .catalog-hero {
        display: flex;
        flex-direction: column;
        min-height: 0;
        border-radius: 14px;
    }

    .promo-layout--catalog-split .catalog-hero__content {
        order: 2;
        padding: 26px 20px 30px;
    }

    .promo-layout--catalog-split .catalog-hero__media {
        order: 1;
        min-height: 230px;
    }

    .promo-layout--catalog-split .catalog-hero__media img {
        min-height: 230px;
        max-height: 320px;
    }

    .promo-layout--catalog-split .catalog-hero h1 {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .promo-layout--catalog-split .catalog-benefits {
        display: grid;
        gap: 10px;
    }

    .promo-layout--catalog-split .catalog-hero__actions,
    .promo-layout--catalog-split .catalog-service-callout__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .promo-layout--catalog-split .catalog-button {
        width: 100%;
        box-sizing: border-box;
    }

    .promo-layout--catalog-split .catalog-quick-links {
        justify-content: flex-start;
        flex-wrap: nowrap;
        padding: 2px 2px 10px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .promo-layout--catalog-split .catalog-quick-links a {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .promo-layout--catalog-split .catalog-trust-strip,
    .promo-layout--catalog-split .catalog-card-grid,
    .promo-layout--catalog-split .catalog-guide-grid,
    .promo-layout--catalog-split .catalog-service-callout {
        grid-template-columns: 1fr;
    }

    .promo-layout--catalog-split .catalog-trust-item,
    .promo-layout--catalog-split .catalog-trust-item:nth-child(3) {
        grid-column: auto;
        padding: 22px 20px;
        border-top: 1px solid var(--catalog-border);
        border-left: 0;
    }

    .promo-layout--catalog-split .catalog-trust-item:first-child {
        border-top: 0;
    }

    .promo-layout--catalog-split .catalog-service-callout__aside {
        border-top: 1px solid #444;
        border-left: 0;
    }

    .promo-layout--catalog-split .catalog-recommendations,
    .promo-layout--catalog-split .catalog-guide,
    .promo-layout--catalog-split .catalog-faq {
        padding: 30px 0;
    }

    .promo-layout--catalog-split .catalog-cta-panel {
        align-items: stretch;
        flex-direction: column;
        padding: 28px 20px;
    }

    .promo-layout--catalog-split .catalog-cta-panel .catalog-button {
        flex: auto;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .promo-layout--catalog-split .catalog-content *,
    .promo-layout--catalog-split .catalog-content *::before,
    .promo-layout--catalog-split .catalog-content *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ================================================================
   PROMOCOPY VISIBILITY + LEGACY CONFLICT FIX
   The catalog template already renders #promoCopy and #promo-target.
   Injected category HTML must not duplicate either ID.
   ================================================================ */

/* The redesigned category content is intentionally always visible. */
.copyWrapper#promoCopy.promo-layout--catalog-split {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    transition: none !important;
}

/* Remove the legacy expand/collapse control for redesigned promo content. */
.copyWrapper#promoCopy.promo-layout--catalog-split > .promo-target,
.copyWrapper#promoCopy.promo-layout--catalog-split > #promo-target,
.copyWrapper.promo-layout--catalog-split .catalog-content + .promo-target {
    display: none !important;
}

/* The outer template already supplies .promoContent. Do not constrain the
   redesigned content to the old desktop 80% width. */
.copyWrapper#promoCopy.promo-layout--catalog-split > .promoContent {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
}

/* Root for the reusable catalog content system. */
.promo-layout--catalog-split .catalog-content {
    --catalog-ink: #171717;
    --catalog-muted: #626262;
    --catalog-border: #dedede;
    --catalog-soft: #f6f6f4;
    --catalog-soft-alt: #efefe9;
    --catalog-accent: #111111;
    --catalog-white: #ffffff;
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin: 18px auto 34px;
    color: var(--catalog-ink);
    background: var(--catalog-white);
    overflow: visible;
    text-align: left;
}

/* Neutralize broad legacy #promoCopy element rules inside the new system. */
.promo-layout--catalog-split .catalog-content p,
.promo-layout--catalog-split .catalog-content ul,
.promo-layout--catalog-split .catalog-content li,
.promo-layout--catalog-split .catalog-content img,
.promo-layout--catalog-split .catalog-content h1,
.promo-layout--catalog-split .catalog-content h2,
.promo-layout--catalog-split .catalog-content h3 {
    box-sizing: border-box;
}

.promo-layout--catalog-split .catalog-content p {
    width: auto !important;
    max-width: none !important;
    margin: 0;
    text-align: inherit;
}

.promo-layout--catalog-split .catalog-content img {
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
}

.promo-layout--catalog-split .catalog-content ul {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    text-align: inherit;
}

.promo-layout--catalog-split .catalog-content li {
    display: list-item;
    min-width: 0;
    max-width: none;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

.promo-layout--catalog-split .catalog-content li a {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.promo-layout--catalog-split .catalog-content h1,
.promo-layout--catalog-split .catalog-content h2 {
    min-height: 0;
}

/* Restore component-specific list layouts after the legacy reset. */
.promo-layout--catalog-split .catalog-content .catalog-benefits {
    display: flex;
}

.promo-layout--catalog-split .catalog-content .catalog-benefits li {
    display: block;
}

.promo-layout--catalog-split .catalog-content .catalog-service-callout__aside ul {
    display: block;
    padding-left: 20px;
}

.promo-layout--catalog-split .catalog-content .catalog-service-callout__aside li {
    display: list-item;
}

@media screen and (min-width: 768px) {
    .copyWrapper#promoCopy.promo-layout--catalog-split {
        height: auto !important;
    }

    .copyWrapper#promoCopy.promo-layout--catalog-split > .promoContent {
        width: 100% !important;
    }
}



@media screen and (max-width: 767px) {
    #catalogPromoBottom.promo-layout--catalog-split {
        margin-top: 34px;
        padding-right: 16px;
        padding-left: 16px;
    }
}

/* ================================================================
   Catalog split layout v2
   Higher-specificity opt-in overrides for redesigned catalog pages.
   Legacy #promoCopy rules remain unchanged for existing brand pages.
   ================================================================ */

/* Neutralize legacy layout rules only when the split catalog class is present. */
.copyWrapper#promoCopy.promo-layout--catalog-split {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    float: none !important;
    overflow: visible !important;
    text-align: left !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

.copyWrapper#promoCopy.promo-layout--catalog-split > .promoContent {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    overflow: visible !important;
    text-align: left !important;
}

#promoCopy.promo-layout--catalog-split .catalog-content,
#catalogPromoBottom.promo-layout--catalog-split .catalog-content {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 1440px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 12px auto 24px !important;
    padding: 0 !important;
    float: none !important;
    overflow: visible !important;
    color: var(--catalog-ink) !important;
    background: transparent !important;
    text-align: left !important;
}

#promoCopy.promo-layout--catalog-split .catalog-content section,
#catalogPromoBottom.promo-layout--catalog-split .catalog-content section,
#promoCopy.promo-layout--catalog-split .catalog-section,
#catalogPromoBottom.promo-layout--catalog-split .catalog-section {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    float: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* Compact top section so products remain prominent. */
#promoCopy.promo-layout--catalog-split .catalog-content__top {
    margin: 0 !important;
    padding: 0 !important;
}

#promoCopy.promo-layout--catalog-split .catalog-content__top .catalog-section + .catalog-section {
    margin-top: 12px !important;
}

#promoCopy.promo-layout--catalog-split .catalog-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(250px, 0.75fr) !important;
    width: 100% !important;
    min-height: 285px !important;
    max-height: 330px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--catalog-border) !important;
    border-radius: 16px !important;
    background: var(--catalog-soft) !important;
    overflow: hidden !important;
}

#promoCopy.promo-layout--catalog-split .catalog-hero__content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    padding: clamp(22px, 3vw, 40px) !important;
}

#promoCopy.promo-layout--catalog-split .catalog-hero h1 {
    max-width: 760px !important;
    min-height: 0 !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    color: var(--catalog-ink) !important;
    font-size: clamp(1.9rem, 3vw, 3.15rem) !important;
    line-height: 1.04 !important;
    text-align: left !important;
}

#promoCopy.promo-layout--catalog-split .catalog-hero__summary {
    width: auto !important;
    max-width: 680px !important;
    margin: 0 !important;
    color: var(--catalog-muted) !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    text-align: left !important;
}

#promoCopy.promo-layout--catalog-split .catalog-benefits {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px 15px !important;
    width: auto !important;
    margin: 14px 0 0 !important;
    padding: 0 !important;
}

#promoCopy.promo-layout--catalog-split .catalog-benefits li {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-left: 19px !important;
    font-size: 0.9rem !important;
    line-height: 1.35 !important;
}

#promoCopy.promo-layout--catalog-split .catalog-hero__actions {
    gap: 9px !important;
    margin-top: 15px !important;
}

#promoCopy.promo-layout--catalog-split .catalog-button {
    min-height: 38px !important;
    padding: 8px 15px !important;
    font-size: 0.9rem !important;
}

#promoCopy.promo-layout--catalog-split .catalog-hero__media {
    min-height: 285px !important;
    max-height: 330px !important;
    margin: 0 !important;
    overflow: hidden !important;
}

#promoCopy.promo-layout--catalog-split .catalog-hero__media a,
#promoCopy.promo-layout--catalog-split .catalog-hero__media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 285px !important;
    max-height: 330px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
}

#promoCopy.promo-layout--catalog-split .catalog-quick-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
}

#promoCopy.promo-layout--catalog-split .catalog-quick-links a {
    min-height: 34px !important;
    padding: 7px 12px !important;
    font-size: 0.84rem !important;
    line-height: 1.2 !important;
}

/* Keep the optional trust strip compact when it remains above the grid. */
#promoCopy.promo-layout--catalog-split .catalog-trust-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin-top: 10px !important;
    padding: 10px 14px !important;
}

#promoCopy.promo-layout--catalog-split .catalog-trust-item {
    min-height: 0 !important;
    padding: 6px 14px !important;
}

#promoCopy.promo-layout--catalog-split .catalog-trust-item__number {
    font-size: 1.25rem !important;
}

#promoCopy.promo-layout--catalog-split .catalog-trust-item h2 {
    margin: 2px 0 !important;
    font-size: 0.95rem !important;
}

#promoCopy.promo-layout--catalog-split .catalog-trust-item p {
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
}

/* Pagination is now positioned immediately around the product grid. */
.catalog-pagination-row {
    position: relative;
    z-index: inherit;
    clear: both;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    margin: 14px 0;
    box-sizing: border-box;
}

.catalog-pagination-row--top {
    margin-top: 12px;
    margin-bottom: 16px;
}

.catalog-pagination-row--bottom {
    margin-top: 18px;
    margin-bottom: 26px;
}

.catalog-pagination-row .pagination-filter-wrap,
.catalog-pagination-row .bottom-filter {
    position: relative;
    float: none !important;
    width: auto;
    margin: 0 !important;
}

/*.catalog-pagination-row .filter-lbls {
    z-index: 45;
}
*/
#genderSelection {
    scroll-margin-top: 150px;
}

/* Small sticky return control; intentionally not a second full header. */
.catalog-product-jump[hidden] {
    display: none !important;
}

.catalog-product-jump {
    position: sticky;
    top: 72px;
    z-index: 24;
    clear: both;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    margin: 10px 0 12px;
    padding: 9px 14px;
    border: 1px solid var(--catalog-border, #dedede);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-sizing: border-box;
}

.catalog-product-jump__label {
    overflow: hidden;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalog-product-jump__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 13px;
    border-radius: 999px;
    background: #171717;
    color: #fff !important;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
}

.catalog-product-jump__action:hover,
.catalog-product-jump__action:focus-visible {
    background: #333;
}

@media screen and (max-width: 767px) {
    #promoCopy.promo-layout--catalog-split .catalog-hero {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    #promoCopy.promo-layout--catalog-split .catalog-hero__content {
        padding: 20px 17px !important;
    }

    #promoCopy.promo-layout--catalog-split .catalog-hero h1 {
        font-size: clamp(1.75rem, 8vw, 2.45rem) !important;
    }

    #promoCopy.promo-layout--catalog-split .catalog-hero__media,
    #promoCopy.promo-layout--catalog-split .catalog-hero__media a,
    #promoCopy.promo-layout--catalog-split .catalog-hero__media img {
        min-height: 190px !important;
        max-height: 230px !important;
    }

    #promoCopy.promo-layout--catalog-split .catalog-trust-strip {
        grid-template-columns: 1fr !important;
        padding: 8px 12px !important;
    }

    #promoCopy.promo-layout--catalog-split .catalog-trust-item {
        padding: 8px 4px !important;
        border-left: 0 !important;
        border-top: 1px solid var(--catalog-border) !important;
    }

    #promoCopy.promo-layout--catalog-split .catalog-trust-item:first-child {
        border-top: 0 !important;
    }

    .catalog-pagination-row {
        justify-content: center;
        gap: 8px;
    }

    .catalog-pagination-row .pagination-filter-wrap,
    .catalog-pagination-row .bottom-filter {
        width: min(100%, 320px) !important;
    }

    .catalog-product-jump {
        top: 58px;
        margin-top: 8px;
        padding: 8px 10px;
    }

    .catalog-product-jump__label {
        font-size: 0.8rem;
    }

    .catalog-product-jump__action {
        min-height: 32px;
        padding: 6px 10px;
        font-size: 0.78rem;
    }

    #genderSelection {
        scroll-margin-top: 125px;
    }
}

/* ================================================================
   Catalog split layout v3 desktop correction
   Appended after v2 so these rules win without changing legacy
   #promoCopy behavior on existing brand pages.
   ================================================================ */

/* Let the desktop hero grow naturally instead of forcing content into
   a 330px cap. */
@media screen and (min-width: 768px) {
    #promoCopy.promo-layout--catalog-split .catalog-hero {
        display: grid !important;
        grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr) !important;
        align-items: stretch !important;
        width: 100% !important;
        min-height: 320px !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid var(--catalog-border) !important;
        border-radius: 16px !important;
        background: var(--catalog-soft) !important;
        overflow: hidden !important;
    }

    #promoCopy.promo-layout--catalog-split .catalog-hero__content {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        min-width: 0 !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 30px 36px !important;
        float: none !important;
        box-sizing: border-box !important;
    }

    #promoCopy.promo-layout--catalog-split .catalog-hero__media {
        position: relative !important;
        display: block !important;
        min-width: 0 !important;
        width: auto !important;
        min-height: 320px !important;
        max-height: none !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        overflow: hidden !important;
    }

    #promoCopy.promo-layout--catalog-split .catalog-hero__media a {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 320px !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #promoCopy.promo-layout--catalog-split .catalog-hero__media img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 320px !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: cover !important;
    }
}

/* More complete reset for broad legacy #promoCopy element rules inside
   the opt-in catalog component system. */
#promoCopy.promo-layout--catalog-split .catalog-content p,
#catalogPromoBottom.promo-layout--catalog-split .catalog-content p {
    position: static !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    text-align: inherit !important;
}

#promoCopy.promo-layout--catalog-split .catalog-content ul,
#catalogPromoBottom.promo-layout--catalog-split .catalog-content ul {
    position: static !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    text-align: inherit !important;
}

#promoCopy.promo-layout--catalog-split .catalog-content li,
#catalogPromoBottom.promo-layout--catalog-split .catalog-content li {
    position: relative !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    float: none !important;
    font-size: inherit;
    line-height: inherit;
}

#promoCopy.promo-layout--catalog-split .catalog-content h1,
#promoCopy.promo-layout--catalog-split .catalog-content h2,
#promoCopy.promo-layout--catalog-split .catalog-content h3,
#catalogPromoBottom.promo-layout--catalog-split .catalog-content h1,
#catalogPromoBottom.promo-layout--catalog-split .catalog-content h2,
#catalogPromoBottom.promo-layout--catalog-split .catalog-content h3 {
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
    text-align: inherit !important;
}

#promoCopy.promo-layout--catalog-split .catalog-content img,
#catalogPromoBottom.promo-layout--catalog-split .catalog-content img {
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
}

/* Restore component values after the reset. */
#promoCopy.promo-layout--catalog-split .catalog-hero h1 {
    width: auto !important;
    max-width: 760px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    color: var(--catalog-ink) !important;
    font-size: clamp(2rem, 3vw, 3.2rem) !important;
    line-height: 1.05 !important;
    text-align: left !important;
}

#promoCopy.promo-layout--catalog-split .catalog-hero__summary {
    width: auto !important;
    max-width: 680px !important;
    margin: 0 !important;
    color: var(--catalog-muted) !important;
    font-size: 1rem !important;
    line-height: 1.55 !important;
    text-align: left !important;
}

#promoCopy.promo-layout--catalog-split .catalog-benefits {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 8px 16px !important;
    width: 100% !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
}

#promoCopy.promo-layout--catalog-split .catalog-benefits li {
    display: block !important;
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 0 0 19px !important;
    font-size: 0.9rem !important;
    line-height: 1.35 !important;
}

#promoCopy.promo-layout--catalog-split .catalog-hero__actions {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
}

/* Keep the top section compact without forcing overlap. */
#promoCopy.promo-layout--catalog-split .catalog-quick-links {
    margin-top: 12px !important;
}

/* The sticky control is intentionally disabled until scroll-aware behavior
   is introduced. This avoids an extra desktop layer above the products. */
.catalog-product-jump,
.catalog-product-jump[hidden] {
    display: none !important;
}

/* Keep pagination visually attached to the product grid. */
.catalog-pagination-row--top {
    margin-top: 14px !important;
    margin-bottom: 16px !important;
}

.catalog-pagination-row--bottom {
    margin-top: 20px !important;
    margin-bottom: 26px !important;
}

@media screen and (max-width: 767px) {
    /* Preserve the already-working mobile behavior. */
    #promoCopy.promo-layout--catalog-split .catalog-hero {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    #promoCopy.promo-layout--catalog-split .catalog-hero__content {
        padding: 20px 17px !important;
    }

    #promoCopy.promo-layout--catalog-split .catalog-hero__media,
    #promoCopy.promo-layout--catalog-split .catalog-hero__media a,
    #promoCopy.promo-layout--catalog-split .catalog-hero__media img {
        min-height: 190px !important;
        max-height: 230px !important;
        height: auto !important;
    }
}

/* =========================================================
   SPLIT CATALOG HERO MEDIA - PREDICTABLE DESKTOP CROPPING
   Designed for large square source images such as 2048 x 2048.
   ========================================================= */
@media screen and (min-width: 768px) {
    #promoCopy.promo-layout--catalog-split .catalog-hero__media {
        position: relative !important;
        align-self: center !important;
        width: 100% !important;
        height: clamp(340px, 32vw, 460px) !important;
        min-height: 340px !important;
        max-height: 460px !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
        background: #e7e7e2 !important;
    }

    #promoCopy.promo-layout--catalog-split .catalog-hero__media > a {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    #promoCopy.promo-layout--catalog-split .catalog-hero__media img {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
}

/* ================================================================
   Catalog split v5: resilient pagination + shorter desktop hero
   ================================================================ */

/* Keep pagination controls inside the catalog width at every filter state. */
.catalog-pagination-row {
    clear: both;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    margin: 14px 0;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
}

.catalog-pagination-row .filters-wrap,
.catalog-pagination-row .pagination-filter-wrap,
.catalog-pagination-row .pagesize-filter-wrap,
.catalog-pagination-row .pagesize-filter-wrap2 {
    float: none !important;
    position: relative;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
}

.catalog-pagination-row .pagination-filter-wrap:not(.pagesize-filter-wrap):not(.pagesize-filter-wrap2) {
    flex: 1 1 320px;
    max-width: 520px !important;
}

.catalog-pagination-row .pagesize-filter-wrap,
.catalog-pagination-row .pagesize-filter-wrap2 {
    flex: 0 1 170px;
    max-width: 190px !important;
}

.catalog-pagination-row .filter-selected {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: anywhere;
}

/*.catalog-pagination-row .filter-lbls {*/
   /* left: 0;*/
    /*right: auto;
    width: 100% !important;
    min-width: 180px;
    max-width: min(420px, calc(100vw - 32px));
    box-sizing: border-box;
    z-index: 40;
}*/

/*.catalog-pagination-row .pagesize-filter-wrap .filter-lbls,
.catalog-pagination-row .pagesize-filter-wrap2 .filter-lbls {
    left: auto;
    right: 0;
    min-width: 150px;
}*/

/* Desktop hero: title beside supporting copy, with media in the third column. */
@media screen and (min-width: 1100px) {
    #promoCopy.promo-layout--catalog-split .catalog-hero {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 0.42fr) !important;
        min-height: 300px !important;
        align-items: stretch !important;
    }

    #promoCopy.promo-layout--catalog-split .catalog-hero__content {
        display: grid !important;
        grid-template-columns: minmax(250px, 0.82fr) minmax(320px, 1.18fr) !important;
        grid-template-areas:
            "eyebrow eyebrow"
            "title summary"
            "title benefits"
            "title actions";
        align-content: center !important;
        align-items: start !important;
        column-gap: clamp(24px, 3vw, 48px) !important;
        row-gap: 12px !important;
        padding: 26px 32px !important;
    }

    #promoCopy.promo-layout--catalog-split .catalog-eyebrow {
        grid-area: eyebrow;
        margin-bottom: 2px !important;
    }

    #promoCopy.promo-layout--catalog-split .catalog-hero h1 {
        grid-area: title;
        align-self: start;
        margin: 0 !important;
        font-size: clamp(2rem, 3vw, 3.35rem) !important;
        line-height: 1.02 !important;
    }

    #promoCopy.promo-layout--catalog-split .catalog-hero__summary {
        grid-area: summary;
        align-self: start;
        max-width: none !important;
        margin: 0 !important;
        font-size: 0.98rem !important;
        line-height: 1.5 !important;
    }

    #promoCopy.promo-layout--catalog-split .catalog-benefits {
        grid-area: benefits;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        margin: 2px 0 0 !important;
    }

    #promoCopy.promo-layout--catalog-split .catalog-benefits li {
        font-size: 0.88rem !important;
        line-height: 1.3 !important;
    }

    #promoCopy.promo-layout--catalog-split .catalog-hero__actions {
        grid-area: actions;
        margin-top: 4px !important;
    }

    #promoCopy.promo-layout--catalog-split .catalog-hero__media {
        align-self: stretch !important;
        height: auto !important;
        min-height: 300px !important;
        max-height: 360px !important;
    }
}

/* Allow the controls to stack before they can escape the viewport. */
@media screen and (max-width: 1099px) {
    .catalog-pagination-row {
        justify-content: stretch;
    }

    .catalog-pagination-row .pagination-filter-wrap:not(.pagesize-filter-wrap):not(.pagesize-filter-wrap2),
    .catalog-pagination-row .pagesize-filter-wrap,
    .catalog-pagination-row .pagesize-filter-wrap2 {
        flex: 1 1 240px;
        max-width: none !important;
    }
}

@media screen and (max-width: 767px) {
    .catalog-pagination-row .pagination-filter-wrap:not(.pagesize-filter-wrap):not(.pagesize-filter-wrap2),
    .catalog-pagination-row .pagesize-filter-wrap,
    .catalog-pagination-row .pagesize-filter-wrap2 {
        flex: 1 1 100%;
        width: 100% !important;
        max-width: 100% !important;
    }

    /*.catalog-pagination-row .filter-lbls,
    .catalog-pagination-row .pagesize-filter-wrap .filter-lbls,
    .catalog-pagination-row .pagesize-filter-wrap2 .filter-lbls {
        left: 0;
        right: auto;
        width: 100% !important;
        max-width: 100%;
    }*/
}

/* ==========================================================
   Catalog pagination alignment - v6
   Centers page and page-size controls over the product grid.
   ========================================================== */

.catalog-pagination-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 12px 18px !important;
    width: 100% !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
}

.catalog-pagination-row .pagination-filter-wrap {
    float: none !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    transform: none !important;
}

.catalog-pagination-row .pagination-filter-wrap:not(.pagesize-filter-wrap) {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 250px !important;
    max-width: min(520px, 100%) !important;
}

.catalog-pagination-row .pagesize-filter-wrap {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 150px !important;
    max-width: 190px !important;
}

.catalog-pagination-row .filter-selected,
.catalog-pagination-row .menu-trigger {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

@media screen and (max-width: 767px) {
    .catalog-pagination-row {
        gap: 10px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .catalog-pagination-row .pagination-filter-wrap,
    .catalog-pagination-row .pagination-filter-wrap:not(.pagesize-filter-wrap),
    .catalog-pagination-row .pagesize-filter-wrap {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* ==========================================================
   Service callout visibility and alignment - v7
   ========================================================== */

.promo-layout--catalog-split .catalog-service-callout__content {
    text-align: left !important;
}

.promo-layout--catalog-split .catalog-service-callout__content h2 {
    display: block !important;
    width: 100% !important;
    max-width: 760px !important;
    min-height: 0 !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    text-align: left !important;
    color: var(--catalog-white) !important;
}

.promo-layout--catalog-split .catalog-service-callout__content p {
    width: 100% !important;
    max-width: 760px !important;
    margin: 0 !important;
    text-align: left !important;
}

.promo-layout--catalog-split .catalog-service-callout__actions {
    justify-content: flex-start !important;
    margin-top: 24px !important;
}

/* Use a high-contrast light button inside the dark callout. */
.promo-layout--catalog-split .catalog-service-callout__actions .catalog-button--primary {
    border-color: var(--catalog-white) !important;
    color: var(--catalog-ink) !important;
    background: var(--catalog-white) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14),
                0 8px 22px rgba(0, 0, 0, 0.18) !important;
}

.promo-layout--catalog-split .catalog-service-callout__actions .catalog-button--primary:hover,
.promo-layout--catalog-split .catalog-service-callout__actions .catalog-button--primary:focus-visible {
    border-color: #e3e3e3 !important;
    color: var(--catalog-ink) !important;
    background: #e3e3e3 !important;
}

/* Make supporting callout links clearly visible and clickable. */
.promo-layout--catalog-split .catalog-service-callout__actions .catalog-text-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 46px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 999px !important;
    color: var(--catalog-white) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: background-color 160ms ease,
                border-color 160ms ease,
                transform 160ms ease !important;
}

.promo-layout--catalog-split .catalog-service-callout__actions .catalog-text-link:hover,
.promo-layout--catalog-split .catalog-service-callout__actions .catalog-text-link:focus-visible {
    border-color: var(--catalog-white) !important;
    color: var(--catalog-ink) !important;
    background: var(--catalog-white) !important;
    transform: translateY(-1px) !important;
}

@media screen and (max-width: 767px) {
    .promo-layout--catalog-split .catalog-service-callout__actions {
        width: 100% !important;
        margin-top: 20px !important;
    }

    .promo-layout--catalog-split .catalog-service-callout__actions .catalog-button,
    .promo-layout--catalog-split .catalog-service-callout__actions .catalog-text-link {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* =========================================================
   Catalog feature pages: retail-ready branding options
   ========================================================= */
.promo-layout--catalog-split .catalog-branding-options {
    position: relative !important;
    overflow: hidden !important;
    padding: clamp(28px, 4vw, 54px) !important;
    border: 1px solid #242424 !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 92% 8%, rgba(255,255,255,.09), transparent 28%),
        #111 !important;
    color: #fff !important;
}

.promo-layout--catalog-split .catalog-branding-options__header {
    display: grid !important;
    grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr) !important;
    align-items: end !important;
    gap: 24px 48px !important;
    margin: 0 0 30px !important;
}

.promo-layout--catalog-split .catalog-branding-options__header .catalog-eyebrow {
    display: block !important;
    margin: 0 0 9px !important;
    color: #a7dfb0 !important;
}

.promo-layout--catalog-split .catalog-branding-options__header h2 {
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    text-align: left !important;
    font-size: clamp(2rem, 3vw, 3.4rem) !important;
    line-height: .98 !important;
    letter-spacing: -.035em !important;
}

.promo-layout--catalog-split .catalog-branding-options__header p {
    max-width: 680px !important;
    margin: 0 !important;
    color: #d2d2d2 !important;
    font-size: clamp(1rem, 1.2vw, 1.14rem) !important;
    line-height: 1.65 !important;
}

.promo-layout--catalog-split .catalog-branding-options__grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin: 0 !important;
}

.promo-layout--catalog-split .catalog-branding-card {
    display: flex !important;
    min-width: 0 !important;
    min-height: 100% !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border: 1px solid #303030 !important;
    border-radius: 18px !important;
    background: #1a1a1a !important;
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.16) !important;
    transform: translateY(0) !important;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}

.promo-layout--catalog-split .catalog-branding-card:hover,
.promo-layout--catalog-split .catalog-branding-card:focus-visible {
    border-color: #6eaa78 !important;
    color: #fff !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.28) !important;
    transform: translateY(-4px) !important;
}

.promo-layout--catalog-split .catalog-branding-card__media {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    overflow: hidden !important;
    background: #292929 !important;
}

.promo-layout--catalog-split .catalog-branding-card__media > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: transform .35s ease !important;
}

.promo-layout--catalog-split .catalog-branding-card:hover .catalog-branding-card__media > img {
    transform: scale(1.035) !important;
}

.promo-layout--catalog-split .catalog-branding-card__icon {
    position: absolute !important;
    left: 16px !important;
    bottom: 14px !important;
    display: grid !important;
    width: 48px !important;
    height: 48px !important;
    place-items: center !important;
    padding: 8px !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    border-radius: 14px !important;
    background: rgba(17,17,17,.88) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.25) !important;
    backdrop-filter: blur(8px) !important;
}

.promo-layout--catalog-split .catalog-branding-card__icon img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 32px !important;
    max-height: 32px !important;
    margin: 0 !important;
    object-fit: contain !important;
}

.promo-layout--catalog-split .catalog-branding-card__content {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 20px !important;
}

.promo-layout--catalog-split .catalog-branding-card__content > strong {
    display: block !important;
    margin: 0 0 8px !important;
    color: #fff !important;
    font-size: 1.16rem !important;
    line-height: 1.25 !important;
}

.promo-layout--catalog-split .catalog-branding-card__content > span:not(.catalog-branding-card__pills):not(.catalog-branding-card__link) {
    display: block !important;
    margin: 0 !important;
    color: #c7c7c7 !important;
    font-size: .94rem !important;
    line-height: 1.55 !important;
}

.promo-layout--catalog-split .catalog-branding-card__pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin: 16px 0 18px !important;
}

.promo-layout--catalog-split .catalog-branding-card__pills > span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 27px !important;
    padding: 5px 9px !important;
    border: 1px solid rgba(167,223,176,.35) !important;
    border-radius: 999px !important;
    background: rgba(95,157,106,.16) !important;
    color: #c9f0cf !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
}

.promo-layout--catalog-split .catalog-branding-card__link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin-top: auto !important;
    color: #fff !important;
    font-size: .91rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(255,255,255,.45) !important;
    text-underline-offset: 4px !important;
}

.promo-layout--catalog-split .catalog-branding-card__link::after {
    content: "→" !important;
    text-decoration: none !important;
    transition: transform .2s ease !important;
}

.promo-layout--catalog-split .catalog-branding-card:hover .catalog-branding-card__link::after {
    transform: translateX(3px) !important;
}

.promo-layout--catalog-split .catalog-branding-options__footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px 34px !important;
    margin: 26px 0 0 !important;
    padding: 22px 0 0 !important;
    border-top: 1px solid #303030 !important;
}

.promo-layout--catalog-split .catalog-branding-options__footer p {
    max-width: 760px !important;
    margin: 0 !important;
    color: #d0d0d0 !important;
    line-height: 1.55 !important;
}

.promo-layout--catalog-split .catalog-branding-options__footer strong {
    color: #fff !important;
}

.promo-layout--catalog-split .catalog-branding-options__footer .catalog-button--primary {
    flex: 0 0 auto !important;
    border-color: #fff !important;
    background: #fff !important;
    color: #111 !important;
}

.promo-layout--catalog-split .catalog-branding-options__footer .catalog-button--primary:hover,
.promo-layout--catalog-split .catalog-branding-options__footer .catalog-button--primary:focus-visible {
    border-color: #a7dfb0 !important;
    background: #a7dfb0 !important;
    color: #111 !important;
}

@media screen and (max-width: 1050px) {
    .promo-layout--catalog-split .catalog-branding-options__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media screen and (max-width: 760px) {
    .promo-layout--catalog-split .catalog-branding-options {
        padding: 26px 17px !important;
        border-radius: 18px !important;
    }

    .promo-layout--catalog-split .catalog-branding-options__header {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin-bottom: 22px !important;
    }

    .promo-layout--catalog-split .catalog-branding-options__header h2 {
        font-size: clamp(1.9rem, 9vw, 2.55rem) !important;
    }

    .promo-layout--catalog-split .catalog-branding-options__grid {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 14px !important;
        margin-right: -17px !important;
        padding-right: 17px !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: thin !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .promo-layout--catalog-split .catalog-branding-card {
        flex: 0 0 min(82vw, 330px) !important;
        scroll-snap-align: start !important;
    }

    .promo-layout--catalog-split .catalog-branding-options__footer {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .promo-layout--catalog-split .catalog-branding-options__footer .catalog-button {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .promo-layout--catalog-split .catalog-branding-card,
    .promo-layout--catalog-split .catalog-branding-card__media > img,
    .promo-layout--catalog-split .catalog-branding-card__link::after {
        transition: none !important;
    }
}

/* ================================================================
   Catalog pagination stacking fix
   Scope only the pagination controls so they remain below:
   - catalog category dropdowns
   - breadcrumbs and surrounding catalog content
   - global header, search, and navigation overlays

   No category filter, breadcrumb, color, spacing, or sizing rules changed.
   ================================================================ */

.catalog-pagination-row {
    position: relative;
    /*z-index: 0;*/
}

/*.catalog-pagination-row .filter-lbls.open {
    z-index: 1 !important;
}*/

/* ================================================================
   Sticky catalog category filters
   Desktop: retain category controls and reveal "pick a product".
   Mobile: retain only the CTA while the bar is stuck.
   The existing global header remains above this bar when visible.
   ================================================================ */

:root {
    --catalog-sticky-top: 0px;
}

.catalog-filter-sentinel {
    display: block;
    width: 100%;
    height: 0;
    margin: 0;
    pointer-events: none;
}

.catalog-filter-bar {
    position: relative;
    /*z-index: 12;*/
    transition: top 160ms ease, box-shadow 160ms ease;
}

.catalog-filter-bar--stuck {
    position: fixed;
    top: 0;
    z-index: 30;
    /*  right: auto;
    bottom: auto;
    z-index: 90;*/
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.16);
}

.catalog-filter-bar--header-visible{
    top: 60px;
}

.catalog-filter-bar__cta {
    display: none;
    align-items: center;
    justify-content: center;
    float: right;
    min-height: 38px;
    margin: 31px 18px 0 8px;
    padding: 0 18px;
    border: 1px solid #fff;
    border-radius: 999px;
    background: #fff;
    color: #111 !important;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
    white-space: nowrap;
}

.catalog-filter-bar--stuck .catalog-filter-bar__cta {
    display: inline-flex;
}

.catalog-filter-bar__cta:hover,
.catalog-filter-bar__cta:focus-visible {
    background: #ededed;
    border-color: #ededed;
    color: #111 !important;
}

#genderSelection {
    scroll-margin-top: calc(var(--catalog-sticky-top) + 125px);
}

@media screen and (max-width: 767px) {
    .catalog-filter-bar--stuck {
        min-height: 58px;
        padding: 8px 12px;
        box-sizing: border-box;
    }

    .catalog-filter-bar--stuck > .filters-wrap {
        display: none;
    }

    .catalog-filter-bar--stuck .catalog-filter-bar__cta {
        display: flex;
        float: none;
        width: 100%;
        min-height: 42px;
        margin: 0;
        box-sizing: border-box;
        font-size: 0.92rem;
    }

    #genderSelection {
        scroll-margin-top: calc(var(--catalog-sticky-top) + 74px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .catalog-filter-bar {
        transition: none;
    }
}

/* ================================================================
   Sticky catalog filter bar v3 refinements
   - Full viewport width
   - Opaque black background
   - Open category picklists stay above page content
   ================================================================ */

.catalog-filter-bar--stuck {
  /*  left: 0 !important;
    right: 0 !important;*/
    width: 100% !important;
  /*  max-width: none !important;*/
    background-color: #1f1f1f;
    /*background-image: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;*/
}

    .catalog-filter-bar--stuck .outerColumn {
       /* width: 12%;*/
        display: grid;
        place-items: center;
        float: left;
        height: 100%;
        max-width: 200px;
        min-width: 135px;
    }

    /*.catalog-filter-bar--stuck .outerC1 {
        grid-column: 1
    }

    .catalog-filter-bar--stuck .outerC3 {
        grid-column: 3
    }*/

.catalog-filter-bar--stuck .filters-wrap {
    position: relative;
}

.catalog-filter-bar--stuck .filter-lbls.open {
    z-index: 120 !important;
}

.catalog-filter-bar--stuck .filters-wrap:focus-within,
.catalog-filter-bar--stuck .filters-wrap:hover {
    z-index: 121;
}

.catalog-filter-bar--stuck .filter-lbls.open {
    position: absolute;
}

@media screen and (max-width: 767px) {
    .catalog-filter-bar--stuck {
        width: 100% !important;
        background-color: #1f1f1f !important;
    }
}

/* ================================================================
   Catalog filter dropdowns in normal flow
   Keep open category picklists above breadcrumbs, promo content,
   pagination, and product cards before the filter bar becomes fixed.
   ================================================================ */

.catalog-filter-bar:not(.catalog-filter-bar--stuck) {
    display: inline-block;
   /* overflow: visible;*/
    width: 100%;
}

.catalog-filter-bar:not(.catalog-filter-bar--stuck) .filters-wrap {
    position: relative;
}
/*.catalog-filter-bar:not(.catalog-filter-bar--stuck) .filter-lbls.open {
    position: absolute;
    z-index: 120 !important;
}*/


.catalog-filter-bar:not(.catalog-filter-bar--stuck) .filters-wrap:focus-within,
.catalog-filter-bar:not(.catalog-filter-bar--stuck) .filters-wrap:hover {
    z-index: 121;
}

/* ================================================================
   Sticky catalog filter logo
   Hidden in normal flow; shown only while the catalog bar is fixed.
   ================================================================ */

.catalog-filter-bar__logo {
    display: none;
}

.catalog-filter-bar--stuck .catalog-filter-bar__logo {
    display: block;
   /* align-items: center;
    justify-content: center;*/
    float: left;
    /*width: 132px;
    height: 90px;
    margin: 0 18px 0 20px;
    padding: 0;
    box-sizing: border-box;*/
}

.catalog-filter-bar--stuck .catalog-filter-bar__logo img {
    display: block;
    width: 100%;
    max-width: 118px;
    height: auto;
    margin: 0;
}

@media screen and (max-width: 767px) {
    .catalog-filter-bar--stuck {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .catalog-filter-bar--stuck .catalog-filter-bar__logo {
        /*display: flex;*/
        flex: 0 0 auto;
        float: none;
        width: 92px;
        height: 42px;
        margin: 0;
    }

    .catalog-filter-bar--stuck .catalog-filter-bar__logo img {
        max-width: 84px;
    }

    .catalog-filter-bar--stuck .catalog-filter-bar__cta {
        flex: 1 1 auto;
        width: auto;
    }
}

/* ================================================================
   Catalog value proposition strip
   Native replacement for the desktop category-page experiment.
   No injection JavaScript is required because the HTML is rendered
   directly by Index.cshtml.
   ================================================================ */

.cc-apv-section--16042776 {
    display: none;
}

@media screen and (min-width: 768px) {
    .cc-apv-section--16042776 {
        display: block;
        clear: both;
        padding: 40px 0 0;
    }

    .cc-apv-section--16042776 .cc-apv-wrap {
        display: flex;
        align-items: baseline;
        justify-content: space-evenly;
        width: 100%;
    }

    .cc-apv-section--16042776 .cc-apv-list {
        position: relative;
        text-align: center;
        outline: none;
    }

    .cc-apv-section--16042776 .cc-apv-imgOne,
    .cc-apv-section--16042776 .cc-apv-imgTwo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        margin: auto;
    }

    .cc-apv-section--16042776 .cc-apv-imgTwo {
        display: none;
    }

    .cc-apv-section--16042776 .cc-apv-text {
        padding: 10px 0 0;
        color: #222;
        font-size: 18px;
        font-weight: 400;
        line-height: 1.2;
    }

    .cc-apv-section--16042776 .cc-apv-popup {
        position: absolute;
        z-index: 130;
        top: -98px;
        left: 50%;
        display: none;
        width: 240px;
        padding: 15px;
        border: 1px solid #1b1b1b;
        background: #f5f5f5;
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
        color: #222;
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
        text-align: left;
        transform: translateX(-50%);
        box-sizing: border-box;
    }

    .cc-apv-section--16042776 .cc-apv-popup::after {
        position: absolute;
        bottom: -13px;
        left: 50%;
        width: 14px;
        height: 12px;
        background-image: url('https://cdn.convertcart.com/uploads/88dda1c0.svg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: '';
        transform: translateX(-50%);
    }

    .cc-apv-section--16042776 .cc-apv-popup.cc-first {
        left: 0;
        transform: none;
    }

    .cc-apv-section--16042776 .cc-apv-popup.cc-first::after {
        left: 25px;
        transform: none;
    }

    .cc-apv-section--16042776 .cc-apv-popup.cc-last {
        right: 0;
        left: auto;
        transform: none;
    }

    .cc-apv-section--16042776 .cc-apv-popup.cc-last::after {
        right: 53px;
        left: auto;
        transform: none;
    }

    .cc-apv-section--16042776 .cc-apv-popup.cc-twolines {
        top: -81px;
    }

    .cc-apv-section--16042776 .cc-apv-list:hover .cc-apv-imgTwo,
    .cc-apv-section--16042776 .cc-apv-list:focus .cc-apv-imgTwo,
    .cc-apv-section--16042776 .cc-apv-list:focus-within .cc-apv-imgTwo {
        display: block;
    }

    .cc-apv-section--16042776 .cc-apv-list:hover .cc-apv-imgOne,
    .cc-apv-section--16042776 .cc-apv-list:focus .cc-apv-imgOne,
    .cc-apv-section--16042776 .cc-apv-list:focus-within .cc-apv-imgOne {
        display: none;
    }

    .cc-apv-section--16042776 .cc-apv-list:hover .cc-apv-popup,
    .cc-apv-section--16042776 .cc-apv-list:focus .cc-apv-popup,
    .cc-apv-section--16042776 .cc-apv-list:focus-within .cc-apv-popup {
        display: block;
    }
}

/* ================================================================
   Catalog value proposition strip: mobile
   Uses the same HTML as desktop, arranged as two rows of three.
   JavaScript only toggles .isActive for dependable tap behavior.
   ================================================================ */

@media screen and (max-width: 767px) {
    .cc-apv-section--16042776 {
        display: block;
        clear: both;
        margin: 40px 0;
        padding: 0;
    }

    .cc-apv-section--16042776 .cc-apv-wrap {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: start;
        row-gap: 40px;
        width: 100%;
        margin: 0;
    }

    .cc-apv-section--16042776 .cc-apv-list {
        position: relative;
        min-width: 0;
        text-align: center;
        outline: none;
    }

    .cc-apv-section--16042776 .cc-apv-imgOne,
    .cc-apv-section--16042776 .cc-apv-imgTwo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin: auto;
    }

    .cc-apv-section--16042776 .cc-apv-imgTwo {
        display: none;
    }

    .cc-apv-section--16042776 .cc-apv-text {
        padding: 10px 4px 0;
        color: #222;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.2;
    }

    .cc-apv-section--16042776 .cc-apv-popup {
        position: absolute;
        z-index: 130;
        top: 95px;
        left: 50%;
        display: none;
        width: 240px;
        padding: 15px;
        border: 1px solid #1b1b1b;
        background: #f5f5f5;
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
        color: #222;
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
        text-align: left;
        transform: translateX(-50%);
        box-sizing: border-box;
    }

    .cc-apv-section--16042776 .cc-apv-popup::after {
        position: absolute;
        top: -12px;
        left: 50%;
        width: 14px;
        height: 12px;
        background-image: url('https://cdn.convertcart.com/uploads/adb90429.svg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: '';
        transform: translateX(-50%);
    }

    .cc-apv-section--16042776 .cc-apv-list:nth-child(3n + 1) .cc-apv-popup {
        left: 0;
        transform: none;
    }

    .cc-apv-section--16042776 .cc-apv-list:nth-child(3n + 1) .cc-apv-popup::after {
        left: 15px;
        transform: none;
    }

    .cc-apv-section--16042776 .cc-apv-list:nth-child(3n) .cc-apv-popup {
        right: 0;
        left: auto;
        transform: none;
    }

    .cc-apv-section--16042776 .cc-apv-list:nth-child(3n) .cc-apv-popup::after {
        right: 30px;
        left: auto;
        transform: none;
    }

    .cc-apv-section--16042776 .cc-apv-list.isActive .cc-apv-imgTwo {
        display: block;
    }

    .cc-apv-section--16042776 .cc-apv-list.isActive .cc-apv-imgOne {
        display: none;
    }

    .cc-apv-section--16042776 .cc-apv-list.isActive .cc-apv-popup {
        display: block;
    }
}

/* Add breathing room between the value-prop icons and the footer
   on category pages with little or no content below this section. */
.cc-apv-section--16042776 .cc-apv-wrap {
    padding-bottom: 40px;
}

@media screen and (max-width: 767px) {
    .cc-apv-section--16042776 .cc-apv-wrap {
        padding-bottom: 24px;
    }

    .cc-apv-section--16042776 .cc-apv-wrap:last-child {
        padding-bottom: 40px;
    }
}

/* ================================================================
   Activewear branding cards: shorter, lighter horizontal scroller
   ================================================================ */

.promo-layout--catalog-split .catalog-branding-options__grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 18px !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0 14px !important;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.promo-layout--catalog-split .catalog-branding-card {
    flex: 0 0 300px !important;
    min-width: 300px !important;
    min-height: 0 !important;
    scroll-snap-align: start;
    background: #fff !important;
    color: #222 !important;
}

.promo-layout--catalog-split .catalog-branding-card:hover,
.promo-layout--catalog-split .catalog-branding-card:focus-visible {
    color: #222 !important;
}

.promo-layout--catalog-split .catalog-branding-card__media {
    aspect-ratio: 16 / 8.5 !important;
}

.promo-layout--catalog-split .catalog-branding-card__content {
    padding: 18px !important;
    background: #fff !important;
    color: #222 !important;
}

.promo-layout--catalog-split .catalog-branding-card__content > strong {
    color: #222 !important;
}

.promo-layout--catalog-split .catalog-branding-card__content > span:not(.catalog-branding-card__pills):not(.catalog-branding-card__link) {
    color: #555 !important;
}

.promo-layout--catalog-split .catalog-branding-card__pills {
    margin: 14px 0 16px !important;
}

.promo-layout--catalog-split .catalog-branding-card__pills > span {
    border-color: rgba(95,157,106,.28) !important;
    background: rgba(95,157,106,.10) !important;
    color: #35683e !important;
}

.promo-layout--catalog-split .catalog-branding-card__link {
    color: #222 !important;
    text-decoration-color: rgba(34,34,34,.35) !important;
}

@media screen and (max-width: 767px) {
    .promo-layout--catalog-split .catalog-branding-card {
        flex-basis: min(82vw, 290px) !important;
        min-width: min(82vw, 290px) !important;
    }
}

/* ================================================================
   Responsive sticky catalog header layout
   Desktop: logo | filter controls | CTA
   Mobile: logo | filter button, with expandable controls below
   ================================================================ */

.catalog-filter-toggle {
    display: none;
}

@media screen and (min-width: 768px) {
    .catalog-filter-bar--stuck {
        display: block;
        overflow: initial;
        /*grid-template-columns: 140px minmax(0, 1fr) auto !important;
        align-items: center !important;
        column-gap: 20px !important;
        min-height: 90px !important;
        padding: 0 20px !important;*/
    }

        .catalog-filter-bar--stuck .catalog-filter-bar__logo {
            /*grid-column: 1;
        align-self: stretch;
        float: none !important;
        height: auto !important;*/
            /* width: 140px !important;
            margin: 0 !important;*/
            margin-top: 18px;
        }

        .catalog-filter-bar--stuck .catalog-filter-controls {
            /* grid-column: 2;*/
            display: flex;
            align-items: center;
            align-content: center;
            flex-wrap: wrap;
            gap: 0;
            min-width: 0;
            max-width: calc(100vw - 330px);
            float: left;
        }

    .catalog-filter-bar--stuck .catalog-filter-controls > .filters-wrap {
        float: none !important;
        flex: 0 0 auto;
    }

   /* .catalog-filter-bar--stuck .catalog-filter-bar__cta {
        grid-column: 3;
        align-self: center;
        float: none !important;
        margin: 0 !important;
    }*/
}

@media screen and (max-width: 767px) {
    .catalog-filter-bar--stuck {
        display: grid !important;
        grid-template-columns: minmax(82px, auto) minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 8px 12px !important;
        min-height: 58px !important;
        padding: 8px 12px !important;
    }

    /*.catalog-filter-bar--stuck .catalog-filter-bar__logo {
        grid-column: 1;
        grid-row: 1;
        width: 92px !important;
        height: 42px !important;
        margin: 0 !important;
    }*/

    .catalog-filter-bar--stuck .catalog-filter-bar__cta {
        display: none !important;
    }

    .catalog-filter-bar--stuck .catalog-filter-toggle {
        grid-column: 2;
        grid-row: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 42px;
        margin: 0;
        padding: 0 18px;
        border: 1px solid #fff;
        border-radius: 999px;
        background: #fff;
        color: #111;
        font: inherit;
        font-size: .92rem;
        font-weight: 700;
        line-height: 1.2;
        text-transform: lowercase;
        cursor: pointer;
        box-sizing: border-box;
    }

    .catalog-filter-bar--stuck .catalog-filter-toggle::after {
        content: "+";
        margin-left: 8px;
        font-size: 1rem;
        line-height: 1;
    }

    .catalog-filter-bar--stuck.catalog-filter-bar--mobile-open
        .catalog-filter-toggle::after {
        content: "−";
    }

    .catalog-filter-bar--stuck .catalog-filter-controls {
        display: none;
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        max-height: calc(100vh - var(--catalog-sticky-top) - 74px);
        overflow-x: hidden;
        overflow-y: auto;
        padding: 10px 0 4px;
        border-top: 1px solid rgba(255,255,255,.18);
        box-sizing: border-box;
        overscroll-behavior: contain;
    }

    .catalog-filter-bar--stuck.catalog-filter-bar--mobile-open
        .catalog-filter-controls {
        display: block;
    }

    .catalog-filter-bar--stuck .catalog-filter-controls > .filters-wrap {
        display: block !important;
        float: none !important;
        width: 100% !important;
        margin: 0 0 8px !important;
        box-sizing: border-box;
    }

    .catalog-filter-bar--stuck .catalog-filter-controls
        > .filters-wrap:last-child {
        margin-bottom: 0 !important;
    }

    .catalog-filter-bar--stuck .catalog-filter-controls .filter-lbls.open {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-height: 42vh;
        overflow-y: auto;
        margin-top: 4px;
        z-index: 122 !important;
    }

    #genderSelection {
        scroll-margin-top: calc(var(--catalog-sticky-top) + 74px);
    }
}

/* Ensure the mobile sticky Filter button remains readable against
   inherited catalog/header link and button color rules. */
@media screen and (max-width: 767px) {
    .catalog-filter-bar--stuck .catalog-filter-toggle,
    .catalog-filter-bar--stuck .catalog-filter-toggle:hover,
    .catalog-filter-bar--stuck .catalog-filter-toggle:focus,
    .catalog-filter-bar--stuck .catalog-filter-toggle:focus-visible,
    .catalog-filter-bar--stuck .catalog-filter-toggle:active {
        background-color: #fff !important;
        border-color: #fff !important;
        color: #111 !important;
        -webkit-text-fill-color: #111 !important;
    }

    .catalog-filter-bar--stuck .catalog-filter-toggle::after {
        color: #111 !important;
        -webkit-text-fill-color: #111 !important;
    }
}

/* Make the branding-card horizontal scrollbar visible on desktop.
   The section has a light card surface, so the scrollbar needs an
   explicit dark thumb and contrasting track. */
@media screen and (min-width: 768px) {
    .promo-layout--catalog-split .catalog-branding-options__grid {
        scrollbar-color: #555 #e5e5e5 !important;
        scrollbar-width: auto !important;
        padding-bottom: 18px !important;
    }

    .promo-layout--catalog-split
        .catalog-branding-options__grid::-webkit-scrollbar {
        height: 10px !important;
    }

    .promo-layout--catalog-split
        .catalog-branding-options__grid::-webkit-scrollbar-track {
        background: #e5e5e5 !important;
        border-radius: 999px !important;
    }

    .promo-layout--catalog-split
        .catalog-branding-options__grid::-webkit-scrollbar-thumb {
        background: #555 !important;
        border: 2px solid #e5e5e5 !important;
        border-radius: 999px !important;
    }

    .promo-layout--catalog-split
        .catalog-branding-options__grid::-webkit-scrollbar-thumb:hover {
        background: #222 !important;
    }
}

/* ================================================================
   Global header and catalog sticky-bar stacking
   Keep the primary Products / Services / Get Started navigation and
   all of its dropdown menus above the fixed black catalog filter bar.
   ================================================================ */

/*body > header {
    position: relative;
    z-index: 199 !important;
}*/

/* Preserve the header's existing fixed or sticky positioning when
   sitewide scripts apply it through inline styles or state classes. */
/*body > header[style*="position: fixed"],
body > header[style*="position:fixed"],
body > header[style*="position: sticky"],
body > header[style*="position:sticky"],
body > header.is-fixed,
body > header.fixed,
body > header.sticky,
body > header.header--fixed,
body > header.header--sticky {
    z-index: 1000 !important;
}*/

/*body > header nav,
body > header .nav,
body > header .navigation,
body > header .main-nav,
body > header .mainNav,
body > header .header-nav,
body > header .headerNav {
    position: relative;
    z-index: 1001 !important;
}

body > header .dropdown,
body > header .dropdown-menu,
body > header .submenu,
body > header .sub-menu,
body > header .mega-menu,
body > header .megaMenu,
body > header .menulist,
body > header [class*="dropdown"],
body > header [class*="sub-menu"],
body > header [class*="submenu"],
body > header [class*="mega-menu"] {
    z-index: 1010 !important;
}*/

/* The catalog filter stays above page content, but below the global
   navigation and its dropdown menus. */
/*.catalog-filter-bar--stuck {
    z-index: 900 !important;
}*/

.catalog-filter-bar--stuck .filter-lbls.open {
    z-index: 920 !important;
}

.catalog-filter-bar--stuck .filters-wrap:focus-within,
.catalog-filter-bar--stuck .filters-wrap:hover {
    z-index: 921 !important;
}


/* ================================================================
   Activewear hero action hierarchy
   Protect the secondary text CTA from broad sitewide a/a:visited
   typography rules and keep it subordinate to the primary button.
   ================================================================ */

#promoCopy.promo-layout--catalog-split
    .catalog-hero__actions
    .catalog-text-link,
#promoCopy.promo-layout--catalog-split
    .catalog-hero__actions
    .catalog-text-link:link,
#promoCopy.promo-layout--catalog-split
    .catalog-hero__actions
    .catalog-text-link:visited {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 6px 4px !important;
    color: var(--catalog-ink) !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 4px !important;
    text-transform: none !important;
}

#promoCopy.promo-layout--catalog-split
    .catalog-hero__actions
    .catalog-text-link::after {
    margin-left: 6px;
    content: "→";
    font-size: 0.9em;
    text-decoration: none;
}

#promoCopy.promo-layout--catalog-split
    .catalog-hero__actions
    .catalog-text-link:hover,
#promoCopy.promo-layout--catalog-split
    .catalog-hero__actions
    .catalog-text-link:focus-visible {
    color: var(--catalog-accent) !important;
}

@media screen and (max-width: 767px) {
    #promoCopy.promo-layout--catalog-split
        .catalog-hero__actions
        .catalog-text-link,
    #promoCopy.promo-layout--catalog-split
        .catalog-hero__actions
        .catalog-text-link:link,
    #promoCopy.promo-layout--catalog-split
        .catalog-hero__actions
        .catalog-text-link:visited {
        justify-content: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}