/* ==========================================================================
   Home Hero
   ========================================================================== */

.home-page {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	padding-top: var(--menu-height);
	border-bottom-left-radius: var(--radius-8);
	border-bottom-right-radius: var(--radius-8);
}

.home-page .row {
	position: relative;
	z-index: 1;
	align-items: end;
	justify-content: center;
}

.home-page__content {
	position: relative;
	z-index: 2;
	text-align: center;
}

.home-page__content img {
	height: 22.4rem;
	max-width: 100%;
	object-fit: contain;
	margin: 0 auto;
}

.home-page__content .title-1 {
	margin: 4rem 0;
}

.home-page__content .box {
	display: inline-flex;
	background-color: var(--bg-2p);
	padding: .6rem .6rem .6rem 4rem; 
	border-radius: 9999px;
	gap: 4rem;
	justify-content: space-between;
	align-items: center;
}

.home-page__content .box .text {
	margin: 0;
	color: var(--white-1);
}

.home-page__content .box .button:hover {
	background-color: var(--bg-1p);
}

.home-page__swiper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
	padding-bottom: 4rem;
	padding-right: 2.4rem;
}

.heroSwiper {
    width: 100%;
    overflow: visible !important; 
}

.hero-slide-content {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-bg-circle {
    position: absolute;
    width: 100%;
    height: auto;
	aspect-ratio: 1/1;
    background-color: rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hero-product-img {
    position: relative;
    z-index: 2;
    max-width: 66%;
    height: auto;
    object-fit: contain;
}

.hero-floating-text {
    position: absolute;
    top: -4rem;
    right: -2.4rem;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.hero-floating-text .title-2 {
    text-transform: none;
	transition: .3s ease;
}
.hero-floating-text:hover .title-2 {
	color: var(--color-1p);
}

.decorative-arrow {
    width: 4rem;
    height: 4rem;
	transition: .3s ease;
}

.decorative-arrow path {;
	stroke: var(--font-color-1p);
	transition: .3s ease;
}
.hero-floating-text:hover .decorative-arrow path {
	stroke: var(--color-1p);
}

.hero-nav-btn {
    width: 4.8rem;
    height: 4.8rem;
    background-color: var(--bg-2p);
    border-radius: 50%;
    color: #ffffff;
	transition: .3s ease;
}
.hero-nav-btn:hover {
	background-color: var(--color-1p);
}

.hero-nav-btn::after {
    font-size: 1.4rem !important;
    font-weight: bold;
}

.heroSwiper .swiper-button-prev {
    left: -2.4rem;
}

.heroSwiper .swiper-button-next {
    right: -2.4rem;
}

@media (max-width: 1199.98px) {
	.home-page__swiper {
		max-width: 80%;
		margin: 0 auto;
		padding: 0 2.4rem 4rem 2.4rem;
	}
}

@media (max-width: 575.98px) {
	.home-page__swiper {
		max-width: 100%;
	}
	
	.decorative-arrow {
		display: none;
	}
}

/* ==========================================================================
   Home Shop
   ========================================================================== */

.home-shop__cta {
	position: relative;
	display: flex;
	justify-content: space-around;
	align-items: center;
	gap: 4rem;
	margin: 0 auto;
	border-radius: var(--radius-5);
	border-top-left-radius: var(--radius-8);
	padding: 2.4rem 4rem 2.4rem 6.4rem;
	text-align: center;
}

.home-shop__cta .button:hover {
	background-color: var(--bg-1p);
}

.home-shop__cta svg {
	position: absolute;
	left: 3.2rem;
	top: -.8rem;
	height: 5.6rem;
}

.home-shop__cta .title-4 {
	margin-bottom: .8rem;
}

.home-shop__cta .button {
	height: 100%;
}

.home-shop__category {
	position: relative;
	overflow: hidden;
	padding: 4rem 5.6rem;
	border-radius: var(--radius-5);
	border-bottom-right-radius: var(--radius-7);
}
.home-shop__category.v2 {
	border-bottom-right-radius: var(--radius-5);
	border-bottom-left-radius: var(--radius-7);
}

.home-shop__category .box {
	position: relative;
	z-index: 3;
}

.home-shop__category .title-2 {
	color: var(--font-color-1p);
}

.home-shop__category.v2 .title-2 {
	color: var(--font-color-1b);
}

.home-shop__category .text {
	margin: 1.6rem 0 2.4rem 0;
	color: var(--font-color-2p);
}
.home-shop__category.v2 .text {
	color: var(--font-color-2b);
}

.home-shop__category img {
	position: absolute;
	right: -4rem;
	top: 4rem;
	width: 60%;
	object-fit: contain;
}

@media (max-width: 767.98px) {
	.home-shop__cta {
		flex-wrap: wrap;
	}
}

@media (max-width: 575.98px) {
	.home-shop__category img {
		top: unset;
		bottom: -2rem;
		right: -2rem;
		width: 60%;
	}
}

/* ==========================================================================
   Steps
   ========================================================================== */

.home-steps {
	position: relative;
	border-top-right-radius: var(--radius-9);
	border-bottom-left-radius: var(--radius-8);
	clip-path: polygon(0% -100%, 100% -100%, 100% 200%, 0% 200%);
}

.absolute-accent {
	position: absolute;
	left: -16rem;
	top: -12rem;
	height: 42rem;
	aspect-ratio: 1/1;
	border-radius: 50%;
	background-color: #F7F2F5;
	display: flex;
	align-items: center;
	justify-content: center;
}

.absolute-accent img {
	height: 50rem;
	width: auto;
	object-fit: contain;
	transform: translateX(4rem);
}

.home-steps > svg {
	position: absolute;
	right: 25%;
	top: -2.6rem;
	height: 9.6rem;
}

.home-steps > svg path {
	fill: var(--color-1y);
}

.home-steps .row {
	position: relative;
	z-index: 1;
	justify-content: center;
}

.home-steps__title {
	text-align: center;
}

.home-steps__title .accent {
	color: var(--font-color-1y);
}


.home-steps__title .accent span {
	background-color: var(--bg-1y);
	color: var(--font-color-1y);
}

.home-steps__title .title-1 {
	color: var(--font-color-1y);
}

.home-steps__step {
	text-align: center;
}

.home-steps__step .box-image {
	position: relative;
	padding: 4rem;
}


.home-steps__step .box-image svg {
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translate(-1rem, -50%);
	width: 10rem;
	fill: var(--font-color-1);
}

.home-steps__step .box-image img {
	aspect-ratio: 1/1;
	border-radius: 50%;
	object-fit: cover;
	object-position: center;
	margin: 0 auto;
}

.home-steps__step .box-image .number {
	position: absolute;
	right: 16%;
	bottom: 4rem;
	height: 5.6rem;
	width: 5.6rem;
	border-radius: 50%;
	background-color: var(--color-1y);
	z-index: 1;
	
	display: flex;
	align-items: center;
	justify-content: center;
	
	font-family: "Raleway";
	font-weight: 800;
	color: var(--white-1);
	
	font-size: 2rem;
}

.home-steps__step .title-4 {
	margin-bottom: 2.4rem;
	color: var(--font-color-1y);
}

.home-steps__step .text {
	color: var(--font-color-2y);
}

@media (max-width: 1399.98px) {
	.absolute-accent {
		height: 32rem;
		top: -8rem;
	}
}

@media (max-width: 1199.98px) {
	
	.home-steps__step .box-image svg {
		display: none;
	}
	
	.home-steps__step .box-image .number  {
		right: 18%;
	}
}

@media (max-width: 767.98px) {
	
	.home-steps__step {
		margin-top: 6.4rem;
	}
	
	.home-steps__step .box-image {
		padding: 0 0 4rem 0;
		display: inline-block;
		margin: 0 auto;
	}
	
	.home-steps__step .box-image img {
		max-width: 32rem;
	}
	
	.home-steps__step .box-image .number {
		right: 12%;
	}
	
	.home-steps > svg {
		height: 5.4rem;
		top: -1.6rem;
	}
}

@media (max-width: 639.98px) {
	
	.absolute-accent {
		display: none;
	}
}

@media (max-width: 575.98px) {
	
	.home-steps__step .box-image img {
		max-width: 28rem;
	}
}

/* ==========================================================================
   Home offer
   ========================================================================== */

.home-offer {
	position: relative;
	overflow: hidden;
}

.home-offer .row {
	align-items: center;
}

.home-offer__content .text {
	margin: 4rem 0;
}

.home-offer__images {
	display: flex;
	gap: 2.4rem;
}

.home-offer__images .card {
	position: relative;
	border: unset;
	border-radius: var(--radius-5);
}

.v3 .home-offer__images .card-1 {
	position: relative;
	margin-left: 4.8rem;
	padding: 0;
	width: 55%;

	/* Proporcje wysokiego prostokąta */
	aspect-ratio: 9 / 16;

	border: unset;
	border-radius: var(--radius-5);
	border-top-right-radius: var(--radius-7);
	border-bottom-left-radius: var(--radius-7);

	/* Najważniejsze – przycina zdjęcie do kształtu karty */
	overflow: hidden;
}

.v3 .home-offer__images .card-1 img {
	display: block;
	width: 100%;
	height: 100%;

	/* Zdjęcie wypełnia cały prostokąt */
	object-fit: cover;
	object-position: center;

	/* Zostaw, jeśli zdjęcie ma być odbite */
	transform: scaleX(-1);
}

.home-offer__images .card-1 {
	margin-left: 4.8rem;
	padding: 6.4rem 0;
	border-top-right-radius: var(--radius-7);
	border-bottom-left-radius: var(--radius-7);
	width: 55%;
}
.v2 .home-offer__images .card-1 {
	padding: 2.4rem 0;
	margin-left: unset;
	margin-right: 6.4rem;
}

.home-offer__images .card-1 img {
	height: auto;
	width: 100%;
	object-fit: contain;
	transform: scaleX(-1) translatex(4.8rem);
}
.v2 .home-offer__images .card-1 img {
	transform: translatex(6.4rem);
}

.home-offer__images .card-2 {
	position: relative;
	
	border-bottom-right-radius: var(--radius-7);
	border-top-left-radius: var(--radius-7);
	width: 45%;
	
	clip-path: polygon(0% -100%, 100% -100%, 100% 200%, 0% 200%);
}
.v2 .home-offer__images .card-2 {
	overflow: hidden;
	clip-path: unset;
}

.home-offer__images .card-2 img {
	height: 100%;
	width: auto;
	object-fit: contain;
	transform: translatex(8rem) rotate(-135deg) scale(1.16);
}
.v2 .home-offer__images .card-2 img {
	transform: translatex(8rem) scale(1.32);
}

.home-offer__images .card-2 svg {
	position: absolute;
	left: 50%;
	top: 1.6rem;
	height: 6.4rem;
	transform: translate(-50%, -50%);
}

.home-offer__images .card-2 svg path {
	fill: var(--color-1y);
}

@media (max-width: 1199.98px) {
	.home-offer.v2 .row {
		flex-direction: column-reverse;
	}
}




/* ==========================================================================
   Blog
   ========================================================================== */

.blog-posts__card {
	height: 100%;
	display: block;
	background-color: var(--white-1);
	border-radius: 1rem;
	transition: .3s ease;
	box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

.blog-posts__card .text-s {
	margin-bottom: 10px;
	color: var(--font-color-4);
}

.blog-posts__card .box-image img {
	display: block;
	width: 100%;
	height: 240px;
	object-fit: cover;
	object-position: center;
	border-radius: 5px;
	transition: .3s;
}
.blog-posts__card .box-image img:hover {
	filter: brightness(.8);
}

.blog-posts__card h2 {

}

.blog-posts__card h2 a {
	display: inline-block;
	margin-top: 2rem;
	line-height: 1.5;
	font-weight: 500;
	transition: .3s;
}
.blog-posts__card h2 a:hover {
	color: var(--color-1);
}

.blog-posts__card h2 .title-5 {
	transition: .3s;
}
.blog-posts__card h2 .title-5:hover {
	color: var(--color-1);
}

.blog-posts__card .content {
	margin-top: 2rem;
}

.blog-posts__card .content p {
	color: var(--font-color-2);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blog-posts__card .btn {
	margin-top: 2rem;
}

.blog-posts__card .post-taxonomies {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin-top: 1.5rem;
}

.blog-posts__card .taxonomy-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 1.3rem;
	padding: 0.4rem 1rem;
	border-radius: 99px;
	text-decoration: none;
	background-color: var(--white-2, #eee);
	color: var(--font-color-4, #6c757d);
	transition: all 0.2s ease;
}

.blog-posts__card .taxonomy-pill:hover {
	background-color: var(--color-1);
	color: var(--white-1, #fff);
}

.blog-posts__card .taxonomy-pill .tax-icon svg {
	width: 1.4rem;
	height: 1.4rem;
	fill: currentColor;
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.pagination-container { 
	margin-top: 4rem; 
	display: flex; 
	justify-content: center; 
	gap: 0.5rem;
}

.pagination-container .pagination-arrow { 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	padding: 1rem 1.5rem; 
	min-width: 4rem; 
	height: 100%; 
	color: var(--font-color-2); 
	background-color: var(--white-2); 
	border: 1px solid var(--white-3); 
	border-radius: 0.5rem; 
	text-decoration: none; 
	transition: all 0.2s ease;
}
.pagination-container .pagination-arrow:hover { 
	background-color: var(--color-1); 
	color: var(--white-1);
	border-color: var(--color-1);
}
.pagination-container .pagination-arrow.disabled { 
	opacity: 0.5; pointer-events: none;
}

.pagination-container .pagination-arrow svg { 
	width: 1.8rem;
	height: 1.8rem;
	fill: currentColor;
}

.pagination-container .pagination-jump-container { 

}

.pagination-container .pagination-jump-container .pagination-jump-form { 
	display: flex; 
	align-items: center;
	gap: 0.5rem;
	margin: 0 .5rem;
}

.pagination-container .pagination-jump-container .pagination-jump-form .page-jump-input { 
	width: 6rem; 
	text-align: center; 
	padding: 0.5rem; 
	border: 1px solid var(--white-3); 
	border-radius: 0.5rem;
}
.pagination-container .pagination-jump-container .pagination-jump-form .page-jump-input:focus { 
	outline: 2px solid var(--color-1);
}

.pagination-container .pagination-jump-container .pagination-jump-form .total-pages-indicator { 
	color: var(--font-color-4);
}

/* ==================================================
   HOME OFFER – WARIANT CERAMIKA ARTYSTYCZNA
   ================================================== */

.home-offer__images--artistic {
	display: flex;
	align-items: stretch;
	gap: 2.4rem;
	width: 100%;
	min-width: 0;
}


/* Wspólne ustawienia kart */

.home-offer__images--artistic .card {
	position: relative;
	margin: 0;
	padding: 0;
	min-width: 0;
	border: 0;
	background-color: transparent;
	box-shadow: none;
	overflow: hidden;
}


/* ==================================================
   KARTA 1 – ZDJĘCIE ARTYSTKI
   ================================================== */

.home-offer__images--artistic .card-1 {
	flex: 0 0 calc(54% - 1.2rem);
	width: calc(54% - 1.2rem);
	aspect-ratio: 0.58;

	border-radius: 4rem;
	border-top-right-radius: 8rem;
	border-bottom-left-radius: 8rem;
}


/* Zdjęcie dokładnie w kształcie karty */

.home-offer__images--artistic .card-1 img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;

	object-fit: cover;
	object-position: center;

	transform: none;
}


/* ==================================================
   KARTA 2 – CERAMIKA NA GRADIENTOWYM TLE
   ================================================== */

.home-offer__images--artistic .card-2 {
	flex: 0 0 calc(46% - 1.2rem);
	width: calc(46% - 1.2rem);
	aspect-ratio: 0.49;

	border-radius: 4rem;
	border-top-left-radius: 8rem;
	border-bottom-right-radius: 8rem;

	clip-path: none;
	isolation: isolate;
}


/* Zdjęcie produktu */

.home-offer__images--artistic .card-2 img {
	position: absolute;
	z-index: 1;
	left: 10%;
	bottom: 6%;

	display: block;
	width: 120%;
	height: 72%;
	max-width: none;

	object-fit: contain;
	object-position: center bottom;

	transform: none;
}


/* Kokarda */

.home-offer__images--artistic .card-2 svg {
	position: absolute;
	z-index: 2;
	top: 2.4rem;
	left: 50%;

	width: auto;
	height: 6.4rem;

	transform: translateX(-50%);
	pointer-events: none;
}

.home-offer__images--artistic .card-2 svg path {
	fill: var(--color-1y);
}


/* ==================================================
   TABLET
   ================================================== */

@media (max-width: 1199.98px) {

	.home-offer__images--artistic {
		max-width: 72rem;
		margin-inline: auto;
	}

	.home-offer__images--artistic .card-1 {
		flex-basis: calc(54% - 1rem);
		width: calc(54% - 1rem);
	}

	.home-offer__images--artistic .card-2 {
		flex-basis: calc(46% - 1rem);
		width: calc(46% - 1rem);
	}
}


/* ==================================================
   TELEFON
   ================================================== */

@media (max-width: 767.98px) {

	.home-offer__images--artistic {
		gap: 1.2rem;
	}

	.home-offer__images--artistic .card-1 {
		flex-basis: calc(54% - 0.6rem);
		width: calc(54% - 0.6rem);

		border-radius: 2.4rem;
		border-top-right-radius: 4.8rem;
		border-bottom-left-radius: 4.8rem;
	}

	.home-offer__images--artistic .card-2 {
		flex-basis: calc(46% - 0.6rem);
		width: calc(46% - 0.6rem);

		border-radius: 2.4rem;
		border-top-left-radius: 4.8rem;
		border-bottom-right-radius: 4.8rem;
	}

	.home-offer__images--artistic .card-2 svg {
		top: 1.2rem;
		height: 4rem;
	}

	.home-offer__images--artistic .card-2 img {
		left: 5%;
		bottom: 4%;
		width: 130%;
		height: 76%;
	}
}