/* COMMON (hh-common.css)
--------------------------------------------------- */

:root {
	--fontsize: 16px; /* 13pt */
	--buttonfontsize: 18px;
	--gap: 24px; /* 1.5rem */
	--hh-red: #d6001c;
	--hh-pro: #333;
	--hh-grey: #e6e7e8;
	--hh-light-grey: #F7F7F7;
	--hh-medium-grey: #9EA2A2;
	--hh-dark-grey:#54585A;
	--hh-yellow: #ffd100;
	--hh-white: #ffffff;
	--hh-green: #02813C;
	--hh-black: #000000;
	--hh-green-saleLink-Banner: #00A752;
	--hh-yellow-saleLink-Banner: #FEDF01;
	--hh-hotbuy-yellow: #F9DD4C;
	--hh-skeleton-grey: #E6E7E8;
	--width: 1600px;
	--grid-column: 5;
	--button-color: var(--hh-red);
}

@media (max-width: 999px) {
	:root {
		--fontsize: 15.5px; /* 13pt */
		--buttonfontsize: 16px;
		--gap: 1.5rem; /* 1.5rem */
	}
}

@media (max-width: 799px) {
	:root {
		--fontsize: 14px; /* 10.5pt */
		--buttonfontsize: 15px;
		--gap: 1rem; /* 1rem */
		--grid-column: 2;
	}
}

@media (min-width: 600px) {
	:root {
		--grid-column: 2;
	}
}

@media (min-width: 749px) {
	:root {
		--grid-column: 3;
	}
}

@media (min-width: 1049px) {
	:root {
		--grid-column: 4;
	}
}

@media (min-width: 1300px) {
	:root {
		--grid-column: 5;
	}
}

@media (min-width: 1500px) {
	:root {
		--grid-column: 5;
	}
}

html {
	scroll-behavior: smooth;
	font-size: var(--fontsize);
}
body {
	margin: 0;
	color: #000;
	font-size: var(--fontsize);
	font: var(--fontsize)/160% "hhAgendaMedium", sans-serif;
	font-weight: normal;
	letter-spacing: .04em;
}
/* when navigation is active, prevents page from scrolling behind (progressive enhancement) */
body:has(#navigation.active) {
	overflow: hidden;
}

html.js .noscript {
	display: none;
}

h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
	font-family: "hhAgendaBold", sans-serif;
	font-weight: normal;
	margin: 0;
	padding: 0;
	font-size: 3.25rem;
	line-height: 110%;
	display: block;
}
h1, .h1 {
	font-size: 2.5rem;
}
h2, .h2 {
	font-size: 2rem;
}
h3, .h3 {
	font-size: 1.5rem;
}
h4, .h4 {
	font-size: 1.125rem;
}
h5, .h5 {
	font-size: 1rem;
	font-family: "hhAgendaBold", sans-serif;
	font-weight: normal;
}
small, .Small {
	font-size: 0.875rem;
}

sup.Trademark {
	font-size: 0.4rem;
}

.Light {
	font-family: "hhAgendaMedium", sans-serif !important;
}

.Success {
	color: var(--hh-green);
}

@media (max-width: 799px) {
	h1, h2, h3, h4,
	.h1, .h2, .h3, .h4 {
		font-size: 2.5rem;
	}
	h2, .h2 {
		font-size: 2rem;
	}
	h3, .h3 {
		font-size: 1.5rem;
	}
	h4, .h4 {
		font-size: 1.15rem;
	}
}

p, .p {
	margin: 0;
	padding: .75em 0;
}
.p {
	font-family: "hhAgendaMedium", sans-serif;
	font-weight: normal;
	letter-spacing: .04em;
	display: block;
}
p:empty {
	display: none;
}

body > section p > img {
	vertical-align: -33%;
}

address {
	font-style: normal;
}

a {
	color: #000;
	cursor: pointer;
	/* text-decoration: underline; */
	/* text-decoration-color: red; */
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

*[onclick] {
	cursor: pointer;
}

b, strong {
	font-family: "hhAgendaBold", sans-serif;
	font-weight: normal;
}

.Body {
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
}

.SimpleList {
	padding: 0 !important;
	list-style-type: none;
}

.NoPadding {
	padding-block: 0 !important;
}
div:has(div.grecaptcha-badge) {
	padding-block: 0 !important;
}


/* Hr is disappearing in different zoom levels and in different devices and browsers when controlled by height and background so changing it to border-top -Nawanit*/
hr {
	margin: var(--gap) 0;
	border: 0;
	border-top: 1px solid var(--hh-grey);
}

body > hr {
	margin: var(--gap) auto;
	max-width: 1600px;
	padding: 0 !important;
}

main > section,
body > *,
.Body > * { /* body > section */
	padding: var(--gap);
}
.sectionHeading {
	padding-bottom: var(--gap);
}
.featuredBrand .sectionHeading {
	padding-bottom: 0;
}
.sectionHeading:has(h2:empty) {
	padding-top: 0;
	padding-bottom: 0;
}
/* section > .sectionHeading:has(h2:not(:empty)) {
	padding-bottom: var(--gap);
} */

/* section > section {
	margin-top: calc(var(--gap) * 2);
	margin-bottom: calc(var(--gap) * 2);
} */
section:empty,
div:empty:not(.aclogo),
h3:empty ,
h1:empty {
	display: none;
}

@media screen and (min-width: 1600px) {
	body > *,
	.Body > * {
		box-sizing: border-box;
		max-width: 100vw;
		padding-left: max(calc(((100vw - var(--width)) / 2)), var(--gap)) !important;
		padding-right: max(calc(((100vw - var(--width)) / 2)), var(--gap)) !important;
	}
	.full {
		position: relative;
		box-sizing: border-box;
		width: 100vw;
		left: calc((100vw - var(--width)) / -2);
	}
}

.richtext a,
p a:not([class]) {
	color: var(--hh-red);
}



html[data-page-type="blog"] body > section:not([id^="hh-"]) {
	max-width: 1300px;
	margin: auto;
}
@media (min-width: 1300px) {
	html[data-page-type="blog"] body > section:not([id^="hh-"]) {
		padding-inline: 0 !important;
	}
}

html[data-page-type="blog"] body > section:not([id^="hh-"]) + section:not([id^="hh-"]) {
	/* padding-block: 0; */
	padding-top: 0;
	padding-bottom: 0;
}





.AvoidBreak {
	display: inline-block;
	break-inside: avoid;
}




.IconData {
	font-size: .95rem;
	line-height: 120%;
	display: flex;
	padding: calc(var(--gap) * .3333) 0 0 0;
	gap: 0.25em;
}
.Icon,
.IconData .Icon {
	display: inline-block;
	height: 0.75em !important;
	width: 0.75em !important;
	/* width: auto; */
	padding: 0 .25em 0 0 !important;
	margin: 0 !important;
	vertical-align: -10%;
	object-fit: contain;
	/* -16% */
}
.Icon.Big,
.IconData .Icon.Big {
	height: 1rem !important;
	width: 1rem !important;
}
.Icon.Bigger {
	height: 1.25rem !important;
	width: 1.25rem !important;
	vertical-align: -12%;
	padding-right: calc(var(--gap) / 4) !important;
}
.ProductCard .Icon {
	transform: translateY(0.1875em);
}



.Pointer {
	cursor: pointer;
}


article.Narrow {
	max-width: calc(1300px + (var(--gap)) * 2);
	margin: auto;
	padding-left: var(--gap) !important;
	padding-right: var(--gap) !important;
}
article.Narrow .RichText {
	padding: 0 !important;
}
article.Narrow > section {
	padding: var(--gap) 0;
}
.CtaHeading {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: var(--gap);
	/* row-gap: calc(var(--gap) / 2); */
	justify-content: space-between;
	padding: var(--gap) 0;
}
.CtaHeading + .Grid {
	margin-top: 0;
	padding-top: 0;
}
.CtaHeading > *:not(.Button) {
	flex-grow: 1;
}
.CtaHeading > * {
	align-self: center;
}
.CtaHeading > h2,
.CtaHeading > h3 {
	display: flex;
	gap: var(--gap);
	padding: 0;
	margin: 0;
	line-height: 150%;
}
.CtaHeading > h3 {
	grid-column: 1/3;
}
.CtaHeading > a.Button.ButtonSecondary:hover {
	text-decoration: none;
}
.CtaHeadingLine > h2::after {
	content: ' ';
	background: var(--hh-red);
	flex-grow: 1;
	height: 1.5px;
	align-self: center;
}
.CtaHeading:has(h2:empty) {
	display: none;
}
@media (max-width: 600px) {
	.CtaHeading {
		grid-template-columns: 1fr;
		row-gap: var(--gap);
		justify-items: flex-start;
	}
	.CtaHeading > h2,
	.CtaHeading > h3 {
		line-height: 120%;
	}
	.CtaHeadingLine > h2::after {
		display: none;
	}
	.CtaHeading > h3 {
		grid-column: 1/2;
		grid-row: 2/3;
	}
}

.Accordion {
	border-top: 1px solid var(--hh-grey);
	border-bottom: 1px solid var(--hh-grey);
	/* padding-block: calc(var(--hh-grey) / 2); */
	padding-top: calc(var(--gap) * .5) !important;
	padding-bottom: calc(var(--gap) * .5) !important;
}
.Accordion + .Accordion {
	border-top: none;
}

.Narrow {
	max-width: 1300px;
	margin: auto;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.Narrow .RichText {
	padding: 0 !important;
}
.Narrow > section {
	padding: var(--gap) 0;
}
.UltraNarrow {
	width: 100%;
	max-width: 800px;
	margin-inline: auto !important;
}

figure {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
}
figure.FigureSquare,
.DOTW-Product figure {
	background-color: #0001;
	position: relative;
	width: 100%;
	padding-top: 100%;
}

figure.FigureSquare img,
.DOTW-Product figure img {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	}

/* dev output */
code, pre {
	font-size: .9em;
	color: #cd0066;
}
pre {
	display: block;
	width: 90%;
	padding: var(--gap);
	border: 1.5px solid #f2f2f2;
	border-radius: 5px;
	overflow-x: scroll;
}
noscript {
	/* color: orangered;
	font-family: "hhAgendaBold", sans-serif;
	padding: .75rem 1.5rem;
	border: 1px dashed orangered;
	display: block; */
	padding: 0;
}

.SaveStory {
	font-family: "hhAgendaBlack", sans-serif;
	text-transform: uppercase;
	display: block;
}
.SaveStory .UpTo {
	color: var(--hero-text-color, inherit);
	font-family: 'hhAgendaMedium', 'sans-serif';
	text-transform: lowercase;
	font-size: 0.75em;
}
.SaveStory .OrMore {
	font-family: 'hhAgendaMedium', 'sans-serif';
	font-size: 0.75em;
	color: var(--hero-text-color, inherit);
	display: inline-grid;
	grid-auto-flow: row;
	width: 2ch;
	line-height: 85%;
	font-size: 0.45em;
	vertical-align: middle;
	text-transform: uppercase;
}
.SaveStory .OrMore > strong {
	color: var(--hero-accent-text, inherit) !important;
}
*:not(.ThemePro,.ThemeRed) .SaveStory {
	color: var(--hh-red);
}

/** Commented to resolve conflicts --Nawanit **/
/* .ThemeRed .SaveStory,
.ThemePro .SaveStory {
	color: var(--hh-white);
} */
.ThemePro .SaveStory,
.ThemeRed .SaveStory {
	color: var(--hh-white);
}
/* TEMPORARY FIX - 07/19/22 */
.adBlockSection .ThemeRed .SaveStory,
.adBlockSection .ThemePro .SaveStory {
	color: var(--hh-white);
}

[lang="en"] .SaveStory .UpTo {
	color: var(--hero-text-color, inherit);
	display: inline-grid;
	grid-auto-flow: row;
	width: 2ch;
	line-height: 85%;
	font-size: 0.45em;
	vertical-align: middle;
	text-transform: uppercase;
}

.Center {
	text-align: center;
}

.FeaturedBrands a > img {
	max-width: 200px;
	margin: auto;
}

.HHSlogan {
	text-align: center;
	color: var(--hh-red);
	font-family: "hhAgendaBlack", sans-serif;
}
.HHSlogan img {
	width: auto;
	height: 2.75rem;
	transform: translateY(-12px) translateX(-14px);
}

@media (min-width: 1300px) {
	.HHSlogan {
		font-size: 3.5rem;
	}
}
@media (max-width: 1300px) {
	.HHSlogan img {
		width: auto;
		height: 1.5rem;
		transform: translateY(-5px) translateX(-5px);
	}
}
@media (max-width: 900px) {
	.HHSlogan img {
		width: auto;
		height: 1.5rem;
		transform: translateY(0) translateX(0);
	}
}

.Center {
	text-align: center;
}

.Tint {
	background-color: #f5f5f5;
	margin: var(--gap) 0;
	box-shadow: 0 0 0 100vmax #f5f5f5;
	clip-path: inset(0 -100vmax);
}

.Tint + section {
	padding-top: calc(var(--gap) * 2);
}

img[src=""] { display: none }



details {
	background: var(--hh-white);
	padding: 0.8rem 0rem;
}
details summary {
	outline: none;
	cursor: pointer;
	background: url("/_icons/icon-plus.black.svg") no-repeat right center / .8em;
}
details[open] summary {
	background-image: url("/_icons/icon-minus.black.svg");
}

details summary.Chevron {
	outline: none;
	cursor: pointer;
	background: url("/_icons/icon-chevron-down.black.svg") no-repeat right center / .8em;
}
details[open] summary.Chevron {
	background-image: url("/_icons/icon-chevron.black.svg");
}

/* <details class="Accordion-Overview" open=""><summary class="h4">DynAttribute_23</summary> <fieldset class="FormChecklist"><label><input type="checkbox" value="tenant~dynattribute-23:e-commerce item"> e-commerce item (2)
				</label></fieldset> <details class="chevron-test"><summary>More</summary><fieldset class="FormChecklist"><label><input type="checkbox" value="tenant~dynattribute-23:e-commerce item"> e-commerce item (2)
				</label></fieldset></details></details> */

/* details summary::after {
	content: url("/_icons/icon-footer-plus.svg");
	color: #000000;		
	float: right;
	margin-left: 5px;	
	width: 15px;
	height: 12px;
} 
details summary > *:first-child {
	display: flex;
	justify-content: space-between;
	align-content: center;
}
details[open] summary::after {	
	content: url("/_icons/icon-footer-minus.svg");
	width: 14px;
	height: 2px;	
} */
/* details summary > *:first-child::after {
	content: "+";
}
details[open] summary > *:first-child::after {
	content: "-";
} */
details summary { list-style: none }
details summary::-webkit-details-marker {display: none; }

/* review these to see if still required */
a[data-ref="myStore"] {
	overflow: hidden;
	text-overflow: ellipsis;
}
*[data-static-product-code] {
	background: transparent;
	transition: background .25s ease;
}
*[data-static-product-code]:empty {
	background: #f9f9f9;
	min-height: 6.3rem;
}
body > mark {
	font-family: "hhAgendaMedium", sans-serif;
	display: block;
	text-align: center;
	font-size: .85em;
	background: rgb(255, 206, 0);
	padding: .2em .15em 0;
}
body > mark a {
	color: inherit;
	text-decoration: underline;
}
.Instruction {
	display: grid;
	grid-gap: var(--gap);
	grid-template-columns: auto 1fr;
	margin-bottom: var(--gap);
}
.Instruction > img {
	width: 200px;
	height: 200px;
	border-radius: 5px;
	object-fit: cover;
	object-position: 50% 50%;
	align-self: top;
}
.Instruction > div {
	align-self: center;
}
img.cms {
	border-radius: 5px;
	margin: var(--gap) 0;
}
img.cms.floatleft {
	max-width: 50%;
	height: auto;
	float: left;
	margin-right: var(--gap);
}


/* STICKY ADD TO CART SECTION */

.StickyTop {
	top: 84px !important;
	left: 0 !important;
	padding: 0 var(--gap);
	background: var(--hh-white);
	border-bottom: 1px solid var(--hh-grey);
	display: flex;
	position: fixed;
	width: 100%;
	margin: 0 auto;
	align-items: center;
	justify-content: space-around;
}
.StickyTop .buyability.svelte-1s6p7ri.svelte-1s6p7ri.svelte-1s6p7ri {
	position: relative;
	background-color: transparent;
	padding: 0;
	border-radius: 5px;
	margin-bottom: 0;
}
.StickyTop .Form > fieldset {
	padding-bottom: 0;
}
.StickyTop .shippingContainer h3 {
	display: none;
}

@media print {
	.NoPrint {
		display: none !important;
	}
}

@media (max-width: 600px) { 
	.Mobile {
		/* display: initial; */
	}
	.Desktop {
		display: none !important;
	}
	
}

@media (min-width: 601px) { 
	.Mobile {
		display: none !important;
	}
	.Desktop {
		/* display: initial; */
	}
}


/** PDP - Certona - Similar in-stock Items */
.BuyabilitySticky .similar-items-container {
	display: none;
}

.certona-head,
.recs-head {
	display: flex;
}

section .certona-title,
.recs-title {
	margin-right: 3.5%;
}

/* section:not(.similar-items-container) > .certona-head > .certona-title {
	font-size: 3.1rem;
	letter-spacing: 0.03rem;
	font-weight: 700;
} */

@media (min-width: 1500px) {
	.similar-items-container, .similar-items-container .Grid {
		--grid-column: 2;
	}
}
@media (min-width: 1300px) and (max-width: 1499px){
	.similar-items-container, .similar-items-container .Grid {
		--grid-column: 2;
	}
}
@media (min-width: 1049px) and (max-width: 1299px) {
	.similar-items-container, .similar-items-container .Grid {
		--grid-column: 2;
	}
}
@media (min-width: 749px) and (max-width: 1048px) {
	.similar-items-container, .similar-items-container .Grid {
		--grid-column: 2;
	}
}
@media (min-width: 600px) and (max-width: 748px) {
	.similar-items-container, .similar-items-container .Grid {
		--grid-column: 2;
	}
}



hh-product-locator { display: none }


/* DEALS FLYOUT */
.DealsFlyout {
	margin: 0 var(--gap);
}
.DealsFlyout .imageContentSection img{
	max-width: 200px;
	margin: auto;
	display: block;
}
.DealsFlyout p:not(li > p) {
	font-family: "hhAgendaBold", sans-serif;
	font-weight: normal;
	font-size: 1.125em;
	margin-bottom: 0 !important;
}
.DealsFlyout > *:not(p) {
	display: block;
	margin-bottom: var(--gap) !important;
}
.DealsFlyout ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--buttonfontsize);
}
.DealsFlyout li {
	margin: 0;
	padding: .25em 0 .25em;
}
.DealsFlyout ul p {
	margin: 0;
	padding: 0;
}

.DealsFlyout > ul {
	padding: .5em 0;
}

.DealsFlyout > ul > li > ul {
	font-family: "hhAgendaMedium", sans-serif;
}



address.breadcrumbs {
	font-size: 1rem;
	line-height: 120%;
	display: flex;
	overflow-x: auto;
	column-gap: calc(var(--gap) / 2);
	/* padding: calc(var(--gap) * .5) var(--gap) 0; */
	/* margin-top: calc(var(--gap) * -1); */
	/* margin-bottom: calc(var(--gap) * 2); */
}
address.breadcrumbs > * {
	white-space: nowrap;
}
address.breadcrumbs a {
	color: #000000;
	/* padding: calc(var(--gap) / 4) calc(var(--gap) / 2);
	border-left: 1px solid #eee; */
}
address.breadcrumbs.heres-how > span:last-child {
	padding: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: default;
}
/* address.breadcrumbs a:first-child {
	padding-left: 0px;
} */
address.breadcrumbs .arrow {
	border: 1px solid #000000;
	border-width: 0 2px 2px 0;
	display: inline-block;
	padding: 3px;
}
/* address.breadcrumbs span {
	padding-top: 5px;
} */
address.breadcrumbs .rightshape {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}
address.breadcrumbs a.current-item,
address.breadcrumbs a.current-category {
	text-decoration: none;
	cursor: default;
	pointer-events: none;
}



/* THEME (hh-theme.css)
--------------------------------------------------- */
.ThemePro {
	background-color: var(--hh-pro);
	color: var(--hh-white);
}
.ThemeBlack {
	background-color: var(--hh-black);
	color: var(--hh-white);
}
.ThemeGrey {
	background-color: var(--hh-grey);
}
.ThemeRed {
	background-color: var(--hh-red);
	color: var(--hh-white);
}
.ThemeYellow {
	background-color: var(--hh-yellow);
}
.ThemeWhite {
	background-color: var(--hh-white);
}
.ThemeGreen {
	background-color: var(--hh-green-saleLink-Banner);
	color: var(--hh-white);
}

.ThemeBlack a,
.ThemePro a,
.ThemeRed a {
	color: var(--hh-white);
}

.ThemeFlip-Give-Play-More {
	background-color: rgba(220, 238, 237, 1);
}

.ThemePro .Button,
.ThemeRed .Button {
	color: var(--hh-white);
	border-color: var(--hh-white);
	background: transparent;
}
.ThemePro .Button::after,
.ThemeRed .Button::after {
	background: var(--hh-white);
}

.ThemeWhite .Button,
.HotBuy .Button {
	background: transparent;
	color: var(--hh-red);
	border-color: var(--hh-red);
}

.ThemeFlip-Give-Play-More .Button {
	background-color: rgba(245, 134, 97, 1);
	color: var(--hh-white);
}




/* BUTTON (hh-button.css)
--------------------------------------------------- */
.Button {
	appearance: none;
	/* outline: none; */
	display: inline-block;
	font: inherit;
	font-size: var(--buttonfontsize);
	line-height: 120%;
	margin: 0;
	border: 2px solid transparent;
	padding: .55em 1.5em;
	border-radius: 2em;
	box-sizing: border-box;
	text-align: center;
	cursor: pointer;
	color: #fff;
	background: var(--hh-red);
	text-decoration: none;
}
a.Button:hover {
	text-decoration: none;
}

.Button.ButtonNegative {
	border: 2px #fff solid;
	color: #fff;
	background: transparent;
}

.Button:not(.ButtonNoUnderline)::after {
	content: "";
	display: block;
	background: #fff;
	height: 2px;
	margin-top: -2px;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s ease-out;
}
.Button:hover::after {
	transform: scaleX(1);
}

.Button + .Button {
	margin-left: var(--fontsize);
}
.ButtonGroup .Button + .Button {
	margin-left: 0;
	}

.Button.ButtonSecondary {
	background: var(--hh-white);
	color: var(--hh-red);
	border-color: var(--hh-red);
}
.Button.ButtonSecondary::after {
	background: var(--hh-red);
}
.Button.ButtonFunctional {
	background: white;
	color: var(--hh-black);
	border-color: var(--hh-grey);
	border-radius: 4px;
}
.Button.ButtonFunctional::after {
	background: var(--hh-black);
}
select.Button.ButtonFunctional {
	padding-right: 2.5em;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	cursor: pointer;
	background: url(/_icons/icon-chevron-down.black.svg) no-repeat calc(100% - 0.5em) center / 0.8em;
	text-align: start;
	font-family: 'hhAgendaMedium';
}

.Button.ButtonGhost {
	background: #fff;
	color: var(--hh-black);
	border-color: #d9d9d9;
}
.ButtonGhost::after {
	background: #B8B8B8;
}

.Button.ButtonTertiary {
	background: #fff;
	color: var(--hh-red);
	border-color: var(--hh-red);
	font-size: calc(var(--buttonfontsize) * .75);
}
.ButtonTertiary::after {
	background: var(--hh-red);
}

.Button.Mini {
	font-size: 0.9em;
	padding: 0.45em 0.85em;
}

.Button.ButtonBlock {
	display: block;
	width: 100%;
	max-width: 40rem;
	margin: .25em auto;
	display: grid;
	justify-content: center;
}

.Button.ButtonWithState {
	display: block;
	width: 100%;
	max-width: 40rem;
	margin: .25em auto;
	display: grid;
	justify-content: center;
	overflow-y: hidden;
}
.Button.ButtonWithState span {
	grid-row: 1/2;
	grid-column: 1/2;
	transition: opacity .5s ease .05s, transform .5s ease;
}
.Button.ButtonWithState::after {
	display: none;
}
.Button.ButtonWithState span:nth-child(1) {
	opacity: 1;
	transform: translateY(0);
}
.Button.ButtonWithState span:nth-child(2) {
	opacity: 0;
	transform: translateY(100%);
}
.Button.ButtonWithState:hover span:nth-child(1) {
	opacity: 0;
	transform: translateY(-100%);
}
.Button.ButtonWithState:hover span:nth-child(2) {
	opacity: 1;
	transform: translateY(0);
}

.Button.ButtonImage {
	background: #fff;
	color: #000;
	border: 2px solid #fff;
	line-height: 0;
	padding-inline: .55em;
}
.Button.ButtonImage > img {
	height: 1.2em; /* to make up for the 120% line height */
}
.ButtonImage::after {
	display: none;
}

a.Button:hover {
	text-decoration: none;
}

.Button.ButtonLink {
	background: white;
	color: var(--hh-black);
	border-color: var(--hh-grey);
	padding:calc(var(--gap) / 3) calc(var(--gap) * 1.2) calc(var(--gap) * 0.2);
	border-radius: 30px; 
	font-size: 1rem;
}
.Button.ButtonLink::after {
	background: var(--hh-black);
}
.Button.ButtonLink:hover {
	border-bottom: 2px solid var(--hh-grey);
}

@media (max-width: 700px) {
	.Button.MobileGrow {
		display: block;
		width: 100%;
		margin-inline: auto;
		display: grid;
		justify-content: center;
	}
}

.Button.ButtonHalfBlock {
	display: block;
	width: 100%;
	max-width: 20rem;
	margin: .25em 0;
	display: grid;
	justify-content: center;
}
.ButtonLoading {
	color: transparent !important;
	pointer-events: none;
	background-repeat: no-repeat !important;
	background-size: auto 1.75em !important;
    background-position: center center !important;
}
.ButtonLoading::after {
	background: none !important;
}
.Button.ButtonLoading {
	background-image: url('/_svg/hh-loader.white.svg') !important;
}
.ButtonSecondary.ButtonLoading {
	background-image: url('/_svg/hh-loader.red.svg') !important;
}
button.Heavy.Underline, button.Heavy, button.Underline {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	letter-spacing: .04em;
	font-size: 1rem;
	color: var(--hh-black);
}
.Button.Disabled:not(.Arrow),
.Button[disabled]:not(.Arrow) {
	background: var(--hh-grey);
	border: 2px solid var(--hh-grey);
	color: var(--hh-dark-grey);
	cursor: not-allowed;
}
.Button.Disabled::after,
.Button[disabled]::after {
	display: none !important;
}




/* GRAVITY (hh-gravity.css)
--------------------------------------------------- */
.Gravity-Center	{ object-position: 50% 50% }

.Gravity-N	{ object-position: 50% 0% }
.Gravity-NE	{ object-position: 100% 0% }
.Gravity-E	{ object-position: 100% 50% }
.Gravity-SE	{ object-position: 100% 100% }
.Gravity-S	{ object-position: 50% 100% }
.Gravity-SW	{ object-position: 0% 100% }
.Gravity-W	{ object-position: 0% 50% }
.Gravity-NW	{ object-position: 0% 0% }

.Gravity-N-ish	{ object-position: 50% 25% }
.Gravity-NE-ish	{ object-position: 75% 25% }
.Gravity-E-ish	{ object-position: 75% 50% }
.Gravity-SE-ish	{ object-position: 75% 75% }
.Gravity-S-ish	{ object-position: 50% 75% }
.Gravity-SW-ish	{ object-position: 25% 75% }
.Gravity-W-ish	{ object-position: 25% 50% }
.Gravity-NW-ish	{ object-position: 25% 25% }




/* ANIMATIONS (hh-animations.css)
--------------------------------------------------- */
@keyframes up-in {
	0%	{
		opacity: 0;
		transform: translateY(1vh);
		}
	100%{
		opacity: 1;
		transform: translateY(0);
		}
	}

@keyframes left-in {
	0%	{
		opacity: 0;
		transform: translateX(3rem);
		}
	100%{
		opacity: 1;
		transform: translateX(0);
		}
	}

@keyframes fade-in {
	0%	{
		opacity: 0;
		}
	100%{
		opacity: 1;
		}
	}




/* ALERT BANNER (hh-alert-banner.css)
--------------------------------------------------- */
.AlertBanner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
	padding: 0em 1em;
	position: relative;
	> button {
		background: none;
		border: none;
		cursor: pointer;
		padding: 0;
		display: flex;
		align-self: stretch;
		align-items: center;
		justify-content: center;
		z-index: +1;
		width: calc(var(--gap) * 1.5);
	}
	& img {
		cursor: pointer;
		height: 15px;
		width: 15px;
	}
	& p {
		padding: 0;
		margin: 0;
		text-align: center;
	}
	& p:empty {
		display: none;
	}
	> div.AlertCarousel {
		position: relative;
		overflow: hidden;
		width: 100%;
		transition: height 0.3s ease;
		> div.AlertSlides {
			display: flex;
			transition: transform 0.4s ease;
			will-change: transform;
			> div.AlertMessage {
				flex: 0 0 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0.5em;
			}
		}
	}
}

.AlertBanner.ThemeRed div,
.AlertBanner.ThemePro div,
.AlertBanner.ThemeRed div a,
.AlertBanner.ThemePro div a {
	color: var(--hh-white);
}
.AlertBanner.ThemeRed img,
.AlertBanner.ThemePro img {
	filter: invert(1);
}
.AlertBanner.ThemeYellow div,
.AlertBanner.ThemeYellow div a {
	color: var(--hh-black);
}
.ThemeGrey.AlertBanner a {
	color: #CF001C;
}




/* RICH TEXT (hh-rich-text.css)
--------------------------------------------------- */
.RichText {
	max-width: 196ch;
	margin: auto;
	padding: calc(var(--gap) * 1) var(--gap) !important;
	scroll-margin-top: 100px;
	
}
.RichText a:not([class]) {
	color: var(--hh-red);
}

.RichText img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	margin-bottom: 4px;
}
.RichText table, .RichText td {
	border-collapse: collapse;
	border: 1px solid var(--hh-black);
	padding: calc(var(--gap) / 2);
}
.RichText th {
	border: 1px solid var(--hh-black);
}
.RichText table{
	width: 100%;
}
.RichText ul p {
	padding: 0;
}





/* HOMEPAGE (hh-homepage.css)
--------------------------------------------------- */
.featuredBrand{
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.5em;
	scroll-margin-top: 100px;
}
.featuredBrand .Grid.Shelf {
	grid-column: 1 / 3;
	grid-row: 2/2;
}
.featuredBrand .Light{
	grid-column: 1/ 3;
	grid-row: 2/3;
}
.featuredBrand .Grid.Shelf {
	grid-column: 1 / 3;
	grid-row: 3/4;
}
@media (max-width: 600px) { 
	.featuredBrand{
		display: block;
		
	}
	.featuredBrand .Light{
		margin-bottom: 1em;
	}
}

.featuredBrand > hgroup > h2:has(hh-product-shelf-controller) {
	display: grid;
	grid-auto-flow: column;
	gap: 2rem;
}



/* LINK (hh-link.css)
--------------------------------------------------- */
.Link {
	appearance: none;
	outline: none;
	display: inline-block;
	font: inherit;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
	/* border: 2px solid transparent; */
	cursor: pointer;
	color: #000;
	/* color: inherit; */
	text-decoration: none;
}
.Link::after {
	content: "";
	display: block;
	background: #ccc;
	height: 2px;
	margin-top: -2px;
	transition: background-color .3s ease-out;
}
.Link:hover::after {
	background: #e4002b;
}

.Link.LinkHeavy,
.Heavy {
	font-family: "hhAgendaBold", sans-serif !important;
	font-weight: normal;
}
.Underline {
	text-decoration: underline !important;
	text-underline-offset: 0.125em;
	font-family: inherit;
}
.Link.LinkAnimated {
	font-family: "hhAgendaBold", sans-serif;
	font-weight: normal;
}
.Link.LinkAnimated::after {
	background: #e4002b;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s ease-out;
}
.Link.LinkAnimated:hover::after {
	transform: scaleX(1);
}
button.Link {
	background: none;
	border: none;
}
button.Heavy.Underline, button.Heavy, button.Underline {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-size: var(--fontsize);
	color: inherit;
	letter-spacing: inherit;
}
body > address ~ * {
	scroll-margin-top: 6rem;
}



/* PAGINATION (hh-pagination.css)
--------------------------------------------------- */
.Pagination {
	display: flex;
	gap: calc(var(--gap) / 2);
	justify-content: center;
	align-items: center;
	flex: 1;
}
.Pagination > * {
	background: none;
	border: none;
	color: var(--hh-black);
}
.Pagination > *:not(:disabled),
.Pagination > *:not(.disabled) {
	cursor: pointer;
}
.Pagination a:hover {
	text-decoration: none;
}
.Pagination > *:not(.Arrow) {
	padding: calc(var(--gap) / 4);
	height: 2em;
	width: 2em;
	text-align: center;
	font-family: "hhAgendaBold", sans-serif;
	font-size: var(--buttonfontsize);
	box-sizing: border-box;
}
.Pagination > *:disabled:not(.Arrow),
.Pagination > *.disabled:not(.Arrow) {
	background: var(--hh-black);
	color: var(--hh-white);
	border-radius: 50%;
}
.Pagination > *.Arrow {
	height: 2em;
	display: flex;
	align-items: center;
}
.Pagination > * img {
	height: auto;
	width: 1.25em;
}
.Pagination .disabled {
	pointer-events: none;
}




/* PANEL (hh-panel.css)
--------------------------------------------------- */
hh-panel {
	background: #fff;
	display: block;
	position: fixed;
	top: 0;
	left: 100%;
	width: min(100%, 500px);
	height: 100vh;
	box-sizing: border-box;
	transition: transform .25s ease;
	z-index: +1999 !important;
	padding: 0 !important;
	overflow-y: auto;
	overflow-x: hidden;
	-ms-scroll-snap-type: y mandatory;	
	scroll-snap-type: y mandatory;
}

hh-panel::-webkit-scrollbar {
	-webkit-appearance: none;
	appearance: none;	
	width: .35rem;
}
hh-panel::-webkit-scrollbar-track {
	background:#f2f2f2;
}
hh-panel::-webkit-scrollbar-thumb {
	background-color: var(--hh-red);
	outline:none;
}
@supports (scrollbar-color: var(--hh-red) var(--hh-red)) {
	hh-panel {
		scrollbar-color: var(--hh-red) #e4e4e4;
		scrollbar-width: thin;
	}
}
hh-panel:not([hidden]) {
	transform: translateX(-100%);
	transition: transform .25s ease;
}
hh-panel + hh-panelclose {
	display: block;
	position: fixed;
	top: 0;
	left: 100%;
	width: 100vw;
	height: 100vh;
	box-sizing: border-box;
	background: #1118;
	cursor: pointer;
	opacity: 0;
	transition: transform 0s ease .5s, opacity .5s ease;
	z-index: +1998 !important;
}
hh-panel:not([hidden]) + hh-panelclose {
	transition: transform 0s ease, opacity .5s ease;
	transform: translateX(-100%) !important;
	opacity: 1;
}
hh-panel header {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	/* background: rgba(240,240,240,.925); */
	background: rgba(255,255,255,.925);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	/* padding: calc(var(--gap) * .5) var(--gap) !important; */
	padding: var(--gap) !important;
	/* border: 1px solid var(--hh-grey); */
	z-index: +3;
}

hh-panel header + * {
	padding-top: 0 !important;
}

hh-panel section {
	/* border-top: 1px solid var(--hh-grey); */
	animation: hh-panel-section-in .35s ease 0s 1 ;
}

hh-panel > div {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	/* height: inherit; */
}

hh-panel > div > *:not([data-no-padding]) {
	padding: var(--gap);
}


@keyframes hh-panel-section-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}




/* MODAL (hh-modal.css)
--------------------------------------------------- */
hh-modal {
	background: #1118;
	display: block;
	position: fixed;
	top: 100%;
	left: 0;
	width: 100vw;
	height: 100vh;
	box-sizing: border-box;
	z-index: +2999 !important;
	padding: 0 !important;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: opacity .25s ease, opacity .25s ease;
}
hh-modal:not(:empty) {
	transform: translateY(-100%);
	opacity: 1;
	transition: transform 0 ease .25s, opacity .25s ease;
}
hh-modal > *:first-child {
	background: #fff;
	padding: var(--gap);
	border-radius: .5rem;
	max-width: min(70ch, 90vw);
	max-height: 80vh;
	overflow-y: auto;
	transform: translateY(0);
	transition: transform .25s ease;
}
hh-modal:not(:empty) > *:first-child {
	transform: translateY(-1.5rem);
}

/* Global Alert Banner 
--------------------------------------------------- */
hh-global-alert-banner {
    display: none;
}



/* SKELETON (hh-skeleton.css)
--------------------------------------------------- */
.Skeleton, .Skeleton * {
	color: var(--hh-grey, #ccc) !important;
	letter-spacing: 0;
	animation: SkeletonAnimation .85s ease;
	animation-direction: alternate;
	animation-iteration-count: infinite;
}
.Skeleton img {
	background-color: var(--hh-grey, #ccc) !important;
}

@keyframes SkeletonAnimation {
	from {
		opacity: .75;
	}
	to {
		opacity: 1;
	}
}

.Card.Column .Skeleton > .ProductCardThumb {
    overflow: hidden;
}



/* ARTICLES (hh-articles.css)
--------------------------------------------------- */
.ArticleGroup {
	display: grid;
	gap: var(--gap);
	grid-template-columns: 1fr;
}
@media (min-width: 1180px) {
	.ArticleGroup[data-children="1"] > .ArticlePreview > figure {
		position: relative;
		padding-bottom: 40%;
		min-height: 350px;
	}
}
.ArticleGroup[data-children="2"] {
	display: flex;
}
.ArticleGroup[data-children="3"] {
	grid-template-columns: 1fr 1fr 1fr;
}
.ArticleGroup[data-children="4"] {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}
.ArticleGroup > .ArticlePreview {
	flex-grow: 1;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}
.ArticleGroup[data-children="2"] > .ArticlePreview {
	flex-grow: 1;
	flex-basis: 75%;
	/* grid-column: 3/4; */
}
.ArticleGroup[data-children="3"] > .ArticlePreview,
.ArticleGroup[data-children="4"] > .ArticlePreview {
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr;
}
.ArticleGroup[data-children="2"] > .ArticlePreview ~ .TrendingNow {
	flex-grow: .5;
	flex-basis: 33%;
	/* grid-column: 3/4; */
}

/* .ArticleGroup > * {
	flex-grow: 1;
} */

.ArticlePreview {
	box-shadow: 0 0 0 1px #0001 inset, 0 1rem 2rem -1rem #eee;
}
.article-wrapper > .ArticlePreview {
	height: 100%;
	display: grid;
	grid-template-rows: auto 1fr;
}
.ArticlePreview:hover {
	text-decoration: none;
}
.Grid.FeaturedArticles > .ArticlePreview {
	display: grid;
	grid-template-rows: auto 1fr;
}
.ArticlePreview figure {
	position: relative;
	padding-bottom: 56.25%;
}
.ArticlePreview figure img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ArticlePreview > aside {
	padding: var(--gap);
	display: flex;
	flex-direction: column;
	gap: calc(var(--gap) / 2);
	/* justify-items: flex-start; */
	/* align-self: flex-start; */
	box-sizing: border-box;
}
.ArticleGroup[data-children="1"] > .ArticlePreview > aside,
.ArticleGroup[data-children="2"] > .ArticlePreview > aside {
	align-self: center;
}
.ArticleGroup[data-children="3"] > .ArticlePreview > aside,
.ArticleGroup[data-children="4"] > .ArticlePreview > aside, 
.Grid.FeaturedArticles > .ArticlePreview > aside {
	height: 100%;
	/* grid-template-rows: auto auto auto 1fr; */
}
.ArticlePreview > aside > .ArticleTags {
    flex-grow: 1;
}
.ArticleTags {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--gap) / 2);
	align-content: end;
	order: 5;
}
.ArticleTag {
	background-color: var(--hh-grey);
	color: var(--hh-dark-grey);
	padding: calc(var(--gap) / 6) calc(var(--gap) / 3);
	border-radius: 4px;
	line-height: 1.2;
	transform: translateZ(0);
	transition: background-color 0.1s ease-in-out;
}
/* a.ArticleTag:hover {
	text-decoration: none;
	background-color: var(--hh-light-grey);
} */

.ArticlePreview > aside > a {
	overflow: hidden; 
	display: -webkit-box; 
	-webkit-box-orient: vertical; 
	-webkit-line-clamp: 3;
	padding-bottom: 0;
	text-decoration: none;
}

hh-panel .ArticlePreview > aside > a {
	overflow: auto;
	-webkit-line-clamp: initial;
	text-decoration: none;
}

.ArticlePreview > mark {
	font-size: 1.125rem;
	background: var(--hh-red);
	color: #fff;
	position: absolute;
	padding: .35em 1em;
	z-index: +2;
}
.ArticlePreview .Icon, .IconData .Icon {
	vertical-align: 0;
	display: inline-block;
}
.ArticlePreview address {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-column-gap: calc(var(--gap) / 2);
	align-items: center;
	font-size: 1.25rem;
}
.ArticleGroup[data-children="3"] > .ArticlePreview address,
.ArticleGroup[data-children="4"] > .ArticlePreview address {
	/* grid-row: 4/5; */
	order: 3;
}
.ArticlePreview address p {
	padding: 0;
}
.ArticlePreview address > img {
	height: 4em;
	width: 4em;
	border-radius: 50%;
	grid-column: 1/2;
	grid-row: 1/2;
	font-size: 1rem;
}
.ArticlePreview .Button {
	border: 0;
	padding: 0;
	font-size: 1.5rem;
	font-family: 'hhAgendaBold';
	background: none;
}
.ArticlePreview > aside > .brandImage {
	height: 4em;
	width: 4em;
	order: 4;
}
@media (max-width: 1049px) {
	.ArticleGroup[data-children="2"] {
		display: grid;
	}
	.ArticleGroup[data-children="4"] {
		grid-template-columns: 1fr 1fr;
	}
	.ArticleGroup[data-children="3"] > .ArticlePreview,
	.ArticleGroup[data-children="4"] > .ArticlePreview {
		grid-template-columns: 1fr;
		/* grid-template-rows: 12em 1fr; */
	}
	.ArticleGroup[data-children="1"] > .ArticlePreview address,
	.ArticleGroup[data-children="2"] > .ArticlePreview address {
		grid-row: 1/2;
	}
	.ArticleGroup[data-children="3"] > .ArticlePreview address,
	.ArticleGroup[data-children="4"] > .ArticlePreview address {
		grid-row: 4/5;
	}
}

@media (max-width: 600px) {
	.ArticleGroup {
		display: flex;
		flex-direction: column;
		grid-gap: calc(var(--gap) * 2)
	}
	.ArticleGroup > .ArticlePreview {
		flex-grow: 1;
		display: grid;
		grid-template-columns: 1fr;
	}
	.ArticleGroup[data-children="1"] > .ArticlePreview address,
	.ArticleGroup[data-children="2"] > .ArticlePreview address,
	.ArticleGroup[data-children="3"] > .ArticlePreview address,
	.ArticleGroup[data-children="4"] > .ArticlePreview address {
		grid-row: 1/2;
	}
}


/* CATEGORY PAGES */
.Grid.FeaturedArticles {
	grid-template-columns: repeat(4, 1fr);
	grid-gap: var(--gap);
	scroll-margin-top: 200px;
}

.line-clamp { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; }
.line-clamp-2 { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.line-clamp-3 { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; }

@media (max-width: 1024px) {
	.Grid.FeaturedArticles {
		grid-template-columns: repeat(2, 1fr);
		grid-gap: var(--gap);
		scroll-margin-top: 150px;
	}
}
@media (max-width: 600px) {
	.Grid.FeaturedArticles {
		grid-template-columns: 1fr;
		grid-gap: calc(var(--gap) * 2);
		scroll-margin-top: 150px;
	}
}




/* ARTICLES (hh-articles.css)
--------------------------------------------------- */
.featuredArticle {
	display: grid;
	grid-gap: var(--gap);
	box-sizing: border-box;
	/* margin-top: var(--gap); */
	padding-top: 0;
	grid-template-columns: 1fr 1fr;
	scroll-margin-top: 200px;
}

.featuredArticle > a {
	text-decoration: none;
	display: grid;
	grid-auto-flow: column;
	border: 1px solid #eee;
	border: none;
	grid-template-columns: 1fr 1fr;
}

.featuredArticle > a > aside {
	position: relative;
	padding: calc(var(--gap) * 3) calc(var(--gap) * 1.5);
	background-color: #EBEBEB;
}
.featuredArticle > a > figure {
	align-self: stretch;
	height: auto;
	object-fit: cover;
	background: var(--hh-grey);
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	align-items: stretch;
}
.featuredArticle > a > figure img {
	flex-grow: 1;
	width: 100%;
	object-fit: cover;
}
.featuredArticle [data-children="2"] {
	grid-template-columns: 1fr 1fr;
}
.featuredArticle .ImageAlignLeft figure{
	order: -1;
}
.featured-article{
	padding-bottom: 1.5em;
}
@media (min-width:600px) and (max-width:1024px){
	.featuredArticle {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 600px){
	.featuredArticle {
		grid-template-columns: 1fr;
	}
}




/* ACCORDION CONTENT (hh-accordion-content.css)
--------------------------------------------------- */
.accordionSection > aside > details div{
	padding: 0.5em 1.875em;
	border-top: 1px solid var(--hh-grey);
	background-color: var(--hh-light-grey);
}
.accordionSection h1{
	padding-bottom: 1em;
}

html[data-page-type="category"] .accordionSection .h1 {
	font-size: 2rem;
}
.accordionSection .qaGroup .h3,
.accordionSection .h5{
	font-family: "hhAgendaMedium", sans-serif;
	/* padding-bottom: 0.75em; */
}
.accordionSection .Accordion-Overview{
	padding: 0 !important;
}
.accordionSection .Accordion-Overview summary {
	padding: calc(var(--gap) * 0.9) 0;
	padding-right: var(--gap);
}
.accordionSection .qaGroup .h5 {
	padding: 0;
	border-top: none;
	margin-left: calc(var(--gap) * 1.75);
}
.accordionSection .qaGroup .h5 p {
	padding-left: calc(var(--gap) * 1.25);
}
.accordionSection .qaGroup aside:nth-child(2){
	border-top: 1px solid var(--hh-grey);
}
.accordionSection .qaGroup .Accordion-Overview{
	background-color: var(--hh-light-grey);
	border-bottom:none;
	padding-bottom: calc(var(--gap) * .5) !important;
	padding-top:calc(var(--gap) * .5) !important;
	padding-left: 2.5em;
}
.accordionSection .qaGroup .Accordion-Overview summary {
	background:url("/_icons/icon-faq-right.svg")no-repeat left 35% / .8em;
	padding-left: 1.5em;
}
.accordionSection .qaGroup details[open] summary {
	background-image: url("/_icons/icon-faq-down.svg");
	padding-bottom: 0 !important;
} 
.accordionSection .qaGroup .Accordion-Overview details[open]{
	padding-bottom: 0!important;
}

.accordionSection .qaGroup.Accordion-Overview {
	background-color: initial;
	padding-left: 0em;
}
@media (max-width: 600px) {
	.accordionSection .qaGroup .Accordion-Overview summary{
		background-position: left 14%;
	}
}




/* VIDEO CONTENT (hh-video-content.css)
--------------------------------------------------- */
.VideoSection video{
	width: 100%;
	height: 100%;
	object-fit: var(--object-fit, cover);
	max-height: 50em ;
}




/* BUTTON GROUP (hh-button-group.css)
--------------------------------------------------- */
.buttonGroup {
	display: flex;
	/* justify-content: center; */
	gap: var(--gap);
	justify-content: var(--text-alignment);
}
.buttonGroup.Anchor-link,
.buttonGroup.SecondaryAnchor-link {
	flex-grow: 1;
}
.buttonGroup.Anchor-link a,
.buttonGroup.SecondaryAnchor-link a {
	width: 100%;
	font-size: 1.5em;
	align-content: center;
}
.buttonGroup a {
	text-decoration: none;
}
.buttonGroup .ButtonAnchor-link {
	border-radius: 0;
}
.buttonGroup .ButtonSecondaryAnchor-link {
	border-radius: 0;
	color: var(--hh-red);
	border-color: var(--hh-red);
	background: none;
}
.buttonGroup .Button.ButtonAnchor-link::after,
.buttonGroup .ButtonSecondaryAnchor-link::after {
	background: none;
}
.Form .ButtonGroup {
	display: flex;
	column-gap: calc(var(--gap) / 2);
	width: 24rem;
	padding-top: calc(var(--gap) * 1) !important;
}
.ButtonGroup {
	display: flex;
	gap: calc(var(--gap) / 2);
}
hh-modal .ButtonGroup,
.ButtonGroup.Center {
	justify-content: center;
}
@media (max-width: 1024px) {
	.buttonGroup {
		flex-direction: column;
		justify-content: var(--text-alignment);
		gap: var(--gap);
		justify-items: center;
	}
	.buttonGroup .ButtonBlock {
		max-width: 100%;
	}
}
@media (max-width: 600px) {
	.buttonGroup.textAlignleft {
		justify-content: unset;
	}
}





/* IMAGE (hh-image.css)
--------------------------------------------------- */
.imageContentSection img{
	width: 100%;
	height: 100%;
	object-fit: var(--object-fit, cover);
}
.ContentGroup > .imageContentSection {
	margin: 0;
}
.ContentGroup > .imageContentSection figure{
	height: min(calc(100vw * .5), calc(var(--width) * .3));
	object-fit: cover;
}
.ContentGroup > .imageContentSection img{
	object-fit: var(--object-fit, cover);
}

.ContentGroup.Portrait[data-children="4"] > .imageContentSection figure,
.ContentGroup.Portrait[data-children="5"] > .imageContentSection figure{
	position: relative;
	padding-bottom: 133%;
	height: auto;
}

.ContentGroup.Portrait[data-children="4"] > .imageContentSection img,
.ContentGroup.Portrait[data-children="5"] > .imageContentSection img{
	object-fit: var(--object-fit, cover);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}




/* SEARCH (hh-search.css)
--------------------------------------------------- */
.no-search-result-bottom {
	display: none;
	text-align: center;
}
.no-search-result-bottom p{
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 38px;
	letter-spacing: 0.0785714px;
	padding: 0;
}
.no-search-result-bottom a{
	text-decoration: underline;
}
.show-if-no-results {
	display: none;
}




/* TRENDING NOW (hh-trending-now.css)
--------------------------------------------------- */
.TrendingNow {
	box-shadow: 0 0 0 1px #0001 inset, 0 1rem 2rem -1rem #eee;
	padding: var(--gap);
}
.TrendingNow > h3 {
	padding-bottom: 1.25rem;
}
.articleListings {
	display: grid;
	/* gap: calc(var(--gap) / 2); */
}
.articleListing {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: calc(var(--gap) / 2);
	align-items: center;
	/* padding-block: calc(var(--gap) / 2); */
	padding: calc(var(--gap) / 2) 0;
}
.articleListing > img {
	justify-self: center;
}
.articleListing:not(:last-child) {
	border-bottom: 1px solid var(--hh-grey);
}




/* SOCIAL LINKS (hh-social-links.css)
--------------------------------------------------- */
.socialLinks {
	display: flex;
	flex-direction: row;
}
.socialLinks > span:first-child {
	margin-right: 1.25rem;
	margin-bottom: 0;
}
.linkIcons {
	display: flex;
}
.linkIcons > * {
	margin-right: 1.25rem;
}
.linkIcons > * > * {
	display: inline-block;
}

@media (max-width: 600px) {
	.socialLinks {
		flex-direction: column;
	}
	.socialLinks > span:first-child {
		margin-right: 0;
		margin-bottom: 0.5rem;
	}
}




/* TRENDING SEARCHES (hh-trending-searches.css)
--------------------------------------------------- */
.TrendingSearch {
	display: flex;
	align-items: center;
	column-gap: var(--gap);
}
.TrendingSearch > horizontal-nav {
	padding-inline: 0 !important;
}
.TrendingSearch > .h4 {
	flex-shrink: 0;
}
.TrendingSearch .Button {
	padding: 0.875rem calc(var(--gap) * 1.2) 0.8rem !important;
	border-radius: 30px;
}
.TrendingSearch .Button + .Button {
	margin: 0;
}
@media screen and (min-width: 1200px) {
	.TrendingSearch {
		padding-block: 0;
	}
}
@media (max-width: 1200px) {
	.TrendingSearch {
		flex-direction: column;
		align-items: start;
	}
}



/* .TrendingSearch {
	display: flex;
	align-items: center;
}
.TrendingSearch > horizontal-nav {
	padding-inline: 0 !important;
}
.TrendingSearch > .h4 {
	flex-shrink: 0;
}


.TrendingSearch nav.Navigation {
	display: flex;
	align-items: center;
	border: none;
	margin: 0 1rem;
	padding: 0 calc(var(--gap) / 2) !important;
}
.TrendingSearch nav.Navigation ul {
	margin: 0;
	gap: 0.5rem;
}

.TrendingSearch .Navigation .Button.ButtonLink {
	padding: 0.875rem calc(var(--gap) * 1.2) 0.8rem !important;
	border-radius: 30px;
}
.TrendingSearch .Button + .Button {
	margin: 0;
}
.TrendingSearch .NavigationLeft,
.TrendingSearch .NavigationRight {
	height: 4.75em;
	z-index: +1;
}
.TrendingSearch .NavigationLeft {
	left: auto;
}
.TrendingSearch .NavigationLeft.active {
	transform: translateX(-1.5rem);
}
@media (max-width: 1200px) {
	.TrendingSearch {
		display: block;
	}
	.TrendingSearch nav.Navigation {
		margin: 1rem 1.5rem 0 0.1rem ;
	}
	.TrendingSearch .NavigationLeft.active {
		transform: translateX(-1rem);
	}
	.TrendingSearch .NavigationLeft,
	.TrendingSearch .NavigationRight {
		height: 4em;
	}
	.TrendingSearch .NavigationLeft.active {
        transform: none;
        left: 0;
    }
}
@media (max-width: 820px) {
	.TrendingSearch .Navigation .Button.ButtonLink {
		padding: 15px calc(var(--gap) * 1.2) 13px !important;
		border-radius: 30px;
	}
} */






/* FRAGMENTS (hh-fragment.css)
--------------------------------------------------- */
hh-fragment {display: none}
*[data-animate-fragment] {
	animation: animate-fragment .5s ease-in-out 0s;
	/* hardware acceleration */
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}
@keyframes animate-fragment {
	0%	{
		opacity: 0;
		transform: translateY(6px);
		}
	100%{
		opacity: 1;
		transform: translateY(0);
		}
}

/* DIALOG & TOAST STYLES
--------------------------------------------------- */
dialog {
	background: #fff;
	padding: var(--gap) !important;
	border-radius: .5rem;
	border: none;
	max-width: min(800px, 80dvw);
	max-height: 80dvh;
	animation: fade-in .3s;
	transform: translate3d(0, 0, 0);
}
dialog::backdrop {
	background: rgba(0,0,0,.5);
	animation: fade-in .3s;
}
dialog.Toast {
	padding: calc(var(--gap) * 1.5) !important;
	margin: var(--gap) var(--gap) var(--gap) auto;
	border-radius: 8px;
	border: none;
	box-shadow: 0 0 0 1px #0001 inset, 0 1rem 2rem -1rem #eee;
	max-width: 100vw; /* Update for toasts other than cookies */
	width: 800px; /* Update for toasts other than cookies */
	max-height: fit-content;
	animation: toasty 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
	z-index: 999;
}
dialog.Cookies {
	margin: var(--gap);
	max-width: fit-content;
	width: 800px;
}
dialog.Toast[open] {
	display: block;
	position: fixed;
	bottom: 0;
	z-index: 9999;
}
dialog.Toast.Cookies > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
}
dialog.Toast.Cookies > div > a {
	line-height: normal;
}
dialog.Toast.Cookies > div > div {
	display: flex;
	gap: var(--gap);
}
.Cookies.ThemeBlack button.Heavy.Underline {
	color: var(--hh-white) !important;
}
.Cookies.ThemeBlack .Button.ButtonSecondary {
	background: var(--hh-black);
	color: var(--hh-white);
	border-color: var(--hh-white);
}
.Cookies.ThemeBlack .Button.ButtonSecondary::after {
	background: var(--hh-white);
}
.Cookies.ThemeBlack button + button {
	margin-left: 0;
}
@keyframes toasty {
	0%	{
		transform: translateY(100%);
	}
	100%{
		transform: translateY(0);
	}
}
@media (max-width: 799px) {
	dialog.Toast.Cookies > div {
		align-items: center;
		/* flex-direction: column; */
		gap: calc(var(--gap) * 1.5);
	}
	dialog.Toast.Cookies > div > div {
		justify-content: end;
		flex-wrap: nowrap;
	}
	dialog.Toast.Cookies > div > div > button {
		text-align: left;
	}
}




/* MFE HTML FLYOUT
--------------------------------------------------- */
hh-panel .ProductCard {
	border: none;
	box-shadow: none;
	padding: 0;
	overflow: initial;
}
hh-price {
	font-size: calc(var(--fontsize) * 1.5);
	font-family: "hhAgendaBold", sans-serif;
	font-weight: normal;
	margin: 0;
	padding: 0;
	line-height: 110%;
}
hh-price::part(was) {
	font-family: hhAgendaMedium,sans-serif;
	font-weight: normal;
	margin: 0;
	padding: 0;
	line-height: 110%;
}
hh-price::part(sale) {
	font-family: hhAgendaMedium,sans-serif;
	font-size: .9rem;
	line-height: 100%;
	text-transform: uppercase;
	color: var(--hh-white);
	background: var(--hh-red);
	padding: calc(var(--gap) / 2) calc(var(--gap) * .75) calc(var(--gap) / 3);
	margin-right: calc(var(--gap) / 2);
}
hh-price::part(clearance) {
	font-family: hhAgendaMedium,sans-serif;
	font-size: .9rem;
	line-height: 100%;
	text-transform: uppercase;
	color: var(--hh-black);
	background: var(--hh-yellow);
	padding: calc(var(--gap) / 2) calc(var(--gap) * .75) calc(var(--gap) / 3);
	margin-right: calc(var(--gap) / 2);
}
hh-price::part(small) {
	font-size: var(--fontsize);
	/* font-family: "hhAgendaMedium", sans-serif; */
}
hh-price::part(skeleton) {
	letter-spacing: -1px;
	color: var(--hh-grey);
}
hh-panel .ArticlePreview > aside {
	padding: var(--gap) 0 0;
}