a.pokatna-sklep {
    width: 63px;
    height: 63px;
    display: inline-block;
    overflow: hidden;
    background-size: cover;
    background-position: 0 0;
    /*transition: background-position 0.3s ease;*/
}

/* Indywidualne tła dla sklepów */
a.sklep-madame-malkin               { background-image: url(grafika/pokatna/szyld-madame-malkin.webp); }
a.sklep-esy-i-floresy              { background-image: url(grafika/pokatna/szyld-esy-i-floresy.webp); }
a.sklep-apteka-sluga-i-jiggera     { background-image: url(grafika/pokatna/szyld-apteka-sluga-i-jiggera.webp); }
a.sklep-magiczna-menazeria         { background-image: url(grafika/pokatna/szyld-magiczna-menazeria.webp); }
a.sklep-magiczny-ekwipunek         { background-image: url(grafika/pokatna/szyld-magiczny-ekwipunek.webp); }
a.sklep-markowy-sprzet-do-quidditcha { background-image: url(grafika/pokatna/szyld-markowy-sprzet-do-quidditcha.webp); }
a.sklep-nowosci-botaniczne-noltiego { background-image: url(grafika/pokatna/szyld-nowosci-botaniczne-noltiego.webp); }
a.sklep-bank-gringotta             { background-image: url(grafika/pokatna/szyld-bank-gringotta.webp); }
a.sklep-ollivander                 { background-image: url(grafika/pokatna/szyld-ollivander.webp); }
a.sklep-targ                       { background-image: url(grafika/pokatna/szyld-targ.webp); }

/* Wspólny efekt hover */
a.pokatna-sklep:hover {
    background-position: 0 -63px;
}





a.pokatna-kategoria {
    width: 50px;
    height: 50px;
    display: inline-block;
    overflow: hidden;
    background-size: cover;
    background-position: 0 0;
    /*transition: background-position 0.3s ease;*/
}

/* Unikalne tła dla każdej kategorii */
a.kategoria-buty                { background-image: url(grafika/pokatna/sklep-kategoria-buty.webp); }
a.kategoria-szaty               { background-image: url(grafika/pokatna/sklep-kategoria-szaty.webp); }
a.kategoria-ozdoby-szyi         { background-image: url(grafika/pokatna/sklep-kategoria-ozdoby-szyi.webp); }
a.kategoria-nakrycia-glowy      { background-image: url(grafika/pokatna/sklep-kategoria-nakrycia-glowy.webp); }
a.kategoria-garderoba-gorna     { background-image: url(grafika/pokatna/sklep-kategoria-garderoba-gorna.webp); }
a.kategoria-garderoba-dolna     { background-image: url(grafika/pokatna/sklep-kategoria-garderoba-dolna.webp); }

a.kategoria-skladniki-roslinne  { background-image: url(grafika/pokatna/sklep-kategoria-skladniki-roslinne.webp); }
a.kategoria-skladniki-zwierzece { background-image: url(grafika/pokatna/sklep-kategoria-skladniki-zwierzece.webp); }
a.kategoria-skladniki-nieorganiczne { background-image: url(grafika/pokatna/sklep-kategoria-skladniki-nieorganiczne.webp); }
a.kategoria-eliksiry            { background-image: url(grafika/pokatna/sklep-kategoria-eliksiry.webp); }

a.kategoria-miotly              { background-image: url(grafika/pokatna/sklep-kategoria-miotly.webp); }

a.kategoria-jaja           { background-image: url(grafika/pokatna/sklep-kategoria-jaja.webp); }
a.kategoria-male-stworzenia { background-image: url(grafika/pokatna/sklep-kategoria-male-stworzenia.webp); }
a.kategoria-duze-stworzenia { background-image: url(grafika/pokatna/sklep-kategoria-duze-stworzenia.webp); }

/* Efekt hover dla wszystkich */
a.pokatna-kategoria:hover {
    background-position: 0 -50px;
}


/*MENU DOLNE*/
a.menu-pokatna-ikona {
  position: absolute;
  width: 50px;
  height: 50px;
  display: inline-block;
  overflow: hidden;
  background-size: cover;
  background-position: 0 0;
  /*transition: background-position 0.3s ease; /* Opcjonalna płynna animacja */
}

a.menu-ollivander { background-image: url(grafika/pokatna/ikona-ollivander.webp); }
a.menu-bank       { background-image: url(grafika/pokatna/ikona-bank.webp); }
a.menu-targ       { background-image: url(grafika/pokatna/ikona-targ.webp); }

/* Efekt hovera dla wszystkich ikon */
a.menu-pokatna-ikona:hover {
  background-position: 0 -50px;
}



.magiczny-paragon {
  width: 650px;
  margin: 30px auto;
  padding: 20px;
  background: url('grafika/pokatna/pergamin.jpg') center/cover no-repeat;
  border: 2px dashed #aa926c;
  box-shadow: 0 0 10px rgba(200, 170, 120, 0.5);
  font-family: 'Courier New', monospace;
  color: #3a2d1c;
}
.magiczny-paragon h2 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 22px;
}
.magiczny-paragon table {
  width: 100%;
  border-collapse: collapse;
}
.magiczny-paragon th, .magiczny-paragon td {
  border-bottom: 1px dotted #bbad94;
  padding: 8px;
  text-align: left;
}
.magiczny-paragon td:nth-child(3),
.magiczny-paragon td:nth-child(4) {
  color: #f5ecd6;
}
.magiczny-paragon tfoot td {
  border-top: 2px solid #998766;
}
.magiczny-paragon tr {
  opacity: 0;
  animation: wypiszLinie 0.6s ease-out forwards;
  animation-delay: var(--delay);
}
@keyframes wypiszLinie {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.moneta {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-size: 14px 14px;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-left: 4px;
}

.moneta.galeon { background-image: url("theme/2021/grafika/pokatna/galeony.webp"); }
.moneta.sykla  { background-image: url("theme/2021/grafika/pokatna/sykle.webp"); }
.moneta.knut   { background-image: url("theme/2021/grafika/pokatna/knuty.webp"); }





.pokatna-tytul::after {
  content: attr(data-tytul);
  font-size: 14px;
  font-family: 'Courier New', monospace;
  color: #3a2d1c;
}

/* Domyślnie "TYTUŁ" */
.menu-dolne-podroze-pokatna[data-tytul]:hover .menu-ollivander ~ .pokatna-tytul::after {
  content: "Ollivander";
}

.menu-dolne-podroze-pokatna[data-tytul]:hover .menu-bank ~ .pokatna-tytul::after {
  content: "Bank Gringotta";
}

.menu-dolne-podroze-pokatna[data-tytul]:hover .menu-targ ~ .pokatna-tytul::after {
  content: "Targ";
}