/* ==== TU CATMENU (13.09.2026) ====
 *
 * Meniul de categorii — o singură foaie, încărcată pe tot site-ul, pentru:
 *   1. cardul de categorie (mutat aici din `_cssCustom`-ul componentei Bricks 2cac10,
 *      pentru că CSS-ul unei componente se compilează DOAR în paginile care o folosesc,
 *      iar cardul apare acum și în header, deci pe orice pagină);
 *   2. harta slug → iconiță Material Symbols (62 de categorii);
 *   3. rail-ul + panourile (homepage și mega-meniul din header);
 *   4. off-canvas-ul mobil cu drill-down pe trei niveluri.
 *
 * Convenții: 1rem = 10px (html{font-size:62.5%}); breakpoint-uri 991 / 767 / 478.
 * `!important` doar unde trebuie bătut CSS-ul Bricks/al header-ului (notat în comentariu).
 */

/* =========================================================================
 * 1. CARDUL DE CATEGORIE
 * Valorile sunt cele măsurate pe caruselul live (170px cerc, badge 40px,
 * card 190px, titlu 13/700 min-height 34, linie 44×4) — specificația §0.
 * ====================================================================== */

/* Starile de link sunt declarate explicit, ca `:visited` sau un `a:hover` global de tip
   element sa nu poata schimba paleta cardului. Varianta `<button>` (doar drill-down-ul
   din off-canvas) primeste si resetul de buton. */
.tu-category-card,
.tu-category-card:link,
.tu-category-card:visited,
.tu-category-card:hover,
.tu-category-card:focus,
.tu-category-card:active {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--tu-duration-fast, 200ms) var(--tu-ease, ease);
}

.tu-category-card--drill {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
}

.tu-category-card__visual {
  position: relative;
  width: min(17rem, 100%);
  aspect-ratio: 1 / 1;
}

.tu-category-card__image-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #fff 0%, #FFF6EE 40%, var(--tu-brand-100, #FFF1E6) 68%, var(--tu-brand-200, #FFD9B8) 100%);
  box-shadow: 0 0 0 1px var(--tu-brand-200, #FFD9B8), 0 10px 22px rgba(204, 82, 0, .16);
  transition: box-shadow var(--tu-duration-fast, 200ms) var(--tu-ease, ease);
}

.tu-category-card__image {
  display: block;
  width: 86%;
  height: 86%;
  object-fit: contain;
}

.tu-category-card__icon-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #fff 0%, #fff 52%, var(--tu-brand-100, #FFF1E6) 82%, var(--tu-brand-200, #FFD9B8) 100%);
  box-shadow: 0 0 0 1px var(--tu-brand-200, #FFD9B8), 0 4px 10px rgba(204, 82, 0, .18);
}

.tu-category-card__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 19rem;
  margin-top: -1.8rem;
  padding: 1rem 1.4rem 1.2rem;
  border: 1px solid var(--tu-border-soft, #F0E6DC);
  border-radius: var(--tu-radius-lg, 1.4rem);
  background: var(--tu-surface-page, #fff);
  box-shadow: var(--tu-shadow-card, 0 .2rem .8rem rgba(204, 82, 0, .05));
  text-align: center;
  transition: border-color var(--tu-duration-fast, 200ms) var(--tu-ease, ease),
              box-shadow var(--tu-duration-fast, 200ms) var(--tu-ease, ease);
}

:is(#tehnoutil-header, body) .tu-category-card:link .tu-category-card__title,
:is(#tehnoutil-header, body) .tu-category-card:visited .tu-category-card__title {
  color: var(--tu-ink-900, #2B1D10);
}

:is(#tehnoutil-header, body) .tu-category-card:hover .tu-category-card__title,
:is(#tehnoutil-header, body) .tu-category-card:focus .tu-category-card__title {
  color: var(--tu-brand-600, #CC5200);
}

.tu-category-card__title {
  display: -webkit-box;
  min-height: 3.4rem;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--tu-ink-900, #2B1D10);
  font-family: "Archivo", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
  transition: color var(--tu-duration-fast, 200ms) var(--tu-ease, ease);
}

.tu-category-card__accent {
  display: block;
  width: 4.4rem;
  height: .4rem;
  margin-top: .8rem;
  border-radius: .2rem;
  background: var(--tu-gradient-orange, linear-gradient(135deg, #FF791F, #CC5200));
}

/* hover — specificația §0: cardul urcă 3px, umbra cercului se intensifică,
   bordura și umbra cardului de titlu se schimbă, titlul devine brand-600 */
.tu-category-card:hover {
  transform: translateY(-.3rem);
}

.tu-category-card:hover .tu-category-card__image-wrap {
  box-shadow: 0 0 0 1px var(--tu-brand-300, #FFB877), 0 14px 26px rgba(204, 82, 0, .26);
}

.tu-category-card:hover .tu-category-card__content {
  border-color: var(--tu-brand-200, #FFD9B8);
  box-shadow: var(--tu-shadow-hover, 0 1rem 2.8rem rgba(204, 82, 0, .13));
}

.tu-category-card:hover .tu-category-card__title {
  color: var(--tu-brand-600, #CC5200);
}

.tu-category-card:active {
  transform: scale(.96);
}

.tu-category-card:focus-visible {
  outline: 3px solid var(--tu-brand-300, #FFB877);
  outline-offset: 4px;
}

/* =========================================================================
 * 2. ICONIȚELE — o singură hartă slug → glifă, folosită de card, de rail
 *    și de off-canvas. Numele vin din exportul Claude Design (62 categorii).
 * ====================================================================== */

.tu-category-card__ms::before,
.tu-catmenu__ico::before,
.tu-catmenu__head-ico::before,
.tu-catmenu__chev::before,
.tu-catmenu__all-ico::before,
.tu-catnav__back-ico::before {
  display: block;
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
  -webkit-font-smoothing: antialiased;
}

.tu-category-card__ms::before {
  content: "category";
  color: var(--tu-brand-600, #CC5200);
  font-size: 2rem;
}

/* fără imagine: glifa ține locul imaginii, în mijlocul cercului */
.tu-category-card__ms--fallback::before {
  color: var(--tu-brand-400, #FF9346);
  font-size: 2.6rem;
}

.tu-catmenu__head-ico::before {
  content: "menu";
  color: #fff;
  font-size: 2rem;
}

.tu-catmenu__chev::before {
  content: "chevron_right";
  color: var(--tu-ink-400, #B0A294);
  font-size: 1.6rem;
  transition: color var(--tu-duration-fast, 200ms) var(--tu-ease, ease);
}

.tu-catmenu__all-ico::before {
  content: "arrow_forward";
  color: #fff;
  font-size: 1.8rem;
}

.tu-catnav__back-ico::before {
  content: "chevron_left";
  color: var(--tu-brand-600, #CC5200);
  font-size: 1.8rem;
}

.tu-catmenu__ico::before {
  content: "category";
  color: var(--tu-ink-500, #8A7B6C);
  font-size: 2rem;
  transition: color var(--tu-duration-fast, 200ms) var(--tu-ease, ease);
}

/* harta — L1. Selectorii sunt legați explicit de cele două elemente care POARTĂ
   glifa: `<a class="tu-category-card" data-cat="…">` are și el atributul, iar un
   `[data-cat]` liber i-ar fi pus numele ligaturii ca text deasupra cardului. */
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="motoutilaje-pentru-agricultura"]::before { content: "agriculture"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="gazon-si-intretinerea-gradinii"]::before { content: "grass"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="padure-si-prelucrarea-lemnului"]::before { content: "forest"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="pompe-de-apa-si-irigatii"]::before { content: "water_drop"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="generatoare-atelier-si-constructii"]::before { content: "bolt"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="curatenie-incalzire-si-utilaje-sezoniere"]::before { content: "heat_pump"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="zootehnie-si-gospodarie"]::before { content: "pets"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="nautica-si-mobilitate-electrica"]::before { content: "sailing"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="uleiuri-si-consumabile-pentru-motoutilaje"]::before { content: "oil_barrel"; }

/* harta — L2/L3 */
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="accesorii-pentru-motocositoare"]::before { content: "handyman"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="bare-de-cosire-pentru-motocositoare"]::before { content: "straighten"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="accesorii-pentru-motosape-si-motocultoare"]::before { content: "extension"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="pluguri-si-rarite-pentru-motocultoare"]::before { content: "construction"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="roti-pentru-motosape-si-motocultoare"]::before { content: "tire_repair"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="motoburghie"]::before { content: "cyclone"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="motocositoare-cu-masa"]::before { content: "content_cut"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="motocultoare"]::before { content: "agriculture"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="motosape"]::before { content: "yard"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="remorci-pentru-motosape-si-motocultoare"]::before { content: "local_shipping"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="tractoare-compacte-pentru-vii-si-livezi"]::before { content: "agriculture"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="utilaje-agricole-de-taiat-si-legat"]::before { content: "content_cut"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="accesorii-pentru-atomizoare"]::before { content: "extension"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="accesorii-pentru-motocoase-si-trimmere"]::before { content: "extension"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="capete-de-taiere-pentru-motocoase"]::before { content: "adjust"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="discuri-si-lame-pentru-motocoase"]::before { content: "circle"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="atomizoare"]::before { content: "air"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="foarfece-pentru-gard-viu"]::before { content: "content_cut"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="kituri-de-intretinere-pentru-masini-de-tuns-gazon"]::before { content: "home_repair_service"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="masini-de-tuns-iarba-si-gazon"]::before { content: "grass"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="motocoase"]::before { content: "grass"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="pulverizatoare-si-pompe-de-stropit"]::before { content: "shower"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="scarificatoare-si-aeratoare-pentru-gazon"]::before { content: "yard"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="tocatoare-de-crengi-si-resturi-vegetale"]::before { content: "park"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="tractoare-si-tractorase-de-tuns-gazon"]::before { content: "agriculture"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="trimmere-electrice"]::before { content: "electric_bolt"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="accesorii-pentru-drujbe-si-motoferastraie"]::before { content: "handyman"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="despicatoare-de-lemne"]::before { content: "carpenter"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="drujbe-si-motoferastraie"]::before { content: "forest"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="furtunuri-pentru-motopompe"]::before { content: "cable"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="hidrofoare"]::before { content: "water_damage"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="motopompe"]::before { content: "water_drop"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="pompe-de-gradina"]::before { content: "yard"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="pompe-submersibile"]::before { content: "waves"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="aparate-de-sudura"]::before { content: "construction"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="compresoare-de-aer"]::before { content: "compress"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="generatoare-de-curent"]::before { content: "bolt"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="generatoare-diesel"]::before { content: "local_gas_station"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="generatoare-inverter"]::before { content: "electric_bolt"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="maiuri-compactoare"]::before { content: "fitness_center"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="placi-compactoare"]::before { content: "vibration"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="aeroterme-electrice"]::before { content: "heat_pump"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="aeroterme-pe-gaz"]::before { content: "local_fire_department"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="aspiratoare-umed-uscat"]::before { content: "cleaning_services"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="freze-de-zapada"]::before { content: "ac_unit"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="spalatoare-cu-presiune"]::before { content: "shower"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="suflante-si-aspiratoare-pentru-frunze"]::before { content: "air"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="tunuri-de-aer-cald"]::before { content: "whatshot"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="aparate-de-muls"]::before { content: "local_drink"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="mori-pentru-cereale-si-furaje"]::before { content: "grain"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="barci-pneumatice"]::before { content: "sailing"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="motoare-de-barca"]::before { content: "directions_boat"; }
:is(.tu-category-card__ms, .tu-catmenu__ico)[data-cat="tricicluri-electrice-utilitare"]::before { content: "moped"; }

/* =========================================================================
 * 3. RAIL (comun homepage + header)
 * ====================================================================== */

.tu-catmenu {
  position: relative;
  font-family: "Archivo", sans-serif;
}

.tu-catmenu__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.6rem;
  border-radius: var(--tu-radius-lg, 1.4rem) var(--tu-radius-lg, 1.4rem) 0 0;
  background: var(--tu-gradient-orange, linear-gradient(135deg, #FF791F, #CC5200));
  color: #fff;
}

.tu-catmenu__head-txt {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.tu-catmenu__rail {
  display: flex;
  flex-direction: column;
  padding: .6rem 0;
}

/* `:is(#tehnoutil-header, body)` da specificitate de id (1,1,0) si in header, si in afara
   lui, cu o singura lista de selectori. E necesar pentru ca header-ul are
   `#tehnoutil-header a { color: inherit }` (1,0,1), care bate un selector de clasa simplu
   — masurat: randul activ din mega-meniu ramanea ink-900 in loc de brand-600.
   Fara `!important`: ridicam specificitatea, nu ocolim cascada. */
:is(#tehnoutil-header, body) .tu-catmenu__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.4rem 1.1rem 1.3rem;
  border-left: 3px solid transparent;
  background: transparent;
  color: var(--tu-ink-900, #2B1D10);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: background var(--tu-duration-fast, 200ms) var(--tu-ease, ease),
              color var(--tu-duration-fast, 200ms) var(--tu-ease, ease),
              border-color var(--tu-duration-fast, 200ms) var(--tu-ease, ease);
}

.tu-catmenu__lbl {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

:is(#tehnoutil-header, body) .tu-catmenu__row:hover,
:is(#tehnoutil-header, body) .tu-catmenu__row.is-on {
  border-left-color: var(--tu-brand-500, #FF791F);
  background: var(--tu-brand-50, #FFF6EE);
  color: var(--tu-brand-600, #CC5200);
}

.tu-catmenu__row:hover .tu-catmenu__ico::before,
.tu-catmenu__row.is-on .tu-catmenu__ico::before {
  color: var(--tu-brand-600, #CC5200);
}

.tu-catmenu__row:hover .tu-catmenu__chev::before,
.tu-catmenu__row.is-on .tu-catmenu__chev::before {
  color: var(--tu-brand-500, #FF791F);
}

.tu-catmenu__row:focus-visible {
  outline: 3px solid var(--tu-brand-300, #FFB877);
  outline-offset: -3px;
}

/* =========================================================================
 * 4. PANOUL (comun): antet + grilă de carduri
 * ====================================================================== */

/* `!important`: regulile de mai jos (`--home`/`--mega`) pun `display: flex` pe panou
   la aceeași specificitate și, venind mai târziu, anulau ascunderea — toate cele nouă
   panouri se suprapuneau și se vedea ultimul. */
.tu-catmenu__panel[hidden] {
  display: none !important;
}

.tu-catmenu__phead {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem;
  padding: 1.6rem 2.2rem;
  border-bottom: 1px solid var(--tu-border-soft, #F0E6DC);
}

.tu-catmenu__pttl {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--tu-ink-900, #2B1D10);
  font-family: "Archivo", sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.25;
}

.tu-catmenu__pbody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1.8rem 2.2rem 2.2rem;
}

.tu-catmenu__grid {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

/* Liniile portocalii se aliniaza pe tot randul grilei — intentia din specificatie
   (`min-height: 34px` pe titlu o asigura doar cat timp titlul incape in doua randuri;
   in mega-meniu sunt si denumiri de trei randuri). Cardurile sunt egale ca inaltime
   (grila le intinde), iar linia e impinsa la baza cardului de titlu. */
.tu-catmenu__grid .tu-category-card,
.tu-catnav__grid .tu-category-card {
  height: 100%;
}

.tu-catmenu__grid .tu-category-card__content,
.tu-catnav__grid .tu-category-card__content {
  flex: 1 1 auto;
  gap: .8rem;
}

/* `margin-top: auto` inlocuieste marginea proprie a liniei; distanta minima fata de
   titlu vine din `gap`, ca linia sa ramana exact 44x4 (nu o umflam cu padding) */
.tu-catmenu__grid .tu-category-card__accent,
.tu-catnav__grid .tu-category-card__accent {
  margin-top: auto;
}

.tu-catmenu__empty {
  margin: 0;
  color: var(--tu-ink-500, #8A7B6C);
  font-size: 1.4rem;
}

/* butonul „Vezi toate produsele" — gradientul NU se interpolează, deci hover-ul
   adaugă un strat translucid prin box-shadow, nu schimbă `background` și nu
   folosește `filter: brightness()` (ar întuneca și textul). */
/* Clasa bate un `a:hover` global de tip element prin specificitate, fara `!important`.
   Fundalul e gradient: hover-ul adauga un strat translucid prin box-shadow — gradientul
   nu se poate interpola catre o culoare solida, iar `filter: brightness()` ar intuneca
   si textul, si iconita. */
:is(#tehnoutil-header, body) .tu-catmenu__all,
:is(#tehnoutil-header, body) .tu-catmenu__all:link,
:is(#tehnoutil-header, body) .tu-catmenu__all:visited,
:is(#tehnoutil-header, body) .tu-catmenu__all:hover,
:is(#tehnoutil-header, body) .tu-catmenu__all:focus,
:is(#tehnoutil-header, body) .tu-catmenu__all:active {
  color: #fff;
  text-decoration: none;
}

.tu-catmenu__all:hover .tu-catmenu__all-ico::before,
.tu-catmenu__all:focus .tu-catmenu__all-ico::before {
  color: #fff;
}

.tu-catmenu__all {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  height: 4rem;
  padding: 0 1.8rem;
  border: 0;
  border-radius: var(--tu-radius-md, .8rem);
  background: var(--tu-gradient-orange, linear-gradient(135deg, #FF791F, #CC5200));
  color: #fff;
  cursor: pointer;
  font-family: "Archivo", sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: inset 0 0 0 999px rgba(43, 29, 16, 0);
  transition: box-shadow var(--tu-duration-fast, 200ms) var(--tu-ease, ease);
}

.tu-catmenu__all:hover {
  box-shadow: inset 0 0 0 999px rgba(43, 29, 16, .14),
              var(--tu-shadow-hover, 0 1rem 2.8rem rgba(204, 82, 0, .13));
}

.tu-catmenu__all:focus-visible {
  outline: 2px solid var(--tu-brand-600, #CC5200);
  outline-offset: 2px;
}

/* zonele derulabile: aceeași identitate peste tot (specificația §4) */
.tu-catmenu__scroll,
.tu-catmenu__pbody {
  scrollbar-width: thin;
  scrollbar-color: var(--tu-brand-300, #FFB877) var(--tu-brand-50, #FFF6EE);
}

.tu-catmenu__scroll::-webkit-scrollbar,
.tu-catmenu__pbody::-webkit-scrollbar {
  width: 10px;
}

.tu-catmenu__scroll::-webkit-scrollbar-track,
.tu-catmenu__pbody::-webkit-scrollbar-track {
  margin: 8px 0;
  border-radius: 99px;
  background: var(--tu-brand-50, #FFF6EE);
}

.tu-catmenu__scroll::-webkit-scrollbar-thumb,
.tu-catmenu__pbody::-webkit-scrollbar-thumb {
  border: 2px solid var(--tu-brand-50, #FFF6EE);
  border-radius: 99px;
  background: var(--tu-brand-300, #FFB877);
}

.tu-catmenu__scroll::-webkit-scrollbar-thumb:hover,
.tu-catmenu__pbody::-webkit-scrollbar-thumb:hover {
  background: var(--tu-brand-500, #FF791F);
}

/* =========================================================================
 * 5. HOMEPAGE — rail permanent în hero + panou spre dreapta
 * ====================================================================== */

.tu-catmenu--home {
  display: flex;
  flex-direction: column;
  width: 31rem;
  border: 1px solid var(--tu-border-soft, #F0E6DC);
  border-radius: var(--tu-radius-lg, 1.4rem);
  background: var(--tu-surface-page, #fff);
  box-shadow: var(--tu-shadow-card, 0 .2rem .8rem rgba(204, 82, 0, .05));
}

.tu-catmenu--home .tu-catmenu__rail {
  flex: 1 1 auto;
}

.tu-catmenu--home.is-open {
  z-index: 30;
}

/* panoul: lățimea vine din JS (`--tu-cm-pw`) — se oprește exact pe marginea
   dreaptă a containerului paginii, nu a ferestrei. `clip-path` taie umbra pe
   stânga, ca panoul să pară continuarea rail-ului. */
.tu-catmenu--home .tu-catmenu__panel {
  position: absolute;
  top: 0;
  left: calc(100% - 1px);
  z-index: 30;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: var(--tu-cm-pw, 56rem);
  min-height: 100%;
  height: min(90rem, calc(100vh - var(--tu-cm-headb, 7.2rem) - 1.6rem));
  border: 1px solid var(--tu-border-soft, #F0E6DC);
  border-radius: 0 var(--tu-radius-lg, 1.4rem) var(--tu-radius-lg, 1.4rem) var(--tu-radius-lg, 1.4rem);
  background: var(--tu-surface-page, #fff);
  box-shadow: var(--tu-shadow-modal, 0 2.4rem 6.4rem rgba(43, 29, 16, .22));
  clip-path: inset(-6rem -6rem -6rem 0);
}

/* pe homepage meniul stă SUB header (specificația §1): scrim 25, meniu 30, header 500
 *
 * Overlay-ul acoperă TOATĂ fereastra, iar marginea lui de sus nu se mai calculează din
 * înălțimea măsurată a header-ului: header-ul are z-index propriu (500) și se desenează
 * peste overlay, deci rămâne nedimat pixel-exact — indiferent de bara de administrare
 * WordPress, de scroll, de header-ul care se strânge sau de momentul măsurătorii.
 * Cu `top` calculat, orice nepotrivire de câțiva pixeli lăsa o bandă nedimată sub header. */
.tu-catmenu-scrim {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  z-index: 25;
  background: rgba(43, 29, 16, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tu-duration-fast, 200ms) var(--tu-ease, ease);
}

.tu-catmenu-scrim.is-on {
  opacity: 1;
  pointer-events: auto;
}

/* scrimul mega-meniului stă imediat sub panoul din header */
.tu-catmenu-scrim--mega {
  z-index: 60;
}

/* Bara sticky de comparare stă la `z-index: 9000`, deci deasupra întregului strat al
   header-ului (`#brx-header` e la 500 și e context de stivuire — panoul mega e prins în
   el). Cât timp meniul de categorii e deschis, bara coboară sub overlay, conform
   specificației barelor §5: „mega-meniul de categorii din header trece peste bara de
   comparație, împreună cu overlay-ul lui”. În rest bara își păstrează z-index-ul.

   A doua regulă acoperă un defect preexistent, independent de meniu: off-canvas-ul mobil
   (`#tehnoutil-mobile-menu`) e `position: static`, deci `z-index: 10050` nu se aplică, iar
   straturile lui (inner 999 / backdrop 998) sunt prinse în contextul lui `#brx-header`
   (z-index 500) — sub bara de comparare. Drawer-ul apărea tăiat de bară, contrar regulii
   „meniul lateral din header trece peste bara de comparație”. */
html.tu-catmenu-open #tu-compare-bar,
body:has(#tehnoutil-mobile-menu.brx-open) #tu-compare-bar {
  z-index: 20;
}

/* Coșul plutitor al Side Cart-ului rămânea aprins peste pagina dimată. Coborârea lui
   NU se poate face pe `.xoo-wsc-basket`: el stă în `.xoo-wsc-container`
   (`position: fixed; z-index: 999999`), care e context de stivuire — z-index-ul copilului
   nu contează față de overlay. Coborâm containerul.
   Excepție: dacă panoul lateral e chiar deschis (`html.xoo-wsc-cart-active`), îl lăsăm
   deasupra — altfel ar dispărea sub overlay tocmai când utilizatorul îl folosește. */
html.tu-catmenu-open:not(.xoo-wsc-cart-active) .xoo-wsc-container {
  z-index: 20;
}

/* sub 992px rail-ul de pe homepage dispare: navigarea se face din off-canvas */
@media (max-width: 991px) {
  .tu-home-catrail {
    display: none !important;
  }
}

/* =========================================================================
 * 6. HEADER — mega-meniul din dropdown-ul „Categorii"
 * ====================================================================== */

/* ancorarea panoului la containerul paginii, nu la buton: `position: static` pe
   li-ul dropdown-ului mută blocul-container pe bara de categorii. Specificitatea
   e ridicată intenționat, ca să bată regulile din `_cssCustom`-ul header-ului. */
#tehnoutil-category-bar #tehnoutil-category-inner {
  position: relative;
}

#tehnoutil-category-bar #tehnoutil-category-dropdown {
  position: static;
}

#tehnoutil-category-bar #tehnoutil-category-dropdown > .brx-dropdown-content {
  right: 0 !important;
  left: 0 !important;
  width: auto !important;
  max-width: none !important;
  overflow: visible !important;
}

/* li-ul pe care Bricks îl pune în jurul conținutului de dropdown nu se întinde
   singur pe lățimea listei: fără asta coloana de panouri (1fr) rămâne la zero. */
#tehnoutil-category-panel > li,
#tehnoutil-category-panel .tu-catmenu-slot {
  width: 100%;
  max-width: none;
}

.tu-catmenu--mega {
  width: 100%;
  display: grid;
  grid-template-columns: 29rem minmax(0, 1fr);
  overflow: hidden;
  height: min(90rem, calc(100vh - var(--tu-cm-headb, 19rem) - 1.6rem));
  border: 1px solid var(--tu-border-soft, #F0E6DC);
  border-radius: var(--tu-radius-lg, 1.4rem);
  background: var(--tu-surface-page, #fff);
  box-shadow: var(--tu-shadow-modal, 0 2.4rem 6.4rem rgba(43, 29, 16, .22));
}

.tu-catmenu--mega .tu-catmenu__rail {
  min-height: 0;
  overflow-y: auto;
  padding: .8rem 0;
  border-right: 1px solid var(--tu-border-soft, #F0E6DC);
  background: var(--tu-surface-subtle, #FAF6F1);
}

/* coloana dreaptă: `min-height: 0` e obligatoriu, altfel creșterea la înălțimea
   conținutului anulează `overflow` și scroll-ul nu mai funcționează */
.tu-catmenu--mega .tu-catmenu__panels {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.tu-catmenu--mega .tu-catmenu__panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.tu-catmenu--mega .tu-catmenu__pttl {
  font-size: 2rem;
}

.tu-catmenu--mega .tu-catmenu__grid {
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

/* sub 992px bara de categorii nu se mai folosește (header-ul o ascunde oricum) */
@media (max-width: 991px) {
  .tu-catmenu--mega {
    display: none;
  }
}

/* =========================================================================
 * 7. OFF-CANVAS MOBIL — lățime, ordine, taburi
 * ====================================================================== */

/* lățimea cerută de specificație: rămâne o fâșie de overlay la dreapta */
#tehnoutil-header #tehnoutil-mobile-menu .brx-offcanvas-inner {
  width: min(64rem, 94vw);
}

/* `display: contents` scoate wrapperul taburilor din flux, ca bara de căutare
   să poată sta ÎNTRE titlurile de tab și zona derulabilă (specificația §3) */
#tehnoutil-header #tehnoutil-mobile-tabs {
  display: contents;
}

#tehnoutil-header #tehnoutil-mobile-close {
  order: 0;
}

#tehnoutil-header #tehnoutil-mobile-tabs > .tab-menu {
  order: 1;
}

#tehnoutil-header #tehnoutil-mobile-search {
  order: 2;
  flex: 0 0 auto;
}

#tehnoutil-header #tehnoutil-mobile-tabs > .tab-content {
  order: 3;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border-top: .1rem solid var(--tu-border-soft, #F0E6DC);
  scrollbar-width: thin;
  scrollbar-color: var(--tu-brand-300, #FFB877) var(--tu-brand-50, #FFF6EE);
}

#tehnoutil-header #tehnoutil-mobile-tabs > .tab-content::-webkit-scrollbar {
  width: 8px;
}

#tehnoutil-header #tehnoutil-mobile-tabs > .tab-content::-webkit-scrollbar-track {
  background: var(--tu-brand-50, #FFF6EE);
}

#tehnoutil-header #tehnoutil-mobile-tabs > .tab-content::-webkit-scrollbar-thumb {
  border: 2px solid var(--tu-brand-50, #FFF6EE);
  border-radius: 99px;
  background: var(--tu-brand-300, #FFB877);
}

#tehnoutil-header #tehnoutil-mobile-tabs > .tab-content::-webkit-scrollbar-thumb:hover {
  background: var(--tu-brand-500, #FF791F);
}

#tehnoutil-header #tehnoutil-mobile-tabs .tab-pane {
  padding: 0;
}

/* taburile: Categorii primul, cu iconițele din specificație */
#tehnoutil-header #tehnoutil-mobile-tabs .tab-title {
  gap: .8rem;
  background: var(--tu-surface-subtle, #FAF6F1);
  color: var(--tu-ink-700, #52453A);
  transition: background var(--tu-duration-fast, 200ms) var(--tu-ease, ease),
              color var(--tu-duration-fast, 200ms) var(--tu-ease, ease);
}

#tehnoutil-header #tehnoutil-mobile-tabs .tab-title::before {
  font-family: "Material Symbols Outlined";
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  font-feature-settings: "liga";
}

#tehnoutil-header #tehnoutil-mobile-tabs .tab-title:nth-child(1)::before {
  content: "inventory_2";
}

#tehnoutil-header #tehnoutil-mobile-tabs .tab-title:nth-child(2)::before {
  content: "menu_book";
}

#tehnoutil-header #tehnoutil-mobile-tabs .tab-title:hover:not(.brx-open):not([aria-selected="true"]) {
  background: var(--tu-brand-100, #FFF1E6);
  color: var(--tu-brand-700, #A34200);
}

#tehnoutil-header #tehnoutil-mobile-tabs .tab-title.brx-open,
#tehnoutil-header #tehnoutil-mobile-tabs .tab-title[aria-selected="true"] {
  background: var(--tu-brand-500, #FF791F);
  color: #fff;
}

/* =========================================================================
 * 8. OFF-CANVAS — drill-down pe trei niveluri
 * ====================================================================== */

.tu-catnav {
  display: flex;
  flex-direction: column;
  min-height: 0;
  font-family: "Archivo", sans-serif;
}

.tu-catnav__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.6rem;
  border-bottom: 1px solid var(--tu-border-soft, #F0E6DC);
  background: var(--tu-surface-subtle, #FAF6F1);
}

.tu-catnav__level[hidden] .tu-catnav__bar,
.tu-catnav__level[hidden] .tu-catnav__allwrap {
  display: none;
}

.tu-catnav__back {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: .4rem;
  height: 3.6rem;
  padding: 0 1.2rem 0 .8rem;
  border: 1px solid var(--tu-border-strong, #E4DAD0);
  border-radius: var(--tu-radius-pill, 999rem);
  background: var(--tu-surface-page, #fff);
  color: var(--tu-ink-700, #52453A);
  cursor: pointer;
  font-family: "Archivo", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  transition: background var(--tu-duration-fast, 200ms) var(--tu-ease, ease),
              border-color var(--tu-duration-fast, 200ms) var(--tu-ease, ease),
              color var(--tu-duration-fast, 200ms) var(--tu-ease, ease);
}

.tu-catnav__back:hover {
  border-color: var(--tu-brand-500, #FF791F);
  background: var(--tu-brand-100, #FFF1E6);
  color: var(--tu-brand-700, #A34200);
}

.tu-catnav__ttl {
  flex: 1;
  min-width: 0;
  color: var(--tu-ink-900, #2B1D10);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.25;
}

.tu-catnav__allwrap {
  padding: 1.4rem 1.6rem 0;
}

.tu-catnav__all {
  display: flex;
  width: 100%;
  height: 4.4rem;
}

.tu-catnav__level[hidden] {
  display: none;
}

/* numărul de coloane e MĂSURAT, nu declarat: JS pune `--tu-catnav-cols` din
   lățimea reală a grilei (≥722px → 4, ≥538px → 3, altfel 2) */
.tu-catnav__grid {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(var(--tu-catnav-cols, 2), minmax(0, 1fr));
  padding: 1.4rem 1.6rem 2rem;
  animation: tu-catnav-in var(--tu-duration-slow, 300ms) var(--tu-ease, ease) both;
}

.tu-catnav__levels.is-back .tu-catnav__grid {
  animation-name: tu-catnav-back;
}

@keyframes tu-catnav-in {
  from { opacity: 0; transform: translateX(1.4rem); }
  to   { opacity: 1; transform: none; }
}

@keyframes tu-catnav-back {
  from { opacity: 0; transform: translateX(-1.4rem); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================================
 * 9. Jgheabul scrollbar-ului cât timp meniul blochează pagina.
 *    Aceleași valori ca în tu-shop.css §27 și tu-quickview.css — dacă se
 *    schimbă una, se schimbă toate trei.
 * ====================================================================== */

html.tu-modal-open {
  background: #95897F;
  scrollbar-color: #95897F #95897F;
}

html.tu-modal-open::-webkit-scrollbar-track {
  background: #95897F;
}

html.tu-modal-open::-webkit-scrollbar-thumb {
  border-color: #95897F;
  background: #95897F;
}

@media (prefers-reduced-motion: reduce) {
  .tu-category-card,
  .tu-category-card__content,
  .tu-category-card__title,
  .tu-category-card__image-wrap,
  .tu-catmenu__row,
  .tu-catmenu__all,
  .tu-catnav__back,
  .tu-catmenu-scrim {
    transition: none;
  }

  .tu-category-card:hover,
  .tu-category-card:active {
    transform: none;
  }

  .tu-catnav__grid {
    animation: none;
  }
}
/* ==== /TU CATMENU ==== */