/* components/action-box.css */
/**
 * Action Box Component Styles
 * Action boxes and containers - BASE STYLES ONLY
 *
 * @package AutoNaKluc
 */

/* ==========================================================================
   ACTION BOXES CONTAINER
   ========================================================================== */

.action-boxes-container {
    display:flex;
    justify-content:space-between;
    flex-wrap: wrap;
}

.action-boxes-container .action-box {
    width:calc(33.333% - 24px);
    margin-bottom:2em
}

/* ==========================================================================
   ACTION BOX
   ========================================================================== */

.action-box {
    background:#fff;
    border-radius:30px;
    box-shadow:7px 39px 80px rgba(38,38,38,.1);
    padding:40px;
    display:flex;
    flex-direction:column
}

.action-box .action-title {
    font-size:30px;
    color:#262626;
    margin-bottom:20px;
    font-weight:900
}

.action-box p {
    font-weight:700;
    margin-bottom:35px
}

.action-box .actions {
    margin-top:auto
}

.action-box .button {
    width:100%
}

/* ==========================================================================
   ACTION BOX VARIANTS
   ========================================================================== */

.action-box.type-2 {
    width:calc(24.333% - 24px);
    margin-bottom:2em
}

/* components/article-box.css */
/**
 * article-box.css
 * Extracted from index.html
 */

.article-boxes-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.article-boxes-container .article-box {
    width: calc(50% - 18px)
}

.article-boxes-container .article-box:nth-child(n+3) {
    margin-top: 40px
}

.article-boxes-container .article-box:nth-child(n+2) {
    margin-top: 40px
}

.article-box {
    border-radius: 10px;
    box-shadow: 7px 39px 80px rgba(38, 38, 38, .1);
    display: flex;
    flex-direction: column
}

.article-box .fit-image {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    overflow: hidden;
    width: 100%;
    opacity: 1
}

.article-box .fit-image:before {
    padding-bottom: 62.715%
}

.article-box .text {
    flex-grow: 1;
    background: #fff;
    padding: 30px 35px 50px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    display: flex;
    flex-direction: column
}

.article-box .actions {
    margin-top: auto
}

.article-box .actions .button {
    width: 100%
}

.article-box .article-title {
    font-size: 30px;
    font-weight: 900;
    margin-bottom: 30px
}

.article-box .article-title:last-child {
    margin-bottom: 0
}

.article-box .article-title a {
    color: #262626
}

.article-box .article-title a:hover {
    color: #3dcb98
}

.article-box .article-title {
    font-size: 24px
}
/* components/faqs.css */
.faq-boxes-container .faq-box:last-child .question {
    border-bottom:0
}
.faq-box {
    padding:0 40px;
    border-radius:30px;
    box-shadow:7px 39px 80px rgba(38,38,38,0);
    margin-bottom:0;
    transition:.3s all
}
.faq-box.active {
    margin-bottom:35px;
    background:#fff
}
.faq-box.active .question {
    border-bottom:0;
    padding-top:30px
}
.faq-box .question {
    padding:20px 20px 20px 0;
    position:relative;
    border-bottom:1px solid #edeff4;
    display:block;
    color:#262626;
    font-size:20px;
    font-weight:700
}
.faq-box .question:hover {
    color:#3dcb98
}
.faq-box .question:after {
    color:#3dcb98;
    --fa: "\f078";
    content: var(--fa);
    font-family:"Font Awesome 7 Pro";
    font-weight:400;
    -moz-osx-font-smoothing:grayscale;
    -webkit-font-smoothing:antialiased;
    display:inline-block;
    font-style:normal;
    font-variant:normal;
    text-rendering:auto;
    position:absolute;
    font-size:18px;
    line-height:1;
    right:0;
    top:calc(50% - 9px)
}
.faq-box .answer {
    display:none;
    transition:.3s height;
    overflow:hidden
}
.faq-box .answer .inner {
    padding:0 35px 50px 0
}
.faq-box .answer.active {
    display:block
}
/* components/product-box.css */
/**
 * product-box.css
 * Extracted from index.html
 */

.product-box {
    flex-grow: 1
}

.product-boxes-container {
    display: flex;
    flex-wrap: wrap
}

.product-boxes-container .product-box {
    width: calc(33.333% - 24px);
    margin-right: 36px
}

.product-boxes-container .product-box:nth-child(3n+3) {
    margin-right: 0
}

.product-boxes-container .product-box:nth-child(n+4) {
    margin-top: 40px
}

.product-boxes-container {
    justify-content: space-between
}

.product-boxes-container .product-box {
    width: calc(50% - 18px);
    margin-right: 0
}

.product-boxes-container .product-box:nth-child(n+3) {
    margin-top: 40px
}

.product-boxes-container .product-box {
    width: 100%
}

.product-boxes-container .product-box:nth-child(n+2) {
    margin-top: 40px
}

.product-box {
    border-radius: 30px;
    box-shadow: 7px 39px 80px rgba(38, 38, 38, .1);
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.product-box .text {
    flex-grow: 1;
    display: flex;
    flex-direction: column
}

.product-box .actions {
    margin-top: auto
}

.product-box .preview {
    position: relative
}

.product-box .preview.sold img {
    filter: grayscale(100%)
}

.product-box .preview .price {
    position: absolute;
    right: 0;
    bottom: 0;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(130deg, #1fefa5 0, #3dcb98 100%);
    padding: 5px 35px;
    border-top-left-radius: 10px;
    pointer-events: none;
    text-align: center;
    line-height: 1.2;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.product-box .preview .price .dph {
    display: block;
    font-size: 14px
}

.product-box .fit-image {
    opacity: .8;
    width: 100%;
}

.product-box .fit-image:hover {
    opacity: 1;
}

.product-box .fit-image:before {
    padding-bottom: 97.2%
}

.product-box .product-title {
    font-size: 30px;
    margin-bottom: 20px;
    @media(max-width: 991px) {
        font-size: 24px;
    }
}

.product-box .product-title a {
    color: #262626
}

.product-box .product-title a:hover {
    color: #3dcb98
}

.product-box .product-title:last-child {
    margin-bottom: 0
}

.product-box .info-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 30px;
    font-size: 15px
}

.product-box .info-list:last-child {
    margin-bottom: 0
}

.product-box .info-list li {
    width: 48%;
    font-weight: 700
}

.product-box .info-list li:nth-child(n+3) {
    margin-top: 10px
}

.product-box .info-list li i {
    width: 20px;
    text-align: center;
    font-size: 18px;
    margin-right: 5px
}

.product-box .button {
    width: 100%
}

.product-box .text {
    padding: 40px
}

.product-box .text {
    padding: 40px 30px
}

.product-box .text {
    padding: 40px 25px
}

.product-box .preview.sold img {
    filter: grayscale(0%) !important
}

.products-slider-box {
    padding-left: 50px;
    overflow: hidden;
    margin-left: -50px;
    width: calc(100% + 50px)
}

.products-slider-box .glide__slides {
    padding-bottom: 100px
}

section:has(.products-slider-box) > article {
    padding-top: 50px
}

.products-slider-box .glide__track {
    overflow: visible
}

.products-slider-box .glide__slide {
    opacity: 0;
    transition: .3s all;
    display: flex;
    height: auto;
    flex-direction: column
}

.products-slider-box .product-box {
    flex-grow: 1
}

.products-slider-box .glide__slide--active + .glide__slide + .glide__slide + .glide__slide {
    opacity: .3
}

.products-slider-box .glide__slide--active,
.products-slider-box .glide__slide--active + .glide__slide,
.products-slider-box .glide__slide--active + .glide__slide + .glide__slide {
    opacity: 1
}

.products-slider-box .glide__arrow {
    position: absolute;
    width: 50px;
    height: 50px;
    background: #fff;
    box-shadow: 7px 39px 40px rgba(38, 38, 38, .1);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    bottom: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #a5acbf;
    transition: .3s all
}

.products-slider-box .glide__arrow:hover {
    background-color: #3dcb98;
    color: #fff
}

.products-slider-box .glide__arrow.glide__arrow--left {
    left: calc(50% - 65px)
}

.products-slider-box .glide__arrow.glide__arrow--right {
    right: calc(50% - 65px)
}

.products-slider-box {
    position: relative
}

.products-slider-box .glide__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.products-slider-box .glide__arrow.glide__arrow--left {
    left: 10px
}

.products-slider-box .glide__arrow.glide__arrow--right {
    right: 5% !important
}

@media (max-width: 991px) {
    .products-slider-box {
        width: initial;
        padding: 0;
        margin: 0;
        overflow: visible
    }


}
/* components/review-box.css */
/**
 * review-box.css
 * Extracted from index.html
 */

.reviews-slider-box {
    margin: 0 auto 35px
}

.reviews-slider-box:last-child {
    margin-bottom: 0
}

.reviews-slider-box .glide__arrow {
    position: absolute;
    width: 100px;
    height: 100px;
    background: #fff;
    box-shadow: 7px 39px 40px rgba(38, 38, 38, 0);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 30px;
    top: calc(50% - 50px);
    color: #a5acbf;
    transition: .3s all
}

.reviews-slider-box .glide__arrow:hover {
    box-shadow: 7px 39px 40px rgba(38, 38, 38, .1)
}

.reviews-slider-box .glide__arrow.glide__arrow--left {
    left: 0;
    top: calc(50% - 50px);

    @media (max-width: 768px) {
        top: calc(50% - 100px);
    }
}

.reviews-slider-box .glide__arrow.glide__arrow--right {
    top: calc(50% - 50px);
    right: 0;
    @media (max-width: 768px) {
        top: calc(50% - 100px);
    }
}

.reviews-slider-box .author-box {
    text-align: center;
    margin-bottom: 35px
}

.reviews-slider-box .author-box:last-child {
    margin-bottom: 0
}

.reviews-slider-box .author-box p {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 10px
}

.reviews-slider-box .author-box p:last-child {
    margin-bottom: 0
}

.reviews-slider-box .author-box .stars {
    color: #fec107;
    display: flex;
    justify-content: center;
    font-size: 18px
}

.reviews-slider-box .author-box .stars .empty {
    color: #edeff4
}

.reviews-slider-box .author-box .stars i + i {
    margin-left: 5px
}

.reviews-slider-box .author-image {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: #fff;
    margin: 0 auto 25px;
    border: 15px solid #edeff4;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 7px 39px 40px rgba(38, 38, 38, .1)
}

.reviews-slider-box .author-name {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px
}

.reviews-slider-box blockquote {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    font-weight: 900;
    color: #262626;
    font-size: 24px;
    position: relative;
    padding-bottom: 35px;
    @media (max-width: 768px) {
        font-size: 20px;
    }
}

.reviews-slider-box blockquote:before,
.reviews-slider-box blockquote:after {
    content: '';
    font-size: 350px;
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('https://autoznemecka.sk/wp-content/themes/autonakluc/assets/images/quote.png');
    width: 131px;
    height: 100px;
    z-index: -1
}

.reviews-slider-box blockquote:before {
    left: -10px;
    top: -55px
}

.reviews-slider-box blockquote:after {
    bottom: 0;
    right: -10px;
    transform: rotate(180deg)
}

.reviews-slider-box blockquote:before,
.reviews-slider-box blockquote:after {
    width: 100px
}

.reviews-slider-box blockquote:before {
    left: 0;
    top: -35px
}

.reviews-slider-box blockquote:after {
    right: 0
}

.reviews-slider-box .glide__arrow {
    width: 35px;
    height: 35px;
    font-size: 20px;
    top: 50px
}
/* -------- Šípky slideru recenzií na mobile pod text

   Šípky sú absolútne pozicované po stranách a na úzkych displejoch ležali priamo
   v texte recenzie, čo bránilo čitateľnosti. Na mobile ich vyberáme z textu do
   statického riadku pod recenziou. [#64247]

   Pravidlá musia byť v tomto súbore (deferred bundle), nie v media-queries.css
   (critical) — deferred sa načítava neskôr a pri rovnakej špecificite by ho prebil.
   -------- */
@media (max-width: 768px) {
    .reviews-slider-box .glide__arrows {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-top: 25px;
    }

    .reviews-slider-box .glide__arrow,
    .reviews-slider-box .glide__arrow.glide__arrow--left,
    .reviews-slider-box .glide__arrow.glide__arrow--right {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
    }
}

/* components/tables.css */
/**
 * tables.css
 * Extracted from index.html
 */

.prices-table {
    width:100%;
    text-align:center;
    border-collapse:collapse;
    min-width:1050px
}

.prices-table th {
    color:#3dcb98;
    font-size:18px;
    line-height:1.4;
    padding:10px 30px 25px
}

.prices-table th:first-child {
    border-right:2px solid #edeff4
}

.prices-table td {
    font-weight:700;
    width:175px;
    color:#262626;
    padding:10px 30px
}

.prices-table td:first-child {
    color:#a5acbf;
    border-right:2px solid #edeff4
}

.prices-table tr:hover:not(:last-child) td {
    background:#edeff4
}

.custom-table td {
    background:inherit!important;
    border-color:inherit!important;
    border:1px solid grey
}

.custom-table tr td:first-child {
    border-bottom:none!important;
    border-top:none!important;
    background:white!important;
    text-align:center
}

.custom-table tr:first-child td {
    border-top:1px solid grey!important
}

.custom-table tr:last-child td {
    border-bottom:1px solid grey!important
}

/* Pôvodne tu bolo ~225 riadkov nescopovaných pravidiel `table`, `table th`, `table td`
   (zlá extrakcia z index.html — odpadli rodičovské triedy). Zasahovali KAŽDÚ tabuľku
   na webe, vrátane `.vd2-details-table`, ktorej tak pridávali border-right/bottom na th.
   Každá reálna tabuľka má vlastnú triedu (`.importing-table`, `.vd2-details-table`),
   takže globálne pravidlá nemal čo používať. Zmazané. */

/* components/text-image-box.css */
/**
 * text-image-box.css
 * Extracted from index.html
 */

.text-image-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 55px
}

.text-image-box p {
    margin-bottom: 25px
}

.text-image-box p:last-child {
    margin-bottom: 0
}

.text-image-box:last-child {
    margin-bottom: 0
}

.text-image-box .image {
    margin-left: calc((100vw - 1200px) / -2);
    margin-right: 36px
}

.text-image-box .image img {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    display: block;
    box-shadow: 7px 39px 80px rgba(38, 38, 38, .1);
    max-width: 100%;
    height: auto
}

.text-image-box .text {
    width: 51.5%
}

.text-image-box.reverse {
    flex-direction: row-reverse
}

.text-image-box.reverse .image {
    margin-left: 36px;
    margin-right: calc((100vw - 1200px) / -2);
    max-width: 70%;
}

.text-image-box.reverse .image img {
    border-radius: 30px 0 0 30px
}


@media (max-width: 767px) {
    .text-image-box {
        flex-direction: column
    }

    .text-image-box .text {
        width: 100%
    }

    .text-image-box .image img,
    .text-image-box.reverse .image img {
        max-width: 100%;
        height: auto;
        @media (max-width: 789px) {
            height: 100%;
        }
    }

    .text-image-box.reverse {

        flex-direction: column
    }

    .text-image-box.reverse .image {
        margin-right: -30px;
        @media (max-width: 789px) {
            align-self: end;
        }
    }

    .text-image-box.reverse .image {
        margin-left: 0;
        margin-right: -15px
    }


    .text-image-box .image {
        max-width: 55%
    }


    .text-image-box .image {
        margin-left: -30px
    }

    .text-image-box .image {
        max-width: calc(100% + 15px);
        margin-bottom: 35px;
        margin-left: -15px;
        margin-right: 0
    }
}

/* Feature items repeater */
.ti-features-list {
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ti-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.ti-feature-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(61, 203, 152, 0.10);
}

.ti-feature-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.ti-feature-content {
    flex: 1;
}

.ti-feature-title {
    display: block;
    font-size: 16px;
    font-weight: 900;
    color: #262626;
    margin-bottom: 4px;
}

.ti-feature-content p {
    font-size: 16px;
    color: #a5acbf;
    margin: 0;
    font-weight: 400;
}

/* Bento image layout */
.image--bento {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-template-rows: 1fr 2fr;
    gap: 8px;
    height: 440px;
}

.image--bento .bento-main {
    grid-column: 1;
    grid-row: 1 / 3;
    overflow: hidden;
}

.image--bento .bento-small--1 {
    grid-column: 2;
    grid-row: 1;
    overflow: hidden;
}

.image--bento .bento-small--2 {
    grid-column: 2;
    grid-row: 2;
    overflow: hidden;
}

.image--bento .bento-main img,
.image--bento .bento-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    box-shadow: none;
}

/* Normal layout (image-left) — outer corners on the right side */
.text-image-box .image--bento .bento-small--1 img {
    border-top-right-radius: 20px;
}

.text-image-box .image--bento .bento-small--2 img {
    border-bottom-right-radius: 20px;
}

/* Reversed layout (image-right) — bento-main on right column, smalls on left */
.text-image-box.reverse .image--bento {
    grid-template-columns: 2fr 3fr;
}

.text-image-box.reverse .image--bento .bento-main {
    grid-column: 2;
    grid-row: 1 / 3;
}

.text-image-box.reverse .image--bento .bento-small--1 {
    grid-column: 1;
    grid-row: 1;
    max-width: 150px;
    justify-self: flex-end;
}

.text-image-box.reverse .image--bento .bento-small--2 {
    grid-column: 1;
    grid-row: 2;
}

/* Reversed — outer corners on the left side */
.text-image-box.reverse .image--bento .bento-small--1 img {
    border-top-right-radius: 0;
    border-top-left-radius: 20px;
}

.text-image-box.reverse .image--bento .bento-small--2 img {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 20px;
}

@media (max-width: 767px) {
    .image--bento {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
        gap: 6px;
    }

    .image--bento .bento-main {
        grid-column: 1;
        grid-row: 1;
        aspect-ratio: 16 / 9;
    }

    .image--bento .bento-small--1 {
        grid-column: 1;
        grid-row: 2;
        aspect-ratio: 16 / 9;

        @media (max-width: 789px) {
            display: none;
        }
    }

    .image--bento .bento-small--2 {
        grid-column: 1;
        grid-row: 3;
        aspect-ratio: 16 / 9;
        @media (max-width: 789px) {
            display: none;
        }
    }

    .text-image-box.reverse .image--bento {
        grid-template-columns: 1fr;
    }

    .text-image-box.reverse .image--bento .bento-main {
        grid-column: 1;
        grid-row: 1;
    }

    .text-image-box.reverse .image--bento .bento-small--1 {
        grid-column: 1;
        grid-row: 2;
    }

    .text-image-box.reverse .image--bento .bento-small--2 {
        grid-column: 1;
        grid-row: 3;
    }

    .text-image-box .image--bento .bento-small--1 img,
    .text-image-box .image--bento .bento-small--2 img,
    .text-image-box.reverse .image--bento .bento-small--1 img,
    .text-image-box.reverse .image--bento .bento-small--2 img {
        border-radius: 0;
    }
}
/* sections/404.css */
/**
 * 404.css
 * Not found page
 */

.error-404 {
    padding: 60px 0 60px;
    text-align: center;
    background: var(--color-light-gray);
}

.error-404__inner {
    max-width: 640px;
    margin: 0 auto;
}

.error-404__eyebrow {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray);
    margin-bottom: var(--spacing-sm);
}

.error-404__code {
    font-size: 160px;
    line-height: 1;
    margin-bottom: var(--spacing-lg);
}

.error-404__title {
    margin-bottom: var(--spacing-lg);
}

.error-404__text {
    color: var(--color-gray);
    margin-bottom: var(--spacing-xl);
}

.error-404__search {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--color-white);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-input);
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.error-404__search i {
    color: var(--color-gray);
}

.error-404__search input[type="text"] {
    border: 0;
    box-shadow: none;
    padding: var(--spacing-sm) 0;
    font-size: var(--font-size-medium);
}

.error-404__search .button {
    flex-shrink: 0;
}

.error-404__actions {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .error-404__code {
        font-size: 90px;
    }

    .error-404__search {
        flex-wrap: wrap;
        border-radius: var(--radius-medium);
    }

    .error-404__search input[type="text"] {
        order: 1;
        width: 100%;
    }

    .error-404__search .button {
        order: 2;
        width: 100%;
    }
}

/* sections/article-detail.css */
/**
 * article-detail.css
 */

section.article-detail {
    padding: 120px 0 85px
}

section.article-detail .content-wrap {
    max-width: 1050px
}

section.article-detail .article-detail-title {
    font-size: 50px;
    font-weight: 900;
    margin-bottom: 20px
}

section.article-detail .article-info {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-bottom: 0
}

section.article-detail .article-info .reading-time {
    background: #edeff4;
    color: #262626;
    padding: 3px 20px 4px;
    border-radius: 35px;
    font-weight: 700;
    margin-right: 25px
}

section.article-detail .article-info .date {
    font-weight: 700
}

.article-feature-image {
    margin: 50px 0 0;
    border-radius: 20px;
    overflow: hidden;
    width: 100%
}

.article-feature-image img {
    display: block;
    width: 100%;
    height: auto
}

section.article-detail article {
    margin-top: 60px
}

/* sections/calculation.css */
/* Calculation / Leasing Calculator Section */

section.calculation {
    padding: 65px 0;
}

section.calculation .container {
    display: flex;
    gap: 64px;
    align-items: flex-start;
}

section.calculation .text {
    flex: 1;
}

.leasing-calculator {
    background: #fff;
    padding: 30px 45px;
    border-radius: 30px;
    box-shadow: 7px 39px 80px rgba(38, 38, 38, .1);
    max-width: 580px;
    width: 48%;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.leasing-calculator .form-row label {
    padding: 0;
}

.leasing-calculator .field-container {
    flex-direction: row;
    flex-wrap: wrap;
}

.field-container.has-padding {
    padding: 10px;
}

.field-container.transparent {
    background: transparent;
}

.currency-label {
    font-size: 18px;
    display: flex;
    align-self: center;
    flex: 0.1;
}

.radio-pill {
    display: inline-block;
    font-size: 20px;
    padding: 8px 16px;
    width: 100%;
    cursor: pointer;
    border: 5px solid #e6e8ed;
    border-radius: 5px;
    text-align: center;
}

.radio-pill input[type="radio"] {
    display: none;
}

.radio-pill:hover {
    background-color: #f0f0f0;
}

.radio-pill.checked {
    background-color: #3dcb98;
    color: #fff;
    border: 5px solid #3dcb98;
}

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

.recap-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.recap-row span:nth-child(2) {
    font-weight: bold;
}

@media (max-width: 1220px) {
    section.calculation .field-container {
        flex-direction: row;
    }

    /* Pills sa lámu na 2 stĺpce; cena + mena si držia desktopové delenie (flex), preto bez width. */
    section.calculation .field-container.transparent * {
        flex: auto;
        width: 46%;
    }
}

@media (max-width: 991px) {
    section.calculation .container {
        flex-direction: column;
    }

    section.calculation h4 {
        font-size: 18px;
    }

    .leasing-calculator {
        width: 100%;
        max-width: 100%;
        padding: 20px;
    }

    .recap-row,
    .leasing-calculator .form-row label {
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    .recap-row {
        width: 100%;
    }

    .leasing-calculator .form-row label {
        width: 100%;
    }

    /* Musí prebiť `.leasing-calculator .form-row label` (0-2-1) vyššie — pills sú tiež <label>. */
    section.calculation .leasing-calculator .field-container.transparent * {
        width: 30%;
    }

    #calculator .field-container.has-padding {
        flex-wrap: nowrap;
        flex-direction: row;
    }

    #calculator .field-container.transparent,
    section.calculation .field-container {
        flex-direction: row;
    }
}

/* sections/insurance-compare.css */
/* Insurance Compare — 3-column card comparison (PZP / KASKO / GAP) */

.insurance-compare {
    background-color: #EEF0F4;
    padding: 64px 24px;
}

.insurance-compare__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0 auto;
}

.insurance-compare__card {
    /*padding: 28px 24px;*/
    display: flex;
    flex-direction: column;
    gap: 12px;

    .insurance-compare__card-inner {
        background: #fff;
        padding: 28px 24px;
        border-radius: 12px;
        min-height: 218px;
    }
}

.insurance-compare__card--featured {
    .insurance-compare__card-inner {
        border: 2px solid #3DBD8A;
    }
}

.insurance-compare__stars {
    display: flex;
    gap: 4px;
    background: rgba(61, 203, 152, 0.10);
    max-width: max-content;
    padding: 5px;
    border-radius: 8px;
}

.insurance-compare__star {
    flex-shrink: 0;
}

.insurance-compare__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1A1A2E;
    margin: 0;
}

.insurance-compare__description {
    font-size: 0.9rem;
    color: #6B7280;
    margin: 0;
    line-height: 1.55;
}

.insurance-compare__divider {
    border: none;
    border-top: 1px solid #EAECF0;
    margin: 4px 0;
}

.insurance-compare__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.insurance-compare__feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.875rem;
    color: #374151;
    padding: 10px 0px;
    line-height: 1.5;
    border-bottom: 1px solid rgba(63, 64, 77, 0.1);
}

.insurance-compare__check {
    flex-shrink: 0;
    margin-top: 2px;
}

@media (max-width: 900px) {
    .insurance-compare__grid {
        grid-template-columns: 1fr;
    }
}

/* sections/leasing-info.css */
/* Leasing Info Block */

.leasing-info {
    padding: 56px 24px;
    background-color: #F8F9FB;
}

.leasing-info__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}

.leasing-info__text {
    flex: 1;
}

.leasing-info__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1A1A2E;
    margin: 0 0 16px;
}

.leasing-info__content {
    font-size: 1rem;
    color: #4B5563;
    line-height: 1.7;
}

.leasing-info__content p {
    margin: 0 0 12px;
}

.leasing-info__content p:last-child {
    margin-bottom: 0;
}

.leasing-info__rate-wrap {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border: 2px solid #3DBD8A;
    border-radius: 16px;
    padding: 28px 36px;
    text-align: center;
    gap: 8px;
    min-width: 200px;
}

.leasing-info__rate-label {
    font-size: 0.8rem;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}

.leasing-info__rate-value {
    font-size: 2.6rem;
    font-weight: 800;
    color: #3DBD8A;
    line-height: 1;
}

.leasing-info__rate-pa {
    font-size: 1.1rem;
    font-weight: 600;
    margin-left: 2px;
}

/* Background image variant */
.calculation.has-bg-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.calculation.has-bg-image::before {
    content: '';
    position: absolute;
    background: white;
    bottom: 0;
    inset: 0;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: -130px;
}

.calculation.has-bg-image .content-wrap {
    position: relative;
    z-index: 1;
}

.calculation.has-bg-image .text,
.calculation.has-bg-image .text h2,
.calculation.has-bg-image .text strong,
.calculation.has-bg-image .text p {
    color: #fff;
}

@media (max-width: 768px) {
    .leasing-info__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .leasing-info__rate-wrap {
        width: 100%;
        min-width: unset;
    }
}

/* sections/map-contact.css */
/**
 * Map Contact Block
 * Mapa vľavo (pretiahnutá do kraja okna) + kontaktné boxy vpravo.
 */

.map-contact-box {
    display: flex;
    justify-content: space-between;
}

/* Mapa siaha od ľavého okraja okna po 60 % obsahu. `.content-wrap` má max-width
   1260 px a k tomu 30 px vnútorný padding, takže vytiahnutie doľava musí počítať
   aj s ním — bez toho je mapa o 30 px užšia a proporčne vyššia než na autonakluc.sk
   (merané: 810 px vs 840 px pri okne 1440 px). */
.map-contact-box .map-box {
    width: calc(60% + ((100vw - var(--container-max-width)) / 2) + 30px);
    margin-left: calc(((100vw - var(--container-max-width)) / 2 + 30px) * -1);
    background: var(--color-light-gray);
    border-top-right-radius: var(--radius-large);
    border-bottom-right-radius: var(--radius-large);
    box-shadow: var(--shadow-light);
    overflow: hidden;
    position: relative;
}

/* Leaflet spraví kontajner priamo z .map-box — výšku mu dáva flex stretch (desktop),
   pod 991 px spacer `.map-box:before` z media-queries.css (aspect 65 %). */
.map-contact-box .map-box.leaflet-container {
    background: var(--color-light-gray);
    font: inherit;
}

.map-contact-box .contact-boxes-container {
    width: 30%;
    max-width: 375px;
    padding: 75px 0;
}

.map-contact-box .contact-box {
    margin-bottom: 75px;
}

.map-contact-box .contact-box:last-child {
    margin-bottom: 0;
}

.map-contact-box .contact-title {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-black);
    margin-bottom: 30px;
}

.map-contact-box .address-box {
    margin-bottom: var(--spacing-xl);
}

.map-contact-box .address-box:last-child {
    margin-bottom: 0;
}

.map-contact-box .address-title {
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-bold);
    margin-bottom: 0;
}

.map-contact-box .address-box address {
    font-style: normal;
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-md);
}

.map-contact-box .address-box address:last-child {
    margin-bottom: 0;
}

/* Globálne pravidlá pre <table> majú min-width 550px/1050px (cenníky) — v úzkom
   kontaktnom stĺpci by pretiekli, preto ich tu prebíjame. */
.map-contact-box table {
    width: 100%;
    min-width: 0;
    padding: 0;
    text-align: left;
    margin-bottom: var(--spacing-xl);
}

/* tables.css má pre holé <table> globálne rámiky, biele pozadie a centrovanie
   prvej bunky (aj s !important) — v kontaktnom stĺpci chceme čisté riadky.
   Selektory musia mať vyššiu špecificitu než `table tr:first-child td`. */
.map-contact-box table td,
.map-contact-box table tr td:first-child,
.map-contact-box table tr:first-child td,
.map-contact-box table tr:last-child td {
    border: 0 !important;
    background: transparent !important;
}

.map-contact-box table tr td {
    width: auto;
    padding: 8px 0;
    text-align: left;
}

.map-contact-box table tr td:last-child {
    text-align: right;
}


.map-contact-box table:last-child {
    margin-bottom: 0;
}

.map-contact-box table td:first-child {
    padding-right: var(--spacing-sm);
}

/* Oddeľovač vkladaný do obsahu boxu (starý web ho posielal ako <hr> v nadpise) */
.map-contact-box hr {
    border: 0;
    height: 2px;
    background: var(--color-gray);
    margin: var(--spacing-lg) 0;
}

/* ============================================================
   RESPONZÍVNE SPRÁVANIE

   Tieto pravidlá boli pôvodne v responsive/media-queries.css, ktorý je
   v critical bundli, kým tento súbor je v deferred. Deferred sa načítava
   až po critical, takže `width: 30%` vyššie prebíjalo media query s rovnakou
   špecificitou a kontaktné boxy zostávali 30 % široké aj na mobile. [#64247]
   Preto responzívne pravidlá žijú v tom istom súbore ako základné.
   ============================================================ */

/* Mapa sa zmenšuje skôr, než sa layout zalomí. */
@media (max-width: 1260px) {
    .map-contact-box .map-box {
        width: 65%;
        margin-left: -30px;
    }
}

/* Pod 991 px ide mapa nad boxy, boxy sú dvojstĺpcové. */
@media (max-width: 991px) {
    .map-contact-box {
        flex-direction: column;
    }

    .map-contact-box .map-box {
        width: calc(100% + 30px);
        margin-bottom: 75px;
    }

    /* Mapa v stĺpcovom layoute nemá výšku z flex stretch — drží ju tento spacer. */
    .map-contact-box .map-box:before {
        content: '';
        display: block;
        padding-bottom: 65%;
    }

    .map-contact-box .contact-boxes-container {
        width: 100%;
        max-width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0;
    }

    .map-contact-box .contact-boxes-container .contact-box {
        width: 48%;
    }
}

@media (max-width: 767px) {
    .map-contact-box .map-box {
        margin-left: -15px;
        width: calc(100% + 15px);
    }
}

/* Na mobile jeden stĺpec. */
@media (max-width: 650px) {
    .map-contact-box .contact-boxes-container .contact-box {
        width: 100%;
        margin-bottom: 35px;
    }
}

/* sections/partners.css */
/**
 * Partners Block
 * Riadok log partnerov, zalamuje sa podľa počtu.
 */

.partners-wrapper-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.partners-wrapper-box .partner-box {
    width: calc(100% / 7 - 24px);
    padding: 1em;
    margin: 10px;
    text-align: center;
}

.partners-wrapper-box .partner-box img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 991px) {
    .partners-wrapper-box .partner-box {
        width: calc(100% / 3 - 24px);
    }
}

/* sections/prices-table.css */
/* Prices Table Section (#cennik) */

#cennik {
    background: #f5f7fb;
    padding: 80px 0 60px;
}

#cennik .section-header {
    margin-bottom: 40px;
}

#cennik .section-header h2,
#cennik .section-title {
    text-align: center;
    font-size: 32px;
    line-height: 1.25;
    font-weight: 700;
    color: #111827;
    margin: 0 0 16px;
}

#cennik .section-description {
    text-align: center;
    font-size: 15px;
    color: #4b5563;
    line-height: 1.7;
    max-width: 680px;
    margin: 0 auto;
}

/* table wrapper */
.table-box {
    max-width: 1050px;
    margin: 0 auto 32px;
}

.table-box table {
    width: 100%;
    background: #ffffff;
    border-radius: 32px;
    overflow: hidden;
    max-width: 1050px;
    margin: 0 auto 32px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.02);

    tr:first-child td{
        border:none!important;
        border-bottom: 1px solid #edf0f4!important;
        border-left: none!important;
    }

    tr td{
        border:none!important;
        border-left: none!important;
        border-bottom: 1px solid #edf0f4!important;
    }

}

.table-box table tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

.table-box table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

/* table */
.importing-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 15px;
    color: #111827;
}

.importing-table thead {
    background: linear-gradient(130deg, #1fefa5 0, #3dcb98 100%);
}

.importing-table thead th {
    padding: 20px 32px;
    text-align: left;
    font-weight: 600;
    color: #ffffff;
    font-size: 15px;
    border:none!important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.importing-table thead th:first-child  { width: 24%; }
.importing-table thead th:nth-child(2) { width: 38%; }
.importing-table thead th:nth-child(3),
.importing-table thead th:nth-child(4) { width: 19%; white-space: nowrap; }

.importing-table tbody tr { background: #ffffff; }
.importing-table tbody tr:last-child td { border-bottom: none; }

.importing-table tbody td {
    padding: 20px 32px!important;
    vertical-align: middle;
    border-bottom: 1px solid #edf0f4;
    font-weight: 400;
    line-height: 1.5;
    text-align: left!important;
}

.importing-table tbody td:first-child { font-weight: 600; }

.importing-table tbody td:first-child strong {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.importing-table tbody td:nth-child(3),
.importing-table tbody td:nth-child(4) {
    font-weight: 600;
    white-space: nowrap;
}

/* note + description below table */
.table-footer {
    max-width: 1050px;
    margin: 0 auto;
}

.table-box small {
    display: block;
    margin: 18px 0 4px;
    font-size: 12px;
    color: #9ca3af;
}

.table-box p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #4b5563;
}

/* CTA button */
#cennik .actions .button.style-3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 40px;
    border-radius: 999px;
    background: linear-gradient(90deg, #18e38b 0%, #00c08a 100%);
    color: #ffffff;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 16px 40px rgba(16, 185, 129, 0.35);
    border: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

#cennik .actions .button.style-3:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 48px rgba(16, 185, 129, 0.4);
}

@media (max-width: 768px) {
    .table-box {
        overflow-x: auto;
    }

    .table-box table {
        display: block;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        min-width: 350px;
        border-radius: 20px;
        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.15);
    }

    .importing-table thead th,
    .importing-table tbody td {
        padding: 16px 20px;
        font-size: 14px;
        min-width: 150px;
    }

    #cennik .section-title {
        font-size: 22px;
        line-height: 1.3;
        padding: 0 10px;
    }
}



/* sections/promo-banner.css */
/**
 * promo-banner.css
 * Block: ank-promo-banner (varianty grey / green)
 *
 * Dekor (oblúk, tieň pod autom, stmavenie) = path data 1:1 z Figmy (block-grey.svg / block-green.svg),
 * viewBox 1200×483, preto data-URI SVG. Farby v data-URI nemôžu byť var(): #262626 = --color-dark.
 * Fotka auta = štvorcový export z Figmy (1440×1440, priehľadné pozadie), pozícia v % podľa Figmy.
 */

.promo-banner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    min-height: 483px;
    border-radius: var(--radius-large);
    overflow: hidden;
    isolation: isolate;
    background: var(--color-light-gray);
    color: var(--color-dark);
}

.promo-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 483' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='o' x1='600' y1='0' x2='1002.3' y2='382.15' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-opacity='0'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' x1='1012.58' y1='352.726' x2='621.368' y2='371.629' gradientUnits='userSpaceOnUse'%3E%3Cstop/%3E%3Cstop offset='1' stop-opacity='.8'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-20%25' y='-50%25' width='140%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='14.6'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='1200' height='483' fill='url(%23o)' fill-opacity='.3'/%3E%3Cpath d='M477 493.322C1068.74 432.059 1131.82-13.3 1131.82-304H1336C1336-304 1300.62 407.133 886.262 664.198 663.787 802.22 477 860 477 860z' fill='%23262626'/%3E%3Cpath filter='url(%23b)' fill='url(%23s)' fill-opacity='.9' d='M653.64 359.35 850.125 295.14C850.951 294.87 851.762 294.674 852.62 294.541 938.821 281.241 1118.08 253.405 1155.58 246.904 1202.68 238.739 1305.4 248.664 1311.29 252.396 1315.82 255.267 1293.25 295.873 1280.05 318.124 1279.04 319.833 1277.71 321.322 1276.14 322.54L1184.96 393.28C1182.54 395.152 1180.72 397.676 1179.69 400.554L1178.2 404.752C1175.87 411.271 1169.63 415.556 1162.71 415.403 1146.51 415.046 1125.45 414.703 1120.46 415.077 1112.56 415.669 1038.32 417.521 1032.27 417.974 1026.22 418.427 866.123 435.522 852.064 435.184 841.034 434.919 737.523 417.408 684.214 408.181 682.157 407.825 680.226 407.075 678.459 405.963L650.085 388.098C638.616 380.877 640.758 363.56 653.64 359.35z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.promo-banner__content {
    position: relative;
    z-index: 2;
    padding: 44px 0 44px 56px;
}

.promo-banner__logo {
    display: block;
    width: auto;
    height: 81px;
    margin-bottom: 25px;
}

.promo-banner__title {
    margin-bottom: var(--spacing-lg);
    color: inherit;
}

.promo-banner__text {
    max-width: 480px;
    margin: 0 0 var(--spacing-xl);
    font-weight: var(--font-weight-normal);
}

.promo-banner__media {
    position: absolute;
    inset: 0;
    margin: 0;
    pointer-events: none;
}

/* grey: Figma x=621.7 y=-147 w=707 */
.promo-banner__image {
    position: absolute;
    left: 51.8%;
    top: -30.4%;
    width: 58.9%;
    height: auto;
    max-width: none;
}

/* ===== green ===== */
.promo-banner--green {
    background: var(--color-gradient);
    color: var(--color-white);
}

.promo-banner--green::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 483' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='-121.322' y1='354.411' x2='538.371' y2='368.329' gradientUnits='userSpaceOnUse'%3E%3Cstop/%3E%3Cstop offset='1' stop-opacity='.8'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-20%25' y='-50%25' width='140%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='14.6'/%3E%3C/filter%3E%3C/defs%3E%3Cpath filter='url(%23b)' fill='url(%23s)' fill-opacity='.9' d='M505.832 355.771 148.771 249.739C147.938 249.492 147.125 249.318 146.263 249.209 0.824 230.803-303.409 192-366.982 182.751-446.677 171.157-619.206 192.576-628.959 199.131-636.582 204.254-595.302 273.69-572.238 310.133-571.176 311.812-569.818 313.255-568.215 314.43L-407.169 432.495C-404.705 434.301-402.81 436.775-401.708 439.623L-394.974 457.018C-392.476 463.472-386.122 467.586-379.211 467.236-351.419 465.825-309.406 463.914-300.146 464.355-286.801 464.99-161.696 464.709-151.492 465.195-141.288 465.681 129.116 487.137 152.776 485.925 171.487 484.965 347.633 450.194 436.33 432.335 438.377 431.923 440.263 431.126 441.999 429.966L510.167 384.412C521.435 376.882 518.824 359.629 505.832 355.771z'/%3E%3C/svg%3E");
}

/* stmavenie spodku NAD fotkou (Figma: y=108–483, čierna 0 → 30 %) */
.promo-banner--green .promo-banner__media::after {
    content: '';
    position: absolute;
    inset: 22.4% 0 0;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .3));
}

.promo-banner--green .promo-banner__content {
    grid-column: 2;
    padding: 44px 56px 44px 0;
}

/* green: Figma x=-376.6 y=-267.6 w=932.2 */
.promo-banner--green .promo-banner__image {
    left: -31.4%;
    top: -55.4%;
    width: 77.7%;
}

/* green: Figma x=47 y=306 h=134 */
.promo-banner--green .promo-banner__logo {
    position: absolute;
    z-index: 1;
    left: 3.9%;
    bottom: 8.9%;
    height: 134px;
    margin: 0;
}

@media (max-width: 991px) {
    .promo-banner {
        grid-template-columns: 1fr;
        align-items: start;
        min-height: 0;
    }

    .promo-banner::before {
        display: none;
    }

    .promo-banner__content,
    .promo-banner--green .promo-banner__content {
        grid-column: 1;
        padding: 35px 30px;
    }

    .promo-banner__media {
        position: relative;
        inset: auto;
        aspect-ratio: 4 / 3;
        overflow: hidden;
    }

    .promo-banner__image,
    .promo-banner--green .promo-banner__image {
        left: -5%;
        top: -10%;
        width: 110%;
    }

    .promo-banner--green .promo-banner__logo {
        height: 90px;
        left: 20px;
        bottom: 20px;
    }
}

/* sections/reviews-grid.css */
/**
 * reviews-grid.css
 * Reviews Grid block — dark-bg sekcia s 3-stĺpcovým gridom recenzií
 */

.reviews-grid-block {
    overflow: visible;
    position: relative;
}

/* ---- Tmavé pozadie ---- */
.reviews-grid-bg {
    background-color: var(--color-dark);
    background-size: cover;
    background-position: center;
    padding: 80px 0 200px;
    text-align: center;
    /* Nad sivé pozadie sekcie (`.reviews-grid-block::before`), aby ho neprekrylo. */
    position: relative;
}

.reviews-grid-title {
    color: var(--color-white);
    margin-bottom: 20px;
}

.reviews-grid-desc {
    color: var(--color-gray);
    max-width: 700px;
    margin: 0 auto;
}

.reviews-grid-desc p {
    color: white;
    font-weight: 700;
}

/* ---- Outer wrapper — negatívny margin ---- */
.reviews-grid-outer {
    margin-top: -140px;
    position: relative;
}

/* Karty sú biele a sekcia nemá pozadie, takže na bielom pozadí stránky splývajú —
   viditeľný ostane len ich mäkký tieň a pôsobí to, akoby biela plocha karty
   presahovala cez container (tlačidlo "Zobraziť viac" potom vyzerá ako na bielom
   bloku). Sivá to odlíši, ale nesmie prekryť tmavé hero, cez ktoré karty prečnievajú
   vďaka zápornému `margin-top`. Sivá preto ide pod celý blok a tmavé hero
   (`.reviews-grid-bg`, ktoré je `position: relative`) ju hore samo prekryje —
   netreba teda dopočítavať, kde hero končí. Je na `-block`, nie na `-outer`,
   aby siahala až po koniec sekcie, teda aj pod tlačidlo. */
.reviews-grid-block::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, #fff 40%, #f4f5f7);
    z-index: -1;
}

/* ---- 3 stĺpce, dlaždicovo ----
   Nie CSS `grid`: tam sa riadok zarovná na najvyššiu kartu a pod kratšími
   recenziami vznikajú diery. Chceme, aby ďalšia recenzia začala tam, kde predošlá
   skončila (rovnako to má Carvago).

   Nie ani CSS `columns`: WebKit ich balancuje inak než Chromium — pri 25 recenziách
   skončili stĺpce na 2032/1829/1556px, teda 476px rozdiel, a pod najkratším stĺpcom
   zívala prázdna plocha až po tlačidlo. Preto sú stĺpce `flex` a karty do nich
   rozdeľuje `buildReviewColumns()` v `main.js` podľa nameraných výšok (greedy —
   karta ide vždy do momentálne najkratšieho stĺpca). Rozdiel klesol na ~43px.
   Počet stĺpcov drží `--cols`, aby ho JS vedel prečítať a nemusel duplikovať
   breakpointy. */
.reviews-grid {
    --cols: 3;
    display: flex;
    align-items: flex-start;
    gap: 30px;
    /* `padding`, nie `margin` — tieň kariet nezaberá miesto v box modeli, takže bez
       tohto by sa spodok tieňa poslednej karty orezal o koniec sivej plochy. */
    padding-bottom: 50px;
}

.reviews-grid__col {
    display: flex;
    flex-direction: column;
    gap: 30px;
    /* Bez `min-width: 0` by flex položka nešla pod šírku svojho obsahu. */
    flex: 1;
    min-width: 0;
}

/* ---- Karta recenzie ---- */
.review-card {
    background: var(--color-white);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-light);
    padding: 35px 30px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 999;
    position: relative;
}

.review-cart-footer {
    display: flex;
    flex-direction: row;
    justify-content: normal;
    gap: 20px;
    align-items: center;

}

.review-card__author-photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #a5acbf;
}

.review-card__author-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.review-card__name {
    color: #A5ACBF;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    margin: 0;
}

/* Prelink na pôvod recenzie — vpravo dole vo footeri karty. */
.review-card__source {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    line-height: 24px;
    color: #A5ACBF !important; /* ponytail: prebíja neznámy externý štýl, zrušiť keď sa nájde zdroj */
    text-decoration: underline;
}

.review-card__source:hover,
.review-card__source:focus-visible {
    color: var(--color-dark);
}

.review-card-inner .review-cart-footer .stars {
    display: inline-flex;
    color: #fec107;
    margin-right: 5px;
    font-size: 14px;
}

.review-card blockquote {
    text-align: left;
    color: var(--color-gray);
    font-weight: 300;
    margin: 0 0 25px;
    line-height: 1.4;
}

/* ---- Časť s autom ---- */
.review-card__car {
    border-top: 1px solid var(--color-border);
    padding-top: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: left;
    margin: 20px 0;
}

.review-card__car-photo {
    width: 100%;
    height: 200px;
    border-radius: var(--radius-small);
    overflow: hidden;
    margin: 20px 0;
    flex-shrink: 0;
}

.review-card__car-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.review-card__car-desc {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
    color: var(--color-dark);
    line-height: 1.4;
}

/* ---- Skryté recenzie + "Zobraziť viac" ----
   display:none (nie visibility), aby karta vypadla z column-flow a stĺpce sa
   prebalancovali len cez viditeľné karty. */
.review-card--hidden {
    display: none;
}

.reviews-grid-more {
    text-align: center;
    /* box-shadow kariet nezaberá miesto v box modeli, takže bez tohto marginu
       tieň poslednej karty zasahuje do tlačidla. */
    margin-top: 30px;
    /* Odsadenie pod tlačidlom je `padding` sekcie, nie `margin` tlačidla — margin
       by vypadol von z bloku a sivé pozadie (`::before`) by ho nepokrylo, takže
       by pod tlačidlom ostal biely pruh. */
    padding-bottom: 50px;
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .reviews-grid {
        --cols: 2;
    }

    .reviews-grid-bg {
        padding-bottom: 170px;
    }

    .reviews-grid-outer {
        margin-top: -110px;
    }
}

@media (max-width: 650px) {
    .reviews-grid {
        --cols: 1;
    }

    .reviews-grid-bg {
        padding: 60px 0 130px;
    }

    .reviews-grid-outer {
        margin-top: -70px;
    }

    .review-card {
        padding: 30px 25px 25px;
    }
}

/* sections/services-grid.css */
/**
 * services-grid.css
 * Services Grid block — dark-bg sekcia s 3×2 mriežkou dlaždíc so službami
 */

/* ---- Sekcia ---- */
.services-grid-section {
    background:linear-gradient(90deg, #1FEFA5 0%, #3DCB98 100%);
    padding: 80px 0;
}

/* ---- Nadpis sekcie ---- */
.services-grid-title {
    color: var(--color-white);
    text-align: center;
    font-size: 36px;
    font-weight: 900;
    margin-bottom: 50px;
    line-height: 1.2;
}

/* ---- Grid ---- */
/* 4 stĺpce — 1. dlaždica (2fr) a 6. dlaždica (2fr) dostanú span 2 */
.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

/* Riadok 1: 2fr | 1fr | 1fr */
.service-tile:nth-child(1) { grid-column: span 2; }

/* Riadok 2: 1fr | 1fr | 2fr */
.service-tile:nth-child(6) { grid-column: span 2; }

/* ---- Dlaždica ---- */
.service-tile {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    min-height: 280px;
    background-color: #3a3a3a;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    transition: transform 0.3s ease;
}

/* ---- Tmavý overlay ---- */
.service-tile__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}

/* ---- Obsah dlaždice ---- */
.service-tile__content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 8px;
}

/* ---- Názov služby ---- */
.service-tile__title {
    color: var(--color-white);
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.service-tile__text {
    margin-bottom: 0;
}

.service-tile__content .button.style-3{
    padding: 11px 20px;
}
.service-tile__content .button.style-3:hover{
    background: white;
    border-color: white;
}
/* ---- Responsive: tablet (768px – 1024px) ---- */
@media (max-width: 1024px) {
    .services-grid-section {
        padding: 60px 0;
    }

    .services-grid-title {
        font-size: 30px;
        margin-bottom: 40px;
    }

    .service-tile {
        min-height: 250px;
    }

    .service-tile__title {
        font-size: 20px;
    }
}

/* ---- Responsive: mobil (do 767px) ---- */
@media (max-width: 767px) {
    .services-grid-section {
        padding: 50px 0;
    }

    .services-grid-title {
        font-size: 26px;
        margin-bottom: 30px;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .service-tile {
        min-height: 220px;
    }

    .service-tile__title {
        font-size: 20px;
    }

    .service-tile__content {
        padding: 25px 20px;
        gap: 14px;
    }
}

/* sections/steps-grid.css */
/* Steps Grid Section */
.steps-grid-section {
    background: #fff;
    padding: 80px 0;
}

.steps-grid-section .section-header {
    text-align: center;
    margin-bottom: 60px;
}

.steps-grid-section .section-title {
    font-size: 26px;
    font-weight: 900;
    color: #262626;
    line-height: 1.2;
   text-align: left;
}

.steps-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 30px;
    max-width: 1400px;
    margin: 0 auto;
}

.step-grid-item {
    background: #ffffff;
    border-radius: 16px;
    padding: 32px 28px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    box-shadow: 0 106px 30px 0 rgba(0, 0, 0, 0.00), 0 68px 27px 0 rgba(0, 0, 0, 0.00), 0 38px 23px 0 rgba(0, 0, 0, 0.02), 0 17px 17px 0 rgba(0, 0, 0, 0.03), 0 4px 9px 0 rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step-grid-item:hover {
    transform: translateY(-4px);
}

.step-number {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: rgba(61, 203, 152, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-number span {
    font-size: 20px;
    font-weight: 900;
    color: #3dcb98;
}

.step-content {
    flex: 1;
}

.step-content .step-title {
    font-size: 20px;
    font-weight: 900;
    color: #262626;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.step-content .step-description p {
    font-size: 16px;
    color: #a5acbf;
    line-height: 1.6;
    font-weight: 400;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .steps-grid-container {
        gap: 30px 20px;
    }

    .steps-grid-section .section-title {
        font-size: 36px;
    }
}

@media (max-width: 991px) {
    .steps-grid-section {
        padding: 60px 0;
    }

    .steps-grid-section .section-header {
        margin-bottom: 40px;
    }

    .steps-grid-section .section-title {
        font-size: 32px;
    }

    .steps-grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .step-grid-item {
        padding: 28px 24px;
    }

    .step-content .step-title {
        font-size: 18px;
    }

    .step-content .step-description {
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    .steps-grid-section {
        padding: 50px 0;
    }

    .steps-grid-section .section-title {
        font-size: 28px;
        padding: 0 20px;
        text-align: center;
    }

    .steps-grid-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .step-grid-item {
        padding: 24px 20px;
        gap: 16px;
    }

    .step-number {
        width: 42px;
        height: 42px;
    }

    .step-number span {
        font-size: 20px;
    }

    .step-content .step-title {
        font-size: 17px;
        margin-bottom: 10px;
    }

    .step-content .step-description {
        font-size: 14px;
    }
}