/* === FONT I BAZA === */
body, #menu_categories {
  font-family: 'Poppins', Arial, sans-serif;
  color: #222;
}

/* === OGÓLNE MENU === */
#menu_categories a[title] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #222;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
  transition: color .3s ease, background-color .3s ease, box-shadow .3s ease;
}

#menu_categories a[title]:hover {
  color: #E83447;
  background-color: #f7f9fb;
  box-shadow: inset 0 -2px 0 rgba(35,143,167,.25);
}

/* === WSPÓLNE USTAWIENIA IKON === */
#menu_categories a[title]::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background-color: #238FA7;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  transition: background-color .25s ease;
}
#menu_categories a[title]:hover::before {
  background-color: #E83447;
}

/* === WYRÓŻNIENIE KATEGORII SPECJALNEJ === */
#menu_categories [title="Oświetlenie Specjalistyczne LED"] {
  font-weight: 700;
  background: #eef7fa;
  border: 1px solid #d9eef3;
  position: relative;
  padding-right: 40px;
  color: #1b6f80;
}
#menu_categories [title="Oświetlenie Specjalistyczne LED"]:hover {
  background: #e8f3f7;
  border-color: #c9e7ee;
  color: #E83447;
}
#menu_categories [title="Oświetlenie Specjalistyczne LED"]::after {
  content: "LED";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  background: #238FA7;
  color: #fff;
  border-radius: 999px;
  letter-spacing: .03em;
}


/* === PRODUKTY === */
.product > a img { transition: all 0.35s ease-in-out !important; }
.product:hover > a img { transform: scale(1.08); }
.product {
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  transition: all 0.35s ease-in-out;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.product:hover {
  transform: translateY(-6px);
  background-color: #fafafa;
  border-color: #238FA7;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* === PRZYCISK === */
button.addtobasket, a.addtobasket {
  background-color: #238FA7;
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  padding: 0.8em 1.4em;
  cursor: pointer;
  transition: all 0.35s ease-in-out;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
button.addtobasket:hover, a.addtobasket:hover {
  background-color: #2AA9C0;
  box-shadow: 0 0 15px rgba(35,143,167,0.5);
  transform: scale(1.05);
  animation: pulseButton 1.2s infinite alternate;
}
button.addtobasket:active, a.addtobasket:active {
  transform: scale(0.97);
  box-shadow: 0 0 5px rgba(35,143,167,0.3);
}
@keyframes pulseButton {
  from { box-shadow: 0 0 10px rgba(35,143,167,0.4); }
  to { box-shadow: 0 0 18px rgba(35,143,167,0.7); }
}