/**
 * Shop Naija Brands - Main Stylesheet
 * Modern Multivendor E-Commerce Platform
 * Beautiful, Mobile-First Design
 */

/* ============================================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================ */
:root {
    /* ── Figma Design Tokens ─────────────────────── */
    /* Primary Green */
    --snb-primary: #1E6B3C;
    --snb-primary-dark: #155230;
    --snb-primary-light: #008751;
    --snb-primary-cta: #008751;
    --snb-primary-50: rgba(30, 107, 60, 0.05);
    --snb-primary-100: rgba(30, 107, 60, 0.1);
    --snb-primary-200: rgba(30, 107, 60, 0.2);

    /* Orange Accent */
    --snb-accent: #D4820A;
    --snb-accent-dark: #BF7309;
    --snb-accent-light: #E8930B;
    --snb-gold: #BF882C;

    /* Teal & Red */
    --snb-teal: #23BABA;
    --snb-red: #D4183D;
    --snb-bright-green: #27AE60;

    /* Page Background */
    --snb-page-bg: #FDF8F4;

    /* Text */
    --snb-text-primary: #1A1A1A;
    --snb-text-secondary: #6B7280;
    --snb-text-muted: #9CA3AF;

    /* Secondary */
    --snb-secondary: #3E3838;
    --snb-secondary-light: #4B5563;

    /* Status Colors */
    --snb-success: #27AE60;
    --snb-danger: #D4183D;
    --snb-warning: #D4820A;
    --snb-info: #23BABA;

    /* Neutrals */
    --snb-white: #FFFFFF;
    --snb-gray-50: #F5F5F5;
    --snb-gray-100: #F9FAFB;
    --snb-gray-200: #E5E7EB;
    --snb-gray-300: #D1D5DB;
    --snb-gray-400: #9CA3AF;
    --snb-gray-500: #6B7280;
    --snb-gray-600: #4B5563;
    --snb-gray-700: #374151;
    --snb-gray-800: #1F2937;
    --snb-gray-900: #111827;
    --snb-black: #030213;

    /* Typography */
    --snb-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --snb-font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
    --snb-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Border Radius (from Figma) */
    --snb-radius-sm: 8px;
    --snb-radius-md: 12px;
    --snb-radius-lg: 16px;
    --snb-radius-xl: 20px;
    --snb-radius-full: 9999px;

    /* Shadows */
    --snb-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --snb-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --snb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --snb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --snb-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    --snb-shadow-glow: 0 0 20px rgba(30, 107, 60, 0.15);

    /* Transitions */
    --snb-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --snb-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --snb-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    --snb-sidebar-width: 260px;
    --snb-header-height: 81px;
    --snb-topbar-height: 41px;
    --snb-megamenu-height: 84px;
}

/* ============================================================
   RESET & BASE STYLES
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--snb-font-primary);
    font-size: 15px;
    line-height: 1.6;
    color: var(--snb-text-primary);
    background-color: var(--snb-page-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: var(--snb-primary);
    transition: color var(--snb-transition-fast);
}

a:hover {
    color: var(--snb-primary-dark);
}

img {
    max-width: 100%;
    height: auto;
}

::selection {
    background-color: var(--snb-primary-200);
    color: var(--snb-primary-dark);
}

/* ============================================================
   TOP BAR
   ============================================================ */
.snb-topbar {
    background: var(--snb-primary);
    color: rgba(255,255,255,0.9);
    font-size: 12px;
    height: var(--snb-topbar-height);
    display: flex;
    align-items: center;
    border-bottom: none;
}

.snb-topbar a {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    transition: color var(--snb-transition-fast);
}

.snb-topbar a:hover {
    color: #fff;
    text-decoration: underline;
}

.snb-topbar .separator {
    width: 1px;
    height: 14px;
    background: rgba(255,255,255,0.3);
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px;
}

.snb-topbar .dropdown-toggle {
    color: rgba(255,255,255,0.9) !important;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.1);
    padding: 3px 8px;
    border-radius: 4px;
    transition: background var(--snb-transition-fast);
}

.snb-topbar .dropdown-toggle:hover {
    background: rgba(255,255,255,0.2);
}

/* ============================================================
   MAIN HEADER / NAVBAR
   ============================================================ */
.snb-header {
    background: var(--snb-white);
    box-shadow: var(--snb-shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1040;
    transition: box-shadow var(--snb-transition-base);
}

.snb-header.scrolled {
    box-shadow: var(--snb-shadow-lg);
}

.snb-brand {
    font-family: var(--snb-font-display);
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--snb-primary) !important;
    letter-spacing: -0.5px;
}

.snb-brand span {
    color: var(--snb-accent);
}

/* Search Bar */
.snb-search-container {
    position: relative;
    max-width: 560px;
    width: 100%;
}

.snb-search-input {
    width: 100%;
    padding: 12px 50px 12px 20px;
    border: 2px solid var(--snb-gray-200);
    border-radius: var(--snb-radius-full);
    font-size: 14px;
    background: var(--snb-gray-50);
    transition: all var(--snb-transition-base);
    color: var(--snb-gray-800);
}

.snb-search-input:focus {
    outline: none;
    border-color: var(--snb-primary);
    background: var(--snb-white);
    box-shadow: 0 0 0 4px var(--snb-primary-100);
}

.snb-search-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: var(--snb-radius-full);
    border: none;
    background: var(--snb-primary);
    color: var(--snb-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--snb-transition-fast);
}

.snb-search-btn:hover {
    background: var(--snb-primary-dark);
}

/* Header Action Icons */
.snb-header-action {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    min-width: 52px;
    height: 52px;
    border-radius: var(--snb-radius-md);
    color: var(--snb-gray-700);
    transition: all var(--snb-transition-fast);
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1.25rem;
    text-decoration: none;
    line-height: 1;
}

.snb-header-action .action-label {
    font-size: 11px;
    font-weight: 500;
    margin-top: 2px;
    color: var(--snb-gray-600);
    white-space: nowrap;
}

.snb-header-action.btn-cart {
    background: var(--snb-primary-cta);
    color: white;
    border-radius: var(--snb-radius-md);
    padding: 6px 14px;
}

.snb-header-action.btn-cart .action-label {
    color: rgba(255,255,255,0.9);
}

.snb-header-action.btn-cart:hover {
    background: var(--snb-primary-dark);
    color: white;
}

.snb-header-action:hover {
    background: var(--snb-primary-50);
    color: var(--snb-primary);
}

.snb-header-action:hover .action-label {
    color: var(--snb-primary);
}

.snb-header-action .badge {
    position: absolute;
    top: 2px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: var(--snb-danger);
    color: white;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border: 2px solid var(--snb-white);
    padding: 0 3px;
}

/* Search with category dropdown */
.snb-search-container {
    position: relative;
    max-width: 580px;
    width: 100%;
}

.snb-search-form {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--snb-gray-200);
    border-radius: var(--snb-radius-md);
    background: var(--snb-gray-100);
    overflow: hidden;
    transition: border-color var(--snb-transition-base), box-shadow var(--snb-transition-base);
}

.snb-search-form:focus-within {
    border-color: var(--snb-primary);
    box-shadow: 0 0 0 3px var(--snb-primary-100);
    background: white;
}

.snb-search-category {
    flex-shrink: 0;
    padding: 0 12px;
    height: 48px;
    border: none;
    border-right: 1.5px solid var(--snb-gray-200);
    background: transparent;
    font-size: 13px;
    color: var(--snb-gray-600);
    cursor: pointer;
    font-family: var(--snb-font-primary);
    outline: none;
    max-width: 130px;
}

.snb-search-input {
    flex: 1;
    height: 48px;
    padding: 0 16px;
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--snb-text-primary);
    outline: none;
    font-family: var(--snb-font-primary);
}

.snb-search-input::placeholder {
    color: var(--snb-gray-400);
}

.snb-search-btn {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border: none;
    background: var(--snb-primary-cta);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--snb-transition-fast);
    font-size: 1rem;
    border-radius: 0 var(--snb-radius-md) var(--snb-radius-md) 0;
}

.snb-search-btn:hover {
    background: var(--snb-primary-dark);
}

/* ============================================================
   MEGA MENU / CATEGORY NAV
   ============================================================ */
.snb-megamenu {
    background: var(--snb-white);
    border-bottom: 1px solid var(--snb-gray-200);
    height: var(--snb-megamenu-height);
    display: flex;
    align-items: center;
}

.snb-megamenu-inner {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.snb-megamenu-inner::-webkit-scrollbar { display: none; }

.snb-all-categories-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    height: 48px;
    background: var(--snb-primary);
    color: white !important;
    border-radius: var(--snb-radius-md);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background var(--snb-transition-fast);
}

.snb-all-categories-btn:hover {
    background: var(--snb-primary-dark);
    color: white !important;
}

.snb-megamenu .nav-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 14px;
    height: 48px;
    color: var(--snb-text-primary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--snb-radius-md);
    white-space: nowrap;
    transition: all var(--snb-transition-fast);
}

.snb-megamenu .nav-item:hover {
    background: var(--snb-primary-50);
    color: var(--snb-primary);
}

.snb-megamenu .nav-item.nav-sales {
    color: var(--snb-red);
    background: rgba(212, 24, 61, 0.06);
    font-weight: 600;
}

.snb-megamenu .nav-item.nav-sales:hover {
    background: rgba(212, 24, 61, 0.12);
    color: var(--snb-red);
}

/* Old category nav (keep for inner pages) */
.snb-category-nav {
    background: var(--snb-white);
    border-bottom: 1px solid var(--snb-gray-100);
    padding: 0;
}

.snb-category-nav .nav-link {
    color: var(--snb-gray-600);
    font-size: 14px;
    font-weight: 500;
    padding: 12px 16px;
    border-bottom: 2px solid transparent;
    transition: all var(--snb-transition-fast);
    white-space: nowrap;
}

.snb-category-nav .nav-link:hover,
.snb-category-nav .nav-link.active {
    color: var(--snb-primary);
    border-bottom-color: var(--snb-primary);
}

.snb-category-nav .nav-link i {
    font-size: 1rem;
}

/* ============================================================
   HERO SECTION / SLIDER
   ============================================================ */
.snb-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--snb-radius-lg);
    margin-bottom: 2rem;
}

.snb-hero .snb-hero-slide {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    border-radius: var(--snb-radius-lg);
    overflow: hidden;
}

.snb-hero .snb-hero-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
    z-index: 1;
}

.snb-hero-content {
    position: relative;
    z-index: 2;
    padding: 3rem;
    max-width: 600px;
}

.snb-hero-content .badge-tag {
    display: inline-block;
    padding: 6px 16px;
    border-radius: var(--snb-radius-full);
    background: rgba(245, 158, 11, 0.9);
    color: white;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.snb-hero-content h1 {
    font-family: var(--snb-font-display);
    font-weight: 800;
    font-size: 2.8rem;
    color: white;
    line-height: 1.15;
    margin-bottom: 1rem;
}

.snb-hero-content p {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.85);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.snb-hero-content .btn-hero {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: var(--snb-radius-full);
    font-weight: 600;
    font-size: 15px;
    border: none;
    cursor: pointer;
    transition: all var(--snb-transition-base);
}

.btn-hero-primary {
    background: var(--snb-primary);
    color: white;
}

.btn-hero-primary:hover {
    background: var(--snb-primary-light);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 135, 81, 0.3);
}

.btn-hero-outline {
    background: transparent;
    color: white;
    border: 2px solid rgba(255,255,255,0.5) !important;
    margin-left: 12px;
}

.btn-hero-outline:hover {
    background: white;
    color: var(--snb-primary);
    border-color: white !important;
}

/* Slider Indicators */
.snb-slider-indicators {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 8px;
}

.snb-slider-indicators .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: all var(--snb-transition-fast);
}

.snb-slider-indicators .dot.active {
    background: white;
    width: 30px;
    border-radius: 5px;
}

/* ============================================================
   FEATURED PROMO BOXES
   ============================================================ */
.snb-promo-box {
    border-radius: var(--snb-radius-lg);
    padding: 2rem;
    position: relative;
    overflow: hidden;
    transition: all var(--snb-transition-base);
    cursor: pointer;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.snb-promo-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--snb-shadow-xl);
}

.snb-promo-box.promo-green {
    background: linear-gradient(135deg, #008751 0%, #00a862 100%);
    color: white;
}

.snb-promo-box.promo-gold {
    background: linear-gradient(135deg, #D97706 0%, #FBBF24 100%);
    color: white;
}

.snb-promo-box.promo-dark {
    background: linear-gradient(135deg, #1E293B 0%, #475569 100%);
    color: white;
}

.snb-promo-box.promo-coral {
    background: linear-gradient(135deg, #EF4444 0%, #F97316 100%);
    color: white;
}

.snb-promo-box h4 {
    font-family: var(--snb-font-display);
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.snb-promo-box p {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-bottom: 0;
}

.snb-promo-box .promo-icon {
    position: absolute;
    right: -10px;
    bottom: -10px;
    font-size: 5rem;
    opacity: 0.15;
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.snb-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--snb-gray-100);
}

.snb-section-header h2 {
    font-family: var(--snb-font-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--snb-gray-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.snb-section-header h2 .section-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--snb-radius-sm);
    background: var(--snb-primary-100);
    color: var(--snb-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.snb-section-header .view-all {
    font-size: 14px;
    font-weight: 600;
    color: var(--snb-primary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.snb-section-header .view-all:hover {
    gap: 8px;
}

/* ============================================================
   PRODUCT CARDS
   ============================================================ */
.snb-product-card {
    background: var(--snb-white);
    border-radius: var(--snb-radius-md);
    overflow: hidden;
    border: 1px solid var(--snb-gray-100);
    transition: all var(--snb-transition-base);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.snb-product-card:hover {
    border-color: var(--snb-primary-200);
    box-shadow: var(--snb-shadow-lg);
    transform: translateY(-4px);
}

.snb-product-card .product-image-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--snb-gray-50);
}

.snb-product-card .product-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--snb-transition-slow);
}

.snb-product-card:hover .product-image-wrapper img {
    transform: scale(1.08);
}

.snb-product-card .product-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
}

.snb-product-card .product-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--snb-radius-full);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-badge.badge-sale {
    background: var(--snb-danger);
    color: white;
}

.product-badge.badge-new {
    background: var(--snb-primary);
    color: white;
}

.product-badge.badge-hot {
    background: var(--snb-accent);
    color: white;
}

.product-badge.badge-flash {
    background: linear-gradient(135deg, #dc2626, #f97316);
    color: white;
    animation: flashPulse 1.5s ease-in-out infinite;
}

@keyframes flashPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.snb-product-card .product-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transform: translateX(10px);
    transition: all var(--snb-transition-base);
    z-index: 2;
}

.snb-product-card:hover .product-actions {
    opacity: 1;
    transform: translateX(0);
}

.product-action-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--snb-radius-full);
    background: var(--snb-white);
    color: var(--snb-gray-600);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--snb-shadow-md);
    transition: all var(--snb-transition-fast);
    font-size: 0.9rem;
}

.product-action-btn:hover {
    background: var(--snb-primary);
    color: white;
    transform: scale(1.1);
}

.product-action-btn.wishlisted {
    background: var(--snb-danger);
    color: white;
}

.snb-product-card .product-quick-add {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background: linear-gradient(transparent, rgba(0,0,0,0.6));
    transform: translateY(100%);
    transition: transform var(--snb-transition-base);
    z-index: 2;
}

.snb-product-card:hover .product-quick-add {
    transform: translateY(0);
}

.btn-quick-add {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: var(--snb-radius-sm);
    background: var(--snb-primary);
    color: white;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background var(--snb-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-quick-add:hover {
    background: var(--snb-primary-light);
}

.snb-product-card .product-info {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.snb-product-card .product-category {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--snb-primary);
    margin-bottom: 6px;
}

.snb-product-card .product-name {
    font-family: var(--snb-font-display);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--snb-gray-800);
    margin-bottom: 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--snb-transition-fast);
}

.snb-product-card:hover .product-name {
    color: var(--snb-primary);
}

.snb-product-card .product-vendor {
    font-size: 12px;
    color: var(--snb-gray-500);
    margin-bottom: 8px;
}

.snb-product-card .product-vendor a {
    color: var(--snb-gray-500);
    font-weight: 500;
}

.snb-product-card .product-vendor a:hover {
    color: var(--snb-primary);
}

.snb-product-card .product-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 10px;
}

.snb-product-card .product-rating .bi-star-fill,
.snb-product-card .product-rating .bi-star-half {
    color: var(--snb-accent);
    font-size: 12px;
}

.snb-product-card .product-rating .bi-star {
    color: var(--snb-gray-300);
    font-size: 12px;
}

.snb-product-card .product-rating .rating-count {
    font-size: 12px;
    color: var(--snb-gray-400);
}

.snb-product-card .product-price {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.snb-product-card .current-price {
    font-family: var(--snb-font-display);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--snb-primary);
}

.snb-product-card .original-price {
    font-size: 0.85rem;
    color: var(--snb-gray-400);
    text-decoration: line-through;
}

.snb-product-card .discount-percent {
    font-size: 11px;
    font-weight: 700;
    color: var(--snb-danger);
    background: rgba(239, 68, 68, 0.08);
    padding: 2px 8px;
    border-radius: var(--snb-radius-full);
}

/* ============================================================
   CATEGORY CARDS
   ============================================================ */
.snb-category-card {
    text-align: center;
    padding: 1.5rem 1rem;
    border-radius: var(--snb-radius-md);
    background: var(--snb-white);
    border: 1px solid var(--snb-gray-100);
    transition: all var(--snb-transition-base);
    cursor: pointer;
    display: block;
}

.snb-category-card:hover {
    border-color: var(--snb-primary);
    box-shadow: var(--snb-shadow-md);
    transform: translateY(-4px);
}

.snb-category-card .cat-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--snb-radius-lg);
    background: var(--snb-primary-50);
    color: var(--snb-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 12px;
    transition: all var(--snb-transition-base);
}

.snb-category-card:hover .cat-icon {
    background: var(--snb-primary);
    color: white;
    transform: scale(1.1);
}

.snb-category-card .cat-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--snb-gray-700);
    margin-bottom: 2px;
}

.snb-category-card .cat-count {
    font-size: 0.8rem;
    color: var(--snb-gray-400);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-snb-primary {
    background: var(--snb-primary);
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: var(--snb-radius-full);
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all var(--snb-transition-base);
}

.btn-snb-primary:hover {
    background: var(--snb-primary-dark);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 135, 81, 0.25);
}

.btn-snb-outline {
    background: transparent;
    color: var(--snb-primary);
    border: 2px solid var(--snb-primary);
    padding: 10px 26px;
    border-radius: var(--snb-radius-full);
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all var(--snb-transition-base);
}

.btn-snb-outline:hover {
    background: var(--snb-primary);
    color: white;
}

.btn-snb-accent {
    background: var(--snb-accent);
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: var(--snb-radius-full);
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all var(--snb-transition-base);
}

.btn-snb-accent:hover {
    background: var(--snb-accent-dark);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.25);
}

.btn-snb-danger {
    background: var(--snb-danger);
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: var(--snb-radius-full);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all var(--snb-transition-base);
}

.btn-snb-danger:hover {
    background: #DC2626;
    color: white;
}

.btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--snb-radius-full);
}

/* ============================================================
   CARDS & PANELS
   ============================================================ */
.snb-card {
    background: var(--snb-white);
    border-radius: var(--snb-radius-md);
    border: 1px solid var(--snb-gray-100);
    overflow: hidden;
    transition: box-shadow var(--snb-transition-base);
}

.snb-card:hover {
    box-shadow: var(--snb-shadow-md);
}

.snb-card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--snb-gray-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--snb-gray-50);
}

.snb-card-header h5 {
    font-family: var(--snb-font-display);
    font-weight: 700;
    font-size: 1rem;
    margin: 0;
    color: var(--snb-gray-800);
}

.snb-card-body {
    padding: 1.5rem;
}

/* ============================================================
   STAT CARDS (DASHBOARD)
   ============================================================ */
.snb-stat-card {
    background: var(--snb-white);
    border-radius: var(--snb-radius-md);
    padding: 1.5rem;
    border: 1px solid var(--snb-gray-100);
    transition: all var(--snb-transition-base);
    position: relative;
    overflow: hidden;
}

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

.snb-stat-card .stat-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--snb-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.snb-stat-card .stat-icon.icon-primary {
    background: var(--snb-primary-100);
    color: var(--snb-primary);
}

.snb-stat-card .stat-icon.icon-accent {
    background: rgba(245, 158, 11, 0.1);
    color: var(--snb-accent);
}

.snb-stat-card .stat-icon.icon-info {
    background: rgba(59, 130, 246, 0.1);
    color: var(--snb-info);
}

.snb-stat-card .stat-icon.icon-danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--snb-danger);
}

.snb-stat-card .stat-icon.icon-success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--snb-success);
}

.snb-stat-card .stat-value {
    font-family: var(--snb-font-display);
    font-weight: 800;
    font-size: 1.75rem;
    color: var(--snb-gray-900);
    line-height: 1.2;
    margin-bottom: 4px;
}

.snb-stat-card .stat-label {
    font-size: 13px;
    color: var(--snb-gray-500);
    font-weight: 500;
}

.snb-stat-card .stat-change {
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}

.snb-stat-card .stat-change.up {
    color: var(--snb-success);
}

.snb-stat-card .stat-change.down {
    color: var(--snb-danger);
}

/* ============================================================
   DASHBOARD SIDEBAR
   ============================================================ */
.snb-dashboard-layout {
    display: flex;
    min-height: calc(100vh - var(--snb-header-height));
}

.snb-sidebar {
    width: var(--snb-sidebar-width);
    background: var(--snb-white);
    border-right: 1px solid var(--snb-gray-100);
    position: fixed;
    top: var(--snb-header-height);
    left: 0;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1030;
    transition: transform var(--snb-transition-base);
    scrollbar-width: thin;
    scrollbar-color: var(--snb-gray-200) transparent;
}

.snb-sidebar::-webkit-scrollbar {
    width: 4px;
}

.snb-sidebar::-webkit-scrollbar-thumb {
    background: var(--snb-gray-200);
    border-radius: 4px;
}

.snb-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

/* Sidebar Navigation */
.snb-sidebar-nav {
    padding: 0.75rem 0 1.5rem;
}

.snb-sidebar-section {
    margin-bottom: 0.25rem;
}

.snb-sidebar-heading {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--snb-gray-400);
    padding: 1rem 1.25rem 0.5rem;
    line-height: 1;
}

.snb-sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 1.25rem;
    margin: 1px 0.625rem;
    color: var(--snb-gray-600);
    font-weight: 500;
    font-size: 13.5px;
    transition: all var(--snb-transition-fast);
    border-radius: var(--snb-radius-md);
    text-decoration: none;
    position: relative;
    white-space: nowrap;
}

.snb-sidebar-link:hover {
    background: var(--snb-primary-50);
    color: var(--snb-primary);
    text-decoration: none;
}

.snb-sidebar-link.active {
    background: var(--snb-primary-50);
    color: var(--snb-primary);
    font-weight: 600;
}

.snb-sidebar-link.active::before {
    content: '';
    position: absolute;
    left: -0.625rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 24px;
    background: var(--snb-primary);
    border-radius: 0 3px 3px 0;
}

.snb-sidebar-link i {
    font-size: 1.15rem;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.8;
}

.snb-sidebar-link.active i,
.snb-sidebar-link:hover i {
    opacity: 1;
}

.snb-sidebar-link .badge {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    line-height: 1;
}

.snb-sidebar-link.text-danger {
    color: var(--snb-danger) !important;
}

.snb-sidebar-link.text-danger:hover {
    background: rgba(220, 53, 69, 0.06);
    color: var(--snb-danger) !important;
}

.snb-sidebar-link.text-muted {
    color: var(--snb-gray-500) !important;
}

.snb-sidebar-link.text-muted:hover {
    color: var(--snb-primary) !important;
    background: var(--snb-primary-50);
}

/* Sidebar divider */
.snb-sidebar-section + .snb-sidebar-section {
    border-top: 1px solid var(--snb-gray-100);
    padding-top: 0.25rem;
    margin-top: 0.25rem;
}

.snb-sidebar-section:last-child {
    margin-top: auto;
}

/* Legacy menu classes (backwards compat) */
.snb-sidebar-menu {
    list-style: none;
    padding: 0.75rem 0;
    margin: 0;
}

.snb-sidebar-menu .menu-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--snb-gray-400);
    padding: 1rem 1.25rem 0.5rem;
}

.snb-sidebar-menu .menu-item a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 1.25rem;
    margin: 1px 0.625rem;
    color: var(--snb-gray-600);
    font-weight: 500;
    font-size: 13.5px;
    transition: all var(--snb-transition-fast);
    border-radius: var(--snb-radius-md);
    text-decoration: none;
}

.snb-sidebar-menu .menu-item a:hover {
    background: var(--snb-primary-50);
    color: var(--snb-primary);
}

.snb-sidebar-menu .menu-item a.active {
    background: var(--snb-primary-50);
    color: var(--snb-primary);
    font-weight: 600;
}

.snb-sidebar-menu .menu-item a i {
    font-size: 1.15rem;
    width: 22px;
    text-align: center;
}

.snb-sidebar-menu .menu-item .menu-badge {
    margin-left: auto;
    background: var(--snb-danger);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--snb-radius-full);
}

.snb-dashboard-content,
.snb-main-content {
    flex: 1;
    margin-left: var(--snb-sidebar-width);
    padding: 1.5rem 2rem;
    min-width: 0;
}

/* ============================================================
   TABLES
   ============================================================ */
.snb-table {
    width: 100%;
    border-collapse: collapse;
}

.snb-table thead th {
    background: var(--snb-gray-50);
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--snb-gray-500);
    border-bottom: 2px solid var(--snb-gray-200);
    white-space: nowrap;
}

.snb-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--snb-gray-100);
    font-size: 14px;
    vertical-align: middle;
}

.snb-table tbody tr:hover {
    background: var(--snb-gray-50);
}

.snb-table tbody tr:last-child td {
    border-bottom: none;
}

/* ============================================================
   FORMS
   ============================================================ */
.snb-form-group {
    margin-bottom: 1.25rem;
}

.snb-form-label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--snb-gray-700);
    margin-bottom: 6px;
}

.snb-form-control {
    width: 100%;
    padding: 11px 16px;
    border: 2px solid var(--snb-gray-200);
    border-radius: var(--snb-radius-sm);
    font-size: 14px;
    color: var(--snb-gray-800);
    background: var(--snb-white);
    transition: all var(--snb-transition-fast);
}

.snb-form-control:focus {
    outline: none;
    border-color: var(--snb-primary);
    box-shadow: 0 0 0 3px var(--snb-primary-100);
}

.snb-form-control::placeholder {
    color: var(--snb-gray-400);
}

.snb-form-select {
    width: 100%;
    padding: 11px 40px 11px 16px;
    border: 2px solid var(--snb-gray-200);
    border-radius: var(--snb-radius-sm);
    font-size: 14px;
    color: var(--snb-gray-800);
    background: var(--snb-white) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right 14px center / 12px;
    appearance: none;
    transition: all var(--snb-transition-fast);
    cursor: pointer;
}

.snb-form-select:focus {
    outline: none;
    border-color: var(--snb-primary);
    box-shadow: 0 0 0 3px var(--snb-primary-100);
}

.snb-form-textarea {
    min-height: 120px;
    resize: vertical;
}

.form-error {
    font-size: 12px;
    color: var(--snb-danger);
    margin-top: 4px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.snb-footer {
    background: #0D3320;
    color: rgba(255,255,255,0.65);
    position: relative;
    overflow: hidden;
}

/* ── Newsletter band ── */
.snb-footer-newsletter-band {
    padding: 48px 0 40px;
}
.snb-footer-nl-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}
.snb-footer-nl-title {
    font-family: var(--snb-font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.snb-footer-nl-sub {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.6);
    margin: 0 0 12px;
}
.snb-footer-nl-form {
    display: flex;
    gap: 0;
    width: 100%;
    max-width: 580px;
}
.snb-footer-nl-form input {
    flex: 1;
    padding: 14px 20px;
    border: 1.5px solid rgba(255,255,255,0.18);
    border-right: none;
    border-radius: 50px 0 0 50px;
    background: rgba(255,255,255,0.07);
    color: #fff;
    font-size: 0.9rem;
    outline: none;
}
.snb-footer-nl-form input::placeholder { color: rgba(255,255,255,0.4); }
.snb-footer-nl-form input:focus { border-color: rgba(255,255,255,0.4); }
.snb-footer-nl-form button {
    padding: 14px 28px;
    border: none;
    border-radius: 0 50px 50px 0;
    background: var(--snb-primary);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}
.snb-footer-nl-form button:hover { background: var(--snb-primary-dark); }

/* ── Divider ── */
.snb-footer-divider {
    border-top: 1px solid rgba(255,255,255,0.1);
    margin: 0;
}

/* ── Main columns ── */
.snb-footer-main {
    padding: 56px 0 48px;
    position: relative;
}

/* ── Decorative rings ── */
.snb-footer-decor {
    position: absolute;
    right: -80px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
.snb-footer-decor-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.07);
}
.snb-footer-decor-ring-1 { width: 420px; height: 420px; top: -210px; right: 0; }
.snb-footer-decor-ring-2 { width: 280px; height: 280px; top: -140px; right: 70px; }
.snb-footer-decor-ring-3 { width: 160px; height: 160px; top: -80px;  right: 140px; }

/* ── Brand column ── */
.snb-footer-brand-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin-bottom: 16px;
}
.snb-footer-logo-img {
    height: 40px;
    width: auto;
    object-fit: contain;
}
.snb-footer-brand-name {
    font-family: var(--snb-font-display);
    font-weight: 800;
    font-size: 1.1rem;
    color: #fff;
}
.snb-footer-desc {
    font-size: 0.875rem;
    line-height: 1.75;
    color: rgba(255,255,255,0.6);
    margin-bottom: 20px;
    max-width: 320px;
}

/* ── Social icons ── */
.snb-footer-socials {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
}
.snb-footer-socials a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.snb-footer-socials a:hover { background: var(--snb-primary); color: #fff; }

/* ── App badges ── */
.snb-footer-app-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.snb-footer-app-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.snb-footer-app-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #111;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    transition: background 0.2s;
    min-width: 130px;
}
.snb-footer-app-btn:hover { background: #222; color: #fff; }
.snb-footer-app-btn i { font-size: 1.4rem; }
.snb-footer-app-btn span { display: flex; flex-direction: column; line-height: 1.2; font-size: 0.85rem; font-weight: 600; }
.snb-footer-app-btn span small { font-size: 0.65rem; font-weight: 400; color: rgba(255,255,255,0.65); }

/* ── Link columns ── */
.snb-footer-col-title {
    font-family: var(--snb-font-display);
    font-weight: 700;
    color: #fff;
    font-size: 0.95rem;
    margin-bottom: 20px;
}
.snb-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.snb-footer-links li { margin-bottom: 11px; }
.snb-footer-links a {
    color: rgba(255,255,255,0.6);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.18s, padding-left 0.18s;
}
.snb-footer-links a:hover { color: #fff; padding-left: 3px; }

/* ── Contact info in support column ── */
.snb-footer-contact-info {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.snb-footer-contact-info p {
    margin: 0;
    font-size: 0.875rem;
    color: rgba(255,255,255,0.65);
    display: flex;
    align-items: center;
    gap: 8px;
}
.snb-footer-contact-info p i { font-size: 0.95rem; }
.snb-footer-contact-info a { color: rgba(255,255,255,0.65); text-decoration: underline; }
.snb-footer-contact-info a:hover { color: #fff; }

/* ── Bottom bar ── */
.snb-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 18px 0;
}
.snb-footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.45);
}
.snb-footer-bottom-brand { font-weight: 600; color: rgba(255,255,255,0.55); }
.snb-footer-bottom-copy  { flex: 1; text-align: center; }
.snb-footer-bottom-links { display: flex; gap: 20px; }
.snb-footer-bottom-links a { color: rgba(255,255,255,0.45); text-decoration: none; transition: color 0.18s; }
.snb-footer-bottom-links a:hover { color: #fff; }

@media (max-width: 768px) {
    .snb-footer-nl-form { flex-direction: column; border-radius: 12px; overflow: hidden; }
    .snb-footer-nl-form input  { border-right: 1.5px solid rgba(255,255,255,0.18); border-bottom: none; border-radius: 12px 12px 0 0; }
    .snb-footer-nl-form button { border-radius: 0 0 12px 12px; }
    .snb-footer-decor          { display: none; }
    .snb-footer-bottom-inner   { flex-direction: column; text-align: center; }
    .snb-footer-bottom-copy    { order: 2; }
    .snb-footer-bottom-brand   { order: 1; }
    .snb-footer-bottom-links   { order: 3; }
}



/* ============================================================
   AUTH PAGES
   ============================================================ */
.snb-auth-section {
    min-height: calc(100vh - 160px);
    display: flex;
    align-items: center;
    padding: 48px 0;
    background: #f5f5f0;
}

.snb-auth-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 40px rgba(0,0,0,0.08);
    padding: 40px 36px 36px;
    width: 100%;
}

.snb-auth-title {
    font-family: var(--snb-font-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: #0d1a12;
    margin: 0;
}
.snb-auth-subtitle {
    color: #6B7280;
    font-size: 0.9rem;
    margin: 4px 0 0;
}

/* ── Tab switcher ── */
.snb-auth-tabs {
    display: flex;
    background: #F3F4F6;
    border-radius: 10px;
    padding: 4px;
    gap: 4px;
}
.snb-auth-tab {
    flex: 1;
    padding: 9px 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 500;
    color: #6B7280;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
}
.snb-auth-tab.active {
    background: #1E6B3C;
    color: #fff;
    font-weight: 600;
}

/* ── Input fields ── */
.snb-auth-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}
.snb-auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.snb-auth-input-icon {
    position: absolute;
    left: 14px;
    color: #9CA3AF;
    font-size: 0.95rem;
    pointer-events: none;
}
.snb-auth-input {
    width: 100%;
    padding: 12px 14px 12px 40px;
    border: 1.5px solid #E5E7EB;
    border-radius: 10px;
    font-size: 0.9rem;
    color: #111827;
    background: #fff;
    outline: none;
    transition: border-color 0.18s;
}
.snb-auth-input:focus { border-color: #1E6B3C; }
.snb-auth-input::placeholder { color: #9CA3AF; }
.snb-auth-input-pw { padding-right: 44px; }
.snb-auth-eye-btn {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: #9CA3AF;
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
    line-height: 1;
}

/* ── Remember / forgot ── */
.snb-auth-remember {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85rem;
    color: #6B7280;
    cursor: pointer;
}
.snb-auth-remember input { accent-color: #1E6B3C; }
.snb-auth-forgot {
    font-size: 0.85rem;
    color: #1E6B3C;
    text-decoration: none;
    font-weight: 500;
}
.snb-auth-forgot:hover { text-decoration: underline; }

/* ── Submit button ── */
.snb-auth-submit-btn {
    width: 100%;
    padding: 13px;
    background: #1E6B3C;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.18s;
}
.snb-auth-submit-btn:hover { background: #155230; }

/* ── Password hint ── */
.snb-auth-hint {
    font-size: 0.78rem;
    color: #9CA3AF;
    margin-top: -4px;
}

/* ── Terms checkbox ── */
.snb-auth-terms {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.83rem;
    color: #6B7280;
    cursor: pointer;
    line-height: 1.5;
}
.snb-auth-terms input[type="checkbox"] {
    margin-top: 2px;
    accent-color: #1E6B3C;
    flex-shrink: 0;
}
.snb-auth-terms a { color: #1E6B3C; text-decoration: none; font-weight: 500; }
.snb-auth-terms a:hover { text-decoration: underline; }

/* ── Divider ── */
.snb-auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #9CA3AF;
    font-size: 0.85rem;
}
.snb-auth-divider::before,
.snb-auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #E5E7EB;
}

/* ── Social buttons ── */
.snb-auth-social-btns {
    display: flex;
    gap: 12px;
}
.snb-auth-social-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    background: #fff;
    border: 1.5px solid #E5E7EB;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s;
}
.snb-auth-social-btn:hover { border-color: #9CA3AF; background: #F9FAFB; }

/* ── Register link below card ── */
.snb-auth-register-link {
    text-align: center;
    margin-top: 20px;
    font-size: 0.88rem;
    color: #6B7280;
}
.snb-auth-register-link a {
    color: #1E6B3C;
    font-weight: 600;
    text-decoration: none;
}
.snb-auth-register-link a:hover { text-decoration: underline; }

@media (max-width: 576px) {
    .snb-auth-card { padding: 28px 20px 24px; border-radius: 16px; }
    .snb-auth-social-btns { flex-direction: column; }
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.snb-breadcrumb {
    padding: 1rem 0;
    margin-bottom: 0.5rem;
}

.snb-breadcrumb ol {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 8px;
    font-size: 13px;
    flex-wrap: wrap;
}

.snb-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--snb-gray-500);
}

.snb-breadcrumb li a {
    color: var(--snb-gray-500);
}

.snb-breadcrumb li a:hover {
    color: var(--snb-primary);
}

.snb-breadcrumb li.active {
    color: var(--snb-gray-700);
    font-weight: 500;
}

.snb-breadcrumb li + li::before {
    content: '\F285';
    font-family: 'bootstrap-icons';
    font-size: 10px;
    color: var(--snb-gray-300);
}

/* ============================================================
   CART & CHECKOUT
   ============================================================ */
.snb-cart-item {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--snb-gray-100);
    align-items: center;
}

.snb-cart-item:last-child {
    border-bottom: none;
}

.snb-cart-item .cart-item-image {
    width: 80px;
    height: 80px;
    border-radius: var(--snb-radius-sm);
    object-fit: cover;
    border: 1px solid var(--snb-gray-200);
}

.snb-cart-item .cart-item-details {
    flex: 1;
    min-width: 0;
}

.snb-cart-item .cart-item-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--snb-gray-800);
    margin-bottom: 4px;
}

.snb-cart-item .cart-item-price {
    font-weight: 700;
    color: var(--snb-primary);
    font-size: 15px;
}

.snb-quantity-control {
    display: inline-flex;
    align-items: center;
    border: 2px solid var(--snb-gray-200);
    border-radius: var(--snb-radius-sm);
    overflow: hidden;
}

.snb-quantity-control button {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--snb-gray-50);
    color: var(--snb-gray-600);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--snb-transition-fast);
}

.snb-quantity-control button:hover {
    background: var(--snb-primary-100);
    color: var(--snb-primary);
}

.snb-quantity-control input {
    width: 50px;
    height: 36px;
    border: none;
    border-left: 2px solid var(--snb-gray-200);
    border-right: 2px solid var(--snb-gray-200);
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: var(--snb-gray-800);
}

.snb-quantity-control input:focus {
    outline: none;
}

/* Order Summary */
.snb-order-summary {
    background: var(--snb-white);
    border: 2px solid var(--snb-gray-200);
    border-radius: var(--snb-radius-md);
    padding: 1.5rem;
}

.snb-order-summary .summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    color: var(--snb-gray-600);
}

.snb-order-summary .summary-row.total {
    border-top: 2px solid var(--snb-gray-200);
    padding-top: 1rem;
    margin-top: 0.5rem;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--snb-gray-900);
}

.snb-order-summary .summary-row.total .amount {
    color: var(--snb-primary);
    font-family: var(--snb-font-display);
    font-size: 1.25rem;
}

/* ============================================================
   PRODUCT DETAIL PAGE
   ============================================================ */
.snb-product-gallery {
    position: relative;
}

.snb-product-gallery .main-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--snb-radius-md);
    border: 1px solid var(--snb-gray-200);
    cursor: zoom-in;
}

.snb-product-gallery .thumbnail-list {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.snb-product-gallery .thumbnail-item {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: var(--snb-radius-sm);
    overflow: hidden;
    border: 2px solid var(--snb-gray-200);
    cursor: pointer;
    transition: border-color var(--snb-transition-fast);
}

.snb-product-gallery .thumbnail-item.active,
.snb-product-gallery .thumbnail-item:hover {
    border-color: var(--snb-primary);
}

.snb-product-gallery .thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.snb-product-detail .product-title {
    font-family: var(--snb-font-display);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--snb-gray-900);
    line-height: 1.3;
    margin-bottom: 0.75rem;
}

.snb-product-detail .product-price-block {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.snb-product-detail .price-current {
    font-family: var(--snb-font-display);
    font-weight: 800;
    font-size: 2rem;
    color: var(--snb-primary);
}

.snb-product-detail .price-original {
    font-size: 1.1rem;
    color: var(--snb-gray-400);
    text-decoration: line-through;
}

.snb-product-detail .price-discount {
    padding: 4px 12px;
    border-radius: var(--snb-radius-full);
    background: rgba(239, 68, 68, 0.1);
    color: var(--snb-danger);
    font-size: 13px;
    font-weight: 700;
}

.snb-product-detail .product-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 1.25rem 0;
    border-top: 1px solid var(--snb-gray-100);
    border-bottom: 1px solid var(--snb-gray-100);
    margin-bottom: 1.25rem;
}

.snb-product-detail .product-meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--snb-gray-600);
}

.snb-product-detail .product-meta-item i {
    color: var(--snb-primary);
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.snb-product-detail .stock-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 13px;
}

.snb-product-detail .stock-status.in-stock {
    color: var(--snb-success);
}

.snb-product-detail .stock-status.low-stock {
    color: var(--snb-warning);
}

.snb-product-detail .stock-status.out-of-stock {
    color: var(--snb-danger);
}

.snb-product-detail .add-to-cart-section {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

/* ============================================================
   REVIEWS SECTION
   ============================================================ */
.snb-review-card {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--snb-gray-100);
}

.snb-review-card:last-child {
    border-bottom: none;
}

.snb-review-card .reviewer-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.snb-review-card .reviewer-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--snb-radius-full);
    object-fit: cover;
}

.snb-review-card .reviewer-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--snb-gray-800);
}

.snb-review-card .review-date {
    font-size: 12px;
    color: var(--snb-gray-400);
}

.snb-review-card .review-text {
    font-size: 14px;
    color: var(--snb-gray-600);
    line-height: 1.6;
    margin-top: 8px;
}

/* ============================================================
   TRUST / FEATURE BADGES
   ============================================================ */
.snb-trust-badges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    padding: 2.5rem 0;
}

.snb-trust-badge {
    text-align: center;
    padding: 1.5rem;
}

.snb-trust-badge .badge-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--snb-radius-full);
    background: var(--snb-primary-50);
    color: var(--snb-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin: 0 auto 12px;
}

.snb-trust-badge h6 {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--snb-gray-800);
    margin-bottom: 4px;
}

.snb-trust-badge p {
    font-size: 13px;
    color: var(--snb-gray-500);
    margin-bottom: 0;
}

/* ============================================================
   LOADING / ANIMATIONS
   ============================================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

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

.animate-fadeInUp {
    animation: fadeInUp 0.5s ease-out;
}

.animate-fadeIn {
    animation: fadeIn 0.3s ease-out;
}

.snb-skeleton {
    background: linear-gradient(90deg, var(--snb-gray-200) 25%, var(--snb-gray-100) 50%, var(--snb-gray-200) 75%);
    background-size: 200% 100%;
    animation: pulse 1.5s ease-in-out infinite;
    border-radius: var(--snb-radius-sm);
}

.snb-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--snb-gray-200);
    border-top-color: var(--snb-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Loading Overlay */
.snb-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity var(--snb-transition-base);
}

/* Toast / Notification */
.snb-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.snb-toast {
    padding: 14px 20px;
    border-radius: var(--snb-radius-sm);
    background: var(--snb-white);
    box-shadow: var(--snb-shadow-xl);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px;
    animation: slideInRight 0.3s ease-out;
    border-left: 4px solid var(--snb-primary);
}

.snb-toast.toast-success { border-left-color: var(--snb-success); }
.snb-toast.toast-error { border-left-color: var(--snb-danger); }
.snb-toast.toast-warning { border-left-color: var(--snb-warning); }

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    .snb-sidebar {
        transform: translateX(-100%);
        box-shadow: none;
    }

    .snb-sidebar.show {
        transform: translateX(0);
        box-shadow: var(--snb-shadow-xl);
    }

    .snb-dashboard-content,
    .snb-main-content {
        margin-left: 0;
        padding: 1rem;
    }

    .snb-hero .snb-hero-slide {
        min-height: 320px;
    }

    .snb-hero-content h1 {
        font-size: 2rem;
    }
}

@media (max-width: 767px) {
    .snb-topbar {
        display: none;
    }

    .snb-hero .snb-hero-slide {
        min-height: 260px;
    }

    .snb-hero-content {
        padding: 1.5rem;
    }

    .snb-hero-content h1 {
        font-size: 1.5rem;
    }

    .snb-hero-content p {
        font-size: 0.9rem;
    }

    .snb-hero-content .btn-hero {
        padding: 10px 22px;
        font-size: 13px;
    }

    .snb-section-header h2 {
        font-size: 1.2rem;
    }

    .snb-product-card .product-info {
        padding: 12px;
    }

    .snb-product-card .current-price {
        font-size: 1rem;
    }

    .snb-product-detail .product-title {
        font-size: 1.3rem;
    }

    .snb-product-detail .price-current {
        font-size: 1.5rem;
    }

    .snb-auth-card {
        padding: 2rem 1.5rem;
    }

    .snb-dashboard-content,
    .snb-main-content {
        padding: 1rem;
    }

    .snb-footer-top {
        text-align: center;
    }

    .snb-footer .social-links {
        justify-content: center;
    }

    .snb-footer-newsletter .newsletter-input-group {
        flex-direction: column;
    }

    .snb-cart-item {
        flex-direction: column;
        text-align: center;
    }

    .snb-trust-badges {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .snb-trust-badges {
        grid-template-columns: 1fr;
    }

    .btn-hero-outline {
        margin-left: 0;
        margin-top: 8px;
    }
}

/* ============================================================
   SIDEBAR OVERLAY FOR MOBILE
   ============================================================ */
.snb-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1029;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: opacity var(--snb-transition-base);
}

.snb-sidebar-overlay.show {
    display: block;
}

/* Mobile Menu Toggle */
.snb-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--snb-gray-700);
    font-size: 1.4rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--snb-radius-sm);
}

@media (max-width: 991px) {
    .snb-menu-toggle {
        display: flex;
    }
}

/* ============================================================
   SCROLL TO TOP
   ============================================================ */
.snb-scroll-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: var(--snb-radius-full);
    background: var(--snb-primary);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all var(--snb-transition-base);
    box-shadow: var(--snb-shadow-lg);
}

.snb-scroll-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.snb-scroll-top:hover {
    background: var(--snb-primary-dark);
    transform: translateY(-2px);
}

/* ============================================================
   VENDOR STORE PAGE
   ============================================================ */
.snb-store-header {
    background: linear-gradient(135deg, var(--snb-primary) 0%, var(--snb-primary-dark) 100%);
    border-radius: var(--snb-radius-lg);
    padding: 2.5rem;
    color: white;
    position: relative;
    overflow: hidden;
    margin-bottom: 2rem;
}

.snb-store-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
}

.snb-store-header .store-logo {
    width: 80px;
    height: 80px;
    border-radius: var(--snb-radius-lg);
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.3);
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.snb-empty-state {
    text-align: center;
    padding: 3rem 2rem;
}

.snb-empty-state .empty-icon {
    width: 80px;
    height: 80px;
    border-radius: var(--snb-radius-full);
    background: var(--snb-gray-100);
    color: var(--snb-gray-400);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 1.5rem;
}

.snb-empty-state h5 {
    font-family: var(--snb-font-display);
    font-weight: 700;
    color: var(--snb-gray-700);
    margin-bottom: 0.5rem;
}

.snb-empty-state p {
    color: var(--snb-gray-500);
    font-size: 14px;
    margin-bottom: 1.5rem;
}

/* ============================================================
   CUSTOM SCROLLBAR
   ============================================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--snb-gray-100);
}

::-webkit-scrollbar-thumb {
    background: var(--snb-gray-300);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--snb-gray-400);
}

/* ============================================================
   MISCELLANEOUS UTILITIES
   ============================================================ */
.text-snb-primary { color: var(--snb-primary) !important; }
.text-snb-accent { color: var(--snb-accent) !important; }
.bg-snb-primary { background-color: var(--snb-primary) !important; }
.bg-snb-accent { background-color: var(--snb-accent) !important; }
.bg-snb-gray-50 { background-color: var(--snb-gray-50) !important; }

.rounded-snb { border-radius: var(--snb-radius-md) !important; }
.rounded-snb-lg { border-radius: var(--snb-radius-lg) !important; }

.shadow-snb { box-shadow: var(--snb-shadow-md) !important; }
.shadow-snb-lg { box-shadow: var(--snb-shadow-lg) !important; }

.font-display { font-family: var(--snb-font-display) !important; }
.font-mono { font-family: var(--snb-font-mono) !important; }

.hover-lift { transition: transform var(--snb-transition-base); }
.hover-lift:hover { transform: translateY(-4px); }

.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ============================================================
   VENDOR STORE PAGE — REDESIGN
   ============================================================ */

/* ----- Hero Banner ----- */
.snb-store-hero {
    position: relative;
    background: linear-gradient(135deg, #006940 0%, #008751 40%, #00a862 100%);
    border-radius: var(--snb-radius-xl);
    padding: 48px 40px;
    color: #fff;
    overflow: hidden;
    min-height: 220px;
}
.snb-store-hero[style*="--store-banner"] {
    background: var(--store-banner) center/cover no-repeat;
}
.snb-store-hero[style*="--store-banner"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,105,64,0.88) 0%, rgba(0,135,81,0.78) 50%, rgba(0,168,98,0.68) 100%);
    z-index: 1;
}

/* Decorative shapes */
.store-hero-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}
.store-hero-shapes .shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
}
.store-hero-shapes .shape-1 {
    width: 300px; height: 300px;
    top: -100px; right: -60px;
}
.store-hero-shapes .shape-2 {
    width: 180px; height: 180px;
    bottom: -60px; left: 10%;
}
.store-hero-shapes .shape-3 {
    width: 100px; height: 100px;
    top: 20%; right: 25%;
    background: rgba(245,158,11,0.12);
}

/* Hero content */
.store-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 28px;
}

.store-hero-avatar {
    position: relative;
    flex-shrink: 0;
}
.store-hero-avatar img {
    width: 100px;
    height: 100px;
    border-radius: 20px;
    object-fit: cover;
    border: 4px solid rgba(255,255,255,0.3);
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    background: #fff;
}
.store-hero-avatar .verified-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 28px;
    height: 28px;
    background: var(--snb-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.store-hero-name {
    font-family: var(--snb-font-display);
    font-weight: 800;
    font-size: 1.75rem;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.store-hero-desc {
    font-size: 0.95rem;
    opacity: 0.85;
    margin-bottom: 12px;
    max-width: 550px;
    line-height: 1.5;
}

.store-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: var(--snb-radius-full);
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(6px);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: background var(--snb-transition-fast);
}
.meta-chip:hover {
    background: rgba(255,255,255,0.25);
}
.meta-chip i {
    font-size: 13px;
}
.meta-chip-highlight {
    background: rgba(245,158,11,0.25);
}
.meta-chip-highlight i {
    color: var(--snb-accent-light);
}
.meta-chip-sub {
    opacity: 0.7;
    font-size: 12px;
}

/* ----- Stats Bar ----- */
.snb-store-stats {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--snb-white);
    border-radius: var(--snb-radius-lg);
    padding: 20px 16px;
    box-shadow: var(--snb-shadow-md);
    border: 1px solid var(--snb-gray-100);
    overflow-x: auto;
}

.store-stat-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    min-width: 120px;
    padding: 0 12px;
}
.store-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--snb-primary-100);
    color: var(--snb-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.store-stat-icon-gold {
    background: rgba(245,158,11,0.12);
    color: var(--snb-accent-dark);
}
.store-stat-icon-blue {
    background: rgba(59,130,246,0.1);
    color: var(--snb-info);
}
.store-stat-icon-rose {
    background: rgba(239,68,68,0.08);
    color: var(--snb-danger);
}
.store-stat-icon-purple {
    background: rgba(139,92,246,0.1);
    color: #7C3AED;
}

.store-stat-body {
    display: flex;
    flex-direction: column;
}
.store-stat-value {
    font-family: var(--snb-font-display);
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--snb-gray-800);
    line-height: 1.2;
}
.store-stat-label {
    font-size: 12px;
    color: var(--snb-gray-500);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.store-stat-divider {
    width: 1px;
    height: 36px;
    background: var(--snb-gray-200);
    flex-shrink: 0;
}

/* ----- Toolbar (Category Pills + Sort) ----- */
.snb-store-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.store-category-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
}
.category-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: var(--snb-radius-full);
    background: var(--snb-white);
    color: var(--snb-gray-600);
    font-size: 13px;
    font-weight: 600;
    border: 1.5px solid var(--snb-gray-200);
    text-decoration: none;
    transition: all var(--snb-transition-fast);
    white-space: nowrap;
}
.category-pill:hover {
    border-color: var(--snb-primary-200);
    color: var(--snb-primary);
    background: var(--snb-primary-50);
}
.category-pill.active {
    background: var(--snb-primary);
    color: #fff;
    border-color: var(--snb-primary);
    box-shadow: 0 4px 12px rgba(0,135,81,0.25);
}
.category-pill.active .pill-count {
    background: rgba(255,255,255,0.25);
    color: #fff;
}
.pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--snb-radius-full);
    background: var(--snb-gray-100);
    color: var(--snb-gray-500);
    font-size: 11px;
    font-weight: 700;
}

.store-toolbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.toolbar-count {
    font-size: 13px;
    color: var(--snb-gray-500);
    font-weight: 500;
    white-space: nowrap;
}

/* Sort dropdown */
.store-sort-dropdown {
    position: relative;
}
.store-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: var(--snb-radius-full);
    background: var(--snb-white);
    border: 1.5px solid var(--snb-gray-200);
    color: var(--snb-gray-700);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--snb-transition-fast);
    white-space: nowrap;
}
.store-sort-btn:hover {
    border-color: var(--snb-primary-200);
    color: var(--snb-primary);
}
.store-sort-btn.open {
    border-color: var(--snb-primary);
    box-shadow: 0 0 0 3px var(--snb-primary-100);
}
.store-sort-btn .sort-chevron {
    font-size: 11px;
    transition: transform var(--snb-transition-fast);
}
.store-sort-btn.open .sort-chevron {
    transform: rotate(180deg);
}

.store-sort-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: var(--snb-white);
    border: 1px solid var(--snb-gray-100);
    border-radius: var(--snb-radius-md);
    box-shadow: var(--snb-shadow-xl);
    padding: 6px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--snb-transition-fast);
}
.store-sort-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sort-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--snb-radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--snb-gray-600);
    text-decoration: none;
    transition: background var(--snb-transition-fast);
}
.sort-option:hover {
    background: var(--snb-gray-50);
    color: var(--snb-gray-800);
}
.sort-option.active {
    background: var(--snb-primary-50);
    color: var(--snb-primary);
    font-weight: 600;
}
.sort-option i:first-child {
    width: 18px;
    text-align: center;
    font-size: 14px;
}

/* ----- Store Product Card ----- */
.snb-store-card {
    background: var(--snb-white);
    border-radius: var(--snb-radius-md);
    overflow: hidden;
    border: 1px solid var(--snb-gray-100);
    transition: all var(--snb-transition-base);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}
.snb-store-card:hover {
    border-color: var(--snb-primary-200);
    box-shadow: 0 12px 28px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
    transform: translateY(-6px);
}

.store-card-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--snb-gray-50);
}
.store-card-image a {
    display: block;
    width: 100%;
    height: 100%;
}
.store-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.snb-store-card:hover .store-card-image img {
    transform: scale(1.08);
}

/* Badges */
.store-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    border-radius: var(--snb-radius-full);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 3;
}
.store-card-badge.badge-discount {
    background: var(--snb-danger);
    color: #fff;
}
.store-card-badge.badge-featured {
    background: linear-gradient(135deg, var(--snb-accent), var(--snb-accent-dark));
    color: #fff;
    top: auto;
    bottom: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.store-card-badge.badge-discount + .store-card-badge.badge-featured {
    top: 40px;
    bottom: auto;
}

/* Hover overlay actions */
.store-card-overlay {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transform: translateX(12px);
    transition: all var(--snb-transition-base);
    z-index: 3;
}
.snb-store-card:hover .store-card-overlay {
    opacity: 1;
    transform: translateX(0);
}

.store-card-action {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--snb-white);
    color: var(--snb-gray-600);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all var(--snb-transition-fast);
    font-size: 16px;
    text-decoration: none;
}
.store-card-action:hover {
    background: var(--snb-primary);
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0,135,81,0.3);
}
.store-card-action.wishlisted {
    background: var(--snb-danger);
    color: #fff;
}

/* Quick add slide-up */
.store-card-quick-add {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%);
    transform: translateY(100%);
    transition: transform var(--snb-transition-base);
    z-index: 3;
}
.snb-store-card:hover .store-card-quick-add {
    transform: translateY(0);
}

.store-quick-add-btn {
    width: 100%;
    padding: 10px 16px;
    border: none;
    border-radius: var(--snb-radius-sm);
    background: var(--snb-white);
    color: var(--snb-primary);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all var(--snb-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    letter-spacing: 0.02em;
}
.store-quick-add-btn:hover {
    background: var(--snb-primary);
    color: #fff;
    box-shadow: 0 4px 16px rgba(0,135,81,0.3);
}

/* Card body */
.store-card-body {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.store-card-category {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--snb-primary);
    margin-bottom: 6px;
    opacity: 0.8;
}

.store-card-title {
    font-family: var(--snb-font-display);
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.store-card-title a {
    color: var(--snb-gray-800);
    text-decoration: none;
    transition: color var(--snb-transition-fast);
}
.snb-store-card:hover .store-card-title a {
    color: var(--snb-primary);
}

.store-card-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}
.store-card-rating .rating-stars {
    display: flex;
    gap: 1px;
}
.store-card-rating .rating-stars i {
    font-size: 12px;
    color: var(--snb-accent);
}
.store-card-rating .rating-stars .bi-star {
    color: var(--snb-gray-300);
}
.store-card-rating .rating-text {
    font-size: 12px;
    color: var(--snb-gray-400);
    font-weight: 500;
}

.store-card-price {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.store-price-current {
    font-family: var(--snb-font-display);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--snb-primary);
}
.store-price-old {
    font-size: 0.85rem;
    color: var(--snb-gray-400);
    text-decoration: line-through;
}

/* ----- Empty State ----- */
.snb-store-empty {
    text-align: center;
    padding: 60px 20px;
    background: var(--snb-white);
    border-radius: var(--snb-radius-lg);
    border: 2px dashed var(--snb-gray-200);
}
.store-empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--snb-gray-50);
    display: flex;
    align-items: center;
    justify-content: center;
}
.store-empty-icon i {
    font-size: 36px;
    color: var(--snb-gray-400);
}
.snb-store-empty h3 {
    font-family: var(--snb-font-display);
    font-weight: 700;
    color: var(--snb-gray-700);
    margin-bottom: 8px;
}
.snb-store-empty p {
    color: var(--snb-gray-500);
    max-width: 360px;
    margin: 0 auto 24px;
    font-size: 14px;
}
.store-empty-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Store page buttons */
.snb-store-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 28px;
    border-radius: var(--snb-radius-full);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all var(--snb-transition-base);
    text-decoration: none;
    border: 2px solid transparent;
}
.snb-store-btn-primary {
    background: var(--snb-primary);
    color: #fff;
    border-color: var(--snb-primary);
}
.snb-store-btn-primary:hover {
    background: var(--snb-primary-dark);
    border-color: var(--snb-primary-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,135,81,0.25);
}
.snb-store-btn-outline {
    background: transparent;
    color: var(--snb-primary);
    border-color: var(--snb-primary);
}
.snb-store-btn-outline:hover {
    background: var(--snb-primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,135,81,0.25);
}

/* ----- Pagination ----- */
.snb-store-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
    flex-wrap: wrap;
}
.pagination-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--snb-radius-full);
    background: var(--snb-white);
    color: var(--snb-gray-700);
    font-size: 13px;
    font-weight: 600;
    border: 1.5px solid var(--snb-gray-200);
    text-decoration: none;
    transition: all var(--snb-transition-fast);
}
.pagination-btn:hover:not(.disabled) {
    border-color: var(--snb-primary);
    color: var(--snb-primary);
    background: var(--snb-primary-50);
}
.pagination-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.pagination-numbers {
    display: flex;
    align-items: center;
    gap: 4px;
}
.page-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--snb-radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--snb-gray-600);
    text-decoration: none;
    transition: all var(--snb-transition-fast);
}
.page-num:hover:not(.page-current) {
    background: var(--snb-gray-100);
    color: var(--snb-gray-800);
}
.page-num.page-current {
    background: var(--snb-primary);
    color: #fff;
    border-radius: var(--snb-radius-sm);
    box-shadow: 0 4px 12px rgba(0,135,81,0.25);
}
.page-dots {
    width: 30px;
    text-align: center;
    color: var(--snb-gray-400);
    font-weight: 600;
}

/* ----- Store Page Responsive ----- */
@media (max-width: 768px) {
    .snb-store-hero {
        padding: 28px 24px;
        border-radius: var(--snb-radius-lg);
    }
    .store-hero-content {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
    .store-hero-avatar img {
        width: 80px;
        height: 80px;
        border-radius: 16px;
    }
    .store-hero-name {
        font-size: 1.35rem;
    }
    .store-hero-desc {
        font-size: 0.85rem;
    }
    .store-hero-meta {
        justify-content: center;
    }
    .meta-chip {
        font-size: 12px;
        padding: 4px 10px;
    }

    .snb-store-stats {
        padding: 16px 8px;
        gap: 0;
        border-radius: var(--snb-radius-md);
    }
    .store-stat-item {
        flex-direction: column;
        gap: 6px;
        text-align: center;
        min-width: 80px;
        padding: 0 6px;
    }
    .store-stat-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        font-size: 15px;
    }
    .store-stat-value {
        font-size: 1rem;
    }
    .store-stat-label {
        font-size: 10px;
    }
    .store-stat-divider {
        height: 28px;
    }

    .snb-store-toolbar {
        flex-direction: column;
    }
    .store-category-pills {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }
    .store-toolbar-right {
        width: 100%;
        justify-content: space-between;
    }

    .store-card-image {
        aspect-ratio: 3 / 4;
    }
    .store-card-body {
        padding: 12px;
    }
    .store-card-title {
        font-size: 0.82rem;
    }
    .store-price-current {
        font-size: 1rem;
    }

    .snb-store-pagination {
        gap: 6px;
    }
    .pagination-btn {
        padding: 8px 14px;
        font-size: 12px;
    }
    .page-num {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .snb-store-hero {
        padding: 24px 16px;
    }
    .store-hero-shapes .shape-1 {
        width: 180px; height: 180px;
    }
    .snb-store-stats {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }
    .store-stat-divider {
        display: none;
    }
    .store-stat-item {
        min-width: 70px;
    }
    .pagination-btn span {
        display: none;
    }
}

/* ============================================================
   FLASH SALES
   ============================================================ */
.snb-flash-sale-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-radius: var(--snb-radius-xl);
    padding: 20px 28px;
    color: white;
}

.flash-sale-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #ef4444, #f97316);
    color: white;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: var(--snb-radius-full);
    white-space: nowrap;
}

.flash-sale-title {
    color: white;
    font-size: 1.4rem;
    font-weight: 700;
    font-family: var(--snb-font-display);
    margin-top: 6px;
}

.flash-ends-label {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 6px;
}

.flash-countdown-wrap {
    text-align: center;
}

.flash-countdown {
    display: flex;
    align-items: center;
    gap: 4px;
}

.countdown-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 6px 12px;
    min-width: 52px;
}

.cd-val {
    font-size: 1.5rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.cd-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
    margin-top: 2px;
}

.countdown-sep {
    font-size: 1.4rem;
    font-weight: 700;
    opacity: 0.5;
    margin-bottom: 14px;
}

.snb-flash-sale-banner {
    background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%);
    border-radius: var(--snb-radius-lg);
    padding: 16px 20px;
    color: white;
}

@media (max-width: 576px) {
    .cd-val { font-size: 1.1rem; }
    .countdown-block { min-width: 42px; padding: 5px 8px; }
    .flash-sale-title { font-size: 1.1rem; }
}

/* ============================================================
   SEARCH AUTOCOMPLETE
   ============================================================ */
.snb-suggestion-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: var(--snb-gray-900);
    border-bottom: 1px solid var(--snb-gray-100);
    transition: background var(--snb-transition-fast);
    outline: none;
}
.snb-suggestion-item:hover,
.snb-suggestion-item:focus {
    background: var(--snb-gray-50);
    color: var(--snb-gray-900);
    text-decoration: none;
}
.snb-suggestion-img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    background: var(--snb-gray-100);
}
.snb-suggestion-info {
    flex: 1;
    min-width: 0;
}
.snb-suggestion-name {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.snb-suggestion-name mark {
    background: rgba(37,99,235,0.15);
    color: var(--snb-primary);
    padding: 0 2px;
    border-radius: 3px;
}
.snb-suggestion-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
}
.snb-suggestion-cat {
    font-size: 11px;
    color: var(--snb-gray-500);
}
.snb-suggestion-badge {
    font-size: 10px;
    font-weight: 700;
    color: white;
    background: var(--snb-danger);
    padding: 1px 6px;
    border-radius: 999px;
}
.snb-suggestion-price {
    text-align: right;
    flex-shrink: 0;
}
.snb-suggestion-current {
    font-size: 13px;
    font-weight: 700;
    color: var(--snb-primary);
}
.snb-suggestion-original {
    font-size: 11px;
    text-decoration: line-through;
    color: var(--snb-gray-400);
}
.snb-suggestion-view-all {
    display: block;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--snb-primary);
    text-decoration: none;
    background: var(--snb-gray-50);
    border-top: 1px solid var(--snb-gray-200);
    text-align: center;
    transition: background var(--snb-transition-fast);
}
.snb-suggestion-view-all:hover,
.snb-suggestion-view-all:focus {
    background: var(--snb-primary-50);
    text-decoration: none;
    color: var(--snb-primary);
    outline: none;
}

/* ═══════════════════════════════════════
   PRODUCT COMPARISON
═══════════════════════════════════════ */
.snb-compare-table { border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.07); }
.snb-compare-table th, .snb-compare-table td { padding: 14px 16px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.snb-compare-table thead th { background: var(--snb-primary); color: #fff; font-weight: 600; }
.snb-compare-table thead th:first-child { background: #fff; color: var(--snb-text); }
.snb-compare-table tbody tr:last-child td { border-bottom: none; }
.snb-compare-table .snb-compare-highlight td { background: #fafafa; }
.snb-compare-product-header { text-align: center; padding: 8px 0; }

/* Compare Tray (floating bottom bar) */
.snb-compare-tray {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1050;
    background: #1a1a2e; color: #fff;
    padding: 10px 20px;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    transform: translateY(100%);
    transition: transform .3s ease;
    box-shadow: 0 -4px 20px rgba(0,0,0,.3);
}
.snb-compare-tray.visible { transform: translateY(0); }
.snb-compare-tray-products { display: flex; gap: 10px; flex: 1; align-items: center; flex-wrap: wrap; }
.snb-compare-tray-item {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.1); border-radius: 8px; padding: 6px 10px;
    font-size: 13px;
}
.snb-compare-tray-item img { width: 36px; height: 36px; object-fit: contain; border-radius: 4px; background: #fff; }
.snb-compare-tray-item .remove-btn { background: none; border: none; color: #f88; cursor: pointer; padding: 0 0 0 4px; font-size: 16px; line-height: 1; }
.snb-compare-tray-label { font-size: 12px; opacity: .7; white-space: nowrap; }
.snb-compare-tray-actions { display: flex; gap: 8px; align-items: center; }

/* Compare button on product cards */
.snb-compare-btn {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--snb-text-muted); background: none; border: none; cursor: pointer; padding: 4px 0;
}
.snb-compare-btn:hover { color: var(--snb-primary); }
.snb-compare-btn.active { color: var(--snb-primary); font-weight: 600; }

/* ============================================================
   ORDER TRACKING TIMELINE
   ============================================================ */
.snb-tracking-timeline { position: relative; padding-left: 8px; }
.snb-tracking-item {
    display: flex;
    gap: 16px;
    position: relative;
    padding-bottom: 24px;
}
.snb-tracking-item:last-child { padding-bottom: 0; }
.snb-tracking-item::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 20px;
    bottom: 0;
    width: 2px;
    background: #e2e8f0;
}
.snb-tracking-item:last-child::before { display: none; }
.snb-tracking-dot {
    flex-shrink: 0;
    width: 16px;
    display: flex;
    align-items: flex-start;
    padding-top: 2px;
    position: relative;
    z-index: 1;
}
.snb-tracking-content {
    flex: 1;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
}
.snb-tracking-latest .snb-tracking-content {
    background: #eff6ff;
    border-color: #bfdbfe;
}
.snb-est-delivery-pulse {
    animation: snb-pulse-green 2s ease-in-out infinite;
}
@keyframes snb-pulse-green {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.3); }
    50%       { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}

/* Public track page */
.snb-track-hero {
    background: linear-gradient(135deg, var(--snb-primary) 0%, #7c3aed 100%);
    padding: 60px 0 40px;
    color: #fff;
}
.snb-track-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
    padding: 32px;
    max-width: 680px;
    margin: -30px auto 0;
}

/* ============================================================
   HOMEPAGE V2 — ALL SECTIONS (FIGMA DESIGN)
   ============================================================ */

/* ── Hero V2 ─────────────────────────────────────────── */
/* ── Hero Section ────────────────────────────────────── */
.snb-hero-section {
    padding: 4px 24px 0;
}

.snb-hero-v2 {
    background: #CFDFD9;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    height: 620px;
}

/* Each slide is absolutely positioned to always fill the container */
.snb-hero-slide {
    display: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    align-items: stretch;
}
.snb-hero-slide.active {
    display: flex;
}

.snb-hero-v2-left {
    flex: 0 0 52%;
    max-width: 52%;
    padding: 60px 48px 60px 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    position: relative;
    z-index: 2;
}

.snb-hero-v2-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #1E6B3C;
    padding: 6px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    width: fit-content;
    border: 1.5px solid rgba(30,107,60,0.45);
}

.snb-hero-v2-title {
    font-family: var(--snb-font-display);
    font-weight: 800;
    font-size: clamp(2.4rem, 4.5vw, 3.6rem);
    color: #0d1a12;
    line-height: 1.08;
    margin: 0;
}

.snb-hero-v2-subtitle {
    font-size: 16px;
    color: #4B5563;
    line-height: 1.65;
    margin: 0;
    max-width: 400px;
}

.snb-hero-v2-btns {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.snb-btn-hero-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #1E6B3C;
    color: white;
    padding: 0 28px;
    height: 54px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    transition: background var(--snb-transition-fast), transform var(--snb-transition-fast);
}
.snb-btn-hero-primary:hover {
    background: #155230;
    color: white;
    transform: translateY(-2px);
}

.snb-btn-hero-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: white;
    color: #0d1a12;
    padding: 0 28px;
    height: 54px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid #CBD5E1;
    transition: all var(--snb-transition-fast);
}
.snb-btn-hero-secondary:hover {
    background: var(--snb-gray-100);
    color: #0d1a12;
    border-color: #94A3B8;
}

.snb-hero-v2-stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.snb-hero-v2-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #4B5563;
    font-weight: 500;
}
.snb-hero-v2-stat::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #D4820A;
    flex-shrink: 0;
}

/* Right panel */
.snb-hero-v2-right {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #CFDFD9;
}

/* Decorative circles */
.snb-hero-decor-circle {
    position: absolute;
    border-radius: 50%;
    background: #1E6B3C;
    pointer-events: none;
}
.snb-hero-decor-main {
    width: 500px; height: 500px;
    top: 50%; left: 50%;
    transform: translate(-50%, -45%);
    z-index: 0;
}
.snb-hero-decor-tr {
    width: 180px; height: 180px;
    top: -60px; right: -60px;
    z-index: 0;
    opacity: 0.55;
}
.snb-hero-decor-br {
    width: 150px; height: 150px;
    bottom: -50px; right: -30px;
    z-index: 0;
    opacity: 0.55;
}

/* Person image — anchored to bottom, centered */
.snb-hero-man-img {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 105%;
    width: auto;
    object-fit: contain;
    z-index: 1;
    pointer-events: none;
}

/* Slider dots — bottom center */
.snb-hero-slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 10;
}
.snb-hero-dot {
    height: 8px;
    border-radius: 999px;
    background: rgba(30,107,60,0.25);
    width: 8px;
    transition: all var(--snb-transition-base);
    cursor: pointer;
    border: none;
    padding: 0;
}
.snb-hero-dot.active {
    background: #1E6B3C;
    width: 28px;
}

/* ── Slider arrows ───────────────────────────────────── */
.snb-hero-arrow {
    display: none; /* hidden on desktop */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #1E6B3C;
    z-index: 20;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
    transition: background 0.18s;
}
.snb-hero-arrow:hover { background: #fff; }
.snb-hero-arrow-prev { left: 14px; }
.snb-hero-arrow-next { right: 14px; }

/* ── Quick Actions ───────────────────────────────────── */
.snb-quick-actions {
    background: white;
    padding: 28px 0;
}

.snb-quick-action-card {
    background: white;
    border-radius: var(--snb-radius-lg);
    padding: 20px 16px;
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-shadow: var(--snb-shadow-sm);
    border: 1px solid var(--snb-gray-100);
    transition: all var(--snb-transition-base);
    cursor: pointer;
}

.snb-quick-action-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--snb-shadow-lg);
    border-color: transparent;
    text-decoration: none;
}

.snb-quick-action-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--snb-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: white;
    flex-shrink: 0;
}

.snb-quick-action-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--snb-text-primary);
    line-height: 1.3;
}

.snb-quick-action-sub {
    font-size: 11px;
    color: var(--snb-text-secondary);
    line-height: 1.3;
}

/* ── Deal of the Day ─────────────────────────────────── */
.snb-deal-of-day {
    background: linear-gradient(135deg, #008751 0%, #1E6B3C 17%, #37834F 33%, #008751 50%, #006B3F 67%, #1E6B3C 83%, #007545 100%);
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    padding: 0;
    min-height: 340px;
}

.snb-deal-left {
    flex: 1;
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
}

.snb-deal-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    padding: 5px 14px;
    border-radius: var(--snb-radius-full);
    font-size: 13px;
    font-weight: 500;
    width: fit-content;
}

.snb-deal-title {
    font-family: var(--snb-font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: white;
    margin: 0;
    line-height: 1.2;
}

.snb-deal-desc {
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    margin: 0;
}

.snb-deal-price-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.snb-deal-price {
    font-size: 2.4rem;
    font-weight: 700;
    color: white;
    line-height: 1;
}

.snb-deal-original {
    font-size: 1rem;
    color: rgba(255,255,255,0.6);
    text-decoration: line-through;
}

.snb-deal-pct-badge {
    background: var(--snb-accent);
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--snb-radius-full);
}

.snb-deal-countdown-label {
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 6px;
}

.snb-deal-countdown {
    display: flex;
    gap: 8px;
    align-items: center;
}

.snb-deal-time-block {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: var(--snb-radius-md);
    padding: 8px 14px;
    text-align: center;
    min-width: 60px;
}

.snb-deal-time-val {
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    line-height: 1;
    display: block;
}

.snb-deal-time-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.snb-deal-time-sep {
    font-size: 1.4rem;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    line-height: 1;
}

.snb-btn-deal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: white;
    color: var(--snb-primary);
    padding: 0 28px;
    height: 52px;
    border-radius: var(--snb-radius-md);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    width: fit-content;
    transition: all var(--snb-transition-fast);
}

.snb-btn-deal:hover {
    background: var(--snb-gray-100);
    color: var(--snb-primary);
}

.snb-deal-right {
    flex: 0 0 380px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.snb-deal-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    min-height: 292px;
    border-radius: 12px;
}

@media (max-width: 991px) {
    .snb-deal-right {
        flex: none;
        height: 260px;
    }
    .snb-deal-right img {
        min-height: unset;
    }
}

/* ── Section Header V2 ───────────────────────────────── */
.snb-section-header-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 12px;
}

.snb-section-title-v2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--snb-font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--snb-text-primary);
    margin: 0;
}

.snb-section-title-v2 .title-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.snb-view-all-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--snb-primary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.snb-view-all-link:hover {
    color: var(--snb-primary-dark);
    text-decoration: underline;
}

/* ── Category Nav Circles ─────────────────────────────── */
.snb-cat-circles {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 8px 0;
    scrollbar-width: none;
}

.snb-cat-circles::-webkit-scrollbar { display: none; }

.snb-cat-circle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    flex-shrink: 0;
    transition: transform var(--snb-transition-fast);
}

.snb-cat-circle-item:hover {
    transform: translateY(-3px);
    text-decoration: none;
}

.snb-cat-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: var(--snb-shadow-sm);
}

.snb-cat-circle-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--snb-text-primary);
    text-align: center;
    white-space: nowrap;
}

/* ── Product Card V2 ─────────────────────────────────── */
.snb-product-card-v2 {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
    border: 1px solid var(--snb-gray-100);
    transition: transform var(--snb-transition-base), box-shadow var(--snb-transition-base);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.snb-product-card-v2:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,.13);
    border-color: transparent;
}

.snb-pc-image-wrap {
    position: relative;
    background: var(--snb-gray-50);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: block;
    text-decoration: none;
}

.snb-pc-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--snb-transition-slow);
    display: block;
}

.snb-product-card-v2:hover .snb-pc-image-wrap img {
    transform: scale(1.06);
}

/* Badge */
.snb-pc-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--snb-primary);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    z-index: 2;
    pointer-events: none;
}
.snb-pc-badge.badge-sale  { background: var(--snb-accent); }
.snb-pc-badge.badge-flash { background: var(--snb-accent); }
.snb-pc-badge.badge-primary { background: var(--snb-primary); }

/* Hover overlay — 3 action buttons centered on image */
.snb-pc-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    transition: opacity var(--snb-transition-base);
    z-index: 3;
}
.snb-product-card-v2:hover .snb-pc-overlay {
    opacity: 1;
}

.snb-pc-action-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: white;
    border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 16px;
    color: #374151;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    transition: background var(--snb-transition-fast), color var(--snb-transition-fast), transform var(--snb-transition-fast);
}
.snb-pc-action-btn:hover { transform: scale(1.12); }
.snb-pc-action-btn.snb-pc-wish-btn:hover,
.snb-pc-action-btn.snb-pc-wish-btn.wishlisted { color: #EF4444; }
.snb-pc-action-btn.snb-pc-action-cart {
    background: var(--snb-accent);
    color: white;
}
.snb-pc-action-btn.snb-pc-action-cart:hover { background: var(--snb-accent-dark); }

/* Body */
.snb-pc-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.snb-pc-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--snb-text-primary);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    text-decoration: none;
}
.snb-pc-name:hover { color: var(--snb-primary); text-decoration: none; }

.snb-pc-vendor {
    font-size: 13px;
    color: var(--snb-text-secondary);
    text-decoration: none;
}
.snb-pc-vendor:hover { color: var(--snb-primary); }

.snb-pc-stars {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
}
.snb-pc-stars .rating { font-weight: 600; color: var(--snb-text-primary); }
.snb-pc-stars .count  { color: var(--snb-text-secondary); font-size: 12px; }

.snb-pc-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 10px;
    gap: 6px;
}

.snb-pc-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--snb-text-primary);
    line-height: 1;
}

.snb-pc-compare {
    font-size: 12px;
    color: var(--snb-text-secondary);
    text-decoration: line-through;
    margin-top: 2px;
}

/* Cart button — orange rounded square */
.snb-pc-add-btn {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--snb-accent);
    color: white;
    border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 18px;
    flex-shrink: 0;
    transition: background var(--snb-transition-fast), transform var(--snb-transition-fast);
}
.snb-pc-add-btn:hover {
    background: var(--snb-accent-dark);
    transform: scale(1.08);
}

/* Flash sale card extras */
.snb-pc-stock-bar {
    height: 4px;
    background: var(--snb-gray-200);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}

.snb-pc-stock-fill {
    height: 100%;
    background: var(--snb-accent);
    border-radius: 2px;
}

.snb-pc-stock-label {
    font-size: 11px;
    color: var(--snb-accent);
    font-weight: 500;
}

.snb-pc-add-full {
    width: 100%;
    background: var(--snb-primary);
    color: white;
    border: none;
    border-radius: var(--snb-radius-md);
    height: 40px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--snb-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    text-decoration: none;
}

.snb-pc-add-full:hover { background: var(--snb-primary-dark); color: white; }

/* ── Flash Sales Section ─────────────────────────────── */
/* Header bar */
.snb-flash-header-bar {
    background: white;
    border-radius: 16px;
    padding: 20px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.snb-flash-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.snb-flash-icon-wrap {
    width: 48px;
    height: 48px;
    background: rgba(0,135,81,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--snb-primary);
    flex-shrink: 0;
}

.snb-flash-title-wrap .title { font-size: 22px; font-weight: 700; color: var(--snb-text-primary); font-family: var(--snb-font-display); }
.snb-flash-title-wrap .sub { font-size: 13px; color: var(--snb-text-secondary); margin-top: 2px; }

.snb-flash-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.snb-flash-ends-label {
    font-size: 12px;
    color: var(--snb-text-secondary);
    text-align: right;
}

.snb-flash-countdown {
    display: flex;
    align-items: center;
    gap: 6px;
}

.snb-flash-time-block {
    background: var(--snb-accent);
    color: white;
    border-radius: 10px;
    padding: 8px 12px;
    text-align: center;
    min-width: 54px;
}

.snb-flash-time-block .val {
    font-size: 1.2rem;
    font-weight: 700;
    display: block;
    line-height: 1;
}

.snb-flash-time-block .lbl {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
    display: block;
    margin-top: 2px;
}

.snb-flash-sep { font-size: 1.3rem; font-weight: 700; color: var(--snb-accent); }

/* Flash product cards */
.snb-flash-card {
    background: white;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,0.07);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.snb-flash-card-img {
    position: relative;
    aspect-ratio: 1 / 0.85;
    overflow: hidden;
    display: block;
}

.snb-flash-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.snb-flash-card:hover .snb-flash-card-img img { transform: scale(1.04); }

.snb-flash-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--snb-accent);
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    z-index: 2;
}

.snb-flash-card-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.snb-flash-card-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--snb-text-primary);
    text-decoration: none;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.snb-flash-card-name:hover { color: var(--snb-primary); }

.snb-flash-card-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--snb-text-primary);
}

.snb-flash-card-prices {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.snb-flash-sale-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--snb-primary);
}

.snb-flash-orig-price {
    font-size: 13px;
    color: var(--snb-text-secondary);
    text-decoration: line-through;
}

.snb-flash-stock-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    margin-top: 4px;
}

.snb-fs-stock-low { color: var(--snb-accent); font-weight: 500; }
.snb-fs-stock-gone { color: var(--snb-red); font-weight: 500; }
.snb-fs-stock-ok { color: var(--snb-text-secondary); }
.snb-flash-stock-count { color: var(--snb-text-secondary); }

.snb-flash-stock-bar {
    height: 5px;
    background: var(--snb-gray-200);
    border-radius: 3px;
    overflow: hidden;
}

.snb-flash-stock-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.snb-flash-add-btn {
    width: 100%;
    background: var(--snb-primary);
    color: white;
    border: none;
    border-radius: 10px;
    height: 44px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
    transition: background var(--snb-transition-fast);
    text-decoration: none;
}

.snb-flash-add-btn:hover { background: var(--snb-primary-dark); color: white; }

.snb-see-more-btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 32px;
  background: transparent;
  border: 2px solid var(--snb-primary);
  color: var(--snb-primary);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.snb-see-more-btn:hover {
  background: var(--snb-primary);
  color: #fff;
}



/* ── Trust Layer ─────────────────────────────────────── */
.snb-trust-layer {
    padding: 60px 0;
    background: linear-gradient(135deg, rgba(0, 135, 81, 0.05) 0%, #FFFFFF 100%);
}

.snb-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 135, 81, 0.1);
    color: #008751;
    padding: 6px 18px;
    border-radius: var(--snb-radius-full);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 12px;
}

.snb-trust-heading {
    font-family: var(--snb-font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--snb-text-primary);
    margin-bottom: 32px;
}

.snb-stat-card {
    background: white;
    border-radius: var(--snb-radius-lg);
    padding: 24px;
    text-align: center;
    box-shadow: var(--snb-shadow-sm);
    border: 1px solid var(--snb-gray-100);
}

.snb-stat-card .stat-val {
    font-size: 26px;
    font-weight: 700;
    color: var(--snb-primary);
    display: block;
    line-height: 1;
    margin-bottom: 6px;
}

.snb-stat-card .stat-lbl {
    font-size: 13px;
    color: var(--snb-text-secondary);
}

.snb-feature-card {
    background: white;
    border-radius: var(--snb-radius-lg);
    padding: 28px;
    box-shadow: var(--snb-shadow-sm);
    border: 1px solid var(--snb-gray-100);
    display: flex;
    gap: 16px;
}

.snb-feature-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--snb-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.snb-feature-card h4 {
    font-size: 17px;
    font-weight: 600;
    color: var(--snb-text-primary);
    margin-bottom: 6px;
}

.snb-feature-card p {
    font-size: 14px;
    color: var(--snb-text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* ── Trending Searches ───────────────────────────────── */
.snb-trending-searches {
    background: rgba(245, 245, 245, 0.3);
    padding: 28px 0;
    border-radius: var(--snb-radius-lg);
    border: 1px solid rgba(245,245,245,0.8);
}

.snb-trending-heading {
    font-size: 17px;
    font-weight: 600;
    color: var(--snb-text-primary);
    margin-bottom: 14px;
}

.snb-trending-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.snb-trending-pill {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 16px;
    background: white;
    border-radius: var(--snb-radius-full);
    border: 1px solid var(--snb-gray-200);
    font-size: 13px;
    font-weight: 500;
    color: var(--snb-text-primary);
    text-decoration: none;
    transition: all var(--snb-transition-fast);
    white-space: nowrap;
}

.snb-trending-pill:hover {
    background: var(--snb-primary);
    color: white;
    border-color: var(--snb-primary);
    text-decoration: none;
}

/* ── Social Proof ────────────────────────────────────── */
.snb-social-proof {
    background: var(--snb-primary);
    padding: 60px 0;
}

.snb-social-proof-title {
    font-family: var(--snb-font-display);
    font-size: 28px;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
}

.snb-social-proof-sub {
    font-size: 15px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 36px;
}

.snb-testimonial-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--snb-radius-lg);
    padding: 28px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.snb-testimonial-quote-icon {
    font-size: 28px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1;
}

.snb-testimonial-stars {
    display: flex;
    gap: 3px;
    font-size: 16px;
    color: var(--snb-accent);
}

.snb-testimonial-text {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    flex: 1;
    font-style: italic;
}

.snb-testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 14px;
}

.snb-testimonial-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    font-family: var(--snb-font-display);
}

.snb-testimonial-name {
    font-size: 15px;
    font-weight: 600;
    color: white;
    line-height: 1.2;
}

.snb-testimonial-city {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.snb-testimonial-product {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-top: 2px;
}

/* ── Official Stores ─────────────────────────────────── */
.snb-official-stores {
    background: var(--snb-gray-50);
    padding: 56px 0;
}
.snb-os-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 32px;
}
.snb-os-title {
    font-family: var(--snb-font-display);
    font-size: 2rem;
    font-weight: 800;
    color: var(--snb-text-primary);
    margin: 0 0 4px;
}
.snb-os-sub {
    font-size: 14px;
    color: var(--snb-text-secondary);
    margin: 0;
}
.snb-os-view-all {
    font-size: 15px;
    font-weight: 500;
    color: var(--snb-text-primary);
    text-decoration: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color var(--snb-transition-fast);
}
.snb-os-view-all:hover { color: var(--snb-primary); }
.snb-os-card {
    display: block;
    text-decoration: none;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
    border: 1px solid var(--snb-gray-100);
    transition: transform var(--snb-transition-base), box-shadow var(--snb-transition-base);
}
.snb-os-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--snb-shadow-lg);
    text-decoration: none;
}
.snb-os-img {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--snb-gray-50);
}
.snb-os-img img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform var(--snb-transition-base);
}
.snb-os-card:hover .snb-os-img img { transform: scale(1.05); }
.snb-os-img-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 40px; color: #9CA3AF;
}
.snb-os-badge {
    position: absolute;
    top: 10px; right: 10px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--snb-primary);
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.snb-os-body {
    padding: 12px 14px 14px;
}
.snb-os-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--snb-text-primary);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.snb-os-meta {
    font-size: 12px;
    color: var(--snb-text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.snb-os-rating {
    color: var(--snb-accent);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px;
}
.snb-os-rating i { font-size: 11px; }

/* ── Vendor Spotlight ────────────────────────────────── */
/* ── Brand Spotlight ─────────────────────────────────── */
.snb-brand-spotlight {
    padding: 60px 0;
}
.snb-bs-title {
    font-family: var(--snb-font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--snb-text-primary);
    text-align: center;
    margin-bottom: 8px;
}
.snb-bs-sub {
    font-size: 15px;
    color: var(--snb-text-secondary);
    text-align: center;
    margin-bottom: 32px;
}
.snb-bs-card {
    display: flex;
    border-radius: 20px;
    overflow: hidden;
    min-height: 420px;
    box-shadow: var(--snb-shadow-lg);
}
.snb-bs-img {
    flex: 0 0 45%;
    position: relative;
    overflow: hidden;
}
.snb-bs-img img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.snb-bs-img-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: #E8F5EE;
    font-size: 80px; color: #1E6B3C; opacity: .3;
}
.snb-bs-info {
    flex: 1;
    background: linear-gradient(135deg, #cfdfd9 0%, #e8f0ec 50%, #f5f9f7 100%);
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
}
.snb-bs-store-name-row {
    display: flex; align-items: center; gap: 10px;
}
.snb-bs-store-name {
    font-size: 1.6rem; font-weight: 700;
    color: var(--snb-text-primary); margin: 0;
}
.snb-bs-verified {
    color: var(--snb-accent); font-size: 22px;
}
.snb-bs-location {
    display: flex; align-items: center; gap: 6px;
    font-size: 14px; color: var(--snb-text-secondary);
}
.snb-bs-desc {
    font-size: 15px; color: var(--snb-text-primary);
    line-height: 1.65; margin: 0;
}
.snb-bs-stats {
    background: white; border-radius: 12px;
    display: flex; align-items: stretch;
}
.snb-bs-stat {
    flex: 1; padding: 16px 20px; text-align: center;
    border-right: 1px solid var(--snb-gray-100);
    display: flex; flex-direction: column; gap: 4px;
}
.snb-bs-stat:last-child { border-right: none; }
.snb-bs-stat-val {
    font-size: 1.3rem; font-weight: 700;
    color: var(--snb-text-primary);
}
.snb-bs-stat-lbl {
    font-size: 12px; color: var(--snb-text-secondary);
}
.snb-bs-visit-btn {
    display: flex; align-items: center; justify-content: center;
    background: var(--snb-primary); color: white;
    padding: 16px 28px; border-radius: 12px;
    font-size: 16px; font-weight: 600;
    text-decoration: none;
    transition: background var(--snb-transition-fast);
    width: 100%;
}
.snb-bs-visit-btn:hover { background: var(--snb-primary-dark); color: white; }

/* ── Responsive adjustments ──────────────────────────── */
@media (max-width: 991px) {
    .snb-hero-v2-left { flex: none; max-width: 100%; padding: 36px 28px 28px; }
    .snb-hero-v2-right { min-height: unset; }
    .snb-deal-of-day { flex-direction: column; }
    .snb-deal-right { flex: none; }
    .snb-bs-card { flex-direction: column; }
    .snb-bs-img { flex: none; height: 260px; }
}
@media (max-width: 767px) {
    .snb-hero-section { padding: 8px 12px 0; }
    .snb-hero-v2 { height: auto; min-height: 560px; border-radius: 16px; }
    .snb-hero-slide.active { flex-direction: column; }

    /* Hide the right image panel entirely on mobile */
    .snb-hero-v2-right { display: none; }

    /* Left panel fills full width */
    .snb-hero-v2-left {
        flex: none;
        max-width: 100%;
        padding: 44px 24px 80px; /* extra bottom room for dots */
    }

    /* Larger title on mobile */
    .snb-hero-v2-title { font-size: 2.4rem; line-height: 1.1; }
    .snb-hero-v2-subtitle { font-size: 15px; max-width: 100%; }

    /* Buttons full-width stack */
    .snb-hero-v2-btns { flex-direction: row; gap: 10px; }
    .snb-btn-hero-primary,
    .snb-btn-hero-secondary { flex: 1; justify-content: center; height: 52px; font-size: 15px; border-radius: 14px; }

    /* Stats go vertical list */
    .snb-hero-v2-stats { flex-direction: column; gap: 10px; }

    /* Show arrows on mobile */
    .snb-hero-arrow { display: flex; }

    /* Dots — move to bottom of the card */
    .snb-hero-slider-dots { bottom: 24px; }

    .snb-megamenu { display: none; }
    .snb-flash-countdown { display: none; }
    .snb-brand-spotlight { padding: 30px 0; }
    .snb-bs-info { padding: 28px 20px; }
    .snb-trust-layer { padding: 36px 0; }
}

/* ═══════════════════════════════════════════════════════════
   ABOUT US PAGE
═══════════════════════════════════════════════════════════ */

/* ── Hero ── */
.snb-about-hero {
    position: relative;
    min-height: 520px;
    background: #0D1F14 url('/assets/images/hero-man.png') right bottom/auto 100% no-repeat;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.snb-about-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(13,31,20,0.92) 50%, rgba(13,31,20,0.6) 100%);
}
.snb-about-hero-content {
    position: relative;
    z-index: 2;
    padding: 80px 0 60px;
}
.snb-about-hero-eyebrow {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #A8D5B8;
    margin-bottom: 16px;
}
.snb-about-hero-title {
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 20px;
    font-family: var(--snb-font-display, 'Playfair Display', serif);
}
.snb-about-hero-accent  { color: #F5C842; display: inline; }
.snb-about-hero-accent2 { color: #6FCF8E; display: inline; }
.snb-about-hero-sub {
    font-size: 1.05rem;
    color: #D1FAE5;
    max-width: 600px;
    margin-bottom: 28px;
    line-height: 1.7;
}
.snb-about-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.snb-about-badge {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 0.83rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 7px;
    backdrop-filter: blur(4px);
}
.snb-about-badge i { color: #F5C842; }

/* ── Section typography helpers ── */
.snb-about-section-eyebrow {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #1E6B3C;
    margin-bottom: 8px;
}
.snb-about-section-title {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
    margin-bottom: 10px;
    font-family: var(--snb-font-display, 'Playfair Display', serif);
}
.snb-about-section-sub {
    color: #6B7280;
    font-size: 0.95rem;
    max-width: 560px;
    margin: 0 auto;
}
.snb-about-body {
    color: #374151;
    font-size: 0.97rem;
    line-height: 1.8;
    margin-bottom: 14px;
}

/* ── Stats grid ── */
.snb-about-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.snb-about-stat-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px 20px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.snb-about-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 4px;
}
.snb-about-stat-icon.green { background: #D1FAE5; color: #1E6B3C; }
.snb-about-stat-icon.orange { background: #FEF3C7; color: #D97706; }
.snb-about-stat-number {
    font-size: 1.7rem;
    font-weight: 800;
    color: #111827;
    line-height: 1;
}
.snb-about-stat-label {
    font-size: 0.82rem;
    color: #6B7280;
    font-weight: 500;
}

/* ── Mission / Vision cards ── */
.snb-about-mv-card {
    border-radius: 18px;
    padding: 32px 28px;
    height: 100%;
}
.snb-about-mv-card.green {
    background: #1E6B3C;
    color: #fff;
}
.snb-about-mv-card.gold {
    background: #F5C842;
    color: #1A1A1A;
}
.snb-about-mv-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 16px;
}
.snb-about-mv-card.gold .snb-about-mv-icon { background: rgba(0,0,0,0.1); }
.snb-about-mv-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 12px;
}
.snb-about-mv-text {
    font-size: 0.92rem;
    line-height: 1.7;
    opacity: 0.92;
    margin-bottom: 16px;
}
.snb-about-mv-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.snb-about-mv-list li {
    font-size: 0.88rem;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    opacity: 0.95;
    line-height: 1.5;
}
.snb-about-mv-list li i { margin-top: 2px; flex-shrink: 0; }
.snb-about-mv-card.green .snb-about-mv-list li i { color: #6FCF8E; }
.snb-about-mv-card.gold  .snb-about-mv-list li i { color: #1E6B3C; }

/* ── What We Do cards ── */
.snb-about-what-card {
    background: #fff;
    border-radius: 16px;
    padding: 28px 24px;
    text-align: center;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%;
}
.snb-about-what-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,0.1); }
.snb-about-what-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: #D1FAE5;
    color: #1E6B3C;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 16px;
}
.snb-about-what-title { font-size: 1.05rem; font-weight: 700; color: #111827; margin-bottom: 10px; }
.snb-about-what-text  { font-size: 0.88rem; color: #6B7280; line-height: 1.7; margin: 0; }

/* ── Core Values ── */
.snb-about-value-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px 18px;
    text-align: center;
    box-shadow: 0 2px 14px rgba(0,0,0,0.06);
    height: 100%;
}
.snb-about-value-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin: 0 auto 12px;
}
.snb-about-value-icon.red    { background: #FEE2E2; color: #DC2626; }
.snb-about-value-icon.green  { background: #D1FAE5; color: #1E6B3C; }
.snb-about-value-icon.blue   { background: #DBEAFE; color: #2563EB; }
.snb-about-value-icon.purple { background: #EDE9FE; color: #7C3AED; }
.snb-about-value-name { font-size: 0.95rem; font-weight: 700; color: #111827; margin-bottom: 8px; }
.snb-about-value-text { font-size: 0.82rem; color: #6B7280; line-height: 1.6; }

/* ── Timeline ── */
.snb-about-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    max-width: 720px;
    margin: 0 auto;
}
.snb-about-timeline::before {
    content: '';
    position: absolute;
    left: 31px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #E5E7EB;
}
.snb-about-tl-item {
    display: grid;
    grid-template-columns: 64px 72px 1fr;
    align-items: flex-start;
    gap: 0 12px;
    padding-bottom: 36px;
    position: relative;
}
.snb-about-tl-item:last-child { padding-bottom: 0; }
.snb-about-tl-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #E5E7EB;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px #E5E7EB;
    margin-top: 4px;
    position: relative;
    z-index: 1;
    margin-left: 22px;
}
.snb-about-tl-dot.active {
    background: #1E6B3C;
    box-shadow: 0 0 0 2px #1E6B3C;
}
.snb-about-tl-dot.future {
    background: #F5C842;
    box-shadow: 0 0 0 2px #F5C842;
}
.snb-about-tl-year {
    font-size: 0.85rem;
    font-weight: 700;
    color: #6B7280;
    padding-top: 2px;
}
.snb-about-tl-item.future .snb-about-tl-year { color: #D97706; }
.snb-about-tl-card {
    background: #fff;
    border-radius: 14px;
    padding: 18px 22px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.snb-about-tl-title { font-size: 1rem; font-weight: 700; color: #111827; margin-bottom: 6px; }
.snb-about-tl-text  { font-size: 0.87rem; color: #6B7280; line-height: 1.6; margin-bottom: 10px; }
.snb-about-tl-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #F3F4F6;
    color: #374151;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
}
.snb-about-tl-item.future .snb-about-tl-tag { background: #FEF3C7; color: #92400E; }

/* ── Testimonials ── */
.snb-about-testi-card {
    background: #fff;
    border-radius: 18px;
    padding: 28px 24px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.snb-about-testi-stars { font-size: 1.1rem; color: #F59E0B; letter-spacing: 2px; }
.snb-about-testi-quote {
    font-size: 0.92rem;
    color: #374151;
    line-height: 1.75;
    flex: 1;
    font-style: italic;
}
.snb-about-testi-author { display: flex; align-items: center; gap: 12px; }
.snb-about-testi-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #D1FAE5;
    color: #1E6B3C;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.snb-about-testi-avatar.green  { background: #D1FAE5; color: #1E6B3C; }
.snb-about-testi-avatar.orange { background: #FEF3C7; color: #D97706; }
.snb-about-testi-name { font-size: 0.88rem; font-weight: 700; color: #111827; }
.snb-about-testi-role { font-size: 0.78rem; color: #9CA3AF; }

/* ── Join Us ── */
.snb-about-join-card {
    background: #fff;
    border-radius: 18px;
    padding: 30px 24px;
    text-align: center;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.snb-about-join-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: #F3F4F6;
    color: #1E6B3C;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 4px;
}
.snb-about-join-title { font-size: 1.05rem; font-weight: 700; color: #111827; }
.snb-about-join-text  { font-size: 0.87rem; color: #6B7280; line-height: 1.7; flex: 1; }
.snb-about-join-btn {
    display: inline-block;
    padding: 11px 24px;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    margin-top: 6px;
}
.snb-about-join-btn.green   { background: #1E6B3C; color: #fff; }
.snb-about-join-btn.green:hover { background: #155230; color: #fff; }
.snb-about-join-btn.outline { background: transparent; color: #1E6B3C; border: 2px solid #1E6B3C; }
.snb-about-join-btn.outline:hover { background: #1E6B3C; color: #fff; }

/* ── Bottom CTA banners ── */
.snb-about-cta-banner {
    border-radius: 20px;
    padding: 36px 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.snb-about-cta-banner.green { background: #1E6B3C; }
.snb-about-cta-banner.gold  { background: #F5C842; }
.snb-about-cta-title { font-size: 1.4rem; font-weight: 800; margin: 0; }
.snb-about-cta-banner.green .snb-about-cta-title { color: #fff; }
.snb-about-cta-banner.gold  .snb-about-cta-title { color: #1A1A1A; }
.snb-about-cta-text { font-size: 0.92rem; line-height: 1.75; flex: 1; }
.snb-about-cta-banner.green .snb-about-cta-text { color: #D1FAE5; }
.snb-about-cta-banner.gold  .snb-about-cta-text { color: #4A3800; }
.snb-about-cta-btn {
    display: inline-block;
    padding: 12px 26px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    width: fit-content;
    transition: opacity 0.2s;
}
.snb-about-cta-btn:hover { opacity: 0.88; }
.snb-about-cta-btn.white { background: #fff; color: #1E6B3C; }
.snb-about-cta-btn.dark  { background: #1A1A1A; color: #F5C842; }

/* ── Mobile tweaks ── */
@media (max-width: 767px) {
    .snb-about-hero-content { padding: 60px 0 40px; }
    .snb-about-stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .snb-about-timeline::before { left: 19px; }
    .snb-about-tl-item { grid-template-columns: 40px 56px 1fr; }
    .snb-about-tl-dot { margin-left: 10px; }
    .snb-about-cta-banner { padding: 28px 22px; }
}

/* ═══════════════════════════════════════════════════════════
   TODAY'S DEALS PAGE
═══════════════════════════════════════════════════════════ */

/* ── Hero sale banner ── */
.snb-deals-hero {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 60%, #B45309 100%);
    padding: 52px 0 44px;
    text-align: center;
}
.snb-deals-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 18px;
    border-radius: 999px;
    margin-bottom: 14px;
}
.snb-deals-hero-title {
    font-size: clamp(2.6rem, 7vw, 5rem);
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.04em;
    line-height: 1;
    margin-bottom: 12px;
    font-family: var(--snb-font-display, 'Playfair Display', serif);
}
.snb-deals-hero-sub {
    color: rgba(255,255,255,0.9);
    font-size: 1.05rem;
    margin-bottom: 28px;
}
/* Countdown */
.snb-deals-hero-countdown {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: rgba(255,255,255,0.15);
    border: 1.5px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(4px);
    border-radius: 14px;
    padding: 14px 28px;
}
.snb-deals-cd-label {
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.snb-deals-cd-boxes {
    display: flex;
    align-items: center;
    gap: 4px;
}
.snb-deals-cd-box {
    background: #fff;
    border-radius: 8px;
    min-width: 52px;
    padding: 6px 8px;
    text-align: center;
}
.snb-deals-cd-num {
    display: block;
    font-size: 1.3rem;
    font-weight: 800;
    color: #D97706;
    line-height: 1;
}
.snb-deals-cd-unit {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
    margin-top: 2px;
}
.snb-deals-cd-sep {
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    padding-bottom: 8px;
}

/* ── Section typography ── */
.snb-deals-section-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.snb-deals-section-sub {
    font-size: 0.85rem;
    color: #6B7280;
    margin: 3px 0 0;
}
.snb-deals-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 18px;
}
.snb-deals-sell-all {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1E6B3C;
    text-decoration: none;
    white-space: nowrap;
}
.snb-deals-sell-all:hover { text-decoration: underline; }
.snb-deals-title-icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: #FEF3C7;
    color: #D97706;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.snb-deals-title-icon.weekly { background: #D1FAE5; color: #1E6B3C; }

/* ── Shop by Category grid ── */
.snb-deals-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.snb-deals-cat-card {
    border-radius: 14px;
    padding: 18px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    transition: transform 0.18s, box-shadow 0.18s;
}
.snb-deals-cat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.snb-deals-cat-icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: rgba(255,255,255,0.9);
    flex-shrink: 0;
}
.snb-deals-cat-name { font-size: 0.97rem; font-weight: 700; line-height: 1.2; }
.snb-deals-cat-count { font-size: 0.77rem; opacity: 0.85; margin-top: 2px; }

/* ── Deal cards grid ── */
.snb-deals-grid {
    display: grid;
    gap: 18px;
}
.snb-deals-grid-3 { grid-template-columns: repeat(3, 1fr); }
.snb-deals-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Individual deal card ── */
.snb-deal-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
}
.snb-deal-card:hover { transform: translateY(-4px); box-shadow: 0 10px 32px rgba(0,0,0,0.12); }
.snb-deal-card-img-wrap {
    position: relative;
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #f3f4f6;
}
.snb-deal-card-img-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.snb-deal-card:hover .snb-deal-card-img-wrap img { transform: scale(1.04); }
/* Discount badge — top left */
.snb-deal-disc-badge {
    position: absolute;
    top: 10px; left: 10px;
    background: #EF4444;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 6px;
    z-index: 2;
}
/* Label badges — top right */
.snb-deal-label-badge {
    position: absolute;
    top: 10px; right: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 6px;
    z-index: 2;
    color: #fff;
}
.snb-deal-badge-hot     { background: #DC2626; }
.snb-deal-badge-best    { background: #1E6B3C; }
.snb-deal-badge-gone    { background: #EA580C; }
.snb-deal-badge-trend   { background: #7C3AED; }
.snb-deal-badge-limited { background: #2563EB; }
.snb-deal-badge-mega    { background: #D97706; }
/* Weekly timer badge */
.snb-deal-weekly-timer {
    position: absolute;
    bottom: 8px; left: 8px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 2;
}
/* Card body */
.snb-deal-card-body {
    padding: 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.snb-deal-stars {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    color: #F59E0B;
}
.snb-deal-stars span { color: #374151; font-weight: 600; }
.snb-deal-rc { color: #9CA3AF !important; font-weight: 400 !important; }
.snb-deal-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
    text-decoration: none;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.snb-deal-name:hover { color: #1E6B3C; }
.snb-deal-vendor {
    font-size: 0.78rem;
    color: #6B7280;
    text-decoration: none;
}
.snb-deal-vendor:hover { color: #1E6B3C; }
.snb-deal-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 2px;
}
.snb-deal-price { font-size: 1.05rem; font-weight: 800; color: #1E6B3C; }
.snb-deal-orig  { font-size: 0.8rem; color: #9CA3AF; text-decoration: line-through; }
/* Sold progress bar */
.snb-deal-sold-wrap { margin-top: 4px; }
.snb-deal-sold-bar {
    height: 5px;
    background: #F3F4F6;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 3px;
}
.snb-deal-sold-fill {
    height: 100%;
    background: linear-gradient(90deg, #F59E0B, #EF4444);
    border-radius: 999px;
    transition: width 0.4s;
}
.snb-deal-sold-label { font-size: 0.72rem; color: #9CA3AF; }
/* Add to cart button */
.snb-deal-cart-btn {
    margin-top: auto;
    width: 100%;
    padding: 10px;
    background: #1E6B3C;
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 0.87rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s;
}
.snb-deal-cart-btn:hover { background: #155230; }

/* ── Newsletter CTA ── */
.snb-deals-newsletter {
    background: #1E6B3C;
    padding: 52px 0;
    text-align: center;
}
.snb-deals-nl-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.snb-deals-nl-title { font-size: 1.9rem; font-weight: 800; color: #fff; margin-bottom: 8px; }
.snb-deals-nl-sub   { color: rgba(255,255,255,0.8); font-size: 0.95rem; max-width: 480px; margin: 0 auto 24px; }
.snb-deals-nl-form  { display: flex; gap: 0; max-width: 420px; margin: 0 auto; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.2); }
.snb-deals-nl-input {
    flex: 1;
    padding: 13px 18px;
    border: none;
    outline: none;
    font-size: 0.9rem;
    background: #fff;
    color: #111827;
}
.snb-deals-nl-input::placeholder { color: #9CA3AF; }
.snb-deals-nl-btn {
    padding: 13px 22px;
    background: #F59E0B;
    color: #fff;
    border: none;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s;
}
.snb-deals-nl-btn:hover { background: #D97706; }

/* ── Mobile ── */
@media (max-width: 991px) {
    .snb-deals-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .snb-deals-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .snb-deals-cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .snb-deals-hero { padding: 36px 0 32px; }
    .snb-deals-hero-countdown { flex-direction: column; gap: 10px; padding: 14px 18px; }
    .snb-deals-grid-3,
    .snb-deals-grid-4 { grid-template-columns: 1fr 1fr; gap: 12px; }
    .snb-deals-cat-grid { grid-template-columns: 1fr 1fr; }
    .snb-deals-nl-form { flex-direction: column; border-radius: 12px; overflow: visible; }
    .snb-deals-nl-input { border-radius: 10px; }
    .snb-deals-nl-btn   { border-radius: 10px; margin-top: 8px; }
}

/* ═══════════════════════════════════════════════════════════
   MY ACCOUNT PAGE
═══════════════════════════════════════════════════════════ */

.snb-account-wrap { padding: 28px 0 60px; }

.snb-account-page-title {
    font-size: 1.7rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 24px;
    font-family: var(--snb-font-display, serif);
}

/* ── 2-column layout ── */
.snb-account-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    align-items: start;
}

/* ── Sidebar ── */
.snb-account-sidebar {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
    position: sticky;
    top: 90px;
}

/* User card */
.snb-acct-user-card {
    background: #1E6B3C;
    padding: 28px 20px 22px;
    text-align: center;
    color: #fff;
}
.snb-acct-avatar-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 12px;
}
.snb-acct-avatar {
    width: 80px; height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.5);
    display: block;
}
.snb-acct-avatar-edit {
    position: absolute;
    bottom: 2px; right: 2px;
    width: 24px; height: 24px;
    background: #F5C842;
    color: #1A1A1A;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    text-decoration: none;
}
.snb-acct-user-name  { font-weight: 700; font-size: 1rem; margin-bottom: 3px; }
.snb-acct-user-email { font-size: 0.8rem; opacity: 0.8; margin-bottom: 4px; word-break: break-all; }
.snb-acct-user-since { font-size: 0.75rem; opacity: 0.65; }

/* Nav */
.snb-acct-nav {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
}
.snb-acct-nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 20px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    border-left: 3px solid transparent;
}
.snb-acct-nav-item:hover { background: #F3F4F6; color: #1E6B3C; }
.snb-acct-nav-item.active {
    background: #F0FDF4;
    color: #1E6B3C;
    font-weight: 700;
    border-left-color: #1E6B3C;
}
.snb-acct-nav-item i { font-size: 1rem; width: 18px; text-align: center; }
.snb-acct-nav-logout { color: #DC2626 !important; margin-top: 6px; border-top: 1px solid #F3F4F6; }
.snb-acct-nav-logout:hover { background: #FEF2F2 !important; }

/* ── Main area ── */
.snb-account-main { min-width: 0; }

/* ── Stat cards ── */
.snb-acct-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.snb-acct-stat-card {
    border-radius: 14px;
    padding: 22px 20px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.snb-acct-stat-card.green { background: linear-gradient(135deg, #1E6B3C, #2E8B57); }
.snb-acct-stat-card.amber { background: linear-gradient(135deg, #D97706, #F59E0B); }
.snb-acct-stat-card.blue  { background: linear-gradient(135deg, #2563EB, #3B82F6); }
.snb-acct-stat-icon { font-size: 1.3rem; opacity: 0.85; }
.snb-acct-stat-amount { font-size: 1.7rem; font-weight: 800; line-height: 1; }
.snb-acct-stat-label { font-size: 0.82rem; opacity: 0.85; }

/* ── Orders filter bar ── */
.snb-acct-order-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.snb-acct-order-search {
    flex: 1;
    min-width: 200px;
    position: relative;
    display: flex;
    align-items: center;
}
.snb-acct-order-search i {
    position: absolute;
    left: 13px;
    color: #9CA3AF;
    font-size: 0.9rem;
}
.snb-acct-order-search input {
    width: 100%;
    padding: 10px 14px 10px 36px;
    border: 1.5px solid #E5E7EB;
    border-radius: 10px;
    font-size: 0.88rem;
    outline: none;
    background: #fff;
}
.snb-acct-order-search input:focus { border-color: #1E6B3C; }
.snb-acct-order-filters { display: flex; gap: 8px; }
.snb-acct-filter-select {
    padding: 9px 14px;
    border: 1.5px solid #E5E7EB;
    border-radius: 10px;
    font-size: 0.85rem;
    background: #fff;
    color: #374151;
    outline: none;
    cursor: pointer;
}
.snb-acct-filter-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border: 1.5px solid #E5E7EB;
    border-radius: 10px;
    font-size: 0.85rem;
    background: #fff;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
}
.snb-acct-filter-btn:hover { border-color: #1E6B3C; color: #1E6B3C; }

/* ── Recent orders ── */
.snb-acct-orders-section {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    overflow: hidden;
}
.snb-acct-orders-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #F3F4F6;
}
.snb-acct-orders-title { font-size: 1rem; font-weight: 700; color: #111827; margin: 0; }
.snb-acct-view-all { font-size: 0.85rem; font-weight: 600; color: #1E6B3C; text-decoration: none; }
.snb-acct-view-all:hover { text-decoration: underline; }

.snb-acct-order-list { padding: 0; }
.snb-acct-order-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid #F9FAFB;
    transition: background 0.15s;
}
.snb-acct-order-row:last-child { border-bottom: none; }
.snb-acct-order-row:hover { background: #F9FAFB; }
.snb-acct-order-icon {
    width: 42px; height: 42px;
    background: #F3F4F6;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #6B7280;
    flex-shrink: 0;
}
.snb-acct-order-info { flex: 1; min-width: 0; }
.snb-acct-order-num  { font-size: 0.92rem; font-weight: 700; color: #111827; }
.snb-acct-order-meta { font-size: 0.78rem; color: #9CA3AF; margin-top: 2px; }
.snb-acct-order-right { text-align: right; flex-shrink: 0; }
.snb-acct-order-amount { font-size: 0.95rem; font-weight: 700; color: #111827; }
.snb-acct-order-status {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    margin-top: 4px;
}

/* ── Section card (generic) ── */
.snb-acct-section-card {
    background: #fff;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.snb-acct-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

/* ── Address cards ── */
.snb-acct-addr-card {
    background: #F9FAFB;
    border: 1.5px solid #E5E7EB;
    border-radius: 12px;
    padding: 18px;
    height: 100%;
}
.snb-acct-addr-card.default { border-color: #1E6B3C; background: #F0FDF4; }
.snb-acct-addr-label {
    font-size: 0.75rem;
    font-weight: 700;
    background: #E5E7EB;
    color: #374151;
    padding: 3px 10px;
    border-radius: 999px;
}
.snb-acct-addr-default-badge {
    font-size: 0.72rem;
    font-weight: 700;
    background: #D1FAE5;
    color: #1E6B3C;
    padding: 3px 10px;
    border-radius: 999px;
}
.snb-acct-addr-name { font-size: 0.9rem; font-weight: 700; color: #111827; margin: 8px 0 4px; }
.snb-acct-addr-text { font-size: 0.82rem; color: #6B7280; line-height: 1.5; }

/* ── Action buttons ── */
.snb-acct-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: #1E6B3C;
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.18s;
}
.snb-acct-add-btn:hover { background: #155230; color: #fff; }
.snb-acct-cancel-btn {
    padding: 9px 18px;
    background: #F3F4F6;
    color: #374151;
    border: none;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.snb-acct-del-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 1px solid #FCA5A5;
    background: #FEF2F2;
    color: #DC2626;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.snb-acct-del-btn:hover { background: #FEE2E2; }

/* ── Account info grid ── */
.snb-acct-info-grid { display: flex; flex-direction: column; gap: 12px; max-width: 440px; }
.snb-acct-info-row { display: flex; align-items: center; gap: 16px; }
.snb-acct-info-label { color: #9CA3AF; font-size: 0.85rem; min-width: 150px; }
.snb-acct-info-val   { color: #111827; font-size: 0.9rem; font-weight: 600; }

/* ── Notifications ── */
.snb-acct-notif-list { display: flex; flex-direction: column; gap: 0; }
.snb-acct-notif-row {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #F3F4F6;
    align-items: flex-start;
}
.snb-acct-notif-row:last-child { border-bottom: none; }
.snb-acct-notif-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #E5E7EB;
    flex-shrink: 0;
    margin-top: 6px;
}
.snb-acct-notif-row.unread .snb-acct-notif-dot { background: #1E6B3C; }
.snb-acct-notif-title { font-size: 0.88rem; font-weight: 700; color: #111827; margin-bottom: 2px; }
.snb-acct-notif-body  { font-size: 0.83rem; color: #6B7280; line-height: 1.5; }
.snb-acct-notif-time  { font-size: 0.75rem; color: #9CA3AF; margin-top: 4px; }

/* ── Referral ── */
.snb-acct-ref-num { font-size: 1.6rem; font-weight: 800; color: #111827; line-height: 1; }

/* ── Empty state ── */
.snb-acct-empty {
    text-align: center;
    padding: 48px 20px;
    color: #9CA3AF;
}
.snb-acct-empty i { font-size: 2.5rem; display: block; margin-bottom: 12px; }
.snb-acct-empty p { font-size: 0.9rem; margin: 0; }
.snb-acct-empty a { color: #1E6B3C; font-weight: 600; text-decoration: none; }

/* ── Mobile ── */
@media (max-width: 991px) {
    .snb-account-layout { grid-template-columns: 1fr; }
    .snb-account-sidebar { position: static; }
    .snb-acct-nav { flex-direction: row; flex-wrap: wrap; padding: 8px; gap: 4px; }
    .snb-acct-nav-item { padding: 8px 12px; border-left: none; border-radius: 8px; font-size: 0.82rem; }
    .snb-acct-nav-item.active { border-left: none; }
    .snb-acct-nav-logout { margin-top: 0; border-top: none; }
    .snb-acct-stats { grid-template-columns: 1fr 1fr; }
    .snb-acct-stat-card.blue { grid-column: span 2; }
}
@media (max-width: 575px) {
    .snb-acct-stats { grid-template-columns: 1fr; }
    .snb-acct-stat-card.blue { grid-column: span 1; }
    .snb-acct-order-bar { flex-direction: column; }
    .snb-acct-order-search { min-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   WISHLIST PAGE
═══════════════════════════════════════════════════════════ */

/* Header row */
.snb-acct-wishlist-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}
.snb-acct-wishlist-count {
    font-size: 0.85rem;
    font-weight: 400;
    color: #9CA3AF;
    margin-left: 8px;
}

/* Product grid — 3 cols */
.snb-wishlist-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* Individual wishlist card */
.snb-wishlist-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    display: flex;
    flex-direction: column;
    transition: transform 0.18s, box-shadow 0.18s;
}
.snb-wishlist-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.11);
}

/* Image area */
.snb-wishlist-img-wrap {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #F3F4F6;
}
.snb-wishlist-img-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.snb-wishlist-card:hover .snb-wishlist-img-wrap img { transform: scale(1.04); }

/* Discount badge */
.snb-wishlist-disc {
    position: absolute;
    top: 10px; left: 10px;
    background: #EF4444;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    z-index: 2;
}

/* Out-of-stock overlay */
.snb-wishlist-oos {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

/* Card body */
.snb-wishlist-body {
    padding: 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Stars */
.snb-wishlist-stars {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: #F59E0B;
}
.snb-wishlist-stars span { color: #374151; font-weight: 600; }
.snb-wishlist-rc { color: #9CA3AF !important; font-weight: 400 !important; }

/* Name */
.snb-wishlist-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: #111827;
    text-decoration: none;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.snb-wishlist-name:hover { color: #1E6B3C; }

/* Vendor */
.snb-wishlist-vendor {
    font-size: 0.76rem;
    color: #9CA3AF;
    text-decoration: none;
}
.snb-wishlist-vendor:hover { color: #1E6B3C; }

/* Price row */
.snb-wishlist-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 2px;
}
.snb-wishlist-price { font-size: 1rem; font-weight: 800; color: #1E6B3C; }
.snb-wishlist-orig  { font-size: 0.78rem; color: #9CA3AF; text-decoration: line-through; }

/* Action buttons */
.snb-wishlist-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
    align-items: center;
}
.snb-wishlist-cart-btn {
    flex: 1;
    padding: 9px 10px;
    background: #1E6B3C;
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.18s;
    white-space: nowrap;
}
.snb-wishlist-cart-btn:hover { background: #155230; }
.snb-wishlist-cart-btn.disabled { background: #E5E7EB; color: #9CA3AF; cursor: not-allowed; }
.snb-wishlist-remove-btn {
    width: 36px; height: 36px;
    border-radius: 8px;
    border: 1.5px solid #FCA5A5;
    background: #FEF2F2;
    color: #DC2626;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}
.snb-wishlist-remove-btn:hover { background: #FEE2E2; }

/* Mobile */
@media (max-width: 991px) {
    .snb-wishlist-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .snb-wishlist-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .snb-acct-wishlist-header { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════════════════════════════════════════════
   VENDOR DASHBOARD — Figma Design (snb-vd-*)
   ══════════════════════════════════════════════════════════════════ */

/* ── Dark green sidebar ─────────────────────────────────────────── */
.snb-vd-sidebar {
    width: var(--snb-sidebar-width);
    background: #fff;
    border-right: 1px solid #eaecf0;
    position: fixed;
    top: var(--snb-header-height);
    left: 0;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: #e5e7eb transparent;
}
.snb-vd-sidebar::-webkit-scrollbar { width: 4px; }
.snb-vd-sidebar::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 4px; }

.snb-vd-sidebar-nav {
    flex: 1;
    padding: 10px 12px 24px;
    display: flex;
    flex-direction: column;
}

.snb-vd-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin: 1px 0;
    color: #4b5563;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 10px;
    transition: background .15s, color .15s;
    white-space: nowrap;
    position: relative;
}
.snb-vd-nav-link i { color: #6b7280; font-size: 1.05rem; width: 20px; text-align: center; flex-shrink: 0; transition: color .15s; }
.snb-vd-nav-link:hover {
    background: #f3f4f6;
    color: #111827;
    text-decoration: none;
}
.snb-vd-nav-link:hover i { color: #374151; }
.snb-vd-nav-link.active {
    background: #1B6B3A;
    color: #fff;
    font-weight: 600;
}
.snb-vd-nav-link.active i { color: #fff; }
.snb-vd-nav-link.active::before { display: none; }
.snb-vd-nav-badge {
    margin-left: auto;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    line-height: 1.4;
}
.snb-vd-nav-link.active .snb-vd-nav-badge { background: rgba(255,255,255,.3); }
.snb-vd-nav-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #9ca3af;
    padding: 14px 14px 6px;
}
.snb-vd-sidebar-spacer { flex: 1; min-height: 20px; }
.snb-vd-nav-link--muted { color: #6b7280; }
.snb-vd-nav-link--muted i { color: #9ca3af; }
.snb-vd-nav-link--muted:hover { background: #f3f4f6; color: #374151; }
.snb-vd-ext-icon { margin-left: auto; font-size: .75rem; color: #9ca3af; }
.snb-vd-nav-link i { font-size: 1.05rem; width: 20px; text-align: center; flex-shrink: 0; }
.snb-vd-nav-badge {
    margin-left: auto;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    line-height: 1.4;
}
.snb-vd-nav-section-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(255,255,255,.35);
    padding: 14px 20px 6px;
}
.snb-vd-sidebar-spacer { flex: 1; min-height: 20px; }
.snb-vd-ext-icon { margin-left: auto; font-size: .75rem; color: #9ca3af; }

/* Override .snb-sidebar to not apply when .snb-vd-sidebar is used */
.snb-vd-sidebar ~ .snb-main-content,
body:has(.snb-vd-sidebar) .snb-main-content {
    margin-left: var(--snb-sidebar-width);
}

/* ── Page layout ────────────────────────────────────────────────── */
.snb-main-content { padding: 28px 28px 60px; }

/* ── Alerts ─────────────────────────────────────────────────────── */
.snb-vd-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: .88rem;
    font-weight: 500;
    margin-bottom: 20px;
}
.snb-vd-alert--warning { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.snb-vd-alert--danger  { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

/* ── Page header ────────────────────────────────────────────────── */
.snb-vd-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}
.snb-vd-page-title {
    font-family: var(--snb-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--snb-gray-900);
    margin: 0 0 4px;
}
.snb-vd-page-sub { font-size: .88rem; color: var(--snb-gray-500); margin: 0; }
.snb-vd-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1B6B3A;
    color: #fff;
    padding: 11px 22px;
    border-radius: 10px;
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .2s;
}
.snb-vd-add-btn:hover { opacity: .85; color: #fff; }

/* ── 4 Stat Cards ───────────────────────────────────────────────── */
.snb-vd-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 24px;
}
@media (max-width: 1024px) { .snb-vd-stats-row { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px)  { .snb-vd-stats-row { grid-template-columns: 1fr; } }

.snb-vd-stat-card {
    background: #fff;
    border-radius: 14px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.snb-vd-stat-icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.snb-vd-stat-icon--green  { background: #dcfce7; color: #16a34a; }
.snb-vd-stat-icon--orange { background: #ffedd5; color: #ea580c; }
.snb-vd-stat-icon--teal   { background: #d1fae5; color: #059669; }
.snb-vd-stat-icon--gold   { background: #fef9c3; color: #ca8a04; }
.snb-vd-stat-value {
    font-family: var(--snb-font-display);
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--snb-gray-900);
    line-height: 1;
    margin-bottom: 4px;
}
.snb-vd-stat-label { font-size: .8rem; color: var(--snb-gray-500); margin-bottom: 4px; }
.snb-vd-stat-sub { font-size: .76rem; font-weight: 600; }
.snb-vd-stat-sub--up   { color: #16a34a; }
.snb-vd-stat-sub--down { color: #dc2626; }
.snb-vd-stat-sub--warn { color: #d97706; }

/* ── Two-col layout ─────────────────────────────────────────────── */
.snb-vd-two-col {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 18px;
    margin-bottom: 24px;
    align-items: start;
}
@media (max-width: 1100px) { .snb-vd-two-col { grid-template-columns: 1fr; } }

/* Report card */
.snb-vd-report-card {
    background: #fff;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.snb-vd-report-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.snb-vd-report-title { font-weight: 700; font-size: .95rem; color: var(--snb-gray-900); flex-shrink: 0; }
.snb-vd-report-tabs { display: flex; gap: 4px; margin-left: auto; }
.snb-vd-tab {
    background: none;
    border: 1.5px solid #e5e7eb;
    color: var(--snb-gray-500);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}
.snb-vd-tab.active {
    background: #122117;
    border-color: #122117;
    color: #fff;
}
.snb-vd-report-more {
    background: none;
    border: none;
    color: var(--snb-gray-400);
    cursor: pointer;
    font-size: 1rem;
    padding: 0 2px;
}

/* Stats mini-row */
.snb-vd-report-stats {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 20px;
    overflow-x: auto;
}
.snb-vd-report-stat { display: flex; flex-direction: column; gap: 3px; padding: 0 16px 0 0; flex-shrink: 0; }
.snb-vd-report-stat:first-child { padding-left: 0; }
.snb-vd-report-stat-val {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--snb-gray-900);
}
.snb-vd-report-stat-lbl { font-size: .72rem; color: var(--snb-gray-500); white-space: nowrap; }
.snb-vd-report-stat-div {
    width: 1px;
    background: #e5e7eb;
    align-self: stretch;
    margin: 0 16px 0 0;
    flex-shrink: 0;
}
.snb-vd-chart-wrap { height: 200px; position: relative; }

/* Right panel */
.snb-vd-right-panel {
    background: #fff;
    border-radius: 16px;
    padding: 22px 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.snb-vd-panel-head {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}
.snb-vd-live-label {
    font-size: .75rem;
    font-weight: 700;
    color: #ea580c;
    display: flex;
    align-items: center;
}
.snb-vd-live-label i { font-size: 1.4rem; margin-right: -2px; }
.snb-vd-live-count {
    font-family: var(--snb-font-display);
    font-size: 2rem;
    font-weight: 800;
    color: var(--snb-gray-900);
    line-height: 1;
}
.snb-vd-live-sub { font-size: .76rem; color: var(--snb-gray-500); margin: 0; }
.snb-vd-mini-chart-wrap { height: 52px; margin: 4px 0 8px; }

/* Sales by country */
.snb-vd-country-section { margin-top: 4px; }
.snb-vd-country-head {
    display: flex;
    justify-content: space-between;
    font-size: .76rem;
    font-weight: 700;
    color: var(--snb-gray-500);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 10px;
}
.snb-vd-country-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.snb-vd-country-flag { font-size: 1.2rem; flex-shrink: 0; }
.snb-vd-country-bar-wrap { flex: 1; min-width: 0; }
.snb-vd-country-name { font-size: .78rem; font-weight: 600; color: var(--snb-gray-700); margin-bottom: 3px; }
.snb-vd-country-bar {
    height: 5px;
    background: #f3f4f6;
    border-radius: 10px;
    overflow: hidden;
}
.snb-vd-country-bar-fill {
    height: 100%;
    background: #1B6B3A;
    border-radius: 10px;
    transition: width .6s;
}
.snb-vd-country-val { font-size: .76rem; font-weight: 700; color: var(--snb-gray-900); white-space: nowrap; }

.snb-vd-insight-btn {
    display: block;
    text-align: center;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    padding: 9px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--snb-gray-700);
    text-decoration: none;
    transition: border-color .2s, background .2s;
    margin-top: 8px;
}
.snb-vd-insight-btn:hover { border-color: #1B6B3A; color: #1B6B3A; background: #f0fdf4; }

/* ── General card ───────────────────────────────────────────────── */
.snb-vd-card {
    background: #fff;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    margin-bottom: 20px;
}
.snb-vd-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.snb-vd-card-title {
    font-family: var(--snb-font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--snb-gray-900);
    margin: 0;
}
.snb-vd-viewall {
    font-size: .8rem;
    font-weight: 600;
    color: #1E6B3C;
    text-decoration: none;
}
.snb-vd-viewall:hover { text-decoration: underline; }
.snb-vd-empty {
    text-align: center;
    padding: 32px;
    color: var(--snb-gray-400);
}
.snb-vd-empty i { font-size: 2.5rem; display: block; margin-bottom: 8px; }
.snb-vd-empty p { font-size: .88rem; margin: 0; }
.snb-vd-empty a { color: #1E6B3C; }

/* ── Top selling products ───────────────────────────────────────── */
.snb-vd-product-list { display: flex; flex-direction: column; }
.snb-vd-product-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #f9fafb;
}
.snb-vd-product-row:last-child { border-bottom: none; }
.snb-vd-product-thumb {
    width: 44px; height: 44px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #f3f4f6;
}
.snb-vd-product-info { flex: 1; min-width: 0; }
.snb-vd-product-name {
    font-weight: 600;
    font-size: .88rem;
    color: var(--snb-gray-900);
    margin: 0 0 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.snb-vd-product-meta { font-size: .76rem; color: var(--snb-gray-500); margin: 0; }
.snb-vd-product-price {
    font-weight: 700;
    font-size: .92rem;
    color: #1B6B3A;
    white-space: nowrap;
    flex-shrink: 0;
}
.snb-vd-product-dots {
    background: none;
    border: none;
    color: var(--snb-gray-400);
    cursor: pointer;
    font-size: 1rem;
    padding: 4px 6px;
    border-radius: 6px;
    flex-shrink: 0;
    transition: background .15s;
}
.snb-vd-product-dots:hover { background: #f3f4f6; color: var(--snb-gray-700); }

/* ── Recent orders table ────────────────────────────────────────── */
.snb-vd-table-wrap { overflow-x: auto; }
.snb-vd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .83rem;
}
.snb-vd-table thead th {
    background: #f9fafb;
    color: var(--snb-gray-500);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 10px 14px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid #f3f4f6;
}
.snb-vd-table tbody tr:hover { background: #fafafa; }
.snb-vd-table tbody td {
    padding: 12px 14px;
    color: var(--snb-gray-700);
    border-bottom: 1px solid #f9fafb;
    vertical-align: middle;
}
.snb-vd-order-id { font-weight: 700; color: var(--snb-gray-900); }
.snb-vd-order-product { display: flex; align-items: center; gap: 8px; }
.snb-vd-order-product img {
    width: 32px; height: 32px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}
.snb-vd-order-amount { font-weight: 700; color: var(--snb-gray-900); white-space: nowrap; }
.snb-vd-order-date { color: var(--snb-gray-500); white-space: nowrap; }

/* ── Pagination ─────────────────────────────────────────────────── */
.snb-vd-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 0;
    margin-top: 8px;
    border-top: 1px solid #f3f4f6;
    gap: 12px;
    flex-wrap: wrap;
}
.snb-vd-page-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--snb-gray-700);
    text-decoration: none;
    transition: border-color .2s, background .2s;
}
.snb-vd-page-btn:hover:not(.disabled) { border-color: #1E6B3C; color: #1E6B3C; background: #f0fdf4; }
.snb-vd-page-btn.disabled { opacity: .4; pointer-events: none; }
.snb-vd-page-nums { display: flex; align-items: center; gap: 4px; }
.snb-vd-page-num {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--snb-gray-700);
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: all .2s;
}
.snb-vd-page-num:hover { border-color: #e5e7eb; color: var(--snb-gray-900); }
.snb-vd-page-num.active {
    background: #1B6B3A;
    color: #fff;
    border-color: #1B6B3A;
}
.snb-vd-page-ellipsis { color: var(--snb-gray-400); font-size: .85rem; padding: 0 4px; }

/* ── End of Vendor Dashboard ─────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════
   VENDOR REGISTRATION — Multi-Step Form (snb-vr-*)
   ══════════════════════════════════════════════════════════════════ */

/* Page wrapper */
.snb-vr-page {
    background: #f4f1ec;
    min-height: 100vh;
    padding: 40px 0 80px;
}
.snb-vr-inner {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Header */
.snb-vr-header { text-align: center; }
.snb-vr-logo { height: 52px; margin-bottom: 16px; }
.snb-vr-title {
    font-family: var(--snb-font-display);
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--snb-gray-900);
    margin: 0 0 6px;
}
.snb-vr-subtitle { font-size: .9rem; color: var(--snb-gray-500); margin: 0; }

/* ── Stepper ──────────────────────────────────────────────────── */
.snb-vr-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.snb-vr-stepper::-webkit-scrollbar { display: none; }
.snb-vr-step-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-width: 68px;
}
.snb-vr-step-dot {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    background: #fff;
    color: #9ca3af;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    transition: all .3s;
}
.snb-vr-step-node.active .snb-vr-step-dot {
    background: var(--snb-primary);
    border-color: var(--snb-primary);
    color: #fff;
    box-shadow: 0 0 0 5px rgba(21,128,61,.15);
}
.snb-vr-step-node.done .snb-vr-step-dot {
    background: #d1fae5;
    border-color: var(--snb-primary);
    color: var(--snb-primary);
}
.snb-vr-step-label {
    font-size: .68rem;
    font-weight: 500;
    color: #9ca3af;
    text-align: center;
    white-space: nowrap;
    transition: color .3s;
}
.snb-vr-step-node.active .snb-vr-step-label { color: var(--snb-primary); font-weight: 700; }
.snb-vr-step-node.done  .snb-vr-step-label { color: var(--snb-gray-600); }
.snb-vr-step-line {
    flex: 1;
    height: 2px;
    min-width: 16px;
    background: #e5e7eb;
    margin-bottom: 22px;
    transition: background .3s;
    flex-shrink: 1;
}
.snb-vr-step-line.done { background: var(--snb-primary); }

/* ── Form Card ─────────────────────────────────────────────────── */
.snb-vr-card {
    background: #fff;
    border-radius: 20px;
    padding: 36px 32px;
    box-shadow: 0 2px 16px rgba(0,0,0,.08);
}
@media (max-width: 560px) { .snb-vr-card { padding: 24px 18px; } }

/* Step panels — hidden by default (JS shows active one) */
.snb-vr-step-panel { display: none; }

/* Step heading */
.snb-vr-step-heading { margin-bottom: 24px; }
.snb-vr-step-title {
    font-family: var(--snb-font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--snb-gray-900);
    margin: 0 0 6px;
}
.snb-vr-step-desc { font-size: .85rem; color: var(--snb-gray-500); margin: 0; }

/* Row (2-col on desktop) */
.snb-vr-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 0;
}
@media (max-width: 520px) { .snb-vr-row { grid-template-columns: 1fr; } }

/* Field */
.snb-vr-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.snb-vr-row .snb-vr-field { margin-bottom: 0; }
.snb-vr-row + .snb-vr-row { margin-top: 18px; }

/* Label */
.snb-vr-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--snb-gray-700);
}
.snb-vr-label span { color: #dc2626; }

/* Input */
.snb-vr-input-wrap { position: relative; }
.snb-vr-input-wrap > i {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: .88rem;
    pointer-events: none;
}
.snb-vr-input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: .9rem;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    background: #fafafa;
    box-sizing: border-box;
}
.snb-vr-input-wrap .snb-vr-input { padding-left: 36px; }
.snb-vr-input:focus { border-color: var(--snb-primary); background: #fff; box-shadow: 0 0 0 3px rgba(21,128,61,.08); }
.snb-vr-input.snb-vr-invalid { border-color: #ef4444; }
.snb-vr-select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%239ca3af' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; }
.snb-vr-textarea { resize: vertical; min-height: 100px; padding: 12px 14px !important; }

/* Eye toggle */
.snb-vr-eye {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none; color: #9ca3af;
    cursor: pointer; font-size: .9rem; padding: 0;
}
.snb-vr-eye:hover { color: var(--snb-gray-700); }

/* Hint text */
.snb-vr-hint { font-size: .76rem; color: var(--snb-gray-500); margin: 2px 0 0; }

/* Info note */
.snb-vr-info-note {
    background: #f0fdf4;
    border: 1px solid #d1fae5;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: .82rem;
    color: #166534;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

/* Error banner */
.snb-vr-error-banner {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #dc2626;
    font-size: .85rem;
}
.snb-vr-error-banner ul { margin: 0; padding-left: 16px; }

/* Commission note */
.snb-vr-commission-note {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 16px;
    margin-top: 8px;
}
.snb-vr-commission-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: #fbbf24;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.snb-vr-commission-title { font-weight: 700; font-size: .9rem; margin: 0 0 2px; color: #92400e; }
.snb-vr-commission-desc  { font-size: .8rem; color: #b45309; margin: 0; }

/* ── Product Category Grid ─────────────────────────────────────── */
.snb-vr-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
@media (max-width: 480px) { .snb-vr-cat-grid { grid-template-columns: repeat(2, 1fr); } }
.snb-vr-cat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    font-size: .82rem;
    color: var(--snb-gray-700);
    user-select: none;
}
.snb-vr-cat-item input { display: none; }
.snb-vr-cat-check {
    width: 18px; height: 18px;
    border-radius: 5px;
    border: 1.5px solid #d1d5db;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem;
    color: transparent;
    flex-shrink: 0;
    transition: all .2s;
}
.snb-vr-cat-item:has(input:checked) {
    border-color: var(--snb-primary);
    background: #f0fdf4;
    color: var(--snb-gray-900);
}
.snb-vr-cat-item:has(input:checked) .snb-vr-cat-check {
    background: var(--snb-primary);
    border-color: var(--snb-primary);
    color: #fff;
}
.snb-vr-cat-name { font-weight: 500; line-height: 1.3; }
.snb-vr-invalid-grid .snb-vr-cat-item { border-color: #fecaca; }

/* ── Document Upload ───────────────────────────────────────────── */
.snb-vr-doc-field {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fafafa;
    border: 1.5px solid #e5e7eb;
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 16px;
}
.snb-vr-doc-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: #f0fdf4;
    color: var(--snb-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.snb-vr-doc-icon--gold { background: #fffbeb; color: #d97706; }
.snb-vr-doc-info { flex: 1; min-width: 0; }
.snb-vr-doc-title { font-weight: 700; font-size: .88rem; margin: 0 0 3px; color: var(--snb-gray-900); display: flex; align-items: center; gap: 8px; }
.snb-vr-doc-desc  { font-size: .76rem; color: var(--snb-gray-500); margin: 0; }
.snb-vr-required-badge { background: #fee2e2; color: #dc2626; font-size: .68rem; font-weight: 700; padding: 2px 7px; border-radius: 20px; }
.snb-vr-optional-badge { background: #fef9c3; color: #ca8a04; font-size: .68rem; font-weight: 700; padding: 2px 7px; border-radius: 20px; }
.snb-vr-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    background: #fff;
    border: 1.5px solid var(--snb-primary);
    color: var(--snb-primary);
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .2s;
}
.snb-vr-upload-btn:hover { background: #f0fdf4; }
.snb-vr-upload-btn input[type=file] { display: none; }
@media (max-width: 520px) { .snb-vr-doc-field { flex-wrap: wrap; } }

/* ── Review Cards ─────────────────────────────────────────────── */
.snb-vr-review-grid { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.snb-vr-review-card {
    border: 1.5px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
}
.snb-vr-review-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f9fafb;
    border-bottom: 1px solid #f3f4f6;
    font-weight: 700;
    font-size: .88rem;
    color: var(--snb-gray-900);
}
.snb-vr-review-card-icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: #d1fae5;
    color: var(--snb-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem;
    flex-shrink: 0;
}
.snb-vr-review-edit {
    margin-left: auto;
    background: none;
    border: 1px solid var(--snb-primary);
    color: var(--snb-primary);
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 600;
    padding: 3px 12px;
    cursor: pointer;
    transition: background .2s;
}
.snb-vr-review-edit:hover { background: #f0fdf4; }
.snb-vr-review-rows { padding: 4px 0; }
.snb-vr-review-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 16px;
    border-bottom: 1px solid #f9fafb;
    font-size: .82rem;
}
.snb-vr-review-row:last-child { border-bottom: none; }
.snb-vr-review-row span { color: var(--snb-gray-500); }
.snb-vr-review-row strong { color: var(--snb-gray-900); text-align: right; word-break: break-word; }

/* Agree checkbox */
.snb-vr-agree-row { margin-bottom: 8px; }
.snb-vr-agree-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .85rem;
    color: var(--snb-gray-700);
    cursor: pointer;
}
.snb-vr-agree-label input { display: none; }
.snb-vr-agree-check {
    width: 18px; height: 18px;
    border: 1.5px solid #d1d5db;
    border-radius: 5px;
    background: #fff;
    flex-shrink: 0;
    margin-top: 1px;
    transition: all .2s;
    display: flex; align-items: center; justify-content: center;
}
.snb-vr-agree-label:has(input:checked) .snb-vr-agree-check {
    background: var(--snb-primary);
    border-color: var(--snb-primary);
}
.snb-vr-agree-label:has(input:checked) .snb-vr-agree-check::after {
    content: '';
    width: 5px; height: 9px;
    border: 2px solid #fff;
    border-top: none; border-left: none;
    transform: rotate(45deg) translate(-1px,-1px);
    display: block;
}
.snb-vr-agree-label a { color: var(--snb-primary); text-decoration: underline; }

/* ── Navigation Bar ───────────────────────────────────────────── */
.snb-vr-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #f3f4f6;
    gap: 12px;
}
.snb-vr-prev-btn,
.snb-vr-next-btn,
.snb-vr-submit-btn {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: opacity .2s, background .2s;
}
.snb-vr-prev-btn {
    background: #f3f4f6;
    color: var(--snb-gray-700);
}
.snb-vr-prev-btn:hover { background: #e5e7eb; }
.snb-vr-next-btn {
    margin-left: auto;
    background: var(--snb-primary);
    color: #fff;
}
.snb-vr-next-btn:hover { opacity: .88; }
.snb-vr-submit-btn {
    margin-left: auto;
    background: var(--snb-primary);
    color: #fff;
}
.snb-vr-submit-btn:hover { opacity: .88; }

/* ── Footer links ─────────────────────────────────────────────── */
.snb-vr-foot-links {
    text-align: center;
    font-size: .85rem;
    color: var(--snb-gray-500);
    line-height: 2;
}
.snb-vr-foot-links a { color: var(--snb-primary); font-weight: 600; text-decoration: none; }
.snb-vr-foot-links p { margin: 0; }

/* ── Success Screen ───────────────────────────────────────────── */
.snb-vr-success-card {
    background: #fff;
    border-radius: 24px;
    padding: 48px 36px;
    box-shadow: 0 4px 24px rgba(0,0,0,.1);
    text-align: center;
    max-width: 540px;
    margin: 0 auto;
}
.snb-vr-success-icon {
    font-size: 4rem;
    color: var(--snb-primary);
    margin-bottom: 20px;
    line-height: 1;
}
.snb-vr-success-title {
    font-family: var(--snb-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--snb-gray-900);
    margin: 0 0 12px;
}
.snb-vr-success-sub { font-size: .92rem; color: var(--snb-gray-600); margin: 0 0 32px; line-height: 1.6; }
.snb-vr-success-steps { text-align: left; display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
.snb-vr-success-step { display: flex; align-items: flex-start; gap: 14px; }
.snb-vr-success-step-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--snb-primary);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.snb-vr-success-step-title { font-weight: 700; font-size: .88rem; margin: 0 0 2px; color: var(--snb-gray-900); }
.snb-vr-success-step-desc  { font-size: .8rem; color: var(--snb-gray-500); margin: 0; }
.snb-vr-success-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--snb-primary);
    color: #fff;
    padding: 14px 36px;
    border-radius: 10px;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    transition: opacity .2s;
}
.snb-vr-success-btn:hover { opacity: .88; color: #fff; }

/* ── End of Vendor Registration ─────────────────────────────────── */

/* ── Track Order Public Search Page (track.php) ──────────────────── */
.snb-track-pub-page {
    background: #f9fafb;
    min-height: 80vh;
    padding: 40px 0 80px;
}
.snb-track-pub-wrap {
    max-width: 520px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.snb-track-pub-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--snb-gray-700);
    text-decoration: none;
    transition: color .2s;
}
.snb-track-pub-back:hover { color: var(--snb-primary); }
.snb-track-pub-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 36px 36px;
    box-shadow: 0 2px 16px rgba(0,0,0,.08);
    text-align: center;
}
.snb-track-pub-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    border: 2px solid #d1fae5;
    background: #f0fdf4;
    color: var(--snb-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
    margin: 0 auto 20px;
}
.snb-track-pub-title {
    font-family: var(--snb-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--snb-gray-900);
    margin: 0 0 8px;
}
.snb-track-pub-sub {
    font-size: .9rem;
    color: var(--snb-gray-500);
    margin: 0 0 24px;
}
.snb-track-pub-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    text-align: left;
}
.snb-track-pub-form { display: flex; flex-direction: column; gap: 16px; text-align: left; }
.snb-track-pub-field { display: flex; flex-direction: column; gap: 6px; }
.snb-track-pub-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--snb-gray-700);
}
.snb-track-pub-input {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: .92rem;
    outline: none;
    transition: border-color .2s;
    background: #fafafa;
    box-sizing: border-box;
}
.snb-track-pub-input:focus { border-color: var(--snb-primary); background: #fff; }
.snb-track-pub-btn {
    background: var(--snb-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 14px;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    transition: background .2s;
}
.snb-track-pub-btn:hover { background: var(--snb-primary-dark); }
.snb-track-pub-acct-link {
    display: block;
    text-align: center;
    margin-top: 16px;
    font-size: .82rem;
    color: var(--snb-gray-500);
    text-decoration: none;
}
.snb-track-pub-acct-link:hover { color: var(--snb-primary); }

/* Results section re-uses .snb-track-inner and .snb-track-* */
.snb-track-pub-wrap .snb-track-inner {
    max-width: 100%;
    padding: 0;
}

/* ── Track Order Page ───────────────────────────────────────────── */
.snb-track-page {
    background: #f9fafb;
    min-height: 80vh;
    padding: 40px 0 80px;
}
.snb-track-inner {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Search card */
.snb-track-search-wrap {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 1px 6px rgba(0,0,0,.07);
    text-align: center;
}
.snb-track-page-title {
    font-family: var(--snb-font-display);
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--snb-gray-900);
    margin-bottom: 6px;
}
.snb-track-page-title i { color: var(--snb-primary); }
.snb-track-page-sub {
    color: var(--snb-gray-500);
    font-size: .88rem;
    margin-bottom: 24px;
}
.snb-track-form { display: flex; flex-direction: column; gap: 16px; text-align: left; }
.snb-track-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 560px) { .snb-track-form-row { grid-template-columns: 1fr; } }
.snb-track-form-group label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--snb-gray-700);
    display: block;
    margin-bottom: 6px;
}
.snb-track-input-wrap { position: relative; }
.snb-track-input-wrap i {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--snb-gray-400);
    font-size: .9rem;
    pointer-events: none;
}
.snb-track-input-wrap input {
    width: 100%;
    padding: 11px 14px 11px 36px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: .9rem;
    outline: none;
    transition: border-color .2s;
    background: #fafafa;
}
.snb-track-input-wrap input:focus { border-color: var(--snb-primary); background: #fff; }
.snb-track-submit-btn {
    background: var(--snb-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 13px 24px;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.snb-track-submit-btn:hover { background: var(--snb-primary-dark); }

/* Error banner */
.snb-track-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    border-radius: 12px;
    padding: 16px 20px;
    font-size: .88rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Page header (back + title + share) */
.snb-track-header {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 1px 6px rgba(0,0,0,.07);
}
.snb-track-back-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1.5px solid #e5e7eb;
    display: flex; align-items: center; justify-content: center;
    color: var(--snb-gray-700);
    text-decoration: none;
    font-size: 1rem;
    flex-shrink: 0;
    transition: background .2s;
}
.snb-track-back-btn:hover { background: #f3f4f6; color: var(--snb-gray-900); }
.snb-track-header-center { flex: 1; }
.snb-track-header-title {
    font-family: var(--snb-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: var(--snb-gray-900);
}
.snb-track-header-sub { font-size: .8rem; color: var(--snb-gray-500); margin: 0; }
.snb-track-share-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1.5px solid #e5e7eb;
    background: none;
    display: flex; align-items: center; justify-content: center;
    color: var(--snb-gray-700);
    font-size: 1rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .2s;
}
.snb-track-share-btn:hover { background: #f3f4f6; }

/* Status hero card */
.snb-track-hero {
    background: linear-gradient(135deg, var(--snb-primary) 0%, #14532d 100%);
    border-radius: 20px;
    padding: 28px 24px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    color: #fff;
    box-shadow: 0 4px 20px rgba(21,128,61,.3);
}
.snb-track-hero--cancelled {
    background: linear-gradient(135deg, #dc2626 0%, #7f1d1d 100%);
    box-shadow: 0 4px 20px rgba(220,38,38,.25);
}
.snb-track-hero-icon-wrap {
    width: 58px; height: 58px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
}
.snb-track-hero-text .snb-track-hero-status {
    font-size: 1.2rem;
    font-weight: 700;
    font-family: var(--snb-font-display);
    display: block;
    margin-bottom: 4px;
}
.snb-track-hero-text .snb-track-hero-desc { font-size: .88rem; opacity: .88; margin: 0 0 10px; }
.snb-track-hero-text .snb-track-hero-eta {
    font-size: .8rem;
    background: rgba(255,255,255,.15);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    margin: 0;
}

/* Section cards */
.snb-track-section {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 6px rgba(0,0,0,.07);
}
.snb-track-section-title {
    font-family: var(--snb-font-display);
    font-size: .98rem;
    font-weight: 700;
    color: var(--snb-gray-900);
    margin: 0 0 16px;
}

/* Timeline */
.snb-track-timeline { display: flex; flex-direction: column; }
.snb-track-tl-item { display: flex; gap: 16px; }
.snb-track-tl-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}
.snb-track-tl-dot {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 2px solid #e5e7eb;
    background: #f9fafb;
    color: #9ca3af;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
    transition: all .3s;
}
.snb-track-tl-item.done .snb-track-tl-dot {
    background: var(--snb-primary);
    border-color: var(--snb-primary);
    color: #fff;
}
.snb-track-tl-item.current .snb-track-tl-dot {
    box-shadow: 0 0 0 5px rgba(21,128,61,.15);
}
.snb-track-tl-line {
    width: 2px;
    flex: 1;
    min-height: 28px;
    background: #e5e7eb;
    margin: 4px 0;
    transition: background .3s;
}
.snb-track-tl-line.done { background: var(--snb-primary); }
.snb-track-tl-content { padding-bottom: 24px; padding-top: 8px; }
.snb-track-tl-label {
    font-weight: 600;
    font-size: .92rem;
    color: #9ca3af;
    margin: 0 0 2px;
}
.snb-track-tl-item.done .snb-track-tl-label { color: var(--snb-gray-900); }
.snb-track-tl-time {
    font-size: .76rem;
    color: var(--snb-primary);
    font-weight: 600;
    margin: 0 0 2px;
}
.snb-track-tl-desc { font-size: .8rem; color: #9ca3af; margin: 0; }
.snb-track-tl-item.done .snb-track-tl-desc { color: var(--snb-gray-500); }

/* Two-column row */
.snb-track-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 560px) { .snb-track-two-col { grid-template-columns: 1fr; } }

/* Address card */
.snb-track-address-card { display: flex; align-items: flex-start; gap: 14px; }
.snb-track-addr-icon-wrap {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: #f0fdf4;
    color: var(--snb-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.snb-track-addr-name { font-weight: 700; font-size: .92rem; margin: 0 0 4px; color: var(--snb-gray-900); }
.snb-track-addr-phone { font-size: .8rem; color: var(--snb-primary); font-weight: 600; margin: 0 0 4px; }
.snb-track-addr-line { font-size: .8rem; color: var(--snb-gray-600); margin: 0; line-height: 1.6; }

/* Help card */
.snb-track-help-card .snb-track-section-title { margin-bottom: 4px; }
.snb-track-help-sub { font-size: .8rem; color: var(--snb-gray-500); margin-bottom: 16px; }
.snb-track-help-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    border-radius: 50px;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity .2s;
    margin-bottom: 10px;
    border: none;
    cursor: pointer;
}
.snb-track-help-btn:last-child { margin-bottom: 0; }
.snb-track-help-btn--wa  { background: #25D366; color: #fff; }
.snb-track-help-btn--call { background: var(--snb-primary); color: #fff; }
.snb-track-help-btn:hover { opacity: .85; color: #fff; }

/* Ordered items */
.snb-track-items-list { display: flex; flex-direction: column; }
.snb-track-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
}
.snb-track-item:last-child { border-bottom: none; }
.snb-track-item-img {
    width: 56px; height: 56px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #f3f4f6;
}
.snb-track-item-details { flex: 1; min-width: 0; }
.snb-track-item-name {
    font-weight: 600;
    font-size: .88rem;
    color: var(--snb-gray-900);
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.snb-track-item-vendor { font-size: .76rem; color: var(--snb-gray-500); margin: 0; }
.snb-track-item-price { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.snb-track-item-total { font-weight: 700; font-size: .88rem; color: var(--snb-gray-900); }
.snb-track-item-qty { font-size: .76rem; color: var(--snb-gray-500); }
.snb-track-items-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    margin-top: 6px;
    border-top: 2px solid #f3f4f6;
    font-size: .88rem;
    color: var(--snb-gray-600);
}
.snb-track-total-val { font-size: 1.08rem; font-weight: 700; color: var(--snb-primary); }

/* ── VENDOR ORDER MANAGEMENT — snb-vd-om ──────────────────────── */

/* 5-column stat grid variant */
.snb-vd-stats-row--5 { grid-template-columns: repeat(5,1fr); }
@media (max-width:1100px) { .snb-vd-stats-row--5 { grid-template-columns: repeat(3,1fr); } }
@media (max-width:640px)  { .snb-vd-stats-row--5 { grid-template-columns: repeat(2,1fr); } }

/* Toolbar bar */
.snb-vd-orders-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    padding: 10px 14px;
}
.snb-vd-orders-search {
    flex: 1;
    min-width: 220px;
    position: relative;
    display: flex;
    align-items: center;
}
.snb-vd-orders-search-icon {
    position: absolute;
    left: 12px;
    color: #9ca3af;
    font-size: 13px;
    pointer-events: none;
}
.snb-vd-orders-search-input {
    width: 100%;
    height: 38px;
    padding: 0 14px 0 36px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    background: #f9fafb;
    color: #111827;
    outline: none;
    transition: border-color .15s, background .15s;
}
.snb-vd-orders-search-input:focus { border-color: #1B6B3A; background: #fff; }
.snb-vd-toolbar-sep { width: 1px; height: 26px; background: #e5e7eb; flex-shrink: 0; }

/* Filter tabs */
.snb-vd-filter-tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.snb-vd-filter-tab {
    padding: 5px 11px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: all .14s;
}
.snb-vd-filter-tab:hover { color: #111827; background: #f3f4f6; }
.snb-vd-filter-tab.active { background: #f0fdf4; color: #1B6B3A; font-weight: 600; border-color: #bbf7d0; }

/* Order card list */
.snb-vd-order-list { display: flex; flex-direction: column; gap: 12px; }
.snb-vd-order-card {
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow .15s;
}
.snb-vd-order-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.07); }
.snb-vd-order-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #f3f4f6;
    gap: 12px;
    flex-wrap: wrap;
}
.snb-vd-order-card-id { display: flex; align-items: center; gap: 10px; }
.snb-vd-order-thumb {
    width: 44px; height: 44px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #f3f4f6;
}
.snb-vd-order-num { font-weight: 700; font-size: 14px; color: #111827; margin-right: 6px; }
.snb-vd-order-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}
.snb-vd-order-card-date { font-size: 12px; color: #9ca3af; white-space: nowrap; }
.snb-vd-order-card-body { padding: 16px 20px; }
.snb-vd-order-info-grid {
    display: grid;
    grid-template-columns: 1.4fr 1.4fr 2fr 1fr;
    gap: 16px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f3f4f6;
}
@media (max-width:960px) { .snb-vd-order-info-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width:520px)  { .snb-vd-order-info-grid { grid-template-columns: 1fr; } }
.snb-vd-order-info-label {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .45px;
    margin-bottom: 4px;
}
.snb-vd-order-info-val { font-size: 13px; font-weight: 600; color: #111827; line-height: 1.35; }
.snb-vd-order-info-sub { font-size: 12px; color: #6b7280; margin-top: 2px; }
.snb-vd-order-info-price { font-size: 14px; font-weight: 700; color: #1B6B3A; margin-top: 2px; }
.snb-vd-order-card-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Order detail — horizontal step timeline */
.snb-vd-od-timeline { display: flex; align-items: center; padding: 20px 24px; }
.snb-vd-od-step { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; z-index: 1; }
.snb-vd-od-step-dot {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    margin-bottom: 8px;
    border: 2px solid #e5e7eb;
    background: #fff;
    color: #9ca3af;
    transition: all .2s;
}
.snb-vd-od-step-dot.done    { background: #1B6B3A; border-color: #1B6B3A; color: #fff; }
.snb-vd-od-step-dot.current { background: #fff; border-color: #1B6B3A; color: #1B6B3A; box-shadow: 0 0 0 4px rgba(27,107,58,.12); }
.snb-vd-od-step-dot.cancelled { background: #ef4444; border-color: #ef4444; color: #fff; }
.snb-vd-od-step-label { font-size: 11px; font-weight: 500; color: #9ca3af; text-align: center; white-space: nowrap; }
.snb-vd-od-step-label.done    { color: #1B6B3A; font-weight: 600; }
.snb-vd-od-step-label.current { color: #1B6B3A; font-weight: 700; }
.snb-vd-od-step-label.cancelled { color: #ef4444; font-weight: 600; }
.snb-vd-od-connector { flex: 1; height: 3px; background: #e5e7eb; margin-bottom: 24px; border-radius: 2px; min-width: 20px; }
.snb-vd-od-connector.done { background: #1B6B3A; }

/* ── VENDOR PRODUCT FORM — snb-vd-pf ─────────────────────────── */
.snb-vd-pf-section {
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 14px;
    padding: 28px;
    margin-bottom: 20px;
}
.snb-vd-pf-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 16px;
}
.snb-vd-pf-hint { font-size: 12px; color: #9ca3af; margin-top: 6px; display: block; }

/* Image grid */
.snb-vd-pf-img-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.snb-vd-pf-img-box {
    width: 112px; height: 112px;
    border: 2px dashed #d1d5db;
    border-radius: 10px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    cursor: pointer;
    background: #f9fafb;
    transition: border-color .15s, background .15s;
    position: relative; overflow: hidden;
}
.snb-vd-pf-img-box:hover { border-color: #1B6B3A; background: #f0fdf4; }
.snb-vd-pf-img-box-icon { font-size: 1.5rem; color: #9ca3af; margin-bottom: 6px; }
.snb-vd-pf-img-box-lbl { font-size: 11px; color: #9ca3af; font-weight: 500; }
.snb-vd-pf-img-box.filled { border-style: solid; border-color: #e5e7eb; }
.snb-vd-pf-img-box.filled img { width: 100%; height: 100%; object-fit: cover; }
.snb-vd-pf-img-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.4);
    display: flex; align-items: center; justify-content: center; gap: 6px;
    opacity: 0; transition: opacity .15s;
}
.snb-vd-pf-img-box:hover .snb-vd-pf-img-overlay { opacity: 1; }
.snb-vd-pf-img-overlay button {
    background: rgba(255,255,255,.9); border: none;
    border-radius: 6px; width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 12px;
}

/* Variation type row */
.snb-vd-pf-var-row {
    display: flex; gap: 8px; align-items: center; margin-bottom: 14px;
}
.snb-vd-pf-var-add-btn {
    width: 40px; height: 40px;
    background: #1B6B3A; color: #fff;
    border: none; border-radius: 10px;
    font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
    transition: opacity .15s;
}
.snb-vd-pf-var-add-btn:hover { opacity: .85; }
.snb-vd-pf-var-empty {
    background: #f9fafb; border: 1px solid #e5e7eb;
    border-radius: 10px; padding: 28px 20px;
    text-align: center; color: #9ca3af; font-size: 13px;
}
.snb-vd-pf-var-table thead th {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .4px; color: #6b7280;
    padding: 8px 10px; border-bottom: 1px solid #f3f4f6; white-space: nowrap;
}
.snb-vd-pf-var-table tbody td { padding: 8px 10px; vertical-align: middle; }
.snb-vd-pf-var-table tbody tr:not(:last-child) td { border-bottom: 1px solid #f9fafb; }

/* Production timeline */
.snb-vd-pf-tl-divider { border: none; border-top: 1px solid #f3f4f6; margin: 22px 0; }
.snb-vd-pf-tl-head {
    display: flex; align-items: center; gap: 8px;
    font-weight: 700; color: #111827; font-size: .9rem; margin-bottom: 4px;
}
.snb-vd-pf-tl-head i { color: #1B6B3A; }
.snb-vd-pf-tl-sub { font-size: 13px; color: #6b7280; margin-bottom: 14px; }
.snb-vd-pf-tl-example {
    background: #f0fdf4; border: 1px solid #bbf7d0;
    border-radius: 8px; padding: 10px 14px;
    font-size: 12px; color: #15803d; margin-top: 12px;
    line-height: 1.6;
}
.snb-vd-pf-tl-example strong { color: #14532d; }

/* Pricing grid */
.snb-vd-pf-price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width:520px) { .snb-vd-pf-price-grid { grid-template-columns: 1fr; } }
.snb-vd-pf-currency { position: relative; }
.snb-vd-pf-currency-sym {
    position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%);
    color: #6b7280; font-weight: 600; font-size: 13px; pointer-events: none;
}
.snb-vd-pf-currency .snb-form-control { padding-left: 28px; }

/* Inventory 3-col */
.snb-vd-pf-inv-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
@media (max-width:600px) { .snb-vd-pf-inv-grid { grid-template-columns: 1fr; } }

/* Shipping 4-col */
.snb-vd-pf-ship-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 16px; }
@media (max-width:720px) { .snb-vd-pf-ship-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width:400px) { .snb-vd-pf-ship-grid { grid-template-columns: 1fr; } }

/* Sticky footer */
.snb-vd-pf-footer {
    position: sticky; bottom: 0;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(6px);
    border-top: 1px solid #eaecf0;
    padding: 14px 0;
    display: flex; justify-content: flex-end; gap: 12px;
    margin-top: 8px; z-index: 10;
}

/* Order detail info rows */
.snb-vd-od-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 13px;
}
.snb-vd-od-row:last-child { border-bottom: none; padding-bottom: 0; }
.snb-vd-od-row-label { color: #6b7280; }
.snb-vd-od-row-val { font-weight: 600; color: #111827; }

/* ── VENDOR PRODUCT LIST — snb-vd-pl ─────────────────────────── */

/* Stat cards row (reuses snb-vd-stats-row + snb-vd-stat-card) */
.snb-vd-pl-stat-val--green { color: #1B6B3A; }
.snb-vd-pl-stat-val--red   { color: #ef4444; }

/* Toolbar */
.snb-vd-pl-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 16px;
}
.snb-vd-pl-search {
    flex: 1; min-width: 200px;
    position: relative; display: flex; align-items: center;
}
.snb-vd-pl-search-icon { position: absolute; left: 12px; color: #9ca3af; font-size: 13px; pointer-events: none; }
.snb-vd-pl-search-input {
    width: 100%; height: 38px;
    padding: 0 14px 0 36px;
    border: 1px solid #e5e7eb; border-radius: 8px;
    font-size: 13px; background: #f9fafb; color: #111827;
    outline: none; transition: border-color .15s, background .15s;
}
.snb-vd-pl-search-input:focus { border-color: #1B6B3A; background: #fff; }

/* Category select inside toolbar */
.snb-vd-pl-cat-select {
    height: 38px; padding: 0 32px 0 12px;
    border: 1px solid #e5e7eb; border-radius: 8px;
    font-size: 13px; background: #f9fafb; color: #374151;
    outline: none; cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color .15s;
}
.snb-vd-pl-cat-select:focus { border-color: #1B6B3A; background-color: #fff; }

/* Filters button */
.snb-vd-pl-filter-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 38px; padding: 0 14px;
    border: 1px solid #e5e7eb; border-radius: 8px;
    font-size: 13px; font-weight: 500; color: #374151;
    background: #f9fafb; cursor: pointer; white-space: nowrap;
    transition: border-color .15s;
}
.snb-vd-pl-filter-btn:hover { border-color: #1B6B3A; color: #1B6B3A; background: #f0fdf4; }

/* Products table */
.snb-vd-pl-table-wrap {
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 14px;
    overflow: hidden;
}
.snb-vd-pl-table { width: 100%; border-collapse: collapse; }
.snb-vd-pl-table thead th {
    padding: 12px 16px;
    font-size: 11.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .45px;
    color: #6b7280;
    border-bottom: 1px solid #f3f4f6;
    background: #fafafa;
    white-space: nowrap;
}
.snb-vd-pl-table tbody tr { transition: background .1s; }
.snb-vd-pl-table tbody tr:not(:last-child) td { border-bottom: 1px solid #f3f4f6; }
.snb-vd-pl-table tbody tr:hover { background: #fafafa; }
.snb-vd-pl-table td { padding: 14px 16px; font-size: 13px; color: #374151; vertical-align: middle; }

/* Product cell */
.snb-vd-pl-prod-cell { display: flex; align-items: center; gap: 12px; }
.snb-vd-pl-prod-img {
    width: 48px; height: 48px;
    border-radius: 8px; object-fit: cover;
    border: 1px solid #f3f4f6; flex-shrink: 0;
}
.snb-vd-pl-prod-name { font-weight: 600; color: #111827; font-size: 13px; line-height: 1.3; }

/* Stock number */
.snb-vd-pl-stock-zero { color: #ef4444; font-weight: 700; }
.snb-vd-pl-stock-low  { color: #f59e0b; font-weight: 700; }
.snb-vd-pl-stock-ok   { color: #374151; font-weight: 500; }

/* Status badges */
.snb-vd-pl-badge {
    display: inline-block; padding: 4px 12px;
    border-radius: 20px; font-size: 11.5px; font-weight: 600;
    white-space: nowrap;
}
.snb-vd-pl-badge--active   { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.snb-vd-pl-badge--draft    { background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; }
.snb-vd-pl-badge--pending  { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.snb-vd-pl-badge--inactive { background: #fef2f2; color: #ef4444; border: 1px solid #fecaca; }
.snb-vd-pl-badge--oos      { background: #fef2f2; color: #ef4444; border: 1px solid #fecaca; }

/* Three-dot action menu */
.snb-vd-pl-actions { position: relative; }
.snb-vd-pl-dots-btn {
    background: none; border: none; cursor: pointer;
    padding: 4px 10px; border-radius: 6px; font-size: 18px;
    color: #9ca3af; line-height: 1; transition: background .12s, color .12s;
}
.snb-vd-pl-dots-btn:hover { background: #f3f4f6; color: #374151; }
.snb-vd-pl-dropdown {
    position: absolute; right: 0; top: 100%;
    background: #fff; border: 1px solid #e5e7eb;
    border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.1);
    min-width: 160px; z-index: 50;
    padding: 6px 0; display: none;
}
.snb-vd-pl-dropdown.open { display: block; }
.snb-vd-pl-dropdown-item {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px; font-size: 13px; font-weight: 500;
    color: #374151; text-decoration: none; background: none;
    border: none; width: 100%; cursor: pointer;
    transition: background .1s;
}
.snb-vd-pl-dropdown-item:hover { background: #f9fafb; color: #111827; }
.snb-vd-pl-dropdown-item--danger { color: #ef4444; }
.snb-vd-pl-dropdown-item--danger:hover { background: #fef2f2; }
.snb-vd-pl-dropdown-sep { height: 1px; background: #f3f4f6; margin: 4px 0; }

/* ── VENDOR PRODUCT REVIEWS — snb-vd-rv ──────────────────────── */

/* Header two-col (avg rating | distribution) */
.snb-vd-rv-header {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0;
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 20px;
}
@media (max-width:600px) { .snb-vd-rv-header { grid-template-columns: 1fr; } }
.snb-vd-rv-avg {
    padding: 28px 24px;
    border-right: 1px solid #eaecf0;
    display: flex; flex-direction: column; justify-content: center;
}
.snb-vd-rv-avg-label { font-size: 12px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.snb-vd-rv-avg-score {
    font-family: var(--snb-font-display);
    font-size: 3rem; font-weight: 800;
    color: #111827; line-height: 1; margin-bottom: 6px;
}
.snb-vd-rv-avg-stars { display: flex; gap: 3px; margin-bottom: 8px; }
.snb-vd-rv-avg-star { font-size: 1.1rem; }
.snb-vd-rv-avg-count { font-size: 12px; color: #9ca3af; }

.snb-vd-rv-dist { padding: 24px 28px; }
.snb-vd-rv-dist-title { font-size: 13px; font-weight: 700; color: #111827; margin-bottom: 14px; }
.snb-vd-rv-dist-row {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px;
}
.snb-vd-rv-dist-lbl { font-size: 12px; color: #6b7280; white-space: nowrap; min-width: 22px; display: flex; align-items: center; gap: 3px; }
.snb-vd-rv-dist-bar-wrap { flex: 1; height: 8px; background: #f3f4f6; border-radius: 4px; overflow: hidden; }
.snb-vd-rv-dist-bar { height: 100%; background: #f59e0b; border-radius: 4px; transition: width .3s; }
.snb-vd-rv-dist-count { font-size: 12px; color: #9ca3af; min-width: 16px; text-align: right; }

/* Toolbar */
.snb-vd-rv-toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: #fff; border: 1px solid #eaecf0;
    border-radius: 12px; padding: 10px 14px; margin-bottom: 16px;
}
.snb-vd-rv-search { flex: 1; min-width: 200px; position: relative; display: flex; align-items: center; }
.snb-vd-rv-search-icon { position: absolute; left: 12px; color: #9ca3af; font-size: 13px; pointer-events: none; }
.snb-vd-rv-search-input {
    width: 100%; height: 38px; padding: 0 14px 0 36px;
    border: 1px solid #e5e7eb; border-radius: 8px;
    font-size: 13px; background: #f9fafb; color: #111827;
    outline: none; transition: border-color .15s, background .15s;
}
.snb-vd-rv-search-input:focus { border-color: #1B6B3A; background: #fff; }
.snb-vd-rv-rating-select {
    height: 38px; padding: 0 32px 0 12px;
    border: 1px solid #e5e7eb; border-radius: 8px;
    font-size: 13px; background: #f9fafb; color: #374151;
    outline: none; cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
    transition: border-color .15s;
}
.snb-vd-rv-rating-select:focus { border-color: #1B6B3A; background-color: #fff; }

/* Review card */
.snb-vd-rv-card {
    background: #fff; border: 1px solid #eaecf0;
    border-radius: 14px; padding: 22px 24px;
    margin-bottom: 12px;
}
.snb-vd-rv-card-head {
    display: flex; align-items: flex-start;
    justify-content: space-between; margin-bottom: 10px; gap: 12px;
}
.snb-vd-rv-card-left { display: flex; align-items: center; gap: 12px; }

/* Colored initials avatar */
.snb-vd-rv-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700; color: #fff;
    flex-shrink: 0; text-transform: uppercase;
}
.snb-vd-rv-name { font-size: 14px; font-weight: 700; color: #111827; margin-bottom: 2px; }
.snb-vd-rv-stars { display: flex; gap: 2px; }
.snb-vd-rv-star-fill { color: #f59e0b; font-size: 13px; }
.snb-vd-rv-star-empty { color: #d1d5db; font-size: 13px; }
.snb-vd-rv-card-date { font-size: 12px; color: #9ca3af; white-space: nowrap; }

/* Pending badge */
.snb-vd-rv-pending-badge {
    display: inline-block; padding: 3px 10px;
    background: #fff8f0; color: #d97706;
    border: 1px solid #fde68a; border-radius: 20px;
    font-size: 11px; font-weight: 600;
}

/* Product link */
.snb-vd-rv-product {
    font-size: 12.5px; color: #1B6B3A; font-weight: 600;
    text-decoration: none; display: inline-block; margin-bottom: 10px;
}
.snb-vd-rv-product:hover { text-decoration: underline; }
.snb-vd-rv-product-lbl { color: #6b7280; font-weight: 400; }

/* Review text */
.snb-vd-rv-text {
    font-size: 13.5px; color: #374151; line-height: 1.6;
    margin-bottom: 14px;
}

/* Action row */
.snb-vd-rv-actions {
    display: flex; align-items: center; gap: 18px;
    padding-top: 12px; border-top: 1px solid #f3f4f6;
}
.snb-vd-rv-action-btn {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12.5px; font-weight: 500; color: #6b7280;
    background: none; border: none; cursor: pointer;
    padding: 0; transition: color .12s;
}
.snb-vd-rv-action-btn:hover { color: #111827; }
.snb-vd-rv-action-btn--reply:hover { color: #1B6B3A; }
.snb-vd-rv-action-btn--report:hover { color: #ef4444; }

/* Vendor response box */
.snb-vd-rv-response {
    background: #f0fdf4; border-left: 3px solid #1B6B3A;
    border-radius: 0 8px 8px 0;
    padding: 12px 16px; margin-top: 12px;
}
.snb-vd-rv-response-head {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 700; color: #1B6B3A;
    margin-bottom: 6px;
}
.snb-vd-rv-response-text { font-size: 13px; color: #374151; line-height: 1.55; }

/* Reply form */
.snb-vd-rv-reply-form {
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid #f3f4f6; display: none;
}
.snb-vd-rv-reply-form.open { display: block; }
.snb-vd-rv-reply-hint { font-size: 12px; color: #9ca3af; margin-top: 6px; }

/* ── End of styles ───────────────────────────────────── */