.product-rail{--rail-gap:var(--sp-4);position:relative;container-type:inline-size}.product-rail--wide{--rail-per-view:1.5;--rail-item-w:calc((100cqw - (var(--rail-per-view) - .5) * var(--rail-gap)) / var(--rail-per-view))}@media (min-width:768px){.product-rail--wide{--rail-per-view:3.3}}@media (min-width:1200px){.product-rail--wide{--rail-per-view:4.3}}.product-rail--compact{--rail-item-w:200px}@media (max-width:767px){.product-rail--compact{--rail-item-w:132px}}.product-rail__track{gap:var(--rail-gap);overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline:none;display:flex;overflow-x:auto}.product-rail__track::-webkit-scrollbar{display:none}.product-rail__track:focus-visible{outline:2px solid var(--text);outline-offset:4px;border-radius:var(--radius)}.product-rail__track>*{flex:0 0 var(--rail-item-w);scroll-snap-align:start;min-width:0}.product-rail--wide .product-rail__track>*{flex-basis:calc((100% - (var(--rail-per-view) - .5) * var(--rail-gap)) / var(--rail-per-view))}@media (max-width:767px){.product-rail--wide .product-rail__track{margin-inline:calc(-1 * var(--sp-5));padding-inline:var(--sp-5);scroll-padding-inline:var(--sp-5)}}.product-rail__arrow{top:calc(var(--rail-item-w) * 2 / 3);z-index:2;border-radius:var(--radius-full);border:1px solid var(--border);background:var(--surface);width:44px;height:44px;color:var(--text);box-shadow:var(--shadow-raised);cursor:pointer;touch-action:manipulation;justify-content:center;align-items:center;padding:0;transition:background-color .15s;display:flex;position:absolute;transform:translateY(-50%)}.product-rail__arrow[hidden]{display:none}@media (hover:hover){.product-rail__arrow:hover{background:var(--surface-sunken)}}.product-rail__arrow:focus-visible{outline:2px solid var(--text);outline-offset:2px}.product-rail__arrow--prev{left:var(--sp-2)}.product-rail__arrow--next{right:var(--sp-2)}@media (min-width:768px){.product-rail__arrow--prev{left:calc(-1 * var(--sp-4))}.product-rail__arrow--next{right:calc(-1 * var(--sp-4))}}@media (prefers-reduced-motion:reduce){.product-rail__arrow{transition:none}}
