/* ============================================================================ VITABOLIC — stiluri CRITICE pentru header. Problema rezolvata: `vtb-header-final.js` ruleaza la finalul , deci browserul deseneaza intai header-ul cu regulile din main.css si abia apoi JS-ul le rescrie inline. Intre cele doua momente utilizatorul vede butoanele in forma veche (cerc in cerc la cos, pastila lata la cont). Fisierul asta reproduce forma FINALA, ca prima desenare sa fie deja corecta. Se incarca ULTIMUL din , inaintea oricarui script. IMPORTANT: daca se schimba designul header-ului in vtb-header-final.js, trebuie schimbat si aici, altfel reapare saltul. ============================================================================ */ /* ---------------------------------------------------------------- MOBIL --- */ @media (max-width: 999px){ html body #bar-logo-search-menu .header-actions-modern{ display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 11px !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; align-items: stretch !important; } /* cele trei carduri — aceeasi forma exacta ca in enforcer */ html body #bar-logo-search-menu .header-account-modern, html body #bar-logo-search-menu #container-header-cart, html body #bar-logo-search-menu #languageBox{ background: #fff !important; border: 1px solid #e6dcc4 !important; border-radius: 20px !important; box-shadow: 0 4px 14px rgba(60,45,20,.06) !important; height: 96px !important; min-height: 96px !important; max-height: 96px !important; width: 100% !important; box-sizing: border-box !important; padding: 10px 8px !important; margin: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 6px !important; text-decoration: none !important; position: relative !important; } /* interiorul cosului NU trebuie sa aiba card propriu (chenar in chenar) */ html body #bar-logo-search-menu #container-header-cart #header-cart{ display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 5px !important; height: auto !important; min-height: 0 !important; max-height: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } /* la fel pentru butonul de limba din interiorul cardului */ html body #bar-logo-search-menu #languageBox .vtb-lang-current{ display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 5px !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important; } html body #bar-logo-search-menu .header-account-modern span, html body #bar-logo-search-menu .header-cart-modern-text strong{ display: none !important; } html body #bar-logo-search-menu .header-account-modern i, html body #bar-logo-search-menu #cart-container{ font-size: 26px !important; color: #191308 !important; -webkit-text-fill-color: #191308 !important; } html body #bar-logo-search-menu #languageBox img{ width: 30px !important; height: 20px !important; border-radius: 3px !important; display: block !important; } /* pastila de cautare */ html body #bar-logo-search-menu #search-input{ height: 56px !important; } html body #bar-logo-search-menu #searchBox{ height: 56px !important; line-height: 56px !important; border-radius: 99px !important; padding: 0 66px 0 22px !important; box-sizing: border-box !important; } html body #bar-logo-search-menu #searchButton{ width: 44px !important; height: 44px !important; right: 6px !important; } } /* -------------------------------------------------------------- DESKTOP --- */ @media (min-width: 1000px){ html body #bar-logo-search-menu .header-actions-modern{ display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; flex-shrink: 0 !important; width: auto !important; } /* aceeasi inaltime pentru Cont / Cos / Limba */ html body #bar-logo-search-menu .header-account-modern, html body #bar-logo-search-menu #container-header-cart, html body #bar-logo-search-menu #languageBox{ border: 1px solid #e6dcc4 !important; border-radius: 99px !important; background: #fff !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; box-sizing: border-box !important; margin: 0 !important; display: flex !important; align-items: center !important; } html body #bar-logo-search-menu #container-header-cart #header-cart, html body #bar-logo-search-menu #languageBox .vtb-lang-current{ background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; } html body #bar-logo-search-menu #search-input{height: 48px !important} html body #bar-logo-search-menu #searchBox{ height: 48px !important; line-height: 48px !important; border-radius: 99px !important; padding: 0 60px 0 26px !important; box-sizing: border-box !important; } html body #bar-logo-search-menu #searchButton{ width: 40px !important; height: 40px !important; right: 4px !important; } } /* butonul de cautare: centrat, indiferent de latimea ecranului */ html body #bar-logo-search-menu #searchButton{ position: absolute !important; top: 50% !important; bottom: auto !important; left: auto !important; transform: translateY(-50%) !important; line-height: 1 !important; border-radius: 50% !important; background: #d9aa4a !important; color: #191308 !important; -webkit-text-fill-color: #191308 !important; display: flex !important; align-items: center !important; justify-content: center !important; border: none !important; margin: 0 !important; padding: 0 !important; }