/* Loaded only by the homepage. */
.product-rail { --rail-columns: 1; --rail-gap: 16px; min-width: 0; scroll-margin-top: 100px; }
.product-rail-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--rail-columns) - 1) * var(--rail-gap)) / var(--rail-columns)); gap: var(--rail-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--gray-400) var(--gray-100); list-style: none; padding: 8px 0 16px; margin: 0; -webkit-overflow-scrolling: touch; }
.product-rail-item { min-width: 0; scroll-snap-align: start; }
.product-rail .product-card { height: 100%; }
.product-rail .product-image > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.product-rail .product-image img { width: 100%; height: 100%; object-fit: contain; }
.product-rail .product-card:focus-within .product-actions { opacity: 1; transform: none; }
.product-rail .product-title { min-height: 2.8em; overflow-wrap: anywhere; }
.product-rail .product-actions .btn-action:disabled { cursor: not-allowed; opacity: .45; }
@media (min-width: 480px) { .product-rail { --rail-columns: 2; } }
@media (min-width: 768px) { .product-rail { --rail-columns: 3; --rail-gap: 24px; } }
@media (min-width: 1200px) { .product-rail { --rail-columns: 4; } }
@media (hover: none), (pointer: coarse) {
    .product-rail .product-actions { opacity: 1; transform: none; }
    .product-rail .product-actions .btn-action { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .product-rail *, .home-hero * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Scoped to the search and homepage storefront rows. */
.product-rail.storefront-rail { --rail-columns: 5; --rail-gap: 18px; margin-bottom: 16px; }
@media(max-width:1100px) { .product-rail.storefront-rail { --rail-columns: 4; } }
@media(max-width:767px) { .product-rail.storefront-rail { --rail-columns: 2; --rail-gap: 12px; } }
/* Quiet page dots: no scrollbar, arrows or playback buttons. */
.product-rail-track{scrollbar-width:none;padding-bottom:8px}
.product-rail-track::-webkit-scrollbar{display:none;width:0;height:0}
.product-rail .product-rail-controls{justify-content:center;gap:2px;min-height:30px;margin:4px 0 8px;opacity:0;pointer-events:none;transition:opacity .18s ease;flex-wrap:wrap;display:flex;align-items:center}
.product-rail.rail-controls-visible .product-rail-controls,
.product-rail .product-rail-controls:has(:focus-visible){opacity:1;pointer-events:auto}
.product-rail-dot{appearance:none;width:30px;height:30px;padding:0;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;border-radius:50%}
.product-rail-dot:before{content:'';width:6px;height:6px;border-radius:20px;background:#c4ccda;transition:width .2s,background .2s,transform .2s}
.product-rail-dot[aria-current="true"]:before{width:22px;background:var(--primary,#ff5714)}
.product-rail-dot:hover:before{background:var(--primary,#ff5714);transform:scale(1.12)}
.product-rail-dot:focus-visible{outline:2px solid var(--primary,#ff5714);outline-offset:1px}
@media(pointer:coarse){.product-rail-dot{width:36px;height:36px}}
@media(prefers-reduced-motion:reduce){.product-rail-dot:before,.product-rail .product-rail-controls{transition:none}}
.product-rail .product-rail-controls[hidden]{display:none}