/* =========================================================
   KAKOFIND — PROMOCJE (/promocje)
   Osobna podstrona z pełną listą Ofert Specjalnych. Na stronie
   głównej pokazujemy tylko wycinek, tutaj leci wszystko w siatce
   (2 kolumny na telefonie, do 4 na desktopie) + filtry i sortowanie.
   Paleta spójna z resztą serwisu: czerń #050505 / czerwień #E60000·#FF2D2D.
   ========================================================= */

:root {
    --pr-red: #E60000;
    --pr-red-l: #FF2D2D;
    --pr-red-d: #8A0000;
    --pr-bg: #050505;
    --pr-line: rgba(255, 255, 255, 0.09);
    --pr-muted: #9a9a9a;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }

body {
    background: var(--pr-bg);
    color: #fff;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

.pr-red {
    background: linear-gradient(120deg, #FF2D2D, #E60000 60%, #FF6a6a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==================== HERO ==================== */
.pr-hero {
    position: relative;
    padding: 128px 5vw 44px;
    overflow: hidden;
    isolation: isolate;
}
.pr-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(760px 380px at 18% 6%, rgba(230, 0, 0, 0.22), transparent 68%),
        radial-gradient(620px 320px at 88% 18%, rgba(255, 45, 45, 0.13), transparent 70%),
        linear-gradient(180deg, #0b0202 0%, #050505 100%);
}
.pr-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 10%, #000 20%, transparent 76%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 10%, #000 20%, transparent 76%);
    opacity: 0.55;
}

.pr-hero__inner {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 32px;
}

.pr-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, var(--pr-red), var(--pr-red-d));
    border: 1px solid rgba(255, 90, 90, 0.45);
    box-shadow: 0 10px 26px rgba(230, 0, 0, 0.3);
    margin-bottom: 18px;
}
.pr-hero__badge i { animation: prPulse 1.8s ease-in-out infinite; }
@keyframes prPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.18); opacity: 0.82; }
}

.pr-hero h1 {
    font-size: clamp(2.1rem, 5.6vw, 3.8rem);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
}

.pr-hero__lead {
    font-size: clamp(0.95rem, 1.35vw, 1.1rem);
    color: #c4c4c4;
    line-height: 1.6;
    max-width: 620px;
    margin-bottom: 26px;
}
.pr-hero__lead strong { color: #fff; }

.pr-hero__art {
    width: clamp(150px, 18vw, 230px);
    height: auto;
    filter: drop-shadow(0 20px 40px rgba(230, 0, 0, 0.35));
    animation: prFloat 6s ease-in-out infinite;
}
@keyframes prFloat {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50%      { transform: translateY(-12px) rotate(1.5deg); }
}

/* --- kafelki statystyk --- */
.pr-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    max-width: 660px;
}
.pr-stat {
    padding: 14px 14px 13px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
    border: 1px solid var(--pr-line);
    text-align: center;
}
.pr-stat__num {
    display: block;
    font-size: clamp(1.25rem, 2.4vw, 1.85rem);
    font-weight: 900;
    line-height: 1.1;
    color: #FF4040;
    letter-spacing: -0.5px;
}
.pr-stat__lbl {
    display: block;
    margin-top: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pr-muted);
}

/* ==================== PASEK ZAUFANIA ==================== */
.pr-trust {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 5vw;
}
.pr-trust__inner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 22px 16px 18px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(230, 0, 0, 0.09), rgba(255, 255, 255, 0.022));
    border: 1px solid rgba(230, 0, 0, 0.22);
    position: relative;
    overflow: hidden;
}
.pr-trust__inner::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, var(--pr-red-l), var(--pr-red-d));
}
.pr-trust__art {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(230, 0, 0, 0.3));
}
.pr-trust__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #FF6a6a;
    margin-bottom: 5px;
}
.pr-trust__title i { color: #2ecc71; }
.pr-trust__desc {
    color: #d4d4d4;
    font-size: 0.94rem;
    line-height: 1.6;
}
.pr-trust__desc strong { color: #fff; }

/* ==================== TOOLBAR ==================== */
.pr-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 34px 4vw 90px;
}

.pr-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.pr-search {
    position: relative;
    flex: 1 1 260px;
    min-width: 0;
}
.pr-search i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #6d6d6d;
    font-size: 0.9rem;
    pointer-events: none;
}
.pr-search input {
    width: 100%;
    padding: 13px 16px 13px 42px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--pr-line);
    color: #fff;
    font-size: 0.92rem;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.pr-search input::placeholder { color: #6d6d6d; }
.pr-search input:focus {
    border-color: rgba(230, 0, 0, 0.55);
    background: rgba(255, 255, 255, 0.06);
}

.pr-sorts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.pr-sort {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 15px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--pr-line);
    color: #cfcfcf;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.pr-sort i { font-size: 0.8rem; opacity: 0.85; }
.pr-sort:hover { border-color: rgba(230, 0, 0, 0.5); color: #fff; transform: translateY(-1px); }
.pr-sort.is-active {
    background: linear-gradient(135deg, var(--pr-red), var(--pr-red-d));
    border-color: rgba(255, 90, 90, 0.5);
    color: #fff;
    box-shadow: 0 8px 20px rgba(230, 0, 0, 0.28);
}

.pr-count {
    width: 100%;
    font-size: 0.84rem;
    color: var(--pr-muted);
    margin-bottom: 16px;
}
.pr-count b { color: #fff; }

/* ==================== SIATKA KART ==================== */
.pr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
    gap: 18px;
}

.pr-card {
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
    border: 1px solid var(--pr-line);
    position: relative;
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.28s ease, box-shadow 0.28s ease;
}
.pr-card:hover {
    transform: translateY(-6px);
    border-color: rgba(230, 0, 0, 0.55);
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(230, 0, 0, 0.25);
}

.pr-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #0c0c0c;
    overflow: hidden;
}
.pr-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.pr-card:hover .pr-card__media img { transform: scale(1.06); }

.pr-card__disc {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    padding: 6px 11px;
    border-radius: 12px;
    font-weight: 900;
    font-size: 0.98rem;
    line-height: 1;
    color: #fff;
    background: linear-gradient(135deg, var(--pr-red-l), #B00000);
    box-shadow: 0 8px 18px rgba(230, 0, 0, 0.45);
    letter-spacing: -0.5px;
}
.pr-card__disc small { font-size: 0.58rem; font-weight: 800; opacity: 0.92; }

.pr-card__new {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #07210f;
    background: linear-gradient(135deg, #4dffa3, #19c46a);
    box-shadow: 0 6px 14px rgba(25, 196, 106, 0.35);
}

.pr-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 13px 14px 15px;
    flex: 1;
}

.pr-card__name {
    margin: 0;
    font-size: 0.94rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.45em;
}

.pr-card__desc {
    margin: 0;
    font-size: 0.79rem;
    color: var(--pr-muted);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pr-card__rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffc83d;
}
.pr-card__rating i { font-size: 0.7rem; }

.pr-card__stock { display: flex; flex-direction: column; gap: 5px; }
.pr-card__stock-bar {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.pr-card__stock-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pr-red-l), #FFA53d);
}
.pr-card__stock-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #ffb35c;
}

.pr-card__prices {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-top: auto;
    flex-wrap: wrap;
}
.pr-card__price-new {
    font-size: 1.24rem;
    font-weight: 900;
    color: #FF4040;
    letter-spacing: -0.5px;
}
.pr-card__price-old {
    font-size: 0.86rem;
    color: #8c8c8c;
    text-decoration: line-through;
    text-decoration-color: rgba(230, 0, 0, 0.6);
}
.pr-card__save {
    margin-left: auto;
    font-size: 0.68rem;
    font-weight: 800;
    color: #4dffa3;
    background: rgba(25, 196, 106, 0.12);
    border: 1px solid rgba(25, 196, 106, 0.3);
    padding: 3px 8px;
    border-radius: 8px;
    white-space: nowrap;
}

.pr-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 0.84rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--pr-red), #B00000);
    border: 1px solid rgba(255, 90, 90, 0.4);
    transition: filter 0.2s ease;
}
.pr-card:hover .pr-card__cta { filter: brightness(1.12); }
.pr-card__cta i { transition: transform 0.2s ease; }
.pr-card:hover .pr-card__cta i { transform: translateX(3px); }

/* Cała karta jest jednym linkiem („stretched link”) — przezroczysta
   warstwa na wierzchu łapie klik w dowolnym miejscu kafla. */
.pr-card__link {
    position: absolute;
    inset: 0;
    z-index: 5;
}

/* ==================== STANY ==================== */
.pr-skeleton {
    border-radius: 18px;
    height: 400px;
    background: linear-gradient(100deg, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 70%);
    background-size: 200% 100%;
    animation: prShimmer 1.3s linear infinite;
}
@keyframes prShimmer { to { background-position: -200% 0; } }

.pr-empty {
    text-align: center;
    padding: 70px 20px;
    color: var(--pr-muted);
}
.pr-empty i { font-size: 2.6rem; color: rgba(230, 0, 0, 0.55); margin-bottom: 14px; }
.pr-empty h2 { font-size: 1.15rem; color: #fff; margin-bottom: 8px; font-weight: 700; }
.pr-empty p { font-size: 0.92rem; line-height: 1.6; max-width: 460px; margin: 0 auto; }

/* ==================== BANER CROSS-LINK ==================== */
.pr-band {
    max-width: 1240px;
    margin: 0 auto 70px;
    padding: 0 4vw;
}
.pr-band__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 26px 28px;
    border-radius: 22px;
    background:
        radial-gradient(600px 220px at 12% 0%, rgba(230, 0, 0, 0.2), transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    border: 1px solid rgba(230, 0, 0, 0.24);
}
.pr-band__text h2 {
    font-size: clamp(1.2rem, 2.4vw, 1.65rem);
    font-weight: 800;
    margin-bottom: 8px;
}
.pr-band__text p {
    color: #bdbdbd;
    font-size: 0.93rem;
    line-height: 1.6;
    max-width: 560px;
}
.pr-band__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pr-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 800;
    transition: filter 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}
.pr-btn--primary {
    color: #fff;
    background: linear-gradient(135deg, var(--pr-red), #B00000);
    border: 1px solid rgba(255, 90, 90, 0.4);
}
.pr-btn--ghost {
    color: #e6e6e6;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--pr-line);
}
.pr-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.pr-btn--ghost:hover { border-color: rgba(230, 0, 0, 0.5); }

/* ==================== SEO / FAQ ==================== */
.pr-seo {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 4vw 80px;
}
.pr-seo__head {
    text-align: center;
    margin-bottom: 28px;
}
.pr-seo__head h2 {
    font-size: clamp(1.4rem, 3vw, 2.1rem);
    font-weight: 900;
    margin-bottom: 10px;
}
.pr-seo__head p {
    color: var(--pr-muted);
    font-size: 0.96rem;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}

.pr-faq {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
}
.pr-faq__item {
    padding: 20px 22px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
    border: 1px solid var(--pr-line);
}
.pr-faq__item h3 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 9px;
    line-height: 1.4;
}
.pr-faq__item h3 i { color: var(--pr-red-l); font-size: 0.9rem; margin-top: 3px; }
.pr-faq__item p {
    color: #b9b9b9;
    font-size: 0.9rem;
    line-height: 1.65;
}
.pr-faq__item a { color: #FF6a6a; text-decoration: underline; }

/* ==================== RESPONSYWNOŚĆ ==================== */
@media (max-width: 1024px) {
    .pr-hero__inner { grid-template-columns: minmax(0, 1fr); }
    .pr-hero__art { display: none; }
}

@media (max-width: 720px) {
    .pr-hero { padding: 104px 5vw 32px; }
    .pr-hero__lead { margin-bottom: 20px; }
    .pr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: none; }
    .pr-trust__inner { flex-direction: column; text-align: center; padding: 20px 18px; gap: 12px; }
    .pr-trust__inner::before { width: 100%; height: 4px; bottom: auto; }
    .pr-trust__title { justify-content: center; }
    .pr-trust__art { width: 84px; height: 84px; }

    .pr-main { padding: 26px 4vw 70px; }
    .pr-sorts { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: none; }
    .pr-sorts::-webkit-scrollbar { display: none; }

    /* Klucz: na telefonie promki lecą w 2 kolumnach, a nie w karuzeli */
    .pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .pr-card__body { padding: 11px 11px 13px; gap: 7px; }
    .pr-card__name { font-size: 0.82rem; min-height: 2.4em; }
    .pr-card__desc { display: none; }
    .pr-card__price-new { font-size: 1.02rem; }
    .pr-card__price-old { font-size: 0.76rem; }
    .pr-card__save { font-size: 0.62rem; padding: 2px 6px; }
    .pr-card__disc { font-size: 0.86rem; padding: 5px 9px; top: 8px; left: 8px; }
    .pr-card__new { font-size: 0.56rem; padding: 4px 7px; top: 8px; right: 8px; }
    .pr-card__cta { font-size: 0.76rem; padding: 9px 10px; }
    .pr-skeleton { height: 300px; }

    .pr-band__inner { padding: 22px 18px; }
    .pr-btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 360px) {
    .pr-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .pr-hero__art, .pr-hero__badge i { animation: none; }
    .pr-card, .pr-card__media img { transition: none; }
    .pr-card:hover { transform: none; }
}