/* ============================================
   FOTOFERIA MOBILE - KOMPLETNY FIX
   Dedykowany CSS dla telefonów (320-768px)
   ============================================ */

/* ============================================
   1. ODBLOKOWANIE PEŁNEJ SZEROKOŚCI
   ============================================ */
@media (max-width: 768px) {
    /* Główne kontenery - 100% szerokości */
    #page, 
    #bodyWrapper,
    #bd,
    .ff-main {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Usuń stare mobilne klasy blokujące layout */
    .mobile-gallery_breakpoint-mobile {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================
   2. SEKCJE - PEŁNA SZEROKOŚĆ Z PADDINGIEM
   ============================================ */
@media (max-width: 768px) {
    .ff-section,
    .ff-search-hero,
    .ff-slider,
    .ff-news-section,
    .ff-ranking-section,
    section {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 10px !important; /* zmniejszony odstęp między sekcjami */
        box-sizing: border-box !important;
    }
    
    /* Slider bez górnego marginesu */
    .ff-slider {
        margin-top: 0 !important;
    }
    
    /* Inner contenery też 100% */
    .ff-section .ff-main,
    .ff-search-hero__inner,
    .ff-slider__inner {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* ============================================
   3. TOPBAR - PRZYKLEJONY NA GÓRZE (FIXED)
   ============================================ */
@media (max-width: 768px) {
    #usermenu.ff-topbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 10000 !important;
        
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 10px !important;
        gap: 8px !important;
        height: 60px !important; /* stała wysokość - nie auto */
        
        background: #262626 !important;
        border-bottom: none !important; /* bez dolnej linii - pasek się przyklei */
        box-shadow: none !important; /* bez cienia między nimi */
    }
    
    /* Lewa strona - logo */
    .ff-topbar__left {
        flex: 0 0 auto !important;
        width: auto !important;
        order: 1 !important;
    }
    
    /* Środek - wyszukiwarka (POKAZANA na mobile) */
    .ff-topbar__center {
        display: flex !important;
        order: 3 !important;
        flex: 0 0 auto !important;
    }
    
    /* Wyszukiwarka w topbarze - tylko ikona */
    #menuitem-search {
        display: inline-flex !important;
        padding: 0 8px !important;
    }
    
    #menuitem-search .search-icon {
        font-size: 20px !important;
    }
    
    /* Prawa strona - ikony */
    .ff-topbar__right {
        flex: 1 1 auto !important;
        width: auto !important;
        order: 2 !important;
        display: flex !important;
        justify-content: flex-end !important;
        gap: 6px !important;
    }
    
    /* Ukryj zbędne elementy na mobile (zachowaj flagę!) */
    #menuitem-publish,
    #menuitem-invitations,
    #menuitem-friends,
    #menuitem-favorites,
    #menuitem-comments,
    #menuitem-stats,
    .ff-topbar__publish,
    .ff-stat-box,
    .ff-stat-ranking,
    .ff-stat-month,
    .ff-stat-photos {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    /* Flaga WIDOCZNA na mobile dla niezalogowanych */
    #menuitem-langs {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* ============================================
       WIDOCZNE ELEMENTY NA MOBILE
       ============================================ */
    
    /* Dla WSZYSTKICH: logo, lupa */
    #menuitem-logo-home,
    #menuitem-search {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Dla ZALOGOWANYCH: avatar (ACRUX), koperta - BARDZO SPECYFICZNE */
    .ff-topbar__right #menuitem-user,
    .ff-topbar__right li#menuitem-user,
    body #usermenu #menuitem-user,
    .ff-topbar__right #menuitem-messages,
    .ff-topbar__right li#menuitem-messages,
    body #usermenu #menuitem-messages {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
        position: relative !important;
    }
    
    /* Dla NIEZALOGOWANYCH: LOGIN, theme toggle, flaga */
    #menuitem-login,
    #menuitem-theme-toggle,
    #menuitem-langs {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* LOGIN dla niezalogowanych - mały przycisk */
    #menuitem-login {
        padding: 0 8px !important;
        margin-right: 2px !important; /* mniejszy odstęp do flagi */
    }
    
    #menuitem-login .login-mobile {
        display: inline !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        color: #ffde3b !important;
    }
    
    #menuitem-login .login-desktop {
        display: none !important;
    }
    
    /* Flaga - kompaktowa */
    #menuitem-langs {
        padding: 0 6px !important;
        margin-left: 0 !important; /* usuń dodatkowy margin */
    }
    
    #menuitem-langs img {
        width: 20px !important;
        height: auto !important;
    }
    
    /* Theme toggle - kompaktowy */
    #menuitem-theme-toggle {
        padding: 0 6px !important;
    }
    
    #menuitem-theme-toggle .theme-icon {
        font-size: 18px !important;
    }
    
    /* Ikony - mniejsze na mobile */
    .ff-topbar__right .menuitem a {
        font-size: 20px !important;
        padding: 4px !important;
    }
    
    /* Koperta - większa na mobile + WIDOCZNA */
    body #usermenu.ff-topbar #menuitem-messages,
    body .ff-topbar__right #menuitem-messages {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    #menuitem-messages .ff-icon {
        font-size: 26px !important;
    }
    
    /* Avatar - widoczny na mobile + DROPDOWN */
    body #usermenu.ff-topbar #menuitem-user,
    body .ff-topbar__right #menuitem-user {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    #menuitem-user .ff-user-avatar,
    #menuitem-user img {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        display: inline-block !important;
    }
    
    #menuitem-user span {
        display: none !important; /* ukryj tekst "acrux", zostaw tylko avatar */
    }
    
    /* Logo - mniejsze na mobile */
    #menuitem-logo-home img {
        height: 24px !important;
        width: auto !important;
    }
    
    /* Kompaktowy layout topbara */
    .ff-topbar__right .menuitem {
        padding: 0 8px !important;
        margin: 0 !important;
    }
    
    /* ============================================
       PASEK GW/GN/IN/AW/F - FIXED, PEŁNA SZEROKOŚĆ
       ============================================ */
    
    /* #hd - ukryj całą zawartość oprócz #quick-gallery-links */
    #hd {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }
    
    /* Ukryj hero banner, mainmenu, breadcrumbs na mobile */
    #hd .ff-hero,
    #hd #mainmenu,
    #hd #sciezka_okruszkow,
    #hd header,
    #hd nav.ff-hero-menu {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    body #quick-gallery-links {
        display: block !important; /* wyższa specyficzność niż inline style */
        position: fixed !important; /* fixed - najbardziej niezawodne */
        top: 50px !important; /* przyklejony do topbara */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 9998 !important;
        margin: 0 !important;
        padding: 10px !important;
        box-sizing: border-box !important;

        background: #252525 !important;
        text-align: center !important;
        border-top: none !important; /* bez górnej linii - przyklejony do topbara */
        border-bottom: 2px solid #c00 !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.5) !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    #quick-gallery-links .quick-link {
        display: inline-block !important;
        padding: 6px 12px !important;
        margin: 0 2px !important;
        font-size: 12px !important;
        background: #333 !important;
        color: #fff !important;
        border-radius: 4px !important;
        text-decoration: none !important;
    }
    
    #quick-gallery-links .quick-link:hover {
        background: #c00 !important;
    }
    
    /* ============================================
       ODSTĘP POD FIXED ELEMENTAMI - KLUCZOWE!
       ============================================ */
    
    /* Body - padding pod topbar + quick-links (oba fixed) */
    body {
        padding-top: 120px !important; /* 60px topbar + 50px quick-links + 10px */
    }
    
    body.mobile-gallery.breakpoint-mobile {
        padding-top: 120px !important;
    }
    
    /* Główne kontenery - bez ujemnych marginesów */
    #bodyWrapper,
    #page {
        margin-top: 0 !important;
        top: 0 !important;
        position: relative !important;
        overflow: visible !important; /* dla sticky #hd */
    }
    
    /* Treść - bez dodatkowego marginesu */
    #bd {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* ============================================
       KOMPAKTOWY PANEL FILTRÓW - GALERIA
       ============================================ */
    
    .ff-gw-filters {
        margin: 10px 10px 15px !important;
        background: #111 !important;
        border-radius: 12px !important;
        border: 1px solid #262626 !important;
        padding: 8px 10px !important;
        box-sizing: border-box !important;
    }
    
    /* Przycisk "Filtry zdjęć" - toggle */
    .ff-gw-filters-toggle {
        width: 100% !important;
        background: #1c1c1c !important;
        border-radius: 999px !important;
        border: 1px solid #333 !important;
        color: #fff !important;
        font-size: 13px !important;
        padding: 10px 14px !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        cursor: pointer !important;
        font-weight: 600 !important;
    }
    
    .ff-gw-filters-toggle-icon {
        font-size: 11px !important;
        opacity: 0.8 !important;
        transition: transform 0.3s !important;
    }
    
    .ff-gw-filters.open .ff-gw-filters-toggle-icon {
        transform: rotate(180deg) !important;
    }
    
    /* Panel filtrów - domyślnie ukryty */
    .ff-gw-filters-body {
        display: none !important;
        margin-top: 10px !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        width: 100% !important;
    }
    
    .ff-gw-filters.open .ff-gw-filters-body {
        display: flex !important;
    }
    
    /* Każdy filtr domyślnie na pełną szerokość */
    .ff-filter-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        width: 100% !important;
    }
    
    /* DWA PIERWSZE filtry obok siebie (kategorie + polecane) */
    .ff-filter-group:nth-child(1),
    .ff-filter-group:nth-child(2) {
        width: calc(50% - 5px) !important; /* po 50%, minus gap */
    }
    
    .ff-filter-group label {
        display: none !important; /* ukryj wszystkie labele na mobile */
    }
    
    .ff-filter-group select,
    .ff-filter-group .ff-select {
        width: 100% !important;
        background: #1a1a1a !important;
        border: 1px solid #333 !important;
        border-radius: 8px !important;
        color: #fff !important;
        padding: 10px 12px !important;
        font-size: 13px !important;
        box-sizing: border-box !important;
    }
    
    .ff-filter-group select:focus {
        outline: none !important;
        border-color: #ffde3b !important;
    }
    
    /* Checkbox dla autoload */
    .ff-auto-load {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        font-size: 13px !important;
        color: #ddd !important;
        cursor: pointer !important;
    }
    
    .ff-auto-load input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        cursor: pointer !important;
    }
    
    /* Na mobile - tylko kategorie i polecane */
    .ff-filter-sort,
    .ff-filter-autoload,
    #ff-filter-analyses,
    #ff-filter-comments,
    label[for="ff-filter-analyses"],
    label[for="ff-filter-comments"] {
        display: none !important;
    }
    
    /* Ukryj całe divy z analizami i komentarzami */
    .ff-filter-group:has(#ff-filter-analyses),
    .ff-filter-group:has(#ff-filter-comments) {
        display: none !important;
    }
    
    /* Pokazuj tylko kategorie */
    .ff-filter-category {
        display: flex !important;
    }
}

/* ============================================
   FILTRY NA DESKTOP - NORMALNY UKŁAD
   ============================================ */
@media (min-width: 769px) {
    .ff-gw-filters-toggle {
        display: none !important; /* ukryj przycisk toggle na desktop */
    }
    
    .ff-gw-filters-body {
        display: flex !important; /* zawsze widoczne */
        flex-direction: row !important;
        gap: 20px !important;
        flex-wrap: wrap !important;
    }
    
    .ff-gw-filters {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 20px 0 !important;
    }
    
    .ff-filter-group {
        flex: 1 1 200px !important;
    }
}

/* ============================================
   4. WYSZUKIWARKA POD TOPBAREM
   ============================================ */
@media (max-width: 768px) {
    .ff-search-hero {
        display: none !important; /* Ukryta na stronie głównej */
        padding: 0 !important;
        margin: 0 !important;
        height: 0 !important;
    }
    
    .ff-search-hero__title {
        font-size: 20px !important;
        margin-bottom: 8px !important;
    }
    
    .ff-search-hero__subtitle {
        font-size: 12px !important;
        margin-bottom: 14px !important;
    }
    
    /* Search bar - pełna szerokość */
    .ff-search-bar {
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px 12px !important;
        gap: 8px !important;
        box-sizing: border-box !important;
    }
    
    .ff-search-bar__input {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        font-size: 14px !important;
    }
    
    .ff-search-bar__button {
        flex: 0 0 auto !important;
        padding: 8px 16px !important;
        font-size: 13px !important;
    }
    
    .ff-search-bar__icon {
        font-size: 16px !important;
    }
}

/* ============================================
   5. SLIDER - 100% SZEROKOŚCI
   ============================================ */
@media (max-width: 768px) {
    .ff-slider,
    .swiper,
    .swiper-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 !important;
        padding: 0 !important;
    }
    
    .swiper-slide img,
    .ff-slider img {
        width: 100% !important;
        height: auto !important;
        border-radius: 0 !important; /* bez zaokrągleń na krawędziach ekranu */
        object-fit: cover !important;
    }
    
    /* Swiper navigation - mniejsze strzałki */
    .swiper-button-next,
    .swiper-button-prev {
        width: 32px !important;
        height: 32px !important;
        background-size: 16px !important;
    }
    
    /* Pagination - mniejsze kropki */
    .swiper-pagination-bullet {
        width: 6px !important;
        height: 6px !important;
    }
}

/* ============================================
   6. NEWSY - 1 KOLUMNA
   ============================================ */
@media (max-width: 768px) {
    .ff-news-list,
    .ff-news-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        width: 100% !important;
        padding: 0 !important;
    }
    
    .ff-news-item {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    /* News card - kompaktowy */
    .ff-news-item {
        padding: 12px !important;
        border-radius: 10px !important;
    }
    
    .ff-news-item__image {
        height: 180px !important;
        border-radius: 8px !important;
    }
    
    .ff-news-item__title {
        font-size: 16px !important;
    }
    
    .ff-news-item__excerpt {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
}

/* ============================================
   7. RANKING - 1 KOLUMNA
   ============================================ */
@media (max-width: 768px) {
    .ff-ranking-list,
    .ff-ranking-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 0 !important;
    }
    
    .ff-ranking-item {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    /* Ranking card - kompaktowy */
    .ff-ranking-item {
        padding: 10px !important;
        border-radius: 8px !important;
        display: flex !important;
        gap: 10px !important;
    }
    
    .ff-ranking-item__number {
        font-size: 18px !important;
        width: 32px !important;
        height: 32px !important;
        line-height: 32px !important;
    }
    
    .ff-ranking-item__image {
        width: 60px !important;
        height: 60px !important;
        flex-shrink: 0 !important;
    }
    
    .ff-ranking-item__title {
        font-size: 14px !important;
    }
    
    .ff-ranking-item__author {
        font-size: 12px !important;
    }
}

/* ============================================
   8. GALERIE - GRID RESPONSYWNY
   ============================================ */
@media (max-width: 768px) {
    .ff-gallery-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* 2 kolumny na mobile */
        gap: 8px !important;
        width: 100% !important;
        padding: 0 !important;
    }
    
    .ff-gallery-item {
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
    }
    
    .ff-gallery-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 6px !important;
    }
}

/* ============================================
   9. HERO SECTION - PEŁNA SZEROKOŚĆ
   ============================================ */
@media (max-width: 768px) {
    .ff-hero {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .ff-hero-menu {
        display: none !important; /* ukryj duże menu na mobile */
    }
}

/* ============================================
   10. QUICK GALLERY LINKS (GW GN IN AW F)
   ============================================ */
@media (max-width: 768px) {
    #quick-gallery-links {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 8px 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        position: fixed !important;
        top: 60px !important; /* pod topbarem */
        left: 0 !important;
        right: 0 !important;
        z-index: 9998 !important; /* zawsze na wierzchu pod topbarem */
        background: #252525 !important;
        border-bottom: 2px solid #c00 !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.5) !important;
    }
    
    #quick-gallery-links .quick-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px 10px !important;
        margin: 0 !important;
        font-size: 11px !important;
        background: #333 !important;
        color: #fff !important;
        border-radius: 4px !important;
        text-decoration: none !important;
        font-weight: bold !important;
    }
    
    #quick-gallery-links .quick-link:hover,
    #quick-gallery-links .quick-link:active {
        background: #c00 !important;
    }
}

/* ============================================
   11. TYPOGRAPHY - MOBILE
   ============================================ */
@media (max-width: 768px) {
    h1 {
        font-size: 22px !important;
    }
    
    h2 {
        font-size: 18px !important;
    }
    
    h3 {
        font-size: 16px !important;
    }
    
    p, body {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
}

/* ============================================
   12. BUTTONS - MOBILE
   ============================================ */
@media (max-width: 768px) {
    .btn,
    .ff-btn,
    button {
        padding: 10px 16px !important;
        font-size: 14px !important;
        min-height: 44px !important; /* Apple's minimum touch target */
        border-radius: 8px !important;
    }
    
    .btn-gold,
    .ff-btn-gold {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }
}

/* ============================================
   13. FORMS - MOBILE
   ============================================ */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
        width: 100% !important;
        padding: 10px 12px !important;
        font-size: 16px !important; /* 16px zapobiega auto-zoom na iOS */
        border-radius: 8px !important;
        min-height: 44px !important;
        box-sizing: border-box !important;
    }
    
    textarea {
        min-height: 120px !important;
    }
}

/* ============================================
   14. MODALS - MOBILE
   ============================================ */
@media (max-width: 768px) {
    .modal,
    .ff-modal {
        width: 95% !important;
        max-width: 400px !important;
        margin: 10px auto !important;
        padding: 16px !important;
    }
    
    .modal-content {
        padding: 12px !important;
    }
}

/* ============================================
   15. TABLES - MOBILE (SCROLL)
   ============================================ */
@media (max-width: 768px) {
    table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    th, td {
        font-size: 12px !important;
        padding: 8px !important;
    }
}

/* ============================================
   16. FOOTER - MOBILE
   ============================================ */
@media (max-width: 768px) {
    footer,
    .ff-footer {
        padding: 20px 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .ff-footer-links {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .footnav ul {
        flex-direction: column !important;
        gap: 10px !important;
        text-align: center !important;
    }
}

/* ============================================
   17. SPACING - MOBILE
   ============================================ */
@media (max-width: 768px) {
    .ff-section {
        margin-bottom: 20px !important;
    }
    
    .ff-section-title {
        margin-bottom: 14px !important;
    }
    
    /* Mniejsze odstępy między elementami */
    .ff-spacing-top {
        margin-top: 16px !important;
    }
    
    .ff-spacing-bottom {
        margin-bottom: 16px !important;
    }
}

/* ============================================
   18. IMAGES - MOBILE
   ============================================ */
@media (max-width: 768px) {
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Avatar - mniejszy na mobile */
    .ff-avatar,
    .user-avatar {
        width: 40px !important;
        height: 40px !important;
    }
    
    /* Thumbnail - responsywny */
    .ff-thumbnail {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
        object-fit: cover !important;
    }
}

/* ============================================
   19. FIX DLA STARYCH LAYOUTÓW
   ============================================ */
@media (max-width: 768px) {
    /* Usuń stare fixed widths */
    #page[style*="width"],
    #bodyWrapper[style*="width"] {
        width: 100% !important;
    }
    
    /* Usuń stare max-widths */
    .container,
    .wrapper,
    .main-content {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
    }
}

/* ============================================
   20. PERFORMANCE - DISABLE ANIMATIONS
   ============================================ */
@media (max-width: 768px) {
    /* Wyłącz ciężkie animacje na słabszych urządzeniach */
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   FINALNA REGUŁA - AVATAR I KOPERTA WIDOCZNE
   Najpóźniej ładowana, najwyższa specyficzność
   Przebija main2012.css
   ============================================ */
@media (max-width: 768px) {
    /* AVATAR (ACRUX) - WIDOCZNY */
    body #usermenu.ff-topbar .ff-topbar__right li#menuitem-user.menuitem {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
    }
    
    /* Avatar IMG - WIDOCZNY (nadpisuje main2012.css) */
    body #usermenu.ff-topbar #menuitem-user img {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 32px !important;
        height: 32px !important;
    }
    
    /* KOPERTA - WIDOCZNA */
    body #usermenu.ff-topbar .ff-topbar__right li#menuitem-messages.menuitem {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
    }
    
    /* Koperta ikona - WIDOCZNA */
    body #usermenu.ff-topbar #menuitem-messages .ff-icon {
        display: inline-flex !important;
        visibility: visible !important;
        font-size: 26px !important;
    }
}

/* Desktop - też przebij main2012.css */
@media (min-width: 769px) {
    #menuitem-user img {
        display: inline-block !important;
        width: 24px !important;
        height: 24px !important;
        border-radius: 50% !important;
    }
}