/* =========================================================
   ‘Ohana – the coffee family · Ohana Child (Hello Elementor child)
   A statikus redesign (css/style.css) átirata Elementor V4 + Hello alá.

   - Tokenek: var(--navy, #153252) forma – az Elementor V4 globális változói
     a labeljükkel (--navy, --caramel-700 …) kerülnek ki; a fallback a literál.
     Ezekkel a nevekkel itt SEHOL nincs :root definíció (ütközne).
     Saját, nem-Elementor segédváltozók: --ohana-*.
   - Ütközés-védelem: a WordPress / WooCommerce / Hello saját osztályaival
     egyező nevek szűkítve vannak (ul.menu, li.menu-item, body.category,
     li/div.product, ul.products, td.actions, p.form-row, #site-header …).
   - Az Elementor által adott stílusokat (globális osztályok, default styles)
     ahol lehet, alacsony specificitással egészítjük ki; ahol állapotot
     kell kényszeríteni (fejléc .is-solid, sötét szekciók), ott magasabbal.
   ========================================================= */

:root {
  --ohana-shadow: 0 12px 32px rgba(21, 50, 82, 0.10);
  --ohana-shadow-lg: 0 28px 64px rgba(21, 50, 82, 0.18);
  --ohana-gutter: clamp(16px, 4vw, 40px);
  --ohana-section: clamp(64px, 9vw, 120px);
  --ohana-header-h: 84px;
  --ohana-header-h-solid: 72px;
  --ohana-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Base (body, nem-atomi tartalom: shortcode, Woo, klasszikus oldalak) ---------- */
html { scroll-behavior: smooth; }

body.ohana {
  background: var(--cream, #FAF7F2);
  font-family: var(--font-body, Montserrat), system-ui, sans-serif;
  color: var(--ink, #1B2A3B);
  line-height: 1.7;
  padding-top: 0; /* a fejléc fixed; az első szekció (hero) kezeli a helyet */
}

/* Hero nélküli (nem Elementorral épített) oldalakon a fejléc eleve tömör
   (body.ohana-header-solid, PHP adja), ilyenkor a tartalmat le kell tolni. */
body.ohana.ohana-header-solid.ohana-has-tb-header { padding-top: var(--ohana-header-offset, 72px); }

body.nav-open { overflow: hidden; }

/* (0,0,1) specificitás: felülírja a Hello reset.css-t, de az Elementor kit /
   default styles és minden osztály-alapú stílus erősebb nála. */
:where(body.ohana) :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-head, Archivo), system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--navy, #153252);
  line-height: 1.12;
  margin: 0 0 0.5em;
  font-weight: 600;
  letter-spacing: -0.01em;
}
:where(body.ohana) h1 { font-size: clamp(2.5rem, 5.5vw, 4.4rem); letter-spacing: -0.02em; }
:where(body.ohana) h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
:where(body.ohana) h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
:where(body.ohana) h4 { font-size: 1.05rem; }
:where(body.ohana) p { margin: 0 0 1.2em; }
:where(body.ohana) p:where(:last-child) { margin-bottom: 0; }
:where(body.ohana) a { color: var(--navy, #153252); }
:where(body.ohana) a:is(:hover, :active) { color: var(--navy-700, #1F446E); }

/* .lead / .eyebrow: szándékosan NINCS `color` – a szín a `lead` / `eyebrow` Elementor globális
   osztályból és az elem lokális stílusából jön (pl. aloldali hero: fehér lead a navy háttéren).
   A téma korábbi `color`-ja erősebb szelektorral felülírta a lokális fehéret → szürke lead a navy-n.
   Sötét szekciókban a „Sötét szekciók” blokk biztonsági hálója ad világos színt. */
.lead {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.65;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 28px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  background: var(--navy, #153252);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  z-index: 1000;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* Csak képernyőolvasónak szánt szöveg (űrlapcímkék) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:where(body.ohana) :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--caramel, #CA9B77);
  outline-offset: 3px;
  box-shadow: none;
}

/* ---------- Layout helpers (a .container / .section maga Elementor globális osztály) ---------- */
/* A statikus `.container` mintája: width = min(1200px, 100% − 2×gutter), padding NÉLKÜL.
   (Korábban max-width:1200px + 40px padding volt → a tartalom 1120px széles lett, és a ragadós
   chip-sor 40px-szel beljebb kezdődött, mint a fejléc logója / a szekciók széle.) */
/* div.container (0,2,1): erősebb, mint az Elementor `container` globális osztálya (.elementor .container,
   (0,2,0)), ha a shortcode Elementor-widgetben ül. */
.ohana-itallap div.container,
.ohana-shop div.container {
  width: min(var(--container, 1200px), 100% - 2 * var(--ohana-gutter));
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}
.container--narrow,
.container-narrow { max-width: 820px; }

.section--tight,
.section-tight,
.ohana-itallap .section--tight { padding-block: calc(var(--ohana-section) * 0.6); }

.section--white,
.section-white { background: var(--white, #FFFFFF); }
.section--sand,
.section-sand { background: var(--sand, #F1EBE2); }
.section--navy,
.section-navy { background: var(--navy, #153252); color: rgba(255, 255, 255, 0.85); }

.section-head {
  max-width: 720px;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.section-head--center,
.section-head-center {
  margin-inline: auto;
  text-align: center;
}
:is(.section-head--center, .section-head-center) .eyebrow { justify-content: center; }
.section-head--split,
.section-head-split {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
}
:is(.section-head--split, .section-head-split) > div { max-width: 720px; }
.section-head :is(h2, .e-default-h2):last-child { margin-bottom: 0; }

.text-center { text-align: center; }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95em 1.6em;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: 0.7em 1.15em; font-size: 0.85rem; }
.btn-lg { padding: 1.1em 2em; font-size: 1rem; }

/* A :focus változat azért kell, mert a Hello reset `button:focus` (0,1,1)
   rózsaszín hátteret adna; a :hover színek a Hello `a:hover` (#336) ellen. */
.btn-primary,
.btn-primary:focus { background: var(--navy, #153252); color: #fff; }
.btn-primary:hover { background: var(--navy-700, #1F446E); color: #fff; box-shadow: 0 10px 24px rgba(21, 50, 82, 0.25); }

.btn-accent,
.btn-accent:focus { background: var(--caramel, #CA9B77); color: #fff; }
.btn-accent:hover { background: var(--caramel-700, #A9784F); color: #fff; box-shadow: 0 10px 24px rgba(169, 120, 79, 0.3); }

.btn-light,
.btn-light:focus { background: #fff; color: var(--navy, #153252); }
.btn-light:hover { background: var(--cream, #FAF7F2); color: var(--navy, #153252); }

.btn-outline,
.btn-outline:focus { border-color: var(--navy, #153252); color: var(--navy, #153252); background: transparent; }
.btn-outline:hover { background: var(--navy, #153252); color: #fff; }

.btn-outline-light,
.btn-outline-light:focus { border-color: rgba(255, 255, 255, 0.7); color: #fff; background: transparent; }
.btn-outline-light:hover { background: #fff; color: var(--navy, #153252); border-color: #fff; }

.btn svg { width: 18px; height: 18px; flex: none; transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
.btn:hover svg { transform: translateX(3px); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  color: var(--navy, #153252);
  text-decoration: none;
  border-bottom: 2px solid var(--caramel, #CA9B77);
  padding-bottom: 0.15em;
  transition: color 0.2s, gap 0.25s var(--ohana-ease);
}
.link-arrow:hover { color: var(--caramel-700, #A9784F); gap: 0.8em; }
.link-arrow svg { width: 18px; height: 18px; }

/* td.actions = WooCommerce kosár-táblázat cellája, azt nem bántjuk */
.actions:not(td) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.8rem;
}

/* ---------- Header (Theme Builder fejléc: a gyökér e-flexbox `site-header` osztállyal) ----------
   A Hello saját fejléce id="site-header" – az kimarad (:not(#site-header)).
   A :not(#site-header) egyben felülírja a Hello theme.css
   `.site-header:not(.dynamic-header){max-width:1140px}` korlátját is. */
.elementor-location-header { padding: 0; margin: 0; }

.site-header:not(#site-header) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  max-width: none;
  margin: 0;
  height: var(--ohana-header-h);
  color: #fff;
  transition: background 0.35s, box-shadow 0.35s, height 0.35s, color 0.35s;
}
body.admin-bar .site-header:not(#site-header) { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .site-header:not(#site-header) { top: 46px; }
}

/* Állapot-osztály: !important, mert a fejléc alapstílusát (fixed, 84px, átlátszó, fehér)
   az Elementor adja, és az felülírná. */
.site-header.is-solid:not(#site-header),
body.ohana-header-solid .site-header:not(#site-header) {
  background: rgba(255, 255, 255, 0.94) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
  box-shadow: 0 1px 0 var(--line, rgba(21, 50, 82, 0.10)) !important;
  height: var(--ohana-header-h-solid) !important;
  min-height: 0 !important;
  color: var(--navy, #153252) !important;
}

/* Logócsere: .logo-light (fehér) / .logo-dark (kék) – az élő fejlécben magán az <img>-en
   (a logó-link `a > img.logo-light + img.logo-dark`), régebbi változatban az e-image wrapper DIV-en.
   A `display`-t KIZÁRÓLAG ez a három állapot-szabálycsoport állítja, mindig !important-tal
   (a logo-dark globális osztály / inline display:none ellen, és hogy a méret-szabály ne szólhasson bele):
     alap (átlátszó fejléc) → csak .logo-light · tömör → csak .logo-dark · nyitott mobilmenü → csak .logo-light.
   Specificitás: alap (1,2,0) < tömör (1,3,0)/(1,3,1) < nyitott menü (1,4,0)/(1,4,1). */
.site-header:not(#site-header) .logo-light { display: block !important; }
.site-header:not(#site-header) .logo-dark { display: none !important; }
.site-header.is-solid:not(#site-header) .logo-light,
body.ohana-header-solid .site-header:not(#site-header) .logo-light { display: none !important; }
.site-header.is-solid:not(#site-header) .logo-dark,
body.ohana-header-solid .site-header:not(#site-header) .logo-dark { display: block !important; }
/* nyitott mobilmenü (navy overlay): a .nav-open nyer a tömör állapot felett (a JS teszi rá) … */
.site-header.nav-open:not(#site-header) .logo-light,
.site-header.is-solid.nav-open:not(#site-header) .logo-light,
body.ohana-header-solid .site-header.nav-open:not(#site-header) .logo-light { display: block !important; }
.site-header.nav-open:not(#site-header) .logo-dark,
.site-header.is-solid.nav-open:not(#site-header) .logo-dark,
body.ohana-header-solid .site-header.nav-open:not(#site-header) .logo-dark { display: none !important; }
/* … és JS nélkül is, a Pro toggle állapotából (:has – külön szabályban, hogy :has nélküli böngészőben
   ne essen ki vele a fenti .nav-open lista). */
.site-header:not(#site-header):has(.elementor-menu-toggle.elementor-active) .logo-light { display: block !important; }
.site-header:not(#site-header):has(.elementor-menu-toggle.elementor-active) .logo-dark { display: none !important; }
.site-header:not(#site-header):has([aria-expanded="true"].elementor-menu-toggle) .logo-light { display: block !important; }
.site-header:not(#site-header):has([aria-expanded="true"].elementor-menu-toggle) .logo-dark { display: none !important; }

/* Méret – display NÉLKÜL (korábban itt a `display:block` (1,2,1) felülírta a .logo-dark elrejtését → dupla logó). */
.site-header:not(#site-header) :is(.logo-light, .logo-dark) img,
.site-header:not(#site-header) img:is(.logo-light, .logo-dark) {
  height: 40px;
  width: auto;
  max-width: none;
  transition: height 0.35s;
}
/* wrapper-változat: a belső kép blokk (nincs baseline-rés); magát a .logo-* elemet ez nem érinti */
.site-header:not(#site-header) :is(.logo-light, .logo-dark) img { display: block; }
.site-header.is-solid:not(#site-header) :is(.logo-light, .logo-dark) img,
.site-header.is-solid:not(#site-header) img:is(.logo-light, .logo-dark),
body.ohana-header-solid .site-header:not(#site-header) :is(.logo-light, .logo-dark) img,
body.ohana-header-solid .site-header:not(#site-header) img:is(.logo-light, .logo-dark) { height: 34px; }
/* A logó-link (e-div-block `a`): flex, függőlegesen középre – a két kép egymás alatt sem tolhatja el;
   z-index 2: a nyitott mobilmenü fixed navy overlay-e (a fejlécen belül z-index 1) fölött maradjon
   (mint a Pro toggle, amelyet a custom CSS emel 2-re). */
.site-header:not(#site-header) a:has(> :is(.logo-light, .logo-dark)) {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  line-height: 0;
}

/* Statikus-kompatibilis .logo wrapper (ha valaki HTML-ként építi) */
.site-header .logo {
  position: relative;
  z-index: 2;
  display: block;
  line-height: 0;
}
.site-header .logo img { height: 40px; width: auto; display: block; transition: height 0.35s; }
.site-header.is-solid .logo img { height: 34px; }

/* Elementor Pro nav-menu widget: az asztali és a mobil (teljes képernyős navy overlay) stílusát
   az Elementor custom CSS adja – itt a tömör (.is-solid) állapot linkszíne, a hamburger színe/vonalai
   és a nyitott menü fejléc-állapota. A legördülő/overlay menü (.elementor-nav-menu--dropdown) kimarad. */
.site-header.is-solid:not(#site-header) .elementor-nav-menu--main .elementor-item,
body.ohana-header-solid .site-header:not(#site-header) .elementor-nav-menu--main .elementor-item { color: var(--navy, #153252); }
.site-header.is-solid:not(#site-header) .elementor-menu-toggle:not(.elementor-active):not([aria-expanded="true"]),
body.ohana-header-solid .site-header:not(#site-header) .elementor-menu-toggle:not(.elementor-active):not([aria-expanded="true"]) { color: var(--navy, #153252); }
.site-header.is-solid:not(#site-header) .elementor-menu-toggle:not(.elementor-active):not([aria-expanded="true"]) :is(svg, i),
body.ohana-header-solid .site-header:not(#site-header) .elementor-menu-toggle:not(.elementor-active):not([aria-expanded="true"]) :is(svg, i) { color: var(--navy, #153252); fill: var(--navy, #153252); }

/* Nyitott mobilmenü: a Pro a toggle-ra teszi az `elementor-active` osztályt + aria-expanded="true"-t,
   a fejlécre semmit. A navy overlay fölött a fejléc átlátszó, fehér (fehér logó, fehér X) –
   akkor is, ha közben tömör (.is-solid / body.ohana-header-solid) – a backdrop-filter is lekerül,
   mert az a fixed overlay tartalmazó blokkjává tenné a fejlécet.
   (a) .nav-open – az ohana-header.js MutationObserver-e teszi a fejlécre és a body-ra (+ [ohana_nav]);
   (b) :has() – JS nélkül is; külön szabályban, mert :has nélküli böngészőben az egész lista elveszne.
   Specificitás: (1,3,0)/(1,3,1) > a tömör állapot (1,2,0)/(1,2,1); mindkettő !important. */
.site-header.nav-open:not(#site-header),
.site-header.is-solid.nav-open:not(#site-header),
body.ohana-header-solid .site-header.nav-open:not(#site-header) {
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.site-header:not(#site-header):has(.elementor-menu-toggle.elementor-active) {
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.site-header:not(#site-header):has([aria-expanded="true"].elementor-menu-toggle) {
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.site-header:not(#site-header) .elementor-menu-toggle:is(.elementor-active, [aria-expanded="true"]),
.site-header.nav-open:not(#site-header) .elementor-menu-toggle { color: #fff !important; }
.site-header:not(#site-header) .elementor-menu-toggle:is(.elementor-active, [aria-expanded="true"]) :is(svg, i),
.site-header.nav-open:not(#site-header) .elementor-menu-toggle :is(svg, i) { color: #fff !important; fill: #fff !important; }

/* Vékonyabb hamburger / X: a Pro e-eicon ikonjai 28px-en ~3,5px vastag sávok; helyettük a statikus
   oldal 24px széles, 2px-es vonalai (::before + mask, currentColor). Az eredeti SVG láthatatlan, de
   helyet foglal (a gomb mérete nem változik). Mask nélküli böngészőben / forced-colors módban marad az SVG. */
@supports ((-webkit-mask-size: contain) or (mask-size: contain)) {
  .site-header:not(#site-header) .elementor-menu-toggle { position: relative; }
  .site-header:not(#site-header) .elementor-menu-toggle > :is(svg, i) { opacity: 0; }
  .site-header:not(#site-header) .elementor-menu-toggle::before {
    --ohana-toggle-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 5h22M1 12h22M1 19h22'/%3E%3C/svg%3E");
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: var(--ohana-toggle-icon) center / 24px 24px no-repeat;
    mask: var(--ohana-toggle-icon) center / 24px 24px no-repeat;
    pointer-events: none;
  }
  .site-header:not(#site-header) .elementor-menu-toggle:is(.elementor-active, [aria-expanded="true"])::before {
    --ohana-toggle-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3.5 3.5l17 17M20.5 3.5l-17 17'/%3E%3C/svg%3E");
  }
}
@media (forced-colors: active) {
  .site-header:not(#site-header) .elementor-menu-toggle > :is(svg, i) { opacity: 1; }
  .site-header:not(#site-header) .elementor-menu-toggle::before { content: none; }
}

/* Tartalék navigáció: [ohana_nav] shortcode (wp_nav_menu + .nav-toggle) */
.site-header .nav ul {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 2.2vw, 2.1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-header .nav a:not(.btn) {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.93rem;
  padding: 0.4rem 0;
  position: relative;
  white-space: nowrap;
}
.site-header .nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--caramel, #CA9B77);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ohana-ease);
}
.site-header .nav a:not(.btn):hover::after,
.site-header .nav a:not(.btn).is-active::after,
.site-header .nav a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }
.site-header .nav .btn { margin-left: 0.4rem; }

.site-header .nav-toggle {
  display: none;
  position: relative;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 0;
  border-radius: 8px;
}
.site-header .nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s var(--ohana-ease), opacity 0.2s;
}
.site-header .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.site-header .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* A mobil overlay csak akkor él, ha a fejlécben tényleg van .nav-toggle
   (a Pro nav-menu widget saját hamburgert használ, arra ez nem vonatkozik). */
@media (max-width: 960px) {
  .site-header .nav-toggle { display: inline-flex; }
  .site-header:has(.nav-toggle) .nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: var(--navy, #153252);
    padding: calc(var(--ohana-header-h) + 1.5rem) var(--ohana-gutter) 2.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.35s var(--ohana-ease), transform 0.35s var(--ohana-ease), visibility 0.35s;
    overflow-y: auto;
  }
  .site-header:has(.nav-toggle) .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .site-header:has(.nav-toggle) .nav ul { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
  .site-header:has(.nav-toggle) .nav a:not(.btn) {
    font-family: var(--font-head, Archivo), system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: clamp(1.7rem, 7vw, 2.4rem);
    font-weight: 600;
    color: #fff;
    padding: 0.45rem 0;
    letter-spacing: -0.01em;
  }
  .site-header:has(.nav-toggle) .nav .btn { margin: 1.4rem 0 0; font-size: 1rem; padding: 1em 1.8em; }
  /* a .nav-open fejléc-állapot (átlátszó, fehér logó) fent, a Pro nav-menu blokkban – breakpointtól függetlenül */
}

/* A fejléc-sablon szerkesztésekor / előnézetében ne lebegjen, és legyen sötét
   háttere, hogy a fehér tartalom látsszon. */
body.single-elementor_library .site-header:not(#site-header) {
  position: relative;
  background: var(--navy, #153252);
  color: #fff;
}

/* ---------- Hero (home) ---------- */
.hero {
  position: relative;
  min-height: min(92vh, 920px);
  display: grid;
  align-items: end;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: hero-zoom 18s var(--ohana-ease) both;
}
@keyframes hero-zoom {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(13, 34, 64, 0.45) 0%, rgba(13, 34, 64, 0.10) 35%, rgba(13, 34, 64, 0.88) 100%),
    linear-gradient(90deg, rgba(13, 34, 64, 0.35), transparent 60%);
}
.hero__content {
  padding: calc(var(--ohana-header-h) + 3rem) 0 clamp(3rem, 7vw, 5.5rem);
  max-width: 760px;
}
.hero .eyebrow { color: #fff; text-shadow: 0 1px 12px rgba(13, 34, 64, 0.6); }
.hero .eyebrow::before { background: var(--caramel, #CA9B77); }
.hero h1 { color: #fff; margin-bottom: 0.4em; text-shadow: 0 2px 24px rgba(13, 34, 64, 0.45); }
.hero .lead { color: rgba(255, 255, 255, 0.9); max-width: 620px; text-shadow: 0 1px 16px rgba(13, 34, 64, 0.5); }
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2.2rem;
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
}
.hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.hero__meta svg { width: 16px; height: 16px; color: var(--caramel, #CA9B77); }

/* ---------- Page hero (subpages) ---------- */
.page-hero {
  position: relative;
  background: var(--navy, #153252);
  color: #fff;
  padding: calc(var(--ohana-header-h) + clamp(3rem, 7vw, 6rem)) 0 clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
  isolation: isolate;
}
.page-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 70vw;
  height: 70vw;
  max-width: 1000px;
  max-height: 1000px;
  right: -25vw;
  top: -35vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(202, 155, 119, 0.38), transparent 62%);
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero--image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(13, 34, 64, 0.55), rgba(13, 34, 64, 0.85));
}
.page-hero--image { min-height: 62vh; display: grid; align-items: end; }
.page-hero .eyebrow { color: var(--caramel, #CA9B77); }
.page-hero h1 { color: #fff; max-width: 14ch; }
.page-hero .lead { color: rgba(255, 255, 255, 0.85); max-width: 640px; }

/* ---------- Stores ---------- */
.stores {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.store {
  background: #fff;
  border-radius: var(--radius, 18px);
  overflow: hidden;
  box-shadow: var(--ohana-shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s var(--ohana-ease), box-shadow 0.35s var(--ohana-ease);
  transition-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}
.store:hover { transform: translateY(-6px); box-shadow: var(--ohana-shadow-lg); }
.store__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--sand, #F1EBE2);
}
.store__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s var(--ohana-ease);
}
.store:hover .store__media img { transform: scale(1.05); }
.badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.4em 0.85em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--navy, #153252);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.store__body {
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  display: grid;
  gap: 1.1rem;
  flex: 1;
}
.store__body h3 { margin-bottom: 0.2em; }
.store__body > p { color: var(--muted, #5F6F80); }
.store__row {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  font-size: 0.95rem;
}
.store__row svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--caramel-700, #A9784F);
  margin-top: 0.2rem;
}
.store__row strong { color: var(--navy, #153252); font-weight: 600; display: block; }
.store__row a { color: var(--caramel-700, #A9784F); font-weight: 600; text-decoration: none; font-size: 0.88rem; }
.store__row a:hover { text-decoration: underline; }

.hours {
  display: grid;
  gap: 0.15rem;
  margin: 0.2rem 0 0;
  width: 100%;
}
.hours div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  border-bottom: 1px dashed var(--line, rgba(21, 50, 82, 0.10));
  font-size: 0.92rem;
}
.hours div:last-child { border-bottom: 0; }
.hours dt { color: var(--muted, #5F6F80); }
.hours dd { margin: 0; font-weight: 600; color: var(--navy, #153252); font-variant-numeric: tabular-nums; }
.store__footer { margin-top: auto; padding-top: 0.4rem; }

/* ---------- Split (image + text) ---------- */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
.split__media {
  border-radius: var(--radius, 18px);
  overflow: hidden;
  box-shadow: var(--ohana-shadow);
  background: var(--sand, #F1EBE2);
}
.split__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split__media--portrait { aspect-ratio: 4 / 5; }
.split__media--landscape { aspect-ratio: 4 / 3; }
.split__media--square { aspect-ratio: 1; }
.split__body h2 { max-width: 18ch; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--rev .split__media { order: 2; }
  .split--wide-text { grid-template-columns: 5fr 7fr; }
  .split--wide-text.split--rev { grid-template-columns: 7fr 5fr; }
}

.features {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.8rem;
}
.features li {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  font-weight: 500;
  color: var(--navy, #153252);
}
.features svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--caramel-700, #A9784F);
  margin-top: 0.15rem;
}

/* ---------- Shop tiles & products ----------
   .products:not(ul, section) és .product:not(.type-product): a WooCommerce ul.products /
   section.related.products / section.up-sells.products / li.product / div.product elemeit nem
   érinti (azoknak lent saját blokk van). 1.0.2-ben a `.products:not(ul)` a termékoldal
   `section.related.products`-ára is ráült → 2 oszlopos grid (h2 | ul), a kártyák 123px-esek lettek. */
.tiles {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .tiles { grid-template-columns: 1fr 1fr; } }
.tile {
  position: relative;
  display: block;
  border-radius: var(--radius, 18px);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
  box-shadow: var(--ohana-shadow);
}
.tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.9s var(--ohana-ease);
}
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(13, 34, 64, 0) 30%, rgba(13, 34, 64, 0.88));
}
.tile:hover { color: #fff; }
.tile:hover img { transform: scale(1.06); }
.tile__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(1.2rem, 3vw, 2rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.tile h3 { color: #fff; margin: 0 0 0.2em; }
.tile p { margin: 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); }
.tile__icon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  transition: background 0.3s, transform 0.3s var(--ohana-ease);
}
.tile__icon svg { width: 20px; height: 20px; }
.tile:hover .tile__icon { background: var(--caramel, #CA9B77); transform: translateX(4px); }

.products:not(ul, section) {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.product:not(.type-product) {
  background: #fff;
  border-radius: var(--radius, 18px);
  box-shadow: var(--ohana-shadow);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s var(--ohana-ease), box-shadow 0.35s var(--ohana-ease);
  transition-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}
.product:not(.type-product):hover { color: inherit; transform: translateY(-6px); box-shadow: var(--ohana-shadow-lg); }
.product__media {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--sand, #F1EBE2);
}
.product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s var(--ohana-ease);
}
.product:hover .product__media img { transform: scale(1.05); }
.product__body {
  padding: 1.2rem 1.4rem 1.4rem;
  display: grid;
  gap: 0.25rem;
}
.product__name {
  font-family: var(--font-head, Archivo), system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--navy, #153252);
}
.product__tag { font-size: 0.85rem; color: var(--muted, #5F6F80); }
.product__price {
  margin-top: 0.6rem;
  font-weight: 600;
  color: var(--caramel-700, #A9784F);
  font-size: 0.95rem;
}
.product__price small { font-weight: 500; color: var(--muted, #5F6F80); }

/* ---------- Quote band ---------- */
.quote-band {
  background: var(--navy, #153252);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.quote-band::before {
  content: "";
  position: absolute;
  inset: auto -10% -40% -10%;
  height: 70%;
  background: radial-gradient(ellipse at center, rgba(202, 155, 119, 0.22), transparent 60%);
  pointer-events: none;
}
.quote-band blockquote {
  position: relative;
  margin: 0 auto;
  max-width: 900px;
  font-family: var(--font-head, Archivo), system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.45rem, 3vw, 2.35rem);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.quote-band .mark {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 6rem;
  line-height: 0.5;
  color: var(--caramel, #CA9B77);
  margin-bottom: 1.6rem;
}
.quote-band cite {
  display: block;
  margin-top: 1.6rem;
  font-family: var(--font-body, Montserrat), system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--caramel, #CA9B77);
}

/* ---------- Newsletter & form ----------
   .form-row szűkítve (a WooCommerce p.form-row mezőit ne alakítsa flexre);
   input.input (0,1,1) – a Hello reset input[type=email] szabálya ellen. */
.newsletter {
  background: #fff;
  border-radius: calc(var(--radius, 18px) + 6px);
  box-shadow: var(--ohana-shadow-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .newsletter { grid-template-columns: 5fr 7fr; } }
.newsletter__media { min-height: 260px; background: var(--sand, #F1EBE2); }
.newsletter__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.newsletter__body {
  padding: clamp(2rem, 4vw, 3.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.newsletter__body h2 { max-width: 16ch; }

:is(.newsletter, form[data-newsletter], .site-footer) .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
:is(input, textarea, select).input {
  flex: 1 1 220px;
  padding: 0.95em 1.1em;
  border: 1.5px solid var(--line, rgba(21, 50, 82, 0.10));
  border-radius: 8px;
  font: inherit;
  font-size: 1rem;
  background: var(--cream, #FAF7F2);
  color: var(--ink, #1B2A3B);
  min-width: 0;
}
:is(input, textarea).input::placeholder { color: #98a4b2; }
:is(input, textarea, select).input:focus {
  outline: none;
  border-color: var(--navy, #153252);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(21, 50, 82, 0.08);
}
.form-note { font-size: 0.8rem; color: var(--muted, #5F6F80); margin: 0.9rem 0 0; }
.form-msg { display: none; margin-top: 0.8rem; font-weight: 600; font-size: 0.9rem; }
.form-msg.is-ok { display: block; color: #2e7d5b; }
.form-msg.is-err { display: block; color: #b23b3b; }

/* ---------- Banner ---------- */
.banner {
  position: relative;
  min-height: 480px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}
.banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(13, 34, 64, 0.58);
}
.banner__body { max-width: 720px; padding-block: var(--ohana-section); }
.banner h2 { color: #fff; }
.banner .lead { color: rgba(255, 255, 255, 0.85); }
.banner .actions { justify-content: center; }

/* ---------- Testimonial / founders ---------- */
.founder {
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
@media (min-width: 860px) {
  .founder { grid-template-columns: 4fr 7fr; }
  .founder--rev .founder__media { order: 2; }
}
.founder__media {
  border-radius: var(--radius, 18px);
  overflow: hidden;
  box-shadow: var(--ohana-shadow);
  aspect-ratio: 4 / 3;
  background: var(--sand, #F1EBE2);
}
.founder__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.founder__quote {
  font-family: var(--font-head, Archivo), system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.35;
  color: var(--navy, #153252);
  font-weight: 600;
  margin: 0 0 1.2rem;
}
.founder__quote::before { content: "„"; color: var(--caramel, #CA9B77); }
.founder__quote::after { content: "”"; color: var(--caramel, #CA9B77); }
.founder__name {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.4rem;
  font-weight: 600;
  color: var(--navy, #153252);
}
.founder__name::before {
  content: "";
  width: 32px;
  height: 2px;
  background: var(--caramel, #CA9B77);
}
.founder__name span { font-weight: 400; color: var(--muted, #5F6F80); }

.founder + .founder { margin-top: clamp(3rem, 7vw, 6rem); }

/* ---------- Coffee detail (Kávéink), specs, chips ---------- */
.coffee {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .coffee { grid-template-columns: 5fr 7fr; }
  .coffee--rev .coffee__media { order: 2; }
}
.coffee__media {
  position: relative;
  border-radius: var(--radius, 18px);
  overflow: hidden;
  box-shadow: var(--ohana-shadow);
  aspect-ratio: 1;
  background: var(--sand, #F1EBE2);
}
.coffee__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coffee__meaning {
  font-size: 0.95rem;
  color: var(--caramel-700, #A9784F);
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.coffee h2 { margin-bottom: 0.3em; }
.coffee__sub { font-family: var(--font-head, Archivo), system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--muted, #5F6F80); font-size: 1.1rem; margin-bottom: 1.2rem; }

.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.9rem 1.5rem;
  margin: 1.6rem 0;
  padding: 1.4rem 0;
  border-top: 1px solid var(--line, rgba(21, 50, 82, 0.10));
  border-bottom: 1px solid var(--line, rgba(21, 50, 82, 0.10));
}
.specs div { min-width: 0; }
.specs dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted, #5F6F80);
  margin-bottom: 0.15rem;
}
.specs dd { margin: 0; font-weight: 500; color: var(--navy, #153252); font-size: 0.95rem; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.6rem;
}
.chip {
  padding: 0.45em 0.95em;
  border-radius: 999px;
  background: var(--navy-100, #E7EDF4);
  color: var(--navy, #153252);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.chip--accent,
.chip-accent { background: var(--caramel-100, #F4E9DE); color: var(--caramel-700, #A9784F); }
a.chip { text-decoration: none; transition: background 0.2s, color 0.2s, transform 0.2s var(--ohana-ease); }
a.chip:hover { background: var(--navy, #153252); color: #fff; transform: translateY(-2px); }
a.chip--accent:hover,
a.chip-accent:hover { background: var(--caramel, #CA9B77); color: #fff; }

.coffee + .coffee { margin-top: clamp(4rem, 8vw, 7rem); }

/* ---------- Category strip ----------
   :not(body) – a WordPress kategória-archívumon a <body> is `category` osztályt kap. */
.categories {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.category:not(body) {
  position: relative;
  display: block;
  border-radius: var(--radius-sm, 10px);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  text-decoration: none;
  color: #fff;
  isolation: isolate;
  box-shadow: var(--ohana-shadow);
}
.category:not(body) img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.9s var(--ohana-ease);
}
.category:not(body)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(13, 34, 64, 0) 40%, rgba(13, 34, 64, 0.85));
}
.category:not(body):hover { color: #fff; }
.category:not(body):hover img { transform: scale(1.06); }
.category:not(body) span {
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 1rem;
  font-family: var(--font-head, Archivo), system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.25;
}

/* ---------- Contact page, map, social cards ---------- */
.contact-store {
  display: grid;
  gap: 2rem;
  align-items: stretch;
}
@media (min-width: 900px) {
  .contact-store { grid-template-columns: 5fr 7fr; }
  .contact-store--rev .contact-store__info { order: 2; }
}
.contact-store__info {
  background: #fff;
  border-radius: var(--radius, 18px);
  box-shadow: var(--ohana-shadow);
  padding: clamp(1.6rem, 3vw, 2.5rem);
  display: grid;
  gap: 1.2rem;
  align-content: start;
}
.contact-store__info h2 { margin-bottom: 0.1em; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.contact-store__info > p { color: var(--muted, #5F6F80); }
.map,
[data-map],
.map-jaszai,
.map-kalvin {
  position: relative;
  border-radius: var(--radius, 18px);
  overflow: hidden;
  box-shadow: var(--ohana-shadow);
  min-height: 380px;
  background: var(--sand, #F1EBE2);
}
:is(.map, [data-map], .map-jaszai, .map-kalvin) iframe {
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 380px;
  border: 0;
  display: block;
}
.contact-store + .contact-store { margin-top: clamp(2.5rem, 5vw, 4rem); }

.social-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.social-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.3rem;
  background: #fff;
  border-radius: var(--radius-sm, 10px);
  box-shadow: var(--ohana-shadow);
  text-decoration: none;
  color: var(--navy, #153252);
  font-weight: 600;
  transition: transform 0.3s var(--ohana-ease), box-shadow 0.3s;
}
.social-card:hover { color: var(--navy, #153252); transform: translateY(-4px); box-shadow: var(--ohana-shadow-lg); }
.social-card svg { width: 24px; height: 24px; color: var(--caramel-700, #A9784F); flex: none; }
.social-card small { display: block; font-weight: 400; color: var(--muted, #5F6F80); font-size: 0.8rem; }

/* ---------- Étlap / itallap – [ohana_itallap] shortcode ----------
   Minden szabály a .ohana-itallap wrapperre szűkítve: a WordPress nav menük
   ul.menu / li.menu-item osztályai különben ütköznének. */
.page-hero--compact,
.page-hero-compact { padding-bottom: clamp(2.5rem, 5vw, 4rem); }

.ohana-itallap div.container--menu { max-width: 900px; }

.ohana-itallap .menu-bar {
  position: sticky;
  top: var(--ohana-header-offset, 72px);
  z-index: 50;
  background: rgba(250, 247, 242, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line, rgba(21, 50, 82, 0.10));
  padding: 0.75rem 0;
}
.ohana-itallap .menu-bar .container {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.ohana-itallap .menu-nav {
  display: flex;
  gap: 0.5rem;
  flex: 1 1 320px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0.2rem 0;
  -webkit-overflow-scrolling: touch;
}
.ohana-itallap .menu-nav::-webkit-scrollbar { display: none; }
/* kereső nélkül (kereso="0", alapértelmezés) a chip-sor tölti ki a teljes sort; mobilon egy sorban görgethető */
.ohana-itallap .menu-nav:only-child { flex-basis: 100%; }
.ohana-itallap .menu-nav .chip { flex: none; }
.ohana-itallap .menu-nav .chip.is-active { background: var(--navy, #153252); color: #fff; }
.ohana-itallap .menu-nav .chip.is-hidden { display: none; }

.ohana-itallap .menu-search {
  position: relative;
  flex: 0 1 280px;
  min-width: 200px;
  max-width: 100%;
}
.ohana-itallap .menu-search svg {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--muted, #5F6F80);
  pointer-events: none;
}
.ohana-itallap .menu-search .input {
  width: 100%;
  padding: 0.7em 1em 0.7em 2.6rem;
  background: #fff;
  font-size: 0.95rem;
}
.ohana-itallap .menu-search .input::-webkit-search-cancel-button { -webkit-appearance: none; }

.ohana-itallap .menu { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }

.ohana-itallap .menu-cat {
  background: #fff;
  border-radius: var(--radius, 18px);
  box-shadow: var(--ohana-shadow);
  padding: clamp(1.4rem, 3vw, 2.4rem);
  scroll-margin-top: 150px;
}
.ohana-itallap .menu-cat.is-hidden { display: none; }
.ohana-itallap .menu-cat__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.1rem;
  border-bottom: 2px solid var(--navy-100, #E7EDF4);
  margin-bottom: 0.6rem;
}
.ohana-itallap .menu-cat__icon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--caramel-100, #F4E9DE);
  color: var(--caramel-700, #A9784F);
  display: grid;
  place-items: center;
}
.ohana-itallap .menu-cat__icon svg { width: 26px; height: 26px; }
.ohana-itallap .menu-cat h2 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); margin: 0; }
.ohana-itallap .menu-cat__sub {
  margin: 0.15rem 0 0;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted, #5F6F80);
}
.ohana-itallap .menu-cat__note {
  margin: 0 0 0 auto;
  font-size: 0.78rem;
  color: var(--caramel-700, #A9784F);
  background: var(--caramel-100, #F4E9DE);
  padding: 0.4em 0.85em;
  border-radius: 999px;
  white-space: nowrap;
}

.ohana-itallap .menu-group + .menu-group { margin-top: 1.1rem; }
.ohana-itallap .menu-group.is-hidden { display: none; }
.ohana-itallap .menu-group__title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--font-body, Montserrat), system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--caramel-700, #A9784F);
  margin: 0;
  padding: 0.9rem 0 0.2rem;
}
.ohana-itallap .menu-group__price {
  color: var(--navy, #153252);
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.ohana-itallap .menu-list { list-style: none; margin: 0; padding: 0; }
.ohana-itallap .menu-item {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.72rem 0;
  border-bottom: 1px dashed var(--line, rgba(21, 50, 82, 0.10));
}
.ohana-itallap .menu-list .menu-item:last-child { border-bottom: 0; }
.ohana-itallap .menu-item.is-hidden { display: none; }
.ohana-itallap .menu-item__text { display: grid; gap: 0.1rem; min-width: 0; }
.ohana-itallap .menu-item__name { font-weight: 600; color: var(--navy, #153252); font-size: 1.02rem; line-height: 1.35; }
.ohana-itallap .menu-item__desc { font-size: 0.85rem; color: var(--muted, #5F6F80); line-height: 1.5; }
.ohana-itallap .menu-item__dots {
  flex: 1;
  min-width: 1.5rem;
  border-bottom: 2px dotted rgba(21, 50, 82, 0.2);
  transform: translateY(-0.3em);
}
.ohana-itallap .menu-item__price {
  font-weight: 600;
  color: var(--navy, #153252);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ohana-itallap .menu-item--modifier .menu-item__name { font-weight: 500; color: var(--muted, #5F6F80); font-size: 0.95rem; }
.ohana-itallap .menu-item--modifier .menu-item__price { color: var(--caramel-700, #A9784F); }

.ohana-itallap .menu-empty {
  text-align: center;
  color: var(--muted, #5F6F80);
  padding: 3rem 0;
  margin: 0;
}
.ohana-itallap .menu-footnotes {
  margin-top: 2rem;
  font-size: 0.85rem;
  color: var(--muted, #5F6F80);
  text-align: center;
}
.ohana-itallap .menu-footnotes p { margin: 0 0 0.3em; }
.ohana-itallap .menu-footnotes--small { margin-top: 0.8rem; font-size: 0.78rem; }
.ohana-itallap .pdf-fallback {
  padding: 2rem 0 0;
  text-align: center;
  color: var(--muted, #5F6F80);
  font-size: 0.9rem;
}

@media (max-width: 640px) {
  .ohana-itallap .menu-bar { top: var(--ohana-header-offset, 72px); }
  .ohana-itallap .menu-bar .container { gap: 0.6rem; }
  .ohana-itallap .menu-search { flex: 1 1 100%; }
  /* a sáv kereső nélkül egyetlen sor chip → fejléc + sáv ≈ 150px */
  .ohana-itallap .menu-cat { padding: 1.2rem 1rem; border-radius: 14px; scroll-margin-top: 150px; }
  /* kereso="1": a kereső külön sorba törik, a sáv kétsoros */
  .ohana-itallap:has(.menu-search) .menu-cat { scroll-margin-top: 215px; }
  .ohana-itallap .menu-item { gap: 0.5rem; }
  .ohana-itallap .menu-item__dots { min-width: 0.8rem; }
}
body.admin-bar .ohana-itallap .menu-bar { top: calc(var(--ohana-header-offset, 72px) + 32px); }
@media (max-width: 782px) {
  body.admin-bar .ohana-itallap .menu-bar { top: calc(var(--ohana-header-offset, 72px) + 46px); }
}
/* A nem-szerkesztett (üres) itallap admin-üzenete */
.ohana-itallap--empty { padding-block: 2rem; }

/* ---------- Prose (long text pages) ---------- */
.prose { max-width: 72ch; }
.prose p { margin-bottom: 1.3em; }
.prose h2 { margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }

/* ---------- Footer (Theme Builder lábléc gyökere: `site-footer`) ---------- */
.site-footer:not(#site-footer) { max-width: none; }
.site-footer {
  background: var(--navy-900, #0D2240);
  color: rgba(255, 255, 255, 0.78);
  padding: clamp(3rem, 6vw, 5rem) 0 2rem;
  font-size: 0.93rem;
}
.footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1.2fr 1.3fr; } }
.footer-brand img { height: 36px; width: auto; display: block; margin-bottom: 1.2rem; }
.footer-brand p { max-width: 34ch; }
.site-footer h4,
.elementor .site-footer :is(h4, .e-default-h4) {
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.site-footer ul:not([class]) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.site-footer a:not(.btn):not(.social):not([data-social]):not(.socials a) { color: inherit; text-decoration: none; transition: color 0.2s; }
.site-footer a:not(.btn):not(.social):not([data-social]):not(.socials a):hover { color: var(--caramel, #CA9B77); }

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.4rem;
}
/* Lábléc körök: statikus <a><svg/></a>, illetve a.social.social-* / a[data-social] (ikon CSS-ből) */
.site-footer .socials a,
.elementor .socials a,
.socials a,
.socials [data-social],
a.social {
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  color: #fff;
  text-decoration: none;
  transition: background 0.25s, border-color 0.25s, transform 0.25s var(--ohana-ease);
}
.site-footer .socials a:hover,
.elementor .socials a:hover,
.socials a:hover,
.socials [data-social]:hover,
a.social:hover { background: var(--caramel, #CA9B77); border-color: var(--caramel, #CA9B77); color: #fff; transform: translateY(-3px); }
.socials svg { width: 18px; height: 18px; }

/* Körökben a felirat csak képernyőolvasónak marad (font-size:0, span: sr-only) */
.site-footer .socials a,
.elementor .socials a,
.socials a,
a.social { font-size: 0; line-height: 0; letter-spacing: 0; overflow: hidden; white-space: nowrap; }
:is(.socials a, a.social) span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Ikon CSS-ből (::before + mask): a.social.social-<név>, [data-social="<név>"],
   vagy a lábléc osztály nélküli linkjei a href alapján (.socials a[href*="instagram.com"]). */
a.social::before,
[data-social]::before,
.socials a:is([href*="facebook.com"], [href*="instagram.com"], [href*="tiktok.com"], [href*="youtube.com"], [href*="pinterest.com"])::before {
  content: "";
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--ohana-social-icon) center / contain no-repeat;
  mask: var(--ohana-social-icon) center / contain no-repeat;
}
.social-facebook,
[data-social="facebook"],
.socials a[href*="facebook.com"] { --ohana-social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7A10 10 0 0 0 22 12z'/%3E%3C/svg%3E"); }
.social-instagram,
[data-social="instagram"],
.socials a[href*="instagram.com"] { --ohana-social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
.social-tiktok,
[data-social="tiktok"],
.socials a[href*="tiktok.com"] { --ohana-social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M16.5 3c.3 2.3 1.7 3.9 4 4.1v3.3c-1.5 0-2.9-.5-4-1.3v6.3a5.6 5.6 0 1 1-5.6-5.6c.3 0 .6 0 .9.1v3.4a2.3 2.3 0 1 0 1.4 2.1V3h3.3z'/%3E%3C/svg%3E"); }
.social-youtube,
[data-social="youtube"],
.socials a[href*="youtube.com"] { --ohana-social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M23 7.2a3 3 0 0 0-2.1-2.1C19 4.6 12 4.6 12 4.6s-7 0-8.9.5A3 3 0 0 0 1 7.2 31 31 0 0 0 .5 12a31 31 0 0 0 .5 4.8 3 3 0 0 0 2.1 2.1c1.9.5 8.9.5 8.9.5s7 0 8.9-.5a3 3 0 0 0 2.1-2.1c.4-1.6.5-3.2.5-4.8s-.1-3.2-.5-4.8zM9.8 15.1V8.9l6 3.1-6 3.1z'/%3E%3C/svg%3E"); }
.social-pinterest,
[data-social="pinterest"],
.socials a[href*="pinterest.com"] { --ohana-social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a10 10 0 0 0-3.6 19.3c-.1-.8-.2-2 0-2.9l1.2-5s-.3-.6-.3-1.5c0-1.4.8-2.4 1.8-2.4.8 0 1.3.6 1.3 1.4 0 .9-.5 2.1-.8 3.3-.2 1 .5 1.8 1.5 1.8 1.8 0 3.1-1.9 3.1-4.6 0-2.4-1.7-4.1-4.2-4.1-2.9 0-4.5 2.1-4.5 4.4 0 .9.3 1.8.8 2.3.1.1.1.2.1.3l-.3 1.1c0 .2-.2.2-.4.1-1.2-.6-2-2.4-2-3.9 0-3.2 2.3-6.1 6.6-6.1 3.5 0 6.2 2.5 6.2 5.8 0 3.4-2.2 6.2-5.2 6.2-1 0-2-.5-2.3-1.1l-.6 2.4c-.2.9-.8 2-1.2 2.6A10 10 0 1 0 12 2z'/%3E%3C/svg%3E"); }

/* Kapcsolat oldal social kártyái: a.card[data-social] (látható felirattal, 24px caramel ikon) –
   a statikus .social-card megfelelője: ikon balra, jobbra a név + alatta kis szürke sor.
   Az élő Elementor-kártya: `a.card[data-social] > p (név) + p (handle)` – NINCS szöveg-wrapper, és a kártya
   lokálisan flex column + center. Flex sorban a két bekezdés egymás mellé kerülne, ezért GRID:
   1. oszlop az ikon (mindkét sort átfogja, függőlegesen középen), 2. oszlop a szöveg(ek), balra zárva.
   Wrapperes (`span > small`) és „szöveg + <small>” változattal is működik.
   Az ikon ::before az Elementor `.e-con::before` háttér-overlay szabályát is megkapná (position:absolute,
   top/left 0, 100%-os méret → a bal felső sarokba tapadt) – ezért position:static + fix méret.
   !important: az Elementor lokális (`.elementor .e-…`) flex-column/center stílusa ellen. */
[data-social]:not(.socials [data-social]):not(.social) {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  align-items: center !important;
  align-content: center !important;
  justify-content: stretch !important;
  justify-items: start !important;
  column-gap: 0.9rem !important;
  row-gap: 0.1rem !important;
  text-align: left !important;
  padding: 1.1rem 1.3rem !important;
  border-radius: var(--radius-sm, 10px);
  text-decoration: none;
  color: var(--navy, #153252);
  font-weight: 600;
  line-height: 1.35;
  transition: transform 0.3s var(--ohana-ease), box-shadow 0.3s;
}
a.card[data-social] { background: #fff; box-shadow: var(--ohana-shadow); }
[data-social]:not(.socials [data-social]):not(.social)::before {
  content: "" !important;
  position: static !important;
  inset: auto !important;
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  flex: none;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  transform: none !important;
  background: var(--caramel-700, #A9784F);
}
[data-social]:not(.socials [data-social]):not(.social) > * {
  grid-column: 2 !important;
  justify-self: start !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0;
  text-align: left !important;
}
/* egyetlen szöveg-wrapper esetén annak tartalma is balra, egymás alatt */
[data-social]:not(.socials [data-social]):not(.social) > :only-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
}
[data-social]:not(.socials [data-social]):not(.social):hover { color: var(--navy, #153252); transform: translateY(-4px); box-shadow: var(--ohana-shadow-lg); }
[data-social]:not(.socials [data-social]):not(.social) small,
[data-social]:not(.socials [data-social]):not(.social) > :is(p, .e-default-p) + :is(p, .e-default-p) { display: block; font-weight: 400; color: var(--muted, #5F6F80); font-size: 0.8rem; line-height: 1.4; }

.site-footer .form-row { margin-top: 0.4rem; }
.site-footer .input {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.site-footer .input::placeholder { color: rgba(255, 255, 255, 0.45); }
.site-footer .input:focus { background: rgba(255, 255, 255, 0.1); border-color: var(--caramel, #CA9B77); box-shadow: none; }
.site-footer .form-msg.is-ok { color: #8fd3b5; }
.site-footer .form-msg.is-err { color: #f0a3a3; }

.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
}
.hashtags {
  color: var(--caramel, #CA9B77);
  font-size: 0.82rem;
  font-weight: 500;
  word-spacing: 0.3em;
}

/* ---------- Sötét szekciók az Elementor default styles ellen ----------
   Az Elementor `.elementor .e-default-h1…` (0,2,0) navy-ra állítja a címsorokat;
   ezek (0,3,0)+ szabályok a sötét hátterű blokkokban fehérre váltanak. */
.elementor :is(.section-navy, .section--navy, .page-hero, .hero, .banner, .quote-band, .tile, .site-footer) :is(h1, h2, h3, h4, .e-default-h1, .e-default-h2, .e-default-h3, .e-default-h4) { color: #fff; }
/* Biztonsági háló (0,3,0): bekezdések és .lead a sötét, OSZTÁLLYAL jelölt szekciókban (az eyebrow kivétel).
   Az aloldali heróknak nincs osztályuk (navy háttér lokálisan) – ott a lokális fehér szín érvényes,
   mert a téma .lead/.eyebrow szabályai már nem állítanak színt. */
.elementor :is(.section-navy, .section--navy, .page-hero, .hero, .banner, .quote-band, .tile, .site-footer) :is(p, .lead, .e-default-p):where(:not(.eyebrow)) { color: rgba(255, 255, 255, 0.85); }
.elementor .site-footer :is(p, .e-default-p):where(:not(.eyebrow, .lead)) { color: rgba(255, 255, 255, 0.78); }
.elementor .tile :is(p, .e-default-p):where(:not(.eyebrow, .lead)) { color: rgba(255, 255, 255, 0.8); }
.elementor .hero .lead { color: rgba(255, 255, 255, 0.9); }
.elementor .hero .eyebrow { color: #fff; }
.elementor :is(.section-navy, .section--navy, .page-hero) .eyebrow { color: var(--caramel, #CA9B77); }

/* Idézet-sáv: a „ jel és a forrás caramel. Az Elementorban a jel egy osztály nélküli e-paragraph
   (a blockquote-flexbox ELSŐ bekezdése, 3 testvérből), a forrás az UTOLSÓ – a fenti háló fehérítené őket. */
.elementor .quote-band :is(p, .e-default-p):where(:not(.eyebrow)) { color: #fff; }
.quote-band .mark,
.elementor .quote-band .mark,
.elementor .quote-band :is(p, .e-default-p):first-child:nth-last-child(n+3),
.elementor .quote-band :is(p, .e-default-p):last-child:nth-child(n+2) { color: var(--caramel, #CA9B77); }

/* Lábléc alsó sáv: az Elementor-láblécben nincs osztálya (footer.site-footer > .container > [rács, alsó sáv]),
   ezért szerkezeti szelektor: az alsó sáv első bekezdése a hashtag-sor (caramel), a többi 55%-os fehér.
   A statikus / shortcode-os `.footer-bottom` + `.hashtags` és az ohana-header.js által „#”-kal kezdődő
   lábléc-bekezdésre tett `.hashtags` osztály is ide fut. */
.elementor .footer-bottom :is(p, .e-default-p),
.elementor .site-footer > .container > :last-child:not(:first-child) > :is(p, .e-default-p) { color: rgba(255, 255, 255, 0.55); }
.elementor .site-footer :is(p, .e-default-p).hashtags,
.elementor .footer-bottom .hashtags,
.elementor .site-footer > .container > :last-child:not(:first-child) > :is(p, .e-default-p):first-child:not(:only-child) { color: var(--caramel, #CA9B77); }
/* nem-Elementor (shortcode / HTML) változat */
:is(.section--navy, .section-navy) :is(h2, h3) { color: #fff; }

/* ---------- Elementor kiegészítések a globális osztályokhoz ----------
   A korábbi `.elementor :is(p, span, div).eyebrow / .lead` (0,2,1) szabályok törölve: erősebbek voltak az
   elem lokális stílusánál (`.elementor .e-…`, (0,2,0)) → pl. az aloldali / Étlap hero fehér leadje szürke lett.
   Nem is kellenek: az Elementor atomi stílus-sorrendje base → default (`.e-default-p`) → globális osztály
   (`lead`, `eyebrow`) → lokális, azonos (0,2,0) specificitással, így a globális osztály már nyer a default
   styles felett, a lokális stílus pedig mindkettő felett. */
.hero,
.banner,
.tile { isolation: isolate; }
.hero .eyebrow::before { background: var(--caramel, #CA9B77); }

/* ---------- WooCommerce (alapblokkok, tokenekhez igazítva) ---------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wc-block-components-button:not(.is-link),
.wp-block-button.wc-block-components-product-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95em 1.6em;
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--navy, #153252);
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  text-decoration: none;
  transition: transform 0.25s var(--ohana-ease), background 0.25s, color 0.25s, box-shadow 0.25s;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.wc-block-components-button:not(.is-link):hover,
.wp-block-button.wc-block-components-product-button .wp-block-button__link:hover {
  background: var(--navy-700, #1F446E);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(21, 50, 82, 0.25);
}
/* Letiltott gomb (pl. variációválasztás előtt a „Kosárba teszem” – a Woo JS `.disabled` osztályt tesz rá): navy marad,
   halványítva. (0,4,2)/(0,5,2) – a Woo `.woocommerce:where(…) button.button.alt.disabled(:hover)` (0,4,1)/(0,5,1)
   lila (#7f54b3) hátterét írja felül (1.0.2-ben a termékoldalon lila, letiltott gomb látszott). */
:is(body.ohana.woocommerce, body.ohana .woocommerce) :is(a, button, input).button:is(:disabled, .disabled),
:is(body.ohana.woocommerce, body.ohana .woocommerce) :is(a, button, input).button:is(:disabled, .disabled):hover {
  background-color: var(--navy, #153252);
  color: #fff;
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ---------- WooCommerce bolt + kategória-archívum (inc/woocommerce.php) ----------
   Szerkezet: main#content.ohana-shop (NINCS .site-main → a Hello 1140px-es korlátja nem hat rá)
                › [.ohana-shop-intro – teljes szélességű Elementor-sablon / Shop oldal tartalma, csak a /shop/-on]
                › section.section.ohana-shop-grid (fehér, szekció-padding)
                  › div.container.ohana-shop-container (1200px) › [breadcrumb] · fejléc · rendezés · ul.products · lapozó
   A bevezető-sablon „Összes termék” feje fehér, 1.5rem alsó paddinggal zár → a rács-szekció felül
   csak kis paddingot kap, így a kettő folytonos fehér felület. */
body.ohana main.ohana-shop,
body.ohana .site-main.ohana-shop {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}
.ohana-shop-intro { width: 100%; }
.ohana-shop-grid {
  background: var(--white, #FFFFFF);
  padding-block: calc(var(--ohana-section) * 0.6) var(--ohana-section);
}
.ohana-shop--has-intro .ohana-shop-grid { padding-top: 0.5rem; }

:is(.ohana-shop, body.single-product) .woocommerce-breadcrumb {
  margin: 0 0 1.4rem;
  padding: 0;
  font-size: 0.85rem;
  color: var(--muted, #5F6F80);
}
:is(.ohana-shop, body.single-product) .woocommerce-breadcrumb a { color: var(--navy, #153252); text-decoration: none; font-weight: 500; }
:is(.ohana-shop, body.single-product) .woocommerce-breadcrumb a:hover { color: var(--caramel-700, #A9784F); }

/* Kategória: h1 (Archivo) + leírás; a bolt-oldalon a címet a Shop oldal Elementor-heroja adja (rejtve). */
.ohana-shop .woocommerce-products-header {
  max-width: 760px;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  padding: 0;
}
.ohana-shop .woocommerce-products-header__title {
  font-family: var(--font-head, Archivo), system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--navy, #153252);
  margin: 0 0 0.35em;
}
.ohana-shop :is(.term-description, .page-description) {
  font-size: clamp(1.02rem, 1.3vw, 1.15rem);
  line-height: 1.65;
  color: var(--muted, #5F6F80);
}
.ohana-shop :is(.term-description, .page-description) p { margin: 0 0 0.8em; }
.ohana-shop :is(.term-description, .page-description) p:last-child { margin-bottom: 0; }
.ohana-shop .woocommerce-products-header:not(:has(*)) { display: none; }

/* Találatszám + rendezés */
.ohana-shop .woocommerce-result-count {
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
  line-height: 2.6rem;
  color: var(--muted, #5F6F80);
}
.ohana-shop .woocommerce-ordering { margin: 0 0 1.5rem; }
.ohana-shop .woocommerce-ordering select {
  -webkit-appearance: none;
  appearance: none;
  min-height: 2.6rem;
  padding: 0.6em 2.4em 0.6em 1em;
  border: 1.5px solid var(--line, rgba(21, 50, 82, 0.10));
  border-radius: 8px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23153252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.85em center / 14px 14px;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink, #1B2A3B);
  cursor: pointer;
}
.ohana-shop .woocommerce-ordering select:focus { outline: none; border-color: var(--navy, #153252); box-shadow: 0 0 0 4px rgba(21, 50, 82, 0.08); }

/* Rács: 2 oszlop mobilon, 3 tableten, 4 asztalon (a Woo float/width/clearfix elrendezése helyett).
   Ugyanez a rács a termékoldal „Kapcsolódó termékek” / „Ajánljuk még” szekciójában
   (section.related.products / section.up-sells.products – a Woo `columns-4` float-rácsa helyett). */
:is(.ohana-shop, section.related, section.up-sells) ul.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.9rem, 2.4vw, 1.5rem);
  width: 100%;
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
  clear: both;
}
:is(.ohana-shop, section.related, section.up-sells) ul.products::before,
:is(.ohana-shop, section.related, section.up-sells) ul.products::after { content: none !important; display: none !important; }
@media (min-width: 768px) { :is(.ohana-shop, section.related, section.up-sells) ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { :is(.ohana-shop, section.related, section.up-sells) ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* !important: a Woo layout/smallscreen `ul.products[class*=columns-] li.product` (0,3,2) width/margin/float ellen */
:is(.ohana-shop, section.related, section.up-sells) ul.products li.product {
  float: none !important;
  clear: none !important;
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
}

/* Termékkártya (minden Woo loopban): a statikus `.product` kártya – fehér, 18px, árnyék, 1:1 kép */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius, 18px);
  box-shadow: var(--ohana-shadow);
  overflow: hidden;
  padding: 0 0 1.25rem;
  text-align: left;
  transition: transform 0.35s var(--ohana-ease), box-shadow 0.35s var(--ohana-ease);
}
.woocommerce ul.products li.product:hover { transform: translateY(-6px); box-shadow: var(--ohana-shadow-lg); }
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  color: inherit;
  text-decoration: none;
}
.woocommerce ul.products li.product a img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  margin: 0 0 1rem;
  background: var(--sand, #F1EBE2);
  box-shadow: none;
}
.woocommerce ul.products li.product.outofstock a img { opacity: 0.82; }
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-category__title {
  padding: 0 1.25rem;
  margin: 0 0 0.35rem;
  font-family: var(--font-head, Archivo), system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.02rem, 1.25vw, 1.2rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--navy, #153252);
}
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .star-rating { margin-inline: 1.25rem; }
.woocommerce ul.products li.product .price { display: block; margin-bottom: 0; }
/* Az ár („5.700 Ft”, „4.900 Ft – 18.900 Ft”) összegei nem törnek el; ártartomány csak a „–” mentén törhet */
.woocommerce ul.products li.product .price .woocommerce-Price-amount { white-space: nowrap; }
/* „Kosárba teszem” / „Opciók választása” gomb: btn-primary (a .woocommerce a.button szabályból), a kártya
   aljára igazítva, kártyaszélességű (align-self: stretch = 100% a margók nélkül – a `width: 100%` a
   margóval együtt kilógna), hosszú felirat tördelhető → a gomb sosem lóg ki a kártyából. */
.woocommerce ul.products li.product .button {
  align-self: stretch;
  width: auto;
  max-width: none;
  margin: 1rem 1.25rem 0;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}
.woocommerce ul.products li.product .added_to_cart {
  margin: 0.6rem 1.25rem 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy-700, #1F446E);
}
/* Badge-ek: „Elfogyott” (bal felső, navy – inc/woocommerce.php), akciós (jobb felső, caramel) */
.woocommerce ul.products li.product .onsale {
  top: 0.9rem;
  right: 0.9rem;
  left: auto;
  margin: 0;
}
.ohana-soldout {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 3;
  padding: 0.4em 0.85em;
  border-radius: 999px;
  background: var(--navy, #153252);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}
@media (max-width: 767px) {
  .woocommerce ul.products li.product { padding-bottom: 1rem; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products li.product .woocommerce-loop-category__title { padding-inline: 0.9rem; }
  .woocommerce ul.products li.product .price,
  .woocommerce ul.products li.product .star-rating { margin-inline: 0.9rem; }
  .woocommerce ul.products li.product .button {
    margin: 0.8rem 0.9rem 0;
    padding: 0.8em 0.6em;
    font-size: 0.82rem;
  }
  .woocommerce ul.products li.product .added_to_cart { margin-inline: 0.9rem; }
  .ohana-soldout { top: 0.6rem; left: 0.6rem; font-size: 0.66rem; }
  .woocommerce ul.products li.product .onsale { top: 0.6rem; right: 0.6rem; }
}

/* Lapozó: chip-stílus (a statikus `.chip`: navy-100 pirula, navy 600; aktív / hover: navy, fehér).
   (0,3,4)/(0,4,4) – a Woo `.woocommerce nav.woocommerce-pagination ul li a` (0,2,4) keretes/lila stílusa ellen. */
.ohana-shop nav.woocommerce-pagination { text-align: center; }
.woocommerce .ohana-shop nav.woocommerce-pagination ul {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  white-space: normal;
}
.woocommerce .ohana-shop nav.woocommerce-pagination ul li { float: none; display: block; border: 0; overflow: visible; }
.woocommerce .ohana-shop nav.woocommerce-pagination ul li :is(a, span) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.45em 0.95em;
  border-radius: 999px;
  background: var(--navy-100, #E7EDF4);
  color: var(--navy, #153252);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
  transition: background 0.2s, color 0.2s, transform 0.2s var(--ohana-ease);
}
.woocommerce .ohana-shop nav.woocommerce-pagination ul li a:is(:hover, :focus-visible) { background: var(--navy, #153252); color: #fff; transform: translateY(-2px); }
.woocommerce .ohana-shop nav.woocommerce-pagination ul li span.current { background: var(--navy, #153252); color: #fff; }
.woocommerce .ohana-shop nav.woocommerce-pagination ul li span.dots { background: transparent; min-width: 0; padding-inline: 0.2em; }

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.wc-block-components-product-price,
.wc-block-grid__product-price {
  color: var(--caramel-700, #A9784F);
  font-weight: 600;
}
.woocommerce ul.products li.product .price { font-size: 0.95rem; }
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del { color: var(--muted, #5F6F80); opacity: 0.8; }
.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins { text-decoration: none; }
.woocommerce span.onsale {
  min-height: 0;
  min-width: 0;
  padding: 0.4em 0.85em;
  border-radius: 999px;
  background: var(--caramel, #CA9B77);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* A `product` Elementor globális osztály (kártya) ne lógjon rá a single product wrapperére */
.woocommerce div.product.type-product {
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  transform: none;
}

/* ---------- WooCommerce termékoldal (Woo single-product.php, alap wrapper) ----------
   Szerkezet: div#primary.content-area › main#main.site-main
                › nav.woocommerce-breadcrumb · .woocommerce-notices-wrapper
                › div.product.type-product
                    › [span.onsale] · div.woocommerce-product-gallery.images · div.summary.entry-summary
                    › div.woocommerce-tabs · [section.up-sells.products] · section.related.products
   Konténer: a Hello `body:not([class*=elementor-page-]) .site-main` (0,2,1) 500/600/800/1140px-re szűkítene
   (mobilon 10px padding) – helyette a statikus `.container`: min(1200px, 100% − 2×gutter), mint a /shop/ rácsa.
   A body (cream) a tömör fejléc miatt már 72px-es padding-topot kap (body.ohana-header-solid). */
body.ohana.single-product main.site-main {
  width: min(var(--container, 1200px), 100% - 2 * var(--ohana-gutter));
  max-width: none;
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 2.25rem) 0 var(--ohana-section);
}

/* Felső rész: mobilon egymás alatt (a Woo smallscreen ≤768px float:none/width:100%), fölötte 2 oszlopos grid –
   galéria balra (~47%), összefoglaló jobbra; minden más gyerek (fülek, upsell, kapcsolódó) teljes szélességű sor.
   A Woo float/48% elrendezése helyett (a float-ok így nem „szivároghatnak” a kapcsolódó termékek mellé);
   flow-root: ha mégis maradna float, a div.product lezárja. */
.woocommerce div.product.type-product { display: flow-root; }
@media (min-width: 769px) {
  .woocommerce div.product.type-product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }
  .woocommerce div.product.type-product > * { grid-column: 1 / -1; }
  /* (0,4,2) – a Woo layout `.woocommerce div.product div.images|div.summary` (0,2,2) float/48% ellen */
  .woocommerce div.product.type-product > div.images { grid-column: 1; grid-row: 1; }
  .woocommerce div.product.type-product > div.summary { grid-column: 2; grid-row: 1; }
}
.woocommerce div.product.type-product > :is(div.images, div.summary) {
  float: none;
  width: auto;
  max-width: 100%;
  margin: 0;
}
@media (max-width: 768px) {
  .woocommerce div.product.type-product > div.images { margin-bottom: 1.75rem; }
}
.woocommerce div.product.type-product > span.onsale { top: 1rem; left: 1rem; right: auto; }

/* Galéria: lekerekített fő kép (18px, árnyék), alatta 4 oszlopos bélyegkép-rács */
.woocommerce div.product div.images .woocommerce-product-gallery__image {
  border-radius: var(--radius, 18px);
  overflow: hidden;
  background: var(--sand, #F1EBE2);
}
.woocommerce div.product div.images .flex-viewport {
  border-radius: var(--radius, 18px);
  box-shadow: var(--ohana-shadow);
}
.woocommerce div.product div.images ol.flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0 0;
  padding: 0;
}
.woocommerce div.product div.images ol.flex-control-thumbs::before,
.woocommerce div.product div.images ol.flex-control-thumbs::after { content: none; }
.woocommerce div.product div.images ol.flex-control-thumbs li { width: auto; float: none; margin: 0; }
.woocommerce div.product div.images ol.flex-control-thumbs li img {
  border-radius: var(--radius-sm, 10px);
  opacity: 0.55;
  transition: opacity 0.2s;
}
.woocommerce div.product div.images ol.flex-control-thumbs li img:is(.flex-active, :hover) { opacity: 1; }

/* Összefoglaló: név (Archivo, navy), ár (caramel-700, 1.4rem 600), rövid leírás */
.woocommerce div.product .summary .product_title {
  margin: 0 0 0.35em;
  font-family: var(--font-head, Archivo), system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--navy, #153252);
}
/* (0,3,2) – a Woo `.woocommerce:where(…) div.product p.price` (0,2,2) 1.25em / #958e09 ellen */
.woocommerce div.product .summary p.price,
.woocommerce div.product .summary .woocommerce-variation-price .price {
  margin: 0 0 1.25rem;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--caramel-700, #A9784F);
}
.woocommerce div.product .summary .woocommerce-variation-price .price { display: block; margin: 0; font-size: 1.2rem; }
.woocommerce div.product .summary .price .woocommerce-Price-amount { white-space: nowrap; }
.woocommerce div.product .woocommerce-product-details__short-description {
  max-width: 62ch;
  margin: 0 0 1.75rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink, #1B2A3B);
}

/* Variációválasztó: a táblázat blokkokra bontva (címke a select fölött), a select a `.input` stílusa –
   fehér, 1.5px `line` keret, 8px radius, navy nyíl. (0,4,4) – a Woo `form.cart .variations select|td|th` (0,4,3)
   és a Hello reset csíkos táblázat-cellái (0,1,4) ellen. */
.woocommerce div.product form.cart { margin: 0 0 1.75rem; }
.woocommerce div.product form.cart table.variations {
  display: block;
  width: 100%;
  margin: 0 0 1.25rem;
  border: 0;
  font-size: inherit;
  background: none;
}
.woocommerce div.product form.cart table.variations :is(tbody, tr) { display: block; }
.woocommerce div.product form.cart table.variations tr + tr { margin-top: 1rem; }
.woocommerce div.product form.cart table.variations :is(th, td) {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  line-height: 1.4;
  text-align: left;
}
/* td.value: select + a „Törlés” link egy sorban (a rejtett – visibility:hidden – link így nem foglal külön sort) */
.woocommerce div.product form.cart table.variations td.value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
}
.woocommerce div.product form.cart table.variations th.label label {
  display: block;
  margin: 0 0 0.45rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted, #5F6F80);
}
.woocommerce div.product form.cart table.variations select {
  display: block;
  flex: 1 1 240px;
  width: 100%;
  max-width: 420px;
  min-width: 0;
  min-height: 3rem;
  margin: 0;
  padding: 0.75em 2.6em 0.75em 1em;
  border: 1.5px solid var(--line, rgba(21, 50, 82, 0.10));
  border-radius: 8px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23153252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.9em center / 14px 14px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink, #1B2A3B);
  box-shadow: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.woocommerce div.product form.cart table.variations select:focus {
  outline: none;
  border-color: var(--navy, #153252);
  box-shadow: 0 0 0 4px rgba(21, 50, 82, 0.08);
}
.woocommerce div.product form.cart .reset_variations {
  display: inline-block;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted, #5F6F80);
}
.woocommerce div.product form.cart .single_variation_wrap .woocommerce-variation:not(:empty) { margin: 0 0 1rem; }
.woocommerce div.product form.cart .woocommerce-variation-availability p.stock { margin: 0.35rem 0 0; font-size: 0.85rem; }

/* Mennyiség + „Kosárba teszem” egy sorban (egyszerű termék: maga a form.cart; variálható: .woocommerce-variation-add-to-cart).
   A Woo float-jai helyett flex; az egyszerű form clearfix pszeudo-elemei kikapcsolva (különben flex-elemek lennének). */
.woocommerce div.product form.cart:not(.variations_form):not(.grouped_form),
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem;
}
.woocommerce div.product form.cart:not(.variations_form):not(.grouped_form)::before,
.woocommerce div.product form.cart:not(.variations_form):not(.grouped_form)::after { content: none; }
.woocommerce div.product form.cart div.quantity { display: flex; float: none; margin: 0; }
.woocommerce div.product form.cart div.quantity .qty {
  align-self: stretch;
  width: 4.75rem;
  height: auto;
  min-height: 3rem;
  padding: 0 0.5rem;
  border: 1.5px solid var(--line, rgba(21, 50, 82, 0.10));
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy, #153252);
  text-align: center;
}
.woocommerce div.product form.cart div.quantity .qty:focus {
  outline: none;
  border-color: var(--navy, #153252);
  box-shadow: 0 0 0 4px rgba(21, 50, 82, 0.08);
}
/* btn btn-primary: navy, 8px, fehér 600 (a színt a fenti .woocommerce button.button.alt szabály adja) */
.woocommerce div.product form.cart .single_add_to_cart_button.button {
  float: none;
  flex: 0 1 auto;
  min-width: 12rem;
  min-height: 3rem;
  padding: 0.95em 2em;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
}
@media (max-width: 480px) {
  .woocommerce div.product form.cart .single_add_to_cart_button.button { flex: 1 1 auto; min-width: 0; }
}
/* (0,6,2)/(0,7,2): a `.disabled` mellé `[disabled]` attribútum esetén is navy marad (Woo (0,6,1)) */
.woocommerce div.product form.cart .single_add_to_cart_button.button:is(.disabled, :disabled),
.woocommerce div.product form.cart .single_add_to_cart_button.button:is(.disabled, :disabled):hover {
  background-color: var(--navy, #153252);
  color: #fff;
  opacity: 0.45;
  transform: none;
  box-shadow: none;
}

/* Meta: csak a kategória/címke (muted, kicsi). A „Cikkszám: N/A” (variálható terméken SKU nélkül is kiírja a Woo)
   rejtve – a vásárlónak nem információ. */
.woocommerce div.product .product_meta {
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line, rgba(21, 50, 82, 0.10));
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--muted, #5F6F80);
}
.woocommerce div.product .product_meta > span { display: block; }
.woocommerce div.product .product_meta .sku_wrapper { display: none; }
.woocommerce div.product .product_meta a { color: var(--navy, #153252); font-weight: 600; text-decoration: none; }
.woocommerce div.product .product_meta a:hover { color: var(--caramel-700, #A9784F); }

/* Fülek: chip-szerű fülsor (navy-100 pirula, aktív/hover navy), a tartalom max. 72ch, Montserrat.
   `.wc-tabs` +1 osztály: a Woo `ul.tabs li(.active)(::before|::after)` (0,4,3)–(0,5,4) kártyafül-stílusa ellen. */
.woocommerce div.product .woocommerce-tabs {
  clear: both;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line, rgba(21, 50, 82, 0.10));
}
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.75rem;
  padding: 0;
  overflow: visible;
  list-style: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs::after { content: none; display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs :is(li, li.active) {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li::after { content: none; display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li a {
  display: inline-flex;
  align-items: center;
  padding: 0.6em 1.15em;
  border-radius: 999px;
  background: var(--navy-100, #E7EDF4);
  color: var(--navy, #153252);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, transform 0.2s var(--ohana-ease);
}
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li a:hover { background: var(--navy, #153252); color: #fff; transform: translateY(-2px); }
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li.active a { background: var(--navy, #153252); color: #fff; }
.woocommerce div.product .woocommerce-tabs .panel {
  max-width: 72ch;
  margin: 0;
  padding: 0;
  font-family: var(--font-body, Montserrat), system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink, #1B2A3B);
}
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
  margin: 0 0 0.8em;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
}
.woocommerce div.product .woocommerce-tabs .panel p { margin: 0 0 1em; }
.woocommerce div.product .woocommerce-tabs .panel p:last-child { margin-bottom: 0; }
/* „További információk”: a statikus `.specs` mintájára (kis caps címke, navy érték, vékony vonalak) */
.woocommerce div.product table.shop_attributes {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line, rgba(21, 50, 82, 0.10));
  font-size: 0.95rem;
}
.woocommerce div.product table.shop_attributes tr :is(th, td) {
  padding: 0.85rem 0;
  border: 0;
  border-bottom: 1px solid var(--line, rgba(21, 50, 82, 0.10));
  background: none;
  line-height: 1.5;
  vertical-align: middle;
  text-align: left;
}
.woocommerce div.product table.shop_attributes tr th {
  width: 34%;
  padding-right: 1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted, #5F6F80);
}
.woocommerce div.product table.shop_attributes tr td { font-style: normal; font-weight: 500; color: var(--navy, #153252); }
.woocommerce div.product table.shop_attributes td p { margin: 0; padding: 0; }

/* Kapcsolódó termékek / „Ajánljuk még”: a fülek ALATT, teljes szélességű blokk (a grid-oszlopok helyett –
   lásd `.products:not(ul, section)` fent), section-head h2, alatta a /shop/ kártyarácsa (4/3/2 oszlop – fent). */
:is(section.related, section.up-sells).products {
  display: block;
  clear: both;
  width: 100%;
  max-width: none;
  margin: clamp(3rem, 6vw, 5rem) 0 0;
  padding: 0;
}
:is(section.related, section.up-sells).products > h2 {
  max-width: 720px;
  margin: 0 0 2rem;
  font-family: var(--font-head, Archivo), system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--navy, #153252);
}
:is(section.related, section.up-sells).products ul.products { margin-bottom: 0; }

/* Értesítések (pl. „… a kosárba került”): fehér kártya a cream háttéren */
body.ohana .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
  border-radius: var(--radius-sm, 10px);
  background: #fff;
  box-shadow: var(--ohana-shadow);
}
.woocommerce form .form-row :is(input.input-text, textarea, select),
.woocommerce-page form .form-row :is(input.input-text, textarea, select) {
  padding: 0.85em 1em;
  border: 1.5px solid var(--line, rgba(21, 50, 82, 0.10));
  border-radius: 8px;
  background: #fff;
  color: var(--ink, #1B2A3B);
}
.woocommerce form .form-row :is(input.input-text, textarea, select):focus {
  outline: none;
  border-color: var(--navy, #153252);
  box-shadow: 0 0 0 4px rgba(21, 50, 82, 0.08);
}
.woocommerce-message,
.woocommerce-info { border-top-color: var(--caramel, #CA9B77); }
.woocommerce-message::before,
.woocommerce-info::before { color: var(--caramel-700, #A9784F); }
.woocommerce-error { border-top-color: #b23b3b; }

/* ---------- Reveal on scroll ----------
   Csak ha az ohana-header.js betette a .js osztályt a <html>-re; Elementorban
   az interactions adja az animációt, ott ez no-op. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ohana-ease), transform 0.75s var(--ohana-ease);
  transition-delay: var(--d, 0s);
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero__bg img { animation: none; }
  html { scroll-behavior: auto; }
}