/* CSS Document */

/* =========================================================
   SONARPRO - základní styly
   ========================================================= */

.navigation-in-bottom .top-navigation-menu-item-vip a {
	color: #BF2030;
  font-weight: 800;
  font-size: 16px;
}
.box.box-filters, .box.box-categories {
background: radial-gradient( circle at 100% 0, rgba(13, 65, 104, 0.08), transparent 32% ), linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
box-shadow: var(--sp-shadow);
}
.box.box-filters > h4 {
	background-color: #0e406a;
}
.carousel-indicators {
	display: none;
}
/* Benefit bannery HP */
.banners-top-block {
	margin-top: -10px !important;
}

/* =========================================================
   HOMEPAGE – EDITORIAL SEKCE SONARPRO
   ========================================================= */


/* =========================================================
   1. NEUTRALIZACE PŮVODNÍ SEKCE UVÍTACÍHO TEXTU SHOPTETU
   ========================================================= */

body.in-index .content-wrapper.homepage-box.welcome-wrapper {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body.in-index .content-wrapper.homepage-box.welcome-wrapper > .content-wrapper-in {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
}

body.in-index .content-wrapper.homepage-box.welcome-wrapper > .content-wrapper-in > .container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

body.in-index .content-wrapper.homepage-box.welcome-wrapper .welcome-wrapper,
body.in-index .content-wrapper.homepage-box.welcome-wrapper .welcome,
body.in-index .content-wrapper.homepage-box.welcome-wrapper .welcome__content,
body.in-index .content-wrapper.homepage-box.welcome-wrapper .welcome__left-panel {
    display: block;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body.in-index .content-wrapper.homepage-box.welcome-wrapper .welcome__left-panel {
    float: none;
}


/* =========================================================
   2. HLAVNÍ SEKCE
   ========================================================= */

.sonarpro-home-editorial {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 76px 24px 86px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(13, 65, 104, 0.025) 0,
            rgba(13, 65, 104, 0) 46%
        ),
        #F5F6F8;
    font-family: Roboto, sans-serif;
}

.sonarpro-home-editorial,
.sonarpro-home-editorial * {
    box-sizing: border-box;
}

.sonarpro-home-editorial__inner {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 0;
}


/* =========================================================
   3. HLAVIČKA SEKCE
   ========================================================= */

.sonarpro-home-editorial__header {
    width: 100%;
    max-width: 1030px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}


/* Původní ornament s lomítkem se již nezobrazuje */

.sonarpro-home-editorial__ornament {
    display: none;
}


/* Kicker s jemnými linkami po stranách */

body.in-index .sonarpro-home-editorial__kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    margin: 0 0 18px !important;
    padding: 0 !important;
    color: #BE202F !important;
    font-family: Roboto, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.055em !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

body.in-index .sonarpro-home-editorial__kicker::before,
body.in-index .sonarpro-home-editorial__kicker::after {
    content: "";
    display: block;
    flex: 0 0 170px;
    width: 170px;
    height: 1px;
    background: rgba(190, 32, 47, 0.24);
}


/* Hlavní nadpis H2 */

body.in-index .sonarpro-home-editorial__title {
    display: block;
    width: 100%;
    max-width: 1050px;
    margin: 0 auto !important;
    padding: 0 !important;
    color: #0D4168 !important;
    font-family: Roboto, sans-serif !important;
    font-size: clamp(40px, 4.15vw, 62px) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.025em !important;
    text-align: center !important;
    text-transform: none !important;
}


/* Krátká červená linka pod H2 */

.sonarpro-home-editorial__title-line {
    display: block;
    width: 64px;
    height: 3px;
    margin: 25px auto 23px;
    border-radius: 999px;
    background: #BE202F;
}


/* Hlavní úvodní odstavec */

body.in-index .sonarpro-home-editorial__lead {
    width: 100%;
    max-width: 940px;
    margin: 0 auto !important;
    padding: 0 !important;
    color: #243547 !important;
    font-family: Roboto, sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.68 !important;
    text-align: center !important;
}


/* =========================================================
   4. DVA TEXTOVÉ SLOUPCE
   ========================================================= */

.sonarpro-home-editorial__columns {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 1200px;
    margin: 54px auto 0;
    padding: 0 24px;
}


/* Svislá dělicí linka */

.sonarpro-home-editorial__columns::before {
    content: "";
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 50%;
    width: 1px;
    background: #d7dde3;
    transform: translateX(-0.5px);
}


/* Společné nastavení sloupců */

.sonarpro-home-editorial__column {
    display: block;
    min-width: 0;
    margin: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}


/* Levý sloupec */

.sonarpro-home-editorial__column:first-child {
	padding: 0 58px 0 150px;
}


/* Pravý sloupec – mírně užší textový prostor */

.sonarpro-home-editorial__column:last-child {
    padding: 0 150px 0 58px;
}


/* Krátká červená linka nad H3 */

.sonarpro-home-editorial__column-line {
    display: block;
    width: 43px;
    height: 3px;
    margin: 0 0 12px;
    border-radius: 999px;
    background: #BE202F;
}


/* Nadpisy H3 */

body.in-index .sonarpro-home-editorial__subtitle {
    display: block;
    margin: 0 0 15px !important;
    padding: 0 !important;
    color: #0D4168 !important;
    font-family: Roboto, sans-serif !important;
    font-size: 27px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    text-align: left !important;
    text-transform: none !important;
}


/* Text sloupců */

body.in-index .sonarpro-home-editorial__text {
    margin: 0 !important;
    padding: 0 !important;
    color: #263747 !important;
    font-family: Roboto, sans-serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.72 !important;
    text-align: left !important;
}


/* Zrušení případných pseudo-prvků šablony */

body.in-index .sonarpro-home-editorial__title::before,
body.in-index .sonarpro-home-editorial__title::after,
body.in-index .sonarpro-home-editorial__subtitle::before,
body.in-index .sonarpro-home-editorial__subtitle::after {
    display: none !important;
    content: none !important;
}
/* Odkazy v editorial sekci */

body.in-index .sonarpro-home-editorial a {
    color: inherit;
    font-weight: inherit;
    text-decoration-line: underline;
    text-decoration-color: #BE202F;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s ease;
}

body.in-index .sonarpro-home-editorial a:hover,
body.in-index .sonarpro-home-editorial a:focus {
    color: inherit;
    text-decoration-color: #0D4168;
}


/* =========================================================
   5. MENŠÍ DESKTOPY A TABLETY NA ŠÍŘKU
   ========================================================= */

@media (max-width: 1199px) {

    body.in-index .sonarpro-home-editorial__kicker::before,
    body.in-index .sonarpro-home-editorial__kicker::after {
        flex-basis: 110px;
        width: 110px;
    }

    sonarpro-home-editorial__columns {
            max-width: 1040px;
            padding-right: 24px;
            padding-left: 24px;
        }
    
        .sonarpro-home-editorial__column:first-child {
            padding-right: 44px;
            padding-left: 0;
        }
    
        .sonarpro-home-editorial__column:last-child {
            padding-right: 0;
            padding-left: 44px;
        }
}


/* =========================================================
   6. TABLETY
   ========================================================= */

@media (max-width: 991px) {

    .sonarpro-home-editorial {
        padding: 64px 24px 72px;
    }

    body.in-index .sonarpro-home-editorial__kicker::before,
    body.in-index .sonarpro-home-editorial__kicker::after {
        flex-basis: 70px;
        width: 70px;
    }

    body.in-index .sonarpro-home-editorial__title {
        font-size: 44px !important;
    }

    body.in-index .sonarpro-home-editorial__lead {
        max-width: 820px;
        font-size: 18px !important;
    }

    .sonarpro-home-editorial__columns {
        margin-top: 48px;
        padding-right: 18px;
        padding-left: 18px;
    }

    .sonarpro-home-editorial__column:first-child {
        padding-right: 38px;
        padding-left: 0;
    }

    .sonarpro-home-editorial__column:last-child {
        padding-right: 8px;
        padding-left: 38px;
    }

    body.in-index .sonarpro-home-editorial__subtitle {
        font-size: 24px !important;
    }

    body.in-index .sonarpro-home-editorial__text {
        font-size: 16px !important;
    }
}


/* =========================================================
   7. MOBIL
   ========================================================= */

@media (max-width: 767px) {

    .sonarpro-home-editorial {
        padding: 50px 18px 58px;
    }

    body.in-index .sonarpro-home-editorial__kicker {
        gap: 10px;
        margin-bottom: 14px !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
        letter-spacing: 0.04em !important;
    }

    body.in-index .sonarpro-home-editorial__kicker::before,
    body.in-index .sonarpro-home-editorial__kicker::after {
        flex-basis: 42px;
        width: 42px;
    }

    body.in-index .sonarpro-home-editorial__title {
        font-size: 34px !important;
        line-height: 1.13 !important;
    }

    .sonarpro-home-editorial__title-line {
        width: 48px;
        height: 2px;
        margin: 20px auto 18px;
    }

    body.in-index .sonarpro-home-editorial__lead {
        max-width: 620px;
        font-size: 17px !important;
        line-height: 1.62 !important;
    }

    .sonarpro-home-editorial__columns {
        display: block;
        max-width: 640px;
        margin-top: 40px;
        padding: 0;
    }

    .sonarpro-home-editorial__columns::before {
        display: none;
    }

    .sonarpro-home-editorial__column:first-child,
    .sonarpro-home-editorial__column:last-child {
        padding: 0;
    }

    .sonarpro-home-editorial__column + .sonarpro-home-editorial__column {
        position: relative;
        margin-top: 35px;
        padding-top: 35px;
    }

    .sonarpro-home-editorial__column + .sonarpro-home-editorial__column::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: #d7dde3;
    }

    .sonarpro-home-editorial__column-line {
        width: 38px;
        height: 2px;
        margin-bottom: 10px;
    }

    body.in-index .sonarpro-home-editorial__subtitle {
        margin-bottom: 11px !important;
        font-size: 23px !important;
        line-height: 1.27 !important;
    }

    body.in-index .sonarpro-home-editorial__text {
        font-size: 16px !important;
        line-height: 1.66 !important;
    }
}


/* =========================================================
   8. MENŠÍ MOBILY
   ========================================================= */

@media (max-width: 430px) {

    .sonarpro-home-editorial {
        padding-right: 15px;
        padding-left: 15px;
    }

    body.in-index .sonarpro-home-editorial__kicker {
        margin-bottom: 12px !important;
    }

    body.in-index .sonarpro-home-editorial__kicker::before,
    body.in-index .sonarpro-home-editorial__kicker::after {
        display: none;
    }

    body.in-index .sonarpro-home-editorial__title {
        font-size: 30px !important;
    }

    body.in-index .sonarpro-home-editorial__lead {
        font-size: 16px !important;
    }

    body.in-index .sonarpro-home-editorial__subtitle {
        font-size: 21px !important;
    }

    body.in-index .sonarpro-home-editorial__text {
        font-size: 15.5px !important;
    }
}

/* =====================================================
   VIP SEKCE SONARPRO – HORNÍ INFORMAČNÍ LIŠTA
   ===================================================== */

.top-navigation-menu-item-vip {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	margin: 5px 7px;
	padding: 0;
}

/* Samotné VIP tlačítko */
.top-navigation-menu-item-vip > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;

	min-height: 32px;
	padding: 6px 14px;

	color: #f1ca5c !important;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.15px;
	text-decoration: none !important;
	white-space: nowrap;

	background:
		linear-gradient(
			135deg,
			#071522 0%,
			#0d2940 48%,
			#081823 100%
		);

	border: 1px solid #c99b2e;
	border-radius: 5px;

	box-shadow:
		0 2px 5px rgba(0, 0, 0, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		inset 0 0 0 1px rgba(255, 215, 105, 0.08);

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

/* Zlatá Font Awesome korunka – desktop i mobil */
.top-navigation-menu-item-vip > a::before {
	content: "\f521" !important;

	display: inline-block !important;
	flex: 0 0 auto;

	margin-right: 5px;

	font-family:
		"Font Awesome 6 Free",
		"Font Awesome 5 Free" !important;
	font-size: 13px;
	font-style: normal;
	font-weight: 900 !important;
	font-variant: normal;
	line-height: 1;
	text-rendering: auto;

	color: #e2b33f;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	transform: translateY(-1px);
}

/* Jemný zlatý odlesk */
.top-navigation-menu-item-vip > a::after {
	content: "";
	position: absolute;
	top: 1px;
	left: 8%;
	width: 84%;
	height: 42%;

	border-radius: 4px 4px 8px 8px;

	background: linear-gradient(
		to bottom,
		rgba(255, 224, 133, 0.12),
		rgba(255, 224, 133, 0)
	);

	pointer-events: none;
}

/* Hover a ovládání klávesnicí */
.top-navigation-menu-item-vip > a:hover,
.top-navigation-menu-item-vip > a:focus {
	color: #fff0b6 !important;
	text-decoration: none !important;

	background:
		linear-gradient(
			135deg,
			#0b2133 0%,
			#123b59 48%,
			#0a2232 100%
		);

	border-color: #e0b747;

	box-shadow:
		0 4px 9px rgba(0, 0, 0, 0.24),
		0 0 0 1px rgba(224, 183, 71, 0.14),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);

	transform: translateY(-1px);
}

/* Kliknutí */
.top-navigation-menu-item-vip > a:active {
	transform: translateY(0);

	box-shadow:
		0 2px 4px rgba(0, 0, 0, 0.2),
		inset 0 2px 4px rgba(0, 0, 0, 0.18);
}

/* Odstranění případného podtržení ze šablony */
.top-navigation-menu-item-vip > a,
.top-navigation-menu-item-vip > a:hover,
.top-navigation-menu-item-vip > a:focus {
	border-bottom-style: solid;
}

/* =====================================================
   MOBILNÍ VIP TLAČÍTKO
   ===================================================== */

/* Mobilní kopie je na desktopu vždy skrytá */
.navigation-in-bottom .sonarpro-vip-mobile-wrap {
	display: none !important;
}

@media (max-width: 767px) {

	.top-navigation-menu-item-vip {
		margin-top: 4px;
		margin-bottom: 4px;
	}

	.top-navigation-menu-item-vip > a {
		min-height: 30px;
		padding: 5px 11px;
		font-size: 12px;
	}

	.navigation-in-bottom .sonarpro-vip-mobile-wrap {
		display: flex !important;
		width: 100%;
		margin: 0 0 14px;
		padding: 0;
	}

	.navigation-in-bottom .sonarpro-vip-mobile-wrap > a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;

		width: 100%;
		min-height: 42px;
		padding: 9px 14px;

		font-size: 13px;
		text-align: center;
	}
}
.btn.btn-primary, a.btn.btn-primary, .btn.btn-primary, a.btn.btn-primary {
	background-color: #5F8012;
	border-color: #5F8012;
}
.btn.btn-primary:hover, a.btn.btn-primary:hover, .btn.btn-primary:hover, a.btn.btn-primary:hover {
	background-color: #BFC23B;
	border-color: #BFC23B;
}
.top-category-block .menu-level-3 {
	display: none;
}
.top-category-block .menu-content .top-category-more {
	display: none;
}
.welcome__content h2 {
	color: #bf2030;
	font-size: 26px;
	margin-bottom: 7px;
	margin-top: 30px;
}
.p-short-description p {
	color: #0f0f0f;
}
.p-short-description {
	color: #0f0f0f;
	line-height: 1.5;
	font-size: 14px;
}
.swiper-arrow-content {
	background-color: #0F406A;
}
.swiper-arrow-content .icon-svg {
	color: #fff;
}
.shoptet-hybrid-text h2 {
	color: #bf2030;
}
#footer.is-white .footer-bottom-bg::before {
	background-color: #0D3F69;
}
.box.box-categories > h3, .box.box-categories > h4 {
	background-color: #0E406A;
}
.category-header .listSorting__controls button.listSorting__control.listSorting__control--current {
	background-color: #5F8012;
	color: #ffffff;
}
.category-header .listSorting__controls button.listSorting__control:hover {
	color: #BF2030;
}
.category-header .listSorting__controls button.listSorting__control--current:hover {
	color: #fff !important;
}
.banners-top-block .banner-wrapper {
	padding: 4px 4px;
	margin: 0;
	width: 100%;
	max-width: 100%;
	flex: unset;
}
.category-hp{
    margin:60px 0;
}

.homepage-group-title{
    text-align:center;
    margin-bottom:35px;
    font-size:32px;
    font-weight:700;
}

/* ===== GRID ===== */
.hp-subcategories{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:22px;

    list-style:none;
    padding:0;
    margin:0;

    align-items:stretch;
}

/* ===== LI FIX ===== */
.hp-subcategories li{
    min-width:0;
}

/* ===== CARD ===== */
.hp-subcategories a{
    display:flex;
    flex-direction:column;

    height:100%;
    min-width:0;

    background:#fff;
    border:1px solid #ececec;
    border-radius:16px;

    overflow:hidden;
    text-decoration:none;

    box-shadow:0 5px 15px rgba(0,0,0,.04);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

/* hover efekt */
.hp-subcategories a:hover{
    transform:translateY(-6px);
    border-color:#0B6CF4;

    box-shadow:0 12px 30px rgba(0,0,0,.10);
}

/* ===== IMAGE ===== */
.hp-subcategories .image{
    height:150px;

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

    background:#fff;

    padding:15px;

    overflow:hidden;
}

.hp-subcategories img{
    width:100%;
    height:100%;
    max-width:100%;

    object-fit:contain;
    display:block;

    transition:transform .35s ease;
}

.hp-subcategories a:hover img{
    transform:scale(1.06);
}

/* ===== TEXT ===== */
.hp-subcategories h5{
    margin:0;
    padding:18px;
    text-align:center;
    font-size:16px;
    font-weight:700;
    color:#222;
    line-height:1.2;
    flex-grow:1;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:3em;
    text-decoration: underline;
}
/* Kartičky doporučujeme pro */


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

    .hp-subcategories{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:12px;
    }

    .hp-subcategories .image{
        height:110px;
        padding:10px;
    }

    .hp-subcategories h5{
        font-size:14px;
        padding:12px;
        min-height:2.6em;
    }
.welcome .h1, .welcome h1 {
	font-size: 26px;
}
    .welcome__content h2 {
	font-size: 24px;
}
}

/* ===== EXTRA SMALL ===== */
@media (max-width:480px){

    .hp-subcategories{
        gap:10px;
    }

    .hp-subcategories .image{
        height:95px;
    }
}
/* ===== NEW PRODUCT DETAIL LAYOUT ===== */
/* Vynutíme, aby Shoptet textový blok zabíral 100 % šířky a nativní parametry schováme */
    .basic-description {
        width: 100% !important;
        float: none !important;
        display: block !important;
    }
    .extended-description {
        display: none !important;
    }

    /* Náš hybridní kontejner */
    .shoptet-hybrid-container {
        display: block;
        width: 100%;
    }
    .shoptet-hybrid-text {
        display: block;
    }
    .shoptet-hybrid-text .fill-img img {
        max-width: 450px;
    }    
    

/* =========================================================
   PRODUKTOVÝ DETAIL – POŘADÍ BLOKŮ NA MOBILU
   ========================================================= */

@media (max-width: 767px) {

    .shoptet-hybrid-container {
        display: flex;
        flex-direction: column;
    }

    /*
     * Na mobilu zrušíme pouze layoutový obal .shoptet-hybrid-text,
     * aby bylo možné jeho jednotlivé části seřadit společně
     * s blokem technických parametrů.
     */
    .shoptet-hybrid-text {
        display: contents;
    }

    /* 1. Pohled z praxe SONARPRO */
    .sonarpro-view {
        order: 1;
    }

    /*
     * 2. Praktická doporučení SONARPRO
     *    - výroba napájecího kabelu
     *    - doporučené baterie, pokud jsou u produktu uvedeny
     */
    .sonarpro-product-support {
        order: 2;
    }

    /* 3. Technické parametry */
    .shoptet-hybrid-table {
        order: 3;
    }

    /* 4. Původní popis distributora / Bohemia Marine */
    .sonarpro-distributor-description {
        order: 4;
    }
}
  .dokumenty-prilohy {
    margin-top: 48px;
    padding: 28px;
    border-radius: 18px;
    background: #f7f7f5;
  }

  .dokumenty-prilohy-grid {
    display: grid;
    gap: 16px;
    margin-top: 20px;
  }

  .dokumenty-priloha-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    border: 1px solid #e2e2dc;
    border-radius: 16px;
    background: #ffffff;
    color: inherit;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  }

  .dokumenty-priloha-card:hover {
    transform: translateY(-2px);
    border-color: #c9c9bf;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
  }

  .dokumenty-priloha-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: #BF1F2F;
    color: #ffffff;
    font-size: 22px;
    line-height: 1;
  }

  .dokumenty-priloha-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
  }

  .dokumenty-priloha-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
  }

  .dokumenty-priloha-text {
    font-size: 14px;
    line-height: 1.45;
    color: #666666;
  }

  .dokumenty-priloha-arrow {
    margin-left: auto;
    font-size: 24px;
    line-height: 1;
    color: #777777;
    transition: transform 0.18s ease;
  }

  .dokumenty-priloha-card:hover .dokumenty-priloha-arrow {
    transform: translateX(4px);
  }

  @media (max-width: 640px) {
    .dokumenty-prilohy {
      padding: 20px;
      border-radius: 14px;
    }

    .dokumenty-priloha-card {
      align-items: flex-start;
      padding: 18px;
      gap: 14px;
    }

    .dokumenty-priloha-icon {
      width: 46px;
      height: 46px;
      border-radius: 12px;
      font-size: 19px;
    }

    .dokumenty-priloha-title {
      font-size: 16px;
    }

    .dokumenty-priloha-arrow {
      display: none;
    }
  }
.top-navigation-menu-item-vip a {
	font-size: 16px !important;
	color: red;
	text-decoration: underline;
}
#login .password-helper a[data-testid="signup"],
#login .password-helper a[href="/registrace/"] {
    display: none !important;
}
/* Zásady zpracování osobních údajů CSS Start */

.dokumenty,
.dokumenty * {
  box-sizing: border-box;
}

.dokumenty {
  max-width: 980px;
  margin: 0 auto;
  color: #222833;
}

.dokumenty-title {
  margin: 0 0 8px;
  color: #0B416A;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.03em;
}

.dokumenty > .dokumenty-p:first-of-type {
  margin-top: 0;
  color: #7c7e8f;
  font-size: 17px;
  font-weight: 600;
}

.dokumenty-heading {
  position: relative;
  margin: 42px 0 18px;
  padding-top: 18px;
  color: #0B416A;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.dokumenty-heading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 4px;
  border-radius: 999px;
  background: #BE2734;
}

.dokumenty-p {
  margin: 0 0 16px;
  color: #222833;
  font-size: 16px;
  line-height: 1.75;
}

.dokumenty a {
  color: #0B416A;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.dokumenty a:hover {
  color: #BE2734;
}

.dokumenty-ul {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.dokumenty-ul li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 28px;
  color: #222833;
  font-size: 16px;
  line-height: 1.65;
}

.dokumenty-ul li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #BE2734;
}

.dokumenty-table-wrap {
  width: 100%;
  margin: 22px 0 30px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(11, 65, 106, 0.14);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(11, 65, 106, 0.06);
}

.dokumenty-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  background: #ffffff;
}

.dokumenty-table th,
.dokumenty-table td {
  padding: 15px 16px;
  border-bottom: 1px solid rgba(11, 65, 106, 0.12);
  border-right: 1px solid rgba(11, 65, 106, 0.08);
  text-align: left;
  vertical-align: top;
  font-size: 14px;
  line-height: 1.55;
}

.dokumenty-table th:last-child,
.dokumenty-table td:last-child {
  border-right: 0;
}

.dokumenty-table tr:last-child td {
  border-bottom: 0;
}

.dokumenty-table th {
  background: #0B416A;
  color: #ffffff;
  font-weight: 800;
}

.dokumenty-table td:first-child {
  color: #0B416A;
  font-weight: 700;
}

@media (max-width: 768px) {
  .dokumenty {
    max-width: 100%;
  }

  .dokumenty-heading {
    margin-top: 34px;
  }

  .dokumenty-p,
  .dokumenty-ul li {
    font-size: 15px;
    line-height: 1.7;
  }

  .dokumenty-table-wrap {
    border-radius: 14px;
  }

  .dokumenty-table {
    min-width: 720px;
  }

  .dokumenty-table th,
  .dokumenty-table td {
    padding: 13px 14px;
    font-size: 13px;
  }
}

/* Zásady zpracování osobních údajů CSS End */
/* =========================================================
   PRODUKTOVÝ DETAIL SONARPRO – DOPORUČENÍ, KABEL A BATERIE
   ========================================================= */

.sonarpro-view,
.sonarpro-product-support,
.sonarpro-view *,
.sonarpro-product-support * {
    box-sizing: border-box;
}

/* Pohled z praxe */

.sonarpro-view {
    display: block;
}

.sonarpro-section-heading {
    margin-bottom: 18px;
}

.sonarpro-section-kicker,
.sonarpro-card-kicker {
    display: block;
    margin-bottom: 7px;
    color: #BE2734;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.sonarpro-section-heading h2 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    color: #BF2030;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.25;
}

.sonarpro-view-content p:first-child {
    margin-top: 0;
}

.sonarpro-view-content p:last-child {
    margin-bottom: 0;
}

/*
 * Nové praktické bloky začnou až pod obtékanou tabulkou.
 * Díky tomu mají na PC k dispozici celou šířku popisu.
 */
.sonarpro-product-support {
    clear: both;
    width: 100%;
    margin-top: 42px;
    margin-bottom: 42px;
}

/* Společné nadpisy */

.sonarpro-product-support h3 {
    margin-top: 0 !important;
    color: #0B416A;
    font-weight: 800;
    line-height: 1.3;
}

.sonarpro-product-support h4 {
    color: #222833;
}
/* =========================================================
   Technické parametry na konci produktového popisu 
   ========================================================= */
.shoptet-hybrid-table {
    float: none;
    clear: both;
    width: 100%;
    max-width: none;
    margin: 48px 0 0;
    padding: 0;
    background: transparent;
}

.shoptet-hybrid-table h3 {
    position: relative;
    margin: 0 0 22px !important;
    padding: 16px 0 0;
    border-bottom: 0;
    color: #0B416A;
    font-size: 24px !important;
    font-weight: 800;
    line-height: 1.3;
    text-align: left;
}

.shoptet-hybrid-table h3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 62px;
    height: 3px;
    border-radius: 999px;
    background: #BE2734;
}

.sonarpro-parameters-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 18px;
    width: 100%;
}

.sonarpro-parameters-table {
    width: 100%;
    margin: 0 !important;
    border-collapse: collapse;
    table-layout: fixed;
    background: #ffffff;
    font-size: 13px;
}

.sonarpro-parameters-table th,
.sonarpro-parameters-table td {
    padding: 11px 12px !important;
    vertical-align: top;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.sonarpro-parameters-table th {
    width: 42%;
    color: #222833;
    font-weight: 700;
}

.sonarpro-parameters-table td {
    width: 58%;
    color: #50545c;
}

.sonarpro-parameters-table a {
    color: #0B416A;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sonarpro-parameters-table a:hover {
    color: #BE2734;
}

@media (max-width: 767px) {
    .shoptet-hybrid-table {
        margin-top: 10px;
        padding: 0;
    }

    .shoptet-hybrid-table h3 {
        font-size: 22px !important;
    }

    .sonarpro-parameters-grid {
        grid-template-columns: 1fr;
        gap: 0;
        overflow: hidden;
        border: 1px solid #dddddd;
        border-radius: 12px;
        background: #ffffff;
    }

    .sonarpro-parameters-table {
        width: 100%;
        margin: 0 !important;
        border: 0 !important;
        table-layout: auto;
        font-size: 13px;
    }

    .sonarpro-parameters-table:first-child {
        border-bottom: 0 !important;
    }

    .sonarpro-parameters-table:last-child {
        margin-top: -1px !important;
    }

    .sonarpro-parameters-table th {
        width: 42%;
    }

    .sonarpro-parameters-table td {
        width: 58%;
    }

    .sonarpro-parameters-table th,
    .sonarpro-parameters-table td {
        border-color: #dddddd !important;
    }
}
/* Oprava spodních linek v technických parametrech */

.sonarpro-parameters-table tbody tr:last-child th,
.sonarpro-parameters-table tbody tr:last-child td {
    border-bottom: 1px solid #dddddd !important;
}

@media (max-width: 767px) {
    .sonarpro-parameters-table:last-child tbody tr:last-child th,
    .sonarpro-parameters-table:last-child tbody tr:last-child td {
        border-bottom: 0 !important;
    }
}
.sonarpro-cable-icon i {
    font-size: 28px;
    line-height: 1;
}
@media (max-width: 640px) {
    .sonarpro-cable-icon i {
        font-size: 24px;
    }
}
/* ==========================================================
   SONARPRO – ROZKLIKÁVACÍ GALERIE OBRÁZKŮ
   ========================================================== */

.sonarpro-image-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 15px;
    margin: 20px 0;
}

.sonarpro-image-gallery-item {
    display: flex;
    flex: 0 1 200px;
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;
    text-align: center;
}

.sonarpro-image-gallery-item > a {
    display: block;
    width: 100%;
    line-height: 0;
    text-decoration: none;
}

.sonarpro-image-gallery-item img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.sonarpro-image-gallery-caption {
    display: block;
    width: 100%;
    margin-top: 7px;
    padding: 0 4px;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 1.4;
    color: #444;
    text-align: center;
}

/* Jemné zvýraznění rozklikatelného obrázku */
.sonarpro-image-gallery-item > a img {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.sonarpro-image-gallery-item > a:hover img,
.sonarpro-image-gallery-item > a:focus img {
    opacity: 0.9;
    transform: scale(1.015);
}

/* Tablet */
@media (max-width: 768px) {
    .sonarpro-image-gallery {
        gap: 12px;
    }

    .sonarpro-image-gallery-item {
        flex-basis: calc(33.333% - 8px);
    }
}

/* Mobil – dva obrázky na řádku */
@media (max-width: 480px) {
    .sonarpro-image-gallery {
        gap: 12px;
    }

    .sonarpro-image-gallery-item {
        flex-basis: calc(50% - 6px);
    }

    .sonarpro-image-gallery-caption {
        font-size: 11px;
        line-height: 1.35;
    }
}

/* Velmi úzké displeje – jeden obrázek na řádku */
@media (max-width: 340px) {
    .sonarpro-image-gallery-item {
        flex-basis: 100%;
        max-width: 240px;
    }
}
   

/* =========================================================
   NAPÁJECÍ KABEL
   ========================================================= */

.sonarpro-cable-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;

    padding: 25px;
    border: 1px solid rgba(11, 65, 106, 0.14);
    border-left: 4px solid #BE2734;
    border-radius: 16px;
    background: #ffffff;

    box-shadow: 0 9px 28px rgba(11, 65, 106, 0.07);
}

.sonarpro-cable-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;
    border-radius: 14px;

    background: rgba(11, 65, 106, 0.09);
    color: #0B416A;

    font-size: 24px;
    line-height: 1;
}

.sonarpro-cable-content {
    min-width: 0;
}

.sonarpro-cable-content h3 {
    margin-bottom: 8px !important;
    font-size: 21px;
}

.sonarpro-cable-content p {
    max-width: 760px;
    margin: 0;
    color: #50545c;
    font-size: 14px;
    line-height: 1.65;
}

.sonarpro-cable-options {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin: 14px 0 0;
    padding: 0;

    list-style: none;
}

.sonarpro-cable-options li {
    position: relative;
    margin: 0;
    padding: 6px 10px 6px 26px;

    border-radius: 999px;
    background: #f3f5f6;

    color: #37404a;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}

.sonarpro-cable-options li::before {
    content: "\f00c";
    position: absolute;
    top: 50%;
    left: 10px;

    color: #5F8012;
    font-family: FontAwesome;
    font-size: 11px;

    transform: translateY(-50%);
}

.sonarpro-cable-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;

    min-width: 205px;
}

.sonarpro-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    width: 100%;
    min-height: 44px;
    padding: 11px 17px;

    border: 1px solid #5F8012;
    border-radius: 8px;
    background: #5F8012;

    color: #ffffff !important;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    text-decoration: none !important;

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

.sonarpro-button:hover,
.sonarpro-button:focus {
    border-color: #BFC23B;
    background: #BFC23B;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.sonarpro-action-note {
    color: #777c83;
    font-size: 11px;
    line-height: 1.35;
    text-align: center;
}

/* =========================================================
   DOPORUČENÉ BATERIE
   ========================================================= */

.sonarpro-battery-section {
    margin-top: 24px;
    padding: 28px;

    border-radius: 18px;
    background: #f6f7f7;
}

.sonarpro-battery-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;

    margin-bottom: 20px;
}

.sonarpro-battery-header h3 {
    margin-bottom: 0 !important;
    font-size: 23px;
}

.sonarpro-battery-header > p {
    max-width: 410px;
    margin: 0;

    color: #686d74;
    font-size: 14px;
    line-height: 1.55;
    text-align: right;
}

.sonarpro-battery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}

.sonarpro-battery-card {
    display: flex;
    flex-direction: column;

    min-width: 0;
    padding: 21px;

    border: 1px solid #e0e3e5;
    border-radius: 14px;
    background: #ffffff;

    box-shadow: 0 5px 18px rgba(11, 65, 106, 0.045);

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

.sonarpro-battery-card:hover {
    border-color: rgba(11, 65, 106, 0.28);
    box-shadow: 0 11px 25px rgba(11, 65, 106, 0.09);
    transform: translateY(-2px);
}

.sonarpro-battery-card--reserve {
    border-top: 3px solid #0B416A;
}

.sonarpro-battery-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 15px;
}

.sonarpro-battery-label {
    display: inline-flex;
    align-items: center;

    min-height: 26px;
    padding: 5px 9px;

    border-radius: 999px;
    background: rgba(95, 128, 18, 0.11);

    color: #526f0e;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
}

.sonarpro-battery-card--reserve .sonarpro-battery-label {
    background: rgba(11, 65, 106, 0.1);
    color: #0B416A;
}

.sonarpro-battery-capacity {
    color: #0B416A;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.sonarpro-battery-card h4 {
    margin: 0 0 9px !important;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
}

.sonarpro-battery-use {
    flex-grow: 1;

    margin: 0 0 17px;
    color: #62676e;
    font-size: 14px;
    line-height: 1.55;
}

.sonarpro-battery-duration {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-bottom: 17px;
    padding: 12px;

    border-radius: 10px;
    background: #f4f5f5;

    color: #424850;
    font-size: 13px;
    line-height: 1.45;
}

.sonarpro-battery-duration i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: #5F8012;
    font-size: 16px;
}

.sonarpro-battery-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    margin-top: auto;
    padding-top: 14px;

    border-top: 1px solid #e5e6e7;

    color: #0B416A !important;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    text-decoration: none !important;
}

.sonarpro-battery-link i {
    transition: transform 0.2s ease;
}

.sonarpro-battery-link:hover {
    color: #BE2734 !important;
}

.sonarpro-battery-link:hover i {
    transform: translateX(4px);
}

.sonarpro-battery-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    margin: 18px 0 0;
    padding-top: 16px;

    border-top: 1px solid rgba(11, 65, 106, 0.11);

    color: #71767c;
    font-size: 12px;
    line-height: 1.55;
}

.sonarpro-battery-disclaimer i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: #0B416A;
    font-size: 15px;
}

/* =========================================================
   PŮVODNÍ POPIS DISTRIBUTORA
   ========================================================= */

.sonarpro-distributor-description {
    clear: both;
    margin-top: 42px;
}

.sonarpro-distributor-description > h3:first-child {
    position: relative;

    margin-top: 0 !important;
    margin-bottom: 24px !important;
    padding-top: 16px;

    color: #0B416A;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;
}

.sonarpro-distributor-description > h3:first-child::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 62px;
    height: 3px;
    border-radius: 999px;
    background: #BE2734;
}

/* =========================================================
   TABLETY
   ========================================================= */

@media (max-width: 991px) {

    .sonarpro-cable-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .sonarpro-cable-action {
        grid-column: 1 / -1;
        align-items: flex-start;

        width: 100%;
        min-width: 0;
        padding-left: 80px;
    }

    .sonarpro-button {
        width: auto;
    }

    .sonarpro-action-note {
        text-align: left;
    }

    .sonarpro-battery-header {
        display: block;
    }

    .sonarpro-battery-header > p {
        max-width: none;
        margin-top: 9px;
        text-align: left;
    }
}

/* =========================================================
   MOBILY
   ========================================================= */

@media (max-width: 640px) {

    .sonarpro-section-heading h2 {
        font-size: 23px;
    }

    .sonarpro-product-support {
        margin-top: 32px;
        margin-bottom: 34px;
    }

    .sonarpro-cable-card {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;

        padding: 20px;
        border-left-width: 3px;
        border-radius: 14px;
    }

    .sonarpro-cable-icon {
        width: 50px;
        height: 50px;
        border-radius: 12px;
        font-size: 21px;
    }

    .sonarpro-cable-content h3 {
        font-size: 19px;
    }

    .sonarpro-cable-options {
        gap: 6px;
    }

    .sonarpro-cable-action {
        display: block;
        width: 100%;
        padding-left: 0;
    }

    .sonarpro-button {
        width: 100%;
    }

    .sonarpro-action-note {
        display: block;
        margin-top: 7px;
        text-align: center;
    }

    .sonarpro-battery-section {
        margin-top: 18px;
        padding: 20px;
        border-radius: 14px;
    }

    .sonarpro-battery-header {
        margin-bottom: 17px;
    }

    .sonarpro-battery-header h3 {
        font-size: 21px;
    }

    .sonarpro-battery-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .sonarpro-battery-card {
        padding: 18px;
    }

    .sonarpro-battery-disclaimer {
        font-size: 11px;
    }

    .sonarpro-distributor-description {
        margin-top: 34px;
    }

    .sonarpro-distributor-description > h3:first-child {
        font-size: 22px;
    }
}
/* =========================================================
   VÝROBA KABELU NA ZAKÁZKU
   ========================================================= */
.sp-cable-service {
    --sp-blue: #0d4168;
    --sp-blue-dark: #082f4d;
    --sp-red: #be202f;
    --sp-text: #323642;
    --sp-muted: #6f7480;
    --sp-border: #dfe5ea;
    --sp-light: #f5f8fa;
    --sp-red-light: #fff5f6;
    --sp-shadow: 0 10px 30px rgba(13, 65, 104, 0.08);

    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    color: var(--sp-text);
    font-size: 16px;
    line-height: 1.7;
}

.sp-cable-service,
.sp-cable-service * {
    box-sizing: border-box;
}

.sp-cable-service img {
    display: block;
    max-width: 100%;
    height: auto;
}

.sp-cable-service a {
    color: inherit;
    text-decoration: none;
}

.sp-cable-service h2,
.sp-cable-service h3,
.sp-cable-service h4,
.sp-cable-service p {
    margin-top: 0;
}

.sp-cable-service h2,
.sp-cable-service h3,
.sp-cable-service h4 {
    color: var(--sp-blue);
    line-height: 1.25;
}

.sp-cable-service h2 {
    margin-bottom: 20px;
    font-size: 26px;
    font-weight: 800;
}

.sp-cable-service h3 {
    margin-bottom: 14px;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
}

.sp-cable-service h4 {
    margin-bottom: 12px;
    font-size: 21px;
    font-weight: 800;
}

.sp-cable-service p:last-child {
    margin-bottom: 0;
}

.sp-cable-service .sp-kicker {
    display: block;
    margin-bottom: 10px;
    color: var(--sp-red);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sp-cable-service .sp-lead {
    max-width: 850px;
    margin-bottom: 0;
    color: #4f5560;
    font-size: 18px;
    line-height: 1.75;
}

.sp-cable-service .sp-section {
    margin-top: 66px;
}
                                                                                                                                                                                                                  
.sp-cable-service .sp-section-heading {
    position: relative;
    margin-bottom: 30px;
    padding-bottom: 15px;
}

.sp-cable-service .sp-section-heading::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 72px;
    height: 3px;
    border-radius: 3px;
    background: var(--sp-red);
}

/* ÚVOD */

.sp-cable-service .sp-hero {
    overflow: hidden;
    padding: clamp(28px, 5vw, 58px);
    border: 1px solid var(--sp-border);
    border-radius: 20px;
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(13, 65, 104, 0.08),
            transparent 32%
        ),
        linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: var(--sp-shadow);
}

.sp-cable-service .sp-main-alert {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-top: 28px;
    padding: 18px 20px;
    border: 1px solid rgba(190, 32, 47, 0.3);
    border-left: 5px solid var(--sp-red);
    border-radius: 12px;
    background: var(--sp-red-light);
}

.sp-cable-service .sp-main-alert-icon {
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--sp-red);
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}

.sp-cable-service .sp-main-alert strong {
    display: block;
    margin-bottom: 3px;
    color: var(--sp-red);
    font-size: 18px;
}

.sp-cable-service .sp-main-alert p {
    margin: 0;
}

/* VARIANTY */

.sp-cable-service .sp-variant-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

.sp-cable-service .sp-variant-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--sp-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--sp-shadow);
}

.sp-cable-service .sp-variant-image {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border-bottom: 1px solid var(--sp-border);
    background: #f6f8fa;
    cursor: zoom-in;
}

.sp-cable-service .sp-variant-image img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 14px;
    object-fit: contain;
    object-position: center;
    transition: transform 0.25s ease;
}

.sp-cable-service .sp-variant-image:hover img {
    transform: scale(1.025);
}

.sp-cable-service .sp-image-zoom {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    padding: 6px 11px;
    border-radius: 20px;
    background: rgba(13, 65, 104, 0.92);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    pointer-events: none;
}

.sp-cable-service .sp-variant-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    padding: 25px;
}

.sp-cable-service .sp-variant-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 14px;
    border-radius: 8px;
    background: var(--sp-blue);
    color: #fff;
    font-weight: 800;
    line-height: 1;
}

.sp-cable-service .sp-variant-body h4 {
    margin-bottom: 12px;
    font-size: 23px;
}

.sp-cable-service .sp-variant-description {
    margin-bottom: 20px;
}

.sp-cable-service .sp-tech-note {
    margin-bottom: 20px;
    padding: 10px 13px;
    border: 1px dashed #aebdca;
    border-radius: 8px;
    background: var(--sp-light);
    color: var(--sp-blue);
    font-size: 14px;
    font-weight: 700;
}

.sp-cable-service .sp-includes {
    margin-top: 10px;
    padding-top: 19px;
    border-top: 1px solid var(--sp-border);
}

.sp-cable-service .sp-includes-title {
    display: block;
    margin-bottom: 11px;
    color: var(--sp-blue);
    font-weight: 800;
}

.sp-cable-service .sp-check-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-cable-service .sp-check-list li {
    position: relative;
    margin: 8px 0;
    padding-left: 27px;
}

.sp-cable-service .sp-check-list li::before {
    content: "?";
    position: absolute;
    top: 4px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--sp-red);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}
.sp-cable-service .sp-variant-cta {
    margin-top: 30px;
    text-align: center;
}

.sp-cable-service .sp-variant-cta p {
    margin: 0;
}

@media (max-width: 680px) {
    .sp-cable-service .sp-variant-cta {
        margin-top: 24px;
    }
}

/* POSTUP KOMPLETACE */

.sp-cable-service .sp-process {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    counter-reset: sp-process;
}

.sp-cable-service .sp-process-step {
    position: relative;
    min-height: 180px;
    padding: 24px 22px 22px 76px;
    border: 1px solid var(--sp-border);
    border-radius: 14px;
    background: #fff;
    counter-increment: sp-process;
}

.sp-cable-service .sp-process-step::before {
    content: counter(sp-process);
    position: absolute;
    top: 22px;
    left: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    border-radius: 50%;
    background: var(--sp-blue);
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
}

.sp-cable-service .sp-process-step h4 {
    margin-bottom: 7px;
    font-size: 18px;
}

.sp-cable-service .sp-process-step p {
    margin: 0;
    color: var(--sp-muted);
    font-size: 14px;
    line-height: 1.6;
}

/* ZÁRUKA */

.sp-cable-service .sp-warranty {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    align-items: center;
    margin-top: 55px;
    padding: 28px;
    border: 2px solid rgba(190, 32, 47, 0.65);
    border-radius: 16px;
    background: var(--sp-red-light);
}

.sp-cable-service .sp-warranty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: var(--sp-red);
    color: #fff;
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
}

.sp-cable-service .sp-warranty h3 {
    margin-bottom: 8px;
    color: var(--sp-red);
    font-size: 23px;
}

.sp-cable-service .sp-warranty p {
    margin: 0;
}

/* DŮLEŽITÉ INFORMACE */

.sp-cable-service .sp-info-list {
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 1px solid var(--sp-border);
    border-radius: 14px;
    background: #fff;
    list-style: none;
}

.sp-cable-service .sp-info-list li {
    position: relative;
    margin: 0;
    padding: 16px 20px 16px 55px;
    border-bottom: 1px solid var(--sp-border);
}

.sp-cable-service .sp-info-list li:last-child {
    border-bottom: 0;
}

.sp-cable-service .sp-info-list li::before {
    content: "i";
    position: absolute;
    top: 17px;
    left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: var(--sp-blue);
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
}
.sp-cable-service .sp-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr);
    gap: 30px;
    align-items: stretch;
}

.sp-cable-service .sp-hero-content {
    max-width: none;
}

.sp-cable-service .sp-hero-media {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sp-cable-service .sp-hero-image {
	display: block;
	overflow: hidden;
	margin-bottom: 14px;
	border: 1px solid var(--sp-border);
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--sp-shadow);
	margin-top: 100px;
}

.sp-cable-service .sp-hero-image img {
    display: block;
    width: 100%;
    height: auto;
    padding: 18px;
    object-fit: contain;
    background: #fff;
}

.sp-cable-service .sp-hero-note {
    margin-top: auto;
    padding: 14px 16px;
    border: 1px solid var(--sp-border);
    border-left: 4px solid var(--sp-blue);
    border-radius: 12px;
    background: #fff;
}

.sp-cable-service .sp-hero-note strong {
    display: block;
    margin-bottom: 6px;
    color: var(--sp-blue);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
}

.sp-cable-service .sp-hero-note p {
    margin: 0;
    color: var(--sp-muted);
    font-size: 14px;
    line-height: 1.6;
}

/* TABLET */

@media (max-width: 980px) {
    .sp-cable-service .sp-variant-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sp-cable-service .sp-variant-card:last-child {
        grid-column: 1 / -1;
        width: 100%;
        max-width: 580px;
        margin: 0 auto;
    }

    .sp-cable-service .sp-process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* MOBIL */

@media (max-width: 680px) {
    .sp-cable-service {
        font-size: 15px;
        line-height: 1.65;
    }

    .sp-cable-service .sp-section {
        margin-top: 48px;
    }

    .sp-cable-service h2 {
        font-size: 23px;
    }

    .sp-cable-service h3 {
        font-size: 24px;
    }

    .sp-cable-service .sp-hero {
        padding: 26px 20px;
        border-radius: 14px;
    }

    .sp-cable-service .sp-lead {
        font-size: 16px;
    }

    .sp-cable-service .sp-main-alert {
        gap: 12px;
        padding: 16px;
    }

    .sp-cable-service .sp-main-alert strong {
        font-size: 16px;
    }

    .sp-cable-service .sp-variant-grid,
    .sp-cable-service .sp-process {
        grid-template-columns: 1fr;
    }

    .sp-cable-service .sp-variant-card:last-child {
        grid-column: auto;
        max-width: none;
        margin: 0;
    }

    .sp-cable-service .sp-variant-image {
        aspect-ratio: 16 / 11;
    }

    .sp-cable-service .sp-variant-body {
        padding: 21px;
    }

    .sp-cable-service .sp-variant-body h4 {
        font-size: 21px;
    }

    .sp-cable-service .sp-process-step {
        min-height: 0;
        padding: 22px 19px 21px 70px;
    }

    .sp-cable-service .sp-process-step::before {
        top: 20px;
        left: 19px;
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .sp-cable-service .sp-warranty {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 45px;
        padding: 22px;
    }

    .sp-cable-service .sp-warranty-icon {
        width: 58px;
        height: 58px;
        font-size: 27px;
    }

    .sp-cable-service .sp-warranty h3 {
        font-size: 21px;
    }

    .sp-cable-service .sp-info-list li {
        padding: 15px 16px 15px 49px;
    }

    .sp-cable-service .sp-info-list li::before {
        top: 16px;
        left: 16px;
    }
}
@media (max-width: 980px) {
    .sp-cable-service .sp-hero-inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .sp-cable-service .sp-hero-media {
        max-width: 520px;
    }
}

@media (max-width: 680px) {
    .sp-cable-service .sp-hero-media {
        max-width: none;
    }

    .sp-cable-service .sp-hero-image img {
        padding: 14px;
    }

    .sp-cable-service .sp-hero-note {
        padding: 13px 14px;
    }
}
/* =========================================================
   PŮJČOVNA ECHOLOTŮ
   ========================================================= */

.sp-rental-page {
    --spr-blue: #0d4168;
    --spr-blue-dark: #082f4d;
    --spr-red: #be202f;
    --spr-green: #5f8012;
    --spr-green-hover: #bfc23b;
    --spr-text: #323642;
    --spr-muted: #6f7480;
    --spr-border: #dfe5ea;
    --spr-light: #f5f8fa;
    --spr-blue-light: #f2f7fa;
    --spr-red-light: #fff5f6;
    --spr-green-light: #f5f8ec;
    --spr-shadow: 0 10px 30px rgba(13, 65, 104, 0.08);

    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    color: var(--spr-text);
    font-size: 16px;
    line-height: 1.7;
}

.sp-rental-page,
.sp-rental-page * {
    box-sizing: border-box;
}

.sp-rental-page img {
    display: block;
    max-width: 100%;
    height: auto;
}

.sp-rental-page a {
    color: inherit;
}

.sp-rental-page h2,
.sp-rental-page h3,
.sp-rental-page h4,
.sp-rental-page p {
    margin-top: 0;
}

.sp-rental-page h2,
.sp-rental-page h3,
.sp-rental-page h4 {
    color: var(--spr-blue);
    line-height: 1.25;
}

.sp-rental-page h2 {
    margin-bottom: 20px;
    font-size: 26px;
    font-weight: 800;
}

.sp-rental-page h3 {
    margin-bottom: 14px;
    font-size: 26px;
    font-weight: 800;
}

.sp-rental-page h4 {
    margin-bottom: 10px;
    font-size: 19px;
    font-weight: 800;
}

.sp-rental-page p:last-child {
    margin-bottom: 0;
}

.sp-rental-page .sonarpro-section-kicker {
    display: block;
    margin-bottom: 10px;
    color: var(--spr-red);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sp-rental-page .spr-section {
    margin-top: 66px;
}

.sp-rental-page .spr-section-heading {
    position: relative;
    margin-bottom: 30px;
    padding-bottom: 15px;
}

.sp-rental-page .spr-section-heading::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 72px;
    height: 3px;
    border-radius: 3px;
    background: var(--spr-red);
}

.sp-rental-page .spr-section-heading p {
    max-width: 850px;
    margin-bottom: 0;
    color: var(--spr-muted);
}

/* ÚVOD */

.sp-rental-page .spr-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
    gap: 30px;
    align-items: stretch;
    overflow: hidden;
    padding: clamp(28px, 5vw, 54px);
    border: 1px solid var(--spr-border);
    border-radius: 20px;
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(13, 65, 104, 0.1),
            transparent 34%
        ),
        linear-gradient(135deg, #ffffff 0%, #f7fafc 100%);
    box-shadow: var(--spr-shadow);
}

.sp-rental-page .spr-hero-content {
    min-width: 0;
}

.sp-rental-page .spr-lead {
    max-width: 820px;
    margin-bottom: 0;
    color: #4f5560;
    font-size: 18px;
    line-height: 1.75;
}

.sp-rental-page .spr-reservation-alert {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-top: 26px;
    padding: 18px 20px;
    border: 1px solid rgba(190, 32, 47, 0.3);
    border-left: 5px solid var(--spr-red);
    border-radius: 12px;
    background: var(--spr-red-light);
}

.sp-rental-page .spr-reservation-alert-icon {
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--spr-red);
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}

.sp-rental-page .spr-reservation-alert strong {
    display: block;
    margin-bottom: 4px;
    color: var(--spr-red);
    font-size: 18px;
}

.sp-rental-page .spr-reservation-alert p {
    margin: 0;
}

.sp-rental-page .spr-hero-summary {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    min-width: 0;
}

.sp-rental-page .spr-summary-item {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    align-items: start;
    padding: 18px;
    border: 1px solid var(--spr-border);
    border-radius: 14px;
    background: #fff;
}

.sp-rental-page .spr-summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--spr-blue);
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
}

.sp-rental-page .spr-summary-item strong {
    display: block;
    margin-bottom: 4px;
    color: var(--spr-blue);
    font-size: 16px;
}

.sp-rental-page .spr-summary-item p {
    margin: 0;
    color: var(--spr-muted);
    font-size: 14px;
    line-height: 1.55;
}

/* TLAČÍTKA */

.sp-rental-page .spr-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 25px;
}

.sp-rental-page .spr-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 22px;
    border: 2px solid transparent;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.sp-rental-page .spr-button:hover,
.sp-rental-page .spr-button:focus {
    text-decoration: none;
    transform: translateY(-1px);
}

.sp-rental-page .spr-button-primary {
    background: var(--spr-green);
    color: #fff;
}

.sp-rental-page .spr-button-primary:hover,
.sp-rental-page .spr-button-primary:focus {
    background: var(--spr-green-hover);
    color: #fff;
}

.sp-rental-page .spr-button-secondary {
    border-color: var(--spr-blue);
    background: #fff;
    color: var(--spr-blue);
}

.sp-rental-page .spr-button-secondary:hover,
.sp-rental-page .spr-button-secondary:focus {
    background: var(--spr-blue);
    color: #fff;
}

/* KARTY SAD */

.sp-rental-page .spr-rental-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.sp-rental-page .spr-rental-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--spr-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--spr-shadow);
}

.sp-rental-page .spr-rental-image {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border-bottom: 1px solid var(--spr-border);
    background: #fff;
    cursor: zoom-in;
}

.sp-rental-page .spr-rental-image img {
    width: 100%;
    height: 100%;
    padding: 16px;
    object-fit: contain;
    object-position: center;
    transition: transform 0.25s ease;
}

.sp-rental-page .spr-rental-image:hover img {
    transform: scale(1.025);
}

.sp-rental-page .spr-image-label {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    padding: 6px 11px;
    border-radius: 20px;
    background: rgba(13, 65, 104, 0.92);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    pointer-events: none;
}

.sp-rental-page .spr-rental-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    padding: 28px;
}

.sp-rental-page .spr-rental-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: 15px;
    border-radius: 8px;
    background: var(--spr-blue);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}

.sp-rental-page .spr-rental-body > h3 {
    min-height: 65px;
    margin-bottom: 12px;
    font-size: 23px;
}

.sp-rental-page .spr-rental-intro {
    margin-bottom: 20px;
    color: var(--spr-muted);
    font-size: 15px;
}

/* CENA */

.sp-rental-page .spr-price-box {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(130px, 0.7fr);
    overflow: hidden;
    margin-bottom: 24px;
    border: 1px solid var(--spr-border);
    border-radius: 13px;
}

.sp-rental-page .spr-price,
.sp-rental-page .spr-deposit {
    padding: 18px;
}

.sp-rental-page .spr-price {
    background: var(--spr-blue);
    color: #fff;
}

.sp-rental-page .spr-price-label,
.sp-rental-page .spr-deposit span {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 700;
}

.sp-rental-page .spr-price strong {
    display: inline-block;
    margin-right: 4px;
    color: #fff;
    font-size: 27px;
    line-height: 1.1;
}

.sp-rental-page .spr-price > span:last-child {
    font-size: 13px;
}

.sp-rental-page .spr-deposit {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid var(--spr-border);
    background: var(--spr-light);
}

.sp-rental-page .spr-deposit strong {
    color: var(--spr-blue);
    font-size: 20px;
    line-height: 1.2;
}

.sp-rental-page .spr-rental-description {
    margin-bottom: 22px;
}

/* ŠTÍTKY */

.sp-rental-page .spr-block-title {
    display: block;
    margin-bottom: 12px;
    color: var(--spr-blue);
    font-weight: 800;
}

.sp-rental-page .spr-suitable-for {
    margin-bottom: 23px;
}

.sp-rental-page .spr-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-rental-page .spr-tag-list li {
    margin: 0;
    padding: 6px 11px;
    border: 1px solid #cfdce5;
    border-radius: 999px;
    background: var(--spr-blue-light);
    color: var(--spr-blue);
    font-size: 13px;
    font-weight: 700;
}

/* SEZNAM VYBAVENÍ */

.sp-rental-page .spr-includes {
    margin-top: auto;
    padding-top: 21px;
    border-top: 1px solid var(--spr-border);
}

.sp-rental-page .spr-check-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-rental-page .spr-check-list li {
    position: relative;
    margin: 9px 0;
    padding-left: 28px;
}

.sp-rental-page .spr-check-list li::before {
    content: "?";
    position: absolute;
    top: 4px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--spr-red);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.sp-rental-page .spr-card-contact {
    margin-top: 25px;
    text-align: center;
}

/* POSTUP */

.sp-rental-page .spr-process {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    counter-reset: spr-process;
}

.sp-rental-page .spr-process-step {
    position: relative;
    min-height: 180px;
    padding: 24px 22px 22px 76px;
    border: 1px solid var(--spr-border);
    border-radius: 14px;
    background: #fff;
    counter-increment: spr-process;
}

.sp-rental-page .spr-process-step::before {
    content: counter(spr-process);
    position: absolute;
    top: 22px;
    left: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    border-radius: 50%;
    background: var(--spr-blue);
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
}

.sp-rental-page .spr-process-step h4 {
    margin-bottom: 7px;
    font-size: 18px;
}

.sp-rental-page .spr-process-step p {
    margin: 0;
    color: var(--spr-muted);
    font-size: 14px;
    line-height: 1.6;
}

/* PRAKTICKÉ INFORMACE */

.sp-rental-page .spr-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.sp-rental-page .spr-info-card {
    position: relative;
    min-height: 165px;
    padding: 24px 23px 22px 73px;
    border: 1px solid var(--spr-border);
    border-radius: 14px;
    background: #fff;
}

.sp-rental-page .spr-info-number {
    position: absolute;
    top: 22px;
    left: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border: 2px solid var(--spr-blue);
    border-radius: 50%;
    color: var(--spr-blue);
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
}

.sp-rental-page .spr-info-card p {
    margin: 0;
    color: var(--spr-muted);
    font-size: 14px;
}

/* ŠKOLENÍ */

.sp-rental-page .spr-training {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    align-items: center;
    margin-top: 58px;
    padding: 30px;
    border: 2px solid rgba(95, 128, 18, 0.55);
    border-radius: 16px;
    background: var(--spr-green-light);
}

.sp-rental-page .spr-training-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: var(--spr-green);
    color: #fff;
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
}

.sp-rental-page .spr-training h3 {
    margin-bottom: 10px;
    font-size: 23px;
}

.sp-rental-page .spr-text-link {
    display: inline-block;
    margin-top: 4px;
    color: var(--spr-blue);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sp-rental-page .spr-text-link:hover,
.sp-rental-page .spr-text-link:focus {
    color: var(--spr-red);
}

/* DŮLEŽITÉ INFORMACE */

.sp-rental-page .spr-important-list {
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 1px solid var(--spr-border);
    border-radius: 14px;
    background: #fff;
    list-style: none;
}

.sp-rental-page .spr-important-list li {
    position: relative;
    margin: 0;
    padding: 16px 20px 16px 55px;
    border-bottom: 1px solid var(--spr-border);
}

.sp-rental-page .spr-important-list li:last-child {
    border-bottom: 0;
}

.sp-rental-page .spr-important-list li::before {
    content: "i";
    position: absolute;
    top: 17px;
    left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: var(--spr-blue);
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
}

.sp-rental-page .spr-important-list a {
    color: var(--spr-blue);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ZÁVĚREČNÝ KONTAKT */

.sp-rental-page .spr-contact-box {
    margin-top: 58px;
    padding: clamp(28px, 5vw, 48px);
    border-radius: 18px;
    background: var(--spr-blue);
    color: #fff;
    text-align: center;
}

.sp-rental-page .spr-contact-box .sonarpro-section-kicker {
    color: #fff;
    opacity: 0.85;
}

.sp-rental-page .spr-contact-box h3 {
    color: #fff;
}

.sp-rental-page .spr-contact-box p {
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
}

.sp-rental-page .spr-contact-box .spr-contact-actions {
    justify-content: center;
}

.sp-rental-page .spr-contact-box .spr-button-primary {
    background: var(--spr-green);
}

.sp-rental-page .spr-contact-box .spr-button-secondary {
    border-color: #fff;
    background: transparent;
    color: #fff;
}

.sp-rental-page .spr-contact-box .spr-button-secondary:hover,
.sp-rental-page .spr-contact-box .spr-button-secondary:focus {
    background: #fff;
    color: var(--spr-blue);
}

/* TABLET */

@media (max-width: 980px) {
    .sp-rental-page .spr-hero {
        grid-template-columns: 1fr;
    }

    .sp-rental-page .spr-hero-summary {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sp-rental-page .spr-summary-item {
        grid-template-columns: 1fr;
    }

    .sp-rental-page .spr-process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* MENŠÍ TABLET */

@media (max-width: 780px) {
    .sp-rental-page .spr-rental-grid {
        grid-template-columns: 1fr;
    }

    .sp-rental-page .spr-rental-body > h3 {
        min-height: 0;
    }

    .sp-rental-page .spr-hero-summary {
        grid-template-columns: 1fr;
    }

    .sp-rental-page .spr-summary-item {
        grid-template-columns: 42px 1fr;
    }
}

/* MOBIL */

@media (max-width: 680px) {
    .sp-rental-page {
        font-size: 15px;
        line-height: 1.65;
    }

    .sp-rental-page .spr-section {
        margin-top: 48px;
    }

    .sp-rental-page h2 {
        font-size: 23px;
    }

    .sp-rental-page h3 {
        font-size: 23px;
    }

    .sp-rental-page .spr-hero {
        gap: 24px;
        padding: 26px 20px;
        border-radius: 14px;
    }

    .sp-rental-page .spr-lead {
        font-size: 16px;
    }

    .sp-rental-page .spr-reservation-alert {
        gap: 12px;
        padding: 16px;
    }

    .sp-rental-page .spr-reservation-alert strong {
        font-size: 16px;
    }

    .sp-rental-page .spr-contact-actions {
        flex-direction: column;
    }

    .sp-rental-page .spr-button {
        width: 100%;
    }

    .sp-rental-page .spr-rental-image {
        aspect-ratio: 16 / 11;
    }

    .sp-rental-page .spr-rental-body {
        padding: 22px;
    }

    .sp-rental-page .spr-rental-body > h3 {
        font-size: 21px;
    }

    .sp-rental-page .spr-price-box {
        grid-template-columns: 1fr;
    }

    .sp-rental-page .spr-deposit {
        border-top: 1px solid var(--spr-border);
        border-left: 0;
    }

    .sp-rental-page .spr-process,
    .sp-rental-page .spr-info-grid {
        grid-template-columns: 1fr;
    }

    .sp-rental-page .spr-process-step {
        min-height: 0;
        padding: 22px 19px 21px 70px;
    }

    .sp-rental-page .spr-process-step::before {
        top: 20px;
        left: 19px;
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .sp-rental-page .spr-info-card {
        min-height: 0;
        padding: 22px 19px 21px 68px;
    }

    .sp-rental-page .spr-info-number {
        top: 20px;
        left: 18px;
    }

    .sp-rental-page .spr-training {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 46px;
        padding: 22px;
    }

    .sp-rental-page .spr-training-icon {
        width: 58px;
        height: 58px;
        font-size: 27px;
    }

    .sp-rental-page .spr-training h3 {
        font-size: 21px;
    }

    .sp-rental-page .spr-important-list li {
        padding: 15px 16px 15px 49px;
    }

    .sp-rental-page .spr-important-list li::before {
        top: 16px;
        left: 16px;
    }

    .sp-rental-page .spr-contact-box {
        margin-top: 46px;
        padding: 28px 20px;
        border-radius: 14px;
    }
}
/* =========================================================
   KARTIČKY A BANNER KONKURENĆNÍ VÝHODY HP - NEW
   ========================================================= */
.sonarpro-category-panel {
    --scp-blue: #0d4168;
    --scp-blue-dark: #082f4d;
    --scp-blue-hover: #12527e;
    --scp-red: #be202f;
    --scp-text: #2c3138;
    --scp-muted: #6f7480;
    --scp-border: #e1e6ea;
    --scp-background: #f5f7f9;
    --scp-shadow: 0 10px 28px rgba(13, 65, 104, 0.09);
    --scp-shadow-hover: 0 18px 40px rgba(13, 65, 104, 0.17);

    width: 100%;
    margin: 0 auto;
    padding: 44px 24px 48px;
    border-radius: 20px;
    background: var(--scp-background);
    color: var(--scp-text);
}

.sonarpro-category-panel,
.sonarpro-category-panel * {
    box-sizing: border-box;
}

.sonarpro-category-panel img {
    display: block;
    max-width: 100%;
}

.sonarpro-category-panel a {
    color: inherit;
    text-decoration: none;
}

/* HLAVIČKA SEKCE */

.sonarpro-category-panel__heading {
    max-width: 1100px;
    margin: 0 auto 36px;
    text-align: center;
}

.sonarpro-category-panel__kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 10px;
    color: var(--scp-red);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sonarpro-category-panel__kicker::before,
.sonarpro-category-panel__kicker::after {
    content: "";
    width: 42px;
    height: 2px;
    background: var(--scp-red);
}

.sonarpro-category-panel__title {
    margin: 0 0 13px;
    color: var(--scp-blue-dark);
    font-size: 40px;
    font-weight: 800;
    line-height: 1.2;
}

.sonarpro-category-panel__highlight {
    color: var(--scp-red);
    font-weight: 900;
}

.sonarpro-category-panel__lead {
    max-width: 820px;
    margin: 0 auto;
    color: var(--scp-muted);
    font-size: 16px;
    line-height: 1.65;
}

/* ROZLOŽENÍ KARET */

.sonarpro-category-panel__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sonarpro-category-panel__item {
    display: flex;
    flex: 0 0 calc((100% - 66px) / 4);
    min-width: 0;
    margin: 0;
    padding: 0;
}

/* CELÁ KARTA */

.sonarpro-category-panel__card {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--scp-border);
    border-radius: 17px;
    background: #fff;
    box-shadow: var(--scp-shadow);
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.sonarpro-category-panel__card:hover,
.sonarpro-category-panel__card:focus {
    border-color: rgba(13, 65, 104, 0.35);
    color: inherit;
    text-decoration: none;
    transform: translateY(-5px);
    box-shadow: var(--scp-shadow-hover);
}

/* OBRAZOVÁ ČÁST */

.sonarpro-category-panel__image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 230px;
    overflow: hidden;
    padding: 20px 22px;
    background:
        radial-gradient(
            circle at center,
            rgba(13, 65, 104, 0.035),
            transparent 65%
        ),
        #fff;
}

.sonarpro-category-panel__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.3s ease;
}

.sonarpro-category-panel__card:hover
.sonarpro-category-panel__image img {
    transform: scale(1.045);
}

/* MODRÝ PÁS PŘES CELOU ŠÍŘKU KARTY */

.sonarpro-category-panel__name {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 92px;
    margin-top: auto;
    padding: 20px 16px;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(
            135deg,
            var(--scp-blue-dark) 0%,
            var(--scp-blue) 100%
        );
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    transition: background 0.25s ease;
}

.sonarpro-category-panel__card:hover
.sonarpro-category-panel__name {
    background:
        linear-gradient(
            135deg,
            var(--scp-blue-dark) 0%,
            var(--scp-blue-hover) 100%
        );
}

/* KLÁVESNICOVÉ OVLÁDÁNÍ */

.sonarpro-category-panel__card:focus-visible {
    outline: 3px solid rgba(13, 65, 104, 0.25);
    outline-offset: 3px;
}

/* MENŠÍ NOTEBOOK */

@media (max-width: 1050px) {
    .sonarpro-category-panel__item {
        flex-basis: calc((100% - 44px) / 3);
    }

    .sonarpro-category-panel__image {
        height: 215px;
    }

    .sonarpro-category-panel__title {
        font-size: 34px;
    }
}

/* TABLET */

@media (max-width: 800px) {
    .sonarpro-category-panel {
        padding-right: 18px;
        padding-left: 18px;
    }

    .sonarpro-category-panel__item {
        flex-basis: calc((100% - 22px) / 2);
    }
}

/* MOBIL – DVĚ KARTY NA ŘÁDKU */

@media (max-width: 680px) {
    .sonarpro-category-panel {
        padding: 30px 11px 34px;
        border-radius: 14px;
    }

    .sonarpro-category-panel__heading {
        margin-bottom: 25px;
        padding: 0 5px;
    }

    .sonarpro-category-panel__kicker {
        gap: 8px;
        font-size: 15px;
        letter-spacing: 0.07em;
    }

    .sonarpro-category-panel__kicker::before,
    .sonarpro-category-panel__kicker::after {
        width: 22px;
    }

    .sonarpro-category-panel__title {
        font-size: 32px;
        line-height: 1.25;
    }

    .sonarpro-category-panel__lead {
        font-size: 14px;
    }

    .sonarpro-category-panel__grid {
        gap: 12px;
    }

    .sonarpro-category-panel__item {
        flex-basis: calc((100% - 12px) / 2);
    }

    .sonarpro-category-panel__card {
        border-radius: 13px;
    }

    .sonarpro-category-panel__image {
        height: 148px;
        padding: 13px 11px;
    }

    .sonarpro-category-panel__name {
        min-height: 78px;
        padding: 15px 9px;
        font-size: 13px;
        line-height: 1.3;
    }

    .sonarpro-category-panel__card:hover {
        transform: none;
    }
}

/* VELMI ÚZKÉ TELEFONY */

@media (max-width: 390px) {
    .sonarpro-category-panel {
        padding-right: 8px;
        padding-left: 8px;
    }

    .sonarpro-category-panel__grid {
        gap: 8px;
    }

    .sonarpro-category-panel__item {
        flex-basis: calc((100% - 8px) / 2);
    }

    .sonarpro-category-panel__image {
        height: 130px;
        padding: 10px 8px;
    }

    .sonarpro-category-panel__name {
        min-height: 74px;
        padding: 12px 6px;
        font-size: 11px;
    }
}
/* =========================================================
   BENEFITNÍ PÁS SONARPRO
   ========================================================= */

/* =========================================================
   POVOLENÍ FULL-WIDTH OBSAHU V HORNÍM BANNEROVÉM BLOKU
   ========================================================= */

.banners-top-block .next-to-carousel-banners,
.banners-top-block .banner-wrapper[data-testid="bannerTop"],
.banners-top-block .banner-wrapper[data-testid="bannerTop"] > span {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* Pojistka proti vodorovnému posuvníku způsobenému 100vw */
html,
body {
    overflow-x: hidden;
}


/* =========================================================
   BENEFITNÍ PÁS SONARPRO
   ========================================================= */
/* =========================================================
   BENEFITNÍ PÁS SONARPRO – HLAVNÍ STRÁNKA
   SVĚTLÁ FULL-WIDTH VARIANTA
   ========================================================= */

/* =========================================================
   POVOLENÍ FULL-WIDTH OBSAHU V HORNÍM BANNEROVÉM BLOKU
   ========================================================= */



/* Pojistka proti vodorovnému posuvníku způsobenému 100vw */



/* =========================================================
   HLAVNÍ FULL-WIDTH BLOK
   ========================================================= */

.sonarpro-benefits-strip {
    --sbs-blue: #0f3f6c;
    --sbs-red: #bf1f2f;
    --sbs-gold: #cc9949;

    --sbs-text: #0f3f6c;
    --sbs-text-soft: #536b80;

    --sbs-card-bg: #ffffff;
    --sbs-card-bg-hover: #ffffff;

    --sbs-card-border: #dce3e9;
    --sbs-card-border-hover: rgba(191, 31, 47, 0.38);

    --sbs-icon-bg: rgba(191, 31, 47, 0.055);
    --sbs-icon-border: rgba(191, 31, 47, 0.22);

    --sbs-shadow:
        0 8px 24px rgba(15, 63, 108, 0.08);

    --sbs-shadow-hover:
        0 14px 32px rgba(15, 63, 108, 0.13);

    position: relative;

    box-sizing: border-box;

    width: 100vw;
    max-width: 100vw;

    left: 50%;

    margin-top: 42px;
    margin-right: 0;
    margin-left: -50vw;

    padding: 26px 0;

    border: 0;

    background: transparent;

    box-shadow: none;

    overflow: visible;
}

.sonarpro-benefits-strip,
.sonarpro-benefits-strip * {
    box-sizing: border-box;
}


/* =========================================================
   ODKAZY
   ========================================================= */

.sonarpro-benefits-strip a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   VNITŘNÍ OBSAH
   ========================================================= */

.sonarpro-benefits-strip__inner {
    width: 100%;
    max-width: 1440px;

    margin: 0 auto;
    padding: 0 28px;
}


/* =========================================================
   GRID
   ========================================================= */

.sonarpro-benefits-strip__grid {
    display: grid;

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

    gap: 14px;

    width: 100%;
}


/* =========================================================
   JEDNOTLIVÉ KARTY
   ========================================================= */

.sonarpro-benefits-strip__item {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 252px;

    padding: 26px 24px 22px;

    border: 1px solid var(--sbs-card-border);
    border-radius: 14px;

    color: var(--sbs-text);
    background: var(--sbs-card-bg);

    box-shadow: var(--sbs-shadow);
}


/* =========================================================
   KLIKACÍ KARTY
   ========================================================= */

.sonarpro-benefits-strip__item--link {
    transition:
        background-color 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
}

.sonarpro-benefits-strip__item--link:hover,
.sonarpro-benefits-strip__item--link:focus {
    border-color: var(--sbs-card-border-hover);

    background: var(--sbs-card-bg-hover);

    box-shadow: var(--sbs-shadow-hover);

    color: var(--sbs-text);
    text-decoration: none;

    transform: translateY(-2px);
}


/* =========================================================
   KRUHOVÝ OBAL IKON
   ========================================================= */

.sonarpro-benefits-strip__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 62px;
    height: 62px;

    margin-bottom: 18px;

    border: 1px solid var(--sbs-icon-border);
    border-radius: 50%;


    color: var(--sbs-red);

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

    box-shadow:
        0 6px 18px rgba(15, 63, 108, 0.08);

    transition: none;
}

.sonarpro-benefits-strip__icon i {
    display: block;

    color: inherit;

    font-size: inherit;
    line-height: 1;

    transition: none;
}


/* Běžné ikony se při hoveru nemění */

.sonarpro-benefits-strip__item--link:hover
.sonarpro-benefits-strip__icon,

.sonarpro-benefits-strip__item--link:focus
.sonarpro-benefits-strip__icon {
    border-color: var(--sbs-icon-border);

    background: var(--sbs-icon-bg);
    color: var(--sbs-red);

    transform: none;
}


/* =========================================================
   VIP IKONA – TRVALE ZLATÁ
   ========================================================= */

.sonarpro-benefits-strip__icon--vip {
    border-color: rgba(204, 153, 73, 0.38);
    color: var(--sbs-gold);

    box-shadow:
        0 6px 18px rgba(204, 153, 73, 0.10);
}

.sonarpro-benefits-strip__item--vip:hover
.sonarpro-benefits-strip__icon--vip,

.sonarpro-benefits-strip__item--vip:focus
.sonarpro-benefits-strip__icon--vip {
    border-color: rgba(204, 153, 73, 0.38);

    background: rgba(204, 153, 73, 0.08);
    color: var(--sbs-gold);

    transform: none;
}


/* Korunka VIP */

.sonarpro-benefits-strip__crown {
    display: block;

    color: var(--sbs-gold);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 36px;
    font-weight: 700;
    line-height: 1;

    transform: translateY(-1px);
}


/* =========================================================
   TEXTOVÝ OBSAH
   ========================================================= */

.sonarpro-benefits-strip__content {
    display: flex;
    flex: 1;
    flex-direction: column;

    min-width: 0;
}


/* Nadpisy běžných karet */

.sonarpro-benefits-strip__title {
    display: block;
    margin: 0 0 12px;

    color: var(--sbs-blue);

    font-size: 25px;
    font-weight: 800;
    line-height: 1.32;

    text-transform: uppercase;
}


/* VIP nadpis */

.sonarpro-benefits-strip__item--vip
.sonarpro-benefits-strip__title {
    color: var(--sbs-gold);
}


/* Popisné texty */

.sonarpro-benefits-strip__text {
    margin: 0 0 18px;

    color: var(--sbs-text-soft);

    font-size: 15px;
    line-height: 1.68;
}


/* =========================================================
   ODKAZY A AKČNÍ TEXTY
   ========================================================= */

.sonarpro-benefits-strip__action {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;

    margin-top: auto;

    color: var(--sbs-red);

    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.02em;

    text-transform: uppercase;
}

.sonarpro-benefits-strip__action::after {
    content: "\2192";

    display: inline-block;

    margin-left: 8px;

    color: inherit;

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

    transition: transform 0.22s ease;
}

.sonarpro-benefits-strip__item--link:hover
.sonarpro-benefits-strip__action::after,

.sonarpro-benefits-strip__item--link:focus
.sonarpro-benefits-strip__action::after {
    transform: translateX(4px);
}


/* Statický text bez šipky */

.sonarpro-benefits-strip__action--static {
    color: var(--sbs-red);
}

.sonarpro-benefits-strip__action--static::after {
    display: none;
}


/* VIP odkaz */

.sonarpro-benefits-strip__action--vip {
    color: var(--sbs-gold);
}


/* =========================================================
   FOCUS PŘI OVLÁDÁNÍ KLÁVESNICÍ
   ========================================================= */

.sonarpro-benefits-strip__item--link:focus-visible {
    outline: 3px solid rgba(191, 31, 47, 0.30);
    outline-offset: 3px;

    z-index: 2;
}

.sonarpro-benefits-strip__item--vip:focus-visible {
    outline-color: rgba(204, 153, 73, 0.42);
}


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

@media (max-width: 1200px) {
    .sonarpro-benefits-strip__inner {
        padding-right: 20px;
        padding-left: 20px;
    }

    .sonarpro-benefits-strip__title {
        font-size: 22px;
    }
}


/* =========================================================
   TABLET – 2 × 2
   ========================================================= */

@media (max-width: 980px) {
    .sonarpro-benefits-strip {
        margin-top: 34px;
        padding: 22px 0;
    }

    .sonarpro-benefits-strip__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 14px;
    }

    .sonarpro-benefits-strip__item {
        min-height: 235px;
    }
}


/* =========================================================
   MOBIL – KOMPAKTNÍ KARTY
   ========================================================= */

@media (max-width: 680px) {
    .sonarpro-benefits-strip {
        margin-top: 22px;
        padding: 10px 0 14px;
    }

    .sonarpro-benefits-strip__inner {
        padding-right: 10px;
        padding-left: 10px;
    }

    .sonarpro-benefits-strip__grid {
        grid-template-columns: 1fr;
        gap: 9px;
        border-radius: 12px;
    }

    /*
     * Ikona vlevo, obsah vpravo.
     */
    .sonarpro-benefits-strip__item {
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr);
        column-gap: 13px;
        align-items: start;

        min-height: 0;

        padding: 15px 14px;

        border-radius: 12px;

        box-shadow:
            0 5px 16px rgba(15, 63, 108, 0.07);
    }

    .sonarpro-benefits-strip__item--link:hover,
    .sonarpro-benefits-strip__item--link:focus {
        transform: none;

        box-shadow:
            0 7px 18px rgba(15, 63, 108, 0.10);
    }

    /*
     * Menší ikona.
     */
    .sonarpro-benefits-strip__icon {
        grid-column: 1;
        grid-row: 1;

        width: 46px;
        height: 46px;

        margin: 0;

        font-size: 21px;

        box-shadow:
            0 4px 12px rgba(15, 63, 108, 0.07);
    }

    .sonarpro-benefits-strip__crown {
        font-size: 27px;
    }

    /*
     * Celý textový obsah v pravém sloupci.
     */
    .sonarpro-benefits-strip__content {
        grid-column: 2;
        grid-row: 1;

        display: block;

        min-width: 0;
        margin-top: 10px;
    }

    .sonarpro-benefits-strip__title {
        margin: 0 0 6px;

        font-size: 22px;
        line-height: 1.32;
    }

    /*
     * Ruční <br> v nadpisech na mobilu zrušíme,
     * aby se text zalamoval podle dostupné šířky.
     */
    .sonarpro-benefits-strip__title br {
        display: none;
    }

    .sonarpro-benefits-strip__text {
        margin: 0 0 8px;

        font-size: 15px;
        line-height: 1.48;
    }

    .sonarpro-benefits-strip__action {
        display: inline-flex;

        margin-top: 0;

        font-size: 13px;
        line-height: 1.4;
    }

    .sonarpro-benefits-strip__action::after {
        margin-left: 6px;

        font-size: 15px;
    }
}
/* =========================================================
   VELMI ÚZKÉ TELEFONY
   ========================================================= */

@media (max-width: 390px) {
    .sonarpro-benefits-strip__inner {
        padding-right: 8px;
        padding-left: 8px;
    }

    .sonarpro-benefits-strip__item {
        grid-template-columns: 42px minmax(0, 1fr);
        column-gap: 11px;

        padding: 13px 12px;
    }

    .sonarpro-benefits-strip__icon {
        width: 42px;
        height: 42px;

        font-size: 19px;
    }

    .sonarpro-benefits-strip__crown {
        font-size: 24px;
    }

    .sonarpro-benefits-strip__title {
        font-size: 14px;
    }

    .sonarpro-benefits-strip__text {
        font-size: 12.5px;
        line-height: 1.45;
    }

    .sonarpro-benefits-strip__action {
        font-size: 10.5px;
    }
}


/* =========================================================
   EXTRA VELKÉ MONITORY
   ========================================================= */

@media (min-width: 1700px) {
    .sonarpro-benefits-strip__inner {
        max-width: 1540px;
    }
}
/* =========================================================
   BENEFITY V KATEGORIÍCH A PRODUKTOVÝCH DETAILECH
   ========================================================= */


/* Povolí přesah full-width bloku mimo Shoptet container */
.content-wrapper,
.content-wrapper .container,
.content-wrapper .content,
.content-wrapper .content-inner {
    overflow-x: visible;
}


/* Pojistka proti vodorovnému posuvníku kvůli 100vw */


/* =========================================================
   HLAVNÍ FULL-WIDTH BLOK
   ========================================================= */

.benefitBanner.position--benefitCategory {
    --spb-bg-1: #082f4d;
    --spb-bg-2: #0d4168;

    --spb-card-bg: rgba(255, 255, 255, 0.07);
    --spb-card-bg-hover: rgba(255, 255, 255, 0.025);

    --spb-border: rgba(255, 255, 255, 0.12);
    --spb-border-hover: rgba(255, 255, 255, 0.20);

    --spb-title: #ffffff;
    --spb-text: rgba(255, 255, 255, 0.82);

    --spb-icon-bg: rgba(255, 255, 255, 0.08);
    --spb-icon-border: rgba(255, 255, 255, 0.16);

    --spb-red: #be202f;
    --spb-gold: #cc9949;

    position: relative;

    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;

    /*
     * Vytažení z omezeného Shoptet containeru
     * přes celou šířku obrazovky.
     */
    width: 100vw !important;
    max-width: none !important;

    margin-top: 36px !important;
    margin-right: calc(50% - 50vw) !important;
    margin-bottom: 36px !important;
    margin-left: calc(50% - 50vw) !important;

    /*
     * Pozadí je full-width, karty ale zůstávají
     * přibližně v maximální obsahové šířce 1440 px.
     */
    padding-top: 30px !important;
    padding-right: max(
        24px,
        calc((100vw - 1440px) / 2 + 24px)
    ) !important;
    padding-bottom: 30px !important;
    padding-left: max(
        24px,
        calc((100vw - 1440px) / 2 + 24px)
    ) !important;

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

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(255, 255, 255, 0.06) 0,
            rgba(255, 255, 255, 0) 32%
        ),
        linear-gradient(
            135deg,
            var(--spb-bg-1) 0%,
            var(--spb-bg-2) 100%
        ) !important;

    box-shadow:
        0 18px 40px rgba(5, 24, 38, 0.22) !important;

    overflow: hidden !important;
}

.benefitBanner.position--benefitCategory,
.benefitBanner.position--benefitCategory * {
    box-sizing: border-box;
}


/* =========================================================
   JEDNOTLIVÉ KARTY – PŘEPIS PEVNÝCH ŠÍŘEK APOLLO
   ========================================================= */

.benefitBanner.position--benefitCategory
.benefitBanner__item {
    position: relative;

    display: flex !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

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

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

    border: 0 !important;
    background: transparent !important;

    flex: none !important;
    flex-basis: auto !important;

    justify-self: stretch !important;
    align-self: stretch !important;

    float: none !important;
}


/* =========================================================
   CELÁ KARTA JAKO ODKAZ
   ========================================================= */

.benefitBanner.position--benefitCategory
.benefitBanner__link {
    position: relative;

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

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

    height: 100% !important;
    min-height: 270px !important;

    margin: 0 !important;
    padding: 24px 22px 22px !important;

    border: 1px solid var(--spb-border) !important;
    border-radius: 16px !important;

    background: var(--spb-card-bg) !important;
    color: var(--spb-title) !important;

    text-align: left !important;
    text-decoration: none !important;

    box-shadow:
        0 10px 24px rgba(3, 16, 28, 0.12) !important;

    overflow: hidden !important;

    transition:
        background-color 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease !important;
}

.benefitBanner.position--benefitCategory
.benefitBanner__link:hover,
.benefitBanner.position--benefitCategory
.benefitBanner__link:focus {
    border-color: var(--spb-border-hover) !important;

    background: var(--spb-card-bg-hover) !important;
    color: var(--spb-title) !important;

    text-decoration: none !important;

    box-shadow:
        0 15px 30px rgba(3, 16, 28, 0.20) !important;

    transform: translateY(-3px);
}


/* =========================================================
   KRUHOVÝ OBAL IKON
   ========================================================= */

.benefitBanner.position--benefitCategory
.benefitBanner__picture {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

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

    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;

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

    border: 1px solid var(--spb-icon-border) !important;
    border-radius: 50% !important;

    background: var(--spb-icon-bg) !important;

    box-shadow:
        0 8px 20px rgba(3, 16, 28, 0.17) !important;

    float: none !important;
    overflow: hidden !important;

    transition: none !important;
}


/* =========================================================
   BĚŽNÉ IKONY – TRVALE BÍLÉ
   ========================================================= */

.benefitBanner.position--benefitCategory
.benefitBanner__item:not(:nth-child(3))
.benefitBanner__picture
.benefitBanner__img {
    display: block !important;
    visibility: visible !important;

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

    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;

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

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

    background: transparent !important;

    object-fit: contain !important;

    filter:
        brightness(0)
        saturate(100%)
        invert(100%) !important;

    -webkit-filter:
        brightness(0)
        saturate(100%)
        invert(100%) !important;

    opacity: 1 !important;
    transform: none !important;
    mix-blend-mode: normal !important;

    transition: none !important;
}


/* Běžné ikony zůstávají bílé také při hoveru a focusu */

.benefitBanner.position--benefitCategory
.benefitBanner__item:not(:nth-child(3))
.benefitBanner__link:hover
.benefitBanner__img,
.benefitBanner.position--benefitCategory
.benefitBanner__item:not(:nth-child(3))
.benefitBanner__link:focus
.benefitBanner__img,
.benefitBanner.position--benefitCategory
.benefitBanner__item:not(:nth-child(3)):hover
.benefitBanner__img {
    visibility: visible !important;
    opacity: 1 !important;

    filter:
        brightness(0)
        saturate(100%)
        invert(100%) !important;

    -webkit-filter:
        brightness(0)
        saturate(100%)
        invert(100%) !important;

    transform: none !important;
    mix-blend-mode: normal !important;
}


/* Běžný kruh se při hoveru barevně nemění */

.benefitBanner.position--benefitCategory
.benefitBanner__item:not(:nth-child(3))
.benefitBanner__link:hover
.benefitBanner__picture,
.benefitBanner.position--benefitCategory
.benefitBanner__item:not(:nth-child(3))
.benefitBanner__link:focus
.benefitBanner__picture,
.benefitBanner.position--benefitCategory
.benefitBanner__item:not(:nth-child(3)):hover
.benefitBanner__picture {
    border-color: var(--spb-icon-border) !important;
    background: var(--spb-icon-bg) !important;
    transform: none !important;
}


/* =========================================================
   VIP IKONA – TRVALE ZLATÁ
   ========================================================= */

.benefitBanner.position--benefitCategory
.benefitBanner__item:nth-child(3)
.benefitBanner__picture {
    border-color: rgba(204, 153, 73, 0.48) !important;
    background: rgba(204, 153, 73, 0.10) !important;

    box-shadow:
        0 8px 20px rgba(204, 153, 73, 0.12) !important;
}

.benefitBanner.position--benefitCategory
.benefitBanner__item:nth-child(3)
.benefitBanner__picture
.benefitBanner__img {
    display: block !important;
    visibility: visible !important;

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

    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;

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

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

    background: transparent !important;

    object-fit: contain !important;

    filter:
        brightness(0)
        saturate(100%)
        invert(66%)
        sepia(44%)
        saturate(765%)
        hue-rotate(358deg)
        brightness(91%)
        contrast(87%) !important;

    -webkit-filter:
        brightness(0)
        saturate(100%)
        invert(66%)
        sepia(44%)
        saturate(765%)
        hue-rotate(358deg)
        brightness(91%)
        contrast(87%) !important;

    opacity: 1 !important;
    transform: none !important;
    mix-blend-mode: normal !important;

    transition: none !important;
}


/* VIP ikona i kruh se při hoveru nemění */

.benefitBanner.position--benefitCategory
.benefitBanner__item:nth-child(3)
.benefitBanner__link:hover
.benefitBanner__img,
.benefitBanner.position--benefitCategory
.benefitBanner__item:nth-child(3)
.benefitBanner__link:focus
.benefitBanner__img,
.benefitBanner.position--benefitCategory
.benefitBanner__item:nth-child(3):hover
.benefitBanner__img {
    visibility: visible !important;
    opacity: 1 !important;

    filter:
        brightness(0)
        saturate(100%)
        invert(66%)
        sepia(44%)
        saturate(765%)
        hue-rotate(358deg)
        brightness(91%)
        contrast(87%) !important;

    -webkit-filter:
        brightness(0)
        saturate(100%)
        invert(66%)
        sepia(44%)
        saturate(765%)
        hue-rotate(358deg)
        brightness(91%)
        contrast(87%) !important;

    transform: none !important;
    mix-blend-mode: normal !important;
}

.benefitBanner.position--benefitCategory
.benefitBanner__item:nth-child(3)
.benefitBanner__link:hover
.benefitBanner__picture,
.benefitBanner.position--benefitCategory
.benefitBanner__item:nth-child(3)
.benefitBanner__link:focus
.benefitBanner__picture,
.benefitBanner.position--benefitCategory
.benefitBanner__item:nth-child(3):hover
.benefitBanner__picture {
    border-color: rgba(204, 153, 73, 0.48) !important;
    background: rgba(204, 153, 73, 0.10) !important;
    transform: none !important;
}


/* =========================================================
   TEXTOVÝ OBSAH
   ========================================================= */

.benefitBanner.position--benefitCategory
.benefitBanner__content {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;

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

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

    color: inherit !important;
    text-align: left !important;
}


/* Nadpis */

.benefitBanner.position--benefitCategory
.benefitBanner__title {
    display: block !important;

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

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

    color: var(--spb-title) !important;

    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;

    text-align: left !important;
    text-transform: uppercase !important;
}


/* Popis */

.benefitBanner.position--benefitCategory
.benefitBanner__data {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

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

    color: var(--spb-text) !important;

    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.62 !important;

    text-align: left !important;
}


/* =========================================================
   SPODNÍ LINKY
   Běžné: bílé › při hoveru červené
   VIP: vždy zlatá
   ========================================================= */

.benefitBanner.position--benefitCategory
.benefitBanner__content::after {
    content: "";

    display: block;

    width: 42px;
    height: 2px;

    margin-top: auto;
    padding-top: 20px;

    border-bottom: 2px solid #ffffff;

    transition:
        width 0.22s ease,
        border-color 0.22s ease;
}


/* Běžná karta – při hoveru červená linka */

.benefitBanner.position--benefitCategory
.benefitBanner__link:hover
.benefitBanner__content::after,
.benefitBanner.position--benefitCategory
.benefitBanner__link:focus
.benefitBanner__content::after {
    width: 68px;
    border-color: var(--spb-red);
}


/* VIP – standardně i při hoveru zlatá */

.benefitBanner.position--benefitCategory
.benefitBanner__item:nth-child(3)
.benefitBanner__content::after {
    border-color: var(--spb-gold);
}

.benefitBanner.position--benefitCategory
.benefitBanner__item:nth-child(3)
.benefitBanner__link:hover
.benefitBanner__content::after,
.benefitBanner.position--benefitCategory
.benefitBanner__item:nth-child(3)
.benefitBanner__link:focus
.benefitBanner__content::after {
    width: 68px;
    border-color: var(--spb-gold);
}


/* =========================================================
   KLÁVESNICOVÝ FOCUS
   ========================================================= */

.benefitBanner.position--benefitCategory
.benefitBanner__link:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.28) !important;
    outline-offset: 2px !important;
}


/* =========================================================
   TABLET – 2 × 2
   ========================================================= */

@media (max-width: 1199px) {
    .benefitBanner.position--benefitCategory {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 16px !important;

        padding: 24px !important;
    }

    .benefitBanner.position--benefitCategory
    .benefitBanner__link {
        min-height: 245px !important;
    }
}


/* =========================================================
   MOBIL – JEDNA KARTA NA ŘÁDEK
   ========================================================= */

@media (max-width: 767px) {
    .benefitBanner.position--benefitCategory {
        grid-template-columns: 1fr !important;
        gap: 12px !important;

        width: 100vw !important;

        margin-top: 26px !important;
        margin-right: calc(50% - 50vw) !important;
        margin-bottom: 26px !important;
        margin-left: calc(50% - 50vw) !important;

        padding: 14px !important;

        border-radius: 0 !important;
    }

    .benefitBanner.position--benefitCategory
    .benefitBanner__link {
        display: grid !important;
        grid-template-columns:
            54px minmax(0, 1fr) !important;

        column-gap: 15px !important;

        min-height: 0 !important;

        padding: 18px 16px !important;

        border-radius: 14px !important;

        transform: none;
    }

    .benefitBanner.position--benefitCategory
    .benefitBanner__link:hover,
    .benefitBanner.position--benefitCategory
    .benefitBanner__link:focus {
        transform: none;
    }

    .benefitBanner.position--benefitCategory
    .benefitBanner__picture {
        width: 54px !important;
        min-width: 54px !important;
        max-width: 54px !important;

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

        margin: 0 !important;
    }

    .benefitBanner.position--benefitCategory
    .benefitBanner__img,
    .benefitBanner.position--benefitCategory
    .benefitBanner__item:nth-child(3)
    .benefitBanner__picture
    .benefitBanner__img {
        width: 29px !important;
        min-width: 29px !important;
        max-width: 29px !important;

        height: 29px !important;
        min-height: 29px !important;
        max-height: 29px !important;
    }

    .benefitBanner.position--benefitCategory
    .benefitBanner__content {
        grid-column: 2;
    }

    .benefitBanner.position--benefitCategory
    .benefitBanner__title {
        margin-bottom: 8px !important;

        font-size: 15px !important;
        line-height: 1.35 !important;
    }

    .benefitBanner.position--benefitCategory
    .benefitBanner__data {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    /* Na mobilu se dekorativní linky nezobrazují */
    .benefitBanner.position--benefitCategory
    .benefitBanner__content::after {
        display: none;
    }
}


/* =========================================================
   VELMI ÚZKÉ TELEFONY
   ========================================================= */

@media (max-width: 390px) {
    .benefitBanner.position--benefitCategory {
        padding: 10px !important;
    }

    .benefitBanner.position--benefitCategory
    .benefitBanner__link {
        grid-template-columns:
            48px minmax(0, 1fr) !important;

        column-gap: 12px !important;

        padding: 16px 13px !important;
    }

    .benefitBanner.position--benefitCategory
    .benefitBanner__picture {
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;

        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
    }

    .benefitBanner.position--benefitCategory
    .benefitBanner__img,
    .benefitBanner.position--benefitCategory
    .benefitBanner__item:nth-child(3)
    .benefitBanner__picture
    .benefitBanner__img {
        width: 25px !important;
        min-width: 25px !important;
        max-width: 25px !important;

        height: 25px !important;
        min-height: 25px !important;
        max-height: 25px !important;
    }
}
/* =========================================================
   SONARPRO – REGISTRACE PRO AKTIVACI VIP ČLENSTVÍ
   STRÁNKA /registrace/?vip=1
   ========================================================= */

.sp-vip-registration-notice,
.sp-vip-registration-notice * {
	box-sizing: border-box;
}

.sp-vip-registration-notice {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr);
	gap: 20px;
	align-items: start;

	width: 100%;
	margin: 0 0 30px;
	padding: 25px;

	border: 1px solid rgba(13, 65, 104, 0.16);
	border-left: 5px solid #be202f;
	border-radius: 14px;

	background: #f2f7fa;
	color: #323642;

	box-shadow:
		0 9px 28px rgba(13, 65, 104, 0.06);
}

.sp-vip-registration-notice__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 58px;
	height: 58px;

	border-radius: 14px;

	background: #0d4168;
	color: #ffffff;
}

.sp-vip-registration-notice__icon::before {
	content: "\f234";

	display: inline-block;

	font-family:
		"Font Awesome 6 Free",
		"Font Awesome 5 Free",
		FontAwesome;

	font-size: 24px;
	font-style: normal;
	font-weight: 900;
	font-variant: normal;
	line-height: 1;

	text-rendering: auto;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.sp-vip-registration-notice__content {
	min-width: 0;
}

.sp-vip-registration-notice__kicker {
	margin: 0 0 5px;

	color: #be202f;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.sp-vip-registration-notice h2 {
	margin: 0 0 9px;

	color: #0d4168;
	font-size: 23px;
	font-weight: 800;
	line-height: 1.3;
}

.sp-vip-registration-notice__content > p:not(
	.sp-vip-registration-notice__kicker
) {
	margin: 0 0 8px;

	color: #50545c;
	font-size: 15px;
	line-height: 1.65;
}

.sp-vip-registration-notice__content > p:last-child {
	margin-bottom: 0;
}

/* VIP SOUHLAS */

.sp-vip-registration-consent {
	margin-top: 22px !important;
	padding: 17px 18px !important;

	border: 1px solid rgba(190, 32, 47, 0.25) !important;
	border-left: 4px solid #be202f !important;
	border-radius: 10px !important;

	background: #fff5f6 !important;

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

.sp-vip-registration-consent label {
	margin-bottom: 0 !important;

	color: #323642;
	font-size: 14px;
	line-height: 1.55;
}

.sp-vip-registration-consent label a {
	color: #0d4168 !important;
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sp-vip-registration-consent label a:hover,
.sp-vip-registration-consent label a:focus {
	color: #be202f !important;
}

.sp-vip-registration-consent input[type="checkbox"] {
	accent-color: #5f8012;
}

.sp-vip-registration-consent--error {
	border-color: #be202f !important;

	box-shadow:
		0 0 0 3px rgba(190, 32, 47, 0.12);
}

@media (max-width: 767px) {

	.sp-vip-registration-notice {
		grid-template-columns: 1fr;
		gap: 15px;

		padding: 21px 18px;
		border-radius: 12px;
	}

	.sp-vip-registration-notice__icon {
		width: 50px;
		height: 50px;
		border-radius: 12px;
	}

	.sp-vip-registration-notice__icon::before {
		font-size: 21px;
	}

	.sp-vip-registration-notice h2 {
		font-size: 21px;
	}

	.sp-vip-registration-notice__content > p:not(
		.sp-vip-registration-notice__kicker
	) {
		font-size: 14px;
	}

	.sp-vip-registration-consent {
		padding: 15px !important;
	}
}
/* =========================================================
   SONARPRO – AKTIVACE A PŘIHLÁŠENÍ DO VIP ČLENSTVÍ
   ========================================================= */

.spvip-activate {
	--spvip-blue: #0d4168;
	--spvip-red: #be202f;
	--spvip-green: #5f8012;
	--spvip-green-hover: #bfc23b;
	--spvip-text: #323642;
	--spvip-muted: #6f7480;
	--spvip-border: #dfe5ea;
	--spvip-light: #f5f8fa;
	--spvip-blue-light: #f2f7fa;
	--spvip-red-light: #fff5f6;
	--spvip-shadow: 0 10px 30px rgba(13, 65, 104, 0.08);

	width: 100%;
	color: var(--spvip-text);
	font-size: 16px;
	line-height: 1.7;
}

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

.spvip-activate h1,
.spvip-activate h2,
.spvip-activate h3,
.spvip-activate p {
	margin-top: 0;
}

.spvip-activate__container {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding-right: 24px;
	padding-left: 24px;
}

.spvip-activate__kicker {
	margin: 0 0 9px;
	color: var(--spvip-red);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

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

.spvip-activate__hero {
	padding: 58px 0;

	border-top: 1px solid var(--spvip-border);
	border-bottom: 1px solid var(--spvip-border);

	background:
		radial-gradient(
			circle at 100% 0,
			rgba(13, 65, 104, 0.09),
			transparent 36%
		),
		linear-gradient(
			135deg,
			#ffffff 0%,
			#f6f9fb 100%
		);
}

.spvip-activate__hero .spvip-activate__container {
	max-width: 930px;
	text-align: center;
}

.spvip-activate__hero h1 {
	margin: 0 0 17px;
	color: var(--spvip-blue);
	font-size: 42px;
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.025em;
}

.spvip-activate__lead {
	max-width: 760px;
	margin: 0 auto;
	color: #4f5560;
	font-size: 18px;
	line-height: 1.75;
}

/* =========================================================
   HLAVNÍ OBSAH
   ========================================================= */

.spvip-activate__section {
	padding: 60px 0 70px;
	background: #ffffff;
}

.spvip-activate__intro {
	max-width: 800px;
	margin: 0 auto 36px;
	text-align: center;
}

.spvip-activate__intro h2,
.spvip-activate__steps-heading h2,
.spvip-activate__vip-access h2 {
	margin: 0 0 12px;
	color: var(--spvip-blue);
	font-size: 28px;
	font-weight: 800;
	line-height: 1.3;
}

.spvip-activate__intro > p:last-child,
.spvip-activate__vip-access-content > p {
	margin-bottom: 0;
	color: var(--spvip-muted);
}

/* =========================================================
   REGISTRAČNÍ KARTA
   ========================================================= */

.spvip-activate__registration {
	max-width: 760px;
	margin: 0 auto 30px;
}

.spvip-activate__registration-card {
	display: flex;
	flex-direction: column;
	align-items: center;

	padding: 34px 30px;

	border: 1px solid var(--spvip-border);
	border-top: 4px solid var(--spvip-red);
	border-radius: 18px;

	background: #ffffff;
	text-align: center;

	box-shadow: var(--spvip-shadow);
}

.spvip-activate__registration-card h2 {
	margin: 0 0 12px;
	color: var(--spvip-blue);
	font-size: 25px;
	font-weight: 800;
	line-height: 1.3;
}

.spvip-activate__registration-card > p:not(.spvip-activate__label) {
	max-width: 650px;
	margin: 0 0 20px;
	color: var(--spvip-muted);
}

.spvip-activate__registration-card .spvip-activate__important {
	max-width: 650px;
}

/* =========================================================
   IKONY
   ========================================================= */

.spvip-activate__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 58px;
	height: 58px;
	margin-bottom: 17px;

	border-radius: 14px;

	background: rgba(13, 65, 104, 0.09);
	color: var(--spvip-blue);
}

.spvip-activate__icon::before,
.spvip-activate__notice-icon::before,
.spvip-activate__phone-icon::before,
.spvip-activate__help-icon::before,
.spvip-login__email-alert-icon::before,
.spvip-login__vip-crown::before {
	display: inline-block;

	font-family:
		"Font Awesome 6 Free",
		"Font Awesome 5 Free",
		FontAwesome;

	font-style: normal;
	font-weight: 900;
	font-variant: normal;
	line-height: 1;

	text-rendering: auto;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.spvip-activate__icon::before {
	font-size: 24px;
}

.spvip-activate__icon--register::before {
	content: "\f234";
}

.spvip-activate__icon--clock::before {
	content: "\f017";
}

.spvip-activate__icon--phone::before {
	content: "\f095";
}

.spvip-activate__icon--help::before {
	content: "\f0e0";
}

.spvip-activate__label {
	margin: 0 0 5px;
	color: var(--spvip-red);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* =========================================================
   DŮLEŽITÁ INFORMACE
   ========================================================= */

.spvip-activate__important {
	width: 100%;
	margin: 0 0 22px;
	padding: 13px 15px;

	border-radius: 10px;

	background: var(--spvip-light);
	color: #565d65;

	font-size: 13px;
	line-height: 1.55;
	text-align: left;
}

.spvip-activate__important strong {
	display: block;
	margin-bottom: 2px;
	color: var(--spvip-blue);
}

/* =========================================================
   EXISTUJÍCÍ ÚČET
   ========================================================= */

.spvip-activate__existing-account {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 14px;
	align-items: start;

	margin-top: 16px;
	padding: 18px 20px;

	border: 1px solid rgba(13, 65, 104, 0.14);
	border-radius: 12px;

	background: var(--spvip-blue-light);
}

.spvip-activate__existing-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 30px;
	height: 30px;

	border-radius: 50%;

	background: var(--spvip-blue);
	color: #ffffff;

	font-family: Arial, sans-serif;
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
}

.spvip-activate__existing-account h3 {
	margin: 0 0 5px;
	color: var(--spvip-blue);
	font-size: 17px;
	font-weight: 800;
	line-height: 1.35;
}

.spvip-activate__existing-account p {
	margin: 0;
	color: var(--spvip-muted);
	font-size: 14px;
	line-height: 1.6;
}

.spvip-activate__existing-links {
	margin-top: 9px;
	font-size: 14px;
}

.spvip-activate__existing-links a {
	color: var(--spvip-blue) !important;
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.spvip-activate__existing-links a:hover,
.spvip-activate__existing-links a:focus {
	color: var(--spvip-red) !important;
}

/* =========================================================
   TLAČÍTKA
   ========================================================= */

.spvip-activate__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 48px;
	padding: 12px 22px;

	border: 2px solid transparent;
	border-radius: 999px;

	font-size: 15px;
	font-weight: 800;
	line-height: 1.25;
	text-align: center;
	text-decoration: none !important;

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

.spvip-activate__button:hover,
.spvip-activate__button:focus {
	text-decoration: none !important;
	transform: translateY(-1px);
}

.spvip-activate__button--primary {
	border-color: var(--spvip-green);
	background: var(--spvip-green);
	color: #ffffff !important;
}

.spvip-activate__button--primary:hover,
.spvip-activate__button--primary:focus {
	border-color: var(--spvip-green-hover);
	background: var(--spvip-green-hover);
	color: #ffffff !important;
}

.spvip-activate__button--outline {
	border-color: var(--spvip-blue);
	background: #ffffff;
	color: var(--spvip-blue) !important;
}

.spvip-activate__button--outline:hover,
.spvip-activate__button--outline:focus {
	border-color: var(--spvip-blue);
	background: var(--spvip-blue);
	color: #ffffff !important;
}

/* =========================================================
   INFORMACE PO REGISTRACI / UPOZORNĚNÍ
   ========================================================= */

.spvip-activate__notice {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 20px;
	align-items: start;

	margin-bottom: 42px;
	padding: 25px;

	border: 1px solid rgba(190, 32, 47, 0.27);
	border-left: 5px solid var(--spvip-red);
	border-radius: 14px;

	background: var(--spvip-red-light);
}

.spvip-activate__notice-icon,
.spvip-activate__phone-icon,
.spvip-activate__help-icon {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;

	width: 56px;
	height: 56px;
	margin: 0;

	border-radius: 50%;
	color: #ffffff;
}

.spvip-activate__notice-icon {
	background: var(--spvip-red);
}

.spvip-activate__notice-icon::before,
.spvip-activate__phone-icon::before,
.spvip-activate__help-icon::before {
	font-size: 24px;
}

.spvip-activate__notice h2,
.spvip-activate__phone-note h2,
.spvip-activate__help h2 {
	margin: 0 0 8px;
	color: var(--spvip-blue);
	font-size: 21px;
	font-weight: 800;
	line-height: 1.35;
}

.spvip-activate__notice p,
.spvip-activate__phone-note p,
.spvip-activate__help-content > p {
	margin: 0 0 8px;
}

.spvip-activate__notice p:last-child,
.spvip-activate__phone-note p:last-child,
.spvip-activate__help-content > p:last-of-type {
	margin-bottom: 0;
}

/* =========================================================
   POSTUP
   ========================================================= */

.spvip-activate__steps {
	margin-bottom: 38px;
	padding: 34px;

	border-radius: 18px;
	background: var(--spvip-light);
}

.spvip-activate__steps-heading {
	margin-bottom: 25px;
	text-align: center;
}

.spvip-activate__steps-heading h2 {
	margin-bottom: 0;
}

.spvip-activate__steps-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 17px;
}

.spvip-activate__step {
	display: grid;
	grid-template-columns: 43px minmax(0, 1fr);
	gap: 14px;
	align-items: start;

	min-width: 0;
	padding: 19px;

	border: 1px solid var(--spvip-border);
	border-radius: 13px;

	background: #ffffff;
}

.spvip-activate__step > span {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 43px;
	height: 43px;

	border-radius: 50%;

	background: var(--spvip-blue);
	color: #ffffff;

	font-size: 16px;
	font-weight: 800;
	line-height: 1;
}

.spvip-activate__step h3 {
	margin: 0 0 4px;
	color: var(--spvip-blue);
	font-size: 17px;
	font-weight: 800;
	line-height: 1.35;
}

.spvip-activate__step p {
	margin: 0;
	color: var(--spvip-muted);
	font-size: 14px;
	line-height: 1.55;
}

/* =========================================================
   TELEFONICKÝ SUPPORT
   ========================================================= */

.spvip-activate__phone-note {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 20px;
	align-items: start;

	margin-bottom: 38px;
	padding: 25px;

	border: 1px solid rgba(13, 65, 104, 0.16);
	border-radius: 14px;

	background: var(--spvip-blue-light);
}

.spvip-activate__phone-icon {
	background: var(--spvip-blue);
}

/* =========================================================
   KDE VIP SEKCI NAJÍT
   ========================================================= */

.spvip-activate__vip-access {
	margin-bottom: 38px;
	padding: 30px;

	border: 1px solid var(--spvip-border);
	border-radius: 18px;

	background: #ffffff;

	box-shadow: var(--spvip-shadow);
}

.spvip-activate__vip-access h2 {
	font-size: 25px;
}

.spvip-activate__vip-access ul {
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.spvip-activate__vip-access li {
	position: relative;
	margin: 9px 0;
	padding-left: 28px;
}

.spvip-activate__vip-access li::before {
	content: "\f00c";

	position: absolute;
	top: 0.34em;
	left: 0;

	color: var(--spvip-green);

	font-family:
		"Font Awesome 6 Free",
		"Font Awesome 5 Free",
		FontAwesome;

	font-size: 14px;
	font-weight: 900;
	line-height: 1;
}

/* =========================================================
   KONTAKT
   ========================================================= */

.spvip-activate__help {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 20px;
	align-items: start;

	padding: 25px;

	border: 1px solid rgba(13, 65, 104, 0.16);
	border-radius: 14px;

	background: var(--spvip-blue-light);
}

.spvip-activate__help-icon {
	background: var(--spvip-blue);
}

.spvip-activate__help-content {
	min-width: 0;
}

.spvip-activate__help .spvip-activate__kicker {
	margin-bottom: 5px;
}

.spvip-activate__help-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
}

/* =========================================================
   PŘIHLÁŠENÍ – UPOZORNĚNÍ NA SPRÁVNÝ E-MAIL
   ========================================================= */

.spvip-login__email-alert {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 16px;
	align-items: start;

	max-width: 760px;
	margin: 22px auto 0;
	padding: 18px 20px;

	border: 1px solid rgba(190, 32, 47, 0.24);
	border-left: 5px solid var(--spvip-red);
	border-radius: 13px;

	background: var(--spvip-red-light);
	text-align: left;
}

.spvip-login__email-alert-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 48px;
	height: 48px;

	border-radius: 50%;
	background: var(--spvip-red);
	color: #ffffff;
}

.spvip-login__email-alert-icon::before {
    content: "\f071";
	font-size: 20px;
}

.spvip-login__email-alert strong {
	color: var(--spvip-blue);
	font-weight: 800;
}

.spvip-login__email-alert > div > strong {
	display: block;
	margin-bottom: 4px;
	font-size: 16px;
	line-height: 1.4;
}

.spvip-login__email-alert p {
	margin: 0;
	color: #555c66;
	font-size: 14px;
	line-height: 1.6;
}

/* =========================================================
   PŘIHLÁŠENÍ – FORMULÁŘ
   ========================================================= */

.spvip-login__form-wrapper {
	width: 100%;
	max-width: 680px;
	margin: 0 auto 38px;
}

.spvip-login__form-card {
	display: flex;
	flex-direction: column;
	align-items: center;

	width: 100%;
	padding: 34px 32px;

	border: 1px solid var(--spvip-border);
	border-top: 4px solid var(--spvip-red);
	border-radius: 18px;

	background: #ffffff;
	text-align: center;

	box-shadow: var(--spvip-shadow);
}

.spvip-login__form-card h2 {
	margin: 0 0 10px;
	color: var(--spvip-blue);
	font-size: 25px;
	font-weight: 800;
	line-height: 1.3;
}

.spvip-login__form-lead {
	max-width: 500px;
	margin: 0 0 24px;
	color: var(--spvip-muted);
}

.spvip-login__icon::before {
	content: "\f2f6";
}

.spvip-login__form {
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
	text-align: left;
}

.spvip-login__field {
	margin-bottom: 17px;
}

.spvip-login__field label {
	display: block;
	margin-bottom: 6px;
	color: var(--spvip-blue);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.4;
}

.spvip-login__field .form-control {
	display: block;
	width: 100%;
	height: 48px;
	padding: 10px 14px;

	border: 1px solid #cfd8df;
	border-radius: 8px;

	background: #ffffff;
	color: var(--spvip-text);

	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
}

.spvip-login__field .form-control:focus {
	border-color: var(--spvip-blue);
	outline: none;
	box-shadow: 0 0 0 3px rgba(13, 65, 104, 0.1);
}

.spvip-login__submit {
	margin: 24px 0 0;
	text-align: center;
}

.spvip-login__submit .spvip-activate__button {
	width: 100%;
	cursor: pointer;
}

.spvip-login__password-link {
	margin-top: 15px;
	text-align: center;
}

.spvip-login__password-link a {
	color: var(--spvip-blue) !important;
	font-size: 14px;
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.spvip-login__password-link a:hover,
.spvip-login__password-link a:focus {
	color: var(--spvip-red) !important;
}

.spvip-login__important {
	max-width: 680px;
	margin: 16px auto 0;
}

/* =========================================================
   PŘIHLÁŠENÍ – UPOZORNĚNÍ NA NEZOBRAZENÉ VIP TLAČÍTKO
   ========================================================= */

.spvip-login__notice-icon::before {
	content: "\f071";
}

/* =========================================================
   PŘIHLÁŠENÍ – UKÁZKA VIP TLAČÍTKA
   ========================================================= */

.spvip-login__button-preview {
	margin: 26px auto 0;
	padding: 22px 20px;

	border: 1px solid rgba(13, 65, 104, 0.14);
	border-radius: 13px;

	background: #ffffff;
	text-align: center;
}

.spvip-login__button-preview-label {
	margin: 0 0 13px;
	color: var(--spvip-blue);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.45;
}

.spvip-login__vip-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	min-height: 50px;
	padding: 12px 18px;

	border: 2px solid #d4af37;
	border-radius: 3px;

	background: #0d2940;
	color: #f3c94f;

	font-size: 14px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-transform: uppercase;
    margin-bottom: 20px;

	box-shadow:
		0 2px 4px rgba(0, 0, 0, 0.28),
		0 0 0 1px rgba(212, 175, 55, 0.18);
}

.spvip-login__vip-crown {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #f3c94f;
}

.spvip-login__vip-crown::before {
	content: "\f521";
	font-size: 15px;
}

.spvip-login__button-preview-note {
	margin: 13px 0 0;
	color: var(--spvip-muted);
	font-size: 13px;
	line-height: 1.55;
}

/* =========================================================
   MOBIL
   ========================================================= */

@media (max-width: 767px) {

	.spvip-activate {
		font-size: 15px;
	}

	.spvip-activate__container {
		padding-right: 16px;
		padding-left: 16px;
	}

	.spvip-activate__hero {
		padding: 42px 0;
	}

	.spvip-activate__hero h1 {
		font-size: 31px;
	}

	.spvip-activate__lead {
		font-size: 16px;
		line-height: 1.65;
	}

	.spvip-activate__section {
		padding: 42px 0 50px;
	}

	.spvip-activate__intro h2,
	.spvip-activate__steps-heading h2 {
		font-size: 24px;
	}

	.spvip-activate__registration-card {
		padding: 27px 20px;
		border-radius: 15px;
	}

	.spvip-activate__registration-card h2 {
		font-size: 23px;
	}

	.spvip-activate__button {
		width: 100%;
	}

	.spvip-activate__existing-account {
		grid-template-columns: 1fr;
		padding: 17px;
	}

	.spvip-activate__notice,
	.spvip-activate__phone-note,
	.spvip-activate__help {
		grid-template-columns: 1fr;
		gap: 15px;
		padding: 21px 18px;
	}

	.spvip-activate__notice-icon,
	.spvip-activate__phone-icon,
	.spvip-activate__help-icon {
		width: 50px;
		height: 50px;
	}

	.spvip-activate__notice-icon::before,
	.spvip-activate__phone-icon::before,
	.spvip-activate__help-icon::before {
		font-size: 21px;
	}

	.spvip-activate__steps {
		padding: 25px 16px;
		border-radius: 15px;
	}

	.spvip-activate__steps-grid {
		grid-template-columns: 1fr;
		gap: 13px;
	}

	.spvip-activate__step {
		padding: 17px 15px;
	}

	.spvip-activate__vip-access {
		padding: 24px 19px;
		border-radius: 15px;
	}

	.spvip-activate__vip-access h2 {
		font-size: 23px;
	}

	.spvip-activate__help-actions {
		display: grid;
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.spvip-login__email-alert {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 17px;
	}

	.spvip-login__email-alert-icon {
		width: 44px;
		height: 44px;
	}

	.spvip-login__form-wrapper {
		margin-bottom: 30px;
	}

	.spvip-login__form-card {
		padding: 27px 19px;
		border-radius: 15px;
	}

	.spvip-login__form-card h2 {
		font-size: 23px;
	}

	.spvip-login__button-preview {
		padding: 20px 15px;
	}

	.spvip-login__vip-button {
		width: 100%;
		max-width: 290px;
		padding: 12px 15px;
		font-size: 13px;
	}

}
/* =========================================================
   SONARPRO – KONTAKTNÍ STRÁNKA
   Styly jsou uzavřené pod třídou .sp-contact-page
   ========================================================= */

.sp-contact-page {
    --sp-contact-blue: #0d4168;
    --sp-contact-blue-dark: #093654;
    --sp-contact-blue-light: #edf4f8;
    --sp-contact-red: #be202f;
    --sp-contact-red-dark: #a51b29;
    --sp-contact-red-light: #fbedef;
    --sp-contact-green: #5f8012;
    --sp-contact-green-hover: #bfc23b;
    --sp-contact-text: #343b43;
    --sp-contact-muted: #6f7680;
    --sp-contact-border: #dfe5ea;
    --sp-contact-background: #f4f7f9;
    --sp-contact-white: #ffffff;

    width: 100%;
    color: var(--sp-contact-text);
    font-size: 16px;
    line-height: 1.7;
}

.sp-contact-page *,
.sp-contact-page *::before,
.sp-contact-page *::after {
    box-sizing: border-box;
}

.sp-contact-page h1,
.sp-contact-page h2,
.sp-contact-page h3,
.sp-contact-page h4,
.sp-contact-page p,
.sp-contact-page address,
.sp-contact-page ul {
    margin-top: 0;
}

.sp-contact-page h1,
.sp-contact-page h2,
.sp-contact-page h3,
.sp-contact-page h4 {
    color: var(--sp-contact-blue);
    line-height: 1.25;
}

.sp-contact-page a {
    text-decoration: none;
}

.sp-contact-page address {
    margin-bottom: 0;
    font-style: normal;
}

.sp-contact-kicker {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--sp-contact-red);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}


/* =========================================================
   HLAVNÍ SEKCE
   ========================================================= */

.sp-contact-support,
.sp-contact-form-section,
.sp-contact-operator {
    margin-bottom: 75px;
}

.sp-contact-section-heading,
.sp-contact-form-section__intro,
.sp-contact-operator__intro {
    max-width: 820px;
    margin: 0 auto 38px;
    text-align: center;
}

.sp-contact-section-heading h1 {
    margin-bottom: 16px;
    font-size: 38px;
    font-weight: 700;
}

.sp-contact-form-section__intro h2,
.sp-contact-operator__intro h2 {
    margin-bottom: 14px;
    font-size: 30px;
    font-weight: 700;
}

.sp-contact-section-heading p {
    margin-bottom: 0;
    color: var(--sp-contact-muted);
    font-size: 18px;
    line-height: 1.75;
}

.sp-contact-form-section__intro p,
.sp-contact-operator__intro p {
    margin-bottom: 0;
    color: var(--sp-contact-muted);
}

/* =========================================================
   KONTAKTNÍ KARTY
   ========================================================= */

.sp-contact-support__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
    align-items: stretch;
}

.sp-contact-support-card {
    display: flex;
    position: relative;
    flex-direction: column;
    overflow: hidden;
    padding: 35px;
    border: 1px solid var(--sp-contact-border);
    border-radius: 17px;
    background: var(--sp-contact-white);
    box-shadow: 0 10px 32px rgba(13, 65, 104, 0.08);
}

.sp-contact-support-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    background: var(--sp-contact-red);
}

.sp-contact-support-card__top {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24px;
}

.sp-contact-support-card__icon {
    display: flex;
    flex: 0 0 62px;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-right: 19px;
    border-radius: 15px;
    background: var(--sp-contact-red-light);
    color: var(--sp-contact-red);
    font-size: 25px;
}

.sp-contact-support-card__title {
    min-width: 0;
}

.sp-contact-support-card__label {
    display: block;
    margin-bottom: 5px;
    color: var(--sp-contact-red);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.sp-contact-support-card__title h2 {
    margin-bottom: 0;
    font-size: 23px;
    font-weight: 700;
}

.sp-contact-support-card__intro {
    margin-bottom: 25px;
    color: var(--sp-contact-muted);
}

.sp-contact-support-card__list {
    margin-bottom: 28px;
    padding: 0;
    list-style: none;
}

.sp-contact-support-card__list li {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 10px;
    color: var(--sp-contact-text);
}

.sp-contact-support-card__list li:last-child {
    margin-bottom: 0;
}

.sp-contact-support-card__list i {
    padding-top: 5px;
    color: var(--sp-contact-green);
    font-size: 13px;
}


/* =========================================================
   KONTAKTNÍ OSOBA / ODDĚLENÍ
   ========================================================= */

.sp-contact-person {
    display: flex;
    align-items: center;
    margin-top: auto;
    margin-bottom: 22px;
    padding: 20px;
    border-radius: 12px;
    background: var(--sp-contact-background);
}

.sp-contact-person__avatar {
    display: flex;
    flex: 0 0 52px;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-right: 15px;
    border-radius: 50%;
    background: var(--sp-contact-red);
    color: #ffffff;
    font-size: 20px;
}

.sp-contact-person__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sp-contact-person__label {
    color: var(--sp-contact-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.sp-contact-person__content strong {
    color: var(--sp-contact-blue);
    font-size: 17px;
}

.sp-contact-person__content > span:last-child {
    color: var(--sp-contact-muted);
    font-size: 14px;
}


/* =========================================================
   TELEFON A E-MAIL
   ========================================================= */

.sp-contact-details {
    display: grid;
    grid-template-columns: 1fr;
    gap: 11px;
    margin-bottom: 20px;
}

.sp-contact-detail {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 15px 17px;
    border: 1px solid var(--sp-contact-border);
    border-radius: 10px;
    background: #ffffff;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

a.sp-contact-detail:hover {
    transform: translateY(-2px);
    border-color: rgba(190, 32, 47, 0.38);
    box-shadow: 0 7px 20px rgba(13, 65, 104, 0.1);
}

.sp-contact-detail__icon {
    display: flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-right: 13px;
    border-radius: 50%;
    background: var(--sp-contact-red-light);
    color: var(--sp-contact-red);
    font-size: 17px;
}

.sp-contact-detail__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sp-contact-detail__content small {
    color: var(--sp-contact-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.sp-contact-detail__content strong {
    overflow-wrap: anywhere;
    color: var(--sp-contact-red);
    font-size: 16px;
    line-height: 1.35;
}

.sp-contact-detail--pending {
    background: #f8f9fa;
}

.sp-contact-detail--pending .sp-contact-detail__content strong {
    color: var(--sp-contact-muted);
}


/* =========================================================
   INFORMAČNÍ UPOZORNĚNÍ
   ========================================================= */

.sp-contact-notice {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    padding: 15px 17px;
    border-left: 3px solid var(--sp-contact-red);
    border-radius: 7px;
    background: var(--sp-contact-red-light);
}

.sp-contact-notice i {
    padding-top: 4px;
    color: var(--sp-contact-red);
}

.sp-contact-notice p {
    margin-bottom: 0;
    color: var(--sp-contact-text);
    font-size: 14px;
    line-height: 1.55;
}



/* =========================================================
   KONTAKTNÍ FORMULÁŘ
   ========================================================= */

.sp-contact-form-section {
    padding: 60px 45px;
    border-radius: 18px;
    background: var(--sp-contact-background);
}

.sp-contact-form-box {
    max-width: 920px;
    margin: 0 auto;
    padding: 40px;
    border: 1px solid var(--sp-contact-border);
    border-top: 4px solid var(--sp-contact-blue);
    border-radius: 15px;
    background: var(--sp-contact-white);
    box-shadow: 0 10px 34px rgba(13, 65, 104, 0.08);
}

.sp-contact-form-box .form-group {
    margin-bottom: 20px;
}

.sp-contact-form-box label {
    margin-bottom: 7px;
    color: var(--sp-contact-blue);
    font-weight: 700;
}

.sp-contact-form-box input[type="text"],
.sp-contact-form-box input[type="email"],
.sp-contact-form-box input[type="tel"],
.sp-contact-form-box textarea,
.sp-contact-form-box select,
.sp-contact-form-box .form-control {
    width: 100%;
    min-height: 47px;
    padding: 11px 13px;
    border: 1px solid #ccd4da;
    border-radius: 6px;
    background: #ffffff;
    color: var(--sp-contact-text);
    box-shadow: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.sp-contact-form-box textarea,
.sp-contact-form-box textarea.form-control {
    min-height: 155px;
    resize: vertical;
}

.sp-contact-form-box input:focus,
.sp-contact-form-box textarea:focus,
.sp-contact-form-box select:focus,
.sp-contact-form-box .form-control:focus {
    border-color: var(--sp-contact-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 65, 104, 0.1);
}

.sp-contact-form-box .btn,
.sp-contact-form-box button[type="submit"],
.sp-contact-form-box input[type="submit"] {
    min-height: 47px;
    padding: 12px 25px;
    border: 0;
    border-radius: 6px;
    background: var(--sp-contact-green);
    color: #ffffff;
    font-weight: 700;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.sp-contact-form-box .btn:hover,
.sp-contact-form-box button[type="submit"]:hover,
.sp-contact-form-box input[type="submit"]:hover {
    transform: translateY(-1px);
    background: var(--sp-contact-green-hover);
    color: var(--sp-contact-blue-dark);
}


/* =========================================================
   KOTVA – ÚDAJE O PROVOZOVATELI
   ========================================================= */

#udaje-o-provozovateli {
    position: relative;
    scroll-margin-top: 130px;
}

.sp-contact-anchor-offset {
    position: absolute;
    top: -130px;
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}


/* =========================================================
   ÚDAJE O PROVOZOVATELI
   ========================================================= */

.sp-contact-operator__intro strong {
    color: var(--sp-contact-blue);
}

.sp-contact-operator__card {
    padding: 38px;
    border: 1px solid var(--sp-contact-border);
    border-radius: 17px;
    background: var(--sp-contact-white);
    box-shadow: 0 10px 32px rgba(13, 65, 104, 0.08);
}

.sp-contact-operator__header {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 27px;
    border-bottom: 1px solid var(--sp-contact-border);
}

.sp-contact-operator__icon {
    display: flex;
    flex: 0 0 64px;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-right: 19px;
    border-radius: 15px;
    background: var(--sp-contact-blue);
    color: #ffffff;
    font-size: 25px;
}

.sp-contact-operator__label {
    display: block;
    margin-bottom: 4px;
    color: var(--sp-contact-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.sp-contact-operator__header h3 {
    margin-bottom: 0;
    font-size: 24px;
}

.sp-contact-operator__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 38px;
}

.sp-contact-operator-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
}

.sp-contact-operator-item__icon {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 3px;
    color: var(--sp-contact-red);
    font-size: 21px;
}

.sp-contact-operator-item h4 {
    margin-bottom: 7px;
    font-size: 16px;
    font-weight: 700;
}

.sp-contact-operator-item p,
.sp-contact-operator-item address {
    margin-bottom: 0;
    color: var(--sp-contact-text);
}

.sp-contact-operator-item a {
    color: var(--sp-contact-blue);
    font-weight: 700;
}

.sp-contact-operator-item a:hover {
    color: var(--sp-contact-red);
    text-decoration: underline;
}

.sp-contact-vat-badge {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 11px;
    border-radius: 20px;
    background: rgba(95, 128, 18, 0.12);
    color: var(--sp-contact-green);
    font-size: 13px;
    font-weight: 700;
}


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

@media (max-width: 991px) {

    .sp-contact-support__grid {
        grid-template-columns: 1fr;
    }

    .sp-contact-form-section {
        padding: 50px 30px;
    }

    .sp-contact-operator__grid {
        gap: 25px;
    }

}


/* =========================================================
   MOBIL
   ========================================================= */

@media (max-width: 767px) {

    .sp-contact-page {
        font-size: 15px;
    }

    .sp-contact-support,
    .sp-contact-form-section,
    .sp-contact-operator {
        margin-bottom: 55px;
    }

    .sp-contact-section-heading,
    .sp-contact-form-section__intro,
    .sp-contact-operator__intro {
        margin-bottom: 29px;
        text-align: left;
    }

    .sp-contact-section-heading h1 {
        font-size: 30px;
    }

    .sp-contact-section-heading p {
        font-size: 16px;
        line-height: 1.65;
    }

    .sp-contact-form-section__intro h2,
    .sp-contact-operator__intro h2 {
        font-size: 25px;
    }

    .sp-contact-support-card {
        padding: 27px 21px;
        border-radius: 13px;
    }

    .sp-contact-support-card__top {
        display: block;
    }

    .sp-contact-support-card__icon {
        width: 55px;
        height: 55px;
        margin-right: 0;
        margin-bottom: 16px;
    }

    .sp-contact-support-card__title h2 {
        font-size: 21px;
    }

    .sp-contact-person {
        padding: 17px;
    }

    .sp-contact-person__avatar {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
    }

    .sp-contact-form-section {
        margin-right: -15px;
        margin-left: -15px;
        padding: 43px 15px;
        border-radius: 0;
    }

    .sp-contact-form-box {
        padding: 27px 20px;
        border-radius: 12px;
    }

    #udaje-o-provozovateli {
        scroll-margin-top: 95px;
    }

    .sp-contact-anchor-offset {
        top: -95px;
    }

    .sp-contact-operator__card {
        padding: 27px 21px;
        border-radius: 13px;
    }

    .sp-contact-operator__header {
        align-items: flex-start;
    }

    .sp-contact-operator__icon {
        flex-basis: 54px;
        width: 54px;
        height: 54px;
        margin-right: 15px;
    }

    .sp-contact-operator__header h3 {
        font-size: 20px;
    }

    .sp-contact-operator__grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

}


/* =========================================================
   VELMI MALÉ DISPLEJE
   ========================================================= */

@media (max-width: 420px) {

    .sp-contact-person {
        align-items: flex-start;
    }

    .sp-contact-detail {
        padding: 14px;
    }

    .sp-contact-detail__icon {
        flex-basis: 39px;
        width: 39px;
        height: 39px;
    }

    .sp-contact-detail__content strong {
        font-size: 15px;
    }

    .sp-contact-operator__header {
        display: block;
    }

    .sp-contact-operator__icon {
        margin-right: 0;
        margin-bottom: 15px;
    }

    .sp-contact-operator-item {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 10px;
    }

}


/* =========================================================
   SOURCE: footer-banner-v10(1).css
   ========================================================= */

/* Footer banner CSS Start */

.footer-rows,
.footer-rows * {
  box-sizing: border-box;
}

.footer-rows .site-name {
  margin-bottom: 28px;
  text-align: center;
}

.footer-rows .site-name img {
  max-width: 240px;
  height: auto;
}

.custom-footer.elements-1 {
  width: 100%;
}

.custom-footer.elements-1 .custom-footer__banner15,
.custom-footer.elements-1 .banner,
.custom-footer.elements-1 .banner-wrapper,
.custom-footer.elements-1 .banner-wrapper > span {
  display: block;
  width: 100%;
}

.sonar-footer-boxes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  margin: 32px 0;
}

.sonar-footer-box {
  position: relative;
  min-width: 0;
  padding: 24px 22px;
  border: 1px solid rgba(14, 64, 108, 0.12);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(14, 64, 108, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.sonar-footer-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 4px;
  border-radius: 0 0 8px 8px;
  background: #BE202F;
}

.sonar-footer-box:hover {
  transform: translateY(-3px);
  border-color: rgba(14, 64, 108, 0.25);
  box-shadow: 0 16px 36px rgba(14, 64, 108, 0.11);
}

.sonar-footer-box h3 {
  color: #0E406C !important;
}

.sonar-footer-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: auto;
  margin: 0 0 16px;
  padding: 0;
  color: #0E406C;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  cursor: default;
}

/* Velké ikony v nadpisech – jednoduchý červený čtvereček s bílou ikonou */
.sonar-footer-title > i {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

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

  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;

  flex: 0 0 34px !important;
  align-self: center;

  border: 0;
  border-radius: 10px;
  background: #BE202F !important;
  box-shadow: none;
  overflow: hidden;

  color: #ffffff !important;
  font-size: 15px;
  line-height: 1;
  transform: none;
  filter: none;
  clip-path: none;
}

.sonar-footer-title > i::before {
  position: relative;
  z-index: 1;
  color: #ffffff !important;
  background: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.sonar-footer-title > i::after {
  content: none !important;
  display: none !important;
}

.sonar-footer-box:hover .sonar-footer-title > i {
  transform: none;
  background: #BE202F !important;
  box-shadow: none;
  filter: none;
}

.sonar-footer-box .accordion__content {
  display: block;
  height: auto;
  overflow: visible;
}

.sonar-footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sonar-footer-list li {
  margin: 0 0 9px;
  padding: 0;
}

.sonar-footer-list li:last-child {
  margin-bottom: 0;
}

.sonar-footer-list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #7c7e8f;
  font-size: 14px;
  line-height: 1.45;
  text-decoration: none;
  transition: color 0.18s ease, transform 0.18s ease;
}

.sonar-footer-list a:hover {
  color: #BE202F;
  transform: translateX(2px);
}

/* Malé kontaktní ikony */
.sonar-footer-contact-list a i {
  width: 16px;
  flex: 0 0 16px;
  color: #BE202F;
  font-size: 16px;
  text-align: center;
  margin-right: 10px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: none;
}

.sonar-footer-contact-list a i::before {
  color: #BE202F;
  text-shadow: none;
}

.sonar-footer-contact-list a i::after {
  content: none;
}

.sonar-footer-name {
  margin: 0 0 12px;
  color: #222833;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.sonar-footer-text {
  margin: 0 0 18px;
  color: #7c7e8f;
  font-size: 14px;
  line-height: 1.6;
}

.sonar-footer-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 11px 17px;
  border-radius: 999px;
  background: #0E406C;
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: transform 0.18s ease, background 0.18s ease;
}

.sonar-footer-button:hover {
  background: #0E406C;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: none;
}

.sonar-footer-button a {
  color: #ffffff !important;
}

.sonar-footer-return {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(14, 64, 108, 0.04), #ffffff);
}

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

@media (max-width: 640px) {
  .footer-rows .site-name {
    margin-bottom: 22px;
  }

  .footer-rows .site-name img {
    max-width: 210px;
  }

  .sonar-footer-boxes {
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 24px 0;
  }

  .sonar-footer-box {
    padding: 22px 20px;
    border-radius: 16px;
  }

  .sonar-footer-title {
    min-height: auto;
    margin-bottom: 14px;
    font-size: 17px;
    gap: 10px;
  }

  .sonar-footer-title > i {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;

    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;

    flex: 0 0 34px !important;
    font-size: 15px;
    border-radius: 10px;
  }

  .sonar-footer-list a,
  .sonar-footer-text {
    font-size: 14px;
  }
}

/* Footer banner CSS End */


/* Footer banner accordion full width on mobile Start */

@media (max-width: 640px) {
  .sonar-footer-boxes .sonar-footer-box .accordion__content,
  .sonar-footer-boxes .sonar-footer-box .js-accordion-content {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    clear: both !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .sonar-footer-boxes .sonar-footer-box .accordion__content > *,
  .sonar-footer-boxes .sonar-footer-box .js-accordion-content > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  .sonar-footer-boxes .sonar-footer-box {
    display: block !important;
    width: 100% !important;
  }

  .sonar-footer-boxes .sonar-footer-title {
    width: 100% !important;
  }

  .sonar-footer-boxes .sonar-footer-list {
    width: 100% !important;
  }

  .sonar-footer-boxes .sonar-footer-list a {
    width: 100%;
  }

  .sonar-footer-boxes .sonar-footer-button {
    width: 100%;
    text-align: center;
  }

  .sonar-footer-boxes .sonar-footer-title.accordion__trigger {
    pointer-events: none;
    cursor: default;
  }

  .sonar-footer-boxes .sonar-footer-title.accordion__trigger::before,
  .sonar-footer-boxes .sonar-footer-title.accordion__trigger::after {
    display: none !important;
  }
}

/* Footer banner accordion full width on mobile End */


/* =========================================================
   SOURCE: nakup-u-nas-v6(1).css
   ========================================================= */

/* CSS Document */

/* Proc nakoupit v SONARPRO CSS Start */

:root {
  --sp-blue: #0D4168;
  --sp-red: #BE1F31;
  --sp-red-hover: #9E1928;
  --sp-text: #253746;
  --sp-muted: #667784;
  --sp-soft: #F6F8FA;
  --sp-line: #DDE5EA;
  --sp-white: #FFFFFF;
  --sp-max: 1040px;
  --sp-radius: 14px;
}

.sp-page,
.sp-page * {
  box-sizing: border-box;
}

.sp-page {
	color: var(--sp-text);
	font-family: inherit;
	font-size: 18px;
	line-height: 1.75;
}

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

.sp-container {
  width: min(calc(100% - 32px), var(--sp-max));
  margin: 0 auto;
}

.sp-section {
	padding: 37px 0;
}

.sp-section--soft {
  background: var(--sp-soft);
}

.sp-kicker {
	margin: 0 0 12px;
	font-size: 18px !important;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #C22531 !important;
	font-weight: 600 !important;
	text-decoration: underline;
}

.sp-title,
.sp-heading {
  margin-top: 0;
  color: var(--sp-blue);
  line-height: 1.18;
}

.sp-title {
  max-width: 850px;
  margin-bottom: 18px;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  letter-spacing: -0.04em;
}

.sp-heading {
  margin-bottom: 20px;
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  letter-spacing: -0.025em;
}

.sp-lead {
  max-width: 780px;
  margin: 0;
  font-size: clamp(1.08rem, 2vw, 1.24rem);
}

.sp-hero {
  padding: 88px 0 74px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFB 100%);
  border-bottom: 1px solid var(--sp-line);
}

.sp-slogan {
  display: block;
  margin: 0 0 18px;
  color: var(--sp-red);
  font-size: clamp(1.3rem, 2.5vw, 1.85rem);
  font-weight: 900;
}

.sp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.sp-btn {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none !important;
  transition:
    transform 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease;
}

.sp-btn:hover {
  transform: translateY(-2px);
}

.sp-btn--primary {
  color: var(--sp-white) !important;
  background: var(--sp-red);
}

.sp-btn--primary:hover {
  background: var(--sp-red-hover);
}

.sp-btn--secondary {
  color: var(--sp-blue) !important;
  border-color: var(--sp-blue);
  background: transparent;
}

.sp-btn--secondary:hover {
  color: var(--sp-white) !important;
  background: var(--sp-blue);
}

.sp-content {
	max-width: unset;
}

.sp-content p:first-child {
  margin-top: 0;
}

.sp-content p:last-child {
  margin-bottom: 0;
}

.sp-quote {
  margin: 34px 0 0;
  padding: 24px 26px;
  border-left: 5px solid var(--sp-red);
  background: var(--sp-soft);
}

.sp-quote strong {
  color: var(--sp-blue);
}

.sp-checks {
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.sp-checks li {
  position: relative;
  padding-left: 30px;
}

.sp-checks li::before {
	position: absolute;
	top: 0.2em;
	left: 0;
	width: 20px;
	height: 20px;
	content: "?";
	color: var(--sp-white);
	border-radius: 50%;
	background: var(--sp-red);
	font-size: 1.7rem;
	font-weight: 900;
	line-height: 20px;
	text-align: center;
}

.sp-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 22px 70px;
	margin-top: 34px;
	padding-top: 28px;
	border-top: 1px solid var(--sp-line);
}

.sp-number {
	min-width: 200px;
}

.sp-number strong {
	display: block;
	color: var(--sp-red);
	font-size: 3.8rem;
	line-height: 1.1;
}

.sp-number span {
	display: block;
	margin-top: 6px;
	color: #0d0d0d;
	font-size: 1.9rem;
}

.sp-founder {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 46px;
  align-items: center;
}

.sp-founder__logo {
  padding: 24px;
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
  background: var(--sp-white);
}

.sp-red-section {
  padding: 64px 0;
  color: var(--sp-white);
  background: var(--sp-red);
}

.sp-red-section .sp-kicker,
.sp-red-section .sp-heading,
.sp-red-section .sp-lead {
  color: var(--sp-white);
}

.sp-red-section .sp-btn--secondary {
  color: var(--sp-white) !important;
  border-color: var(--sp-white);
}

.sp-red-section .sp-btn--secondary:hover {
  color: var(--sp-red) !important;
  background: var(--sp-white);
}

.sp-vip {
  margin-top: 34px;
  border-top: 1px solid var(--sp-line);
}

.sp-vip__row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 28px;
  padding: 24px 0;
  border-bottom: 1px solid var(--sp-line);
}

.sp-vip__row strong {
	color: var(--sp-red);
	font-size: 18px;
}

.sp-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 34px;
  border-top: 1px solid var(--sp-line);
  border-bottom: 1px solid var(--sp-line);
}

.sp-benefit {
  padding: 28px;
}

.sp-benefit + .sp-benefit {
  border-left: 1px solid var(--sp-line);
}

.sp-benefit h3 {
  margin: 0 0 10px;
  color: var(--sp-blue);
  font-size: 1.12rem;
}

.sp-final {
  padding: 72px 0;
  text-align: center;
  background: var(--sp-soft);
}

.sp-final .sp-lead {
  margin: 0 auto;
}

.sp-final .sp-actions {
  justify-content: center;
}
.sp-vip-intro {
  padding: 36px;
  border: 1px solid var(--sp-line);
  border-left: 5px solid var(--sp-red);
  border-radius: var(--sp-radius);
  background: var(--sp-white);
}

.sp-vip-intro .sp-heading {
  margin-bottom: 14px;
}

.sp-vip-intro .sp-btn {
  margin-top: 16px;
}

@media (max-width: 800px) {
  .sp-founder {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .sp-founder__logo {
    max-width: 420px;
  }

  .sp-benefits {
    grid-template-columns: 1fr;
  }

  .sp-benefit + .sp-benefit {
    border-top: 1px solid var(--sp-line);
    border-left: 0;
  }
}

@media (max-width: 640px) {
  .sp-section,
  .sp-final {
    padding: 54px 0;
  }

  .sp-hero {
    padding: 64px 0 56px;
  }

  .sp-red-section {
    padding: 52px 0;
  }

  .sp-vip__row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .sp-btn {
    width: 100%;
  }
}
/* Proc nakoupit v SONARPRO CSS END */


/* =========================================================
   SOURCE: co-je-vip-klub-v5(1).css
   ========================================================= */

/* =========================================================
   SONARPRO – CO JE VIP ČLENSKÝ KLUB
   Samostatné třídy s prefixem spvip-
   ========================================================= */

.spvip-page {
  --spvip-blue: #0D4168;
  --spvip-red: #BE1F31;
  --spvip-red-hover: #9E1928;
  --spvip-text: #253746;
  --spvip-muted: #667784;
  --spvip-soft: #F6F8FA;
  --spvip-line: #DDE5EA;
  --spvip-white: #FFFFFF;
  --spvip-max: 1040px;
  --spvip-radius: 14px;

  color: var(--spvip-text);
  font-family: inherit;
  font-size: 18px;
  line-height: 1.75;
}

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

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

.spvip-page p {
  margin-top: 0;
}

.spvip-container {
  width: min(calc(100% - 32px), var(--spvip-max));
  margin-right: auto;
  margin-left: auto;
}

.spvip-section {
  padding: 54px 0;
}

.spvip-section--soft {
  background: var(--spvip-soft);
}

.spvip-content {
  max-width: none;
}

.spvip-content--center {
  max-width: 820px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.spvip-content p:first-child {
  margin-top: 0;
}

.spvip-content p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   NADPISY A TEXT
   ========================================================= */

.spvip-kicker {
  margin: 0 0 12px;
  color: var(--spvip-red) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.4;
  text-decoration: underline;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.spvip-title,
.spvip-heading {
  margin-top: 0;
  color: var(--spvip-blue);
  line-height: 1.18;
}

.spvip-title {
  max-width: 880px;
  margin-bottom: 18px;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  letter-spacing: -0.04em;
}

.spvip-heading {
  margin-bottom: 20px;
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  letter-spacing: -0.025em;
}

.spvip-lead {
  max-width: 800px;
  margin: 0;
  font-size: clamp(1.08rem, 2vw, 1.24rem);
}

.spvip-slogan {
  display: block;
  margin: 0 0 18px;
  color: var(--spvip-red);
  font-size: clamp(1.3rem, 2.5vw, 1.85rem);
  font-weight: 900;
}


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

.spvip-hero {
  padding: 88px 0 74px;
  background: linear-gradient(
    180deg,
    var(--spvip-white) 0%,
    #F8FAFB 100%
  );
  border-bottom: 1px solid var(--spvip-line);
}


/* =========================================================
   TLAČÍTKA
   ========================================================= */

.spvip-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.spvip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 13px 22px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  transition:
    transform 0.18s ease,
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease;
}

.spvip-btn:hover {
  transform: translateY(-2px);
}

.spvip-btn--primary {
  color: var(--spvip-white) !important;
  background: var(--spvip-red);
  border-color: var(--spvip-red);
}

.spvip-btn--primary:hover {
  color: var(--spvip-white) !important;
  background: var(--spvip-red-hover);
  border-color: var(--spvip-red-hover);
}

.spvip-btn--secondary {
  color: var(--spvip-blue) !important;
  background: transparent;
  border-color: var(--spvip-blue);
}

.spvip-btn--secondary:hover {
  color: var(--spvip-white) !important;
  background: var(--spvip-blue);
}

.spvip-btn--block {
  width: 100%;
}


/* =========================================================
   HLAVNÍ VÝHODY
   ========================================================= */

.spvip-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 36px;
  border-top: 1px solid var(--spvip-line);
  border-bottom: 1px solid var(--spvip-line);
}

.spvip-benefit {
  padding: 30px 28px;
}

.spvip-benefit + .spvip-benefit {
  border-left: 1px solid var(--spvip-line);
}

.spvip-benefit__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  color: var(--spvip-white);
  background: var(--spvip-red);
  border-radius: 50%;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.spvip-benefit h3 {
  margin: 0 0 10px;
  color: var(--spvip-blue);
  font-size: 1.18rem;
  line-height: 1.3;
}

.spvip-benefit p {
  margin-bottom: 0;
}


/* =========================================================
   PRICING KARTY
   ========================================================= */

.spvip-pricing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
  margin-top: 42px;
}

.spvip-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--spvip-white);
  border: 2px solid var(--spvip-red);
  border-radius: var(--spvip-radius);
}


.spvip-plan__badge {
  padding: 9px 18px;
  color: var(--spvip-white);
  background: var(--spvip-red);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.spvip-plan__header {
  padding: 28px 25px 24px;
  border-bottom: 1px solid var(--spvip-line);
}

.spvip-plan__label {
  display: inline-block;
  margin-bottom: 15px;
  color: var(--spvip-red);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.spvip-plan__threshold {
  margin-bottom: 2px;
  color: var(--spvip-muted);
  font-size: 15px;
  font-weight: 700;
}

.spvip-plan__header h3 {
  margin: 0 0 17px;
  color: var(--spvip-blue);
  font-size: clamp(1.7rem, 3vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.spvip-plan__intro {
  margin-bottom: 0;
}

.spvip-plan__body {
  flex: 1;
  padding: 25px;
}

.spvip-plan__caption {
  margin-bottom: 15px;
  color: var(--spvip-blue);
  font-weight: 800;
}

.spvip-plan__features {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.spvip-plan__features li {
  position: relative;
  padding-left: 30px;
}

.spvip-plan__features li::before {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--spvip-red);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.5;
  content: "?";
}

.spvip-plan__footer {
  padding: 0 25px 28px;
}


/* =========================================================
   UPOZORNĚNÍ POD KARTAMI
   ========================================================= */

.spvip-terms {
  max-width: 880px;
  margin: 38px auto 0;
  padding: 26px 28px;
  background: var(--spvip-white);
  border: 1px solid var(--spvip-line);
  border-left: 5px solid var(--spvip-red);
  border-radius: var(--spvip-radius);
  text-align: center;
}

.spvip-terms strong {
	display: block;
	margin-bottom: 9px;
	color: var(--spvip-blue);
	font-size: 2.1rem;
}

.spvip-terms p {
  margin-bottom: 10px;
}

.spvip-terms a {
  color: var(--spvip-blue) !important;
  font-weight: 800;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}


/* =========================================================
   ZVÝRAZNĚNÁ CITACE
   ========================================================= */

.spvip-quote {
  margin: 34px 0 0;
  padding: 24px 26px;
  background: var(--spvip-soft);
  border-left: 5px solid var(--spvip-red);
}

.spvip-quote strong {
  color: var(--spvip-blue);
}


/* =========================================================
   KROKY AKTIVACE
   ========================================================= */

.spvip-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 34px;
}

.spvip-step {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 25px;
  background: var(--spvip-white);
  border: 1px solid var(--spvip-line);
  border-radius: var(--spvip-radius);
}

.spvip-step__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  color: var(--spvip-white);
  background: var(--spvip-red);
  border-radius: 50%;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.spvip-step h3 {
  margin: 2px 0 8px;
  color: var(--spvip-blue);
  font-size: 1.18rem;
  line-height: 1.3;
}

.spvip-step p {
  margin-bottom: 0;
}


/* =========================================================
   ZÁVĚREČNÉ CTA
   ========================================================= */

.spvip-final {
  padding: 72px 0;
  text-align: center;
  background: var(--spvip-soft);
}

.spvip-final .spvip-heading {
  max-width: 850px;
  margin-right: auto;
  margin-left: auto;
}

.spvip-final .spvip-lead {
  margin-right: auto;
  margin-left: auto;
}

.spvip-final .spvip-actions {
  justify-content: center;
}


/* =========================================================
   RESPONZIVNÍ ZOBRAZENÍ
   ========================================================= */

@media (max-width: 900px) {
  .spvip-pricing {
    grid-template-columns: 1fr;
    max-width: 680px;
    margin-right: auto;
    margin-left: auto;
  }

  .spvip-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  .spvip-benefits {
    grid-template-columns: 1fr;
  }

  .spvip-benefit + .spvip-benefit {
    border-top: 1px solid var(--spvip-line);
    border-left: 0;
  }
}

@media (max-width: 640px) {
  .spvip-section,
  .spvip-final {
    padding: 54px 0;
  }

  .spvip-hero {
    padding: 64px 0 56px;
  }

  .spvip-content--center,
  .spvip-terms {
    text-align: left;
  }

  .spvip-actions {
    flex-direction: column;
  }

  .spvip-btn {
    width: 100%;
  }

  .spvip-plan__header,
  .spvip-plan__body {
    padding-right: 22px;
    padding-left: 22px;
  }

  .spvip-plan__footer {
    padding-right: 22px;
    padding-bottom: 24px;
    padding-left: 22px;
  }
}

@media (max-width: 480px) {
  .spvip-container {
    width: min(calc(100% - 24px), var(--spvip-max));
  }

  .spvip-benefit {
    padding: 25px 20px;
  }

  .spvip-terms {
    padding: 22px 20px;
  }

  .spvip-step {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    padding: 21px 19px;
  }

  .spvip-step__number {
    width: 42px;
    height: 42px;
    font-size: 17px;
  }

  .spvip-quote {
    padding: 22px 20px;
  }
}
/* =========================================================
   SONARPRO – JEDNOTNÝ DESIGN HLAVNÍCH KICKERŮ
   Desktop 15 px / mobil 13 px
   Speciální .sonarpro-category-panel__kicker zůstává beze změny.
   ========================================================= */

.sonarpro-section-kicker,
.sp-cable-service .sp-kicker,
.sp-contact-kicker,
.sp-kicker,
.spvip-kicker,
.spvip-activate__kicker {
    position: relative;
    display: inline-block;
    margin-top: 0;
    margin-bottom: 14px;
    padding: 12px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #BE202F !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none !important;
}

.sonarpro-section-kicker::before,
.sp-cable-service .sp-kicker::before,
.sp-contact-kicker::before,
.sp-kicker::before,
.spvip-kicker::before,
.spvip-activate__kicker::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 34px;
    height: 4px;
    border-radius: 999px;
    background: #BE202F;
}

/* Centrované sekce – stejný design, pouze vycentrovaná linka */

.sp-contact-section-heading .sp-contact-kicker::before,
.sp-contact-form-section__intro .sp-contact-kicker::before,
.sp-contact-operator__intro .sp-contact-kicker::before,
.sp-final .sp-kicker::before,
.spvip-content--center .spvip-kicker::before,
.spvip-final .spvip-kicker::before,
.spvip-activate__hero .spvip-activate__kicker::before,
.spvip-activate__intro .spvip-activate__kicker::before,
.spvip-activate__steps-heading .spvip-activate__kicker::before,
.sp-rental-page .spr-contact-box .sonarpro-section-kicker::before {
    left: 50%;
    transform: translateX(-50%);
}

/* Kickery na tmavém pozadí */

.sp-red-section .sp-kicker,
.sp-rental-page .spr-contact-box .sonarpro-section-kicker {
    color: #FFFFFF !important;
}

.sp-red-section .sp-kicker::before,
.sp-rental-page .spr-contact-box .sonarpro-section-kicker::before {
    background: #FFFFFF;
}

/* Menší interní štítky – bez podtržení, jinak původní vzhled */

.sonarpro-card-kicker,
.sp-vip-registration-notice__kicker {
    text-decoration: none !important;
}

@media (max-width: 767px) {
    .sonarpro-section-kicker,
    .sp-cable-service .sp-kicker,
    .sp-contact-kicker,
    .sp-kicker,
    .spvip-kicker,
    .spvip-activate__kicker {
        margin-bottom: 12px;
        padding-top: 11px;
        font-size: 13px !important;
    }

    .sonarpro-section-kicker::before,
    .sp-cable-service .sp-kicker::before,
    .sp-contact-kicker::before,
    .sp-kicker::before,
    .spvip-kicker::before,
    .spvip-activate__kicker::before {
        width: 30px;
        height: 3px;
    }
}
/* =========================================================
   SONARPRO – VIP SYSTÉM
   VIP PODPORA + VIP VIDEA

   1. Badge – detail produktu
   2. Badge – výpis produktů / kategorie
   3. Tooltipy
   4. VIP karta – detail produktu
   ========================================================= */


/* =========================================================
   1. VIP BADGE – DETAIL PRODUKTU
   ========================================================= */


/* ---------------------------------------------------------
   Wrapper Shoptet příznaků přes hlavní fotografii
   --------------------------------------------------------- */

.product-top .p-image > .flags.flags-default {
    right: 0;
    left: 0;
    width: 100%;
}


/* ---------------------------------------------------------
   Společný základ badge
   --------------------------------------------------------- */

.product-top .p-image .flag.flag-vip-podpora,
.product-top .p-image .flag.flag-vip-videa {
    position: absolute;
    top: 6px;
    right: 10px;
    left: auto;

    display: block;

    width: 66px;
    height: 66px;
    min-width: 66px;

    margin: 0;
    padding: 0;

    border: 3px solid #d6a62f;
    border-radius: 50%;

    background-color: #0E406A !important;
    background-repeat: no-repeat;

    box-shadow:
        0 5px 13px rgba(14, 64, 106, 0.34),
        0 1px 3px rgba(0, 0, 0, 0.14),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    /* Skrytí původního textu Shoptetu */
    color: transparent !important;
    font-size: 0;
    line-height: 1;

    overflow: hidden;

    z-index: 20;
}


/* ---------------------------------------------------------
   VIP PODPORA – telefon
   --------------------------------------------------------- */

.product-top .p-image .flag.flag-vip-podpora {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.6 17.6 0 0 0 4.168 6.608 17.6 17.6 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58z'/%3E%3C/svg%3E");

    background-position: center 4px;
    background-size: 16px 16px;
}


/* ---------------------------------------------------------
   VIP VIDEA – play
   --------------------------------------------------------- */

.product-top .p-image .flag.flag-vip-videa {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M7 4v16l13-8z'/%3E%3C/svg%3E");

    background-position: center 4px;
    background-size: 21px 21px;
}


/* ---------------------------------------------------------
   Společný text VIP
   --------------------------------------------------------- */

.product-top .p-image .flag.flag-vip-podpora::before,
.product-top .p-image .flag.flag-vip-videa::before {
    content: "VIP";

    position: absolute;
    top: 25px;
    right: 0;
    left: 0;

    display: block;

    color: #e0ad32;

    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.25px;

    text-align: center;

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

    pointer-events: none;
}


/* ---------------------------------------------------------
   PODPORA / VIDEA
   --------------------------------------------------------- */

.product-top .p-image .flag.flag-vip-podpora::after {
    content: "PODPORA";
}

.product-top .p-image .flag.flag-vip-videa::after {
    content: "VIDEA";
}

.product-top .p-image .flag.flag-vip-podpora::after,
.product-top .p-image .flag.flag-vip-videa::after {
    position: absolute;
    top: 40px;
    right: 0;
    left: 0;

    display: block;

    color: #ffffff;

    font-size: 8.5px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.2px;

    text-align: center;

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

    pointer-events: none;
}


/* ---------------------------------------------------------
   DETAIL PRODUKTU – MOBIL
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .product-top .p-image .flag.flag-vip-podpora,
    .product-top .p-image .flag.flag-vip-videa {
        top: 6px;
        right: 6px;

        width: 56px;
        height: 56px;
        min-width: 56px;

        border-width: 2px;

        box-shadow:
            0 4px 10px rgba(14, 64, 106, 0.30),
            0 1px 2px rgba(0, 0, 0, 0.10);
    }


    /* Telefon */

    .product-top .p-image .flag.flag-vip-podpora {
        background-position: center 4px;
        background-size: 14px 14px;
    }


    /* Play */

    .product-top .p-image .flag.flag-vip-videa {
        background-position: center 4px;
        background-size: 18px 18px;
    }


    /* VIP */

    .product-top .p-image .flag.flag-vip-podpora::before,
    .product-top .p-image .flag.flag-vip-videa::before {
        top: 21px;
        font-size: 11px;
    }


    /* PODPORA / VIDEA */

    .product-top .p-image .flag.flag-vip-podpora::after,
    .product-top .p-image .flag.flag-vip-videa::after {
        top: 34px;

        font-size: 7px;
        letter-spacing: 0.1px;
    }
}


/* =========================================================
   2. VIP BADGE – VÝPIS PRODUKTŮ / KATEGORIE
   ========================================================= */


/* ---------------------------------------------------------
   Wrapper Shoptet příznaků přes obrázek produktu
   --------------------------------------------------------- */

.product .image > .flags.flags-default {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: auto;

    box-sizing: border-box;
}


/* ---------------------------------------------------------
   Společný základ badge
   Desktop / tablet
   --------------------------------------------------------- */

.product .image .flag.flag-vip-podpora,
.product .image .flag.flag-vip-videa {
    position: absolute;

    top: auto;
    right: 2px;
    bottom: 8px;
    left: auto;

    display: block;

    width: 58px;
    height: 58px;
    min-width: 58px;

    margin: 0;
    padding: 0;

    border: 2px solid #d6a62f;
    border-radius: 50%;

    background-color: #0E406A !important;
    background-repeat: no-repeat;

    box-shadow:
        0 4px 10px rgba(14, 64, 106, 0.30),
        0 1px 2px rgba(0, 0, 0, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    /* Skrytí původního textu Shoptetu */
    color: transparent !important;
    font-size: 0;
    line-height: 1;

    overflow: visible;

    z-index: 20;
}


/* ---------------------------------------------------------
   VIP PODPORA – telefon
   --------------------------------------------------------- */

.product .image .flag.flag-vip-podpora {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.6 17.6 0 0 0 4.168 6.608 17.6 17.6 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58z'/%3E%3C/svg%3E");

    background-position: center 4px;
    background-size: 15px 15px;
}


/* ---------------------------------------------------------
   VIP VIDEA – play
   --------------------------------------------------------- */

.product .image .flag.flag-vip-videa {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M7 4v16l13-8z'/%3E%3C/svg%3E");

    background-position: center 4px;
    background-size: 17px 17px;
}


/* ---------------------------------------------------------
   Společný text VIP
   --------------------------------------------------------- */

.product .image .flag.flag-vip-podpora::before,
.product .image .flag.flag-vip-videa::before {
    content: "VIP";

    position: absolute;
    top: 22px;
    right: 0;
    left: 0;

    display: block;

    color: #e0ad32;

    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.2px;

    text-align: center;

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

    pointer-events: none;
}


/* ---------------------------------------------------------
   PODPORA / VIDEA
   --------------------------------------------------------- */

.product .image .flag.flag-vip-podpora::after {
    content: "PODPORA";
}

.product .image .flag.flag-vip-videa::after {
    content: "VIDEA";
}

.product .image .flag.flag-vip-podpora::after,
.product .image .flag.flag-vip-videa::after {
    position: absolute;
    top: 35px;
    right: 0;
    left: 0;

    display: block;

    color: #ffffff;

    font-size: 7px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.1px;

    text-align: center;

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

    pointer-events: none;
}


/* ---------------------------------------------------------
   VÝPIS PRODUKTŮ – MOBIL DO 767 px

   Finální kompaktní varianta:
   44 × 44 px, pravý horní roh
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .product .image .flag.flag-vip-podpora,
    .product .image .flag.flag-vip-videa {
        top: -10px;
        right: -10px;
        bottom: auto;
        left: auto;

        width: 44px;
        height: 44px;
        min-width: 44px;

        border-width: 2px;

        box-shadow:
            0 3px 7px rgba(14, 64, 106, 0.25),
            0 1px 2px rgba(0, 0, 0, 0.08);
    }


    /* Telefon */

    .product .image .flag.flag-vip-podpora {
        background-position: center 3px;
        background-size: 11px 11px;
    }


    /* Play */

    .product .image .flag.flag-vip-videa {
        background-position: center 2px;
        background-size: 14px 14px;
    }


    /* VIP */

    .product .image .flag.flag-vip-podpora::before,
    .product .image .flag.flag-vip-videa::before {
        top: 16px;

        font-size: 8.5px;
        letter-spacing: 0.1px;
    }


    /* PODPORA / VIDEA */

    .product .image .flag.flag-vip-podpora::after,
    .product .image .flag.flag-vip-videa::after {
        top: 27px;

        font-size: 5.6px;
        letter-spacing: 0;
    }
}


/* =========================================================
   3. VIP BADGE – TOOLTIPS
   VIP PODPORA + VIP VIDEA
   ========================================================= */


/* Badge musí umožnit tooltipu přesah mimo kruh */

.flag.flag-vip-podpora,
.flag.flag-vip-videa {
    overflow: visible !important;
}


/* ---------------------------------------------------------
   Tooltip
   --------------------------------------------------------- */

.sp-vip-tooltip {
    position: absolute;
    top: 50%;
    right: calc(100% + 11px);

    width: 220px;
    max-width: calc(100vw - 40px);

    padding: 10px 12px 11px;

    border: 1px solid rgba(14, 64, 106, 0.16);
    border-top: 3px solid #d6a62f;
    border-radius: 9px;

    background: #ffffff;

    box-shadow:
        0 8px 24px rgba(14, 64, 106, 0.15),
        0 2px 6px rgba(0, 0, 0, 0.06);

    color: #333333 !important;

    font-size: 12px !important;
    font-weight: 400;
    line-height: 1.4;

    letter-spacing: 0 !important;
    text-align: left;
    text-indent: 0 !important;
    text-transform: none;
    white-space: normal;

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(-50%)
        translateX(4px);

    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        visibility 0.18s ease;

    pointer-events: none;

    z-index: 100;
}


/* Šipka tooltipu */

.sp-vip-tooltip::after {
    content: "";

    position: absolute;
    top: 50%;
    right: -7px;

    width: 12px;
    height: 12px;

    border-top:
        1px solid rgba(14, 64, 106, 0.16);

    border-right:
        1px solid rgba(14, 64, 106, 0.16);

    background: #ffffff;

    transform:
        translateY(-50%)
        rotate(45deg);

    z-index: -1;
}


/* Nadpis tooltipu */

.sp-vip-tooltip__title {
    display: block;

    margin: 0 0 4px;

    color: #0E406A !important;

    font-size: 12px !important;
    font-weight: 800;
    line-height: 1.2;

    letter-spacing: 0.15px !important;
    text-indent: 0 !important;
    text-transform: uppercase;
}


/* Text tooltipu */

.sp-vip-tooltip__text {
    display: block;

    margin: 0;

    color: #444444 !important;

    font-size: 12px !important;
    font-weight: 400;
    line-height: 1.4;

    letter-spacing: 0 !important;
    text-indent: 0 !important;
    text-transform: none;
}


/* ---------------------------------------------------------
   Tooltip pouze na zařízení s myší
   --------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

    .flag.flag-vip-podpora:hover .sp-vip-tooltip,
    .flag.flag-vip-videa:hover .sp-vip-tooltip {
        opacity: 1;
        visibility: visible;

        transform:
            translateY(-50%)
            translateX(0);
    }
}


/* ---------------------------------------------------------
   Mobil / dotyková zařízení
   --------------------------------------------------------- */

@media (hover: none), (pointer: coarse) {

    .sp-vip-tooltip {
        display: none !important;
    }
}


/* =========================================================
   4. SONARPRO VIP KARTA – DETAIL PRODUKTU
   VIP PODPORA + VIP VIDEA
   ========================================================= */


/* ---------------------------------------------------------
   Základní obal
   --------------------------------------------------------- */

#product-detail-form .sp-product-vip-support {
    box-sizing: border-box;
    width: 100%;
}

#product-detail-form .product-top > .sp-product-vip-support {
    clear: both;
}


/* ---------------------------------------------------------
   Umístění
   --------------------------------------------------------- */

#product-detail-form .sp-product-vip-support--desktop {
    margin-top: 24px;
    margin-bottom: 6px;
}

#product-detail-form .sp-product-vip-support--mobile {
    float: none;

    width: 100%;

    margin: 18px 0 16px;
    padding: 0;
}


/* ---------------------------------------------------------
   Hlavní karta
   --------------------------------------------------------- */

#product-detail-form .sp-product-vip-support__inner {
    position: relative;

    display: grid;

    grid-template-columns:
        50px
        minmax(0, 1fr);

    gap: 22px;

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

    padding: 24px 28px 23px;

    border: 1px solid #dbe4ec;
    border-radius: 18px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfcfe 100%
        );

    box-shadow:
        0 10px 28px rgba(13, 65, 104, 0.08),
        0 2px 6px rgba(0, 0, 0, 0.04);
}


/* Zlatý horní pruh */

#product-detail-form
.sp-product-vip-support__inner::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 5px;

    border-radius:
        18px
        18px
        0
        0;

    background: #d6a62f;
}


/* ---------------------------------------------------------
   Ikona
   Základ = telefon VIP PODPORA
   --------------------------------------------------------- */

#product-detail-form
.sp-product-vip-support__icon {
    position: relative;

    width: 50px;
    height: 50px;

    box-sizing: border-box;

    margin-top: 2px;

    border: 2px solid #0E406A;
    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 3px 8px rgba(14, 64, 106, 0.10);
}

#product-detail-form
.sp-product-vip-support__icon::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 25px;
    height: 25px;

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

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%230E406A' d='M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.6 17.6 0 0 0 4.168 6.608 17.6 17.6 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58z'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


/* ---------------------------------------------------------
   Obsah
   --------------------------------------------------------- */

#product-detail-form
.sp-product-vip-support__content {
    display: grid;

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

    grid-template-areas:
        "heading heading"
        "subheading subheading"
        "benefits link";

    column-gap: 26px;
    row-gap: 0;

    min-width: 0;
}


/* ---------------------------------------------------------
   Hlavní nadpis
   --------------------------------------------------------- */

#product-detail-form
.sp-product-vip-support__heading {
    grid-area: heading;

    margin: 0 0 6px;

    color: #0E406A;

    font-size: 26px;
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: 0.05px;
}


/* ---------------------------------------------------------
   Podnadpis
   --------------------------------------------------------- */

#product-detail-form
.sp-product-vip-support__subheading {
    grid-area: subheading;

    margin: 0 0 17px;

    color: #d6a62f;

    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.35;
}


/* ---------------------------------------------------------
   Benefity – 3 sloupce
   --------------------------------------------------------- */

#product-detail-form
.sp-product-vip-support__benefits {
    grid-area: benefits;

    display: grid;

    grid-template-columns:
        minmax(145px, 1fr)
        minmax(155px, 1.1fr)
        minmax(165px, 1.2fr);

    align-items: start;

    gap: 20px;

    min-width: 0;

    margin: 0;
    padding: 0;

    list-style: none;
}

#product-detail-form
.sp-product-vip-support__benefit {
    position: relative;

    min-width: 0;

    margin: 0;
    padding-left: 27px;

    color: #17324d;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
}


/* Modrý kruh + modrá fajfka */

#product-detail-form
.sp-product-vip-support__benefit::before {
    content: "";

    position: absolute;

    top: 1px;
    left: 0;

    width: 18px;
    height: 18px;

    box-sizing: border-box;

    border: 1.5px solid #0E406A;
    border-radius: 50%;

    background-color: transparent;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230E406A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' d='M3.4 8.2l2.5 2.5 6.5-6.1'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 10px;
}


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

#product-detail-form
.sp-product-vip-support__link {
    grid-area: link;

    align-self: start;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin: 0;

    color: #0E406A;

    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;

    white-space: nowrap;

    text-decoration: none;
}

#product-detail-form
.sp-product-vip-support__link-text {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

#product-detail-form
.sp-product-vip-support__link::after {
    content: "→";

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

    text-decoration: none;

    transition:
        transform 0.18s ease,
        color 0.18s ease;
}

#product-detail-form
.sp-product-vip-support__link:hover,
#product-detail-form
.sp-product-vip-support__link:focus {
    color: #BE202F;

    text-decoration: none;
}

#product-detail-form
.sp-product-vip-support__link:hover::after,
#product-detail-form
.sp-product-vip-support__link:focus::after {
    transform: translateX(3px);
}


/* =========================================================
   VIP KARTA – MENŠÍ DESKTOP
   992–1199 px
   ========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    #product-detail-form
    .sp-product-vip-support__inner {
        grid-template-columns:
            48px
            minmax(0, 1fr);

        gap: 18px;

        padding:
            22px
            22px
            21px;
    }

    #product-detail-form
    .sp-product-vip-support__icon {
        width: 48px;
        height: 48px;
    }

    #product-detail-form
    .sp-product-vip-support__icon::before {
        width: 14px;
        height: 14px;
    }

    #product-detail-form
    .sp-product-vip-support__heading {
        font-size: 24px;
    }

    #product-detail-form
    .sp-product-vip-support__subheading {
        font-size: 14.5px;
    }

    #product-detail-form
    .sp-product-vip-support__content {
        column-gap: 18px;
    }

    #product-detail-form
    .sp-product-vip-support__benefits {
        grid-template-columns:
            minmax(125px, 1fr)
            minmax(135px, 1.08fr)
            minmax(145px, 1.15fr);

        gap: 14px;
    }

    #product-detail-form
    .sp-product-vip-support__benefit {
        padding-left: 25px;

        font-size: 13.5px;
    }

    #product-detail-form
    .sp-product-vip-support__benefit::before {
        width: 17px;
        height: 17px;

        background-size: 9px 9px;
    }

    #product-detail-form
    .sp-product-vip-support__link {
        font-size: 13.5px;
    }
}


/* =========================================================
   VIP KARTA – MOBIL / TABLET DO 991 px
   ========================================================= */

@media (max-width: 991px) {

    #product-detail-form
    .sp-product-vip-support--mobile {
        margin-top: 18px;
        margin-bottom: 16px;
    }


    /* Karta */

    #product-detail-form
    .sp-product-vip-support__inner {
        grid-template-columns:
            46px
            minmax(0, 1fr);

        gap: 15px;

        padding:
            20px
            18px
            18px;

        border-radius: 16px;
    }

    #product-detail-form
    .sp-product-vip-support__inner::before {
        height: 4px;

        border-radius:
            16px
            16px
            0
            0;
    }


    /* Ikona */

    #product-detail-form
    .sp-product-vip-support__icon {
        width: 46px;
        height: 46px;

        margin-top: 1px;

        border-width: 1.5px;
    }

    #product-detail-form
    .sp-product-vip-support__icon::before {
        width: 14px;
        height: 14px;
    }


    /* Obsah */

    #product-detail-form
    .sp-product-vip-support__content {
        display: block;
    }


    /* Nadpis */

    #product-detail-form
    .sp-product-vip-support__heading {
        margin-bottom: 6px;

        font-size: 22px;
        line-height: 1.18;
    }


    /* Podnadpis */

    #product-detail-form
    .sp-product-vip-support__subheading {
        margin-bottom: 15px;

        font-size: 14px;
        line-height: 1.4;
    }


    /* Benefity */

    #product-detail-form
    .sp-product-vip-support__benefits {
        display: block;

        margin: 0;
    }

    #product-detail-form
    .sp-product-vip-support__benefit {
        margin: 0 0 10px;

        padding-left: 26px;

        font-size: 14px;
        line-height: 1.45;
    }

    #product-detail-form
    .sp-product-vip-support__benefit:last-child {
        margin-bottom: 0;
    }

    #product-detail-form
    .sp-product-vip-support__benefit::before {
        top: 2px;

        width: 17px;
        height: 17px;

        border-width: 1.5px;

        background-size: 9px 9px;
    }


    /* CTA */

    #product-detail-form
    .sp-product-vip-support__link {
        display: inline-flex;

        margin-top: 16px;

        font-size: 14px;
        line-height: 1.3;

        white-space: normal;
    }
}


/* =========================================================
   VIP KARTA – ÚZKÉ MOBILY
   ========================================================= */

@media (max-width: 480px) {

    #product-detail-form
    .sp-product-vip-support__inner {
        grid-template-columns:
            43px
            minmax(0, 1fr);

        gap: 13px;

        padding:
            18px
            15px
            17px;
    }

    #product-detail-form
    .sp-product-vip-support__icon {
        width: 43px;
        height: 43px;
    }

    #product-detail-form
    .sp-product-vip-support__icon::before {
        width: 13px;
        height: 13px;
    }

    #product-detail-form
    .sp-product-vip-support__heading {
        font-size: 20px;
    }

    #product-detail-form
    .sp-product-vip-support__subheading {
        font-size: 13.5px;
    }

    #product-detail-form
    .sp-product-vip-support__benefit {
        font-size: 13.5px;
    }

    #product-detail-form
    .sp-product-vip-support__link {
        font-size: 13.5px;
    }
}


/* =========================================================
   VIP KARTA – VIP VIDEA
   Play ikona místo telefonu
   ========================================================= */

#product-detail-form
.sp-product-vip-support--video
.sp-product-vip-support__icon::before {
    width: 25px;
    height: 25px;

    /*
     * Lehké optické posunutí doprava,
     * aby trojúhelník působil vystředěně.
     */
    left: 52%;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230E406A' d='M7 4v16l13-8z'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


/* Mobil / tablet */

@media (max-width: 991px) {

    #product-detail-form
    .sp-product-vip-support--video
    .sp-product-vip-support__icon::before {
        width: 15px;
        height: 15px;

        left: 52%;
    }
}


/* Úzké mobily */

@media (max-width: 480px) {

    #product-detail-form
    .sp-product-vip-support--video
    .sp-product-vip-support__icon::before {
        width: 14px;
        height: 14px;
    }
}
/* =========================================================
   ČISTICÍ HADŘÍK SONARPRO
   ========================================================= */

.sonarpro-cloth-description {
    width: 100%;
}

.sonarpro-cloth-description *,
.sonarpro-cloth-description *::before,
.sonarpro-cloth-description *::after {
    box-sizing: border-box;
}


/* =========================================================
   NADPISY A ODSAZENÍ
   ========================================================= */

.sonarpro-cloth-description .sonarpro-section-heading {
    margin-bottom: 20px;
}

.sonarpro-cloth-description .sonarpro-section-kicker {
    display: block;
    margin-bottom: 7px;
}

.sonarpro-cloth-description .sonarpro-section-heading h2,
.sonarpro-cloth-description .sonarpro-section-heading h3 {
    margin-top: 0;
    margin-bottom: 0;
}


/* =========================================================
   ÚVOD / HERO
   ========================================================= */

.sonarpro-cloth-description .sonarpro-cloth-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: 42px;
    align-items: center;
}

.sonarpro-cloth-description .sonarpro-cloth-hero-content,
.sonarpro-cloth-description .sonarpro-cloth-hero-media {
    min-width: 0;
}

.sonarpro-cloth-description .sonarpro-cloth-hero-media {
    text-align: center;
}

.sonarpro-cloth-description .sonarpro-cloth-hero-media a {
    display: block;
}

.sonarpro-cloth-description .sonarpro-cloth-hero-media img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}


/* =========================================================
   HLAVNÍ VÝHODY / IKONY
   ========================================================= */

.sonarpro-cloth-description .sonarpro-cloth-benefits {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 34px;
}

.sonarpro-cloth-description .sonarpro-cloth-benefit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 112px;
    padding: 18px 12px 16px;
    border: 1px solid #e6ebef;
    border-radius: 12px;
    background: #fff;
    text-align: center;
    box-shadow: 0 5px 18px rgba(13, 65, 104, 0.05);
}


/* FONT AWESOME IKONY */

.sonarpro-cloth-description .sonarpro-cloth-benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: 7px;
    color: #0d4168;
}

.sonarpro-cloth-description .sonarpro-cloth-benefit-icon i {
    display: block;
    margin: 0;
    padding: 0;
    color: inherit;
    font-size: 26px;
    line-height: 1;
}


/* ČERVENÁ LINKA POD IKONOU */

.sonarpro-cloth-description .sonarpro-cloth-benefit-line {
    display: block;
    width: 23px;
    height: 2px;
    margin: 1px 0 9px;
    border-radius: 2px;
    background: #be202f;
}


/* TEXT POD IKONOU */

.sonarpro-cloth-description .sonarpro-cloth-benefit strong {
    display: block;
    margin: 0;
    color: #1f2f3b;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}


/* =========================================================
   HLAVNÍ SEKCE
   ========================================================= */

.sonarpro-cloth-description .sonarpro-cloth-section {
    margin-top: 42px;
}


/* =========================================================
   DVĚ STRANY HADŘÍKU
   ========================================================= */

.sonarpro-cloth-description .sonarpro-cloth-sides {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.sonarpro-cloth-description .sonarpro-cloth-side {
    min-width: 0;
    padding: 24px;
    border: 1px solid #e5ebef;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(13, 65, 104, 0.04);
}

.sonarpro-cloth-description .sonarpro-cloth-side-label {
    display: inline-block;
    margin-bottom: 8px;
    color: #be202f;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sonarpro-cloth-description .sonarpro-cloth-side h4 {
    margin-top: 0;
    margin-bottom: 12px;
    color: #0d4168;
}

.sonarpro-cloth-description .sonarpro-cloth-side p {
    margin-top: 0;
    margin-bottom: 0;
}


/* =========================================================
   POUŽITÍ U VODY
   ========================================================= */

.sonarpro-cloth-description .sonarpro-cloth-use p {
    margin-top: 0;
}

.sonarpro-cloth-description .sonarpro-cloth-use p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   DŮLEŽITÉ UPOZORNĚNÍ
   ========================================================= */

.sonarpro-cloth-description .sonarpro-cloth-warning {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-top: 42px;
    padding: 24px 26px;
    border: 1px solid rgba(190, 32, 47, 0.22);
    border-left: 4px solid #be202f;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(13, 65, 104, 0.04);
}

.sonarpro-cloth-description .sonarpro-cloth-warning-icon {
    display: flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-top: 1px;
    border: 2px solid #be202f;
    border-radius: 50%;
    color: #be202f;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

.sonarpro-cloth-description .sonarpro-cloth-warning-content {
    flex: 1 1 auto;
    min-width: 0;
}

.sonarpro-cloth-description .sonarpro-cloth-warning-content .sonarpro-section-kicker {
    margin-bottom: 7px;
}

.sonarpro-cloth-description .sonarpro-cloth-warning-content h3 {
    margin-top: 0;
    margin-bottom: 14px;
}

.sonarpro-cloth-description .sonarpro-cloth-warning-content p {
    margin-top: 0;
}

.sonarpro-cloth-description .sonarpro-cloth-warning-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   PRAKTICKÉ INFORMACE
   ========================================================= */

.sonarpro-cloth-description .sonarpro-cloth-info-list {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 22px;
}

.sonarpro-cloth-description .sonarpro-cloth-info-list li {
    margin-bottom: 8px;
    padding-left: 3px;
}

.sonarpro-cloth-description .sonarpro-cloth-info-list li:last-child {
    margin-bottom: 0;
}


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

@media (max-width: 991px) {

    .sonarpro-cloth-description .sonarpro-cloth-hero {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 0.8fr);
        gap: 30px;
    }

    .sonarpro-cloth-description .sonarpro-cloth-benefits {
        gap: 14px;
    }

    .sonarpro-cloth-description .sonarpro-cloth-benefit {
        padding-right: 8px;
        padding-left: 8px;
    }
}


/* =========================================================
   MOBIL
   ========================================================= */

@media (max-width: 767px) {

    /* HERO */

    .sonarpro-cloth-description .sonarpro-cloth-hero {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .sonarpro-cloth-description .sonarpro-cloth-hero-media {
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
    }


    /* IKONY 2 × 2 */

    .sonarpro-cloth-description .sonarpro-cloth-benefits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-top: 26px;
    }

    .sonarpro-cloth-description .sonarpro-cloth-benefit {
        min-height: 100px;
        padding: 14px 8px 13px;
        border-radius: 10px;
    }

    .sonarpro-cloth-description .sonarpro-cloth-benefit-icon {
        width: 27px;
        height: 27px;
        margin-bottom: 6px;
    }

    .sonarpro-cloth-description .sonarpro-cloth-benefit-icon i {
        font-size: 23px;
    }

    .sonarpro-cloth-description .sonarpro-cloth-benefit-line {
        width: 21px;
        margin-bottom: 8px;
    }

    .sonarpro-cloth-description .sonarpro-cloth-benefit strong {
        font-size: 13px;
    }


    /* ODSAZENÍ SEKCÍ */

    .sonarpro-cloth-description .sonarpro-cloth-section,
    .sonarpro-cloth-description .sonarpro-cloth-warning {
        margin-top: 34px;
    }

    .sonarpro-cloth-description .sonarpro-section-heading {
        margin-bottom: 17px;
    }


    /* DVĚ STRANY */

    .sonarpro-cloth-description .sonarpro-cloth-sides {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .sonarpro-cloth-description .sonarpro-cloth-side {
        padding: 20px;
        border-radius: 10px;
    }


    /* UPOZORNĚNÍ */

    .sonarpro-cloth-description .sonarpro-cloth-warning {
        gap: 14px;
        padding: 20px 18px;
        border-radius: 10px;
    }

    .sonarpro-cloth-description .sonarpro-cloth-warning-icon {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
        font-size: 18px;
    }
}


/* =========================================================
   MALÉ MOBILY
   ========================================================= */

@media (max-width: 420px) {

    .sonarpro-cloth-description .sonarpro-cloth-benefits {
        gap: 9px;
    }

    .sonarpro-cloth-description .sonarpro-cloth-benefit {
        min-height: 94px;
        padding: 12px 6px;
    }

    .sonarpro-cloth-description .sonarpro-cloth-benefit-icon {
        width: 25px;
        height: 25px;
    }

    .sonarpro-cloth-description .sonarpro-cloth-benefit-icon i {
        font-size: 21px;
    }

    .sonarpro-cloth-description .sonarpro-cloth-warning {
        padding: 18px 15px;
    }
}
/* =========================================================
   SONARPRO – INFORMAČNÍ BLOK V DETAILU PRODUKTU
   Produkty bez VIP PODPORA a VIP VIDEA

   Jeden společný decentní blok:
   1. Potřebujete poradit?
   2. Řešíte také echolot nebo celou sestavu?

   Desktop:
   dvě části vedle sebe + jemný svislý oddělovač

   Mobil:
   dvě části pod sebou + jemný vodorovný oddělovač
   ========================================================= */


/* =========================================================
   HLAVNÍ OBAL
   ========================================================= */

.sp-product-sonarpro-info {
    clear: both;
    width: 100%;
    margin-top: 18px;
    box-sizing: border-box;
}

.sp-product-sonarpro-info--desktop {
    padding-right: 15px;
    padding-left: 15px;
}

.sp-product-sonarpro-info--mobile {
    padding-right: 0;
    padding-left: 0;
}


/* =========================================================
   SPOLEČNÝ BLOK
   ========================================================= */

.sp-product-sonarpro-info__inner {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        1px
        minmax(0, 1fr);

    align-items: stretch;

    width: 100%;

    border: 1px solid #dfe6ec;
    border-radius: 14px;

    background: #fff;

    box-shadow:
        0 3px 12px rgba(14, 64, 106, 0.035);

    box-sizing: border-box;
    overflow: hidden;
}


/* =========================================================
   JEDNOTLIVÉ ČÁSTI
   ========================================================= */

.sp-product-sonarpro-info__item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    align-items: start;

    min-width: 0;

    padding: 18px 22px;

    border: 0;
    border-radius: 0;

    background: transparent;
    box-shadow: none;

    box-sizing: border-box;
}


/* =========================================================
   JEMNÝ ODDĚLOVAČ
   ========================================================= */

.sp-product-sonarpro-info__divider {
    display: block;

    width: 1px;
    height: auto;

    margin: 15px 0;

    background: #e2e8ed;
}


/* =========================================================
   IKONA – SPOLEČNÝ KRUH
   ========================================================= */

.sp-product-sonarpro-info__icon {
    position: relative;
    display: block;

    width: 42px;
    height: 42px;

    border: 1px solid rgba(14, 64, 106, 0.23);
    border-radius: 50%;

    background: #fff;

    box-sizing: border-box;
}


/* =========================================================
   IKONA – PORADENSTVÍ / OTAZNÍK
   ========================================================= */

.sp-product-sonarpro-info__item--help
.sp-product-sonarpro-info__icon::before {
    content: "";

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

    width: 22px;
    height: 22px;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

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

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230E406A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.3 9a3 3 0 1 1 5.4 1.8c-.8.9-1.7 1.3-2.2 2.2-.2.3-.3.7-.3 1'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}


/* =========================================================
   IKONA – PROČ NAKOUPIT U NÁS / DŮVĚRA
   ========================================================= */

.sp-product-sonarpro-info__item--why
.sp-product-sonarpro-info__icon::before {
    content: "";

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

    width: 23px;
    height: 23px;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

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

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230E406A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.7-2.9 8.1-7 10-4.1-1.9-7-5.3-7-10V6l7-3Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}


/* =========================================================
   TEXTOVÁ ČÁST
   ========================================================= */

.sp-product-sonarpro-info__content {
    display: flex;
    flex-direction: column;

    min-width: 0;
    height: 100%;
}


/* =========================================================
   NADPIS
   ========================================================= */

.sp-product-sonarpro-info__title {
    display: block;

    margin: 1px 0 4px;

    color: #0E406A;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: 0;
    text-transform: none;
}


/* =========================================================
   POPIS
   ========================================================= */

.sp-product-sonarpro-info__text {
    margin: 0 0 8px;

    color: #626b73;

    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
}


/* =========================================================
   TEXTOVÝ ODKAZ
   ========================================================= */

.sp-product-sonarpro-info__link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;

    margin-top: auto;

    color: #0E406A;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;

    text-decoration: none;

    transition:
        color 0.18s ease;
}


.sp-product-sonarpro-info__link-text {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}


.sp-product-sonarpro-info__link::after {
    content: "→";

    display: inline-block;

    margin-left: 6px;

    font-size: 14px;
    font-weight: 600;
    line-height: 1;

    text-decoration: none;

    transition:
        transform 0.18s ease;
}


/* =========================================================
   HOVER – POUZE ZAŘÍZENÍ S MYŠÍ
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .sp-product-sonarpro-info__link:hover,
    .sp-product-sonarpro-info__link:focus {
        color: #BE202F;
    }

    .sp-product-sonarpro-info__link:hover::after,
    .sp-product-sonarpro-info__link:focus::after {
        transform: translateX(2px);
    }
}


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

@media (max-width: 991px) {

    .sp-product-sonarpro-info {
        margin-top: 16px;
    }

    .sp-product-sonarpro-info__inner {
        display: block;

        border-radius: 13px;
    }

    .sp-product-sonarpro-info__item {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 13px;

        padding: 15px 16px;
    }


    /*
     * Na mobilu se svislá čára změní
     * na jemný horizontální předěl.
     */

    .sp-product-sonarpro-info__divider {
        display: block;

        width: auto;
        height: 1px;

        margin: 0 16px;

        background: #e2e8ed;
    }

    .sp-product-sonarpro-info__icon {
        width: 40px;
        height: 40px;
    }

    .sp-product-sonarpro-info__item--help
    .sp-product-sonarpro-info__icon::before {
        width: 21px;
        height: 21px;
    }

    .sp-product-sonarpro-info__item--why
    .sp-product-sonarpro-info__icon::before {
        width: 22px;
        height: 22px;
    }

    .sp-product-sonarpro-info__title {
        margin-top: 0;

        font-size: 14.5px;
    }

    .sp-product-sonarpro-info__text {
        margin-bottom: 7px;

        font-size: 13px;
        line-height: 1.45;
    }

    .sp-product-sonarpro-info__link {
        font-size: 13px;
    }
}


/* =========================================================
   MALÝ MOBIL
   ========================================================= */

@media (max-width: 480px) {

    .sp-product-sonarpro-info__item {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 11px;

        padding: 14px;
    }

    .sp-product-sonarpro-info__divider {
        margin-right: 14px;
        margin-left: 14px;
    }

    .sp-product-sonarpro-info__icon {
        width: 38px;
        height: 38px;
    }

    .sp-product-sonarpro-info__item--help
    .sp-product-sonarpro-info__icon::before {
        width: 20px;
        height: 20px;
    }

    .sp-product-sonarpro-info__item--why
    .sp-product-sonarpro-info__icon::before {
        width: 21px;
        height: 21px;
    }

    .sp-product-sonarpro-info__title {
        font-size: 14px;
    }

    .sp-product-sonarpro-info__text {
        font-size: 12.5px;
    }

    .sp-product-sonarpro-info__link {
        font-size: 12.5px;
    }
}
/* =========================================================
   SONARPRO – PROČ NAKOUPIT U NÁS V2
   =========================================================

   SPOLEČNÉ TYPOGRAFICKÉ TŘÍDY:
   .sp-kicker
   .sp-title
   .sp-slogan

   Tyto třídy jsou globální a zde je nijak nepřepisujeme.

   Barevná hierarchie:
   - modrá   = hlavní struktura / nadpisy / důvěra
   - červená = SONARPRO akcenty / CTA / checklist
   - zlatá   = pouze VIP
   ========================================================= */


/* =========================================================
   ZÁKLAD
   ========================================================= */

.sp-whyv2-page {
    --sp-why-blue: #0E406A;
    --sp-why-red: #BE202F;
    --sp-why-gold: #d6a62f;

    --sp-why-text: #41474d;
    --sp-why-muted: #68727b;

    --sp-why-border: #dde5eb;
    --sp-why-border-soft: #e8edf1;

    --sp-why-bg-soft: #f7f9fb;
    --sp-why-bg-blue: #f4f8fb;

    width: 100%;

    color: var(--sp-why-text);

    box-sizing: border-box;
}

.sp-whyv2-page *,
.sp-whyv2-page *::before,
.sp-whyv2-page *::after {
    box-sizing: border-box;
}

.sp-whyv2-container {
    width: 100%;
    max-width: 1180px;

    margin-right: auto;
    margin-left: auto;

    padding-right: 30px;
    padding-left: 30px;
}

.sp-whyv2-page strong {
    font-weight: 700;
}


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

.sp-whyv2-hero {
    padding: 52px 0 58px;

    background: #fff;
}

.sp-whyv2-hero__lead {
    max-width: 880px;

    margin: 26px 0 0;

    color: var(--sp-why-text);

    font-size: 18px;
    line-height: 1.68;
}

.sp-whyv2-hero__note {
    margin: 14px 0 0;

    color: var(--sp-why-muted);

    font-size: 16px;
    line-height: 1.5;
}


/* =========================================================
   CTA TLAČÍTKA
   Styl podle stránky SONARPRO VIP klub
   ========================================================= */

.sp-whyv2-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 14px;

    margin-top: 28px;
}

.sp-whyv2-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 54px;

    padding: 13px 26px;

    border: 2px solid transparent;
    border-radius: 999px;

    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;

    text-align: center;
    text-decoration: none !important;

    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}


/* Primární – SONARPRO červená */

.sp-whyv2-button--primary {
    border-color: var(--sp-why-red);

    background: var(--sp-why-red);

    color: #fff !important;
}


/* Sekundární – modrý outline */

.sp-whyv2-button--secondary {
    border-color: var(--sp-why-blue);

    background: transparent;

    color: var(--sp-why-blue) !important;
}


/* =========================================================
   SPOLEČNÉ SEKCE
   ========================================================= */

.sp-whyv2-section {
    padding: 62px 0;
}

.sp-whyv2-section--specialization {
    border-top: 1px solid var(--sp-why-border-soft);
    border-bottom: 1px solid var(--sp-why-border-soft);

    background: var(--sp-why-bg-soft);
}

.sp-whyv2-section--selection {
    background: #fff;
}

.sp-whyv2-heading {
    max-width: 930px;

    margin-bottom: 28px;
}


/* =========================================================
   BĚŽNÝ TEXT
   ========================================================= */

.sp-whyv2-copy {
    color: var(--sp-why-text);

    font-size: 16px;
    line-height: 1.72;
}

.sp-whyv2-copy--narrow {
    max-width: 890px;
}

.sp-whyv2-copy p {
    margin: 0 0 18px;

    color: var(--sp-why-text);
}

.sp-whyv2-copy p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   VÝBĚR SESTAVY
   ========================================================= */

.sp-whyv2-selection {
    display: grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(0, 1.05fr);

    gap: 50px;

    align-items: start;
}

.sp-whyv2-selection__intro {
    color: var(--sp-why-text);

    font-size: 16px;
    line-height: 1.72;
}

.sp-whyv2-selection__intro p {
    margin: 0 0 18px;

    color: var(--sp-why-text);
}

.sp-whyv2-selection__intro p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   CHECKLIST
   Červený kruh + bílá fajfka
   ========================================================= */

.sp-whyv2-checklist {
    display: grid;

    gap: 14px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.sp-whyv2-checklist li {
    position: relative;

    min-height: 30px;

    padding: 4px 0 4px 42px;

    color: var(--sp-why-text);

    font-size: 15px;
    line-height: 1.5;
}

.sp-whyv2-checklist li::before {
    content: "✓";

    position: absolute;
    top: 1px;
    left: 0;

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

    width: 28px;
    height: 28px;

    border: 1px solid var(--sp-why-red);
    border-radius: 50%;

    background: var(--sp-why-red);

    color: #fff;

    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}


/* =========================================================
   PRINCIP / HLAVNÍ MYŠLENKA
   ========================================================= */

.sp-whyv2-principle {
    margin-top: 32px;

    padding: 17px 20px;

    border-left: 4px solid var(--sp-why-red);
    border-radius: 0 8px 8px 0;

    background: rgba(190, 32, 47, .035);

    color: var(--sp-why-blue);

    font-size: 16px;
    line-height: 1.55;
}


/* =========================================================
   FILIP / EXPERT
   ========================================================= */

.sp-whyv2-section--expert {
    border-top: 1px solid var(--sp-why-border-soft);
    border-bottom: 1px solid var(--sp-why-border-soft);

    background: var(--sp-why-bg-soft);
}

.sp-whyv2-expert {
    display: grid;

    grid-template-columns:
        minmax(300px, 390px)
        minmax(0, 1fr);

    gap: 54px;

    align-items: start;
}


/* Fotografie */

.sp-whyv2-expert__media {
    position: relative;

    overflow: hidden;

    border-radius: 18px;

    background: #e9eef2;

    box-shadow:
        0 12px 32px rgba(14, 64, 106, .10);
}

.sp-whyv2-expert__media::after {
    content: "";

    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height: 4px;

    background: var(--sp-why-red);
}

.sp-whyv2-expert__photo {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
}


/* Text */

.sp-whyv2-expert__content {
    min-width: 0;

    color: var(--sp-why-text);

    font-size: 15.5px;
    line-height: 1.7;
}

.sp-whyv2-expert__content > p {
    margin: 0 0 17px;

    color: var(--sp-why-text);
}

.sp-whyv2-expert__intro {
    margin-top: 19px !important;

    color: var(--sp-why-blue) !important;

    font-size: 16px;
    line-height: 1.62;
}


/* =========================================================
   STATISTIKY
   ========================================================= */

.sp-whyv2-stats {
    display: grid;

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

    gap: 10px;

    margin-top: 28px;
}

.sp-whyv2-stat {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    padding: 17px 13px 15px;

    border: 1px solid var(--sp-why-border);
    border-radius: 11px;

    background: #fff;
}

.sp-whyv2-stat::before {
    content: "";

    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    height: 3px;

    background: var(--sp-why-red);
}

.sp-whyv2-stat__number {
    display: block;

    margin-bottom: 3px;

    color: var(--sp-why-blue);

    font-size: 23px;
    font-weight: 800;
    line-height: 1.15;
}

.sp-whyv2-stat__label {
    display: block;

    color: var(--sp-why-muted);

    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
}


/* =========================================================
   SONAR NASTAVENÍ A ŠKOLENÍ
   ========================================================= */

.sp-whyv2-expert__brand {
    position: relative;

    display: flex;
    align-items: center;

    gap: 17px;

    margin-top: 22px;
    padding-top: 22px;

    border-top: 1px solid var(--sp-why-border);
}

.sp-whyv2-expert__brand::before {
    content: "";

    position: absolute;
    top: -1px;
    left: 0;

    width: 46px;
    height: 2px;

    background: var(--sp-why-red);
}

.sp-whyv2-expert__brand-logo {
    display: block;

    width: auto;

    max-width: 145px;
    max-height: 70px;

    object-fit: contain;
}

.sp-whyv2-expert__brand-content {
    display: flex;
    flex-direction: column;

    gap: 4px;

    min-width: 0;
}

.sp-whyv2-expert__brand-label {
    color: var(--sp-why-blue);

    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}


/* =========================================================
   TEXTOVÉ ODKAZY
   ========================================================= */

.sp-whyv2-text-link {
    display: inline-flex;
    align-items: center;

    align-self: flex-start;

    color: var(--sp-why-blue) !important;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;

    text-decoration: underline !important;
    text-decoration-color: rgba(190, 32, 47, .60) !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px;
}

.sp-whyv2-text-link::after {
    content: "→";

    display: inline-block;

    margin-left: 7px;

    text-decoration: none;

    transition:
        transform .18s ease;
}


/* =========================================================
   PODPORA PO NÁKUPU / VIP
   ========================================================= */

.sp-whyv2-section--aftercare {
    background: #fff;
}

.sp-whyv2-aftercare {
    display: grid;

    grid-template-columns:
        66px
        minmax(0, 1fr);

    gap: 28px;

    max-width: 980px;

    padding: 29px 32px;

    border: 1px solid var(--sp-why-border);
    border-top: 4px solid var(--sp-why-gold);
    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #fff 0%,
            #fffdf8 100%
        );

    box-shadow:
        0 8px 25px rgba(14, 64, 106, .06);
}


/* VIP kruh */

.sp-whyv2-aftercare__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    border: 2px solid var(--sp-why-gold);
    border-radius: 50%;

    background: var(--sp-why-blue);

    color: var(--sp-why-gold);

    font-size: 14px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: .3px;
}

.sp-whyv2-aftercare__content {
    min-width: 0;

    color: var(--sp-why-text);

    font-size: 15.5px;
    line-height: 1.7;
}

.sp-whyv2-aftercare__content > p {
    margin: 0 0 16px;

    color: var(--sp-why-text);
}

.sp-whyv2-aftercare__final {
    margin-bottom: 18px !important;
}

.sp-whyv2-text-link--vip {
    color: var(--sp-why-blue) !important;

    text-decoration-color: var(--sp-why-gold) !important;
}


/* =========================================================
   FINÁLNÍ CTA
   ========================================================= */

.sp-whyv2-final {
    padding: 64px 0 68px;

    border-top: 1px solid var(--sp-why-border-soft);

    background: var(--sp-why-bg-blue);
}

.sp-whyv2-final__inner {
    position: relative;

    max-width: 900px;
}

.sp-whyv2-final__text {
    max-width: 850px;

    margin: 17px 0 0;

    color: var(--sp-why-text);

    font-size: 16px;
    line-height: 1.68;
}

.sp-whyv2-actions--final {
    margin-top: 28px;
}


/* =========================================================
   HOVER – POUZE ZAŘÍZENÍ S MYŠÍ
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    /* Červené primární CTA */

    .sp-whyv2-button--primary:hover,
    .sp-whyv2-button--primary:focus {
        border-color: var(--sp-why-blue);

        background: var(--sp-why-blue);

        color: #fff !important;

        box-shadow:
            0 5px 14px rgba(14, 64, 106, .15);
    }


    /* Modré outline CTA */

    .sp-whyv2-button--secondary:hover,
    .sp-whyv2-button--secondary:focus {
        border-color: var(--sp-why-red);

        background: #fff;

        color: var(--sp-why-red) !important;
    }


    /* Textové odkazy */

    .sp-whyv2-text-link:hover,
    .sp-whyv2-text-link:focus {
        color: var(--sp-why-red) !important;
    }

    .sp-whyv2-text-link:hover::after,
    .sp-whyv2-text-link:focus::after {
        transform: translateX(2px);
    }
}


/* =========================================================
   TABLET / MENŠÍ DESKTOP
   ========================================================= */

@media (max-width: 991px) {

    .sp-whyv2-container {
        padding-right: 22px;
        padding-left: 22px;
    }


    /* HERO */

    .sp-whyv2-hero {
        padding: 43px 0 48px;
    }


    /* SEKCE */

    .sp-whyv2-section {
        padding: 50px 0;
    }


    /* VÝBĚR */

    .sp-whyv2-selection {
        grid-template-columns: 1fr;

        gap: 28px;
    }


    /* FILIP */

    .sp-whyv2-expert {
        grid-template-columns:
            minmax(250px, 320px)
            minmax(0, 1fr);

        gap: 34px;
    }


    /* STATISTIKY */

    .sp-whyv2-stats {
        grid-template-columns: 1fr;
    }

    .sp-whyv2-stat {
        padding: 14px 14px 12px;
    }


    /* VIP */

    .sp-whyv2-aftercare {
        grid-template-columns:
            54px
            minmax(0, 1fr);

        gap: 22px;

        padding: 25px;
    }

    .sp-whyv2-aftercare__icon {
        width: 52px;
        height: 52px;
    }


    /* FINÁLNÍ CTA */

    .sp-whyv2-final {
        padding: 54px 0 58px;
    }
}


/* =========================================================
   MOBIL
   ========================================================= */

@media (max-width: 767px) {

    .sp-whyv2-container {
        padding-right: 17px;
        padding-left: 17px;
    }


    /* HERO */

    .sp-whyv2-hero {
        padding: 34px 0 39px;
    }

    .sp-whyv2-hero__lead {
        margin-top: 21px;

        font-size: 15.5px;
        line-height: 1.65;
    }

    .sp-whyv2-hero__note {
        margin-top: 11px;

        font-size: 14.5px;
    }


    /* CTA */

    .sp-whyv2-actions {
        gap: 10px;

        margin-top: 23px;
    }

    .sp-whyv2-button {
        width: 100%;

        min-height: 50px;

        padding: 11px 18px;

        font-size: 15px;
    }


    /* SEKCE */

    .sp-whyv2-section {
        padding: 42px 0;
    }

    .sp-whyv2-heading {
        margin-bottom: 22px;
    }


    /* TEXT */

    .sp-whyv2-copy,
    .sp-whyv2-selection__intro {
        font-size: 14.5px;
        line-height: 1.67;
    }

    .sp-whyv2-copy p,
    .sp-whyv2-selection__intro p {
        margin-bottom: 15px;
    }


    /* CHECKLIST */

    .sp-whyv2-checklist {
        gap: 11px;
    }

    .sp-whyv2-checklist li {
        min-height: 27px;

        padding: 3px 0 3px 37px;

        font-size: 14px;
        line-height: 1.48;
    }

    .sp-whyv2-checklist li::before {
        width: 25px;
        height: 25px;

        font-size: 12px;
    }


    /* PRINCIP */

    .sp-whyv2-principle {
        margin-top: 25px;

        padding: 14px 15px;

        font-size: 14.5px;
    }


    /* =====================================================
       FILIP
       ===================================================== */

    .sp-whyv2-expert {
        grid-template-columns: 1fr;

        gap: 27px;
    }

    .sp-whyv2-expert__media {
        width: 100%;
        max-width: 430px;

        margin-right: auto;
        margin-left: auto;

        border-radius: 15px;
    }

    .sp-whyv2-expert__content {
        font-size: 14.5px;
        line-height: 1.67;
    }

    .sp-whyv2-expert__content > p {
        margin-bottom: 15px;
    }

    .sp-whyv2-expert__intro {
        margin-top: 15px !important;

        font-size: 15px;
    }


    /* STATISTIKY */

    .sp-whyv2-stats {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 7px;

        margin-top: 23px;
    }

    .sp-whyv2-stat {
        padding: 14px 9px 12px;
    }

    .sp-whyv2-stat__number {
        font-size: 19px;
    }

    .sp-whyv2-stat__label {
        font-size: 11px;
    }


    /* SONAR NASTAVENÍ */

    .sp-whyv2-expert__brand {
        gap: 13px;

        margin-top: 19px;
        padding-top: 18px;
    }

    .sp-whyv2-expert__brand-logo {
        max-width: 115px;
        max-height: 58px;
    }

    .sp-whyv2-expert__brand-label,
    .sp-whyv2-text-link {
        font-size: 13px;
    }


    /* =====================================================
       VIP
       ===================================================== */

    .sp-whyv2-aftercare {
        display: block;

        padding: 21px 18px;

        border-radius: 14px;
    }

    .sp-whyv2-aftercare__icon {
        width: 47px;
        height: 47px;

        margin-bottom: 18px;

        font-size: 12px;
    }

    .sp-whyv2-aftercare__content {
        font-size: 14.5px;
        line-height: 1.67;
    }

    .sp-whyv2-aftercare__content > p {
        margin-bottom: 14px;
    }


    /* =====================================================
       FINÁLNÍ CTA
       ===================================================== */

    .sp-whyv2-final {
        padding: 43px 0 47px;
    }

    .sp-whyv2-final__text {
        margin-top: 14px;

        font-size: 14.5px;
        line-height: 1.65;
    }
}


/* =========================================================
   MALÝ MOBIL
   ========================================================= */

@media (max-width: 480px) {

    .sp-whyv2-container {
        padding-right: 14px;
        padding-left: 14px;
    }


    /* HERO */

    .sp-whyv2-hero {
        padding-top: 29px;
        padding-bottom: 34px;
    }


    /* SEKCE */

    .sp-whyv2-section {
        padding-top: 36px;
        padding-bottom: 36px;
    }


    /* CTA */

    .sp-whyv2-button {
        min-height: 48px;

        padding: 10px 16px;

        font-size: 14.5px;
    }


    /* STATISTIKY */

    .sp-whyv2-stats {
        grid-template-columns: 1fr;
    }

    .sp-whyv2-stat {
        display: grid;

        grid-template-columns:
            82px
            minmax(0, 1fr);

        align-items: center;

        gap: 9px;

        padding: 12px;
    }

    .sp-whyv2-stat__number {
        margin-bottom: 0;

        font-size: 18px;
    }

    .sp-whyv2-stat__label {
        font-size: 12px;
    }


    /* SONAR NASTAVENÍ */

    .sp-whyv2-expert__brand {
        align-items: flex-start;
    }

    .sp-whyv2-expert__brand-logo {
        max-width: 100px;
    }


    /* VIP */

    .sp-whyv2-aftercare {
        padding: 18px 15px;
    }


    /* FINÁLNÍ CTA */

    .sp-whyv2-final {
        padding-top: 38px;
        padding-bottom: 41px;
    }
}