/* Tubes Mobile Nav — front CSS. Tryb mobilny włącza JS klasą body.tmn-mobile
   (breakpoint konfigurowalny w ustawieniach). Kolor marki #e2001a. */

/* ---------- Dolny pasek ---------- */
.tmn-bar{ display:none; }

body.tmn-mobile .tmn-bar{
  position:fixed; inset:auto 0 0 0; z-index:900; display:flex; flex-direction:column;
  background:#fff; border-top:1px solid #e6e8eb;
  padding-bottom:env(safe-area-inset-bottom);
  font-family:Roboto,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
}
body.tmn-mobile .tmn-barrow{ display:flex; width:100%; height:56px; }
/* cienki link „ustawienia cookies" pod paskiem */
body.tmn-mobile .tmn-cookie{
  display:flex; align-items:center; justify-content:center; height:28px;
  font-size:11px; line-height:1; color:#5b636b; text-decoration:none;
  border-top:1px solid #eef0f2; background:#fafbfc;
}
body.tmn-mobile .tmn-cookie:active{ background:#f0f2f4; }
body.tmn-mobile .tmn-b{
  flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; min-height:44px; padding:0; border:0; background:none; cursor:pointer;
  font-size:10px; font-weight:600; line-height:1.1; color:#5b636b; text-decoration:none;
}
body.tmn-mobile .tmn-b svg{ width:21px; height:21px; }
/* kafel „Kategorie" (katalog) — domyślnie ukryty; JS pokazuje go tylko gdy menu kategorii jest na stronie */
body.tmn-mobile .tmn-bar .tmn-cats{ display:none; }
body.tmn-mobile.tmn-has-cats .tmn-bar .tmn-cats{ display:flex; }
/* primary „Eshop" = czerwony wypełniony przycisk (biała ikona+napis) */
body.tmn-mobile .tmn-bar .tmn-b.tmn-primary{ background:#e2001a; color:#fff; margin:6px 8px; border-radius:12px; font-weight:700; }
body.tmn-mobile .tmn-b:focus-visible{ outline:2px solid #e2001a; outline-offset:-3px; }

/* treść nie chowa się pod paskiem */
body.tmn-mobile{ padding-bottom:calc(56px + env(safe-area-inset-bottom)) !important; }
body.tmn-mobile.tmn-has-cookie{ padding-bottom:calc(84px + env(safe-area-inset-bottom)) !important; }

/* ---------- „Zobacz wszystko" — akcent w menu ---------- */
.tmn-viewall > a,
.tmn-viewall .ubermenu-target{ color:#e2001a !important; font-weight:700; }

/* ---------- Opcjonalny polish headera ----------
   Aktywny tylko, gdy w Avadzie nadasz elementom te klasy:
   ti-logo (logo) · ti-lang (przełącznik) · ti-toggle (hamburger) · ti-search (szukajka).
   Bezpieczne: bez tych klas nic nie robi. */
body.tmn-mobile .ti-logo img{ height:32px; width:auto; }
body.tmn-mobile .ti-lang,
body.tmn-mobile .ti-toggle{
  min-width:42px; height:42px; border:1px solid #e6e8eb; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
}
body.tmn-mobile .ti-lang{ gap:6px; padding:0 10px; font-weight:700; }
body.tmn-mobile .ti-search input[type="search"],
body.tmn-mobile .ti-search input.search-field{ height:44px; border-radius:8px; }
body.tmn-mobile .ti-search button[type="submit"]{
  height:44px; width:48px; background:#e2001a; color:#fff; border:0; border-radius:8px;
}

/* ---------- Górny pasek (mobile) ---------- */
#tmn-top{ display:none; }
body.tmn-mobile #tmn-top{
  display:block; position:sticky; top:0; z-index:1000; background:#fff;
  box-shadow:0 6px 16px rgba(10,13,15,.12);
  font-family:Roboto,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
}
#tmn-top .tmn-top-row{ display:flex; align-items:center; gap:10px; padding:8px 12px; }
#tmn-top .tmn-logo{ flex:1; min-width:0; display:block; line-height:0; }
#tmn-top .tmn-logo img{ height:62px; width:auto; max-width:66vw; display:block; }
#tmn-top .tmn-lang{ display:flex; align-items:center; gap:6px; border:1px solid #e6e8eb; border-radius:8px; height:42px; padding:0 10px; background:#fff; font-weight:700; font-size:12.5px; color:#131718; cursor:pointer; }
#tmn-top .tmn-code{ font-family:ui-monospace,Consolas,"Roboto Mono",monospace; letter-spacing:.04em; }
.tmn-flag{ width:20px; height:14px; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.14); flex:none; display:block; }
#tmn-top .tmn-burger{ width:42px; height:42px; flex:none; border:1px solid #e6e8eb; border-radius:8px; background:#fff; display:grid; place-items:center; cursor:pointer; color:#131718; }
#tmn-top .tmn-burger svg{ width:22px; height:22px; }
#tmn-top .tmn-hsearch{ padding:0 12px 12px; margin:0; }
#tmn-top .tmn-hform{ display:flex; gap:8px; }
#tmn-top .tmn-hform input{ flex:1; min-width:0; height:44px; border:1px solid #e6e8eb; border-radius:8px; padding:0 12px; font-size:12.5px; color:#131718; outline:none; font-family:inherit; background:#fff; -webkit-appearance:none; }
#tmn-top .tmn-hform .tmn-go{ width:48px; height:44px; flex:none; border:0; border-radius:8px; background:#e2001a; color:#fff; display:grid; place-items:center; cursor:pointer; }
#tmn-top .tmn-hform .tmn-go svg{ width:20px; height:20px; }
/* Advanced Woo Search / Google CSE — dopasowanie do paska */
#tmn-top .tmn-hsearch--aws .aws-container,
#tmn-top .tmn-hsearch--aws form{ width:100%; margin:0; }
#tmn-top .tmn-hsearch--aws .aws-wrapper{ overflow:visible; }
#tmn-top .tmn-hsearch--aws .aws-search-field{ height:44px !important; border:1px solid #cfd4d9 !important; border-radius:8px !important; box-sizing:border-box !important; background:#fff !important; font-size:13px !important; font-weight:400 !important; }
#tmn-top .tmn-hsearch--aws .aws-search-field::placeholder{ font-size:13px !important; font-weight:400 !important; }
/* czerwony przycisk lupki jak w makiecie — zaokrąglony, równa wysokość */
#tmn-top .tmn-hsearch--aws .aws-search-btn,
#tmn-top .tmn-hsearch--aws .aws-form-btn{ border-radius:8px !important; height:44px !important; width:48px !important; margin-left:6px !important; }
/* AWS: nie pokazuj SKU w podpowiedziach (kontener wyników jest dzieckiem <body>, więc bez scope #tmn-top) */
.aws-search-result .aws_result_sku{ display:none !important; }
#tmn-top .tmn-hsearch--gcse .gcse-search{ width:100%; }
#tmn-top .tmn-hsearch--gcse .gsc-input-box{ height:44px; }

/* arkusz wyboru języka / kraju + scrim */
#tmn-scrim,#tmn-sheet{ display:none; }
body.tmn-mobile #tmn-scrim{ display:block; position:fixed; inset:0; z-index:1090; background:rgba(10,13,15,.4); opacity:0; pointer-events:none; transition:opacity .2s; }
body.tmn-mobile #tmn-scrim.tmn-open{ opacity:1; pointer-events:auto; }
body.tmn-mobile #tmn-sheet{ display:block; position:fixed; inset:auto 0 0 0; z-index:1100; background:#fff; border-radius:16px 16px 0 0; transform:translateY(110%); transition:transform .26s ease; box-shadow:0 -10px 30px rgba(10,13,15,.2); padding:8px 14px calc(18px + env(safe-area-inset-bottom)); max-height:74vh; overflow:auto; }
body.tmn-mobile #tmn-sheet.tmn-open{ transform:translateY(0); }
#tmn-sheet .tmn-grab{ width:40px; height:4px; border-radius:3px; background:#d7dbdf; margin:2px auto 8px; }
#tmn-sheet .tmn-sheet-close{ position:absolute; top:8px; right:10px; width:36px; height:36px; border:0; background:transparent; color:#565f68; display:grid; place-items:center; cursor:pointer; border-radius:8px; }
#tmn-sheet .tmn-sheet-close svg{ width:22px; height:22px; }
#tmn-sheet .tmn-sheet-close:active{ background:#f0f2f4; }
#tmn-sheet h4{ margin:2px 4px 10px; font:700 13px/1.2 Roboto,system-ui,sans-serif; color:#5b636b; }
#tmn-sheet .tmn-ls{ display:flex; align-items:center; gap:10px; padding:11px 8px; text-decoration:none; color:#131718; border-bottom:1px solid #f0f0f0; font-size:14px; }
#tmn-sheet .tmn-ls:last-child{ border-bottom:0; }
#tmn-sheet .tmn-ls.tmn-active{ font-weight:700; }
#tmn-sheet .tmn-fc{ font-family:ui-monospace,monospace; font-size:11px; color:#5b636b; min-width:22px; }

/* ---------- Restyl menu UberMenu → biały/czysty jak makieta (mobile) ---------- */
body.tmn-mobile.tmn-menu-restyle :is(.ubermenu-main,.tmn-cat-menu).ubermenu-responsive,
body.tmn-mobile.tmn-menu-restyle :is(.ubermenu-main,.tmn-cat-menu) .ubermenu-nav,
body.tmn-mobile.tmn-menu-restyle :is(.ubermenu-main,.tmn-cat-menu) .ubermenu-submenu,
body.tmn-mobile.tmn-menu-restyle :is(.ubermenu-main,.tmn-cat-menu) .ubermenu-item{ background:#fff !important; }
body.tmn-mobile.tmn-menu-restyle :is(.ubermenu-main,.tmn-cat-menu) .ubermenu-target{
  background:#fff !important; color:#131718 !important;
  border-bottom:1px solid #dcdfe3 !important;
  min-height:52px !important; display:flex !important; align-items:center !important;
  padding:0 16px !important; font:600 15px/1.3 Roboto,"Segoe UI",system-ui,sans-serif !important;
  letter-spacing:-.01em !important; text-transform:none !important;
}
/* wielkość liter jak w zdaniu: pierwsza duża, reszta mała */
body.tmn-mobile.tmn-menu-restyle :is(.ubermenu-main,.tmn-cat-menu) .ubermenu-target-title{ text-transform:lowercase !important; display:inline-block; }
body.tmn-mobile.tmn-menu-restyle :is(.ubermenu-main,.tmn-cat-menu) .ubermenu-target-title::first-letter{ text-transform:uppercase !important; }
body.tmn-mobile.tmn-menu-restyle :is(.ubermenu-main,.tmn-cat-menu) .ubermenu-item-normal > .ubermenu-target{ font-weight:500 !important; }
body.tmn-mobile.tmn-menu-restyle :is(.ubermenu-main,.tmn-cat-menu) .ubermenu-target:hover,
body.tmn-mobile.tmn-menu-restyle :is(.ubermenu-main,.tmn-cat-menu) .ubermenu-active > .ubermenu-target{ background:#f5f6f8 !important; color:#131718 !important; }
body.tmn-mobile.tmn-menu-restyle :is(.ubermenu-main,.tmn-cat-menu) .ubermenu-sub-indicator,
body.tmn-mobile.tmn-menu-restyle :is(.ubermenu-main,.tmn-cat-menu) .ubermenu-retractor{ color:#565f68 !important; background:transparent !important; }
/* rozwinięte submenu — wyróżnienie: czerwona belka z lewej + jaśniejsze tło + wcięcie per poziom */
body.tmn-mobile.tmn-menu-restyle :is(.ubermenu-main,.tmn-cat-menu) .ubermenu-submenu{ background:#f2f4f6 !important; }
body.tmn-mobile.tmn-menu-restyle :is(.ubermenu-main,.tmn-cat-menu) .ubermenu-submenu .ubermenu-target{ background:transparent !important; color:#565f68 !important; font-weight:500 !important; border-bottom:1px solid #e2e6ea !important; }
body.tmn-mobile.tmn-menu-restyle :is(.ubermenu-main,.tmn-cat-menu) .ubermenu-item-level-1 > .ubermenu-target{ padding-left:29px !important; }
body.tmn-mobile.tmn-menu-restyle :is(.ubermenu-main,.tmn-cat-menu) .ubermenu-item-level-2 > .ubermenu-target{ padding-left:44px !important; }
body.tmn-mobile.tmn-menu-restyle :is(.ubermenu-main,.tmn-cat-menu) .ubermenu-item-level-3 > .ubermenu-target{ padding-left:58px !important; }
body.tmn-mobile.tmn-menu-restyle :is(.ubermenu-main,.tmn-cat-menu) .tmn-viewall > .ubermenu-target{ color:#e2001a !important; font-weight:700 !important; }
body.tmn-mobile.tmn-menu-restyle .ubermenu-responsive-toggle.ubermenu-responsive-toggle-open{ background:#fff !important; color:#131718 !important; border-bottom:1px solid #dcdfe3 !important; }

/* ujednolicenie nagłówków sekcji (Products vs Services): bez ikon-obrazków, lewo, pogrubione, wyśrodkowane pionowo */
body.tmn-mobile.tmn-menu-restyle :is(.ubermenu-main,.tmn-cat-menu) .ubermenu-image{ display:none !important; }
body.tmn-mobile.tmn-menu-restyle :is(.ubermenu-main,.tmn-cat-menu) .ubermenu-target-title{ width:auto !important; max-width:none !important; float:none !important; margin:0 !important; padding:0 !important; }
body.tmn-mobile.tmn-menu-restyle :is(.ubermenu-main,.tmn-cat-menu) .ubermenu-item-level-1 > .ubermenu-target,
body.tmn-mobile.tmn-menu-restyle :is(.ubermenu-main,.tmn-cat-menu) .ubermenu-item-header > .ubermenu-target{
  display:flex !important; align-items:center !important; justify-content:flex-start !important;
  text-align:left !important; font-weight:700 !important; padding-left:29px !important; min-height:52px !important;
}
/* Nagłówki z wymuszonym display:block (Services / .wiersz — reguła z cross-origin CSS bije flex):
   wyśrodkuj pionowo paddingiem (padding NIE jest nadpisywany, więc działa niezależnie od display). */
body.tmn-mobile.tmn-menu-restyle :is(.ubermenu-main,.tmn-cat-menu) .ubermenu-item-header > .ubermenu-target,
body.tmn-mobile.tmn-menu-restyle :is(.ubermenu-main,.tmn-cat-menu) .ubermenu-target.wiersz{
  padding-top:16px !important; padding-bottom:16px !important; min-height:52px !important; box-sizing:border-box !important;
}

/* Zakładki (Products): usuń zdublowany nagłówek kolumny w panelu (zostaje prawdziwa zakładka z ✕).
   Ukrywamy TYLKO sam target nagłówka — <ul> z podpozycjami w tym <li> zostaje nietknięty.
   Długie selektory celowo — trzeba przebić własną regułę UberMenu z !important. */
nav.ubermenu.ubermenu-mobile-view ul.ubermenu-tab-content-panel > li.ubermenu-item-header > span.ubermenu-target{ display:none !important; }
nav.ubermenu.ubermenu-mobile-view li.ubermenu-tab > a.ubermenu-target .ubermenu-target-title{ font-weight:700 !important; }

/* Liczniki produktów przy pozycjach menu kategorii (menu online) — szara pigułka jak w sidebarze */
/* pusta kategoria (0 produktów, łącznie z podkategoriami) — ukryj pozycję w menu */
.tmn-cat-menu li.tmn-empty-hide,
li.tmn-empty-hide{ display:none !important; }

:is(.ubermenu-main,.tmn-cat-menu) .tmn-cat-count,
.tmn-cat-count{ display:inline-block !important; margin-left:8px; padding:1px 7px; border-radius:99px; background:#eef0f2 !important; color:#8a929b !important; font:600 11px/1.6 Roboto,system-ui,sans-serif !important; letter-spacing:0; text-transform:none !important; vertical-align:middle; }

/* Belka wyróżniona (np. „Online shop") — CSS generowany dynamicznie z ustawień (klasa+kolory). */

/* przycisk „CONTACTS" w menu — zaokrąglenie jak chip/hamburger */
body.tmn-mobile .button-mobile{ border-radius:8px !important; overflow:hidden; }

/* Lista zapytań (RFQ) w górnym pasku (wariant katalogowy) — własny link + ikona + badge z lustrzanym licznikiem */
body.tmn-mobile #tmn-top .tmn-inq{ display:flex; align-items:center; justify-content:center; width:42px; height:42px; flex:none; border:1px solid #e6e8eb; border-radius:8px; background:#fff; color:#e2001a; position:relative; text-decoration:none; }
body.tmn-mobile #tmn-top .tmn-inq svg{ width:24px; height:24px; }
body.tmn-mobile #tmn-top .tmn-inq-count{ position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 4px; background:#e2001a; color:#fff; border-radius:99px; font:700 10px/16px Roboto,system-ui,sans-serif; text-align:center; box-sizing:border-box; }

/* Desktop: „Product list" (RFQ) w górnym menu zamiast koszyka (wariant katalogowy) */
/* Górna nawigacja z Product list → flex + wyrównanie w pionie; kolejność: Choose a country (lewa), Product list (prawa).
   Naprawia niewyrównanie: „Choose a country" bywa float:right i niższy → wisiał ~10px wyżej. */
.ubermenu-nav.tmn-dinq-nav{ display:flex !important; align-items:center !important; }
.ubermenu-nav.tmn-dinq-nav > .ubermenu-item{ float:none !important; }
.ubermenu-nav.tmn-dinq-nav > li.tmn-dinq{ order:2; }
li.tmn-dinq .tmn-dinq-a{ display:inline-flex; align-items:center; gap:8px; color:inherit; text-decoration:none; }
li.tmn-dinq .tmn-dinq-ic{ position:relative; display:inline-flex; }
li.tmn-dinq .tmn-dinq-ic svg{ width:22px; height:22px; }
li.tmn-dinq .tmn-dinq-count{ position:absolute; top:-7px; right:-9px; min-width:16px; height:16px; padding:0 4px; background:#e2001a; color:#fff; border-radius:99px; font:700 10px/16px Roboto,system-ui,sans-serif; text-align:center; box-sizing:border-box; }

@media (prefers-reduced-motion:reduce){ .tmn-bar,.tmn-b,#tmn-sheet,#tmn-scrim{ transition:none !important; } }