/* =========================================================
   AW WooCommerce Term Slider
   Kaartindeling: icoon boven, vette titel eronder. Kaartbreedte is vast via
   --aw-card-width (instelbaar op de stylingpagina); de slider toont zoveel
   kaarten als passen en scrollt de rest. Pure CSS + vanilla JS.

   Anders dan V2 staat hier alleen de native scroll-variant: geen dode
   carousel-code met translateX en clones. Swipen werkt native op touch,
   met muis-drag en prev/next-knoppen op desktop.
   ========================================================= */

.aw-term-slider {
    position: relative;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

.aw-term-slider *,
.aw-term-slider *::before,
.aw-term-slider *::after {
    box-sizing: border-box;
}

/* Viewport = de horizontale scroll-container. Geen zichtbare scrollbar; de
   half zichtbare kaart aan de rand is de swipe-hint. */
.aw-term-slider__viewport {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scrollbar-width: none;           /* Firefox */
    -ms-overflow-style: none;        /* oude Edge/IE */
}

.aw-term-slider__viewport::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* Track */
.aw-term-slider__inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
    cursor: auto;
}

.aw-term-slider__inner * {
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Tijdens muis-drag: links niet aanklikbaar, anders navigeert een sleep. */
.aw-term-slider__inner.is-dragging {
    cursor: grabbing;
}

.aw-term-slider__inner.is-dragging a {
    pointer-events: none;
}

/* Kaartslot - er passen er precies --aw-items in beeld (standaard 4); de rest
   schuift. --aw-card-width is de bovengrens zodat kaarten op een heel breed
   scherm niet uitrekken. */
.aw-term-slider__item {
    flex: 0 0 calc(100% / var(--aw-items, 4));
    width: calc(100% / var(--aw-items, 4));
    max-width: var(--aw-card-width, 320px);
    padding: 4px 8px;
    scroll-snap-align: start;
}

/* Kaart — twee indelingen:
   .aw-term-slider--inline   beeld links, titel rechts, verticaal gecentreerd
   .aw-term-slider--stacked  beeld boven, titel eronder (de oude indeling) */
.aw-term-slider__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: 10px 14px;
    border: 1px solid var(--aw-item-border-color, #eeeeee);
    border-radius: 10px;
    background: #ffffff;
    text-decoration: none;
    color: var(--aw-item-text-color, #111111);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    -webkit-user-drag: none;
}

.aw-term-slider--stacked .aw-term-slider__link {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 12px 16px;
}

.aw-term-slider__link:hover,
.aw-term-slider__link:focus {
    text-decoration: none;
    color: var(--aw-item-text-color, #111111);
}

.aw-term-slider .aw-term-slider__link,
.aw-term-slider .aw-term-slider__link:hover,
.aw-term-slider .aw-term-slider__link:focus,
.aw-term-slider .aw-term-slider__link:visited,
.aw-term-slider .aw-term-slider__link .aw-term-slider__title {
    color: var(--aw-item-text-color, #111111);
}

.aw-term-slider__link:focus-visible {
    outline: 2px solid var(--aw-chevron-color, #333333);
    outline-offset: 2px;
}

/* Beeld — vierkant, maat uit --aw-img-size */
.aw-term-slider__figure {
    /* Krimpt mee als de kaart smaller is dan de ingestelde beeldmaat, zodat
       de titel altijd minstens de helft van de kaart houdt. */
    flex: 0 1 auto;
    margin: 0;
    width: min(var(--aw-img-size, 125px), 45%);
    height: auto;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: transparent;
}

.aw-term-slider__figure img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

/* Titel */
.aw-term-slider__title {
    flex: 1 1 50%;
    min-width: 0;
    display: block;
    margin: 0;
    padding: 0;
    font-family: var(--aw-item-font, inherit);
    font-size: 14px;
    line-height: 19px;
    font-weight: 700;
    color: var(--aw-item-text-color, #111111);
    text-align: left;
    word-break: break-word;
    hyphens: none;
}

.aw-term-slider--stacked .aw-term-slider__title {
    flex: 0 0 auto;
    text-align: center;
}

/* Navigatieknoppen - standaard verborgen; JS toont ze pas bij overflow.
   !important schermt af tegen <button>-resets uit het thema. */
.aw-term-slider .aw-term-slider__nav,
button.aw-term-slider__nav {
    display: none !important;
    position: absolute !important;
    top: -46px !important;
    width: 36px !important;
    height: 36px !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #333333 !important;
    cursor: pointer !important;
    z-index: 5 !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
    -webkit-appearance: none !important;
    appearance: none !important;
    text-shadow: none !important;
    line-height: 1 !important;
    font: inherit !important;
}

/* Overflow aanwezig: knoppen rechtsboven, zwevend zodat de layout niet
   verspringt op het moment dat ze verschijnen. */
.aw-term-slider--has-nav .aw-term-slider__nav,
.aw-term-slider--has-nav button.aw-term-slider__nav {
    display: flex !important;
}

.aw-term-slider--has-nav .aw-term-slider__nav--next {
    right: 0 !important;
    left: auto !important;
}

.aw-term-slider--has-nav .aw-term-slider__nav--prev {
    right: 44px !important;
    left: auto !important;
}

.aw-term-slider--has-nav .aw-term-slider__inner {
    cursor: grab;
}

.aw-term-slider .aw-term-slider__nav:hover {
    background: #f7f7f7 !important;
    border-color: #cfcfcf !important;
}

.aw-term-slider .aw-term-slider__nav:focus-visible {
    outline: 2px solid #cfcfcf;
    outline-offset: 2px;
}

/* Inactieve knop: gedimd en niet klikbaar. */
.aw-term-slider .aw-term-slider__nav.is-disabled,
button.aw-term-slider__nav.is-disabled {
    opacity: 0.3 !important;
    cursor: default !important;
    pointer-events: none !important;
    box-shadow: none !important;
}

/* Pijlicoon (alleen CSS) */
.aw-term-slider__arrow {
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--aw-chevron-color, #333333);
    border-right: 2px solid var(--aw-chevron-color, #333333);
    transition: border-color 0.2s ease;
}

.aw-term-slider .aw-term-slider__nav:hover .aw-term-slider__arrow,
.aw-term-slider .aw-term-slider__nav:focus .aw-term-slider__arrow {
    border-top-color: var(--aw-chevron-hover-color, #111111);
    border-right-color: var(--aw-chevron-hover-color, #111111);
}

.aw-term-slider__nav--prev .aw-term-slider__arrow {
    transform: rotate(-135deg);
    margin-left: 3px;
}

.aw-term-slider__nav--next .aw-term-slider__arrow {
    transform: rotate(45deg);
    margin-right: 3px;
}

/* Mobiel: knoppen op een eigen rij boven de kaarten, zodat ze niet over
   omliggende content vallen. */
@media (max-width: 600px) {
    /* Op mobiel een eigen aantal in beeld (--aw-items-mobile): met vier
       kaarten op een 375px-scherm blijft er te weinig over voor de titel. */
    .aw-term-slider__item {
        flex-basis: calc(100% / var(--aw-items-mobile, 2));
        width: calc(100% / var(--aw-items-mobile, 2));
        padding: 4px 6px;
    }
    .aw-term-slider__title { font-size: 13px; line-height: 17px; }
    .aw-term-slider__link { gap: 10px; padding: 2px 10px; }
    .aw-term-slider.aw-term-slider--has-nav { padding-top: 42px; }
    .aw-term-slider--has-nav .aw-term-slider__nav,
    .aw-term-slider--has-nav button.aw-term-slider__nav {
        top: 4px !important;
        width: 32px !important;
        height: 32px !important;
    }
    .aw-term-slider--has-nav .aw-term-slider__nav--prev { right: 40px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .aw-term-slider__arrow,
    .aw-term-slider__nav { transition: none; }
}