:root{
--mpd-green:    #2E6B5A;
--mpd-green-dk: #245648;
--mpd-orange:   #C86A3C;
--mpd-blue:     #2E5D7B;
--mpd-deep:     #06146B; --mpd-text:     #0f172a; --mpd-muted:    #64748b; --mpd-line:     #D1D9EC; --mpd-head:     #F5F7FB; --mpd-foot:     #F8FAFC; --mpd-chip:     #F3F4F6; } .mpd-grid-cards{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:24px;
}
@media (max-width:1100px){ .mpd-grid-cards{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:700px){  .mpd-grid-cards{grid-template-columns:1fr;gap:16px;} } .mpd-card{
background:#fff;
border:2px solid var(--mpd-line);
border-radius:16px;
box-shadow:0 8px 18px rgba(6,20,107,.07);
overflow:hidden;
display:flex;
flex-direction:column;
} .mpd-card__header{
background:linear-gradient(180deg,#F5F7FB 0,#F0F4FA 100%);
padding:14px 16px;
border-bottom:2px solid var(--mpd-line);
display:flex;
flex-direction:column;
gap:6px;
}
.mpd-card__title{
margin:2px 0 0;
font-weight:800;
font-size:18px;
color:var(--mpd-deep);
}
.mpd-card__subtitle{
font-size:13px;
color:#475569;
text-transform:uppercase;
letter-spacing:.02em;
} .mpd-badge{
align-self:flex-start;
display:inline-block;
padding:2px 10px;
border-radius:999px;
font-weight:800;
font-size:12px;
border:1px solid var(--mpd-line);
background:#fff;
}
.mpd-status-dostepny  .mpd-badge{background:#e7f8ed;color:#166534;border-color:#86efac}
.mpd-status-rezerwacja .mpd-badge{background:#fff7ed;color:#9a3412;border-color:#fdba74}
.mpd-status-sprzedany  .mpd-badge{background:#fee2e2;color:#991b1b;border-color:#fca5a5} .mpd-card__body{ padding:14px 16px; }
.mpd-specs{ margin:0; padding:0; list-style:none; }
.mpd-specs li{
display:flex;
justify-content:space-between;
gap:12px;
padding:6px 0;
border-bottom:1px dashed var(--mpd-line);
color:var(--mpd-text);
font-size:14px;
}
.mpd-specs li:last-child{ border-bottom:0; }
.mpd-specs strong{ color:#0f172a; } .mpd-uklad{
margin-top:10px;
background:#FAFCFF;
border:1px dashed var(--mpd-line);
border-radius:12px;
padding:10px 12px;
}
.mpd-uklad h4{ margin:0 0 6px; font-size:14px; font-weight:800; color:var(--mpd-deep); }
.mpd-uklad-list{ margin:0; padding-left:18px; }
.mpd-uklad-list li{ margin:2px 0; } .mpd-card__footer{
background:var(--mpd-foot);
border-top:2px solid var(--mpd-line);
padding:12px 16px;
display:flex;
flex-direction:column;
gap:2px;
}
.mpd-price{ font-weight:800; font-size:20px; color:var(--mpd-text); }
.mpd-vat-note{ font-size:12px; color:var(--mpd-muted); } .mpd-status-wrap{
display:grid;
grid-template-columns:repeat(4,minmax(140px,1fr));
gap:14px;
margin:10px 0 6px;
}
.mpd-status-item{
background:#fff;
border:1px solid var(--mpd-line);
border-radius:12px;
padding:12px;
text-align:center;
}
.mpd-status-item .mpd-status-label{display:block;font-size:13px;color:#6b7280;margin-bottom:6px}
.mpd-status-item .mpd-status-value{font-size:28px;font-weight:800;color:#0B1D5A}
.mpd-status-item.mpd-status-total{background:#ECF7F1;border-color:#cfe8df}
@media(max-width:860px){.mpd-status-wrap{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.mpd-status-wrap{grid-template-columns:1fr}} .mpd-extra{
padding:12px 16px;
border-top:1px solid var(--mpd-line);
background:#fff;
}
.mpd-extra .dfg{
margin:6px 0 10px;
background:#EEF2FF;
border:1px dashed #C7D2FE;
border-radius:10px;
padding:8px 10px;
font-size:13px;
}
.mpd-extra .btns{ display:flex; flex-wrap:wrap; gap:10px; }
.mpd-extra .btn{
display:inline-block;
padding:8px 12px;
border-radius:10px;
border:1px solid var(--mpd-line);
background:#fff;
text-decoration:none;
font-weight:700;
font-size:14px;
color:var(--mpd-text);
transition:.15s ease;
}
.mpd-extra .btn:hover{ transform:translateY(-1px); box-shadow:0 1px 4px rgba(6,20,107,.08); }
.mpd-extra .btn.primary{ background:var(--mpd-deep); color:#fff; border-color:#0b1260; } .mpd-extra details{ display:none !important; } html{scroll-behavior:smooth} .mpd-card{position:relative;scroll-margin-top:90px} .mpd-card:target{
border-color:#0B1D5A;
box-shadow:0 0 0 3px rgba(11,29,90,.15), 0 12px 24px rgba(6,20,107,.18);
animation:mpdFlash 2.2s ease-out 1;
}
@keyframes mpdFlash{
0%   { background:#FFFBEA; }
100% { background:#fff; }
}