/**
 * WIZ v2: Product Rail — Layout CSS
 * Horizontal scrollable rail. Card atom styles live in their atom stylesheets.
 */

.wiz-rail {
    position: relative;
    width: 100%;
}

.wiz-rail__title {
    width: 100%;
}

.wiz-rail__title--hidden {
    display: none;
}

.wiz-rail__title-text {
    font-size: 16px;
    font-weight: 400;
}

.wiz-rail__wrapper {
    position: relative;
    transition: margin-left 0.3s ease-out, width 0.3s ease-out;
}

.wiz-rail__track {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    box-sizing: border-box;
}

.wiz-rail__track::-webkit-scrollbar { display: none; }

.wiz-rail__track .product-listing-card-wrapper {
    flex: 0 0 258px;
    width: 258px;
}

/* ============================================================
   Navigation buttons
   ============================================================ */
.wiz-rail__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: #f0f0f0;
    /* Hidden until JS decides visibility based on scroll position / overflow */
    visibility: hidden;
}

.wiz-rail__nav--prev { left: 0;  transform: translate(-50%, -50%); }
.wiz-rail__nav--next { right: 0; transform: translate(50%, -50%); }

.wiz-rail__nav.wiz-rail__nav--visible { visibility: visible; }

/* ============================================================
   "View All" card — sits at the end of the rail
   ============================================================ */
.wiz-rail__view-all {
    flex: 0 0 258px;
    width: 258px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border: 1px solid #e0e0e0;
    background: #fff;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    overflow: hidden;
}

.wiz-rail__view-all-media {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
}

.wiz-rail__view-all-icon { display: flex; align-items: center; justify-content: center; }

.wiz-rail__view-all-text {
    flex: 0 0 auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wiz-rail__view-all-title { font-size: 14px; font-weight: 600; }
.wiz-rail__view-all-cta   { font-size: 13px; font-weight: 500; text-decoration: underline; }

/* ============================================================
   Skeleton (recently viewed pre-load state)
   ============================================================ */
@keyframes wiz-rail-skeleton-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}

.wiz-rail__skeleton {
    flex: 0 0 258px;
    width: 258px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wiz-rail__skeleton-image {
    width: 100%;
    height: 258px;
    background: #f0f0f0;
    animation: wiz-rail-skeleton-pulse 1.5s ease-in-out infinite;
}

.wiz-rail__skeleton-line {
    height: 14px;
    background: #f0f0f0;
    animation: wiz-rail-skeleton-pulse 1.5s ease-in-out infinite;
}

.wiz-rail__skeleton-line--title    { width: 80%; }
.wiz-rail__skeleton-line--subtitle { width: 50%; }
.wiz-rail__skeleton-line--price    { width: 30%; }

/* iOS: keep wishlist tooltip visible when scrolled to edge */
@supports (-webkit-touch-callout: none) {
    .wiz-rail__wrapper:has(.wishlist-tooltip-container.active) .wiz-rail__track {
        overflow: visible !important;
    }
}