.card-img-top {
    max-height: 264px;
    object-fit: contain;
}
.carousel-image {
    max-height: 600px;
    width: auto;
    object-fit: contain;
    margin: 0 auto;
}
.carousel-img {
    max-height: 500px;
    object-fit: contain;
    background-color: #f8f9fa;
}
.tiny-v-head{
    font-size: xx-small;
    color: deepskyblue;
}
.image-thumb{
    width: 50px;
    height: 60px;
}
.dark .card {
  background-color: rgb(15 23 42);      /* slate-900 */
  border-color: rgba(51, 65, 85, 0.7);  /* slate-700-ish */
  color: rgb(226 232 240);              /* slate-200 */
}

.wysiwyg {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgb(15 23 42); /* slate-900 */
}
.dark .wysiwyg {
  color: rgb(226 232 240); /* slate-200 */
}
.wysiwyg p {
  margin-bottom: 0.75rem;
}
.wysiwyg h1,
.wysiwyg h2,
.wysiwyg h3,
.wysiwyg h4,
.wysiwyg h5,
.wysiwyg h6 {
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 0.5rem;
  color: rgb(15 23 42);
}
.dark .wysiwyg h1,
.dark .wysiwyg h2,
.dark .wysiwyg h3,
.dark .wysiwyg h4,
.dark .wysiwyg h5,
.dark .wysiwyg h6 {
  color: rgb(248 250 252);
}
.wysiwyg h1 { font-size: 1.6rem; }
.wysiwyg h2 { font-size: 1.45rem; }
.wysiwyg h3 { font-size: 1.3rem; }
.wysiwyg h4 { font-size: 1.15rem; }
.wysiwyg h5 { font-size: 1.05rem; }
.wysiwyg h6 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.08em; }

.wysiwyg ul,
.wysiwyg ol {
  margin-bottom: 0.75rem;
  padding-left: 1.25rem;
}
.wysiwyg ul {
  list-style-type: disc;
}
.wysiwyg ol {
  list-style-type: decimal;
}
.wysiwyg li {
  margin-bottom: 0.25rem;
}
.wysiwyg blockquote {
  margin-bottom: 0.85rem;
  border-left: 3px solid rgb(191 219 254);
  padding-left: 0.9rem;
  font-style: italic;
  color: rgb(71 85 105);
}
.dark .wysiwyg blockquote {
  border-left-color: rgb(99 102 241);
  color: rgb(148 163 184);
}
.wysiwyg a {
  color: rgb(59 130 246);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.dark .wysiwyg a {
  color: rgb(129 212 250);
}
.wysiwyg > :last-child {
  margin-bottom: 0;
}

/* Ensure the sticky title bar always stacks on top of carousels (Chrome bug) */
.app-header {
  z-index: 60;
}

/* lighter gray for placeholder stock numbers in image_index_search.html and view_products.html - textarea element */
#stock_list::placeholder {
    color: rgba(100, 116, 139, 0.55);
  }

  .dark #stock_list::placeholder {
    color: rgba(148, 163, 184, 0.5);
  }

  #stock_list:focus::placeholder {
    color: transparent;
  }