/* ============================================================
   Bootstrap 3 -> 5 structural compatibility layer.
   The site's design CSS (base.css + per-view styles) targets BS3
   class names that Bootstrap 5 dropped. This file restores only
   the structural rules the design relies on, so the visual design
   stays identical while Bootstrap 5 provides the behavior.
   Load order: bootstrap5.min.css -> THIS FILE -> base.css
   ============================================================ */

/* BS3 default type scale (BS5 raises body font to 1rem/16px) */
body {
    font-size: 14px;
    line-height: 1.42857143;
}

/* BS3 gutters were 30px (15px container/col padding); BS5 defaults to 24px */
.row,
.container,
.container-fluid {
    --bs-gutter-x: 30px;
}

/* BS3 sized .container with `width` (not max-width). Replicate that so the
   design's own override (base.css: width:1350px at >=1200px) keeps winning. */
@media (min-width: 576px) {
    .container {
        max-width: none;
    }
}

@media (min-width: 768px) {
    .container {
        width: 750px;
        max-width: none;
    }
}

@media (min-width: 992px) {
    .container {
        width: 970px;
        max-width: none;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1170px;
        max-width: none;
    }
}

/* BS3 containers had a clearfix; BS5 (flex era) dropped it. The design
   floats children directly inside containers, so restore it. */
.container:before, .container:after,
.container-fluid:before, .container-fluid:after {
    content: " ";
    display: table;
}

.container:after,
.container-fluid:after {
    clear: both;
}

/* ---------- Navbar: restore BS3 block/float layout ---------- */
.navbar {
    display: block;
    position: relative;
    min-height: 50px;
    margin-bottom: 0;
    padding: 0;
}

.navbar:before, .navbar:after,
.navbar-header:before, .navbar-header:after,
.navbar-collapse:before, .navbar-collapse:after,
.nav:before, .nav:after {
    content: " ";
    display: table;
}

.navbar:after, .navbar-header:after, .navbar-collapse:after, .nav:after {
    clear: both;
}

.navbar > .container-fluid {
    display: block;
    padding-left: 15px;
    padding-right: 15px;
}

.navbar-brand {
    float: left;
    display: block;
    margin-right: 0;
    white-space: normal;
}

.nav,
.navbar-nav {
    display: block;
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.navbar-nav > li {
    position: relative;
    display: block;
}

.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
}

.navbar-form {
    margin: 8px -15px;
}

/* BS3 dropdown anatomy: BS5 only styles .dropdown-item, but the design
   styles .dropdown-menu > li > a, which BS3 made block-level links. */
.dropdown-menu > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: #262626;
    background-color: #f5f5f5;
    text-decoration: none;
}

/* BS3 caret (BS5 dropped it) */
.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

/* Desktop: BS3 expanded the navbar at >=768px */
@media (min-width: 768px) {
    .navbar-toggle {
        display: none;
    }

    .navbar-header {
        float: left;
    }

    .navbar-collapse {
        width: auto;
        border-top: 0;
        box-shadow: none;
    }

    .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
    }

    .navbar-nav,
    .navbar-nav > li {
        float: left;
    }

    .navbar-right {
        float: right !important;
    }

    .navbar-form {
        float: left;
        margin: 8px 0;
    }

    .navbar-form .form-group {
        display: inline-block;
        margin-bottom: 0;
        vertical-align: middle;
    }

    .navbar-form .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle;
    }

    /* BS5 makes navbar dropdowns position:static unless a navbar-expand-*
       class is present; restore the floating behavior so an open menu
       overlays the page instead of pushing it down. */
    .navbar-nav .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 0;
    }

    /* Hover dropdown (replaces bootstrap-hover-dropdown.js) */
    .navbar-nav li.dropdown:hover > .dropdown-menu {
        display: block;
    }
}

/* Mobile: BS3 hamburger button and collapsed menu */
@media (max-width: 767.98px) {
    .navbar-toggle {
        position: relative;
        float: right;
        margin: 8px 15px 8px 0;
        padding: 9px 10px;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 4px;
    }

    .navbar-toggle .icon-bar {
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 1px;
        background: #888;
    }

    .navbar-toggle .icon-bar + .icon-bar {
        margin-top: 4px;
    }

    .navbar-header {
        float: none;
    }

    .navbar-nav > li {
        float: none;
    }
}

/* BS3 sr-only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* BS3 .form-group (dropped in BS5) */
.form-group {
    margin-bottom: 15px;
}

/* BS3 columns floated, so they worked even outside a .row (the product
   detail page and tab content rely on this). BS5 columns only lay out
   inside a flex .row, so restore BS3 behavior for cols not in a row. */
:not(.row) > [class*="col-"] {
    float: left;
    position: relative;
    padding-left: 15px;
    padding-right: 15px;
}

/* ---------- BS3 typography defaults (BS5 changed all of these) ---------- */
h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }

h1, .h1, h2, .h2, h3, .h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

h4, .h4, h5, .h5, h6, .h6 {
    margin-top: 10px;
    margin-bottom: 10px;
}

p {
    margin: 0 0 10px;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

/* ---------- BS3 form-control sizing (BS5: 16px font, no fixed height,
   appearance:none which hides native select arrows) ---------- */
.form-control {
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    appearance: auto;
    -webkit-appearance: auto;
}

textarea.form-control,
select[multiple].form-control {
    height: auto;
}

select.form-control {
    appearance: auto;
    -webkit-appearance: auto;
}

/* BS5 pads every .row child; BS3 only padded col-* children. The design
   uses decorative .row wrappers (product detail, filter selects) whose
   non-col children were unpadded in BS3. */
.row > :not([class*="col-"]) {
    padding-left: 0;
    padding-right: 0;
}

/* BS3 .hidden utility (BS5 renamed it to .d-none); the contact form's
   loading spinner and its show/hide JS rely on it. */
.hidden {
    display: none !important;
}

/* BS3 .img-responsive was display:block; BS5 .img-fluid leaves images
   inline, which breaks the design's margin:0 auto centering. */
.img-fluid {
    display: block;
}