/* layout.css — kontener, sekcje, nagłówek, nawigacja, stopka. */

/* ==========================================================================
   3. Layout — kontener, sekcje, nagłówki sekcji
   ========================================================================== */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(18px,4vw,32px)}
.section{padding-block:var(--section-y)}
.section--mist{background:var(--mist)}
.section--soft{background:var(--mist-soft)}
.section--tight{padding-block:var(--section-y-sm)}
.section--tight-top{padding-top:clamp(16px,2vw,28px)}
.section--flush-top{padding-top:0}

/* Nagłówek sekcji. Wariant --row kładzie tytuł i link „zobacz wszystkie”
   w jednym wierszu (siatka produktów, siatka artykułów w makiecie); przy
   wąskim ekranie link schodzi pod tytuł. */
.section-head{max-width:60ch;margin-bottom:clamp(24px,3.5vw,40px)}
.section-head--full{max-width:none;width:100%}
.section-head--row{
  max-width:none;display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--space-4);flex-wrap:wrap;
}
.section-head--row .section-head__txt{max-width:60ch}
.section-head h2{margin-bottom:0}
.section-head .lead{margin-top:12px}
.section-head--center{margin-inline:auto;text-align:center}

.eyebrow{
  display:inline-block;font-family:var(--body);font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:10px;
}
.lead{color:var(--slate);font-size:clamp(16px,2vw,18px)}
.bar{height:6px;width:104px;border-radius:6px;background:var(--grad)}
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:200}
.skip-link:focus{left:0;color:#fff}

/* Link „zobacz wszystkie …” obok nagłówka sekcji */
.link-more{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  font-family:var(--display);font-weight:600;font-size:15px;color:var(--violet);
  padding-bottom:2px;
}
.link-more .arrow{transition:transform .15s ease}
.link-more:hover{color:var(--blue)}
.link-more:hover .arrow{transform:translateX(3px)}


/* ==========================================================================
   4. Nagłówek + nawigacja (responsywna)
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(170%) blur(12px);backdrop-filter:saturate(170%) blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:78px}
.site-logo{flex:0 0 auto}
.site-logo img{height:32px;width:auto}
.nav-toggle{
  display:none;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-xs);
  width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);
}
.nav-toggle svg{width:22px;height:22px}
.nav-toggle .icon-close{display:none}
.nav-toggle[aria-expanded="true"] .icon-open{display:none}
.nav-toggle[aria-expanded="true"] .icon-close{display:block}

.primary-nav{display:flex;align-items:center;gap:6px}
.primary-nav ul{list-style:none;display:flex;align-items:center;gap:2px}
.primary-nav a{
  display:inline-flex;align-items:center;font-family:var(--display);font-weight:600;font-size:14.5px;
  color:var(--ink);padding:9px 14px;border-radius:var(--radius-xs);
  transition:background .15s ease,color .15s ease;
}
.primary-nav a:hover,.primary-nav .current-menu-item>a,.primary-nav .current-menu-ancestor>a{background:var(--violet-soft);color:var(--violet)}

/* CTA w nagłówku — pastylka gradientowa; nadpisanie tła jest potrzebne, bo
   reguła .primary-nav a:hover ustawia własne tło dla wszystkich linków menu. */
.header-cta{margin-left:10px}
.primary-nav .header-cta a.btn--grad,
.primary-nav .header-cta a.btn--grad:hover{color:#fff;background:var(--grad)}
.primary-nav .header-cta a.btn{border-radius:var(--radius-pill);padding:12px 22px;font-size:14.5px}

/* Rozwijane podmenu „Oferta" — lista produktów z tej samej kolejności co na stronie Oferta */
.primary-nav .menu-item-has-children{position:relative}
.primary-nav .menu-item-has-children>a::after{
  content:"";display:inline-block;width:7px;height:7px;margin:0 0 1px 6px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .15s ease;
}
.primary-nav .menu-item-has-children:hover>a::after,
.primary-nav .menu-item-has-children:focus-within>a::after{transform:rotate(-135deg)}
.primary-nav .sub-menu{
  list-style:none;position:absolute;top:100%;left:0;z-index:110;min-width:240px;max-height:70vh;
  margin:6px 0 0;padding:8px;display:grid;gap:2px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-hover);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s ease;
}
.primary-nav .menu-item-has-children:hover>.sub-menu,
.primary-nav .menu-item-has-children:focus-within>.sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.primary-nav .sub-menu a{display:block;padding:9px 12px;border-radius:8px;font-weight:500;font-size:14px;white-space:nowrap}
.primary-nav .sub-menu a:hover{background:var(--mist);color:var(--violet)}

@media (max-width:900px){
  .nav-toggle{display:inline-flex}
  .primary-nav{
    position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--line);
    padding:14px clamp(18px,4vw,32px) 22px;display:none;box-shadow:var(--shadow);
  }
  .primary-nav.is-open{display:block}
  .primary-nav ul{flex-direction:column;align-items:stretch;gap:2px}
  .primary-nav a{display:flex;width:100%;padding:13px 14px;font-size:16px}
  .header-cta{margin:10px 0 0}
  .header-cta .btn{width:100%;justify-content:center}

  .primary-nav .menu-item-has-children>a::after{display:none}
  .primary-nav .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;max-height:none;overflow:visible;
    margin:2px 0 6px;padding:0 0 0 14px;border:0;box-shadow:none;background:transparent;
  }
  .primary-nav .sub-menu a{font-size:15px;padding:9px 14px;color:var(--slate)}
  .primary-nav .sub-menu a:hover{background:var(--mist);color:var(--violet)}
}


/* ==========================================================================
   14. Stopka (ciemna)
   --------------------------------------------------------------------------
   Trzy kolumny: marka + kontakt / nawigacja / informacje. Kolumna marki jest
   szersza, bo mieści logo, zdanie o marce i wiersze kontaktowe z ikonami.
   Pas dolny: disclosure afiliacyjny po lewej, copyright po prawej.
   ========================================================================== */
.site-footer{background:var(--ink-deep);color:#C7CBE0;margin-top:var(--section-y)}
.site-footer__top{
  display:grid;grid-template-columns:1.6fr 1fr 1fr;
  gap:clamp(28px,4vw,56px);padding-block:clamp(44px,5vw,64px);
}
@media (max-width:860px){.site-footer__top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.site-footer__top{grid-template-columns:1fr}}

.site-footer img.footer-logo,
.site-footer .footer-logo img{height:32px;width:auto;margin-bottom:18px}
.site-footer p{color:#9DA2BE;font-size:14.5px;line-height:1.6}
.site-footer__about{max-width:38ch}

/* Nagłówki kolumn — małe, rozstrzelone kapitaliki */
.site-footer h4{
  color:#fff;font-family:var(--body);font-size:11.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;margin-bottom:18px;
}
.site-footer .footer-menu{list-style:none;display:grid;gap:11px}
.site-footer .footer-menu a{color:#C7CBE0;font-size:14.5px;transition:color .15s ease}
.site-footer .footer-menu a:hover{color:#fff}

/* Wiersze kontaktowe: ikona + treść, wyrównane do jednej osi */
.footer-contact{list-style:none;display:grid;gap:12px;margin-top:22px}
.footer-contact li{display:flex;align-items:center;gap:11px;font-size:14.5px;color:#C7CBE0}
.footer-contact svg{
  flex:0 0 auto;width:17px;height:17px;color:var(--teal);
}
.footer-contact a{color:#C7CBE0;transition:color .15s ease}
.footer-contact a:hover{color:#fff}

.footer-social{display:inline-flex;align-items:center;gap:8px;color:#C7CBE0;font-size:14.5px;font-weight:500;transition:color .15s ease}
.footer-social:hover{color:#fff}

.site-footer__bottom{
  border-top:1px solid rgba(255,255,255,.1);padding-block:22px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px;font-size:13px;color:#8A8FAC;
}
.site-footer__bottom .bar{height:4px;width:64px;flex:0 0 auto}
.site-footer__legal{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.disclosure{font-size:11.5px;line-height:1.55;color:#7F8499;max-width:64ch;margin:0}
.footer-cookies{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--body);font-size:11.5px;color:#8A8FAC;text-decoration:underline;
  text-underline-offset:2px;transition:color .15s ease;
}
.footer-cookies:hover{color:#fff}