/* ==========================================================================
   Početna (page-templates/homepage.php) – redizajn 2026.
   Sve klase imaju prefiks .hp- da ne diraju ostatak teme.
   Desktop mjere su iz dizajna širine 1920 px (sadržaj 1296 px),
   mobilne iz dizajna širine 390 px.
   ========================================================================== */

.hp {
	--hp-black: #000;
	--hp-text: #1d1d1b;
	--hp-muted: #4a4a4a;
	--hp-soft: #8a8a8a;
	--hp-line: #d6d4d1;
	--hp-grey: #f5f4f2;
	--hp-grey-2: #f8f7f5;
	--hp-pink: #f1e4e7;
	--hp-bar: #dedede;
	--hp-font: 'Jost', 'font92860', 'Futura PT', Futura, 'Helvetica Neue', Arial, sans-serif;
	--hp-wrap: 1296px;
	--hp-gutter: 24px;

	font-family: var(--hp-font);
	font-weight: 400;
	color: var(--hp-text);
}

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

.hp p {
	margin: 0;
}

/* Neki dodatak razvlači .swiper-wrapper na visinu prozora. */
.hp .swiper-wrapper {
	height: auto;
}

.hp h1,
.hp h2,
.hp h3 {
	font-family: var(--hp-font);
	color: var(--hp-text);
	margin: 0;
}

.hp ul,
.hp ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hp img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Layout ------------------------------------------------------------------ */

.hp-wrap {
	max-width: calc(var(--hp-wrap) + var(--hp-gutter) * 2);
	margin: 0 auto;
	padding: 0 var(--hp-gutter);
}

.hp-wrap--narrow {
	max-width: calc(860px + var(--hp-gutter) * 2);
	text-align: center;
}

.hp-section {
	padding: 96px 0;
}

.hp-section--grey {
	background: var(--hp-grey-2);
}

.hp-section__head {
	margin-bottom: 75px;
}

.hp-section__intro {
	margin-top: 10px !important;
	font-size: 18px;
	line-height: 1.6;
	color: var(--hp-muted);
}

.hp-grid {
	display: grid;
	gap: 54px 27px;
}

.hp-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hp-center {
	margin-top: 64px;
	text-align: center;
}

.hp-heading-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 35px;
}

/* Typography -------------------------------------------------------------- */

.hp .hp-title {
	font-size: 37px;
	font-weight: 300;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.hp .hp-title--xl {
	font-size: 58px;
	line-height: 1.2;
}

.hp-lead {
	margin-top: 29px !important;
	font-size: 17px;
	line-height: 1.6;
	color: var(--hp-muted);
}

/* Buttons & links --------------------------------------------------------- */

.hp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 53px;
	padding: 13px 24px;
	border: 1px solid var(--hp-black);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.3;
	transition: background-color 0.2s, color 0.2s;
}

.hp-btn--dark {
	background: var(--hp-black);
	color: #fff;
}

.hp-btn--dark:hover,
.hp-btn--dark:focus {
	background: #333;
	border-color: #333;
	color: #fff;
}

.hp-btn--outline {
	background: transparent;
	color: var(--hp-black);
}

.hp-btn--outline:hover,
.hp-btn--outline:focus {
	background: var(--hp-black);
	color: #fff;
}

.hp-btn--light {
	background: #fff;
	border-color: #fff;
	color: var(--hp-black);
}

.hp-btn--light:hover,
.hp-btn--light:focus {
	background: transparent;
	color: #fff;
}

/* Podcrtani link: linija je stalno tu, a na hover se povuče udesno
   i ponovno iscrta slijeva (dva takta, 0.6s). */
@keyframes hp-line-redraw {
	0%   { transform: scaleX(1); transform-origin: 100% 50%; }
	49%  { transform: scaleX(0); transform-origin: 100% 50%; }
	50%  { transform: scaleX(0); transform-origin: 0% 50%; }
	100% { transform: scaleX(1); transform-origin: 0% 50%; }
}

.hp-link {
	position: relative;
	display: inline-block;
	padding: 0 5px 16px 0;
	min-width: 147px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hp-black);
}

.hp-link::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: #9a9a9a;
	pointer-events: none;
}

.hp-link:hover,
.hp-link:focus {
	color: var(--hp-black);
}

@media (prefers-reduced-motion: no-preference) {
	.hp-link:hover::before,
	.hp-link:focus-visible::before {
		animation: hp-line-redraw 0.6s ease;
	}
}

/* Bez stalne linije (npr. „Saznajte više“ u edukacijama): linija se na hover
   iscrta slijeva. */
.hp-link--plain {
	padding-bottom: 6px;
	min-width: 0;
}

.hp-link--plain::before {
	background: currentColor;
	transform: scaleX(0);
	transform-origin: 0% 50%;
	transition: transform 0.3s ease;
}

.hp-link--plain:hover::before,
.hp-link--plain:focus-visible::before {
	animation: none;
	transform: scaleX(1);
}

.hp-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 120px;
	background: linear-gradient(135deg, #ecebe8, #e2e0dc);
}

/* Free delivery ----------------------------------------------------------- */

.hp-delivery {
	padding: 19px 16px;
	background: var(--hp-bar);
	text-align: center;
	font-size: 18px;
	font-weight: 500;
	color: var(--hp-black);
}

/* Hero -------------------------------------------------------------------- */

.hp-hero {
	position: relative;
	padding: 0;
}

.hp-hero__slide,
.hp-hero__desktop,
.hp-hero__mobile {
	display: block;
}

/* Svi slideovi iste visine: fiksni omjer (1920×550 desktop, 640×761 mobitel),
   slika se reže na sredini ako je drugačijeg formata. */
.hp-hero__desktop,
.hp-hero__mobile {
	position: relative;
	overflow: hidden;
}

.hp-hero__desktop {
	aspect-ratio: 1920 / 550;
}

.hp-hero__mobile {
	aspect-ratio: 640 / 761;
}

.hp-hero img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.hp-hero__mobile {
	display: none;
}

.hp-hero__pagination.swiper-pagination-bullets {
	bottom: 16px;
}

.hp-hero__pagination .swiper-pagination-bullet {
	width: 24px;
	height: 2px;
	border-radius: 0;
	background: #fff;
	opacity: 0.5;
}

.hp-hero__pagination .swiper-pagination-bullet-active {
	opacity: 1;
}

/* Intro ------------------------------------------------------------------- */

.hp-intro {
	padding: 70px 0 93px;
}

.hp-intro__tags {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 27px !important;
	font-size: 20px;
	color: var(--hp-soft);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.hp-intro__tags span + span::before {
	content: '';
	display: inline-block;
	width: 1px;
	height: 18px;
	margin: 0 13px;
	background: #c9c9c9;
	vertical-align: -2px;
}

.hp-intro__text {
	max-width: 750px;
	margin: 32px auto 0 !important;
	font-size: 18px;
	line-height: 1.7;
	color: var(--hp-muted);
}

.hp-intro__buttons {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 13px;
	margin-top: 29px;
}

/* Cards ------------------------------------------------------------------- */

.hp-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.hp-card__img {
	display: block;
	width: 100%;
	aspect-ratio: 310 / 224;
	overflow: hidden;
	margin-bottom: 24px;
}

.hp-pro .hp-card__img {
	aspect-ratio: 310 / 190;
}

.hp-home-care .hp-card__img {
	aspect-ratio: 310 / 213;
}

.hp-card__img img,
.hp-card__img .hp-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

a.hp-card__img:hover img {
	transform: scale(1.03);
}

.hp .hp-card__title {
	font-size: 22px;
	font-weight: 400;
	line-height: 1.3;
	text-transform: uppercase;
}

.hp-card__text {
	margin-top: 13px !important;
	font-size: 16px;
	line-height: 1.6;
	color: var(--hp-muted);
}

/* Link ide na dno kartice, pa su u istom redu svi u istoj liniji
   bez obzira na dužinu teksta. Razmak iznad linka drži tekst. */
.hp-card .hp-card__text {
	margin-bottom: 35px;
}

.hp-card .hp-link {
	margin-top: auto;
}

/* Split sections ---------------------------------------------------------- */

.hp-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 0;
}

.hp-split--grey {
	background: var(--hp-grey);
}

.hp-split--pink {
	background: var(--hp-pink);
}

.hp-split__media {
	position: relative;
	min-height: 480px;
}

.hp-split__media img,
.hp-split__media .hp-placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hp-split__body {
	max-width: 693px;
	padding: 101px var(--hp-gutter) 101px 64px;
	align-self: center;
}

.hp-steps {
	margin-top: 45px !important;
}

.hp-steps__item {
	display: grid;
	grid-template-columns: 55px 1fr;
	padding: 40px 0;
	border-top: 1px solid var(--hp-line);
}

.hp-steps__item:last-child {
	padding-bottom: 0;
}

.hp-steps__num {
	font-size: 15px;
	line-height: 2;
	color: var(--hp-soft);
}

.hp .hp-steps__title {
	font-size: 21px;
	font-weight: 300;
	line-height: 1.4;
}

.hp-steps__text {
	margin-top: 8px !important;
	font-size: 15px;
	line-height: 1.6;
	color: var(--hp-muted);
}

/* Benefits ---------------------------------------------------------------- */

.hp-benefits {
	padding: 64px 32px !important;
	border-bottom: 1px solid #e6e6e6;
}

.hp-benefits__list {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
	max-width: 1760px;
	margin: 0 auto !important;
}

.hp-benefits__item {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 16px;
	color: var(--hp-text);
}

.hp-benefits__item img {
	width: 75px;
	height: 53px;
	object-fit: contain;
}

/* Arrows ------------------------------------------------------------------ */

.hp-arrows {
	display: flex;
	gap: 13px;
	flex-shrink: 0;
}

.hp-arrows--center {
	justify-content: center;
	margin-top: 29px;
}

.hp-arrow {
	position: relative;
	width: 43px;
	height: 43px;
	padding: 0;
	border: 1px solid #c8c8c8;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.2s;
}

.hp-arrow:hover {
	border-color: var(--hp-black);
}

.hp-arrow::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	transform: translate(-50%, -50%);
	background: var(--hp-black);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M11 6H1.5M5.5 2 1.5 6l4 4' fill='none' stroke='%23000' stroke-width='1.2'/%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 12 12'%3E%3Cpath d='M11 6H1.5M5.5 2 1.5 6l4 4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hp-arrow--next::before {
	transform: translate(-50%, -50%) scaleX(-1);
}

.hp-arrow.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
}

/* Products ---------------------------------------------------------------- */

.hp-products {
	padding: 96px 0 85px;
}

/* Swiper reže sve izvan okvira (overflow: hidden); bez ovog razmaka donji rub
   kartice zbog decimalne visine zna nestati. */
.hp .hp-products__swiper {
	padding: 1px 0 2px;
}

.hp-product {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 21px 27px 24px;
	border: 1px solid #d9d9d9;
	background: #fff;
	color: var(--hp-text);
	text-align: center;
	transition: border-color 0.2s;
}

.hp-product:hover {
	border-color: #9a9a9a;
	color: var(--hp-text);
}

.hp-product__img {
	display: block;
	aspect-ratio: 1 / 1;
}

.hp-product__img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hp-product__title {
	margin-top: 29px;
	font-size: 19px;
	font-weight: 300;
	line-height: 1.4;
}

/* Edukacija --------------------------------------------------------------- */

.hp-edu .hp-split__body {
	padding-left: 56px;
}

.hp-edu__list {
	margin-top: 61px !important;
}

.hp-edu__item {
	padding: 40px 0 43px;
	border-top: 1px solid #d6c9cc;
}

.hp-edu__item:last-child {
	padding-bottom: 0;
}

.hp-edu__item .hp-card__text {
	margin-top: 11px !important;
}

.hp-edu__item .hp-link {
	margin-top: 19px;
}

/* CTA --------------------------------------------------------------------- */

.hp-cta {
	padding: 101px 0 !important;
	background: var(--hp-black);
	color: #fff;
}

.hp-cta .hp-title {
	color: #fff;
}

.hp-cta__text {
	max-width: 827px;
	margin: 35px auto 0;
	font-size: 17px;
	line-height: 1.75;
}

.hp .hp-cta__text p {
	font-size: inherit;
	color: #fff;
}

.hp-cta__text p + p {
	margin-top: 11px;
}

/* Salon ------------------------------------------------------------------- */

.hp-salon__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

.hp-salon__media {
	aspect-ratio: 462 / 400;
}

.hp-salon__media img,
.hp-salon__media .hp-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hp-salon__body .hp-lead {
	margin-bottom: 27px !important;
}

.hp-salon__sub {
	margin-top: 29px;
	padding-top: 32px;
	border-top: 1px solid var(--hp-line);
}

.hp .hp-salon__sub .hp-card__title {
	font-size: 20px;
}

.hp-salon__sub .hp-card__text {
	margin: 8px 0 21px !important;
}

/* Testimonials ------------------------------------------------------------ */

.hp-testimonials {
	background: var(--hp-grey);
	padding: 85px 0 77px;
}

.hp .hp-testimonials .hp-title {
	font-size: 29px;
	margin-bottom: 37px;
}

.hp-quote {
	margin: 0;
}

.hp-quote__text,
.hp-quote__text p {
	font-size: 21px !important;
	font-weight: 300;
	line-height: 1.9;
	color: var(--hp-text) !important;
}

.hp-quote__author {
	display: block;
	margin-top: 32px;
	font-size: 13px;
	font-style: normal;
	color: var(--hp-muted);
}

/* Blog -------------------------------------------------------------------- */

.hp-blog {
	padding: 101px 0 133px;
}

.hp-heading-row--end .hp-section__intro {
	max-width: 573px;
}

.hp-blog__all {
	flex-shrink: 0;
}

.hp-blog__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 53px;
}

.hp-blog__item {
	display: grid;
	grid-template-columns: 59px 1fr;
	padding: 35px 0 40px;
	border-top: 1px solid var(--hp-line);
}

.hp .hp-blog__title {
	font-size: 23px;
	font-weight: 300;
	line-height: 1.35;
	text-transform: uppercase;
}

.hp-blog__title a {
	color: var(--hp-text);
}

.hp-blog__title a:hover {
	color: var(--hp-muted);
}

.hp-blog__text {
	margin-top: 19px !important;
	font-size: 15px;
	line-height: 1.6;
	color: var(--hp-muted);
}

/* Newsletter -------------------------------------------------------------- */

.hp-newsletter {
	padding: 83px 0 !important;
	background: var(--hp-grey);
}

.hp-newsletter__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: start;
}

.hp .hp-newsletter .hp-title {
	font-size: 35px;
	line-height: 1.2;
}

.hp-newsletter__form .mc4wp-form-fields {
	position: relative;
	display: flex;
	flex-direction: column;
}

.hp-newsletter__form .mc4wp-form-fields > p {
	margin: 0 !important;
}

.hp .hp-newsletter__form p {
	font-size: 17px;
}

.hp-newsletter__form input[type="email"] {
	width: 100%;
	height: 64px;
	margin: 0;
	padding: 0 160px 0 0;
	text-align: left;
	border: 0;
	border-bottom: 1px solid #555;
	border-radius: 0;
	background: transparent;
	font-family: var(--hp-font);
	font-size: 17px;
	color: var(--hp-text);
}

.hp-newsletter__form input[type="email"]:focus {
	outline: none;
	border-bottom-color: var(--hp-black);
}

.hp-newsletter__form input[type="submit"] {
	position: absolute;
	top: 0;
	right: 0;
	width: auto;
	height: 64px;
	margin: 0;
	padding: 0 11px;
	border: 0;
	background: transparent;
	font-family: var(--hp-font);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hp-black);
	cursor: pointer;
}

/* Gumb ide gore desno, uz polje, a suglasnost ispod. */
.hp-newsletter__form .mc4wp-form-fields > p:last-child {
	position: absolute;
	top: 0;
	right: 0;
}

.hp-newsletter__form label a {
	font-size: 13px !important;
	line-height: 1.6;
}

.hp-newsletter__form label {
	display: flex;
	gap: 11px;
	margin-top: 21px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--hp-muted);
}

.hp-newsletter__form label input {
	flex-shrink: 0;
	margin-top: 3px;
}

.hp-newsletter__form label a {
	color: var(--hp-muted);
}

/* Animacije i hover ---------------------------------------------------------
   Sve suptilno i kratko; isključeno kad korisnik u sustavu ima smanjeno kretanje. */

/* Izranjanje pri skrolanju (klasu .hp-reveal dodaje JS, pa bez JS-a sve je vidljivo). */
.hp-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--hp-delay, 0ms);
}

.hp-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: no-preference) {
	/* Hero: aktivna slika se polako približava (Ken Burns). */
	.hp-hero .swiper-slide img {
		transition: transform 7s ease-out;
	}

	.hp-hero .swiper-slide-active img {
		transform: scale(1.04);
	}

	/* Kartice: slika se lagano poveća, naslov potamni. */
	.hp-card__img img {
		transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
	}

	a.hp-card__img:hover img,
	.hp-card:hover .hp-card__img img {
		transform: scale(1.05);
	}

	/* Velike fotografije u split sekcijama i salon: spori zoom na hover. */
	.hp-split__media,
	.hp-salon__media {
		overflow: hidden;
	}

	.hp-split__media img,
	.hp-salon__media img {
		transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.hp-split:hover .hp-split__media img,
	.hp-salon__grid:hover .hp-salon__media img {
		transform: scale(1.03);
	}

	/* Proizvodi: rub potamni, slika se lagano poveća. Kartica se ne pomiče
	   jer Swiper reže sve izvan okvira (rub i sjena bi se odrezali). */
	.hp-product {
		transition: border-color 0.3s;
	}

	.hp-product__img {
		overflow: hidden;
	}

	.hp-product__img img {
		transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.hp-product:hover .hp-product__img img {
		transform: scale(1.05);
	}

	/* Ikone prednosti: ikona se lagano podigne. */
	.hp-benefits__item img {
		transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.hp-benefits__item:hover img {
		transform: translateY(-3px);
	}

	/* Blog: broj i naslov se pomaknu udesno. */
	.hp-blog__item .hp-steps__num,
	.hp-blog__title a {
		display: inline-block;
		transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s;
	}

	.hp-blog__item:hover .hp-steps__num {
		color: var(--hp-black);
	}

	.hp-blog__item:hover .hp-blog__title a {
		transform: translateX(6px);
	}

	/* Koraci: broj potamni. */
	.hp-steps__num {
		transition: color 0.3s;
	}

	.hp-steps__item:hover .hp-steps__num {
		color: var(--hp-black);
	}
}

/* Strelice: na hover se popune crnom, strelica postane bijela. */
.hp-arrow {
	transition: border-color 0.25s, background-color 0.25s;
}

.hp-arrow::before {
	transition: background-color 0.25s;
}

.hp-arrow:not(.swiper-button-disabled):hover {
	background: var(--hp-black);
}

.hp-arrow:not(.swiper-button-disabled):hover::before {
	background: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.hp-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Manji desktop / tablet --------------------------------------------------- */

@media (max-width: 1399px) {
	.hp-benefits__list {
		flex-wrap: wrap;
		justify-content: center;
		gap: 24px 48px;
	}
}

@media (max-width: 1199px) {
	.hp .hp-title {
		font-size: 32px;
	}

	.hp .hp-title--xl {
		font-size: 48px;
	}

	.hp-split__body {
		padding: 72px var(--hp-gutter) 72px 48px;
	}
}

@media (max-width: 991px) {
	.hp-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hp-split__body,
	.hp-edu .hp-split__body {
		padding: 56px var(--hp-gutter) 56px 32px;
	}

	.hp-salon__grid,
	.hp-newsletter__grid {
		gap: 32px;
	}
}

/* Mobile (dizajn 390 px) --------------------------------------------------- */

@media (max-width: 767px) {
	.hp {
		--hp-gutter: 23px;
	}

	.hp-section {
		padding: 56px 0;
	}

	.hp-section__head {
		margin-bottom: 32px;
	}

	.hp-section__intro {
		font-size: 14px;
		line-height: 1.85;
	}

	.hp-grid--3 {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.hp-center {
		margin-top: 32px;
	}

	.hp-heading-row {
		margin-bottom: 26px;
	}

	/* Tipografija */

	.hp .hp-title {
		font-size: 28px;
	}

	.hp .hp-title--xl {
		font-size: 34px;
	}

	.hp-lead {
		margin-top: 22px !important;
		font-size: 14.5px;
		line-height: 1.95;
	}

	/* Gumbi i linkovi */

	.hp-btn {
		min-height: 48px;
		padding: 12px 22px;
		font-size: 13px;
	}

	.hp-link {
		padding-bottom: 12px;
		min-width: 0;
		font-size: 12px;
	}

	/* Traka i hero */

	.hp-delivery {
		padding: 9px 16px;
		font-size: 11px;
	}

	.hp-hero__desktop {
		display: none;
	}

	.hp-hero__mobile {
		display: block;
	}

	/* Bez mobilne slike prikazuje se desktop slika. */
	.hp-hero__slide:not(:has(.hp-hero__mobile)) .hp-hero__desktop {
		display: block;
	}

	/* Uvod */

	.hp-intro {
		padding: 44px 0 64px;
	}

	.hp-intro__tags {
		margin-bottom: 20px !important;
		font-size: 14px;
	}

	.hp-intro__tags span + span::before {
		height: 14px;
		margin: 0 10px;
		vertical-align: -1px;
	}

	.hp-intro__text {
		margin-top: 24px !important;
		font-size: 14.5px;
		line-height: 1.95;
	}

	.hp-intro__buttons {
		flex-direction: column;
		gap: 12px;
		margin-top: 34px;
	}

	.hp-intro__buttons .hp-btn {
		width: 100%;
	}

	/* Kartice */

	.hp-card__img,
	.hp-pro .hp-card__img,
	.hp-home-care .hp-card__img {
		aspect-ratio: 344 / 270;
		margin-bottom: 22px;
	}

	.hp .hp-card__title {
		font-size: 20px;
	}

	.hp-card__text {
		margin-top: 10px !important;
		font-size: 14px;
		line-height: 1.85;
	}

	.hp-card .hp-card__text {
		margin-bottom: 18px;
	}

	.hp-pro .hp-link,
	.hp-home-care .hp-link,
	.hp-edu .hp-link {
		font-size: 10px;
	}

	/* Split sekcije */

	.hp-split {
		grid-template-columns: 1fr;
	}

	.hp-split__media {
		min-height: 0;
		aspect-ratio: 390 / 308;
	}

	.hp-split__body,
	.hp-edu .hp-split__body {
		max-width: none;
		padding: 56px var(--hp-gutter) 72px;
	}

	/* Ručni prijelom iz naslova vrijedi samo za desktop. */
	.hp-split .hp-title br {
		display: none;
	}

	.hp-steps {
		margin-top: 34px !important;
	}

	.hp-steps__item {
		grid-template-columns: 47px 1fr;
		padding: 26px 0;
	}

	.hp-steps__num {
		font-size: 12px;
	}

	.hp .hp-steps__title {
		font-size: 18px;
	}

	.hp-steps__text {
		margin-top: 10px !important;
		font-size: 13px;
		line-height: 1.9;
	}

	/* Ikone */

	.hp-benefits {
		padding: 28px var(--hp-gutter) !important;
	}

	.hp-benefits__list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 14px 12px;
	}

	.hp-benefits__item {
		gap: 8px;
		font-size: 13px;
	}

	.hp-benefits__item img {
		width: 50px;
		height: 35px;
	}

	/* Strelice i proizvodi */

	.hp-arrows {
		gap: 10px;
	}

	.hp-arrow {
		width: 36px;
		height: 36px;
	}

	.hp-arrow::before {
		width: 13px;
		height: 13px;
	}

	.hp-products {
		padding: 56px 0;
	}

	.hp-products .hp-heading-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 22px;
	}

	.hp-product {
		padding: 16px 18px 20px;
	}

	.hp-product__title {
		margin-top: 20px;
		font-size: 17px;
	}

	/* Edukacija */

	.hp-edu__list {
		margin-top: 28px !important;
	}

	.hp-edu__item {
		padding: 26px 0;
	}

	.hp-edu__item .hp-card__text {
		margin-top: 8px !important;
	}

	.hp-edu__item .hp-link {
		margin-top: 14px;
	}

	/* CTA */

	.hp-cta {
		padding: 64px 0 !important;
	}

	.hp-cta__text {
		margin: 26px auto 0;
		font-size: 14px;
		line-height: 1.9;
	}

	.hp-cta__text p + p {
		margin-top: 14px;
	}

	/* Salon */

	.hp-salon {
		padding-top: 52px;
	}

	.hp-salon__grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.hp-salon__media {
		aspect-ratio: 344 / 300;
	}

	.hp-salon__body .hp-lead {
		margin-bottom: 20px !important;
	}

	.hp-salon__sub {
		margin-top: 30px;
		padding-top: 30px;
	}

	.hp .hp-salon__sub .hp-card__title {
		font-size: 17px;
	}

	.hp-salon__sub .hp-card__text {
		margin: 6px 0 16px !important;
	}

	/* Recenzije */

	.hp-testimonials {
		padding: 56px 0;
	}

	.hp .hp-testimonials .hp-title {
		font-size: 24px;
		margin-bottom: 28px;
	}

	.hp-quote__text,
	.hp-quote__text p {
		font-size: 19px !important;
		line-height: 1.8;
	}

	.hp-quote__author {
		margin-top: 24px;
		font-size: 13px;
	}

	.hp-arrows--center {
		margin-top: 24px;
	}

	/* Blog */

	.hp-blog {
		padding: 56px 0 72px;
	}

	.hp-heading-row--end {
		flex-direction: column;
		align-items: flex-start;
		gap: 26px;
		margin-bottom: 40px;
	}

	.hp-blog__all {
		min-height: 0;
		padding: 0 4px 12px 0;
		border: 0;
		border-bottom: 1px solid #9a9a9a;
		font-size: 11px;
	}

	.hp-blog__all:hover {
		background: transparent;
		color: var(--hp-black);
	}

	.hp-blog__list {
		grid-template-columns: 1fr;
	}

	.hp-blog__item {
		grid-template-columns: 41px 1fr;
		padding: 26px 0 30px;
	}

	.hp .hp-blog__title {
		font-size: 20px;
	}

	.hp-blog__text {
		margin-top: 14px !important;
		font-size: 14px;
		line-height: 1.9;
	}

	/* Newsletter */

	.hp-newsletter {
		padding: 50px 0 !important;
		background: var(--hp-pink);
	}

	.hp-newsletter__grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.hp .hp-newsletter .hp-title {
		font-size: 28px;
	}

	.hp-newsletter__form input[type="email"] {
		height: 48px;
		padding-right: 120px;
		font-size: 15px;
	}

	.hp-newsletter__form input[type="submit"] {
		height: 48px;
		padding: 0 8px;
		font-size: 12px;
	}

	.hp-newsletter__form label,
	.hp-newsletter__form label a {
		font-size: 11px !important;
	}

	.hp-newsletter__form label {
		gap: 8px;
		margin-top: 16px;
	}
}