@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@400&display=swap");
/* base.Master loads Lato 300/400/700 only; the footer sitemap headings use 500 */
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@500&display=swap");

/* New homepage (work in progress). Every rule is scoped to .hn-home so the live homepage is not affected. */

/* home.css forces ".home-style #wrapper { overflow: visible !important }"; without this clip the header's 5000px .h-w1:after bar
   and the 980px #wrapper:after overlay make the page scroll sideways */
body #wrapper:has(.hn-home) {
	overflow-x: clip !important;
}

/* #main is a fixed-width column, so the new homepage breaks out of it to span the full viewport */
.hn-home {
	position: relative;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	box-sizing: border-box;
	font-family: "Source Sans Pro", sans-serif;
}

.hn-home *,
.hn-home *::before,
.hn-home *::after {
	box-sizing: border-box;
}

/* Hero banner */
.hn-home .hn-hero {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
	aspect-ratio: 1920 / 600;
	min-height: 360px;
	background: #1a1a1a url("/img/Home%20Banner%20-%20DESKTOP.png") no-repeat center / cover;
}

.hn-home .hn-hero__inner {
	width: 100%;
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 20px;
}

@media screen and (min-width: 1400px) {
	.hn-home .hn-hero__inner {
		padding: 0;
	}
}

.hn-home .hn-hero__eyebrow {
	display: inline-block;
	margin: 0 0 16px;
	padding: 0 0 6px;
	border-bottom: 2px solid #c9a14a;
	font: normal normal normal 14px/20px "Source Sans Pro", sans-serif;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #fff;
}

.hn-home .hn-hero h1.hn-hero__title {
	display: block;
	max-width: 560px;
	margin: 0;
	padding: 0;
	font: normal normal normal 48px/56px Merriweather, serif;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #fff;
}

.hn-home .hn-hero__text {
	margin: 16px 0 0;
	padding: 0;
	font: normal normal normal 18px/24px "Source Sans Pro", sans-serif;
	letter-spacing: 0;
	color: #fff;
}

.hn-home .hn-hero__button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 48px;
	margin-top: 28px;
	padding: 0 22px;
	border: 1px solid #fff;
	background: transparent;
	font: normal normal 600 14px/20px "Source Sans Pro", sans-serif;
	letter-spacing: 0;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.hn-home .hn-hero__button:hover,
.hn-home .hn-hero__button:focus {
	background: #fff;
	color: #000;
	text-decoration: none;
}

.hn-home .hn-hero__button svg {
	display: block;
	width: 16px;
	height: 10px;
}

/* "For ..." photo cards */
.hn-home .hn-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 440px));
	justify-content: center;
	gap: 20px;
	width: 100%;
	max-width: 1360px;
	margin: 20px auto 0;
}

.hn-home .hn-card {
	position: relative;
	display: block;
	aspect-ratio: 440 / 560;
	overflow: hidden;
	background-color: #3a3a3a;
	text-decoration: none;
	color: #fff;
}

.hn-home .hn-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	transition: transform 0.4s ease;
}

.hn-home .hn-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.72) 100%);
}

.hn-home .hn-card:hover::before {
	transform: scale(1.04);
}

.hn-home .hn-card--pros::before {
	background-image: url("/img/For%20Pros%20BG_Home%20-%20DESKTOP.png");
}

.hn-home .hn-card--industrial::before {
	background-image: url("/img/For%20Industrial%20BG_Home%20-%20DESKTOP.png");
}

.hn-home .hn-card--home::before {
	background-image: url("/img/For%20Home%20BG_home%20-%20DESKTOP.png");
}

.hn-home .hn-card__label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 0 92px 40px 40px;
}

.hn-home .hn-card__for {
	display: block;
	font: normal normal normal 36px/40px Merriweather, serif;
	letter-spacing: 0;
	color: #fff;
}

.hn-home .hn-card__sub {
	display: block;
	margin-top: 4px;
	font: normal normal normal 22px/24px "Source Sans Pro", sans-serif;
	letter-spacing: 0;
	color: #fff;
}

.hn-home .hn-card__arrow {
	position: absolute;
	right: 36px;
	bottom: 38px;
	z-index: 2;
	width: 40px;
	height: 40px;
	line-height: 0;
}

.hn-home .hn-card__arrow svg {
	display: block;
	width: 40px;
	height: 40px;
}

/* Full-width promo banners (same width as the card row) */
.hn-home .hn-promos {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	width: 100%;
	max-width: 1360px;
	margin: 20px auto 0;
}

.hn-home .hn-promo {
	position: relative;
	display: flex;
	align-items: center;
	aspect-ratio: 1360 / 460;
	padding: 0 70px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	text-decoration: none;
}

.hn-home .hn-promo--coty {
	background-color: #c99c94;
	background-image: url("/img/Calliope%20BG%20-%20DESKTOP.png");
}

.hn-home .hn-promo--club {
	background-color: #f2f2f2;
	background-image: url("/img/The%20Colour%20Club%20BG%20-%20DESKTOP.png");
}

.hn-home .hn-promo--inspiration {
	background-color: #f3e9e2;
	background-image: url("/img/Inspirational%20Colours%20BG%20%20-%20DESKTOP.png");
}

.hn-home .hn-promo--map {
	background-color: #d6e8f4;
	background-image: url("/img/Map%20BG%20-%20DESKTOP.png");
}

/* Colour of the Year */
.hn-home .hn-coty {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 485px;
	padding: 36px 25px 25px;
	border: 2px solid #fff;
	text-align: center;
	color: #fff;
}

.hn-home .hn-coty__logo {
	display: block;
	width: 270px;
	max-width: 100%;
	height: auto;
}

.hn-home .hn-coty__title {
	display: block;
	margin-top: 14px;
	font: normal normal normal 40px/44px Merriweather, serif;
	letter-spacing: 0;
	color: #fff;
}

.hn-home .hn-coty__year {
	display: block;
	margin-top: 8px;
	font: normal normal 600 24px/26px "Source Sans Pro", sans-serif;
	letter-spacing: 0;
	color: #fff;
}

.hn-home .hn-coty__rule {
	display: block;
	align-self: stretch;
	height: 1px;
	margin: 27px 0 28px;
	background: #fff;
}

.hn-home .hn-coty__name {
	display: block;
	font: normal normal 600 35px/24px "Source Sans Pro", sans-serif;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: #fff;
}

.hn-home .hn-coty__code {
	display: block;
	margin-top: 11px;
	font: normal normal 600 24px/26px "Source Sans Pro", sans-serif;
	letter-spacing: 0.48px;
	color: #fff;
}

/* Banner copy (eyebrow, title, text, button) */
.hn-home .hn-copy {
	max-width: 480px;
}

.hn-home .hn-promo--inspiration .hn-copy__text {
	max-width: 340px;
}

.hn-home .hn-promo--map .hn-copy {
	width: 370px;
	margin-left: auto;
}

.hn-home .hn-copy__eyebrow {
	display: table;
	padding: 0 0 4px;
	border-bottom: 2px solid #aa563c;
	font: normal normal normal 16px/24px "Source Sans Pro", sans-serif;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #000;
}

.hn-home .hn-copy h2.hn-copy__title {
	display: block;
	margin: 12px 0 0;
	padding: 0;
	font: normal normal normal 36px/42px Merriweather, serif;
	letter-spacing: 0;
	text-transform: none;
	color: #000;
}

.hn-home .hn-copy__highlight {
	color: #aa563c;
}

.hn-home .hn-copy__text {
	margin: 10px 0 0;
	padding: 0;
	font: normal normal normal 18px/26px "Source Sans Pro", sans-serif;
	letter-spacing: 0;
	color: #646464;
}

.hn-home .hn-copy__button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 48px;
	margin-top: 16px;
	padding: 0 22px;
	border: 1px solid #000;
	background: transparent;
	font: normal normal 600 14px/20px "Source Sans Pro", sans-serif;
	letter-spacing: 0;
	text-transform: uppercase;
	text-decoration: none;
	color: #000;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.hn-home .hn-copy__button:hover,
.hn-home .hn-copy__button:focus {
	background: #000;
	color: #fff;
	text-decoration: none;
}

.hn-home .hn-copy__button svg {
	display: block;
	width: 16px;
	height: 10px;
}

@media screen and (max-width: 1399px) {
	.hn-home .hn-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		padding: 0 20px;
	}

	.hn-home .hn-promos {
		padding: 0 20px;
	}
}

@media screen and (max-width: 1199px) {
	.hn-home .hn-promo {
		padding: 0 40px;
	}

	.hn-home .hn-coty {
		width: 380px;
		padding: 24px 20px 20px;
	}

	.hn-home .hn-coty__logo {
		width: 210px;
	}

	.hn-home .hn-coty__title {
		font-size: 32px;
		line-height: 36px;
	}

	.hn-home .hn-coty__rule {
		margin: 18px 0;
	}

	.hn-home .hn-copy h2.hn-copy__title {
		font-size: 30px;
		line-height: 36px;
	}

	.hn-home .hn-copy__text {
		max-width: 400px;
		font-size: 16px;
		line-height: 24px;
	}

	.hn-home .hn-promo--map .hn-copy {
		width: 320px;
	}
}

@media screen and (max-width: 1199px) {
	.hn-home .hn-card__label {
		padding: 0 72px 28px 24px;
	}

	.hn-home .hn-card__for {
		font-size: 26px;
		line-height: 30px;
	}

	.hn-home .hn-card__sub {
		font-size: 17px;
		line-height: 22px;
	}

	.hn-home .hn-card__arrow {
		right: 22px;
		bottom: 28px;
	}
}

@media screen and (max-width: 1023px) {
	.hn-home .hn-hero h1.hn-hero__title {
		font-size: 36px;
		line-height: 44px;
	}
}

.hn-home .hn-hero__label--mobile {
	display: none;
}

/* Mobile: same range as the site's mobile.css. Built from the 430px "CP Mobile - Home" artboard, single column with 30px side margins. */
@media screen and (max-width: 640px) {
	/* mobile.css sets "#content span { margin-bottom: 30px }", "#content h1 { margin-bottom: 8px }" and "#content img { width: auto }",
	   which outrank the .hn-home rules, so they are reset here and the intended values restored with matching specificity */
	#content .hn-home span {
		margin-bottom: 0;
	}

	#content .hn-home .hn-hero__eyebrow {
		margin-bottom: 8px;
	}

	#content .hn-home .hn-coty__rule {
		margin-bottom: 18px;
	}

	#content .hn-home h1.hn-hero__title {
		margin: 0;
	}

	#content .hn-home img.hn-coty__logo {
		width: 240px;
		margin: 0;
	}

	/* Hero banner */
	.hn-home .hn-hero {
		align-items: flex-end;
		aspect-ratio: 430 / 560;
		min-height: 560px;
		padding-bottom: 40px;
		background-image: url("/img/New%20Home/Home%20Banner%20-%20MOBILE.png");
		background-position: center top;
	}

	.hn-home .hn-hero__inner {
		padding: 0 30px;
	}

	.hn-home .hn-hero__eyebrow {
		margin-bottom: 8px;
		padding-bottom: 4px;
		font-size: 16px;
		line-height: 24px;
	}

	.hn-home .hn-hero h1.hn-hero__title {
		max-width: 370px;
		font-size: 34px;
		line-height: 42px;
	}

	.hn-home .hn-hero__text {
		margin-top: 8px;
	}

	.hn-home .hn-hero__button {
		justify-content: center;
		width: 100%;
		margin-top: 22px;
	}

	.hn-home .hn-hero__label--wide {
		display: none;
	}

	.hn-home .hn-hero__label--mobile {
		display: inline;
	}

	.hn-home .hn-hero__button,
	.hn-home .hn-copy__button {
		height: 50px;
		padding: 0 20px;
		font-size: 18px;
		line-height: 24px;
	}

	/* "For ..." photo cards */
	.hn-home .hn-cards {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
		margin-top: 30px;
		padding: 0 30px;
	}

	.hn-home .hn-card {
		aspect-ratio: 370 / 470;
	}

	.hn-home .hn-card--pros::before {
		background-image: url("/img/New%20Home/For%20Pros%20BG%20-%20MOBILE.png");
	}

	.hn-home .hn-card--industrial::before {
		background-image: url("/img/New%20Home/For%20Industrial%20BG%20-%20MOBILE.png");
	}

	.hn-home .hn-card--home::before {
		background-image: url("/img/New%20Home/For%20Home%20BG%20-%20MOBILE.png");
	}

	.hn-home .hn-card__label {
		padding: 0 80px 34px 30px;
	}

	.hn-home .hn-card__for {
		font-size: 36px;
		line-height: 40px;
	}

	.hn-home .hn-card__sub {
		font-size: 22px;
		line-height: 24px;
	}

	.hn-home .hn-card__arrow {
		right: 30px;
		bottom: 34px;
	}

	/* Promo banners */
	.hn-home .hn-promos {
		gap: 30px;
		margin-top: 30px;
		padding: 0 30px;
	}

	.hn-home .hn-promo {
		aspect-ratio: 370 / 700;
		padding: 0;
	}

	/* Box sits 30px above the bottom with 24px side insets (percentages of the 370px banner width) */
	.hn-home .hn-promo--coty {
		align-items: flex-end;
		justify-content: center;
		padding: 0 6.49% 8.11%;
		background-image: url("/images/default-source/homepage/calliope---background.png");
		background-position: center bottom;
	}

	.hn-home .hn-coty {
		width: 100%;
		padding: 24px 20px 20px;
	}

	.hn-home .hn-coty__logo {
		width: 240px;
	}

	.hn-home .hn-coty__title {
		margin-top: 10px;
		font-size: 40px;
		line-height: 44px;
	}

	.hn-home .hn-coty__year {
		margin-top: 6px;
	}

	.hn-home .hn-coty__rule {
		margin: 18px 0;
	}

	.hn-home .hn-coty__code {
		margin-top: 10px;
	}

	.hn-home .hn-promo--club,
	.hn-home .hn-promo--inspiration {
		align-items: flex-start;
		justify-content: center;
		padding: 40px 20px 0;
		background-position: center bottom;
	}

	/* Below 430px the copy wraps onto more lines while the 370x700 artboard shrinks, so both banners keep the artboard's
	   700px height; each image sits on the bottom edge and the strip above it is filled with the image's top-edge colour.
	   Grid items with an aspect-ratio are not stretched, so without the explicit width the min-height would widen them to 370px. */
	.hn-home .hn-promo--club,
	.hn-home .hn-promo--inspiration {
		width: 100%;
		min-height: 700px;
	}

	.hn-home .hn-promo--club {
		background-color: #dddee0;
		background-image: url("/img/New%20Home/The%20Colour%20Club%20BG%20-%20MOBILE.png");
		background-size: 100% auto;
	}

	/* The mobile export centres the blue can; the design centres the coral can between green and blue, which only the
	   five-can desktop image has. At 310% the coral can (x714-894 of 1360) lands in the middle of the banner. */
	.hn-home .hn-promo--inspiration {
		background-image: url("/img/Inspirational%20Colours%20BG%20%20-%20DESKTOP.png"), linear-gradient(to right, #f3e5de, #f2e3da);
		background-size: 310% auto, 100% 100%;
		background-position: 63.46% 100%, 0 0;
	}

	.hn-home .hn-copy {
		width: 100%;
		max-width: none;
		text-align: center;
	}

	.hn-home .hn-copy__eyebrow {
		margin: 0 auto;
	}

	.hn-home .hn-copy h2.hn-copy__title {
		margin-top: 10px;
		font-size: 36px;
		line-height: 44px;
	}

	.hn-home .hn-copy__text,
	.hn-home .hn-promo--inspiration .hn-copy__text {
		max-width: none;
		margin-top: 6px;
		font-size: 18px;
		line-height: 26px;
	}

	.hn-home .hn-copy__button {
		margin-top: 14px;
	}

	.hn-home .hn-promo--club h2.hn-copy__title {
		max-width: 313px;
		margin-right: auto;
		margin-left: auto;
		line-height: 42px;
	}

	.hn-home .hn-promo--inspiration h2.hn-copy__title {
		line-height: 42px;
	}

	.hn-home .hn-promo--club .hn-copy__text {
		max-width: 306px;
		margin-right: auto;
		margin-left: auto;
	}

	/* Map image on top (760x360 export scaled to the column), Store Locator copy below it on white */
	.hn-home .hn-promo--map {
		display: block;
		aspect-ratio: auto;
		padding: 47.37% 0 0;
		background-color: transparent;
		background-image: url("/img/New%20Home/Map%20-%20IPAD-MOBILE.png");
		background-size: 100% auto;
		background-position: center top;
	}

	.hn-home .hn-promo--map .hn-copy {
		width: auto;
		margin: 16px auto 0;
	}

	.hn-home .hn-promo--map h2.hn-copy__title {
		line-height: 42px;
	}

	.hn-home .hn-promo--map .hn-copy__text {
		margin-top: 10px;
	}

	.hn-home .hn-promo--map .hn-copy__button {
		margin-top: 16px;
	}
}

/* iPad / tablet: from the end of the site's mobile.css range up to the end of ipad.css. Built from the 820px "CP iPad - Home" artboard, single column with 30px side margins. */
@media screen and (min-width: 641px) and (max-width: 1024px) {
	/* On tablets the content column is not centred: ipad.css/main.css pin its left edge 40px in from the viewport
	   (except 641-767px and 981-1023px, see below), so the breakout is measured from that edge instead of from the centre */
	.hn-home {
		left: 0;
		margin-left: -40px;
	}

	.hn-home .hn-desktop-br {
		display: none;
	}

	/* Hero banner */
	.hn-home .hn-hero {
		align-items: flex-end;
		aspect-ratio: 820 / 560;
		padding-bottom: 47px;
		background-image: url("/img/New%20Home/Home%20Banner%20-%20IPAD.png");
	}

	.hn-home .hn-hero__inner {
		padding: 0 30px;
	}

	.hn-home .hn-hero__eyebrow {
		margin-bottom: 8px;
		padding-bottom: 4px;
		font-size: 16px;
		line-height: 24px;
	}

	.hn-home .hn-hero h1.hn-hero__title {
		max-width: 620px;
		font-size: 40px;
		line-height: 50px;
	}

	.hn-home .hn-hero__text {
		margin-top: 8px;
	}

	.hn-home .hn-hero__button {
		justify-content: center;
		width: 340px;
		margin-top: 22px;
	}

	.hn-home .hn-hero__label--wide {
		display: none;
	}

	.hn-home .hn-hero__label--mobile {
		display: inline;
	}

	.hn-home .hn-hero__button,
	.hn-home .hn-copy__button {
		height: 50px;
		padding: 0 20px;
		font-size: 18px;
		line-height: 24px;
	}

	/* "For ..." photo cards */
	.hn-home .hn-cards {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
		margin-top: 30px;
		padding: 0 30px;
	}

	.hn-home .hn-card {
		aspect-ratio: 760 / 540;
	}

	.hn-home .hn-card--pros::before {
		background-image: url("/img/New%20Home/For%20Pros%20BG%20-%20IPAD.png");
	}

	.hn-home .hn-card--industrial::before {
		background-image: url("/img/New%20Home/For%20Industrial%20BG%20-%20IPAD.png");
	}

	.hn-home .hn-card--home::before {
		background-image: url("/img/New%20Home/For%20Home%20BG%20-%20IPAD.png");
	}

	.hn-home .hn-card__label {
		left: 65px;
		right: auto;
		bottom: 58px;
		width: 305px;
		padding: 0;
	}

	.hn-home .hn-card__for {
		font-size: 36px;
		line-height: 40px;
	}

	.hn-home .hn-card__sub {
		font-size: 22px;
		line-height: 24px;
	}

	/* the arrow is centred on the right edge of the 305px label box */
	.hn-home .hn-card__arrow {
		left: 350px;
		right: auto;
		bottom: 58px;
	}

	.hn-home .hn-card--pros .hn-card__label {
		left: 80px;
	}

	.hn-home .hn-card--pros .hn-card__arrow {
		left: 365px;
	}

	/* Promo banners */
	.hn-home .hn-promos {
		gap: 30px;
		margin-top: 23px;
		padding: 0 30px;
	}

	.hn-home .hn-promo {
		aspect-ratio: 760 / 540;
	}

	.hn-home .hn-promo--coty {
		align-items: flex-start;
		padding: 6.58% 0 0 8.42%;
		background-image: url("/img/New%20Home/Calliope%20BG%20-%20IPAD.png");
	}

	.hn-home .hn-coty {
		width: 400px;
		padding: 36px 25px 25px;
	}

	.hn-home .hn-coty__logo {
		width: 270px;
	}

	.hn-home .hn-coty__title {
		font-size: 40px;
		line-height: 44px;
	}

	.hn-home .hn-coty__rule {
		margin: 27px 0 28px;
	}

	.hn-home .hn-promo--club,
	.hn-home .hn-promo--inspiration {
		align-items: flex-start;
		justify-content: center;
		padding: 40px 30px 0;
	}

	.hn-home .hn-promo--club {
		background-image: url("/img/New%20Home/The%20Colour%20Club%20BG%20-%20IPAD.png");
	}

	/* No iPad export of this banner exists. The desktop image is scaled so its five paint cans span the card,
	   and the gradient continues the image's top edge colour behind the copy. */
	.hn-home .hn-promo--inspiration {
		aspect-ratio: 760 / 600;
		background-image: url("/img/Inspirational%20Colours%20BG%20%20-%20DESKTOP.png"), linear-gradient(to right, #f4eae4 0%, #f2e3dc 16%, #f1e5dc 38%, #efe3d9 60%, #efddd1 82%, #ead8ca 100%);
		background-size: 150.3% auto, 100% 100%;
		background-position: 100% 131.1%, 0 0;
	}

	.hn-home .hn-copy {
		width: 100%;
		max-width: 540px;
		text-align: center;
	}

	.hn-home .hn-copy__eyebrow {
		margin: 0 auto;
	}

	.hn-home .hn-copy h2.hn-copy__title {
		margin-top: 10px;
		font-size: 36px;
		line-height: 44px;
	}

	.hn-home .hn-copy__text,
	.hn-home .hn-promo--inspiration .hn-copy__text {
		max-width: none;
		margin-top: 6px;
		font-size: 18px;
		line-height: 26px;
	}

	.hn-home .hn-copy__button {
		margin-top: 14px;
	}

	/* Map image on top (760x360), Store Locator copy below it on white */
	.hn-home .hn-promo--map {
		display: block;
		aspect-ratio: auto;
		padding: 47.37% 0 0;
		background-color: transparent;
		background-image: url("/img/New%20Home/Map%20-%20IPAD-MOBILE.png");
		background-size: 100% auto;
		background-position: center top;
	}

	.hn-home .hn-promo--map .hn-copy {
		width: auto;
		margin: 16px auto 0;
	}

	.hn-home .hn-promo--map h2.hn-copy__title {
		line-height: 42px;
	}

	.hn-home .hn-promo--map .hn-copy__text {
		margin-top: 10px;
	}

	.hn-home .hn-promo--map .hn-copy__button {
		margin-top: 16px;
	}
}

/* Between 641px and 767px neither mobile.css nor ipad.css applies, so main.css keeps the desktop minimums (#wrapper and
   .template-home #main 960px, .page-section 980px, .m-w2 1220px) and the page scrolls sideways. These mirror what ipad.css
   does from 768px, limited to the page containing .hn-home. The column starts 20px in from the viewport. */
@media screen and (min-width: 641px) and (max-width: 767px) {
	body #wrapper:has(.hn-home) {
		min-width: 0;
	}

	#wrapper:has(.hn-home) .page-section,
	#wrapper:has(.hn-home) #header.page-section {
		width: 100%;
	}

	#wrapper:has(.hn-home) #main {
		min-width: 0;
	}

	#wrapper:has(.hn-home) .m-w2.section-inner,
	#wrapper:has(.hn-home) #content {
		width: auto;
		max-width: 100%;
	}

	.hn-home {
		margin-left: -20px;
	}
}

/* Between 981px and 1023px the 980px .page-section is centred, so the column starts at (100vw - 980px) / 2 + 40px */
@media screen and (min-width: 981px) and (max-width: 1023px) {
	.hn-home {
		margin-left: calc(450px - 50vw);
	}
}

/* Desktop: the hero spans the whole window at any width and starts directly under the header */
@media screen and (min-width: 1025px) {
	/* internal.master.cs adds .c-w1-position (top: -30px in main.css) when the URL has more than two slashes,
	   e.g. /new-home/Action/Preview, which pulls the hero 30px up under the header */
	#wrapper:has(.hn-home) #cph_main_divCW1.c-w1-position {
		top: 0;
	}

	/* 100vw includes the vertical scrollbar; cqw measured on the full-width #wrapper does not */
	body #wrapper:has(.hn-home) {
		container-type: inline-size;
	}

	.hn-home {
		width: 100cqw;
		margin-left: -50cqw;
		padding-bottom: 21px;
	}

	.hn-home .hn-hero {
		max-width: none;
	}

	.hn-home .hn-hero__button {
		font-weight: 400;
		font-size: 18px;
		line-height: 18px;
		white-space: nowrap;
	}
}

/* Desktop header and footer, limited to the page containing the new hero (cqw resolves against the #wrapper container set above) */
@media screen and (min-width: 1025px) {
	/* Header: background and bottom line span the viewport; .h-w1 keeps the 1220px column (1180px inside .h-w2 padding) */
	body:has(.hn-hero) #header.page-section {
		width: auto;
		padding-left: 0;
		padding-right: 0;
		background: #fff;
	}

	body:has(.hn-hero) .h-w2 {
		height: 120px;
	}

	body:has(.hn-hero) .h-w1::before {
		left: 50%;
		width: 100cqw;
		margin-left: -50cqw;
	}

	/* Tabs are absolutely positioned per nth-child (1 Professionals, 2 Industrial, 3 For your home); the slots are swapped so
	   they read For your home, Trade / Professionals, Industrial while each tab keeps its own colours */
	/* home.css shifts #content (left: -48px; width: 85%) for screens 768-1024px wide by device-width, which also matches
	   desktop-sized windows on such screens (e.g. iPad Pro landscape) and pulls the full-width hero off-centre */
	body:has(.hn-hero) #content {
		left: 0;
		width: 100%;
	}

	/* 255 x 46 tabs with rounded top corners; top: -1px keeps the bottom edge on the 117px header line. Flex centring lets
	   a longer label (e.g. translated "COMMERCE / PROFESSIONNELS") wrap onto two lines inside the tab */
	body:has(.hn-hero) #mainnav ul.L1 > li:nth-child(-n+3) > a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 255px;
		height: 46px;
		top: -1px;
		box-sizing: border-box;
		padding: 0; /* "TRADE / PROFESSIONALS" is ~172px, so it only stays on one line in the 177px tabs below 1220px without side padding */
		line-height: 1.1;
		border-radius: 5px 5px 0 0;
	}

	/* Google Translate picker (moved here by js/home-new.js), in the 40px top bar; right: 20px matches the Industrial tab */
	/* Also carries .googletranslate for the existing gadget styles, so that class's float and offsets are reset; the
	   z-index clears #topbar (9002) in the same stacking context */
	body:has(.hn-hero) #header .hn-lang {
		position: absolute;
		top: 0;
		right: 20px;
		z-index: 9003;
		float: none;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: 40px;
	}

	/* The visible gadget sizes the slot, so a longer locale label grows it leftwards; js/home-new.js also measures the
	   gadget against the Industrial tab and corrects right if they differ */
	body:has(.hn-hero) #header .hn-lang #google_translate_element,
	body:has(.hn-hero) #header .hn-lang .goog-te-gadget,
	body:has(.hn-hero) #header .hn-lang .goog-te-gadget-simple {
		position: static;
		float: none;
		margin: 0;
		width: auto;
		white-space: nowrap;
	}
/*
	body:has(.hn-hero) #mainnav ul.L1 > li:nth-child(3) > a {
		right: 568px;
	}

	body:has(.hn-hero) #mainnav ul.L1 > li:nth-child(1) > a {
		right: 293px;
	}

	body:has(.hn-hero) #mainnav ul.L1 > li:nth-child(2) > a {
		right: 20px;
	}
*/
	/* Footer and the representative lists above it: 1360px centred, 20px from the window edges below 1400px */
	body:has(.hn-hero) #footer.page-section {
		width: min(1360px, calc(100cqw - 40px));
		max-width: none;
		box-sizing: border-box;
	}

	/* Same box as .hn-promos, so the rows start at the map's left edge */
	body:has(.hn-hero) .salesforce-form .home-salesforce-form {
		width: min(1360px, calc(100cqw - 40px));
		max-width: none;
		margin-left: calc(50% - min(680px, 50cqw - 20px));
		padding-left: 0;
		padding-right: 0;
		box-sizing: border-box;
	}

	/* Divider above the representatives: the map's 1360px box (narrower windows keep the map's 20px side insets) as a
	   5px #757575 line, positioned like .home-salesforce-form above. main.css draws it as calc(100% - 3px) of the 1220px
	   .salesforce-form, plus a second 5px top border on ::after across that width; the ::after top border is dropped
	   (its bottom line is the full-width divider below). !important because the live line has been measured
	   narrower than any file stylesheet sets it, so an embedded page rule may also target it */
	body:has(.hn-hero) .salesforce-form::before {
		top: 0 !important;
		right: auto !important;
		left: calc(50% - min(680px, 50cqw - 20px)) !important;
		width: min(1360px, calc(100cqw - 40px)) !important;
		max-width: none !important;
		margin: 0 !important;
		border-top: 5px solid #757575 !important;
	}

	body:has(.hn-hero) .salesforce-form::after {
		border-top: 0 !important;
	}

	/* Representatives, laid out on the 1360px design frame: the intro in a 440.2px column, then three 275px link columns
	   at 460, 772.5 and 1085px. Percentages keep those proportions on narrower windows */
	body:has(.hn-hero) #footer-professionals-title h2,
	body:has(.hn-hero) #footer-industrial-title h2 {
		display: block;
		font: normal normal 400 36px/44px Merriweather, serif;
		letter-spacing: -0.36px;
		color: #000 !important;
	}

	/* main.css indents this row with !important between 641px and 1219px */
	body:has(.hn-hero) .home-salesforce-form #footer-professionals {
		display: grid;
		grid-template-columns: 32.368% minmax(0, 1fr);
		column-gap: 1.456%;
		align-items: start;
		margin-left: 0 !important;
		margin-bottom: 0;
	}

	body:has(.hn-hero) #footer-professionals #prof-left-col {
		width: auto;
		min-width: 0;
	}

	body:has(.hn-hero) #footer-professionals #prof-left-col h3 {
		max-width: 440.2px;
		margin: 0;
		font: normal normal 600 24px/32px "Source Sans Pro", sans-serif;
		letter-spacing: 0;
		color: #000;
	}

	body:has(.hn-hero) #footer-professionals #prof-right-col {
		min-width: 0;
		margin-top: 0;
	}

	body:has(.hn-hero) #footer-professionals-content {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0 4.1667%;
	}

	/* 26px lines 38px apart */
	body:has(.hn-hero) #footer-professionals-content > div {
		display: flex;
		flex-direction: column;
		row-gap: 12px;
		min-width: 0;
	}

	body:has(.hn-hero) #footer-professionals-content .footer-professionals-item {
		flex: none;
		margin: 0 !important;
		font: normal normal 400 18px/26px "Source Sans Pro", sans-serif;
		letter-spacing: 0;
		color: #0070af;
		text-decoration: underline;
	}

	body:has(.hn-hero) #footer-professionals-content .footer-professionals-item a,
	body:has(.hn-hero) #footer-professionals-content .footer-professionals-item a:visited {
		color: #0070af;
		text-decoration: underline;
	}

	body:has(.hn-hero) .salesforce-form .home-salesforce-form {
		margin-bottom: 0;
		padding-bottom: 0;
	}

	body:has(.hn-hero) #footer-industrial-title h2 {
		max-width: 930.2px;
		margin: 40px 0 0;
	}

	body:has(.hn-hero) #footer-industrial-content p {
		margin: 20px 0 0;
		padding-bottom: 0;
		font: normal normal 400 18px/26px "Source Sans Pro", sans-serif;
		letter-spacing: 0;
		color: #000;
	}

	body:has(.hn-hero) #footer-industrial-content a {
		font: inherit;
		color: #0070af;
		text-decoration: underline;
	}

	/* Divider under the representatives: 50px below the industrial paragraph, 5px #757575 across the whole window.
	   main.css hangs it 15px below .salesforce-form at the 1220px width; here it sits in the form's 5px bottom margin, so
	   the footer starts right under it */
	/* Top: the 5px divider, then 50px to the commercial heading. The gap is padding because the heading's own top margin
	   would collapse through the form and push the divider away from the map */
	body:has(.hn-hero) .salesforce-form {
		margin-top: 0;
		margin-bottom: 5px;
		padding-top: 55px;
		padding-bottom: 50px;
	}

	body:has(.hn-hero) #footer-professionals-title h2 {
		margin-top: 0;
	}

	body:has(.hn-hero) .salesforce-form::after {
		top: auto !important;
		bottom: -5px !important;
		right: auto !important;
		left: calc(50% - 50cqw) !important;
		width: 100cqw !important;
		height: 0;
		border-top: 0 !important;
		border-bottom: 5px solid #757575 !important;
	}

	body:has(.hn-hero) #main {
		padding-bottom: 0;
	}

	/* Footer: the buttons 40px under the divider and 60px of space under the legal line */
	body:has(.hn-hero) #footer.page-section {
		padding: 40px 0 60px;
	}

	/* Copyright and legal links are centred; the near-me modal and every other footer row keep left alignment */
	body:has(.hn-hero) #footer .f-w2 {
		text-align: center;
	}

	body:has(.hn-hero) #footer .f-w2 > :not(#copyright):not(#bottomlinks) {
		text-align: left;
	}

	/* "Stay Connected" and the icons on the left, the two 325x50 buttons ending at the right edge. .group's clearfix
	   pseudo-elements would otherwise be flex items and pull the buttons off the edge */
	body:has(.hn-hero) #footer .footblock {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		min-height: 50px;
		padding: 0;
		border: 0;
	}

	body:has(.hn-hero) #footer .footblock::before,
	body:has(.hn-hero) #footer .footblock::after {
		content: none;
	}

	body:has(.hn-hero) #footer .socialmedia {
		flex: none;
		float: none;
		width: auto;
		position: static;
		top: auto;
	}

	body:has(.hn-hero) #footer #newsletter {
		flex: 0 1 670px;
		min-width: 0;
		float: none;
		margin-left: auto;
	}

	body:has(.hn-hero) #footer #newsletter .dealer-login {
		display: flex;
		justify-content: flex-end;
		gap: 20px;
	}

	/* The page's embedded near-me style sets #openModal to bold, 2px border and a 20px right margin */
	body:has(.hn-hero) #footer #newsletter .dealer-login #openModal,
	body:has(.hn-hero) #footer #newsletter .dealer-login a.btn-yellow {
		position: static;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		flex: 0 1 325px;
		min-width: 0;
		height: 50px;
		margin: 0;
		padding: 0 16px;
		box-sizing: border-box;
		border: 1px solid #000;
		border-radius: 0;
		background: #fff;
		box-shadow: none;
		font: normal normal 400 18px/18px "Source Sans Pro", sans-serif;
		letter-spacing: 0;
		text-transform: uppercase;
		text-decoration: none;
		white-space: nowrap;
		color: #000 !important;
		cursor: pointer;
		transition: background-color 0.3s ease-out, color 0.3s ease-out;
	}

	body:has(.hn-hero) #footer #newsletter .dealer-login #openModal:hover,
	body:has(.hn-hero) #footer #newsletter .dealer-login #openModal:focus-visible,
	body:has(.hn-hero) #footer #newsletter .dealer-login a.btn-yellow:hover,
	body:has(.hn-hero) #footer #newsletter .dealer-login a.btn-yellow:focus-visible {
		background: #000;
		color: #ffd200 !important;
	}

	/* Same arrow as the hero buttons, drawn in the text colour */
	body:has(.hn-hero) #footer #newsletter .dealer-login #openModal::after,
	body:has(.hn-hero) #footer #newsletter .dealer-login a.btn-yellow::after {
		content: "";
		flex: none;
		width: 16px;
		height: 10px;
		background-color: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14.5M10.5 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14.5M10.5 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	/* Sitemap: the logo starts 144px under the divider (54px under the 50px buttons) and the headings 20px lower. Logo
	   column then four link columns starting at 368, 644, 900 and 1150px of 1360px; percentages keep the same proportions
	   on narrower windows (the four columns share the 992px right of the logo column). The 251px-tall logo is the
	   tallest item, so the legal line sits 20px under it */
	body:has(.hn-hero) #footer .foot-sitemap {
		align-items: flex-start;
		margin: 54px 0 20px;
		padding: 0;
		border: 0;
	}

	body:has(.hn-hero) #footer .foot-sitemap #footlogo {
		flex: 0 0 27.06%;
		width: auto;
	}

	body:has(.hn-hero) #footer .foot-sitemap #footlogo img {
		width: 260px;
		max-width: 100%;
		height: auto;
		margin: 0;
		padding-right: 0;
	}

	body:has(.hn-hero) #footer .foot-sitemap > :has(.navsitemap.L1),
	body:has(.hn-hero) #footer .foot-sitemap > .navsitemap.L1 {
		flex: 1 1 0;
		min-width: 0;
		margin-top: 20px;
	}

	/* .desktop-h is the list main.css hides on desktop; it keeps display: none */
	body:has(.hn-hero) #footer .foot-sitemap .navsitemap.L1:not(.desktop-h) {
		display: flex;
		width: 100%;
		margin: 0;
		padding-left: 0;
	}

	body:has(.hn-hero) #footer .foot-sitemap .navsitemap.L1 > li {
		display: block;
		flex: 1 1 0;
		min-width: 0;
		padding-right: 20px;
		box-sizing: border-box;
	}

	body:has(.hn-hero) #footer .foot-sitemap .navsitemap.L1 > li:nth-child(1) {
		flex: 0 0 27.82%;
	}

	body:has(.hn-hero) #footer .foot-sitemap .navsitemap.L1 > li:nth-child(2) {
		flex: 0 0 25.81%;
	}

	body:has(.hn-hero) #footer .foot-sitemap .navsitemap.L1 > li:nth-child(3) {
		flex: 0 0 25.2%;
	}

	/* The fourth heading is a non-breaking space, so min-height keeps its links level with the others */
	body:has(.hn-hero) #footer .foot-sitemap .navsitemap.L1 > li > a {
		display: block;
		min-height: 24px;
		margin: 0 0 16px;
		font: normal normal 500 20px/24px Lato, sans-serif;
		letter-spacing: 0;
		text-transform: none;
		text-decoration: none;
		color: #000;
	}

	body:has(.hn-hero) #footer .foot-sitemap .navsitemap.L2 {
		display: flex;
		flex-direction: column;
		row-gap: 12px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	body:has(.hn-hero) #footer .foot-sitemap .navsitemap.L2 > li {
		position: static;
		left: auto;
		margin: 0;
		padding-left: 0;
		line-height: 26px;
		list-style: none;
	}

	body:has(.hn-hero) #footer .foot-sitemap .navsitemap.L2 > li::before {
		content: none;
	}

	body:has(.hn-hero) #footer .foot-sitemap .navsitemap.L2 > li > a {
		font: normal normal 400 18px/26px "Source Sans Pro", sans-serif;
		letter-spacing: 0;
		color: #0070af;
		text-decoration: underline;
	}

	/* Some items carry a second, empty link holding only a <br>, which would add a blank line under the item */
	body:has(.hn-hero) #footer .foot-sitemap .navsitemap.L2 > li > a + a:has(> br) {
		display: none;
	}

	/* Both blocks wrap a content block div, so inline-block keeps them on one line */
	body:has(.hn-hero) #footer #copyright,
	body:has(.hn-hero) #footer #bottomlinks {
		display: inline-block;
		vertical-align: top;
		font: normal normal 400 14px/20px "Source Sans Pro", sans-serif;
	}

	body:has(.hn-hero) #footer #copyright {
		float: none;
		margin: 0 10px 0 0;
		padding: 0 10px 0 0;
	}

	body:has(.hn-hero) #footer #bottomlinks ul {
		margin: 0;
	}
}

/* Below 1220px main.css narrows the header column to the 980px .page-section and the logo to 270px */
@media screen and (min-width: 1025px) and (max-width: 1219px) {
	body:has(.hn-hero) .h-w1 {
		width: 980px;
		margin: 0 auto;
	}

	body:has(.hn-hero) #mainnav ul.L1 > li:nth-child(-n+3) > a {
		width: 177px;
	}

	body:has(.hn-hero) #mainnav ul.L1 > li:nth-child(3) > a {
		right: 444px;
	}

	body:has(.hn-hero) #mainnav ul.L1 > li:nth-child(1) > a {
		right: 232px;
	}

	body:has(.hn-hero) #mainnav ul.L1 > li:nth-child(2) > a {
		right: 20px;
	}
}

/* Mobile header language picker. mobile.css fixes the box at 148px (and every .skiptranslate, which includes Google's
   gadget wrapper), so locale labels such as "Selecione o idioma" or "Sélectionner une langue" spill out of it. Here the
   label is smaller, the box grows with it, the search box gives up the extra room and a label that still does not fit
   is cut with an ellipsis instead of overflowing */
@media screen and (max-width: 640px) {
	body:has(.hn-hero) .mobile-utility-bar .utility-actions {
		gap: 12px;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	body:has(.hn-hero) .mobile-utility-bar .utility-actions .search-box {
		min-width: 0;
	}

	/* .language-select (around #google_translate_placeholder_mobile) is the flex item beside the search box */
	body:has(.hn-hero) .mobile-utility-bar .utility-actions .language-select {
		flex: 0 1 auto;
		min-width: 0;
		max-width: 60%;
	}

	body:has(.hn-hero) #google_translate_placeholder_mobile #google_translate_element,
	body:has(.hn-hero) #google_translate_placeholder_mobile .goog-te-gadget.skiptranslate {
		width: auto !important;
		max-width: 100% !important;
	}

	body:has(.hn-hero) #google_translate_placeholder_mobile .goog-te-gadget-simple {
		width: auto !important;
		min-width: 148px;
		max-width: 100%;
		padding: 0 8px !important;
		font-size: 12px !important;
		white-space: nowrap;
	}

	body:has(.hn-hero) #google_translate_placeholder_mobile .goog-te-gadget-simple > span,
	body:has(.hn-hero) #google_translate_placeholder_mobile .goog-te-gadget-simple > span > a {
		min-width: 0;
		overflow: hidden;
	}

	body:has(.hn-hero) #google_translate_placeholder_mobile .goog-te-gadget-simple > span > a {
		gap: 4px !important;
	}

	body:has(.hn-hero) #google_translate_placeholder_mobile .goog-te-gadget-simple a,
	body:has(.hn-hero) #google_translate_placeholder_mobile .goog-te-gadget-simple a span {
		font-size: 12px !important;
		line-height: 1.2;
	}

	body:has(.hn-hero) #google_translate_placeholder_mobile .goog-te-gadget-simple > span > a > span:first-child {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}