.detail-container {

    .header {
        margin-top: 20px;
    }

    @media (max-width: 1295px) {
        .header2 {
            .title {
                font-size: 20px;
            }
        }
        .header3 {
                font-size: 16px;
        }
    }
    @media (min-width: 1296px) {
        .header2 {
            .title {
                font-size: 28px;
            }
        }
        .header3 {
                font-size: 20px;
        }
    }

    .header1 {
        display: flex;
        gap: 50px;
        border-bottom: 1px solid rgba(33, 37, 41, 0.25);
        padding-bottom: 10px;

        .title {
            flex-grow: 1;

            font-weight: 400;
            line-height: 150%;
            
            a {
                text-decoration: none;
                color: #212529;
                font-weight: 400;
                font-size: 16px;
                line-height: 150%;
            }

            img {
                margin-top: -2px;
                width: 16px;
                height: 16px;
            }
        }

        .icons {
            display: flex;
            align-items: center;
            gap: 16px;

            img {
                width: 20px;
                height: 20px;
            }
        }
    }

    .header2 {
        margin-top: 20px;
        margin-bottom: 15px;

        .title {
            font-weight: 400;
            line-height: 120%;
        }
    }

    .header3 {
        display: flex;
        justify-content: space-between;
        font-weight: 400;
        line-height: 120%;
        margin-top: 10px;
        margin-bottom: 15px;

        .text1 {

            img {
                width: 20px;
                height: 20px;            
            }
        }
    }

    .description-container {
        display: flex;
        gap: 20px;
        margin-top: 25px;

        @media (max-width: 1295px) {
            flex-wrap: wrap;
            .left {
                .property-description {
                    padding: 16px;
                }
                .property-features {
                    padding: 16px;
                    .section {
                        .line {
                            .key {
                                width: 40%;
                            }
                        }
                    }
                }
            }
            .right {
            }
        }
        @media (min-width: 1296px) {
            .left {
                .property-description {
                    padding: 32px;
                }
                .property-features {
                    padding: 32px;
                    .section {
                        .line {
                            .key {
                                width: 240px;
                            }
                        }
                    }
                }
            }
        }

        .left {
            max-width: 879px;

            .property-description {
                border-radius: 6px;
                background-color: #fff;

                .section-title {
                    font-weight: 400;
                    font-size: 24px;
                    line-height: 120%;
                    color: #212529;
                }

                .section {
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 150%;
                    color: #212529;

                    p {
                        margin: 25px 0 0 0;
                    }
                }
            }

            .property-features {
                border-radius: 6px;
                background-color: #fff;
                margin-top: 25px;

                .section-title {
                    font-weight: 400;
                    font-size: 24px;
                    line-height: 120%;
                    color: #212529;
                }

                .section {
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 150%;
                    color: #212529;
                    margin-top: 25px;

                    .line {
                        display: flex;
                        /* height: 41px; */
                        background-color: white;
                        border-bottom: 1px solid #DEE2E6;
                        border-radius: 0px;
                        .key {
                            padding: 8px;
                            font-weight: 400;
                            font-size: 16px;
                            line-height: 150%;
                            color: #212529;
                            flex-shrink: 0;
                        }
                        .value {
                            display: flex;
                            flex-grow: 1;
                            padding: 8px;
                            font-weight: 300;
                            font-size: 16px;
                            line-height: 150%;
                            color: #212529;
                        }
                    }
                }

                .map-wrapper {
                    margin-top: 40px;
                    .btn-map-fullscreen {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        padding: 12px;

                        position: absolute;
                        width: 42px;
                        height: 42px;
                        right: 10px;
                        top: 10px;

                        background: #F8F9FA;
                        border: 1px solid #F8F9FA;
                        border-radius: 6px;
                    }
                }
            }
        }

        .right {
            display: flex;
            flex-grow: 1;
        }
    }
}

    /* =========================================
       GALERIA (Images)
       ========================================= */
    .gallery-img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Kluczowe: przycina zdjęcie, by wypełniło kafelek */
        border-radius: 6px;
        cursor: pointer;
        transition: transform 0.3s ease;
    }

    .gallery-img:hover {
        filter: brightness(0.9);
    }

    /* Ustawienie wysokości galerii na desktopie */
    @media (min-width: 992px) {
        .gallery-container {
            /* height: 500px; */
        }
        /* Małe zdjęcia mają połowę wysokości minus połowa odstępu (g-2 = 0.5rem = 8px) */
        .col-lg-6 .col-6 {
            height: calc(50% - 4px); 
        }
    }
    
    /* Na mobile niech zdjęcia mają naturalną wysokość */
    @media (max-width: 991px) {
        .gallery-img.main-img {
            height: 300px;
        }
        .col-lg-6 .col-6 {
            height: 150px;
        }
    }

    /* =========================================
       BADGES & BUTTONS
       ========================================= */
    .badge-gold {
        position: absolute;
        top: 20px;
        left: 20px;
        background-color: #C19A5B; /* Twój złoty kolor */
        color: white;
        text-transform: uppercase;
        font-size: 11px;
        font-weight: 700;
        padding: 6px 12px;
        border-radius: 4px;
        letter-spacing: 0.5px;
        z-index: 2;
    }

    .btn-show-photos {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 6px 12px;
        gap: 8px;

        width: 177px;
/*        height: 38px; */

        background: #F8F9FA;
        border: 1px solid #F8F9FA;
        border-radius: 6px;

        position: absolute;
        bottom: 15px;
        @media (max-width: 1295px) {
            right: 15px;
        }
        @media (min-width: 1296px) {
            right: 75px;
        }
        color: black;
        font-size: 16px;
        font-weight: 400;
        cursor: pointer;
        text-decoration: none;

        img {
            width: 16px;
            height: 16px;
        }

        &:hover {
            background: #D3D4D5;
            border: 1px solid #C6C7C8;
        }
    }
    
    .hover-gold:hover {
        color: #C19A5B !important;
    }
    
    .cursor-pointer {
        cursor: pointer;
    }

    /* =========================================
       SPECS BAR (Pasek na dole)
       ========================================= */
    .spec-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }

    .spec-icon {
        font-size: 20px;
        color: #6c757d; /* Szary, nie czarny */
        margin-bottom: 5px;
    }

    .spec-label {
        font-size: 12px;
        color: #adb5bd; /* Bardzo jasny szary */
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .spec-value {
        font-size: 16px;
        font-weight: 500;
        color: #212529;
    }

    /* Linie pionowe między elementami (tylko na desktop) */
    @media (min-width: 768px) {
        .border-end-md {
            border-right: 1px solid #eee;
        }
    }




