/* metalsradar Fintech: podstrona produktu (makieta wariant-a-produkt.html) */
.mrf-p { font-family: var(--f-ui); color: var(--ink); }
.mrf-p *, .mrf-p *::before, .mrf-p *::after { box-sizing: border-box; }
.mrf-p .wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.mrf-p a { text-decoration: none; }

/* Pasek sekcji */
.mrf-p .subnav { position: sticky; top: 0; z-index: 40; background: rgba(244,246,249,.92); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); }
.admin-bar .mrf-p .subnav { top: 32px; }
.mrf-p .subnav .wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-top: 8px; padding-bottom: 8px; }
.mrf-p .subnav .wrap::-webkit-scrollbar { display: none; }
.mrf-p .subnav a { flex: none; padding: 7px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.mrf-p .subnav a:hover { color: var(--ink); background: var(--panel); }
.mrf-p .subnav a.on { color: #fff; background: var(--ink); }

.mrf-p .crumbs { font-size: 13px; color: var(--muted); padding: 16px 0 12px; }
.mrf-p .crumbs a { color: var(--muted); }
.mrf-p .crumbs a:hover { color: var(--up); }
.mrf-p .crumbs .separator { margin: 0 4px; color: var(--faint); }
.mrf-p .crumbs .last { color: var(--ink); font-weight: 600; }

.mrf-p .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 20px; }
.mrf-p .k { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mrf-p .ss { font-size: 12.5px; color: var(--muted); }
.mrf-p .up { color: var(--up); }
.mrf-p .btn { text-transform: none; letter-spacing: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: 700 14px var(--f-ui); padding: 10px 16px; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.mrf-p .btn:hover { border-color: var(--ink); color: var(--ink); }
.mrf-p .btn.primary { background: var(--up); border-color: var(--up); color: #fff; }
.mrf-p .btn.primary:hover { background: var(--up-deep); border-color: var(--up-deep); color: #fff; }
.mrf-p .btn.sm { font-size: 13px; padding: 7px 12px; }
.mrf-p .empty { margin: 0; color: var(--muted); }

/* Góra produktu */
.mrf-p .ptop { display: grid; grid-template-columns: 380px 1fr 300px; grid-template-areas: "gal head top" "gal body top"; gap: 16px; align-items: start; }
.mrf-p .pgal { grid-area: gal; padding: 16px; }
.mrf-p .phead { grid-area: head; }
.mrf-p .pbody { grid-area: body; }
.mrf-p .top3 { grid-area: top; padding: 0; display: flex; flex-direction: column; position: sticky; top: 64px; }

.mrf-p .gmain { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--soft); border-radius: 12px; overflow: hidden; }
.mrf-p .gmain img { max-width: 92%; max-height: 92%; width: auto; height: auto; object-fit: contain; }
.mrf-p .gthumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.mrf-p .gthumb { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); padding: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mrf-p .gthumb img { max-width: 100%; max-height: 100%; height: auto; object-fit: contain; }
.mrf-p .gthumb.on { border-color: var(--up); box-shadow: 0 0 0 2px var(--up-soft); }

.mrf-p .issuer { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.mrf-p h1 { font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -.025em; margin: 0 0 12px; color: var(--ink); }
.mrf-p .h1s { margin: -6px 0 12px; color: var(--muted); font-weight: 700; font-size: 16px; }
.mrf-p .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mrf-p .chip { font-size: 12.5px; font-weight: 600; background: var(--chip); border-radius: 999px; padding: 5px 11px; color: var(--ink); }

.mrf-p .intro { font-size: 15px; line-height: 1.6; color: var(--ink); margin-bottom: 16px; }
.mrf-p .intro p { margin: 0 0 8px; }
.mrf-p .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.mrf-p .stats > div { background: var(--panel); padding: 14px; }
.mrf-p .sv { white-space: nowrap; font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 4px 0 2px; color: var(--ink); font-variant-numeric: tabular-nums; }
.mrf-p .sv.up { color: var(--up); }
.mrf-p .trust { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--muted); }
.mrf-p .trust span::before { content: "✓"; color: var(--up); font-weight: 800; margin-right: 6px; }

.mrf-p .top3 .hd { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.mrf-p .t3 { list-style: none; margin: 0; padding: 6px; }
.mrf-p .t3 a { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 10px; border-radius: 10px; color: var(--ink); }
.mrf-p .t3 a:hover { background: var(--soft); }
.mrf-p .t3n { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; line-height: 1.3; }
.mrf-p .t3p { font-weight: 800; font-variant-numeric: tabular-nums; }
.mrf-p .t3 li:first-child .t3p { color: var(--up); }
.mrf-p .top3 .more { padding: 6px 16px 16px; }
.mrf-p .top3 .more .btn { width: 100%; }
.mrf-p .top3 .empty { padding: 16px; }

.mrf-p .rank { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 8px; background: var(--chip); font-size: 12.5px; font-weight: 800; color: var(--muted); }
.mrf-p .rank.best { background: var(--up); color: #fff; }

/* Sekcje */
.mrf-p .sec { margin-top: 36px; scroll-margin-top: 72px; }
.mrf-p .sechead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.mrf-p .sechead h2, .mrf-p .prose h2 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 4px; color: var(--ink); }
.mrf-p .sub { margin: 0; font-size: 14px; color: var(--muted); }
.mrf-p .sechead-r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12.5px; color: var(--muted); }

/* Tabela ofert */
.mrf-p .panel:has(> .tw) { padding: 0; overflow: hidden; overflow: clip; }
.mrf-p .tw { overflow-x: auto; }
/* Nagłówek tabeli ofert przyklejony u góry ekranu (na produkcie pod paskiem sekcji), dopóki widać tabelę: produkt,
   kategorie, najtańsze monety. Sticky działa tylko bez kontenera przewijania po drodze, więc .tw i panel przycinają
   (clip), a nie przewijają; tabela mieści się w szerokości. */
@supports (overflow: clip) {
	.mrf-p .tw:has(> table.offers), .mrf-p table.offers { overflow: clip; }
	.mrf-p table.offers thead th { position: sticky; top: 0; z-index: 5; box-shadow: inset 0 -1px 0 var(--line); }
	.mrf-p:has(> .subnav) table.offers thead th { top: 51px; }
	.admin-bar .mrf-p table.offers thead th { top: 32px; }
	.admin-bar .mrf-p:has(> .subnav) table.offers thead th { top: 83px; }
}
.mrf-p table.offers { width: 100%; border-collapse: collapse; margin: 0; border: 0; font-size: 14px; }
.mrf-p table.offers th { text-align: left; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--soft); }
.mrf-p table.offers td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.mrf-p table.offers td:first-child, .mrf-p table.offers th:first-child { width: 48px; padding-right: 0; }
.mrf-p table.offers td.upd, .mrf-p table.offers th.upd { padding-left: 28px; }
.mrf-p table.offers tr:last-child td { border-bottom: 0; }
.mrf-p table.offers tbody tr:nth-child(even) td { background: #eef2f7; }
.mrf-p table.offers tr.best td { background: #f2fbf7; }
.mrf-p table.offers tbody tr:hover td { background: var(--up-soft); }
.mrf-p table .r, .mrf-p table.offers th.r { text-align: right; }
/* Nagłówek „Sklep”, cena produktu i cena końcowa wyśrodkowane w tabelach ofert (2026-10-03). */
table.offers th.c, table.offers td.c, .mrf-p table.offers th.c, .mrf-p table.offers td.c { text-align: center; }
.mrf-p .dealer { display: flex; align-items: center; gap: 14px; }
.mrf-p .dealer span { display: flex; flex-direction: column; }
.mrf-p .dlogo { display: block; box-sizing: border-box; width: 120px; max-width: none; height: 44px; padding: 7px 10px; background: #fff; border: 1px solid var(--line); border-radius: 10px; object-fit: contain; object-position: center; flex: none; }
.mrf-p span.dlogo { background: var(--soft); border-style: dashed; }
.mrf-p span.dlogo.ini { display: flex; align-items: center; justify-content: center; border-style: solid; background: var(--soft); color: var(--muted); font: 800 18px/1 var(--f-ui); letter-spacing: .02em; }
.mrf-p .dprof { font-size: 12px; color: var(--muted); }
.mrf-p .dprof:hover { color: var(--up); }
.mrf-p .otitle { color: var(--muted); font-size: 13px; max-width: 320px; }
.mrf-p .price { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mrf-p tr.best .price { color: var(--up); }
.mrf-p .upd { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.mrf-p .pprod, .mrf-p .ship, .mrf-p .prem { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.mrf-p .unk { color: var(--faint); font-size: 12.5px; }
.mrf-p .price sup.unk { margin-left: 2px; cursor: help; }
.mrf-p .tf { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); background: var(--soft); }
.mrf-p .tf a { color: var(--up); font-weight: 700; }

/* Specyfikacja */
.mrf-p .specs { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.mrf-p .srow { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.mrf-p .srow span:first-child { color: var(--muted); }
.mrf-p .srow span:last-child { font-weight: 700; text-align: right; }
.mrf-p .srow a { color: var(--up); }

/* Opis, FAQ, metodologia */
.mrf-p .prose { font-size: 15px; line-height: 1.7; }
.mrf-p .prose p { margin: 0 0 12px; }
.mrf-p .prose h3 { font-size: 17px; font-weight: 800; margin: 0 0 8px; }
.mrf-p .prose span[style] { font-weight: inherit !important; }
.mrf-p .panel.faq { padding: 0; background: none; border: 0; box-shadow: none; display: flex; flex-direction: column; gap: 10px; }
.mrf-p .faq details { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s; }
.mrf-p .faq details:hover { border-color: #c9d3e0; }
.mrf-p .faq details[open] { border-color: var(--up); box-shadow: 0 0 0 3px var(--up-soft), var(--shadow); }
.mrf-p .faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 18px 20px; font-weight: 800; font-size: 17px; line-height: 1.35; color: var(--ink); letter-spacing: -.01em; }
.mrf-p .faq summary::-webkit-details-marker { display: none; }
.mrf-p .faq summary::before { content: "?"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--up-soft); color: var(--up-deep); font-size: 15px; font-weight: 800; }
.mrf-p .faq summary::after { content: ""; flex: none; margin-left: auto; width: 30px; height: 30px; border-radius: 50%; background: var(--chip) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307694a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .2s, background-color .2s; }
.mrf-p .faq details[open] summary::after { transform: rotate(180deg); background-color: var(--up-soft); }
.mrf-p .faq summary:focus-visible { outline: 2px solid var(--up); outline-offset: -2px; border-radius: 14px; }
.mrf-p .faq details[open] summary { border-bottom: 1px solid var(--line); }
.mrf-p .faq .a { margin: 16px 20px 20px; padding: 14px 18px; background: var(--soft); border-left: 3px solid var(--up); border-radius: 4px 10px 10px 4px; color: #2b3648; font-size: 15.5px; font-weight: 500; line-height: 1.7; }
.mrf-p .faq .a p { margin: 0 0 10px; }
.mrf-p .faq .a p:last-child { margin-bottom: 0; }
.mrf-p .faq .a a { color: var(--up); font-weight: 700; }
@media (max-width: 640px) {
	.mrf-p .faq summary { font-size: 15.5px; padding: 15px 14px; gap: 10px; }
	.mrf-p .faq summary::before { width: 26px; height: 26px; font-size: 13px; }
	.mrf-p .faq .a { margin: 12px 14px 14px; padding: 12px 14px; font-size: 15px; }
}
.mrf-p .method { background: var(--soft); box-shadow: none; }

/* Responsywność */
@media (max-width: 1100px) {
	.mrf-p .ptop { grid-template-columns: 320px 1fr; grid-template-areas: "gal head" "gal body" "top top"; }
	.mrf-p .top3 { position: static; }
}
@media (max-width: 820px) {
	.mrf-p .ptop { grid-template-columns: 1fr; grid-template-areas: "head" "gal" "top" "body"; }
	.mrf-p .pgal { max-width: 460px; width: 100%; margin: 0 auto; }
	
	.mrf-p .specs { grid-template-columns: 1fr; }
	.mrf-p .hide-m { display: none; }
	.mrf-p h1 { font-size: 24px; }
}
@media (max-width: 480px) {
	.mrf-p .panel { padding: 16px; }
	.mrf-p table.offers td, .mrf-p table.offers th { padding: 10px 8px; }
	.mrf-p .dlogo { display: none; }
	.mrf-p .hstats { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
	.mrf-p .hstats b { font-size: 15px; }
}

/* ---- Porządek UX podstrony produktu (2026-10-02) ---- */
/* Górna część: nadmiar wysokości (galeria i panel „Najtaniej teraz” są wyższe) idzie pod statystyki, nie między tytuł a statystyki */
.mrf-p .ptop { grid-template-rows: auto 1fr; }
.mrf-p .stats { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) {
	/* 3 kafelki w jednym rzędzie zamiast 2+1 z pustym polem */
	.mrf-p .stats { grid-template-columns: repeat(3, 1fr); }
	.mrf-p .stats > div { padding: 10px 10px; }
	.mrf-p .stats .sv { font-size: 17px; }
	.mrf-p .stats .ss { display: none; }
}
/* Kalkulator zakupu: dwie zakładki w jednej sekcji, wewnętrzne sekcje bez własnych nagłówków */
.mrf-p .calc .calc-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--chip); border-radius: 12px; }
.mrf-p .calc .calc-tabs button { text-transform: none; border: 0; background: transparent; padding: 8px 14px; border-radius: 9px; font: 700 13.5px var(--f-ui); color: var(--muted); cursor: pointer; }
.mrf-p .calc .calc-tabs button[aria-selected="true"] { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }
.mrf-p .calc > .sec { margin: 0; padding: 0; }
.mrf-p .calc > .sec[hidden] { display: none; }
.mrf-p .calc > .sec > .sechead { display: none; }
/* Telefon: przycisk „Do sklepu” w tabelach jako sama strzałka, żeby tabela mieściła się na ekranie */
@media (max-width: 640px) {
	.mrf-p table.offers td:last-child .btn.sm { padding: 6px 10px; font-size: 0; line-height: 1; }
	.mrf-p table.offers td:last-child .btn.sm::after { content: "›"; font-size: 18px; font-weight: 800; }
	.mrf-p .calc .sechead { flex-direction: column; align-items: stretch; gap: 10px; }
	.mrf-p .calc .calc-tabs { display: flex; }
	.mrf-p .calc .calc-tabs button { flex: 1; padding: 8px 6px; }
	/* tabele kalkulatora mieszczą się na ekranie telefonu */
	.mrf-p .calc table.offers th, .mrf-p .calc table.offers td { padding-left: 6px; padding-right: 6px; font-size: 13px; }
	.mrf-p .calc table.offers th:first-child, .mrf-p .calc table.offers td:first-child { display: none; } /* numer zbędny: kolejność widać */
	.mrf-p .calc table.offers th:nth-child(2), .mrf-p .calc table.offers td:nth-child(2) { padding-left: 12px; }
}
/* Link do strony „Jak rozpoznać podróbkę” pod specyfikacją (inc/fake-guide.php) */
.mrf-p .fk-plink { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 700; font-size: 14px; color: var(--up-deep, var(--up)); text-decoration: none; }
.mrf-p .fk-plink::before { content: "🔍"; font-size: 13px; }
.mrf-p .fk-plink:hover { text-decoration: underline; }
.mrf-p small.vat { font-size: 11px; font-weight: 700; color: var(--faint); margin-left: 4px; white-space: nowrap; letter-spacing: 0; }