/* =====================================================================
   ŁUCZNIK 2026 — WARSTWA 21.0: wygląd jak Sklep firmowy Łucznik (v18)
   Tylko wygląd. Paleta: #FFFFFF #262261 #00B8DE #E5E7EB. Poppins 400/600.
   Wzór: LUCZNIK_WZORZEC_WYGLADU_v2 + sklep home.html / listing.html.
   ===================================================================== */
:root{--tone:#FFFFFF;--line:#E5E7EB;--panel-shadow:none;--hover-shadow:0 16px 36px rgba(0,0,0,.08);--r-tile:20px}

/* ---------- 1. Tła sekcji: biel + linia #E5E7EB, ciemne tylko granat ---------- */
body .hero{background:#FFFFFF!important;background-image:none!important}
body .trust,body .finder,body .effects,body .closeup,body .models,body .compare,body .reviews,body #pytania{background:#FFFFFF!important;border-top:1px solid #E5E7EB!important}
body .box{background:#262261!important;background-image:none!important}
body .final.final-dark{background:#262261!important;background-image:none!important}

/* rytm pionowy: 56–92 px (telefon 48) */
body .section{padding:80px 0!important}
body .trust{padding:28px 0!important}
body .final.final-dark{padding:88px 0!important}
@media(max-width:760px){body .section,body .final.final-dark{padding:48px 0!important}body .trust{padding:24px 0!important}}

/* treść do 1240 px, margines 24 px (telefon 16 px) */
.wrap{width:min(1240px,calc(100% - 48px))}
@media(max-width:760px){.wrap{width:calc(100% - 32px)!important}}

/* ---------- 2. Nagłówek: logo 44 px (telefon 30), przycisk główny 48 px ---------- */
.header{background:#FFFFFF!important;border-bottom:1px solid #E5E7EB!important;box-shadow:none!important}
.header .wrap{height:auto!important;min-height:80px;padding:18px 0}
.logo{height:44px!important;width:auto!important}
.head-cta{min-height:48px!important;padding:13px 24px!important;font-size:14px!important}
@media(max-width:760px){
  .header .wrap{min-height:58px;padding:14px 0}
  .logo{height:30px!important}
  .header{transition:transform .25s}
  .header.hid{transform:translateY(-100%)}
}
@media(prefers-reduced-motion:reduce){.header{transition:none}}
.scroll-scale i,.scroll-scale i.M{background:#E5E7EB!important}

/* ---------- 3. Typografia: wielkość i grubość, nie szarość ---------- */
b,strong,th,td,.m-price,.yes,.need-chip:after{font-weight:600!important}
@media(min-width:761px){
  .section-head h2,.box-copy h2,body .final-dark h2,.finder-intro h2{font-size:clamp(30px,3.2vw,46px)!important;line-height:1.08;letter-spacing:-.04em}
}
@media(max-width:760px){
  h1,#heroTitle{font-size:34px!important;line-height:1.06;letter-spacing:-.03em}
  .section-head h2,.box-copy h2,body .final-dark h2,.finder-intro h2{font-size:30px!important;line-height:1.1;letter-spacing:-.03em}
}
.section-head p,.finder-sub,.lead-s,.box-copy p,.faq-list details p,.cmp-common p{font-size:16px!important;line-height:1.7!important}
@media(max-width:760px){.section-head p,.finder-sub,.lead-s,.box-copy p,.faq-list details p,.cmp-common p{font-size:15px!important}}

/* opisy w kartach min. 14 px */
.need-chip span,.answer span,.pw-a span,.trust-item span,.colors-label,.chip,.step-label,.box-link,.m-models,.m-proj,.m-label,
.tile figcaption,.tile figcaption small,.m-col small,.cmp-card small,.cmp-table small,.linkbtn,.photo figcaption,.fx figcaption,
.m-col li,.cmp-off,.rv-list cite,.foot-legal a,.foot-seller,.foot-ver,.foot-ver span,.toast,.save-dlg p,.save-dlg label,.reel-dlg p,
.sticky-cta,.xmas span,.result small,.result-why li,.alt span,.m-price small{font-size:14px!important}

/* ---------- 4. Przyciski ---------- */
.btn.primary:not(.need-chip),.sticky-cta{background:#262261!important;color:#FFFFFF!important;border:1px solid #262261!important;border-radius:999px!important;box-shadow:none!important}
.btn.primary:not(.need-chip):hover,.sticky-cta:hover{background:#00B8DE!important;border-color:#00B8DE!important;color:#262261!important}
.btn.secondary{background:#FFFFFF!important;color:#262261!important;border:1px solid #262261!important}
.btn.secondary:hover{background:#E5E7EB!important}
body .final-dark .btn.btn-on-dark{background:#FFFFFF!important;color:#262261!important;border-color:#FFFFFF!important}
body .final-dark .btn.btn-on-dark:hover{background:#00B8DE!important;border-color:#00B8DE!important;color:#262261!important}
.sticky-cta{min-height:48px;padding:13px 24px!important;font-size:14px!important}
/* linki tekstowe w liniach przycisków */
.linkbtn{border:0!important;text-decoration:underline;text-decoration-color:#00B8DE;text-decoration-thickness:2px;text-underline-offset:4px}
.reels-nav .linkbtn{text-decoration:none;border:1px solid #E5E7EB!important;border-radius:999px}
.reels-nav .linkbtn:hover{border-color:#262261!important}
.box-link{color:#FFFFFF!important;text-decoration:underline;text-decoration-color:#00B8DE;text-decoration-thickness:2px;text-underline-offset:4px}

/* przyciski kolorów (chip) */
.chip{border:1px solid #E5E7EB!important;background:#FFFFFF;color:#262261;min-height:44px}
.chip:hover{border-color:#262261!important}
.chip.on{background:#262261!important;border-color:#262261!important;color:#FFFFFF!important}

/* ---------- 5. Dobór: kafelki jak „Co chcesz uszyć?” w sklepie (.choice) ---------- */
.need-chip,.answer,.pw-a{background:#FFFFFF!important;border:1px solid #E5E7EB!important;border-radius:20px!important;box-shadow:none!important;transform:none!important;padding:20px 48px 20px 22px!important;position:relative;text-align:left}
.need-chip b,.answer b,.pw-a b{font-size:17px!important;font-weight:600!important;color:#262261!important}
.need-chip span,.answer span,.pw-a span{color:#262261!important;margin-top:2px}
.need-chip:hover,.answer:hover,.pw-a:hover{border-color:#262261!important;box-shadow:none!important;background:#FFFFFF!important;transform:none!important}
.answer:after,.pw-a:after{content:"→";position:absolute;right:22px;top:50%;transform:translateY(-50%);color:#262261;font-weight:400}
.need-chip:after{right:22px!important;color:#262261!important;font-weight:400!important}
.answer.selected,.pw-a.selected,.need-chip.on{border:1px solid #262261!important;box-shadow:inset 0 0 0 1px #262261!important}
.finder-box,.pw-box{background:#FFFFFF!important;border:1px solid #E5E7EB!important;border-radius:20px!important;box-shadow:none!important}
.progress{background:#E5E7EB!important}
.progress i{background:#00B8DE!important}

/* ---------- 6. Karty: promień 20, linia #E5E7EB, cień tylko po najechaniu ---------- */
body .trust-item{background:#FFFFFF!important;border:1px solid #E5E7EB!important;border-radius:20px!important;box-shadow:none!important}
body .fam,body .fam.soft,body .m-col,body .cmp-table,body .cmp-card,body .cmp-common,body .model-fit,body .alt,body .m-proj{background:#FFFFFF!important;border:1px solid #E5E7EB!important;border-radius:20px!important;box-shadow:none!important}
body .fam .facts span{background:#FFFFFF!important;border:1px solid #E5E7EB!important}
.cmp-table th,.cmp-table td{box-shadow:none!important}
.m-col:hover,.cmp-card:hover{box-shadow:0 16px 36px rgba(0,0,0,.08)!important}

/* ---------- 7. Modele: karty jak „Nowa generacja maszyn” (bez sceny z miniaturami) ---------- */
.fam-tiles{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px!important;align-content:start}
.fam-tiles.t3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.fam-tiles .tile{display:flex;flex-direction:column;gap:8px;margin:0;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;text-align:left}
.fam-tiles .tile img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;background:#FFFFFF;border:1px solid #E5E7EB;border-radius:20px;padding:10px;box-sizing:border-box;transition:box-shadow .2s}
.fam-tiles .tile:hover img{box-shadow:0 16px 36px rgba(0,0,0,.08)}
.fam-tiles .tile figcaption{margin:0!important;font-size:17px!important;font-weight:600!important;letter-spacing:0!important;color:#262261!important;text-transform:none}
.fam-tiles .tile figcaption small{display:block;font-size:14px!important;font-weight:400!important;margin-top:2px}
@media(max-width:760px){.fam-tiles,.fam-tiles.t3{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}.fam-tiles .tile figcaption{font-size:15px!important}}

/* ---------- 8. Zdjęcia: ramka 20 px, białe tło pod zdjęciem ---------- */
.photo,.hero-frame,.reel-media,.kit-photo{border-radius:20px!important;background:#FFFFFF!important;overflow:hidden}
.photo.cap figcaption,.photo figcaption{background:#FFFFFF!important;color:#262261!important;box-shadow:none!important;border:1px solid #E5E7EB}
.reel-play{box-shadow:none!important;border:1px solid #E5E7EB!important}
.reel-play:hover{background:#00B8DE!important;border-color:#00B8DE!important}

/* ---------- 9. Pytania: lista jak „Pytania o zakupy” w sklepie ---------- */
body .faq-list details{background:transparent!important;border:0!important;border-bottom:1px solid #E5E7EB!important;border-radius:0!important;box-shadow:none!important;padding:0!important;margin:0!important}
body .faq-list details:first-child{border-top:1px solid #E5E7EB!important}
body .faq-list details[open]{box-shadow:none!important}
body .faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px 0!important;font-size:16px!important;font-weight:600!important;color:#262261!important;background:none!important}
body .faq-list summary::-webkit-details-marker{display:none}
body .faq-list summary::before{content:none!important;display:none!important}
body .faq-list summary::after{content:"+"!important;font-size:22px;line-height:1;color:#262261!important;font-weight:400;flex:none;position:static!important;transform:none!important;background:none!important;width:auto!important;height:auto!important}
body .faq-list details[open] summary::after{content:"−"!important}
body .faq-list details p{margin:0 0 18px!important;padding:0!important;max-width:62ch}
body .faq-list{display:block!important;gap:0!important}

/* ---------- 10. Granat: Po zakupie, zakończenie ---------- */
.box .steps li{border:0!important;border-top:1px solid #E5E7EB!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.box .steps li:first-child{border-top:0!important}

/* ---------- 11. Stopka jak w sklepie: biała, linia #E5E7EB ---------- */
footer{background:#FFFFFF!important;color:#262261!important;border-top:1px solid #E5E7EB!important}
footer a,footer span,footer p,.foot-seller,.foot-ver span{color:#262261!important}
.foot-legal a{text-decoration:underline;text-decoration-color:#00B8DE;text-decoration-thickness:2px;text-underline-offset:4px}

/* ---------- 12. Okienka i komunikaty ---------- */
.toast{background:#262261!important;color:#FFFFFF!important;border-radius:999px;padding:12px 20px!important}
/* przyciemnienie pod okienkami: granat 60%, jak okienko rolki w sklepie (ivonne.html) */
.save-dlg,.reel-dlg{background:rgba(38,34,97,.6)!important}
.save-dlg>div,.save-dlg .dlg,.reel-dlg>div{border-radius:20px}

/* ---------- 13. Rolki: podpisy i miejsce na film ---------- */
.reel figcaption{font-size:15px!important;font-weight:600!important}

/* ---------- 14. Poprawki po audycie 21.0 ---------- */
body .finder-box,body .pw-box{border:1px solid #E5E7EB!important}
body .hero-frame,body .hero-frame.has-photo,#LP-HERO-01{background:#FFFFFF!important}
.head-nav a:not(.btn){font-size:14px!important}
.facts span,.fam .facts span,.box .steps li span,.btn.secondary,.pick2,.cmp-src,.lbl,.final-dark p,.final-box p{font-size:14px!important}
.mk{font-size:14px!important;font-weight:600!important}
/* fokus zawsze widoczny (wygrywa z „bez cienia” powyżej) */
body a:focus-visible,body button:focus-visible,body .btn:focus-visible,body .btn.primary:focus-visible,body summary:focus-visible,body input:focus-visible,body .sticky-cta:focus-visible{outline:none!important;box-shadow:0 0 0 3px #FFFFFF,0 0 0 6px #00B8DE!important}
/* elementy ukryte do czasu użycia: też tylko paleta */
.xmas{border-radius:20px}.xmas span{color:#FFFFFF!important}
.calibration i{background:#262261}
.color-brief{background:#FFFFFF!important;border:1px dashed #00B8DE!important;border-radius:20px}
.save-dlg input,input[type=email]{border:1px solid #E5E7EB!important;border-radius:999px}
.save-dlg input:focus-visible{border-color:#262261!important}
.reel-x{color:#FFFFFF!important}
body .cmp-card li.off .mk{color:#262261}