/*
 * First-party utility classes -- Bootstrap 5.3's utility API, restricted to the
 * 222 classes this site actually uses, with Bootstrap's exact selectors, values
 * and `!important` placement.
 *
 * Loaded before the site's own stylesheets, which still load after this file and
 * still win. Every rule restates Bootstrap's own declaration, with any variable
 * reference resolved to that variable's Bootstrap 5.3 default.
 *
 * HOW THE USED SET WAS COMPUTED
 * -----------------------------
 * Every `class="..."` token was extracted from:
 *   - shopping_list/src/**\/templates/**\/*.html  (all apps and both themes),
 *     excluding vendor files, style_inline.html and the generated
 *     _inline_page_css.html bundles;
 *   - the DB-backed product-page bodies published on /c/ (page_templates_*), which
 *     live in no file in this repository;
 *   - first-party JS under static/src, which toggles classes appearing in no template.
 * The tokens were then matched against the Bootstrap utility families. The same
 * computation is re-run by core/tests/test_first_party_utilities.py, which fails if a
 * used class has no rule here.
 *
 * DELIBERATE DEVIATIONS from upstream, all behaviour-preserving:
 *   - `.border-1` / `.border-2` set `border-width` directly, and `.border-dark` /
 *     `.border-secondary` set `border-color` directly, rather than reassigning a
 *     variable the `.border` rule reads. Composed with `.border` the computed result
 *     is the same; standalone they now do what their name says.
 *   - `.ratio` uses the first-party `--pn-aspect-ratio`.
 *   - Colour utilities carry a literal value, with no opacity variable: no
 *     `.text-opacity-*` / `.bg-opacity-*` class is used. The two brand colours are
 *     the exception -- `.text-primary` / `.bg-success` / `.text-success` read
 *     `--pn-primary-rgb` / `--pn-success-rgb`, which a theme stylesheet overrides
 *     (base/variables.css greens the success colour, the UnBox Labs theme purples
 *     the primary one), falling back to the Bootstrap 5.3 default.
 *
 * Regenerate nothing: this file is hand-owned from here on. Add a class when a
 * template starts using it -- the test above will tell you which one.
 */

/* ---- display ----------------------------------------------------------- */

.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline-block { display: inline-block !important; }
.d-inline-flex { display: inline-flex !important; }
.d-none { display: none !important; }

/* ---- flex -------------------------------------------------------------- */

.align-content-start { align-content: flex-start !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-stretch { align-items: stretch !important; }
.align-self-center { align-self: center !important; }
.align-self-start { align-self: flex-start !important; }
.flex-column { flex-direction: column !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-row { flex-direction: row !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-wrap { flex-wrap: wrap !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-start { justify-content: flex-start !important; }
.order-1 { order: 1 !important; }
.order-2 { order: 2 !important; }

/* ---- gap --------------------------------------------------------------- */

.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }

/* ---- spacing ----------------------------------------------------------- */

.m-0 { margin: 0 !important; }
.m-1 { margin: 0.25rem !important; }
.m-4 { margin: 1.5rem !important; }
.m-auto { margin: auto !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem !important; }
.me-auto { margin-right: auto !important; }
.ms-1 { margin-left: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.ms-auto { margin-left: auto !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mt-auto { margin-top: auto !important; }
.mx-1 {
  margin-left: 0.25rem !important;
  margin-right: 0.25rem !important;
}
.mx-2 {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}
.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}
.my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}
.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}
.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}
.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}
.my-5 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.pe-1 { padding-right: 0.25rem !important; }
.pe-2 { padding-right: 0.5rem !important; }
.pe-5 { padding-right: 3rem !important; }
.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: 0.25rem !important; }
.ps-3 { padding-left: 1rem !important; }
.ps-4 { padding-left: 1.5rem !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.px-1 {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}
.px-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
.px-3 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
.px-4 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}
.px-5 {
  padding-left: 3rem !important;
  padding-right: 3rem !important;
}
.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

/* ---- sizing ------------------------------------------------------------ */

.h-100 { height: 100% !important; }
.h-25 { height: 25% !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }

/* ---- text -------------------------------------------------------------- */

.text-center { text-align: center !important; }
.text-decoration-line-through { text-decoration: line-through !important; }
.text-decoration-none { text-decoration: none !important; }
.text-end { text-align: right !important; }
.text-nowrap { white-space: nowrap !important; }
.text-start { text-align: left !important; }
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-uppercase { text-transform: uppercase !important; }
.text-wrap { white-space: normal !important; }

/* ---- font -------------------------------------------------------------- */

.font-monospace { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; }
.fs-3 { font-size: calc(1.3rem + 0.6vw) !important; }
.fs-4 { font-size: calc(1.275rem + 0.3vw) !important; }
.fs-5 { font-size: 1.25rem !important; }
.fs-6 { font-size: 1rem !important; }
.fw-bold { font-weight: 700 !important; }
.fw-light { font-weight: 300 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-normal { font-weight: 400 !important; }
.fw-semibold { font-weight: 600 !important; }
.small { font-size: 0.875em; }

/* ---- color ------------------------------------------------------------- */

.bg-danger { background-color: #dc3545 !important; }
.bg-dark { background-color: #212529 !important; }
.bg-light { background-color: #f8f9fa !important; }
.bg-primary-subtle { background-color: #cfe2ff !important; }
.bg-secondary { background-color: #6c757d !important; }
.bg-success { background-color: rgb(var(--pn-success-rgb, 25,135,84)) !important; }
.bg-transparent { background-color: transparent !important; }
.bg-warning { background-color: #ffc107 !important; }
.bg-white { background-color: #fff !important; }
.text-danger { color: #dc3545 !important; }
.text-dark { color: #212529 !important; }
.text-light { color: #f8f9fa !important; }
.text-muted { color: rgba(33, 37, 41, 0.75) !important; }
.text-primary { color: rgb(var(--pn-primary-rgb, 13,110,253)) !important; }
.text-reset { color: inherit !important; }
.text-secondary { color: #6c757d !important; }
.text-success { color: rgb(var(--pn-success-rgb, 25,135,84)) !important; }
.text-warning { color: #ffc107 !important; }
.text-white { color: #fff !important; }

/* ---- position ---------------------------------------------------------- */

.end-0 { right: 0 !important; }
.position-absolute { position: absolute !important; }
.position-relative { position: relative !important; }
.position-static { position: static !important; }
.start-0 { left: 0 !important; }
.top-0 { top: 0 !important; }
.top-50 { top: 50% !important; }
.translate-middle-y { transform: translateY(-50%) !important; }

/* ---- overflow ---------------------------------------------------------- */

.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-scroll { overflow: scroll !important; }
.overflow-visible { overflow: visible !important; }
.overflow-x-auto { overflow-x: auto !important; }
.overflow-y-auto { overflow-y: auto !important; }

/* ---- border ------------------------------------------------------------ */

.border { border: 1px solid #dee2e6 !important; }
.border-0 { border: 0 !important; }
.border-1 { border-width: 1px !important; }
.border-2 { border-width: 2px !important; }
.border-bottom { border-bottom: 1px solid #dee2e6 !important; }
.border-dark { border-color: #212529 !important; }
.border-end { border-right: 1px solid #dee2e6 !important; }
.border-secondary { border-color: #6c757d !important; }

/* ---- rounded ----------------------------------------------------------- */

.rounded { border-radius: 0.375rem !important; }
.rounded-0 { border-radius: 0 !important; }
.rounded-1 { border-radius: 0.25rem !important; }
.rounded-3 { border-radius: 0.5rem !important; }
.rounded-4 { border-radius: 1rem !important; }
.rounded-circle { border-radius: 50% !important; }
.rounded-pill { border-radius: 50rem !important; }

/* ---- shadow ------------------------------------------------------------ */

.shadow-lg { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; }
.shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; }

/* ---- ratio ------------------------------------------------------------- */

.ratio {
  position: relative;
  width: 100%;
}

.ratio::before {
  display: block;
  padding-top: var(--pn-aspect-ratio);
  content: "";
}

.ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.ratio-1x1 { --pn-aspect-ratio: 100%; }

/* ---- misc -------------------------------------------------------------- */

.align-middle { vertical-align: middle !important; }
.float-end { float: right !important; }
.opacity-50 { opacity: 0.5 !important; }
.visually-hidden:not(caption) {
  position: absolute !important;
}

.visually-hidden {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---- sm (576px and up) -------------------------------------------- */

@media (min-width: 576px) {
  .d-sm-inline { display: inline !important; }

  .ps-sm-0 { padding-left: 0 !important; }
}

/* ---- md (768px and up) -------------------------------------------- */

@media (min-width: 768px) {
  .d-md-block { display: block !important; }
  .d-md-flex { display: flex !important; }
  .d-md-inline { display: inline !important; }
  .d-md-inline-block { display: inline-block !important; }
  .d-md-none { display: none !important; }

  .align-items-md-center { align-items: center !important; }
  .align-items-md-end { align-items: flex-end !important; }
  .flex-md-row { flex-direction: row !important; }
  .justify-content-md-center { justify-content: center !important; }
  .justify-content-md-start { justify-content: flex-start !important; }
  .order-md-1 { order: 1 !important; }
  .order-md-2 { order: 2 !important; }
  .order-md-3 { order: 3 !important; }

  .mb-md-0 { margin-bottom: 0 !important; }
  .ms-md-auto { margin-left: auto !important; }
  .mt-md-0 { margin-top: 0 !important; }
  .mt-md-5 { margin-top: 3rem !important; }
  .mx-md-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .my-md-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-md-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .p-md-0 { padding: 0 !important; }
  .p-md-1 { padding: 0.25rem !important; }
  .p-md-4 { padding: 1.5rem !important; }
  .p-md-5 { padding: 3rem !important; }
  .pe-md-4 { padding-right: 1.5rem !important; }
  .ps-md-4 { padding-left: 1.5rem !important; }
  .px-md-3 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .px-md-4 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  .py-md-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-md-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-md-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .text-md-end { text-align: right !important; }
}

/* ---- lg (992px and up) -------------------------------------------- */

@media (min-width: 992px) {
  .d-lg-block { display: block !important; }
  .d-lg-flex { display: flex !important; }
  .d-lg-none { display: none !important; }

  .flex-lg-row-reverse { flex-direction: row-reverse !important; }

  .mb-lg-0 { margin-bottom: 0 !important; }
  .me-lg-4 { margin-right: 1.5rem !important; }
  .ms-lg-1 { margin-left: 0.25rem !important; }
  .mt-lg-0 { margin-top: 0 !important; }
  .pe-lg-2 { padding-right: 0.5rem !important; }
  .px-lg-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ---- xl (1200px and up) -------------------------------------------- */

@media (min-width: 1200px) {
  .d-xl-block { display: block !important; }
  .d-xl-inline { display: inline !important; }
  .d-xl-none { display: none !important; }

  .align-items-xl-center { align-items: center !important; }

  .gap-xl-1 { gap: 0.25rem !important; }

  .fs-3 {
    font-size: 1.75rem !important;
  }
  .fs-4 {
    font-size: 1.5rem !important;
  }
}