.elementor-kit-16{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-06075cd:#C84A7E;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-16 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ABOUT: siatka składników — stabilne 2×2 na telefonach */
.about-text{ overflow-x:hidden; }

.ingredients-grid{
  display:grid !important;                 /* przebija ewentualny flex z widgetów */
  grid-template-columns: repeat(2, 1fr);   /* DOMYŚLNIE: telefony = 2 kolumny */
  gap:12px;
  margin:12px 0 16px;
}

.ingredients-grid figure{
  margin:0;                 /* zeruje marginesy przeglądarki/Elementora */
  padding:8px;
  text-align:center;
  overflow:visible;         /* żeby glow nie był obcięty */
}

.ingredients-grid img{
  width:100%;               /* wypełnia kafelek — ładne 2×2 */
  max-width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:99px;
  display:block;
  margin:0 auto;
  transition:transform .3s ease, box-shadow .3s ease;
}

/* podpisy */
.ingredients-grid figcaption{
  font-size:14px;
  line-height:1.4;
  margin-top:6px;
  text-transform:lowercase;
}

/* TABLET: 3 kolumny (opcjonalnie) */
@media (min-width: 768px) and (max-width: 1023px){
  .ingredients-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

/* DESKTOP: 4 kolumny */
@media (min-width: 1024px){
  .ingredients-grid{
    grid-template-columns: repeat(4, 1fr);
  }
}

/* (opcjonalnie) efekt glow przy hover — jeśli używałaś */
@keyframes pulseGlow{
  0%{box-shadow:0 0 0 0 rgba(242,203,223,.55);}
  50%{box-shadow:0 0 16px 10px rgba(242,203,223,.65);}
  100%{box-shadow:0 0 0 0 rgba(242,203,223,.55);}
}
.ingredients-grid img:hover,
.ingredients-grid img:active,
.ingredients-grid img:focus-visible{
  transform:scale(1.08);
  animation:pulseGlow 1.5s infinite;
  outline:none;
}

/* A11y: ograniczony ruch = bez animacji */
@media (prefers-reduced-motion: reduce){
  .ingredients-grid img:hover,
  .ingredients-grid img:active{
    animation:none;
    transform:scale(1.03);
    box-shadow:0 0 12px 6px rgba(242,203,223,.6);
  }
}

/* Globalne tło dla całej witryny */
body {
    background-color: #FFF3F8 !important; /* Twoja baza Soft Bloom */
    
    /* Radialne gradienty (plamy), które są "przyklejone" do ekranu */
    background-image: 
        radial-gradient(circle at 100% 0%, rgba(242, 204, 223, 0.6) 0%, transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(228, 92, 149, 0.12) 0%, transparent 50%) !important;
    
    background-attachment: fixed !important; /* KLUCZ: Gradient nie przesuwa się przy skrolowaniu */
    background-repeat: no-repeat;
    background-size: cover;
}

/* Szlachetne ziarno na całej stronie */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url('https://grainy-gradients.vercel.app/noise.svg');
    opacity: 0.04;
    pointer-events: none;
    z-index: 9999; /* Na samej górze, by nakładało się na wszystko */
}

/* WAŻNE: Sekcje muszą być przezroczyste, aby widzieć tło body */
.elementor-section, .elementor-container, section {
    background-color: transparent !important;
}

/* Jeśli chcesz, by niektóre karty/sekcje miały białe tło, zrób je "szklane" */
.glass-effect {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}/* End custom CSS */