/* =========================================================
      HERO
    ========================================================= */
    .hero{padding:56px 0 28px}

    .heroGrid{
      display:grid;
      grid-template-columns:1fr 1.15fr;
      gap:44px;
      align-items:center;
    }

    .h1{
      margin:0 0 14px;
      font-size:54px;
      line-height:1.06;
      letter-spacing:.02em;
      font-weight:500;
      text-transform:uppercase;
      color:#4c5a70;
    }

    .heroText p{
      margin:0 0 18px;
      max-width:62ch;
      color:var(--muted);
    }

    .heroText p + p{margin-top:10px}
    .heroCta{margin-top:26px;font-size:20px;}

    .heroMedia{
      border-radius:var(--radius);
      border:1px solid var(--line);
     /*background:
        linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0)),
        radial-gradient(1100px 460px at 30% 10%, rgba(75,91,115,.14), transparent 55%);*/
      overflow:hidden;
      min-height:340px;
      display:flex;
      align-items:center;
      justify-content:center;
      position:relative;
      box-shadow:
        0 1px 2px rgba(0,0,0,.04),
        0 12px 32px rgba(0,0,0,.06);
    }

    .heroMedia::after{
      content:"";
      position:absolute;
      inset:18px;
      border-radius:14px;
      border:1px dashed rgba(17,24,39,.18);
    }

    .heroMedia span{
      color:rgba(17,24,39,.45);
      font-weight:600;
    }

    /* =========================================================
  HERO STATUS (availability chip)
========================================================= */
.heroStatus{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  color:#475569;
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:0 0 14px;
  width:fit-content;
}

.heroStatus .statusIcon{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(215,253,59,.25); /* akcent w tle */
  border:1px solid rgba(215,253,59,.55);
}

.heroStatus .statusIcon svg{
  width:14px;
  height:14px;
  display:block;
}

.heroStatus .dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#22c55e; /* zielony */
  box-shadow:0 0 0 4px rgba(34,197,94,.16);
}

.heroStatus.isLimited .dot{
  background:#f59e0b; /* pomarańcz */
  box-shadow:0 0 0 4px rgba(245,158,11,.18);
}

.heroStatus.isFull .dot{
  background:#ef4444; /* czerwony */
  box-shadow:0 0 0 4px rgba(239,68,68,.18);
}

@media (prefers-reduced-motion: no-preference){
  .heroStatus .dot{
    animation: dotPulse 1.6s ease-in-out infinite;
  }
  @keyframes dotPulse{
    0%,100%{ transform:scale(1); opacity:1; }
    50%{ transform:scale(1.15); opacity:.85; }
  }
}

@media (max-width: 560px){
  .heroStatus{
    font-size:11px;
    letter-spacing:.06em;
  }
}

/* chip jako link */
.heroStatusLink{
  text-decoration:none;
}

.heroStatusLink:hover{
  opacity:.95;
  transform:translateY(-2px);
}

.heroStatusLink:active{
  transform:translateY(0);
  opacity:.98;
}

.heroStatusLink:focus-visible{
  outline:3px solid rgba(75,91,115,.28);
  outline-offset:3px;
}

.heroMedia .heroImg{
  width:100%;
  height:auto;
  display:block;
  border-radius:16px;
}

.heroGrid--noMedia{
  grid-template-columns: 1fr !important;
}

.heroGrid--noMedia .heroText{
  max-width: 100%;
}
/* Gdy hero jest bez obrazka, pozwól tekstowi i akapitom iść szerzej */
.heroGrid--noMedia .heroText,
.heroGrid--noMedia .heroText p {
  max-width: none;
}

.breadcrumbs {
  font-size: 14px;
  margin-bottom: 16px;
}

.breadcrumbs ol {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.breadcrumbs li::after {
  content: "›";
  margin-left: 6px;
  color: #94a3b8;
}

.breadcrumbs li:last-child::after {
  content: "";
}

.breadcrumbs a {
  color: #64748b;
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}