:root{ --mp-promien:12px; }   /* wspólny promień narożników — jak przy zdjęciach produktów */

#mp-hero *{box-sizing:border-box}
  /* wyjście poza kolumnę Elementora — sekcja na całą szerokość okna.
   --mp-pasek to szerokość paska przewijania, liczona w hero.js;
   bez tego 100vw powoduje poziomy suwak na Windowsie. */
#mp-hero{
  position:relative;
  left:50%;
  width:calc(100vw - var(--mp-pasek, 0px));
  max-width:calc(100vw - var(--mp-pasek, 0px));
  margin-left:calc((100vw - var(--mp-pasek, 0px)) / -2);
  margin-right:calc((100vw - var(--mp-pasek, 0px)) / -2);
    --czern:#141210;
    --zloty:#BFA08E;
    --zloty-jasny:#D1BAA9;
    --tekst:#6C6866;
    --biel:#FFFFFF;
    --display:'Outfit',ui-sans-serif,system-ui,sans-serif;
    --body:'DM Sans',ui-sans-serif,system-ui,sans-serif;
    font-family:var(--body);color:var(--tekst);background:var(--biel);line-height:1.6;
  }
  #mp-hero a{text-decoration:none;color:inherit}
  #mp-hero :focus-visible{outline:2px solid var(--zloty);outline-offset:3px}

    
            
  /* --- slider pełnej szerokości --- */
  /* dwie kolumny, twarda pionowa krawędź — bez gradientu i nakładki */
  /* dwa bloki obok siebie, rozdzielone białą szczeliną — jak kafle w reszcie strony */
  .slider{position:relative;display:grid;grid-template-columns:42% 58%;
    gap:10px;padding:10px;height:min(640px,78vh);background:var(--biel)}
  .panel, .kadr{border-radius:var(--mp-promien,12px);overflow:hidden}
  .kadr{position:relative;background:var(--czern)}
  .slider img{position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center;   /* kadrowanie, nigdy rozciąganie */
    opacity:0;transition:opacity 1s ease}
  .slider img.widoczne{opacity:1}
  /* pole z treścią: pełny kolor, ostra ukośna krawędź zamiast rozmycia */
  .panel{background:var(--czern);display:flex;align-items:center}

  .tresc{padding:48px 52px;width:100%}
  .kolumna{max-width:34rem;margin-left:auto}

  /* przełącznik nad treścią */
  .przelacznik{display:inline-flex;gap:4px;padding:4px;border:1px solid rgba(191,160,142,.4);
    border-radius:999px;background:transparent;margin-bottom:26px}
  .przelacznik button{border:none;background:transparent;border-radius:999px;padding:9px 18px;cursor:pointer;
    font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.04em;color:rgba(255,255,255,.72);
    transition:all .22s ease;white-space:nowrap}
  .przelacznik button[aria-selected="true"]{background:var(--zloty);color:var(--czern)}
  .przelacznik button:hover[aria-selected="false"]{color:var(--biel)}

  .eyebrow{font-family:var(--display);font-size:11px;font-weight:500;letter-spacing:.22em;
    text-transform:uppercase;color:var(--zloty);margin-bottom:16px}
  .slider h1{font-family:var(--display);font-weight:300;letter-spacing:-.025em;color:var(--biel);
    font-size:clamp(30px,3.6vw,50px);line-height:1.05;margin:0 0 18px}
  .slider .opis{margin:0;font-size:16.5px;max-width:36ch;color:rgba(255,255,255,.8)}

  .dowod{display:flex;gap:34px;margin-top:32px;flex-wrap:wrap}
  .dowod b{display:block;font-family:var(--display);font-weight:400;font-size:26px;
    color:var(--biel);line-height:1.1;letter-spacing:-.02em}
  .dowod span{font-size:12.5px;color:var(--zloty)}

  .przyciski{display:flex;gap:12px;align-items:center;margin-top:34px;flex-wrap:wrap}
  .btn, .link{display:inline-flex;align-items:center;justify-content:center;gap:9px;
    border-radius:999px;padding:15px 28px;font-family:var(--display);font-weight:600;
    font-size:15px;letter-spacing:.01em;cursor:pointer;transition:all .22s ease;white-space:nowrap}
  /* główny: czerń na jasnym polu — najmocniejszy kontrast */
  /* kolor podany z wagą identyfikatora — inaczej wygrywa reguła #mp-hero a{color:inherit} */
  #mp-hero .btn{background:var(--zloty);color:var(--czern);border:1px solid var(--zloty)}
  #mp-hero .btn:hover{background:var(--biel);color:var(--czern);border-color:var(--biel)}
  #mp-hero .link{background:transparent;color:var(--biel);border:1px solid rgba(255,255,255,.55)}
  #mp-hero .link:hover{background:var(--biel);color:var(--czern);border-color:var(--biel)}

  .kropki{position:absolute;left:24px;bottom:22px;z-index:3;display:flex;gap:7px}
  .kropki button{width:7px;height:7px;padding:0;border:none;border-radius:50%;cursor:pointer;
    background:rgba(255,255,255,.75);transition:all .3s ease;box-shadow:0 1px 4px rgba(20,18,16,.3)}
  .kropki button[aria-current="true"]{background:var(--biel);width:24px;border-radius:999px}

      
  @media(max-width:900px){
    .slider{grid-template-columns:1fr;height:auto;gap:10px;padding:10px}
    .kadr{height:300px}
    .tresc{padding:30px 22px 36px}
    .kolumna{margin-left:0}

            .kropki{left:18px;bottom:14px}
      }
  @media (prefers-reduced-motion: reduce){#mp-hero *{transition:none !important}}

/* --------------------------------------------------------------
   Motyw (Astra) koloruje wszystkie przyciski na hoverze i focusie.
   Poniżej wymuszamy własne kolory dla każdego stanu — inaczej
   przełącznik i przyciski dostają barwę spoza palety.
-------------------------------------------------------------- */
#mp-hero button,
#mp-hero .btn,
#mp-hero .link{
  box-shadow:none !important;
  text-decoration:none !important;
}

/* przełącznik firmy / indywidualne */
#mp-hero .przelacznik button,
#mp-hero .przelacznik button:hover,
#mp-hero .przelacznik button:focus,
#mp-hero .przelacznik button:active{
  background:transparent !important;
  color:rgba(255,255,255,.72) !important;
  border:none !important;
  outline:none;
}
#mp-hero .przelacznik button:hover{ color:#FFFFFF !important; }
#mp-hero .przelacznik button[aria-selected="true"],
#mp-hero .przelacznik button[aria-selected="true"]:hover,
#mp-hero .przelacznik button[aria-selected="true"]:focus{
  background:#BFA08E !important;
  color:#141210 !important;
}
#mp-hero .przelacznik button:focus-visible{ outline:2px solid #BFA08E; outline-offset:2px; }

/* przycisk główny — złoty z czarnym napisem */
#mp-hero .btn,
#mp-hero .btn:focus{
  background:#BFA08E !important;
  color:#141210 !important;
  border-color:#BFA08E !important;
}
#mp-hero .btn:hover,
#mp-hero .btn:active{
  background:#FFFFFF !important;
  color:#141210 !important;
  border-color:#FFFFFF !important;
}

/* przycisk drugi — biały obrys, biały napis */
#mp-hero .link,
#mp-hero .link:focus{
  background:transparent !important;
  color:#FFFFFF !important;
  border-color:rgba(255,255,255,.55) !important;
}
#mp-hero .link:hover,
#mp-hero .link:active{
  background:#FFFFFF !important;
  color:#141210 !important;
  border-color:#FFFFFF !important;
}

/* kropki slidera */
#mp-hero .kropki button,
#mp-hero .kropki button:hover,
#mp-hero .kropki button:focus{
  background:rgba(255,255,255,.75) !important;
  border:none !important;
}
#mp-hero .kropki button[aria-current="true"],
#mp-hero .kropki button[aria-current="true"]:hover{
  background:#FFFFFF !important;
}