.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* =========================================================
   VARIABLES
========================================================= */
:root{
  --nav-active-link: rgb(45, 89, 133);
  --nav-color-link: rgb(75, 75, 75);
  --nav-hover-link: rgb(65, 110, 160);

  --header-h: 64px;
  --z-header: 15002;
  --z-header-toggle: 15003;
  --z-submenu: 15001;
  --z-drawer: 10001;

  --header-grad: linear-gradient(180deg, #47a9ff 0%, #2c8fff 100%);

  --submenu-tile-w: 140px;
  --submenu-tile-minh: 120px;
  --submenu-icon: 44px;
}

body{
  padding-top: max(3rem, calc(var(--header-h) + 20px)) !important;
}

/* =========================================================
   GLOBAL / LAYOUT NORMALIZATION
========================================================= */
html, body{ background:#fff !important; }

body, h1,h2,h3,h4,h5,h6{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* Bootstrap containers full width */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl{
  max-width: none !important;
  width: 100%;
}

/* Footer cleanup */
.footer .grid-child{ padding:0 !important; max-width:100vw !important; }
footer.footer{ background:#fff !important; box-shadow:none !important; }

/* Cassiopeia: avoid clipping */
.container-header,
.container-nav,
.navbar,
.metismenu{ overflow: visible !important; }

/* Remove default link styles in header */
header.header nav a,
header.header nav a:hover,
header.header nav a:focus,
header.header nav a:active,
header.header nav .nav-link,
header.header nav .nav-link:hover,
header.header nav .nav-link:focus,
header.header nav .nav-link.active{
  color: inherit;
  background: none;
  text-decoration: none;
  box-shadow: none;
}

/* =========================================================
   HEADER BAR (FULL WIDTH + STICKY)
========================================================= */
.container-header{ margin-bottom: 3em; }

header.header.container-header{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: var(--z-header) !important;
  background: var(--header-grad) !important;
  box-shadow: 0 8px 12px rgba(0,0,0,.5) !important;
}

/* Cassiopeia ogranicza .header .grid-child */
header.header.container-header .grid-child{ max-width: none !important; }

/* wrapper inside bar */
header.header.container-header > .grid-child.container-nav{
  position: relative !important;
  background: transparent !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  min-height: var(--header-h) !important;
  font-weight: bold;
  box-sizing: border-box !important;
}

/* =========================================================
   LOGO / PHONE MODULES
========================================================= */
/* Phone */
#mod-custom118 .overlay{ background:transparent !important; padding:0 !important; }
#mod-custom118 p{ margin:0 !important; white-space:nowrap !important; }

#mod-custom118 a{
  padding-right: 1em;
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  color:#fff !important;
  text-decoration:none !important;
  font-size: 1.4rem !important;
}

#mod-custom118 a img{
  width: clamp(24px, 1.2vw, 24px) !important;
  height:auto !important;
}

header.header #mod-custom118{ transform: scale(.9); }

header.header #mod-custom118 img,
header.header #mod-custom118 svg{
  width:24px !important;
  height:24px !important;
}

/* Logo */
#mod-custom119 p,
#mod-custom119 p a{
  margin:0 !important;
  padding:0 !important;
}

#mod-custom119 p a{
  display:flex;
  justify-content:center;
  align-items:center;
}

#mod-custom119 p a img{
  width: clamp(120px, 14vw, 200px) !important;
  max-width:100% !important;
  height:auto !important;
  display:block;
}

/* =========================================================
   TOP MENU (LEVEL 1)
========================================================= */
header.header.container-header .container-nav a,
header.header.container-header .container-nav button{
  border:none;
  font-size:.9rem !important;
  color:#fff;
}

/* items */
.metismenu.mod-menu .metismenu-item > a{
  text-transform: lowercase !important;
  text-align:center;
  color:#fff !important;
  line-height: 1.1 !important;
  text-overflow: clip !important;
  overflow: visible !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  transition: color .4s ease;
}

.metismenu.mod-menu .metismenu-item > a:hover,
.metismenu-item > button:hover{
  color:#333333b5 !important;
  text-decoration:none !important;
}

/* Active/current */
.container-header .metismenu > li.active > a,
.container-header .metismenu > li.current > a,
.container-header .metismenu a[aria-current="page"]{
  color:#333333b5 !important;
  text-decoration:none !important;
}

/* Disable Cassiopeia underline bar */
.container-header .metismenu > li > a:hover::after,
.container-header .metismenu > li > button:hover::before,
.container-header .metismenu > li.active > a::after,
.container-header .metismenu > li.current > a::after,
.container-header .metismenu a[aria-current="page"]::after{
  opacity: 0 !important;
}

/* =========================================================
   SUBMENU TILES (base) – bez zmiany wyglądu
========================================================= */
.metismenu.mod-menu .mm-collapse > li > a{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:6px;
  width:100% !important;
  /* tu zostawiamy jak było, bo “look” masz ustawiony dalej hoverem */
  transition:none !important;
  transform:none !important;
}

.metismenu .mm-collapse > li > a > img{
  width: var(--submenu-icon) !important;
  height:auto !important;
  object-fit:contain;
  display:block;
  margin:0 auto !important;
  transition:none !important;
  transform:none !important;
}

.metismenu .mm-collapse > li > a:hover img{ transform:none !important; }

@supports (-webkit-line-clamp: 2){
  .metismenu .mm-collapse > li > a .image-title{
    display:-webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow:hidden !important;
  }
}

/* =========================================================
   MOBILE / TABLET (<992px) – LOGO | PHONE | BURGER + DRAWER
========================================================= */
@media (max-width: 991.98px){

  header.header.container-header > .grid-child.container-nav{
    display:grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas: "logo phone burger" !important;
    align-items:center !important;
    padding: 0 12px !important;
  }

  header.header #mod-custom119{
    grid-area: logo !important;
    justify-self:start !important;
  }

  header.header #mod-custom118{
    grid-area: phone !important;
    justify-self:center !important;
    transform: none !important;
  }

  header.header .container-nav > nav.navbar{
    grid-area: burger !important;
    justify-self:end !important;
    width:auto !important;
    justify-content:flex-end !important;
    position: static !important;
    transform: none !important;
  }

  /* Burger */
  .navbar-toggler{ position:relative !important; z-index: var(--z-header-toggle) !important; }
  header.header .navbar-toggler{
    margin:0 !important;
    padding-bottom: 0.8em;
    transform: scale(2);
  }
  header.header .navbar-toggler .navbar-toggler-icon{
    width:1.8em !important;
    height:1.8em !important;
  }

  /* Drawer */
  #navbar1{
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    width:80%;
    max-width:320px;
    padding: 5.5rem 1.5rem 1.5rem; /* ref: było 4rem, u Ciebie już poprawione */
    overflow-y:auto;
    overflow-x:hidden;
    background: var(--header-grad);
    color:#fff;
    transform: translateX(-100%);
    transition: transform .3s ease-in-out;
    display:block !important;
    z-index: 12000;
    border-bottom: 1px solid lightgray !important;
  }
  #navbar1.show{
    transform: translateX(0);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
  }

  /* Separators */
  #navbar1 .metismenu > li,
  #navbar1 .metismenu .mm-collapse > li{ position:relative; }

  #navbar1 .metismenu > li::after{
    content:"";
    position:absolute; left:0; right:0; bottom:-2px;
    height:1px;
    background: rgba(0,0,0,.08);
  }
  #navbar1 .metismenu .mm-collapse > li::after{
    content:"";
    position:absolute; left:0; right:0; bottom:0;
    height:1px;
    background: rgba(0,0,0,.06);
  }

  /* większy odstęp między pozycjami + większy obszar klikalny */
  #navbar1 .metismenu > li{ padding: 6px 0 !important; }

  #navbar1 .metismenu > li > a{
    padding: 15px 10px !important;
    line-height: 1.3 !important;
    font-size: 1rem !important;
  }

  /* Submenu in drawer (open on click) */
  .metismenu > li.item-102 > ul.mm-collapse{
    position:static !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    box-shadow:none !important;
    display:none !important;
  }
  .metismenu > li.item-102 > button[aria-expanded="true"] + ul.mm-collapse{
    display:block !important;
  }

  /* submenu tiles in drawer */
  .metismenu .mm-collapse > li > a{
    padding: 10px 16px !important;
    flex-direction: column-reverse;
  }

  /* logo/phone scaling */
  header.header #mod-custom119 p a img{
    width: clamp(80px, 22vw, 200px) !important;
  }
  header.header #mod-custom118 a{
    font-size: clamp(12px, 3.2vw, 18px) !important;
  }
  header.header #mod-custom118 a img{
    width: clamp(24px, 3.2vw, 20px) !important;
  }
}

/* =========================================================
   TABLET (768–992) submenu tiles layout tweaks
========================================================= */
@media (min-width: 768px) and (max-width: 991.98px) and (orientation: landscape){
  .metismenu > li.item-102 > ul.mm-collapse.mm-show,
  .metismenu > li.item-102 > button[aria-expanded="true"] + ul.mm-collapse{
    display:grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap:14px !important;
    align-items:stretch !important;
  }
  .metismenu > li.item-102 > ul.mm-collapse > li > a{
    min-height:110px !important;
    padding:10px !important;
  }
  .metismenu > li.item-102 > ul.mm-collapse > li > a > img{
    width:40px !important;
    height:40px !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) and (orientation: portrait){
  .metismenu > li.item-102 > ul.mm-collapse.mm-show,
  .metismenu > li.item-102 > button[aria-expanded="true"] + ul.mm-collapse{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
  }
  .metismenu > li.item-102 > ul.mm-collapse > li > a{
    padding:10px 12px !important;
  }
  .metismenu > li.item-102 > ul.mm-collapse > li > a > img{
    width:28px !important;
    height:28px !important;
  }
}

/* =========================================================
   DESKTOP (>=992px) – JEDEN układ (symetria: 1fr | menu | 1fr)
========================================================= */
@media (min-width: 992px){

  header.header.container-header > .grid-child.container-nav{
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    grid-template-areas: "logo menu phone" !important;
    align-items: center !important;

    min-height: 84px !important;
    column-gap: 18px !important;
    padding-left: clamp(10px, 2vw, 26px) !important;
    padding-right: clamp(10px, 2vw, 26px) !important;
  }

  /* LOGO (bliżej środka) */
  header.header #mod-custom119{
    grid-area: logo !important;
    justify-self: end !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* MENU */
  header.header .container-nav > nav.navbar{
    grid-area: menu !important;
    justify-self: center !important;
    width: auto !important;
    display: flex !important;
    justify-content: center !important;
    position: static !important;
    transform: none !important;
    min-width: 0 !important;
  }

  /* TELEFON (bliżej środka) */
  header.header #mod-custom118{
    grid-area: phone !important;
    justify-self: start !important;
    margin: 0 !important;
  }

  /* symetria "ramion" */
  header.header #mod-custom119,
  header.header #mod-custom118{
    min-width: 180px !important;
  }

  /* drobne: logo nie dotyka góry */
  header.header #mod-custom119 img{
    display:block;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  /* menu baseline */
  .metismenu.mod-menu{
    margin-top: 0 !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
  }

  /* density (bazowo) */
  .metismenu.mod-menu .metismenu-item{
    padding: .5em 5px !important;
    line-height: 1.2 !important;
  }

  /* wymuszenie łamania (jak miałeś) */
  .metismenu.mod-menu .metismenu-item{
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 100px !important;
    text-align:center !important;
  }
  .metismenu.mod-menu .metismenu-item > a{
    white-space: normal !important;
    line-height: 1.1 !important;
  }
}

/* Desktop fine-tuning */
@media (min-width: 992px) and (max-width: 1250px){
  #mod-custom119 p a img{
    width: clamp(140px, 16vw, 200px) !important;
  }
  .metismenu.mod-menu .metismenu-item > a{
    padding: 0 0.2em !important;
    font-size: .85rem !important;
  }
}

@media (min-width: 1400px){
  header.header.container-header > .grid-child.container-nav{
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
}

/* =========================================================
   MEGA-MENU (desktop hover devices only)
========================================================= */
@media (min-width: 992px) and (hover:hover) and (pointer:fine){

  header.header #mod-custom118{
    flex: 0 1 auto !important;
    max-width: 40vw !important;
  }
  header.header #mod-custom118 a{
    font-size: clamp(11px, 1vw, 18px) !important;
    white-space: nowrap !important;
  }

  .metismenu > li.item-102 > ul.mm-collapse{
    position: fixed !important;
    top: var(--header-h) !important;
    left:0 !important;
    width:100vw;
    display:flex !important;
    justify-content:center;
    flex-direction:row !important;
    flex-wrap:wrap;
    gap:14px !important;
    padding-top:0 !important;
    margin-top:0 !important;
    background:#fff;
    z-index: var(--z-submenu);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    /* ref: działało u Ciebie po FORCE – zostawiam wolniejsze */
    transition: opacity .6s ease, visibility 0s linear .6s, transform .6s ease !important;
    transform: translateY(8px) !important;
  }

  .metismenu > li.item-102 > ul.mm-collapse::before{
    content:"";
    position:absolute;
    left:0; right:0;
    top:-14px;
    height:14px;
    background:transparent;
  }

  .metismenu > li.item-102:hover > ul.mm-collapse,
  .metismenu > li.item-102:focus-within > ul.mm-collapse,
  .metismenu > li.item-102 > ul.mm-collapse:hover{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform: translateY(0) !important;
    transition: opacity .6s ease, visibility 0s linear 0s, transform .6s ease !important;
  }

  .metismenu > li.item-102 > ul.mm-collapse > li{
    flex: 0 0 var(--submenu-tile-w) !important;
    display:flex !important;
    justify-content:center !important;
  }

  .metismenu > li.item-102 > ul.mm-collapse > li > a{
    width:100% !important;
    min-height: var(--submenu-tile-minh) !important;
    justify-content:center !important;
  }

  .metismenu > li.item-102 > ul.mm-collapse > li > a > img{
    width: var(--submenu-icon) !important;
    height: var(--submenu-icon) !important;
    max-width:none !important;
    object-fit:contain !important;
  }
}

/* =========================================================
   NAV TOGGLER
========================================================= */
.container-header .navbar-toggler{
  color: #fff;
  cursor: pointer;
  border: 0px solid #fff !important;
}

/* Tablet font-size tweak */
@media (min-width: 991px) and (max-width: 1200px){
  header.header.container-header .container-nav a,
  header.header.container-header .container-nav button{
    font-size: 0.7rem !important;
  }
}

/* =========================================
   PRÓG 992–1150 (ciasny desktop)
========================================= */
@media (min-width: 992px) and (max-width: 1150px){

  header.header.container-header > .grid-child.container-nav{
    column-gap: 10px !important;
  }

  .metismenu.mod-menu .metismenu-item{
    margin: 0 3px !important;
  }

  .metismenu.mod-menu .metismenu-item > a{
    padding: 6px 8px !important;
    font-size: 0.75rem !important;
  }

  header.header #mod-custom119,
  header.header #mod-custom118{
    min-width: 190px !important;
  }
}

/* =========================================
   SUPER CIASNY DESKTOP: 992–1050
========================================= */
@media (min-width: 992px) and (max-width: 1050px){

  header.header #mod-custom119,
  header.header #mod-custom118{
    min-width: 150px !important;
  }

  header.header #mod-custom118 a{
    font-size: 0.95rem !important;
    padding-right: 0 !important;
  }

  header.header.container-header > .grid-child.container-nav{
    column-gap: 6px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .metismenu.mod-menu .metismenu-item{
    margin: 0 2px !important;
  }

  .metismenu.mod-menu .metismenu-item > a{
    padding: 5px 6px !important;
    font-size: 0.70rem !important;
    line-height: 1.05 !important;
  }
}

/* =========================================
   FIX: Telefon 992–1200 = 1rem i bez skali
========================================= */
@media (min-width: 992px) and (max-width: 1200px){
  header.header #mod-custom118{ transform: none !important; }
  header.header #mod-custom118 a{
    font-size: 1rem !important;
    white-space: nowrap !important;
  }
  header.header #mod-custom118 a img{
    width: 18px !important;
    height: auto !important;
  }
}

/* =========================================================
   FOOTER (ARKOM STOPKA)
========================================================= */
#arkom-stopka{ width:100%; background:#f5f5f5; }

#arkom-stopka-inner{
  max-width:1200px;
  margin:0 auto;
  padding:50px 20px 40px;
  text-align:center;
}

#arkom-stopka-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:40px;
  flex-wrap:wrap;
  margin-bottom:35px;
}

#arkom-stopka-row a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.arkom-badge{
  max-height:70px;
  width:auto;
  transition: transform .3s ease;
}

.arkom-icon{
  max-height:45px;
  width:auto;
  transition: transform .3s ease;
}

.arkom-badge:hover,
.arkom-icon:hover{ transform: scale(1.08); }

#arkom-10lat{
  max-width:50%;
  width:100%;
  height:auto;
  margin:0 auto;
  display:block;
}

#arkom-stopka-bottom{
  background-color: #000;
  color:#fff;
  text-align:center;
  padding: 18px 15px;
  font-size:14px;
  letter-spacing:.5px;
}

@media (max-width: 768px){
  #arkom-stopka-inner{ padding:40px 15px 30px; }
  #arkom-stopka-row{ gap:25px; }
  .arkom-badge{ max-height:60px; }
  .arkom-icon{ max-height:38px; }
  #arkom-10lat{ max-width:160px; }
  #arkom-stopka-bottom{ font-size:13px; padding:15px; }
}

@media (max-width: 480px){
  #arkom-stopka-row{ gap:18px; }
  .arkom-badge{ max-height:50px; }
  .arkom-icon{ max-height:32px; }
  #arkom-10lat{ max-width:130px; }
}

/* =========================================================
   HOVER ANIMATIONS (final) – jedna wersja
========================================================= */

/* TOP MENU */
header.header .metismenu.mod-menu .metismenu-item > a,
header.header .metismenu.mod-menu .metismenu-item > button{
  transition: color .6s ease, background-color .6s ease, transform .6s ease !important;
  text-transform: capitalize !important;
}

/* SUBMENU kafelki */
header.header .metismenu.mod-menu .mm-collapse > li > a{
  transition: transform .6s ease, box-shadow .6s ease, background-color .6s ease !important;
  transform: translateZ(0) !important;
  will-change: transform;
}

/* SUBMENU ikonki */
header.header .metismenu.mod-menu .mm-collapse > li > a > img{
  transition: transform .6s ease, filter .6s ease !important;
  transform: translateZ(0) !important;
  will-change: transform;
}

/* SUBMENU title */
header.header .metismenu .mm-collapse > li > a .image-title{
  transition: color .6s ease !important;
}

/* hover effects */
header.header .metismenu.mod-menu .mm-collapse > li > a:hover{
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 18px rgba(0,0,0,.15) !important;
}

header.header .metismenu.mod-menu .mm-collapse > li > a:hover > img{
  transform: scale(1.08) !important;
}

header.header .metismenu .mm-collapse > li > a:hover .image-title{
  color: var(--nav-hover-link) !important;
}

/* Mobile: hover nie istnieje -> feedback na touch */
@media (max-width: 991.98px){
  header.header .metismenu li > a:active,
  header.header .metismenu li > a:focus{
    background: rgba(255,255,255,.12) !important;
  }
  header.header .metismenu.mod-menu .mm-collapse > li > a:hover{
    transform: translateY(-1px) !important;
  }
}

@media (min-width: 992px){
  header.header #mod-custom118{
    transform: none !important;         
  }

  header.header #mod-custom118 a{
    font-size: 1.2rem !important;       
    gap: 10px !important;
  }

  header.header #mod-custom118 a img,
  header.header #mod-custom118 img,
  header.header #mod-custom118 svg{
    width: 24px !important;             
    height: 24px !important;
  }
}

@media (min-width: 992px){
  header.header #mod-custom118 a{
    font-size: 1.2rem !important;
  }
}