@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

.wn-ls-wrap { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; position: relative; }

/* Nav */
.wn-ls-nav { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 16px; }
.wn-ls-arrow {
    width: 38px; height: 38px; border-radius: 50%;
    background: #fff; border: 1px solid rgba(0,0,0,0.1);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .15s, border-color .15s, transform .1s;
    flex-shrink: 0; padding: 0;
}
.wn-ls-arrow:hover { background: #2563EB; border-color: #2563EB; color: #fff; }
.wn-ls-arrow:hover svg { stroke: #fff; }
.wn-ls-arrow:active { transform: scale(.94); }
.wn-ls-arrow.disabled { opacity: .35; cursor: default; pointer-events: none; }
.wn-ls-arrow svg { stroke: #374151; transition: stroke .15s; display: block; }

/* Viewport */
.wn-ls-viewport { overflow: hidden; }
.wn-ls-track { display: flex; gap: 16px; transition: transform .38s cubic-bezier(.4,0,.2,1); will-change: transform; }

/* Card */
.wn-ls-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.07);
    transition: transform .2s cubic-bezier(.34,1.4,.64,1), box-shadow .2s ease;
    cursor: pointer;
}
.wn-ls-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.09); }

/* Image */
.wn-ls-img-wrap { position: relative; }
.wn-ls-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.wn-ls-img-placeholder {
    width: 100%; aspect-ratio: 16/10;
    background: #F0F2F8;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px;
}
.wn-ls-img-placeholder span { font-size: 12px; color: #1A2E6B; opacity: .45; font-weight: 500; }
.wn-ls-badge {
    position: absolute; bottom: 10px; left: 12px;
    background: #1A2E6B; color: #fff;
    font-size: 10px; font-weight: 700; letter-spacing: .08em;
    padding: 3px 10px; border-radius: 20px; text-transform: uppercase;
}

/* Body */
.wn-ls-body { padding: 16px 16px 18px; }
.wn-ls-top-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }

/* Pills */
.wn-ls-pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; letter-spacing: .04em; text-transform: uppercase; }
.p-seo     { background: #EEF2FF; color: #3730A3; }
.p-social  { background: #FFF7ED; color: #C2410C; }
.p-email   { background: #ECFDF5; color: #065F46; }
.p-ads     { background: #FDF2F8; color: #9D174D; }
.p-web     { background: #F0FDF4; color: #166534; }
.p-content { background: #FFF1F2; color: #9F1239; }

/* Stars */
.wn-ls-stars-wrap { display: flex; align-items: center; gap: 2px; }
.wn-ls-star { font-size: 11px; line-height: 1; color: #F59E0B; }
.wn-ls-star.e { color: #D1D5DB; }
.wn-ls-star.half { opacity: .5; }
.wn-ls-rating-num { font-size: 12px; font-weight: 600; color: #374151; margin-left: 3px; }

/* Text */
.wn-ls-title { font-size: 15px; font-weight: 600; color: #1D1D1F; line-height: 1.35; margin: 0 0 6px; letter-spacing: -.01em; }
.wn-ls-desc { font-size: 14px; color: #6B7280; line-height: 1.55; margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Meta */
.wn-ls-meta { display: flex; align-items: center; gap: 12px; font-size: 12px; color: #9CA3AF; margin-bottom: 14px; }
.wn-ls-meta-item { display: flex; align-items: center; gap: 3px; }

/* Footer */
.wn-ls-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wn-ls-price .wn-ls-from { font-size: 11px; color: #9CA3AF; display: block; line-height: 1; margin-bottom: 2px; }
.wn-ls-price strong { font-size: 16px; font-weight: 600; color: #1D1D1F; letter-spacing: -.02em; }
.wn-ls-btn {
    background: #2563EB; color: #fff;
    border: none; border-radius: 22px;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
    padding: 9px 16px; cursor: pointer; text-decoration: none;
    transition: background .15s, transform .1s; white-space: nowrap; display: inline-block;
}
.wn-ls-btn:hover { background: #1D4ED8; color: #fff; }
.wn-ls-btn:active { transform: scale(.97); }

/* Dots */
.wn-ls-dots { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 18px; }
.wn-ls-dot { width: 6px; height: 6px; border-radius: 50%; background: #D1D5DB; transition: all .2s; cursor: pointer; border: none; padding: 0; }
.wn-ls-dot.active { background: #2563EB; width: 20px; border-radius: 4px; }