/*
    assets/css/bootstrap-shim.css

    Replaces Bootstrap 5.0.2's 152KB stylesheet with the 26 rules this site
    actually depends on. Added 2026-08-20.

    WHY THIS IS SAFE, measured rather than assumed:

    Across a 29-page sample -- homepage, every category, every product and
    quantity variant, cart, scan, find, policies, install, make-model -- the
    markup used 39 of Bootstrap's 1735 classes (2.2%). Of those 39, thirteen
    are the SITE's own classes that Bootstrap merely happens to also define:

        row (351 rules in main.css), col, col-3, col-4, col-5, col-6, col-8,
        col-12, container, btn, form-control, active, small

    The markup uses the site's HTML5UP-style grid -- `class="col-5 col-12-medium"`
    with -small/-medium/-large/-xlarge breakpoint suffixes -- not Bootstrap's.
    And because template/css.php loads main.css AFTER Bootstrap, main.css won
    the cascade anyway: Bootstrap's versions of those thirteen were already
    dead rules being overridden on every page.

    Bootstrap's Reboot is likewise redundant. main.css opens with its own full
    Meyer reset (html, body, div, span, ... { margin:0; padding:0; border:0 })
    and, loading later, already overrode Reboot.

    Bootstrap's JavaScript went in the same pass -- no data-bs-* attributes,
    no constructors, no references to the global anywhere on the site.

    That leaves only the 26 below, which nothing else in the site provides.
    They are copied verbatim from bootstrap.min.css 5.0.2 so this swap changes
    no pixel. Restyling them onto the palette in tokens.css is the NEXT step,
    deliberately kept separate so a visual change is never confused with a
    plumbing change.

    admin/ is unaffected -- it loads its own Bootstrap 5.3.3.
*/

/* Layout utilities */
.d-block { display: block !important; }
.d-none { display: none !important; }
.w-100 { width: 100% !important; }
.position-absolute { position: absolute !important; }
.position-relative { position: relative !important; }
.top-100 { top: 100% !important; }
.start-0 { left: 0 !important; }

/* Spacing utilities */
.mt-1 { margin-top: .25rem !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.me-2 { margin-right: .5rem !important; }

/* Surface utilities */
.rounded { border-radius: .25rem !important; }
.shadow-sm { box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important; }
.text-muted { color: #6c757d !important; }

/* Forms -- .form-control is the site's own, only these two came from Bootstrap */
.form-label { margin-bottom: .5rem; }
.form-text { margin-top: .25rem; font-size: .875em; color: #6c757d; }

/* Button variants layered on the site's own .btn */
.btn-dark { color: #fff; background-color: #212529; border-color: #212529; }
.btn-secondary { color: #fff; background-color: #6c757d; border-color: #6c757d; }
.btn-link { font-weight: 400; color: #0d6efd; text-decoration: underline; }

/* Alerts */
.alert { position: relative; padding: 1rem 1rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: .25rem; }
.alert-danger { color: #842029; background-color: #f8d7da; border-color: #f5c2c7; }
.alert-success { color: #0f5132; background-color: #d1e7dd; border-color: #badbcc; }

/* Components */
.nav { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; }
.list-group { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; border-radius: .25rem; }
.carousel { position: relative; }