/* __OM_UI_PATCH_V23_CSS__ */


/* ==========================================================
   1) WIDER HERO TIMELINE
   ========================================================== */

#om-v20-hero-row {
    grid-template-columns:
        minmax(230px, 260px)
        minmax(720px, 1fr)
        max-content !important;
    column-gap: 20px !important;
    align-items: center !important;
}

#om-v20-area-slot {
    min-width: 220px !important;
    max-width: 260px !important;
}

#om-v20-timeline-slot {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-content: stretch !important;
}

#om-v20-timeline-slot #omCanonicalTimelineV7,
#om-v20-timeline-slot .om-v7-timeline-panel {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
}

#om-v20-actions-slot {
    justify-self: end !important;
    width: max-content !important;
    min-width: max-content !important;
}

#om-v20-actions-slot #om-v18-actions {
    gap: 10px !important;
    margin: 0 !important;
}


/* ==========================================================
   2) REMOVE LAYER PILLS NEXT TO AREA OVERVIEW
   ========================================================== */

#layerButtons {
    display: none !important;
}


/* ==========================================================
   3) HIDE HERO DINO
   ========================================================== */

.om-v23-hide-dino {
    display: none !important;
}


/* ==========================================================
   4) RESTORE PIXEL PREVIEWS IN COMPARE
   ========================================================== */

/* Undo the V19 hidden classes if they still exist in DOM */
.om-v19-hide-pixels,
.om-v19-hide-clip {
    display: revert !important;
}

/* Keep the compare pixel blocks visible again */
.om-v9-pixel-wrap,
.om-v9-pixel-canvas,
.om-v9-pixel-stat,
.om-compare-pixel-preview,
.om-product-pixel-preview,
[data-om-pixel-preview] {
    display: revert !important;
}

@media (max-width: 1250px) {
    #om-v20-hero-row {
        grid-template-columns:
            minmax(200px, 220px)
            minmax(520px, 1fr)
            max-content !important;
        column-gap: 14px !important;
    }
}

@media (max-width: 900px) {
    #om-v20-hero-row {
        grid-template-columns: 1fr !important;
    }
}


/* ==========================================================
   __OM_UI_PATCH_V24_TIGHT_HERO__
   Reduce space between timeline and action buttons so
   Compare is fully visible.
   ========================================================== */

#om-v20-hero-row {
    grid-template-columns:
        minmax(210px, 235px)
        minmax(0, 1fr)
        max-content !important;

    column-gap: 10px !important;
}


/* left identity block slightly narrower */
#om-v20-area-slot {
    min-width: 200px !important;
    max-width: 235px !important;
}


/* timeline uses remaining space but does not force overflow */
#om-v20-timeline-slot {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    overflow: hidden !important;
}

#om-v20-timeline-slot #omCanonicalTimelineV7,
#om-v20-timeline-slot .om-v7-timeline-panel {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}


/* actions stay compact and closer to timeline */
#om-v20-actions-slot {
    justify-self: end !important;
    min-width: max-content !important;
    width: max-content !important;
}

#om-v20-actions-slot #om-v18-actions {
    gap: 8px !important;
    margin: 0 !important;
}


/* slightly tighter buttons so Compare fits fully */
#om-v20-actions-slot #om-new-area-launch,
#om-v20-actions-slot #om-v18-compare {
    min-width: 116px !important;
    height: 40px !important;
    padding: 0 13px !important;
    font-size: 12px !important;
}


/* on medium widths tighten even more */
@media (max-width: 1400px) {
    #om-v20-hero-row {
        grid-template-columns:
            minmax(190px, 220px)
            minmax(0, 1fr)
            max-content !important;
        column-gap: 8px !important;
    }

    #om-v20-actions-slot #om-v18-actions {
        gap: 6px !important;
    }

    #om-v20-actions-slot #om-new-area-launch,
    #om-v20-actions-slot #om-v18-compare {
        min-width: 108px !important;
        padding: 0 11px !important;
    }
}