/* Content comes from Description 1; the plugin owns all layout and controls. */
[data-category-carousel] {
    box-sizing: border-box; display: flex; flex-flow: row nowrap; align-items: stretch;
    gap: 12px; max-width: 100%; min-width: 0; margin: 16px 0;
    padding: 4px 2px; overflow-x: auto; overflow-y: hidden;
    direction: ltr; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
[data-category-carousel] > a {
    box-sizing: border-box; display: flex; flex: 0 0 280px;
    flex-direction: row; align-items: center; gap: 10px;
    width: 280px; max-width: calc(100% - 16px); min-width: 0; min-height: 76px;
    padding: 8px 10px; border: 1px solid #d7dce2; border-radius: 9px;
    background: #fff; color: #30363d; text-decoration: none;
    scroll-snap-align: start; scroll-margin-inline: 2px; font-size: 12px; line-height: 1.35;
    overflow-wrap: anywhere;
}
[data-category-carousel] > a:hover { border-color: var(--category-dialogs-accent, #c92d25); color: #30363d; text-decoration: none; }
[data-category-carousel] > a:focus-visible, .category-carousel__arrow:focus-visible {
    outline: 3px solid #225ca0; outline-offset: 2px;
}
[data-category-card-image] {
    display: flex; flex: 0 0 46px; align-items: center; justify-content: center;
    width: 46px; height: 46px; padding: 4px; border-radius: 8px; background: #f3f5f7;
}
[data-category-card-image] img, [data-category-card-image] svg { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
[data-category-carousel] > a > :not([data-category-card-image]) { min-width: 0; flex: 1 1 auto; }
.category-carousel { box-sizing: border-box; position: relative; width: 100%; max-width: 1156px; min-width: 0; margin: 16px 0; }
.category-carousel [data-category-carousel] { margin: 0; }
.category-carousel--ready [data-category-carousel] { scrollbar-width: none; }
.category-carousel--ready [data-category-carousel]::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* Fade only an edge that still has more cards; the controls stay outside the mask. */
.category-carousel[data-has-next] [data-category-carousel] {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 52px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 52px), transparent);
}
.category-carousel[data-has-previous] [data-category-carousel] {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 52px);
    mask-image: linear-gradient(to right, transparent, #000 52px);
}
.category-carousel[data-has-previous][data-has-next] [data-category-carousel] {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 52px, #000 calc(100% - 52px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 52px, #000 calc(100% - 52px), transparent);
}
.category-carousel__arrow {
    box-sizing: border-box; position: absolute; z-index: 1; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    padding: 0; border: 0; border-radius: 50%; background: transparent;
    color: #30363d; font: inherit; cursor: pointer;
}
.category-carousel__arrow::before {
    content: ""; position: absolute; inset: 6px; border: 1px solid #d7dce2;
    border-radius: 50%; background: #fffffff2;
}
.category-carousel__arrow svg { position: relative; display: block; width: 16px; height: 16px; }
.category-carousel__arrow--previous { left: 0; }
.category-carousel__arrow--next { right: 0; }
.category-carousel__arrow:hover { color: var(--category-dialogs-accent, #c92d25); }
.category-carousel__arrow:hover::before { border-color: currentColor; }
.category-carousel__arrow[data-unavailable] { visibility: hidden; pointer-events: none; }
/* Keep an exhausted keyboard-focused control visible until focus leaves it. */
.category-carousel__arrow[data-unavailable]:focus-visible { visibility: visible; opacity: .4; cursor: default; }
.category-carousel__status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 575.98px) {
    [data-category-card-image] { flex-basis: 38px; width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
    [data-category-carousel] { scroll-behavior: auto; }
}