/* farmacianaturala.com — dzial „preparate". Wlasny uklad, nie przeniesiony.
 *
 * Krzysiek: ma przypominac sklep i wyrozniac sie, ale „nie przenos, zrob
 * cos oryginalnego". Wiec z iMedu zostaje tylko POMYSL — ciemny dzial
 * handlowy jako wyrazny przelom wzgledem jasnej encyklopedii — a nie
 * wykonanie:
 *
 *   iMed                          tutaj
 *   tlo rgb(7,19,15)              gleboka zielen #0e1a13, cieplejsza
 *   akcent jaskrawa zielen        MIOD #d9a441 (aptekarski)
 *   karta: kafelek-nazwa-cena-    karta POZIOMA: packshot na okragłym
 *   guzik (standard WooCommerce)  krazku z lewej, obok nazwa, postac
 *                                 i cena jako pigulka
 *
 * Inna anatomia karty, nie przemalowanie. Prefiks `fnp-` nie wystepuje
 * nigdzie indziej w portfelu ([[kazda-domena-inny-silnik]]).
 */

.fnp {
    --tlo:       #0e1a13;
    --karta:     #16241c;
    --brzeg:     #24382c;
    --tekst:     #e9f2e6;
    --cichy:     #9db3a4;
    --miod:      #d9a441;
    --miod-jasny:#ecb95c;
    --szalwia:   #8fbf9a;

    background: var(--tlo);
    color: var(--tekst);
    font-family: "Segoe UI", Candara, Optima, system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    padding: 0 0 44px;
}

.fnp * { box-sizing: border-box; }
.fnp a { color: inherit; }

/* ——— pasek ——— */
.fnp-pasek {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 26px;
    background: #0a140f;
    border-bottom: 1px solid var(--brzeg);
}

.fnp-znak { font-size: 20px; font-weight: 700; text-decoration: none; }
.fnp-znak b { color: var(--miod); font-weight: 700; }

.fnp-pasek nav a {
    color: var(--cichy);
    text-decoration: none;
    margin-left: 20px;
    font-size: 15px;
}
.fnp-pasek nav a:hover { color: var(--miod); }

/* ——— czolo dzialu ——— */
.fnp-czolo {
    max-width: 1060px;
    margin: 0 auto;
    padding: 38px 26px 6px;
}

.fnp-czolo h1 { margin: 0 0 10px; font-size: 32px; line-height: 1.22; }
.fnp-czolo h1 b { color: var(--miod); font-weight: 700; }
.fnp-czolo p { margin: 0; max-width: 720px; color: var(--cichy);
               font-size: 17px; }

/* ——— lista pozioma, po dwie w rzedzie ——— */
.fnp-lista {
    max-width: 1060px;
    margin: 0 auto;
    padding: 26px 26px 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 18px;
}

.fnp-poz {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--karta);
    border: 1px solid var(--brzeg);
    border-radius: 16px;
    padding: 18px;
    text-decoration: none;
    transition: border-color .16s, transform .16s;
}

.fnp-poz:hover { border-color: var(--miod); transform: translateX(3px); }

/* packshot na okragłym krazku — to odrozmia uklad od siatki kafelkow */
.fnp-krazek {
    flex: 0 0 104px;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #ffffff 0%, #e8efe4 72%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

/* ⚠ Rozmiar MUSI byc podany wprost. Przy samych `max-*`
   niezaładowany obrazek wylicza sie na 0x0, a `loading="lazy"`
   uznaje element zerowy za daleki od ekranu i nie zaczyna go
   pobierac. Miniatura nie wczytywala sie wcale. */
.fnp-krazek img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.fnp-tresc { flex: 1; min-width: 0; }

.fnp-tresc h2 { margin: 0 0 3px; font-size: 19px; line-height: 1.25; }

.fnp-postac {
    margin: 0 0 10px;
    font-size: 12.5px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--szalwia);
}

.fnp-dol { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* cena jako pigulka, nie jako wielka liczba pod nazwa */
.fnp-cena {
    display: inline-block;
    background: var(--miod);
    color: #15200e;
    font-weight: 700;
    font-size: 16px;
    border-radius: 999px;
    padding: 6px 15px;
    white-space: nowrap;
}

.fnp-dalej { color: var(--miod-jasny); font-size: 15px; font-weight: 600; }
.fnp-poz:hover .fnp-dalej { text-decoration: underline; }

.fnp-dostawa { font-size: 13px; color: var(--cichy); }

/* ——— stopka dzialu ——— */
.fnp-stopka {
    max-width: 1060px;
    margin: 26px auto 0;
    padding: 20px 26px 0;
    border-top: 1px solid var(--brzeg);
    color: var(--cichy);
    font-size: 14px;
}
.fnp-stopka a { color: var(--szalwia); }

/* ——— telefon ——— */
@media (max-width: 760px) {
    .fnp-czolo { padding: 26px 16px 4px; }
    .fnp-czolo h1 { font-size: 25px; }
    .fnp-lista { grid-template-columns: 1fr; padding: 18px 16px 0; gap: 14px; }
    .fnp-poz { padding: 14px; gap: 14px; }
    .fnp-krazek { flex-basis: 84px; width: 84px; height: 84px; }
    .fnp-tresc h2 { font-size: 17px; }
    .fnp-pasek { padding: 13px 16px; }
    .fnp-pasek nav a { margin-left: 13px; font-size: 14px; }
}