/*
 * Bootstrap 5 -> Bootstrap 4 look-alike layer.
 *
 * The storefront was designed on Bootstrap 4.1.3. Bootstrap 5.3 changed a number of defaults (gutter width, palette, border colours,
 * link underlines, card padding, label margins ...). This file puts those back so that upgrading the framework does not change how
 * any page looks. It loads AFTER the vendor stylesheet and BEFORE the theme (main.css / custom.css), so the theme still wins.
 *
 * Every rule here exists because a before/after comparison of the rendered pages (computed style + box of every element, at four
 * viewport widths) showed a difference. Do not edit vendor/bootstrap-*.min.css (a test pins its checksum): change things here.
 */

/* ---- 1. palette and radii (Bootstrap 4 values) --------------------------------------------------------------------------- */
:root {
    --bs-primary: #007bff;   --bs-primary-rgb: 0, 123, 255;
    --bs-success: #28a745;   --bs-success-rgb: 40, 167, 69;
    --bs-info: #17a2b8;      --bs-info-rgb: 23, 162, 184;
    --bs-warning: #ffc107;   --bs-warning-rgb: 255, 193, 7;
    --bs-danger: #dc3545;    --bs-danger-rgb: 220, 53, 69;
    --bs-dark: #343a40;      --bs-dark-rgb: 52, 58, 64;
    --bs-link-color: #007bff;        --bs-link-color-rgb: 0, 123, 255;
    --bs-link-hover-color: #0056b3;  --bs-link-hover-color-rgb: 0, 86, 179;
    --bs-secondary-color: #6c757d;
    --bs-border-radius: .25rem;
    --bs-border-radius-sm: .2rem;
    --bs-border-radius-lg: .3rem;
}

/* ---- 2. grid: 30px gutters, 1140px maximum container, columns are positioning contexts ----------------------------------- */
/* Bootstrap 5 uses 24px gutters and adds a 1320px container at >=1400px. */
.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl, .row {
    --bs-gutter-x: 1.875rem;
}
@media (min-width: 1400px) {
    .container, .container-xxl { max-width: 1140px; }
}
/* In Bootstrap 4.1 every column was position:relative (absolutely positioned content inside it is anchored to it) and had min-height:1px. */
:is(
    .col,
    .col-auto,
    .col-1,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11,
    .col-12,
    .col-sm,
    .col-sm-auto,
    .col-sm-1,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-md,
    .col-md-auto,
    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-md-12,
    .col-lg,
    .col-lg-auto,
    .col-lg-1,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12,
    .col-xl,
    .col-xl-auto,
    .col-xl-1,
    .col-xl-2,
    .col-xl-3,
    .col-xl-4,
    .col-xl-5,
    .col-xl-6,
    .col-xl-7,
    .col-xl-8,
    .col-xl-9,
    .col-xl-10,
    .col-xl-11,
    .col-xl-12
) { position: relative; min-height: 1px; }
/* ... and a column that is NOT inside a .row still had its 15px side padding in Bootstrap 4 (Bootstrap 5 only pads the children of .row). */
:where(:not(.row)) > :is(.col, .col-auto, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-sm, .col-sm-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md, .col-md-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg, .col-lg-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl, .col-xl-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12) {
    padding-right: 15px;
    padding-left: 15px;
}
/* In Bootstrap 4 a non-column child of .row was an ordinary flex item. Bootstrap 5 gives every child width:100% and gutter padding.
   :where() keeps the specificity equal to the vendor rule (so the theme and inline styles still override this). Elements that carry their
   own padding (.btn, .form-control ...) keep it. Only the real Bootstrap column classes count as columns (the theme has its own .col-first). */
.row > :where(:not(:is(.col, .col-auto, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-sm, .col-sm-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md, .col-md-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg, .col-lg-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl, .col-xl-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12))) {
    width: auto;
    max-width: none;
    flex-shrink: 1;
    margin-top: 0;
}
.row > :where(:not(:is(.col, .col-auto, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-sm, .col-sm-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md, .col-md-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg, .col-lg-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl, .col-xl-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12)):not(.btn):not(.form-control):not(.input-group-text)) {
    padding-right: 0;
    padding-left: 0;
}

/* ---- 3. reboot differences ------------------------------------------------------------------------------------------------ */
label { margin-bottom: .5rem; }
img { border-style: none; }   /* Bootstrap 4 reboot: no border / icon box on a broken image */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
a:not([href]):not([class]):hover { text-decoration: none; }
ol, ul { padding-left: 40px; }
small, .small { font-size: 80%; }
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
    margin: 1rem auto;
    color: inherit;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, .1);
    opacity: 1;
}
h1, .h1 { font-size: 2.5rem; }
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.75rem; }
h4, .h4 { font-size: 1.5rem; }
h5, .h5 { font-size: 1.25rem; }
h6, .h6 { font-size: 1rem; }
.text-muted { color: #6c757d !important; }

/* ---- 4. components whose Bootstrap 4 definition the pages rely on --------------------------------------------------------- */
/* .form-group was removed in Bootstrap 5 (it only supplied this margin; the theme overrides it where it wants more). */
.form-group { margin-bottom: 1rem; }
/* .media was removed in Bootstrap 5; the theme still styles it. */
.media { display: flex; align-items: flex-start; }
.media-body { flex: 1; }

.card {
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
    --bs-card-border-color: rgba(0, 0, 0, .125);
    --bs-card-cap-padding-y: .75rem;
    --bs-card-cap-padding-x: 1.25rem;
    --bs-card-cap-bg: rgba(0, 0, 0, .03);
    color: inherit;   /* Bootstrap 5 forces the body colour on every card, which overrode the theme's text colour */
}

.navbar {
    --bs-navbar-color: rgba(0, 0, 0, .5);
    --bs-navbar-hover-color: rgba(0, 0, 0, .7);
    --bs-navbar-disabled-color: rgba(0, 0, 0, .3);
    --bs-navbar-active-color: rgba(0, 0, 0, .9);
    --bs-navbar-brand-color: rgba(0, 0, 0, .9);
    --bs-navbar-brand-hover-color: rgba(0, 0, 0, .9);
    --bs-navbar-toggler-border-color: rgba(0, 0, 0, .1);
}

/* Bootstrap 4 removed the container padding of a collapsible navbar below its breakpoint (the collapsed bar sits edge to edge); Bootstrap 5 does not. */
@media (max-width: 575.98px) { .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid { padding-right: 0; padding-left: 0; } }
@media (max-width: 767.98px) { .navbar-expand-md > .container, .navbar-expand-md > .container-fluid { padding-right: 0; padding-left: 0; } }
@media (max-width: 991.98px) { .navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid { padding-right: 0; padding-left: 0; } }
@media (max-width: 1199.98px) { .navbar-expand-xl > .container, .navbar-expand-xl > .container-fluid { padding-right: 0; padding-left: 0; } }

/* The product page has its own overlay that reuses .modal-content / .modal-header outside a Bootstrap .modal. Bootstrap 5 draws those from
   variables defined on .modal, so out there they lose their border and layout; these are the Bootstrap 4 definitions. */
.modal-content { color: inherit; position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, .2); border-radius: .3rem; outline: 0; }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 1rem; border-bottom: 1px solid #e9ecef; border-top-left-radius: .3rem; border-top-right-radius: .3rem; }
.modal-title { margin-bottom: 0; line-height: 1.5; }
.modal-body { position: relative; flex: 1 1 auto; padding: 1rem; }
.modal-footer { display: flex; align-items: center; justify-content: flex-end; padding: 1rem; border-top: 1px solid #e9ecef; }

/* Bootstrap 5 adds .125rem below every .form-check and indents by 1.5em; these are the Bootstrap 4 metrics (the box itself stays Bootstrap 5's). */
.form-check { min-height: 0; margin-bottom: 0; padding-left: 1.25rem; }
.form-check .form-check-input { margin-left: -1.25rem; }

.page-link { padding: .5rem .75rem; line-height: 1.25; font-size: inherit; }

.table { --bs-table-bg: transparent; }
.table:not(.table-sm) > :not(caption) > * > * { padding: .75rem; color: inherit; border-bottom-width: 0; border-top-width: 1px; }
.table > thead > tr > th { border-bottom-width: 2px; }

/* ---- 5. forms ------------------------------------------------------------------------------------------------------------- */
.form-control {
    color: #495057;
    border-color: #ced4da;
}
/* Bootstrap 4 gave form controls a fixed height; Bootstrap 5 sizes them from their content, so a thicker border or a taller font changes the row. */
.form-control { height: calc(2.25rem + 2px); }
.form-control-sm { height: calc(1.8125rem + 2px); }
.form-control-lg { height: calc(2.875rem + 2px); }
textarea.form-control, select.form-control[multiple], select.form-control[size]:not([size="1"]) { height: auto; }
/* Bootstrap 5 sets appearance:none on .form-control, which removes the dropdown arrow of a <select> (it expects .form-select). The theme has its own, unrelated
   .form-select rule (height:40px), so the selects keep .form-control and get the native control back, exactly as in Bootstrap 4. */
select.form-control { appearance: auto; }
.form-control:disabled, .form-control[readonly] { background-color: #e9ecef; opacity: 1; }
.form-control::placeholder { color: #6c757d; opacity: 1; }
.form-control:focus {
    color: #495057;
    border-color: #80bdff;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
}
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { margin-left: 0; }
.input-group-text { color: #495057; background-color: #e9ecef; border-color: #ced4da; }
.form-check-input:checked { background-color: #007bff; border-color: #007bff; }

/* ---- 6. buttons (Bootstrap 4 colours, hover / active shades and label colours) ------------------------------------------- */
.btn { white-space: nowrap; }   /* Bootstrap 5 dropped this: a button that does not fit now wraps to two lines instead of overflowing */
.btn-primary {
    --bs-btn-bg: #007bff; --bs-btn-border-color: #007bff;
    --bs-btn-hover-bg: #0069d9; --bs-btn-hover-border-color: #0062cc;
    --bs-btn-active-bg: #0062cc; --bs-btn-active-border-color: #005cbf;
    --bs-btn-disabled-bg: #007bff; --bs-btn-disabled-border-color: #007bff;
    --bs-btn-focus-shadow-rgb: 38, 143, 255;
}
.btn-secondary {
    --bs-btn-hover-bg: #5a6268; --bs-btn-hover-border-color: #545b62;
    --bs-btn-active-bg: #545b62; --bs-btn-active-border-color: #4e555b;
}
.btn-success {
    --bs-btn-bg: #28a745; --bs-btn-border-color: #28a745;
    --bs-btn-hover-bg: #218838; --bs-btn-hover-border-color: #1e7e34;
    --bs-btn-active-bg: #1e7e34; --bs-btn-active-border-color: #1c7430;
    --bs-btn-disabled-bg: #28a745; --bs-btn-disabled-border-color: #28a745;
    --bs-btn-focus-shadow-rgb: 72, 180, 97;
}
.btn-danger {
    --bs-btn-hover-bg: #c82333; --bs-btn-hover-border-color: #bd2130;
    --bs-btn-active-bg: #bd2130; --bs-btn-active-border-color: #b21f2d;
}
.btn-warning {
    --bs-btn-color: #212529; --bs-btn-hover-color: #212529; --bs-btn-active-color: #212529; --bs-btn-disabled-color: #212529;
    --bs-btn-hover-bg: #e0a800; --bs-btn-hover-border-color: #d39e00;
    --bs-btn-active-bg: #d39e00; --bs-btn-active-border-color: #c69500;
}
.btn-info {
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff;
    --bs-btn-bg: #17a2b8; --bs-btn-border-color: #17a2b8;
    --bs-btn-hover-bg: #138496; --bs-btn-hover-border-color: #117a8b;
    --bs-btn-active-bg: #117a8b; --bs-btn-active-border-color: #10707f;
    --bs-btn-disabled-bg: #17a2b8; --bs-btn-disabled-border-color: #17a2b8;
    --bs-btn-focus-shadow-rgb: 58, 176, 195;
}
.btn-light {
    --bs-btn-color: #212529; --bs-btn-hover-color: #212529; --bs-btn-active-color: #212529;
    --bs-btn-hover-bg: #e2e6ea; --bs-btn-hover-border-color: #dae0e5;
    --bs-btn-active-bg: #dae0e5; --bs-btn-active-border-color: #d3d9df;
}
.btn-dark {
    --bs-btn-bg: #343a40; --bs-btn-border-color: #343a40;
    --bs-btn-hover-bg: #23272b; --bs-btn-hover-border-color: #1d2124;
    --bs-btn-active-bg: #1d2124; --bs-btn-active-border-color: #171a1d;
    --bs-btn-disabled-bg: #343a40; --bs-btn-disabled-border-color: #343a40;
}