/* ==========================================================================
   MOTYW KOSARI 1.2.0 - wyglad NOWOCZESNY naglowka i stopki (Customizer: Naglowek i stopka -> Wyglad).
   Laduje sie tylko przy mk_uklad_styl = nowoczesny. Bialy pasek, menu zwyklymi literami, podmenu jako karty
   (ikona z klasy mk-ikona-<kod>, opis z pola „Opis” pozycji, mk-wyrozniony = karta w kolorze marki),
   przycisk z Customizera, szuflada z boku na telefonie, ciemna stopka w trzech kolumnach i pasek na dole.
   Wzor: dawny naglowek z Elementora na grzegorzrowinski.pl (Kosa: „wczesniej byl zajebiscie zrobiony”).
   Kolory z Customizera: --brand (przycisk), --brand-light (akcent), --dark (stopka), --text, --bg-soft.
   ========================================================================== */

.hc-top--nowy {
  --hn-txt: var(--text, #1a1a1a);
  --hn-akcent: var(--brand-light, #22c55e);
  --hn-przycisk: var(--brand, #15803d);
  --hn-przycisk-hover: color-mix(in srgb, var(--brand, #15803d) 80%, #000);
  --hn-szary: var(--bg-soft, #f6f8f7);
  --hn-jasny-akcent: color-mix(in srgb, var(--hn-akcent) 10%, #fff);
  background: #fff;
  box-shadow: 0 2px 15px rgba(0, 0, 0, .08);
  font-family: var(--hc-sans);
}
.hc-top--nowy.is-scrolled { margin-bottom: 0; box-shadow: 0 4px 20px rgba(0, 0, 0, .1); }
.hc-top--nowy .hc-wrap { max-width: 1400px; padding-left: 30px; padding-right: 30px; }
.hc-top--nowy .hc-top__in,
.hc-top--nowy.is-scrolled .hc-top__in { min-height: 80px; gap: 20px; }
.hc-top--nowy .hc-top__logo img,
.hc-top--nowy.is-scrolled .hc-top__logo img { display: block; width: auto; height: 45px; }
.hc-top--nowy .hc-top__logo--tekst { font-family: var(--font-head); font-size: 24px; font-weight: 700; color: var(--hn-txt); }

/* menu: zwykle litery, bez zlotej kreski, wysrodkowane */
@media (min-width: 961px) { .hc-top--nowy .hc-top__nav { flex: 1; display: flex; justify-content: center; } }
.hc-top--nowy .hc-top__nav .kwt-nav-list { gap: 25px; }
.hc-top--nowy .hc-top__nav a { padding: 10px 0; font-family: var(--hc-sans); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--hn-txt); }
.hc-top--nowy .hc-top__nav a::after { display: none; }
.hc-top--nowy .hc-top__nav a:hover,
.hc-top--nowy .hc-top__nav .current-menu-item > a { color: var(--hn-przycisk); }
/* tekst na bialym: --brand (ciemniejszy) zamiast --brand-light - kontrast >= 4.5 (kontrast.js 19.10: #22c55e na bialym = 2.28) */
.hc-top--nowy .hc-top__nav a:hover { color: var(--hn-przycisk); }
.hc-top--nowy .hc-top__nav .menu-item-has-children > a { padding-right: 18px; }
.hc-top--nowy .hc-top__nav .menu-item-has-children > a::before { right: 2px; border-width: 0 1.5px 1.5px 0; }

/* podmenu = karty z ikona i opisem */
.hc-top--nowy .hc-top__nav .sub-menu { top: calc(100% + 15px); left: 0; min-width: 320px; padding: 10px; border-top: 0; border-radius: 12px; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .15); }
.hc-top--nowy .hc-top__nav .sub-menu::before { top: -16px; height: 16px; }
.hc-top--nowy .hc-top__nav .sub-menu li + li { margin-top: 2px; }
.hc-top--nowy .hc-top__nav .sub-menu a { display: flex; align-items: center; gap: 15px; padding: 12px 15px; border: 2px solid transparent; border-radius: 8px; font-size: 15px; font-weight: 600; letter-spacing: 0; white-space: normal; color: var(--hn-txt); transition: background-color .25s, transform .25s; }
.hc-top--nowy .hc-top__nav .sub-menu a:hover { color: var(--hn-txt); background: var(--hn-jasny-akcent); transform: translateX(5px); }
.hc-top--nowy .hc-top__nav .sub-menu .mk-wyrozniony > a { background: linear-gradient(135deg, var(--hn-jasny-akcent) 0%, color-mix(in srgb, var(--hn-akcent) 22%, #fff) 100%); border-color: var(--hn-akcent); }
.hc-menu__ikona { flex: none; width: 34px; font-size: 28px; line-height: 1; text-align: center; }
.hc-menu__tekst { display: flex; flex-direction: column; gap: 3px; }
.hc-menu__tyt { display: block; }
.hc-menu__opis { display: block; font-size: 12.5px; font-weight: 400; line-height: 1.35; color: var(--text-light, #666); }

/* prawa strona: dodatek (jezyk), konto, koszyk w kafelku, przycisk */
.hc-top--nowy .hc-top__ikony { gap: 12px; }
.hc-top--nowy .hc-dodatek { display: flex; align-items: center; font-size: 15px; }
.hc-top--nowy .hc-top__ikony .kh-acc { margin-left: 0; }
.hc-top--nowy .hc-koszyk { width: 50px; height: 50px; border-radius: 12px; background: var(--hn-szary); border: 2px solid transparent; color: var(--hn-txt); transition: background-color .25s, border-color .25s, transform .25s; }
.hc-top--nowy .hc-koszyk:hover { background: var(--hn-jasny-akcent); border-color: var(--hn-akcent); color: var(--hn-txt); transform: translateY(-2px); }
.hc-top--nowy .kw-cart-count { top: -4px; right: -4px; background: var(--hn-przycisk); color: #fff; }
.hc .hc-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 10px; background: var(--hn-przycisk, var(--brand)); color: #fff; font-family: var(--hc-sans); font-size: 16px; font-weight: 700; line-height: 1.2; white-space: nowrap; box-shadow: 0 6px 20px color-mix(in srgb, var(--hn-przycisk, var(--brand)) 28%, transparent); transition: background-color .25s, transform .25s; }
.hc .hc-cta:hover { color: #fff; background: var(--hn-przycisk-hover, var(--brand)); transform: translateY(-2px); }
.hc-cta__ikona { margin-right: 8px; font-size: .95em; }

/* burger: grubsze kreski jak w starym naglowku */
.hc-top--nowy .hc-burger span { width: 25px; height: 3px; border-radius: 3px; background: var(--hn-txt); }
.hc-top--nowy .hc-burger span + span { margin-top: 5px; }
.hc-top--nowy .hc-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hc-top--nowy .hc-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* szuflada z boku (telefon) */
.hc-top--nowy .hc-mobi { top: 0 !important; left: auto; right: 0; bottom: 0; z-index: 10001; width: 85%; max-width: 400px; gap: 10px; padding: 0 0 24px; border-top: 0; background: #fff; box-shadow: -5px 0 30px rgba(0, 0, 0, .2); animation: hn-wjazd .35s ease; }
@keyframes hn-wjazd { from { transform: translateX(100%); } to { transform: none; } }
.hc-top--nowy .hc-mobi__tlo { position: fixed; inset: 0; z-index: 10000; background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); cursor: pointer; }
.hc-top--nowy .hc-mobi__tlo[hidden] { display: none; }
.hc-mobi__gora { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 2px solid #f0f0f0; }
.hc-mobi__logo img { display: block; width: auto; height: 35px; }
.hc .hc-mobi__zamknij { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--hn-txt); }
.hc-mobi__zamknij svg { width: 26px; height: 26px; }
.hc-mobi__dodatek { margin: 10px 20px 0; padding: 12px 15px; border-radius: 8px; background: var(--hn-szary); font-size: 15px; }
.hc-top--nowy .hc-mobi__nav { padding: 0 20px; }
.hc-top--nowy .hc-mobi__nav .kwt-nav-list { display: flex; flex-direction: column; gap: 10px; }
.hc-top--nowy .hc-mobi__nav .kwt-nav-list > li { position: relative; border-radius: 8px; background: var(--hn-szary); }
.hc-top--nowy .hc-mobi__nav a { display: flex; align-items: center; gap: 10px; padding: 15px; border-bottom: 0; border-radius: 8px; font-family: var(--hc-sans); font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--hn-txt); }
.hc-top--nowy .hc-mobi__nav a:hover,
.hc-top--nowy .hc-mobi__nav .current-menu-item > a { color: var(--hn-przycisk); }
.hc-top--nowy .hc-mobi__nav .menu-item-has-children > a { padding-right: 56px; font-weight: 600; }
.hc .hc-mobi__rozwin { position: absolute; top: 4px; right: 4px; width: 46px; height: 46px; border-radius: 8px; }
.hc-mobi__rozwin::before, .hc-mobi__rozwin::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--hn-txt); transition: transform .25s; }
.hc-mobi__rozwin::after { transform: rotate(90deg); }
.is-open > .hc-mobi__rozwin::after { transform: rotate(0deg); }
.hc-top--nowy .hc-mobi__nav .sub-menu { display: none; padding: 0 0 8px; background: #fff; border-radius: 0 0 8px 8px; }
.hc-top--nowy .hc-mobi__nav .is-open > .sub-menu { display: block; }
.hc-top--nowy .hc-mobi__nav .sub-menu a { padding: 11px 15px 11px 18px; font-size: 15px; font-weight: 500; border-left: 3px solid transparent; border-radius: 0; }
.hc-top--nowy .hc-mobi__nav .sub-menu a:hover { background: var(--hn-jasny-akcent); border-left-color: var(--hn-akcent); }
.hc-top--nowy .hc-mobi__nav .hc-menu__ikona { font-size: 20px; }
.hc-top--nowy .hc-mobi__nav .hc-menu__opis { display: none; }
.hc-top--nowy .hc-mobi__nav .mk-wyrozniony > a { background: var(--hn-jasny-akcent); }
.hc-mobi__koszyk { display: flex; align-items: center; gap: 12px; margin: 0 20px; padding: 15px; border-radius: 8px; background: var(--hn-szary); font-family: var(--hc-sans); font-size: 16px; font-weight: 600; color: var(--hn-txt); }
.hc-mobi__koszyk svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hc-mobi__koszyk .kw-cart-count { position: static; margin-left: auto; }
.hc .hc-cta--mobi { display: flex; margin: 4px 20px 0; }
.hc-mobi__kontakt { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 18px 20px 0; border-top: 2px solid #f0f0f0; font-family: var(--hc-sans); font-size: 14.5px; }
.hc-mobi__kontakt a { color: var(--text-light, #666); }
.hc-top--nowy .hc-mobi__social { margin: 0 20px; }

@media (max-width: 1200px) {
  .hc-top--nowy .hc-top__nav .kwt-nav-list { gap: 18px; }
  .hc-top--nowy .hc-top__nav a { font-size: 14.5px; }
}
@media (max-width: 1100px) {
  .hc-top--nowy .hc-top__ikony .hc-cta { min-height: 46px; padding: 0 18px; font-size: 15px; }
}
@media (max-width: 960px) {
  .hc-top--nowy .hc-top__in,
  .hc-top--nowy.is-scrolled .hc-top__in { min-height: 70px; }
  .hc-top--nowy .hc-dodatek { display: none; }
  .hc-top--nowy .hc-koszyk { width: 45px; height: 45px; }
}
@media (max-width: 768px) {
  .hc-top--nowy .hc-top__ikony .hc-cta { display: none; }
  .hc-top--nowy .hc-mobi { width: 90%; max-width: 100%; }
  .hc-top--nowy .hc-koszyk { width: 40px; height: 40px; }
}
@media (max-width: 480px) {
  .hc-top--nowy .hc-wrap { padding-left: 15px; padding-right: 15px; }
  .hc-top--nowy .hc-top__logo img,
  .hc-top--nowy.is-scrolled .hc-top__logo img { height: 35px; }
}

/* ==========================================================================
   STOPKA nowoczesna (.hs): ciemna, trzy kolumny + pasek
   ========================================================================== */
.hc-stopka.hs { margin-top: 0; padding: 0; background: #1a1a1a; border-top: 3px solid var(--brand-light, #22c55e); color: rgba(255, 255, 255, .86); font-family: var(--hc-sans); font-size: 16px; line-height: 1.6; }
.hs .hc-wrap { max-width: 1400px; padding-left: 30px; padding-right: 30px; }
.hs__in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 60px; padding-top: 70px; padding-bottom: 60px; }
.hs .hs-tyt { margin: 0 0 22px; font-family: var(--hc-sans); font-size: 21px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--brand-light, #22c55e); }
.hs .hs-linki { display: flex; flex-direction: column; gap: 14px; }
.hs a { color: rgba(255, 255, 255, .86); transition: color .2s; }
.hs a:hover { color: var(--brand-light, #22c55e); }
.hs-firma { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .12); font-style: normal; font-size: 15.5px; }
.hs-firma strong { color: #fff; }
.hs-nl-opis { margin: 0 0 18px; color: rgba(255, 255, 255, .9); }
/* formularz newslettera wstawiony shortcodem - ciemne pole, czytelna zgoda */
.hs .hs-nl input[type="email"], .hs .hs-nl input[type="text"] { width: 100%; min-height: 46px; padding: 0 16px; background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 255, 255, .28) !important; border-radius: 10px; color: #fff !important; font-size: 16px; box-shadow: none !important; }
.hs .hs-nl input::placeholder { color: rgba(255, 255, 255, .65); opacity: 1; }
.hs .hs-nl input:focus { border-color: var(--brand-light, #22c55e) !important; outline: none; }
.hs .hs-nl button, .hs .hs-nl input[type="submit"] { min-height: 50px; border: 0; border-radius: 10px; background: var(--brand, #15803d); color: #fff; font-weight: 700; font-size: 16px; cursor: pointer; transition: background-color .25s; }
.hs .hs-nl button:hover { background: color-mix(in srgb, var(--brand, #15803d) 80%, #000); }
.hs .hs-nl label, .hs .hs-nl label span { color: rgba(255, 255, 255, .78); font-size: 13.5px; line-height: 1.55; }
.hs .hs-nl label a { color: var(--brand-light, #22c55e); text-decoration: underline; }

.hs__dol { padding: 22px 0; background: #111; }
.hs__dol-in { display: flex; align-items: center; justify-content: space-between; gap: 18px 30px; flex-wrap: wrap; }
.hs .hs-copy { margin: 0; font-size: 15px; }
.hs .hs-copy strong { font-weight: 500; color: var(--brand-light, #22c55e); }
.hs-social { display: flex; gap: 10px; }
.hs .hs-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; }
.hs .hs-social a:hover { background: var(--brand, #15803d); color: #fff; }
.hs-social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hs-social .hs-pelna svg { fill: currentColor; stroke: none; }
.hs-prawne { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; font-size: 14.5px; }
.hs-prawne a + a::before { content: "•"; margin: 0 12px; color: rgba(255, 255, 255, .35); }

@media (max-width: 1024px) {
  .hs__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs__kol--nl { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .hs .hc-wrap { padding-left: 20px; padding-right: 20px; }
  .hs__in { grid-template-columns: 1fr; gap: 36px; padding-top: 48px; padding-bottom: 40px; }
  .hs__dol-in { flex-direction: column; align-items: flex-start; }
}
