/* ==========================================================================
   Shortcode [scrollable_categories]
   Tegels en hover: zie assets/css/shop.css (categorie-tegels)
   ========================================================================== */

.scrolling-category-wrapper {
    position: relative;
    margin-bottom: 3rem;
}

.scrolling-category-row {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    gap: 2rem; /* Increased gap */
    list-style: none;
    margin: 0;
    padding: 0 0 2rem 0;
    -webkit-overflow-scrolling: touch;

    /* Hide scrollbar cross-browser */
    scrollbar-width: none; /* Firefox */
}
.scrolling-category-row::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

/* Alleen binnen de scroller: anders raakt dit ook de andere categorie-grids */
.scrolling-category-row .product-category {
    flex: 0 0 auto;
    margin: 0;
    scroll-snap-align: start;
    text-align: center;
}

/* Responsive widths for different devices */
@media (min-width: 1024px) {
    .scrolling-category-row .product-category { width: calc(100% / 4); }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .scrolling-category-row .product-category { width: calc(100% / 3); }
}
@media (max-width: 767px) {
    .scrolling-category-row .product-category { width: calc(100% / 2); }
}
@media (max-width: 480px) {
    .scrolling-category-row .product-category { width: 100%; }
}

/* Arrows with inline SVGs */
.scroll-arrow {
    position: absolute;
    bottom: 0;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border: none;
    cursor: pointer;
    z-index: 10;
    opacity: 1;
    /* box-shadow: 0 0 5px rgba(0,0,0,0.2);*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    transition: opacity 0.3s ease;
    border:1px solid var(--accent-2);
}

.scroll-arrow.left {
    left: 0;
    /*transform: translateY(100%);*/
    background-image: url('data:image/svg+xml;utf8,<svg fill="black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.293 16.293a1 1 0 010 1.414l-6-6a1 1 0 010-1.414l6-6a1 1 0 111.414 1.414L8.414 10l5.293 5.293a1 1 0 01-1.414 1.414z"/></svg>');
}

.scroll-arrow.right {
    left: 50px;
    /* right: 0;*/
    /*transform: translateY(100%);*/
    background-image: url('data:image/svg+xml;utf8,<svg fill="black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7.707 3.707a1 1 0 010-1.414l6 6a1 1 0 010 1.414l-6 6a1 1 0 11-1.414-1.414L11.586 10 6.293 4.707a1 1 0 011.414-1.414z"/></svg>');
}

.scroll-arrow[hidden] {
    display: block;          /* pijl blijft staan zodat de layout niet verspringt */
    opacity: .3;             /* maar is zichtbaar uitgeschakeld */
    pointer-events: none;
}

.scrolling-category-wrapper a{text-decoration:none}