/**
 * mod_j2commerce_docsrail — side rail. Values match the J2Commerce commerce template (docs.css, template.css,
 * pages/company.css); every template token falls back to a Bootstrap 5.3 variable so the rail also works on a
 * site without that template. Turn "Load Stylesheet" off when the site template already styles the rail.
 */

.j2c-docs-rail {
  position: sticky;
  top: var(--j2c-docsrail-top, calc(var(--template-navbar-height, 68px) + 1rem));
  max-height: calc(100vh - var(--j2c-docsrail-top, calc(var(--template-navbar-height, 68px) + 1rem)) - 1rem);
  overflow-y: auto;
  /* Room for focus rings, which the scroll container would otherwise clip at its edges. */
  padding: 0.25rem;
  margin: -0.25rem;
  --j2c-scroll-thumb: transparent;
}
.j2c-docs-rail--static { position: static; max-height: none; overflow-y: visible; }

/* Thin scroll thumb, hidden until the rail is hovered or holds focus. Chrome 121+ ignores ::-webkit-scrollbar once
   scrollbar-width/color is set, so the standard properties are scoped to engines without the pseudo-element. */
.j2c-docs-rail:hover, .j2c-docs-rail:focus-within { --j2c-scroll-thumb: rgba(0, 9, 87, 0.28); }
.j2c-docs-rail::-webkit-scrollbar { width: 6px; height: 6px; }
.j2c-docs-rail::-webkit-scrollbar-track { background: transparent; }
.j2c-docs-rail::-webkit-scrollbar-thumb { border-radius: var(--radius-sm, 0.25rem); background-color: transparent; }
.j2c-docs-rail:hover::-webkit-scrollbar-thumb, .j2c-docs-rail:focus-within::-webkit-scrollbar-thumb { background-color: rgba(0, 9, 87, 0.28); }
.j2c-docs-rail::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 9, 87, 0.45); }
@supports not selector(::-webkit-scrollbar) {
  .j2c-docs-rail { scrollbar-width: thin; scrollbar-color: var(--j2c-scroll-thumb) transparent; }
}

.j2c-docs-rail .j2c-label {
  font-size: var(--template-fs-caps, 0.8125rem);
  font-weight: 600;
  letter-spacing: var(--template-caps-tracking, 0.1em);
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}
.j2c-docs-rail .fs-xs { font-size: var(--template-fs-xs, 0.8125rem); line-height: var(--template-lh-sm, 1.5); }
.j2c-docs-rail .fs-sm { font-size: var(--template-fs-sm, 0.875rem); line-height: var(--template-lh-sm, 1.5); }

/* --- On This Page ------------------------------------------------------------ */
.j2c-docs-rail .j2c-toc__list { margin: 0; padding-left: 0; list-style: none; }
.j2c-docs-rail .j2c-toc__list > li { max-width: none; padding-left: 0.25rem; }
.j2c-docs-rail .j2c-toc__list.j2c-toc__sublist { padding-left: 0.75rem; }
.j2c-docs-rail .j2c-toc__link {
  display: block;
  margin-left: -0.25rem;
  padding: 0.35rem 0.5rem;
  border-left: 3px solid transparent;
  border-radius: var(--bs-border-radius-sm);
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--bs-body-color);
  text-decoration: none;
}
.j2c-docs-rail .j2c-toc__link:focus-visible { outline: 2px solid var(--template-primary, var(--bs-primary)); outline-offset: -2px; }
.j2c-docs-rail .j2c-toc__link:hover { background-color: var(--bs-tertiary-bg); color: var(--template-primary-text-emphasis, var(--bs-primary-text-emphasis)); }
.j2c-docs-rail .j2c-toc__link[aria-current="location"] {
  border-left-color: var(--template-primary, var(--bs-primary));
  background-color: var(--template-primary-subtle, var(--bs-primary-bg-subtle));
  font-weight: 600;
  color: var(--template-primary-text-emphasis, var(--bs-primary-text-emphasis));
}

/* --- Related Products ----------------------------------------------------------- */
.j2c-docs-rail .j2c-docs-products { margin-top: 1.5rem; max-width: none; }
.j2c-docs-rail .j2c-docs-products__stack { display: grid; gap: 1rem; }

/* The shop's extension card (template.css), then what the docs rail changes. */
.j2c-docs-rail .j2c-ext-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.j2c-docs-rail .j2c-ext-card__media { display: block; position: relative; aspect-ratio: 16 / 7; margin: 0; padding: 0.5rem; background-color: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); }
.j2c-docs-rail .j2c-ext-card__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.j2c-docs-rail .j2c-ext-card__body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 1rem; }
.j2c-docs-rail .j2c-ext-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.j2c-docs-rail .j2c-ext-card__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; }
.j2c-docs-rail .j2c-ext-card__price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.5rem; font-variant-numeric: tabular-nums; }
.j2c-docs-rail .j2c-docs-product { background-color: var(--template-surface, var(--bs-body-bg)); transition: border-color 0.2s ease; }
.j2c-docs-rail .j2c-docs-product:hover, .j2c-docs-rail .j2c-docs-product:focus-within { border-color: var(--template-primary-border-subtle, var(--bs-primary-border-subtle)) !important; }
.j2c-docs-rail .j2c-docs-product .j2c-ext-link:hover { text-decoration: underline !important; }
.j2c-docs-rail .j2c-docs-product__view { margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .j2c-docs-rail .j2c-docs-product { transition: none; } }

.j2c-docs-rail .j2c-docs-products__carousel { display: grid; gap: 0.5rem; }
.j2c-docs-rail .j2c-docs-products__controls { display: flex; justify-content: flex-end; }
.j2c-docs-rail .j2c-docs-products__icon { display: block; width: 1em; height: 1em; }
.j2c-docs-rail .j2c-docs-products__icon[hidden] { display: none; }
.j2c-docs-rail .j2c-docs-products__swiper { width: 100%; }
.j2c-docs-rail .j2c-docs-products__swiper .swiper-slide { height: auto; }
.j2c-docs-rail .j2c-docs-products__swiper:not(.swiper-initialized) .swiper-wrapper { display: grid; gap: 1rem; }
.j2c-docs-rail .j2c-docs-products__dots.swiper-pagination { position: static; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.25rem; }
.j2c-docs-rail .j2c-docs-products__dots .swiper-pagination-bullet {
  width: 1.5rem;
  height: 1.5rem;
  min-width: 24px;
  min-height: 24px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  opacity: 1;
  border-radius: var(--bs-border-radius-sm);
}
.j2c-docs-rail .j2c-docs-products__dots .swiper-pagination-bullet::before {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--bs-border-radius-sm);
  border: 2px solid var(--template-primary-text-emphasis, var(--bs-primary-text-emphasis));
  background: transparent;
}
.j2c-docs-rail .j2c-docs-products__dots .swiper-pagination-bullet-active::before { background: var(--template-primary-text-emphasis, var(--bs-primary-text-emphasis)); }
.j2c-docs-rail .j2c-docs-products__dots .swiper-pagination-bullet:focus-visible { outline: 2px solid var(--template-primary, var(--bs-primary)); outline-offset: 2px; }