/* um-globalne-1.css - warstwa wspolna dla calej witryny.
   1. Tlo strony rowne tokenowi projektu (#04030a). Astra ustawia czern
      (#000000), a stopka i sekcje projektu maluja #04030a, przez co na
      styku widac ostra krawedz. Jeden kolor = brak szwu. */
html body{background-color:#04030a !important}

/* 2. Miekkie przejscie nad stopka, zeby poswiata nie zaczynala sie
      nagle na jej gornej krawedzi. */
.um-ft{position:relative}
.um-ft::before{content:"";position:absolute;left:0;right:0;top:-160px;height:160px;
  pointer-events:none;
  background:radial-gradient(120% 160px at 50% 100%,color-mix(in srgb,#a100ff 7%,transparent) 0%,transparent 75%)}

/* ---- um-naglowek: naglowek Astry ubrany w jezyk projektu ----
   Zostawiamy caly mechanizm Astry (koszyk, logowanie, menu mobilne,
   podmenu), zmieniamy tylko warstwe wizualna, zeby pasek wygladal jak
   nav z projektu. Kroje zgodne z projektem: naglowki Plus Jakarta Sans,
   tekst i nawigacja Montserrat. */
:root{
  --um-ink:#ffffff;
  --um-ink1:#E7F6FF;
  --um-ink2:color-mix(in srgb,#E6EDF5 74%,transparent);
  --um-ink3:color-mix(in srgb,#E6EDF5 48%,transparent);
  --um-line:color-mix(in srgb,#E7F6FF 12%,transparent);
  --um-glass:color-mix(in srgb,#E7F6FF 4.5%,transparent);
  --um-acc:#a100ff;
  --um-cta:#7A0010;
  --um-cta-deep:color-mix(in srgb,#7A0010 66%,#000);
  --um-ez:cubic-bezier(.16,1,.3,1);
  --um-hdr:80px;
}

/* pasek nad trescia, jak w projekcie: bez twardej krawedzi, tylko
   gradient, ktory po przewinieciu zamienia sie w szklo */
#masthead{position:fixed;top:0;left:0;right:0;z-index:100;
  background:linear-gradient(180deg,color-mix(in srgb,#04030a 68%,transparent) 0%,
    color-mix(in srgb,#04030a 24%,transparent) 62%,transparent 100%);
  transition:background .45s var(--um-ez),box-shadow .45s var(--um-ez),
    -webkit-backdrop-filter .45s var(--um-ez),backdrop-filter .45s var(--um-ez)}
#masthead .ast-main-header-wrap,
#masthead .ast-primary-header-bar,
#masthead .ast-mobile-header-wrap,
#masthead .site-primary-header-wrap{background:transparent;border:0}
html.um-stuck #masthead{
  background:color-mix(in srgb,#04030a 86%,transparent);
  -webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);
  box-shadow:0 18px 40px -30px #000}
body.admin-bar #masthead{top:32px}
@media(max-width:782px){body.admin-bar #masthead{top:46px}}
/* strony bez wlasnego hero dostaja miejsce na pasek; strony z projektem
   maja wysoki padding w pierwszej sekcji i pasek ma po nich plynac */
body:not(.um-projekt){padding-top:var(--um-hdr)}

/* marka: znaczek + logotyp, tak jak w projekcie */
.site-branding .site-logo-img{display:flex;align-items:center;gap:.55rem}
.site-branding .site-logo-img::before{content:"";width:40px;height:40px;flex:none;
  background:url(https://ultimatemove.eu/wp-content/uploads/2026/07/Favicon512-a.png) center/contain no-repeat;
  filter:drop-shadow(0 6px 18px color-mix(in srgb,var(--um-acc) 55%,transparent));
  transition:transform .7s var(--um-ez)}
.site-branding .site-logo-img:hover::before{transform:scale(1.09)}
.site-header .custom-logo{max-height:46px;width:auto}
@media(max-width:640px){
  .site-header .custom-logo{display:none}
  .site-branding .site-logo-img::before{width:36px;height:36px}
}

/* grupa linkow jako pigulka, jak w projekcie. Tylko menu glowne na
   desktopie: menu jezykowe i menu mobilne maja wlasny wyglad. */
#ast-desktop-header .ast-builder-menu-1 .main-header-menu{
  gap:.25rem;padding:.3rem;
  border:1px solid var(--um-line);border-radius:99px;
  background:var(--um-glass);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}
#ast-desktop-header .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link{
  font-family:Montserrat,system-ui,sans-serif;
  font-weight:600;font-size:.92rem;line-height:1.2;letter-spacing:0;
  color:var(--um-ink2);
  padding:.55rem 1.05rem;border-radius:99px;
  transition:color .25s var(--um-ez),background-color .3s var(--um-ez);
}
#ast-desktop-header .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link:hover,
#ast-desktop-header .ast-builder-menu-1 .main-header-menu > .menu-item:focus-within > .menu-link,
#ast-desktop-header .ast-builder-menu-1 .main-header-menu > .current-menu-item > .menu-link,
#ast-desktop-header .ast-builder-menu-1 .main-header-menu > .current-menu-ancestor > .menu-link{
  color:var(--um-ink1);
  background:color-mix(in srgb,#ffffff 10%,transparent);
}

/* podmenu w tej samej konwencji */
.ast-builder-menu .sub-menu{
  border:1px solid var(--um-line);border-radius:16px;
  background:color-mix(in srgb,#04030a 92%,transparent);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  padding:.35rem;box-shadow:0 24px 60px -34px #000;
}
.ast-builder-menu .sub-menu .menu-link{
  font-family:Montserrat,system-ui,sans-serif;
  font-weight:500;font-size:.88rem;color:var(--um-ink2);
  border-radius:11px;padding:.5rem .8rem;
  transition:color .25s var(--um-ez),background-color .3s var(--um-ez);
}
.ast-builder-menu .sub-menu .menu-link:hover{
  color:var(--um-ink1);background:color-mix(in srgb,#ffffff 8%,transparent);
}

/* konto: pigulka z ikona osoby, jak w projekcie */
.ast-header-account-wrap .ast-header-account-link{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid var(--um-line);border-radius:99px;
  color:var(--um-ink1);
  font-family:Montserrat,system-ui,sans-serif;
  font-weight:600;font-size:.86rem;padding:.55rem .95rem;
  transition:border-color .4s var(--um-ez),color .4s var(--um-ez),transform .4s var(--um-ez),
    box-shadow .5s var(--um-ez);
}
.ast-header-account-wrap .ast-header-account-link::before{
  content:"";width:17px;height:17px;flex:none;background:currentColor;opacity:.78;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.9" stroke-linecap="round"><circle cx="12" cy="8" r="3.6"/><path d="M4.6 20a7.4 7.4 0 0 1 14.8 0"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.9" stroke-linecap="round"><circle cx="12" cy="8" r="3.6"/><path d="M4.6 20a7.4 7.4 0 0 1 14.8 0"/></svg>') center/contain no-repeat;
}
.ast-header-account-wrap .ast-header-account-link:hover{
  border-color:color-mix(in srgb,var(--um-acc) 46%,transparent);
  color:var(--um-ink);transform:scale(1.03);
  box-shadow:0 16px 44px -26px color-mix(in srgb,var(--um-acc) 75%,transparent);
}

/* przelacznik jezyka: w projekcie to maly monospace PL/EN w ramce,
   a nie flaga. Link nadal prowadzi do drugiej wersji jezykowej. */
#ast-desktop-header .ast-builder-menu-2 .main-header-menu{
  gap:0;padding:0;border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.trp-menu-ls-item .trp-flag-image{display:none}
.trp-menu-ls-item > .menu-link{
  display:inline-flex;align-items:center;
  font-family:Consolas,ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.74rem;font-weight:600;color:var(--um-ink3);
  border:1px solid var(--um-line);border-radius:8px;padding:.42rem .6rem;
  transition:border-color .4s var(--um-ez),color .4s var(--um-ez)}
.trp-menu-ls-item > .menu-link:hover{
  border-color:color-mix(in srgb,var(--um-acc) 40%,transparent);color:var(--um-ink1)}
html[lang^="pl"] .trp-menu-ls-item > .menu-link::before{content:"PL";color:var(--um-ink);font-weight:700}
html[lang^="pl"] .trp-menu-ls-item > .menu-link::after{content:"/EN"}
html[lang^="en"] .trp-menu-ls-item > .menu-link::before{content:"EN";color:var(--um-ink);font-weight:700}
html[lang^="en"] .trp-menu-ls-item > .menu-link::after{content:"/PL"}

/* ikona koszyka w kolorze tekstu projektu, ksztaltu nie ruszamy */
.ast-site-header-cart .astra-icon{color:var(--um-ink1)}
.ast-site-header-cart .cart-container:hover .astra-icon{color:var(--um-ink)}

/* przycisk akcji w naglowku, ten sam co w projekcie (.b) */
.um-hb{position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.7rem 1.25rem;border-radius:12px;
  font-family:Montserrat,system-ui,sans-serif;
  font-weight:700;font-size:.9rem;letter-spacing:-.012em;color:#fff;
  background:linear-gradient(120deg,var(--um-cta) 0%,var(--um-cta-deep) 55%,var(--um-cta) 100%);
  background-size:220% 100%;
  box-shadow:0 10px 28px -14px color-mix(in srgb,var(--um-cta) 92%,transparent),
             0 20px 60px -26px color-mix(in srgb,var(--um-acc) 85%,transparent),
             inset 0 1px 0 rgba(255,255,255,.22);
  transition:background-position 1.1s var(--um-ez),transform .32s var(--um-ez),box-shadow .5s var(--um-ez)}
.um-hb:hover{background-position:100% 0;transform:scale(1.022);color:#fff;
  box-shadow:0 14px 40px -16px color-mix(in srgb,var(--um-cta) 85%,transparent),
             0 30px 90px -36px color-mix(in srgb,var(--um-acc) 70%,transparent),
             inset 0 1px 0 rgba(255,255,255,.26)}
.um-hb:active{transform:scale(.986)}
.um-hb .arw{transition:transform .35s var(--um-ez)}
.um-hb:hover .arw{transform:translateX(4px)}
@media(max-width:1180px){.um-hb{padding:.62rem .95rem;font-size:.85rem}}

/* odstepy w prawej czesci paska jak w projekcie */
#ast-desktop-header .site-header-primary-section-right{gap:.6rem}

/* pasek ma zostac jednym rzedem: logo w rozsadnej szerokosci,
   linki bez lamania, prawa strona nieskurczalna */
.site-header .custom-logo{max-width:230px;object-fit:contain}
#ast-desktop-header .ast-builder-menu-1 .main-header-menu{flex-wrap:nowrap}
#ast-desktop-header .main-header-menu > .menu-item > .menu-link{white-space:nowrap}
#ast-desktop-header .site-header-primary-section-right{flex:0 0 auto;flex-wrap:nowrap;white-space:nowrap}
#ast-desktop-header .site-header-primary-section-right .ast-builder-layout-element,
#ast-desktop-header .site-header-primary-section-right .ast-builder-menu{flex:none}
.ast-header-account-wrap .ast-header-account-link{white-space:nowrap}
@media(max-width:1360px){
  #ast-desktop-header .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link{padding:.5rem .72rem;font-size:.86rem}
}

/* wysokosc paska jak w projekcie: sam odstep pionowy, bez wypelnien Astry */
#ast-desktop-header .ast-primary-header-bar{padding-block:.85rem}
#ast-desktop-header .site-branding,
#ast-desktop-header .ast-site-identity{padding:0}
#ast-desktop-header .site-header-primary-section-left .ast-builder-layout-element{padding-block:0}
/* flaga ustepuje miejsca napisowi PL/EN */
.trp-menu-ls-item .trp-flag-image{display:none !important}
.trp-menu-ls-item .trp-menu-ls-label{display:none}

/* sekcje paska w jednej linii bazowej, bez rozciagania na cala wysokosc */
#ast-desktop-header .ast-builder-grid-row,
#ast-desktop-header .site-header-section,
#ast-desktop-header .ast-builder-layout-element{align-items:center}
#ast-desktop-header .trp-menu-ls-item > .menu-link,
#ast-desktop-header .ast-site-header-cart .cart-container,
#ast-desktop-header .ast-site-header-cart .ast-site-header-cart-li{height:auto;line-height:1}
#ast-desktop-header .ast-site-header-cart .ast-site-header-cart-li{display:flex;align-items:center}

/* Kontakt zostaje w menu mobilnym i w stopce; w pasku na gorze jest
   szesc pozycji, tak jak w projekcie. Powrot to skasowanie tej reguly. */
#ast-desktop-header .menu-item-787{display:none}

@media(max-width:1440px){
  #ast-desktop-header .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link{padding:.5rem .78rem;font-size:.88rem}
}
@media(max-width:1240px){
  #ast-desktop-header .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link{padding:.46rem .6rem;font-size:.84rem}
  .site-header .custom-logo{max-width:170px}
}

/* wysokosc paska ustala jego zawartosc, a nie ustawienie motywu */
#ast-desktop-header .site-primary-header-wrap,
#ast-desktop-header .ast-builder-grid-row,
#ast-desktop-header .site-header-section,
#ast-desktop-header .ast-builder-layout-element{min-height:0}

/* przycisk w slocie HTML naglowka: wpautop opakowuje go w akapit */
.ast-header-html .ast-builder-html-element p{margin:0;line-height:1}
.ast-header-html .ast-builder-html-element{display:flex;align-items:center}
#ast-desktop-header .ast-header-html-1{margin-left:.2rem}
/* Ponizej 1400 px pasek nie pomiesci przycisku obok logotypu, menu i
   konta. Logotyp zostaje, przycisk znika, bo strony maja wlasne CTA. */
@media(max-width:1470px){#ast-desktop-header .ast-header-html-1{display:none}}

/* rozwiniete menu mobilne mieszci sie w przyklejonym pasku i scrolluje,
   zamiast wychodzic poza ekran. Na desktopie zostawiamy overflow widoczny,
   bo inaczej ucielibysmy podmenu. */
body.ast-header-break-point #masthead{max-height:100vh;overflow-y:auto;overscroll-behavior:contain}
@supports (height:100dvh){body.ast-header-break-point #masthead{max-height:100dvh}}

/* ikona osoby tylko wtedy, gdy Astra rysuje sam tekst. Zalogowanemu
   uzytkownikowi motyw dokłada wlasna ikone i mielismy dwie. */
.ast-header-account-wrap .ast-header-account-link::before{content:none}
.ast-header-account-wrap .ast-header-account-link.ast-header-account-type-text::before{
  content:"";width:17px;height:17px;flex:none;background:currentColor;opacity:.78;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.9" stroke-linecap="round"><circle cx="12" cy="8" r="3.6"/><path d="M4.6 20a7.4 7.4 0 0 1 14.8 0"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.9" stroke-linecap="round"><circle cx="12" cy="8" r="3.6"/><path d="M4.6 20a7.4 7.4 0 0 1 14.8 0"/></svg>') center/contain no-repeat}
.ast-header-account-wrap .ast-header-account-link .ast-header-account-type-avatar img,
.ast-header-account-wrap .ast-header-account-link svg{width:17px;height:17px}

/* koszyk jako okragly przycisk w tej samej rodzinie co konto.
   Ikona byla display:inline w stodwudziestopikselowym wierszu, wiec
   plakietka z liczba odlatywala na sam gorny brzeg paska. */
#ast-desktop-header .ast-site-header-cart .cart-container{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;padding:0;border-radius:99px;
  border:1px solid var(--um-line);
  transition:border-color .4s var(--um-ez),transform .4s var(--um-ez),box-shadow .5s var(--um-ez)}
#ast-desktop-header .ast-site-header-cart .cart-container:hover{
  border-color:color-mix(in srgb,var(--um-acc) 46%,transparent);transform:scale(1.03);
  box-shadow:0 16px 44px -26px color-mix(in srgb,var(--um-acc) 75%,transparent)}
#ast-desktop-header .ast-addon-cart-wrap{display:flex;align-items:center;position:relative;padding:0}
#ast-desktop-header .astra-icon.ast-icon-shopping-cart{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;line-height:1}
#ast-desktop-header .astra-icon.ast-icon-shopping-cart::after{
  top:-9px;right:-11px;left:auto;line-height:18px}
/* pusty koszyk nie potrzebuje plakietki */
#ast-desktop-header .astra-icon.ast-icon-shopping-cart[data-cart-total="0"]::after{display:none}

/* Plik logotypu ma szerokie przezroczyste marginesy: sam napis zajmuje
   niecala czwarta czesc wysokosci. Przy 46 px napis mial 11 px i ginal.
   Skalujemy obrazek i sciagamy go ujemnym marginesem, wiec wiersz paska
   dalej ma 46 px, a napis czytelne 24 px. */
.site-header .custom-logo{height:104px;width:auto;max-height:none;max-width:none;
  margin-block:-29px;object-fit:contain}
@media(max-width:1240px){.site-header .custom-logo{height:88px;margin-block:-21px}}
@media(max-width:640px){.site-header .custom-logo{display:none}}

/* podmenu wysrodkowane pod pozycja, a nie przyklejone do jej lewej krawedzi */
#ast-desktop-header .ast-builder-menu-1 .main-header-menu > .menu-item-has-children > .sub-menu{
  left:50%;margin-left:0;transform:translateX(-50%);min-width:14rem}
#ast-desktop-header .ast-builder-menu-1 .main-header-menu > .menu-item-has-children:hover > .sub-menu,
#ast-desktop-header .ast-builder-menu-1 .main-header-menu > .menu-item-has-children:focus-within > .sub-menu{
  transform:translateX(-50%)}

/* Logotyp ma tez przezroczyste marginesy po bokach, wiec odzyskujemy je
   ujemnym marginesem: pasek zyskuje szescdziesiat pikselow na tresc. */
.site-header .custom-logo{margin-inline:-32px}
@media(max-width:1240px){.site-header .custom-logo{margin-inline:-27px}}

/* Ponizej 1600 px pasek robi sie ciasny, wiec pigulka menu chudnie */
@media(max-width:1600px){
  #ast-desktop-header .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link{padding:.5rem .78rem;font-size:.88rem}
  #ast-desktop-header .site-header-primary-section-right{gap:.45rem}
}
@media(max-width:1400px){
  #ast-desktop-header .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link{padding:.46rem .62rem;font-size:.84rem}
  .um-hb{padding:.6rem .9rem;font-size:.84rem}
}

/* Ponizej 1560 px konto zwija sie do samej ikony, zeby przycisk akcji
   zmiescil sie w pasku. Powyzej wraca z etykieta, jak w projekcie. */
@media(max-width:1560px){
  .ast-header-account-wrap .ast-header-account-link{width:42px;height:42px;padding:0;justify-content:center}
  .ast-header-account-wrap .ast-header-account-link .ast-header-account-text{display:none}
  .ast-header-account-wrap .ast-header-account-link.ast-header-account-type-text::before{width:19px;height:19px}
}

/* pasek nieco grubszy, blizej proporcji z projektu (logo 52 px + odstepy) */
#ast-desktop-header .ast-primary-header-bar{padding-block:1.05rem}
.site-header .custom-logo{height:118px;margin-block:-33px}
@media(max-width:1240px){.site-header .custom-logo{height:100px;margin-block:-25px}}
.site-branding .site-logo-img::before{width:46px;height:46px}
@media(max-width:640px){.site-branding .site-logo-img::before{width:38px;height:38px}}

/* grubszy pasek zabral kilka pikseli w prawej czesci: logotyp ma szerokie
   puste boki, wiec sciagamy je mocniej i przycisk znowu sie miesci */
.site-header .custom-logo{margin-inline:-38px}
@media(max-width:1240px){.site-header .custom-logo{margin-inline:-32px}}
@media(max-width:1540px){#ast-desktop-header .ast-header-html-1{display:none}}

/* Narzedzia Deadlock siedzialy na fiolkowej czerni color-mix(#a100ff 7%,
   #04030a), a strona, panele boczne i stopka na czystym #04030a. Na styku
   widac bylo prostokat. Panele dostaja przezroczyste szklo projektu, wiec
   siadaja na tym samym tle, a caly blok konczy sie miekkim wygaszeniem
   zamiast krawedzia. */
.um-dl-wrap{--um-dl-bg:transparent;--um-dl-bg2:color-mix(in srgb,#E7F6FF 4%,transparent)}
.um-dl-wrap .um-dl-seo-content,
.um-dl-wrap .um-dl-rank-dist-section,
.um-dl-wrap .um-dl-lb-panel{
  background:var(--um-dl-bg2);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.um-dl-wrap::after{content:"";position:absolute;left:50%;translate:-50% 0;bottom:-180px;
  width:min(130%,1500px);height:260px;pointer-events:none;z-index:0;
  background:radial-gradient(58% 100% at 50% 0%,color-mix(in srgb,#a100ff 8%,transparent) 0%,transparent 74%)}
.um-dl-wrap > *{position:relative;z-index:1}