/* STEP 62: stable desktop layout for ad detail pages.
   Loaded after the old ads CSS to neutralize conflicting legacy rules. */

/* The ad detail page must always be visible in desktop Firefox/Chrome. */
html body .ad-detail-page.kf-detail {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: min(1180px, calc(100vw - 32px)) !important;
    max-width: 1180px !important;
    min-height: 600px !important;
    margin: 28px auto 80px !important;
    padding: 0 !important;
    background: #fff !important;
    color: #1f2328 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

html body .ad-detail-page.kf-detail *,
html body .ad-detail-page.kf-detail *::before,
html body .ad-detail-page.kf-detail *::after {
    box-sizing: border-box !important;
}

html body .ad-detail-page.kf-detail .kf-detail-breadcrumbs {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    color: #7f8894 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
}

html body .ad-detail-page.kf-detail .kf-detail-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 760px) minmax(300px, 360px) !important;
    gap: 28px !important;
    align-items: start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

html body .ad-detail-page.kf-detail .kf-detail-media {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    background: #fff !important;
    overflow: visible !important;
}

html body .ad-detail-page.kf-detail .kf-detail-gallery {
    display: grid !important;
    grid-template-columns: 74px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

html body .ad-detail-page.kf-detail .kf-detail-thumbs {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 74px !important;
    max-height: 620px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

html body .ad-detail-page.kf-detail .kf-detail-thumb {
    display: block !important;
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #f1f3f5 !important;
}

html body .ad-detail-page.kf-detail .kf-detail-thumb img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Main media: never collapse to natural image size, never disappear in Firefox. */
html body .ad-detail-page.kf-detail .kf-detail-main-photo {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: clamp(480px, 52vw, 680px) !important;
    min-height: 480px !important;
    max-height: 680px !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #f1f3f5 !important;
    cursor: zoom-in !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

html body .ad-detail-page.kf-detail .kf-detail-main-photo > img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #f1f3f5 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

html body .ad-detail-page.kf-detail .kf-detail-floating-actions,
html body .ad-detail-page.kf-detail .kf-detail-photo-count {
    z-index: 5 !important;
}

html body .ad-detail-page.kf-detail .kf-detail-side {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    position: sticky !important;
    top: 96px !important;
    padding: 18px !important;
    border: 1px solid #e6eaee !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: none !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html body .ad-detail-page.kf-detail .kf-detail-description {
    display: block !important;
    width: min(760px, 100%) !important;
    max-width: 760px !important;
    margin: 28px 0 0 !important;
    padding: 0 !important;
    background: #fff !important;
    color: #1f2328 !important;
}

/* Tablet and phone: single column, keep the current mobile look. */
@media (max-width: 899px) {
    html body .ad-detail-page.kf-detail {
        width: 100% !important;
        max-width: none !important;
        margin: 0 auto 82px !important;
        padding: 12px 12px 90px !important;
        min-height: 0 !important;
    }

    html body .ad-detail-page.kf-detail .kf-detail-breadcrumbs {
        padding: 0 !important;
        margin: 0 0 14px !important;
    }

    html body .ad-detail-page.kf-detail .kf-detail-grid,
    html body .ad-detail-page.kf-detail .kf-detail-gallery {
        display: block !important;
        width: 100% !important;
    }

    html body .ad-detail-page.kf-detail .kf-detail-thumbs {
        display: none !important;
    }

    html body .ad-detail-page.kf-detail .kf-detail-main-photo {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 10px !important;
    }

    html body .ad-detail-page.kf-detail .kf-detail-main-photo > img {
        position: static !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    html body .ad-detail-page.kf-detail .kf-detail-side {
        position: static !important;
        border: 0 !important;
        border-radius: 0 !important;
        padding: 16px 0 !important;
    }
}


/* STEP 63: one-photo desktop fix.
   If there are no thumbnails, the main photo must not occupy the 74px thumb column. */
html body .ad-detail-page.kf-detail .kf-detail-gallery.no-thumbs {
    display: block !important;
    width: 100% !important;
}
html body .ad-detail-page.kf-detail .kf-detail-gallery.no-thumbs .kf-detail-main-photo {
    display: block !important;
    width: 100% !important;
    max-width: 760px !important;
}
html body .ad-detail-page.kf-detail .kf-detail-gallery.has-thumbs {
    display: grid !important;
    grid-template-columns: 74px minmax(0, 1fr) !important;
}
/* Fallback for modern browsers even before template class is present. */
@supports selector(.kf-detail-gallery:has(.kf-detail-thumbs)) {
    html body .ad-detail-page.kf-detail .kf-detail-gallery:not(:has(.kf-detail-thumbs)) {
        display: block !important;
        width: 100% !important;
    }
}

/* STEP64: hard visible form + stable desktop media. */
html body .ad-form-page,
html body .ad-form-page .ad-form,
html body .ad-form-page .ad-form-grid {
    visibility: visible !important;
    opacity: 1 !important;
}
html body .ad-form-page {
    display: block !important;
    width: min(980px, calc(100vw - 32px)) !important;
    max-width: 980px !important;
    min-height: 520px !important;
    margin: 28px auto 90px !important;
    padding: 0 !important;
    background: #fff !important;
    color: #1f2328 !important;
}
html body .ad-form-page .ad-form {
    display: block !important;
}
html body .ad-form-page .ad-form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
}
html body .ad-form-page .ad-form-field-full {
    grid-column: 1 / -1 !important;
}
html body .ad-form-page input,
html body .ad-form-page select,
html body .ad-form-page textarea {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}
html body .ad-form-page .ad-photo-pick-btn input[type="file"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 899px) {
    html body .ad-form-page {
        width: 100% !important;
        max-width: none !important;
        margin: 0 auto 82px !important;
        padding: 16px 14px 92px !important;
    }
    html body .ad-form-page .ad-form-grid {
        display: block !important;
    }
    html body .ad-form-page .ad-form-field {
        margin-bottom: 16px !important;
    }
}