/*
 * Vloershop Core — Accessoires "Maak je bestelling compleet" (.vs-accessories).
 * Card met carousel van compacte tegels. Theme-resistant.
 */

.vs-accessories,
.vs-accessories * {
    box-sizing: border-box;
}

.vs-accessories {
    --vs-acc-accent: var(--vs-color-primary, #2a3065);
    --vs-acc-price: var(--vs-color-sale, #e8731c);
    --vs-acc-surface: #f4f5f9;
    --vs-acc-border: #e5e7eb;
    --vs-acc-radius: 12px;

    display: block !important;
    margin: 0 0 16px !important;
    padding: 22px !important;
    font-family: 'Lato', system-ui, -apple-system, sans-serif !important;
    background: var(--vs-acc-surface) !important;
    border-radius: var(--vs-acc-radius) !important;
}

/* Kop: titel links, categorie-dropdown rechts (stapelt op smal scherm). */
.vs-accessories__head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
    margin: 0 0 16px !important;
}

.vs-accessories__title {
    margin: 0 !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: var(--vs-acc-accent) !important;
    text-align: left !important;
}

/* Categorie-kiezer (native select met eigen chevron). */
.vs-accessories__chooser {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
}

.vs-accessories__chooser-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #56607a !important;
    white-space: nowrap !important;
}

.vs-accessories__select {
    position: relative !important;
    display: inline-flex !important;
}

.vs-accessories__select::after {
    content: "" !important;
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    width: 9px !important;
    height: 9px !important;
    border-right: 2px solid var(--vs-acc-accent) !important;
    border-bottom: 2px solid var(--vs-acc-accent) !important;
    transform: translateY(-65%) rotate(45deg) !important;
    pointer-events: none !important;
}

.vs-accessories select.vs-accessories__dropdown,
.vs-accessories__dropdown {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
    padding: 10px 38px 10px 14px !important;
    min-width: 200px !important;
    max-width: 100% !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: var(--vs-acc-accent) !important;
    background: #fff !important;
    border: 1.5px solid var(--vs-acc-border) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.vs-accessories__dropdown:hover {
    border-color: var(--vs-acc-accent) !important;
}

.vs-accessories__dropdown:focus,
.vs-accessories__dropdown:focus-visible {
    outline: 0 !important;
    border-color: var(--vs-acc-accent) !important;
    box-shadow: 0 0 0 3px rgba(42, 48, 101, 0.14) !important;
}

/* Alleen de gekozen groep tonen. */
.vs-accessories__group[hidden] {
    display: none !important;
}

@media (max-width: 560px) {
    .vs-accessories__head {
        align-items: stretch !important;
    }
    .vs-accessories__chooser {
        width: 100% !important;
    }
    .vs-accessories__select,
    .vs-accessories__dropdown {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* Carousel-pijlen (JS injecteert ze alleen bij overflow). */
.vs-accessories__nav {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 8px 0 0 !important;
}

.vs-accessories button.vs-accessories__arrow,
.vs-accessories__arrow {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    color: var(--vs-acc-accent) !important;
    background: #fff !important;
    border: 1px solid var(--vs-acc-border) !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
}

.vs-accessories__arrow:hover {
    background: #e9ecf4 !important;
}

/* Carousel-track: horizontaal scrollbaar. */
.vs-accessories__track {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 4px 2px 6px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.vs-accessories__track::-webkit-scrollbar {
    height: 6px;
}

.vs-accessories__track::-webkit-scrollbar-thumb {
    background: #cfd4e0;
    border-radius: 3px;
}

/* Tegel. */
.vs-accessories__tile {
    flex: 0 0 150px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    scroll-snap-align: start;
    text-align: center;
}

.vs-accessories__media {
    display: block !important;
    aspect-ratio: 1 / 1;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid var(--vs-acc-border) !important;
    border-radius: 8px !important;
}

.vs-accessories__img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.vs-accessories__name {
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: #1f2733 !important;
    text-decoration: none !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 34px;
}

.vs-accessories__name:hover {
    color: var(--vs-acc-accent) !important;
}

.vs-accessories__price {
    display: inline-flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 1px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--vs-acc-price) !important;
}

.vs-accessories__price sup {
    font-size: 0.62em !important;
    font-weight: 600 !important;
}

.vs-accessories__price .woocommerce-Price-amount {
    color: inherit !important;
}

.vs-accessories a.vs-accessories__add,
.vs-accessories__add {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 2px 0 0 !important;
    padding: 9px 12px !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    color: var(--vs-acc-accent) !important;
    background: #fff !important;
    border: 1px solid var(--vs-acc-accent) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

.vs-accessories__add:hover,
.vs-accessories__add.added,
.vs-accessories__add.loading {
    background: var(--vs-acc-accent) !important;
    color: #fff !important;
}

@media (max-width: 480px) {
    .vs-accessories {
        padding: 16px !important;
    }

    .vs-accessories__tile {
        flex: 0 0 132px !important;
    }
}

/* De carrousel loopt binnen het blok door tot de rechterrand (geen
   binnenmarge rechts): het volgende kaartje snijdt aan. */
.vs-accessories {
    padding-right: 0 !important;
}

.vs-accessories__track {
    padding-right: 0 !important;
}