/**
 * VVSOutlet Mobile AZM Header CSS
 * MOBILE-FIRST DESIGN WITH PROPER VIEWPORT CONSTRAINTS
 */

/* TECHNICAL FIX: Prevent horizontal overflow on mobile */
html {
    overflow-x: hidden !important;
    width: 100%;
}

body {
    overflow-x: hidden !important;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
}

/* Reset and base styles with proper box model */
.vvsoutlet-azm-mobile-header * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* Prevent any child from exceeding parent width */
    max-width: 100%;
}

/* Main header container with TECHNICAL FIXES for viewport */
.vvsoutlet-azm-mobile-header {
    position: relative; /* Mobile: scroll with page */
    /* TECHNICAL FIX: Strict width constraints */
    width: 100%;
    max-width: 100vw !important;
    overflow: hidden !important; /* Hide both x and y overflow */
    z-index: 999;
    background: #0173B6;
    background: linear-gradient(to bottom, #0173B6 0%, #3B82F6 100%);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    /* Flex container */
    display: flex;
    flex-direction: column;
    /* Safe area padding - TECHNICAL FIX */
    padding-top: env(safe-area-inset-top, 0);
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    /* Reset margins */
    margin: 0;
    /* Minimum height - compact version */
    min-height: 80px; /* More compact header */
    /* TECHNICAL FIX: Ensure children don't cause overflow */
    contain: layout style;
}

/* Desktop: Make AZM header sticky */
@media (min-width: 1024px) {
    .vvsoutlet-azm-mobile-header {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
    }

    /* Add body padding to compensate for fixed header - compact version */
    body {
        padding-top: 180px; /* Reduced for more compact header */
    }
}

/* TECHNICAL FIX: Simplified safe area implementation */
/* Single approach that actually works */
.vvsoutlet-safe-area-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100vw;
    height: 50px; /* Default height for devices with notch */
    background: linear-gradient(to bottom, #0173B6 0%, #3B82F6 100%);
    z-index: 998;
    pointer-events: none;
    display: block;
}

/* Hide safe area overlay on desktop (≥1024px) */
@media (min-width: 1024px) {
    .vvsoutlet-safe-area-overlay {
        display: none;
    }
}

/* Force hide safe area overlay on Fyndhörna pages (fixed header) */
body.vvsoutlet-fyndhornet-force-mobile-header .vvsoutlet-safe-area-overlay {
    display: none !important;
}

/* Use env() for devices that support it */
@supports (padding-top: env(safe-area-inset-top)) {
    .vvsoutlet-safe-area-overlay {
        height: max(env(safe-area-inset-top, 20px), 50px);
    }
    
    .vvsoutlet-azm-mobile-header {
        padding-top: max(env(safe-area-inset-top, 20px), 50px);
    }
}

/* iPhone Pro specific heights */
@media screen and (device-width: 393px) and (device-height: 852px), /* iPhone 14 Pro */
       screen and (device-width: 430px) and (device-height: 932px), /* iPhone 14 Pro Max */
       screen and (device-width: 390px) and (device-height: 844px), /* iPhone 12/13 Pro */
       screen and (device-width: 428px) and (device-height: 926px)  /* iPhone 12/13 Pro Max */ {
    .vvsoutlet-safe-area-overlay {
        height: 50px !important;
    }
    
    .vvsoutlet-azm-mobile-header {
        padding-top: 50px !important;
    }
}

/* Top navigation bar - compact version */
.vvsoutlet-azm-header-nav {
    display: flex;
    align-items: center;
    height: 36px; /* Even more compact - reduced from 38px */
    padding: 0 8px;
    position: relative;
}

/* Hamburger menu button */
.vvsoutlet-azm-menu-btn {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 18px;
    padding: 6px;
    margin-right: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

.vvsoutlet-azm-menu-btn:hover {
    background-color: rgba(255,255,255,0.1);
}

.vvsoutlet-azm-menu-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Logo */
.vvsoutlet-azm-logo {
    display: flex;
    align-items: center;
}

.vvsoutlet-azm-logo a {
    display: block;
    color: #ffffff;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    padding: 6px 4px;
}

.vvsoutlet-azm-logo img {
    max-height: 26px;
    width: auto;
}

/* VVSOutlet logo specific styling - compact version */
.vvsoutlet-logo {
    max-height: 24px !important; /* More compact */
    width: auto !important;
    /* White monochrome filter for dark background */
    filter: brightness(0) invert(1) opacity(0.95);
    /* Smooth hover effect */
    transition: all 0.2s ease;
}

.vvsoutlet-azm-logo:hover .vvsoutlet-logo {
    filter: brightness(0) invert(1) opacity(0.8);
    transform: scale(1.02);
}

/* Right side buttons */
.vvsoutlet-azm-header-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Mobile/Tablet only: Push header-right to the right edge */
@media (max-width: 1023px) {
    .vvsoutlet-azm-header-right {
        margin-left: auto; /* Push to the right on mobile/tablet only */
    }
}

/* BankID indicator next to Account button */
.vvsoutlet-azm-bankid-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-right: 1px solid rgba(255,255,255,0.15);
    margin-right: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-radius: 4px;
}

.vvsoutlet-azm-bankid-indicator:hover {
    background-color: rgba(255,255,255,0.1);
}

.vvsoutlet-azm-bankid-small-logo {
    height: 38px; /* Even bigger: 33px → 38px */
    width: auto;
    opacity: 0.95;
    transition: all 0.2s ease;
}

/* White filter on hover */
.vvsoutlet-azm-bankid-indicator:hover .vvsoutlet-azm-bankid-small-logo {
    filter: brightness(0) invert(1); /* Makes logo white */
    opacity: 1;
    transform: scale(1.05);
}

.vvsoutlet-azm-account-btn,
.vvsoutlet-azm-cart-btn {
    background: none;
    border: none;
    color: #ffffff;
    padding: 6px;
    cursor: pointer;
    border-radius: 3px;
    transition: background-color 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 10px;
    line-height: 1;
    position: relative;
}

.vvsoutlet-azm-account-btn:hover,
.vvsoutlet-azm-cart-btn:hover {
    background-color: rgba(255,255,255,0.1);
}

.vvsoutlet-azm-account-btn svg,
.vvsoutlet-azm-cart-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    margin-bottom: 1px;
}

.vvsoutlet-azm-cart-btn .cart-count {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #ff9900;
    color: #000;
    font-size: 10px;
    font-weight: bold;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* Isolated search wrapper to contain layout changes */
.vvsoutlet-azm-isolated-search-wrapper {
    contain: layout style paint;
    transform: translateZ(0);
    will-change: transform;
    isolation: isolate;
}

/* Search bar container - compact version */
.vvsoutlet-azm-search-container {
    background: #ffffff;
    border-radius: 4px;
    margin: 6px 10px; /* More compact spacing */
    display: flex;
    align-items: center;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    /* Prevent layout shifts */
    contain: layout;
    transform: translateZ(0);
}

.vvsoutlet-azm-search-input,
.vvsoutlet-azm-isolated-search-field {
    flex: 1;
    border: none;
    padding: 10px 14px; /* More compact */
    font-size: 16px;
    border-radius: 4px 0 0 4px;
    outline: none;
    background: transparent;
    /* iOS optimizations to prevent viewport jumping */
    -webkit-user-select: text;
    user-select: text;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
    /* Prevent zoom on iOS */
    -webkit-text-size-adjust: 100%;
}

.vvsoutlet-azm-search-input::placeholder,
.vvsoutlet-azm-isolated-search-field::placeholder {
    color: #666;
}

/* iOS-specific search field improvements */
@supports (-webkit-touch-callout: none) {
    .vvsoutlet-azm-search-input:focus,
    .vvsoutlet-azm-isolated-search-field:focus {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: transform;
        /* Prevent iOS keyboard viewport issues */
        position: relative;
        z-index: 1;
    }
    
    /* Stable viewport on iOS during search interaction */
    .vvsoutlet-azm-search-container:focus-within {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        contain: layout;
    }
}

.vvsoutlet-azm-search-btn {
    background: #ff9900;
    border: none;
    padding: 12px 16px;
    cursor: pointer;
    border-radius: 0 4px 4px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vvsoutlet-azm-search-btn svg {
    width: 20px;
    height: 20px;
    fill: #000;
}

/* Search dropdown */
.vvsoutlet-azm-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
}

.vvsoutlet-azm-search-dropdown-content {
    padding: 0;
}

.vvsoutlet-azm-search-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #666;
    font-size: 14px;
    gap: 8px;
}

.vvsoutlet-azm-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #e0e0e0;
    border-top: 2px solid #ff9900;
    border-radius: 50%;
    animation: amazonSpin 1s linear infinite;
}

@keyframes amazonSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.vvsoutlet-azm-search-results {
    max-height: 300px;
    overflow-y: auto;
}

.vvsoutlet-azm-search-result-item {
    display: flex;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #e7e7e7;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    min-height: 80px;
}

.vvsoutlet-azm-search-result-item:hover {
    background-color: #f8f9fa;
    border-left: 3px solid #ff9900;
    padding-left: 13px;
}

.vvsoutlet-azm-search-result-item:last-child {
    border-bottom: none;
}

.vvsoutlet-azm-search-result-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    margin-right: 16px;
    flex-shrink: 0;
    border: 1px solid #e5e5e5;
}

.vvsoutlet-azm-search-result-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vvsoutlet-azm-search-result-title {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

.vvsoutlet-azm-search-result-price {
    font-size: 16px;
    font-weight: 700;
    color: #ff9900;
    margin: 4px 0 2px 0;
}

.vvsoutlet-azm-search-result-meta {
    font-size: 13px;
    color: #666;
    line-height: 1.3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
}

.vvsoutlet-azm-search-result-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vvsoutlet-azm-search-result-sku {
    font-weight: 500;
    color: #555;
}

.vvsoutlet-azm-search-result-stock {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #28a745;
    flex-shrink: 0;
    position: relative;
}

.vvsoutlet-azm-search-result-stock.low-stock {
    background: #ffc107;
}

.vvsoutlet-azm-search-result-stock.out-of-stock {
    background: #dc3545;
}

/* Optional: Add a subtle glow effect */
.vvsoutlet-azm-search-result-stock {
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2);
}

.vvsoutlet-azm-search-result-stock.low-stock {
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.2);
}

.vvsoutlet-azm-search-result-stock.out-of-stock {
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
}

.vvsoutlet-azm-search-no-results {
    padding: 20px 16px;
    text-align: center;
    color: #666;
    font-size: 14px;
}

.vvsoutlet-azm-search-footer {
    padding: 12px 16px;
    border-top: 1px solid #e7e7e7;
    background: #f9f9f9;
}

.vvsoutlet-azm-view-all-btn {
    display: block;
    width: 100%;
    text-align: center;
    color: #ff9900;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 0;
    transition: color 0.2s ease;
}

.vvsoutlet-azm-view-all-btn:hover {
    color: #e68900;
}

/* Service & Pro Links Footer */
.vvsoutlet-azm-menu-footer {
    margin-top: auto;
    background: #f8f9fa;
    border-top: 1px solid #e7e7e7;
    padding: 20px;
}

.vvsoutlet-azm-menu-footer-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vvsoutlet-azm-menu-footer-btn {
    display: flex;
    align-items: center;
    padding: 16px;
    background: white;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    transition: all 0.2s ease;
    gap: 12px;
}

.vvsoutlet-azm-menu-footer-btn:hover {
    background: #f5f7fa;
    border-color: #ff9900;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    color: #333;
    text-decoration: none;
}

.vvsoutlet-azm-menu-footer-btn svg:first-child {
    color: #ff9900;
    flex-shrink: 0;
}

.vvsoutlet-azm-menu-footer-btn-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.vvsoutlet-azm-menu-footer-btn-title {
    font-weight: 600;
    font-size: 15px;
    color: #333;
    margin-bottom: 2px;
}

.vvsoutlet-azm-menu-footer-btn-desc {
    font-size: 12px;
    color: #666;
    line-height: 1.3;
}

.vvsoutlet-azm-menu-footer-btn-arrow {
    color: #999;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.vvsoutlet-azm-menu-footer-btn:hover .vvsoutlet-azm-menu-footer-btn-arrow {
    transform: translate(2px, -2px);
    color: #ff9900;
}

/* Specific hover colors */
.vvsoutlet-azm-menu-footer-support:hover {
    border-color: #28a745;
}

.vvsoutlet-azm-menu-footer-support:hover svg:first-child {
    color: #28a745;
}

.vvsoutlet-azm-menu-footer-support:hover .vvsoutlet-azm-menu-footer-btn-arrow {
    color: #28a745;
}

.vvsoutlet-azm-menu-footer-pro:hover {
    border-color: #232f3e;
}

.vvsoutlet-azm-menu-footer-pro:hover svg:first-child {
    color: #232f3e;
}

.vvsoutlet-azm-menu-footer-pro:hover .vvsoutlet-azm-menu-footer-btn-arrow {
    color: #232f3e;
}

/* ===================================
   MOBILE CART SIDEMENU
   =================================== */

.vvsoutlet-azm-mobile-cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

.vvsoutlet-azm-mobile-cart-overlay.open {
    opacity: 1;
    visibility: visible;
}

.vvsoutlet-azm-mobile-cart-sidemenu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 400px;
    height: 100vh;
    background: #ffffff;
    z-index: 9999;
    transition: right 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0,0,0,0.15);
}

.vvsoutlet-azm-mobile-cart-sidemenu.open {
    right: 0;
}

.vvsoutlet-azm-mobile-cart-header {
    background: #2F3D50;
    color: #ffffff;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
}

.vvsoutlet-azm-mobile-cart-title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.vvsoutlet-azm-mobile-cart-title svg {
    stroke: #ffffff;
    fill: none;
}

.vvsoutlet-azm-mobile-cart-title-text h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
}

.vvsoutlet-azm-mobile-cart-count-text {
    font-size: 12px;
    color: #cccccc;
    font-weight: 400;
}

.vvsoutlet-azm-mobile-cart-close {
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vvsoutlet-azm-mobile-cart-close svg {
    stroke: #ffffff;
    fill: none;
}

.vvsoutlet-azm-mobile-cart-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    /* CART FIX: Ensure proper layout with footer */
    min-height: 0;
}

.vvsoutlet-azm-mobile-cart-items {
    padding: 16px;
    /* CART FIX: Take available space but allow footer to be visible */
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.vvsoutlet-azm-mobile-cart-empty {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

.vvsoutlet-azm-mobile-cart-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.vvsoutlet-azm-mobile-cart-empty h3 {
    margin-bottom: 8px;
    color: #333;
}

.vvsoutlet-azm-mobile-cart-item {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
}

.vvsoutlet-azm-mobile-cart-item-image {
    width: 70px;
    height: 70px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.vvsoutlet-azm-mobile-cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vvsoutlet-azm-mobile-cart-item-details {
    flex: 1;
    min-width: 0;
}

.vvsoutlet-azm-mobile-cart-item-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
    color: #333;
    text-decoration: none;
    display: block;
    line-height: 1.3;
}

.vvsoutlet-azm-mobile-cart-item-title:hover {
    color: #ff9900;
}

.vvsoutlet-azm-mobile-quantity-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0;
}

.vvsoutlet-azm-qty-btn {
    width: 28px;
    height: 28px;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.vvsoutlet-azm-qty-btn:hover:not(.disabled):not(:disabled) {
    background: #ff9900;
    color: white;
    border-color: #ff9900;
}

/* Disabled state for quantity decrease button */
.vvsoutlet-azm-qty-btn.disabled,
.vvsoutlet-azm-qty-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #f5f5f5;
    color: #999;
}

/* Updating state for cart items */
.vvsoutlet-azm-mobile-cart-items.updating {
    opacity: 0.6;
    pointer-events: none;
}

.vvsoutlet-azm-qty-input {
    width: 45px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 4px;
    font-size: 14px;
    height: 28px;
}

.vvsoutlet-azm-mobile-cart-item-price {
    font-size: 14px;
    font-weight: 600;
    color: #ff9900;
    margin-top: 4px;
}

.vvsoutlet-azm-mobile-cart-item-remove {
    position: absolute;
    top: 0;
    right: 0;
    /* MOBILE OPTIMIZED: Larger, more visible remove button */
    background: #fff;
    border: 1px solid #e60023;
    color: #e60023;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.vvsoutlet-azm-mobile-cart-item-remove:hover {
    background: #e60023;
    color: #fff;
    transform: scale(1.1);
}

.vvsoutlet-azm-mobile-cart-item-remove:active {
    transform: scale(0.95);
}

.vvsoutlet-azm-mobile-cart-item-remove svg {
    stroke: currentColor;
    fill: none;
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.vvsoutlet-azm-mobile-cart-footer {
    border-top: 1px solid #e7e7e7;
    background: #f8f9fa;
    padding: 12px 20px;
    /* CART FIX: Footer should not take excess space */
    flex-shrink: 0;
}

.vvsoutlet-azm-mobile-cart-summary {
    margin-bottom: 10px;
}

.vvsoutlet-azm-mobile-cart-savings {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    color: #27ae60;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 2px solid #27ae60;
}

.vvsoutlet-azm-mobile-cart-savings-amount {
    color: #dc3545;
    font-weight: 700;
    font-size: 18px;
}

.vvsoutlet-azm-mobile-cart-savings-amount .woocommerce-Price-amount {
    color: #dc3545 !important;
    font-weight: 700;
}

/* Per-item savings in cart items */
.vvsoutlet-azm-mobile-cart-item-savings {
    font-size: 13px;
    margin-top: 6px;
    line-height: 1.4;
    padding: 4px 0;
}

.vvsoutlet-azm-mobile-cart-item-savings .savings-text {
    color: #27ae60;
    font-weight: 600;
}

.vvsoutlet-azm-mobile-cart-item-savings .savings-amount {
    color: #dc3545;
    font-weight: 700;
    font-size: 14px;
}

.vvsoutlet-azm-mobile-cart-item-savings .savings-amount .woocommerce-Price-amount {
    color: #dc3545 !important;
    font-weight: 700;
}

.vvsoutlet-azm-mobile-cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    padding-top: 4px;
}

.vvsoutlet-azm-mobile-cart-total-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vvsoutlet-azm-mobile-cart-total-label span {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.vvsoutlet-azm-mobile-cart-total-label .shipping-notice {
    font-size: 11px;
    color: #666;
    font-weight: 400;
    line-height: 1.3;
}

.vvsoutlet-azm-mobile-cart-total-amount {
    color: #ff9900;
    font-size: 24px;
    font-weight: 700;
}

.vvsoutlet-azm-mobile-cart-total-amount .woocommerce-Price-amount {
    font-size: 24px;
    font-weight: 700;
}

.vvsoutlet-azm-mobile-cart-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vvsoutlet-azm-mobile-cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    font-size: 15px;
}

.vvsoutlet-azm-mobile-cart-btn-primary {
    background: #ff9900;
    color: white;
}

.vvsoutlet-azm-mobile-cart-btn-primary:hover {
    background: #e68900;
    transform: translateY(-1px);
}

.vvsoutlet-azm-mobile-cart-btn-secondary {
    background: white;
    color: #333;
    border: 1px solid #ddd;
}

.vvsoutlet-azm-mobile-cart-btn-secondary:hover {
    border-color: #ff9900;
    color: #ff9900;
}

.vvsoutlet-azm-mobile-cart-btn-tertiary {
    background: #f8f9fa;
    color: #666;
    border: 1px solid #e9ecef;
    font-size: 14px;
}

.vvsoutlet-azm-mobile-cart-btn-tertiary:hover {
    border-color: #666;
    color: #333;
    background: #e9ecef;
}

.vvsoutlet-azm-mobile-cart-empty-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
    padding: 0 20px;
}

.vvsoutlet-azm-mobile-cart-btn-empty {
    padding: 10px 16px;
    font-size: 14px;
}

.vvsoutlet-azm-mobile-cart-btn svg {
    stroke: currentColor;
    fill: none;
}

/* ===================================
   MOBILE ACCOUNT SIDEMENU
   =================================== */

.vvsoutlet-azm-mobile-account-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

.vvsoutlet-azm-mobile-account-overlay.open {
    opacity: 1;
    visibility: visible;
}

.vvsoutlet-azm-mobile-account-sidemenu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 380px;
    height: 100vh;
    background: #ffffff;
    z-index: 9999;
    transition: right 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0,0,0,0.15);
}

.vvsoutlet-azm-mobile-account-sidemenu.open {
    right: 0;
}

.vvsoutlet-azm-mobile-account-header {
    background: #2F3D50;
    color: #ffffff;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
}

/* Combined User Header (v1.52.0) */
.vvsoutlet-azm-mobile-account-header-combined {
    background: linear-gradient(135deg, #1e3a5f 0%, #2F3D50 100%);
    color: #ffffff;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.vvsoutlet-azm-mobile-account-header-user {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
}

.vvsoutlet-azm-mobile-account-header-combined .vvsoutlet-azm-mobile-account-avatar img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
    object-fit: cover;
}

.vvsoutlet-azm-mobile-account-header-combined .vvsoutlet-azm-mobile-account-user-details {
    flex: 1;
}

.vvsoutlet-azm-mobile-account-header-combined .vvsoutlet-azm-mobile-account-name {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 3px;
}

.vvsoutlet-azm-mobile-account-header-combined .vvsoutlet-azm-mobile-account-email {
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    margin-bottom: 4px;
}

.vvsoutlet-azm-mobile-account-header-combined .vvsoutlet-azm-mobile-account-bankid {
    font-size: 11px;
    color: #4ade80;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.vvsoutlet-azm-mobile-account-header-combined .vvsoutlet-azm-mobile-account-bankid svg {
    fill: #4ade80;
}

.vvsoutlet-azm-mobile-account-header-combined .vvsoutlet-azm-mobile-account-close {
    background: rgba(255,255,255,0.1);
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.vvsoutlet-azm-mobile-account-header-combined .vvsoutlet-azm-mobile-account-close:hover {
    background: rgba(255,255,255,0.2);
}

.vvsoutlet-azm-mobile-account-header-combined .vvsoutlet-azm-mobile-account-close svg {
    stroke: #ffffff;
    fill: none;
}

.vvsoutlet-azm-mobile-account-title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.vvsoutlet-azm-mobile-account-title svg {
    stroke: #ffffff;
    fill: none;
}

.vvsoutlet-azm-mobile-account-title-text h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
}

.vvsoutlet-azm-mobile-account-subtitle {
    font-size: 12px;
    color: #cccccc;
    font-weight: 400;
}

.vvsoutlet-azm-mobile-account-close {
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vvsoutlet-azm-mobile-account-close svg {
    stroke: #ffffff;
    fill: none;
}

.vvsoutlet-azm-mobile-account-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.vvsoutlet-azm-mobile-account-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    background: #f8f9fa;
}

.vvsoutlet-azm-mobile-account-avatar {
    flex-shrink: 0;
}

.vvsoutlet-azm-mobile-account-avatar img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

.vvsoutlet-azm-mobile-account-user-details {
    flex: 1;
}

.vvsoutlet-azm-mobile-account-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.vvsoutlet-azm-mobile-account-email {
    font-size: 13px;
    color: #666;
}

.vvsoutlet-azm-mobile-account-bankid {
    font-size: 12px;
    color: #28a745;
    margin-top: 6px;
    display: flex;
    align-items: center;
    font-weight: 600;
}

.vvsoutlet-azm-mobile-account-menu {
    padding: 0;
}

.vvsoutlet-azm-mobile-account-section-title {
    padding: 16px 20px 8px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vvsoutlet-azm-mobile-account-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    color: #333;
    text-decoration: none;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #f0f0f0;
}

.vvsoutlet-azm-mobile-account-menu-item:hover {
    background-color: #f7f7f7;
}

.vvsoutlet-azm-mobile-account-menu-item.vvsoutlet-azm-mobile-account-logout:hover {
    background-color: #fff5f5;
    color: #e60023;
}

.vvsoutlet-azm-mobile-account-menu-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: #f0f0f0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vvsoutlet-azm-mobile-account-menu-icon svg {
    stroke: #666;
    fill: none;
}

.vvsoutlet-azm-mobile-account-logout .vvsoutlet-azm-mobile-account-menu-icon {
    background: #fff0f0;
}

.vvsoutlet-azm-mobile-account-logout .vvsoutlet-azm-mobile-account-menu-icon svg {
    stroke: #e60023;
}

.vvsoutlet-azm-mobile-account-menu-text {
    flex: 1;
}

.vvsoutlet-azm-mobile-account-menu-title {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 2px;
    color: inherit;
}

.vvsoutlet-azm-mobile-account-menu-desc {
    font-size: 12px;
    color: #999;
    line-height: 1.2;
}

.vvsoutlet-azm-mobile-account-menu-arrow {
    flex-shrink: 0;
    stroke: #ccc;
    fill: none;
}

/* 2x2 Grid Menu */
.vvsoutlet-azm-mobile-account-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 16px;
}

.vvsoutlet-azm-mobile-account-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 12px;
    background: #f8f9fa;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.vvsoutlet-azm-mobile-account-grid-item:hover {
    background: #e9ecef;
    transform: translateY(-1px);
}

.vvsoutlet-azm-mobile-account-grid-icon {
    width: 44px;
    height: 44px;
    background: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

.vvsoutlet-azm-mobile-account-grid-icon svg {
    stroke: #3b82f6;
    fill: none;
}

.vvsoutlet-azm-mobile-account-grid-title {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    text-align: center;
}

.vvsoutlet-azm-mobile-account-divider {
    height: 8px;
    background: #f5f5f5;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
}

.vvsoutlet-azm-mobile-account-login-prompt {
    text-align: center;
    padding: 40px 20px;
}

.vvsoutlet-azm-mobile-account-login-icon {
    margin-bottom: 16px;
}

.vvsoutlet-azm-mobile-account-login-icon svg {
    stroke: #ff9900;
    fill: none;
}

.vvsoutlet-azm-mobile-account-login-prompt h4 {
    font-size: 18px;
    margin-bottom: 8px;
    color: #333;
}

.vvsoutlet-azm-mobile-account-login-prompt p {
    color: #666;
    line-height: 1.5;
}

.vvsoutlet-azm-mobile-account-login-buttons {
    padding: 0 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vvsoutlet-azm-mobile-account-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    font-size: 16px;
}

.vvsoutlet-azm-mobile-account-btn-primary {
    background: #ff9900;
    color: white;
    border: none;
}

.vvsoutlet-azm-mobile-account-btn-primary:hover {
    background: #e68900;
    transform: translateY(-1px);
}

.vvsoutlet-azm-mobile-account-btn-secondary {
    background: white;
    color: #333;
    border: 1px solid #ddd;
}

.vvsoutlet-azm-mobile-account-btn-secondary:hover {
    border-color: #ff9900;
    color: #ff9900;
}

.vvsoutlet-azm-mobile-account-btn svg {
    stroke: currentColor;
    fill: none;
}

.vvsoutlet-azm-mobile-account-benefits {
    padding: 20px;
    background: #f8f9fa;
}

.vvsoutlet-azm-mobile-account-benefits h4 {
    font-size: 14px;
    margin-bottom: 12px;
    color: #333;
}

.vvsoutlet-azm-mobile-account-benefit-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    color: #666;
}

.vvsoutlet-azm-mobile-account-benefit-item svg {
    stroke: #4CAF50;
    fill: none;
    flex-shrink: 0;
}

/* Mobile menu overlay */
.vvsoutlet-azm-mobile-menu {
    position: fixed;
    top: 0;
    left: -320px;
    width: 320px;
    height: 100vh;
    background: #ffffff;
    z-index: 10000;
    transition: left 0.3s ease-in-out;
    overflow-y: auto;
    box-shadow: 2px 0 10px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
}

.vvsoutlet-azm-mobile-menu.open {
    left: 0;
}

.vvsoutlet-azm-mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

.vvsoutlet-azm-mobile-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* Menu header */
.vvsoutlet-azm-menu-header {
    background: #2F3D50;
    color: #ffffff;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vvsoutlet-azm-menu-header-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.vvsoutlet-azm-menu-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: brightness(0) invert(1) opacity(0.95);
}

.vvsoutlet-azm-menu-header-text {
    flex: 1;
}

.vvsoutlet-azm-menu-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
}

.vvsoutlet-azm-menu-subtitle {
    font-size: 12px;
    color: #cccccc;
    margin: 2px 0 0 0;
    line-height: 1.2;
    font-weight: 400;
}

.vvsoutlet-azm-menu-close {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 24px;
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
}

/* Menu content */
.vvsoutlet-azm-menu-content {
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.vvsoutlet-azm-menu-section {
    border-bottom: 1px solid #e7e7e7;
}

.vvsoutlet-azm-menu-section-title {
    background: #f3f3f3;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.vvsoutlet-azm-menu-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vvsoutlet-azm-menu-item {
    border-bottom: 1px solid #e7e7e7;
}

.vvsoutlet-azm-menu-item:last-child {
    border-bottom: none;
}

.vvsoutlet-azm-menu-link {
    display: block;
    padding: 14px 20px;
    color: #333;
    text-decoration: none;
    font-size: 16px;
    transition: background-color 0.2s ease;
}

.vvsoutlet-azm-menu-link:hover {
    background-color: #f7f7f7;
}

.vvsoutlet-azm-menu-link.has-arrow::after {
    content: "›";
    float: right;
    font-size: 18px;
    color: #666;
}

/* Expandable menu items */
.vvsoutlet-azm-menu-expandable .vvsoutlet-azm-menu-toggle {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.vvsoutlet-azm-menu-toggle .vvsoutlet-azm-menu-arrow {
    stroke: #666;
    fill: none;
    transition: transform 0.2s ease;
}

.vvsoutlet-azm-menu-toggle:hover .vvsoutlet-azm-menu-arrow {
    stroke: #ff9900;
}

/* Submenu styles */
.vvsoutlet-azm-submenu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: 1001;
    overflow-y: auto;
}

.vvsoutlet-azm-submenu-header {
    background: #2F3D50;
    color: #ffffff;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #ddd;
    position: sticky;
    top: 0;
    z-index: 1002;
}

.vvsoutlet-azm-submenu-back {
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.vvsoutlet-azm-submenu-back svg {
    stroke: #ffffff;
    fill: none;
}

.vvsoutlet-azm-submenu-header h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.vvsoutlet-azm-submenu-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vvsoutlet-azm-submenu .vvsoutlet-azm-menu-item {
    border-bottom: 1px solid #e7e7e7;
}

.vvsoutlet-azm-submenu .vvsoutlet-azm-menu-link {
    padding: 16px 20px;
    font-size: 15px;
}

.vvsoutlet-azm-submenu .vvsoutlet-azm-menu-link:hover {
    background-color: #f7f7f7;
    padding-left: 24px;
}

/* Responsive adjustments */
@media (max-width: 374px) {
    .vvsoutlet-azm-header-nav {
        padding: 0 8px;
    }
    
    .vvsoutlet-azm-menu-btn {
        margin-right: 8px;
    }
    
    .vvsoutlet-azm-search-container {
        margin: 8px 8px;
    }
    
    .vvsoutlet-azm-search-input {
        padding: 10px 14px;
        font-size: 15px;
    }
    
    .vvsoutlet-azm-search-btn {
        padding: 10px 14px;
    }
}

/* Show on mobile and tablet, hide only on wide desktop (except V3 route) */
@media (min-width: 1024px) {
    body:not(.vvsoutlet-v3-route) .vvsoutlet-azm-mobile-header {
        display: none;
    }
    
    /* Always show AZM header on V3 route, even on desktop */
    body.vvsoutlet-v3-route .vvsoutlet-azm-mobile-header {
        display: flex;
    }
}

/* Show on tablet and mobile, and also on V3 route for all screens */
@media (max-width: 1023px) {
    .vvsoutlet-azm-mobile-header {
        display: flex;
    }
}

/* Always show on V3 route regardless of screen size */
body.vvsoutlet-v3-route .vvsoutlet-azm-mobile-header {
    display: flex !important;
    z-index: 9999 !important; /* V3 FIX: Ensure header is above all content */
    position: relative !important; /* Changed from fixed to relative - header scrolls with page */
    width: 100% !important;
}

/* ======================================
 * V3 ROUTE SEARCH BAR STYLING
 * ======================================
 * Mobile: Uses isolated search (same as standard routes)
 * Desktop: Uses Typesense button search
 */

/* V3 Mobile Search - show isolated search on mobile/tablet, hide on desktop */
.vvsoutlet-azm-v3-mobile-search {
    display: block;
}

@media (min-width: 1024px) {
    .vvsoutlet-azm-v3-mobile-search {
        display: none !important;
    }
}

/* V3 Desktop Search - integrated into header on desktop */
.vvsoutlet-azm-v3-desktop-search-in-header {
    display: none;
}

/* Desktop: Show search in header navigation */
@media (min-width: 1024px) {
    /* Make header nav a proper flex container with centered search */
    body.vvsoutlet-is-v3-route .vvsoutlet-azm-header-nav {
        display: flex;
        align-items: center;
        justify-content: center; /* Center all items */
        position: relative;
    }

    /* Hide hamburger menu on desktop V3 route */
    body.vvsoutlet-is-v3-route .vvsoutlet-azm-menu-btn {
        display: none;
    }

    /* Logo section - absolute positioning on the left */
    body.vvsoutlet-is-v3-route .vvsoutlet-azm-logo-unit {
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
    }

    /* Show desktop search in header - centered in the middle */
    .vvsoutlet-azm-v3-desktop-search-in-header {
        display: flex;
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }

    /* Right buttons - absolute positioning on the right */
    body.vvsoutlet-is-v3-route .vvsoutlet-azm-header-right {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
    }

    /* Hide the old desktop search wrapper completely */
    .vvsoutlet-azm-v3-desktop-search-wrapper {
        display: none !important;
    }

    /* Hide mobile search on V3 route desktop */
    body.vvsoutlet-is-v3-route .vvsoutlet-azm-isolated-search-wrapper {
        display: none !important;
    }
}

/* V3 Desktop Search field - Typesense button styling */
.vvsoutlet-azm-v3-desktop-search-field {
    width: 100%;
    padding: 8px 40px 8px 16px; /* Reduced padding for header integration */
    border: none;
    border-radius: 20px; /* Slightly smaller radius */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    font-size: 18px;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    text-align: left;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

.vvsoutlet-azm-v3-desktop-search-field:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.vvsoutlet-azm-v3-desktop-search-field:focus {
    outline: 2px solid #FF9900;
    outline-offset: 2px;
}

/* V3 Desktop Search placeholder */
.vvsoutlet-azm-v3-desktop-search-field .vvsoutlet-azm-search-placeholder {
    flex: 1;
    color: #666;
    font-size: 14px; /* Smaller for header integration */
    font-weight: 400;
}

/* V3 Desktop Search icon */
.vvsoutlet-azm-v3-desktop-search-field .vvsoutlet-azm-search-icon {
    position: absolute;
    right: 16px; /* Adjusted for smaller button */
    top: 50%;
    transform: translateY(-50%);
    width: 20px; /* Smaller icon */
    height: 24px;
    color: #FF9900;
    flex-shrink: 0;
}

/* ======================================
 * V3 ROUTE RESPONSIVE CATEGORIES
 * ======================================
 * Mobile: Shows curated featured links (same as standard route)
 * Desktop: Shows main categories from Max Mega Menu
 */

/* V3 Mobile Categories - show on mobile/tablet, hide on desktop */
.vvsoutlet-azm-v3-mobile-categories {
    display: contents; /* Use contents to maintain flex layout */
}

@media (min-width: 1024px) {
    .vvsoutlet-azm-v3-mobile-categories {
        display: none !important;
    }
}

/* V3 Desktop Categories - hide on mobile/tablet, show on desktop */
.vvsoutlet-azm-v3-desktop-categories {
    display: none;
}

@media (min-width: 1024px) {
    .vvsoutlet-azm-v3-desktop-categories {
        display: contents; /* Use contents to maintain flex layout */
    }
    
    /* Center V3 desktop categories */
    body.vvsoutlet-v3-route .vvsoutlet-azm-category-scroll {
        justify-content: center;
    }
}

/* ======================================
 * V3 MEGAMENU DROPDOWNS
 * ======================================
 * Desktop megamenu functionality for V3 categories
 */

/* V3 Desktop Megamenu - hide on mobile/tablet, show on desktop */
.vvsoutlet-azm-v3-desktop-megamenu {
    display: none;
}

@media (min-width: 1024px) {
    .vvsoutlet-azm-v3-desktop-megamenu {
        display: contents; /* Use contents to maintain flex layout */
    }

    /* V3 ROUTE: Ensure category bar shows on desktop with megamenu */
    body.vvsoutlet-v3-route .vvsoutlet-azm-category-bar {
        display: block !important;
        background: #0056b3;
        padding: 10px 0;
        width: 100%;
    }

    /* V3 ROUTE: Show megamenu navigation properly */
    body.vvsoutlet-v3-route .vvsoutlet-azm-megamenu-nav {
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 30px;
        padding: 0 20px;
    }

    /* Center V3 desktop megamenu */
    body.vvsoutlet-v3-route .vvsoutlet-azm-category-scroll {
        justify-content: center;
    }
}

/* Megamenu item container */
.vvsoutlet-azm-megamenu-item {
    position: relative;
    display: inline-block;
    z-index: 999; /* MEGAMENU FIX: Ensure proper stacking context */
}

/* Megamenu link (main category) */
.vvsoutlet-azm-megamenu-link {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    position: relative;
    transition: all 0.2s ease;
    border: 3px solid transparent; /* Transparent border by default */
    border-radius: 8px 8px 0 0; /* Rounded top for 3D effect */
    background: none;
    cursor: pointer;
    font-family: inherit;
    gap: 8px;
}

.vvsoutlet-azm-megamenu-link:hover {
    background-color: rgba(255,255,255,0.15);
    color: #ffffff;
}

.vvsoutlet-azm-megamenu-link:active {
    background-color: rgba(255,255,255,0.2);
}

/* Active state - when dropdown is showing (3D ribbon effect) */
.vvsoutlet-azm-megamenu-item.megamenu-active .vvsoutlet-azm-megamenu-link {
    background: #ffffff;
    color: #1a1a1a;
    border: 3px solid #FF9900; /* Orange frame around active nav item */
    border-bottom: none; /* Remove bottom border to connect with dropdown */
    border-radius: 8px 8px 0 0; /* Rounded top, straight bottom for connection */
    box-shadow: 0 -2px 8px rgba(255, 153, 0, 0.2); /* Subtle top shadow for depth */
    z-index: 1000000; /* Above dropdown to create overlap effect */
    position: relative;
    margin-bottom: -3px; /* Overlap with dropdown border */
}

/* Active state - icon turns orange */
.vvsoutlet-azm-megamenu-item.megamenu-active .vvsoutlet-azm-megamenu-link i:first-child {
    color: #FF9900;
}

/* Megamenu link icon */
.vvsoutlet-azm-megamenu-link i:first-child {
    font-size: 16px;
    width: 18px;
    text-align: center;
    color: #FF9900;
}

/* Megamenu arrow icon */
.vvsoutlet-azm-megamenu-arrow {
    font-size: 10px !important;
    width: auto !important;
    color: rgba(255,255,255,0.7) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
    display: inline-block;
}

/* Rotate arrow when dropdown is active */
.vvsoutlet-azm-megamenu-item.megamenu-active .vvsoutlet-azm-megamenu-arrow,
.vvsoutlet-azm-megamenu-item:hover .vvsoutlet-azm-megamenu-arrow {
    transform: rotate(180deg);
    color: #ffffff !important;
}

/* Megamenu dropdown container - will be moved to body by JS */
.vvsoutlet-azm-megamenu-dropdown {
    position: fixed; /* Fixed positioning since moved to body */
    background: #ffffff;
    border: 3px solid #FF9900; /* Orange frame around dropdown */
    border-radius: 0 0 8px 8px; /* Rounded bottom, straight top for connection */
    box-shadow: 0 6px 24px rgba(255, 153, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.1); /* 3D orange shadow */
    z-index: 999999 !important; /* MEGAMENU FIX: Very high z-index to appear above all content */
    min-width: 250px;
    max-width: 320px;
    opacity: 0;
    visibility: hidden;
    display: none; /* Start completely hidden */
    transition: opacity 0.3s ease, visibility 0.3s ease, box-shadow 0.3s ease;
    transform: none; /* No transform, JS handles positioning */
    pointer-events: none;
    margin-top: 0; /* No gap - connects directly to nav item */
}

/* Show dropdown on hover and via JavaScript */
/* NOTE: Dropdowns are moved to body by JavaScript, so hover selector won't work */
.vvsoutlet-azm-megamenu-dropdown.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important; /* JavaScript handles positioning */
    pointer-events: auto !important;
}

/* Dropdown content wrapper */
.vvsoutlet-azm-megamenu-dropdown-content {
    padding: 20px;
    position: relative;
}

/* 3D bending effect - inner shadow at top of dropdown */
.vvsoutlet-azm-megamenu-dropdown-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(to bottom, rgba(255, 153, 0, 0.08), transparent);
    pointer-events: none;
}

/* Dropdown column */
.vvsoutlet-azm-megamenu-column {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative; /* Positioning context for flyouts */
}

/* Dimming overlay for dropdown when flyout is active (v1.22.82) */
.vvsoutlet-azm-megamenu-column::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7); /* White semi-transparent overlay */
    backdrop-filter: blur(2px); /* Slight blur effect */
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    z-index: 10; /* Above dropdown content but below flyout */
}

/* Show dimming overlay when any flyout is hovered */
.vvsoutlet-azm-megamenu-column:has(.vvsoutlet-azm-megamenu-sublink-wrapper.has-flyout:hover)::before {
    opacity: 1;
    visibility: visible;
}

/* Main category link in dropdown */
.vvsoutlet-azm-megamenu-category-main {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #1a1a1a;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.4px;
    border-radius: 0;
    margin-bottom: 16px;
    margin-left: -20px;
    margin-right: -20px;
    margin-top: -20px;
    transition: all 0.2s ease;
    border-left: none;
    border-bottom: 3px solid #FF9900;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

/* Icon styling in dropdown */
.vvsoutlet-azm-megamenu-category-main i {
    font-size: 18px;
    color: #FF9900;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.vvsoutlet-azm-megamenu-category-main span {
    flex: 1;
}

.vvsoutlet-azm-megamenu-category-main:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 153, 0, 0.1), transparent);
    transition: left 0.5s ease;
}

.vvsoutlet-azm-megamenu-category-main:hover {
    background: linear-gradient(135deg, #FF9900 0%, #ff8800 100%);
    color: #ffffff;
    transform: translateX(3px);
    box-shadow: 0 2px 8px rgba(255, 153, 0, 0.3);
}

.vvsoutlet-azm-megamenu-category-main:hover i {
    color: #ffffff;
    transform: scale(1.1);
}

.vvsoutlet-azm-megamenu-category-main:hover:before {
    left: 100%;
}

/* Sublinks in dropdown */
.vvsoutlet-azm-megamenu-sublink {
    display: block;
    padding: 10px 16px;
    color: #4a4a4a;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 6px;
    transition: all 0.15s ease;
    border-left: 2px solid transparent;
    margin: 2px 0;
    position: relative;
}

.vvsoutlet-azm-megamenu-sublink:hover {
    background: rgba(255, 153, 0, 0.08);
    color: #FF6600;
    border-left-color: #FF9900;
    transform: translateX(4px);
    font-weight: 600;
}

.vvsoutlet-azm-megamenu-sublink:active {
    transform: translateX(2px);
}

/* ====================================================================
   MULTI-COLUMN DROPDOWNS FOR LONG MENUS (v1.22.69)
   Adaptive columns: single column (< 8 items), 2 columns (8-21), 3 columns (22+)
   ==================================================================== */

/* Apply multi-column layout to dropdown columns with many items */
@media (min-width: 1024px) {
    /* Remove max-height to prevent scrollbars - dropdowns expand naturally */
    .vvsoutlet-azm-megamenu-dropdown-content {
        /* max-height removed - columns handle height via max-height instead */
        overflow: visible; /* No scrollbars */
    }

    /* Main category link stays at top, spans all columns */
    .vvsoutlet-azm-megamenu-category-main {
        grid-column: 1 / -1; /* Span all grid columns */
        display: flex; /* Keep flex for icon alignment */
        margin-bottom: 16px; /* More space below header */
        width: calc(100% + 40px); /* Full width accounting for negative margins */
    }

    /* FLYOUT FIX (v1.22.81): Replace CSS columns with CSS Grid
       CSS columns break absolute positioning for flyouts.
       Grid allows proper flyout positioning while maintaining layout. */

    /* Default: Single column for small menus (< 8 items) */
    .vvsoutlet-azm-megamenu-column.vvsoutlet-azm-megamenu-links {
        display: grid;
        grid-template-columns: 1fr; /* Single column */
        gap: 6px;
        align-content: start;
    }

    /* Default dropdown width for single column (< 8 items) */
    .vvsoutlet-azm-megamenu-dropdown {
        min-width: 420px;
        max-width: 480px;
    }

    /* For medium menus (8+ items), use 2 columns with Grid */
    .vvsoutlet-azm-megamenu-column.vvsoutlet-azm-megamenu-links:has(> :nth-child(8)) {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 equal columns */
        grid-auto-flow: row; /* Fill rows first, then columns (default behavior) */
        gap: 6px 32px; /* row-gap column-gap */
        align-content: start;
    }

    .vvsoutlet-azm-megamenu-dropdown:has(.vvsoutlet-azm-megamenu-links > :nth-child(8)) {
        min-width: 650px;
        max-width: 750px;
    }

    /* For very long menus (22+ items), use 3 columns with Grid */
    .vvsoutlet-azm-megamenu-column.vvsoutlet-azm-megamenu-links:has(> :nth-child(22)) {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
        grid-auto-flow: row; /* Fill rows first, then columns */
        gap: 6px 32px;
        align-content: start;
    }

    .vvsoutlet-azm-megamenu-dropdown:has(.vvsoutlet-azm-megamenu-links > :nth-child(22)) {
        min-width: 950px;
        max-width: 1050px;
    }
}

/* ====================================================================
   VISUAL MEGAMENU - BRANDS ONLY (v1.22.69)
   Brand logos: 6 big (2×3) + 12 small (4×3) side-by-side
   ==================================================================== */

/* Brand dropdown - 768px width for side-by-side grids */
.vvsoutlet-azm-megamenu-dropdown.brands-only {
    width: 768px;
    min-width: 768px;
    max-width: 768px;
}

/* Brand logos wrapper */
.vvsoutlet-azm-brand-logos-wrapper {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Headline at top */
.vvsoutlet-azm-brand-headline {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 12px;
    border-bottom: 2px solid #FF9900;
}

/* Grids container - side by side */
.vvsoutlet-azm-brand-grids-container {
    display: grid;
    grid-template-columns: 40% 60%; /* Big logos 40%, Small logos 60% */
    gap: 20px;
}

/* Big logos grid (2 columns × 3 rows = 6 logos) */
.vvsoutlet-azm-brand-logo-grid.big-logos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 12px;
}

.vvsoutlet-azm-brand-logo-grid.big-logos .vvsoutlet-azm-brand-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    transition: all 0.3s ease;
    text-decoration: none;
    min-height: 100px;
}

.vvsoutlet-azm-brand-logo-grid.big-logos .vvsoutlet-azm-brand-logo-item img {
    width: 100%;
    height: 60px;
    object-fit: contain;
}

/* Small logos grid (4 columns × 3 rows = 12 logos) */
.vvsoutlet-azm-brand-logo-grid.small-logos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
}

.vvsoutlet-azm-brand-logo-grid.small-logos .vvsoutlet-azm-brand-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 12px;
    transition: all 0.3s ease;
    text-decoration: none;
    min-height: 70px;
}

.vvsoutlet-azm-brand-logo-grid.small-logos .vvsoutlet-azm-brand-logo-item img {
    width: 100%;
    height: 40px;
    object-fit: contain;
}

/* "Upptäck alla varumärken" link at bottom */
.vvsoutlet-azm-brand-discover-link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 0;
    color: #FF9900;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.vvsoutlet-azm-brand-discover-link i {
    font-size: 12px;
    transition: transform 0.2s ease;
}

.vvsoutlet-azm-brand-discover-link:hover {
    color: #ff8800;
    transform: translateX(4px);
}

.vvsoutlet-azm-brand-discover-link:hover i {
    transform: translateX(3px);
}

/* Hover effects for all brand logos */
.vvsoutlet-azm-brand-logo-item:hover {
    border-color: #FF9900;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 153, 0, 0.15);
    background: #fffbf5;
}

.vvsoutlet-azm-brand-logo-item img {
    filter: grayscale(0%) brightness(1);
    transition: all 0.3s ease;
}

.vvsoutlet-azm-brand-logo-item:hover img {
    filter: grayscale(0%) brightness(1.1);
    transform: scale(1.05);
}

/* ====================================================================
   SNABBLÄNKAR (QUICK LINKS) - v1.22.84
   Lighter grey ribbon below category items in megamenu dropdowns
   ==================================================================== */

.vvsoutlet-azm-megamenu-snabblank {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e5e5e5;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vvsoutlet-azm-megamenu-snabblank-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    margin-bottom: 4px;
    padding-left: 4px;
}

.vvsoutlet-azm-megamenu-snabblank-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f8f8f8;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    color: #666;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
}

.vvsoutlet-azm-megamenu-snabblank-link:hover {
    background: #fff;
    border-color: #FF9900;
    color: #1a1a1a;
    box-shadow: 0 2px 8px rgba(255, 153, 0, 0.1);
    transform: translateX(4px);
}

.vvsoutlet-azm-megamenu-snabblank-link i {
    font-size: 14px;
    color: #FF9900;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.vvsoutlet-azm-megamenu-snabblank-link:hover i {
    opacity: 1;
}

.vvsoutlet-azm-megamenu-snabblank-link span {
    flex: 1;
}

/* Type-specific styling */
.vvsoutlet-azm-megamenu-snabblank-link[data-type="product"] {
    border-left: 3px solid #4CAF50;
}

.vvsoutlet-azm-megamenu-snabblank-link[data-type="subcategory"] {
    border-left: 3px solid #2196F3;
}

.vvsoutlet-azm-megamenu-snabblank-link[data-type="landing"] {
    border-left: 3px solid #FF9900;
}

/* ====================================================================
   HORIZONTAL SNABBLÄNKAR SUBMENU BAR - v1.22.107
   2nd menu ribbon below main category navigation (desktop only)
   ==================================================================== */

.vvsoutlet-azm-snabblank-submenu-bar {
    width: 100%;
    background: #3a3a3a; /* Darker grey to match header */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    height: 25px; /* Compact height */
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    overflow-x: auto;
    overflow-y: hidden;

    /* Hide scrollbar while keeping scroll functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari, Opera */
.vvsoutlet-azm-snabblank-submenu-bar::-webkit-scrollbar {
    display: none;
}

/* Only visible on desktop */
@media (min-width: 1024px) {
    .vvsoutlet-azm-snabblank-submenu-bar.active {
        display: flex;
    }
}

.vvsoutlet-azm-snabblank-submenu-content {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 0 20px;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    height: 100%;
}

.vvsoutlet-azm-snabblank-submenu-link {
    display: inline-flex;
    align-items: center;
    color: #e0e0e0; /* Light text on dark background */
    font-size: 12px;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
    height: 100%;
    padding-left: 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

/* Remove border from first link */
.vvsoutlet-azm-snabblank-submenu-link:first-child {
    border-left: none;
    padding-left: 0;
}

.vvsoutlet-azm-snabblank-submenu-link:hover {
    color: #FF9900; /* Orange on hover */
}

/* Hide icons */
.vvsoutlet-azm-snabblank-submenu-link i {
    display: none;
}

/* Mobile behavior - disable dropdowns on mobile */
@media (max-width: 1023px) {
    .vvsoutlet-azm-megamenu-dropdown {
        display: none !important;
    }
    
    .vvsoutlet-azm-megamenu-arrow {
        display: none !important;
    }
    
    /* Make megamenu links behave like regular category links on mobile */
    .vvsoutlet-azm-megamenu-link {
        padding: 10px 14px;
    }
}

/* Accessibility improvements */
/* NOTE: Dropdowns are moved to body, so this rule won't apply anymore */
/* JavaScript handles focus states for dropdowns */

.vvsoutlet-azm-megamenu-link:focus {
    outline: 2px solid #FF9900;
    outline-offset: 2px;
}

.vvsoutlet-azm-megamenu-category-main:focus,
.vvsoutlet-azm-megamenu-sublink:focus {
    outline: 2px solid #FF9900;
    outline-offset: 2px;
}

/* Prevent dropdown from extending beyond viewport */
@media (min-width: 1024px) {
    .vvsoutlet-azm-megamenu-dropdown {
        /* Adjust positioning for dropdowns near screen edges */
        max-width: calc(100vw - 40px);
    }
    
    /* Edge positioning handled by JavaScript since dropdowns are moved to body */
    /* These rules are no longer needed as JavaScript calculates viewport edges */
}

/* MEGAMENU Z-INDEX FIXES */
/* Ensure body and html don't create stacking context issues */
body.vvsoutlet-v3-route {
    position: relative;
}

/* Ensure category navigation creates proper stacking context */
body.vvsoutlet-v3-route .vvsoutlet-azm-category-nav {
    z-index: 999 !important;
    position: relative;
    isolation: isolate; /* Create new stacking context */
}

/* Force megamenu dropdowns to appear above everything */
.vvsoutlet-azm-megamenu-dropdown {
    position: fixed !important; /* Changed from absolute to fixed */
    z-index: 999999 !important;
    isolation: isolate;
}

/* Recalculate positioning for fixed positioning */
.vvsoutlet-azm-megamenu-item:hover .vvsoutlet-azm-megamenu-dropdown,
.vvsoutlet-azm-megamenu-dropdown.show {
    position: fixed !important;
}

/* JavaScript will handle dynamic positioning for fixed elements */
@media (min-width: 1024px) {
    .vvsoutlet-azm-megamenu-dropdown {
        position: fixed !important;
        /* Removed auto overrides - JavaScript sets positioning */
        transform: none !important;
    }
}

/* ======================================
 * PRODUCTION MEGAMENU DROPDOWNS
 * ======================================
 * Clean, professional dropdowns for V3 route
 */

/* Default hidden state for all dropdowns */
body > [data-megamenu-id] {
    opacity: 0;
    visibility: hidden;
    display: none;
    position: fixed;
    z-index: 999999 !important;
    min-width: 260px;
    max-width: 320px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1), 0 2px 10px rgba(0, 0, 0, 0.05);
    transform: translate3d(0, -10px, 0);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    backdrop-filter: blur(10px);
    /* JavaScript will set top and left */
}

/* Arrow indicator pointing up to menu item */
body > [data-megamenu-id]:before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    transform: translateX(-50%) rotate(45deg);
    z-index: -1;
}

/* Show state for active dropdowns */
body > [data-megamenu-id].show {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    transform: translate3d(0, 0, 0) !important;
    pointer-events: auto !important;
    animation: dropdownSlideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Smooth animation for dropdown appearance */
@keyframes dropdownSlideIn {
    from {
        opacity: 0;
        transform: translate3d(0, -8px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Dropdown content wrapper */
.vvsoutlet-azm-megamenu-dropdown-content {
    padding: 16px;
}

/* Dropdown column */
.vvsoutlet-azm-megamenu-column {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Main category link in dropdown */
.vvsoutlet-azm-megamenu-category-main {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #1a1a1a;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.4px;
    border-radius: 0;
    margin-bottom: 16px;
    margin-left: -20px;
    margin-right: -20px;
    margin-top: -20px;
    transition: all 0.2s ease;
    border-left: none;
    border-bottom: 3px solid #FF9900;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

/* Icon styling in dropdown */
.vvsoutlet-azm-megamenu-category-main i {
    font-size: 18px;
    color: #FF9900;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.vvsoutlet-azm-megamenu-category-main span {
    flex: 1;
}

.vvsoutlet-azm-megamenu-category-main:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 153, 0, 0.1), transparent);
    transition: left 0.5s ease;
}

.vvsoutlet-azm-megamenu-category-main:hover {
    background: linear-gradient(135deg, #FF9900 0%, #ff8800 100%);
    color: #ffffff;
    transform: translateX(3px);
    box-shadow: 0 2px 8px rgba(255, 153, 0, 0.3);
}

.vvsoutlet-azm-megamenu-category-main:hover i {
    color: #ffffff;
    transform: scale(1.1);
}

.vvsoutlet-azm-megamenu-category-main:hover:before {
    left: 100%;
}

/* Sublinks in dropdown */
.vvsoutlet-azm-megamenu-sublink {
    display: block;
    padding: 10px 16px;
    color: #4a4a4a;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 6px;
    transition: all 0.15s ease;
    border-left: 2px solid transparent;
    margin: 2px 0;
    position: relative;
}

.vvsoutlet-azm-megamenu-sublink:hover {
    background: rgba(255, 153, 0, 0.08);
    color: #FF6600;
    border-left-color: #FF9900;
    transform: translateX(4px);
    font-weight: 600;
}

.vvsoutlet-azm-megamenu-sublink:active {
    transform: translateX(2px);
}

/* Animation classes */
.vvsoutlet-azm-slide-in {
    animation: amazonSlideIn 0.3s ease-out;
}

.vvsoutlet-azm-slide-out {
    animation: amazonSlideOut 0.3s ease-out;
}

@keyframes amazonSlideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes amazonSlideOut {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

/* Submenu slide animations */
.vvsoutlet-azm-slide-in-right {
    animation: amazonSlideInRight 0.3s ease-out forwards;
}

.vvsoutlet-azm-slide-out-right {
    animation: amazonSlideOutRight 0.3s ease-out forwards;
}

@keyframes amazonSlideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes amazonSlideOutRight {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

/* ======================================
 * SOCIAL PROOF LINE
 * ======================================
 * Trust indicators above search bar
 */

.vvsoutlet-azm-social-proof {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 4px 10px;
    font-size: 10px;
    color: rgba(255,255,255,0.9);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.vvsoutlet-azm-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.vvsoutlet-azm-rating-number {
    font-weight: 600;
    color: #fff200;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
    font-size: 11px;
}

.vvsoutlet-azm-stars {
    display: flex;
    align-items: center;
    gap: 1px;
}

.vvsoutlet-azm-star {
    width: 10px;
    height: 10px;
    opacity: 0.9;
}

.vvsoutlet-azm-google-brand {
    display: flex;
    align-items: center;
    gap: 1px;
}

.vvsoutlet-azm-google-logo {
    height: 9px; /* Better size - about 80% of text height */
    width: auto;
    opacity: 1; /* Full opacity for color visibility */
    /* Remove filter to show original Google colors */
}

.vvsoutlet-azm-google-text {
    font-weight: 400;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
    font-size: 11px;
    line-height: 1;
}

.vvsoutlet-azm-separator {
    color: rgba(255,255,255,0.6);
    font-weight: 300;
    margin: 0 2px;
}

.vvsoutlet-azm-customers {
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    text-shadow: 0 1px 1px rgba(0,0,0,0.1);
    white-space: nowrap;
}

/* Mobile optimization for very small screens */
@media (max-width: 320px) {
    .vvsoutlet-azm-social-proof {
        font-size: 9px;
        gap: 6px;
        padding: 3px 8px;
    }
    
    .vvsoutlet-azm-rating-number {
        font-size: 10px;
    }
    
    .vvsoutlet-azm-star {
        width: 8px;
        height: 8px;
    }
    
    .vvsoutlet-azm-google-logo {
        height: 8px; /* Better size for mobile */
    }
    
    .vvsoutlet-azm-google-text {
        font-size: 10px;
    }
}

/* ======================================
 * ISOLATED SEARCH SYSTEM STYLES
 * ======================================
 * These styles are completely isolated from the existing 
 * Typesense plugin to prevent conflicts and duplicate dropdowns
 */

/* Isolated search wrapper */
.vvsoutlet-azm-isolated-search-wrapper {
    background: #ffffff;
    border-radius: 4px;
    margin: 6px 10px;
    display: flex;
    align-items: center;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    /* Ensure isolation from external scripts */
    isolation: isolate;
    /* High z-index to establish stacking context */
    z-index: 9997;
    /* Prevent layout jump when dropdown opens */
    contain: layout;
    /* TECHNICAL FIX: Ensure search doesn't cause overflow */
    max-width: calc(100% - 20px);
    box-sizing: border-box;
}

/* Isolated search input field */
.vvsoutlet-azm-isolated-search-field {
    flex: 1;
    border: none;
    padding: 10px 14px;
    font-size: 16px; /* CRITICAL: Must be 16px+ to prevent iOS zoom */
    border-radius: 4px 0 0 4px;
    outline: none;
    background: transparent;
    /* Prevent external plugin interference */
    isolation: isolate;
    /* Additional iOS zoom prevention */
    -webkit-text-size-adjust: 100%;
    -webkit-appearance: none;
}

.vvsoutlet-azm-isolated-search-field::placeholder {
    color: #666;
}

.vvsoutlet-azm-isolated-search-field:focus {
    outline: 2px solid #ff9900;
    outline-offset: -2px;
}

/* Isolated search submit button */
.vvsoutlet-azm-isolated-search-submit {
    background: #ff9900;
    border: none;
    padding: 10px 14px;
    cursor: pointer;
    border-radius: 0 4px 4px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.vvsoutlet-azm-isolated-search-submit:hover {
    background: #e68900;
}

.vvsoutlet-azm-isolated-search-submit svg {
    width: 20px;
    height: 20px;
    fill: #000;
}

/* ULTRA AGGRESSIVE: Search dropdown with ZERO viewport impact */
.vvsoutlet-azm-isolated-search-results-panel {
    /* CRITICAL: Use fixed positioning to completely remove from document flow */
    position: fixed !important;
    /* CRITICAL: Position set dynamically by JavaScript - no !important so JS can override */
    top: 140px;
    left: 10px !important;
    /* AGGRESSIVE: Force specific width that never exceeds viewport, max 768px */
    width: calc(100vw - 20px) !important;
    max-width: min(768px, calc(100vw - 20px)) !important;
    min-width: 280px !important;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.1);
    z-index: 999999 !important;
    /* CRITICAL: Constrain height to never cause viewport overflow */
    /* Use dvh (dynamic viewport height) for better keyboard support, fallback to vh */
    max-height: calc(100vh - var(--search-dropdown-top, 140px) - 20px) !important;
    max-height: calc(100dvh - var(--search-dropdown-top, 140px) - 20px) !important;
    min-height: 0 !important;
    overflow-y: auto;
    overflow-x: hidden !important;
    /* ULTIMATE: Complete isolation from document flow */
    isolation: isolate;
    /* REMOVED: contain: strict was preventing dropdown from sizing to content */
    /* CRITICAL: GPU acceleration with zero layout impact */
    transform: translateZ(0) translateX(0) translateY(0) !important;
    will-change: opacity, visibility;
    /* AGGRESSIVE: Hide any potential scrollbars that might affect layout */
    scrollbar-width: thin;
    /* CRITICAL: Ensure no interaction with document layout */
    pointer-events: auto;
    /* INVISIBLE when hidden - no layout impact */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* Show state for dropdown */
.vvsoutlet-azm-isolated-search-results-panel.show {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    z-index: 999999 !important;
}

/* CRITICAL: Set CSS custom property for dropdown positioning */
.vvsoutlet-azm-isolated-search-wrapper {
    --search-dropdown-top: 140px;
}

/* Responsive dropdown positioning */
@media screen and (max-height: 600px) {
    .vvsoutlet-azm-isolated-search-wrapper {
        --search-dropdown-top: 120px;
    }
    
    .vvsoutlet-azm-isolated-search-results-panel {
        max-height: calc(100vh - 120px - 40px) !important;
    }
}

@media screen and (max-height: 500px) {
    .vvsoutlet-azm-isolated-search-wrapper {
        --search-dropdown-top: 100px;
    }
    
    .vvsoutlet-azm-isolated-search-results-panel {
        max-height: calc(100vh - 100px - 40px) !important;
    }
}

/* Isolated loading spinner */
.vvsoutlet-azm-isolated-search-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #666;
    font-size: 14px;
    gap: 8px;
}

.vvsoutlet-azm-isolated-spinner-icon {
    width: 16px;
    height: 16px;
    border: 2px solid #e0e0e0;
    border-top: 2px solid #ff9900;
    border-radius: 50%;
    animation: isolatedSearchSpin 1s linear infinite;
}

@keyframes isolatedSearchSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Desktop Cart Header Checkout Link */
.vvsoutlet-azm-cart-checkout-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #007cba;
    color: #ffffff !important;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 124, 186, 0.2);
    white-space: nowrap;
}

.vvsoutlet-azm-cart-checkout-link:hover {
    background: #005a87;
    transform: translateY(-1px);
    text-decoration: none;
    color: #ffffff !important;
}

.vvsoutlet-azm-cart-checkout-link:active {
    transform: translateY(0);
}

.vvsoutlet-azm-cart-checkout-link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Mobile Cart Header Styling */
.vvsoutlet-azm-mobile-cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #005a87;
    background: #007cba;
    color: #ffffff;
}

.vvsoutlet-azm-mobile-cart-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Mobile Cart Header Checkout Link */
.vvsoutlet-azm-mobile-header-checkout-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: #FF6B35;
    color: #ffffff !important;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
    white-space: nowrap;
}

.vvsoutlet-azm-mobile-header-checkout-link:hover {
    background: #E85A28;
    transform: translateY(-1px);
    text-decoration: none;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
}

.vvsoutlet-azm-mobile-header-checkout-link:active {
    transform: translateY(0);
}

.vvsoutlet-azm-mobile-header-checkout-link svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Mobile Cart Header Text Styling */
.vvsoutlet-azm-mobile-cart-header .vvsoutlet-azm-mobile-cart-title {
    color: #ffffff;
}

.vvsoutlet-azm-mobile-cart-header .vvsoutlet-azm-mobile-cart-title h3 {
    color: #ffffff;
    margin: 0;
}

.vvsoutlet-azm-mobile-cart-header .vvsoutlet-azm-mobile-cart-count-text {
    color: #ffffff;
    opacity: 0.9;
}

.vvsoutlet-azm-mobile-cart-header .vvsoutlet-azm-mobile-cart-title svg {
    stroke: #ffffff;
}

.vvsoutlet-azm-mobile-cart-header .vvsoutlet-azm-mobile-cart-close svg {
    stroke: #ffffff;
}

.vvsoutlet-azm-mobile-cart-header .vvsoutlet-azm-mobile-cart-close:hover {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

/* Isolated search results container */
.vvsoutlet-azm-isolated-search-results {
    max-height: 300px;
    overflow-y: auto;
}

/* Isolated search result item */
.vvsoutlet-azm-isolated-search-result-item {
    display: block;
    padding: 10px 16px;
    border-bottom: 1px solid #e7e7e7;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

/* Enhanced Fyndhörna search result item with image */
.vvsoutlet-azm-isolated-search-result-item.fyndhornet-result {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

.vvsoutlet-azm-isolated-search-result-item:hover {
    background-color: #f8f9fa;
    border-left: 3px solid #ff9900;
    padding-left: 13px;
}

.vvsoutlet-azm-isolated-search-result-item:last-child {
    border-bottom: none;
}

/* Isolated search result content */
.vvsoutlet-azm-isolated-search-result-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vvsoutlet-azm-isolated-search-result-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

.vvsoutlet-azm-isolated-search-result-title mark {
    background-color: #fff3cd;
    color: #856404;
    padding: 0 2px;
    border-radius: 2px;
}

.vvsoutlet-azm-isolated-search-result-meta {
    font-size: 11px;
    color: #666;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vvsoutlet-azm-isolated-search-result-code {
    font-weight: 500;
    color: #888;
    font-size: 11px;
}

.vvsoutlet-azm-isolated-search-result-brand {
    color: #999;
    font-size: 11px;
    font-style: italic;
}

/* Enhanced Fyndhörna search result styling */
.vvsoutlet-azm-isolated-search-result-image {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vvsoutlet-azm-isolated-search-result-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.vvsoutlet-azm-isolated-search-result-no-image {
    font-size: 20px;
    color: #bbb;
}

.vvsoutlet-azm-isolated-search-result-price {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.vvsoutlet-azm-isolated-search-result-price .price-value {
    font-size: 14px;
    font-weight: 600;
    color: #ff9900;
}

.vvsoutlet-azm-isolated-search-result-price .discount-badge {
    background: #dc3545;
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 4px;
    border-radius: 3px;
    line-height: 1;
}

.vvsoutlet-azm-isolated-search-result-fyndhornet {
    background: #28a745;
    color: white;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 10px;
    line-height: 1;
}

/* Fyndhörna search banner */
.vvsoutlet-azm-fyndhornet-search-banner {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.fyndhornet-search-icon {
    font-size: 16px;
}

/* Empty Fyndhörna results */
.vvsoutlet-azm-isolated-search-empty-fyndhornet {
    padding: 20px;
    text-align: center;
    color: #666;
}

.vvsoutlet-azm-isolated-search-empty-fyndhornet p {
    margin: 0 0 8px 0;
    font-size: 14px;
}

.vvsoutlet-azm-isolated-search-empty-fyndhornet small {
    font-size: 12px;
    color: #999;
}

/* Fyndhörna footer styling */
.vvsoutlet-azm-isolated-search-fyndhornet-footer {
    padding: 8px 16px;
    background: #f8f9fa;
    border-top: 1px solid #e7e7e7;
    font-size: 12px;
    color: #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fyndhornet-results-count {
    font-weight: 500;
    color: #28a745;
}

/* Special styling for Fyndhörna category link in main navigation */
.vvsoutlet-azm-fyndhornet-special {
    background: linear-gradient(135deg, #28a745, #20c997) !important;
    color: white !important;
    font-weight: 600 !important;
    border-radius: 15px !important;
    padding: 6px 12px !important;
    margin: 0 2px !important;
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3) !important;
    animation: fyndhornetPulse 3s ease-in-out infinite;
}

.vvsoutlet-azm-fyndhornet-special:hover {
    background: linear-gradient(135deg, #20c997, #28a745) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.4) !important;
}

/* Subtle pulse animation for Fyndhörna link */
@keyframes fyndhornetPulse {
    0%, 100% {
        box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
    }
    50% {
        box-shadow: 0 2px 8px rgba(40, 167, 69, 0.5);
    }
}

/* REA tag styling */
.rea-tag {
    background: #dc3545 !important;
    color: white !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
    margin-left: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* ============================================
   UNIFIED LOGO UNIT (Logo + Mode Toggle Tags)
   ============================================ */

/* Logo unit container - creates connected visual unit */
.vvsoutlet-azm-logo-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    /* Position very close to hamburger menu */
    margin-left: 0px;
    margin-right: auto; /* Push right buttons to the right */
}

/* Logo styling */
.vvsoutlet-azm-logo {
    margin-bottom: 2px; /* Reduced from 4px to bring toggle tags closer */
}

/* Mode toggle tags - directly connected to logo */
.vvsoutlet-azm-mode-toggle-tags {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: -4px; /* Increased negative margin to pull tags even closer */
}

/* Base mode tag styling - Tailwind-inspired */
.vvsoutlet-azm-mode-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
}

/* Active .SE tag - Green Neon */
.vvsoutlet-azm-mode-tag.se-tag.active {
    background: linear-gradient(135deg, #10b981, #34d399);
    color: white;
    border-color: rgba(16, 185, 129, 0.5);
    box-shadow: 
        0 4px 12px rgba(16, 185, 129, 0.4),
        0 0 20px rgba(16, 185, 129, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Active Fyndhörna tag - Orange */
.vvsoutlet-azm-mode-tag.fyndhornet-tag.active {
    background: linear-gradient(135deg, #f97316, #fb923c);
    color: white;
    border-color: rgba(249, 115, 22, 0.5);
    box-shadow: 
        0 4px 12px rgba(249, 115, 22, 0.4),
        0 0 20px rgba(249, 115, 22, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Inactive tags - Muted glass effect */
.vvsoutlet-azm-mode-tag.inactive {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Hover effects for inactive tags */
.vvsoutlet-azm-mode-tag.se-tag.inactive:hover {
    background: rgba(16, 185, 129, 0.2);
    color: rgba(16, 185, 129, 0.9);
    border-color: rgba(16, 185, 129, 0.3);
    transform: translateY(-2px);
    box-shadow: 
        0 6px 16px rgba(16, 185, 129, 0.2),
        0 0 12px rgba(16, 185, 129, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.vvsoutlet-azm-mode-tag.fyndhornet-tag.inactive:hover {
    background: rgba(249, 115, 22, 0.2);
    color: rgba(249, 115, 22, 0.9);
    border-color: rgba(249, 115, 22, 0.3);
    transform: translateY(-2px);
    box-shadow: 
        0 6px 16px rgba(249, 115, 22, 0.2),
        0 0 12px rgba(249, 115, 22, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Active tag glow animation */
.vvsoutlet-azm-mode-tag.active {
    animation: modeTagGlow 3s ease-in-out infinite;
}

@keyframes modeTagGlow {
    0%, 100% {
        box-shadow: 
            0 4px 12px var(--glow-color),
            0 0 20px var(--glow-color),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    50% {
        box-shadow: 
            0 4px 16px var(--glow-color),
            0 0 30px var(--glow-color),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
}

/* Set CSS custom properties for glow colors */
.vvsoutlet-azm-mode-tag.se-tag.active {
    --glow-color: rgba(16, 185, 129, 0.4);
}

.vvsoutlet-azm-mode-tag.fyndhornet-tag.active {
    --glow-color: rgba(249, 115, 22, 0.4);
}

/* Responsive adjustments */
@media (max-width: 380px) {
    .vvsoutlet-azm-mode-toggle-container {
        gap: 8px;
    }
    
    .vvsoutlet-azm-mode-tag {
        padding: 5px 12px;
        font-size: 10px;
    }
}

/* PRODUCTION: Hide mode toggle tags completely (v1.22.98) */
/* Hide [.SE] and [FYNDHÖRNA] buttons on ALL routes */
.vvsoutlet-azm-mode-toggle-tags {
    display: none !important;
}

/* Original desktop visibility rules (currently overridden by above) */
@media (min-width: 1024px) {
    /* Hide mode toggle tags on desktop for regular pages */
    body:not(.vvsoutlet-fyndhornet):not(.vvsoutlet-v3-route) .vvsoutlet-azm-mode-toggle-tags {
        display: none;
    }
    
    /* Show mode toggle tags on Fyndhörna pages and V3 route for desktop users */
    body.vvsoutlet-fyndhornet .vvsoutlet-azm-mode-toggle-tags,
    body.vvsoutlet-v3-route .vvsoutlet-azm-mode-toggle-tags {
        display: flex;
    }
}

/* Isolated stock indicator */
.vvsoutlet-azm-isolated-search-result-stock {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #28a745;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2);
}

.vvsoutlet-azm-isolated-search-result-stock.low-stock {
    background: #ffc107;
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.2);
}

.vvsoutlet-azm-isolated-search-result-stock.out-of-stock {
    background: #dc3545;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
}

/* Isolated empty state */
.vvsoutlet-azm-isolated-search-empty {
    padding: 20px 16px;
    text-align: center;
    color: #666;
    font-size: 14px;
}

.vvsoutlet-azm-isolated-search-empty p {
    margin: 0 0 8px 0;
    font-weight: 500;
}

.vvsoutlet-azm-isolated-search-empty small {
    color: #999;
}

/* Isolated search footer/bottom */
.vvsoutlet-azm-isolated-search-bottom {
    padding: 12px 16px;
    border-top: 1px solid #e7e7e7;
    background: #f9f9f9;
}

.vvsoutlet-azm-isolated-view-all-results {
    display: block;
    width: 100%;
    background: none;
    border: none;
    text-align: center;
    color: #ff9900;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 0;
    transition: color 0.2s ease;
    cursor: pointer;
}

.vvsoutlet-azm-isolated-view-all-results:hover {
    color: #e68900;
}

/* Mobile responsive adjustments for isolated search */
@media (max-width: 374px) {
    .vvsoutlet-azm-isolated-search-wrapper {
        margin: 8px 8px;
    }
    
    .vvsoutlet-azm-isolated-search-field {
        padding: 10px 14px;
        font-size: 15px;
    }
    
    .vvsoutlet-azm-isolated-search-submit {
        padding: 10px 14px;
    }
    
    .vvsoutlet-azm-isolated-search-result-item {
        padding: 12px;
        min-height: 70px;
    }
    
    .vvsoutlet-azm-isolated-search-result-image {
        width: 50px;
        height: 50px;
        margin-right: 12px;
    }
}

/* ======================================
 * AMAZON-STYLE CATEGORY NAVIGATION
 * ======================================
 * Horizontal scrollable category bar with lighter blue background
 */

/* Category navigation container */
.vvsoutlet-azm-category-nav {
    background: #2F3D50;
    padding: 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    overflow-x: auto;
    overflow-y: visible; /* MEGAMENU FIX: Allow dropdowns to overflow vertically */
    /* Hide scrollbar but keep functionality */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Higher z-index for megamenu dropdowns */
    z-index: 999;
    position: relative;
    /* TECHNICAL FIX: Ensure it doesn't exceed viewport */
    max-width: 100vw;
    width: 100%;
}

.vvsoutlet-azm-category-nav::-webkit-scrollbar {
    display: none;
}

/* Scrollable container */
.vvsoutlet-azm-category-scroll {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 10px;
    min-width: max-content;
    white-space: nowrap;
}

/* Center categories for Fyndhörna pages - stack header above categories on mobile */
body.vvsoutlet-fyndhornet .vvsoutlet-azm-category-nav {
    display: flex;
    flex-direction: column; /* Stack header and categories vertically on mobile */
    justify-content: center;
}

/* Desktop: Show header and categories on same row */
@media (min-width: 768px) {
    body.vvsoutlet-fyndhornet .vvsoutlet-azm-category-nav {
        flex-direction: row; /* Inline on desktop */
        align-items: center;
        gap: 16px;
    }
}

body.vvsoutlet-fyndhornet .vvsoutlet-azm-category-scroll {
    justify-content: center;
    min-width: auto;
}

/* Category links */
.vvsoutlet-azm-category-link {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    position: relative;
    transition: all 0.2s ease;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    gap: 6px;
}

.vvsoutlet-azm-category-link:hover {
    background-color: rgba(255,255,255,0.15);
    color: #ffffff;
}

.vvsoutlet-azm-category-link:active {
    background-color: rgba(255,255,255,0.2);
}

/* ======================================
 * INTEGRATED SWEDISH TAGLINES
 * ======================================
 * Taglines integrated into the main header
 */

.vvsoutlet-azm-tagline-row {
    display: flex;
    justify-content: center; /* Center the tagline */
    align-items: center;
    padding: 1px 10px; /* Reduced vertical padding from 3px to 1px */
    font-size: 10px;
    line-height: 1.1; /* Tighter line height */
    color: rgba(255,255,255,0.85);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    /* TECHNICAL FIX: Prevent overflow */
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.vvsoutlet-azm-tagline-center {
    font-weight: 600;
    color: rgba(255,255,255,0.95);
    white-space: nowrap;
    text-align: center; /* Center align text */
    font-size: 10px;
}

/* ======================================
 * OCTOBER CAMPAIGN BANNER
 * ======================================
 * Single-line promotional banner between search and categories
 */

.vvsoutlet-azm-campaign-banner {
    padding: 3px 8px; /* More compact */
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    /* TECHNICAL FIX: Prevent overflow */
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.vvsoutlet-azm-campaign-banner-text {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.95);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* TECHNICAL FIX: Ensure text doesn't overflow */
    max-width: 100%;
    display: block;
}

.vvsoutlet-azm-countdown-inline {
    font-weight: 700;
    color: #fff200;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    background: rgba(0,0,0,0.2);
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 10px;
    letter-spacing: 0.5px;
}

/* Mobile optimization for very small screens */
@media (max-width: 374px) {
    .vvsoutlet-azm-campaign-banner-text {
        font-size: 11px;
    }
    
    .vvsoutlet-azm-countdown-inline {
        font-size: 10px;
        padding: 1px 3px;
    }
}

@media (max-width: 320px) {
    .vvsoutlet-azm-campaign-banner-text {
        font-size: 10px;
    }
    
    .vvsoutlet-azm-countdown-inline {
        font-size: 9px;
    }
}

/* Dropdown toggle specific styles */
.vvsoutlet-azm-dropdown-toggle {
    position: relative;
}

.vvsoutlet-azm-dropdown-arrow {
    transition: transform 0.2s ease;
    margin-left: 2px;
    opacity: 0.8;
}

.vvsoutlet-azm-dropdown-toggle.active .vvsoutlet-azm-dropdown-arrow {
    transform: rotate(180deg);
}

/* Category dropdown container */
.vvsoutlet-azm-category-dropdown {
    position: relative;
    display: inline-block;
    z-index: 99998;
}

/* Dropdown menu */
.vvsoutlet-azm-category-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    z-index: 99999;
    min-width: 180px;
    display: none;
    border: 1px solid #e0e0e0;
    border-top: none;
    overflow: hidden;
}

.vvsoutlet-azm-category-dropdown-menu.show {
    display: block !important;
    animation: categoryDropdownFadeIn 0.2s ease-out;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

@keyframes categoryDropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dropdown items */
.vvsoutlet-azm-dropdown-item {
    display: block;
    padding: 12px 16px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.vvsoutlet-azm-dropdown-item:last-child {
    border-bottom: none;
}

.vvsoutlet-azm-dropdown-item:hover {
    background-color: #f8f9fa;
    color: #ff9900;
    padding-left: 20px;
}

/* Add subtle separator between categories */
.vvsoutlet-azm-category-link:not(:last-child):not(.vvsoutlet-azm-dropdown-toggle)::after,
.vvsoutlet-azm-category-dropdown:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 25%;
    height: 50%;
    width: 1px;
    background: rgba(255,255,255,0.2);
}

/* Mobile responsive adjustments for category nav */
@media (max-width: 374px) {
    .vvsoutlet-azm-category-scroll {
        padding: 0 8px;
    }
    
    .vvsoutlet-azm-category-link {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .vvsoutlet-azm-category-dropdown-menu {
        min-width: 160px;
    }
    
    .vvsoutlet-azm-dropdown-item {
        padding: 10px 14px;
        font-size: 13px;
    }
}

/* Ensure category nav doesn't interfere with other dropdowns */
.vvsoutlet-azm-category-nav * {
    isolation: isolate;
}

/* ===================================
   CART COUNT PULSE ANIMATION
   =================================== */

/* Pulse animation for cart count badge when items are added */
@keyframes cartCountPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 153, 0, 0.7);
    }
    50% {
        transform: scale(1.3);
        box-shadow: 0 0 0 6px rgba(255, 153, 0, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 153, 0, 0);
    }
}

.vvsoutlet-azm-cart-count.pulse {
    animation: cartCountPulse 0.6s ease-out;
    animation-fill-mode: forwards;
}

/* ===================================
   FYNDHÖRNA SEARCH STYLING
   =================================== */

/* Fyndhörna search result indicator */
.vvsoutlet-azm-isolated-search-result-fyndhornet {
    background: #FF9900;
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 8px;
}

/* Fyndhörna search footer */
.vvsoutlet-azm-isolated-search-fyndhornet-footer {
    padding: 12px 16px;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    text-align: center;
}

.fyndhornet-results-count {
    color: #FF9900;
    font-weight: 600;
    font-size: 13px;
}

.vvsoutlet-azm-isolated-search-fyndhornet-footer small {
    display: block;
    color: #6c757d;
    font-size: 11px;
    margin-top: 4px;
}

/* Enhanced search result highlighting for Fyndhörna */
body.vvsoutlet-fyndhornet .vvsoutlet-azm-isolated-search-result-item:hover {
    border-left: 3px solid #FF9900;
}

/* Search placeholder styling for Fyndhörna context */
body.vvsoutlet-fyndhornet .vvsoutlet-azm-isolated-search-field::placeholder {
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
}

/* Fyndhörna search notification banner */
.vvsoutlet-azm-fyndhornet-search-banner {
    background: linear-gradient(135deg, #FF9900 0%, #FFB84D 100%);
    color: white;
    padding: 12px 16px;
    margin: -8px -8px 8px -8px;
    border-radius: 0;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(255, 153, 0, 0.3);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.fyndhornet-search-icon {
    font-size: 16px;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.fyndhornet-search-text {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Custom empty state for Fyndhörna */
.vvsoutlet-azm-isolated-search-empty-fyndhornet {
    padding: 20px 16px;
    text-align: center;
    color: #666;
}

.vvsoutlet-azm-isolated-search-empty-fyndhornet p {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 8px 0;
    color: #333;
}

.vvsoutlet-azm-isolated-search-empty-fyndhornet small {
    font-size: 12px;
    color: #888;
    line-height: 1.4;
}

/* Enhanced search dropdown for Fyndhörna */
body.vvsoutlet-fyndhornet .vvsoutlet-azm-isolated-search-results-panel {
    border-top: 3px solid #FF9900;
}

/* Animation for the banner */
.vvsoutlet-azm-fyndhornet-search-banner {
    animation: fyndhornetBannerSlideIn 0.3s ease-out;
}

@keyframes fyndhornetBannerSlideIn {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}


/* ======================================
 * NESTED CHILD MENUS (FLYOUT)
 * ======================================
 */

/* Parent item that has children */
.vvsoutlet-azm-megamenu-parent {
    position: relative;
}

/* Arrow indicator for items with children */
/* Arrow indicator for items with children - Pure CSS arrow */
.vvsoutlet-azm-megamenu-parent > a:after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 5px;
    border-color: transparent transparent transparent #999;
    transition: all 0.2s ease;
}

.vvsoutlet-azm-megamenu-parent.active > a:after {
    border-left-color: #FF9900;
    transform: translateY(-50%) translateX(2px);
}

















/* Child menu container */
.vvsoutlet-azm-megamenu-children {
    position: absolute;
    left: 100%;
    top: -8px;
    min-width: 240px;
    max-width: 280px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000000;
    margin-left: 8px;
    padding: 8px;
    display: none;
}

/* Show state for child menu */
.vvsoutlet-azm-megamenu-children.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    display: block;
}

/* Position to left if would go off screen */
.vvsoutlet-azm-megamenu-children.position-left {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 8px;
}

/* Child menu links */
.vvsoutlet-azm-megamenu-child-link {
    display: block;
    padding: 8px 12px;
    color: #333;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vvsoutlet-azm-megamenu-child-link:hover {
    background: rgba(255, 153, 0, 0.1);
    color: #FF6600;
    padding-left: 16px;
}

/* Nested child (grandchild) support */
.vvsoutlet-azm-megamenu-children .vvsoutlet-azm-megamenu-parent > a:after {
    font-size: 9px;
}

.vvsoutlet-azm-megamenu-children .vvsoutlet-azm-megamenu-children {
    min-width: 220px;
    max-width: 260px;
}

/* Visual connector line for nested levels */
.vvsoutlet-azm-megamenu-children:before {
    content: '';
    position: absolute;
    left: -8px;
    top: 20px;
    width: 8px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 153, 0, 0) 0%, rgba(255, 153, 0, 0.3) 100%);
}

/* Highlight active parent when child menu is open */
.vvsoutlet-azm-megamenu-parent.active > a {
    background: rgba(255, 153, 0, 0.08);
    color: #FF6600;
    font-weight: 600;
}

/* Animation for child menu appearance */
@keyframes flyoutSlide {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.vvsoutlet-azm-megamenu-children.show {
    animation: flyoutSlide 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Visual indicator for items that could have children */
.vvsoutlet-azm-megamenu-sublink.has-children:after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 5px;
    border-color: transparent transparent transparent #999;
    transition: all 0.2s ease;
}

.vvsoutlet-azm-megamenu-sublink.has-children {
    position: relative;
    padding-right: 30px;
}

.vvsoutlet-azm-megamenu-sublink.has-children:hover:after {
    border-left-color: #FF9900;
    transform: translateY(-50%) translateX(2px);
}

/* ====================================================================
   FLYOUT MENUS & DIMMING OVERLAY (v1.22.78)
   Sub-subcategory flyout menus with blur/dim overlay effect
   ==================================================================== */

/* Flyout Dimming Overlay - Blurs/dims background when flyouts are shown */
.vvsoutlet-azm-flyout-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 999998; /* Below dropdown (999999) but above page content */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Show overlay when active */
.vvsoutlet-azm-flyout-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Sublink wrapper - Container for sublink + flyout */
.vvsoutlet-azm-megamenu-sublink-wrapper {
    position: relative;
    display: block;
    break-inside: avoid; /* Prevent splitting across CSS columns */
    page-break-inside: avoid; /* Legacy support */
    z-index: 1; /* Base z-index */
}

/* When wrapper has flyout active, raise z-index above overlay */
.vvsoutlet-azm-megamenu-sublink-wrapper.has-flyout:hover {
    z-index: 100; /* Above dimming overlay */
}

/* Flyout arrow indicator */
.vvsoutlet-azm-flyout-arrow {
    font-size: 10px;
    margin-left: auto;
    color: rgba(74, 74, 74, 0.5);
    transition: all 0.2s ease;
}

.vvsoutlet-azm-megamenu-sublink:hover .vvsoutlet-azm-flyout-arrow {
    color: #FF9900;
    transform: translateX(2px);
}

/* Sublink with flyout indicator */
.vvsoutlet-azm-megamenu-sublink-wrapper.has-flyout > .vvsoutlet-azm-megamenu-sublink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 24px;
}

/* Flyout menu container */
.vvsoutlet-azm-megamenu-flyout {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 8px;
    background: #ffffff; /* Solid white background */
    border: 2px solid #FF9900;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(255, 153, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 240px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-10px);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
    z-index: 1000000; /* Above dropdown and overlay */
    backdrop-filter: none; /* Ensure no transparency effects */
}

/* Show flyout on hover */
.vvsoutlet-azm-megamenu-sublink-wrapper:hover > .vvsoutlet-azm-megamenu-flyout {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

/* Flyout content wrapper */
.vvsoutlet-azm-megamenu-flyout-content {
    padding: 16px;
    max-height: calc(100vh - 200px); /* Prevent flyout from extending beyond viewport */
    overflow-y: auto; /* Enable scrolling for long menus */
    overflow-x: hidden;
    background: #ffffff; /* Ensure solid white background */
    border-radius: 6px; /* Match parent border radius */
}

/* Flyout header */
.vvsoutlet-azm-flyout-header {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 6px;
    margin-bottom: 12px;
    border-left: 3px solid #FF9900;
}

/* Flyout links */
.vvsoutlet-azm-megamenu-flyout-link {
    display: block;
    padding: 10px 12px;
    color: #4a4a4a;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 6px;
    transition: all 0.15s ease;
    border-left: 2px solid transparent;
    margin: 3px 0;
}

.vvsoutlet-azm-megamenu-flyout-link:hover {
    background: rgba(255, 153, 0, 0.08);
    color: #FF6600;
    border-left-color: #FF9900;
    transform: translateX(4px);
    font-weight: 600;
}

.vvsoutlet-azm-megamenu-flyout-link:active {
    transform: translateX(2px);
}

/* Flyout positioning adjustments for edge detection */
.vvsoutlet-azm-megamenu-sublink-wrapper.flyout-left > .vvsoutlet-azm-megamenu-flyout {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 8px;
}

/* Keep flyout visible when hovering over it */
.vvsoutlet-azm-megamenu-flyout:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Responsive adjustments for flyouts */
@media (min-width: 1024px) {
    /* Flyout menus only on desktop */
    .vvsoutlet-azm-megamenu-sublink-wrapper.has-flyout {
        cursor: pointer;
    }
    
    /* Smooth flyout animations */
    .vvsoutlet-azm-megamenu-flyout {
        animation-duration: 0.25s;
        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Flyout hover area extension */
    .vvsoutlet-azm-megamenu-sublink-wrapper:hover::after {
        content: '';
        position: absolute;
        left: 100%;
        top: 0;
        width: 12px;
        height: 100%;
        pointer-events: auto;
    }
}

/* Hide flyouts on mobile/tablet */
@media (max-width: 1023px) {
    .vvsoutlet-azm-megamenu-flyout {
        display: none;
    }

    .vvsoutlet-azm-flyout-arrow {
        display: none;
    }
}

/* ==========================================================================
   COMPACT STICKY HEADER (v1.22.106)
   Mobile-only scrolling header with logo, account, and cart icons
   - Clean white icons matching main header style
   - Exact blue gradient match: #0173B6 to #3B82F6
   ========================================================================== */

.vvsoutlet-azm-compact-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: #0173B6;
    background: linear-gradient(to bottom, #0173B6 0%, #3B82F6 100%);
    /* Exact same blue gradient as main header */
    z-index: 9998;
    /* Just below main header, above page content */
    padding: 8px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

    /* Hidden by default */
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;

    /* Smooth transitions */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.3s;
}

/* Show compact header when scrolling */
.vvsoutlet-azm-compact-header.show {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

/* Compact header content container */
.vvsoutlet-azm-compact-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    margin: 0 auto;
}

/* Compact logo styling */
.vvsoutlet-azm-compact-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.vvsoutlet-compact-logo-img {
    height: 28px;
    width: auto;
    /* White monochrome filter for dark background */
    filter: brightness(0) invert(1) opacity(0.95);
    transition: all 0.2s ease;
}

.vvsoutlet-azm-compact-logo:hover .vvsoutlet-compact-logo-img {
    filter: brightness(0) invert(1) opacity(1);
    transform: scale(1.05);
}

/* Compact actions (account + cart) */
.vvsoutlet-azm-compact-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Compact action buttons */
.vvsoutlet-azm-compact-account-btn,
.vvsoutlet-azm-compact-cart-btn {
    background: none;
    border: none;
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #ffffff;
    transition: all 0.2s ease;
}

.vvsoutlet-azm-compact-account-btn svg,
.vvsoutlet-azm-compact-cart-btn svg {
    fill: currentColor;
    width: 24px;
    height: 24px;
}

.vvsoutlet-azm-compact-account-btn:hover,
.vvsoutlet-azm-compact-cart-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}

.vvsoutlet-azm-compact-account-btn:active,
.vvsoutlet-azm-compact-cart-btn:active {
    transform: scale(0.95);
}

/* Compact cart count badge */
.vvsoutlet-azm-compact-cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #FF9900;
    /* VVSOutlet orange */
    color: white;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    min-width: 18px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Hide compact header on desktop */
@media (min-width: 1024px) {
    .vvsoutlet-azm-compact-header {
        display: none !important;
    }
}

/* Mobile-specific adjustments */
@media (max-width: 1023px) {
    .vvsoutlet-azm-compact-header {
        /* Ensure compact header appears on mobile only */
        display: block;
    }
}

/* iOS safe area support for compact header */
@supports (padding-top: env(safe-area-inset-top)) {
    .vvsoutlet-azm-compact-header {
        padding-top: calc(8px + env(safe-area-inset-top));
    }
}


/* ======================================
 * NAVIGATION LINKS ADMIN MODULE STYLES
 * ======================================
 * v1.27.0 - Dynamic navigation links with icons and badges
 */

/* Navigation link icon styling */
.vvsoutlet-azm-category-link .nav-link-icon,
.vvsoutlet-azm-snabblank-submenu-link .nav-link-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
}

/* Mobile navigation link icon */
.vvsoutlet-azm-category-link .nav-link-icon {
    font-size: 16px;
}

/* Desktop navigation link icon */
.vvsoutlet-azm-snabblank-submenu-link .nav-link-icon {
    font-size: 14px;
}

/* Navigation link badge styling (mobile and desktop) */
.vvsoutlet-azm-category-link .rea-tag,
.vvsoutlet-azm-snabblank-submenu-link .nav-link-badge {
    background: #ff3333;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    margin-left: 6px;
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    text-transform: uppercase;
}

/* Desktop specific badge styling */
.vvsoutlet-azm-snabblank-submenu-link .nav-link-badge {
    font-size: 10px;
    padding: 2px 5px;
}

/* Special badge colors */
.nav-link-badge.new {
    background: #4CAF50;
}

.nav-link-badge.hot {
    background: #ff9800;
}

.nav-link-badge.sale {
    background: #e91e63;
}

/* Ensure proper alignment in desktop submenu */
.vvsoutlet-azm-snabblank-submenu-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* V3 Mobile categories wrapper */
.vvsoutlet-azm-v3-mobile-categories {
    display: flex;
    gap: 0;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.vvsoutlet-azm-v3-mobile-categories::-webkit-scrollbar {
    display: none;
}

/* Hide V3 mobile categories on desktop */
@media (min-width: 1024px) {
    .vvsoutlet-azm-v3-mobile-categories {
        display: none !important;
    }
}

/* Show V3 mobile categories on mobile */
@media (max-width: 1023px) {
    .vvsoutlet-azm-v3-mobile-categories {
        display: flex !important;
    }
}

/* ======================================
 * NAVIGATION LINKS v1.27.1 Updates
 * ======================================
 * Ensure proper visibility for mobile/desktop navigation
 */

/* Desktop navigation bar - ONLY show on desktop screens */
.vvsoutlet-azm-desktop-nav-bar {
    display: none !important; /* Hidden by default */
}

/* Show desktop nav bar only on desktop viewports */
@media (min-width: 1024px) {
    .vvsoutlet-azm-desktop-nav-bar {
        display: flex !important;
    }
}

/* Hide desktop nav bar on mobile/tablet */
@media (max-width: 1023px) {
    .vvsoutlet-azm-desktop-nav-bar {
        display: none !important;
    }
    
    /* Ensure mobile navigation links are visible */
    .vvsoutlet-azm-category-nav {
        display: block !important;
    }
}

/* Ensure proper stacking and visibility */
.vvsoutlet-azm-snabblank-submenu-bar {
    position: relative;
    z-index: 100;
}

/* ======================================
 * BADGE COLOR SYSTEM v1.27.3
 * ======================================
 * Enhanced badge colors for better visibility
 */

/* Default badge style - RED for sales/discounts */
.vvsoutlet-azm-category-link .rea-tag,
.vvsoutlet-azm-snabblank-submenu-link .nav-link-badge {
    background: linear-gradient(135deg, #ff4444, #cc0000);
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    margin-left: 6px;
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    letter-spacing: 0.5px;
}

/* Specific badge colors based on text content */

/* GREEN - "Nyhet" (New) badges */
.rea-tag:contains("Nyhet"),
.rea-tag:contains("NYHET"),
.rea-tag:contains("New"),
.rea-tag:contains("NEW"),
.nav-link-badge:contains("Nyhet"),
.nav-link-badge:contains("NYHET") {
    background: linear-gradient(135deg, #00c851, #00a63f) !important;
}

/* ORANGE - "WOW" or hot deal badges */
.rea-tag:contains("WOW"),
.rea-tag:contains("HOT"),
.nav-link-badge:contains("WOW"),
.nav-link-badge:contains("HOT") {
    background: linear-gradient(135deg, #ff9800, #ff6f00) !important;
}

/* BLUE - Information badges */
.rea-tag:contains("Info"),
.rea-tag:contains("INFO"),
.nav-link-badge:contains("Info"),
.nav-link-badge:contains("INFO") {
    background: linear-gradient(135deg, #2196f3, #1976d2) !important;
}

/* PURPLE - Premium/VIP badges */
.rea-tag:contains("VIP"),
.rea-tag:contains("PRO"),
.nav-link-badge:contains("VIP"),
.nav-link-badge:contains("PRO") {
    background: linear-gradient(135deg, #9c27b0, #7b1fa2) !important;
}

/* YELLOW/GOLD - Special badges */
.rea-tag:contains("Special"),
.rea-tag:contains("SPECIAL"),
.nav-link-badge:contains("Special"),
.nav-link-badge:contains("SPECIAL") {
    background: linear-gradient(135deg, #ffc107, #ff9800) !important;
    color: #000 !important;
}

/* Alternative approach using data attributes (for future implementation) */
[data-badge-type="new"] .rea-tag,
[data-badge-type="new"] .nav-link-badge {
    background: linear-gradient(135deg, #00c851, #00a63f) !important;
}

[data-badge-type="sale"] .rea-tag,
[data-badge-type="sale"] .nav-link-badge {
    background: linear-gradient(135deg, #ff4444, #cc0000) !important;
}

[data-badge-type="hot"] .rea-tag,
[data-badge-type="hot"] .nav-link-badge {
    background: linear-gradient(135deg, #ff9800, #ff6f00) !important;
}

/* Hover effect for badges */
.vvsoutlet-azm-category-link:hover .rea-tag,
.vvsoutlet-azm-snabblank-submenu-link:hover .nav-link-badge {
    transform: scale(1.05);
    box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}

/* Animation for new badges */
@keyframes pulse-badge {
    0% {
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    50% {
        box-shadow: 0 2px 8px rgba(255,255,255,0.4);
    }
    100% {
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
}

.rea-tag:contains("Nyhet"),
.nav-link-badge:contains("Nyhet") {
    animation: pulse-badge 2s infinite;
}

/* Desktop specific badge adjustments */
.vvsoutlet-azm-snabblank-submenu-link .nav-link-badge {
    font-size: 10px;
    padding: 2px 6px;
    margin-left: 8px;
}

/* Mobile specific badge adjustments */
.vvsoutlet-azm-category-link .rea-tag {
    font-size: 10px;
    padding: 2px 6px;
}

/* Ensure badges are visible on dark backgrounds */
.vvsoutlet-azm-desktop-nav-bar .nav-link-badge {
    border: 1px solid rgba(255,255,255,0.2);
}

/* ======================================
 * BADGE COLOR SYSTEM UPDATED v1.27.3
 * ======================================
 * Class-based badge colors
 */

/* GREEN - New/Nyhet badges */
.rea-tag.badge-new,
.nav-link-badge.badge-new {
    background: linear-gradient(135deg, #00c851, #00a63f) !important;
    animation: pulse-new 2s infinite;
}

/* ORANGE - WOW/Hot badges */
.rea-tag.badge-hot,
.nav-link-badge.badge-hot {
    background: linear-gradient(135deg, #ff9800, #ff6f00) !important;
}

/* RED - Sale/REA/Discount badges (default) */
.rea-tag.badge-sale,
.nav-link-badge.badge-sale {
    background: linear-gradient(135deg, #ff4444, #cc0000) !important;
}

/* PURPLE - VIP/PRO badges */
.rea-tag.badge-vip,
.nav-link-badge.badge-vip {
    background: linear-gradient(135deg, #9c27b0, #7b1fa2) !important;
}

/* Pulse animation for NEW badges */
@keyframes pulse-new {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 4px rgba(0, 199, 81, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 3px 8px rgba(0, 199, 81, 0.5);
    }
}

/* Enhanced hover effects */
.vvsoutlet-azm-category-link:hover .rea-tag,
.vvsoutlet-azm-snabblank-submenu-link:hover .nav-link-badge {
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
}

/* ======================================
   BLACK WEEK NAVIGATION LINK
   ====================================== */

/* Black Week link - prominent positioning and styling */
.vvsoutlet-black-week-link {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
    border: 2px solid #dc2626 !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4) !important;
}

/* Animated gradient background */
.vvsoutlet-black-week-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.vvsoutlet-black-week-link:hover::before {
    left: 100%;
}

/* Lightning icon styling */
.vvsoutlet-black-week-link .nav-link-icon {
    font-size: 16px !important;
    animation: pulse-lightning 2s infinite;
}

@keyframes pulse-lightning {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

/* HOT badge animation for Black Week */
.vvsoutlet-black-week-link .badge-hot {
    animation: pulse-hot 1.5s infinite;
}

@keyframes pulse-hot {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 4px rgba(255, 152, 0, 0.3);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 4px 8px rgba(255, 152, 0, 0.6);
    }
}

/* Hover effect for Black Week link */
.vvsoutlet-black-week-link:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(220, 38, 38, 0.6) !important;
    border-color: #ef4444 !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .vvsoutlet-black-week-link {
        padding: 12px 16px !important;
    }
    
    .vvsoutlet-black-week-link .nav-link-icon {
        font-size: 14px !important;
    }
}


/* ======================================
   BLACK WEEK DESKTOP SUB-HEADER LINK
   ====================================== */

/* Black Week link in desktop sub-header navigation */
.vvsoutlet-black-week-desktop-link {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
    border: 2px solid #dc2626 !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 3px 10px rgba(220, 38, 38, 0.4) !important;
    transition: all 0.3s ease !important;
    margin-right: 12px !important;
}

/* Animated background shimmer */
.vvsoutlet-black-week-desktop-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.vvsoutlet-black-week-desktop-link:hover::before {
    left: 100%;
}

/* Lightning icon for desktop */
.vvsoutlet-black-week-desktop-link .nav-link-icon {
    animation: pulse-lightning-sub 2s infinite;
}

@keyframes pulse-lightning-sub {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

/* HOT badge for desktop sub-header */
.vvsoutlet-black-week-desktop-link .nav-link-badge {
    animation: pulse-hot-sub 1.5s infinite;
}

@keyframes pulse-hot-sub {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 4px rgba(255, 152, 0, 0.3);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 4px 8px rgba(255, 152, 0, 0.6);
    }
}

/* Hover effect */
.vvsoutlet-black-week-desktop-link:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.6) !important;
    border-color: #ef4444 !important;
}