/* Mobile overrides for guide detail page widgets.
   These use !important where needed to override React inline styles. */

@media (max-width: 599px) {
    /* ── BearcanSizer ── */
    .bcs-wrap {
        padding: 14px !important;
    }
    .bcs-header,
    .bcs-row {
        grid-template-columns: minmax(0, 1fr) 60px 60px !important;
        gap: 8px !important;
    }
    .bcs-cta {
        display: none !important;
    }

    /* ── CertFilterTable ── */
    .cft-table {
        min-width: 0 !important;
        font-size: 13px !important;
    }
    .cft-body-col {
        display: none !important;
    }
    .cft-table td,
    .cft-table th {
        padding: 8px 4px !important;
    }
    .cft-table .cft-status-badge {
        font-size: 10px !important;
        padding: 2px 5px !important;
    }

    /* ── GearComparator ── */
    .gc-chip {
        padding: 4px 8px !important;
        font-size: 11px !important;
    }
    .gc-table {
        font-size: 13px !important;
    }
    .gc-table th,
    .gc-table td {
        padding: 8px 6px !important;
    }

    /* ── RentalFinder ── */
    .rf-sections {
        grid-template-columns: 1fr !important;
    }
}