section.whats-new { 
	padding: 20px 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

section.whats-new .carousel-wrapper { 
	font-size: 0;
}

section.whats-new .carousel-container {
	display: inline-block;
	vertical-align: top;
	width: calc(75% - 6px);
}

section.whats-new .see-all-panel.desktop {
	display: inline-block;
	width: calc(25% + 6px);
	background-color: transparent;
	padding: 0 0 0 20px;
	font-size: 35px;
	font-weight: 600;

	background-color: transparent;
	color: #ffffff;
}

section.whats-new .see-all-panel p {
	font: inherit;
	color: inherit;
}

section.whats-new .btn-see-all.desktop {
	font-family: 'GT Ultra Bold', sans-serif;
	font-size: 35px;
	font-weight: 600;
	color: var(--hl-light-green);
	background-color: var(--hlc-midnight-blue);
	align-items: end;
	text-decoration: none;
	padding: 20px;
	transition: all 0.2s;
	display: flex;
	flex-direction: row;
	gap: 10px;
	justify-content: space-between;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

section.whats-new .btn-see-all.desktop:hover { 
	background-color: var(--hl-light-green);
	color: var(--hlc-midnight-blue);
}

section.whats-new .btn-see-all.desktop:hover div.text-container div.indicator { 
	background-image: url("/_assets2026/icon-line-arrow-hlc-midnight-blue.png");

}

section.whats-new .btn-see-all.desktop div.text-container {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: end;
	gap: 10px;
	justify-content: space-between;
}

section.whats-new .btn-see-all.desktop div.text-container div.indicator { 
	width: 22px;
	height: 22px;
	background-image: url("/_assets/icon-line-arrow-hl-light-green.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	transform: rotate(-45deg);
	flex-shrink: 0;
	transition: all 0.2s;
}

section.whats-new .btn-see-all.desktop div.text-container div.text > :last-child { 
	margin-bottom: 0; 
}

.knowhow-panel.standard-knowhow-panel .inner { 
	background-color: var(--hl-light-taupe);
}

.knowhow-panel.standard-knowhow-panel .inner:hover { 
	background-color: var(--hlc-midnight-blue)!important;
	color: #ffffff;
}

.knowhow-panel.standard-knowhow-panel .inner:hover .tag .type,
.knowhow-panel.standard-knowhow-panel .inner:hover .content .date,
.knowhow-panel.standard-knowhow-panel .inner:hover .content div.title p {
	color: inherit;
}

section.whats-new div.see-all-panel.mobile {
	display: none;
}

section.whats-new a.btn-see-all.mobile {
	background-color: var(--hlc-midnight-blue);
	font-size: 15px;
	color: #ffffff;
	padding: 0.7em 1em;
	text-decoration: none;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	transition: all 0.2s;
}

section.whats-new a.btn-see-all.mobile:hover {
	background-color: var(--hl-light-green);
	color: var(--hlc-midnight-blue);
}

section.whats-new a.btn-see-all.mobile:after {
	content: "";
	width: 12px;
	height: 12px;
	background-image: url("/_assets/icon-line-arrow-hl-light-green.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform 0.2s;
}

section.whats-new a.btn-see-all.mobile:hover:after {
	background-image: url("/_assets2026/icon-line-arrow-hlc-midnight-blue.png");
	transform: translateX(5px);
}

/*** Themes ***/

/*
	dark-green
	multi-gradient
	purple-light-green-gradient
	taupe
	teal-light-green-gradient
	teal-purple-gradient
	white
*/

section.whats-new.tpp-theme-dark-green div.section-title,
section.whats-new.tpp-theme-dark-gradient div.section-title {
	color: #ffffff;
}

section.whats-new.tpp-theme-dark-green .slick-arrow,
section.whats-new.tpp-theme-dark-gradient .slick-arrow {
	border-color: var(--hl-light-green);
	background-image: url("/_assets/icon-line-arrow-hl-light-green.png");
}

section.whats-new.tpp-theme-dark-green .slick-arrow:hover,
section.whats-new.tpp-theme-dark-gradient .slick-arrow:hover {
	background-color: var(--hl-light-green);
	background-image: url("/_assets2026/icon-line-arrow-hlc-midnight-blue.png");
}

section.whats-new.tpp-theme-dark-green .knowhow-panel.standard-knowhow-panel .inner:hover,
section.whats-new.tpp-theme-dark-gradient .knowhow-panel.standard-knowhow-panel .inner:hover {
	background-color: var(--hl-light-green) !important;
	color: var(--hlc-midnight-blue);
}

section.whats-new.tpp-theme-dark-green a.btn-see-all {
	background-color: var(--hl-light-green);
	color: var(--hlc-midnight-blue);
}

section.whats-new a.btn-see-all.desktop.tpp-theme-dark-gradient { 
	background-image: url("/template-tool/_assets/bg-dark-gradient-flipped.jpg");
	color: #ffffff;
}

section.whats-new a.btn-see-all.desktop.tpp-theme-light-gradient {
	background-image: url("/template-tool/_assets/bg-light-gradient.jpg");
	color: var(--hlc-midnight-blue);
}

section.whats-new a.btn-see-all.desktop div.text-container div.indicator,
section.whats-new a.btn-see-all.mobile:after,
section.whats-new a.btn-see-all.desktop div.text-container div.indicator,
section.whats-new a.btn-see-all.mobile:after {
	background-image: url("/_assets/icon-line-arrow-hl-light-green.png");
}

section.whats-new.tpp-theme-multi-gradient .knowhow-panel.standard-knowhow-panel .inner:hover {
	background-color: var(--hl-light-green) !important;
	color: var(--hlc-midnight-blue);
}

section.whats-new.tpp-theme-dark-green .knowhow-panel.standard-knowhow-panel .inner,
section.whats-new.tpp-theme-multi-gradient .knowhow-panel.standard-knowhow-panel .inner,
section.whats-new.tpp-theme-purple-light-green-gradient .knowhow-panel.standard-knowhow-panel .inner,
section.whats-new.tpp-theme-taupe .knowhow-panel.standard-knowhow-panel .inner,
section.whats-new.tpp-theme-teal-purple-gradient .knowhow-panel.standard-knowhow-panel .inner {
	background-color: #ffffff;
}

section.whats-new.tpp-theme-taupe { 
	background-color: var(--hl-taupe);
}

section.whats-new .btn-see-all.desktop.tpp-theme-light-green:hover {
	background-color: var(--hlc-midnight-blue);
	color: var(--hl-light-green);
}

section.whats-new .btn-see-all.desktop.tpp-theme-light-green:hover div.text-container div.indicator,
section.whats-new .btn-see-all.desktop.tpp-theme-dark-gradient:hover div.text-container div.indicator {
	background-image: url("/_assets/icon-line-arrow-hl-light-green.png");
	transform: rotate(0);
}

section.whats-new.tpp-theme-white .slick-arrow,
section.whats-new.tpp-theme-teal-purple-gradient .slick-arrow {
	border-color: var(--hl-light-green);
}

section.whats-new .btn-see-all.desktop.tpp-theme-light-gradient div.text-container div.indicator {
	background-image: url("/_assets2026/icon-line-arrow-hlc-midnight-blue.png");
} 

section.whats-new .btn-see-all.desktop.tpp-theme-light-gradient:hover div.text-container div.indicator {
	transform: rotate(0);
}


/*** Browse Button Themes ***/

/*
	dark-green
	purple-light-green-gradient
*/

section.whats-new .btn-see-all.desktop.tpp-theme-purple-light-green-gradient { 
	background-image: url("/template-tool/_assets/bg-purple-light-green-gradient-vertical.jpeg");
	color: var(--hlc-midnight-blue);
}

section.whats-new .btn-see-all.desktop.tpp-theme-purple-light-green-gradient .text-container .indicator { 
	background-image: url("/_assets2026/icon-line-arrow-hlc-midnight-blue.png");
}

section.whats-new .btn-see-all.desktop.tpp-theme-purple-light-green-gradient:hover {
	background-image: none;
	background-color: var(--hlc-midnight-blue);
	color: var(--hl-light-green);
}

section.whats-new .btn-see-all.desktop.tpp-theme-purple-light-green-gradient:hover .text-container .indicator {
	background-image: url("/_assets/icon-line-arrow-hl-light-green.png");
}

@media (max-width: 1020px) {
	section.whats-new .carousel-container { 
		width: calc(66% - 6px);
	}

	section.whats-new .see-all-panel.desktop {
		width: calc(33% + 6px);
	}
}

@media (max-width: 780px) {
	section.whats-new .carousel-container {
		width: calc(50% - 10px);
	}

	section.whats-new .see-all-panel.desktop {
		width: calc(50% + 10px);
	}

}

@media (max-width: 740px) {
	section.whats-new .carousel-container { 
		width: 100%;
	}

	section.whats-new .see-all-panel.desktop { 
		display: none;
	}

	section.whats-new div.see-all-panel.mobile { 
		display: block;
	}
}