/* 1. Główny kontener - ciemnozielona karta ze znakiem wodnym */
.skladniki-group {
  background: linear-gradient(160deg, #184334 0%, #0f2d22 100%) !important;
  color: #f3f5f3;
  padding: 24px 28px !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 25px -5px rgba(15, 45, 34, 0.25);
  position: relative;
  overflow: hidden;
  line-height: 1.5;
  width: 100%;
  max-width: 380px;
}

/* Znak wodny w tle (sztućce) */
.skladniki-group::after {
  content: "";
  position: absolute;
  right: -15px;
  bottom: -25px;
  width: 140px;
  height: 140px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  pointer-events: none;
  opacity: 0.05;
  transform: rotate(-18deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23ffffff'%3E%3Cpath d='M207.103 23.875v109.219c0 7-5.656 12.641-12.625 12.641h-3.375c-6.969 0-12.641-5.641-12.641-12.641V23.375c0-18-12.109-23.375-23.719-23.375s-23.719 5.375-23.719 23.375v109.719c0 7-5.672 12.641-12.641 12.641h-3.375c-6.969 0-12.625-5.641-12.625-12.641V23.875c0-32.219-45.938-31.125-45.938.359 0 37.703 0 104.297 0 104.297-.219 57.906 13.625 72.953 36.469 91 18.422 14.531 34.156 22.859 34.156 58.953v232.188h55.344V278.484c0-36.094 15.734-44.422 34.156-58.953 22.859-18.047 36.688-33.094 36.469-91 0 0 0-66.594 0-104.297 0-39.734-45.937-40.828-45.937-8.609z'/%3E%3Cpath d='M385.228 34.75c-11.75 32.953-45.578 110.156-47.719 178.344-3.313 105.844 61.547 90.188 62.703 159.531v138.688h55.078l.266.688c0 0 0-.281 0-.688 0-9.266 0-119.625 0-232.203 0-111.359 0-224.797 0-244.359C455.556-5.438 403.524-16.531 385.228 34.75z'/%3E%3C/svg%3E");
}

/* 2. Zapewnienie, że zawartość wyświetla się nad tłem */
.skladniki-group .paragraph--type--skladniki {
  width: 100%;
  position: relative;
  z-index: 1;
}

/* 3. Główny tytuł: "Składniki" */
.skladniki-group .paragraph--type--skladniki:first-child > div:first-child {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: #ffffff;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  letter-spacing: -0.01em;
}

/* 4. Podtytuły kolejnych sekcji (np. "Marynata") */
.skladniki-group .paragraph--type--skladniki:not(:first-child) > div:first-child {
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 600;
  color: #ffffff;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* 5. Kontener listy pozycji */
.skladniki-group .paragraph--type--skladniki > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 6. Pojedyncza pozycja na liście */
.skladniki-group .paragraph--type--skladniki > div:last-child > div {
  position: relative;
  padding-left: 14px;
  font-size: 0.95rem;
  font-weight: 400;
  color: #e5ece8;
  line-height: 1.5;
}

/* 7. Dyskretne punktorowe kropki */
.skladniki-group .paragraph--type--skladniki > div:last-child > div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #69a285;
}


.paragraph--type--przygotowanie {
	padding-left: 20px;
}

/* Styluje pierwszy div TYLKO WTEDY, gdy w środku istnieje drugi div (czyli wersja z nagłówkiem) */
.paragraph--type--przygotowanie:has(> div:nth-child(2)) > div:first-child {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--secondary-deep);|
  margin-bottom: 8px;
}

.paragraph--type--przygotowanie li::marker {
  color: #c30808;
}