/*
 * eKonsument v0.9 — header layer only.
 * Based on old storefront screenshots and old default-bootstrap/header.tpl.
 * The original PrestaShop 1.6 header referenced:
 * https://www.ekonsument.pl/themes/default/css/main.css
 * It is intentionally NOT imported: unrelated global rules from that site
 * would override PrestaShop 9 Classic and could break checkout or modules.
 * All rules here are scoped to #header.
 */
@media (min-width: 768px) {
  #header {
    position: relative;
    z-index: 100;
  }
  #header .header-nav.eko-blackbar {
    background: #211c19 !important;
    border: 0 !important;
    height: 62px !important;
    min-height: 62px !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* Bootstrap clearfix pseudo-elements otherwise become flex items and push links off-center. */
  #header .eko-blackbar-inner::before,
  #header .eko-blackbar-inner::after,
  #header .eko-header-row::before,
  #header .eko-header-row::after {
    content: none !important;
    display: none !important;
  }
  #header .eko-blackbar-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    height: 62px !important;
    min-height: 62px !important;
    gap: 20px !important;
  }
  #header .eko-blackbar-brand {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #header .eko-old-brand {
    display: inline-flex !important;
    align-items: center !important;
    height: 62px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #header .eko-old-brand img {
    display: block;
    width: 135px !important;
    height: auto !important;
    max-height: 45px !important;
    object-fit: contain;
  }
  #header .eko-blackbar-links {
    display: flex !important;
    flex: 0 1 auto !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    height: 62px !important;
    min-width: 0 !important;
    gap: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #header .eko-nav-contact,
  #header .eko-nav-user,
  #header .eko-nav-contact > div,
  #header .eko-nav-user > div,
  #header #_desktop_contact_link,
  #header #_desktop_user_info,
  #header #_desktop_cart {
    position: static !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }
  #header .eko-nav-user { gap: 20px !important; }
  #header .header-nav #contact-link,
  #header .header-nav .user-info,
  #header .header-nav .blockcart,
  #header .header-nav .cart-preview,
  #header .header-nav .blockcart .header {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: 0 !important;
    height: auto !important;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }
  #header .header-nav #contact-link a,
  #header .header-nav .user-info a,
  #header .header-nav .blockcart a,
  #header .header-nav .blockcart .header,
  #header .header-nav .cart-preview .header {
    color: #f8f8f8 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }
  #header .header-nav .blockcart .header {
    display: inline-flex !important;
    gap: 4px !important;
  }
  #header .header-nav .material-icons {
    color: #f8f8f8 !important;
    font-size: 19px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
  }
  #header .header-nav a:hover,
  #header .header-nav a:focus {
    color: #ed008c !important;
  }

  /* White navigation strip: menu left, search and foundation links right. */
  #header .header-top.eko-whitebar {
    background: #fff !important;
    padding: 0 !important;
    min-height: 66px !important;
    border: 0 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,.10) !important;
  }
  #header .eko-whitebar > .container { position: relative; }
  #header .eko-header-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    min-height: 66px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #header .eko-header-widgets {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex: 1 1 auto !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #header .eko-header-widgets #_desktop_top_menu {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }
  #header #_desktop_top_menu > ul.top-menu[data-depth="0"] {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #header #_desktop_top_menu > ul.top-menu[data-depth="0"] > li {
    display: block !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    position: relative !important; /* keep v0.8 dropdown anchored */
  }
  #header #_desktop_top_menu > ul.top-menu[data-depth="0"] > li > a[data-depth="0"] {
    display: block !important;
    color: #292929 !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    padding: 11px 11px !important;
    margin: 0 !important;
    border: 0 !important;
    border-left: 2px solid #ed008c !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    background: transparent !important;
  }
  #header #_desktop_top_menu > ul.top-menu[data-depth="0"] > li:hover > a[data-depth="0"],
  #header #_desktop_top_menu > ul.top-menu[data-depth="0"] > li:focus-within > a[data-depth="0"],
  #header #_desktop_top_menu > ul.top-menu[data-depth="0"] > li.current > a[data-depth="0"] {
    color: #ed008c !important;
  }
  /* Search remains in its module's native displayTop hook. */
  #header .eko-header-widgets .search-widget {
    position: relative !important;
    display: block !important;
    flex: 0 0 178px !important;
    width: 178px !important;
    min-width: 0 !important;
    max-width: 178px !important;
    float: none !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
  }
  #header .eko-header-widgets .search-widget form {
    position: relative !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
  }
  #header .eko-header-widgets .search-widget form input[type="text"] {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 36px !important;
    padding: 8px 10px 8px 35px !important;
    margin: 0 !important;
    border: 1px solid #eee !important;
    border-radius: 2px !important;
    background: #f4f4f4 !important;
    color: #444 !important;
    font-size: 11px !important;
    box-shadow: none !important;
  }
  #header .eko-header-widgets .search-widget form button {
    position: absolute !important;
    top: 50% !important;
    left: 6px !important;
    right: auto !important;
    transform: translateY(-50%) !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #555 !important;
  }
  #header .eko-header-widgets .search-widget form button .material-icons {
    font-size: 20px !important;
  }
  #header .eko-support-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    gap: 6px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }
  #header .eko-support-actions a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 28px !important;
    padding: 6px 9px !important;
    margin: 0 !important;
    color: #ed008c !important;
    background: #fff !important;
    border: 1px solid #ed008c !important;
    border-radius: 0 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
  }
  #header .eko-support-actions a:hover,
  #header .eko-support-actions a:focus {
    color: #fff !important;
    background: #ed008c !important;
  }
  /* Make dropdown overlay slider, not push it down. */
  #header #_desktop_top_menu .sub-menu {
    z-index: 1200 !important;
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  #header .eko-header-row { gap: 8px !important; }
  #header .eko-header-widgets { gap: 8px !important; }
  #header #_desktop_top_menu > ul.top-menu[data-depth="0"] > li > a[data-depth="0"] {
    padding: 10px 7px !important;
    font-size: 10px !important;
  }
  #header .eko-support-actions { gap: 4px !important; }
  #header .eko-support-actions a { padding: 6px 6px !important; font-size: 9px !important; }
  #header .eko-header-widgets .search-widget {
    flex: 0 0 150px !important;
    width: 150px !important;
    max-width: 150px !important;
  }
}
@media (min-width: 768px) and (max-width: 960px) {
  /* Compact search icon, expands on keyboard focus or click. */
  #header .eko-header-widgets .search-widget {
    flex: 0 0 38px !important;
    width: 38px !important;
    max-width: 38px !important;
    margin-left: auto !important;
    z-index: 4 !important;
  }
  #header .eko-header-widgets .search-widget form input[type="text"] {
    width: 38px !important;
    height: 36px !important;
    color: transparent !important;
    padding: 8px 0 8px 35px !important;
    cursor: text !important;
  }
  #header .eko-header-widgets .search-widget form input[type="text"]::placeholder {
    color: transparent !important;
  }
  #header .eko-header-widgets .search-widget form:focus-within input[type="text"] {
    position: absolute !important;
    right: 0 !important;
    top: -18px !important;
    z-index: 5 !important;
    width: 190px !important;
    min-width: 190px !important;
    max-width: 190px !important;
    padding: 8px 10px 8px 35px !important;
    color: #333 !important;
    background: #fff !important;
    box-shadow: 0 3px 10px rgba(0,0,0,.18) !important;
  }
  #header .eko-header-widgets .search-widget form:focus-within input[type="text"]::placeholder {
    color: #888 !important;
  }
  #header .eko-blackbar-links { gap: 12px !important; }
  #header .eko-nav-user { gap: 12px !important; }
}
@media (max-width: 767px) {
  /* Keep Classic mobile controls and the existing v0.8 mobile menu. */
  #header .eko-support-actions { display: none !important; }
  #header .eko-header-widgets .search-widget {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  #header .eko-header-widgets .search-widget form {
    position: relative !important;
    display: block !important;
  }
  #header .eko-header-widgets .search-widget form input[type="text"] {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 40px !important;
  }
  #header .eko-header-widgets .search-widget form button {
    position: absolute !important;
    left: 8px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
}