/*!
 * site-utilities.css — Stage 1 split of bootstrap-subset.css (offline, not loaded anywhere).
 * Source: Bootstrap 5.3.2 (MIT License).
 *
 * Contains: display/flex/align/justify/gap, spacing (margin/padding incl. logical mx/my/px/py),
 * sizing (w-100/h-100), text/font-weight/background/border/shadow/rounded utilities,
 * position-relative, sticky-top, visually-hidden — only the exact tokens confirmed
 * in the audit sample.
 *
 * Load after site-tokens.css; independent of site-framework.css.
 */

.g-3,
.gy-3 {
  --bs-gutter-y: 1rem;
}

.sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1020;
}

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  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;
}

.visually-hidden:not(caption),
.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
  position: absolute !important;
}

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

.d-block {
  display: block !important;
}

.d-grid {
  display: grid !important;
}

.d-flex {
  display: flex !important;
}

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

.d-none {
  display: none !important;
}

.shadow-sm {
  box-shadow: var(--bs-box-shadow-sm) !important;
}

.position-relative {
  position: relative !important;
}

.border {
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.border-top {
  border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.border-bottom {
  border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.w-100 {
  width: 100% !important;
}

.h-100 {
  height: 100% !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

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

.align-self-start {
  align-self: flex-start !important;
}

.m-0 {
  margin: 0 !important;
}

.mx-2 {
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important;
}

.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.my-5 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !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;
}

.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;
}

.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;
}

.ms-2 {
  margin-left: 0.5rem !important;
}

.ms-auto {
  margin-left: auto !important;
}

.p-3 {
  padding: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.px-3 {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.pt-5 {
  padding-top: 3rem !important;
}

.pb-4 {
  padding-bottom: 1.5rem !important;
}

.gap-2 {
  gap: 0.5rem !important;
}

.gap-3 {
  gap: 1rem !important;
}

.fs-6 {
  font-size: 1rem !important;
}

.fw-semibold {
  font-weight: 600 !important;
}

.fw-bold {
  font-weight: 700 !important;
}

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

.text-center {
  text-align: center !important;
}

.text-decoration-none {
  text-decoration: none !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

.text-info {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-info-rgb), var(--bs-text-opacity)) !important;
}

.text-warning {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-warning-rgb), var(--bs-text-opacity)) !important;
}

.text-danger {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
}

.text-light {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-light-rgb), var(--bs-text-opacity)) !important;
}

.text-dark {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important;
}

.text-white {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}

.text-muted {
  --bs-text-opacity: 1;
  color: var(--bs-secondary-color) !important;
}

.bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

.bg-success {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}

.bg-warning {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;
}

.bg-danger {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important;
}

.bg-light {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}

.bg-dark {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
}

.bg-white {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
}

.rounded {
  border-radius: var(--bs-border-radius) !important;
}

.rounded-3 {
  border-radius: var(--bs-border-radius-lg) !important;
}

.rounded-circle {
  border-radius: 50% !important;
}

.rounded-pill {
  border-radius: var(--bs-border-radius-pill) !important;
}

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

@media (min-width: 768px) {
.d-md-block {
    display: block !important;
  }
.d-md-flex {
    display: flex !important;
  }
.p-md-4 {
    padding: 1.5rem !important;
  }
}

@media (min-width: 992px) {
.d-lg-block {
    display: block !important;
  }
.d-lg-none {
    display: none !important;
  }
.mb-lg-0 {
    margin-bottom: 0 !important;
  }
.p-lg-4 {
    padding: 1.5rem !important;
  }
.order-lg-1 {
    order: 1 !important;
  }
.order-lg-2 {
    order: 2 !important;
  }
}

@media (min-width: 1200px) {
.flex-xl-row {
    flex-direction: row !important;
  }
.align-items-xl-center {
    align-items: center !important;
  }
}

/* ===== Stage 2 corrections: border/bg/text variants, px/py/ps/me/mb/mt spacing, fs-5, position-absolute, rounded-4, shadow-lg, justify-content-end ===== */
.shadow-lg {
  box-shadow: var(--bs-box-shadow-lg) !important;
}

.position-absolute {
  position: absolute !important;
}

.border-0 {
  border: 0 !important;
}

.border-start {
  border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.border-primary {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important;
}

.border-success {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
}

.border-info {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-info-rgb), var(--bs-border-opacity)) !important;
}

.border-4 {
  border-width: 4px !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.mt-auto {
  margin-top: auto !important;
}

.me-4 {
  margin-right: 1.5rem !important;
}

.px-1 {
  padding-right: 0.25rem !important;
  padding-left: 0.25rem !important;
}

.px-4 {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}

.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.ps-3 {
  padding-left: 1rem !important;
}

.fs-5 {
  font-size: 1.25rem !important;
}

.text-decoration-underline {
  text-decoration: underline !important;
}

.text-success {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important;
}

.text-white-50 {
  --bs-text-opacity: 1;
  color: rgba(255, 255, 255, 0.5) !important;
}

.text-success-emphasis {
  color: var(--bs-success-text-emphasis) !important;
}

.text-dark-emphasis {
  color: var(--bs-dark-text-emphasis) !important;
}

.bg-secondary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
}

.bg-success-subtle {
  background-color: var(--bs-success-bg-subtle) !important;
}

.rounded-4 {
  border-radius: var(--bs-border-radius-xl) !important;
}

@media (min-width: 576px) {
.mb-sm-0 {
    margin-bottom: 0 !important;
  }
.text-sm-start {
    text-align: left !important;
  }
}

@media (min-width: 768px) {
.mb-md-0 {
    margin-bottom: 0 !important;
  }
.text-md-start {
    text-align: left !important;
  }
.text-md-end {
    text-align: right !important;
  }
}
/* ===== Stage 3 correction: position/translate utilities (Bootstrap 5.3.2 exact source,
   lines 7456-7514) — hero overlay, cart badge, and any other position-absolute+translate-middle
   usage depend on these. Missing since Stage 1; caused critical hero-overlap regression
   found in the Stage 3 visual audit. ===== */
.top-0 {
  top: 0 !important;
}

.top-50 {
  top: 50% !important;
}

.top-100 {
  top: 100% !important;
}

.bottom-0 {
  bottom: 0 !important;
}

.bottom-50 {
  bottom: 50% !important;
}

.bottom-100 {
  bottom: 100% !important;
}

.start-0 {
  left: 0 !important;
}

.start-50 {
  left: 50% !important;
}

.start-100 {
  left: 100% !important;
}

.end-0 {
  right: 0 !important;
}

.end-50 {
  right: 50% !important;
}

.end-100 {
  right: 100% !important;
}

.translate-middle {
  transform: translate(-50%, -50%) !important;
}

.translate-middle-x {
  transform: translateX(-50%) !important;
}

.translate-middle-y {
  transform: translateY(-50%) !important;
}

/* ===== Post-cutover correction: .list-unstyled and .link-light (Bootstrap 5.3.2 exact
   source) were absent from the subset, so footer <ul> nav lists fell back to browser-default
   bullets and <a> links fell back to browser-default blue/purple. !important omitted per
   requirement — a single class selector already outranks the plain `a`/`ul`/`li` element
   selectors it needs to beat, so it wins the cascade without it. */
.list-unstyled {
  padding-left: 0;
  list-style: none;
}

.link-light {
  color: rgba(var(--bs-light-rgb), var(--bs-link-opacity, 1));
  -webkit-text-decoration-color: rgba(var(--bs-light-rgb), var(--bs-link-underline-opacity, 1));
  text-decoration-color: rgba(var(--bs-light-rgb), var(--bs-link-underline-opacity, 1));
}
.link-light:hover, .link-light:focus {
  color: rgba(249, 250, 251, var(--bs-link-opacity, 1));
  -webkit-text-decoration-color: rgba(249, 250, 251, var(--bs-link-underline-opacity, 1));
  text-decoration-color: rgba(249, 250, 251, var(--bs-link-underline-opacity, 1));
}

/* ===== Post-cutover correction: hero/header typography and display utilities (Bootstrap
   5.3.2 exact source). Confirmed absent from all six loaded modules — header title used
   .h3, hero used .display-5/.lead/.list-inline(-item)/.overflow-hidden, header topbar used
   small/.small and .opacity-75. Without these, hero headline/description rendered at
   unstyled default size, the hero stats bar showed as a bulleted vertical list instead of
   inline, and the hero section could clip/overflow incorrectly. ===== */

/* ===== Article/blog title audit (2026-07-19): heading base rule + h1/h2/h4/h5/h6
   font-size scale (Bootstrap 5.3.2 exact source). The bootstrap-subset.css extractor
   is class-token based, so it dropped Bootstrap's compound heading selector
   (h1..h6, .h1..h6 { ... }) wholesale — bare tag names aren't classes, and even the
   .h6 utility class actually used in blog/index.php + blog/view.php markup was lost
   with it. Without this, blog listing/article H1 titles, the H1→H2 paywall rewrite,
   and in-content H2-H6 headings render at unstyled browser default size/weight
   instead of Bootstrap's, and .h6 (card-title, author byline) has no effect at all. ===== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

h1, .h1 {
  font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 2.5rem;
  }
}

h2, .h2 {
  font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
  h2, .h2 {
    font-size: 2rem;
  }
}

h4, .h4 {
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  h4, .h4 {
    font-size: 1.5rem;
  }
}

h5, .h5 {
  font-size: 1.25rem;
}

h6, .h6 {
  font-size: 1rem;
}

h3, .h3 {
  font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
  h3, .h3 {
    font-size: 1.75rem;
  }
}

small, .small {
  font-size: 0.875em;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
}

.display-5 {
  font-size: calc(1.425rem + 2.1vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-5 {
    font-size: 3rem;
  }
}

.list-inline {
  padding-left: 0;
  list-style: none;
}

.list-inline-item {
  display: inline-block;
}
.list-inline-item:not(:last-child) {
  margin-right: 0.5rem;
}

.opacity-75 {
  opacity: 0.75 !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

/* ===== Post-cutover correction (contact page map): .ratio/.ratio-4x3 (Bootstrap
   5.3.2 exact source) were absent from the subset — the extractor's audit sample
   never hit the contact page. Without it, the DB-rendered "Зона за обслужване"
   card's .ratio.ratio-4x3 wrapper had no position/aspect-ratio CSS at all, so it
   collapsed to ~0 height and the #map div (width:100%;height:100% of that
   collapsed parent) rendered invisible. Only ratio-4x3 is added — it's the only
   variant actually used on the site. ===== */
.ratio {
  position: relative;
  width: 100%;
}
.ratio::before {
  display: block;
  padding-top: var(--bs-aspect-ratio);
  content: "";
}
.ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ratio-4x3 {
  --bs-aspect-ratio: calc(3 / 4 * 100%);
}