/**
 * Product Gallery & Layout overrides
 * (apart van pages.css vanwege server-cache issues)
 */

/* Contact grid: 2/3 content, 1/3 sidebar */
@media (min-width: 992px) {
    .contact-grid {
        grid-template-columns: 2fr 1fr !important;
    }
}

/* Thumbnail scroll wrapper (vertical & horizontal) */
.product-thumbnails-scroll {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    position: relative;
}

.product-thumbnails-scroll.vertical {
    flex-direction: column;
    align-self: stretch;
    width: 64px;
}

.product-thumbnails-scroll.horizontal {
    flex-direction: row;
}

/* Chevron scroll buttons */
.thumb-scroll-btn {
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--color-white, #fff);
    border: 1px solid var(--color-gray-light, #ddd);
    border-radius: var(--radius-md, 6px);
    color: var(--color-gray, #888);
    cursor: pointer;
    padding: 4px;
    z-index: 2;
    transition: color 0.2s, border-color 0.2s;
    flex-shrink: 0;
}

.thumb-scroll-btn:hover {
    color: var(--color-primary, #4a7c59);
    border-color: var(--color-primary, #4a7c59);
}

.thumb-scroll-btn.visible {
    display: flex;
}

/* Horizontal chevrons */
.product-thumbnails-scroll.horizontal .thumb-scroll-btn {
    height: 60px;
}

/* Verticale thumbnails - scrollbar verbergen */
.product-thumbnails-vertical {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.product-thumbnails-vertical::-webkit-scrollbar {
    display: none;
}

/* Horizontale thumbnails - scrollbar verbergen */
.product-thumbnails {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.product-thumbnails::-webkit-scrollbar {
    display: none;
}