/**
 * PHONE HEADER RECENTS LOCK — Try-On + Stencil only.
 * Loaded BEFORE header-recents-lock.css (layout lives there).
 *
 * DO NOT add position:absolute or nav flex overrides here — title-lane flex handles all widths.
 * DO NOT shrink thumbnails or Reset below the locked sizes (caused 2026-06-20 regression).
 *
 * Regression: tests/regression-locks.mjs → CRITICAL PHONE HEADER LOCK
 */

/* ── Try-On phone: max 4 header thumbnails (JS TRYON_PHONE_HEADER_MAX mirrors this) ── */
@media (max-width: 600px) {
    .tryon-result-history .tryon-output-thumbnail:nth-child(n+5) {
        display: none !important;
    }

    .tryon-output-thumbnail {
        width: 36px;
        height: 36px;
    }
}

/* ── Stencil phone portrait: 4 full header thumbs + Reset beside menu ── */
@media (max-width: 600px) and (orientation: portrait) {
    body.stencil-page .stencil-top-reset-btn {
        height: 32px !important;
        padding: 0 12px !important;
        margin-right: 0 !important;
        font-size: 0.74rem !important;
    }

    body.stencil-page #qe-recents-strip .sketch-recent-thumb {
        width: 38px !important;
        height: 44px !important;
        flex: 0 0 38px !important;
        max-width: 38px !important;
        min-width: 0 !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    body.stencil-page #qe-recents-strip .sketch-recent-thumb:nth-child(n+5) {
        display: none !important;
    }
}