/* Felicity – opisy elektryki PV, wersja 2 (13.10.2026). Rozszerza warstwę .fdp z produkt.css (te same tokeny,
   font Manrope, ciepła paleta) o: kartę zdjęcia z oryginalnym tłem, schemat „miejsce w instalacji”, kroki doboru,
   produkty, które pasują, i listę dokumentów producenta. Wszystko w zakresie .fdp-el. */
#panel_z_opis .fdp-el{--el-line:#f0dccb;--el-warm:#fff7ee;--el-ink:#2b2420;--el-copper:#a04c17}

/* zdjęcie: elektryka zostaje z tłem producenta (decyzja użytkownika 12.10.2026), więc dostaje białą kartę */
#panel_z_opis .fdp-el .fdp-product::before,#panel_z_opis .fdp-el .fdp-product::after{display:none}
#panel_z_opis .fdp-el .fdp-photo{height:auto;aspect-ratio:1/1;max-height:420px;padding:24px;background:#fff;border:1px solid var(--el-line);border-radius:28px;box-shadow:0 30px 60px -30px #6b280d40,0 2px 8px #6b280d0a;overflow:hidden}
#panel_z_opis .fdp-el .fel-wide .fdp-photo{aspect-ratio:4/3}
#panel_z_opis .fdp-el .fdp-photo img{filter:none;transition:transform .6s var(--fdp-ease)}
#panel_z_opis .fdp-el .fdp-photo:hover img{transform:scale(1.03)}
#panel_z_opis .fdp-el .fdp-product figcaption{color:#7a5a43}
#panel_z_opis .fdp-el .fdp-brand-name{letter-spacing:.06em}

/* nawigacja: cztery pozycje także przy krótkim opisie */
#panel_z_opis .fdp.fdp-el .fdp-navigation{grid-template-columns:repeat(4,minmax(0,1fr))}

/* schemat: gdzie produkt pracuje w instalacji (figure ma domyślne marginesy 1em 40px – reset szablonu ich nie obejmuje) */
#panel_z_opis .fdp-el .fel-diagram{margin:0;min-width:0}
#panel_z_opis .fdp-el .fdp-table-heading .fdp-icon{color:#fff}
#panel_z_opis .fdp-el .fel-flow{display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr) 18px minmax(0,1fr) 18px minmax(0,1fr) 18px minmax(0,1fr);grid-template-rows:auto 26px auto;align-items:center;margin:18px 0 8px}
#panel_z_opis .fdp-el .fel-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 4px 10px;border:1px solid #ffdeb733;border-radius:12px;background:#ffffff0d;color:#ffe4ca;text-align:center;transition:background-color .3s,color .3s,box-shadow .3s}
#panel_z_opis .fdp-el .fel-node svg{width:30px;height:30px;stroke-width:1.5}
#panel_z_opis .fdp-el .fel-node strong{font-size:12px;font-weight:650;line-height:1.25}
#panel_z_opis .fdp-el .fel-node .fel-s{display:none}
#panel_z_opis .fdp-el .fel-link{position:relative;display:block;height:2px;background:#ffdeb74d}
#panel_z_opis .fdp-el .fel-n-pv{grid-area:1/1}#panel_z_opis .fdp-el .fel-l-pv-dc{grid-area:1/2}
#panel_z_opis .fdp-el .fel-n-dc{grid-area:1/3}#panel_z_opis .fdp-el .fel-l-dc-inv{grid-area:1/4}
#panel_z_opis .fdp-el .fel-n-inv{grid-area:1/5}#panel_z_opis .fdp-el .fel-l-inv-ac{grid-area:1/6}
#panel_z_opis .fdp-el .fel-n-ac{grid-area:1/7}#panel_z_opis .fdp-el .fel-l-ac-grid{grid-area:1/8}
#panel_z_opis .fdp-el .fel-n-grid{grid-area:1/9}
#panel_z_opis .fdp-el .fel-l-inv-bat{grid-area:2/5;justify-self:center;width:2px;height:100%}
#panel_z_opis .fdp-el .fel-n-bat{grid-area:3/5}
#panel_z_opis .fdp-el .fel-node.fel-on{background:#fff7ec;border-color:#ffc682;color:#8e3f12;box-shadow:0 0 0 4px #ffc68233,0 12px 24px #2a0f0640}
#panel_z_opis .fdp-el .fel-link.fel-on{height:4px;border-radius:4px;background:#ffc682;box-shadow:0 0 12px #ffc682aa}
#panel_z_opis .fdp-el .fel-l-inv-bat.fel-on{width:4px;height:100%}
#panel_z_opis .fdp-el .fel-link.fel-on::after{content:"";position:absolute;top:50%;left:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff;animation:fel-run 1.8s ease-in-out infinite}
#panel_z_opis .fdp-el .fel-l-inv-bat.fel-on::after{left:50%;top:0;margin:-4px 0 0 -4px;animation-name:fel-run-y}
@keyframes fel-run{0%{left:0;opacity:0}20%{opacity:1}80%{opacity:1}100%{left:100%;opacity:0}}
@keyframes fel-run-y{0%{top:0;opacity:0}20%{opacity:1}80%{opacity:1}100%{top:100%;opacity:0}}
@media (prefers-reduced-motion:reduce){#panel_z_opis .fdp-el .fel-link.fel-on::after{animation:none;display:none}}
#panel_z_opis .fdp-el .fel-where{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;padding:0;list-style:none}
#panel_z_opis .fdp-el .fel-where li{padding:6px 12px;border:1px solid #e5c6a8;border-radius:99px;background:#ffffffb3;color:#714624;font-size:12px;font-weight:600}

/* kroki doboru */
#panel_z_opis .fdp-el .fel-steps{padding-top:8px}
#panel_z_opis .fdp-el .fel-steps .fdp-tou-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:26px}
#panel_z_opis .fdp-el .fel-steps .fdp-tou-steps li{flex-direction:column;gap:14px;padding:22px;border:1px solid var(--el-line);border-radius:18px;background:linear-gradient(160deg,#fffaf5,#fff)}
#panel_z_opis .fdp-el .fel-steps .fdp-tou-steps li>span{flex:none;width:42px;height:42px}
#panel_z_opis .fdp-el .fel-steps .fdp-tou-steps strong{font-size:16px}
#panel_z_opis .fdp-el .fel-steps .fdp-tou-steps p{font-size:14px;line-height:1.65}

/* pasuje do */
#panel_z_opis .fdp-el .fel-match{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:26px}
#panel_z_opis .fdp-el .fel-match a{display:grid;grid-template-columns:76px minmax(0,1fr) 18px;gap:14px;align-items:center;padding:12px 16px 12px 12px;border:1px solid var(--el-line);border-radius:18px;background:#fff;color:var(--el-ink);transition:border-color .2s,box-shadow .25s,transform .25s var(--fdp-ease)}
#panel_z_opis .fdp-el .fel-match a:hover{border-color:#e0a77a;box-shadow:0 12px 26px -14px #6b280d40;transform:translateY(-2px)}
#panel_z_opis .fdp-el .fel-match img{display:block;width:76px!important;height:76px!important;object-fit:contain;border-radius:12px;background:#fff}
#panel_z_opis .fdp-el .fel-match small{display:block;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#a0643a;margin-bottom:3px}
#panel_z_opis .fdp-el .fel-match strong{display:block;font-size:14px;font-weight:650;line-height:1.35}
#panel_z_opis .fdp-el .fel-match svg{width:18px;height:18px;color:var(--fdp-orange)}

/* dokumenty producenta */
#panel_z_opis .fdp-el .fel-docs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:26px}
#panel_z_opis .fdp-el .fel-docs a{display:grid;grid-template-columns:44px minmax(0,1fr) 20px;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--el-line);border-radius:16px;background:#fff;color:var(--el-ink);transition:background-color .2s,border-color .2s}
#panel_z_opis .fdp-el .fel-docs a:hover{background:var(--el-warm);border-color:#e0a77a}
#panel_z_opis .fdp-el .fel-docs b{display:flex;align-items:center;justify-content:center;width:44px;height:52px;border-radius:8px;background:linear-gradient(160deg,#fff1e2,#ffe0c2);color:#9b3d0c;font-size:11px;font-weight:800;letter-spacing:.06em}
#panel_z_opis .fdp-el .fel-docs strong{display:block;font-size:14px;font-weight:650;line-height:1.4}
#panel_z_opis .fdp-el .fel-docs small{display:block;margin-top:2px;font-size:12px;color:#8a6a55}
#panel_z_opis .fdp-el .fel-docs svg{width:20px;height:20px;color:var(--fdp-orange)}
#panel_z_opis .fdp-el .fel-docs-more{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:18px;font-size:13px}
#panel_z_opis .fdp-el .fel-docs-more a{font-weight:650}
#panel_z_opis .fdp-el .fel-docs-none{margin-top:20px;padding:18px 20px;border:1px dashed #e0c2a6;border-radius:16px;background:#fffaf5;color:#6f5544;font-size:14px}

@media (max-width:900px){
  #panel_z_opis .fdp-el .fel-steps .fdp-tou-steps{grid-template-columns:1fr}
  #panel_z_opis .fdp-el .fel-docs{grid-template-columns:1fr}
}
@media (max-width:600px){
  #panel_z_opis .fdp-el .fdp-photo{padding:16px;border-radius:22px;max-height:340px}
  #panel_z_opis .fdp.fdp-el .fdp-navigation{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* telefon: łańcuch pionowo, magazyn obok falownika */
  #panel_z_opis .fdp-el .fel-diagram{margin-top:16px}
  #panel_z_opis .fdp-el .fel-node{min-width:0}
  #panel_z_opis .fdp-el .fel-node strong{min-width:0;overflow-wrap:break-word}
  #panel_z_opis .fdp-el .fel-flow{grid-template-columns:minmax(0,1.15fr) 22px minmax(0,1fr);grid-template-rows:auto 14px auto 14px auto 14px auto 14px auto;margin:14px 4px 6px}
  #panel_z_opis .fdp-el .fel-node{flex-direction:row;justify-content:flex-start;gap:10px;padding:9px 10px;text-align:left}
  #panel_z_opis .fdp-el .fel-node svg{width:24px;height:24px}
  #panel_z_opis .fdp-el .fel-node strong{font-size:12px}
  #panel_z_opis .fdp-el .fel-n-pv{grid-area:1/1}#panel_z_opis .fdp-el .fel-l-pv-dc{grid-area:2/1}
  #panel_z_opis .fdp-el .fel-n-dc{grid-area:3/1}#panel_z_opis .fdp-el .fel-l-dc-inv{grid-area:4/1}
  #panel_z_opis .fdp-el .fel-n-inv{grid-area:5/1}#panel_z_opis .fdp-el .fel-l-inv-ac{grid-area:6/1}
  #panel_z_opis .fdp-el .fel-n-ac{grid-area:7/1}#panel_z_opis .fdp-el .fel-l-ac-grid{grid-area:8/1}
  #panel_z_opis .fdp-el .fel-n-grid{grid-area:9/1}
  #panel_z_opis .fdp-el .fel-l-inv-bat{grid-area:5/2;justify-self:stretch;width:auto;height:2px}
  #panel_z_opis .fdp-el .fel-n-bat{grid-area:5/3}
  #panel_z_opis .fdp-el .fel-l-pv-dc,#panel_z_opis .fdp-el .fel-l-dc-inv,#panel_z_opis .fdp-el .fel-l-inv-ac,#panel_z_opis .fdp-el .fel-l-ac-grid{justify-self:center;width:2px;height:100%}
  #panel_z_opis .fdp-el .fel-l-pv-dc.fel-on,#panel_z_opis .fdp-el .fel-l-dc-inv.fel-on,#panel_z_opis .fdp-el .fel-l-inv-ac.fel-on,#panel_z_opis .fdp-el .fel-l-ac-grid.fel-on{width:4px;height:100%}
  #panel_z_opis .fdp-el .fel-l-inv-bat.fel-on{width:auto;height:4px}
  #panel_z_opis .fdp-el .fel-l-pv-dc.fel-on::after,#panel_z_opis .fdp-el .fel-l-dc-inv.fel-on::after,#panel_z_opis .fdp-el .fel-l-inv-ac.fel-on::after,#panel_z_opis .fdp-el .fel-l-ac-grid.fel-on::after{left:50%;top:0;animation-name:fel-run-y}
  #panel_z_opis .fdp-el .fel-l-inv-bat.fel-on::after{top:50%;left:0;animation-name:fel-run}
  #panel_z_opis .fdp-el .fel-match{grid-template-columns:1fr}
  #panel_z_opis .fdp-el .fel-match a{grid-template-columns:64px minmax(0,1fr) 18px}
  #panel_z_opis .fdp-el .fel-match img{width:64px!important;height:64px!important}
}

/* wersja b: pusty element .fdp-mode dla skryptu opisów sklepu (zob. opisy-v2.cjs) */
#panel_z_opis .fdp-el .fel-mode-stub{display:none!important}