/* ==========================================================================
   PUF - Homepage V6 + karta produktu #30 - CSS PRODUKCYJNY
   MIEJSCE: Wyglad -> Dostosuj -> Dodatkowy CSS (custom_css, bez wpautop)
   ZRODLO: design-assets/homepage-v6-handoff/direction-v6.html (frozen V6)
   ZAKRES: body.page-id-44 oraz .pufp / body.postid-30
   Wersja: 2026-08-26 - runda remediacji po niezaleznym review
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');

:root{
  --puf-ink:#1A1A1A;
  --puf-amber:#E8A33D;
  --puf-amber-deep:#C9822A;
  --puf-amber-hover:#d6903a;
  --puf-line:#E4DDD1;
  --puf-line-soft:#E9E3D9;
  --puf-proof-bg:#F3F3F3;
  --puf-text-2:#4a453d;
  --puf-text-3:#6E6E6E;
}

/* 1. PRZYCISKI - frozen .f-btn (zamrozony V6 nie ma border-radius) */
.page-id-44 .puf-btn,
.page-id-44 .puf-btn:visited{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Roboto',-apple-system,sans-serif;
  font-size:14.5px;font-weight:600;letter-spacing:.01em;line-height:1.15;
  padding:16px 30px;min-height:48px;
  border:0;border-radius:0;text-decoration:none;box-sizing:border-box;
}
.page-id-44 .puf-btn-ink,
.page-id-44 .puf-btn-ink:visited{background:var(--puf-ink);color:var(--puf-amber,#E8A33D) !important}
.page-id-44 .puf-btn-ink:hover{background:#333;color:var(--puf-amber,#E8A33D) !important}
.page-id-44 .puf-btn-amber,
.page-id-44 .puf-btn-amber:visited{background:var(--puf-amber);color:var(--puf-ink) !important}
.page-id-44 .puf-btn-amber:hover{background:var(--puf-amber-hover);color:var(--puf-ink) !important}

/* 2. HERO / MASTER-BRAND ROUTER - frozen .f-hero-v5 + .f-hero-top */
.page-id-44 .puf-v6-hero{
  max-width:700px;margin:0 auto;text-align:center;
  padding-top:64px;padding-bottom:40px;
}
.page-id-44 .puf-v6-eyebrow{
  font-family:'Roboto',-apple-system,sans-serif;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--puf-ink);font-weight:600;margin:0 0 16px;
}
.page-id-44 .puf-v6-hero h1{
  font-family:'Roboto',-apple-system,sans-serif;font-weight:500;
  font-size:38px;line-height:1.24;color:var(--puf-ink);margin:0 0 16px;
}
.page-id-44 .puf-v6-routes{
  display:flex;gap:14px;justify-content:center;margin-top:4px;flex-wrap:wrap;
}
.page-id-44 .puf-v6-routes .puf-btn{padding:18px 32px;font-size:15px;font-weight:700}

/* 3. PHOTO GATES - frozen .f-gate 460px / .f-gate-overlay / .f-gate-copy */
.page-id-44 .puf-gates{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-bottom:70px;
}
.page-id-44 .puf-gate{
  position:relative;height:460px;overflow:hidden;border-radius:0;display:block;
}
.page-id-44 .puf-gate > img{
  position:absolute;inset:0;
  width:100% !important;height:100% !important;max-width:none;
  object-fit:cover;display:block;margin:0;border-radius:0;
}
.page-id-44 .puf-gate-ov{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 32%,rgba(26,26,26,.78) 100%);
}
.page-id-44 .puf-gate-copy{position:absolute;left:32px;right:32px;bottom:32px;color:#fff}
.page-id-44 .puf-gate-copy .lbl{
  font-family:'Roboto',-apple-system,sans-serif;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--puf-amber);font-weight:700;margin:0 0 10px;
}
.page-id-44 .puf-gate-copy h3{
  font-family:'Roboto',-apple-system,sans-serif;font-size:26px;font-weight:500;
  color:#fff;margin:0 0 10px;
}
.page-id-44 .puf-gate-copy p{
  font-family:'Roboto',-apple-system,sans-serif;
  font-size:14px;line-height:1.5;margin:0 0 20px;max-width:360px;
  opacity:.94;color:#fff;
}

/* 4. EYEWEAR WORLD / KIDS WORLD - frozen .f-world-copy */
.page-id-44 .puf-world h2{
  font-family:'Roboto',-apple-system,sans-serif;font-size:36px;font-weight:500;
  line-height:1.24;color:var(--puf-ink);margin:0 0 16px;
}
.page-id-44 .puf-world .lead{
  font-family:'Roboto',-apple-system,sans-serif;
  font-size:17px;line-height:1.6;color:var(--puf-text-2);margin:0 0 12px;
}
.page-id-44 .puf-world .prob{
  font-family:'Roboto',-apple-system,sans-serif;
  font-size:16px;line-height:1.6;color:var(--puf-text-2);margin:0 0 30px;
}
.page-id-44 .puf-world-img{
  width:100%;height:auto;display:block;border-radius:0;margin:0;
}

/* 5. VERIFIED REVIEWS - frozen .f-proof-world / .f-proof-grid2 / .f-review-card */
.page-id-44 .puf-proof-row{background:var(--puf-proof-bg);padding:64px 0}
.page-id-44 .puf-proof-head{text-align:center;margin-bottom:20px}
.page-id-44 .puf-proof-head h2{
  font-family:'Roboto',-apple-system,sans-serif;font-size:32px;font-weight:500;
  color:var(--puf-ink);margin:0 0 8px;
}
.page-id-44 .puf-proof-sub{
  font-family:'Roboto',-apple-system,sans-serif;
  font-size:14px;color:var(--puf-text-3);margin:0 auto;max-width:820px;
}
.page-id-44 .puf-reviews{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:820px;margin:0 auto;
}
.page-id-44 .puf-review{
  background:#fff;padding:28px;border:1px solid var(--puf-line);border-radius:0;
  display:flex;flex-direction:column;
}
.page-id-44 .puf-review .stars{
  color:var(--puf-amber);font-size:15px;letter-spacing:2px;line-height:1;margin:0 0 14px;
}
.page-id-44 .puf-review blockquote{
  font-family:'Roboto',-apple-system,sans-serif;font-size:16.5px;line-height:1.5;
  font-style:italic;color:var(--puf-ink);
  margin:0 0 16px;padding:0;border:0;background:none;quotes:none;
}
.page-id-44 .puf-review blockquote p{margin:0;font:inherit;color:inherit}
.page-id-44 .puf-review blockquote::before,
.page-id-44 .puf-review blockquote::after{display:none !important;content:none !important}
.page-id-44 .puf-review .adv{
  font-family:'Roboto',-apple-system,sans-serif;
  font-size:13px;color:var(--puf-text-2);margin:0 0 16px;
}
.page-id-44 .puf-review .adv b{font-weight:600}
.page-id-44 .puf-review .meta{
  font-family:'Roboto',-apple-system,sans-serif;
  font-size:12.5px;color:var(--puf-text-3);margin-top:auto;
  border-top:1px solid var(--puf-line-soft);padding-top:12px;line-height:1.5;
}
.page-id-44 .puf-review .meta .src{display:block;color:#8a8a8a;font-size:11.5px;margin-top:3px}

/* 6. TRUST STRIP "Bezpieczne zakupy" - wzorem bejbino.pl (4 odznaki, ikona nad
   tekstem, wyśrodkowane). Płatności NIE byly BLOCKED - Stripe (Przelewy24/BLIK)
   jest juz zainstalowany, wlasciciel potwierdzil ze bedzie podpiety - opisane
   jako wspierana metoda, nie fikcyjny aktywny procesor. Ikony wieksze niz w
   poprzedniej (usunietej) wersji poziomej, dopasowane rozmiarem do wizualnej
   wagi ikon na bejbino (dokladny pomiar px niemozliwy - ich ikony uzywaja
   position:sticky/animacji ktore nie oddaja stabilnego rect w tym srodowisku). */
.page-id-44 .puf-trust-row{
  border-top:1px solid var(--puf-line-soft);
  border-bottom:1px solid var(--puf-line-soft);
  padding:64px 0;
}
.page-id-44 .puf-trust{
  display:grid;grid-template-columns:repeat(4,1fr);gap:40px;max-width:1220px;margin:0 auto;
}
.page-id-44 .puf-trust-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.page-id-44 .puf-trust-item svg{width:56px;height:56px;flex-shrink:0}
.page-id-44 .puf-trust-item h5{
  font-family:'Roboto',-apple-system,sans-serif;
  font-size:16px;font-weight:600;color:var(--puf-ink);margin:0;
}
.page-id-44 .puf-trust-item p{
  font-family:'Roboto',-apple-system,sans-serif;
  font-size:14px;color:var(--puf-text-3);line-height:1.5;margin:0;max-width:230px;
}

/* 7. FINAL ROUTING - frozen .f-final */
.page-id-44 .puf-final{text-align:center;padding:140px 0}
.page-id-44 .puf-final h2{
  font-family:'Roboto',-apple-system,sans-serif;font-size:42px;font-weight:500;
  color:var(--puf-ink);margin:0 0 20px;
}
.page-id-44 .puf-final p{
  font-family:'Roboto',-apple-system,sans-serif;
  font-size:16px;color:var(--puf-text-2);margin:0 auto 36px;
}

/* 8. WOOCOMMERCE - kolory PUF wylacznie na Homepage V6 */
.page-id-44 .woocommerce ul.products li.product .price,
.page-id-44 .woocommerce ul.products li.product .price .amount,
.page-id-44 .woocommerce ul.products li.product .price bdi,
.page-id-44 .woocommerce ul.products li.product .price ins,
.page-id-44 .woocommerce ul.products li.product .price del,
.page-id-44 .woocommerce-Price-amount,
.page-id-44 .woocommerce-Price-currencySymbol{
  color:var(--puf-amber-deep) !important;
  font-family:'Roboto',-apple-system,sans-serif;
  font-weight:700;
  white-space:nowrap !important;
}
.page-id-44 .woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:'Roboto',-apple-system,sans-serif;font-weight:500;color:var(--puf-ink);
}
.page-id-44 .woocommerce ul.products li.product .button,
.page-id-44 .woocommerce ul.products li.product a.button,
.page-id-44 .woocommerce ul.products li.product .product-add-to-cart a{
  background-color:var(--puf-amber) !important;
  color:var(--puf-ink) !important;
  border-color:var(--puf-amber) !important;
  border-radius:0 !important;
  font-family:'Roboto',-apple-system,sans-serif;font-weight:700;letter-spacing:.01em;
}
.page-id-44 .woocommerce ul.products li.product .button:hover,
.page-id-44 .woocommerce ul.products li.product a.button:hover{
  background-color:var(--puf-amber-hover) !important;color:var(--puf-ink) !important;
}

/* 9. MOBILE STICKY ROUTING BAR - frozen .f-sticky-bar (artboard absolute -> fixed) */
.page-id-44 .puf-sticky-bar{display:none}

@media (max-width:767px){
  .page-id-44 .puf-sticky-bar{
    display:flex;gap:10px;
    position:fixed;left:0;right:0;bottom:0;
    padding:12px 16px;background:#fff;
    border-top:1px solid var(--puf-line-soft);
    z-index:999;
  }
  .page-id-44 .puf-sticky-bar .puf-btn{
    flex:1;padding:13px 0;text-align:center;font-size:13.5px;
    font-weight:700;min-height:50px;
  }
  body.page-id-44{padding-bottom:76px}

  .page-id-44 .puf-btn{padding:15px 22px;min-height:50px;font-size:15.5px;font-weight:700}
  .page-id-44 .puf-v6-hero{padding-top:36px;padding-bottom:28px}
  .page-id-44 .puf-v6-hero h1{font-size:32px}
  .page-id-44 .puf-v6-routes{flex-direction:column;gap:14px}
  .page-id-44 .puf-v6-routes .puf-btn{width:100%}
  .page-id-44 .puf-gates{grid-template-columns:1fr;gap:14px;padding-bottom:48px}
  .page-id-44 .puf-gate{height:300px}
  .page-id-44 .puf-gate-copy .puf-btn{width:100%}
  .page-id-44 .puf-world h2{font-size:28px}
  .page-id-44 .puf-proof-row{padding:36px 0}
  .page-id-44 .puf-reviews{grid-template-columns:1fr;gap:16px}
  .page-id-44 .puf-trust-row{padding:48px 0}
  .page-id-44 .puf-trust{grid-template-columns:1fr 1fr;gap:32px 18px}
  .page-id-44 .puf-trust-item svg{width:44px;height:44px}
  .page-id-44 .puf-trust-item p{font-size:13.5px}
  .page-id-44 .puf-final{padding:64px 0}
  .page-id-44 .puf-final h2{font-size:28px}
}

.page-id-44 .puf-gates,
.page-id-44 .puf-reviews,
.page-id-44 .puf-trust{min-width:0}
.page-id-44 .puf-gate,
.page-id-44 .puf-review,
.page-id-44 .puf-trust-item{min-width:0}

/* 10. KARTA PRODUKTU #30 - long-form (CSS przeniesiony z tresci produktu) */
.pufp{font-family:'Roboto',-apple-system,sans-serif;color:var(--puf-ink)}
.pufp h2{font-family:'Roboto',-apple-system,sans-serif;font-size:clamp(21px,3vw,30px);line-height:1.25;margin:0 0 12px;color:var(--puf-ink)}
.pufp h3{font-family:'Roboto',-apple-system,sans-serif;font-size:15px;font-weight:600;margin:0 0 6px}
.pufp p{font-size:15px;line-height:1.7;color:#3f3f3f;margin:0 0 14px}
.pufp section{padding:30px 0;border-top:1px solid #efe9df}
.pufp section:first-child{border-top:0}
.pufp-lead{font-size:17px;color:var(--puf-ink)}
.pufp-spec{width:100%;border-collapse:collapse;font-size:14.5px}
.pufp-spec th,.pufp-spec td{text-align:left;padding:10px 12px;border-bottom:1px solid #efe9df;vertical-align:top}
.pufp-spec th{width:46%;font-weight:600;color:var(--puf-ink)}
.pufp-spec td{color:#4a4a4a}
.pufp-faq details{border-bottom:1px solid #efe9df;padding:12px 0}
.pufp-faq summary{cursor:pointer;font-weight:600;font-size:15px;list-style:none}
.pufp-faq summary::-webkit-details-marker{display:none}
.pufp-faq p{margin:10px 0 0;font-size:14.5px}
.pufp-rev{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:820px}
.pufp-rc{background:#fff;border:1px solid var(--puf-line);border-radius:0;padding:28px;display:flex;flex-direction:column}
.pufp-rc .st{color:var(--puf-amber);letter-spacing:2px;font-size:15px;line-height:1;margin-bottom:14px}
.pufp-rc blockquote{font-family:'Roboto',-apple-system,sans-serif;font-size:16.5px;line-height:1.5;font-style:italic;color:var(--puf-ink);margin:0 0 16px;padding:0;border:0;background:none}
.pufp-rc blockquote p{margin:0;font:inherit;color:inherit}
.pufp-rc blockquote::before,.pufp-rc blockquote::after{display:none !important;content:none !important}
.pufp-rc .mt{margin-top:auto;font-size:12.5px;color:var(--puf-text-3);border-top:1px solid var(--puf-line-soft);padding-top:12px;line-height:1.5}
.pufp-rc .mt .s{display:block;color:#8a8a8a;font-size:11.5px;margin-top:3px}
.pufp-cta{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--puf-amber);color:var(--puf-ink) !important;
  font-family:'Roboto',-apple-system,sans-serif;font-weight:700;font-size:15px;
  padding:16px 30px;border-radius:0;text-decoration:none;min-height:48px;box-sizing:border-box;
}
.pufp-cta:hover{background:var(--puf-amber-hover);color:var(--puf-ink) !important}

@media (max-width:767px){
  .pufp-rev{grid-template-columns:1fr;gap:16px}
  .pufp-cta{width:100%;min-height:50px}
}

body.postid-30 .price,
body.postid-30 .price bdi,
body.postid-30 .woocommerce-Price-amount,
body.postid-30 .woocommerce-variation-price .amount{white-space:nowrap !important}

/* 11. EYEWEAR WORLD - karta produktu WooCommerce w kolumnie copy
      Przywrocenie geometrii frozen .f-world-product:
      flex/grid, miniatura 96x96, max-width 460px, ramka 1px, padding 20px.
      Naprawa defektu #14 (miniatura 300px rozciagana do ~610px). */
.page-id-44 .woocommerce.columns-1 ul.products{display:block;margin:0;padding:0}
.page-id-44 .woocommerce.columns-1 ul.products li.product{
  display:grid;grid-template-columns:96px 1fr;
  grid-template-areas:"img name" "img price";
  align-items:center;column-gap:22px;row-gap:8px;
  width:100% !important;max-width:460px;
  margin:0 0 30px !important;padding:20px;
  border:1px solid var(--puf-line-soft);background:#fff;
  float:none !important;clear:both;
}
.page-id-44 .woocommerce.columns-1 ul.products li.product .product-wrap{
  grid-area:img;width:96px;height:96px;overflow:hidden;margin:0;
}
.page-id-44 .woocommerce.columns-1 ul.products li.product .product-wrap img{
  width:96px !important;height:96px !important;object-fit:cover;margin:0;
}
.page-id-44 .woocommerce.columns-1 ul.products li.product .woocommerce-loop-product__title{
  grid-area:name;margin:0;padding:0;font-size:18px;line-height:1.3;
}
.page-id-44 .woocommerce.columns-1 ul.products li.product .price{
  grid-area:price;margin:0;padding:0;font-size:24px;line-height:1.2;
}

/* frozen .f-world-copy .lead / .problem - dlugosc wiersza */
.page-id-44 .puf-world .lead{max-width:460px}
.page-id-44 .puf-world .prob{max-width:440px}

/* frozen .f-proof-world / .f-trust - marginesy sekcji wewnatrz kontenera Salienta */
.page-id-44 .puf-proof-row{margin:0 auto}
.page-id-44 .puf-trust-row{margin:0 auto}

@media (max-width:767px){
  .page-id-44 .woocommerce.columns-1 ul.products li.product{max-width:none}
  .page-id-44 .puf-world .lead,
  .page-id-44 .puf-world .prob{max-width:none}
}

/* ==========================================================================
   RUNDA 2 REMEDIACJI — 2026-08-26
   Wyłącznie potwierdzone defekty z drugiego niezależnego review (po ad8e46d).
   Zero redesignu, zero nowych sekcji, zero zmian w copy i kolejnosci.
   ========================================================================== */

/* --- A. PHOTO GATES — overlay wzmocniony (AUTORYZACJA OWNERA) --------------
   Frozen: linear-gradient(transparent 32%, rgba(26,26,26,.78)).
   Zmierzony kontrast na zamrozonej wartosci: 1.50-3.65 (probka pikseli
   zlozonych zdjecie+overlay pod kazdym elementem tekstowym) — tekst realnie
   nieczytelny, bo podstawione assety sa kompozycjami na bialym tle.
   Zmieniona WYLACZNIE sila i rozklad overlaya. Layout, wysokosc 460/300 px,
   typografia, copy i kolory marki — nietkniete.
   Wartosci dobrane empirycznie: najlagodniejszy rozklad, przy ktorym KAZDY
   element tekstowy osiaga >=4.5:1 (patrz verdict.md, tabela pomiarow). */
.page-id-44 .puf-gate-ov{
  background:linear-gradient(180deg,
    rgba(26,26,26,0) 0%,
    rgba(26,26,26,.08) 20%,
    rgba(26,26,26,.84) 42%,
    rgba(26,26,26,.88) 100%);
}

/* --- F. OPINIE — piata karta wysrodkowana ---------------------------------
   Baza bez zmian: 2 kolumny, max-width 820px (frozen .f-proof-grid2).
   Ostatnia karta, gdy zostaje sama, przestaje byc przyklejona do lewej.
   Zadna opinia nie zostala usunieta ani dodana. */
.page-id-44 .puf-reviews > .puf-review:last-child:nth-child(odd){
  grid-column:1 / -1;
  width:calc(50% - 12px);
  margin-left:auto;
  margin-right:auto;
}

/* --- D. KARTA PRODUKTU #30 — kolor ceny -----------------------------------
   Cena pozostaje w pelni dynamiczna (WooCommerce), zero wartosci w markupie. */
body.postid-30 .summary .price,
body.postid-30 .summary .price bdi,
body.postid-30 .summary .price .amount,
body.postid-30 .summary .woocommerce-Price-amount,
body.postid-30 .summary .woocommerce-Price-currencySymbol,
body.postid-30 .woocommerce-variation-price .price,
body.postid-30 .woocommerce-variation-price .amount,
body.postid-30 .woocommerce-variation-price bdi{
  color:#C9822A !important;
  white-space:nowrap !important;
}

/* --- C. STOPKA — biale naglowki kolumn (frozen .f-footer h5{color:#fff}) --- */
#footer-widgets .widget h4,
#footer-widgets .widget h3,
#footer-widgets .widgettitle,
#footer-widgets .widget .widget-title{
  color:#fff !important;
}

/* --- E. TOUCH TARGETS — linki w stopce (mierzone 26 px) -------------------- */
#footer-widgets .widget ul{margin:0;padding:0;list-style:none}
#footer-widgets .widget ul li{margin:0;padding:0}
#footer-widgets .widget ul li a{
  display:flex;align-items:center;
  min-height:44px;
  padding:4px 0;
  line-height:1.4;
  box-sizing:border-box;
}

/* --- E. TOUCH TARGETS — przyciski WooCommerce na Homepage V6 --------------- */
.page-id-44 .woocommerce ul.products li.product .button,
.page-id-44 .woocommerce ul.products li.product a.button{
  min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;
}

/* ==========================================================================
   MOBILE <=767 px
   ========================================================================== */
@media (max-width:767px){

  /* A. Gate mobilny jest nizszy (300 px), a blok tekstu zajmuje wiekszy
     procent wysokosci — ciemna strefa musi zaczynac sie wczesniej. */
  .page-id-44 .puf-gate-ov{
    background:linear-gradient(180deg,
      rgba(26,26,26,0) 0%,
      rgba(26,26,26,.10) 8%,
      rgba(26,26,26,.84) 26%,
      rgba(26,26,26,.88) 100%);
  }

  /* F. na mobile siatka jest 1-kolumnowa — wysrodkowanie zbedne */
  .page-id-44 .puf-reviews > .puf-review:last-child:nth-child(odd){
    grid-column:auto;width:auto;margin-left:0;margin-right:0;
  }

  /* --- B. PUF KIDS — karuzela pozioma wg frozen .f-kids-scroll -------------
     frozen: display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
             karta flex:0 0 85%; scroll-snap-align:start;
             obraz height:190px; cena Fraunces 21px; CTA min-height:50px.
     Bez wtyczki slidera. Scroll dzieje sie WEWNATRZ <ul>, nie na stronie —
     dlatego zero ujemnych marginesow (frozen ma margin:0 -20px, ale w
     kontenerze Salienta wypchnelyby poziomy pasek przewijania calej strony). */
  .page-id-44 .woocommerce ul.products.columns-3{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:14px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
    margin:0 0 28px;
    padding:0 0 4px;
    max-width:100%;
  }
  .page-id-44 .woocommerce ul.products.columns-3::-webkit-scrollbar{display:none}

  .page-id-44 .woocommerce ul.products.columns-3 > li.product{
    flex:0 0 85%;
    scroll-snap-align:start;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    float:none !important;
    clear:none !important;
    border:1px solid var(--puf-line-soft);
    background:#fff;
    display:block;
  }
  .page-id-44 .woocommerce ul.products.columns-3 > li.product .product-wrap{margin:0}
  .page-id-44 .woocommerce ul.products.columns-3 > li.product img{
    width:100% !important;height:190px !important;object-fit:cover;display:block;margin:0;
  }
  .page-id-44 .woocommerce ul.products.columns-3 > li.product .woocommerce-loop-product__title{
    padding:16px 16px 8px;margin:0;font-size:17px;line-height:1.3;
  }
  .page-id-44 .woocommerce ul.products.columns-3 > li.product .price{
    display:block;padding:0 16px 16px;margin:0;font-size:21px;line-height:1.2;
  }
}

/* --- E. TOUCH TARGETS — ikony w headerze (mierzone realne hitboxy) ---------
   Zmierzone przy 390 px PRZED zmiana (bounding box klikalnego <a>, nie glifu):
     a.mobile-search                              38 x 22
     a#mobile-cart-link                           39 x 22
     .slide-out-widget-area-toggle a (hamburger)  22 x 20
     a#logo                                       39 x 22
   Powiekszany jest WYLACZNIE obszar klikalny (padding + kompensujacy
   ujemny margines). Rozmiar samej ikony/glifu i layout headera bez zmian. */
@media (max-width:767px){
  #header-outer a.mobile-search,
  #header-outer #mobile-cart-link,
  #header-outer a#logo{
    padding-top:11px;padding-bottom:11px;
    margin-top:-11px;margin-bottom:-11px;
  }
  #header-outer .slide-out-widget-area-toggle a,
  #header-outer .slide-out-widget-area-toggle.mobile-icon a{
    padding:12px;margin:-12px;
  }
}

/* --- E. TOUCH TARGETS — korekta po pomiarze ------------------------------
   Salient ustawia tym dwóm elementom sztywne height:22px + box-sizing:border-box,
   wiec sam padding byl wchlaniany do srodka i hitbox zostawal 22 px.
   Ustawiam wysokosc hitboxa 44 px i kompensuje ujemnym marginesem,
   zeby layout headera nie drgnal. Glif ikony bez zmian. */
@media (max-width:767px){
  #header-outer a.mobile-search,
  #header-outer #mobile-cart-link{
    height:44px !important;
    box-sizing:border-box !important;
    padding-top:11px !important;
    padding-bottom:11px !important;
    margin-top:-11px !important;
    margin-bottom:-11px !important;
    display:flex !important;
    align-items:center !important;
  }
}

/* --- E. TOUCH TARGETS — szerokosc hitboxow w headerze ---------------------
   Po korekcie wysokosci zostala szerokosc: search 38, cart 39, hamburger 34.
   Powiekszam kazdy do >=44 px WYLACZNIE paddingiem, z ujemnym marginesem
   kompensujacym, tak zeby ikony nie zmienily pozycji ani rozmiaru.
   Docelowy rozklad (zmierzony przy 390 px): search 252-296, cart 296-340,
   przerwa 340-345, hamburger 345-390. Zero nakladania sie obszarow. */
@media (max-width:767px){
  #header-outer a.mobile-search{
    padding-left:16px !important;margin-left:-6px !important;
  }
  #header-outer #mobile-cart-link{
    padding-right:15px !important;margin-right:-5px !important;
  }
  #header-outer .slide-out-widget-area-toggle a,
  #header-outer .slide-out-widget-area-toggle.mobile-icon a{
    padding-right:17px !important;margin-right:-11px !important;
  }
}

/* --- E. TOUCH TARGETS — domkniecie szerokosci hamburgera i logo ------------
   Po poprzedniej korekcie: search 44x44 OK, cart 44x44 OK,
   hamburger 33x69 (za waski), logo 39x44 (za waskie).
   Wymuszam min-width:44px na obu. Ikona/glif bez zmian — element jest
   inline-block z wysrodkowana zawartoscia, wiec sam symbol nie rosnie. */
@media (max-width:767px){
  #header-outer .slide-out-widget-area-toggle a,
  #header-outer .slide-out-widget-area-toggle.mobile-icon a{
    display:inline-block !important;
    box-sizing:border-box !important;
    min-width:44px !important;
    text-align:center !important;
    padding-left:12px !important;
    padding-right:12px !important;
    margin-right:-6px !important;
  }
  #header-outer a#logo{
    display:inline-block !important;
    box-sizing:border-box !important;
    min-width:44px !important;
    text-align:left !important;
  }
}

/* --- E. TOUCH TARGETS — usuniecie 7 px nakladania sie kosz/hamburger ------
   Po min-width:44px hamburger wchodzil 7 px na obszar kosza (kosz 290-334,
   hamburger 327-373). Zeruje ujemny margines: hamburger startuje za koszem. */
@media (max-width:767px){
  #header-outer .slide-out-widget-area-toggle a,
  #header-outer .slide-out-widget-area-toggle.mobile-icon a{
    margin-right:0 !important;
  }
}

/* --- E. TOUCH TARGETS — odstep miedzy koszem a hamburgerem ----------------
   Grupa ikon jest wyrownana do prawej, wiec zerowanie marginesu przesunelo
   caly blok, a nie sam hamburger. Dodaje 7 px odstepu z lewej strony
   hamburgera — obszary kosza i hamburgera przestaja na siebie zachodzic. */
@media (max-width:767px){
  #header-outer .slide-out-widget-area-toggle a,
  #header-outer .slide-out-widget-area-toggle.mobile-icon a{
    margin-left:7px !important;
  }
}

/* ==========================================================================
   MOBILE MENU FIX - 2026-08-26 (micro-remediacja)
   Off Canvas Navigation Menu bylo puste (lokalizacja Salienta bez przypisanego
   menu WP) - naprawione przypisaniem istniejacego 'Menu glowne' do lokalizacji
   off_canvas_nav (Wyglad -> Menu -> Zarzadzaj rozmieszczeniem). To jedyna
   zmiana WordPress w tej rundzie.

   Naprawa przypisania menu ujawnila preexisting defekt szablonu Salient:
   styl 'material' off-canvas renderuje ta sama pozycje menu DWA RAZY -
   raz w .off-canvas-menu-container.mobile-only (wlasciwy kontener na realne
   urzadzenia mobilne), raz w .off-canvas-menu-container bez tej klasy
   (potwierdzone w zrodle: zawiera WYLACZNIE identyczny duplikat <ul class="menu">,
   zero unikalnej tresci - bezpieczne do ukrycia w calosci).
   Potwierdzone w zrodlach Salient 16.0.5: plik slide-out-right-material.css
   (aktywny styl na tej stronie) nie ma zadnej reguly rozrozniajacej te dwa
   kontenery - w przeciwienstwie do stylu 'hover' (slide-out-right-hover.css),
   ktory ma wprost '.mobile-only{display:none}'. To lukka w tym konkretnym
   stylu Salienta, nie cos wprowadzonego przez nasza zmiane.
   Zakres reguly: wylacznie #slide-out-widget-area (jedyny panel off-canvas
   na stronie) - zero wplywu na header, sticky bar, footer, gate'y, PDP #30.
   ========================================================================== */
#slide-out-widget-area .off-canvas-menu-container:not(.mobile-only){
  display:none !important;
}


/* ==========================================================================
   PUF - KOSZYK / ZAMOWIENIE / KARTA PRODUKTU - etap Cart/Checkout 2026-08-26
   MIEJSCE: Wyglad -> Dostosuj -> Dodatkowy CSS (custom_css, bez wpautop)
   ZAKRES: body.woocommerce-cart, body.woocommerce-checkout, body.single-product
   Homepage V6 (page-id-44) NIE jest dotykana - zadna regula nizej nie ma
   selektora .page-id-44 i zadna nie jest globalna dla calego serwisu.
   Architektura koszyka i zamowienia: WooCommerce Blocks (nie shortcode).
   ========================================================================== */

/* --- 1. KARTA PRODUKTU - "Dodaj Do Koszyka" -------------------------------
   Salient nadaje przyciskowi single-product 'text-transform: capitalize',
   co w polszczyznie daje bledne "Dodaj Do Koszyka". W petli produktow
   (sklep, pusty koszyk) ten sam przycisk renderuje sie poprawnie malymi
   literami - regula ponizej wyrownuje karte produktu do reszty sklepu. */
body.single-product .single_add_to_cart_button,
body.single-product form.cart .button{
  text-transform:none !important;
}

/* --- 2. KARTA PRODUKTU - puste SKU ----------------------------------------
   Zaden z 5 produktow PUF nie ma SKU, wiec Salient renderuje doslownie
   "SKU: Brak danych" - to szum, nie informacja.
   USUN TE REGULE, gdy produkty dostana realne SKU. */
body.single-product .product_meta .sku_wrapper{
  display:none;
}

/* --- 3. KOSZYK / ZAMOWIENIE - urwany skrocony opis ------------------------
   Blok pozycji koszyka renderuje skrocony opis produktu, ktory urywa sie
   w polowie zdania ("... Kolor...") i powiela wariant pokazany linijke nizej.
   Clarity > decoration: w koszyku licza sie nazwa, wariant, ilosc i cena. */
body.woocommerce-cart .wc-block-components-product-metadata__description,
body.woocommerce-checkout .wc-block-components-product-metadata__description{
  display:none;
}

/* --- 4. KOSZYK / ZAMOWIENIE - ceny bez lamania ---------------------------- */
body.woocommerce-cart .wc-block-components-formatted-money-amount,
body.woocommerce-checkout .wc-block-components-formatted-money-amount,
body.woocommerce-cart .wc-block-components-totals-item__value,
body.woocommerce-checkout .wc-block-components-totals-item__value{
  white-space:nowrap;
}

/* --- 5. PUSTY KOSZYK - CTA powrotu do sklepu ------------------------------
   Blok pustego koszyka nie mial zadnego wyjscia poza siatka produktow.
   Przycisk dodany w tresci strony #8; styl zgodny z .puf-btn z V6
   (border-radius 0, atrament #1A1A1A) - bez wprowadzania nowego jezyka
   wizualnego. */
body.woocommerce-cart .puf-empty-cart-cta{
  text-align:center;
  margin:0 0 34px;
}
body.woocommerce-cart .puf-empty-cart-cta .wp-block-button__link{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Roboto',-apple-system,sans-serif;
  font-size:14.5px;font-weight:600;letter-spacing:.01em;line-height:1.15;
  padding:16px 30px;min-height:48px;
  border-radius:0;
  background:#1A1A1A;color:#fff;
  border:1px solid #1A1A1A;
  text-decoration:none;
}
body.woocommerce-cart .puf-empty-cart-cta .wp-block-button__link:hover,
body.woocommerce-cart .puf-empty-cart-cta .wp-block-button__link:focus{
  background:#000;border-color:#000;color:#fff;
}

/* --- 6. TOUCH TARGETY W KOSZYKU I CHECKOUCIE ------------------------------
   Zmierzone na realnym viewporcie 390 px (snapshot DOM po hydracji,
   Claude_Browser, innerWidth=390):
     stepper ilosci      30 x 39 px, font 10.8 px
     usun pozycje        24 x 24 px
     "Dodaj kupony"      343 x 18 px
     "Kupuje i place"    343 x 40 px, font 13 px
     checkbox            20 x 20 px
   Cel: 44 px wysokosci dla kazdego elementu dotykowego. Szerokosc steppera
   zostaje 107 px (tyle daje kolumna produktu przy 390 px) - rosnie wysokosc
   i pole klikalne przyciskow, nie szerokosc wiersza.
   Zakres: wylacznie koszyk i zamowienie, wylacznie ponizej 1000 px. */
@media (max-width:999px){
  body.woocommerce-cart .wc-block-components-quantity-selector__button{
    min-width:40px;height:44px;font-size:16px;
  }
  body.woocommerce-cart .wc-block-cart-item__remove-link{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:44px;min-height:44px;
  }
  body.woocommerce-cart .wc-block-components-panel__button,
  body.woocommerce-checkout .wc-block-components-panel__button{
    min-height:44px;
  }
  /* !important: WooCommerce Blocks trzyma te dwie wlasciwosci na selektorach
     o wyzszej specyficznosci (3 klasy) niz nasz body.<klasa> .<klasa> - bez
     !important reguly przechodzily tylko czesciowo (font-size tak, min-height nie).
     Zweryfikowane pomiarem getComputedStyle przy 390 px. */
  body.woocommerce-checkout .wc-block-components-checkout-place-order-button{
    min-height:50px !important;font-size:15px;
  }
  body.woocommerce-cart .wc-block-components-checkbox__input,
  body.woocommerce-checkout .wc-block-components-checkbox__input{
    width:24px !important;height:24px !important;
  }
}

/* --- 7. KARTA PRODUKTU - touch targety steppera ilosci --------------------
   Zmierzone na realnym viewporcie 390 px: przyciski "-" / "+" oraz pole ilosci
   maja 35 x 35 px. To ponizej progu 44 px (WCAG 2.5.5). Rosnie wylacznie
   wysokosc pola dotykowego - uklad wiersza (szerokosci) bez zmian.
   Zakres: karta produktu, ponizej 1000 px. */
@media (max-width:999px){
  body.single-product form.cart .quantity input.qty,
  body.single-product form.cart .quantity .plus,
  body.single-product form.cart .quantity .minus{
    min-height:52px;
  }
}

/* --- 8. KOSZYK / CHECKOUT - checkboxy: realny touch target to caly <label>,
   nie sam wizualny znacznik ---------------------------------------------
   Zmierzone na realnym viewporcie 390 px: zadeklarowana szerokosc 24 px na
   .wc-block-components-checkbox__input (patrz sekcja 6) nie jest w pelni
   respektowana przez ten silnik render. dla checkboxa "Regulamin" (potwierdzone:
   nawet `el.style.setProperty('width','24px','important')` wprost na elemencie
   nie zmienia realnego `getBoundingClientRect().width` - to ograniczenie
   natywnego renderowania inputu, nie kolizja reguł CSS). Cały wiersz jest
   jednak owinięty w <label>, więc klik działa w całej jego szerokości -
   powiekszamy min-height LABELKI (rzeczywisty obszar klikalny), a nie
   dalej walczymy z samym inputem. Zmierzone przed poprawką: 24-40 px.
   Zakres: koszyk i checkout, ponizej 1000 px. */
@media (max-width:999px){
  body.woocommerce-cart .wc-block-components-checkbox label,
  body.woocommerce-checkout .wc-block-components-checkbox label{
    min-height:44px;
    display:flex;
    align-items:center;
  }
}

/* --- 9. CHECKOUT - przycisk wyboru Paczkomatu (wtyczka Inpost Paczkomaty) --
   Zmierzone: "Wybierz Paczkomat" / "Zmień Paczkomat" 119-243 x 36 px.
   Ponizej progu 44 px wysokosci. Zakres: koszyk i checkout, ponizej 1000 px. */
@media (max-width:999px){
  body.woocommerce-checkout .select-paczkomat-button,
  body.woocommerce-cart .select-paczkomat-button{
    -webkit-appearance:none;
    appearance:none;
    min-height:44px;
  }
}
/* ==========================================================================
   PUF - KARTY PRODUKTOW + SKLEP / KATEGORIE - NEXT LEVEL
   Dodane: 2026-08-26 (etap Product Catalog + Product Pages)
   ZAKRES: .single-product (wszystkie 5 produktow) oraz
           .woocommerce ul.products na /sklep/ i /kategoria-produktu/ (obie linie)
   UWAGA: reguly Homepage V6 (.page-id-44 ...) maja wyzsza specyficznosc
          i pozostaja nietkniete.
   ========================================================================== */

/* --- P1. CENA - kolor marki + zakaz lamania "149,97 zl" -------------------- */
.single-product .summary .price,
.single-product .summary .price .amount,
.single-product .summary .price bdi,
.single-product .summary .price ins,
.single-product .summary .price del,
.single-product .woocommerce-variation-price .price,
.single-product .woocommerce-variation-price .amount,
.single-product .woocommerce-variation-price bdi,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .amount,
.woocommerce ul.products li.product .price bdi,
.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price del{
  white-space:nowrap !important;
  color:var(--puf-amber-deep) !important;
  font-family:'Roboto',-apple-system,sans-serif !important;
  font-weight:700 !important;
}
.woocommerce ul.products li.product .price{font-size:18px !important}
.single-product .summary .price{font-size:30px !important;line-height:1.2 !important}

/* --- P2. COMMERCE CTA #E8A33D (add-to-cart single + petla) ---------------- */
.single-product button.single_add_to_cart_button,
.single-product .single_add_to_cart_button,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .product-add-to-cart a{
  background:var(--puf-amber) !important;
  background-color:var(--puf-amber) !important;
  background-image:none !important;
  color:var(--puf-ink) !important;
  border:0 !important;
  border-color:var(--puf-amber) !important;
  border-radius:0 !important;
  font-family:'Roboto',-apple-system,sans-serif !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
}
.single-product button.single_add_to_cart_button:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover{
  background:var(--puf-amber-hover) !important;
  background-color:var(--puf-amber-hover) !important;
  color:var(--puf-ink) !important;
}
.single-product button.single_add_to_cart_button{
  min-height:52px !important;padding:16px 34px !important;font-size:15px !important;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button{
  min-height:44px !important;
  display:inline-flex !important;align-items:center;justify-content:center;
}

/* --- P3. NAZWA PRODUKTU W PETLI ------------------------------------------- */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:'Roboto',-apple-system,sans-serif;font-weight:500;color:var(--puf-ink);
  font-size:17px;line-height:1.3;
}

/* --- P4. NAGLOWEK ARCHIWUM (Sklep / kategoria) + opis kategorii ----------- */
.woocommerce-products-header{padding-bottom:6px}
.woocommerce-products-header__title,
.tax-product_cat .page-title,
.post-type-archive-product .page-title{
  font-family:'Roboto',-apple-system,sans-serif !important;color:var(--puf-ink) !important;
}
.term-description,
.woocommerce-product-category-description{
  font-family:'Roboto',-apple-system,sans-serif;
  font-size:16px;line-height:1.7;color:var(--puf-text-2);
  max-width:760px;margin:0 0 26px;
}
.term-description p{margin:0 0 12px}
/* --- P4b. PRZELACZNIK LINII w opisie kategorii ----------------------------
   UWAGA TECHNICZNA: opis kategorii (term description) przechodzi przez kses,
   ktory USUWA <div>, <p>, <h2>. Dlatego przelacznik nie moze byc <div class=
   "puf-cat-switch"> - musi byc zwyklym akapitem tekstu. wpautop opakowuje
   akapity w <p>, wiec ostatni akapit opisu = link przejscia do drugiej linii. */
.term-description p:last-child{margin:18px 0 0}
.term-description p:last-child a,
.term-description p:last-child a:visited{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:11px 20px;
  background:#fff;border:1px solid var(--puf-ink);
  color:var(--puf-ink) !important;text-decoration:none;font-weight:600;font-size:14px;
}
.term-description p:last-child a:hover{background:var(--puf-ink);color:#fff !important}

/* --- P4c. INTRO NA /sklep/ (tresc strony "Sklep", id 7) ------------------- */
.puf-shop-intro{
  font-family:'Roboto',-apple-system,sans-serif;
  max-width:760px;margin:0 0 26px;
}
.puf-shop-intro p{font-size:16px;line-height:1.7;color:var(--puf-text-2);margin:0 0 12px}
.puf-shop-intro b{color:var(--puf-ink)}
.puf-shop-links{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0 !important}
.puf-shop-links a,.puf-shop-links a:visited{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:11px 20px;
  background:#fff;border:1px solid var(--puf-ink);
  color:var(--puf-ink) !important;text-decoration:none;font-weight:600;font-size:14px;
}
.puf-shop-links a:hover{background:var(--puf-ink);color:#fff !important}

/* --- P5. .pufp - komponenty Next Level (wspolne dla 5 kart) --------------- */
.pufp-hero h2{margin-bottom:14px}
.pufp-trust{padding:22px 0 !important}
.pufp-trust ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.pufp-trust li{
  margin:0;padding:14px 16px;background:#FAF7F2;border:1px solid var(--puf-line-soft);
  font-family:'Roboto',-apple-system,sans-serif;font-size:13.5px;line-height:1.45;
}
.pufp-trust li b{display:block;color:var(--puf-ink);font-weight:600;font-size:14px;margin-bottom:3px}
.pufp-trust li span{display:block;color:var(--puf-text-3);font-size:12.5px}
.pufp-trust li a{color:var(--puf-text-3);text-decoration:underline}

.pufp-ps{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pufp-ps > div{padding:22px;border:1px solid var(--puf-line-soft)}
.pufp-ps .pufp-s{background:#FAF7F2}
.pufp-ps h3{
  font-family:'Roboto',-apple-system,sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--puf-text-3);margin:0 0 8px;
}
.pufp-ps p{margin:0;font-size:15px}

.pufp-ben{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pufp-ben > div{padding-top:16px;border-top:2px solid var(--puf-amber)}
.pufp-ben h3{font-size:15.5px;font-weight:600;margin:0 0 6px;color:var(--puf-ink)}
.pufp-ben p{margin:0;font-size:14.5px}

ol.pufp-how{margin:0;padding:0 0 0 22px;font-family:'Roboto',-apple-system,sans-serif}
ol.pufp-how li{font-size:15px;line-height:1.65;color:#3f3f3f;margin:0 0 10px;padding-left:4px}
ol.pufp-how li b{color:var(--puf-ink);font-weight:600}
.pufp-note{
  margin-top:18px;padding:14px 16px;background:#FAF7F2;border-left:3px solid var(--puf-amber);
  font-size:13.5px;line-height:1.6;color:var(--puf-text-2);
}
ul.pufp-set{margin:0;padding:0 0 0 20px;font-family:'Roboto',-apple-system,sans-serif}
ul.pufp-set li{font-size:15px;line-height:1.75;color:#3f3f3f;margin:0 0 6px}
.pufp-revnote{font-size:13.5px;color:var(--puf-text-3);margin:0 0 20px;max-width:700px}
.pufp-rc .adv{font-size:13px;color:var(--puf-text-2);margin:0 0 14px}
.pufp-close{text-align:left}

/* --- P6. MOBILE 390 / <=767 px -------------------------------------------- */
@media (max-width:767px){
  .pufp-trust ul{grid-template-columns:1fr;gap:10px}
  .pufp-ps{grid-template-columns:1fr;gap:12px}
  .pufp-ben{grid-template-columns:1fr;gap:22px}
  .single-product button.single_add_to_cart_button{width:100% !important}
  .single-product .summary .price{font-size:26px !important}
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product a.button{width:100%}
  .term-description p:last-child a,
  .puf-shop-links a{width:100%;text-align:center}
  .puf-shop-links{flex-direction:column;gap:8px}
  .pufp-spec th,.pufp-spec td{display:block;width:auto;padding:8px 0}
  .pufp-spec th{padding-bottom:2px;border-bottom:0}
  .pufp-spec td{padding-top:0}
  /* touch target 44 px dla <summary> w FAQ (zmierzone 26 px @390) */
  .pufp-faq details{padding:6px 0}
  .pufp-faq summary{padding:11px 0}
}

/* ==========================================================================
   PUF - PRIMARY COMMERCE CTA + HITBOX InPost - remediacja 2026-08-27 (runda 2)
   ZAKRES: wylacznie glowna akcja zakupowa w koszyku i zamowieniu
           oraz przycisk wyboru paczkomatu.
   NIE dotyka: kontrolek drugorzednych, nawigacji, konfiguracji platnosci
           ani logiki wtyczki InPost.
   ========================================================================== */

/* --- P7. GLOWNE CTA ZAKUPOWE: koszyk -> zamowienie, zamowienie -> zaplac --
   Bylo rgb(50,55,60) (charcoal Salienta). Kontrast #1A1A1A na #E8A33D = 8,07:1
   (AAA). Bialy tekst na amber dawalby 2,16:1 - dlatego tekst jest atramentowy,
   spojnie z .pufp-cta i przyciskiem "Dodaj do koszyka". */
body.woocommerce-cart .wc-block-cart__submit-button,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button{
  background:var(--puf-amber) !important;
  background-color:var(--puf-amber) !important;
  background-image:none !important;
  color:var(--puf-ink) !important;
  border:0 !important;
  border-radius:0 !important;
  font-family:'Roboto',-apple-system,sans-serif !important;
  font-weight:700 !important;
  min-height:48px !important;
}
body.woocommerce-cart .wc-block-cart__submit-button:hover,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover{
  background:var(--puf-amber-hover) !important;
  background-color:var(--puf-amber-hover) !important;
  color:var(--puf-ink) !important;
}
/* Focus: tlo jest juz amber, wiec widocznosc daje obrys, nie zmiana tla. */
body.woocommerce-cart .wc-block-cart__submit-button:focus-visible,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:focus-visible{
  outline:3px solid var(--puf-ink) !important;
  outline-offset:2px !important;
}
/* Stan zablokowany / w trakcie wysylki zamowienia. */
body.woocommerce-cart .wc-block-cart__submit-button:disabled,
body.woocommerce-cart .wc-block-cart__submit-button[aria-disabled="true"],
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:disabled,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button[aria-disabled="true"]{
  background:#DCD5C9 !important;
  background-color:#DCD5C9 !important;
  color:#6E6E6E !important;
  cursor:not-allowed !important;
}

/* --- P8. InPost "Zmien paczkomat" - realny hitbox 44 px ------------------
   Zmierzone: BUTTON 119,1 x 36 px, font 12 px, line-height 12 px, padding 10 px.
   Podnosimy wysokosc pola klikalnego, nie zmieniamy logiki wtyczki ani napisu.
   Regula bezwarunkowa - poprzednia dzialala tylko ponizej 1000 px. */
.select-paczkomat-button{
  -webkit-appearance:none !important;
  appearance:none !important;
  min-height:44px !important;
  padding:10px 16px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
}

/* --- P9. MINI-KOSZYK W NAGLOWKU - usuniecie niebieskiego Salienta --------
   Zmierzone przy pelnym koszyku: oba przyciski rgb(52,82,255), 136 x 32 px.
   "Zamowienie" to glowna akcja zakupowa w tym miejscu -> amber.
   "Zobacz koszyk" to nawigacja -> atrament, NIE amber.
   Oba dostaja 44 px wysokosci pola klikalnego.
   SPECYFICZNOSC: Salient ma tu #header-outer .widget_shopping_cart a.button
   z !important (1,1,1). Dlatego prefiks #header-outer .widget_shopping_cart
   jest konieczny - bez niego samo !important nie wystarcza. */
#header-outer .widget_shopping_cart .woocommerce-mini-cart__buttons a.button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:44px !important;
  border-radius:0 !important;
  font-family:'Roboto',-apple-system,sans-serif !important;
  font-weight:700 !important;
  background-image:none !important;
  border:0 !important;
}
#header-outer .widget_shopping_cart .woocommerce-mini-cart__buttons a.button:not(.checkout){
  background:var(--puf-ink) !important;
  background-color:var(--puf-ink) !important;
  color:#fff !important;
}
#header-outer .widget_shopping_cart .woocommerce-mini-cart__buttons a.button:not(.checkout):hover{
  background:#333 !important;background-color:#333 !important;color:#fff !important;
}
#header-outer .widget_shopping_cart .woocommerce-mini-cart__buttons a.button.checkout{
  background:var(--puf-amber) !important;
  background-color:var(--puf-amber) !important;
  color:var(--puf-ink) !important;
}
#header-outer .widget_shopping_cart .woocommerce-mini-cart__buttons a.button.checkout:hover{
  background:var(--puf-amber-hover) !important;
  background-color:var(--puf-amber-hover) !important;
  color:var(--puf-ink) !important;
}
#header-outer .widget_shopping_cart .woocommerce-mini-cart__buttons a.button:focus-visible{
  outline:3px solid var(--puf-ink) !important;outline-offset:2px !important;
}

/* ==========================================================================
   PUF - UJEDNOLICENIE WIZUALNE - pas uproszczenia 2026-08-27 (runda 3)
   BENCHMARK: bejbino.pl (tylko prostota i spojnosc, zero kopiowania)
   PROBLEM: Homepage V6, /sklep/ i kategorie uzywaly juz systemu PUF
   (Fraunces / Inter / #1A1A1A / radius 0), ale KARTA PRODUKTU nad zgieciem
   i STOPKA renderowaly sie w domyslnych stylach Salienta (Open Sans, szarosci,
   radius 4-50 px). Klient widzial dwa rozne sklepy na jednej stronie.
   ZAKRES: wylacznie typografia, promienie, rozmiary pol i tlo stopki.
   Zero zmian tresci, cen, wariantow, ukladu sekcji i architektury.
   ========================================================================== */

/* --- P10. KARTA PRODUKTU - typografia PUF nad zgieciem -------------------
   Zmierzone PRZED:
     H1            Open Sans 54px/600 rgb(68,68,68)
     krotki opis   Open Sans 14px    rgb(103,103,103)
     breadcrumb    Open Sans 12,88px rgb(103,103,103)
     etykieta war. Open Sans 12px    rgb(103,103,103)
   H1 54 px byl 1,8x wiekszy niz naglowki sekcji ponizej (.pufp h2 = 30 px)
   - odwrocona hierarchia. Docelowo H1 34 px > H2 30 px. */
body.single-product .product_title{
  font-family:'Roboto',-apple-system,sans-serif !important;
  font-size:clamp(26px,3.4vw,34px) !important;
  font-weight:500 !important;
  line-height:1.2 !important;
  letter-spacing:-.01em !important;
  color:var(--puf-ink) !important;
  margin:0 0 14px !important;
}
body.single-product .woocommerce-product-details__short-description,
body.single-product .woocommerce-product-details__short-description p{
  font-family:'Roboto',-apple-system,sans-serif !important;
  font-size:16px !important;
  line-height:1.65 !important;
  color:var(--puf-text-2) !important;
}
body.single-product .woocommerce-product-details__short-description{
  max-width:54ch;
  margin:0 0 22px !important;
}
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a{
  font-family:'Roboto',-apple-system,sans-serif !important;
  font-size:13px !important;
  color:var(--puf-text-3) !important;
}
body.single-product .variations label,
body.single-product .variations th{
  font-family:'Roboto',-apple-system,sans-serif !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  color:var(--puf-ink) !important;
}
/* Select wariantu mial przezroczyste tlo I przezroczysta ramke - nie czytal
   sie jako kontrolka do klikniecia. */
body.single-product .variations select{
  font-family:'Roboto',-apple-system,sans-serif !important;
  font-size:15px !important;
  color:var(--puf-ink) !important;
  background-color:#fff !important;
  border:1px solid var(--puf-line) !important;
  border-radius:0 !important;
  min-height:48px !important;
  padding:0 14px !important;
}
/* Obrazy produktowe: 'fill' rozciaga zrodlo o innych proporcjach.
   'contain' chroni przed znieksztalceniem przy przyszlych zdjeciach. */
body.single-product .woocommerce-product-gallery img,
.woocommerce ul.products li.product img{
  object-fit:contain !important;
}

/* --- P11. JEDEN SYSTEM PRZYCISKOW W WIERSZU ZAKUPOWYM --------------------
   Zmierzone PRZED w jednym wierszu:
     stepper -/+   35 x 35 px, border-radius 50px (okragle)
     pole ilosci   46 x 35 px, border-radius 4px
     Dodaj do k.  221 x 52 px, border-radius 4px
   Trzy rozne promienie obok siebie, przy systemie PUF = 0 wszedzie indziej.
   CTA zajmowal 31% szerokosci panelu (716 px) - za malo widoczny. */
/* SPECYFICZNOSC: Salient ma body[data-button-style*="slightly_rounded"]
   button[type="submit"] z !important = (0,2,2). Selektor
   body.single-product .single_add_to_cart_button to (0,2,1) - przegrywa.
   Dodanie [data-button-style] i [type] daje (0,4,2) i wygrywa. */
body.single-product[data-button-style] button.single_add_to_cart_button[type="submit"],
body.single-product .single_add_to_cart_button{
  border-radius:200px !important;
  width:auto !important;flex:1 1 auto;
  max-width:420px !important;
}
body.single-product form.cart .quantity{
  margin:0 0 16px !important;
}
body.single-product form.cart .quantity input.qty,
body.single-product form.cart .quantity input.input-text{
  font-family:'Roboto',-apple-system,sans-serif !important;
  font-size:15px !important;
  color:var(--puf-ink) !important;
  background:#fff !important;
  border:1px solid var(--puf-line) !important;
  border-radius:0 !important;
  min-height:52px !important;
  height:52px !important;
  width:56px !important;
}
body.single-product form.cart .quantity input.plus,
body.single-product form.cart .quantity input.minus,
body.single-product form.cart .quantity .plus,
body.single-product form.cart .quantity .minus{
  font-family:'Roboto',-apple-system,sans-serif !important;
  border-radius:0 !important;
  border:1px solid var(--puf-line) !important;
  background:#fff !important;
  color:var(--puf-ink) !important;
  min-height:44px !important;
  height:44px !important;
  min-width:44px !important;
  width:44px !important;
}

/* --- P12. STOPKA - system PUF ------------------------------------------
   Zamrozone zrodlo V6 (design-assets/homepage-v6-handoff/direction-v6.html)
   mowi: footer{background:var(--ink)} = #1A1A1A.
   Live renderowala sie w #252525 (domyslna wartosc Salienta) i w Open Sans.
   To jest doprowadzenie do zgodnosci z autorytatywnym zrodlem, nie redesign.
   Uklad stopki (4 kolumny, 11 linkow) zostaje bez zmian. */
#footer-outer,
#footer-outer #footer-widgets{
  background-color:var(--puf-ink) !important;
}
#footer-outer #copyright{
  background-color:var(--puf-ink) !important;
  border-top:1px solid rgba(255,255,255,.12) !important;
}
#footer-outer h4,
#footer-outer .widgettitle,
#footer-outer .widget h4{
  font-family:'Roboto',-apple-system,sans-serif !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:.09em !important;
  text-transform:uppercase !important;
  color:#fff !important;
}
#footer-outer a,
#footer-outer p,
#footer-outer li,
#footer-outer #copyright p{
  font-family:'Roboto',-apple-system,sans-serif !important;
  font-size:14px !important;
  color:#c9c9c9 !important;
}
#footer-outer a:hover{color:#fff !important}

/* --- P13. NAGLOWEK, SORTOWANIE, SKALA H1 - domkniecie systemu ------------
   Zmierzone PRZED:
     logo         Open Sans 22px   rgb(68,68,68)
     linki nawig. Open Sans 14px   rgb(153,153,153)  <- kontrast 2,85:1 (ponizej AA)
     select sort. Open Sans 14px   radius 4px, 235x45
     H1 archiwum  Fraunces 54px    (Homepage V6 ma 38px - dwie rozne skale)
   ZRODLO: zamrozony direction-v6.html mowi
     .f-nav{border-bottom:1px solid #E9E3D9}
     .f-nav-links a{color:var(--ink)}  = #1A1A1A, font-size 14,5px
   Live odchylalo sie od tego zapisu. To doprowadzenie do zgodnosci
   z autorytatywnym zrodlem, nie redesign. Uklad naglowka bez zmian. */
#header-outer #logo,
#header-outer #logo:hover{
  font-family:'Roboto',-apple-system,sans-serif !important;
  font-weight:600 !important;
  color:var(--puf-ink) !important;
  letter-spacing:.01em !important;
}
#header-outer nav .sf-menu > li > a,
#header-outer nav .menu > li > a,
#header-outer .sf-menu li a{
  font-family:'Roboto',-apple-system,sans-serif !important;
  font-size:14.5px !important;
  font-weight:500 !important;
  color:var(--puf-ink) !important;
}
#header-outer nav .sf-menu > li > a:hover{color:var(--puf-text-3) !important}
#header-outer{
  border-bottom:1px solid var(--puf-line-soft) !important;
}

/* Sortowanie w sklepie i licznik wynikow - te same reguly co reszta kontrolek. */
.woocommerce select.orderby{
  font-family:'Roboto',-apple-system,sans-serif !important;
  font-size:14px !important;
  color:var(--puf-ink) !important;
  background-color:#fff !important;
  border:1px solid var(--puf-line) !important;
  border-radius:0 !important;
  min-height:44px !important;
  padding:0 14px !important;
}
.woocommerce .woocommerce-result-count{
  font-family:'Roboto',-apple-system,sans-serif !important;
  font-size:14px !important;
  color:var(--puf-text-3) !important;
}

/* Jedna skala H1 w calym sklepie. Homepage V6 ma 38 px - archiwa i strony
   dostaja te sama gorna granice, zamiast 54 px. */
.woocommerce-products-header__title,
.tax-product_cat .page-title,
.post-type-archive-product .page-title,
body.woocommerce-cart .entry-title,
body.woocommerce-checkout .entry-title{
  font-family:'Roboto',-apple-system,sans-serif !important;
  font-size:clamp(28px,3.6vw,38px) !important;
  font-weight:500 !important;
  line-height:1.2 !important;
  color:var(--puf-ink) !important;
}

/* --- P14. RESZTKI OPEN SANS - domkniecie typografii ----------------------
   Salient ustawia font-family na <b>/<strong> jawnie, wiec pogrubienia
   NIE dziedzicza kroju po akapicie. Efekt: w srodku zdania pisanego Inter
   pogrubione slowa renderowaly sie w Open Sans. Dotyczylo to paska zaufania,
   krokow "Jak uzywac", opinii i opisow kategorii na wszystkich 5 kartach.
   Do tego meta produktu, zakladki WooCommerce i "Podobne produkty". */
.pufp b, .pufp strong,
.puf-review b, .puf-review strong,
.term-description b, .term-description strong,
.puf-shop-intro b, .puf-shop-intro strong,
#footer-outer b, #footer-outer strong{
  font-family:inherit !important;
  font-weight:600 !important;
}
/* Gwiazdki w opiniach na Homepage V6 dziedziczyly Open Sans po body. */
.puf-review .stars, .pufp-rc .st{
  font-family:'Roboto',-apple-system,sans-serif !important;
}
body.single-product .product_meta,
body.single-product .product_meta a,
body.single-product .woocommerce-tabs .tabs li a{
  font-family:'Roboto',-apple-system,sans-serif !important;
  font-size:14px !important;
  color:var(--puf-text-3) !important;
}
body.single-product .woocommerce-tabs .tabs li.active a{
  color:var(--puf-ink) !important;
  font-weight:600 !important;
}
body.single-product section.related > h2,
body.single-product .related > h2,
body.single-product .up-sells > h2{
  font-family:'Roboto',-apple-system,sans-serif !important;
  font-size:clamp(21px,3vw,30px) !important;
  font-weight:500 !important;
  color:var(--puf-ink) !important;
}

/* --- P15. LICZNIK KOSZYKA W NAGLOWKU ------------------------------------
   Ostatni element spoza palety PUF. Tlo rgb(52,82,255) (niebieski Salienta),
   przy 390 px widoczny na kazdej stronie. Zamiana na amber + atrament.
   Kontrast #1A1A1A na #E8A33D = 8,07:1. */
#header-outer .cart-menu-wrap .cart-wrap span,
#header-outer #mobile-cart-link .cart-wrap span,
#header-outer .nectar-woo-cart .cart-wrap span{
  background-color:var(--puf-amber) !important;
  color:var(--puf-ink) !important;
  font-family:'Roboto',-apple-system,sans-serif !important;
  font-weight:700 !important;
}

/* ==========================================================================
   PUF - HERO V6.1: master-brand router + photo gates -> JEDNA sekcja
   Zatwierdzona przez wlasciciela zmiana strukturalna, 2026-08-27.
   PROBLEM (zmierzony na live): fold 714 px. Router zajmowal 150-459 px
   i byl WYLACZNIE tekstem - zero produktu. Photo gates zaczynaly sie
   dopiero na 480 px, wiec obrazy byly przeciete linia zgiecia.
   Klient widzial najpierw bialy blok tekstu, a nie to, co PUF sprzedaje.
   ROZWIAZANIE: naglowek + dwa panele produktowe w jednej sekcji.
   Obraz na gorze panelu, tekst pod nim - zero nakladki gradientowej,
   wiec zero problemu z kontrastem i zero dekoracji.
   object-fit:contain - zdjecia zrodlowe sa kwadratowe 2560x2560,
   kadrowanie 'cover' obcinaloby modelke (1-9) i dziecko (1-6).
   ========================================================================== */
.page-id-44 .puf-hero2{max-width:1245px;margin:0 auto}
.page-id-44 .puf-hero2-head{
  max-width:760px;margin:0 auto;text-align:center;
  padding:44px 0 28px;
}
.page-id-44 .puf-hero2-head h1{
  font-family:'Roboto',-apple-system,sans-serif;font-weight:500;
  font-size:38px;line-height:1.24;color:var(--puf-ink);margin:0;
}
.page-id-44 .puf-hero2-panels{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-bottom:64px;
}
/* UKLAD PANELU: obraz OBOK tekstu, nie nad nim.
   Powod jest pomiarowy, nie estetyczny: zmierzone granice tresci w zrodlach
   to 94-97% kadru (marginesy 1-4%). Zadne przyciecie 'cover' nie jest
   bezpieczne - obcieloby okulary i modelke (1-9) oraz dziecko (1-6).
   Wiec obraz zostaje kwadratowy i nieprzyciety, a wysokosc panelu
   kontrolujemy szerokoscia kolumny. Kwadrat w kwadracie = zero listew. */
.page-id-44 .puf-hero2-panel{
  min-width:0;border:1px solid var(--puf-line-soft);background:#fff;
  display:grid;grid-template-columns:1fr 1fr;align-items:center;overflow:hidden;
}
.page-id-44 .puf-hero2-panel img{
  display:block;margin:0;border-radius:0;
  width:100% !important;height:auto !important;max-width:none;
  aspect-ratio:1/1;object-fit:contain;background:#FAF7F2;
}
.page-id-44 .puf-hero2-copy{padding:20px 24px;min-width:0}
.page-id-44 .puf-hero2-copy h2{
  font-family:'Roboto',-apple-system,sans-serif;font-size:26px;font-weight:500;
  color:var(--puf-ink);margin:0 0 8px;
}
.page-id-44 .puf-hero2-copy p{
  font-family:'Roboto',-apple-system,sans-serif;
  font-size:15px;line-height:1.55;color:var(--puf-text-2);margin:0 0 18px;
}
/* CTA to zwykly link .puf-btn - hover i focus obsluguja reguly z sekcji 1.
   UWAGA: panel MUSI byc <div>, nie <a>. wpautop rozcina inline <a>
   zawierajacy blokowy <div> i tworzy puste duplikaty linku. Sprawdzone. */
.page-id-44 .puf-hero2-copy p:last-child{margin:0}

/* FINAL ROUTING - kompresja. Bylo padding:140px 0 => sekcja 483 px wysokosci.
   To druga szansa na routing po przeczytaniu strony, nie drugi hero. */
.page-id-44 .puf-final{padding:72px 0}
.page-id-44 .puf-final h2{font-size:32px;margin:0 0 14px}
.page-id-44 .puf-final p{margin:0 auto 26px}

@media (max-width:767px){
  .page-id-44 .puf-hero2-head{padding:30px 0 22px}
  .page-id-44 .puf-hero2-head h1{font-size:30px}
  .page-id-44 .puf-hero2-panels{grid-template-columns:1fr;gap:16px;padding-bottom:44px}
  .page-id-44 .puf-hero2-panel{grid-template-columns:1fr}
  .page-id-44 .puf-hero2-copy{padding:20px 20px 24px}
  .page-id-44 .puf-hero2-copy h2{font-size:24px}
  .page-id-44 .puf-hero2-panel .puf-btn{width:100%}
  .page-id-44 .puf-final{padding:52px 0}
  .page-id-44 .puf-final h2{font-size:26px}
}

/* ==========================================================================
   PUF - HERO V6.2: pelnoekranowy baner fotograficzny (2026-08-27)
   Kierunek zatwierdzony przez wlasciciela. Zastepuje uklad "obraz obok tekstu
   w ramkach", ktory czytal sie jak dwie karty produktowe.
   ZASADA: fotografia dominuje, tekst SIEDZI NA zdjeciu, zero ramek,
   zero odstepu miedzy polowami, zero bialego wstepu nad obrazami.
   Assety: puf-eyewear-lifestyle.jpg (portret lifestyle, produkt noszony)
           puf-kids-lifestyle.jpg   (prawa, lifestyle'owa polowa kompozytu
                                     kids-assort-pink.jpg - dziecko przy biurku
                                     z zawieszka PUF Kids)
   Oba pochodza z istniejacych assetow projektu. Zero generowania, zero stocku.
   ========================================================================== */
/* PELNA SZEROKOSC: atrybut full_width="stretch_row" WPBakery nie rozciagnal
   wiersza w tym motywie (zmierzone: 1245 px zamiast 1440). Rozciagamy CSS-em.
   Marginesy ujemne zamiast width:100vw - nie powoduja poziomego scrolla. */
.page-id-44 .puf-hero3{
  position:relative;overflow:hidden;background:var(--puf-ink);
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
}
.page-id-44 .puf-hero3-split{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  height:clamp(460px,38vw,560px);
}
.page-id-44 .puf-hero3-half{position:relative;overflow:hidden;min-width:0}
.page-id-44 .puf-hero3-half img{
  position:absolute;inset:0;margin:0;border-radius:0;
  width:100% !important;height:100% !important;max-width:none;
  object-fit:cover;display:block;
}
.page-id-44 .puf-hero3-half--eyewear img{object-position:62% 30%}
.page-id-44 .puf-hero3-half--kids img{object-position:50% 50%}

/* Naglowek marki - kompaktowa nakladka NA banerze, nie osobna biala sekcja. */
.page-id-44 .puf-hero3-head{
  position:absolute;left:0;right:0;top:0;z-index:3;
  padding:30px 24px 54px;text-align:center;pointer-events:none;
  background:linear-gradient(180deg,rgba(26,26,26,.62) 0%,rgba(26,26,26,.34) 55%,rgba(26,26,26,0) 100%);
}
.page-id-44 .puf-hero3-eyebrow{
  font-family:'Roboto',-apple-system,sans-serif;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;font-weight:600;margin:0 0 10px;opacity:.92;
}
.page-id-44 .puf-hero3-head h1{
  font-family:'Roboto',-apple-system,sans-serif;font-weight:500;
  font-size:clamp(26px,2.6vw,38px);line-height:1.2;
  color:#fff;margin:0 auto;max-width:20ch;
  text-shadow:0 1px 18px rgba(0,0,0,.35);
}

/* Blok linii - siedzi na dole swojej polowy zdjecia. */
.page-id-44 .puf-hero3-copy{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:64px 34px 34px;
  background:linear-gradient(0deg,rgba(26,26,26,.86) 0%,rgba(26,26,26,.52) 48%,rgba(26,26,26,0) 100%);
}
.page-id-44 .puf-hero3-copy h2{
  font-family:'Roboto',-apple-system,sans-serif;font-size:clamp(22px,2vw,28px);font-weight:500;
  color:#fff;margin:0 0 6px;
}
.page-id-44 .puf-hero3-copy p{
  font-family:'Roboto',-apple-system,sans-serif;
  font-size:15px;line-height:1.5;color:rgba(255,255,255,.9);
  margin:0 0 16px;max-width:34ch;
}
.page-id-44 .puf-hero3-copy p:last-child{margin:0}

@media (max-width:767px){
  .page-id-44 .puf-hero3-split{grid-template-columns:1fr;height:auto}
  .page-id-44 .puf-hero3-half{height:440px}
  .page-id-44 .puf-hero3-half--eyewear{height:520px}
  .page-id-44 .puf-hero3-head{padding:22px 24px 44px}
  .page-id-44 .puf-hero3-head h1{font-size:24px;max-width:16ch}
  .page-id-44 .puf-hero3-copy{padding:56px 20px 24px}
  .page-id-44 .puf-hero3-copy .puf-btn{width:100%}
}

/* ==========================================================================
   PUF - SEKCJA 2: FEATURED PRODUCT (2026-08-27)
   Bylo: 2x H2 ("Nosisz okulary korekcyjne?" + tytul w karcie Woo),
         2x CTA ("Wybierz opcje" w karcie + "Zobacz wszystkie okulary"),
         2x obraz (610px + miniatura 96px), karta Woo z ramka 460x138,
         3 akapity copy. Sekcja 1245 x 625 px.
   Jest:  jedno zdjecie, jedna nazwa produktu, jedno zdanie, 3 korzysci,
          cena i JEDNO CTA prowadzace do produktu #30.
   CENA: nadal renderowana przez [products ids="30"], czyli WooCommerce
   pozostaje zrodlem prawdy. Ukrywamy tylko wizualna karte - obraz, tytul
   i przycisk - a zostawiamy sam element .price. Zero hardcodowanej ceny.
   ========================================================================== */
.page-id-44 .puf-feat{max-width:520px}
.page-id-44 .puf-feat h2{
  font-family:'Roboto',-apple-system,sans-serif;font-weight:500;
  font-size:clamp(26px,2.5vw,34px);line-height:1.2;
  color:var(--puf-ink);margin:0 0 14px;
}
.page-id-44 .puf-feat .lead{
  font-family:'Roboto',-apple-system,sans-serif;
  font-size:16px;line-height:1.6;color:var(--puf-text-2);margin:0;
}
.page-id-44 ul.puf-feat-benefits{
  display:flex;flex-wrap:wrap;gap:12px 30px;
  list-style:none;margin:22px 0 0;padding:0;
}
.page-id-44 ul.puf-feat-benefits li{
  font-family:'Roboto',-apple-system,sans-serif;
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--puf-ink);margin:0;
  /* Salient ustawia list-style na LI, nie na UL - stad kropki mimo
     list-style:none na liscie nadrzednej. */
  list-style:none !important;display:inline-block;
}
.page-id-44 img.puf-feat-img{
  display:block;width:100%;max-width:460px;height:auto;margin:0;
  border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.14),0 20px 70px rgba(0,0,0,.12);
}

/* CENA USUNIETA z tej sekcji decyzja wlasciciela (2026-08-27).
   Wraz z shortcodem [products ids="30"] znika tez ukryty duplikat H2
   z petli WooCommerce - sekcja ma teraz dokladnie jeden naglowek w DOM.
   Cena pozostaje oczywiscie na karcie produktu i w sklepie. */

/* Strzalka w glownym CTA - prosty glif, bez kolka i bez animacji.
   Zasada z bejbino.pl (etykieta + strzalka kierunkowa) przelozona
   na system PUF: zero ozdobnikow, zero dodatkowego koloru. */
.page-id-44 .puf-btn-buy::after{
  content:"→";
  margin-left:10px;
  font-weight:600;
  line-height:1;
}
/* Odstepy: zmierzone 55 px miedzy korzysciami a cena i 76 px miedzy cena
   a CTA - suma trzech niezaleznych marginesow (blok tekstu 21, cena 26,
   wrapper .woocommerce 24, przycisk 22). Zerujemy i ustawiamy jeden rytm. */
.page-id-44 .puf-feat-col > .vc_column-inner > .wpb_wrapper > .wpb_text_column{margin:0 0 26px !important}
.page-id-44 .puf-feat-col > .vc_column-inner > .wpb_wrapper > .wpb_text_column:last-child{margin:26px 0 0 !important}
.page-id-44 .puf-feat-col .wpb_text_column p:last-child{margin:0}
.page-id-44 .puf-feat-col .puf-btn{margin-top:0}

@media (max-width:767px){
  .page-id-44 img.puf-feat-img{max-width:none;margin:0 0 26px}
  .page-id-44 .puf-feat{max-width:none}
  .page-id-44 ul.puf-feat-benefits{gap:10px 22px;margin-top:18px}
  .page-id-44 .puf-feat-col > .vc_column-inner > .wpb_wrapper > .wpb_text_column{margin:0 0 22px !important}
  .page-id-44 .puf-feat-col > .vc_column-inner > .wpb_wrapper > .wpb_text_column:last-child{margin:22px 0 0 !important}
  .page-id-44 .puf-feat-col .puf-btn{width:100%}
}

/* ==========================================================================
   PUF - SEKCJA SIATKI PRODUKTOW (wzorem sekcji 3 na bejbino.pl), 2026-08-27
   Bejbino: siatka kart z plakietka "Promocja!" + przekreslona cena na KAZDYM
   produkcie, przycisk "Dodaj do koszyka" + "Quick View" ujawniany na hover.
   PUF: ta sama kompozycja (siatka, hover-reveal przycisku), ale:
   - ZERO plakietki "Promocja!" i ZERO przekreslonej ceny - PUF nie ma realnej
     30-dniowej historii ceny wyzszej, wiec to bylby falszywy rabat (Omnibus).
   - Plakietka "Taniej niz osobno" TYLKO na #39 i #41 - to prawdziwy fakt
     (cena zestawu vs suma cen pojedynczych sztuk po aktualnym cenniku),
     nie porownanie do zmyslonej ceny tego samego SKU.
   - Brak "Quick View" - wymagalby nowego JS/modala/wtyczki. Cala karta
     (obrazek + tytul) jest linkiem do strony produktu - to samo dziala.
   Uzyty natywny shortcode WooCommerce [products] - te same dynamiczne dane
   (cena, stock) co /sklep/, zero hardkodowania.
   ========================================================================== */
.page-id-44 .puf-grid-section{max-width:1245px;margin:0 auto;padding:56px 0}

/* Wyrownanie tytulow i cen - przy columns=5 tytuly lamaly sie na 3-4 linie
   zaleznie od dlugosci nazwy (cena na roznej wysokosci w kazdej karcie), a
   -webkit-line-clamp zawodzil w Chrome (3-cia linia przebijala sie pod cene -
   zgloszone przez wlasciciela). Po zmianie shortcode na columns=4 (wieksze
   karty/zdjecia, patrz nizej sekcja ul.products) wszystkie 5 tytulow miesci
   sie naturalnie w 2 liniach - min-height zamiast line-clamp, zero ryzyka
   ucinania lub nachodzenia tekstu na cene. */
.page-id-44 .puf-grid-section .woocommerce-loop-product__title{
  min-height:61.2px;text-align:center;
}
.page-id-44 .puf-grid-section .price{text-align:center !important}

/* Przycisk "Dodaj do koszyka" / "Wybierz opcje" ukryty do hover - jedyna
   zmiana zachowania, scoped WYLACZNIE do tej sekcji. /sklep/ i kategorie
   maja przycisk stale widoczny (bez zmian - to byla swiadoma decyzja
   z wczesniejszej rundy dot. czytelnosci na dotyk). */
.page-id-44 .puf-grid-section .woocommerce ul.products li.product .add_to_cart_button{
  opacity:0 !important;
  transition:opacity .18s ease;
}
.page-id-44 .puf-grid-section .woocommerce ul.products li.product:hover .add_to_cart_button,
.page-id-44 .puf-grid-section .woocommerce ul.products li.product:focus-within .add_to_cart_button{
  opacity:1 !important;
}

/* Plakietka realnej oszczednosci - tylko #39 i #41, tresc w CSS bo shortcode
   [products] nie ma punktu rozszerzenia na markup per-produkt. */
.page-id-44 .puf-grid-section .woocommerce ul.products li.product.post-39 .product-wrap::before,
.page-id-44 .puf-grid-section .woocommerce ul.products li.product.post-41 .product-wrap::before{
  content:"Taniej niż osobno";
  position:absolute;top:12px;left:12px;z-index:5;
  background:var(--puf-amber);color:var(--puf-ink);
  font-family:'Roboto',-apple-system,sans-serif;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 10px;
}

@media (max-width:767px){
  .page-id-44 .puf-grid-section{padding:48px 0}
  .page-id-44 .puf-grid-section h2{font-size:26px;margin-bottom:26px}
  /* na dotyku nie ma hover - przycisk zostaje widoczny jak wszedzie indziej */
  .page-id-44 .puf-grid-section .woocommerce ul.products li.product .add_to_cart_button{
    opacity:1 !important;
  }
}

/* ==========================================================================
   Sekcja "Dlaczego klienci wybieraja PUF" - wzorem bejbino.pl (sekcja
   zaraz pod karuzela produktow: zdjecie + naglowek + pionowa lista korzysci
   z kolorowym znacznikiem zamiast emoji). Fakty w liscie to przepakowanie
   juz zweryfikowanych tresci z innych sekcji tej strony (UV400/polaryzacja/
   TR90 z sekcji feature #30, "produkt sensoryczny"/silikon z architektury
   produktow) - zero nowych, niezweryfikowanych claimow.
   ========================================================================== */
.page-id-44 .puf-why{max-width:520px}
.page-id-44 .puf-why h2{
  font-family:'Roboto',-apple-system,sans-serif;font-weight:500;
  font-size:clamp(26px,2.5vw,34px);line-height:1.2;
  color:var(--puf-ink);margin:0 0 26px;
}
.page-id-44 ul.puf-why-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:16px;
}
.page-id-44 ul.puf-why-list li{
  list-style:none !important;
  font-family:'Roboto',-apple-system,sans-serif;
  font-size:16px;line-height:1.5;color:var(--puf-text-2);
  padding-left:24px;position:relative;margin:0;
}
.page-id-44 ul.puf-why-list li::before{
  content:"";position:absolute;left:0;top:7px;
  width:10px;height:10px;background:var(--puf-amber);border-radius:2px;
}
.page-id-44 img.puf-why-img{
  display:block;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 20%;
  max-width:460px;border-radius:20px;margin:0;
  box-shadow:0 30px 80px rgba(0,0,0,.14),0 20px 70px rgba(0,0,0,.12);
}
@media (max-width:767px){
  .page-id-44 img.puf-why-img{max-width:none;margin:0 0 26px}
  .page-id-44 .puf-why{max-width:none}
}

/* ==========================================================================
   Sekcja "Historia marki PUF" - wzorem bejbino.pl (sekcja "Historia marki
   Bejbino": zdjecie kwadratowe + naglowek + akapity, uklad 1/2+1/2 jak
   pozostale sekcje "zdjecie+tekst" na tej stronie). Tresc dostarczona przez
   wlasciciela wprost w czacie 2026-08-27 (nie fabrykowana - brak zrodla dla
   osobistej historii zalozycielskiej jak na bejbino, wiec zamiast niej
   uzyto realnych faktow o dwoch liniach produktowych). Zdjecie:
   puf-eyewear-lifestyle.jpg (juz uzyte w hero) - powtorzone tu dla balansu
   wizualnego Eyewear/Kids w sekcjach ponizej hero (feature #30 = kolaz
   Eyewear, "Dlaczego PUF" = lifestyle Kids, ta sekcja = lifestyle Eyewear).
   ========================================================================== */
.page-id-44 .puf-story{max-width:520px}
.page-id-44 .puf-story h2{
  font-family:'Roboto',-apple-system,sans-serif;font-weight:500;
  font-size:clamp(26px,2.5vw,34px);line-height:1.2;
  color:var(--puf-ink);margin:0 0 22px;
}
.page-id-44 .puf-story p{
  font-family:'Roboto',-apple-system,sans-serif;
  font-size:16px;line-height:1.6;color:var(--puf-text-2);margin:0 0 16px;
}
.page-id-44 .puf-story p:last-child{margin-bottom:0}
.page-id-44 img.puf-story-img{
  display:block;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 30%;
  max-width:460px;border-radius:20px;margin:0;
  box-shadow:0 30px 80px rgba(0,0,0,.14),0 20px 70px rgba(0,0,0,.12);
}
@media (max-width:767px){
  .page-id-44 img.puf-story-img{max-width:none;margin:0 0 26px}
  .page-id-44 .puf-story{max-width:none}
}

/* ==========================================================================
   Wieksze odstepy miedzy sekcjami homepage - wzorem bejbino.pl. Zmierzone na
   zywym bejbino: kazda sekcja ma padding-top:57px + poprzednia padding-
   bottom:28.5px = ~85.5px efektywnego odstepu miedzy tresciami sekcji.
   PUF mial tylko plaski margines 21px z domyslnego .vc_row Salienta na
   KAZDYM z 4 przejsc (hero->feat->grid->why->story) - zmierzone identycznie
   21px na wszystkich, nie tylko czesci. el_class na [vc_row] nie dziala w
   tym buildzie (znana pulapka z etapu 14), wiec selekcja przez :has() na
   klasie kolumny zamiast el_class na wierszu. */
.page-id-44 .vc_row:has(.puf-feat-col),
.page-id-44 .vc_row:has(.puf-grid-section),
.page-id-44 .vc_row:has(.puf-why-col),
.page-id-44 .vc_row:has(.puf-story-col){
  margin-top:115px;
}
@media (max-width:767px){
  .page-id-44 .vc_row:has(.puf-feat-col),
  .page-id-44 .vc_row:has(.puf-grid-section),
  .page-id-44 .vc_row:has(.puf-why-col),
  .page-id-44 .vc_row:has(.puf-story-col){
    margin-top:76px;
  }
}

/* ==========================================================================
   Sekcja "Co mowia nasi Klienci" - wzorem bejbino.pl (sekcja "Badania
   przeprowadzone wsrod naszych Klientow": naglowek + 3 kola postepu z %
   i podpisem). Element to natywny WPBakery [vc_pie] (nie custom build) -
   canvas-rysowany, animowany od 0 do wartosci docelowej przy przewinieciu
   w widok. Kolor: color="#E8A33D" (amber marki) zamiast color="custom"
   custom_color="..." - ten drugi wariant NIE dziala poprawnie w tym buildzie
   (klasa .vc_pie_wrapper dostaje tylko "custom" bez hex, kolo renderuje sie
   czarne). Bejbino uzywa dokladnie tego samego mechanizmu (hex jako klasa,
   np. ".vc_pie_wrapper.#4e77a6" w ich DOM) - potwierdzone empirycznie.
   Liczby (90%/98%/98%) to owner-verified real data - wlasciciel potwierdzil
   wprost, ze to realne szacunki, nie ilustracyjny marketing (zapytany
   explicite przed publikacja, per zasada zero fikcyjnych statystyk z
   CLAUDE.md). ========================================================================== */
.page-id-44 .puf-stats-heading{
  font-family:'Roboto',-apple-system,sans-serif !important;font-weight:500;
  font-size:clamp(26px,2.5vw,34px) !important;line-height:1.2;
  color:var(--puf-ink);text-align:center;margin:0;
}
.page-id-44 .vc_row:has(.puf-stats-col) .vc_pie_chart{text-align:center}
.page-id-44 .vc_row:has(.puf-stats-col) .vc_pie_wrapper{margin:0 auto}
.page-id-44 .vc_row:has(.puf-stats-col) .vc_pie_chart_value{
  font-family:'Roboto',-apple-system,sans-serif !important;font-weight:500 !important;
}
.page-id-44 .vc_row:has(.puf-stats-col) .wpb_text_column{max-width:300px;margin:24px auto 0}
.page-id-44 .vc_row:has(.puf-stats-col) .wpb_text_column p{
  font-family:'Roboto',-apple-system,sans-serif !important;
  font-size:15px !important;line-height:1.55;color:var(--puf-text-2) !important;
  text-align:center;margin:0;
}
.page-id-44 .vc_row:has(.puf-stats-col) .wpb_text_column strong{color:var(--puf-ink)}
.page-id-44 .vc_row:has(.puf-stats-heading-row){margin-top:115px}
@media (max-width:767px){
  .page-id-44 .vc_row:has(.puf-stats-heading-row){margin-top:76px}
  .page-id-44 .vc_row:has(.puf-stats-col) .wpb_text_column{margin-bottom:20px}
}

/* ==========================================================================
   Sekcja "Zaufaj opiniom naszych klientow" - wzorem bejbino.pl (sekcja
   "Zaufaj opiniom innych Mam": 3 kolumny z cytatem klienta). Element to
   natywny WPBakery/Salient [nectar_single_testimonial] (nie custom build) -
   potwierdzone przez window.vc_mapper.
   🔴 CELOWO bez zdjec i pelnych imion klientow (param "image", "subtitle").
   Bejbino uzywa prawdziwych fotografii i imion swoich klientow - PUF ma
   TYLKO zweryfikowane, zamaskowane dane z Allegro (np. "a...3", gwiazdki,
   data) - bez zdjec, bez pelnych imion, bez opisow rodziny ("Mama 2-latka").
   Cytaty to realne, zweryfikowane opinie (te same, ktore byly w usunietej
   sekcji etapu 22, zarchiwizowane w docs/backups/2026-08-27_PRZED_
   USUNIECIEM_SEKCJI_PONIZEJ_DLACZEGO_PUF/) - skopiowane dokladnie, nie
   przepisywane z pamieci. Wlasciciel zapowiedzial, ze przyslize prawdziwe
   imiona i zdjecia konkretnych klientek (dostal je na Allegro) - GDY dotrze
   ta tresc, podmienic param "name" na prawdziwe imie+opis i dodac param
   "image" z prawdziwym zdjeciem. Do tego czasu zero fabrykacji tozsamosci -
   ani stockowe zdjecie, ani wymyslone imie. Bez eyebrow "PUF Polska" -
   zgodnie ze standing rule z etapu 25.
   ========================================================================== */
.page-id-44 .vc_row:has(.puf-testimonials-heading-row){margin-top:115px}
.page-id-44 .vc_row:has(.puf-testimonials-col) blockquote{
  font-family:'Roboto',-apple-system,sans-serif !important;font-weight:400 !important;
  font-size:20px !important;line-height:1.5;color:var(--puf-text-2) !important;
}
.page-id-44 .vc_row:has(.puf-testimonials-col) .nectar_single_testimonial .name,
.page-id-44 .vc_row:has(.puf-testimonials-col) [class*="testimonial"] div:last-child{
  font-family:'Roboto',-apple-system,sans-serif !important;
  font-size:14px !important;color:var(--puf-ink) !important;font-weight:600;
}
@media (max-width:767px){
  .page-id-44 .vc_row:has(.puf-testimonials-heading-row){margin-top:76px}
}

.page-id-44 .vc_row:has(.puf-safety-heading-row){margin-top:115px}
@media (max-width:767px){
  .page-id-44 .vc_row:has(.puf-safety-heading-row){margin-top:76px}
}

/* ==========================================================================
   Stopka (site-wide, NIE page-id-44 - stopka jest na kazdej stronie) -
   przebudowana wzorem bejbino.pl (uklad 2-strefowy: lewa kolumna dane
   firmy+kontakt+regulaminy, prawa - kolorowy panel z logo+tagline).
   Salient Footer Columns zmienione z 4 na 2 (Salient Options > Footer).
   Widgety custom_html-4 ("PUF Kids") i custom_html-5 ("Informacje")
   odlaczone z sidebarow footer-area-1/2 (nie usuniete, tresc nadal istnieje
   w bazie - linki kategorii produktow sa juz w glownym menu, wiec ich
   utrata ze stopki nie traci nawigacji). Dane firmy (NIP, adres, sprzedawca)
   to realne dane juz opublikowane na /kontakt/ - nie wymyslone. Brak numeru
   telefonu w tagline "Skontaktuj sie z nami" bo PUF go nie publikuje (tylko
   e-mail) - w odroznieniu od bejbino ktore ma telefon, nie fabrykowano.
   Etap 34: przebudowa z 2 widgetow custom_html (raw HTML) na 9 natywnych
   blokow Gutenberga (heading/paragraph/list), zeby wlasciciel mogl edytowac
   tresc stopki w Customizerze bez dotykania kodu HTML (jak opis na Allegro).
   Selektory prefiksowane #footer-outer + !important na font-size/color:
   blok P12 wyzej w tym pliku (#footer-outer a,p,li{font-size:14px;color:
   #c9c9c9 !important} i #footer-outer h4{font-size:12px;color:#fff
   !important}) to zamrozona baza stopki sprzed etapu 31 - nadal obowiazuje
   globalnie, wiec elementy stopki ktore SA tagami p/a/li/h4 (blok Gutenberga
   to zwykly <p>/<h4>/<h5>/<ul>) dziedzicza z niej i wymagaja !important zeby
   je nadpisac lokalnie - bez tego przegrywaly mimo wyzszej specyficznosci
   (specificity nie bije !important). Wykryte przy weryfikacji na live.
   Etap 35: uklad i odstepy zmierzone bezposrednio na live DOM bejbino.pl
   (nie zgadywane) - tam "Bejbino.pl"(dane sprzedawcy) stoi OBOK "Skontaktuj
   sie z nami", a "Regulaminy" jest NIZEJ, wyrownane do lewej kolumny;
   odstep naglowek->tresc w grupie = 8px (zmierzone), odstep miedzy grupa
   gorna a "Regulaminy" = 50px (zmierzone, u nas 40px - proporcjonalnie do
   mniejszej czcionki PUF). Lewa kolumna stopki (.col z #block-7) dostaje
   CSS grid 2 kolumny na desktopie; na mobile wraca do zwyklego stackowania
   (display:block), kolejnosc DOM juz jest poprawna czytelnosciowo. Prawy
   panel: usuniety maly kwadrat 120px - "PUF" jest teraz duzym pogrubionym
   wordmarkiem (bez tla), slogan czytelny i wiekszy (byl 17px, teraz 24px),
   pogrubienie sloganu zachowane z wczesniejszej wyraznej decyzji wlasciciela
   ("napisz pogrubionymi literami", etap 32) - "stylem bejbino czytelnie"
   odczytane jako wieksza, bardziej czytelna skala, nie usuniecie pogrubienia.
   Kolory/uklad ciemnej stopki (V6 frozen) bez zmian - bejbino uzyte tylko
   jako zrodlo dla ODSTEPOW i UKLADU, nie kolorow (u bejbino jasne tlo).
   #block-7 dla naglowka H4 bez wlasnej klasy. Kazdy blok to osobny .widget
   w sidebarze - domyslny margines 30px motywu wylaczony wszedzie w tym
   bloku na rzecz jawnych odstepow opisanych wyzej.
   Archiwum stanu przed zmiana: docs/backups/2026-08-28_PRZED_PRZEBUDOWA_STOPKI/ */
#footer-outer .col:has(#block-7){
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:48px;
  row-gap:0;
}
#footer-outer #block-7{grid-column:1;grid-row:1;margin-bottom:8px !important}
#footer-outer #block-17{grid-column:1;grid-row:2;margin-bottom:40px !important}
#footer-outer #block-10{grid-column:2;grid-row:1;margin-bottom:8px !important}
#footer-outer #block-11{grid-column:2;grid-row:2;margin-bottom:8px !important}
#footer-outer #block-12{grid-column:1;grid-row:3;margin-bottom:8px !important}
#footer-outer #block-13{grid-column:1;grid-row:4;margin-bottom:0 !important}
#footer-outer .col:has(.puf-foot-panel-logo){
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:72px 40px;
}
#footer-outer .puf-foot-panel-logo{
  font-family:'Roboto',-apple-system,sans-serif !important;
  font-size:72px !important;font-weight:800 !important;
  color:var(--puf-amber,#E8A33D) !important;
  letter-spacing:0.01em;line-height:1;margin:0 0 20px;
}
#footer-outer .puf-foot-panel-tagline{
  font-family:'Fraunces',Georgia,serif !important;
  font-style:italic;font-weight:500 !important;
  font-size:26px !important;color:#fff !important;
  line-height:1.4;margin:0 auto;max-width:420px;text-align:center;letter-spacing:0.01em;
}
#footer-outer #block-7 h4{
  font-family:'Roboto',-apple-system,sans-serif !important;
  font-size:14px !important;font-weight:700 !important;
  letter-spacing:.06em;text-transform:uppercase;
  color:#fff !important;margin:0;
}
#footer-outer .puf-foot-subhead{
  font-family:'Roboto',-apple-system,sans-serif !important;
  font-size:13px !important;font-weight:700 !important;letter-spacing:.06em;
  text-transform:uppercase;color:#fff !important;margin:0;
}
#footer-outer .puf-foot-blurb,
#footer-outer .puf-foot-company,
#footer-outer .puf-foot-contact,
#footer-outer .puf-foot-nav,
#footer-outer .puf-foot-nav li{
  font-family:'Roboto',-apple-system,sans-serif !important;
  font-size:14px !important;line-height:1.6;color:rgba(255,255,255,.7) !important;
}
#footer-outer .puf-foot-contact a,
#footer-outer .puf-foot-nav a{text-decoration:none;color:inherit !important}
#footer-outer .puf-foot-contact a:hover,
#footer-outer .puf-foot-nav a:hover{color:#fff !important}
#footer-outer .puf-foot-nav{list-style:none;margin:0;padding:0}
#footer-outer .puf-foot-nav li{list-style:none !important;margin-bottom:2px !important;padding:0}
#footer-outer .puf-foot-nav a{display:inline-flex !important;min-height:auto !important;padding:2px 0 !important;line-height:1.6 !important}
#footer-outer .puf-foot-nav li:last-child{margin-bottom:0 !important}
#footer-outer .puf-foot-blurb{max-width:340px;margin:0}
#footer-outer .puf-foot-company{margin:0}
@media (max-width:767px){
  #footer-outer .col:has(#block-7){display:block}
  #footer-outer #block-17{margin-bottom:32px !important}
  #footer-outer .col:has(.puf-foot-panel-logo){padding:40px 24px}
  #footer-outer .puf-foot-panel-logo{font-size:48px !important;margin-bottom:14px}
  #footer-outer .puf-foot-panel-tagline{font-size:19px !important;max-width:320px}
}






/* ==========================================================================
   Etap 38: ruchome logo pod stopka, wzorem bejbino.pl.
   Zmierzone na live DOM bejbino (element-scrolling-text.css, motyw Salient
   16.0.5, ten sam co PUF): mechanizm to CZYSTY CSS (@keyframes translateX),
   ZERO zaleznosci od JS. Kazdy "chunk" (PUF + kropka) animuje sie NIEZALEZNIE
   od translateX(-20%) do translateX(-120%) wzgledem WLASNEJ szerokosci,
   linear, infinite - kolejne chunki nastepuja po sobie w normalnym flow,
   wiec efekt to plynna, niekonczaca sie petla bez szwu.
   WAZNE: naitywny shortcode Salient nectar_scrolling_text NIE dziala przez
   widget - jego CSS/JS (element-scrolling-text.css/js) laduje sie WYLACZNIE
   gdy shortcode jest wykryty w post_content (WPBakery skanuje tresc strony),
   a stopka PUF to widgety, nie post_content -> plik nigdy by sie nie zaladowal.
   Dlatego ponizej wlasna, samodzielna implementacja tej samej techniki CSS
   (nie kopia 1:1 pliku bejbino, ale ten sam odtworzony mechanizm), zeby
   dzialalo niezaleznie od tego, jak trescA trafia do DOM.
   Tresc: "PUF ·" (bejbino ma nazwe marki + srodkowa kropke, u nas identycznie
   z PUF). Styl liter: bejbino uzywa outline (przezroczysty fill + biala
   obwodka) na <em> - odtworzone przez -webkit-text-fill-color:transparent +
   -webkit-text-stroke. Kolor bialy pod ciemna stopke PUF (bejbino ma jasne
   tlo wiec tez bialy outline - ten sam kolor pasuje na obu tlach).
   Font: Roboto bold (system PUF), NIE font bejbino (Wellfleet) - zamierzona
   adaptacja do wlasnej typografii marki, nie kopiowanie cudzego fontu.
   Widget umieszczony w footer-area-2 (prawa kolumna, dluzsza niz lewa -
   sprawdzone na live: 784px vs 272px), full-bleed przez position:relative +
   ujemne marginesy 50vw, zeby wizualnie wyjsc poza szerokosc kolumny i
   zajac cala szerokosc ekranu, pod obiema kolumnami stopki.
   prefers-reduced-motion: reduce wylacza animacje (dostepnosc). */
#footer-outer #custom_html-6{margin-top:120px !important;align-self:stretch;width:100%;min-width:0}
#footer-outer .puf-marquee{
  overflow:hidden;
  white-space:nowrap;
  padding:50px 0;
  box-sizing:border-box;
}
#footer-outer .puf-marquee-inner{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  width:100%;
}
#footer-outer .puf-marquee-chunk{
  display:flex;
  flex-direction:row;
  align-items:center;
  flex-shrink:0;
  transform:translateX(-20%) translateZ(0);
  animation:puf-marquee-scroll linear infinite 9s;
}
#footer-outer .puf-marquee-chunk a{
  text-decoration:none;
  cursor:pointer;
  display:inline-flex;
}
#footer-outer .puf-marquee-chunk em{
  font-family:'Roboto',-apple-system,sans-serif !important;
  font-style:normal;
  font-weight:800 !important;
  font-size:11vh;
  line-height:1;
  color:transparent;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:2px #fff;
  white-space:nowrap;
  transition:-webkit-text-stroke-color .2s;
}
#footer-outer .puf-marquee-chunk a:hover em{
  -webkit-text-stroke-color:var(--puf-amber,#E8A33D);
}
#footer-outer .puf-marquee-dot{
  font-family:'Roboto',-apple-system,sans-serif !important;
  font-weight:400 !important;
  font-size:5.5vh;
  color:#fff !important;
  padding:0 .4em;
  display:inline-block;
  vertical-align:middle;
}
@keyframes puf-marquee-scroll{
  from{transform:translateX(-20%) translateZ(0)}
  to{transform:translateX(-120%) translateZ(0)}
}
@media (max-width:767px){
  #footer-outer #custom_html-6{margin-top:56px !important}
  #footer-outer .puf-marquee{padding:32px 0}
  #footer-outer .puf-marquee-chunk em{font-size:8vh}
  #footer-outer .puf-marquee-dot{font-size:4vh}
}
@media (prefers-reduced-motion: reduce){
  #footer-outer .puf-marquee-chunk{animation:none}
}


/* ==========================================================================
   PUF - HERO SLOGAN NAKLADKA (styl bejbino), etap 46, 2026-08-29
   split_line_heading + nectar_cta, position:relative + margin-top ujemny
   zeby wizualnie usiasc na dole zdjecia Page Header (wysokosc 560px).
   ========================================================================== */
.page-id-44 .puf-hero-slogan{
  position:relative;
  margin-top:-260px;
  padding:0 40px 60px;
  z-index:5;
  pointer-events:none;
}
.page-id-44 h1.puf-hero-slogan-heading, .page-id-44 .puf-hero-slogan-heading{
  color:#fff !important;
  font-family:'Roboto',-apple-system,sans-serif;
  font-weight:500;
  font-size:clamp(28px,3.2vw,42px);
  line-height:1.25;
  text-shadow:0 1px 18px rgba(0,0,0,.35);
  margin:0;
}
.page-id-44 .puf-hero-slogan .nectar-cta{
  margin-top:24px !important;
  pointer-events:auto;
}
@media (max-width:767px){
  .page-id-44 .puf-hero-slogan{margin-top:-200px;padding:0 24px 40px}
  .page-id-44 .puf-hero-slogan-heading h1{font-size:26px}
}

.page-id-44 .puf-hero-slogan .nectar-cta a.link_wrap,
.page-id-44 .puf-hero-slogan .nectar-cta .link_wrap{
  background-color:var(--puf-amber,#E8A33D) !important;
  border-color:var(--puf-amber,#E8A33D) !important;
}
.page-id-44 .puf-hero-slogan .nectar-cta a.link_text{color:#1A1A1A !important}


/* ==========================================================================
   PUF - SCROLL REVEAL naglowkow sekcji (styl bejbino), etap 48, 2026-08-29
   JS w Salient -> Custom JS Code (After Body Open) dodaje klase .puf-revealed
   przez IntersectionObserver. Zastepuje zepsuty natywny [split_line_heading]
   (wymaga nieaktywnej wtyczki Salient Shortcodes - potwierdzone pusty render).
   ========================================================================== */
.page-id-44 .puf-stats-heading,
.page-id-44 .puf-story h2,
.page-id-44 .puf-why h2,
.page-id-44 .puf-feat h2{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.page-id-44 .puf-stats-heading.puf-revealed,
.page-id-44 .puf-story h2.puf-revealed,
.page-id-44 .puf-why h2.puf-revealed,
.page-id-44 .puf-feat h2.puf-revealed{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .page-id-44 .puf-stats-heading,
  .page-id-44 .puf-story h2,
  .page-id-44 .puf-why h2,
  .page-id-44 .puf-feat h2{
    opacity:1;
    transform:none;
    transition:none;
  }
}


/* ==========================================================================
   PUF - PRZYCISKI WZORU OPRAWEK (Ombre/Panterka/Czarne), etap 49, 2026-08-29
   Tylko podgladowa zmiana zdjecia, bez przejscia na karte produktu.
   ========================================================================== */
.page-id-44 .puf-feat-swatches{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;
}
.page-id-44 .puf-swatch{
  font-family:'Roboto',-apple-system,sans-serif;
  font-size:13px;font-weight:600;
  padding:8px 18px;border-radius:999px;
  border:1.5px solid #E5E5E5;background:#fff;color:#1A1A1A;
  cursor:pointer;transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.page-id-44 .puf-swatch:hover{border-color:var(--puf-amber,#E8A33D)}
.page-id-44 .puf-swatch.is-active{
  background:var(--puf-amber,#E8A33D);
  border-color:var(--puf-amber,#E8A33D);
  color:#1A1A1A;
}
@media (max-width:767px){
  .page-id-44 .puf-feat-swatches{gap:8px}
  .page-id-44 .puf-swatch{font-size:12px;padding:7px 14px}
}

#logo{
  background-color:var(--puf-amber,#E8A33D) !important;
  color:#1A1A1A !important;
  width:68px !important;
  height:68px !important;
  min-width:68px !important;
  max-width:68px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:13px !important;
  font-size:23px !important;
  line-height:1 !important;
  letter-spacing:.02em;
  padding:0 !important;
  text-align:center;
}
#logo:hover{color:#1A1A1A !important}

.page-id-44 .puf-hero-slogan .link_text{
  padding-top:14px !important;
  padding-bottom:14px !important;
  padding-right:20px !important;
}
.page-id-44 .puf-hero-slogan .link_wrap{
  display:inline-flex !important;
  border-radius:6px;
}

/* ============================================================
 *    PUF  Sklep sidebar: styl filtra kategorii jak Bejbino (etap 57)
 *    Ukrycie checkboxa + wyrownanie licznika do prawej krawedzi.
 *    ============================================================ */
.wc-block-product-filter-checkbox-list__input-wrapper{
	  display:none !important;
}
.wc-block-product-filter-checkbox-list__label{
	  width:100% !important;
}
.wc-block-product-filter-checkbox-list__text-wrapper{
	  display:flex !important;
	  justify-content:space-between !important;
	  width:100% !important;
}

/* ============================================================
 *    PUF  Sklep sidebar: estetyka jak Bejbino (etap 58)
 *    Kursor + kolor tekstu podkategorii, typografia naglowkow,
 *    ukrycie nawiasow przy liczniku.
 *    ============================================================ */


.wc-block-product-filter-checkbox-list__text{
	  color:#1A1A1A !important;
	  font-weight:500 !important;
}
.wc-block-product-filter-checkbox-list__count{
	  font-size:0 !important;
	  color:#1A1A1A !important;
}
.wc-block-product-filter-checkbox-list__count span{
	  font-size:11px !important;
}
.wc-block-product-filters h3.wp-block-heading{ font-size:16px !important; font-weight:500 !important; color:#1A1A1A !important; margin-bottom:15px !important; text-transform:none !important; }

.wc-block-product-filter-checkbox-list__label{ cursor:pointer !important; color:#1A1A1A !important; }
.wc-block-product-filter-checkbox-list__count span{ color:#1A1A1A !important; }

/* PUF - Sklep sidebar: suwak ceny w kolorze marki amber, nie niebieski Bejbino (etap 60) */
.wc-block-product-filter-price-slider__range{
  color:#E8A33D !important;
  --wc-product-filter-price-slider-handle-border:#E8A33D !important;
}

/* PUF - Karta produktu: przycisk Dodaj do koszyka w ksztalcie pigulki jak Bejbino, kolor marki bez zmian (etap 62) */
body.single-product .single_add_to_cart_button{
  border-radius:200px !important;
  padding:15px 10px !important;
  font-weight:500 !important;
  text-transform:capitalize !important;
}

/* PUF - Karta produktu: przycisk obok licznika sztuk (jak Bejbino) + mniejszy H1 zeby tytul mieskil sie w 1 linii (etap 64) */
body.single-product form.cart{
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
  flex-wrap:wrap;
}
body.single-product form.cart .quantity{
  margin-right:0 !important;
  flex:0 0 auto;
}
body.single-product .product_title{
  font-size:clamp(20px,2.1vw,27px) !important;
  line-height:1.25 !important;
}

/* PUF - Karta produktu: wysokosc licznika sztuk = wysokosc przycisku Dodaj do koszyka, jak Bejbino (etap 65) */
body.single-product form.cart .quantity input{
  height:52px !important;
  box-sizing:border-box !important;
}

/* PUF - Karta produktu: licznik sztuk jako jedna pigulka (obwodka na kontenerze, nie na inputach), jak Bejbino (etap 66) */
body.single-product form.cart .quantity{
  border:0.75px solid #AAAAAA !important;
  border-radius:200px !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
}
body.single-product form.cart .quantity input{
  border:0 none !important;
}

/* PUF - Karta produktu: zerowanie asymetrycznych marginesow pionowych (quantity mb:16, przycisk mt:30) - psuly wyrownanie mimo align-items:center. Bejbino ma oba margin:0 w pionie - skopiowane 1:1 (etap 68) */
body.single-product form.cart .quantity{
  margin-top:0 !important;
  margin-bottom:0 !important;
}
body.single-product form.cart button.single_add_to_cart_button{
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* P6. .pufp-support — sekcja "obraz + tekst" pod galerią (wzorem bejbino), etap 69 */
.pufp-support{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  align-items:center;
  margin-bottom:56px;
}
.pufp-support-media{
  padding-right:7%;
}
.pufp-support-media img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.14), 0 20px 70px rgba(0,0,0,.12);
}
.pufp-support-text{
  padding-left:7%;
}
.pufp-support-text h2{
  font-family:'Roboto',-apple-system,sans-serif;
  font-weight:400;
  font-size:3vw;
  line-height:1.3;
  color:#E8A33D;
  margin:0 0 16px;
}
.pufp-support-text p{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:20px;
  line-height:36px;
  font-weight:400;
  color:#1A1A1A;
  margin:0 0 20px;
}
.pufp-support-badge{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-top:12px;
  padding:18px 28px 18px 20px;
  background:#E8A33D;
  border-radius:255px 15px 225px 15px/15px 225px 15px 255px;
  color:#fff;
}
.pufp-support-badge-icon{
  width:34px;
  height:34px;
  flex:0 0 auto;
  padding:8px;
  background:#fff;
  border-radius:50%;
  color:#E8A33D;
  box-sizing:border-box;
}
.pufp-support-badge span{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-weight:700;
  font-size:.95rem;
  line-height:1.35;
}
@media (max-width:767px){
  .pufp-support{
    grid-template-columns:1fr;
    gap:56px;
  }
  .pufp-support-media,
  .pufp-support-text{
    padding-left:0;
    padding-right:0;
  }
  .pufp-support-text h2{
    font-size:24px;
    line-height:1.25;
  }
}

/* P7. .pufp-safety — druga sekcja "tekst + diagram" wzorem bejbino (odwrocona kolejnosc), etap 70 */
.pufp-safety{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  align-items:center;
  margin-bottom:56px;
}
.pufp-safety-text{
  padding-left:7%;
}
.pufp-safety-text h2{
  font-family:'Roboto',-apple-system,sans-serif;
  font-weight:400;
  font-size:3vw;
  line-height:1.3;
  color:#E8A33D;
  margin:0 0 16px;
}
.pufp-safety-text p{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:20px;
  line-height:36px;
  font-weight:400;
  color:#1A1A1A;
  margin:0 0 20px;
}
.pufp-safety-badge{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-top:12px;
  padding:18px 28px 18px 20px;
  background:#E8A33D;
  border-radius:255px 15px 225px 15px/15px 225px 15px 255px;
  color:#fff;
}
.pufp-safety-badge-icon{
  width:34px;
  height:34px;
  flex:0 0 auto;
  padding:8px;
  background:#fff;
  border-radius:50%;
  color:#E8A33D;
  box-sizing:border-box;
}
.pufp-safety-badge span{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-weight:700;
  font-size:.95rem;
  line-height:1.35;
}
.pufp-safety-media{
  position:relative;
  padding-right:7%;
}
.pufp-safety-media > img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.14), 0 20px 70px rgba(0,0,0,.12);
}
.pufp-safety-lines{
  position:absolute;
  top:0;
  left:7%;
  width:93%;
  height:100%;
  pointer-events:none;
}
.pufp-safety-lines path{
  fill:none;
  stroke:#1A1A1A;
  stroke-width:.6;
  stroke-dasharray:2,2;
  opacity:.55;
}
.pufp-safety-lines circle{
  fill:#E8A33D;
}
.pufp-safety-pill{
  position:absolute;
  background:#fff;
  border:1.5px solid #1A1A1A;
  border-radius:10px;
  padding:8px 14px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#1A1A1A;
  line-height:1.3;
  white-space:nowrap;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}
.pufp-safety-pill--silikon{ left:7%; top:46%; }
.pufp-safety-pill--twardosc{ left:9%; top:2%; }
.pufp-safety-pill--pasuje{ left:44%; top:2%; }
.pufp-safety-pill--ce{ right:0; top:16%; }
@media (max-width:767px){
  .pufp-safety{
    grid-template-columns:1fr;
    gap:56px;
  }
  .pufp-safety-text,
  .pufp-safety-media{
    padding-left:0;
    padding-right:0;
  }
  .pufp-safety-text h2{
    font-size:24px;
    line-height:1.25;
  }
  .pufp-safety-pill{
    font-size:9px;
    padding:6px 10px;
  }
}

/* P8. .pufp-offer — trzecia sekcja "baner oferty" wzorem bejbino, etap 71 */
.pufp-offer{
  text-align:center;
  background:linear-gradient(135deg,#FDF3E4 0%,#F6E4C6 100%);
  border-radius:20px;
  padding:64px 40px;
  margin-bottom:56px;
}
.pufp-offer h2{
  font-family:'Fraunces',Georgia,serif;
  font-weight:600;
  font-size:clamp(28px,3.2vw,48px);
  line-height:1.2;
  color:#1A1A1A;
  margin:0 0 20px;
}
.pufp-offer h2 em{
  color:#E8A33D;
  font-style:normal;
}
.pufp-offer p{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:20px;
  line-height:1.5;
  font-weight:400;
  color:#1A1A1A;
  margin:0 0 8px;
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
}
.pufp-offer p:last-child{
  margin-bottom:0;
}
@media (max-width:767px){
  .pufp-offer{
    padding:40px 20px;
  }
  .pufp-offer h2{
    font-size:26px;
  }
  .pufp-offer p{
    font-size:16px;
    line-height:1.5;
  }
}

/* P9. .pufp-about — czwarta sekcja "obraz + tekst + 3 ikony" wzorem bejbino, etap 72 */
.pufp-about{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  align-items:center;
  margin-bottom:56px;
}
.pufp-about-media{
  padding-right:7%;
}
.pufp-about-media img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.14), 0 20px 70px rgba(0,0,0,.12);
}
.pufp-about-text{
  padding-left:7%;
}
.pufp-about-text h2{
  font-family:'Roboto',-apple-system,sans-serif;
  font-weight:400;
  font-size:3vw;
  line-height:1.3;
  color:#E8A33D;
  margin:0 0 16px;
}
.pufp-about-text p{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:20px;
  line-height:36px;
  font-weight:400;
  color:#1A1A1A;
  margin:0 0 20px;
}
.pufp-about-features{
  display:flex;
  gap:28px;
  margin-top:8px;
  flex-wrap:wrap;
}
.pufp-about-feature{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  width:110px;
}
.pufp-about-feature-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:60px;
  height:60px;
  border-radius:50%;
  background:#E8A33D;
  font-size:26px;
  line-height:1;
  margin-bottom:10px;
  color:#fff;
  font-weight:700;
  box-sizing:border-box;
}
.pufp-about-feature-icon--age{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:22px;
}
.pufp-about-feature-label{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#1A1A1A;
  line-height:1.35;
}
@media (max-width:767px){
  .pufp-about{
    grid-template-columns:1fr;
    gap:56px;
  }
  .pufp-about-media,
  .pufp-about-text{
    padding-left:0;
    padding-right:0;
  }
  .pufp-about-text h2{
    font-size:24px;
    line-height:1.25;
  }
  .pufp-about-features{
    gap:16px;
    justify-content:center;
  }
  .pufp-about-feature{
    width:90px;
  }
  .pufp-about-feature-icon{
    width:48px;
    height:48px;
    font-size:20px;
  }
}

/* P10. .pufp-gallery — piata sekcja "karuzela obraz+podpis" wzorem bejbino, etap 74 */
.pufp-gallery{
  position:relative;
  margin-bottom:56px;
  padding:0 52px;
}
.pufp-gallery-track{
  display:flex;
  gap:15px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:8px;
  scrollbar-width:none;
  -ms-overflow-style:none;
  cursor:grab;
}
.pufp-gallery-track.dragging{
  cursor:grabbing;
  scroll-snap-type:none;
  user-select:none;
}
.pufp-gallery-track.dragging .pufp-gallery-card img{
  pointer-events:none;
}
.pufp-gallery-track::-webkit-scrollbar{
  display:none;
}
.pufp-gallery-card{
  flex:0 0 auto;
  width:280px;
  scroll-snap-align:start;
}
.pufp-gallery-media{
  width:100%;
  aspect-ratio:4/5;
  border-radius:10px;
  overflow:hidden;
}
.pufp-gallery-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.pufp-gallery-card h4{
  font-family:'Roboto',-apple-system,sans-serif;
  font-size:22px;
  font-weight:500;
  color:#E8A33D;
  margin:30px 0 8px;
  line-height:1.3;
}
.pufp-gallery-card p{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:16px;
  font-weight:400;
  color:#1A1A1A;
  margin:0;
  line-height:1.5;
}
.pufp-gallery-arrow{
  position:absolute;
  top:35%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:50%;
  background:#E8A33D;
  color:#fff;
  border:0;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  z-index:2;
  padding:0;
}
.pufp-gallery-arrow--prev{
  left:0;
}
.pufp-gallery-arrow--next{
  right:0;
}
@media (max-width:767px){
  .pufp-gallery{
    padding:0 8px;
  }
  .pufp-gallery-arrow{
    width:36px;
    height:36px;
    font-size:18px;
  }
  .pufp-gallery-card{
    width:75vw;
  }
}

/* P11. .pufp-gallery-cursor — wskaznik podazajacy za kursorem wzorem bejbino (nectar-drag-indicator), etap 76 */
.pufp-gallery-track{
  cursor:none;
}
.pufp-gallery-cursor{
  position:fixed;
  top:0;
  left:0;
  width:56px;
  height:56px;
  border-radius:50%;
  background:#E8A33D;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  font-size:19px;
  line-height:1;
  transform:translate(-50%,-50%);
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
  z-index:9999;
  box-shadow:0 6px 18px rgba(0,0,0,.2);
}
.pufp-gallery-cursor.visible{
  opacity:1;
}
@media (max-width:767px){
  .pufp-gallery-track{
    cursor:auto;
  }
  .pufp-gallery-cursor{
    display:none;
  }
}

/* P12. Naprawa karuzeli produktow strony glownej (nectar-woo-flickity nigdy sie nie inicjalizuje - Flickity rzuca blad), wlasny scroll-snap + drag + wskaznik-kursor, etap 77 */
.pufp-home-carousel-fixed{
  overflow:visible !important;
  height:auto !important;
}
.pufp-home-carousel-fixed > ul.products.columns-4{
  display:flex !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  scroll-snap-type:x mandatory !important;
  cursor:grab;
  padding-bottom:8px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.pufp-home-carousel-fixed > ul.products.columns-4::-webkit-scrollbar{
  display:none;
}
.pufp-home-carousel-fixed > ul.products.columns-4 > li{
  flex:0 0 auto !important;
  width:282px !important;
  position:relative !important;
  top:auto !important;
  left:auto !important;
  scroll-snap-align:start;
}
.pufp-home-carousel-fixed > ul.products.columns-4.dragging{
  cursor:grabbing;
  scroll-snap-type:none;
  user-select:none;
}
.pufp-home-carousel-fixed > ul.products.columns-4.dragging li{
  pointer-events:none;
}

/* P13. .pufp-habit — szosta sekcja "obraz + tekst + plakietka" wzorem bejbino (Nauka odpowiedniego odruchu), etap 80 */
.pufp-habit{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  align-items:center;
  margin-bottom:56px;
}
.pufp-habit-media{
  padding-right:7%;
}
.pufp-habit-media img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.14), 0 20px 70px rgba(0,0,0,.12);
}
.pufp-habit-text{
  padding-left:7%;
}
.pufp-habit-text h2{
  font-family:'Roboto',-apple-system,sans-serif;
  font-weight:400;
  font-size:3vw;
  line-height:1.3;
  color:#E8A33D;
  margin:0 0 16px;
}
.pufp-habit-text p{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:20px;
  line-height:36px;
  font-weight:400;
  color:#1A1A1A;
  margin:0 0 20px;
}
.pufp-habit-badge{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-top:12px;
  padding:18px 28px 18px 20px;
  background:#E8A33D;
  border-radius:255px 15px 225px 15px/15px 225px 15px 255px;
  color:#fff;
}
.pufp-habit-badge-icon{
  width:34px;
  height:34px;
  flex:0 0 auto;
  padding:8px;
  background:#fff;
  border-radius:50%;
  color:#E8A33D;
  box-sizing:border-box;
}
.pufp-habit-badge span{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-weight:700;
  font-size:.95rem;
  line-height:1.35;
}
@media (max-width:767px){
  .pufp-habit{
    grid-template-columns:1fr;
    gap:56px;
  }
  .pufp-habit-media,
  .pufp-habit-text{
    padding-left:0;
    padding-right:0;
  }
  .pufp-habit-text h2{
    font-size:24px;
    line-height:1.25;
  }
}

/* P14. .pufp-callus — siodma sekcja "zadzwon do nas" wzorem bejbino, realny numer infolinii wlasciciela, etap 81 */
.pufp-callus{
  text-align:center;
  background:linear-gradient(135deg,#1A1A1A 0%, #2E2E2E 100%);
  border-radius:20px;
  padding:72px 40px;
  margin-bottom:56px;
}
.pufp-callus h2{
  font-family:'Fraunces',Georgia,serif;
  font-weight:600;
  font-size:clamp(28px,3.2vw,44px);
  line-height:1.2;
  color:#fff;
  margin:0 0 20px;
}
.pufp-callus p{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:18px;
  line-height:1.6;
  font-weight:400;
  color:rgba(255,255,255,.7);
  margin:0 0 8px;
  max-width:none;
  white-space:nowrap;
  margin-left:auto;
  margin-right:auto;
}
.pufp-callus-hours{
  margin-bottom:32px !important;
}
.pufp-callus-btn{
  display:inline-flex;
  align-items:center;
  gap:14px;
  background:#E8A33D;
  color:#fff;
  text-decoration:none;
  border-radius:200px;
  padding:20px 40px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-weight:600;
  font-size:19px;
}
.pufp-callus-btn svg{
  width:22px;
  height:22px;
  flex:0 0 auto;
}
@media (max-width:767px){
  .pufp-callus{
    padding:48px 24px;
  }
  .pufp-callus h2{
    font-size:24px;
  }
  .pufp-callus p{
    white-space:normal;
  }
  .pufp-callus-btn{
    padding:16px 28px;
    font-size:17px;
  }
}

/* P15. .pufp-signal — osma sekcja "tekst + zdjecie z podswietleniem" wzorem bejbino, etap 82 */
.pufp-signal{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  align-items:center;
  margin-bottom:56px;
}
.pufp-signal-text{
  padding-left:7%;
}
.pufp-signal-text h2{
  font-family:'Roboto',-apple-system,sans-serif;
  font-weight:400;
  font-size:3vw;
  line-height:1.3;
  color:#E8A33D;
  margin:0 0 16px;
}
.pufp-signal-text p{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:20px;
  line-height:36px;
  font-weight:400;
  color:#1A1A1A;
  margin:0 0 20px;
}
.pufp-signal-badge{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-top:12px;
  padding:18px 28px 18px 20px;
  background:#E8A33D;
  border-radius:255px 15px 225px 15px/15px 225px 15px 255px;
  color:#fff;
}
.pufp-signal-badge-icon{
  width:34px;
  height:34px;
  flex:0 0 auto;
  padding:8px;
  background:#fff;
  border-radius:50%;
  color:#E8A33D;
  box-sizing:border-box;
}
.pufp-signal-badge span{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-weight:700;
  font-size:.95rem;
  line-height:1.35;
}
.pufp-signal-media{
  position:relative;
  padding-right:7%;
}
.pufp-signal-media > img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.14), 0 20px 70px rgba(0,0,0,.12);
}
.pufp-signal-lines{
  position:absolute;
  top:0;
  left:7%;
  width:93%;
  height:100%;
  pointer-events:none;
}
.pufp-signal-lines ellipse{
  fill:none;
  stroke:#E8A33D;
  stroke-width:.8;
  stroke-dasharray:2,2;
}
.pufp-signal-lines path{
  fill:none;
  stroke:#1A1A1A;
  stroke-width:.6;
  stroke-dasharray:2,2;
  opacity:.55;
}
.pufp-signal-lines circle{
  fill:#1A1A1A;
}
.pufp-signal-pill{
  position:absolute;
  top:10%;
  right:2%;
  background:#fff;
  border:1.5px solid #1A1A1A;
  border-radius:10px;
  padding:8px 14px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#1A1A1A;
  line-height:1.3;
  max-width:140px;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}
@media (max-width:767px){
  .pufp-signal{
    grid-template-columns:1fr;
    gap:56px;
  }
  .pufp-signal-text,
  .pufp-signal-media{
    padding-left:0;
    padding-right:0;
  }
  .pufp-signal-text h2{
    font-size:24px;
    line-height:1.25;
  }
  .pufp-signal-pill{
    font-size:9px;
    padding:6px 10px;
    max-width:110px;
  }
}

/* P16. .pufp-value — dziewiata sekcja "obraz + tekst + plakietka" wzorem bejbino (mniej wymiany zniszczonych rzeczy), etap 83 */
.pufp-value{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  align-items:center;
  margin-bottom:56px;
}
.pufp-value-media{
  padding-right:7%;
}
.pufp-value-media img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.14), 0 20px 70px rgba(0,0,0,.12);
}
.pufp-value-text{
  padding-left:7%;
}
.pufp-value-text h2{
  font-family:'Roboto',-apple-system,sans-serif;
  font-weight:400;
  font-size:3vw;
  line-height:1.3;
  color:#E8A33D;
  margin:0 0 16px;
}
.pufp-value-text p{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:20px;
  line-height:36px;
  font-weight:400;
  color:#1A1A1A;
  margin:0 0 20px;
}
.pufp-value-badge{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-top:12px;
  padding:18px 28px 18px 20px;
  background:#E8A33D;
  border-radius:255px 15px 225px 15px/15px 225px 15px 255px;
  color:#fff;
}
.pufp-value-badge-icon{
  width:34px;
  height:34px;
  flex:0 0 auto;
  padding:8px;
  background:#fff;
  border-radius:50%;
  color:#E8A33D;
  box-sizing:border-box;
}
.pufp-value-badge span{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-weight:700;
  font-size:.95rem;
  line-height:1.35;
}
@media (max-width:767px){
  .pufp-value{
    grid-template-columns:1fr;
    gap:56px;
  }
  .pufp-value-media,
  .pufp-value-text{
    padding-left:0;
    padding-right:0;
  }
  .pufp-value-text h2{
    font-size:24px;
    line-height:1.25;
  }
}

/* P17. .pufp-care — dziesiata sekcja "tekst + zdjecie" wzorem bejbino (instrukcja mycia), etap 84 */
.pufp-care{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  align-items:center;
  margin-bottom:56px;
}
.pufp-care-text{
  padding-left:7%;
}
.pufp-care-text h2{
  font-family:'Roboto',-apple-system,sans-serif;
  font-weight:400;
  font-size:3vw;
  line-height:1.3;
  color:#E8A33D;
  margin:0 0 16px;
}
.pufp-care-text p{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:20px;
  line-height:36px;
  font-weight:400;
  color:#1A1A1A;
  margin:0 0 20px;
}
.pufp-care-badge{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-top:12px;
  padding:18px 28px 18px 20px;
  background:#E8A33D;
  border-radius:255px 15px 225px 15px/15px 225px 15px 255px;
  color:#fff;
}
.pufp-care-badge-icon{
  width:34px;
  height:34px;
  flex:0 0 auto;
  padding:8px;
  background:#fff;
  border-radius:50%;
  color:#E8A33D;
  box-sizing:border-box;
}
.pufp-care-badge span{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-weight:700;
  font-size:.95rem;
  line-height:1.35;
}
.pufp-care-media{
  padding-right:7%;
}
.pufp-care-media img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.14), 0 20px 70px rgba(0,0,0,.12);
}
@media (max-width:767px){
  .pufp-care{
    grid-template-columns:1fr;
    gap:56px;
  }
  .pufp-care-text,
  .pufp-care-media{
    padding-left:0;
    padding-right:0;
  }
  .pufp-care-text h2{
    font-size:24px;
    line-height:1.25;
  }
}

/* P18. .pufp-care-list — lista z ptaszkami wzorem bejbino, etap 85 */
.pufp-care-list{
  list-style:none;
  padding:0;
  margin:0 0 20px;
}
.pufp-care-list li{
  list-style-type:none;
  position:relative;
  padding-left:34px;
  margin-bottom:14px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:20px;
  line-height:1.5;
  font-weight:400;
  color:#1A1A1A;
}
.pufp-care-list li::before{
  content:'\2713';
  position:absolute;
  left:0;
  top:0;
  color:#E8A33D;
  font-weight:700;
  font-size:20px;
  line-height:1.5;
}
@media (max-width:767px){
  .pufp-care-list li{
    font-size:17px;
    padding-left:28px;
  }
}


/* P19. .pufp-school — jedenasta sekcja "obraz + tekst + plakietka" wzorem bejbino (Zawsze pod reka w szkole i podczas zajec domowych), etap 87 */
.pufp-school{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  align-items:center;
  margin-bottom:56px;
}
.pufp-school-media{
  padding-right:7%;
}
.pufp-school-media img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.14), 0 20px 70px rgba(0,0,0,.12);
}
.pufp-school-text{
  padding-left:7%;
}
.pufp-school-text h2{
  font-family:'Roboto',-apple-system,sans-serif;
  font-weight:400;
  font-size:3vw;
  line-height:1.3;
  color:#E8A33D;
  margin:0 0 16px;
}
.pufp-school-text p{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:20px;
  line-height:36px;
  font-weight:400;
  color:#1A1A1A;
  margin:0 0 20px;
}
.pufp-school-badge{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-top:12px;
  padding:18px 28px 18px 20px;
  background:#E8A33D;
  border-radius:255px 15px 225px 15px/15px 225px 15px 255px;
  color:#fff;
}
.pufp-school-badge-icon{
  width:34px;
  height:34px;
  flex:0 0 auto;
  padding:8px;
  background:#fff;
  border-radius:50%;
  color:#E8A33D;
  box-sizing:border-box;
}
.pufp-school-badge span{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-weight:700;
  font-size:.95rem;
  line-height:1.35;
}
@media (max-width:767px){
  .pufp-school{
    grid-template-columns:1fr;
    gap:56px;
  }
  .pufp-school-media,
  .pufp-school-text{
    padding-left:0;
    padding-right:0;
  }
  .pufp-school-text h2{
    font-size:24px;
    line-height:1.25;
  }
}


/* P20. .pufp-safe — sekcja "Bezpieczne zakupy", 1:1 powtorzona ze strony glownej (.puf-trust, page-id-44), etap 88 */
.pufp-safe{
  border-top:1px solid var(--puf-line-soft);
  border-bottom:1px solid var(--puf-line-soft);
  padding:64px 0;
  margin-bottom:56px;
}
.pufp-safe h2{
  font-family:'Roboto',-apple-system,sans-serif;
  font-weight:500;
  font-size:clamp(26px,2.5vw,34px);
  line-height:1.2;
  color:var(--puf-ink);
  text-align:center;
  margin:0 0 48px;
}
.pufp-safe-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
  max-width:1220px;
  margin:0 auto;
}
.pufp-safe-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
}
.pufp-safe-item svg{
  width:56px;
  height:56px;
  flex-shrink:0;
}
.pufp-safe-item h5{
  font-family:'Roboto',-apple-system,sans-serif;
  font-size:16px;
  font-weight:600;
  color:var(--puf-ink);
  margin:0;
}
.pufp-safe-item p{
  font-family:'Roboto',-apple-system,sans-serif;
  font-size:14px;
  color:var(--puf-text-3);
  line-height:1.5;
  margin:0;
  max-width:230px;
}
@media (max-width:767px){
  .pufp-safe{
    padding:40px 0;
  }
  .pufp-safe h2{
    font-size:24px;
    margin-bottom:32px;
  }
  .pufp-safe-grid{
    grid-template-columns:1fr 1fr;
    gap:32px 20px;
  }
}
@media (max-width:479px){
  .pufp-safe-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
}


/* P21. .pufp-compare — sekcja 13 "tabela porownawcza" wzorem bejbino (Gryzak vs olowek vs bez gryzaka), etap 89 */
.pufp-compare{
  margin-bottom:56px;
}
.pufp-compare h2{
  font-family:'Roboto',-apple-system,sans-serif;
  font-weight:400;
  font-size:3vw;
  line-height:1.3;
  color:#E8A33D;
  text-align:center;
  margin:0 0 50px !important;
}
.pufp-compare-table{
  max-width:900px;
  margin:0 auto;
  background:var(--puf-proof-bg);
  border-radius:20px;
  padding:32px;
  box-sizing:border-box;
  overflow-x:auto;
}
.pufp-compare-head,
.pufp-compare-row{
  display:grid;
  grid-template-columns:2fr repeat(3,1fr);
  gap:12px;
  align-items:center;
  min-width:640px;
}
.pufp-compare-head{
  margin-bottom:16px;
}
.pufp-compare-head-col{
  background:#fff;
  border-radius:14px;
  padding:14px 8px;
  text-align:center;
  font-family:'Roboto',-apple-system,sans-serif;
  font-weight:600;
  font-size:15px;
  line-height:1.3;
  color:var(--puf-ink);
}
.pufp-compare-head-col--main{
  background:#E8A33D;
  color:#fff;
}
.pufp-compare-row{
  padding:10px 0;
  border-top:1px solid var(--puf-line-soft);
}
.pufp-compare-row:first-of-type{
  border-top:none;
}
.pufp-compare-row-label{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:15px;
  line-height:1.4;
  color:var(--puf-ink);
  padding-right:8px;
}
.pufp-compare-cell{
  display:flex;
  align-items:center;
  justify-content:center;
  height:32px;
}
.pufp-compare-check{
  width:26px;
  height:26px;
}
@media (max-width:767px){
  .pufp-compare h2{
    font-size:24px;
    line-height:1.25;
  }
  .pufp-compare-table{
    padding:20px 16px;
  }
}


/* P22. .pufp-testimonials — sekcja 14 "opinie ze zdjeciami" wzorem bejbino (Poznaj opinie innych rodzicow), etap 90.
   Live od 2026-09-08 z realnymi opiniami/zdjeciami (Joanna/Marek/Paulina), przeniesiona pod .pufp-compare.
   Etap 96: sekcja rozciagnieta na 100vw (ta sama technika co P46-P49) na wyrazna prosbe wlasciciela. */
.pufp-testimonials{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  margin-bottom:56px;
  padding:30px 6% !important;
  box-sizing:border-box !important;
}
.pufp-testimonials h2{
  font-family:'Roboto',-apple-system,sans-serif;
  font-weight:400;
  font-size:3vw;
  line-height:1.3;
  color:#E8A33D;
  text-align:center;
  margin:0 0 58px !important;
}
.pufp-testimonials-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5%;
  max-width:none;
  margin:0 auto;
}
.pufp-testimonials .pufp-testimonial-photo{
  width:100%;
  aspect-ratio:317/428;
  border-radius:20px;
  object-fit:cover;
  display:block;
}
.pufp-testimonials .pufp-testimonial-photo--placeholder{
  background:var(--puf-proof-bg);
  border:2px dashed var(--puf-line);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
  box-sizing:border-box;
}
.pufp-testimonials .pufp-testimonial-photo--placeholder span{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:14px;
  color:var(--puf-text-3);
}
.pufp-testimonials .pufp-testimonial-name{
  font-family:'Roboto',-apple-system,sans-serif;
  font-weight:500;
  font-size:26px;
  color:var(--puf-ink);
  margin:20px 0 0;
}
.pufp-testimonials .pufp-testimonial-text{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:18px;
  line-height:1.5;
  color:var(--puf-ink);
  margin:12px 0 20px;
}
.pufp-testimonials .pufp-testimonial-rating{
  background:var(--puf-proof-bg);
  padding:20px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:14px;
  color:var(--puf-ink);
  line-height:1.6;
}
@media (max-width:991px){
  .pufp-testimonials-grid{
    grid-template-columns:1fr;
    gap:40px;
  }
}
@media (max-width:767px){
  .pufp-testimonials h2{
    font-size:24px;
    line-height:1.25;
  }
  .pufp-testimonials .pufp-testimonial-name{
    font-size:22px;
  }
  .pufp-testimonials .pufp-testimonial-text{
    font-size:16px;
  }
}


/* P23. .pufp-specs — sekcja 15 "Dane techniczne" wzorem bejbino, uklad tekst+zdjecie (jak inne pufp sekcje), etap 92.
   Zdjecie 08.jpeg (certyfikaty) - tymczasowe, wlasciciel podmieni na wlasne lepsze.
   Fakty z tabeli odzyskane z realnej tresci produktu 327 sprzed etapu 73. Przewodnik po rozmiarach bejbino pominiety - gryzak ma jeden rozmiar. */
.pufp-specs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  align-items:center;
  margin-bottom:56px;
}
.pufp-specs-text{
  padding-left:7%;
}
.pufp-specs-text h2{
  font-family:'Roboto',-apple-system,sans-serif;
  font-weight:400;
  font-size:3vw;
  line-height:1.3;
  color:#E8A33D;
  margin:0 0 28px;
}
.pufp-specs-list{
  list-style:none;
  padding:0;
  margin:0;
}
.pufp-specs-list li{
  list-style-type:none;
  position:relative;
  padding-left:34px;
  margin-bottom:16px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:18px;
  line-height:1.5;
  color:#1A1A1A;
}
.pufp-specs-list li::before{
  content:'\2713';
  position:absolute;
  left:0;
  top:0;
  color:#E8A33D;
  font-weight:700;
  font-size:18px;
  line-height:1.5;
}
.pufp-specs-list li strong{
  font-weight:600;
}
.pufp-specs-media{
  padding-right:7%;
}
.pufp-specs-media img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.14), 0 20px 70px rgba(0,0,0,.12);
}
@media (max-width:767px){
  .pufp-specs{
    grid-template-columns:1fr;
    gap:56px;
  }
  .pufp-specs-text,
  .pufp-specs-media{
    padding-left:0;
    padding-right:0;
  }
  .pufp-specs-text h2{
    font-size:24px;
    line-height:1.25;
  }
  .pufp-specs-list li{
    font-size:16px;
    padding-left:28px;
  }
}


/* P24. .pufp-questions — sekcja 16 "FAQ" wzorem bejbino (accordion + ikona), etap 93.
   Nazwa klasy CELOWO inna niz stare martwe .pufp-faq (sprzed etapu 73, male fonty 14-15px,
   nieusuniete po skasowaniu tresci) - zeby uniknac mieszania sie regul.
   7 pytan odzyskanych z realnej tresci produktu 327 sprzed etapu 73, 3 dodatkowe oparte na
   faktach juz opublikowanych na tej karcie (kolory, zapach/smak, darmowa dostawa 2+ szt). */
.pufp-questions{
  max-width:100%;
  margin:0 0 56px;
}
.pufp-questions h2{
  font-family:'Roboto',-apple-system,sans-serif;
  font-weight:400;
  font-size:3vw;
  line-height:1.3;
  color:#E8A33D;
  text-align:center;
  margin:0 0 32px;
}
.pufp-questions-item{
  border-bottom:1px solid var(--puf-line-soft);
  padding:22px 0;
}
.pufp-questions-item:first-of-type{
  border-top:1px solid var(--puf-line-soft);
}
.pufp-questions-item summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-family:'Roboto',-apple-system,sans-serif;
  font-weight:500;
  font-size:26px;
  line-height:1.4;
  color:#1A1A1A;
}
.pufp-questions-item summary::-webkit-details-marker{
  display:none;
}
.pufp-questions-icon{
  position:relative;
  flex:0 0 auto;
  width:24px;
  height:24px;
}
.pufp-questions-icon::before,
.pufp-questions-icon::after{
  content:'';
  position:absolute;
  background:#E8A33D;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  transition:transform .2s ease;
}
.pufp-questions-icon::before{
  width:16px;
  height:2px;
}
.pufp-questions-icon::after{
  width:2px;
  height:16px;
}
.pufp-questions-item[open] .pufp-questions-icon::after{
  transform:translate(-50%,-50%) rotate(90deg);
  opacity:0;
}
.pufp-questions-item p{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:19px;
  line-height:1.6;
  color:#1A1A1A;
  margin:16px 0 0;
}
.pufp-questions-item p a{
  color:#E8A33D;
  text-decoration:underline;
}
@media (max-width:767px){
  .pufp-questions h2{
    font-size:24px;
    line-height:1.25;
  }
  .pufp-questions-item summary{
    font-size:17px;
  }
  .pufp-questions-item p{
    font-size:15px;
  }
}


/* P25. .pufp-reviews-panel — sekcja 17 "Opinie klientow" wzorem bejbino, etap 96.
   Bejbino uzywa wtyczki "Site Reviews" (GLSR) - zainstalowana ta sama wtyczka (za zgoda wlasciciela),
   shortcody [site_reviews_summary]/[site_reviews]/[site_reviews_form] renderuja natywny panel.
   CSS ponizej nadpisuje domyslny niebieski styl wtyczki na kolory marki PUF. */
.pufp-reviews-panel{
  max-width:100%;
  margin:0 0 56px;
}
.pufp-reviews-panel h2{
  font-family:'Roboto',-apple-system,sans-serif;
  font-weight:400;
  font-size:3vw;
  line-height:1.3;
  color:#E8A33D;
  text-align:center;
  margin:0 0 32px;
}
.pufp-reviews-panel .glsr-button{
  background:#E8A33D !important;
  border-color:#E8A33D !important;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-weight:600;
}
.pufp-reviews-panel .glsr-button:hover{
  background:#d6903a !important;
  border-color:#d6903a !important;
}
.pufp-reviews-panel .glsr-field label{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:#1A1A1A;
}
.pufp-reviews-panel .glsr-input:focus,
.pufp-reviews-panel textarea:focus,
.pufp-reviews-panel select:focus{
  border-color:#E8A33D !important;
  outline-color:#E8A33D !important;
  box-shadow:0 0 0 1px #E8A33D !important;
}
.pufp-reviews-panel .glsr-review-form,
.pufp-reviews-panel p,
.pufp-reviews-panel span{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
@media (max-width:767px){
  .pufp-reviews-panel h2{
    font-size:24px;
    line-height:1.25;
  }
}


/* --- P26. .pufp-reviews-panel - odstep miedzy przyciskiem "Zobacz wszystkie opinie"
   a formularzem dodawania opinii ponizej, zeby przycisk byl wyraznie widoczny, etap 97. --- */
.pufp-reviews-panel .glsr-pagination.glsr-ajax-loadmore {
  margin-bottom: 40px;
}


/* --- P27. .puf-rating-line - pasek oceny na gorze karty produktu (tytul + gwiazdki + liczba opinii),
   wzorem bejbino.pl .nl-custom-rating-line, miedzy tytulem a cena. Dodane 2026-09-02. --- */
.puf-rating-line {
  display: block;
  font-size: 20px;
  color: #000;
  margin: 3px 0 10px 0;
}
.puf-rating-line .puf-rating-stars img.emoji {
  height: 1em;
  width: 1em;
  vertical-align: -0.1em;
}


/* --- P28. .woocommerce-product-details__short-description h6 - powiekszony naglowek
   "Gryzaki PUF Kids nr 1 w Polsce" pod cena, wzorem bejbino.pl (Majtki Treningowe nr 1 w Polsce).
   Dodane 2026-09-02. --- */
.woocommerce-product-details__short-description h6 {
  font-size: 18px;
  font-weight: 700;
  color: #000;
}


/* --- P29. Kolorystyka ceny promocyjnej wzorem Amazon: stara cena szara,
   nowa cena czarna, procent rabatu w osobnej czerwonej plakietce.
   Dodane 2026-09-02. --- */
.summary.entry-summary .price del {
  color: #767676 !important;
  text-decoration: line-through;
}
.summary.entry-summary .price ins {
  color: #000 !important;
  text-decoration: none;
}
.puf-sale-badge {
  display: inline-block;
  background: #cc0c39;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 4px;
  margin: 0 0 12px 0;
}


/* --- P30. Poprawka do P29: .woocommerce-Price-amount ma wlasny kolor (nadpisuje
   dziedziczenie z del/ins), wiec trzeba celowac bezposrednio w niego. Dodane 2026-09-02. --- */
.summary.entry-summary .price del .woocommerce-Price-amount,
.summary.entry-summary .price del bdi {
  color: #767676 !important;
}
.summary.entry-summary .price ins .woocommerce-Price-amount,
.summary.entry-summary .price ins bdi {
  color: #000 !important;
}


/* --- P31. Poprawka v2 po weryfikacji zywego Amazon.pl: procent rabatu inline przy
   cenie (bez pudelka), stara przekreslona cena ukryta wizualnie (zostaje w DOM/schema
   dla SEO), zastapiona mala szara linia zgodnosci z ustawa o cenach (Omnibus).
   Dodane 2026-09-02. --- */
.summary.entry-summary .price del {
  display: none;
}
.puf-sale-percent {
  color: #cc0c39;
  font-size: 24px;
  font-weight: 400;
  margin-right: 6px;
  vertical-align: middle;
}
.puf-lowest-price {
  color: #565959;
  font-size: 12px;
  margin: 4px 0 12px 0;
}


/* --- P32. Poprawka do P31: display:none na .price del bylo bez !important,
   theme wymusza inline-block z wyzsza specyficznoscia. Dodane 2026-09-02. --- */
.summary.entry-summary .price del {
  display: none !important;
}


/* --- P33. Poprawka do P32: wlasciciel chce jednak widziec przekreslona stara cene
   obok nowej (nie tylko w malej szarej linii ponizej). Przywracam widocznosc .price del.
   Dodane 2026-09-02. --- */
.summary.entry-summary .price del {
  display: inline-block !important;
}


/* --- P34. Poprawka do P31: .puf-lowest-price dziedziczyl z motywu duzy
   padding-bottom (18px) i line-height (26px) na tagu <p>, co wizualnie robilo
   duzo wiekszy odstep niz sugerowaly same marginesy. Zmniejszone, tekst ma byc
   widoczny ale nie rzucac sie w oczy. Dodane 2026-09-02. --- */
.puf-lowest-price {
  padding: 0 !important;
  line-height: 1.4 !important;
  margin: 2px 0 6px 0 !important;
}


/* --- P35. Kolorystyka bannera cookies (CookieConsent) zgodna z marka PUF (pomarancz)
   zamiast domyslnego niebieskiego. Dodane 2026-09-02. --- */
#cc-main {
  --cc-btn-primary-bg: #c9822a;
  --cc-btn-primary-border-color: #c9822a;
  --cc-btn-primary-hover-bg: #a86c22;
  --cc-btn-primary-hover-border-color: #a86c22;
  --cc-btn-primary-text: #fff;
  --cc-toggle-on-bg: #c9822a;
}


/* --- P36. Nowe elementy tresci strony glownej (2026-09-03): podtytul pod haslem hero,
   naglowki w sekcji podzialu Eyewear/Kids, wstep i zamkniecie w sekcji "Dlaczego PUF". --- */
.puf-hero-slogan-sub {
  color: rgba(255,255,255,0.9);
  font-size: 18px;
  font-weight: 400;
  margin: 14px 0 0 0;
  max-width: 560px;
}
.puf-hero3-headline {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px 0;
}
.puf-why-intro {
  color: rgb(74,69,61);
  font-size: 16px;
  margin: 0 0 20px 0;
}
.puf-why-closing {
  color: rgb(26,26,26);
  font-size: 16px;
  font-weight: 600;
  margin: 24px 0 0 0;
}


/* --- P37. PODGLAD: rozbicie karuzeli produktow na dwie osobne sekcje (Eyewear/Kids).
   Selektory scelowane na modyfikatory --eyewear/--kids, ktorych NIE MA na zywej stronie
   glownej (tam karuzela ma tylko "puf-grid-section" bez modyfikatora) - zeby te reguly
   byly calkowicie martwe/bez efektu na zywej stronie dopoki zmiana nie zostanie
   zaakceptowana i przeniesiona. Dodane 2026-09-03. --- */
.puf-carousel-heading-row {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}
.puf-carousel-heading-row .puf-v6-eyebrow {
  justify-content: center;
  display: flex;
}
.puf-carousel-heading-row--kids .puf-v6-eyebrow--kids {
  color: #c9822a;
}
.puf-carousel-heading {
  margin: 10px 0 12px 0;
}
.puf-carousel-lead {
  color: rgb(74,69,61);
  font-size: 16px;
  margin: 0 0 8px 0;
}
.puf-grid-section--eyewear,
.puf-grid-section--kids {
  margin-top: 36px;
  margin-bottom: 60px;
}
.puf-carousel-heading-row--kids {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #eee6db;
}


/* --- P38. Poprawka do P37: .puf-grid-section niesie odziedziczony padding-top:56px
   (sensowny dla samodzielnej sekcji, za duzy gdy nad karuzela jest wlasny naglowek
   bezposrednio nad nia). Zaciasniam odstep miedzy naglowkiem a jego karuzela.
   Dodane 2026-09-03. --- */
.puf-grid-section--eyewear,
.puf-grid-section--kids {
  padding-top: 8px !important;
  margin-top: 0 !important;
}
.puf-carousel-heading {
  margin: 6px 0 0 0 !important;
}


/* P39: tighten heading-to-own-carousel gap for the split Eyewear/Kids carousel section.
   .puf-grid-section--eyewear/--kids share the bare .puf-grid-section class with real
   standalone major sections (why/story/stats/testimonials/safety), so they were inheriting
   the 115px 'new major section' top margin meant for those - making each heading read as
   disconnected from its own carousel directly below it. More specific selector wins over
   the existing .vc_row:has(.puf-grid-section) rule. */
.page-id-44 .vc_row:has(.puf-grid-section--eyewear),
.page-id-44 .vc_row:has(.puf-grid-section--kids) {
  margin-top: 40px !important;
}

/* Kids heading row: was margin-top:40px + padding-top:40px stacked (80px total extra on
   top of the natural row gap) - simplify to one clean value so the divider line sits closer
   to the Eyewear carousel above it instead of floating in an invisible gap. */
.puf-carousel-heading-row--kids {
  margin-top: 0 !important;
  padding-top: 40px !important;
}


/* P40: the heading row's centering (margin:0 auto from P37) was losing to Salient's
   own theme rule 'html body .vc_row-fluid > .span_12 > .wpb_column:not([class*="offset-"])'
   which sets margin-left:0px with much higher selector specificity - so the heading box
   was flush-left instead of centered over its wider carousel below it. Force it with
   !important. */
.puf-carousel-heading-row {
  margin-left: auto !important;
  margin-right: auto !important;
}


/* P41: give the Eyewear carousel heading row (first element of the carousel-split
   section) the same 115px sitewide 'new major section' top margin that .puf-why,
   .puf-story, .puf-stats etc. already get - it was never registered into that
   convention, so it sat right against .puf-feat above it with almost no breathing room. */
.page-id-44 .vc_row:has(.puf-carousel-heading-row--eyewear) {
  margin-top: 115px !important;
}


/* P42: mobilna wersja tla hero (Sekcja 1) - inny kadr niz desktop (portret vs pejzaz),
   wgrany osobno przez wlasciciela jako '1 Sekcja ... Mobile.png'. */
@media (max-width: 767px) {
  .page-id-44 .page-header-bg-image {
    background-image: url("https://puf.sellerallegro.pl/wp-content/uploads/2026/09/1-sekcja-mobile.png") !important;
  }
}


/* P43: przyciemnienie zdjecia w Sekcji 1 (hero) - nowe zdjecie jest zbyt jasne,
   bialy tekst ginie na jasnym tle. Kolor tekstu bez zmian - tylko cien na zdjeciu. */
.page-id-44 .page-header-bg-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

/* P44: powiekszenie klikalnych linkow w naglowku (lewa gorna czesc, nad hero) -
   "Nakladki Przeciwsloneczne PUF" / "Gryzaki Sensoryczne PUF Kids" - z 14.5px do 29px
   (dwukrotnie), na wyrazna prosbe wlasciciela. line-height tez podwojony, zeby tekst
   sie nie ucinal przy wiekszym foncie. Sitewide (header), nie tylko strona glowna. */
#header-outer nav .sf-menu > li > a {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
}

/* P45: przycisk "Promocje" w Hero, po prawej stronie loga PUF (theme_location
   top_nav_pull_right, natywny slot Salient dla formatu centered-logo-between-menu-alt).
   Link do /sklep/?on_sale=1, filtrowany przez mu-plugins/puf-promo-filter.php. */
.right-aligned-menu-items .puf-promo-btn > a {
  background-color: var(--puf-amber, #E8A33D) !important;
  color: #1A1A1A !important;
  padding: 8px 20px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  display: inline-block;
}
.right-aligned-menu-items .puf-promo-btn > a:hover {
  background-color: #d6922e !important;
  color: #1A1A1A !important;
}
@media (max-width: 999px) {
  .right-aligned-menu-items .puf-promo-btn { display: none; }
}

/* P46: sekcja "Bezpieczne zakupy" - na desktopie (>=768px) podmieniona na gotowa
   grafike od wlasciciela (1245x385, Canva), zamiast SVG ikon + tekstu. Na mobile
   (<=767px) zostaje oryginalny .puf-trust-row (2x2 siatka tekstowa) - wlasciciel
   dostarczyl na razie tylko wersje "Komputer", bez osobnego kadru mobilnego. */
.page-id-44 .puf-trust-desktop-img {
  display: none;
}
.page-id-44 .puf-trust-row,
.page-id-44 .puf-safety-heading-row {
  display: none;
}
.page-id-44 .puf-trust-mobile-img {
  display: block;
  width: 100vw !important;
  max-width: 100vw !important;
  height: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
@media (min-width: 768px) {
  .page-id-44 .puf-trust-desktop-img {
    display: block;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
  .page-id-44 .puf-trust-mobile-img {
    display: none;
  }
}

/* P47: sekcja "Bezpieczne zakupy" na karcie produktu (.pufp-safe, obecnie tylko
   produkt 327) - ten sam zabieg co P46 na stronie glownej: na desktopie (>=768px)
   pokazana gotowa grafika, na mobile zostaje oryginalny .pufp-safe (2x2/1x4 siatka). */
.pufp-safe-desktop-img {
  display: none;
}
.pufp-safe {
  display: none;
}
.pufp-safe-mobile-img {
  display: block;
  width: 100vw !important;
  max-width: 100vw !important;
  height: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
@media (min-width: 768px) {
  .pufp-safe-desktop-img {
    display: block;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
  .pufp-safe-mobile-img {
    display: none;
  }
}

/* P48: sekcja "Przy zakupie 2 Gryzakow Dostawa GRATIS" (.pufp-offer, produkt 327)
   podmieniona na gotowa grafike od wlasciciela (2103x748, wysoka rozdzielczosc,
   zawiera juz tytul + tekst wypalone w obrazku) - ten sam zabieg co P46/P47. */
.pufp-offer {
  display: none;
}
.pufp-offer-img {
  display: block !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: auto !important;
  margin-top: 0 !important;
  margin-bottom: 56px !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  border-radius: 0 !important;
}

/* P49: sekcja "Masz problem ze zlozeniem zamowienia?" (.pufp-callus, produkt 327)
   podmieniona na gotowa grafike od wlasciciela (1672x941, zawiera juz tytul + przycisk
   wypalone w obrazku), owinieta linkiem tel: zeby przycisk dzialal - ten sam zabieg
   co P46/P47/P48 (.pufp-offer). */
.pufp-callus {
  display: none;
}
.pufp-callus-link {
  display: block;
  text-decoration: none;
}
.pufp-callus-img {
  display: block !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: auto !important;
  margin-top: 0 !important;
  margin-bottom: 56px !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  border-radius: 0 !important;
}

/* P52: sekcja porownania (.pufp-compare) podmieniona na gotowa grafike, ten sam zabieg co P46/P47/P48 */
.pufp-compare{
  display:block;
}
.pufp-compare-img{
  display:block;
  width:100% !important;
  max-width:672px !important;
  height:auto;
  margin:0 auto 56px;
}
.pufp-compare-table{
  display:none;
}


/* P53. Uklad naglowka mobilnego (<768px) - hamburger/logo/ikony wzorem bejbino.pl.
   Realny plik loga (puf-logo-wordmark.webp) podpieto 2026-09-08 przez salient_redux
   (wczesniej #logo mial klase no-image - byl to sam tekst "PUF", bez zadnego pliku).
   .row jest domyslnie display:block na mobile, wiec zmieniamy na flex + logo
   wysrodkowane bezwzglednie (position:absolute + translate), niezalezne od szerokosci
   ikon po bokach - hamburger przesuwany na start przez order:-1, lupa+koszyk trzymane
   razem po prawej przez margin-left:auto na pierwszej z nich (search). */
@media (max-width:767px){
  #header-outer #top .container .row{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    min-height:68px !important;
  }
  #header-outer #top .container .row .col.span_3{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
    width:auto !important;
    z-index:2 !important;
  }
  #header-outer #top .container .row .col.span_9.col_last{
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    position:relative !important;
  }
  #header-outer #top .container .row .col.span_9.col_last .slide-out-widget-area-toggle{
    order:-1 !important;
  }
  #header-outer #top .container .row .col.span_9.col_last a.mobile-search{
    margin-left:auto !important;
  }
}


/* P54. Nowe logo (kwadrat 1:1, wlasne tlo pomaranczowe) - Salient domyslnie ustawia
   img.stnd na height:22px (dopasowane do szerokiego wordmarku sprzed tej zmiany), przez
   co kwadratowe logo renderowalo sie jako male 22x22px w rogu plakietki 68x68px zamiast
   ja wypelnic. Wymuszamy pelny rozmiar plakietki + zaokraglenie rogow samego obrazka
   (na wypadek gdyby #logo nie mial overflow:hidden). */
#header-outer #logo img.stnd,
#header-outer #logo img.starting-logo,
#header-outer #logo img.mobile-only-logo{
  width:68px !important;
  height:68px !important;
  object-fit:cover !important;
  border-radius:13px !important;
}

/* --- PUF Kids: wybór wzoru (gryzak-naszyjnik) 2026-09-17 --- */
.pufp-wzor-picker{margin:0 0 20px 0;}
.pufp-wzor-heading{font-weight:700;font-size:15px;margin:0 0 10px 0 !important;color:#222;}
.pufp-wzor-buttons{display:flex;flex-wrap:wrap;gap:8px;}
.pufp-wzor-btn{padding:9px 16px;border-radius:999px;border:2px solid #e2e2e2;background:#fff;color:#333;font-size:13px;font-weight:600;cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease;}
.pufp-wzor-btn:hover{border-color:#f5a623;}
.pufp-wzor-btn.is-active{border-color:#f5a623;background:#f5a623;color:#fff;}

/* --- PUF Kids: wyróżnienie napisu "Wybierz Swój Wzór" 2026-09-17 --- */
.pufp-wzor-heading{font-weight:800 !important;font-size:18px !important;margin:0 0 14px 0 !important;color:#fff !important;display:inline-block;background:linear-gradient(90deg,#f5a623,#ff7a1a);padding:9px 20px;border-radius:999px;letter-spacing:.3px;animation:pufp-wzor-pulse 1.8s ease-in-out infinite;}
@keyframes pufp-wzor-pulse{0%{box-shadow:0 0 0 0 rgba(245,166,35,.55);}70%{box-shadow:0 0 0 12px rgba(245,166,35,0);}100%{box-shadow:0 0 0 0 rgba(245,166,35,0);}}

/* --- PUF Kids: strzalka pod naglowkiem wyboru wzoru 2026-09-17 --- */
.pufp-wzor-arrow{display:inline-block;margin-left:2px;animation:pufp-wzor-bounce 1.1s ease-in-out infinite;}
@keyframes pufp-wzor-bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}}

/* --- PUF Kids: ukrycie natywnego selecta WooCommerce na produkcie 40 (mamy wlasne przyciski) 2026-09-17 --- */
body.postid-40 table.variations{display:none !important;}

/* --- PUF Kids produkt 40: mniejszy odstep miedzy 2 zdaniami rozbitymi na osobne <p> 2026-09-18 --- */
body.postid-40 .pufp-support-text p:first-of-type,
body.postid-40 .pufp-safety-text p:first-of-type,
body.postid-40 .pufp-about-text p:first-of-type,
body.postid-40 .pufp-habit-text p:first-of-type,
body.postid-40 .pufp-signal-text p:first-of-type,
body.postid-40 .pufp-value-text p:first-of-type,
body.postid-40 .pufp-care-text p:first-of-type,
body.postid-40 .pufp-school-text p:first-of-type{margin-bottom:10px !important;}

/* --- PUF Kids produkt 40: wieksza przerwa naglowek->tekst, mniejsza miedzy zdaniami 2026-09-18 --- */
body.postid-40 .pufp-support-text h2,
body.postid-40 .pufp-safety-text h2,
body.postid-40 .pufp-about-text h2,
body.postid-40 .pufp-habit-text h2,
body.postid-40 .pufp-signal-text h2,
body.postid-40 .pufp-value-text h2,
body.postid-40 .pufp-care-text h2,
body.postid-40 .pufp-school-text h2{margin-bottom:28px !important;}

body.postid-40 .pufp-support-text p:first-of-type,
body.postid-40 .pufp-safety-text p:first-of-type,
body.postid-40 .pufp-about-text p:first-of-type,
body.postid-40 .pufp-habit-text p:first-of-type,
body.postid-40 .pufp-signal-text p:first-of-type,
body.postid-40 .pufp-value-text p:first-of-type,
body.postid-40 .pufp-care-text p:first-of-type,
body.postid-40 .pufp-school-text p:first-of-type{margin-bottom:4px !important;}

/* --- PUF Kids produkt 40 (wariantowy): naprawa rozciagnietego licznika ilosci "-1+" 2026-09-18 --- */
body.postid-40 form.cart .quantity{display:inline-flex !important;}

/* --- PUF Kids produkt 40 (wariantowy): poprawna kolejnosc quantity+przycisk jak w reszcie produktow 2026-09-18 --- */
body.postid-40 .woocommerce-variation-add-to-cart{display:flex !important;align-items:center !important;gap:16px !important;flex-wrap:wrap;}

/* ===== Checkout: czerwona gwiazdka przy polach wymaganych (2026-09-23, przygotowanie do weryfikacji P24) ===== */
.wc-block-checkout__form label[for="email"]::after,
label[for="shipping-first_name"]::after,
label[for="shipping-last_name"]::after,
label[for="shipping-address_1"]::after,
label[for="shipping-postcode"]::after,
label[for="shipping-city"]::after,
label[for="shipping-phone"]::after,
label[for="billing-first_name"]::after,
label[for="billing-last_name"]::after,
label[for="billing-address_1"]::after,
label[for="billing-postcode"]::after,
label[for="billing-city"]::after,
label[for="billing-phone"]::after {
  content: " *";
  color: #e53935;
  font-weight: 700;
}

.wc-block-checkout__terms .wc-block-components-checkbox__label::after {
  content: " *";
  color: #e53935;
  font-weight: 700;
}

/* ===== Checkout: ukryj Adres/Kod pocztowy/Miejscowosc gdy wybrany Paczkomat InPost (2026-09-23) ===== */
body.puf-paczkomat-address-hidden .wc-block-components-address-form__address_1,
body.puf-paczkomat-address-hidden .wc-block-components-address-form__address_2,
body.puf-paczkomat-address-hidden .wc-block-components-address-form__postcode,
body.puf-paczkomat-address-hidden .wc-block-components-address-form__city {
  display: none !important;
}

/* ===== Checkout: pola danych firmy widoczne dopiero po zaznaczeniu checkboxa faktury (2026-09-23) ===== */
.wc-block-components-address-form__puf-company-name,
.wc-block-components-address-form__puf-company-nip {
  display: none;
}
body.puf-invoice-fields-visible .wc-block-components-address-form__puf-company-name,
body.puf-invoice-fields-visible .wc-block-components-address-form__puf-company-nip {
  display: block;
}

/* ===== Checkout: niebieskie linki/checkboxy w czcionce marki (Roboto), nie w domyslnej motywu ===== */
.wc-block-checkout a,
.wc-block-checkout .wc-block-components-checkbox__label {
  font-family: 'Roboto', -apple-system, sans-serif;
}

/* ===== Checkout: przeniesienie faktury VAT pod adres wysylki (location: address) - ukryj duplikat w adresie rozliczeniowym (2026-09-23) ===== */
.wc-block-components-address-form__puf-wants-invoice:has(#billing-puf-wants-invoice),
.wc-block-components-address-form__puf-company-name:has(#billing-puf-company-name),
.wc-block-components-address-form__puf-company-nip:has(#billing-puf-company-nip) {
  display: none !important;
}

/* P-QV. Quick View (nectar_quick_view) — kompaktowy, czytelny wyglad podsumowania
   (tytul/cena/korzysci/GRATIS) w waskiej kolumnie okienka podgladu. Tytul dziedziczyl
   54px z pelnej karty produktu i wychodzil poza okienko — 2026-09-30. */
.nectar-quick-view-box .summary h1.product_title{
  font-size:24px !important;
  line-height:1.3 !important;
  margin:0 0 10px !important;
  overflow-wrap:break-word;
}
.nectar-quick-view-box .summary .price{
  font-size:22px !important;
  line-height:1.3 !important;
  margin:0 0 16px !important;
}
.nectar-quick-view-box .summary .woocommerce-product-details__short-description h2{
  font-size:18px !important;
  line-height:1.3 !important;
  margin:0 0 8px !important;
}
.nectar-quick-view-box .summary .woocommerce-product-details__short-description h6{
  font-size:15px !important;
  line-height:1.3 !important;
  margin:0 0 6px !important;
}
.nectar-quick-view-box .summary .woocommerce-product-details__short-description ul{
  margin:0 0 16px 20px !important;
}
.nectar-quick-view-box .summary .pufp-wzor-heading{
  font-size:15px !important;
  margin:0 0 10px !important;
}

/* P-QV2. Quick View — przycisk "Dodaj do koszyka" w tym samym pomaranczowym
   kolorze co reszta sklepu (var(--puf-amber), ta sama zmienna co na karcie
   produktu). Domyslnie niebieski, bo reguly koloru byly ograniczone do
   body.single-product, ktorej Quick View (otwierany z archiwum) nie ma. 2026-09-30. */
.nectar-quick-view-box .single_add_to_cart_button{
  background:var(--puf-amber) !important;
  background-color:var(--puf-amber) !important;
  background-image:none !important;
  color:var(--puf-ink) !important;
  border:0 !important;
  border-radius:200px !important;
  font-family:'Roboto',-apple-system,sans-serif !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
}
.nectar-quick-view-box .single_add_to_cart_button:hover{
  background:var(--puf-amber-hover) !important;
  background-color:var(--puf-amber-hover) !important;
  color:var(--puf-ink) !important;
}

/* P-QV2b. Poprawka specyficznosci: motyw ma "body .nectar-quick-view-box
   .single_add_to_cart_button {background-color:...!important}" (0,2,1) —
   bije nasza regule bez "body" (0,2,0). Dopisujemy "body" z przodu, zeby
   zrownac specyficznosc; wygrywa reguła zaladowana pozniej (ta ponizej,
   w naszym pliku wczytywanym po motywie). 2026-09-30. */
body .nectar-quick-view-box .single_add_to_cart_button{
  background:var(--puf-amber) !important;
  background-color:var(--puf-amber) !important;
  background-image:none !important;
  color:var(--puf-ink) !important;
  border:0 !important;
  border-radius:200px !important;
  font-family:'Roboto',-apple-system,sans-serif !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
}
body .nectar-quick-view-box .single_add_to_cart_button:hover{
  background:var(--puf-amber-hover) !important;
  background-color:var(--puf-amber-hover) !important;
  color:var(--puf-ink) !important;
}

/* P-QV3. Ukryj natywna tabelke wyboru wariantu (table.variations, z ukrytym
   selectem #wzor) wewnatrz Nectar Quick View — zostaja TYLKO nasze przyciski
   .pufp-wzor-btn. Select #wzor musi zostac w DOM (steruje nim JS w
   puf-footer-scripts.php), wiec ukrywamy tylko WIDOK tabeli, nie usuwamy jej
   z drzewa. Poza Quick View (karta produktu) tabela zostaje bez zmian —
   scope tylko do .nectar-quick-view-box. 2026-09-30. */
.nectar-quick-view-box table.variations{
  display:none !important;
}

/* P-ONSALE. Badge "Promocja!" (span.onsale) na kartach produktow i w Quick View —
   domyslnie niebieski (rgb(52,82,255), akcent motywu Salient), myli sie wizualnie
   z linkami/akcentami motywu i nie kojarzy sie z promocja. Zmieniamy na #cc0c39 —
   TEN SAM kolor, ktory sklep juz uzywa jako "kolor promocji" w .puf-sale-badge i
   .puf-sale-percent na karcie produktu 327 — zamiast wprowadzac nowy odcien.
   Selektory 1:1 jak w salient-dynamic-styles.css (zeby zrownac specyficznosc,
   wygrywa reguła zaladowana pozniej — patrz [[reference_puf_quickview_css_specificity]]). 2026-09-30. */
.woocommerce ul.products li.product .onsale,
.woocommerce-page ul.products li.product .onsale,
.woocommerce span.onsale,
.woocommerce-page span.onsale,
.woocommerce span.onsale .nectar-quick-view-box .onsale,
.nectar-quick-view-box .onsale,
.woocommerce-page .nectar-quick-view-box .onsale,
ul.products li.minimal.product span.onsale{
  background-color:#cc0c39 !important;
}

/* P-NOTICE. Komunikaty WooCommerce (dodano do koszyka, kupon, info/error) w
   koszyku i checkoucie maja domyslnie niebieskie tlo z motywu Salient
   (salient-dynamic-styles.css, ta sama regula co onsale/przycisk Quick View,
   rgb(52,82,255) !important). Zmieniamy na kolor marki (var(--puf-amber)),
   selektory 1:1 jak w motywie zeby zrownac specyficznosc — wygrywa reguła
   zaladowana pozniej (nasz plik). Tekst na ciemnym --puf-ink dla kontrastu
   (bialy na jasnym bursztynie slabo widoczny). 2026-09-30. */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noreviews,
p.woocommerce-noreviews,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-form-coupon-toggle .woocommerce-info{
  background-color:var(--puf-amber) !important;
  color:var(--puf-ink) !important;
}
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before{
  color:var(--puf-ink) !important;
}
.woocommerce-message .button.wc-forward,
.woocommerce-info .button.wc-forward{
  background-color:var(--puf-ink) !important;
  color:#fff !important;
}
.woocommerce-message .button.wc-forward:hover,
.woocommerce-info .button.wc-forward:hover{
  background-color:var(--puf-amber-hover) !important;
  color:var(--puf-ink) !important;
}

/* P-FLUO-1:1. Checkout Fluo 1:1 z belanto.pl (pomiary getComputedStyle 2026-09-30):
   baza Nunito 16px/25px czarny (u nas dziedziczyl Open Sans 14px szary z Salienta —
   Fluo liczy wszystkie rozmiary w em, wiec baza przestawia caly uklad), tytul kroku
   30.6px/700, etykieta wyszukiwarki 14px/500, przyciski w pelni zaokraglone
   (Salient wymusza border-radius:4px !important na button). Nunito: puf-checkout-font.php. */
body .fluo-checkout{
  font-family:'Nunito',sans-serif !important;
  font-size:16px !important;
  line-height:25px !important;
  color:#000 !important;
}
body .fluo-checkout input,
body .fluo-checkout button,
body .fluo-checkout select,
body .fluo-checkout textarea,
body .fluo-checkout label,
body .fluo-checkout h1,
body .fluo-checkout h2,
body .fluo-checkout h3,
body .fluo-checkout h4{
  font-family:'Nunito',sans-serif !important;
}
body .fluo-checkout .fluo-step__title{
  font-size:30.6px !important;
  font-weight:700 !important;
  line-height:30.6px !important;
  color:#000 !important;
  letter-spacing:normal !important;
  margin:0 0 24.48px !important;
}
body .fluo-checkout .fluo-geosearch{ color:#000 !important; }
body .fluo-checkout .fluo-geosearch__label{
  font-size:14px !important;
  font-weight:500 !important;
  line-height:18.2px !important;
  color:#000 !important;
}
body .fluo-checkout .fluo-btn,
body .fluo-checkout .fluo-geosearch__go{
  border-radius:200px !important;
}

/* P-FLUO-1:1b. Kroki 2-4 (Paczkomat/Dane/Podsumowanie) siedza w form.woocommerce-checkout,
   POZA .fluo-checkout (tam jest tylko krok 1 i pasek postepu) — te same reguly co P-FLUO-1:1. */
body form.woocommerce-checkout{
  font-family:'Nunito',sans-serif !important;
  font-size:16px !important;
  line-height:25px !important;
  color:#000 !important;
}
body form.woocommerce-checkout input,
body form.woocommerce-checkout button,
body form.woocommerce-checkout select,
body form.woocommerce-checkout textarea,
body form.woocommerce-checkout label,
body form.woocommerce-checkout h1,
body form.woocommerce-checkout h2,
body form.woocommerce-checkout h3,
body form.woocommerce-checkout h4{
  font-family:'Nunito',sans-serif !important;
}
body form.woocommerce-checkout .fluo-step__title{
  font-size:30.6px !important;
  font-weight:700 !important;
  line-height:30.6px !important;
  color:#000 !important;
  letter-spacing:normal !important;
  margin:0 0 24.48px !important;
}
body form.woocommerce-checkout .fluo-geosearch{ color:#000 !important; }
body form.woocommerce-checkout .fluo-geosearch__label{
  font-size:14px !important;
  font-weight:500 !important;
  line-height:18.2px !important;
  color:#000 !important;
}
body form.woocommerce-checkout .fluo-btn,
body form.woocommerce-checkout .fluo-geosearch__go{
  border-radius:200px !important;
}

/* P-FLUO-1:1c. Kroki Dane i Podsumowanie 1:1 z belanto.pl (pomiary getComputedStyle 2026-09-30),
   akcent (gwiazdki, przycisk zamowienia) w pomaranczu sklepu zamiast granatu Belanto — decyzja wlasciciela. */
body form.woocommerce-checkout .woocommerce-billing-fields > h3,
body form.woocommerce-checkout #order_review_heading{
  font-size:30.6px !important;
  font-weight:700 !important;
  line-height:30.6px !important;
  color:#000 !important;
  letter-spacing:normal !important;
}
body form.woocommerce-checkout #customer_details .form-row > label{
  font-size:14px !important;
  font-weight:500 !important;
  line-height:28px !important;
  color:#000 !important;
}
body form.woocommerce-checkout .form-row label .required,
body form.woocommerce-checkout .form-row label .optional{
  color:var(--puf-amber-deep) !important;
  text-decoration:none !important;
}
body form.woocommerce-checkout #customer_details .form-row input.input-text{
  font-size:16px !important;
  padding:8px !important;
  height:40px !important;
  box-sizing:border-box !important;
}
body form.woocommerce-checkout #order_review .minus,
body form.woocommerce-checkout #order_review .plus,
body form.woocommerce-checkout #order_review .fluo-qty__remove{
  border-radius:200px !important;
}
body form.woocommerce-checkout #order_review input.qty{
  background:#fff !important;
  border:1px solid #aaa !important;
  font-size:16px !important;
  line-height:16px !important;
  padding:15px !important;
  width:58px !important;
  height:54px !important;
  box-sizing:border-box !important;
}
body form.woocommerce-checkout #order_review tr.order-total{
  font-size:16px !important;
}
body form.woocommerce-checkout #place_order{
  background:var(--puf-amber) !important;
  background-color:var(--puf-amber) !important;
  color:var(--puf-ink) !important;
  text-transform:capitalize !important;
  line-height:24px !important;
  padding:15px 35px !important;
}
body form.woocommerce-checkout #place_order:hover{
  background:var(--puf-amber-hover) !important;
  background-color:var(--puf-amber-hover) !important;
  color:var(--puf-ink) !important;
}

/* P-FLUO-1:1d. #place_order: Salient/WooCommerce maja ".woocommerce #order_review #payment #place_order"
   (3 id) z background !important i padding:25px !important — bija P-FLUO-1:1c. Podbijamy specyficznosc
   (podwojone #place_order = 4 id). */
html body form.woocommerce-checkout #order_review #payment #place_order#place_order{
  background:var(--puf-amber) !important;
  background-color:var(--puf-amber) !important;
  color:var(--puf-ink) !important;
  padding:15px 35px !important;
  line-height:24px !important;
  text-transform:capitalize !important;
}
html body form.woocommerce-checkout #order_review #payment #place_order#place_order:hover{
  background:var(--puf-amber-hover) !important;
  background-color:var(--puf-amber-hover) !important;
  color:var(--puf-ink) !important;
}

/* --- PRZYCISKI: jednolite zaokraglenie w calym sklepie (2026-10-22) ---
   Tekstowe przyciski = pigulka 999px; strzalki karuzel = kolo (50%).
   Bez zmian: chat Konsultant Pufino, pola formularzy (np. input.qty).
   Salient (salient-dynamic-styles.css) ustawia 4px/3px z !important przez
   body[data-button-style*="slightly_rounded"] button itd. (0,2,1) oraz
   .woocommerce .classic .product-wrap ... .add_to_cart_button (0,6,0) -
   stad prefiks "body[data-button-style]" i powtorzone klasy na listingu. --- */
html body[data-button-style] .puf-btn,
html body[data-button-style] .puf-swatch,
html body[data-button-style] .puf-sa__btn,
html body[data-button-style] a.button.wc-backward,
html body[data-button-style] .wbte-ewb-btn,
html body[data-button-style] .glsr-button,
html body[data-button-style] #header-outer .widget_shopping_cart a.button,
html body[data-button-style] .woocommerce-mini-cart__buttons a.button,
html body[data-button-style] .wc-block-product-filters__apply,
html body[data-button-style] .select-paczkomat-button,
html body #place_order#place_order{
  border-radius:999px !important;
}
/* Listing: "Dodaj do koszyka"/"Wybierz opcje" + ikona Quick View = jedna sklejona pigulka */
html body[data-button-style] ul.products li.product a.add_to_cart_button.add_to_cart_button.add_to_cart_button.add_to_cart_button.add_to_cart_button{
  border-radius:999px 0 0 999px !important;
}
html body[data-button-style] ul.products li.product a.nectar_quick_view.nectar_quick_view.nectar_quick_view.nectar_quick_view.nectar_quick_view{
  border-radius:0 999px 999px 0 !important;
}
/* Strzalki karuzel: okragle */
html body .puf-arr,
html body .pufp-gallery-arrow,
html body .flickity-prev-next-button{
  border-radius:50% !important;
}
/* Baner cookies (CookieConsent) */
html body #cc-main{
  --cc-btn-border-radius:999px;
}