.my-slider {
	position: relative;
	overflow: hidden !important;
	width: 100%;
}

.my-slider > #swiper-wrapper.swiper-wrapper {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	border-radius: 20px;
}

.my-slider > #swiper-wrapper > .swiper-slide {
	width: 100% !important;
	min-width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
	box-sizing: border-box;
}

/* Before Swiper starts, keep only first slide visible on frontend. */
html:not(.granxok-editor-mode) .my-slider:not(.granxok-slider-ready):not(.swiper-initialized) > #swiper-wrapper > .swiper-slide:not(:first-child) {
	display: none !important;
}

.my-slider .hero-swiper-prev,
.my-slider .hero-swiper-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 50;
	width: 72px;
	height: 72px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #fff;
	font-size: 56px;
	font-weight: 300;
	line-height: 72px;
	text-align: center;
	cursor: pointer;
	box-shadow: none;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.my-slider .hero-swiper-prev {
	left: 20px;
}

.my-slider .hero-swiper-next {
	right: 20px;
}

.my-slider .swiper-pagination,
.my-slider .swiper-pagination-bullets,
.my-slider .hero-swiper-pagination {
	display: none !important;
}

.my-slider.swiper-fade > #swiper-wrapper > .swiper-slide {
	pointer-events: none;
}

.my-slider:not(.swiper-initialized):not(.granxok-slider-ready) > #swiper-wrapper > .swiper-slide:first-child,
.my-slider.swiper-fade > #swiper-wrapper > .swiper-slide.swiper-slide-active {
	pointer-events: auto;
	z-index: 2;
}

.my-slider .swiper-slide-active .elementor-button,
.my-slider .swiper-slide-active a[href*="elementor-action"],
.my-slider .swiper-slide-active .gx-hero-btn,
.my-slider #request-button,
.my-slider [id=" request-button"] {
	position: relative;
	z-index: 10;
	pointer-events: auto !important;
}

/* CPT hero slides: cover image + overlay (numbers from post-9.css) */
.my-slider .gx-hero-slide {
	position: relative;
	min-height: 90vh;
	display: flex !important;
	align-items: center;
	justify-content: flex-start;
	overflow: hidden;
	background: #111;
}

.my-slider .gx-hero-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: #000;
	opacity: 0.3;
	pointer-events: none;
}

.my-slider .gx-hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center right;
	z-index: 0;
}

.my-slider .gx-hero-slide picture {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
}

.my-slider .gx-hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1200px;
	padding: 70px;
	box-sizing: border-box;
	color: #fff;
	font-family: "Inter", Sans-serif;
}

.my-slider .gx-hero-title {
	margin: 0 0 16px;
	font-family: "Inter", Sans-serif;
	font-size: 62px;
	font-weight: 600;
	line-height: 70px;
	color: #fff;
}

.my-slider .gx-hero-accent {
	color: #89dae9;
	font-weight: 700;
}

.my-slider .gx-hero-subtitle {
	margin: 0 0 28px;
	font-family: "Inter", Sans-serif;
	font-size: 26px;
	font-weight: 400;
	line-height: 1.35;
	color: #fff;
	max-width: 720px;
}

.my-slider .gx-hero-bullets {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 18px 28px;
}

.my-slider .gx-hero-bullets li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	max-width: 280px;
}

.my-slider .gx-hero-bullet-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	color: #257785;
	flex: 0 0 40px;
}

.my-slider .gx-hero-bullet-text {
	display: flex;
	flex-direction: column;
	font-family: "Inter", Sans-serif;
	font-size: 22px;
	font-weight: 300;
	line-height: 28px;
	color: #fff;
}

.my-slider .gx-hero-bullet-line1,
.my-slider .gx-hero-bullet-line2 {
	display: block;
}

.my-slider .gx-hero-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.my-slider .gx-hero-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #257785;
	color: #fff !important;
	font-family: "Inter", Sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 24px;
	border-radius: 13px;
	padding: 20px 50px;
	text-decoration: none !important;
	border: 0;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.my-slider .gx-hero-btn:hover {
	opacity: 0.92;
	color: #fff !important;
}

@media (max-width: 767px) {
	.my-slider .hero-swiper-prev {
		left: 12px;
	}

	.my-slider .hero-swiper-next {
		right: 12px;
	}

	.my-slider .hero-swiper-prev,
	.my-slider .hero-swiper-next {
		width: 56px;
		height: 56px;
		font-size: 44px;
		line-height: 56px;
	}

	.my-slider .gx-hero-slide {
		min-height: 100vh;
	}

	.my-slider .gx-hero-slide::before {
		opacity: 0.5;
	}

	.my-slider .gx-hero-inner {
		padding: 50px;
	}

	.my-slider .gx-hero-title {
		font-size: 32px;
		line-height: 1.15;
	}

	.my-slider .gx-hero-subtitle {
		font-size: 20px;
	}

	.my-slider .gx-hero-bullet-text {
		font-size: 16px;
		line-height: 22px;
	}

	.my-slider .gx-hero-btn {
		font-size: 18px;
		padding: 20px;
		width: 100%;
		box-sizing: border-box;
	}
}

/* === GRANXOK HERO: full width background / 1200px content === */

.my-slider {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

.my-slider .gx-hero-slide {
    position: relative !important;
    min-height: 90vh;
    overflow: hidden;
}

.my-slider .gx-hero-slide picture {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.my-slider .gx-hero-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center right;
}

.my-slider .gx-hero-inner {
    position: relative;
    z-index: 2;
    width: calc(100% - 80px);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .my-slider .gx-hero-slide {
        min-height: 100vh;
        min-height: 100dvh;
    }

    .my-slider .gx-hero-inner {
        width: 100%;
        max-width: none;
        padding-left: 50px;
        padding-right: 50px;
    }
}

/* === /GRANXOK HERO === */



/* ==========================================================
   GRANXOK HERO — MOBILE LAYOUT + BOTTOM NAV
   ========================================================== */

@media (max-width: 767px) {

    /* Слайд */
    .my-slider .gx-hero-slide {
        min-height: 100dvh;
        padding-bottom: 78px;
        box-sizing: border-box;
    }

    /* Затемнение для читаемости */
    .my-slider .gx-hero-slide::before {
        opacity: .48;
    }

    /* Контент: больше полезной ширины */
    .my-slider .gx-hero-inner {
        width: 100% !important;
        max-width: none !important;
        padding: 44px 24px 30px !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    /* Заголовок */
    .my-slider .gx-hero-title {
        max-width: 100%;
        margin-bottom: 18px;
        font-size: clamp(30px, 8.2vw, 38px);
        line-height: 1.08;
        letter-spacing: -0.02em;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    .my-slider .gx-hero-accent {
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    /* Подзаголовок */
    .my-slider .gx-hero-subtitle {
        max-width: 100%;
        margin-bottom: 18px;
        font-size: 18px;
        line-height: 1.3;
        overflow-wrap: normal;
        word-break: normal;
    }

    /* Преимущества */
    .my-slider .gx-hero-bullets {
        margin: 0 0 22px;
        padding: 0;
    }

    .my-slider .gx-hero-bullets li {
        margin-bottom: 10px;
    }

    .my-slider .gx-hero-bullet-text {
        font-size: 16px;
        line-height: 1.3;
        overflow-wrap: normal;
        word-break: normal;
    }

    /* Кнопки */
    .my-slider .gx-hero-buttons {
        width: 100%;
        gap: 10px;
        margin-top: 22px;
    }

    .my-slider .gx-hero-btn {
        width: 100%;
        min-height: 58px;
        padding: 16px 20px;
        font-size: 18px;
        line-height: 1.15;
        box-sizing: border-box;
    }


    /* ------------------------------------------------------
       Нижняя навигация
       ------------------------------------------------------ */

    .my-slider .hero-swiper-prev,
    .my-slider .hero-swiper-next {
        top: auto !important;
        bottom: 18px !important;

        width: 42px !important;
        height: 42px !important;

        margin: 0 !important;

        background: rgba(255,255,255,.94);
        border: 0;
        border-radius: 50%;

        transform: none !important;

        z-index: 20;
    }

    .my-slider .hero-swiper-prev {
        left: 24px !important;
        right: auto !important;
    }

    .my-slider .hero-swiper-next {
        right: 24px !important;
        left: auto !important;
    }

    .my-slider .hero-swiper-prev svg,
    .my-slider .hero-swiper-next svg {
        width: 20px;
        height: 20px;
    }


    /* 1 / N */
    .my-slider .gx-mobile-counter {
        position: absolute;

        left: 50%;
        bottom: 28px;

        transform: translateX(-50%);

        z-index: 20;

        color: #fff;
        font-size: 15px;
        line-height: 1;
        font-weight: 600;
        letter-spacing: .04em;

        pointer-events: none;
    }

}


/* Очень узкие телефоны */
@media (max-width: 390px) {

    .my-slider .gx-hero-inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .my-slider .gx-hero-title {
        font-size: clamp(28px, 8vw, 32px);
    }

    .my-slider .gx-hero-subtitle {
        font-size: 17px;
    }

    .my-slider .hero-swiper-prev {
        left: 20px !important;
    }

    .my-slider .hero-swiper-next {
        right: 20px !important;
    }
}

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

/* ==========================================================
   GRANXOK MOBILE NAV — FINAL
   ========================================================== */

@media (max-width: 767px) {

    /* Оставляем место снизу под навигацию */
    .my-slider .gx-hero-slide {
        padding-bottom: 96px !important;
    }

    /* Стрелки */
    .my-slider .hero-swiper-prev,
    .my-slider .hero-swiper-next {
        top: auto !important;
        bottom: 24px !important;

        width: 48px !important;
        height: 48px !important;

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

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

        background: rgba(10, 18, 20, .38) !important;
        border: 1.5px solid rgba(255,255,255,.48) !important;
        border-radius: 50% !important;

        box-shadow: 0 4px 16px rgba(0,0,0,.18);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);

        transform: none !important;
        opacity: 1 !important;
        z-index: 30;
    }

    .my-slider .hero-swiper-prev {
        left: 24px !important;
        right: auto !important;
    }

    .my-slider .hero-swiper-next {
        right: 24px !important;
        left: auto !important;
    }

    /* Сами шевроны */
    .my-slider .hero-swiper-prev svg,
    .my-slider .hero-swiper-next svg {
        width: 20px !important;
        height: 20px !important;
        fill: none !important;
        stroke: #fff !important;
        opacity: .95;
    }

    /* Счетчик */
    .my-slider .gx-mobile-counter {
        position: absolute !important;
        left: 50% !important;
        bottom: 53px !important;

        transform: translateX(-50%) !important;

        color: #fff !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        letter-spacing: .02em;

        z-index: 30;
        pointer-events: none;
    }

    /* Точки под счетчиком */
    .my-slider .gx-mobile-counter::after {
        content: "●  ○  ○  ○";
        position: absolute;

        top: 22px;
        left: 50%;

        transform: translateX(-50%);

        width: max-content;

        color: rgba(255,255,255,.55);
        font-size: 12px;
        line-height: 1;
        letter-spacing: 2px;
    }

    /* Первая активная точка */
    .my-slider .gx-mobile-counter::before {
        content: "●";
        position: absolute;

        top: 22px;
        left: calc(50% - 31px);

        color: #67d9e8;
        font-size: 12px;
        line-height: 1;

        z-index: 2;
    }
}

@media (max-width: 390px) {

    .my-slider .hero-swiper-prev {
        left: 20px !important;
    }

    .my-slider .hero-swiper-next {
        right: 20px !important;
    }
}

/* === /GRANXOK MOBILE NAV FINAL === */


/* ==========================================================
   GRANXOK MOBILE NAVIGATION — REAL SWIPER PAGINATION
   ========================================================== */

@media (max-width: 767px) {

    /* Убираем старые декоративные точки */
    .my-slider .gx-mobile-counter::before,
    .my-slider .gx-mobile-counter::after {
        content: none !important;
        display: none !important;
    }

    /* Стрелки */
    .my-slider .hero-swiper-prev,
    .my-slider .hero-swiper-next {
        top: auto !important;
        bottom: 24px !important;

        width: 48px !important;
        height: 48px !important;

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

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

        background: rgba(10,18,20,.38) !important;
        border: 1.5px solid rgba(255,255,255,.48) !important;
        border-radius: 50% !important;

        box-shadow: 0 4px 16px rgba(0,0,0,.18) !important;

        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);

        transform: none !important;
        opacity: 1 !important;
        z-index: 30 !important;
    }

    .my-slider .hero-swiper-prev {
        left: 24px !important;
        right: auto !important;
    }

    .my-slider .hero-swiper-next {
        right: 24px !important;
        left: auto !important;
    }

    .my-slider .hero-swiper-prev svg,
    .my-slider .hero-swiper-next svg {
        width: 20px !important;
        height: 20px !important;
        fill: none !important;
        stroke: #fff !important;
        opacity: .95 !important;
    }

    /* Счетчик 1 / 10 */
    .my-slider .gx-mobile-counter {
        position: absolute !important;
        left: 50% !important;
        bottom: 51px !important;

        width: auto !important;

        transform: translateX(-50%) !important;

        color: #fff !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        letter-spacing: .02em !important;

        z-index: 31 !important;
        pointer-events: none !important;
    }

    /* Настоящие буллеты */
    .my-slider .gx-mobile-pagination {
        position: absolute !important;

        left: 50% !important;
        right: auto !important;
        bottom: 25px !important;

        width: auto !important;
        max-width: calc(100% - 150px) !important;
        height: 12px !important;

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

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

        transform: translateX(-50%) !important;

        z-index: 31 !important;
    }

    .my-slider .gx-mobile-pagination .swiper-pagination-bullet {
        flex: 0 0 8px !important;

        width: 8px !important;
        height: 8px !important;

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

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

        display: block !important;

        background: transparent !important;

        border: 1.5px solid rgba(255,255,255,.72) !important;
        border-radius: 50% !important;

        opacity: 1 !important;

        box-sizing: border-box !important;

        transition:
            background-color .2s ease,
            border-color .2s ease,
            transform .2s ease !important;
    }

    /* Активный буллет */
    .my-slider .gx-mobile-pagination .swiper-pagination-bullet-active {
        background: #257785 !important;
        border-color: #257785 !important;
        transform: scale(1.15) !important;
    }
}

@media (max-width: 390px) {

    .my-slider .hero-swiper-prev {
        left: 20px !important;
    }

    .my-slider .hero-swiper-next {
        right: 20px !important;
    }

    .my-slider .gx-mobile-pagination {
        gap: 5px !important;
    }
}

/* === /GRANXOK MOBILE NAVIGATION === */


/* Offer description — full width on mobile */
@media (max-width: 767px) {
    .my-slider .offer-description,
    .offer-description {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
}


/* ==========================================================
   GRANXOK — STANDARD OFFER MOBILE FULL WIDTH
   ========================================================== */

@media (max-width: 767px) {

    .my-slider .gx-hero-subtitle {
        width: 100% !important;
        max-width: 100% !important;
    }

    .my-slider .standard-offer {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        box-sizing: border-box !important;
    }

    .my-slider .standard-offer .offer-package,
    .my-slider .standard-offer .offer-bonus,
    .my-slider .standard-offer .offer-description,
    .my-slider .standard-offer .offer-price {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        box-sizing: border-box !important;
    }

    .my-slider .standard-offer .offer-description {
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }
}

/* === /STANDARD OFFER MOBILE FULL WIDTH === */