html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.j-cart-badge {
    border-radius: 3px !important;
}

/* Toast theme helpers for older Bootstrap builds */
.text-bg-danger {
  color: #fff !important;
  background-color: #dc3545 !important;
}

.text-bg-warning {
  color: #212529 !important;
  background-color: #ffc107 !important;
}

.text-bg-success {
  color: #fff !important;
  background-color: #198754 !important;
}

.text-bg-info {
  color: #fff !important;
  background-color: #0dcaf0 !important;
}

/* Image alignment helpers for TinyMCE content */
img.alignleft {
  float: left;
  margin: 0 1rem 0.5rem 0;
}

img.alignright {
  float: right;
  margin: 0 0 0.5rem 1rem;
}

img.aligncenter {
  display: block;
  margin: 0 auto 0.5rem;
}

img.alignnone {
  display: block;
  margin: 0 0 0.5rem;
}
/* Confirm and alert dialogs ----------------------------------------------
   These can open from inside another modal - deleting an image from the
   image editor, for one - so they sit above anything else on the page. The
   content editor pins .modal-backdrop with !important, which defeats the
   stacking Bootstrap would otherwise do on its own, so dialogs.js lifts this
   dialog's own backdrop to match. */
.app-dialog {
    z-index: 1090;
}

/* Two classes, so this wins against the single-class !important the content
   editor pins every backdrop with. */
.modal-backdrop.app-dialog-backdrop {
    z-index: 1085 !important;
}

/* Anchor targets ----------------------------------------------------------
   A section jumped to from the menu would otherwise land with its heading
   under a sticky navigation bar. This keeps it clear of one. */
[id] {
    scroll-margin-top: calc(var(--site-header-height, 5rem) + 1rem);
}

/* The current page in the header menu. Marked with aria-current rather than
   the active class, which scrollspy owns and clears from every link whenever
   it highlights a section. */
.navbar .nav-link[aria-current="page"] {
    color: var(--bs-navbar-active-color);
}

/* The page band, set under Settings, Page Settings. Container and Wide are
   Bootstrap classes; full bleed is the absence of a container rather than a
   wider one. No 100vw, which adds a scrollbar width and scrolls sideways, and
   no negative margins. A component that needs a readable measure puts its own
   container inside itself, the way the rich text one does. */
.page-full {
    width: 100%;
}

/* The band a component keeps when the page runs edge to edge. Bootstrap's
   widest container, so a banded component lines up with a contained one.
   Each component stylesheet decides for itself whether it bands: a photograph
   or a colored band should bleed, a paragraph or a row of cards should not. */
:root {
    --cms-band: 1320px;
}

/* For a component with no stylesheet of its own to put the rule in. */
.page-full .cms-band {
    max-width: var(--cms-band);
    margin-inline: auto;
    padding-inline: 0.75rem;
}

/* The header logo, when a scope has chosen one under Settings, Page Settings.
   Height only, so any shape of mark keeps its proportions. */
.site-logo {
    height: 2.25rem;
    width: auto;
}

/* The preview beside a picture setting: big enough to recognise the picture,
   small enough that the control stays one row. */
.setting-media__preview {
    max-height: 3.5rem;
    max-width: 12rem;
}


/* Toasts sit below the header rather than over it.

   One offset for both layouts, measured rather than guessed: the admin's bar is
   58px and the public header 63px, so 4rem clears the taller of the two. The
   container's own p-3 adds 16px on top of this, which is where the gap under
   the header comes from - changing one means looking at the other.

   The public header is sticky on some sites, depending on a setting, and this
   clears it either way. */
.app-toast-container {
    top: var(--app-toast-top, 4rem);
}

/* The toast's cross. Bootstrap ships no small variant, and its own sizing is
   all in em, so one font-size takes the box, the icon and the padding down
   together. */
.app-toast-close {
    font-size: 0.7rem;
    flex-shrink: 0;
}