/**
 * NestorLand Articles - Main Stylesheet
 * 
 * استایل‌های اصلی افزونه مقالات NestorLand
 */

/* ===== CSS Variables ===== */
:root {
    /* Colors */
    --nl-primary: #0073aa;
    --nl-primary-dark: #005a87;
    --nl-secondary: #828485;
    --nl-text: #2c3338;
    --nl-text-light: #64696e;
    --nl-bg: #f6f7f7;
    --nl-white: #ffffff;
    --nl-border: #dcdcde;
    /* Customizable surfaces */
    --nl-article-card-bg: var(--nl-white);
    --nl-success: #46b450;
    --nl-warning: #ffb900;
    --nl-danger: #d63638;
    --nl-info: #00a32a;
    
    /* Typography */
    --nl-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    --nl-font-mono: monospace;
    
    /* Spacing */
    --nl-spacing-xs: 4px;
    --nl-spacing-sm: 8px;
    --nl-spacing-md: 16px;
    --nl-spacing-lg: 24px;
    --nl-spacing-xl: 32px;
    --nl-spacing-xxl: 48px;
    
    /* Border Radius */
    --nl-radius-sm: 4px;
    --nl-radius-md: 8px;
    --nl-radius-lg: 12px;
    --nl-radius-xl: 16px;
    
    /* Shadows */
    --nl-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --nl-shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --nl-shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --nl-shadow-xl: 0 12px 36px rgba(0,0,0,0.15);
    
    /* Transitions */
    --nl-transition: all 0.3s ease;
}

/* ===== Reset ===== */
.nl-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--nl-spacing-md);
}

.nl-reset {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    box-sizing: border-box;
}

/* ===== Article Grid View ===== */
.nl-articles-grid {
    display: grid;
    grid-template-columns: repeat(var(--nl-columns, 3), 1fr);
    gap: var(--nl-spacing-lg);
    padding: var(--nl-spacing-lg) 0;
}

.nl-article-card {
    background: var(--nl-article-card-bg, var(--nl-white));
    border-radius: var(--nl-radius-lg);
    overflow: hidden;
    box-shadow: var(--nl-shadow-sm);
    transition: var(--nl-transition);
    position: relative;
    display: flex;
    flex-direction: column;
}

.nl-article-card:hover {
    box-shadow: var(--nl-shadow-lg);
    transform: translateY(-4px);
}

.nl-article-card:hover .nl-article-title a {
    color: var(--nl-primary);
}

/* Featured Image */
.nl-article-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/10;
}

.nl-article-image > a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.nl-article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.nl-article-card:hover .nl-article-image img {
    transform: scale(1.05);
}

.nl-article-category-badge {
    position: absolute;
    top: var(--nl-spacing-sm);
    right: var(--nl-spacing-sm);
    background: var(--nl-primary);
    color: var(--nl-white);
    padding: 4px 12px;
    border-radius: var(--nl-radius-sm);
    font-size: 12px;
    font-weight: 600;
    z-index: 1;
}

/* Image overlay (Grid/List cards) */
.nl-image-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to top, rgba(2, 6, 23, 0.55), rgba(2, 6, 23, 0.05));
    opacity: 0;
    transition: opacity 0.25s ease;
}

.nl-article-card:hover .nl-image-overlay {
    opacity: 1;
}

.nl-overlay-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--nl-text);
    font-size: 13px;
    font-weight: 800;
    box-shadow: var(--nl-shadow-md);
}

/* Article Content */
.nl-article-content {
    padding: var(--nl-spacing-md);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.nl-article-title {
    margin: 0 0 var(--nl-spacing-sm);
    font-size: 18px;
    line-height: 1.4;
    font-weight: 600;
    min-height: calc(1.4em * 2);
}

.nl-article-title a {
    color: var(--nl-text);
    text-decoration: none;
    transition: color 0.2s ease;
}

.nl-article-excerpt {
    color: var(--nl-text-light);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: var(--nl-spacing-md);
    flex: 1;
    min-height: calc(1.6em * 3);
}

.nl-article-excerpt p {
    margin: 0;
}

/* Article Meta */
.nl-article-meta {
    display: flex;
    align-items: center;
    gap: var(--nl-spacing-md);
    padding-top: var(--nl-spacing-sm);
    border-top: 1px solid var(--nl-border);
    flex-wrap: wrap;
}

.nl-meta-item {
    display: flex;
    align-items: center;
    gap: var(--nl-spacing-xs);
    color: var(--nl-text-light);
    font-size: 13px;
}

.nl-meta-item i {
    font-size: 12px;
    width: 16px;
    text-align: center;
}

/* Read more (CTA) */
.nl-read-more {
    margin-top: var(--nl-spacing-md);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(0, 115, 170, 0.18);
    background: rgba(0, 115, 170, 0.06);
    color: var(--nl-primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    transition: var(--nl-transition);
    width: fit-content;
}

.nl-read-more:hover {
    background: var(--nl-primary);
    color: var(--nl-white);
    border-color: var(--nl-primary);
    transform: translateY(-1px);
}

.nl-read-more i {
    transition: transform 0.2s ease;
}

.nl-read-more:hover i {
    transform: translateX(-2px);
}

/* Author Avatar */
.nl-author-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

/* Like Button */
.nl-like-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid var(--nl-border);
    padding: 6px 12px;
    border-radius: var(--nl-radius-sm);
    cursor: pointer;
    color: var(--nl-text-light);
    font-size: 13px;
    transition: var(--nl-transition);
}

.nl-like-btn:hover {
    border-color: var(--nl-danger);
    color: var(--nl-danger);
}

.nl-like-btn.nl-liked {
    border-color: var(--nl-danger);
    color: var(--nl-danger);
    background: rgba(214, 54, 56, 0.05);
}

.nl-like-count {
    font-weight: 600;
}

.nl-comment-form-group {
    margin-bottom: 24px;
    width: 100%;
    box-sizing: border-box;
}
.nl-comment-form-group input,
.nl-comment-form-group textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid var(--nl-border);
    border-radius: var(--nl-radius-md);
    background: var(--nl-white);
    font-family: inherit;
    font-size: 14px;
    color: var(--nl-text);
    transition: var(--nl-transition);
}
.nl-comment-form-group input:focus,
.nl-comment-form-group textarea:focus {
    border-color: var(--nl-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
}
.nl-input-wrapper {
    position: relative;
}
.nl-input-wrapper i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nl-text-light);
}
.nl-comment-form-group .nl-input-wrapper input {
    padding-right: 12px;
}
.nl-comment-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--nl-text);
}
.nl-comment-form-group label .required {
    color: var(--nl-danger);
}
.nl-comment-form {
    background: var(--nl-white);
    padding: 24px;
    border-radius: var(--nl-radius-lg);
    box-shadow: var(--nl-shadow-sm);
    margin-top: 24px;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
}
.nl-comment-form .comment-reply-title {
    font-size: 20px;
    margin-bottom: 24px;
    font-weight: 700;
}

/* Share Button */
.nl-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--nl-bg);
    border: none;
    padding: 6px 12px;
    border-radius: var(--nl-radius-sm);
    cursor: pointer;
    color: var(--nl-text-light);
    font-size: 13px;
    transition: var(--nl-transition);
}

.nl-share-btn:hover {
    background: var(--nl-primary);
    color: var(--nl-white);
}

/* Share Dropdown */
.nl-share-dropdown {
    position: relative;
    display: inline-block;
}

.nl-share-menu {
    display: none;
    position: absolute;
    bottom: 100%;
    right: 0;
    background: var(--nl-white);
    border-radius: var(--nl-radius-md);
    box-shadow: var(--nl-shadow-lg);
    padding: 8px;
    min-width: 200px;
    z-index: 100;
}

.nl-share-dropdown:hover .nl-share-menu {
    display: block;
}

.nl-share-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: var(--nl-text);
    text-decoration: none;
    border-radius: var(--nl-radius-sm);
    transition: background 0.2s ease;
}

.nl-share-menu a:hover {
    background: var(--nl-bg);
}

.nl-share-menu a i {
    width: 20px;
    text-align: center;
}

.nl-share-twitter { color: #1da1f2; }
.nl-share-facebook { color: #4267b2; }
.nl-share-linkedin { color: #0077b5; }
.nl-share-whatsapp { color: #25d366; }
.nl-share-copy { color: var(--nl-text-light); }

/* ===== Article List View ===== */
.nl-articles-list {
    display: flex;
    flex-direction: column;
    gap: var(--nl-spacing-md);
    padding: var(--nl-spacing-lg) 0;
}

.nl-article-list-item {
    display: flex;
    gap: var(--nl-spacing-lg);
    background: var(--nl-white);
    border-radius: var(--nl-radius-lg);
    overflow: hidden;
    box-shadow: var(--nl-shadow-sm);
    transition: var(--nl-transition);
}

.nl-article-list-item:hover {
    box-shadow: var(--nl-shadow-md);
}

.nl-article-list-item .nl-article-image {
    width: 300px;
    flex-shrink: 0;
    aspect-ratio: auto;
}

.nl-article-list-item .nl-article-content {
    padding: var(--nl-spacing-lg);
}

.nl-article-list-item .nl-article-title {
    font-size: 20px;
}

/* ===== Masonry View ===== */
.nl-articles-masonry {
    column-count: 3;
    column-gap: var(--nl-spacing-lg);
    padding: var(--nl-spacing-lg) 0;
}

.nl-articles-masonry .nl-article-card {
    break-inside: avoid;
    margin-bottom: var(--nl-spacing-lg);
    display: inline-block;
    width: 100%;
}

/* ===== Minimal Style ===== */
.nl-articles-minimal {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: var(--nl-spacing-lg) 0;
}

.nl-minimal-item {
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: var(--nl-radius-lg);
    background: var(--nl-white);
    box-shadow: var(--nl-shadow-sm);
    padding: 14px 16px;
    transition: var(--nl-transition);
}

.nl-minimal-item:hover {
    box-shadow: var(--nl-shadow-md);
    transform: translateY(-1px);
}

.nl-minimal-content .nl-article-title {
    font-size: 16px;
    margin-bottom: 8px;
}

.nl-minimal-content .nl-article-excerpt {
    margin-top: 8px;
    margin-bottom: 0;
}

/* ===== Featured Style ===== */
.nl-articles-featured {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--nl-spacing-lg);
    padding: var(--nl-spacing-lg) 0;
}

.nl-featured-item {
    position: relative;
}

.nl-main-featured {
    grid-column: span 2;
}

.nl-featured-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/10;
}

.nl-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.nl-featured-item:hover .nl-featured-image img {
    transform: scale(1.05);
}

/* ===== Carousel Style (basic) ===== */
.nl-articles-carousel {
    position: relative;
    padding: var(--nl-spacing-lg) 0;
}

.nl-carousel-wrapper {
    position: relative;
}

.nl-carousel-track {
    display: flex;
    gap: var(--nl-spacing-md);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
}

.nl-carousel-item {
    scroll-snap-align: start;
    min-width: min(360px, 86vw);
    flex: 0 0 auto;
}

.nl-carousel-track::-webkit-scrollbar {
    height: 8px;
}
.nl-carousel-track::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.12);
    border-radius: 999px;
}

.nl-carousel-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    transform: translateY(-50%);
}

.nl-carousel-nav button {
    pointer-events: auto;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(255,255,255,0.92);
    box-shadow: var(--nl-shadow-sm);
    cursor: pointer;
    color: var(--nl-text);
    transition: var(--nl-transition);
}

.nl-carousel-nav button:hover {
    background: var(--nl-primary);
    color: var(--nl-white);
    border-color: var(--nl-primary);
}

.nl-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.nl-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(0,0,0,0.18);
    border: 0;
    cursor: pointer;
}

.nl-carousel-dot.nl-active {
    width: 18px;
    background: var(--nl-primary);
}

/* ===== Single Article Page ===== */
.nl-single-article {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--nl-spacing-xl) 0;
}

.nl-single-article-header {
    text-align: center;
    margin-bottom: var(--nl-spacing-xl);
}

.nl-single-article-title {
    font-size: 36px;
    line-height: 1.3;
    margin-bottom: var(--nl-spacing-md);
    font-weight: 700;
}

.nl-single-article-featured {
    margin-bottom: var(--nl-spacing-xl);
    border-radius: var(--nl-radius-lg);
    overflow: hidden;
}

.nl-single-article-featured img {
    width: 100%;
    height: auto;
}

/* ===== Categories shortcode/widget ===== */
.nl-categories-widget {
    padding: var(--nl-spacing-md) 0;
}

.nl-categories-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nl-category-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--nl-radius-md);
    border: 1px solid rgba(0,0,0,0.06);
    background: var(--nl-white);
    text-decoration: none;
    color: var(--nl-text);
    transition: var(--nl-transition);
}

.nl-category-item a:hover {
    border-color: rgba(0, 115, 170, 0.25);
    background: rgba(0, 115, 170, 0.06);
}

.nl-category-count {
    min-width: 34px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--nl-bg);
    color: var(--nl-text-light);
    font-size: 12px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ===== Related articles (template-helpers.php markup) ===== */
.nl-related-grid {
    display: grid;
    grid-template-columns: repeat(var(--nl-columns, 3), minmax(0, 1fr));
    gap: var(--nl-spacing-lg);
}

.nl-related-card {
    background: var(--nl-article-card-bg, var(--nl-white));
    border: 1px solid rgba(0,0,0,0.03);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.04);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nl-related-card:hover {
    box-shadow: 0 20px 40px rgba(2, 6, 23, 0.08);
    transform: translateY(-4px);
    border-color: rgba(0,0,0,0.06);
}

.nl-related-image {
    display: block;
    overflow: hidden;
}

.nl-related-image img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16/10;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.nl-related-card:hover .nl-related-image img {
    transform: scale(1.04);
}

.nl-related-content {
    padding: 14px;
}

.nl-related-category a {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 115, 170, 0.06);
    border: 1px solid rgba(0, 115, 170, 0.14);
    color: var(--nl-primary);
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
}

.nl-related-title {
    margin: 10px 0;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.6;
}

.nl-related-title a,
.nl-article-title a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-clamp: 2;
    -webkit-line-clamp: 2;
}

.nl-article-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-clamp: 3;
    -webkit-line-clamp: 3;
}

.nl-related-title a {
    color: var(--nl-text);
    text-decoration: none;
}

.nl-related-title a:hover {
    color: var(--nl-primary);
}

.nl-related-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--nl-text-light);
}

.nl-related-meta i {
    margin-left: 6px;
}

/* ===== Author card (template-helpers.php markup) ===== */
.nl-author-card {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 16px;
    border-radius: var(--nl-radius-xl);
    background: var(--nl-white);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: var(--nl-shadow-sm);
}

.nl-author-card-avatar img,
.nl-author-card-avatar .avatar {
    width: 88px;
    height: 88px;
    border-radius: 18px;
    object-fit: cover;
}

.nl-author-card-name {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 900;
}

.nl-author-card-bio {
    margin: 0;
    color: var(--nl-text-light);
    line-height: 1.9;
    font-size: 13px;
}

.nl-author-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    text-decoration: none;
    font-weight: 800;
    font-size: 13px;
    color: var(--nl-primary);
}

.nl-author-card-stats {
    margin-top: 8px;
    color: var(--nl-text-light);
    font-size: 12px;
}

@media (max-width: 900px) {
    .nl-articles-featured {
        grid-template-columns: 1fr;
    }
    .nl-main-featured {
        grid-column: auto;
    }
    .nl-related-grid {
        grid-template-columns: 1fr;
    }
    .nl-author-card {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .nl-author-card-avatar {
        margin: 0 auto;
    }
}

.nl-single-article-content {
    font-size: 18px;
    line-height: 1.8;
    color: var(--nl-text);
}

.nl-single-article-content h2 {
    font-size: 28px;
    margin: var(--nl-spacing-xl) 0 var(--nl-spacing-md);
}

.nl-single-article-content h3 {
    font-size: 22px;
    margin: var(--nl-spacing-lg) 0 var(--nl-spacing-sm);
}

.nl-single-article-content p {
    margin-bottom: var(--nl-spacing-md);
}

.nl-single-article-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--nl-radius-md);
    margin: var(--nl-spacing-md) 0;
}

.nl-single-article-content blockquote {
    border-right: 4px solid var(--nl-primary);
    padding: var(--nl-spacing-md) var(--nl-spacing-lg);
    margin: var(--nl-spacing-lg) 0;
    background: var(--nl-bg);
    border-radius: 0 var(--nl-radius-md) var(--nl-radius-md) 0;
    font-style: italic;
    color: var(--nl-text-light);
}

.nl-single-article-content ul,
.nl-single-article-content ol {
    margin: var(--nl-spacing-md) 0;
    padding-left: var(--nl-spacing-xl);
}

.nl-single-article-content li {
    margin-bottom: var(--nl-spacing-sm);
}

.nl-single-article-content pre {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: var(--nl-spacing-md);
    border-radius: var(--nl-radius-md);
    overflow-x: auto;
    margin: var(--nl-spacing-md) 0;
}

.nl-single-article-content code {
    background: var(--nl-bg);
    padding: 2px 6px;
    border-radius: var(--nl-radius-sm);
    font-family: var(--nl-font-mono);
    font-size: 14px;
}

.nl-single-article-content pre code {
    background: none;
    padding: 0;
}

/* Article Footer */
.nl-article-footer {
    margin-top: var(--nl-spacing-xl);
    padding-top: var(--nl-spacing-lg);
    border-top: 2px solid var(--nl-border);
}

.nl-article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nl-spacing-sm);
    margin-bottom: var(--nl-spacing-lg);
}

.nl-article-tag {
    display: inline-block;
    background: var(--nl-bg);
    color: var(--nl-text-light);
    padding: 4px 12px;
    border-radius: var(--nl-radius-sm);
    text-decoration: none;
    font-size: 13px;
    transition: var(--nl-transition);
}

.nl-article-tag:hover {
    background: var(--nl-primary);
    color: var(--nl-white);
}

/* Article Sharing */
.nl-article-sharing {
    display: flex;
    align-items: center;
    gap: var(--nl-spacing-md);
    padding: var(--nl-spacing-md) 0;
}

.nl-article-sharing-title {
    font-weight: 600;
    color: var(--nl-text);
}

.nl-share-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--nl-white);
    text-decoration: none;
    transition: var(--nl-transition);
}

.nl-share-icon:hover {
    transform: scale(1.1);
}

.nl-share-twitter { background: #1da1f2; }
.nl-share-facebook { background: #4267b2; }
.nl-share-linkedin { background: #0077b5; }
.nl-share-whatsapp { background: #25d366; }
.nl-share-telegram { background: #0088cc; }
.nl-share-email { background: var(--nl-text-light); }
.nl-share-copy-link { background: var(--nl-secondary); }

/* Author Box */
.nl-author-box {
    display: flex;
    gap: var(--nl-spacing-lg);
    padding: var(--nl-spacing-xl);
    background: var(--nl-white);
    border-radius: var(--nl-radius-lg);
    box-shadow: var(--nl-shadow-sm);
    margin: var(--nl-spacing-xl) 0;
}

.nl-author-box-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.nl-author-box-info h3 {
    margin: 0 0 var(--nl-spacing-sm);
    font-size: 20px;
}

.nl-author-box-bio {
    color: var(--nl-text-light);
    line-height: 1.6;
    margin: 0;
}

.nl-author-box-posts {
    display: inline-block;
    margin-top: var(--nl-spacing-sm);
    color: var(--nl-primary);
    text-decoration: none;
    font-weight: 600;
}

/* Related Articles */
.nl-related-articles {
    margin: var(--nl-spacing-xl) 0;
}

.nl-related-articles h2 {
    font-size: 24px;
    margin-bottom: var(--nl-spacing-lg);
    padding-bottom: var(--nl-spacing-sm);
    border-bottom: 2px solid var(--nl-primary);
}

.nl-related-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--nl-spacing-lg);
}

.nl-related-thumb {
    aspect-ratio: 16/10;
    object-fit: cover;
    width: 100%;
    border-radius: var(--nl-radius-md) var(--nl-radius-md) 0 0;
}

/* Breadcrumb */
.nl-breadcrumb {
    padding: var(--nl-spacing-md) 0;
    font-size: 14px;
    color: var(--nl-text-light);
}

.nl-breadcrumb-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.nl-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1.6;
    color: var(--nl-text-light);
}

.nl-breadcrumb-item + .nl-breadcrumb-item:before {
    content: "›";
    opacity: 0.55;
    margin-left: 2px;
    margin-right: 2px;
}

.nl-breadcrumb-item a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0f172a;
    text-decoration: none;
    font-weight: 800;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(2, 6, 23, 0.03);
    border: 1px solid rgba(0,0,0,0.06);
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.nl-breadcrumb-item a:hover {
    border-color: rgba(16, 185, 129, 0.25);
    background: rgba(16, 185, 129, 0.06);
    color: var(--nl-primary);
}

.nl-breadcrumb-current {
    font-weight: 900;
    color: #0f172a;
}

.nl-breadcrumb a {
    color: var(--nl-primary);
    text-decoration: none;
}

.nl-breadcrumb-separator {
    margin: 0 var(--nl-spacing-xs);
}

/* Reading Progress Bar */
/* Reading Progress (new):
   - Desktop: vertical progress under floatbar buttons
   - Mobile: horizontal progress under the bottom action bar */
.nl-reading-progress {
    pointer-events: none;
}

.nl-reading-progress--floatbar {
    width: 6px;
    height: 140px;
    border-radius: 999px;
    background: rgba(2, 6, 23, 0.10);
    overflow: hidden;
    position: relative;
    margin-top: 10px;
}

.nl-reading-progress--floatbar .nl-reading-progress-bar {
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 0%;
    background: linear-gradient(180deg, var(--nl-primary), var(--nl-primary-dark));
    transition: height 0.12s linear;
}

.nl-reading-progress--mobile {
    width: 100%;
    height: 3px;
    background: rgba(2, 6, 23, 0.10);
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.nl-reading-progress--mobile .nl-reading-progress-bar {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--nl-primary), var(--nl-primary-dark));
    transition: width 0.12s linear;
}

/* Back to Top */
.nl-back-to-top {
    position: fixed;
    bottom: 110px;
    right: 45px;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--nl-text, #0f172a);
    border: 1px solid rgba(0, 0, 0, 0.08);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    z-index: 9999;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nl-back-to-top.nl-visible {
    display: flex;
}

.nl-back-to-top:hover {
    transform: translateY(-5px);
    background: var(--nl-primary, #10b981);
    color: #fff;
    border-color: var(--nl-primary, #10b981);
    box-shadow: 0 15px 30px rgba(16, 185, 129, 0.25);
}

@media (max-width: 768px) {
    .nl-back-to-top {
        bottom: 85px; /* Adjust for mobile where chat widgets are usually smaller */
        right: 16px;
        width: 40px;
        height: 40px;
        font-size: 16px;
        border-radius: 12px;
    }
}

/* ===== Admin Styles ===== */
.nl-admin-page {
    padding: 20px;
}

.nl-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.nl-card {
    background: var(--nl-white);
    border-radius: var(--nl-radius-lg);
    box-shadow: var(--nl-shadow-sm);
    overflow: hidden;
}

.nl-card-header {
    padding: var(--nl-spacing-md) var(--nl-spacing-lg);
    background: var(--nl-bg);
    border-bottom: 1px solid var(--nl-border);
    display: flex;
    align-items: center;
    gap: var(--nl-spacing-sm);
}

.nl-card-header i {
    color: var(--nl-primary);
    font-size: 20px;
}

.nl-card-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.nl-card-body {
    padding: var(--nl-spacing-lg);
}

.nl-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--nl-spacing-md);
}

.nl-stat-item {
    text-align: center;
    padding: var(--nl-spacing-md);
    background: var(--nl-bg);
    border-radius: var(--nl-radius-md);
}

.nl-stat-number {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: var(--nl-primary);
}

.nl-stat-label {
    font-size: 13px;
    color: var(--nl-text-light);
}

.nl-shortcode-item {
    margin-bottom: var(--nl-spacing-md);
    padding: var(--nl-spacing-sm);
    background: var(--nl-bg);
    border-radius: var(--nl-radius-sm);
}

.nl-shortcode-item code {
    display: block;
    background: var(--nl-white);
    padding: var(--nl-spacing-sm);
    border-radius: var(--nl-radius-sm);
    font-size: 13px;
    word-break: break-all;
    margin-bottom: var(--nl-spacing-xs);
}

.nl-shortcode-item p {
    margin: 0 0 var(--nl-spacing-xs);
    font-size: 13px;
    color: var(--nl-text-light);
}

.nl-docs-list {
    list-style: none;
    padding: 0;
}

.nl-docs-list li {
    margin-bottom: var(--nl-spacing-sm);
}

.nl-docs-list a {
    display: flex;
    align-items: center;
    gap: var(--nl-spacing-sm);
    padding: var(--nl-spacing-sm) var(--nl-spacing-md);
    background: var(--nl-bg);
    border-radius: var(--nl-radius-sm);
    color: var(--nl-text);
    text-decoration: none;
    transition: var(--nl-transition);
}

.nl-docs-list a:hover {
    background: var(--nl-primary);
    color: var(--nl-white);
}

/* ===== Loading Spinner ===== */
.nl-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--nl-border);
    border-top-color: var(--nl-primary);
    border-radius: 50%;
    animation: nl-spin 0.6s linear infinite;
}

@keyframes nl-spin {
    to { transform: rotate(360deg); }
}

/* ===== Animations ===== */
.nl-fade-in {
    animation: nl-fade-in 0.3s ease;
}

@keyframes nl-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.nl-slide-up {
    animation: nl-slide-up 0.4s ease;
}

@keyframes nl-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Tooltip ===== */
.nl-tooltip {
    position: relative;
}

.nl-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--nl-text);
    color: var(--nl-white);
    padding: 4px 10px;
    border-radius: var(--nl-radius-sm);
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.nl-tooltip:hover::after {
    opacity: 1;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .nl-articles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .nl-articles-masonry {
        column-count: 2;
    }
    
    .nl-related-articles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .nl-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .nl-articles-grid {
        grid-template-columns: 1fr;
    }
    
    .nl-articles-masonry {
        column-count: 1;
    }
    
    .nl-article-list-item {
        flex-direction: column;
    }
    
    .nl-article-list-item .nl-article-image {
        width: 100%;
    }
    
    .nl-article-meta {
        gap: var(--nl-spacing-sm);
    }
    
    .nl-single-article-title {
        font-size: 28px;
    }
    
    .nl-author-box {
        flex-direction: column;
        text-align: center;
    }
    
    .nl-related-articles-grid {
        grid-template-columns: 1fr;
    }
    
    .nl-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Single Post Template (Modern / Zoomit-ish) ===== */
.nl-single-root {
    direction: rtl;
    background: #f3f4f6;
    color: #111827;
    font-family: Vazirmatn, var(--nl-font-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* overflow-x باعث می‌شد sticky در بعضی قالب‌ها درست کار نکند */
    overflow-x: visible;
}

/* Digix/Mobix: let theme backgrounds shine (avoid double background blocks) */
body.nl-theme-digix-mobix .nl-single-root {
    background: transparent;
}

/* Reset/override inside our single root to prevent theme styles from leaking */
body.nl-articles-single-template .nl-single-root,
body.nl-articles-single-template .nl-single-root * {
    box-sizing: border-box;
}

/**
 * Block Themes:
 * بعضی قالب‌ها روی .wp-site-blocks padding/margin بالا می‌دهند.
 * اگر هدر/فوتر از سمت قالب/بیلدر لود نشود، این padding تبدیل به فضای خالی بزرگ می‌شود.
 * این override فقط در صفحه تک‌مقاله افزونه فعال است.
 */
body.nl-articles-single-template .wp-site-blocks {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.nl-articles-single-template .nl-single-root a {
    color: inherit;
}

body.nl-articles-single-template .nl-single-root img {
    max-width: 100%;
    height: auto;
}

/* Digix/Mobix: keep the theme's single wrapper looking clean on desktop too */
body.nl-articles-single-template .site-single {
    -webkit-box-shadow: 0px 5px 10px 5px rgba(0, 0, 0, .031372549);
    -moz-box-shadow: 0px 5px 10px 5px rgba(0,0,0,.031372549);
    -o-box-shadow: 0px 5px 10px 5px rgba(0,0,0,.031372549);
    box-shadow: 0px 5px 10px 5px rgba(0, 0, 0, .031372549);
    background-color: #fff;
    margin-bottom: 40px;
    padding: 0px;
    display: block;
}

/**
 * Digix/Mobix:
 * این قالب‌ها معمولاً المنت‌های شناور/اجتماعی دارند که روی UI تک‌مقاله می‌افتد و صفحه را شلوغ می‌کند.
 * ما فقط در صفحه تک‌مقاله افزونه، این موارد را مخفی می‌کنیم تا UI تمیز بماند.
 */
body.nl-articles-single-template .modern-social,
body.nl-articles-single-template .modern-social * {
    display: none !important;
}

/* Topbar (Zoomit-ish) */
.nl-zoomit-topbar {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    width: 100%;
    box-sizing: border-box;
}

.nl-zoomit-topbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px var(--nl-spacing-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    box-sizing: border-box;
}

.nl-zoomit-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.nl-zoomit-brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: #0f172a;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 0.5px;
}

.nl-zoomit-brand-name {
    font-weight: 900;
    font-size: 14px;
    color: #0f172a;
    white-space: nowrap;
}

.nl-zoomit-topbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.nl-zoomit-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.08);
    background: #fff;
    text-decoration: none;
    font-weight: 800;
    font-size: 13px;
    color: #0f172a;
}

/* When used on <button> */
button.nl-zoomit-back {
    cursor: pointer;
}

.nl-zoomit-back:hover {
    border-color: rgba(16, 185, 129, 0.25);
    background: rgba(16, 185, 129, 0.06);
    color: var(--nl-primary);
}

/* Article Topbar (categories dropdown + logo) */
.nl-article-topbar {
    direction: rtl;
}

.nl-article-topbar-logo {
    height: 34px;
    width: auto;
    display: block;
}

.nl-article-topbar .custom-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.nl-article-topbar .custom-logo {
    height: 34px;
    width: auto;
    display: block;
}

.nl-zoomit-cats-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 18px 50px rgba(2, 6, 23, 0.12);
}

.nl-zoomit-cats-list {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px var(--nl-spacing-md);
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.nl-zoomit-cats-list li {
    margin: 0;
}

.nl-zoomit-cats-list a {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.08);
    background: #fff;
    text-decoration: none;
    font-weight: 800;
    font-size: 13px;
    color: #0f172a;
}

.nl-zoomit-cats-list a:hover {
    border-color: rgba(16, 185, 129, 0.25);
    background: rgba(16, 185, 129, 0.06);
    color: var(--nl-primary);
}

.nl-zoomit-iconbtn {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.08);
    background: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0f172a;
}

.nl-zoomit-iconbtn:hover {
    border-color: rgba(16, 185, 129, 0.25);
    background: rgba(16, 185, 129, 0.06);
    color: var(--nl-primary);
}

.nl-single-container {
    /* رنگ‌بندی مشابه طرح ارسالی (سبز) فقط در تک‌مقاله */
    --nl-primary: #10b981;
    --nl-primary-dark: #059669;
    max-width: 100%;
    margin: 0 auto;
    padding: clamp(16px, 2vw, 28px);
}

.nl-single-article {
    background: var(--nl-white);
    border-radius: var(--nl-radius-xl);
    box-shadow: var(--nl-shadow-sm);
    padding: clamp(18px, 2.2vw, 28px);
    max-width: 100%;
    margin: 0;
}

.nl-single-header {
    margin-bottom: var(--nl-spacing-lg);
}

.nl-single-main {
    padding-top: 18px;
}

.nl-single-header {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.nl-single-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.nl-single-category-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.10);
    color: var(--nl-primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid rgba(16, 185, 129, 0.18);
}

.nl-single-category-tag:hover {
    background: rgba(0, 115, 170, 0.14);
}

.nl-single-title {
    margin: 0 0 14px;
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.35;
    font-weight: 900;
    color: var(--nl-text);
}

.nl-single-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px 0 0;
    border-top: 1px solid var(--nl-border);
}

.nl-single-meta-right,
.nl-single-meta-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.nl-share-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.08);
    background: #fff;
    text-decoration: none;
    font-weight: 900;
    font-size: 13px;
    color: #0f172a;
    transition: var(--nl-transition);
}

.nl-share-toggle:hover {
    border-color: rgba(16, 185, 129, 0.25);
    background: rgba(16, 185, 129, 0.06);
    color: var(--nl-primary);
}

.nl-single-author {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 16px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.18);
}

.nl-single-author img {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    border: 2px solid var(--nl-primary);
}

.nl-single-author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.2;
}

.nl-single-author-name {
    font-weight: 900;
    color: var(--nl-text);
    font-size: 13px;
}

.nl-single-author-updated {
    font-size: 11px;
    color: var(--nl-text-light);
}

.nl-single-meta :where(.nl-single-date, .nl-single-read-time, .nl-single-view-count) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--nl-text-light);
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(2, 6, 23, 0.03);
    border: 1px solid rgba(0,0,0,0.06);
}

.nl-single-featured {
    margin: var(--nl-spacing-lg) 0;
    border-radius: var(--nl-radius-xl);
    overflow: hidden;
    box-shadow: var(--nl-shadow-sm);
}

/* Hero grid: ads beside featured image (Zoomit-like) */
.nl-hero-grid {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}

.nl-hero-grid--no-ads {
    grid-template-columns: 1fr;
}

.nl-hero-grid--no-ads .nl-hero-ads {
    display: none;
}

.nl-hero-grid--no-ads .nl-single-hero {
    /* وقتی تبلیغی نیست، تصویر تمام‌عرض نشود و وسط، جذاب‌تر قرار بگیرد */
    max-width: clamp(520px, 60vw, 920px);
    margin-inline: auto;
}

.nl-hero-ads {
    display: grid;
    grid-auto-rows: minmax(0, auto);
    gap: 12px;
    align-content: start;
}

.nl-ad-slot--hero {
    margin-top: 0;
    padding: 0;
}

.nl-ad-slot--hero :where(img, iframe, ins, script, div) {
    max-width: 100%;
}

.nl-ad-slot--hero iframe {
    width: 100% !important;
}

/* Hero image first, then information card */
.nl-single-hero {
    margin-top: 0;
}

.nl-single-info-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 24px;
    box-shadow: 0 14px 40px rgba(2, 6, 23, 0.08);
    padding: 18px 18px 8px;
    margin: -26px auto 18px;
    position: relative;
    z-index: 2;
}

.nl-single-info-card .nl-single-header {
    margin-bottom: 0;
    border-bottom: 0;
    padding-bottom: 0;
}

.nl-image-caption {
    padding: 10px 12px;
    font-size: 12px;
    color: var(--nl-text-light);
    background: rgba(2, 6, 23, 0.02);
    border-top: 1px solid rgba(0,0,0,0.06);
}

.nl-single-featured-img {
    width: 100%;
    /* در دسکتاپ کمی جمع‌وجورتر تا خیلی بزرگ نشود */
    height: clamp(220px, 24vw, 380px);
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.nl-single-hero {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 900px) {
    .nl-single-featured-img {
        height: clamp(220px, 50vw, 360px);
    }
}

.nl-single-shell {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.nl-single-floatbar {
    position: relative;
    height: 100%;
    align-self: stretch;
}

.nl-floatbar-inner {
    position: sticky;
    top: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
}

.nl-floatbar-btn {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #94a3b8; /* slate-400 */
    position: relative;
    transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.nl-floatbar-btn:hover {
    transform: translateY(-2px);
    color: var(--nl-primary);
    border-color: rgba(16, 185, 129, 0.25);
    background: rgba(16, 185, 129, 0.06);
}

.nl-floatbar-count {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 34px;
    height: 18px;
    padding: 0 8px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    font-size: 10px;
    font-weight: 900;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nl-floatbar-btn.nl-like-btn:hover {
    color: #f43f5e; /* rose-500 */
    background: rgba(244, 63, 94, 0.06);
    border-color: rgba(244, 63, 94, 0.22);
}

.nl-floatbar-btn.nl-like-btn:hover .nl-floatbar-count {
    color: #f43f5e;
}

.nl-article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 22px;
    align-items: start;
    max-width: 1400px;
    margin: 0 auto;
}

.nl-single-sidebar {
    position: sticky;
    top: 110px;
}

.nl-single-content {
    min-width: 0;
}

/* Better anchors for TOC */
.nl-single-content :where(h2, h3) {
    scroll-margin-top: 120px;
}

/* Typography (Zoomit-ish) */
.nl-single-content :where(p) {
    margin: 0 0 14px;
    line-height: var(--nl-single-line-height, 2.05);
    font-size: var(--nl-single-font-size, 18px);
    color: #0f172a;
}

.nl-single-content :where(a) {
    color: var(--nl-primary);
    text-decoration: none;
    font-weight: 700;
}

.nl-single-content :where(a:hover) {
    text-decoration: underline;
}

.nl-single-content :where(ul, ol) {
    margin: 0 0 14px;
    padding-right: 22px;
    padding-left: 0;
    line-height: var(--nl-single-line-height, 2);
    font-size: var(--nl-single-font-size, 18px);
    color: #0f172a;
}

.nl-single-content h2 {
    margin-top: 30px;
    font-size: 24px;
}

.nl-single-content h3 {
    margin-top: 24px;
    font-size: 20px;
}

.nl-single-content :where(blockquote) {
    margin: 16px 0;
    padding: 14px 16px;
    background: rgba(2, 6, 23, 0.03);
    border-right: 4px solid var(--nl-primary);
    border-radius: 0 16px 16px 0;
    color: rgba(15, 23, 42, 0.85);
}

.nl-single-content :where(pre) {
    margin: 16px 0;
    padding: 14px;
    border-radius: 14px;
    overflow: auto;
    background: #0b1220;
    color: #e2e8f0;
}

.nl-single-content :where(code) {
    font-family: var(--nl-font-mono);
    font-size: 13px;
    background: rgba(2, 6, 23, 0.06);
    padding: 2px 6px;
    border-radius: 8px;
}

.nl-single-content pre code {
    background: transparent;
    padding: 0;
}

.nl-single-content :where(table) {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 14px;
    overflow: hidden;
    margin: 16px 0;
    background: #fff;
}

.nl-single-content :where(th, td) {
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding: 10px 12px;
    text-align: right;
    font-size: 14px;
}

.nl-single-content :where(th) {
    background: rgba(2, 6, 23, 0.03);
    font-weight: 900;
}

.nl-single-content :where(img, figure img) {
    max-width: 100%;
    height: auto;
    border-radius: var(--nl-radius-lg);
}

.nl-table-of-contents {
    border: 1px solid var(--nl-border);
    border-radius: var(--nl-radius-lg);
    padding: 14px 14px 10px;
    margin: 0 0 var(--nl-spacing-lg);
    background: var(--nl-white);
    box-shadow: var(--nl-shadow-sm);
}

.nl-toc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nl-spacing-md);
}

.nl-toc-toggle {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.08);
    background: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.nl-toc-toggle:hover {
    border-color: rgba(16, 185, 129, 0.25);
    background: rgba(16, 185, 129, 0.06);
}

.nl-toc-toggle i {
    transition: transform .2s ease;
}

.nl-toc-toggle[aria-expanded="false"] i {
    transform: rotate(-180deg);
}

.nl-toc-title {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
}

.nl-toc-list {
    margin: 10px 0 0;
    padding: 0 0 0 var(--nl-spacing-md);
}

.nl-toc-item {
    margin: 6px 0;
}

.nl-toc-item a {
    text-decoration: none;
    color: var(--nl-text);
    font-size: 13px;
    line-height: 1.7;
}

.nl-toc-item a:hover {
    color: var(--nl-primary);
}

.nl-toc-list.nl-hidden {
    display: none;
}

.nl-share-panel {
    display: none;
    margin-top: var(--nl-spacing-md);
    padding: var(--nl-spacing-md);
    border: 1px solid var(--nl-border);
    border-radius: var(--nl-radius-lg);
    background: var(--nl-bg);
}

.nl-share-panel.nl-open {
    display: block;
}

.nl-share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nl-spacing-sm);
}

.nl-share-buttons a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: var(--nl-radius-sm);
    background: var(--nl-white);
    border: 1px solid var(--nl-border);
    text-decoration: none;
    color: var(--nl-text);
    font-size: 13px;
}

.nl-share-buttons button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: var(--nl-radius-sm);
    background: var(--nl-white);
    border: 1px solid var(--nl-border);
    color: var(--nl-text);
    font-size: 13px;
    cursor: pointer;
}

.nl-share-buttons a:hover {
    border-color: var(--nl-primary);
    color: var(--nl-primary);
}

.nl-share-buttons button:hover {
    border-color: var(--nl-primary);
    color: var(--nl-primary);
}

.nl-single-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: var(--nl-spacing-lg);
}

.nl-single-tags-label {
    font-weight: 800;
    color: var(--nl-text);
}

.nl-single-tags a {
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--nl-bg);
    text-decoration: none;
    color: var(--nl-text);
    font-size: 13px;
}

.nl-single-tags a:hover {
    color: var(--nl-primary);
    border: 1px solid rgba(0, 115, 170, 0.25);
    background: #fff;
}

.nl-single-footer {
    margin-top: var(--nl-spacing-xl);
    padding-top: var(--nl-spacing-lg);
    border-top: 2px solid var(--nl-border);
}

/* Post navigation */
.nl-post-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 18px;
}

.nl-post-navigation a {
    display: block;
    padding: 14px 14px;
    border-radius: 18px;
    border: 1px solid rgba(0,0,0,0.06);
    background: #fff;
    text-decoration: none;
    font-weight: 900;
    color: #0f172a;
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.04);
}

.nl-post-navigation a:hover {
    border-color: rgba(16, 185, 129, 0.25);
    background: rgba(16, 185, 129, 0.06);
    color: var(--nl-primary);
}

/* Comments (basic but clean) */
.nl-comments-section {
    margin-top: var(--nl-spacing-xl);
    padding-top: var(--nl-spacing-lg);
    border-top: 1px solid var(--nl-border);
}

/* Comments head (Zoomit-ish) */
.nl-comments-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.nl-comments-title {
    margin: 0;
    font-size: 18px;
    font-weight: 900;
    color: #0f172a;
}

.nl-comments-subtitle {
    margin: 6px 0 0;
    color: var(--nl-text-light);
    font-size: 13px;
    font-weight: 700;
}

.nl-comments-auth {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* container should not look like an extra pill (button itself is styled) */
    padding: 0;
    border-radius: 0;
    border: none;
    background: transparent;
    color: #0f172a;
    font-weight: 900;
    font-size: 12px;
}

.nl-comments-auth-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--nl-primary);
    color: #fff;
    text-decoration: none;
    font-weight: 900;
    border: 1px solid rgba(0,0,0,0.06);
}

.nl-comments-auth-link:hover {
    background: var(--nl-primary-dark);
}

.nl-comments-auth-sep {
    opacity: .7;
}

/* Ads slots (Yektanet) */
.nl-ad-slot {
    margin-top: 14px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.06);
    background: #fff;
    padding: 10px;
}

.nl-ad-slot :where(img, iframe, ins, script, div) {
    max-width: 100%;
}

.nl-ad-slot iframe {
    width: 100% !important;
}

/* Sidebar promo boxes (آموزش / راهنما) */
.nl-promo-boxes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.nl-promo-card {
    position: relative;
    display: block;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.06);
    background: #fff;
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.04);
    text-decoration: none;
}

.nl-promo-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}

.nl-promo-label {
    position: absolute;
    inset-inline-start: 12px;
    top: 12px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(2, 6, 23, 0.72);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.2px;
}

.nl-promo-card:hover .nl-promo-label {
    background: rgba(16, 185, 129, 0.92);
}

/* Like button (single) */
.nl-like-section {
    margin-top: 16px;
}

.nl-like-section .nl-like-btn {
    width: 100%;
    justify-content: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(0,0,0,0.08);
    background: linear-gradient(180deg, rgba(244, 63, 94, 0.08), rgba(2, 6, 23, 0.02));
    color: #0f172a;
    font-weight: 900;
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}

.nl-like-section .nl-like-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(244, 63, 94, 0.30);
    box-shadow: 0 14px 34px rgba(244, 63, 94, 0.12);
}

.nl-like-section .nl-like-btn i {
    color: #f43f5e;
}

.nl-like-section .nl-like-btn.nl-liked {
    background: linear-gradient(180deg, rgba(244, 63, 94, 0.16), rgba(244, 63, 94, 0.06));
    border-color: rgba(244, 63, 94, 0.35);
}

.nl-like-section .nl-like-count {
    min-width: 38px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(0,0,0,0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

/* Comments (Roomit-ish: card + form layout) */
.nl-comments-section :where(.comment-respond, #respond) {
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 20px;
    padding: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.04);
}

.nl-comments-section :where(.comment-form) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.nl-comments-section :where(.comment-form-comment) {
    grid-column: 1 / -1;
}

.nl-comments-section :where(.comment-form-cookies-consent) {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--nl-text-light);
    margin: 0;
}

.nl-comments-section :where(.comment-form label) {
    display: block;
    font-weight: 800;
    font-size: 12px;
    margin-bottom: 6px;
    color: #0f172a;
}

.nl-comments-section :where(.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea) {
    width: 100%;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 14px;
    padding: 12px 12px;
    background: #fff;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.nl-comments-section :where(.comment-form textarea) {
    min-height: 140px;
    resize: vertical;
}

.nl-comments-section :where(.comment-form input:focus, .comment-form textarea:focus) {
    border-color: rgba(16, 185, 129, 0.55);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}

.nl-comments-section :where(.comment-respond .form-submit) {
    grid-column: 1 / -1;
    margin: 0;
}

.nl-comments-section :where(.comment-respond .submit) {
    width: 100%;
    border: none;
    border-radius: 16px;
    padding: 12px 16px;
    background: var(--nl-primary);
    color: #fff;
    font-weight: 900;
    cursor: pointer;
    transition: transform .15s ease, background .2s ease;
}

.nl-comments-section :where(.comment-respond .submit:hover) {
    background: var(--nl-primary-dark);
    transform: translateY(-1px);
}

.nl-comments-section :where(.comment-list .comment-body) {
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 20px;
    padding: 14px 14px;
    margin: 14px 0;
    background: #fff;
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.03);
}

.nl-comments-section :where(.comment-author) {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nl-comments-section :where(.comment-author .avatar) {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 2px solid rgba(16, 185, 129, 0.35);
}

.nl-comments-section :where(.comment-author .fn) {
    font-weight: 900;
    font-size: 13px;
    color: #0f172a;
}

.nl-comments-section :where(.comment-metadata a) {
    color: var(--nl-text-light);
    text-decoration: none;
    font-size: 12px;
}

.nl-comments-section :where(.reply a) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(2, 6, 23, 0.02);
    text-decoration: none;
    font-weight: 900;
    font-size: 12px;
    color: #0f172a;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.nl-comments-section :where(.reply a:hover) {
    border-color: rgba(16, 185, 129, 0.25);
    background: rgba(16, 185, 129, 0.06);
    color: var(--nl-primary);
}

.nl-comments-section :where(.children) {
    list-style: none;
    padding-right: 18px;
    margin: 0;
    border-right: 2px dashed rgba(0,0,0,0.08);
}

.nl-comments-section :where(.children .comment-body) {
    margin-right: 12px;
}

/* Admin / Author highlight */
.nl-comments-section :where(.nl-comment-admin > .comment-body, .nl-comment-author > .comment-body) {
    position: relative;
    border-color: rgba(16, 185, 129, 0.28);
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.06), rgba(255,255,255,1));
}

.nl-comments-section :where(.nl-comment-admin > .comment-body)::before,
.nl-comments-section :where(.nl-comment-author > .comment-body)::before {
    content: "";
    position: absolute;
    top: 14px;
    right: 14px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--nl-primary);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}

.nl-comments-section :where(.nl-comment-admin > .comment-body)::after,
.nl-comments-section :where(.nl-comment-author > .comment-body)::after {
    position: absolute;
    top: 10px;
    right: 34px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(16, 185, 129, 0.24);
    background: rgba(16, 185, 129, 0.10);
    color: #0f172a;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.nl-comments-section :where(.nl-comment-admin > .comment-body)::after {
    content: "ادمین";
}

.nl-comments-section :where(.nl-comment-author > .comment-body)::after {
    content: "نویسنده";
}

/* Replies toggle (interactive) */
.nl-comments-section .nl-replies-toggle {
    display: none;
    margin-top: 10px;
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(2, 6, 23, 0.02);
    color: #0f172a;
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 900;
    font-size: 12px;
    cursor: pointer;
}

.nl-comments-section .nl-replies-toggle:hover {
    border-color: rgba(16, 185, 129, 0.25);
    background: rgba(16, 185, 129, 0.06);
    color: var(--nl-primary);
}

.nl-comments-section .nl-replies-collapsed > .children {
    display: none;
}

@media (max-width: 640px) {
    .nl-comments-section :where(.comment-form) {
        grid-template-columns: 1fr;
    }

    .nl-comments-section .nl-replies-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
}

/* Mobile layout polish (single template) */
@media (max-width: 640px) {
    body.nl-articles-single-template .nl-single-container {
        /* طبق نمونه: padding عمودی 15 و افقی 5 */
        padding: 15px 5px;
    }

    body.nl-articles-single-template .nl-single-article {
        /* مطابق درخواست: پدینگ افقی صفر + گوشه‌های کمتر */
        padding: 16px 0px;
        border-radius: 4px;
    }

    body.nl-articles-single-template .nl-single-main {
        padding-top: 10px;
    }

    body.nl-articles-single-template .nl-single-featured {
        margin: 14px 0;
        border-radius: 18px;
    }

    body.nl-articles-single-template .nl-single-info-card {
        /* در موبایل، overlap زیاد باعث بهم‌ریختگی می‌شود */
        margin: 12px 0 14px;
        border-radius: 18px;
        padding: 14px 14px 8px;
    }

    body.nl-articles-single-template .nl-single-title {
        font-size: 22px;
        margin-bottom: 10px;
    }

    body.nl-articles-single-template .nl-hero-grid {
        gap: 12px;
    }

    body.nl-articles-single-template .nl-hero-ads {
        gap: 10px;
    }

    body.nl-articles-single-template .nl-zoomit-topbar-inner {
        padding: 10px 12px;
        gap: 10px;
        flex-wrap: nowrap;
    }

    body.nl-articles-single-template .nl-zoomit-back,
    body.nl-articles-single-template .nl-zoomit-cats-list a,
    body.nl-articles-single-template .nl-share-toggle {
        border-radius: 12px;
    }
}

/* Related articles in sidebar: make it a clean 1-column list (fixes bad placement) */
.nl-related-sidebar :where(.nl-related-grid) {
    grid-template-columns: 1fr !important;
    gap: 12px;
}

.nl-related-sidebar :where(.nl-related-card) {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
    padding: 10px;
}

.nl-related-sidebar :where(.nl-related-image) {
    width: 120px;
    flex: 0 0 120px;
    border-radius: 14px;
    overflow: hidden;
}

.nl-related-sidebar :where(.nl-related-image img) {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.nl-related-sidebar :where(.nl-related-content) {
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.nl-comments-section :where(.comments-title, .comment-reply-title) {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 12px;
}

.nl-comments-section :where(.comment-list) {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nl-comments-section :where(.comment-body) {
    border: 1px solid var(--nl-border);
    border-radius: var(--nl-radius-lg);
    padding: 14px;
    margin: 14px 0;
    background: #fff;
}

.nl-comments-section :where(.comment-metadata, .comment-meta) {
    font-size: 12px;
    color: var(--nl-text-light);
}

.nl-comments-section :where(.comment-content p) {
    margin: 10px 0 0;
    line-height: 1.9;
}

.nl-comments-section :where(.comment-respond textarea, .comment-respond input[type="text"], .comment-respond input[type="email"], .comment-respond input[type="url"]) {
    width: 100%;
    border: 1px solid var(--nl-border);
    border-radius: var(--nl-radius-md);
    padding: 10px 12px;
    background: #fff;
}

.nl-comments-section :where(.comment-respond .submit) {
    border: none;
    border-radius: var(--nl-radius-md);
    padding: 10px 16px;
    background: var(--nl-primary);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.nl-comments-section :where(.comment-respond .submit:hover) {
    background: var(--nl-primary-dark);
}

@media (max-width: 900px) {
    .nl-hero-grid {
        grid-template-columns: 1fr;
    }
    .nl-hero-ads {
        order: 2;
    }
    .nl-single-hero {
        order: 1;
    }

    .nl-single-shell {
        grid-template-columns: 1fr;
    }
    .nl-single-floatbar {
        display: none;
    }
    .nl-article-layout {
        grid-template-columns: 1fr;
    }
    .nl-single-sidebar {
        position: static;
        top: auto;
    }
}

/* Mobile meta cleanup */
@media (max-width: 640px) {
    .nl-single-meta {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .nl-single-meta-right,
    .nl-single-meta-left {
        width: 100%;
        justify-content: flex-start;
    }
    .nl-single-author {
        width: 100%;
        justify-content: flex-start;
    }
    .nl-single-meta :where(.nl-single-date, .nl-single-read-time, .nl-single-view-count) {
        flex: 1 1 auto;
        justify-content: center;
    }
    .nl-single-meta-right {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .nl-single-author {
        grid-column: 1 / -1;
    }
    .nl-single-meta-left .nl-share-toggle {
        width: 100%;
        justify-content: center;
    }
}

/* Bottom action bar (mobile) */
.nl-mobile-actions {
    display: none;
}

@media (max-width: 900px) {
    .nl-mobile-actions {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999999;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(10px);
        border-top: 1px solid rgba(0,0,0,0.08);
        padding: 10px 12px 10px;
    }

    .nl-mobile-actions-inner {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
        align-items: center;
        margin-bottom: 0;
    }

    .nl-mobile-action-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 12px 10px;
        border-radius: 16px;
        border: 1px solid rgba(0,0,0,0.08);
        background: #fff;
        text-decoration: none;
        color: #0f172a;
        font-weight: 900;
        box-shadow: 0 10px 30px rgba(2, 6, 23, 0.04);
    }

    .nl-mobile-action-count {
        min-width: 28px;
        height: 22px;
        padding: 0 8px;
        border-radius: 999px;
        background: rgba(2, 6, 23, 0.06);
        font-size: 11px;
        font-weight: 900;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Make room for the fixed bottom bar */
    body.nl-articles-single-template .nl-single-root {
        /* iOS safe-area + جلوگیری از پوشاندن محتوا توسط نوار اکشن */
        padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    }
}

/* ==========================================================================
   Best Selling Products Slider
   ========================================================================== */
.nl-products-slider {
    background: #f8fafc;
    border: 1px solid rgba(0,0,0,0.03);
    padding: 24px;
    border-radius: 24px;
    direction: rtl; /* Ensure RTL layout for correct alignment */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden; /* Prevent horizontal scroll on the entire block */
}

.nl-products-slider .nl-zoomit-slider-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    width: 100%; /* Ensure track doesn't exceed container */
    box-sizing: border-box;
}

.nl-products-slider .nl-zoomit-slider-track::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.nl-products-slider .nl-zoomit-slider-card {
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: 200px; /* Fixed width for uniformity */
    max-width: 75vw;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.03);
    background: #fff;
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.02);
}

.nl-products-slider .nl-product-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.nl-products-slider .nl-product-media {
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.nl-products-slider .nl-zoomit-slider-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.nl-products-slider .nl-product-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 6px;
    z-index: 2;
}

.nl-products-slider .nl-product-info {
    padding: 16px 8px 8px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.nl-products-slider .nl-zoomit-slider-title {
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--nl-text, #0f172a);
}

.nl-products-slider .nl-product-price {
    font-weight: 900;
    font-size: 15px;
    color: var(--nl-primary, #10b981);
    margin-top: auto;
}

.nl-products-slider .nl-product-price del {
    color: #94a3b8;
    font-size: 12px;
    font-weight: normal;
    margin-left: 6px;
}

.nl-products-slider .nl-product-action {
    padding: 0 8px 8px;
}

.nl-products-slider .nl-add-to-cart-btn {
    width: 100%;
    padding: 10px;
    font-size: 13px;
    border-radius: 12px;
    background: #fff;
    color: var(--nl-primary, #10b981);
    border: 1px solid var(--nl-primary, #10b981);
    box-shadow: none;
}

.nl-products-slider .nl-add-to-cart-btn:hover {
    background: var(--nl-primary, #10b981);
    color: #fff;
}

/* ==========================================================================
   Professional Comments Section
   ========================================================================== */
.nl-comments-area {
    margin-top: 48px;
    padding-top: 48px;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.nl-comments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
}

.nl-comments-title {
    font-size: 22px;
    font-weight: 900;
    margin: 0;
    color: var(--nl-text, #0f172a);
    display: flex;
    align-items: center;
    gap: 12px;
}

.nl-comments-title i {
    color: var(--nl-primary, #0ea5e9);
}

.nl-comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nl-comment-list .children {
    list-style: none;
    margin: 24px 24px 0 0;
    padding: 0 24px 0 0;
    border-right: 3px solid rgba(14, 165, 233, 0.15);
    position: relative;
}

.nl-comment-list .children::before {
    content: '';
    position: absolute;
    top: 0;
    right: -3px;
    height: 100%;
    width: 3px;
    background: linear-gradient(to bottom, var(--nl-primary, #0ea5e9), transparent);
    border-radius: 4px;
}

.nl-comment-list .children .nl-comment-body {
    background: #f8fafc;
    border: 1px solid rgba(14, 165, 233, 0.1);
    box-shadow: none;
}

.nl-comment-item {
    margin-bottom: 24px;
}

.nl-comment-body {
    display: flex;
    gap: 16px;
    background: #fff;
    padding: 24px;
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.02);
}

.nl-comment-author-avatar img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.nl-comment-content-wrapper {
    flex: 1;
    min-width: 0;
}

.nl-comment-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 10px;
}

.nl-comment-author-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(100, 116, 139, 1);
}

.nl-comment-author-info .nl-fn {
    font-size: 15px;
    font-weight: 800;
    color: var(--nl-text, #0f172a);
}

.nl-comment-author-info .nl-fn a {
    color: inherit;
    text-decoration: none;
}

.nl-comment-badge {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
}

.nl-badge-author {
    background: rgba(14, 165, 233, 0.1);
    color: var(--nl-primary, #0ea5e9);
}

.nl-comment-text {
    font-size: 15px;
    line-height: 1.8;
    color: rgba(51, 65, 85, 1);
}

.nl-comment-text p:last-child {
    margin-bottom: 0;
}

.nl-reply-link-wrapper a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 800;
    color: rgba(100, 116, 139, 1);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(2, 6, 23, 0.04);
    transition: all 0.3s ease;
}

.nl-reply-link-wrapper a:hover {
    background: var(--nl-primary, #0ea5e9);
    color: #fff;
}

.nl-comment-form {
    background: #f8fafc;
    padding: 32px;
    border-radius: 24px;
    margin-top: 48px;
    border: 1px solid rgba(0,0,0,0.03);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#respond {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: block !important;
}

.nl-must-login-notice {
    background: #f8fafc;
    padding: 40px 32px;
    border-radius: 24px;
    margin-top: 48px;
    border: 1px solid rgba(0,0,0,0.03);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.nl-must-login-icon {
    width: 64px;
    height: 64px;
    background: rgba(14, 165, 233, 0.1);
    color: var(--nl-primary, #0ea5e9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.nl-must-login-content h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 900;
    color: var(--nl-text, #0f172a);
}

.nl-must-login-content p {
    margin: 0;
    font-size: 14px;
    color: rgba(100, 116, 139, 1);
}

.nl-must-login-notice .nl-btn {
    margin-top: 8px;
    padding: 12px 24px;
    border-radius: 99px;
}

.nl-comment-form .comment-reply-title {
    font-size: 20px;
    font-weight: 900;
    margin: 0 0 24px;
    color: var(--nl-text, #0f172a);
}

.nl-comment-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.nl-comment-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nl-comment-form-group label {
    font-size: 14px;
    font-weight: 800;
    color: var(--nl-text, #0f172a);
}

.nl-comment-form-group label .required {
    color: #ef4444;
}

.nl-input-wrapper {
    position: relative;
}

.nl-input-wrapper i {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(148, 163, 184, 1);
}

.nl-input-wrapper input {
    width: 100%;
    padding: 12px 16px 12px 40px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    transition: all 0.3s ease;
}

.nl-input-wrapper input:focus,
.nl-comment-form-textarea textarea:focus {
    border-color: var(--nl-primary, #0ea5e9);
    outline: none;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1);
}

.nl-comment-form-textarea {
    margin-bottom: 24px;
}

.nl-comment-form-textarea textarea {
    width: 100%;
    padding: 16px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    min-height: 120px;
    transition: all 0.3s ease;
}

.nl-submit-comment {
    padding: 14px 32px;
    font-size: 15px;
    border-radius: 12px;
    width: auto;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2) !important;
    transition: all 0.3s ease;
}

.nl-submit-comment:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3) !important;
}

.nl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    outline: none;
    text-decoration: none;
}

.nl-btn-primary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2) !important;
}

.nl-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3) !important;
    color: #fff !important;
}

.nl-add-comment-btn {
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 99px;
}

/* ==========================================================================
   Comments UI Refresh
   ========================================================================== */
.nl-comments-area {
    position: relative;
    margin-top: 56px;
    padding: 36px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 32px;
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.05);
}

.nl-comments-area::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.nl-comments-header {
    position: relative;
    gap: 18px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.nl-comments-title {
    line-height: 1.4;
}

.nl-comments-title i {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.16), rgba(16, 185, 129, 0.12));
}

.nl-comment-item {
    position: relative;
    margin-bottom: 22px;
}

.nl-comment-item:last-child {
    margin-bottom: 0;
}

.nl-comment-body {
    position: relative;
    align-items: flex-start;
    padding: 24px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.nl-comment-body:hover {
    transform: translateY(-2px);
    border-color: rgba(14, 165, 233, 0.24);
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.08);
}

.nl-comment-item.parent > .nl-comment-body::after {
    content: "";
    position: absolute;
    top: 22px;
    left: 22px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #10b981, #0ea5e9);
    box-shadow: 0 0 0 6px rgba(14, 165, 233, 0.08);
}

.nl-comment-author-avatar {
    flex: 0 0 auto;
}

.nl-comment-author-avatar img {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 10px 24px rgba(14, 165, 233, 0.16);
}

.nl-comment-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.nl-comment-meta {
    padding-bottom: 14px;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.3);
}

.nl-comment-author-info {
    gap: 12px;
}

.nl-comment-author-info time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.nl-comment-badge {
    padding: 5px 10px;
    border-radius: 999px;
    letter-spacing: 0.01em;
}

.nl-comment-text {
    font-size: 15px;
    line-height: 2;
    color: #334155;
}

.nl-comment-text p {
    margin: 0 0 12px;
}

.nl-comment-awaiting-moderation {
    margin: 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(245, 158, 11, 0.12);
    color: #92400e;
    font-size: 13px;
    font-weight: 700;
}

.nl-comment-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nl-reply-link-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.nl-reply-link-wrapper i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(14, 165, 233, 0.12);
    color: var(--nl-primary, #0ea5e9);
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.nl-reply-link-wrapper a {
    padding: 9px 14px;
    border: 1px solid rgba(14, 165, 233, 0.14);
    background: rgba(14, 165, 233, 0.05);
    color: #0369a1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.nl-reply-link-wrapper:hover i,
.nl-reply-link-wrapper a:hover + i {
    transform: translateX(-2px);
    background: var(--nl-primary, #0ea5e9);
    color: #fff;
}

.nl-comment-list .children {
    margin: 18px 0 0;
    padding: 0 28px 0 0;
    border-right: none;
}

.nl-comment-list .children::before {
    right: 0;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(14, 165, 233, 0.7), rgba(16, 185, 129, 0.08));
}

.nl-comment-list .children > .nl-comment-item > .nl-comment-body,
.nl-comment-list .children .nl-comment-body {
    background:
        linear-gradient(180deg, rgba(240, 249, 255, 0.96), rgba(248, 250, 252, 0.98));
    border-color: rgba(14, 165, 233, 0.16);
    box-shadow: 0 12px 30px rgba(14, 165, 233, 0.08);
}

.nl-comment-list .children .nl-comment-body::before {
    content: "پاسخ";
    position: absolute;
    top: -12px;
    right: 22px;
    padding: 5px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #0ea5e9, #10b981);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(14, 165, 233, 0.22);
}

.nl-comment-form,
.nl-must-login-notice,
#respond.comment-respond {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background:
        radial-gradient(circle at top left, rgba(16, 185, 129, 0.08), transparent 24%),
        linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.98));
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.06);
}

.nl-comment-list #respond.comment-respond {
    margin: 18px 0 8px;
    padding: 24px;
    border-style: dashed;
    border-color: rgba(14, 165, 233, 0.3);
    border-radius: 24px;
}

.nl-comment-list #respond.comment-respond::before {
    content: "در حال پاسخ";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.12);
    color: #0369a1;
    font-size: 12px;
    font-weight: 800;
}

.nl-comment-form .comment-reply-title,
#respond.comment-respond .comment-reply-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.28);
}

.nl-comment-form .comment-reply-title small,
#respond.comment-respond .comment-reply-title small {
    margin-right: auto;
}

.nl-comment-form .comment-reply-title small a,
#respond.comment-respond .comment-reply-title small a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.08);
    color: #b91c1c;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.nl-input-wrapper input,
.nl-comment-form-textarea textarea {
    border-color: rgba(148, 163, 184, 0.26);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

.nl-comment-form .form-submit {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
}

.nl-submit-comment {
    min-width: 170px;
}

.nl-comments-area .comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 22px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(148, 163, 184, 0.08);
    color: #475569;
    font-size: 13px;
}

.nl-comments-area .comment-form-cookies-consent input {
    margin-top: 3px;
}

.nl-comments-area .comment-notes,
.nl-comments-area .logged-in-as {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(14, 165, 233, 0.06);
    color: #0369a1;
    font-size: 13px;
    line-height: 1.8;
}