/* ============================================================
   MODUL X1 — „skin" peste header-ul NATIV Flatsome
   Nu înlocuim header-ul; îl stilizăm cu paleta modulului și
   adăugăm bara „TOATE CATEGORIILE". Țintim clasele Flatsome.
   (Necesită !important pentru a învinge specificitatea temei.)
   ============================================================ */

/* ---------- fundal header ---------- */
.modx1-skin-header #masthead.header-main,
.modx1-skin-header .header-bg-container.fill,
.modx1-skin-header .header-bottom,
.modx1-skin-header .header-top { background-color: var(--x1-header-bg, #fff) !important; }

/* ---------- linkuri meniu ---------- */
.modx1-skin-header .header-nav .nav-top-link,
.modx1-skin-header .header-bottom .nav-top-link { color: var(--x1-menu-link, #33414f) !important; }
.modx1-skin-header .header-nav .nav-top-link:hover { color: var(--x1-orange-500) !important; }

/* ---------- iconuri cont / coș / search ---------- */
.modx1-skin-header .header-nav .icon-search,
.modx1-skin-header .account-link,
.modx1-skin-header .header-cart-link,
.modx1-skin-header .nav .cart-item .header-cart-link,
.modx1-skin-header .account-item .image-icon,
.modx1-skin-header .cart-item .image-icon { color: var(--x1-action-icon, var(--x1-navy-800)) !important; }

/* contor coș */
.modx1-skin-header .cart-icon strong,
.modx1-skin-header .header-cart-link .cart-icon strong { background-color: var(--x1-orange-500) !important; color: #fff !important; }

/* ---------- butoane ---------- */
.modx1-skin-header .button.primary,
.modx1-skin-header .cart-checkout-button.button,
.modx1-skin-header .ux-search-box .submit-button,
.modx1-skin-header .searchform .button {
  background-color: var(--x1-orange-500) !important;
  border-color: var(--x1-orange-500) !important;
  color: #fff !important;
}
.modx1-skin-header .button.primary:hover,
.modx1-skin-header .cart-checkout-button.button:hover { background-color: var(--x1-orange-600) !important; border-color: var(--x1-orange-600) !important; }

/* căutare — bordura câmpului */
.modx1-skin-header .ux-search-box input.search-field,
.modx1-skin-header .searchform input[type="search"] { border-color: var(--x1-search-border, var(--x1-line)) !important; }

/* meniul vertical Flatsome („Vertical Menu") — îl facem să arate ca „TOATE CATEGORIILE" */
.modx1-skin-header .nav-vertical-fly-out > li > a,
.modx1-skin-header .header-vertical-menu__opener {
  background-color: var(--x1-allcat-bg, var(--x1-navy-800)) !important;
  color: var(--x1-allcat-text, #fff) !important;
}

/* ============================================================
   BARA „TOATE CATEGORIILE" injectată sub header (modul skin)
   (refolosește .modx1-allcat / .modx1-cat-dropdown / flyout din frontend)
   ============================================================ */
.modx1-catbar { position: relative; background: var(--x1-header-bg, #fff); border-bottom: 1px solid var(--x1-line); z-index: 30; }
.modx1-catbar-inner { display: flex; align-items: stretch; overflow: visible; }
.modx1-catbar .modx1-allcat { border-radius: var(--x1-radius) var(--x1-radius) 0 0; align-self: flex-end; }
.modx1-catbar .modx1-cat-dropdown { width: 280px; }