/* Horizontal sliders on the category page (loaded by CategorySliderAssets on every category page).

   The stock subcategory grid lists EVERY child as a tile — an L1 with 400 children became a
   24,000px wall before the first product. Here it is two rows that scroll sideways, with arrows
   added by daman-hslider.js. Pure CSS does the layout, so it is already right before any script
   runs; the arrows are an enhancement, and without them the rows still scroll by touch/trackpad. */

.dhs {
    position: relative;
}

/* ---------- the subcategory tiles: two rows, sideways ---------- */

.category-page .artlist-sub-categories {
    display: grid !important;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: 168px;
    gap: 0.6rem;
    margin: 0 0 1.5rem !important;
    padding: 0.15rem 0.1rem 0.6rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: thin;
    --gutter-x: 0;
    --gutter-y: 0;
}

/* A category with a handful of children does not need two rows of mostly nothing. */
.category-page .artlist-sub-categories:not(:has(> .art:nth-child(9))) {
    grid-template-rows: auto;
}

.category-page .artlist-sub-categories > .art {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    margin: 0 !important;
    scroll-snap-align: start;
}

.category-page .artlist-sub-categories::after {
    display: none !important;
}

@media (max-width: 575.98px) {
    .category-page .artlist-sub-categories {
        grid-auto-columns: 38vw;
    }
}

/* ---------- the desktop sidebar category menu ---------- */

/* The same wall, vertically: the left column lists every child too (419 → a 23,600px column that
   set the page height). Capped to the viewport with its own scroll; this sheet only loads on
   category pages, so the menu elsewhere is untouched. */
#content-left .block-catmenu .catmenu {
    max-height: min(70vh, 640px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* ---------- a generic one-row rail (professionals) ---------- */

.dhs-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 320px);
    gap: 0.75rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: thin;
    padding-block-end: 0.5rem;
}

.dhs-rail > * {
    scroll-snap-align: start;
    min-width: 0;
}

@media (max-width: 575.98px) {
    .dhs-rail {
        grid-auto-columns: 82vw;
    }
}

/* ---------- arrows (added by script, only when the track overflows) ---------- */

.dhs-btn {
    position: absolute;
    inset-block-start: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-block-start: -19px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 50%;
    background: var(--body-bg, #fff);
    color: var(--body-color, #1f2937);
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.14);
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.dhs-btn[hidden] {
    display: none;
}

.dhs-btn:hover,
.dhs-btn:focus-visible {
    color: var(--primary, #4f46e5);
}

.dhs-btn--prev {
    inset-inline-start: -12px;
}

.dhs-btn--next {
    inset-inline-end: -12px;
}

/* Shown on touch screens too: a swipe is invisible, and a row that merely runs off the edge does not
   say "there is more". Smaller there, and tucked inside the edge so they never force a page scroll. */
@media (max-width: 767.98px) {
    .dhs-btn {
        width: 32px;
        height: 32px;
        margin-block-start: -16px;
        font-size: 0.8rem;
        opacity: 0.94;
    }

    .dhs-btn--prev {
        inset-inline-start: 2px;
    }

    .dhs-btn--next {
        inset-inline-end: 2px;
    }
}