/* Phase-1 supplement — pure4me.pl (Gatsby SSG, de-hydrated static restore) */

/* gatsby-plugin-image: main images render at opacity:0 and are faded in by the
   client runtime (which we stripped). Force them visible so photos show without JS. */
.gatsby-image-wrapper [data-main-image]{opacity:1 !important}
.gatsby-image-wrapper [data-placeholder-image]{opacity:0 !important}

/* scroll-reveal blocks: base .animated class sits at inline opacity:0 until JS adds
   the animate.css keyframe class. JS is gone -> reveal them permanently. */
.animated{opacity:1 !important}

/* Fixed nav — solid bar, readable on every page */
.nav{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  width:100% !important;
  z-index:10000 !important;
  background:#ffffff !important;
  box-shadow:0 2px 10px rgba(27,20,100,.08) !important;
}
.nav .menu-computer > div,
.nav .menu-container{
  height:72px !important;
}
.nav #menu-item,
.nav #menu-item.light,
.nav #menu-item.dark,
.nav .light,
.nav .menu li,
.nav .menu a,
.nav a #menu-item{
  color:#1b1464 !important;
}
.nav #menu-item.light:hover,
.nav #menu-item.dark:hover,
.nav #menu-item:hover,
.nav .menu a:hover #menu-item{
  color:#6338ff !important;
}
/* Unified logo size everywhere */
.nav .romli-logo,
.nav img.ui.small.image,
.nav .menu-image,
.nav .menu-image img,
.nav .gatsby-image-wrapper.menu-image{
  width:auto !important;
  height:40px !important;
  max-height:40px !important;
  max-width:150px !important;
  object-fit:contain !important;
  display:block !important;
}
.nav .gatsby-image-wrapper.menu-image{
  overflow:hidden !important;
}
/* space so content is not under fixed header */
body{padding-top:88px !important}
@media (max-width:767px){
  body{padding-top:70px !important}
}

/* Huge archive fallbacks must not blow up layout */
img[src*="blog-supplements"],
img[src*="blog-vitamins"],
img[src*="blog-herbs"]{
  max-height:240px !important;
  width:100% !important;
  height:auto !important;
  object-fit:cover !important;
}
.gatsby-image-wrapper img[src*="blog-supplements"],
.gatsby-image-wrapper img[src*="blog-vitamins"],
.gatsby-image-wrapper img[src*="blog-herbs"]{
  max-height:240px !important;
  object-fit:cover !important;
}

/* Kill leftover cookie banner markup/CSS if any page still has it */
.react-cookie-banner,
.cookie-message,
[class*="cookie-banner"],
[class*="CookieBanner"]{
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
}