.cmp-product-card:first-of-type {
    margin-left: 0 !important;
}

.pnl-scrollable-glide__arrow--disabled {
    opacity: 0.4;
}

/*
Sets the vertical layout of the grid display
Any component that includes the scroll component can set these variables in its clientlibs
param: --grid-layout-gap - the gap between grid items
param: --grid-column-count - the number of columns in the grid
param: --grid-item--min-width - the minimum width of a grid item
*/

.cmp-scroll-wrapper {
    --grid-layout-gap: var(--scroll-grid-layout-gap);
    --grid-column-count: var(--scroll-grid-column-count);
    --grid-item--min-width: var(--scroll-grid-item--min-width);

    --gap-count: calc(var(--grid-column-count) - 1);
    --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
    --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

    grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
}