.pl-strip {
max-width: var(--pagewidth);
margin: 0 auto;
position: relative;
}
.pl-strip__viewport {
position: relative;
}
.pl-strip__viewport::before,
.pl-strip__viewport::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 3em;
pointer-events: none;
z-index: 1;
opacity: 0;
transition: opacity 0.2s;
}
.pl-strip__viewport::before {
left: 0;
background: linear-gradient(to left, transparent, var(--blue-tint));
}
.pl-strip__viewport::after {
right: 0;
background: linear-gradient(to right, transparent, var(--blue-tint));
}
.pl-strip--more-left::before,
.pl-strip--more-right::after {
opacity: 1;
}
@media (hover: none) {
.pl-strip__viewport::before,
.pl-strip__viewport::after {
width: 2.5em;
}
}
#content .pl-strip__rail.productlist {
display: flex;
flex-wrap: nowrap;
gap: 1em;
overflow-x: auto;
overflow-y: hidden;
padding: 0 0 1.2em;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
#content .pl-strip__rail.productlist::-webkit-scrollbar {
display: none;
}
@media (hover: hover) {
#content .pl-strip__rail.productlist { cursor: grab; }
}
#content .pl-strip__rail.productlist.isdragging {
cursor: grabbing;
user-select: none;
scroll-behavior: auto;
}
#content .pl-strip__rail.productlist > * {
flex: 0 0 13em;
}
#content .pl-strip__rail.productlist:focus-visible {
outline: 2px solid var(--brightblue);
outline-offset: 2px;
}
.pl-strip__nav {
position: absolute;
inset: 0;
pointer-events: none;
}
.pl-strip__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
pointer-events: auto;
width: 3.9em;
height: 3.9em;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--arrow-disc);
border: 0;
border-radius: 50%;
cursor: pointer;
z-index: 2;
}
.pl-strip__arrow--prev {
left: 0.2em;
}
.pl-strip__arrow--next {
right: 0.2em;
}
.pl-strip__arrow:hover {
background: var(--arrow-disc-hover);
}
.pl-strip__arrow:focus-visible {
outline: 2px solid var(--link);
outline-offset: 2px;
}
.pl-strip__arrow[hidden] {
display: none;
}
.pl-strip__arrow svg {
width: 1.8em;
height: 1.8em;
fill: var(--white);
}
@media (hover: none) {
.pl-strip__nav {
display: none;
}
}