/* ============================================================
   INCI4ME R5.17 BF35 BF13 BF5 BF4
   Responsive workspace layer: tablet/mobile portrait only.
   Desktop and landscape layouts remain authoritative.
   ============================================================ */

:root {
    --bf5-touch-min: 44px;
    --bf5-radius: 16px;
    --bf5-border: #e7e5ee;
    --bf5-soft: #f8f7fb;
    --bf5-text: #2d2a35;
    --bf5-muted: #6b6875;
}

/* BF5 BF1: captions are portrait-only. Desktop/landscape keep the frozen
   icon-only source controls exactly as before BF5. */
.bf5-source-caption {
    display: none;
}

/* BF5 BF2: portrait-only controls must be invisible in frozen desktop. */
.bf5-check-toggle {
    display: none;
}

/* ---------- Portrait navigation ---------- */
@media (max-width: 991.98px) and (orientation: portrait) {
    body.inci-site .inci-main-navbar .inci-header-panel {
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    body.inci-site .inci-main-navbar #mainNavbar {
        flex-basis: 100%;
        width: 100%;
        max-height: min(72dvh, 680px);
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        padding: 10px;
    }

    body.inci-site .inci-main-navbar #mainNavbar > .navbar-nav.mx-auto {
        width: 100%;
    }

    body.inci-site .inci-main-navbar #mainNavbar > .navbar-nav.mx-auto .nav-link,
    body.inci-site .inci-main-navbar .header-actions .nav-link,
    body.inci-site .inci-main-navbar .header-actions .dropdown-item {
        min-height: var(--bf5-touch-min);
        display: flex;
        align-items: center;
    }

    body.inci-site .inci-main-navbar .header-actions {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
        align-items: start;
        margin: 10px 0 0 !important;
        padding-top: 10px;
        border-top: 1px solid var(--bf5-border);
    }

    body.inci-site .inci-main-navbar .header-actions > * {
        min-width: 0;
        width: 100%;
    }

    body.inci-site .inci-main-navbar .header-actions .header-account-link,
    body.inci-site .inci-main-navbar .header-actions .language-current,
    body.inci-site .inci-main-navbar .header-auth-links {
        width: 100%;
    }

    body.inci-site .inci-main-navbar .header-auth-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.inci-site .inci-main-navbar .header-auth-links .nav-link {
        justify-content: center;
        margin: 0;
    }

    body.inci-site .inci-main-navbar .header-actions .dropdown-menu,
    body.inci-site .inci-main-navbar .language-menu {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        float: none !important;
        width: 100%;
        min-width: 0;
        max-height: 45dvh;
        overflow-y: auto;
        margin: 6px 0 0;
        box-shadow: none;
    }

    body.inci-site .inci-main-navbar .language-menu {
        display: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    body.inci-site .inci-main-navbar .language-dropdown.show .language-menu,
    body.inci-site .inci-main-navbar .language-menu.show {
        display: grid !important;
    }

    body.inci-site .inci-main-navbar .language-menu .dropdown-item {
        min-width: 0;
        gap: 8px;
        white-space: normal;
    }

    body.inci-site .inci-main-navbar .language-menu .lang-flag {
        flex: 0 0 auto;
    }
}

@media (max-width: 575.98px) and (orientation: portrait) {
    body.inci-site .inci-main-navbar #mainNavbar {
        max-height: 76dvh;
        border-radius: 14px;
    }

    body.inci-site .inci-main-navbar .header-actions,
    body.inci-site .inci-main-navbar .header-auth-links {
        grid-template-columns: 1fr;
    }

    body.inci-site .inci-main-navbar .language-menu {
        grid-template-columns: 1fr;
    }
}

/* ---------- Analyze INCI: portrait becomes touch-first, never blocked ---------- */
@media (max-width: 991.98px) and (orientation: portrait) {
    html[data-inci-orientation="portrait"] body.active-index #myTabContent,
    html[data-inci-orientation="portrait"] body.active-index #caricamento,
    html[data-inci-orientation="portrait"] body.active-archivioinci #inci-tab,
    html[data-inci-orientation="portrait"] body.active-archivioinci #inci-tabContent {
        display: block;
        visibility: visible;
    }

    body.active-index #myTabContent > #caricamento > .row.mt-4 {
        max-width: 880px;
        padding: 8px;
        gap: 14px 0;
    }

    body.active-index #myTabContent > #caricamento > .row.mt-4 > .col-md-6,
    body.active-index #myTabContent > #caricamento > .row.mt-4 > [class*="col-md-6"] {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body.active-index .zoom-container {
        min-height: clamp(220px, 36vh, 360px) !important;
        border-radius: var(--bf5-radius);
        overflow: hidden;
    }

    body.active-index #manualIngredients {
        min-height: clamp(190px, 28vh, 300px) !important;
    }

    body.active-index .bf5-source-toolbar {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 6px 2px 10px;
        margin: 0;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    body.active-index .bf5-source-toolbar > * {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    body.active-index .bf5-source-action {
        min-width: 72px;
        min-height: 64px !important;
        display: inline-flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 7px 9px !important;
        border-radius: 13px !important;
    }

    body.active-index .bf5-source-action .icon-img {
        width: 30px !important;
        height: 30px !important;
        object-fit: contain;
    }

    body.active-index .bf5-source-caption {
        display: block;
        max-width: 100px;
        color: inherit;
        font-size: .7rem;
        font-weight: 650;
        line-height: 1.15;
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* BF5 BF1: cameraOverlay.css historically makes the camera fixed only in
       landscape. Once portrait became supported, the camera fell back into
       normal document flow and pushed the whole page downward. Give portrait
       the same modal semantics without touching the camera engine. */
    body.active-index #cameraOverlay {
        position: fixed !important;
        top: max(6px, env(safe-area-inset-top)) !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translateX(-50%) !important;
        z-index: 2000 !important;
        width: min(94vw, 800px) !important;
        max-width: 800px !important;
        max-height: calc(100dvh - 12px) !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        box-sizing: border-box;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    body.active-index #cameraOverlay.show {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body.active-index #cameraOverlay .video-container {
        width: 100% !important;
        max-width: 100% !important;
        max-height: min(38dvh, 420px) !important;
        aspect-ratio: 16 / 9;
    }

    body.active-index #cameraControls.three-column-controls {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.active-index #cameraControls .main-buttons,
    body.active-index #cameraControls .sliders-row {
        flex-wrap: wrap !important;
    }

    body.active-index #cameraControls button,
    body.active-index #cameraControls select,
    body.active-index #cameraControls input[type="range"] {
        min-height: var(--bf5-touch-min);
    }
}

/* ---------- Archive INCI: sticky horizontal category strip ---------- */
@media (max-width: 991.98px) and (orientation: portrait) {
    body.active-archivioinci .archive-page {
        max-width: 900px;
    }

    body.active-archivioinci #inci-tab.archive-tabs {
        position: sticky;
        top: 8px;
        z-index: 1010;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 6px;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        background: rgba(248, 247, 251, .97);
        backdrop-filter: blur(10px);
    }

    body.active-archivioinci #inci-tab .nav-item {
        flex: 0 0 auto !important;
        min-width: max-content;
        scroll-snap-align: start;
    }

    body.active-archivioinci #inci-tab .nav-link {
        min-height: var(--bf5-touch-min);
        white-space: nowrap;
    }

    body.active-archivioinci .archive-tab-content {
        margin-top: 14px;
    }
}

@media (max-width: 575.98px) and (orientation: portrait) {
    /* Smartphone: no desktop-like clipped horizontal strip. Six archive
       actions become a compact two-column touch grid. */
    body.active-archivioinci #inci-tab.archive-tabs {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        overflow: visible;
        scroll-snap-type: none;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }

    body.active-archivioinci #inci-tab .nav-item {
        width: 100%;
        min-width: 0;
    }

    body.active-archivioinci #inci-tab .nav-link {
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
        white-space: normal;
        text-align: left;
        line-height: 1.2;
        padding: 10px 12px;
        border: 0 !important;
        border-radius: 12px;
        background: transparent;
        box-shadow: none;
    }

    body.active-archivioinci #inci-tab .nav-link.active {
        background: #f1eff7;
        color: #211f27;
        box-shadow: inset 0 0 0 1px rgba(71, 64, 96, .06);
    }
}

/* ---------- CHECK/OCR correction table: compact cards in portrait ---------- */
.bf5-check-toolbar,
.bf5-result-toolbar,
.bf5-chart-caption,
.bf5-compare-metric-separator {
    display: none;
}

@media (max-width: 991.98px) and (orientation: portrait) {
    .bf5-check-toolbar,
    .bf5-result-toolbar {
        position: sticky;
        top: 8px;
        z-index: 1005;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px 12px;
        margin: 0 0 10px;
        padding: 9px 10px;
        border: 1px solid var(--bf5-border);
        border-radius: 14px;
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 9px 26px rgba(45,42,61,.07);
        backdrop-filter: blur(10px);
    }

    .bf5-check-summary,
    .bf5-result-summary {
        color: var(--bf5-muted);
        font-size: .8rem;
        font-weight: 650;
    }

    .bf5-filter-group {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .bf5-filter-button {
        min-height: 36px;
        padding: 6px 10px;
        border: 1px solid #ddd9e8;
        border-radius: 999px;
        background: #fff;
        color: #585461;
        font-size: .76rem;
        font-weight: 700;
    }

    .bf5-filter-button.is-active {
        border-color: #2d2a35;
        background: #2d2a35;
        color: #fff;
    }

    /* BF5 BF4: result tabs behave like a modern mobile segmented navigation.
       No desktop table-tab frame, no hard divider, no boxy active border. */
    #myTab.nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        gap: 4px;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        margin: 8px 0 12px !important;
        padding: 2px;
        border: 0 !important;
        background: transparent;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    #myTab.nav-tabs::-webkit-scrollbar {
        display: none;
    }

    #myTab.nav-tabs .nav-item {
        flex: 0 0 auto;
        margin: 0;
    }

    #myTab.nav-tabs .nav-link {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 9px 12px;
        border: 0 !important;
        border-radius: 12px;
        background: transparent;
        box-shadow: none !important;
        color: #686472;
        font-weight: 700;
        white-space: nowrap;
    }

    #myTab.nav-tabs .nav-link.active {
        background: #f1eff7;
        color: #211f27;
    }

    #ocrCheckTable,
    #ocrCheckTable tbody,
    #checktableinci,
    #checktableinci tbody {
        display: block;
        width: 100%;
    }

    #ocrCheckTable thead,
    #checktableinci thead {
        display: none;
    }

    /* BF5 BF4: Bootstrap table groups can keep a dark top divider even after
       the cells become cards. Remove that desktop divider only in portrait. */
    #ocrCheckTable,
    #ocrCheckTable tbody,
    #ocrCheckTable > :not(caption) > * {
        border: 0 !important;
        border-top: 0 !important;
        box-shadow: none !important;
    }

    #ocrCheckTable tbody::before,
    #ocrCheckTable::before {
        display: none !important;
        content: none !important;
    }

    #ocrCheckTable tbody tr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 8px 10px;
        align-items: center;
        width: 100%;
        margin: 0 0 10px;
        padding: 10px;
        border: 1px solid var(--bf5-border);
        border-radius: var(--bf5-radius);
        background: #fff;
        box-shadow: 0 8px 20px rgba(45,42,61,.045);
    }

    #ocrCheckTable tbody tr > td {
        display: block;
        width: auto;
        padding: 0 !important;
        border: 0 !important;
        min-width: 0;
        background: transparent !important;
        box-shadow: none !important;
    }

    #ocrCheckTable tbody tr > td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
        color: var(--bf5-muted);
        font-size: .78rem;
    }

    #ocrCheckTable tbody tr > td:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
        font-weight: 700;
        overflow-wrap: anywhere;
    }

    #ocrCheckTable tbody tr > td:nth-child(4) {
        grid-column: 3;
        grid-row: 1;
    }

    #ocrCheckTable tbody tr > td:nth-child(3),
    #ocrCheckTable tbody tr > td:nth-child(5) {
        grid-column: 1 / -1;
        display: none;
    }

    #ocrCheckTable tbody tr.bf5-open > td:nth-child(3),
    #ocrCheckTable tbody tr.bf5-open > td:nth-child(5) {
        display: block;
    }

    #ocrCheckTable .inci-input {
        min-height: var(--bf5-touch-min);
    }

    /* Verified CHECK rows do not need a disclosure arrow. It is retained only
       for unresolved rows where correction/actions may actually be needed. */
    #ocrCheckTable tbody tr[data-bf5-state="ok"] .bf5-check-toggle {
        display: none !important;
    }

    #ocrCheckTable tbody tr > td:nth-child(5) button {
        min-width: var(--bf5-touch-min);
        min-height: var(--bf5-touch-min);
    }

    .bf5-check-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        margin-left: 3px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: #514d5a;
        font-size: 1rem;
        line-height: 1;
    }

    .bf5-filter-hidden {
        display: none !important;
    }

    /* Final rendered ingredient table after CHECK. */
    #checktableinci,
    #checktableinci tbody {
        border: 0 !important;
        border-top: 0 !important;
        box-shadow: none !important;
    }

    #checktableinci tbody::before,
    #checktableinci::before {
        display: none !important;
        content: none !important;
    }

    /* Closed details must stay genuinely closed in portrait. This also beats
       the browser's default table-row display after inline styles are changed. */
    #checktableinci tbody tr.expand-row:not(.bf5-expanded) {
        display: none !important;
    }

    #checktableinci tbody tr:not(.expand-row) {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
        gap: 7px 9px;
        align-items: center;
        width: 100%;
        margin: 0 0 8px;
        padding: 10px;
        border: 1px solid var(--bf5-border);
        border-radius: var(--bf5-radius);
        background: #fff;
        box-shadow: 0 8px 20px rgba(45,42,61,.04);
    }

    #checktableinci tbody tr:not(.expand-row) > td {
        display: block;
        width: auto;
        min-width: 0;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #checktableinci tbody tr:not(.expand-row) > td:nth-child(1) {
        color: var(--bf5-muted);
        font-size: .76rem;
    }

    #checktableinci tbody tr:not(.expand-row) > td:nth-child(2) {
        min-width: 30px;
        min-height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #checktableinci tbody tr:not(.expand-row) > td:nth-child(3) {
        font-size: .95rem;
        overflow-wrap: anywhere;
    }

    #checktableinci tbody tr:not(.expand-row) > td:nth-child(4),
    #checktableinci tbody tr:not(.expand-row) > td:nth-child(5) {
        display: none;
    }

    #checktableinci tbody tr.expand-row.bf5-expanded {
        display: block;
        width: 100%;
        margin: -2px 0 10px;
        padding: 0;
        border: 1px solid var(--bf5-border);
        border-top: 0;
        border-radius: 0 0 var(--bf5-radius) var(--bf5-radius);
        background: #fbfafd;
    }

    #checktableinci tbody tr.expand-row.bf5-expanded > td {
        display: block;
        width: 100%;
        padding: 12px !important;
        border: 0 !important;
    }

    #checktableinci .expand-cell {
        touch-action: manipulation;
        background: transparent !important;
        box-shadow: none !important;
    }

    #checktableinci tbody tr:not(.expand-row) > td.col-bio,
    #checktableinci tbody tr:not(.expand-row) > td:nth-child(6),
    #checktableinci tbody tr:not(.expand-row) > td:nth-child(7),
    #checktableinci tbody tr:not(.expand-row) > td:nth-child(8),
    #ocrCheckTable .inci-status,
    #ocrCheckTable .inci-status * {
        background-color: transparent !important;
        box-shadow: none !important;
    }

    #checktableinci .bio-badge {
        box-shadow: none !important;
        outline: 0 !important;
    }

    /* A hidden filtered detail always wins over expanded state. */
    #checktableinci tbody tr.bf5-filter-hidden,
    #checktableinci tbody tr.expand-row.bf5-filter-hidden {
        display: none !important;
    }

    /* BF5 BF4: Restrictions become a real mobile card. The desktop row number
       disappears; INCI stays left and the Annex/restriction badges stack on
       the right, matching native mobile information cards. */
    #restrizioni .table-responsive {
        overflow: visible !important;
        border: 0 !important;
    }

    #restrizioni .table-annex,
    #restrizioni .table-annex tbody,
    #restrizioni .table-annex > :not(caption) > * {
        display: block;
        width: 100%;
        border: 0 !important;
        border-top: 0 !important;
        box-shadow: none !important;
    }

    #restrizioni .table-annex::before,
    #restrizioni .table-annex tbody::before {
        display: none !important;
        content: none !important;
    }

    #restrizioni .table-annex thead {
        display: none;
    }

    #restrizioni .table-annex tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(116px, auto);
        gap: 8px 14px;
        align-items: start;
        width: 100%;
        margin: 0 0 10px;
        padding: 13px 14px;
        border: 1px solid var(--bf5-border);
        border-radius: var(--bf5-radius);
        background: #fff;
        box-shadow: 0 7px 18px rgba(45,42,61,.035);
    }

    #restrizioni .table-annex tbody td {
        display: flex;
        align-items: center;
        gap: 7px;
        min-width: 0;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow-wrap: anywhere;
    }

    /* Progressive desktop row number has no meaning in the portrait card. */
    #restrizioni .table-annex tbody td:nth-child(1) {
        display: none !important;
    }

    #restrizioni .table-annex tbody td:nth-child(2) {
        grid-column: 1;
        grid-row: 1 / span 6;
        align-self: start;
        justify-content: flex-start;
        padding-top: 2px !important;
        color: #211f27;
        font-size: .94rem;
        font-weight: 780;
        line-height: 1.25;
        text-align: left;
    }

    #restrizioni .table-annex tbody td:nth-child(n+3) {
        grid-column: 2;
        justify-self: end;
        justify-content: flex-end;
        width: 100%;
        text-align: right;
    }

    #restrizioni .table-annex tbody td:nth-child(n+3)::before {
        content: attr(data-bf5-label);
        flex: 0 0 auto;
        color: var(--bf5-muted);
        font-size: .67rem;
        font-weight: 750;
        line-height: 1.25;
        white-space: nowrap;
    }

    #restrizioni .table-annex .restriction-badge {
        min-width: 38px;
        padding: 5px 7px;
        border-radius: 9px;
        font-size: .72rem;
        line-height: 1.05;
        text-align: center;
        box-shadow: none !important;
    }

    #restrizioni .table-annex tbody td.bf5-empty {
        display: none !important;
    }
}

/* ---------- Portrait CHECK loading ---------- */
.bf5-check-loading {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(30, 28, 36, .42);
    backdrop-filter: blur(2px);
}

.bf5-check-loading.is-visible {
    display: flex;
}

.bf5-check-loading-card {
    width: min(88vw, 360px);
    display: grid;
    justify-items: center;
    gap: 9px;
    padding: 22px 20px;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 18px;
    background: #fff;
    color: #27242d;
    text-align: center;
    box-shadow: 0 24px 70px rgba(20,18,28,.25);
}

.bf5-check-loading-card strong {
    font-size: 1rem;
}

.bf5-check-loading-card span {
    color: var(--bf5-muted);
    font-size: .82rem;
    line-height: 1.35;
}

.bf5-check-spinner {
    width: 38px;
    height: 38px;
    border: 4px solid #e8e6ef;
    border-top-color: #6f61d8;
    border-radius: 50%;
    animation: bf5-check-spin .75s linear infinite;
}

@keyframes bf5-check-spin {
    to { transform: rotate(360deg); }
}

/* ---------- Single-analysis charts ---------- */
@media (min-width: 700px) and (max-width: 991.98px) and (orientation: portrait) {
    #statisticheDiv > .row.g-4.mt-4.text-center {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        margin-left: 0;
        margin-right: 0;
    }

    #statisticheDiv > .row.g-4.mt-4.text-center > .col-md-4 {
        width: 100%;
        max-width: none;
        padding: 0;
    }

    #statisticheDiv > .row.g-4.mt-4.text-center > .col-md-4:nth-child(3) {
        grid-column: 1 / -1;
        width: min(100%, 520px);
        justify-self: center;
    }
}

@media (max-width: 699.98px) and (orientation: portrait) {
    #statisticheDiv > .row.g-4.mt-4.text-center > .col-md-4 {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 991.98px) and (orientation: portrait) {
    #statisticheDiv .card-body canvas {
        max-width: 100%;
    }

    #exportPdfBtn,
    #exportExcelBtn {
        min-height: var(--bf5-touch-min);
    }
}

/* ---------- Product comparison: desktop untouched, portrait adaptive ---------- */
@media (max-width: 991.98px) and (orientation: portrait) {
    #productComparisonPanel .compare-panel-card {
        padding: 12px;
        border-radius: var(--bf5-radius);
    }

    #productComparisonPanel .compare-panel-header {
        display: block;
    }

    #productComparisonPanel .compare-report-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
        width: 100%;
        margin-top: 12px;
    }

    #productComparisonPanel .compare-report-actions .btn {
        width: 100%;
        min-height: var(--bf5-touch-min);
        white-space: normal;
    }

    #productComparisonPanel .compare-product-headings {
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    #productComparisonPanel .compare-product-heading {
        min-width: 0;
        padding: 9px 10px;
    }

    #productComparisonPanel .compare-product-heading strong {
        overflow-wrap: anywhere;
    }

    #productComparisonPanel .compare-chart-matrix {
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        padding: 10px !important;
        overflow: visible !important;
    }

    #productComparisonPanel .compare-chart-column-heading {
        display: none !important;
    }

    #productComparisonPanel .bf5-compare-metric-separator {
        display: block;
        grid-column: 1 / -1;
        margin-top: 4px;
        padding: 7px 9px;
        border-bottom: 1px solid var(--bf5-border);
        color: var(--bf5-text);
        font-size: .9rem;
        font-weight: 800;
    }

    #productComparisonPanel .compare-chart-cell {
        min-height: 225px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 6px;
        padding: 9px;
        scroll-margin-top: 12px;
    }

    #productComparisonPanel .compare-chart-cell canvas {
        width: 100% !important;
        max-width: 260px;
        margin: auto;
    }

    #productComparisonPanel .bf5-chart-caption {
        display: block;
        width: 100%;
        min-width: 0;
        padding-bottom: 6px;
        border-bottom: 1px solid #efedf3;
        text-align: center;
    }

    #productComparisonPanel .bf5-chart-caption span,
    #productComparisonPanel .bf5-chart-caption strong {
        display: block;
        overflow-wrap: anywhere;
    }

    #productComparisonPanel .bf5-chart-caption span {
        color: var(--bf5-muted);
        font-size: .7rem;
        font-weight: 750;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    #productComparisonPanel .bf5-chart-caption strong {
        margin-top: 2px;
        color: var(--bf5-text);
        font-size: .8rem;
    }

    #productComparisonPanel .bf5-compare-difference-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    #productComparisonPanel .compare-common-table {
        min-width: 650px;
    }

    #productComparisonPanel .table-responsive {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    #productComparisonPanel .compare-common-table th:first-child,
    #productComparisonPanel .compare-common-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background: #fff;
        box-shadow: 6px 0 10px rgba(45,42,61,.04);
    }
}

@media (max-width: 699.98px) and (orientation: portrait) {
    #productComparisonPanel .compare-report-actions,
    #productComparisonPanel .compare-product-headings,
    #productComparisonPanel .compare-chart-matrix,
    #productComparisonPanel .bf5-compare-difference-grid {
        grid-template-columns: 1fr !important;
    }

    #productComparisonPanel .compare-chart-cell {
        min-height: 215px;
    }

    #productComparisonPanel .compare-common-table {
        min-width: 0;
        display: block;
    }

    #productComparisonPanel .compare-common-table thead {
        display: none;
    }

    #productComparisonPanel .compare-common-table tbody,
    #productComparisonPanel .compare-common-table tr,
    #productComparisonPanel .compare-common-table td {
        display: block;
        width: 100%;
    }

    #productComparisonPanel .compare-common-table tr {
        margin: 0 0 10px;
        padding: 10px;
        border: 1px solid var(--bf5-border);
        border-radius: 14px;
        background: #fff;
    }

    #productComparisonPanel .compare-common-table td {
        position: static !important;
        padding: 6px 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        text-align: left !important;
    }

    #productComparisonPanel .compare-common-table td:not(:first-child)::before {
        content: attr(data-bf5-label);
        display: inline-block;
        min-width: 108px;
        margin-right: 8px;
        color: var(--bf5-muted);
        font-size: .74rem;
        font-weight: 750;
    }
}

/* Landscape deliberately inherits the current desktop composition. */

/* ============================================================
   R5.18 RC1 BF2 - portrait camera compact layout
   CSS-only: camera engine / capture / OCR logic remain untouched.
   ============================================================ */
@media (max-width: 991.98px) and (orientation: portrait) {
    body.active-index #cameraOverlay {
        display: flex !important;
        flex-direction: column !important;
        width: min(96vw, 720px) !important;
        max-height: calc(100dvh - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom))) !important;
        padding: 14px !important;
        border-radius: 22px !important;
    }

    body.active-index #cameraOverlay > #cameraModernHeader { order: 0; }
    body.active-index #cameraOverlay > label[for="cameraSelect"] { order: 1; }
    body.active-index #cameraOverlay > #cameraSelect { order: 2; }
    body.active-index #cameraOverlay > .camera-guidance { order: 3; }
    body.active-index #cameraOverlay > #videoContainer { order: 4; }
    body.active-index #cameraOverlay > #bf25CameraBackgroundNotice { order: 5; }
    body.active-index #cameraOverlay > .camera-fullframe-guidance { order: 6; }
    body.active-index #cameraOverlay > #cameraControls { order: 7; }

    body.active-index #cameraModernHeader.camera-modern-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 10px !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
    }

    body.active-index #cameraModernHeader .camera-modern-kicker {
        font-size: .68rem !important;
        letter-spacing: .14em !important;
        margin-bottom: 2px !important;
    }

    body.active-index #cameraModernHeader .camera-modern-title {
        font-size: clamp(1.35rem, 5.3vw, 1.8rem) !important;
        line-height: 1.02 !important;
        margin: 0 !important;
    }

    body.active-index #cameraModernHeader .camera-modern-subtitle {
        margin-top: 5px !important;
        font-size: .82rem !important;
        line-height: 1.28 !important;
    }

    body.active-index #cameraLiveStatusPill.camera-live-pill {
        min-height: 38px !important;
        padding: 7px 10px !important;
        font-size: .72rem !important;
        white-space: nowrap !important;
    }

    body.active-index #cameraOverlay > label[for="cameraSelect"] {
        margin: 2px 0 4px !important;
        font-size: .78rem !important;
        font-weight: 700 !important;
    }

    body.active-index #cameraOverlay #cameraSelect {
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 0 8px !important;
        font-size: .9rem !important;
    }

    body.active-index #cameraOverlay .camera-guidance,
    body.active-index #cameraOverlay .camera-fullframe-guidance {
        margin: 0 0 8px !important;
        padding: 7px 9px !important;
        font-size: .76rem !important;
        line-height: 1.25 !important;
    }

    body.active-index #cameraOverlay #videoContainer.video-container {
        flex: 0 0 auto !important;
        min-height: clamp(190px, 34dvh, 360px) !important;
        max-height: min(42dvh, 420px) !important;
        margin: 0 0 8px !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    body.active-index #cameraOverlay #bf25CameraBackgroundNotice {
        margin: 0 0 8px !important;
        padding: 8px 10px !important;
        font-size: .76rem !important;
        line-height: 1.28 !important;
        border-radius: 12px !important;
    }

    body.active-index #cameraOverlay #bf25CameraBackgroundNotice .d-block {
        margin-top: 3px !important;
    }

    body.active-index #cameraControls.three-column-controls {
        margin-top: 0 !important;
        padding-bottom: max(2px, env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 575.98px) and (orientation: portrait) {
    body.active-index #cameraOverlay {
        top: max(4px, env(safe-area-inset-top)) !important;
        width: calc(100vw - 8px) !important;
        max-height: calc(100dvh - 8px) !important;
        padding: 11px !important;
        border-radius: 18px !important;
    }

    /* On a real phone the PC/webcam hint consumes valuable first-screen space. */
    body.active-index #cameraOverlay > .camera-guidance {
        display: none !important;
    }

    body.active-index #cameraModernHeader .camera-modern-subtitle {
        font-size: .76rem !important;
    }

    body.active-index #cameraOverlay #videoContainer.video-container {
        min-height: clamp(180px, 36dvh, 320px) !important;
        max-height: 43dvh !important;
    }
}


/* ============================================================
   R5.18 RC1 BF3 - portrait camera clarity / centering
   UI-only overrides. Capture/OCR/live detector runtime untouched.
   ============================================================ */
@media (max-width: 991.98px) and (orientation: portrait) {
    body.active-index #cameraModernHeader.camera-modern-header {
        grid-template-columns: minmax(0, 1fr) minmax(96px, max-content) !important;
    }

    body.active-index #cameraLiveStatusPill.camera-live-pill {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        justify-self: end !important;
        width: auto !important;
        min-width: 96px !important;
        max-width: none !important;
        min-height: 38px !important;
        padding: 7px 12px !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
        font-size: .72rem !important;
        line-height: 1 !important;
    }

    /* Remove the old boxed checkbox column in portrait and show concise choices. */
    body.active-index #cameraControls .checkbox-column {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 2px 0 0 !important;
        margin: 0 !important;
        display: grid !important;
        gap: 4px !important;
    }

    body.active-index #cameraControls .checkbox-column > label,
    body.active-index #cameraControls .camera-mode-choice,
    body.active-index #cameraControls .camera-smart-toggle {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 4px 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        line-height: 1.25 !important;
    }

    body.active-index #cameraControls .checkbox-column input[type="checkbox"] {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    body.active-index #assistedLiveScanLabel::after {
        content: " · FLAT LIVE";
        font-weight: 700;
    }

    body.active-index #curvedLabelModeLabel::after {
        content: " · ROUND LIVE";
        font-weight: 700;
    }

    body.active-index #cameraControls .camera-smart-hint,
    body.active-index #cameraControls .curved-scan-hint,
    body.active-index #cameraControls #curvedScanStatus {
        margin: 0 0 4px 28px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }
}

@media (max-width: 575.98px) and (orientation: portrait) {
    /* Present the live camera as a centered portrait viewport. The underlying
       stream/capture remains untouched and still uses the original full frame. */
    body.active-index #cameraOverlay #videoContainer.video-container {
        height: min(46dvh, 460px) !important;
        min-height: min(46dvh, 460px) !important;
        max-height: min(50dvh, 480px) !important;
        position: relative !important;
    }

    body.active-index #cameraOverlay #cameraStream {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: 50% 50% !important;
        margin: 0 auto !important;
    }

    body.active-index #cameraLiveStatusPill.camera-live-pill {
        min-width: 92px !important;
        padding-inline: 9px !important;
        font-size: .68rem !important;
    }
}

/* ============================================================
   R5.18 RC1 BF4 - compact portrait camera controls
   UI-only: no camera runtime, OCR, parser or scoring changes.
   ============================================================ */
@media (max-width: 991.98px) and (orientation: portrait) {
    body.active-index #cameraControls.three-column-controls {
        gap: 6px !important;
        padding-bottom: max(2px, env(safe-area-inset-bottom)) !important;
    }

    /* Portrait keeps only the two user-facing scan modes. */
    body.active-index #cameraControls .camera-legacy-option,
    body.active-index #cameraControls .presets-column {
        display: none !important;
    }

    /* Put each mode and its explanation on the same visual row. */
    body.active-index #cameraControls .checkbox-column {
        order: 1 !important;
        display: grid !important;
        grid-template-columns: minmax(136px, .88fr) minmax(0, 1.12fr) !important;
        column-gap: 10px !important;
        row-gap: 5px !important;
        align-items: start !important;
        padding: 0 !important;
    }

    body.active-index #cameraControls .camera-smart-toggle {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    body.active-index #cameraControls #assistedLiveScanHint {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    body.active-index #cameraControls .camera-mode-choice {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    body.active-index #cameraControls .curved-scan-hint {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    body.active-index #cameraControls #curvedScanStatus {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
    }

    body.active-index #cameraControls .camera-smart-toggle,
    body.active-index #cameraControls .camera-mode-choice {
        align-items: flex-start !important;
        min-width: 0 !important;
        padding: 3px 0 !important;
        color: #f4f7ff !important;
        font-size: .78rem !important;
        font-weight: 650 !important;
    }

    body.active-index #cameraControls #assistedLiveScanHint,
    body.active-index #cameraControls .curved-scan-hint {
        display: block !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 3px 0 !important;
        color: rgba(235, 240, 250, .82) !important;
        font-size: .7rem !important;
        line-height: 1.25 !important;
    }

    body.active-index #cameraControls #curvedScanStatus {
        margin: 0 !important;
        padding: 0 !important;
        font-size: .68rem !important;
        line-height: 1.2 !important;
    }

    /* Manual image tuning remains available on desktop/landscape only. */
    body.active-index #cameraControls .sliders-column {
        order: 2 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body.active-index #cameraControls .sliders-row {
        display: none !important;
    }

    body.active-index #cameraControls .main-buttons {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 2px 0 0 !important;
        padding: 0 !important;
    }

    body.active-index #cameraControls .main-buttons > button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 8px 7px !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 575.98px) and (orientation: portrait) {
    /* Shorter centered preview so Capture is visible without a long scroll. */
    body.active-index #cameraOverlay #videoContainer.video-container {
        height: clamp(150px, 26dvh, 235px) !important;
        min-height: clamp(150px, 26dvh, 235px) !important;
        max-height: 235px !important;
        margin-bottom: 6px !important;
    }

    body.active-index #cameraOverlay #bf25CameraBackgroundNotice,
    body.active-index #cameraOverlay .camera-fullframe-guidance {
        margin-bottom: 6px !important;
    }

    body.active-index #cameraControls .checkbox-column {
        grid-template-columns: minmax(126px, .86fr) minmax(0, 1.14fr) !important;
        column-gap: 8px !important;
        row-gap: 4px !important;
    }

    body.active-index #cameraControls .camera-smart-toggle,
    body.active-index #cameraControls .camera-mode-choice {
        font-size: .73rem !important;
    }

    body.active-index #cameraControls #assistedLiveScanHint,
    body.active-index #cameraControls .curved-scan-hint {
        font-size: .66rem !important;
        line-height: 1.2 !important;
    }

    body.active-index #cameraControls .main-buttons {
        gap: 7px !important;
    }

    body.active-index #cameraControls .main-buttons > button {
        min-height: 42px !important;
        padding: 7px 5px !important;
        font-size: .76rem !important;
    }
}


/* ============================================================
   R5.18 RC1 BF5 - portrait legacy camera toggles fully hidden
   UI-only: keep underlying camera controls untouched for desktop/landscape.
   ============================================================ */
@media (max-width: 991.98px) and (orientation: portrait) {
    body.active-index #cameraControls .checkbox-column > label.camera-legacy-option,
    body.active-index #cameraControls label.camera-legacy-option,
    body.active-index #cameraControls #savePresetSession,
    body.active-index #cameraControls #autoDetectBg {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }
}

/* ============================================================
   R5.18 RC1 BF7 - SAFE PORTRAIT CROP RECOVERY
   Replaces rejected BF6 crop sizing.
   IMPORTANT:
   - does NOT force #cropImage display
   - does NOT resize .cropper-container
   - does NOT touch READ/CHECK/loading/camera/result sizing
   - only keeps the crop wrapper inside the portrait viewport
     and the action buttons reachable via sticky positioning.
   ============================================================ */
@media (max-width: 991.98px) and (orientation: portrait) {
    body.active-index #cropOverlay {
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch;
        padding:
            max(8px, env(safe-area-inset-top))
            8px
            max(8px, env(safe-area-inset-bottom)) !important;
    }

    body.active-index #cropOverlay .crop-container {
        width: min(94vw, 560px) !important;
        max-width: 560px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    body.active-index #cropOverlay .crop-buttons {
        position: sticky !important;
        bottom: max(8px, env(safe-area-inset-bottom)) !important;
        z-index: 12 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 8px 0 0 !important;
        padding: 8px 0 0 !important;
        box-sizing: border-box !important;
    }

    body.active-index #cropOverlay .crop-buttons > button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 575.98px) and (orientation: portrait) {
    body.active-index #cropOverlay {
        padding:
            max(6px, env(safe-area-inset-top))
            6px
            max(6px, env(safe-area-inset-bottom)) !important;
    }

    body.active-index #cropOverlay .crop-container {
        width: calc(100vw - 12px) !important;
        max-width: 430px !important;
    }

    body.active-index #cropOverlay .crop-buttons {
        gap: 7px !important;
        margin-top: 6px !important;
        padding-top: 6px !important;
    }

    body.active-index #cropOverlay .crop-buttons > button {
        min-height: 42px !important;
        padding: 7px 8px !important;
        font-size: .82rem !important;
    }
}

/* ============================================================
   R5.18 RC1 BF8 - portrait live-message readability
   UI-only. The live guide message may wrap instead of being
   clipped with ellipsis on narrow portrait screens.
   ============================================================ */
@media (max-width: 575.98px) and (orientation: portrait) {
    body.active-index #curvedLiveGuideMessage {
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        padding: 4px 6px !important;
        font-size: .62rem !important;
        line-height: 1.15 !important;
    }
}

/* ============================================================
   R5.18 RC1 BF9 - MOBILE LANDSCAPE CAPTURE
   UI-only adaptive layer over the existing camera + Cropper.
   IMPORTANT:
   - no camera stream/capture algorithm changes
   - no OCR/parser/scoring changes
   - no #cropImage or .cropper-container sizing overrides
   ============================================================ */
body.active-index #mobileLandscapeCaptureBtn,
body.active-index #mobileLandscapeRotatePrompt {
    display: none;
}

@keyframes bf9MobileLandscapeReveal {
    from { opacity: .28; filter: blur(1.5px); }
    to { opacity: 1; filter: blur(0); }
}

@keyframes bf9MobileLandscapeSectionReveal {
    from { opacity: 0; transform: translateY(6px) scale(.992); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 991.98px) and (orientation: portrait) {
    body.active-index #mobileLandscapeCaptureBtn {
        display: inline-flex !important;
        grid-column: 1 / -1 !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        width: 100% !important;
        min-height: 42px !important;
        margin-top: 1px !important;
        white-space: normal !important;
        line-height: 1.15 !important;
    }

    body.active-index #mobileLandscapeCaptureBtn .mobile-landscape-capture-icon {
        flex: 0 0 auto !important;
        font-size: 1rem !important;
        line-height: 1 !important;
    }

    body.active-index #mobileLandscapeRotatePrompt {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        z-index: 30 !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        width: min(88%, 390px) !important;
        padding: 12px 14px !important;
        border: 1px solid rgba(255,255,255,.26) !important;
        border-radius: 14px !important;
        background: rgba(14, 24, 46, .94) !important;
        box-shadow: 0 14px 34px rgba(0,0,0,.32) !important;
        color: #fff !important;
        opacity: 0 !important;
        transform: translate(-50%, -46%) scale(.97) !important;
        transition: opacity .24s ease, transform .28s ease !important;
        pointer-events: none !important;
    }

    body.active-index #mobileLandscapeRotatePrompt.show {
        opacity: 1 !important;
        transform: translate(-50%, -50%) scale(1) !important;
    }

    body.active-index #mobileLandscapeRotatePrompt .mobile-landscape-rotate-icon {
        flex: 0 0 auto !important;
        font-size: 1.65rem !important;
        line-height: 1 !important;
    }

    body.active-index #mobileLandscapeRotatePrompt strong,
    body.active-index #mobileLandscapeRotatePrompt small {
        display: block !important;
    }

    body.active-index #mobileLandscapeRotatePrompt strong {
        margin-bottom: 3px !important;
        font-size: .88rem !important;
        line-height: 1.15 !important;
    }

    body.active-index #mobileLandscapeRotatePrompt small {
        color: rgba(255,255,255,.78) !important;
        font-size: .7rem !important;
        line-height: 1.2 !important;
    }

    html.inci-mobile-landscape-requested body.active-index #cameraOverlay.inci-mobile-landscape-awaiting #videoContainer {
        opacity: .58 !important;
        transform: scale(.988) !important;
        transition: opacity .24s ease, transform .28s ease !important;
    }
}

/* The existing desktop/landscape dialog remains the source layout.
   These rules only compact it for a short mobile landscape viewport. */
@media (max-width: 1180px) and (orientation: landscape) {
    html.inci-mobile-landscape-capture-active body.active-index #cameraOverlay.inci-mobile-landscape-active {
        position: fixed !important;
        top: max(4px, env(safe-area-inset-top)) !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translateX(-50%) !important;
        width: calc(100vw - max(10px, env(safe-area-inset-left)) - max(10px, env(safe-area-inset-right))) !important;
        max-width: 1100px !important;
        max-height: calc(100dvh - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom))) !important;
        margin: 0 !important;
        padding: 8px 10px !important;
        border-radius: 16px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        animation: bf9MobileLandscapeReveal .34s ease-out both !important;
    }

    html.inci-mobile-landscape-capture-active body.active-index #cameraOverlay.inci-mobile-landscape-active > .camera-guidance {
        display: none !important;
    }

    html.inci-mobile-landscape-capture-active body.active-index #cameraModernHeader.camera-modern-header {
        margin-bottom: 4px !important;
        gap: 8px !important;
    }

    html.inci-mobile-landscape-capture-active body.active-index #cameraModernHeader .camera-modern-kicker {
        font-size: .6rem !important;
        margin-bottom: 1px !important;
    }

    html.inci-mobile-landscape-capture-active body.active-index #cameraModernHeader .camera-modern-title {
        font-size: clamp(1rem, 3.2vw, 1.35rem) !important;
        line-height: 1 !important;
    }

    html.inci-mobile-landscape-capture-active body.active-index #cameraModernHeader .camera-modern-subtitle {
        margin-top: 2px !important;
        font-size: .66rem !important;
        line-height: 1.15 !important;
    }

    html.inci-mobile-landscape-capture-active body.active-index #cameraLiveStatusPill.camera-live-pill {
        min-height: 28px !important;
        padding: 4px 8px !important;
        font-size: .62rem !important;
    }

    html.inci-mobile-landscape-capture-active body.active-index #cameraOverlay > label[for="cameraSelect"] {
        margin: 0 0 2px !important;
        font-size: .64rem !important;
    }

    html.inci-mobile-landscape-capture-active body.active-index #cameraOverlay #cameraSelect {
        min-height: 34px !important;
        margin-bottom: 4px !important;
        padding-block: 3px !important;
        font-size: .72rem !important;
    }

    html.inci-mobile-landscape-capture-active body.active-index #cameraOverlay #videoContainer.video-container {
        width: 100% !important;
        min-height: 0 !important;
        height: min(50dvh, 390px) !important;
        max-height: min(50dvh, 390px) !important;
        margin: 0 0 4px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        animation: bf9MobileLandscapeSectionReveal .32s .06s ease-out both !important;
    }

    html.inci-mobile-landscape-capture-active body.active-index #cameraOverlay #cameraStream {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: contain !important;
        object-position: 50% 50% !important;
    }

    html.inci-mobile-landscape-capture-active body.active-index #cameraOverlay #bf25CameraBackgroundNotice,
    html.inci-mobile-landscape-capture-active body.active-index #cameraOverlay .camera-fullframe-guidance {
        margin: 0 0 4px !important;
        padding: 4px 7px !important;
        border-radius: 9px !important;
        font-size: .6rem !important;
        line-height: 1.14 !important;
    }

    html.inci-mobile-landscape-capture-active body.active-index #cameraControls.three-column-controls {
        gap: 5px !important;
        margin-top: 0 !important;
        animation: bf9MobileLandscapeSectionReveal .32s .12s ease-out both !important;
    }

    html.inci-mobile-landscape-capture-active body.active-index #cameraControls .controls-column {
        padding: 5px !important;
        gap: 4px !important;
    }

    html.inci-mobile-landscape-capture-active body.active-index #cameraControls .camera-legacy-option {
        display: none !important;
    }

    html.inci-mobile-landscape-capture-active body.active-index #cameraControls .sliders-row {
        gap: 5px !important;
        margin-bottom: 4px !important;
    }

    html.inci-mobile-landscape-capture-active body.active-index #cameraControls .camera-slider label,
    html.inci-mobile-landscape-capture-active body.active-index #cameraControls .camera-smart-hint,
    html.inci-mobile-landscape-capture-active body.active-index #cameraControls .curved-scan-hint,
    html.inci-mobile-landscape-capture-active body.active-index #cameraControls #curvedScanStatus {
        font-size: .58rem !important;
        line-height: 1.12 !important;
    }

    html.inci-mobile-landscape-capture-active body.active-index #cameraControls .main-buttons {
        gap: 6px !important;
        margin-top: 3px !important;
    }

    html.inci-mobile-landscape-capture-active body.active-index #cameraControls .main-buttons > button:not(#mobileLandscapeCaptureBtn) {
        min-height: 34px !important;
        padding: 5px 8px !important;
        font-size: .68rem !important;
        line-height: 1.05 !important;
    }

    html.inci-mobile-landscape-capture-active body.active-index #mobileLandscapeCaptureBtn,
    html.inci-mobile-landscape-capture-active body.active-index #mobileLandscapeRotatePrompt {
        display: none !important;
    }

    html.inci-mobile-landscape-capture-active body.active-index #curvedLiveGuideMessage {
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        padding: 3px 5px !important;
        font-size: .58rem !important;
        line-height: 1.1 !important;
    }

    /* Crop remains the same Cropper instance and native image geometry.
       Only its wrapper/actions are kept inside the short landscape viewport. */
    html.inci-mobile-landscape-capture-active body.active-index #cropOverlay {
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        padding:
            max(5px, env(safe-area-inset-top))
            max(8px, env(safe-area-inset-right))
            max(5px, env(safe-area-inset-bottom))
            max(8px, env(safe-area-inset-left)) !important;
        animation: bf9MobileLandscapeReveal .3s ease-out both !important;
    }

    html.inci-mobile-landscape-capture-active body.active-index #cropOverlay .crop-container {
        width: min(96vw, 1040px) !important;
        max-width: 1040px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    html.inci-mobile-landscape-capture-active body.active-index #cropOverlay .crop-guidance {
        margin-bottom: 4px !important;
        padding: 4px 7px !important;
        font-size: .64rem !important;
        line-height: 1.12 !important;
    }

    html.inci-mobile-landscape-capture-active body.active-index #cropOverlay .crop-buttons {
        position: sticky !important;
        bottom: max(5px, env(safe-area-inset-bottom)) !important;
        z-index: 12 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        width: min(420px, 100%) !important;
        margin: 5px auto 0 !important;
        padding-top: 5px !important;
    }

    html.inci-mobile-landscape-capture-active body.active-index #cropOverlay .crop-buttons > button {
        min-height: 36px !important;
        padding: 5px 9px !important;
        font-size: .72rem !important;
    }
}



/* ============================================================
   INCI4ME R5.18 RC1 BF9 BF1 - MOBILE EFFECTIVE RECORD DISPLAY
   Portrait presentation only. Desktop/landscape table remains authoritative.
   ============================================================ */
.bf9-mobile-effective-record,
.bf9-mobile-original-note {
    display: none;
}

@media (max-width: 991.98px) and (orientation: portrait) {
    /* A verified row must lead with the accepted/current Record value, not
       the stale OCR reading. Unresolved rows intentionally keep the OCR
       reading as the primary text while their correction controls are open. */
    #ocrCheckTable tbody tr[data-bf5-state="ok"] > td:nth-child(2) .ocr-text {
        display: none;
    }

    #ocrCheckTable tbody tr[data-bf5-state="ok"] > td:nth-child(2) .bf9-mobile-effective-record {
        display: inline;
        overflow-wrap: anywhere;
    }

    #ocrCheckTable tbody tr[data-bf5-state="ok"] > td:nth-child(2) .bf9-mobile-original-note:not([hidden]) {
        display: block;
        margin-top: 3px;
        color: var(--bf5-muted);
        font-size: .72rem;
        font-weight: 500;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }
}

/* ============================================================
   INCI4ME R5.18 RC1 BF10 - MOBILE PORTRAIT VIEWPORT SAFETY
   Presentation-only hardening for heterogeneous smartphone viewports.
   - anchors camera/crop to the visual viewport (not page/layout width)
   - uses nearly all portrait width for photo + ingredients
   - hides portrait scrollbars while preserving touch scrolling
   - keeps camera/crop actions inside the visible screen
   - centers the camera tutorial on the visual viewport
   - replaces the rejected interactive landscape button with advice only
   OCR / parser / scoring / camera acquisition remain untouched.
   ============================================================ */

body.active-index #mobileLandscapeAdvice {
    display: none;
}

@media (max-width: 991.98px) and (orientation: portrait) {
    /* Touch users scroll by gesture; remove only the visual scrollbar. */
    html[data-inci-orientation="portrait"],
    html[data-inci-orientation="portrait"] body.active-index,
    body.active-index #cameraOverlay,
    body.active-index #cropOverlay {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    html[data-inci-orientation="portrait"]::-webkit-scrollbar,
    html[data-inci-orientation="portrait"] body.active-index::-webkit-scrollbar,
    body.active-index #cameraOverlay::-webkit-scrollbar,
    body.active-index #cropOverlay::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    html[data-inci-orientation="portrait"],
    html[data-inci-orientation="portrait"] body.active-index {
        overflow-x: clip;
    }

    /* Use the portrait viewport efficiently: keep a small safety margin only. */
    body.active-index .site-content-shell {
        width: calc(100vw - 8px) !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.active-index .site-main,
    body.active-index .site-main > .container.mt-5,
    body.active-index #myTabContent,
    body.active-index #myTabContent > #caricamento {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    body.active-index .site-main > .container.mt-5 {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.active-index #myTabContent > #caricamento > .row.mt-4 {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 4px !important;
        gap: 8px 0 !important;
        box-sizing: border-box !important;
    }

    body.active-index #myTabContent > #caricamento > .row.mt-4 > .col-12,
    body.active-index #myTabContent > #caricamento > .row.mt-4 > [class*="col-md-6"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        box-sizing: border-box !important;
    }

    body.active-index .zoom-container,
    body.active-index #manualIngredients {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Anchor the camera to the *visual* viewport. This removes the logged-in
       overflow case where page width/zoom can differ from the visible screen. */
    body.active-index #cameraOverlay {
        position: fixed !important;
        top: calc(var(--inci-vv-top, 0px) + 4px) !important;
        left: calc(var(--inci-vv-left, 0px) + 6px) !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: calc(var(--inci-vv-width, 100vw) - 12px) !important;
        max-width: none !important;
        min-width: 0 !important;
        max-height: calc(var(--inci-vv-height, 100dvh) - 8px) !important;
        margin: 0 !important;
        padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
        overflow-x: clip !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
    }

    body.active-index #cameraOverlay #cameraSelect {
        /* Prevent mobile browser focus-zoom from changing the visual viewport. */
        font-size: 16px !important;
    }

    body.active-index #cameraOverlay #videoContainer.video-container {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 138px !important;
        height: clamp(138px, 24dvh, 220px) !important;
        max-height: 220px !important;
        flex: 0 1 auto !important;
    }

    body.active-index #cameraControls.three-column-controls,
    body.active-index #cameraControls .sliders-column,
    body.active-index #cameraControls .checkbox-column {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.active-index #cameraControls .main-buttons {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 45 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
        width: 100% !important;
        margin: 4px 0 0 !important;
        padding: 6px 0 max(4px, env(safe-area-inset-bottom)) !important;
        background: linear-gradient(180deg, rgba(20, 29, 51, .76), #141d33 28%) !important;
        box-sizing: border-box !important;
    }

    body.active-index #cameraControls .main-buttons > button {
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        padding: 6px 4px !important;
        font-size: .72rem !important;
        line-height: 1.08 !important;
        white-space: normal !important;
    }

    body.active-index #mobileLandscapeAdvice.mobile-landscape-advice {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 7px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 5px 7px !important;
        border: 1px solid rgba(255,255,255,.12) !important;
        border-radius: 10px !important;
        background: rgba(255,255,255,.055) !important;
        color: rgba(242, 246, 255, .86) !important;
        font-size: .64rem !important;
        line-height: 1.18 !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    body.active-index #mobileLandscapeAdvice .mobile-landscape-advice-icon {
        flex: 0 0 auto !important;
        font-size: .88rem !important;
        line-height: 1 !important;
    }

    /* Crop uses the same visual-viewport anchor and keeps Cropper.js geometry
       authoritative. The container is wide *before* Cropper initializes; we do
       not force #cropImage or .cropper-container dimensions. */
    body.active-index #cropOverlay {
        position: fixed !important;
        top: var(--inci-vv-top, 0px) !important;
        left: var(--inci-vv-left, 0px) !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: var(--inci-vv-width, 100vw) !important;
        height: var(--inci-vv-height, 100dvh) !important;
        max-width: none !important;
        max-height: var(--inci-vv-height, 100dvh) !important;
        margin: 0 !important;
        padding:
            max(6px, env(safe-area-inset-top))
            6px
            max(6px, env(safe-area-inset-bottom)) !important;
        overflow-x: clip !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
    }

    body.active-index #cropOverlay .crop-container {
        width: min(calc(var(--inci-vv-width, 100vw) - 12px), 720px) !important;
        max-width: calc(var(--inci-vv-width, 100vw) - 12px) !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    body.active-index #cropOverlay .crop-guidance {
        margin-bottom: 5px !important;
        padding: 5px 8px !important;
        font-size: .7rem !important;
        line-height: 1.15 !important;
    }

    body.active-index #cropOverlay .crop-buttons {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 60 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        width: 100% !important;
        margin: 6px 0 0 !important;
        padding: 7px 0 max(4px, env(safe-area-inset-bottom)) !important;
        background: linear-gradient(180deg, rgba(255,255,255,.82), #fff 28%) !important;
        box-sizing: border-box !important;
    }

    body.active-index #cropOverlay .crop-buttons > button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 6px 8px !important;
        font-size: .78rem !important;
        white-space: normal !important;
    }

    /* Camera tutorial is always centered on the visible phone viewport. */
    .driver-popover.inci-camera-tutorial-popover {
        position: fixed !important;
        left: var(--inci-vv-center-x, 50vw) !important;
        top: var(--inci-vv-center-y, 50dvh) !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        width: min(calc(var(--inci-vv-width, 100vw) - 24px), 520px) !important;
        max-width: calc(var(--inci-vv-width, 100vw) - 24px) !important;
        max-height: calc(var(--inci-vv-height, 100dvh) - 24px) !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        z-index: 2147483646 !important;
        box-sizing: border-box !important;
    }

    .driver-popover.inci-camera-tutorial-popover .driver-popover-arrow {
        display: none !important;
    }
}

@media (max-width: 575.98px) and (orientation: portrait) {
    body.active-index .site-content-shell {
        width: calc(100vw - 6px) !important;
    }

    body.active-index #myTabContent > #caricamento > .row.mt-4 {
        padding: 3px !important;
        border-radius: 14px !important;
    }

    body.active-index #myTabContent > #caricamento > .row.mt-4 > .col-12,
    body.active-index #myTabContent > #caricamento > .row.mt-4 > [class*="col-md-6"] {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    body.active-index #cameraOverlay {
        left: calc(var(--inci-vv-left, 0px) + 4px) !important;
        width: calc(var(--inci-vv-width, 100vw) - 8px) !important;
        padding: 9px !important;
        padding-bottom: max(7px, env(safe-area-inset-bottom)) !important;
        border-radius: 16px !important;
    }

    body.active-index #cameraModernHeader.camera-modern-header {
        gap: 7px !important;
        margin-bottom: 5px !important;
    }

    body.active-index #cameraModernHeader .camera-modern-title {
        font-size: clamp(1.18rem, 5vw, 1.55rem) !important;
    }

    body.active-index #cameraModernHeader .camera-modern-subtitle {
        margin-top: 3px !important;
        font-size: .7rem !important;
        line-height: 1.18 !important;
    }

    body.active-index #cameraLiveStatusPill.camera-live-pill {
        min-width: 86px !important;
        min-height: 34px !important;
        padding: 5px 8px !important;
        font-size: .64rem !important;
    }

    body.active-index #cameraOverlay > label[for="cameraSelect"] {
        margin-bottom: 3px !important;
        font-size: .72rem !important;
    }

    body.active-index #cameraOverlay #cameraSelect {
        min-height: 40px !important;
        margin-bottom: 5px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    body.active-index #cameraOverlay #videoContainer.video-container {
        height: clamp(132px, 22dvh, 190px) !important;
        min-height: 132px !important;
        max-height: 190px !important;
        margin-bottom: 5px !important;
        border-radius: 13px !important;
    }

    body.active-index #cameraOverlay #bf25CameraBackgroundNotice,
    body.active-index #cameraOverlay .camera-fullframe-guidance {
        margin-bottom: 5px !important;
        padding: 6px 8px !important;
        font-size: .68rem !important;
        line-height: 1.18 !important;
    }

    body.active-index #cameraControls .checkbox-column {
        grid-template-columns: minmax(116px, .84fr) minmax(0, 1.16fr) !important;
        column-gap: 7px !important;
        row-gap: 3px !important;
    }

    body.active-index #cameraControls .camera-smart-toggle,
    body.active-index #cameraControls .camera-mode-choice {
        font-size: .68rem !important;
        line-height: 1.15 !important;
    }

    body.active-index #cameraControls #assistedLiveScanHint,
    body.active-index #cameraControls .curved-scan-hint,
    body.active-index #cameraControls #curvedScanStatus {
        font-size: .61rem !important;
        line-height: 1.14 !important;
    }

    body.active-index #cropOverlay .crop-container {
        width: calc(var(--inci-vv-width, 100vw) - 8px) !important;
        max-width: calc(var(--inci-vv-width, 100vw) - 8px) !important;
    }

    .driver-popover.inci-camera-tutorial-popover {
        width: calc(var(--inci-vv-width, 100vw) - 16px) !important;
        max-width: calc(var(--inci-vv-width, 100vw) - 16px) !important;
        max-height: calc(var(--inci-vv-height, 100dvh) - 16px) !important;
    }
}

@media (max-width: 575.98px) and (orientation: portrait) and (max-height: 700px) {
    body.active-index #cameraModernHeader .camera-modern-kicker {
        font-size: .58rem !important;
    }

    body.active-index #cameraModernHeader .camera-modern-subtitle {
        font-size: .64rem !important;
    }

    body.active-index #cameraOverlay #videoContainer.video-container {
        height: 128px !important;
        min-height: 128px !important;
        max-height: 128px !important;
    }

    body.active-index #cameraOverlay #bf25CameraBackgroundNotice,
    body.active-index #cameraOverlay .camera-fullframe-guidance {
        padding: 5px 7px !important;
        font-size: .63rem !important;
        line-height: 1.12 !important;
    }

    body.active-index #cameraControls .main-buttons > button {
        min-height: 38px !important;
        font-size: .68rem !important;
    }

    body.active-index #mobileLandscapeAdvice.mobile-landscape-advice {
        font-size: .59rem !important;
        padding: 4px 6px !important;
    }
}

/* ============================================================
   INCI4ME R5.18 RC1 BF10 BF1 - PORTRAIT CONTENT WIDTH ALIGNMENT
   Presentation-only refinement after real OPPO A16 DEV UAT.
   Goals:
   - align Analizza portrait content to the same 10px viewport gutter used by footer
   - widen photo/ingredients, rendered ingredient list, compare and progress panels
   - keep all three result filters discoverable on narrow portrait screens
   No OCR / parser / scoring / camera acquisition / Cropper geometry changes.
   ============================================================ */
@media (max-width: 767.98px) and (orientation: portrait) {
    /* Break the principal Analizza blocks out of nested Bootstrap/container gutters
       and align them to the mobile footer shell: 10px per side. */
    body.active-index #myTabContent > #caricamento > .row.mt-4,
    body.active-index #ocrResult,
    body.active-index #compareProductsEntry,
    body.active-index #productComparisonPanel,
    body.active-index #inciProgress {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        min-width: 0 !important;
        margin-left: calc(50% - 50vw + 10px) !important;
        margin-right: calc(50% - 50vw + 10px) !important;
        box-sizing: border-box !important;
    }

    body.active-index #ocrResult {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.active-index #ocrResult > *,
    body.active-index #compareProductsEntry > *,
    body.active-index #productComparisonPanel > * {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* The result/check toolbars must follow the widened result shell. */
    body.active-index .bf5-check-toolbar,
    body.active-index .bf5-result-toolbar {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Always expose all three filters. Long localized labels may ellipsize,
       but the third option can no longer disappear beyond the portrait edge. */
    body.active-index .bf5-filter-group {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    body.active-index .bf5-filter-button {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 6px 6px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: clamp(.68rem, 2.9vw, .76rem) !important;
    }

    /* Keep individual ingredient/result cards flush with their widened host. */
    body.active-index #ocrCheckTable,
    body.active-index #ocrCheckTable tbody,
    body.active-index #checktableinci,
    body.active-index #checktableinci tbody,
    body.active-index #restrizioni .table-responsive,
    body.active-index #restrizioni .table-annex,
    body.active-index #restrizioni .table-annex tbody {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================
   INCI4ME R5.18 RC1 BF10 BF2 - MOBILE CONTINUITY
   Real smartphone landscape uses the same compact camera controls as portrait.
   Presentation only: stream/capture/OCR/Cropper geometry remain authoritative.
   ============================================================ */
@media (max-width: 1180px) and (orientation: landscape) and (pointer: coarse) {
    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraOverlay.show {
        position: fixed !important;
        top: calc(var(--inci-vv-top, 0px) + 4px) !important;
        left: calc(var(--inci-vv-left, 0px) + 4px) !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr) !important;
        grid-template-rows: auto auto auto minmax(0, 1fr) !important;
        column-gap: 9px !important;
        row-gap: 4px !important;
        width: calc(var(--inci-vv-width, 100vw) - 8px) !important;
        max-width: none !important;
        min-width: 0 !important;
        max-height: calc(var(--inci-vv-height, 100dvh) - 8px) !important;
        margin: 0 !important;
        padding: 7px 9px max(6px, env(safe-area-inset-bottom)) !important;
        border-radius: 15px !important;
        overflow-x: clip !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
        scrollbar-width: none !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraOverlay.show::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraModernHeader.camera-modern-header {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        margin: 0 0 2px !important;
        gap: 8px !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraModernHeader .camera-modern-kicker {
        font-size: .56rem !important;
        margin-bottom: 1px !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraModernHeader .camera-modern-title {
        font-size: clamp(1rem, 3.1vw, 1.38rem) !important;
        line-height: 1.02 !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraModernHeader .camera-modern-subtitle {
        margin-top: 2px !important;
        font-size: .62rem !important;
        line-height: 1.12 !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraLiveStatusPill.camera-live-pill {
        min-width: 82px !important;
        min-height: 28px !important;
        padding: 4px 7px !important;
        font-size: .6rem !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraOverlay > label[for="cameraSelect"] {
        grid-column: 1 !important;
        grid-row: 2 !important;
        margin: 0 !important;
        font-size: .62rem !important;
        line-height: 1 !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraOverlay #cameraSelect {
        grid-column: 1 !important;
        grid-row: 3 !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 3px 8px !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraOverlay > .camera-guidance,
    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraOverlay #bf25CameraBackgroundNotice,
    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraOverlay > .camera-fullframe-guidance {
        display: none !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraOverlay #videoContainer.video-container {
        grid-column: 1 !important;
        grid-row: 4 !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 145px !important;
        height: clamp(145px, calc(var(--inci-vv-height, 100dvh) - 108px), 340px) !important;
        max-height: 340px !important;
        margin: 0 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraOverlay #cameraStream {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: 50% 50% !important;
        margin: 0 !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraControls.three-column-controls {
        grid-column: 2 !important;
        grid-row: 2 / 5 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) auto !important;
        gap: 5px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraControls .presets-column,
    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraControls .camera-legacy-option,
    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraControls #savePresetSession,
    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraControls #autoDetectBg,
    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraControls .sliders-row {
        display: none !important;
        visibility: hidden !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraControls .checkbox-column {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: grid !important;
        grid-template-columns: minmax(112px, .9fr) minmax(0, 1.1fr) !important;
        column-gap: 7px !important;
        row-gap: 3px !important;
        align-content: start !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 5px 6px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraControls .camera-smart-toggle {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraControls #assistedLiveScanHint {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraControls .camera-mode-choice {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraControls .curved-scan-hint {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraControls #curvedScanStatus {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraControls .camera-smart-toggle,
    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraControls .camera-mode-choice {
        display: flex !important;
        align-items: flex-start !important;
        gap: 6px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 2px 0 !important;
        color: #f4f7ff !important;
        font-size: .65rem !important;
        font-weight: 650 !important;
        line-height: 1.12 !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #assistedLiveScanLabel::after {
        content: " · FLAT LIVE" !important;
        font-weight: 700 !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #curvedLabelModeLabel::after {
        content: " · ROUND LIVE" !important;
        font-weight: 700 !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraControls #assistedLiveScanHint,
    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraControls .curved-scan-hint,
    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraControls #curvedScanStatus {
        display: block !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 2px 0 !important;
        color: rgba(235, 240, 250, .82) !important;
        font-size: .56rem !important;
        line-height: 1.1 !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraControls .sliders-column {
        grid-column: 1 !important;
        grid-row: 2 !important;
        display: block !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraControls .main-buttons {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 46 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 5px 0 max(3px, env(safe-area-inset-bottom)) !important;
        background: linear-gradient(180deg, rgba(20, 29, 51, .76), #141d33 28%) !important;
        box-sizing: border-box !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cameraControls .main-buttons > button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 5px 4px !important;
        font-size: .62rem !important;
        line-height: 1.04 !important;
        white-space: normal !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #mobileLandscapeAdvice.mobile-landscape-advice {
        display: none !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cropOverlay {
        position: fixed !important;
        top: calc(var(--inci-vv-top, 0px) + 3px) !important;
        left: calc(var(--inci-vv-left, 0px) + 3px) !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: calc(var(--inci-vv-width, 100vw) - 6px) !important;
        height: calc(var(--inci-vv-height, 100dvh) - 6px) !important;
        max-width: none !important;
        max-height: calc(var(--inci-vv-height, 100dvh) - 6px) !important;
        margin: 0 !important;
        padding: 5px !important;
        overflow-x: clip !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
        scrollbar-width: none !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cropOverlay::-webkit-scrollbar {
        display: none !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cropOverlay .crop-container {
        width: min(calc(var(--inci-vv-width, 100vw) - 10px), 920px) !important;
        max-width: calc(var(--inci-vv-width, 100vw) - 10px) !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cropOverlay .crop-buttons {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 60 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        margin: 4px 0 0 !important;
        padding: 5px 0 max(3px, env(safe-area-inset-bottom)) !important;
        background: linear-gradient(180deg, rgba(255,255,255,.82), #fff 28%) !important;
        box-sizing: border-box !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] .driver-popover.inci-camera-tutorial-popover {
        position: fixed !important;
        left: var(--inci-vv-center-x, 50vw) !important;
        top: var(--inci-vv-center-y, 50dvh) !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        width: min(calc(var(--inci-vv-width, 100vw) - 18px), 620px) !important;
        max-width: calc(var(--inci-vv-width, 100vw) - 18px) !important;
        max-height: calc(var(--inci-vv-height, 100dvh) - 14px) !important;
        margin: 0 !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================
   INCI4ME R5.18 RC1 BF10 BF3 - MOBILE PORTRAIT POLISH
   Real-device OPPO UAT refinements. Presentation only.
   - export actions centered, PDF counter below the buttons
   - active result tab kept fully visible by responsive JS
   - statistics/restrictions/cards use the full portrait shell
   - long INCI/text values wrap instead of overlapping
   - chart canvases get the full card width; JS asks Chart.js to resize
   Desktop presentation remains unchanged.
   ============================================================ */
@media (max-width: 991.98px) and (orientation: portrait) {
    body.active-index #ocrResult #myTab,
    body.active-index #ocrResult #myTabContent,
    body.active-index #ocrResult #myTabContent > .tab-pane,
    body.active-index #ocrResult #tabella,
    body.active-index #ocrResult #statistiche,
    body.active-index #ocrResult #restrizioni,
    body.active-index #statisticheDiv {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.active-index #myTab.nav-tabs {
        scroll-padding-inline: 10px !important;
        scroll-behavior: smooth;
    }

    body.active-index #myTabContent,
    body.active-index #myTabContent > .tab-pane,
    body.active-index #tabella,
    body.active-index #statistiche,
    body.active-index #restrizioni {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.active-index #statisticheDiv {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.active-index #statisticheDiv > .row {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        --bs-gutter-x: 0 !important;
        box-sizing: border-box !important;
    }

    body.active-index #statisticheDiv > .row > [class*="col-"] {
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    body.active-index #statisticheDiv .card,
    body.active-index #statisticheDiv .card-body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.active-index #statisticheDiv .card-body {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body.active-index #statisticheDiv canvas,
    body.active-index #statisticheDiv #myChart {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.active-index #statisticheDiv .ingredient-list-small,
    body.active-index #statisticheDiv .ingredient-list-small .d-flex,
    body.active-index #statisticheDiv .ingredient-list-small span {
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        box-sizing: border-box !important;
    }

    body.active-index #compareProductsEntry,
    body.active-index #compareProductsEntry > *,
    body.active-index #productComparisonPanel,
    body.active-index #productComparisonPanel > * {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.active-index #compareProductsEntry .btn,
    body.active-index #compareProductsEntry button {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: var(--bf5-touch-min) !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        line-height: 1.25 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    body.active-index #restrizioni .table-annex tbody tr {
        grid-template-columns: minmax(0, 1fr) minmax(100px, auto) !important;
        gap: 8px 10px !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.active-index #restrizioni .table-annex tbody td:nth-child(2),
    body.active-index #restrizioni .table-annex tbody td:nth-child(2) strong {
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        box-sizing: border-box !important;
    }

    body.active-index #restrizioni .table-annex tbody td:nth-child(n+3) {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 767.98px) and (orientation: portrait) {
    /* Report ingredienti: the two actions own the first row; PDF status sits
       centered underneath so it no longer pushes both actions to the right. */
    body.active-index #tabella > .mt-3.d-flex.gap-3.align-items-center {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: auto auto !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    body.active-index #tabella #exportPdfBtn,
    body.active-index #tabella #exportExcelBtn {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: var(--bf5-touch-min) !important;
        margin: 0 !important;
        padding: 9px 8px !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        line-height: 1.18 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    body.active-index #tabella #exportPdfBtn {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    body.active-index #tabella #exportExcelBtn {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    body.active-index #tabella #exportPdfTableWrapper {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        justify-self: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        min-width: 0 !important;
        margin: 2px auto 0 !important;
        box-sizing: border-box !important;
    }

    body.active-index #statisticheDiv > .row.g-4.align-items-stretch {
        row-gap: 12px !important;
    }

    body.active-index #statisticheDiv > .row.g-4.align-items-stretch > .col-lg-8,
    body.active-index #statisticheDiv > .row.g-4.align-items-stretch > .col-lg-4,
    body.active-index #statisticheDiv > .row.g-4.mt-4.text-center > .col-md-4 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
    }

    body.active-index #statisticheDiv > .row.g-4.mt-4.text-center {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.active-index #statisticheDiv > .row.g-4.mt-4.text-center > .col-md-4:nth-child(3) {
        grid-column: 1 !important;
        width: 100% !important;
        justify-self: stretch !important;
    }

    body.active-index #statisticheDiv .card-body {
        padding: 12px 10px !important;
    }
}


/* ============================================================
   INCI4ME R5.18 RC1 BF10 BF4 - MOBILE RUNTIME POLISH
   UI/presentation only:
   - smartphone landscape crop keeps crop workspace left/center
   - crop actions stay vertically visible on the right
   - no OCR/parser/scoring/camera-acquisition changes
   ============================================================ */
@media (max-width: 1180px) and (orientation: landscape) and (pointer: coarse) {
    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cropOverlay {
        overflow: hidden !important;
        padding: 4px !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cropOverlay .crop-container {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) clamp(96px, 14vw, 126px) !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        gap: 6px 8px !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 4px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cropOverlay .crop-guidance {
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 4px 7px !important;
        font-size: .72rem !important;
        line-height: 1.15 !important;
        box-sizing: border-box !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cropOverlay #cropImage,
    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cropOverlay .crop-container > .cropper-container {
        grid-column: 1 !important;
        grid-row: 2 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 100% !important;
        max-height: 100% !important;
        align-self: stretch !important;
        justify-self: stretch !important;
        box-sizing: border-box !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cropOverlay .crop-container > .cropper-container {
        overflow: hidden !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cropOverlay .crop-buttons {
        grid-column: 2 !important;
        grid-row: 1 / span 2 !important;
        position: static !important;
        inset: auto !important;
        transform: none !important;
        z-index: 70 !important;
        align-self: center !important;
        justify-self: stretch !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 126px !important;
        margin: 0 !important;
        padding: 8px 5px !important;
        border-radius: 14px !important;
        background: rgba(255,255,255,.96) !important;
        box-shadow: 0 10px 26px rgba(20,18,28,.16) !important;
        box-sizing: border-box !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cropOverlay .crop-buttons > button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 8px 6px !important;
        white-space: normal !important;
        line-height: 1.12 !important;
        box-sizing: border-box !important;
    }
}


/* ============================================================
   INCI4ME R5.18 RC1 BF10 BF5 - RESTRICTION DIALOG + INCI WRAP POLICY
   Presentation only:
   - restriction detail modal stays entirely inside the real visual viewport
     on touch devices in landscape
   - INCI names never split inside a word on any viewport/device
   - line breaks remain available at normal whitespace boundaries
   ============================================================ */

/* Global INCI display policy. The rules are intentionally viewport-agnostic:
   desktop, tablet, smartphone, portrait and landscape all follow the same
   no-mid-word split rule. */
body.inci-site #checktableinci tbody tr:not(.expand-row) > td:nth-child(3),
body.inci-site #checktableinci tbody tr:not(.expand-row) > td:nth-child(3) *,
body.inci-site #restrizioni .table-annex .col-inci,
body.inci-site #restrizioni .table-annex .col-inci *,
body.inci-site #statisticheDiv .ingredient-list-small span,
body.inci-site #productComparisonPanel .compare-ingredient-name,
body.inci-site #bf9Bf3IngredientsPane tbody td:nth-child(2),
body.inci-site #bf9Bf3IngredientsPane tbody td:nth-child(2) *,
body.inci-site #bf9Bf3RestrictionsPane tbody td:nth-child(2),
body.inci-site #bf9Bf3RestrictionsPane tbody td:nth-child(2) *,
body.inci-site #restrictionDetailsTable th,
body.inci-site #restrictionDetailsTable td,
body.inci-site #restrictionDetailsTable th *,
body.inci-site #restrictionDetailsTable td * {
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

/* The restriction-detail body can contain source line breaks. Preserve those
   explicit newlines without allowing arbitrary mid-word cuts. */
body.inci-site #restrictionDetailsTable td {
    white-space: pre-wrap !important;
}

@media (max-width: 1180px) and (orientation: landscape) and (pointer: coarse) {
    body.inci-site.active-index #restrictionModal.restriction-detail-modal {
        position: fixed !important;
        top: var(--inci-vv-top, 0px) !important;
        left: var(--inci-vv-left, 0px) !important;
        right: auto !important;
        bottom: auto !important;
        width: var(--inci-vv-width, 100vw) !important;
        height: var(--inci-vv-height, 100dvh) !important;
        margin: 0 !important;
        padding: 10px 8px max(12px, env(safe-area-inset-bottom)) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    body.inci-site.active-index #restrictionModal.restriction-detail-modal .modal-dialog,
    body.inci-site.active-index #restrictionModal.restriction-detail-modal .modal-dialog.modal-dialog-centered,
    body.inci-site.active-index #restrictionModal.restriction-detail-modal .modal-dialog.modal-dialog-scrollable {
        display: block !important;
        width: min(900px, 100%) !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        margin: 0 auto !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    body.inci-site.active-index #restrictionModal.restriction-detail-modal .modal-content {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
    }

    body.inci-site.active-index #restrictionModal.restriction-detail-modal .modal-header {
        position: relative !important;
        top: auto !important;
        flex: 0 0 auto !important;
        min-height: 50px !important;
        padding: 9px 12px !important;
        box-sizing: border-box !important;
    }

    body.inci-site.active-index #restrictionModal.restriction-detail-modal .modal-title {
        min-width: 0 !important;
        margin: 0 !important;
        padding-right: 10px !important;
        font-size: clamp(.86rem, 2.6vw, 1rem) !important;
        line-height: 1.22 !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }

    body.inci-site.active-index #restrictionModal.restriction-detail-modal .btn-close {
        flex: 0 0 38px !important;
        width: 38px !important;
        height: 38px !important;
        margin: 0 !important;
    }

    body.inci-site.active-index #restrictionModal.restriction-detail-modal .modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 10px 12px 24px !important;
        box-sizing: border-box !important;
    }

    body.inci-site.active-index #restrictionModal.restriction-detail-modal #restrictionDetailsTable {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 10px !important;
        table-layout: fixed !important;
        box-sizing: border-box !important;
    }

    body.inci-site.active-index #restrictionModal.restriction-detail-modal #restrictionDetailsTable th {
        width: 36% !important;
        min-width: 0 !important;
        padding: 9px 10px !important;
        vertical-align: top !important;
    }

    body.inci-site.active-index #restrictionModal.restriction-detail-modal #restrictionDetailsTable td {
        width: 64% !important;
        min-width: 0 !important;
        padding: 9px 10px !important;
        vertical-align: top !important;
    }
}

/* ============================================================
   INCI4ME R5.18 RC1 BF10 BF6 - LANDSCAPE CROP + RESTRICTION STACK
   Presentation only:
   - smartphone landscape crop owns the left/center workspace
   - guidance + actions form a transparent right rail
   - mobile restriction cards give the INCI name the full row
   - INCI tokens never split inside a word on any viewport
   ============================================================ */

/* Strong final INCI wrapping policy. This intentionally overrides older
   portrait helpers that used overflow-wrap:anywhere / break-word. */
body.inci-site #ocrCheckTable tbody tr > td:nth-child(2),
body.inci-site #ocrCheckTable tbody tr > td:nth-child(2) .ocr-text,
body.inci-site #ocrCheckTable tbody tr > td:nth-child(2) .bf9-mobile-effective-record,
body.inci-site #ocrCheckTable tbody tr > td:nth-child(2) .bf9-mobile-original-note,
body.inci-site #checktableinci tbody tr:not(.expand-row) > td:nth-child(3),
body.inci-site #checktableinci tbody tr:not(.expand-row) > td:nth-child(3) *,
body.inci-site #restrizioni .table-annex .col-inci,
body.inci-site #restrizioni .table-annex .col-inci *,
body.inci-site #restrizioni .table-annex tbody td:nth-child(2),
body.inci-site #restrizioni .table-annex tbody td:nth-child(2) *,
body.inci-site #statisticheDiv .ingredient-list-small span,
body.inci-site #productComparisonPanel .compare-ingredient-name,
body.inci-site #bf9Bf3IngredientsPane tbody td:nth-child(2),
body.inci-site #bf9Bf3IngredientsPane tbody td:nth-child(2) *,
body.inci-site #bf9Bf3RestrictionsPane tbody td:nth-child(2),
body.inci-site #bf9Bf3RestrictionsPane tbody td:nth-child(2) *,
body.inci-site #restrictionDetailsTable td,
body.inci-site #restrictionDetailsTable td * {
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

/* Mobile portrait/tablet restriction cards: the INCI owns the complete first
   row. Annex/restriction badges then stack underneath, so a multi-word INCI
   wraps only at spaces and never needs to be cut to make room for badges. */
@media (max-width: 991.98px) and (orientation: portrait) {
    body.inci-site.active-index #restrizioni .table-annex tbody tr {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.inci-site.active-index #restrizioni .table-annex tbody td:nth-child(2),
    body.inci-site.active-index #restrizioni .table-annex tbody td:nth-child(2) strong {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 0 5px !important;
        text-align: left !important;
        line-height: 1.24 !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }

    body.inci-site.active-index #restrizioni .table-annex tbody td:nth-child(n+3) {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 7px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 1px 0 !important;
        text-align: right !important;
        box-sizing: border-box !important;
    }

    body.inci-site.active-index #restrizioni .table-annex tbody td:nth-child(n+3)::before {
        margin-right: auto !important;
    }
}

/* Smartphone/tablet landscape crop: reserve the whole left/center side for
   Cropper. The instruction and actions share a slim transparent rail on the
   right. Cropper.js still owns crop coordinates and image geometry. */
@media (max-width: 1180px) and (orientation: landscape) and (pointer: coarse) {
    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cropOverlay {
        overflow: hidden !important;
        padding:
            max(4px, env(safe-area-inset-top))
            max(6px, env(safe-area-inset-right))
            max(4px, env(safe-area-inset-bottom))
            max(4px, env(safe-area-inset-left)) !important;
        box-sizing: border-box !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cropOverlay .crop-container {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) clamp(132px, 22vw, 190px) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        column-gap: 8px !important;
        row-gap: 0 !important;
        align-items: stretch !important;
        justify-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cropOverlay #cropImage,
    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cropOverlay .crop-container > .cropper-container {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: stretch !important;
        justify-self: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cropOverlay .crop-container > .cropper-container {
        overflow: hidden !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cropOverlay .crop-guidance {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: start !important;
        justify-self: stretch !important;
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 7px 8px !important;
        border: 0 !important;
        border-radius: 10px !important;
        background: rgba(19, 28, 48, .92) !important;
        color: #fff !important;
        box-shadow: none !important;
        font-size: clamp(.62rem, 1.55vw, .76rem) !important;
        line-height: 1.18 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
        box-sizing: border-box !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cropOverlay .crop-buttons {
        grid-column: 2 !important;
        grid-row: 1 !important;
        position: static !important;
        inset: auto !important;
        transform: none !important;
        z-index: 70 !important;
        align-self: end !important;
        justify-self: stretch !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        box-sizing: border-box !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cropOverlay .crop-buttons > button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 8px 6px !important;
        white-space: normal !important;
        line-height: 1.12 !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================
   INCI4ME R5.18 RC1 BF10 BF7 - LANDSCAPE CROP LEFT ALIGNMENT
   Mobile landscape presentation only:
   - crop workspace starts flush at the left visual-viewport edge
   - no extra left padding/margin is reserved before Cropper.js
   - guidance/actions remain on the right rail introduced by BF6
   ============================================================ */
@media (max-width: 1180px) and (orientation: landscape) and (pointer: coarse) {
    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cropOverlay {
        padding-left: 0 !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cropOverlay .crop-container {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cropOverlay #cropImage,
    html.inci-mobile-smartphone[data-inci-orientation="landscape"] body.active-index #cropOverlay .crop-container > .cropper-container {
        justify-self: start !important;
        margin-left: 0 !important;
    }
}



/* ============================================================
   INCI4ME R5.18 RC1 BF10 BF9 - PORTRAIT RESTRICTION MODAL SAFETY
   + ARCHIVE SEARCH RESULT FILTER POLICY
   ============================================================ */

/* Analysis only: on portrait/touch keep the restriction-detail modal fully
   inside the real mobile visual viewport. Header and lower border stay visible;
   only the body scrolls. Archive INCI keeps its own already-good modal layout. */
@media (max-width: 991.98px) and (orientation: portrait) and (pointer: coarse) {
    body.inci-site.active-index #restrictionModal.restriction-detail-modal {
        position: fixed !important;
        top: calc(var(--inci-vv-top, 0px) + 8px) !important;
        left: calc(var(--inci-vv-left, 0px) + 8px) !important;
        right: auto !important;
        bottom: auto !important;
        width: calc(var(--inci-vv-width, 100vw) - 16px) !important;
        height: calc(var(--inci-vv-height, 100dvh) - 16px) !important;
        max-width: calc(var(--inci-vv-width, 100vw) - 16px) !important;
        max-height: calc(var(--inci-vv-height, 100dvh) - 16px) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    body.inci-site.active-index #restrictionModal.restriction-detail-modal .modal-dialog,
    body.inci-site.active-index #restrictionModal.restriction-detail-modal .modal-dialog.modal-dialog-centered,
    body.inci-site.active-index #restrictionModal.restriction-detail-modal .modal-dialog.modal-dialog-scrollable {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    body.inci-site.active-index #restrictionModal.restriction-detail-modal .modal-content {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
    }

    body.inci-site.active-index #restrictionModal.restriction-detail-modal .modal-header {
        flex: 0 0 auto !important;
        position: relative !important;
        min-height: 52px !important;
        padding: 10px 12px !important;
        box-sizing: border-box !important;
    }

    body.inci-site.active-index #restrictionModal.restriction-detail-modal .modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        padding: 10px 12px max(28px, env(safe-area-inset-bottom)) !important;
        box-sizing: border-box !important;
    }

    body.inci-site.active-index #restrictionModal.restriction-detail-modal #restrictionDetailsTable {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 12px !important;
    }

    /* Archive INCI searches one ingredient at a time: the three result-filter
       buttons add no value there. Keep the summary, hide only the filters.
       Analysis portrait intentionally keeps all three buttons. */
    body.active-archivioinci .bf5-result-toolbar .bf5-filter-group {
        display: none !important;
    }
}

/* INCI4ME R5.18 RC1 BF10 BF9 BF2 - Archivio INCI portrait single-result filters
   Archivio INCI searches one ingredient at a time. Hide only the result filter
   buttons in portrait. Analizza INCI keeps Tutti / Allergeni / Restrizioni. */
@media (max-width: 991.98px) and (orientation: portrait) {
    body.inci-archive-page .bf5-result-toolbar .bf5-filter-group,
    body.inci-archive-page #ocrResult .bf5-filter-group {
        display: none !important;
    }
}

/* INCI4ME R5.18 RC1 BF10 BF9 BF3 - Archivio INCI portrait single-result toolbar
   Archivio INCI returns one ingredient at a time. In portrait hide the whole
   result summary/filter card. Analizza INCI keeps its summary and filters. */
@media (max-width: 991.98px) and (orientation: portrait) {
    body.inci-archive-page .bf5-result-toolbar {
        display: none !important;
    }
}