/*
 * Egyedi kiegészítések – NEM a Webflow exportból.
 * A Webflow CSS (normalize.css, webflow.css, du-fa.css) érintetlen marad,
 * minden saját módosítás ide kerül, hogy a Webflow export bármikor újraszinkronizálható legyen.
 */

/* ── Navbar háttér beúszása görgetésre ───────────────────────────────────────
   A Webflow eredetileg IX2 + webflow.js-szel oldja meg; a téma a könnyű
   nav.js-t használja, ami az .is-scrolled osztályt teszi a wrapperre.
   Csak a hero-s oldalakon (body.nav-transparent) átlátszó a navbar fent. */
.navbar_item_bg {
  transition: opacity .35s ease;
}

body.nav-transparent .navbar_item_bg {
  opacity: 0;
}

body.nav-transparent .navbar_item_wrap.is-scrolled .navbar_item_bg {
  opacity: 1;
}

/* Mobilon a navbar MINDIG zöld háttérrel (mint a Webflow pill) – különben a
   világos logó és hamburger eltűnne a krém háttéren a hero fölött. */
@media screen and (max-width: 991px) {
  body.nav-transparent .navbar_item_bg {
    opacity: 1;
  }
}

/* ── Termék aloldal főkép ────────────────────────────────────────────────────
   A főkép töltse ki a krém doboz szélességét a SAJÁT méretaránya szerint
   (ne legyen 16:9 letterbox, se oldalsó üres hely). A single-product.php a
   kép valós szélességét/magasságát adja meg, így nincs torzulás. */
.product-detail_section_image {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

/* A padding nélkül a kép a doboz széléig ér; az overflow:hidden levágja a
   kép sarkait a doboz lekerekítéséhez (különben szögletesen kilógna). */
.product-detail_image_wrap {
  overflow: hidden;
  border-radius: var(--radius--xsmall);
}

/* ── Aloldal hero háttérkép ───────────────────────────────────────────────────
   A WooCommerce ".woocommerce img{height:auto}" (specificitás 0,1,1) felülírja a
   Webflow height:100%-ot, ezért a hero háttérkép nem tölti ki a konténert.
   Nagyobb specificitású szelektorral állítjuk vissza (0,2,0). */
.hero_subpage_contain .hero_subpage_image {
  height: 100%;
  object-fit: cover;
}

/* ── Termékrács: CSAK 1440px FELETT 4 oszlop ──────────────────────────────────
   1440px-ig (és lefelé) marad a Webflow szerinti 3 oszlop, tablet 2, mobil 1.
   Csak a nagy (1440 feletti) képernyőkön bővül 4 oszlopra. */
@media screen and (min-width: 1441px) {
  .product_card_contain.is-grig {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.starstone_cta_bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: 100%;
  background-color: #EFE9DA;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 16px 16px 16px 28px;
  margin-bottom: var(--padding--md, 24px);
}

.starstone_cta_text {
  color: #263711;
}

.starstone_cta_button {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #444F42; /* sötétzöld gomb */
  color: #FFFFFF;
  border-radius: 999px;
  padding: 12px 20px;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.starstone_cta_button:hover {
  opacity: 0.85;
}

.starstone_cta_icon {
  flex-shrink: 0;
}

.starstone_cta_arrow {
  font-size: 16px;
  line-height: 1;
}

@media (max-width: 767px) {
  .starstone_cta_bar {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }
}