/* Mobile camera comparison dock. Include only on pages that render .cd-compare-dock. */
.cd-compare-dock {
    display: none;
}

@media (max-width: 767px) {
    .shell {
        --cd-compare-dock-h: 64px;
    }

    .cd-compare-dock {
        position: fixed;
        inset-inline: 0;
        inset-block-end: env(safe-area-inset-bottom, 0px);
        z-index: 75;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 8px var(--sf-gutter);
        border-top: 1px solid var(--sf-line);
        background: var(--shell-glass);
        -webkit-backdrop-filter: var(--shell-blur);
        backdrop-filter: var(--shell-blur);
    }

    .cd-compare-dock__link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--sf-sp-2);
        min-width: 44px;
        min-height: 44px;
        padding: 7px 14px;
        border: 1px solid var(--sf-line);
        border-radius: 999px;
        background: var(--sf-fill);
        color: var(--sf-ink-2);
        font-size: var(--shell-fs-sm);
        font-weight: 600;
        text-decoration: none;
        transition: background .18s var(--sf-ease), color .18s var(--sf-ease),
                    border-color .18s var(--sf-ease);
    }

    .cd-compare-dock__link:hover,
    .cd-compare-dock__link:focus-visible {
        border-color: var(--sf-brand-soft);
        background: var(--sf-brand-soft);
        color: var(--sf-brand);
    }

    .cd-compare-dock__link svg {
        width: 17px;
        height: 17px;
        flex: none;
    }

    .shell__sheet {
        padding-block-end: calc(var(--sf-sp-8) + var(--cd-compare-dock-h));
    }
}