.dj-carousel { margin: 2rem 0; min-width: 0; max-width: 100%; }
.dj-carousel .dj-carousel__track { display: flex; gap: var(--dj-carousel-gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; overscroll-behavior-x: contain; padding: 2px 2px 12px; direction: ltr; }
.dj-carousel .dj-carousel__slide { box-sizing: border-box; flex: 0 0 calc((100% - (var(--dj-carousel-columns) - 1) * var(--dj-carousel-gap)) / var(--dj-carousel-columns)); min-width: 0; scroll-snap-align: start; overflow-wrap: anywhere; }
.dj-carousel .dj-carousel__figure { margin: 0; }
.dj-carousel .dj-carousel__figure img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: var(--dj-carousel-ratio); object-fit: var(--dj-carousel-fit); border-radius: 3px; background: #f3f4f6; }
.dj-carousel .dj-carousel__figure figcaption { margin: 10px 0 0; font-size: .9em; line-height: 1.5; color: #4b5563; font-style: italic; }
.dj-carousel .dj-carousel__card { display: flex; flex-direction: column; box-sizing: border-box; height: 100%; padding: 24px; border: 1px solid #e2e2e2; border-radius: 3px; background: #fff; color: #222; box-shadow: 0 3px 10px rgba(0,0,0,.1); }
.dj-carousel .dj-carousel__card > * { flex-shrink: 0; }
.dj-carousel .dj-carousel__card-action { margin-top: auto; padding-top: 20px; }
.dj-carousel .dj-carousel__card-button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px; max-width: 100%; padding: 10px 18px; border: 1px solid #d71920; border-radius: 3px; background: #d71920; color: #fff; font-weight: 700; line-height: 1.4; text-align: center; text-decoration: none; }
.dj-carousel .dj-carousel__card-button:hover { background: #b51218; border-color: #b51218; color: #fff; text-decoration: none; }
.dj-carousel .dj-carousel__title { margin: 0 0 12px; font-weight: 700; font-size: 1.2em; line-height: 1.35; }
.dj-carousel .dj-carousel__title,
.dj-carousel .dj-carousel__body h1,
.dj-carousel .dj-carousel__body h2,
.dj-carousel .dj-carousel__body h3,
.dj-carousel .dj-carousel__body h4,
.dj-carousel .dj-carousel__body h5,
.dj-carousel .dj-carousel__body h6 { color: #d71920; }
.dj-carousel .dj-carousel__card-media { margin: -24px -24px 20px; border-radius: 2px 2px 0 0; overflow: hidden; }
.dj-carousel .dj-carousel__card-media img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.dj-carousel .dj-carousel__body > :first-child { margin-top: 0; }
.dj-carousel .dj-carousel__body > :last-child { margin-bottom: 0; }
.dj-carousel .dj-carousel__body img { max-width: 100%; height: auto; }
.dj-carousel .dj-carousel__controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 12px; }
.dj-carousel [hidden] { display: none !important; }
.dj-carousel .dj-carousel__arrow { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 1px solid #ccc; border-radius: 50%; background: #fff; color: #222; font: inherit; font-size: 24px; cursor: pointer; }
.dj-carousel .dj-carousel__arrow:disabled { opacity: .35; cursor: default; }
.dj-carousel .dj-carousel__dots { display: flex; flex-wrap: wrap; justify-content: center; }
.dj-carousel .dj-carousel__dot { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.dj-carousel .dj-carousel__dot::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #999; }
.dj-carousel .dj-carousel__dot[aria-current="true"]::before { background: #d71920; }
.dj-carousel :focus-visible { outline: 3px solid #155cb5; outline-offset: 2px; }
.dj-carousel .dj-carousel__status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 900px) { .dj-carousel .dj-carousel__slide { flex-basis: calc((100% - (var(--dj-carousel-tablet) - 1) * var(--dj-carousel-gap)) / var(--dj-carousel-tablet)); } }
@media (max-width: 600px) { .dj-carousel .dj-carousel__slide { flex-basis: 100%; } }

.dj-carousel--images { position: relative; }
.dj-carousel--images .dj-carousel__arrow { position: absolute; top: var(--dj-carousel-arrow-top, 50%); transform: translateY(-50%); z-index: 1; box-shadow: 0 2px 8px #0003; }
.dj-carousel--images .dj-carousel__arrow[data-direction="-1"] { left: 12px; }
.dj-carousel--images .dj-carousel__arrow[data-direction="1"] { right: 12px; }

.dj-carousel .dj-carousel__image-link { display: block; cursor: zoom-in; }
.dj-carousel-lightbox { position: fixed; inset: 0; margin: auto; width: fit-content; max-width: 96vw; max-height: 96vh; padding: 48px 16px 16px; border: 0; border-radius: 3px; background: #fff; color: #222; overflow: auto; box-shadow: 0 10px 60px #0008; }
.dj-carousel-lightbox::backdrop { background: rgba(0,0,0,.85); }
.dj-carousel-lightbox img { display: block; width: auto; height: auto; max-width: 88vw; max-height: 76vh; object-fit: contain; margin: auto; }
.dj-carousel-lightbox p { margin: 12px 0 0; text-align: center; font-style: italic; }
.dj-carousel-lightbox .dj-carousel-lightbox__close { position: absolute; right: 4px; top: 2px; width: 44px; height: 44px; padding: 0; border: 0; background: #fff; color: #222; font-size: 32px; line-height: 1; cursor: pointer; }
.dj-carousel-lightbox :focus-visible { outline: 3px solid #155cb5; outline-offset: 2px; }
