/*
Theme Name: astra-child
Template: astra
*/

/* =========================
   HERO HEADER
========================= */

.site-header {
    position: relative;

    background-image: url('assets/header/header.webp') !important;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% auto;

    width: 100%;
    height: calc(100vw * 560 / 2048);
    min-height: 0;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    color: #fff;
    overflow: hidden;
}
/*
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.3);
    pointer-events: none;
    z-index: 1;
}*/

.site-header > * {
    position: relative;
    z-index: 2;
}

/* =========================
   HEADER – SUBPAGES
========================= */

body:not(.home) .site-header {
	min-height: auto !important;
	background: rgba(0,0,0,0.9);
	backdrop-filter: blur(10px);
	padding: 10px 0;
}

/* =========================
   MENU (GLOBAL)
========================= */

.ast-main-header-wrap,
.main-header-bar-wrap {
	position: sticky;
	top: 0;
	z-index: 9999;
	overflow: visible !important;
	width: 100%;
}

.main-header-bar {
	background: transparent !important;
}

/* dropdown */

.main-header-menu .sub-menu {
	background: rgba(0,0,0,0.7) !important;
	position: absolute !important;
	top: 100%;
	left: 0;
	display: block !important;
	z-index: 9999999 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	overflow: visible !important;
}

@media (min-width: 921px) {
    .scroll-down-arrow {
        background: rgba(0, 0, 0, 0.48) !important;

        border: 1px solid rgba(255, 255, 255, 0.65) !important;

        box-shadow:
            0 0 0 2px rgba(0, 0, 0, 0.25),
            0 4px 18px rgba(0, 0, 0, 0.45) !important;
    }

    .scroll-down-arrow::before {
        background: rgba(0, 0, 0, 0.78) !important;
    }
	.main-header-menu .menu-item-has-children {
		position: relative;
	}

	.main-header-menu .sub-menu {
		position: absolute !important;
		top: 100%;
		left: 0;
		display: block !important;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	.main-header-menu .menu-item-has-children:hover > .sub-menu,
	.main-header-menu .menu-item-has-children:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
}

.main-header-menu .sub-menu a {
	color: #fff !important;
	padding: 10px 20px;
}

.main-header-menu .sub-menu a:hover {
	color: #FFD700 !important;
	background: #333 !important;
}

/* =========================================================
   SCROLL ARROWS
   ========================================================= */
/* =========================================================
   SCROLL DOWN ARROW
   ========================================================= */

.scroll-down-arrow {
    position: absolute !important;
    left: 50% !important;
    top: 26% !important;


    width: 60px !important;
    height: 60px !important;

    min-width: 60px !important;
    min-height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;

    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 60px !important;
    flex-shrink: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: rgba(100, 100, 100, 0.6);

    color: #fff !important;
    font-size: 2.5rem !important;
    line-height: 1 !important;
    text-align: center !important;

    cursor: pointer;

    z-index: 20 !important;

    opacity: 0;
    pointer-events: none;

    transform-origin: center center !important;

    /*
     * Cały okrąg pulsuje:
     * 100% → 118% → 100%
     */
    animation: scroll-arrow-pulse-desktop 1.8s ease-in-out infinite;

    transition:
        opacity 0.25s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* =========================================================
   VISIBILITY
   ========================================================= */

.scroll-down-arrow.visible {
    opacity: 0.85;
    pointer-events: auto;
}


/* =========================================================
   PULSOWANIE CAŁEGO OKRĄGŁEGO PRZYCISKU
   ========================================================= */

/* =========================================================
   DESKTOP — PULS STRZAŁKI
   Taki sam rytm jak MOBILE
   ========================================================= */

@keyframes scroll-arrow-pulse-desktop {

    0%,
    100% {
        transform:
            translateX(-50%)
            scale(1);

        box-shadow:
            0 0 0 rgba(255,255,255,0);
    }

    50% {
        transform:
            translateX(-50%)
            scale(1.18);

        box-shadow:
            0 0 16px rgba(255,255,255,0.35),
            0 0 30px rgba(255,255,255,0.15);
    }
}


/* =========================================================
   HOVER — MAKSYMALNY ROZMIAR + PODŚWIETLENIE
   ========================================================= */

.scroll-down-arrow:hover {
    transform: translateX(-50%) scale(1.18) !important;

    background: rgba(100, 100, 100, 0.95);

    box-shadow:
        0 0 20px rgba(255, 255, 255, 0.75),
        0 0 38px rgba(255, 255, 255, 0.4);

    animation-play-state: paused;
}


/* =========================================================
   ACTIVE — PRZYTRZYMANIE
   ========================================================= */

.scroll-down-arrow:active {
    transform: translateX(-50%) scale(1.18) !important;

    background: rgba(100, 100, 100, 1);

    box-shadow:
        0 0 22px rgba(255, 255, 255, 0.85),
        0 0 42px rgba(255, 255, 255, 0.45);

    animation-play-state: paused;
}


/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 921px) {

    .scroll-down-arrow {
        /*
         * Pozycja pozostaje taka sama:
         * środek elementu = środek Headera.
         */
        left: 50% !important;
        margin-left: -30px !important;

        width: 60px !important;
        height: 60px !important;

        min-width: 60px !important;
        min-height: 60px !important;

        max-width: 60px !important;
        max-height: 60px !important;

        aspect-ratio: 1 / 1 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;

        border: none !important;
        border-radius: 50% !important;

        box-sizing: border-box !important;

        background: rgba(100, 100, 100, 0.6) !important;

        color: #fff !important;
        font-size: 2.5rem !important;
        line-height: 1 !important;

        /*
         * NA MOBILE NIE UŻYWAMY translateX().
         * Animujemy wyłącznie scale().
         */
        transform-origin: center center !important;

        animation: scroll-arrow-pulse-mobile 1.8s ease-in-out infinite !important;

        will-change: transform, box-shadow;
    }


    /* =========================
       MOBILE PULSE
       ========================= */

    @keyframes scroll-arrow-pulse-mobile {

        0%,
        100% {
            transform: scale(1) !important;

            box-shadow:
                0 0 0 rgba(255, 255, 255, 0);
        }

        50% {
            transform: scale(1.18) !important;

            box-shadow:
                0 0 16px rgba(255, 255, 255, 0.35),
                0 0 30px rgba(255, 255, 255, 0.15);
        }
    }


    /* =========================
       MOBILE HOVER
       ========================= */

    .scroll-down-arrow:hover {
        transform: scale(1.18) !important;

        background: rgba(100, 100, 100, 0.95) !important;

        box-shadow:
            0 0 20px rgba(255, 255, 255, 0.75),
            0 0 38px rgba(255, 255, 255, 0.4) !important;

        animation-play-state: paused !important;
    }


    /* =========================
       MOBILE ACTIVE
       ========================= */

    .scroll-down-arrow:active {
        transform: scale(1.18) !important;

        background: rgba(100, 100, 100, 1) !important;

        box-shadow:
            0 0 22px rgba(255, 255, 255, 0.85),
            0 0 42px rgba(255, 255, 255, 0.45) !important;

        animation-play-state: paused !important;
    }
}

.scroll-up-arrow {
	position: fixed;
	top: 20px;
	right: 20px;

	font-size: 2rem;
	color: #fff;
	background: rgba(0,0,0,0.4);

	padding: 10px 14px;
	border-radius: 50%;

	cursor: pointer;
	z-index: 9999;

	opacity: 0;
	pointer-events: none;
	transition: all 0.3s ease;
}

.scroll-up-arrow.show {
	opacity: 1;
	pointer-events: auto;
}

.scroll-up-arrow:hover {
	background: rgba(0,0,0,0.7);
	transform: scale(1.1);
}

/* disable Astra arrow */

#ast-scroll-top,
.ast-scroll-top-icon {

	display: none !important;
}

/* =========================
   GOOGLE REVIEWS
========================= */

.reviews-area {
    height: auto !important;
    min-height: 650px;
    overflow: visible !important;
}
.header-google-reviews {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 20px;
}

.mobile-reviews {
	display: none;
}

.custom-google-reviews-slider {
	width: 100%;
	max-width: 750px;
	margin: 0 auto;

	position: relative;
	overflow: hidden;
	transition: height 0.3s ease;
}

.review {
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	box-sizing: border-box;
	padding: 18px 20px;
	flex-direction: column;
	justify-content: center;
	opacity: 0;
	transform: translateY(10px);
	visibility: hidden;
	pointer-events: none;
	z-index: 1;
	background: rgba(255,255,255,0.18);
	backdrop-filter: blur(10px);
	border-radius: 24px;
	transition: opacity 1.5s ease, transform 1.5s ease, visibility 0s linear 1.5s;
}

.review.active {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
	pointer-events: auto;
	z-index: 2;
	transition-delay: 0s;
}

.stars {
	color: gold !important;
}

.author {
	display: flex;
	justify-content: center;
	gap: 10px;
	font-weight: 700;
	color: #fff !important;
}

@media (max-width: 921px) {
	.desktop-reviews {
		display: none !important;
	}

	#ast-mobile-header #mobile-google-reviews-container,
	.mobile-reviews {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		width: 100%;
		padding: 10px 16px;
		position: relative;
		z-index: 2;
	}
}

/* =========================
   CONTENT
========================= */

/* Tylko desktop */
@media (min-width: 769px) {

	/* Boxy w footerze */
	.site-primary-footer-wrap .widget_block figure.wp-block-table {

		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		padding: 20px;
		border-radius: 14px;
		width: 100%;
		height: 100%;
		box-sizing: border-box;

		border: 1px solid rgba(255,255,255,0.4);
		box-shadow: 0 4px 12px rgba(0,0,0,.08);
		transition: .3s ease;
	}

	/* Delikatniejszy hover */
	.site-primary-footer-wrap .widget_block figure.wp-block-table:hover {
		background: rgba(255,255,255,0.40); /* było 0.95 */
		box-shadow: 0 6px 16px rgba(0,0,0,.10);
		transform: translateY(-2px);
	}

	/* Usuń margines figure */
	.site-primary-footer-wrap figure {
		margin: 0;
	}

	/* Czytelny czarny tekst */
	.site-primary-footer-wrap td,
	.site-primary-footer-wrap a {
		color: #111;
	}

	.site-primary-footer-wrap a:hover {
		color: #333;
	}

	/*rev2 3 równe kolumny w footerze */
	.site-primary-footer-inner-wrap {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}

	/* sekcje mają mieć pełną szerokość */
	.site-footer-section {
		width: 100%;
	}

	/* box w środku wypełnia kolumnę */
	.site-primary-footer-wrap .widget_block figure.wp-block-table {
		width: 100%;
		height: 100%;
		box-sizing: border-box;

		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		padding: 20px;
		border-radius: 14px;
	}

	/* usuń domyślne marginesy figure */
	.site-primary-footer-wrap figure {
		margin: 0;
	}
}

/* Mobile / tablet – tylko wygląd kart */
@media (max-width: 768px) {

    .site-primary-footer-wrap .widget_block figure.wp-block-table {
        background: rgba(255,255,255,0.95);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        padding: 18px;
        border-radius: 14px;

        border: 1px solid rgba(255,255,255,0.4);
        box-shadow: 0 4px 10px rgba(0,0,0,.08);
        transition: .2s ease;
    }

    /* bardzo subtelna reakcja po tapnięciu */
    .site-primary-footer-wrap .widget_block figure.wp-block-table:hover,
    .site-primary-footer-wrap .widget_block figure.wp-block-table:active {
        background: rgba(255, 255, 255, 0.4);
    }
}

/* Mobile: single-column stacked layout (4 rows x 1 column), each container full viewport width and 50vh height */
@media (max-width: 768px) {
	/* main wrapper occupies full viewport width */
	.main-container {
		width: 100vw;
		max-width: 100vw;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		align-items: stretch;
	}

	/* stack rows vertically so each .container-half becomes its own row */
	.container-row {
		display: flex;
		flex-direction: column;
		width: 100%;
		margin: 0;
		padding: 0;
		gap: 0;
	}

	/* each half becomes a full-width row with half viewport height */
	.container-half {
		width: 100%;
		max-width: 100vw;
		height: 50vh;
		max-height: 50vh;
		box-sizing: border-box;
		padding: 12px;
		margin: 0; /* remove margins on mobile */
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* ensure widget fills the container area but keeps internal spacing */
	.container-half .widget,
	.container-half .custom-gallery-widget {
		width: 100%;
		height: 100%;
		max-width: 100%;
		box-sizing: border-box;
		margin: 0;
		padding: 6px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Gallery wrapper stacks vertically and fills available height */
	.custom-gallery-widget .gallery-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 0 6px;
	}

	/* main image should be prominent and fill most of container height */
	.custom-gallery-widget img#mainImg {
		width: 100%;
		max-width: 100%;
		/* fill available container height while leaving space for thumbnails/navigation */
		border-radius: 12px;
		box-shadow: 0 10px 30px rgba(0,0,0,0.3);
		transition: transform 0.12s ease, opacity 0.12s ease;
		/* Keep a stable viewport for the main image to avoid layout jumps when switching orientation */
		aspect-ratio: 16/10;
		object-fit: cover;
		display: block;
		border-radius: 10px;
		box-shadow: 0 8px 20px rgba(0,0,0,0.35);
	}

	/* thumbnails placed below the main image in a small centered row */
	.custom-gallery-widget .side-image {
		display: inline-block;
		width: 56px;
		max-width: 56px;
		height: 40px;
		object-fit: cover;
		margin: 6px 6px 0 6px;
		border-radius: 8px;
		box-shadow: 0 6px 14px rgba(0,0,0,0.18);
	}

	.custom-gallery-widget .gallery-navigation {
		margin-top: 6px;
		z-index: 5;
	}

	/* reduce inner widget padding so gallery has more space */
	.container-half .custom-gallery-widget {
		padding: 4px;
	}
}

#site-content.content {
	position: relative;
	z-index: 1;
	/* Reduced top padding to remove empty gap between Header Bottom and Timeline.
	   Original padding was 100px; lowering to 40px preserves horizontal padding while
	   bringing Timeline visually closer to Header Bottom. */
	padding: 10px 10px;
	color: #fff;
	
}

/* =========================
   CHAPTER TIMELINE
   ========================= */

.chapter-timeline {
    width: 100%;
    box-sizing: border-box;
    background: transparent;
}

.chapter-timeline .chapter-axis {
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* =========================
   CHAPTER ITEM
   ========================= */

.chapter-timeline .chapter-item,
.chapter-timeline .chapter-item.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: transparent !important;
    border: none !important;

    padding: 6px 8px;

    cursor: pointer;
    text-decoration: none;

    color: #888 !important;

    min-width: 72px;
}


/* =========================
   TITLE
   ========================= */

.chapter-timeline .chapter-item .chapter-title,
.chapter-timeline .chapter-item.active .chapter-title {
    color: #888 !important;
}


/* =========================
   CHAPTER TIMELINE — MARKERY
   ========================= */

.chapter-timeline .chapter-marker {
    display: block !important;

    width: 12px !important;
    height: 12px !important;

    min-width: 12px !important;
    min-height: 12px !important;

    max-width: 12px !important;
    max-height: 12px !important;

    flex: 0 0 12px !important;

    box-sizing: border-box !important;

    border-radius: 50% !important;

    background: #888 !important;

    padding: 0 !important;
    margin: 0 0 6px 0 !important;

    border: none !important;
}
/* =========================================================
   CHAPTER TIMELINE — FINAL COLORS
   ========================================================= */

/* Wszystkie rozdziały */
.chapter-timeline .chapter-axis > .chapter-item,
.chapter-timeline .chapter-axis > .chapter-item:not(.active),
.chapter-timeline .chapter-axis > .chapter-item.active {
    color: #6B4632 !important;
}


/* Tekst wszystkich rozdziałów */
.chapter-timeline .chapter-axis > .chapter-item .chapter-title,
.chapter-timeline .chapter-axis > .chapter-item:not(.active) .chapter-title,
.chapter-timeline .chapter-axis > .chapter-item.active .chapter-title {
    color: #6B4632 !important;
}


/* Wszystkie kropki */
.chapter-timeline .chapter-axis > .chapter-item .chapter-marker,
.chapter-timeline .chapter-axis > .chapter-item:not(.active) .chapter-marker,
.chapter-timeline .chapter-axis > .chapter-item.active .chapter-marker {
    background: #6B4632 !important;
    background-color: #6B4632 !important;
    border-color: #6B4632 !important;
    color: #6B4632 !important;
}
.chapter-timeline .chapter-item.active,
.chapter-timeline .chapter-item.active .chapter-title {
    color: #432B20 !important;
}

.chapter-timeline .chapter-item.active .chapter-marker {
    background-color: #432B20 !important;
}

/* =========================
   CHAPTER — STAN AKTYWNY
   ========================= */

.chapter-timeline .chapter-item {
    color: #6B4632 !important;
}

.chapter-timeline .chapter-item .chapter-title {
    color: #6B4632 !important;
}

.chapter-timeline .chapter-item .chapter-marker {
    background-color: #6B4632 !important;
}


/* Aktualnie wybrany Chapter */

.chapter-timeline .chapter-item.active {
    color: #432B20 !important;
    background: transparent !important;
}

.chapter-timeline .chapter-item.active .chapter-title {
    color: #432B20 !important;
    font-weight: 600;
}

.chapter-timeline .chapter-item.active .chapter-marker {
    background-color: #432B20 !important;
}

.chapter-timeline .chapter-item:focus-visible {
    outline: 2px solid rgba(67, 43, 32, 0.35);
    outline-offset: 3px;
}
/* =========================
   FOCUS
   ========================= */

.chapter-timeline .chapter-item:focus {
    outline: 2px solid rgba(0, 0, 0, 0.12);
	background-color: #6b46324f !important;
	
}

/* Header Bottom (rendered via astra_header_after) */
.header-bottom {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	line-height: 0; /* collapse whitespace */
	/* participate in normal document flow so Header naturally ends here */
	position: static;
	z-index: auto;
}

/* Header Top (decorative) */
/* Non-intrusive: positioned absolutely inside .site-header so it doesn't affect layout or header height */
.header-top {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	line-height: 0;
	pointer-events: none;
	z-index: 0; /* sits behind header children (site-header > * has z-index:2) */
}

.header-top__img {
	width: 100%;
	height: auto;
	display: block;
}

.header-bottom__img,
.header-separator__img {
	/* Preserve image proportions: width fills container, height auto */
	width: 100%;
	height: auto;
	display: block;
}

.chapter-marker {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #bbb;
	margin-bottom: 6px;
}

.chapter-title {
	font-size: 13px;
	line-height: 1.1;
	color: #999;
	text-align: center;
}

.chapter-item.active .chapter-marker {
	width: 18px;
	height: 18px;
	background: #eee;
}

.chapter-item.active .chapter-title {
	color: #eee;
	font-weight: 600;
}

#google-map {
    width: 100vw !important;
    max-width: 100vw !important;

    height: 100% !important;
    min-height: 0 !important;

    display: block !important;
    margin: 0 auto !important;

    background: transparent !important;

    overflow: hidden !important;

    border-radius: 0 !important;
}

.footer-google-map {
    display: flex;
    justify-content: center;

    width: 100%;
    height: 100%;

    flex: 1 1 auto;
}

.site-footer:has(#google-map) {
    height: 100vh;
    height: calc(100svh + 4px);

    min-height: 640px;

    display: flex;
    flex-direction: column;

    margin-top: -4px;

    overflow: hidden;
    position: relative;

    background-color: #000 !important;
}

.site-footer:has(#google-map) .site-primary-footer-wrap,
.site-footer:has(#google-map) .site-below-footer-wrap {
    position: relative;
    z-index: 1;
}

/* =========================
   APPLICATION MAIN - prototype chapter navigation
   Minimal styles for Milestone 7
========================= */


.application-main {
    position: relative;
    height: auto;
    width: 100%;


    box-sizing: border-box;



}

.ast-container{
	border-radius: 0 0 50% 50% / 0 0 80px 80px;
}

.application-main .chapter-navigation {
	width: 100%;
	display: flex;
	justify-content: center; /* center content horizontally */
	align-items: center;
	padding: 12px 0; /* height driven by content */
}

.application-main .chapter-axis {
	display: flex;
	gap: 10px;
	align-items: center;
}

.chapter-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #ccc;
	border: none;
	padding: 0;
	margin: 0;
}

.chapter-dot.active {
	width: 14px;
	height: 14px;
	background: #666;
}

/* keep existing application-view behavior intact */
#application-view {
	width: 100%;
}
/* =========================
	main-reviews-separator
========================= */
.main-reviews-separator {
    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    padding: 0 !important;
    box-sizing: border-box !important;

    position: relative !important;
    overflow: visible !important;
}

.main-reviews-separator picture {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.main-reviews-separator img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
}

#colophon .site-footer-section,
#colophon .footer-widget-area,
#colophon .footer-widget-area-inner,
#colophon .site-primary-footer-wrap,
#colophon .site-below-footer-wrap,
#colophon .footer-widget-area .wp-block-table,
#colophon .footer-widget-area .wp-block-table td,
#colophon .footer-widget-area figure.wp-block-table,
#colophon .footer-widget-area .ast-builder-layout-element,
#colophon .footer-widget-area .astra-footer-widget-area {
	background: transparent !important;
	background-color: transparent !important;
}

.site-footer:has(#google-map) .site-primary-footer-wrap {
	flex: 0 0 50%;
	height: 50%;
	min-height: 0;
	width: 100%;
}

.site-footer:has(#google-map) .site-primary-footer-wrap .ast-builder-grid-row-container-inner,
.site-footer:has(#google-map) .site-primary-footer-wrap .ast-builder-footer-grid-columns {
	max-width: none !important;
	width: 100% !important;
	height: 100% !important;
}

.site-footer:has(#google-map) .site-below-footer-wrap {
	flex: 0 0 50%;
	height: 50%;
	min-height: 0;
	display: flex;
}

.site-below-footer-wrap:has(#google-map),
.site-below-footer-wrap:has(#google-map) .ast-builder-grid-row-container-inner,
.site-below-footer-wrap:has(#google-map) .ast-builder-footer-grid-columns,
.site-below-footer-wrap:has(#google-map) .site-footer-section,
.site-below-footer-wrap:has(#google-map) .footer-widget-area,
.site-below-footer-wrap:has(#google-map) .widget,
.site-below-footer-wrap:has(#google-map) .wp-block-group {
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
}

.site-below-footer-wrap:has(#google-map) {
	overflow: hidden;
}

.site-below-footer-wrap:has(#google-map) .ast-builder-grid-row-container-inner,
.site-below-footer-wrap:has(#google-map) .ast-builder-footer-grid-columns,
.site-below-footer-wrap:has(#google-map) .site-footer-section,
.site-below-footer-wrap:has(#google-map) .footer-widget-area,
.site-below-footer-wrap:has(#google-map) .widget {
	flex: 1 1 auto;
	display: flex;
}

.site-below-footer-wrap:has(#google-map) #google-map {
	width: 100vw !important;
	max-width: 100vw !important;
	flex: 0 0 auto !important;
	min-height: 0 !important;
	margin: 12px auto !important;
}

/* =========================
   MOBILE MENU – BASE STYLE
========================= */

.ast-mobile-header-content {
	background: rgba(0,0,0,0.85) !important;
	backdrop-filter: blur(6px);
}

.ast-mobile-header-content * {
	background: transparent !important;
}

.ast-mobile-header-content .menu-link {
	display: block;
	text-align: center;
	padding: 15px 0;

	color: #f1f1f1 !important;
	font-weight: 500;
}

.ast-mobile-header-content .menu-link:hover {
	color: #FFD700 !important;
}

.ast-mobile-header-content .menu-item {
	border-bottom: 1px solid rgba(255,255,255,0.1);
}

.ast-mobile-header-content .menu-item:last-child {
	border-bottom: none;
}

/* =========================
   MOBILE MENU – DROPDOWN OVERLAY (animowany)
========================= */

.main-header-bar-navigation {
	overflow: visible !important;
}

@media (max-width: 921px) {

	#ast-mobile-header .ast-mobile-header-wrap {
		position: relative;
	}

	#mobile-google-reviews-container,
	.mobile-reviews {
		position: relative;
		z-index: 1;
	}

	#ast-mobile-header .ast-mobile-header-content {
		display: block !important;
		position: absolute !important;
		top: var(--astra-child-mobile-header-height, 70px);
		left: 0;
		right: 0;
		width: 100%;

		background: rgba(0,0,0,0.95) !important;
		backdrop-filter: blur(6px);
		z-index: 9999999;

		max-height: 0;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		pointer-events: none;

		transition:
			max-height 0.4s ease,
			opacity 0.3s ease,
			transform 0.4s ease,
			visibility 0s linear 0.4s;
	}

	#ast-mobile-header .ast-mobile-header-content:has(.toggle-on),
	#ast-mobile-header .ast-mobile-header-content.toggle-on,
	body.ast-mobile-menu-open #ast-mobile-header .ast-mobile-header-content {
		max-height: 85vh;
		overflow-y: auto;
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
		transition:
			max-height 0.4s ease,
			opacity 0.3s ease,
			transform 0.4s ease,
			visibility 0s linear 0s;
	}

	#ast-mobile-header .ast-mobile-header-content .main-header-bar-navigation {
		display: block !important;
	}

	#ast-mobile-header #ast-hf-mobile-menu .menu-link {
		background: rgba(0,0,0,0.45) !important;
	}

	#ast-mobile-header #ast-hf-mobile-menu .menu-link:hover,
	#ast-mobile-header #ast-hf-mobile-menu .menu-link:focus {
		background: rgba(0,0,0,0.7) !important;
	}
}

/* submenu fix */
.ast-mobile-header-content .sub-menu {
	position: relative !important;
	z-index: 9999999 !important;
	background: rgba(0,0,0,0.95) !important;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 700px) {

	.ast-mobile-header-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.header-google-reviews {
		display: none;
	}

	.mobile-reviews {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		width: 100%;
		padding: 10px 16px;
	}

	.custom-google-reviews-slider {
		min-height: 220px;
	}

	.site-footer:has(#google-map) .site-primary-footer-wrap .site-footer-section {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 6px 16px !important;
	}

	.site-footer:has(#google-map) .site-primary-footer-wrap .wp-block-table {
		float: none !important;
		width: auto !important;
		max-width: 100%;
		margin: 0 auto !important;
	}

	.site-footer:has(#google-map) .site-primary-footer-wrap table {
		width: auto !important;
		max-width: 100%;
		margin: 0 auto !important;
		table-layout: auto !important;
	}

	.site-footer:has(#google-map) .site-primary-footer-wrap table td {
		padding: 3px 4px !important;
		text-align: left !important;
		vertical-align: middle !important;
	}

	.site-footer:has(#google-map) .site-primary-footer-wrap table td:first-child {
		width: 42px !important;
		min-width: 42px !important;
		max-width: 42px !important;
		text-align: right !important;
	}

	.site-footer:has(#google-map) .site-primary-footer-wrap table td:first-child img {
		display: inline-block;
		max-width: 32px !important;
		height: auto !important;
	}
}

/* =========================
   Header / dropdown stacking fixes
   Ensure header and its dropdowns render above page content which might create stacking contexts
========================= */
.site-header,
.ast-main-header-wrap,
.main-header-bar,
.site-header-primary-section-right,
.main-header-bar .main-navigation,
#primary-site-navigation-desktop {
	position: relative !important;
	z-index: 99999999 !important;
	overflow: visible !important;
}

.main-header-menu .sub-menu {
	position: absolute !important;
	z-index: 100000000 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	overflow: visible !important;
	box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}

/* If any main content section creates a stacking context (transform/opacity), lower its z-index
   so header stays on top. Use with caution — narrow-target if possible. */
.site-content,
.site-main,
.site-primary,
.ast-builder-grid-row-container-inner {
	position: relative;
	z-index: 1;
	transform: none !important;
}
/* =========================
   img gallery
========================= */
.main-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1200px; /* Możesz dostosować szerokość według potrzeb */
    margin: 0 auto;
}

.main-container::after {
    content: "";
    display: block;

    width: 100%;
    height: 2px;

    border: 0 !important;
    border-radius: 0 !important;

    margin-top: 20px;
}

.container-row {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;

    margin: 20px 0;
    padding: 20px;

    box-sizing: border-box;

    border: none;

    border-radius: 36px;

    background: rgba(0, 0, 0, 0.14);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.18),
        0 4px 12px rgba(0, 0, 0, 0.10);
}
.container-half {
    width: 50%; /* Każdy kontener ma połowę szerokości kontenera głównego */
    height: 50vh; /* Każdy kontener ma połowę wysokości okna przeglądarki */
    box-sizing: border-box;
    padding: 20px;

	/* limit the maximum width of each half on large screens and center it */
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

/* full-width merged container for first row */
.container-full {
	width: 100%;
	box-sizing: border-box;
	padding: 20px;
	height: 50vh; /* match height of halves */
	display: flex;
	align-items: center;
	justify-content: center;
}

.gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

.gallery-wrapper {
    position: relative;
    text-align: center;
    margin-bottom: 20px;
}

.side-image {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: pointer;
}

.left {
    left: -10%; /* Dostosuj według potrzeb */
    transform: rotate(-10deg);
}

.right {
    right: -10%; /* Dostosuj według potrzeb */
    transform: rotate(10deg);
}

#mainImg {
	width: 60%;
	max-width: 520px; /* Dostosuj według potrzeb */
	height: auto;
	border-radius: 8px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-wrapper img:hover {
    transform: translateY(-52%) scale(1.05);
    filter: brightness(1.2);
}

.gallery-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.gallery-navigation button {
	padding: 6px;
    background-color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.gallery-navigation button:hover {
    background-color: #e0e0e0;
}

#bigPictureOverlay {
    inset: 0 !important;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 100000000 !important;
}

#bigPicture {
    max-width: 95%;
    max-height: 95%;
    cursor: zoom-out;
}

.prev-arrow,
.next-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
	background-color: rgba(255, 255, 255, 0.95);
	border-radius: 50%;
	padding: 12px 14px;
	cursor: pointer;
	z-index: 10000;
	font-size: 22px;
	line-height: 1;
	color: #111;
}

.prev-arrow {
    left: 20px;
}

.next-arrow {
    right: 20px;
}

/* Custom Gallery Widget styles */
.custom-gallery-widget .gallery-wrapper {
    	position: relative;
    	width: 100%;
   	height: auto;
   	padding: 20px 0 30px 0; /* reduced bottom space so gallery sits closer to content */
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Make the middle widget button larger and elliptical */
.custom-gallery-widget .gallery-navigation .gallery-expand {
	background: rgba(255,255,255,0.95);
	border-radius: 999px;
	padding: 10px 18px;
	font-weight: 700;
	color: #111;
	border: none;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* Slightly larger prev/next click targets on big picture */
#bigPictureOverlay .prev-arrow,
#bigPictureOverlay .next-arrow {
	padding: 14px 16px;
	font-size: 26px;
}

/* Center content inside the half-width containers */
.container-row .container-half {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;
}

.container-row .container-half .gallery-description {
	max-width: 90%;
}

.custom-gallery-widget img#mainImg {
	width: 60%;
	max-width: 520px;
	/* Fixed display frame to avoid layout jumps when image orientation changes */
	aspect-ratio: 16/10;
	object-fit: cover;
	display: block;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.3);
	transition: transform 0.12s ease, opacity 0.12s ease;
	z-index: 2;
	}

.custom-gallery-widget .side-image {
	position: absolute;
	top: 50%;
	transform-origin: center;
	width: 22%;
	max-width: 260px;
	/* keep thumbnails in consistent box and crop portraits */
	aspect-ratio: 4/3;
	object-fit: cover;
	border-radius: 10px;
	box-shadow: 0 6px 18px rgba(0,0,0,0.25);
	opacity: 0.95;
	transition: transform 0.12s ease, opacity 0.12s ease;
	z-index: 1;
}

.custom-gallery-widget .side-image.left {
	left: 6%;
	transform: translateY(-50%) rotate(-10deg);
}

.custom-gallery-widget .side-image.right {
	right: 6%;
	transform: translateY(-50%) rotate(10deg);
}

/* Animacja przejścia: fade */
.custom-gallery-widget img.animating {
	opacity: 0;
	transform: translateY(6px) scale(0.99) !important;
	transition: opacity 0.12s ease, transform 0.12s ease !important;
}

/* Delikatniejszy efekt hover dla zdjęcia głównego */
.custom-gallery-widget img#mainImg:hover {
	transform: translateY(-6px) scale(1.02);
}

/* Przyjemna subtelna animacja dla bocznych zdjęć na hover */
.custom-gallery-widget .side-image:hover {
	transform: translateY(-50%) scale(1.03) !important;
	filter: brightness(1.02);
}

.custom-gallery-widget .gallery-navigation {
	text-align: center;
	margin-top: 6px; /* closer to images */
	position: relative;
	z-index: 5; /* ensure nav buttons are above tall/portrait images */
}

.custom-gallery-widget #bigPictureOverlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.8);
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

.custom-gallery-widget #bigPictureOverlay.show {
	display: flex !important;
}

/* Big picture close button */
#bigPictureOverlay .bigpicture-inner {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
    z-index: 1000000 !important;
}

#bigPictureOverlay .bigpicture-close {
	position: absolute;
	top: 18px;
	right: 18px;
	background: rgba(0,0,0,0.6);
	color: #fff;
	border: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	z-index: 10001;
	box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

#bigPictureOverlay img#bigPicture {
	max-width: 95%;
	max-height: 95%;
	border-radius: 8px;
}

/* When big picture is open hide the scroll-up arrow */
.bigpicture-open .scroll-up-arrow {
	display: none !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/*
.main-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1200px; /* Możesz dostosować szerokość według potrzeb 
    margin: 0 auto;
}*/

.container-row {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.container-half {
    width: 50%; /* Każdy kontener ma połowę szerokości kontenera głównego */
    height: 50vh; /* Każdy kontener ma połowę wysokości okna przeglądarki */
    box-sizing: border-box;
    padding: 20px;
}

.gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.main-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.preview-images {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.thumbnail-container img {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    filter: rotate(0deg);
}

.thumbnail-container img:hover {
    transform: scale(1.1) rotate(10deg);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.thumbnail-container img.first {
    filter: rotate(-10deg);
}

.thumbnail-container img.last {
    filter: rotate(10deg);
}

/* =========================
   HERO DIVIDER (organic, premium)
   - full-width responsive SVG
   - no position: fixed used
   - color: #F5F0E8
========================= */

.hero-divider {
	width: 100%;
	display: block;
	overflow: hidden;
	line-height: 0;
	box-sizing: border-box;
}

.hero-divider svg {
	display: block;
	width: 100%;
	/* mobile: 80-120px, desktop: 120-180px */
	height: clamp(80px, 10vw, 180px);
	max-height: 180px;
	min-height: 80px;
}

@media (max-width: 768px) {
	.hero-divider svg {
		height: clamp(80px, 12vw, 120px);
	}
}

.hero-divider svg path {
	fill: #F5F0E8;
}

/* ensure content immediately after divider renders above it if needed */
.hero-divider + * {
	position: relative;
	z-index: 1;
}
*/
/* =========================
   SINGLE POST + LONGPAGE TEMPLATE
========================= */

.single-post-layout {
	max-width: 1200px;
	margin: 40px auto;
	padding: 0 20px;
}

.single-post-grid {
	display: flex;
	gap: 40px;
	align-items: flex-start;
	flex-wrap: wrap;
}

.single-post-content {
	flex: 2;
	min-width: 300px;
}

.single-post-title {
	font-size: 2rem;
	margin-bottom: 20px;
}

.single-post-images {
	flex: 1;
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 20px;
	min-width: 250px;
}

.single-post-images img {
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 8px;
}

.longpage-layout {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 20px;
	padding: 20px;
	box-sizing: border-box;
}

.longpage-content {
	background: #eee;
	padding: 20px;
}

.longpage-images {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 20px;
}

.longpage-images img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

@media (max-width: 768px) {
	.longpage-layout {
		grid-template-columns: 1fr;
	}
}
/* =========================
   REVIEWS
   ========================= */

.desktop-reviews {
    display: flex;
}

.main-mobile-reviews {
    display: none;
}
@media (min-width: 922px) {

    .site-header {
        background-size: auto 100%;
        background-position: center center;
        background-repeat: no-repeat;
    }

}
@media (max-width: 921px) {


    /* =========================================================
       MOBILE HEADER
       ========================================================= */

    .site-header {
        height: auto !important;
        min-height: 100svh !important;

        background-image: url('assets/header/header-mobile.webp');
        background-size: auto 100% !important;
        background-position: top center !important;
        background-repeat: no-repeat !important;

        overflow: hidden !important;
    }

    #ast-mobile-header {
        position: relative;
        z-index: 10;
    }


    /* =========================================================
       REVIEWS — HEADER OFF
       ========================================================= */

    #ast-mobile-header #mobile-google-reviews-container {
        display: none !important;
    }


    /* =========================================================
       REVIEWS — MOBILE / MAIN
       ========================================================= */

    .desktop-reviews {
        display: flex !important;
        width: 100% !important;
    }

    /*
     * Główny kontener opinii.
     * Nie nadajemy mu sztywnej wysokości.
     */
    .main-mobile-reviews {
        display: flex !important;
        position: relative !important;
        z-index: 10 !important;

        width: 100% !important;

        min-height: 0 !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }

    /*
     * Jeden wspólny obszar opinii.
     *
     * UWAGA:
     * height może być ustawiane inline przez JS
     * (np. 878px dla najdłuższej opinii),
     * dlatego NIE ustawiamy tutaj height:auto !important.
     */
    .reviews-area {
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }

    .reviews-area .header-reviews-wrapper {
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }

    .reviews-area .desktop-reviews {
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;
    }

    /*
     * Slider może zachować wysokość ustawioną przez JS.
     */
    .reviews-area .custom-google-reviews-slider {
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }

    /*
     * Poszczególne opinie.
     */
    .reviews-area .review {
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }

    /*
     * Tekst opinii.
     
    .reviews-area .review .text {
        height: auto !important;
        max-height: none !important;

        overflow: visible !important;

        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;

        box-sizing: border-box !important;
    }*/


    /* =========================================================
       GALERIA — UKŁAD MOBILE
       ========================================================= */

    /*
     * Każdy wiersz:
     *
     * GALERIA
     * ↓
     * NAWIGACJA
     * ↓
     * OPIS
     */
    .container-row {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        overflow: visible !important;
    }


    /* =========================================================
       CONTAINER-HALF
       ========================================================= */

    .container-row .container-half {
        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        padding: 6px !important;

        box-sizing: border-box !important;

        flex: 0 0 auto !important;

        overflow: visible !important;
    }


    /* =========================================================
       GALLERY WIDGET
       ========================================================= */

    .container-half .custom-gallery-widget {
        width: 100% !important;
        max-width: 520px !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 auto !important;
        padding: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        box-sizing: border-box !important;

        overflow: visible !important;
    }


    /* =========================================================
       GALLERY — IMAGE AREA
       ========================================================= */

    .custom-gallery-widget .gallery-wrapper {
        position: relative !important;

        width: 100% !important;

        height: auto !important;
        min-height: 300px !important;

        /*
         * Minimalny odstęp pod zdjęciem.
         */
        padding: 10px 0 2px 0 !important;

        box-sizing: border-box !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        overflow: visible !important;

        /*
         * Tworzymy własny kontekst warstw.
         */
        isolation: isolate;
    }


    /* =========================================================
       GALLERY — MAIN IMAGE
       ========================================================= */

    .custom-gallery-widget img#mainImg {
        width: min(100%, 420px) !important;
        max-width: 420px !important;

        height: auto !important;

        aspect-ratio: 16 / 10;

        object-fit: cover;

        position: relative !important;

        /*
         * Główne zdjęcie znajduje się NAD bocznymi.
         */
        z-index: 2 !important;
    }


    /* =========================================================
       GALLERY — SIDE IMAGES
       ========================================================= */

    .custom-gallery-widget .side-image {
        width: 80px !important;
        max-width: 80px !important;

        height: 60px !important;

        aspect-ratio: 4 / 3;

        object-fit: cover;

        position: absolute !important;

        /*
         * Boczne zdjęcia są POD głównym zdjęciem.
         * Dzięki temu tylko ich część wystaje.
         */
        z-index: 1 !important;
    }

    .custom-gallery-widget .side-image.left {
        left: -13% !important;
    }

    .custom-gallery-widget .side-image.right {
        right: -13% !important;
    }


    /* =========================================================
       GALLERY — NAVIGATION
       ========================================================= */

    /*
     * Nawigacja pozostaje w normalnym przepływie dokumentu,
     * bezpośrednio POD galerią.
     */
    .custom-gallery-widget .gallery-navigation {
        position: relative !important;
        z-index: 5 !important;

        width: 100% !important;

        height: auto !important;

        /*
         * Galeria ma kończyć się bardzo blisko nawigacji.
         */
        margin-top: 0 !important;

        padding: 0 !important;

        display: flex !important;
        flex-direction: row !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 12px;

        box-sizing: border-box !important;

        overflow: visible !important;
    }


    /* =========================================================
       GALLERY DESCRIPTION
       ========================================================= */

    /*
     * Drugi container-half zawiera opis.
     *
     * Oddzielamy go od navigation większym odstępem.
     */
    .container-row > .container-half + .container-half {
        position: relative !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        flex: 0 0 auto !important;

        margin-top: 32px !important;

        overflow: visible !important;
    }


    /* =========================================================
       MAIN / APPLICATION VIEW
       ========================================================= */

    /*
     * Żaden z tych elementów nie może ucinać
     * wysokiej opinii lub galerii.
     */
    #template-main,
    .template-main,
    .main-container,
    #application-view {
        overflow: visible !important;
    }


    /* =========================================================
       MAIN REVIEWS SEPARATOR
       ========================================================= */

    .main-reviews-separator {
        position: relative !important;

        width: 100vw !important;
        max-width: 100vw !important;

        margin: 0 !important;
        padding: 0 !important;

        /*
         * Wymuszamy wycentrowanie względem viewportu.
         */
        left: 50% !important;
        transform: translateX(-50%) !important;

        height: auto !important;
        max-height: none !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }

    .main-reviews-separator picture {
        display: block !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .main-reviews-separator img {
        display: block !important;

        width: 100% !important;
        max-width: none !important;

        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /* =========================================================
       FOOTER
       ========================================================= */

    html,
    body {
        min-height: 100%;
        height: auto !important;
    }

    #page,
    .site,
    .site-content,
    #content,
    .site-main {
        min-height: 0 !important;
        height: auto !important;
    }

    /* =========================================
       MAIN — NIE OGRANICZAJ WYSOKOŚCI
       ========================================= */

    .application-main,
    #template-main,
    .template-main,
    .main-container,
    #application-view {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    /* =========================================
       FOOTER — ZAWSZE PO MAINIE
       ========================================= */

    .site-footer:has(#google-map) {
        position: relative !important;

        width: 100% !important;

        height: auto !important;
        min-height: 100svh !important;
        max-height: none !important;

        margin-top: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }

    /* =========================================
       DANE KONTAKTOWE
       ========================================= */

    .site-footer:has(#google-map) .site-primary-footer-wrap {
        flex: 0 0 auto !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
    }

    /* =========================================
       MAPA
       ========================================= */

    .site-footer:has(#google-map) .site-below-footer-wrap {
        flex: 0 0 auto !important;

        width: 100% !important;

        height: 50svh !important;
        min-height: 350px !important;
    }



/*
    .reviews-area {

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }*/

    .header-reviews-wrapper {

        height: auto !important;
        min-height: 0 !important;
    }

    .main-mobile-reviews,
    .desktop-reviews {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;

    }
/*
    .custom-google-reviews-slider {
        max-height: none !important;
        overflow: visible !important;
    }
*/
	.chapter-timeline {
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .chapter-timeline .chapter-axis {
        display: flex;
        justify-content: flex-start !important;

        gap: 18px;
        flex-wrap: nowrap;

        overflow-x: auto;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;

        padding-left: 12px;
        padding-right: 12px;

        box-sizing: border-box;
    }

    .chapter-timeline {
        width: 100% !important;
        overflow: visible !important;
    }

    .chapter-timeline .chapter-axis {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 18px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        justify-content: flex-start !important;
        align-items: flex-start !important;

        width: 100% !important;
        box-sizing: border-box !important;
    }

	/* =========================
	CHAPTER ITEM — MOBILE
	========================= */

	.chapter-timeline .chapter-item {
		display: flex !important;
		flex-direction: column !important;

		align-items: center !important;
		justify-content: flex-start !important;

		flex: 0 0 120px !important;

		width: 120px !important;
		min-width: 120px !important;
		max-width: 120px !important;

		height: auto !important;

		margin: 0 !important;
		padding: 6px 4px !important;

		box-sizing: border-box !important;

		background: transparent !important;
		border: none !important;
	}

    /* =========================
       MARKER
       ========================= */

    .chapter-timeline .chapter-marker {
        display: block !important;

        width: 12px !important;
        height: 12px !important;

        min-width: 12px !important;
        min-height: 12px !important;

        max-width: 12px !important;
        max-height: 12px !important;

        flex: 0 0 12px !important;

        margin: 0 0 6px 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;

        border: none !important;
        border-radius: 50% !important;

        background: #888 !important;
    }

    /* =========================
       TITLE
       ========================= */

    .chapter-timeline .chapter-title {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: center !important;

        white-space: nowrap !important;
    }
/* =========================================================
   MOBILE — SCROLL DOWN ARROW
   ========================================================= */

@media (max-width: 921px) {

    .scroll-down-arrow {
        /* Zachowujemy aktualną pozycję mobilną */
        position: absolute !important;
        top: 83vh !important;
        left: 50% !important;
        z-index: 20 !important;

        /* Bazowy rozmiar */
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        min-height: 60px !important;
        max-width: none !important;
        max-height: none !important;

        box-sizing: border-box !important;
        border-radius: 50% !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;

        background: rgba(100, 100, 100, 0.6) !important;
        color: #fff !important;
        font-size: 2.5rem !important;
        line-height: 1 !important;

        /* Pozycja pozostaje na środku; animujemy rozmiar, nie transform */
        
        transform-origin: center center !important;

        animation: scroll-arrow-pulse-mobile 1.8s ease-in-out infinite !important;
        will-change: width, height, box-shadow;
    }

    /* =====================================================
       MOBILE — PULSOWANIE CAŁEGO KOŁA
       60px → 70px → 60px
       ===================================================== */

    @keyframes scroll-arrow-pulse-mobile {
        0%,
        100% {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            box-shadow: 0 0 0 rgba(255, 255, 255, 0);
        }

        50% {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            box-shadow:
                0 0 16px rgba(255, 255, 255, 0.35),
                0 0 30px rgba(255, 255, 255, 0.15);
        }
    }

    /* Hover — maksymalny rozmiar */
    .scroll-down-arrow:hover {
        width: 70px !important;
        height: 70px !important;
        animation-play-state: paused !important;

        background: rgba(100, 100, 100, 0.95) !important;

        box-shadow:
            0 0 20px rgba(255, 255, 255, 0.75),
            0 0 38px rgba(255, 255, 255, 0.4) !important;
    }

    /* Przytrzymanie — również maksymalny rozmiar */
    .scroll-down-arrow:active {
        width: 70px !important;
        height: 70px !important;
        animation-play-state: paused !important;

        background: rgba(100, 100, 100, 1) !important;

        box-shadow:
            0 0 22px rgba(255, 255, 255, 0.85),
            0 0 42px rgba(255, 255, 255, 0.45) !important;
    }
}
@media (max-width: 768px) {

    /* =========================
       FOOTER — MOBILE
       ========================= */

    .site-footer:has(#google-map) {
        height: auto !important;
        min-height: 100svh !important;

        display: flex !important;
        flex-direction: column !important;

        overflow: visible !important;
    }


    /* =========================
       BOXY Z DANYMI
       ========================= */

    .site-footer:has(#google-map) .site-primary-footer-wrap {
        flex: 0 0 auto !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        padding: 12px 10px !important;
        box-sizing: border-box !important;
    }

    .site-footer:has(#google-map) .site-primary-footer-wrap
    .ast-builder-grid-row-container-inner,
    .site-footer:has(#google-map) .site-primary-footer-wrap
    .ast-builder-footer-grid-columns,
    .site-footer:has(#google-map) .site-primary-footer-wrap
    .site-footer-section {
        height: auto !important;
        min-height: 0 !important;
    }


    /* =========================
       POJEDYNCZY BOX
       ========================= */

    .site-footer:has(#google-map)
    .site-primary-footer-wrap
    .widget_block figure.wp-block-table {

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 14px !important;

        box-sizing: border-box !important;
    }


    /* =========================
       TABELA W BOXIE
       ========================= */

    .site-footer:has(#google-map)
    .site-primary-footer-wrap table {

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        table-layout: auto !important;
    }


    /* =========================
       MAPA — POD BOXAMI
       ========================= */

    .site-footer:has(#google-map) .site-below-footer-wrap {

        flex: 0 0 auto !important;

        width: 100% !important;
        height: 50svh !important;
        min-height: 350px !important;

        display: flex !important;

        overflow: hidden !important;
    }

    .site-footer:has(#google-map) .footer-google-map {
        height: 100% !important;
        flex: 1 1 auto !important;
    }

    .site-footer:has(#google-map) #google-map {
        height: 100% !important;
        min-height: 0 !important;

        margin: 0 !important;
    }
}
}
/* =========================================================
   SCROLL DOWN ARROW — FINAL MOBILE ANIMATION
   PRZYCISK + KASKADOWE PODZIURAWIONE FALE
   ========================================================= */

@media (max-width: 921px) {

    /* =====================================================
       GŁÓWNY PRZYCISK
       ===================================================== */

    .scroll-down-arrow {
        left: 50% !important;
        top: 83vh !important;

        width: 60px !important;
        height: 60px !important;

        min-width: 60px !important;
        min-height: 60px !important;
        max-width: 60px !important;
        max-height: 60px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        position: absolute !important;
        z-index: 20 !important;

        padding: 0 !important;
        margin: 0 !important;

        background: transparent !important;
        border: none !important;

        color: #fff !important;
        font-size: 2.5rem !important;
        line-height: 1 !important;

        transform: translateX(-50%) !important;

        isolation: isolate !important;
        overflow: visible !important;

        text-shadow:
            0 1px 3px rgba(0, 0, 0, 0.35);
    }


    /* =====================================================
       ANIMOWANE KOŁO PRZYCISKU
       ===================================================== 
	.scroll-down-arrow::after {
		content: "";

		position: absolute;
		left: 50%;
		top: 50%;

		width: 68px;
		height: 68px;

		transform: translate(-50%, -50%);

		border-radius: 50%;

		background:
			conic-gradient(
				from 0deg,
				rgba(255,255,255,0.75) 0deg 18deg,
				transparent 18deg 42deg,
				rgba(255,255,255,0.45) 42deg 67deg,
				transparent 67deg 95deg,
				rgba(255,255,255,0.65) 95deg 128deg,
				transparent 128deg 160deg,
				rgba(255,255,255,0.35) 160deg 188deg,
				transparent 188deg 225deg,
				rgba(255,255,255,0.55) 225deg 258deg,
				transparent 258deg 300deg,
				rgba(255,255,255,0.40) 300deg 335deg,
				transparent 335deg 360deg
			);

		-webkit-mask:
			radial-gradient(
				circle,
				transparent 0 46%,
				#000 47% 51%,
				transparent 52%
			);

		mask:
			radial-gradient(
				circle,
				transparent 0 46%,
				#000 47% 51%,
				transparent 52%
			);

		animation:
			scroll-edge-wave
			1.8s
			ease-in-out
			infinite;

		z-index: 1;
		pointer-events: none;
	}*/

/* =========================================================
   SCROLL DOWN ARROW — FINAL MOBILE ANIMATION
   PRZYCISK + WEWNĘTRZNA FALA + ZEWNĘTRZNE PIERŚCIENIE
   ========================================================= */

@media (max-width: 921px) {

    /* =====================================================
       GŁÓWNY PRZYCISK
       ===================================================== */

    .scroll-down-arrow {
        left: 50% !important;
        top: 83vh !important;

        width: 60px !important;
        height: 60px !important;

        min-width: 60px !important;
        min-height: 60px !important;
        max-width: 60px !important;
        max-height: 60px !important;

        margin-left: -30px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        position: absolute !important;
        z-index: 20 !important;

        padding: 0 !important;
        border: none !important;
        border-radius: 50% !important;
        box-sizing: border-box !important;

        background: transparent !important;
        box-shadow: none !important;

        /*
         * Ukrywamy tekstowy znak źródłowy.
         * Właściwa strzałka jest rysowana przez ::after.
         */
        color: transparent !important;
        font-size: 0 !important;
        line-height: 1 !important;

        text-align: center !important;

        /*
         * Nie animujemy i nie transformujemy całego przycisku.
         * Dzięki temu pozycja pozostaje stabilna.
         */
        animation: none !important;
        transform: none !important;
        transform-origin: center center !important;

        isolation: isolate !important;
        overflow: visible !important;


    /* =====================================================
       WEWNĘTRZNA FALA — 0R → 1R
       PEŁNE WYPEŁNIENIE OD 0.80R
       ===================================================== */

    .scroll-down-arrow::before {
        content: "";

        position: absolute;

        left: 50%;
        top: 50%;

        width: 60px;
        height: 60px;

		transform:
			translate(-50%, -50%)
			scale(0);

        border-radius: 50%;

        pointer-events: none;

    	z-index: 1 !important;

        /*
         * Ciągły obszar bez przezroczystych „cięć”.
         * Zmienia się tylko nasycenie kolejnych stref.
         */
        background:
            radial-gradient(
                circle,

                rgba(100,100,100,0.60) 0 18%,
                rgba(100,100,100,0.56) 18% 28%,
                rgba(100,100,100,0.50) 28% 38%,
                rgba(100,100,100,0.44) 38% 48%,
                rgba(100,100,100,0.38) 48% 58%,
                rgba(100,100,100,0.32) 58% 68%,
                rgba(100,100,100,0.28) 68% 78%,
                rgba(100,100,100,0.34) 78% 90%,
                rgba(100,100,100,0.42) 90% 100%
            );

        animation:
            scroll-arrow-core-rings
            3.5s
            ease-out
            infinite;

        will-change:
            transform,
            opacity;
    }
	/* =========================================================
	DODATKOWA WARSTWA TŁA — MIĘKKI, WOLNY PULS
	========================================================= */

	.scroll-arrow-glow {
		position: absolute !important;

		left: 50% !important;
		top: 50% !important;

		width: 82px !important;
		height: 82px !important;

		transform:
			translate(-50%, -50%)
			scale(0.78);

		border-radius: 50%;

		pointer-events: none !important;

		z-index: 0 !important;

		background:
			radial-gradient(
				circle,
				rgba(255,255,255,0.00) 0 34%,
				rgba(255,255,255,0.12) 40%,
				rgba(255,255,255,0.19) 48%,
				rgba(255,255,255,0.10) 58%,
				rgba(255,255,255,0.00) 72%
			);

		filter: blur(2px);

		animation:
			scroll-arrow-glow-pulse
			3.8s
			ease-in-out
			infinite;

		will-change:
			transform,
			opacity;
	}


	@keyframes scroll-arrow-secondary-wave {

		0% {
			transform:
				translate(-50%, -50%)
				scale(0);

			opacity: 0;
		}

		25% {
			transform:
				translate(-50%, -50%)
				scale(0.30);

			opacity: 0.35;
		}

		50% {
			transform:
				translate(-50%, -50%)
				scale(0.60);

			opacity: 0.55;
		}

		75% {
			transform:
				translate(-50%, -50%)
				scale(0.85);

			opacity: 0.30;
		}

		100% {
			transform:
				translate(-50%, -50%)
				scale(1);

			opacity: 0;
		}
	}
		.scroll-down-arrow::after {
			animation:
				scroll-arrow-symbol-pulse
				2.1s
				ease-in-out
				infinite;
		}

    /* =====================================================
       ANIMACJA WEWNĘTRZNEGO OBSZARU
       ===================================================== */

    @keyframes scroll-arrow-core-rings {

        0% {
            transform:
                translate(-50%, -50%)
                scale(0);

            opacity: 0;
        }

        8% {
            transform:
                translate(-50%, -50%)
                scale(0.08);

            opacity: 0.30;
        }

        16% {
            transform:
                translate(-50%, -50%)
                scale(0.16);

            opacity: 0.48;
        }

        24% {
            transform:
                translate(-50%, -50%)
                scale(0.24);

            opacity: 0.62;
        }

        32% {
            transform:
                translate(-50%, -50%)
                scale(0.32);

            opacity: 0.74;
        }

        40% {
            transform:
                translate(-50%, -50%)
                scale(0.40);

            opacity: 0.84;
        }

        48% {
            transform:
                translate(-50%, -50%)
                scale(0.48);

            opacity: 0.91;
        }

        56% {
            transform:
                translate(-50%, -50%)
                scale(0.56);

            opacity: 0.96;
        }

        64% {
            transform:
                translate(-50%, -50%)
                scale(0.64);

            opacity: 1;
        }

        72% {
            transform:
                translate(-50%, -50%)
                scale(0.72);

            opacity: 1;
        }

        80% {
            transform:
                translate(-50%, -50%)
                scale(0.80);

            opacity: 1;
        }

        90% {
            transform:
                translate(-50%, -50%)
                scale(0.90);

            opacity: 1;
        }

        96% {
            transform:
                translate(-50%, -50%)
                scale(1);

            opacity: 0.92;
        }

        100% {
            transform:
                translate(-50%, -50%)
                scale(1);

            opacity: 0;
        }
    }
}

    /* =====================================================
       HOVER / ACTIVE — OBSZAR PEŁNY
       ===================================================== */

    .scroll-down-arrow:hover::before,
    .scroll-down-arrow:active::before {
        transform:
            translate(-50%, -50%)
            scale(1) !important;

        opacity: 1 !important;

        animation-play-state: paused !important;

        background:
            radial-gradient(
                circle,

                rgba(100,100,100,0.95) 0 18%,
                rgba(100,100,100,0.90) 18% 28%,
                rgba(100,100,100,0.84) 28% 38%,
                rgba(100,100,100,0.78) 38% 48%,
                rgba(100,100,100,0.72) 48% 58%,
                rgba(100,100,100,0.68) 58% 68%,
                rgba(100,100,100,0.64) 68% 78%,
                rgba(100,100,100,0.72) 78% 90%,
                rgba(100,100,100,0.80) 90% 100%
            ) !important;
    }


    /* =====================================================
       KONTENER ZEWNĘTRZNYCH PIERŚCIENI
       ===================================================== */

    .scroll-ripples {
        position: absolute !important;

        left: 50% !important;
        top: 50% !important;

        width: 1px !important;
        height: 1px !important;

        pointer-events: none !important;

        z-index: 2 !important;
    }


    /* =====================================================
       ZEWNĘTRZNE PODZIURAWIONE PIERŚCIENIE
       — NIE ZMIENIAMY ICH MECHANIZMU
       ===================================================== */

    .scroll-ripple {
        position: absolute !important;

        left: 0 !important;
        top: 0 !important;

        width: 70px !important;
        height: 70px !important;

        border-radius: 50% !important;

        pointer-events: none !important;
        z-index: 0 !important;

        transform:
            translate(-50%, -50%)
            scale(0.7);

        opacity: 0;

        -webkit-mask:
            radial-gradient(
                circle,
                transparent 0 43%,
                #000 44% 48%,
                transparent 49%
            );

        mask:
            radial-gradient(
                circle,
                transparent 0 43%,
                #000 44% 48%,
                transparent 49%
            );

        animation:
            scroll-ripple-wave
            2.4s
            ease-out
            infinite;

        will-change:
            transform,
            opacity;
    }


    /* =====================================================
       PIERŚCIEŃ 1
       ===================================================== */

    .scroll-ripple.ripple-1 {
        background:
            conic-gradient(
                from 10deg,
                transparent 0deg 28deg,
                rgba(255,255,255,0.42) 28deg 55deg,
                transparent 55deg 92deg,
                rgba(255,255,255,0.28) 92deg 125deg,
                transparent 125deg 170deg,
                rgba(255,255,255,0.20) 170deg 198deg,
                transparent 198deg 245deg,
                rgba(255,255,255,0.30) 245deg 275deg,
                transparent 275deg 320deg,
                rgba(255,255,255,0.18) 320deg 345deg,
                transparent 345deg 360deg
            );
    }


    /* =====================================================
       PIERŚCIEŃ 2
       ===================================================== */

    .scroll-ripple.ripple-2 {
        background:
            conic-gradient(
                from 55deg,
                transparent 0deg 18deg,
                rgba(255,255,255,0.35) 18deg 42deg,
                transparent 42deg 70deg,
                rgba(255,255,255,0.24) 70deg 102deg,
                transparent 102deg 148deg,
                rgba(255,255,255,0.18) 148deg 165deg,
                transparent 165deg 214deg,
                rgba(255,255,255,0.32) 214deg 252deg,
                transparent 252deg 300deg,
                rgba(255,255,255,0.20) 300deg 330deg,
                transparent 330deg 360deg
            );
    }


    /* =====================================================
       PIERŚCIEŃ 3
       ===================================================== */

    .scroll-ripple.ripple-3 {
        background:
            conic-gradient(
                from 105deg,
                transparent 0deg 35deg,
                rgba(255,255,255,0.36) 35deg 70deg,
                transparent 70deg 115deg,
                rgba(255,255,255,0.20) 115deg 142deg,
                transparent 142deg 185deg,
                rgba(255,255,255,0.30) 185deg 220deg,
                transparent 220deg 270deg,
                rgba(255,255,255,0.17) 270deg 292deg,
                transparent 292deg 335deg,
                rgba(255,255,255,0.28) 335deg 355deg,
                transparent 355deg 360deg
            );
    }


    /* =====================================================
       KASKADA — CO 0.5 SEKUNDY
       ===================================================== */

    .scroll-ripple.ripple-1 {
        animation-delay: 0s;
    }

    .scroll-ripple.ripple-2 {
        animation-delay: 0.5s;
    }

    .scroll-ripple.ripple-3 {
        animation-delay: 1s;
    }


    /* =====================================================
       ANIMACJA ZEWNĘTRZNYCH FAL
       ===================================================== */

    @keyframes scroll-ripple-wave {

        0% {
            transform:
                translate(-50%, -50%)
                scale(0.7);

            opacity: 0;
        }

        8% {
            opacity: 0.85;
        }

        35% {
            transform:
                translate(-50%, -50%)
                scale(1.35);

            opacity: 0.55;
        }

        62% {
            transform:
                translate(-50%, -50%)
                scale(2.0);

            opacity: 0.22;
        }

        82% {
            opacity: 0.06;
        }

        100% {
            transform:
                translate(-50%, -50%)
                scale(2.6);

            opacity: 0;
        }
    }
}


/* =========================================================
   PRZYWRÓCENIE DOKŁADNEJ POZYCJI MOBILE
   ========================================================= */

@media (max-width: 921px) {

    .scroll-down-arrow {
        left: 50% !important;
        margin-left: -30px !important;
        top: 83vh !important;

        transform: none !important;
        transform-origin: center center !important;
    }
}


/* =========================================================
   STRZAŁKA — WŁASNE PULSOWANIE ROZMIARU
   Start DUŻA → maleje → rośnie → DUŻA
   ========================================================= */

/*
 * Ukrywamy tekstowy znak źródłowy.
 * Sam znak jest rysowany przez ::after.
 */
.scroll-down-arrow {
    color: transparent !important;
    font-size: 0 !important;
    text-shadow: none !important;

    /*
     * Nie animujemy całego przycisku.
     */
    animation: inherit;
}

.scroll-down-arrow:focus {
    outline: none !important;
}

/* =========================================================
   WŁAŚCIWY ZNAK STRZAŁKI
   ========================================================= */

.scroll-down-arrow::after {
    content: "↓";

    position: absolute;

    left: 50%;
    top: 50%;

    font-size: 2.5rem;
    line-height: 1;

    color: #fff;

    text-align: center;
    white-space: nowrap;

    transform:
        translate(-50%, -50%)
        scale(1.18);

    transform-origin: center center;

    z-index: 10;

    pointer-events: none;

    text-shadow:
        0 1px 3px rgba(0,0,0,0.45),
        0 0 8px rgba(255,255,255,0.65),
        0 0 16px rgba(255,255,255,0.28);

    animation:
        scroll-arrow-symbol-pulse
        2s
        ease-in-out
        infinite;

    will-change:
        transform,
        opacity,
        filter;
}


/* =========================================================
   PULS SAMEJ STRZAŁKI
   DUŻA → MAŁA → DUŻA
   ========================================================= */

@keyframes scroll-arrow-symbol-pulse {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(1.18);

        opacity: 1;

        filter: brightness(1.18);

        text-shadow:
            0 1px 3px rgba(0,0,0,0.55),
            0 0 10px rgba(255,255,255,0.75),
            0 0 20px rgba(255,255,255,0.38),
            0 0 30px rgba(255,255,255,0.16);
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(0.90);

        opacity: 0.85;

        filter: brightness(1);

        text-shadow:
            0 1px 3px rgba(0,0,0,0.55),
            0 0 8px rgba(255,255,255,0.55),
            0 0 16px rgba(255,255,255,0.25);
    }
}


/* =========================================================
   HOVER / ACTIVE — STRZAŁKA ZAWSZE NAJWIĘKSZA
   ========================================================= */

.scroll-down-arrow:hover::after,
.scroll-down-arrow:active::after {
    transform:
        translate(-50%, -50%)
        scale(1.18) !important;

    opacity: 1 !important;

    filter: brightness(1.2);

    text-shadow:
        0 1px 3px rgba(0,0,0,0.45),
        0 0 8px rgba(255,255,255,0.80),
        0 0 18px rgba(255,255,255,0.40);

    animation-play-state: paused !important;
}
}
/* =========================================================
   SCROLL DOWN ARROW — RESET PO KLIKNIĘCIU
   ========================================================= */

.scroll-down-arrow.clicked::after {
    transform:
        translate(-50%, -50%)
        scale(1.18) !important;

    opacity: 1 !important;

    filter: brightness(1.18) !important;

    animation-play-state: running !important;

    text-shadow:
        0 1px 3px rgba(0,0,0,0.55),
        0 0 10px rgba(255,255,255,0.75),
        0 0 20px rgba(255,255,255,0.38),
        0 0 30px rgba(255,255,255,0.16) !important;
}
/* =========================================================
   DODATKOWA WARSTWA TŁA — MIĘKKI, WOLNY PULS
   ========================================================= */
/*
.scroll-arrow-glow {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 82px;
    height: 82px;

    transform:
        translate(-50%, -50%)
        scale(0.78);

    border-radius: 50%;

    pointer-events: none;

	z-index: 0 !important;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.00) 0 34%,
            rgba(255,255,255,0.10) 40%,
            rgba(255,255,255,0.16) 48%,
            rgba(255,255,255,0.08) 58%,
            rgba(255,255,255,0.00) 72%
        );

    filter: blur(2px);

    animation:
        scroll-arrow-glow-pulse
        3.8s
        ease-in-out
        infinite;

    will-change:
        transform,
        opacity;
}


 =========================================================
   WOLNIEJSZY PULS AUREOLI
   ========================================================= */

@keyframes scroll-arrow-glow-pulse {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(0.78);

        opacity: 0.20;
    }

    35% {
        transform:
            translate(-50%, -50%)
            scale(0.92);

        opacity: 0.38;
    }

    55% {
        transform:
            translate(-50%, -50%)
            scale(1.05);

        opacity: 0.58;
    }

    75% {
        transform:
            translate(-50%, -50%)
            scale(1.12);

        opacity: 0.30;
    }
}

/* =========================================================
   MOBILE — WYRAŹNIEJSZE TŁO STRZAŁKI
   ========================================================= */

@media (max-width: 921px) {

    .scroll-down-arrow {
        background: rgba(0, 0, 0, 0.48) !important;

        border: 1px solid rgba(255, 255, 255, 0.65) !important;

        box-shadow:
            0 0 0 2px rgba(0, 0, 0, 0.25),
            0 4px 18px rgba(0, 0, 0, 0.45) !important;
    }

    .scroll-down-arrow::before {
        background: rgba(0, 0, 0, 0.78) !important;
    }

}

/* =========================================================
   SCROLL DOWN ARROW — WSPÓLNY PULS PRZYCISKU
   DESKTOP + MOBILE
   ========================================================= */

/*
 * DOMYŚLNIE — DESKTOP
 * Zachowujemy translateX(-50%), ponieważ desktop
 * pozycjonuje przycisk przez left: 50%.
 */

.scroll-down-arrow {
    animation:
        scroll-arrow-button-pulse
        2.1s
        ease-in-out
        infinite !important;

    transform-origin: center center !important;

    will-change:
        transform,
        box-shadow;
}


/* =========================================================
   DESKTOP — 100% → 118% → 100%
   ========================================================= */

@keyframes scroll-arrow-button-pulse {

    0%,
    100% {
        transform:
            translateX(-50%)
            scale(1);

        box-shadow:
            0 0 0 rgba(255,255,255,0);
    }

    50% {
        transform:
            translateX(-50%)
            scale(1.18);

        box-shadow:
            0 0 16px rgba(255,255,255,0.35),
            0 0 30px rgba(255,255,255,0.15);
    }
}


/* =========================================================
   HOVER / ACTIVE — MAKSYMALNY ROZMIAR
   ========================================================= */

.scroll-down-arrow:hover,
.scroll-down-arrow:active {
    transform:
        translateX(-50%)
        scale(1.18) !important;

    box-shadow:
        0 0 20px rgba(255,255,255,0.75),
        0 0 38px rgba(255,255,255,0.40) !important;

    animation-play-state:
        paused !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 921px) {

    .scroll-down-arrow {
        /*
         * Mobile ma już margin-left: -30px,
         * więc NIE używamy translateX().
         */
        animation:
            scroll-arrow-button-pulse-mobile
            2.1s
            ease-in-out
            infinite !important;

        transform-origin:
            center center !important;
    }


    /* =====================================================
       MOBILE — TEN SAM RYTM CO DESKTOP
       ===================================================== */

    @keyframes scroll-arrow-button-pulse-mobile {

        0%,
        100% {
            transform:
                scale(1);

            box-shadow:
                0 0 0 rgba(255,255,255,0);
        }

        50% {
            transform:
                scale(1.18);

            box-shadow:
                0 0 16px rgba(255,255,255,0.35),
                0 0 30px rgba(255,255,255,0.15);
        }
    }


    /* =====================================================
       MOBILE — HOVER / ACTIVE
       ===================================================== */

    .scroll-down-arrow:hover,
    .scroll-down-arrow:active {
        transform:
            scale(1.18) !important;

        box-shadow:
            0 0 20px rgba(255,255,255,0.75),
            0 0 38px rgba(255,255,255,0.40) !important;

        animation-play-state:
            paused !important;
    }
}
/* =========================================================
   MOBILE — STRZAŁKI PRZEWIJANIA TIMELINE
   ========================================================= */
/* =========================================================
   MOBILE — KLIKALNE STRZAŁKI CHAPTER TIMELINE
   ========================================================= */

@media (max-width: 921px) {

    .chapter-timeline {
        position: relative !important;
    }

    .chapter-timeline .chapter-axis {
        overflow-x: auto !important;
        overflow-y: hidden !important;

        scrollbar-width: none !important;
        -ms-overflow-style: none !important;

        padding-left: 38px !important;
        padding-right: 38px !important;
    }

    .chapter-timeline .chapter-axis::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    .timeline-scroll-left,
    .timeline-scroll-right {
        position: absolute !important;

        top: 50% !important;

        width: 28px !important;
        height: 28px !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: translateY(-50%) !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        border: none !important;
        border-radius: 50% !important;

        background: transparent !important;

        color: #432B20 !important;

        font-size: 20px !important;
        line-height: 1 !important;

        cursor: pointer;

        z-index: 20 !important;

        box-shadow:
            0 2px 8px rgba(0,0,0,0.18);
    }

    .timeline-scroll-left {
        left: 4px !important;
    }

    .timeline-scroll-right {
        right: 4px !important;
    }

    .timeline-scroll-left:active,
    .timeline-scroll-right:active {
        transform:
            translateY(-50%)
            scale(0.92) !important;
    }
}

@media (min-width: 922px) {

    .timeline-scroll-left,
    .timeline-scroll-right {
        display: none !important;
    }
}
@media (max-width: 921px) {

    .chapter-timeline .chapter-axis {
        overflow-x: auto !important;
        overflow-y: hidden !important;

        /* ukrycie scrollbarów */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .chapter-timeline .chapter-axis::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
}
/* =========================================================
   MOBILE — STRZAŁKI PRZEWIJANIA CHAPTER TIMELINE
   ========================================================= */

@media (max-width: 921px) {

    .chapter-timeline {
        position: relative !important;
    }

    .chapter-timeline .chapter-axis {
        overflow-x: auto !important;
        overflow-y: hidden !important;

        scrollbar-width: none;
        -ms-overflow-style: none;

        padding-left: 38px !important;
        padding-right: 38px !important;
    }

    .chapter-timeline .chapter-axis::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }


    .timeline-scroll-left,
    .timeline-scroll-right {
        position: absolute !important;

        top: 50%;

        width: 28px;
        height: 28px;

        transform: translateY(-50%);

        display: flex !important;
        align-items: center;
        justify-content: center;

        padding: 0 !important;

        border: 0 !important;
        border-radius: 50%;

        background: rgba(255,255,255,0.82) !important;

        color: #432B20 !important;

        font-size: 20px;
        line-height: 1;

        cursor: pointer;

        z-index: 20;

        box-shadow:
            0 2px 8px rgba(0,0,0,0.18);

        transition:
            transform 0.15s ease,
            background-color 0.15s ease,
            box-shadow 0.15s ease;
    }


    .timeline-scroll-left {
        left: 4px;
    }

    .timeline-scroll-right {
        right: 4px;
    }


    .timeline-scroll-left:active,
    .timeline-scroll-right:active {
        transform:
            translateY(-50%)
            scale(0.92);
    }
}
@media (min-width: 922px) {

    .scroll-down-arrow {
        top: auto !important;
        bottom: -30px !important;

    }

}
/* =========================================================
   HOVER — POSZCZEGÓLNE ROZDZIAŁY NA OSI
   ========================================================= */

@media (min-width: 922px) {

    .chapter-item {
        position: relative;
        transition:
            transform 0.2s ease,
            background-color 0.2s ease,
            box-shadow 0.2s ease;
    }

    .chapter-item:hover {
        background: rgba(255, 255, 255, 0.10) !important;

        box-shadow:
            0 0 10px rgba(255, 255, 255, 0.14);

        transform: translateY(-2px);
    }

    .chapter-item:hover .chapter-marker {
        transform: scale(1.18);
        box-shadow:
            0 0 7px rgba(255, 255, 255, 0.45),
            0 0 14px rgba(255, 255, 255, 0.20);
    }

}
/* =========================================================
   HOVER — ROZDZIAŁY NA OSI
   ========================================================= */

@media (min-width: 922px) {

    .chapter-item {
        position: relative;

        border-radius: 14px;

        transition:
            background-color 0.25s ease,
            box-shadow 0.25s ease,
            transform 0.2s ease;
    }


    /* TŁO POD NAJECHANYM ROZDZIAŁEM */

    .chapter-item:hover {

        background:
            rgba(55, 38, 30, 0.72) !important;

        box-shadow:
            0 4px 14px rgba(0, 0, 0, 0.24),
            inset 0 0 0 1px rgba(255, 255, 255, 0.08);

        transform:
            translateY(-2px);
    }


    /* PUNKT ROZDZIAŁU */

    .chapter-item .chapter-marker {

        transition:
            transform 0.2s ease,
            box-shadow 0.2s ease,
            background-color 0.2s ease;
    }


    .chapter-item:hover .chapter-marker {

        transform:
            scale(1.25);

        box-shadow:
            0 0 8px rgba(255,255,255,0.15),
            0 0 16px rgba(255,255,255,0.25);
    }


    /* NAZWA ROZDZIAŁU */

    .chapter-item .chapter-title {

        transition:
            text-shadow 0.2s ease,
            color 0.2s ease;
    }


    .chapter-item:hover .chapter-title {

        color: #fff !important;

        text-shadow:
            0 0 6px rgba(255,255,255,0.35);
    }
}

.site-header {
    position: relative !important;
}

@media (min-width: 922px) {

    .site-header {
        position: relative !important;
    }

    .scroll-down-arrow {
        top: auto !important;
        bottom: -30px !important;
    }

}
/* =========================================================
   DESKTOP — STRZAŁKA NA KOŃCU HEADERA
   ========================================================= */

@media (min-width: 922px) {

    .site-header {
        position: relative !important;
        overflow: visible !important;
    }

    .scroll-down-arrow {
        position: absolute !important;

        left: 50% !important;

        top: auto !important;
        bottom: -200px !important;


        z-index: 999999999 !important;
    }

}
/* =========================================================
   TYTUŁ AKTUALNEGO ROZDZIAŁU debug
   ========================================================= */

.chapter-view-title {
    display: block;
    width: fit-content;
    max-width: calc(100% - 40px);

    margin: 18px auto 24px;
    padding: 8px 22px;

    box-sizing: border-box;

    text-align: center;

    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;

    color: rgba(255, 255, 255, 0.94);

    /* tło */
    background: rgba(45, 45, 45, 0.42);

    /* border */
    border: 1px solid rgba(216, 193, 156, 0.55);
    border-radius: 18px;

    /* cień dopasowany do borderu */
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.28),
        0 0 10px rgba(216, 193, 156, 0.12);

    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.45);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

/* =========================================================
   GLOBAL PAGE LOADING OVERLAY
   ========================================================= */
#pageLoadingOverlay {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: rgba(5, 15, 18, 0.78) !important;

    z-index: 100000000 !important;

    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

#pageLoadingOverlay.is-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* =========================================================
   LOADING ANIMATION
   ========================================================= */

.page-loading-animation {
    position: relative;

    width: 180px;
    height: 180px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* FALA */

.loading-wave-ring {
    position: absolute;

    inset: 0;

    background-image: url("wave-ring.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    animation:
        loading-wave-rotate 4.5s linear infinite;

    will-change: transform;
}


/* =========================================================
   OBRACAJĄCY SIĘ RING
   ========================================================= */

.loading-ring {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    animation: loading-wave-rotate 4.5s linear infinite;

    will-change: transform;

    z-index: 1;
}


/* =========================================================
   STATYCZNE LOGO
   ========================================================= */

.loading-logo {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 55px;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    transform: translate(-50%, -50%);

    z-index: 2;

    pointer-events: none;
}

.loading-logo img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


/* DELIKATNA POŚWIATA */

.page-loading-animation::after {
    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.04);

    filter: blur(14px);

    z-index: 0;
}


@keyframes loading-wave-rotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

#bigPictureOverlay {
    z-index: 100000001 !important;
}
/* =========================================================
   WARSTWY STRONY
   ========================================================= */

.site-header,
.ast-main-header-wrap,
.main-header-bar,
.site-header-primary-section-right,
.main-header-bar .main-navigation,
#primary-site-navigation-desktop {
    z-index: 99999999 !important;
}

#pageLoadingOverlay {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: rgba(0, 0, 0, 0.72) !important;

    z-index: 100000000 !important;
}

#bigPictureOverlay {
    z-index: 100000001 !important;
}

/* =========================================================
   SOCIAL ICONS - MOBILE
   ========================================================= */

@media (max-width: 768px) {

    /* Właściwy kontener ikon Astry */
    .ast-header-social-wrap .header-social-inner-wrap {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;
        justify-content: flex-end !important;

        gap: 14px !important;

        width: auto !important;
        height: auto !important;
    }

    /* Każda ikona */
    .ast-header-social-wrap .header-social-inner-wrap > a {
        display: inline-flex !important;

        flex: 0 0 auto !important;

        width: 22px !important;
        height: 22px !important;

        margin: 0 !important;
        padding: 0 !important;

        align-items: center !important;
        justify-content: center !important;
    }

    /* SVG */
    .ast-header-social-wrap .header-social-inner-wrap > a svg {
        display: block !important;

        width: 18px !important;
        height: 18px !important;

        margin: 0 !important;
    }

}

/* =========================================================
   FOOTER - MOBILE
   ========================================================= */

@media (max-width: 768px) {

    /* Wszystkie widgety */
    .site-footer .footer-widget-area {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto 12px !important;
        padding: 0 !important;
    }


    /* Trzy karty z informacjami */
    .site-footer .footer-widget-area:nth-child(1),
    .site-footer .footer-widget-area:nth-child(2),
    .site-footer .footer-widget-area:nth-child(3) {
        width: 82% !important;
        max-width: 330px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Sam widget */
    .site-footer .footer-widget-area:nth-child(1) .widget,
    .site-footer .footer-widget-area:nth-child(2) .widget,
    .site-footer .footer-widget-area:nth-child(3) .widget {
        margin: 0 !important;
    }


    /* Tabele wewnątrz kart */
    .site-footer .footer-widget-area:nth-child(1) table,
    .site-footer .footer-widget-area:nth-child(2) table,
    .site-footer .footer-widget-area:nth-child(3) table {
        width: 100% !important;
        margin: 0 !important;
    }


    /* Zmniejszamy wewnętrzne odstępy */
    .site-footer .footer-widget-area:nth-child(1) td,
    .site-footer .footer-widget-area:nth-child(2) td,
    .site-footer .footer-widget-area:nth-child(3) td {
        padding: 6px 10px !important;
    }


    /* Mapa */
    .site-footer .footer-widget-area:nth-child(4) {
        width: 100% !important;
        max-width: 100% !important;

        margin-top: 8px !important;
    }

}

/* =========================================================
   REVIEWS — SKRÓCONA / ROZWINIĘTA OPINIA
   ========================================================= */

.custom-google-reviews-slider .review .text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

.custom-google-reviews-slider .review.expanded .text {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
}

.review-more-toggle {
    display: none;

    margin: 8px auto 0;
    padding: 0;

    border: 0;
    background: transparent;

    color: #fff;
    font: inherit;
    font-weight: 600;

    text-decoration: underline;

    cursor: pointer;
}

.review.is-long .review-more-toggle {
    display: inline-block;
}
.custom-google-reviews-slider .review {
    opacity: 0 !important;
    visibility: hidden !important;
}

.custom-google-reviews-slider .review.active {
    opacity: 1 !important;
    visibility: visible !important;
}

@media (max-width: 700px) {

    #mobile-google-reviews-container .review.is-long .text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
    }

    #mobile-google-reviews-container .review.is-long .review-more-toggle {
        display: inline-flex !important;
        visibility: visible !important;
    }

}

/* =========================================================
   REVIEWS — CZYTELNOŚĆ ELEMENTÓW
   ========================================================= */

/* GWIAZDKI */

.review .stars {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;
    margin: 0 auto 10px;

    padding: 4px 10px;

    background: rgba(20, 25, 30, 0.42);
    border-radius: 12px;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.12);

    line-height: 1;
}


/* AUTOR / NAZWA UŻYTKOWNIKA */

.review .author {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;
    margin: 0 auto 12px;

    padding: 5px 12px;

    background: rgba(20, 25, 30, 0.42);
    border-radius: 12px;

    color: #fff !important;

    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.35);

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.10);
}


/* =========================================================
   ZOBACZ WIĘCEJ
   ========================================================= */

.review-more-toggle {
    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    width: fit-content;

    margin: 24px auto 0;

    padding: 6px 13px;

    border: none;
    border-radius: 11px;

    background: rgba(20, 25, 30, 0.52);

    color: #8ee7ff !important;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.2;
    text-decoration: none;

    cursor: pointer;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.14);

    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.35);

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


/* HOVER */

.review-more-toggle:hover {
    background: rgba(20, 25, 30, 0.68);

    color: #b8f1ff !important;

    transform: translateY(-1px);
}


/* ACTIVE / KLIKNIĘCIE */

.review-more-toggle:active {
    transform: translateY(0);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .review .stars {
        padding: 4px 9px;
        margin-bottom: 8px;

        border-radius: 11px;
    }

    .review .author {
        padding: 4px 10px;
        margin-bottom: 10px;

        border-radius: 11px;
    }

    .review-more-toggle {
        margin-top: 20px;

        padding: 5px 11px;

        font-size: 13px;

        border-radius: 10px;
    }
}
/* =========================================================
   REVIEW — KOŃCOWE USTAWIENIE PRZYCISKU
   ========================================================= */

.review {
    display: flex;
    flex-direction: column;
}

.review .stars {
    order: 1;
}

.review .text {
    order: 2;
}

.review .author {
    order: 3;
}

.review .review-more-toggle {
    order: 4;

    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.review.is-long .review-more-toggle {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* =========================================================
   REVIEW — STYL PRZYCISKU
   ========================================================= */

.review.is-long .review-more-toggle {
    margin-top: 14px;

    padding: 5px 12px;

    border: none;
    border-radius: 10px;

    background: rgba(20, 25, 30, 0.52);

    color: #ffffff !important;

    font-size: 13px;
    font-weight: 600;

    line-height: 1.2;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.14);

    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.35);

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.review.is-long .review-more-toggle:hover {
    background: rgba(20, 25, 30, 0.68);

    color: #ffffff !important;

    transform: translateY(-1px);
}

/* =========================================================
   REVIEW — KOLEJNOŚĆ PRZYCISKU I AUTORA
   ========================================================= */

.review .review-more-toggle {
    order: 3;

    margin-top: 14px;
    margin-bottom: 14px;
}

.review .author {
    order: 4;
}

/* =========================================================
   REVIEWS — DESKTOP
   Dynamiczna wysokość jak na mobile
   ========================================================= */

@media (min-width: 701px) {

    .reviews-area {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }

    .reviews-area .header-reviews-wrapper {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }

    .reviews-area .desktop-reviews {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;
    }

    .reviews-area .custom-google-reviews-slider {
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }

    .reviews-area .review {
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }
}

/* =========================================================
   DESKTOP + MOBILE
   DŁUGA OPINIA — STAN ZWINIĘTY
   ========================================================= */

.custom-google-reviews-slider .review.is-long .text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

/* =========================================================
   CUSTOM PULL TO REFRESH
   ========================================================= */

.custom-pull-refresh-inner {
    position: absolute !important;

    top: 0 !important;
    left: 50% !important;

    width: 120px !important;
    height: 120px !important;

    min-width: 120px !important;
    min-height: 120px !important;

    max-width: 120px !important;
    max-height: 120px !important;

    box-sizing: border-box !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;



    overflow: hidden !important;

    will-change: transform;

    transition:
        transform 0.08s linear;
}


.custom-pull-refresh-shell {
    width: 64px !important;
    height: 64px !important;

    min-width: 64px !important;
    min-height: 64px !important;

    max-width: 64px !important;
    max-height: 64px !important;

    flex: 0 0 64px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;

    transform-origin: center center;

    will-change: transform;
}


.custom-pull-refresh-shell img {
    display: block !important;

    width: 54px !important;
    height: 54px !important;

    min-width: 54px !important;
    min-height: 54px !important;

    max-width: 54px !important;
    max-height: 54px !important;

    flex: 0 0 54px !important;

    object-fit: contain !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    user-select: none !important;
    -webkit-user-select: none !important;

    pointer-events: none !important;
}

/* =========================================================
   CUSTOM PULL TO REFRESH — VISUAL
   ========================================================= */

.custom-pull-refresh {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 0 !important;

    z-index: 2147483647 !important;

    pointer-events: none !important;

    display: flex !important;
    justify-content: center !important;

    overflow: visible !important;

    background: transparent !important;
}


.custom-pull-refresh-inner {
    position: absolute !important;

    top: 0 !important;
    left: 150% !important;

    width: 170px !important;
    height: 100px !important;

    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: rgba(255, 255, 255, 0.96) !important;





    overflow: hidden !important;
}

.custom-pull-refresh-shell {
    width: 64px !important;
    height: 64px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 64px !important;

    overflow: hidden !important;

    transform-origin: center center;
}

.custom-pull-refresh-shell img {
    width: 54px !important;
    height: 54px !important;

    min-width: 54px !important;
    min-height: 54px !important;

    max-width: 54px !important;
    max-height: 54px !important;

    object-fit: contain !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;

    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* =========================================================
   CO OFERUJEMY
   ========================================================= */

.offers-area {
    position: relative;

    width: 100%;
    box-sizing: border-box;

    padding: 80px 20px;

    background: rgba(255, 255, 255, 0.35);

    border-radius: 28px;

    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.08);
}

.offers-area-inner {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    box-sizing: border-box;
    text-align: center;
}

.offers-area h2 {
    margin: 0 0 50px;
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
}

.offers-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 28px;
}

.offer-item {
    padding: 30px 24px;

    border-radius: 20px;

    background: rgba(255, 255, 255, 0.72);

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.08);

    box-sizing: border-box;
}

.offer-icon {
    margin-bottom: 16px;

    font-size: 34px;
    line-height: 1;
}

.offer-item h3 {
    margin: 0 0 12px;

    font-size: 22px;
    line-height: 1.25;
}

.offer-item p {
    margin: 0;

    font-size: 16px;
    line-height: 1.6;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .offers-area {
        padding: 55px 18px;
    }

    .offers-area h2 {
        margin-bottom: 35px;
        font-size: 30px;
    }

    .offers-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .offer-item {
        padding: 24px 20px;
    }

    .offer-icon {
        font-size: 30px;
    }

    .offer-item h3 {
        font-size: 20px;
    }

    .offer-item p {
        font-size: 15px;
    }

}
/* =========================================================
   HEADER WELCOME — FIXED TO HERO
   ========================================================= */

@media (max-width: 921px) {

    /* HERO jest punktem odniesienia */
    .site-header {
        position: relative !important;
    }

    /*
     * Usuwamy pozycjonowanie z elementów Astry,
     * żeby absolute .header-welcome szukał
     * najbliższego positioned parenta = .site-header
     */
    #ast-mobile-header,
    #ast-mobile-header .ast-mobile-header-wrap,
    #ast-mobile-header .ast-primary-header-bar {
        position: static !important;
    }

    /* Powitanie — środek całego hero */
    #ast-mobile-header .header-welcome {
        position: absolute !important;

        top: 50% !important;
        left: 50% !important;

        transform: translate(-50%, -50%) !important;

        width: auto !important;
        max-width: calc(100% - 40px) !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 100 !important;

        pointer-events: none !important;
    }

    #ast-mobile-header .header-welcome-inner {
        width: auto !important;
        max-width: 290px !important;

        padding: 8px 14px !important;

        box-sizing: border-box !important;

        background: rgba(255, 255, 255, 0.40) !important;

        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);

        border-radius: 14px !important;

        color: #fff !important;

        font-size: 14px !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;

        text-align: center !important;

        text-shadow:
            0 1px 3px rgba(0, 0, 0, 0.45);

        box-shadow:
            0 3px 12px rgba(0, 0, 0, 0.10);
    }
}

/* ---------------------------------------------------------
   DESKTOP + TABLET
   --------------------------------------------------------- */

#ast-desktop-header .header-welcome,
#ast-mobile-header .header-welcome {
    position: absolute !important;

    top: 50% !important;
    left: 50% !important;

    transform: translate(-50%, -50%) !important;

    width: max-content !important;
    max-width: calc(100% - 40px) !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    z-index: 100 !important;

    pointer-events: none !important;
}


#ast-desktop-header .header-welcome-inner,
#ast-mobile-header .header-welcome-inner {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    width: auto !important;
    max-width: 100% !important;

    padding: 8px 18px !important;

    background: rgba(255, 255, 255, 0.40) !important;

    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);

    border-radius: 18px !important;

    color: #fff !important;

    font-size: 18px !important;
    font-weight: 600 !important;

    line-height: 1.25 !important;

    text-align: center !important;

    white-space: normal !important;

    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.45);

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.10);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 700px) {

    #ast-mobile-header .header-welcome {
        top: 50% !important;
        left: 50% !important;

        transform: translate(-50%, -50%) !important;

        width: max-content !important;
        max-width: calc(100% - 40px) !important;
    }


    #ast-mobile-header .header-welcome-inner {
        width: auto !important;
        max-width: 290px !important;

        padding: 7px 14px !important;

        border-radius: 14px !important;

        font-size: 14px !important;

        line-height: 1.2 !important;

        text-align: center !important;
    }

}

.header-welcome {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 999999 !important;
}

/* =========================================================
   HEADER WELCOME — WYGLĄD
   ========================================================= */

.header-welcome-inner {
    position: relative !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: max-content !important;
    max-width: 290px !important;

    box-sizing: border-box !important;

    padding: 8px 18px !important;

    margin: 0 !important;

    background: rgba(210, 210, 210, 0.70) !important;

    border-radius: 18px !important;

    color: #333 !important; 

    font-size: 18px !important;
    font-weight: 600 !important;

    line-height: 1.25 !important;

    text-align: center !important;

    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.45) !important;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.10) !important;
}


.header-welcome-inner span {
    display: block !important;

    width: auto !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;

    color: #fff !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .header-welcome-inner {
        max-width: 290px !important;

        padding: 7px 14px !important;

        border-radius: 14px !important;

        font-size: 30px !important;
        line-height: 1.25 !important;
    }

}

/* =========================================================
   MOBILE GLOBAL FIXED BACKGROUND
   ========================================================= */

@media (max-width: 921px) {

    html {
        background: transparent !important;
    }

    body {
        background: transparent !important;
    }

    body::before {
        content: "";
        position: fixed;
        inset: 0;

        width: 100%;
        height: 100%;

        
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;

        z-index: -1000;
        pointer-events: none;
    }

}