/* ==========================================================================
   MODIVIAM — SÖTÉT ÚJRATERVEZÉS
   --------------------------------------------------------------------------
   Ez a réteg tölt be UTOLSÓKÉNT, és ez az irányadó.

   Feladata: a meglévő Elementor tartalmat (szövegek, szekciósorrend, képek
   változatlanul) prémium, sötét megjelenésbe fordítani. Ehhez az Elementor
   világos hátterét és sötét szövegszíneit felül kell írni — ezért van sok
   !important. Ez tudatos: az Elementor elem-szintű szabályokat ír ki
   (`.elementor-element-XXXX {...}`), amit másképp nem lehet legyőzni.

   Amit NEM csinál: nem nyúl a markuphoz, nem töröl tartalmat, nem ír át
   Woo sablont. Kikapcsolva minden visszaáll.
   ========================================================================== */

:root {
  /* A fekete elmozdítva SÖTÉTKÉK irányba: nem szürkés semleges, hanem
     éjkék alap. Ettől melegebb és márkásabb a felület, és jobban összeáll
     a navy ládikával meg a bársonnyal. */
  --mv-black:      #070B14;   /* a lap alapja — éjkék */
  --mv-black-2:    #0A101C;   /* váltakozó sáv */
  --mv-black-3:    #0F1726;   /* emelt felület, kártya */
  --mv-line:       rgba(214, 205, 190, 0.13);
  --mv-line-soft:  rgba(214, 205, 190, 0.07);
  /* KONTRASZTPADLÓ: #08090B alapon egyik szín sem mehet 4.5:1 alá.
     A korábbi #7C776F 4.48-at adott — a lábléc menüje emiatt volt olvashatatlan.
     A mostani értékek: text ~15:1, soft ~11:1, mute ~6.4:1. */
  --mv-text:       #F0EBE2;   /* fő szöveg sötéten */
  --mv-text-soft:  #C4BEB3;   /* másodlagos */
  --mv-text-mute:  #9A948A;   /* meta — ez a legalsó megengedett */
  --mv-gold:       #C6A97C;
  --mv-gold-soft:  #8A7757;

  /* ------------------------------------------------------------------------
     A VILÁGOS MÓDÚ TOKENEK ÁTFORDÍTÁSA — ez öli meg a hibaosztály gyökerét.

     A tokens.css még a világos irányhoz készült: --mv-ink = #1A1F24. Minden
     szabály, ami ezt használja (strong/b, figcaption, th, label, blockquote,
     .mv-small…), sötét szöveget adott fekete háttérre. A félkövér szövegek
     1.2:1 kontraszttal gyakorlatilag láthatatlanok voltak.

     Ahelyett hogy egyesével foltoznánk a szabályokat, magukat a tokeneket
     fordítjuk át. Így bármelyik régi szabály szivárog be a jövőben, eleve
     olvasható értéket kap.
     --------------------------------------------------------------------- */
  --mv-ink:         #F0EBE2;
  --mv-ink-soft:    #C4BEB3;
  --mv-ink-mute:    #9A948A;
  --mv-on-dark:     #F0EBE2;
  --mv-on-dark-soft:#C4BEB3;
  --mv-ivory:       #F0EBE2;
  --mv-noir:        #08090B;
  --mv-rule:        rgba(214, 205, 190, 0.13);
  --mv-rule-strong: rgba(214, 205, 190, 0.26);
  --mv-champagne:   #C6A97C;
  --mv-champagne-dk:#C6A97C;   /* sötéten a sötét arany nem olvasható */
}

/* A <strong> NEM lesz vastagabb — csak világosabb. Az oldal törzsszövegének
   nagy része <strong>-ba van csomagolva; 600-as súllyal az egész szövegtest
   félkövér talpasként jelent meg, ami esetlen és nehézkes hatást keltett.
   Kiemelés = fényerő és betűköz, nem vastagság. */
body.mv-theme strong,
body.mv-theme b {
  color: var(--mv-text) !important;
  font-weight: 300 !important;
}

/* ==========================================================================
   0. BETŰRENDSZER ÉS SKÁLA — teljes csere (2026-08-25)
   --------------------------------------------------------------------------
   Két betű, világos szereposztással. A korábbi négy talpas betű egymás mellett
   nem hierarchia volt, hanem zaj.

     Cormorant Garamond  — a márka hangja: minden címsor és a törzsszöveg
     Jost                — minden funkcionális: menü, gomb, ár, címke, meta
     Cinzel              — KIZÁRÓLAG apró verzál szemöldöksor / szómárka

   A skála drámaibb, mint korábban: a prémium hatás egyik fele a méretugrás
   a nagy címsor és az apró verzál között.
   ========================================================================== */

:root {
  --mv-font-display: "Forum", "Cormorant Garamond", Georgia, serif;
  --mv-font-heading: "Forum", "Cormorant Garamond", Georgia, serif;
  --mv-font-sub:     "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --mv-font-body:    "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --mv-font-ui:      "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --mv-font-caps:    "Cinzel", "Forum", Georgia, serif;

  /* Nagy címsorok, apró és tág törzsszöveg — a kontraszt a méretben van,
     nem a vastagságban. */
  /* Visszafogottabb skála: a címsorok egy sorba férjenek, és ne kiabáljanak.
     A hierarchiát a betűköz és a levegő is viszi, nem csak a méret. */
  --mv-fs-hero:  clamp(2.5rem, 1.4rem + 4.4vw, 5.25rem);
  --mv-fs-h1:    clamp(2rem, 1.3rem + 2.9vw, 3.75rem);
  --mv-fs-h2:    clamp(1.75rem, 1.25rem + 2.1vw, 3rem);
  --mv-fs-h3:    clamp(1.375rem, 1.1rem + 1.3vw, 2.125rem);
  --mv-fs-h4:    clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
  --mv-fs-body:  clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --mv-fs-lead:  clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --mv-fs-ui:    0.75rem;
  --mv-fs-micro: 0.6875rem;

  /* Egységes mozgás — MINDEN hover ezt használja */
  --mv-t:        420ms;
  --mv-t-slow:   760ms;
  --mv-e:        cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Címsorok -------------------------------------------------------------
   Könnyű vastagság (300) nagy méretben: ettől lesz elegáns és nem tömbszerű.
   A Cormorant erős kontrasztja nagy méretben mutat igazán.                  */

body.mv-theme h1, body.mv-theme h2, body.mv-theme h3,
body.mv-theme h4, body.mv-theme h5, body.mv-theme h6,
body.mv-theme .elementor-heading-title,
body.mv-theme .product_title,
body.mv-theme .woocommerce-loop-product__title {
  font-family: var(--mv-font-display) !important;
  /* A Forum egyetlen vágattal létezik (400), és eleve vékony vonalvezetésű.
     Bármi más érték faux-bold vagy faux-light lenne — az rontja el. */
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--mv-text) !important;
}

/* A címsorok EGY SORBAN maradnak. A `text-wrap: balance` korábban épp
   ellenkezőleg, kiegyensúlyozott KÉT sorra tördelte őket.
   Csak asztali méretben kényszerítjük — mobilon a tördelés kell, különben
   kilógna a képernyőről. */
@media (min-width: 900px) {
  body.mv-theme h1, body.mv-theme h2, body.mv-theme h3,
  body.mv-theme .elementor-heading-title,
  body.mv-theme .product_title {
    white-space: nowrap;
  }
}

body.mv-theme h1, body.mv-theme .elementor-widget-heading h1 .elementor-heading-title {
  font-size: var(--mv-fs-h1);
  line-height: 1.02 !important;
  letter-spacing: 0.005em !important;
}

body.mv-theme h2, body.mv-theme .elementor-widget-heading h2 .elementor-heading-title {
  font-size: var(--mv-fs-h2);
  line-height: 1.08 !important;
  letter-spacing: 0.005em !important;
}

body.mv-theme h3, body.mv-theme .elementor-widget-heading h3 .elementor-heading-title {
  font-size: var(--mv-fs-h3);
  line-height: 1.16 !important;
  letter-spacing: 0.008em !important;
}

body.mv-theme h4, body.mv-theme h5, body.mv-theme h6 {
  font-size: var(--mv-fs-h4);
  line-height: 1.28 !important;
  letter-spacing: 0.01em !important;
}

/* --- Törzsszöveg ---------------------------------------------------------
   A Cormorant kicsiben vékony, ezért 400-as vastagság és nagyobb alapméret
   kell hozzá — enélkül olvashatatlan lenne feketén.                        */

body.mv-theme,
body.mv-theme p,
body.mv-theme li,
body.mv-theme .elementor-widget-text-editor,
body.mv-theme .elementor-widget-text-editor p,
body.mv-theme .elementor-icon-list-text {
  font-family: var(--mv-font-body) !important;
  font-size: var(--mv-fs-body);
  font-weight: 300 !important;
  line-height: 1.85 !important;
  letter-spacing: 0.045em;
}

/* --- Funkcionális réteg: Jost, verzál, tág betűköz ----------------------- */

body.mv-theme .elementor-nav-menu a,
body.mv-theme .elementor-button,
body.mv-theme button,
body.mv-theme input,
body.mv-theme select,
body.mv-theme textarea,
body.mv-theme label,
body.mv-theme .price,
body.mv-theme .woocommerce-breadcrumb,
body.mv-theme .product_meta,
body.mv-theme .woocommerce-result-count,
body.mv-theme .elementor-menu-cart__toggle {
  font-family: var(--mv-font-ui) !important;
}

body.mv-theme .elementor-nav-menu a,
body.mv-theme .elementor-button,
body.mv-theme button:not(.swiper-button-next):not(.swiper-button-prev),
body.mv-theme label {
  font-size: var(--mv-fs-ui) !important;
  font-weight: 300 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
}

/* ==========================================================================
   MÁRKAJEL ÉS KÉTSZÓLAMÚ CÍMSOR
   --------------------------------------------------------------------------
   Ahol a címsorban szerepel a „Modiviam" szó, ott a szó helyére a logó kerül,
   nagyban — a maradék pedig arany dőltre vált. Ez a kétszólamú tördelés töri
   meg a sablonos, egyhangú címsort.
   ========================================================================== */

/* A márkajel EGY SORBAN áll a kiemelt szóval, nem fölötte. Így a címsor
   egyetlen sor marad, és a logó sem uralja el a szekciót. */
body.mv-theme .mv-has-brandmark {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.34em;
  white-space: nowrap;
  line-height: 1 !important;
}

/* Középre zárt jeleneteknél a lockup is középre kerül. */
body.mv-theme .mv-scene--center .mv-has-brandmark,
body.mv-theme .mv-cinema--center .mv-has-brandmark { align-items: center; }
body.mv-theme .mv-scene--right .mv-has-brandmark { align-items: flex-end; }

body.mv-theme .mv-brandmark {
  display: block;
  /* A méret a címsorhoz kötött, nem képpontban rögzített — így minden
     szinten arányos marad. */
  /* A kép LEVÁGOTT: pontosan a tintáig ér, nincs benne üres perem. Ezért a
     megadott magasság a tényleges jel magassága, és a `center` illesztés
     valóban a középvonalakat hozza egymás mellé. */
  height: 1.5em;
  width: auto;
  flex: 0 0 auto;
  /* A kézírásos logó sötét tintás PNG — feketén világosra fordítjuk. */
  filter: brightness(0) invert(1) opacity(0.96);
  margin: 0;
  position: relative;
  /* A kézírás alsó hurkai miatt a jel optikai közepe kicsit a mértani
     közép fölött van; ez a hajszálnyi eltolás hozza egy vonalba a szóval. */
  top: 0.06em;
}

/* Logó nélküli tartalék: a márkanév kis verzálban */
body.mv-theme .mv-brandword {
  font-family: var(--mv-font-caps) !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.42em;
}

/* --- Arany dőlt kiemelés --------------------------------------------------
   A Forumnak nincs dőlt vágata, ezért a kiemelés Cormorant Garamond dőltben
   fut — ugyanabból a klasszikus családból, de más hangon.                   */

body.mv-theme .mv-accent {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 300 !important;
  color: var(--mv-gold) !important;
  letter-spacing: 0.01em;
  /* Halkabb, mint a roman rész: a kiemelés a színből és a dőltből jön,
     nem a méretből. A logó melletti aránypárja ez az érték. */
  font-size: 0.66em;
}

/* ==========================================================================
   SZEKCIÓK SZÖVEGEINEK MEGJELENÉSE
   Halk, lassú felúszás. A rejtést KIZÁRÓLAG a `.mv-js` kapcsolja be, amit a
   JS tesz ki — hibás vagy be nem töltött JS esetén minden látszik.
   ========================================================================== */

.mv-js body.mv-theme .mv-soft,
html.mv-js body.mv-theme .mv-soft {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1100ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--mv-soft-delay, 0ms);
  will-change: opacity, transform;
}

html.mv-js body.mv-theme .mv-soft.is-on {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.mv-js body.mv-theme .mv-soft {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- Szemöldöksor: itt és csak itt van Cinzel ---------------------------- */

body.mv-theme .mv-eyebrow {
  font-family: var(--mv-font-caps) !important;
  font-size: var(--mv-fs-micro) !important;
  font-weight: 500 !important;
  letter-spacing: 0.4em !important;
  text-transform: uppercase !important;
  color: var(--mv-gold) !important;
}

/* ==========================================================================
   1. A LAP ALAPJA
   ========================================================================== */

html,
body.mv-theme {
  background-color: var(--mv-black) !important;
  color: var(--mv-text);
}

body.mv-theme .site-main,
body.mv-theme #content,
body.mv-theme .elementor,
body.mv-theme .page-content {
  background-color: transparent !important;
}

/* Minden Elementor konténer hátterét leszedjük, hogy a fekete alap
   mindenhol átüssön. A szekció-ritmust mi adjuk vissza lentebb. */
body.mv-theme .elementor:not(.elementor-location-header) > .e-con,
body.mv-theme .elementor:not(.elementor-location-header) .e-con,
body.mv-theme .elementor-widget-container,
body.mv-theme .elementor-widget-wrap {
  background-color: transparent !important;
}

/* Váltakozó sávok — a ritmus nem paddingból jön, hanem árnyalatból.
   Csak a felső szintű, tartalmi konténerekre. */
/* A váltakozó sáv CSAK a sötét oldalakon értelmes. A világos termékoldalon
   ez húzta be a sötét csíkot a tartalom alá. */
body.mv-theme:not(.single-product) .elementor:not(.elementor-location-header):not(.elementor-location-footer) > .e-con.e-parent:nth-of-type(even) {
  background-color: var(--mv-black-2) !important;
}

/* ==========================================================================
   2. FEJLÉC — a szatén fotó eltűnik
   A régi fejléc egy kék szatén képernyőfotót használt háttérnek. Ez a
   legfeltűnőbb amatőr elem az oldalon. Helyette: majdnem fekete sáv,
   alul egyetlen arany hajszálvonallal.
   ========================================================================== */

/* CSAK a legkülső fejléc-konténer kap hátteret és vonalat.
   Korábban `.elementor-location-header .e-con` szerepelt itt, ami a fejlécen
   BELÜLI kis konténerekre is ráült — így a kosár köré látható fekete doboz
   került. Ugyanaz a hiba, mint a szekció-paddingnál: túl tág szelektor. */
body.mv-theme .modiviam-header {
  background-image: none !important;
  background-color: rgba(8, 9, 11, 0.72) !important;
  backdrop-filter: saturate(130%) blur(16px);
  -webkit-backdrop-filter: saturate(130%) blur(16px);
  border-bottom: 1px solid var(--mv-line-soft);
  box-shadow: none !important;
}

/* A fejlécen belüli összes többi konténer és widget legyen teljesen átlátszó,
   keret és árnyék nélkül — ne keletkezzenek dobozok. */
body.mv-theme .modiviam-header .e-con,
body.mv-theme .modiviam-header .e-con-inner,
body.mv-theme .modiviam-header .elementor-element,
body.mv-theme .modiviam-header .elementor-widget,
body.mv-theme .modiviam-header .elementor-widget-container,
body.mv-theme .modiviam-header .elementor-menu-cart__wrapper,
body.mv-theme .modiviam-header .elementor-menu-cart__toggle,
body.mv-theme .modiviam-header .elementor-menu-cart__toggle .elementor-button,
body.mv-theme .modiviam-header .elementor-widget-woocommerce-menu-cart,
body.mv-theme .elementor-location-header .elementor-menu-cart__toggle,
body.mv-theme .elementor-location-header .elementor-menu-cart__container {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.mv-scrolled .modiviam-header {
  background-color: rgba(8, 9, 11, 0.94) !important;
  border-bottom-color: var(--mv-line);
}

/* Menü */
body.mv-theme .elementor-location-header .elementor-nav-menu a {
  color: var(--mv-text-soft) !important;
  font-family: var(--mv-font-sub) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
}

body.mv-theme .elementor-location-header .elementor-nav-menu a:hover,
body.mv-theme .elementor-location-header .elementor-nav-menu .current-menu-item > a {
  color: var(--mv-text) !important;
}

/* A menü nyilai és almenük */
body.mv-theme .elementor-location-header .sub-arrow svg,
body.mv-theme .elementor-location-header .elementor-menu-toggle {
  color: var(--mv-text-soft) !important;
  fill: var(--mv-text-soft) !important;
}

/* ---- LEGÖRDÜLŐ MENÜ -------------------------------------------------------
   Két hiba volt itt:
   1. Az `a::after` arany aláhúzásom a legördülő elemekre is ráült, és mivel
      azok `.elementor-item-anchor` osztályt kapnak, a szabály állandóan
      100% szélesre húzta — ezek voltak a kilógó csíkok. A másik legördülőn
      azért nem látszottak, mert ott nincsenek horgony-linkek.
   2. Az Elementor saját hover-stílusa VILÁGOS hátteret adott az elemnek,
      a betű viszont világos maradt → az első pont eltűnt.
   Mindkettőt itt zárjuk le.                                                */

body.mv-theme .elementor-nav-menu--dropdown,
body.mv-theme .elementor-nav-menu__container.elementor-nav-menu--dropdown,
body.mv-theme .elementor-location-header .sub-menu {
  background-color: rgba(8, 9, 11, 0.98) !important;
  border: 1px solid var(--mv-line-soft) !important;
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9);
  padding: 0.5rem 0 !important;
}

/* 1. Semmilyen aláhúzás a legördülőn belül. */
body.mv-theme .elementor-nav-menu--dropdown a::after,
body.mv-theme .elementor-location-header .sub-menu a::after,
body.mv-theme .elementor-sub-item::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
}

/* 2. Egységes, sötét hover — soha nem világos háttér. */
body.mv-theme .elementor-nav-menu--dropdown a,
body.mv-theme .elementor-location-header .sub-menu a,
body.mv-theme .elementor-sub-item {
  background-color: transparent !important;
  color: var(--mv-text-soft) !important;
  font-family: var(--mv-font-ui) !important;
  font-size: var(--mv-fs-micro) !important;
  font-weight: 300 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding: 0.95em 1.6em !important;
  border: 0 !important;
  transition: color var(--mv-t) var(--mv-e),
              background-color var(--mv-t) var(--mv-e) !important;
}

body.mv-theme .elementor-nav-menu--dropdown a:hover,
body.mv-theme .elementor-nav-menu--dropdown a:focus,
body.mv-theme .elementor-nav-menu--dropdown a.elementor-item-active,
body.mv-theme .elementor-location-header .sub-menu a:hover,
body.mv-theme .elementor-sub-item:hover,
body.mv-theme .elementor-sub-item.highlighted {
  background-color: rgba(198, 169, 124, 0.10) !important;
  color: var(--mv-gold) !important;
}

/* A logó (kézírásos signature PNG) sötét tintával készült — feketén nem
   látszana. Világosra fordítjuk, a rajzolat megmarad. */
body.mv-theme .elementor-location-header .elementor-widget-theme-site-logo img,
body.mv-theme .elementor-location-header .custom-logo {
  filter: brightness(0) invert(1) opacity(0.95);
  max-height: 64px !important;
  width: auto;
  transition: max-height var(--mv-t) var(--mv-e);
}

body.mv-scrolled .elementor-location-header .elementor-widget-theme-site-logo img,
body.mv-scrolled .elementor-location-header .custom-logo {
  max-height: 46px !important;
}

/* A fejléc kapjon valódi jelenlétet. Korábban 87px volt, ami egy prémium
   márkánál szűkös — a szómárka nem kapott levegőt. */
body.mv-theme .modiviam-header {
  --mv-hdr-pad: 1.65rem;
  padding-block: var(--mv-hdr-pad) !important;
}

body.mv-scrolled .modiviam-header {
  --mv-hdr-pad: 0.95rem;
}

/* ==========================================================================
   FEJLÉC — közös vonal és egységes hover
   --------------------------------------------------------------------------
   A widgetek korábban 47 és 66 képpont között szórtak függőlegesen: a menü,
   a logó, a kosár, a Klub és a Webshop gomb mind más magasságban ült. Itt
   egyetlen közös középvonalra állítjuk mindet.
   ========================================================================== */

/* A belső konténer NEM lehet pozicionált: különben az lenne a logó
   viszonyítási pontja, és a saját paddingja miatt a jel elcsúszna. */
body.mv-theme .modiviam-header .e-con-inner {
  position: static !important;
  align-items: center !important;
  gap: clamp(0.75rem, 1.6vw, 2rem);
}

/* Minden fejléc-widget ugyanarra a vonalra, azonos magasságú kattintófelülettel. */
body.mv-theme .modiviam-header .elementor-widget {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

body.mv-theme .modiviam-header .elementor-widget-container {
  display: flex;
  align-items: center;
}

/* --- Egységes hover-felület ------------------------------------------------
   A menüpont, a kosár, a Klub és a Webshop gomb UGYANAZT a hovert kapja:
   arany kitöltés söpör be balról, a tartalom feketére vált. Azonos magasság,
   azonos belső térköz — így a vonalak tartanak.                             */

/* A MENÜPONTOKRA nem teszünk saját belső térközt.
   A menü listája „stretch" módban pontosan kitölti a widgete szélességét;
   minden hozzáadott padding túlnyújtotta (605px a 572-es dobozban), ezért
   csúszott rá a Kapcsolat a logóra, illetve tört két sorba. A hover a link
   saját dobozán fut — szűkebb, de pontosan illeszkedik. */
body.mv-theme .modiviam-header .elementor-nav-menu > li > a,
body.mv-theme .modiviam-header .elementor-menu-cart__toggle .elementor-button,
body.mv-theme .modiviam-header .elementor-widget-button .elementor-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 0 !important;
  white-space: nowrap !important;
  transition: color 420ms var(--mv-e) !important;
}

/* Azonos magasságú kattintófelület a jobb oldali elemeknél — ezek nem
   „stretch" módúak, itt biztonságos a saját méret. */
body.mv-theme .modiviam-header .elementor-menu-cart__toggle .elementor-button,
body.mv-theme .modiviam-header .elementor-widget-button .elementor-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 2.6rem !important;
  line-height: 1 !important;
}

body.mv-theme .modiviam-header .elementor-menu-cart__toggle .elementor-button {
  padding: 0 0.85rem !important;
}

/* A hover-téglalap legyen valódi felület: térköz a szöveg körül, nem 0px.
   Ezt korábban azért nem lehetett megtenni, mert a logó a sorban ült és a
   menü kifutott a helyéből. Most a logó abszolút pozíciójú, kikerült a
   sorból — a menü widgetje szabadon nőhet, van hova. */
body.mv-theme .modiviam-header .elementor-nav-menu > li > a {
  font-size: 0.68rem !important;
  letter-spacing: 0.15em !important;
  /* Mérve: a négy menüpont 0.8rem oldalpaddinggal 633 képpontot igényelt,
     miközben 603 állt rendelkezésre — ezért tört két sorba. 0.7rem padding
     és szűkebb betűköz mellett 620 alá jön, a keret pedig 627-re bővült. */
  padding: 0.95rem 0.7rem !important;
  letter-spacing: 0.13em !important;
  height: auto !important;
  line-height: 1 !important;
}

/* A menü nem törhet két sorba. Ha valaha kifutna, inkább a betűköz szűküljön. */
body.mv-theme .modiviam-header .elementor-nav-menu--main {
  flex-wrap: nowrap !important;
}

/* A menü widgete felveszi a helyet, DE megáll a középre tett logó előtt.
   A logó abszolút pozíciójú, tehát nem tolja el a menüt — ha nem korlátoznánk,
   a „Kapcsolat" alátaposna. A tartalék a logó fél szélessége plusz levegő.

   CSAK ASZTALI NÉZETBEN. Mobilon ugyanez a szabály eltüntette a hamburgert:
   a `min-width: 0` + `flex: 1 1 auto` páros ott nullára engedte zsugorodni a
   menü widgetét — mérve 0 képpont széles, benne a hamburger 13×38-as dobozzal
   és 0 képpont széles ikonnal. A korlátozás oka (a középre húzott abszolút
   logó) amúgy is csak asztali nézetben áll fenn. */
@media (min-width: 1025px) {
  body.mv-theme .modiviam-header .elementor-widget-nav-menu {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(50% - 5.5rem) !important;
  }
}

/* 1025–1365 KÉPPONT: HAMBURGER. Itt a vízszintes menü a legszűkebb térközzel
   sem fér el — mérve 1100 képpontnál a négy menüpont 452 képpontot kért egy
   422 képpontos helyre, mert a jobb oldali csoport (kosár, klub, Webshop gomb)
   256, a logó további 115 képpontot foglal. A hiányzó ~30 képpontot nem lehet
   úgy kigazdálkodni, hogy a menü ne érjen a középre húzott logó alá, ezért
   ebben a sávban a hamburgerre váltunk.

   A widget hamburger-töréspontja a sablonban „tablet" (1024 képpont); ezt
   hozzuk előre 1365-ig. Két buktatóval:
     1. a widget doboza `stretch` beállítású, ezért a benne lévő lenyíló menü
        881 képpont szélesre feszítette és szétcsúsztatta a fejlécet — a
        lenyílót kivesszük a folyamból (`position: absolute`), így a doboz
        már csak a hamburgert fogja;
     2. a menü widgete `flex: 1 1 auto`, ami továbbra is felvenné a helyet —
        itt `0 0 auto` kell.
   Mérve 1100, 1200 és 1280 képpontnál — utóbbinál a vízszintes menü még mindig két sorba tört: 97 képpontos fejléc, átfedés nélkül. */
@media (min-width: 1025px) and (max-width: 1365px) {
  body.mv-theme .elementor-nav-menu--dropdown-tablet .elementor-menu-toggle {
    display: flex !important;
  }
  body.mv-theme .elementor-nav-menu--dropdown-tablet .elementor-nav-menu--main {
    display: none !important;
  }
  body.mv-theme .modiviam-header .elementor-widget-nav-menu {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  body.mv-theme .modiviam-header .elementor-nav-menu__container.elementor-nav-menu--dropdown {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    width: 100% !important;
  }
}

/* LAPTOPMÉRETEK. A teljes térköz csak széles képernyőn fér el. Mérve:
   1366×768-nál a négy menüpont 563 képpontot kért egy 547 képpontosban,
   1280-nál 515-öt egy 507-esben — mindkettőnél a „Kapcsolat" csúszott a
   második sorba. A szűk keresztmetszet nem a `max-width`, hanem a jobb
   oldali csoport (kosár, klub, webshop gomb) által meghagyott hely, ezért
   itt a menüpontok saját térközét szűkítjük. A szűkítés így is bőven a
   kattintható méret fölött marad, és 1460 képpont fölött vissza is áll. */
@media (min-width: 1025px) and (max-width: 1460px) {
  body.mv-theme .modiviam-header .elementor-nav-menu > li > a {
    padding: 0.9rem 0.35rem !important;
    letter-spacing: 0.09em !important;
  }
}

body.mv-theme .modiviam-header .elementor-nav-menu--main {
  justify-content: flex-start !important;
}

/* A Webshop gomb megtartja a keretét — ő a fő cselekvés. */
body.mv-theme .modiviam-header .elementor-widget-button .elementor-button {
  border: 1px solid var(--mv-line) !important;
  padding: 0 1.9rem !important;
}

/* Az arany besöprés HÁTTÉRKÉPPEL, nem pszeudoelemmel.
   A `::before` + `z-index: -1` megoldás a menüpontoknál nem jelent meg (az
   Elementor saját pszeudoelemei és a rétegsorrend miatt), ezért a hover csak
   fekete betűt adott arany alap nélkül — olvashatatlanul. A növekvő
   háttérkép ugyanazt a mozgást adja, de nincs rétegsorrend-kockázat. */
body.mv-theme .modiviam-header .elementor-nav-menu > li > a,
body.mv-theme .modiviam-header .elementor-menu-cart__toggle .elementor-button,
body.mv-theme .modiviam-header .elementor-widget-button .elementor-button {
  background-image: linear-gradient(var(--mv-gold), var(--mv-gold)) !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: 0% 100% !important;
  background-color: transparent !important;
  transition: background-size 420ms var(--mv-e), color 420ms var(--mv-e),
              border-color 420ms var(--mv-e) !important;
}

body.mv-theme .modiviam-header .elementor-nav-menu > li > a:hover,
body.mv-theme .modiviam-header .elementor-menu-cart__toggle .elementor-button:hover,
body.mv-theme .modiviam-header .elementor-widget-button .elementor-button:hover {
  color: var(--mv-black) !important;
  border-color: var(--mv-gold) !important;
}

body.mv-theme .modiviam-header .elementor-nav-menu > li > a:hover,
body.mv-theme .modiviam-header .elementor-menu-cart__toggle .elementor-button:hover,
body.mv-theme .modiviam-header .elementor-widget-button .elementor-button:hover {
  background-size: 100% 100% !important;
}

/* MINDEN MENÜPONT UGYANOLYAN SZÍNŰ.
   Se aktuális-oldal kiemelés, se meglátogatott-link színezés — a menüsor
   korábban félig fehér, félig arany volt, ami hibának látszott. */
body.mv-theme .modiviam-header .elementor-nav-menu > li > a,
body.mv-theme .modiviam-header .elementor-nav-menu > li > a:visited,
body.mv-theme .modiviam-header .elementor-nav-menu > li.current-menu-item > a,
body.mv-theme .modiviam-header .elementor-nav-menu > li.current-menu-ancestor > a,
body.mv-theme .modiviam-header .elementor-nav-menu > li.current_page_item > a {
  color: var(--mv-text-soft) !important;
}

body.mv-theme .modiviam-header .elementor-nav-menu > li > a:hover,
body.mv-theme .modiviam-header .elementor-nav-menu > li.current-menu-item > a:hover,
body.mv-theme .modiviam-header .elementor-nav-menu > li.current-menu-ancestor > a:hover {
  color: var(--mv-black) !important;
}

/* A kosár ikonja és számlálója is feketére vált a besöprésen. */
body.mv-theme .modiviam-header .elementor-menu-cart__toggle .elementor-button:hover i,
body.mv-theme .modiviam-header .elementor-menu-cart__toggle .elementor-button:hover svg {
  color: var(--mv-black) !important;
  fill: var(--mv-black) !important;
}

/* A korábbi arany aláhúzás a fejlécben megszűnik — helyette a besöprés van. */
body.mv-theme .modiviam-header .elementor-nav-menu > li > a::after {
  content: none !important;
}

/* --- A Klub jel: eddig semmilyen visszajelzést nem adott ------------------- */

body.mv-theme .modiviam-header .elementor-widget-image a,
body.mv-theme .modiviam-header .elementor-widget-image img {
  display: block;
  transition: opacity 420ms var(--mv-e), filter 420ms var(--mv-e);
}

body.mv-theme .modiviam-header .elementor-widget-image:not(.elementor-widget-theme-site-logo) img {
  opacity: 0.72;
}

body.mv-theme .modiviam-header .elementor-widget-image:not(.elementor-widget-theme-site-logo):hover img {
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(198, 169, 124, 0.55));
}

/* --- Logó: valódi középre, nagyítás nélkül ---------------------------------
   A fejléc `space-between` elrendezésű, és a két oldalsó csoport nem
   egyforma széles (572 vs 539 képpont), ezért a logó soha nem volt pontosan
   középen. Abszolút pozícióval a viewport közepére kerül, függetlenül attól,
   mekkorák mellette a menüpontok.
   Emellett kivesszük a hover-nagyítást: a globális képszabályom a logóra is
   ráült, attól nőtt meg és lógott ki a bal széle.                          */

/* A logó a FEJLÉC teljes szélességéhez igazodik, nem a belső konténerhez.
   A belső konténernek saját oldalpaddingja és max-szélessége van, ezért ahhoz
   viszonyítva a jel sosem ült a képernyő közepén. */
body.mv-theme .modiviam-header { position: relative; }

/* MIÉRT JÖTT BE KÉSVE A MENÜ — megvan az oka. Nem a téma, nem a gyorsítótár
   és nem a betűtípus: az oldal saját egyedi CSS-e (`elementor-frontend-inline-css`)
   ezt tartalmazza:

     .modiviam-header { opacity: 0; pointer-events: none;
                        animation: headerFadeIn 1s ease 3s forwards; }

   Vagyis a fejléc HÁROM MÁSODPERC késleltetéssel úszik be, és addig kattintani
   sem lehet rajta. Mobilon ez különösen zavaró, mert ott a logó és a hamburger
   is ebben a dobozban van, tehát az első három másodpercben üres a fejléc.
   Itt csak felülírjuk — a forrást nem bántjuk, így a téma visszakapcsolásakor
   az eredeti késleltetés is visszatér. */
body.mv-theme .modiviam-header {
  opacity: 1 !important;
  pointer-events: auto !important;
  animation: none !important;
}

/* A FEJLÉC KATTINTHATATLAN VOLT — ez az oka.

   Az Elementor a ragadós fejléchez egy helykitöltő másolatot tesz a DOM-ba
   (`.elementor-sticky__spacer`), ami ugyanazokat az osztályokat viseli, mint
   az eredeti. Így az oldal saját egyedi CSS-ének `.modiviam-header { position:
   fixed !important; z-index: 99998 }` szabálya a MÁSOLATRA is ráragad — a
   helykitöltő ezért nem a folyamban tart helyet, hanem egy láthatatlan, fixen
   álló réteg lesz a valódi fejléc fölött (z-index 99998 kontra 999), és
   elnyeli a kattintásokat.

   Mérve: négy fejléc-konténer a lapon, kettő-kettő ugyanazon a helyen; a
   jQuery eseménykezelők csak az eredetin ülnek, a másolaton nincsenek. Ezért
   nem nyílt a hamburger menü sem — a kattintás a másolatra érkezett.

   A helykitöltőt nem a folyamba tesszük vissza (az 96 képpontnyi ugrást
   okozna a tartalomban), csak átlátszóvá és kattinthatatlanná. */
body.mv-theme .elementor-sticky__spacer {
  pointer-events: none !important;
  visibility: hidden !important;
}

/* ==========================================================================
   A LENYÍLÓ (HAMBURGER) MENÜ
   --------------------------------------------------------------------------
   A menü kinyílt — `aria-expanded="true"` felkerült —, de a panel 0 képpont
   magas maradt. Mérve: `transform: matrix(1, 0, 0, 0, 0, 0)`, azaz `scaleY(0)`,
   miközben a tartalom megvolt (306 képpont, hét menüpont).

   Amiért egyik felülírás sem fogott: a panelen egy FUTÓ TRANZÍCIÓ ült, ami
   `currentTime: 0`-n ragadt, és a CSS kaszkádban a tranzíció erősebb még az
   `!important` deklarációnál is. Ezért `transform: none !important` és
   `animation: none !important` sem ért semmit — előbb magát a tranzíciót kell
   kivenni.

   A panel így azonnal, animáció nélkül nyílik. Nem szép átmenet, de működik,
   és ez a fontosabb.
   ========================================================================== */

body.mv-theme .elementor-nav-menu--dropdown {
  transition: none !important;
  animation: none !important;
}

body.mv-theme .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu--dropdown,
body.mv-theme .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown {
  /* Asztali szélességen (1025 fölött) az Elementor `display: none`-nal rejti
     a lenyílót — a hamburgert viszont mi hozzuk elő 1279-ig, ezért itt
     kifejezetten vissza kell kapcsolni. E nélkül a panel kinyílt (aria=true),
     de 0 képpont maradt. */
  display: block !important;
  transform: none !important;
  max-height: min(80vh, var(--menu-height, 80vh)) !important;
  height: auto !important;
  overflow-y: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: var(--mv-black-2) !important;
  border-top: 1px solid var(--mv-line);
}

/* Csukott állapotban maradjon összecsukva — enélkül a panel mindig ott lógna. */
body.mv-theme .elementor-menu-toggle[aria-expanded="false"] + .elementor-nav-menu--dropdown {
  max-height: 0 !important;
  overflow: hidden !important;
}

/* A lenyíló menüpontjai kapjanak valódi magasságot és olvasható méretet. */
body.mv-theme .elementor-nav-menu--dropdown a {
  height: auto !important;
  min-height: 0 !important;
  padding: 1rem 1.5rem !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.14em !important;
}

/* A logó abszolút középre igazítása CSAK asztali nézetben érvényes.
   Mérve: mobilon ugyanez a szabály a logót a hamburger és a kosár TETEJÉRE
   húzta (logó 120..255, kosár 125..178 — teljes átfedés), mert a mobil
   fejléc egy másik Elementor konténer, ugyanezzel az osztálynévvel.
   Az Elementor asztali töréspontja 1025 képpont. */
@media (min-width: 1025px) {
  body.mv-theme .modiviam-header .elementor-widget-theme-site-logo {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    width: auto !important;
    z-index: 4;
    pointer-events: auto;
  }
}

body.mv-theme .modiviam-header .elementor-widget-theme-site-logo img,
body.mv-theme .modiviam-header .custom-logo,
body.mv-theme .modiviam-header .elementor-widget-image img,
body.mv-theme .elementor-location-header .elementor-widget-image img {
  transform: none !important;
  clip-path: none !important;
  filter: brightness(0) invert(1) opacity(0.95);
}

body.mv-theme .modiviam-header .elementor-widget-theme-site-logo:hover img,
body.mv-theme .modiviam-header .elementor-widget-image:hover img,
body.mv-theme .elementor-location-header .elementor-widget-image:hover img {
  transform: none !important;
}

/* A Klub jel nem a szómárka, ezért nem fordítjuk ki — csak halványítjuk. */
body.mv-theme .modiviam-header .elementor-widget-image:not(.elementor-widget-theme-site-logo) img {
  filter: none;
}

/* --- Logó mérete ----------------------------------------------------------- */

body.mv-theme .modiviam-header .elementor-widget-theme-site-logo img,
body.mv-theme .modiviam-header .custom-logo {
  max-height: 46px !important;
  width: auto;
  transition: max-height 420ms var(--mv-e);
}

body.mv-scrolled .modiviam-header .elementor-widget-theme-site-logo img,
body.mv-scrolled .modiviam-header .custom-logo {
  max-height: 38px !important;
}

/* Kosár ikon + a piros badge lecserélése aranyra */
body.mv-theme .elementor-location-header .elementor-button-icon,
body.mv-theme .elementor-location-header .eicon-cart-medium,
body.mv-theme .elementor-location-header .elementor-menu-cart__toggle a {
  color: var(--mv-text-soft) !important;
}

body.mv-theme .elementor-menu-cart__toggle .elementor-button-icon-qty {
  background-color: var(--mv-gold) !important;
  color: var(--mv-black) !important;
  font-family: var(--mv-font-sub);
  font-size: 0.625rem !important;
  letter-spacing: 0.04em;
}

/* A „Webshop" és „Klub" a jobb szélen — kis verzál, nem vastag talpas */
body.mv-theme .elementor-location-header .elementor-widget-button .elementor-button {
  font-family: var(--mv-font-sub) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--mv-text) !important;
}

/* ==========================================================================
   3. TIPOGRÁFIA SÖTÉTEN
   A régi oldalon a címek sötétkékek (#0E2A3A) vagy kimosott szürkék voltak.
   Feketén mindkettő olvashatatlan, ezért elefántcsontra váltunk.
   ========================================================================== */

body.mv-theme h1, body.mv-theme h2, body.mv-theme h3,
body.mv-theme h4, body.mv-theme h5, body.mv-theme h6,
body.mv-theme .elementor-heading-title,
body.mv-theme .elementor-widget-heading .elementor-heading-title {
  color: var(--mv-text) !important;
}

body.mv-theme p,
body.mv-theme li,
body.mv-theme .elementor-widget-text-editor,
body.mv-theme .elementor-widget-text-editor p,
body.mv-theme .elementor-icon-list-text,
body.mv-theme .elementor-widget-icon-list .elementor-icon-list-text {
  color: var(--mv-text-soft) !important;
}

/* A hero cím („Art Parfum") volt a leggyengébb pont: szürke szürkén.
   Nagy Cinzel, elefántcsont, tág betűköz. */
body.mv-theme .elementor-widget-heading .elementor-heading-title {
  letter-spacing: 0.05em;
}

/* Felsorolás-jelölők aranyra */
body.mv-theme .elementor-icon-list-icon svg,
body.mv-theme .elementor-icon-list-icon i {
  color: var(--mv-gold) !important;
  fill: var(--mv-gold) !important;
}

/* Linkek */
body.mv-theme a:not(.elementor-button) { color: inherit; }
body.mv-theme .elementor-widget-text-editor a:not(.elementor-button) {
  color: var(--mv-gold) !important;
  background-image: none;
}

/* ==========================================================================
   4. KÉPEK
   A meglévő fotók nagy részébe SZAGGATOTT FEHÉR SZÉL van beleégetve
   (a képfájlba, nem CSS-ből) — ez a másik feltűnően amatőr elem.
   CSS-ből nem lehet eltüntetni, de le lehet vágni: a képet enyhén
   felnagyítjuk és a konténer levágja a rojtos peremet.
   ========================================================================== */

body.mv-theme .elementor-widget-image,
body.mv-theme .elementor-widget-media-carousel .swiper-slide,
body.mv-theme .elementor-widget-image-carousel .swiper-slide {
  overflow: hidden;
}

/* A 4%-os levágás CSAK a tartalmi fotókra vonatkozik.
   Kimarad a lábléc (a Demján Sándor Program logójának a széle levágódott
   tőle), a fejléc, valamint minden logó és ikon — azoknál a perem a
   kompozíció része, nem hiba. */
body.mv-theme .elementor:not(.elementor-location-header):not(.elementor-location-footer) .elementor-widget-image:not(.elementor-widget-theme-site-logo) img,
body.mv-theme .elementor-widget-media-carousel img,
body.mv-theme .elementor-widget-image-carousel img {
  clip-path: inset(4% round 18px);
  transform: scale(1.09);
  /* A fotók nyers világossága elüt a fekete laptól; egy hajszálnyi
     sötétítés és melegítés összehangolja őket a felülettel. */
  filter: brightness(0.88) contrast(1.06) saturate(0.94);
  transition: transform var(--mv-dur-slow, 900ms) cubic-bezier(0.16, 1, 0.3, 1),
              filter var(--mv-dur-slow, 900ms) cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

body.mv-theme .elementor-widget-image:hover img,
body.mv-theme .elementor-widget-media-carousel .swiper-slide:hover img {
  filter: brightness(1) contrast(1.02) saturate(1);
}

body.mv-theme .elementor-widget-image:hover img {
  transform: scale(1.13);
}

/* Fehér hátterű termékfotók (a parfümládikák) feketén kilyukasztanák a
   lapot. Halvány grafit lapra tesszük őket, arany hajszálvonallal —
   így szándékosnak hat, nem hibának. */
body.mv-theme .mv-plate img,
body.mv-theme .elementor-widget-image.mv-plate img {
  background: #EFEAE1;
  padding: 0;
}

body.mv-theme .mv-plate {
  border: 1px solid var(--mv-line);
  background: var(--mv-black-3);
}

/* Karusszel nyilak és pontok */
body.mv-theme .elementor-swiper-button,
body.mv-theme .swiper-button-next,
body.mv-theme .swiper-button-prev {
  color: var(--mv-text) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
}

body.mv-theme .swiper-pagination-bullet {
  background: var(--mv-text-mute) !important;
  opacity: 1;
  border-radius: 999px;
  width: 18px;
  height: 3px;
}

body.mv-theme .swiper-pagination-bullet-active {
  background: var(--mv-gold) !important;
}

/* ==========================================================================
   4b. KÉPEK MINT KÁRTYÁK
   Minden tartalmi kép lekerekített, árnyékos lap lesz, halvány tükröződéssel.
   Így a szekciók nem „bedobott fotók", hanem szerkesztett elemek.
   Kimarad a fejléc, a lábléc, a jelenetek, a karusszel és a bolt — azoknak
   saját kezelésük van.
   ========================================================================== */

/* FONTOS: ebben az Elementor-verzióban a képwidgetben NINCS
   `.elementor-widget-container` — a kép közvetlenül a widget gyereke.
   Korábban arra a nem létező elemre írtam a kerekítést és az árnyékot,
   ezért nem történt semmi. Most magára a widgetre megy. */

/* FONTOS: a főoldal szekcióinak nagy része NEM sima képwidget, hanem
   KÉPKARUSSZEL (`.elementor-widget-image-carousel`). Korábban azokat
   kizártam a kerekítésből és a tükröződésből — ezért nem látszott semmi
   a legtöbb szekcióban. Most a karusszel lapjai is megkapják. */
body.mv-theme .elementor:not(.elementor-location-header):not(.elementor-location-footer)
  .elementor-widget-image:not(.elementor-widget-theme-site-logo),
body.mv-theme .elementor:not(.elementor-location-header):not(.elementor-location-footer)
  .elementor-widget-image-carousel .swiper-slide,
body.mv-theme .elementor:not(.elementor-location-header):not(.elementor-location-footer)
  .elementor-widget-media-carousel .swiper-slide {
  position: relative;
  transition: transform 620ms var(--mv-e), filter 620ms var(--mv-e);
}

body.mv-theme .elementor:not(.elementor-location-header):not(.elementor-location-footer)
  .elementor-widget-image:not(.elementor-widget-theme-site-logo) img,
body.mv-theme .elementor:not(.elementor-location-header):not(.elementor-location-footer)
  .elementor-widget-image-carousel .swiper-slide img,
body.mv-theme .elementor:not(.elementor-location-header):not(.elementor-location-footer)
  .elementor-widget-media-carousel .swiper-slide img {
  display: block;
  border-radius: 18px !important;
  box-shadow:
    0 30px 60px -25px rgba(0, 0, 0, 0.8),
    0 8px 20px -12px rgba(0, 0, 0, 0.6);
}

/* Kivételek: a jelenetek, a karusszel és a bolt saját kezelést kapnak. */
body.mv-theme .mv-scene .elementor-widget-image,
body.mv-theme .mv-depth .elementor-widget-image,
body.mv-theme .woocommerce .elementor-widget-image,
body.mv-theme .mv-pcard .elementor-widget-image {
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

/* Hoverre a kép enyhén megnő — a tükörkép ezt automatikusan követi,
   mert a `-webkit-box-reflect` a transzformált elemet tükrözi. */
body.mv-theme .elementor:not(.elementor-location-header):not(.elementor-location-footer)
  .elementor-widget-image:not(.elementor-widget-theme-site-logo):hover {
  transform: translateY(-6px) scale(1.015);
}

body.mv-theme .elementor:not(.elementor-location-header):not(.elementor-location-footer)
  .elementor-widget-image:not(.elementor-widget-theme-site-logo):hover img {
  box-shadow:
    0 44px 80px -30px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(198, 169, 124, 0.28);
}

/* VALÓDI TÜKRÖZŐDÉS a kép alatt.
   Nem gradiens a képre, hanem a kép tükrözött, halványuló mása alatta —
   mintha csiszolt felületen állna. A `-webkit-box-reflect` a Chrome/Edge/
   Safari sajátja; ahol nincs, ott egyszerűen elmarad, semmi nem törik el. */
body.mv-theme .elementor:not(.elementor-location-header):not(.elementor-location-footer)
  .elementor-widget-image:not(.elementor-widget-theme-site-logo) {
  /* A maszk a TÜKÖRKÉP saját terében fut: a teteje (a képhez tapadó él) még
     látszik, 16 képpont alatt teljesen elfogy. Ettől lesz egy vékony, elegáns
     csillanás a kép alatt, nem egy második, fejjel lefelé álló fotó.
     Mivel a tükörkép a transzformációt is követi, hoverre magától nő. */
  overflow: visible;
}

/* A karusszel lapjai ugyanezt a tükröződést kapják. */
body.mv-theme .elementor:not(.elementor-location-header):not(.elementor-location-footer)
  .elementor-widget-image-carousel .swiper-slide,
body.mv-theme .elementor:not(.elementor-location-header):not(.elementor-location-footer)
  .elementor-widget-media-carousel .swiper-slide {
}

/* A saját mélységi karusszelem és a jelenetek kimaradnak. */
body.mv-theme .mv-depth .swiper-slide,
body.mv-theme .mv-scene .swiper-slide { -webkit-box-reflect: none; }

/* A kerekítés a képre kerül, mert a widget már nem vág. */
body.mv-theme .elementor:not(.elementor-location-header):not(.elementor-location-footer)
  .elementor-widget-image:not(.elementor-widget-theme-site-logo) img {
  border-radius: 18px !important;
}

body.mv-theme .mv-scene .elementor-widget-image,
body.mv-theme .mv-pcard .elementor-widget-image,
body.mv-theme .woocommerce .elementor-widget-image,
body.mv-theme.single-product .elementor-widget-image {
}

/* ==========================================================================
   4c. KATEGÓRIAKÁRTYÁK (Elementor Flip Box)
   --------------------------------------------------------------------------
   A főoldali „forgó ládák" Flip Box widgetek: az elülső réteg mutatja a
   ládika háttérképét és a rövid nevet, a hátsó a teljes nevet és a gombot.
   A megrendelő kérése: NE forogjon, ne legyen kép, a hátsó réteg tartalma
   legyen alapból látható, lekerekített kártyán, halvány tükröződéssel.
   ========================================================================== */

/* VISSZAÁLLÍTVA az eredeti működés: a kártya elöl a ládika fotóját mutatja,
   és fordulásra jön a szöveg. (Egy korábbi körben a forgást kikapcsoltuk és
   az előlapot elrejtettük — a megrendelő azt kérte vissza, ami eredetileg
   volt.) A lap már nem áttetsző: a fotó a lényeg, nem a mögötte úszó rajz. */
body.mv-theme .elementor-widget-flip-box .elementor-flip-box {
  border-radius: 18px;
  overflow: hidden;
  background: transparent;
  border: 1px solid var(--mv-line);
  min-height: clamp(14rem, 20vw, 19rem);
  transition: transform 520ms var(--mv-e),
              border-color 520ms var(--mv-e),
              box-shadow 520ms var(--mv-e);
}

body.mv-theme .elementor-widget-flip-box .elementor-flip-box:hover {
  transform: translateY(-6px);
  border-color: rgba(198, 169, 124, 0.45);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}

/* Az előlap és a forgás visszakapcsolva — az Elementor saját működése.
   Az előlapon a mentett ládika-fotó áll; a hátlap a márka mély kékje. */
body.mv-theme .elementor-widget-flip-box .elementor-flip-box__front {
  border-radius: 18px;
}

body.mv-theme .elementor-widget-flip-box .elementor-flip-box__back {
  border-radius: 18px;
}

body.mv-theme .elementor-widget-flip-box .elementor-flip-box__layer__overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

body.mv-theme .elementor-widget-flip-box .elementor-flip-box__layer__title {
  font-family: var(--mv-font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem) !important;
  color: var(--mv-text) !important;
  margin: 0 0 1.25rem !important;
  transition: color 420ms var(--mv-e);
}

body.mv-theme .elementor-widget-flip-box .elementor-flip-box:hover .elementor-flip-box__layer__title {
  color: var(--mv-gold) !important;
}

body.mv-theme .elementor-widget-flip-box .elementor-flip-box__layer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

body.mv-theme .elementor-widget-flip-box .elementor-flip-box__button {
  border-radius: 999px !important;
  padding: 0.85em 2em !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.2em !important;
}

/* ==========================================================================
   4d. TÜKRÖZŐDÉS — böngészőfüggetlenül
   --------------------------------------------------------------------------
   A `-webkit-box-reflect` csak WebKit/Blink alatt működik, Firefoxban
   egyáltalán nem — ott soha nem látszott a tükörkép. Helyette a JS beteszi a
   kép URL-jét a `--mv-refl` változóba, és itt egy `::after` rajzolja meg a
   függőlegesen tükrözött, halványuló mását. Ez minden böngészőben megy.
   ========================================================================== */

body.mv-theme .mv-reflected {
  position: relative;
  overflow: visible;
}

/* A kerekítés EGYSZERŰ szelektorral is rákerül. A hosszú `:not()` láncokat
   több helyen felülütötte valami; a `.mv-reflected` osztályt viszont a JS
   pontosan azokra az elemekre teszi ki, amiket kerekíteni akarunk, így ez a
   szabály rövid és nehezen legyőzhető. */
body.mv-theme .mv-reflected img,
body.mv-theme .mv-reflected.swiper-slide img {
  border-radius: 18px !important;
}

body.mv-theme .mv-reflected::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 22px;
  pointer-events: none;
  background-image: var(--mv-refl);
  background-size: 100% auto;
  background-position: left bottom;
  background-repeat: no-repeat;
  transform: scaleY(-1);
  transform-origin: top center;
  opacity: 0.3;
  /* A vágás ugyanolyan kerek, mint a képé — így a tükörkép felső éle
     pontosan illeszkedik a kép alsó, lekerekített széléhez. */
  clip-path: inset(0 4% round 18px 18px 0 0);
  /* A maszk a TÜKRÖZÉS ELŐTTI térben hat, ezért fordítva kell megadni:
     a `to bottom` irány a flip után lesz „a képtől lefelé halványuló".
     Korábban fordítva állt, ezért a tükörkép a képtől TÁVOL volt erős —
     így nem tükröződésnek, hanem a kép mögül kilógó sávnak látszott. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  transition: opacity 620ms var(--mv-e), height 620ms var(--mv-e);
}

body.mv-theme .mv-reflected:hover::after {
  opacity: 0.5;
  height: 28px;
}

/* ==========================================================================
   4e. DÍSZÍTŐ PALACK-ÁBRA
   --------------------------------------------------------------------------
   Az eredeti oldal `modiviam_uvegcse.png` rajza kinagyítva, nagyon halványan,
   a kép nélküli szekciók hátterében. Lassabban mozog, mint a görgetés (a JS
   adja a `--mv-deco-p` értéket -1..1 között), ettől van mélysége.
   A szekció levágja, tehát sosem lóg ki.
   ========================================================================== */

/* Az átköltöztetett cím a szekció tetején, teljes szélességben, középen —
   így néz ki egyetlen, összefüggő szekciónak a kártyáival együtt. */
body.mv-theme .mv-has-merged-title > .e-con-inner {
  flex-wrap: wrap;
}

body.mv-theme .mv-merged-title {
  /* A célszekció flex ÉS grid is lehet (az Elementor `e-grid` konténere
     `display: grid`, három rögzített oszloppal). Flexben a `flex-basis`,
     gridben a `grid-column` viszi végig a teljes szélességet — mérve a
     `flex` egyedül nem volt elég: a cím elfoglalta az első oszlopot,
     és a harmadik kártya a következő sorba csúszott. */
  flex: 0 0 100% !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  /* Balra igazítva marad, mint az oldal többi címe. Középre igazítani
     amúgy sem a `text-align` vinné: a címsor `display: flex` (a beszúrt
     logó miatt), ott a `justify-content` az érvényes tengely. */
  margin: 0 0 clamp(2rem, 4vw, 3.5rem) !important;
}

body.mv-theme .mv-has-merged-title {
  padding-top: clamp(3rem, 6vw, 5.5rem) !important;
}

/* Alacsonyabb kategóriakártyák: 540 képpont volt egy címre és egy
   gombra. A magasság KÉT helyről jön, ezért kettőt kell állítani:
   a konténeré az Elementor `--height` változójából (`.e-con { height:
   var(--height) }`), a lapé pedig az oldal saját, szerkesztőben
   generált szabályából (`… .elementor-flip-box { height: 520px }`).
   Csak a konténert állítva a lap kilógott belőle — mérve 520 képpont
   egy 288 képpontos dobozban. A konténert most a tartalom méretezi. */
body.mv-theme .mv-has-merged-title > .e-con-inner > .e-con {
  --height: auto !important;
  min-height: 0 !important;
}

body.mv-theme .mv-has-merged-title .elementor-widget-flip-box .elementor-flip-box {
  height: clamp(13rem, 17vw, 16rem) !important;
}

body.mv-theme .mv-deco {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Az ábra a SZEKCIÓHOZ van kötve és vele együtt úszik — se nem parallax,
   se nem képernyőhöz rögzített. A `position: fixed` változat a képernyő
   közepén állt, ezért amikor a szekció alja a képernyő közepe fölé ért,
   az ábra alja kilógott a szekcióból és levágódott. Így viszont a
   szekcióhoz képest sosem mozdul, tehát a görgetés egyik pillanatában
   sem vágódhat le semmi. A magasság ezért lehet nagyobb is: nem kell
   mozgástartalékot hagyni. A `min()` felső korlátja azért kell, hogy egy
   nagyon magas szekcióban (a GYIK 1461 képpont) ne nőjön aránytalanra. */
body.mv-theme .mv-deco::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  /* A rajz a KÖZÉPVONALHOZ van kötve, nem a szekció széléhez.
     Korábban a jobb szélhez tapadt. Nagy monitoron a szekció a teljes
     képernyő szélessége, a szöveg viszont egy középre zárt hasábban áll —
     mérve 2560 képpontos ablakban a rajz az 1457..1937 sávba került, a szöveg
     meg a 643..1375-be, tehát elmentek egymás mellett. A tartalom mindig
     középen van, ezért a rajz is onnan indul: így bármilyen felbontáson a
     szöveg és a kérdések MÖGÖTT marad. */
  left: 50%;
  right: auto;
  width: clamp(15rem, 26vw, 30rem);
  height: min(84%, 30rem);
  min-height: 12rem;
  pointer-events: none;
  background-image: url("../img/uvegcse.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* Kicsit erősebb, mint korábban: az áttetsző kártyák mögött a felük
     nyeli el, ott másképp nem venne ki semmit a szem. */
  opacity: 0.09;
  /* A középvonaltól egy negyednyit jobbra — a váltakozás megmarad, de a
     rajz nem szakad el a szövegtől. */
  transform: translate(-25%, -50%);
}

/* Váltakozó oldal, hogy ne ismétlődjön egyformán. */
/* Váltakozó oldal, hogy ne ismétlődjön egyformán — de mindkét irány a
   középvonaltól indul, tehát a szöveg mögött marad. */
body.mv-theme .mv-deco:nth-of-type(even)::before {
  right: auto;
  left: 50%;
  transform: translate(-75%, -50%) scaleX(-1);
}

@media (max-width: 860px) {
  body.mv-theme .mv-deco::before {
    opacity: 0.06;
    width: 60vw;
    height: 52vh;
  }
}

/* A díszítőábrának nincs többé mozgáskapcsolt állapota, ezért nincs
   `prefers-reduced-motion` kivétel sem — az ott korábban álló szabály
   ráadásul a bal oldali szekciók tükrözését (`scaleX(-1)`) is levette. */

/* ==========================================================================
   5. EGYSÉGES INTERAKCIÓS NYELV
   --------------------------------------------------------------------------
   Eddig NÉGY különböző hover-viselkedés élt egymás mellett négy fájlban:
   arany besöprés, egyszerű háttérszín-váltás, 1.045-ös és 1.13-as
   képnagyítás, opacitásos gombfelfedés — mind más időzítéssel. Ettől tűnt
   az oldal esetlegesnek.

   Mostantól HÁROM viselkedés van, és minden elem ezek egyikét használja,
   azonos időzítéssel (--mv-t) és azonos görbével (--mv-e):

     A) SZÖVEGES ELEM  → szín világosodik + arany aláhúzás nő balról
     B) GOMB           → arany kitöltés söpör be balról, betű feketére vált
     C) KÉP            → 1.04-es nagyítás + fényerő teljesre áll (lassabb)
   ========================================================================== */

/* --- Közös alap: minden interaktív elem ugyanazt az időzítést kapja ------- */

body.mv-theme a,
body.mv-theme .elementor-button,
body.mv-theme button,
body.mv-theme .elementor-social-icon,
body.mv-theme .swiper-pagination-bullet {
  transition: color var(--mv-t) var(--mv-e),
              background-color var(--mv-t) var(--mv-e),
              border-color var(--mv-t) var(--mv-e),
              opacity var(--mv-t) var(--mv-e) !important;
}

/* --- A) SZÖVEGES ELEM ----------------------------------------------------- */

body.mv-theme .elementor-nav-menu a,
body.mv-theme .elementor-widget-text-editor a:not(.elementor-button),
body.mv-theme .woocommerce-breadcrumb a,
body.mv-theme .elementor-location-footer a:not(.elementor-social-icon) {
  position: relative;
  text-decoration: none !important;
  background-image: none !important;
}

/* A LÁBLÉC ÉS A FÖLÖTTE LÉVŐ MENÜ hoverje.
   Az oldal saját stílusa egy világoszöld (`rgb(97, 206, 112)`) vonalat húzott
   `::after`-rel, és mivel a linkek `display: flex`-ek, a vonal a sor teljes
   szélességéig kifutott — függetlenül a szöveg hosszától. Mindkettőt
   megszüntetjük: nincs pszeudoelem, helyette a szöveg szélességéhez igazodó
   arany aláhúzás, növekvő háttérképként. */
body.mv-theme .elementor-location-footer a::after,
body.mv-theme .elementor-location-footer a::before,
body.mv-theme .elementor-location-footer .elementor-item::after,
body.mv-theme .elementor-location-footer .elementor-item::before {
  content: none !important;
  display: none !important;
}

body.mv-theme .elementor-location-footer a:not(.elementor-social-icon):not(.elementor-button),
body.mv-theme .elementor-location-footer .elementor-item {
  display: inline !important;
  width: auto !important;
  background-image: linear-gradient(var(--mv-gold), var(--mv-gold)) !important;
  background-repeat: no-repeat !important;
  background-position: left 100% !important;
  background-size: 0% 1px !important;
  padding-bottom: 0.18em;
  transition: background-size var(--mv-t) var(--mv-e), color var(--mv-t) var(--mv-e) !important;
}

body.mv-theme .elementor-location-footer a:not(.elementor-social-icon):not(.elementor-button):hover,
body.mv-theme .elementor-location-footer .elementor-item:hover {
  background-size: 100% 1px !important;
  color: var(--mv-gold) !important;
}

/* Ugyanez a lábléc FÖLÖTTI menüre (Blog, Rólunk, Kapcsolat…), ami nem a
   fejlécben és nem a láblécben van. */
body.mv-theme .elementor:not(.elementor-location-header) .elementor-nav-menu a::after,
body.mv-theme .elementor:not(.elementor-location-header) .elementor-nav-menu a::before {
  content: none !important;
  display: none !important;
}

body.mv-theme .elementor:not(.elementor-location-header) .elementor-nav-menu a {
  display: inline-block !important;
  width: auto !important;
  background-image: linear-gradient(var(--mv-gold), var(--mv-gold)) !important;
  background-repeat: no-repeat !important;
  background-position: left 100% !important;
  background-size: 0% 1px !important;
  padding-bottom: 0.2em;
  transition: background-size var(--mv-t) var(--mv-e), color var(--mv-t) var(--mv-e) !important;
}

body.mv-theme .elementor:not(.elementor-location-header) .elementor-nav-menu a:hover {
  background-size: 100% 1px !important;
  color: var(--mv-gold) !important;
}

body.mv-theme .elementor-widget-text-editor a:not(.elementor-button)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.35em;
  width: 0;
  height: 1px;
  background: var(--mv-gold);
  transition: width var(--mv-t) var(--mv-e);
}

body.mv-theme .elementor-nav-menu a:hover,
body.mv-theme .elementor-widget-text-editor a:not(.elementor-button):hover,
body.mv-theme .woocommerce-breadcrumb a:hover,
body.mv-theme .elementor-location-footer a:not(.elementor-social-icon):hover {
  color: var(--mv-text) !important;
}

body.mv-theme .elementor-nav-menu a:hover::after,
body.mv-theme .elementor-widget-text-editor a:not(.elementor-button):hover::after,
body.mv-theme .elementor-location-footer a:not(.elementor-social-icon):hover::after,
body.mv-theme .elementor-nav-menu .current-menu-item > a::after {
  width: 100%;
}

/* --- B) GOMB — egyetlen viselkedés minden gombra -------------------------- */

body.mv-theme .elementor-button,
body.mv-theme .woocommerce a.button,
body.mv-theme .woocommerce button.button,
body.mv-theme .woocommerce input.button,
body.mv-theme .woocommerce button.button.alt,
body.mv-theme .woocommerce div.product form.cart .button,
/* A hírlevél „Küldés" gombja a MailerLite plugin saját stílusát hozta:
   mérve `0.8px solid rgb(204, 51, 102)` — ez volt a piros körvonal —
   plusz a régi navy háttér. A plugin fájljához nem nyúlunk, csak
   ideemeljük a gombot a többi közé. */
body.mv-theme .mailerlite-subscribe-submit {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--mv-text) !important;
  border: 1px solid var(--mv-line) !important;
  border-radius: 0 !important;
  padding: 1.25em 2.75em !important;
  box-shadow: none !important;
  /* a listában korábban opacitással jelent meg a gomb — ez megszűnik */
  opacity: 1 !important;
  transform: none !important;
}

body.mv-theme .elementor-button::before,
body.mv-theme .woocommerce a.button::before,
body.mv-theme .woocommerce button.button::before,
body.mv-theme .woocommerce input.button::before,
body.mv-theme .mailerlite-subscribe-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--mv-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--mv-t) var(--mv-e);
}

body.mv-theme .elementor-button:hover,
body.mv-theme .elementor-button:focus-visible,
body.mv-theme .woocommerce a.button:hover,
body.mv-theme .woocommerce button.button:hover,
body.mv-theme .woocommerce input.button:hover,
body.mv-theme .mailerlite-subscribe-submit:hover,
body.mv-theme .mailerlite-subscribe-submit:focus-visible {
  color: var(--mv-black) !important;
  border-color: var(--mv-gold) !important;
  background-color: transparent !important;
}

body.mv-theme .elementor-button:hover::before,
body.mv-theme .elementor-button:focus-visible::before,
body.mv-theme .woocommerce a.button:hover::before,
body.mv-theme .woocommerce button.button:hover::before,
body.mv-theme .woocommerce input.button:hover::before,
body.mv-theme .mailerlite-subscribe-submit:hover::before,
body.mv-theme .mailerlite-subscribe-submit:focus-visible::before {
  transform: scaleX(1);
}

/* --- C) KÉP — egyetlen nagyítási érték ------------------------------------ */

body.mv-theme .elementor-widget-image:hover img,
body.mv-theme .elementor-widget-media-carousel .swiper-slide:hover img,
body.mv-theme .woocommerce ul.products li.product:hover img,
body.mv-theme .mv-figure:hover img,
body.mv-theme .mv-zoom:hover img {
  transform: scale(1.13) !important;   /* 1.09 alapnagyítás + 4% mozgás */
  filter: brightness(1) contrast(1.02) saturate(1) !important;
  transition: transform var(--mv-t-slow) var(--mv-e),
              filter var(--mv-t-slow) var(--mv-e) !important;
}

/* A terméklista képe nincs 1.09-re előnagyítva, ezért ott kisebb az érték */
body.mv-theme .woocommerce ul.products li.product:hover img {
  transform: scale(1.04) !important;
}

/* --- Ikonok --------------------------------------------------------------- */

body.mv-theme .elementor-social-icon:hover {
  border-color: var(--mv-gold) !important;
  color: var(--mv-gold) !important;
  background-color: transparent !important;
  transform: none !important;
}

/* ==========================================================================
   6. ŰRLAPOK (hírlevél, kapcsolat)
   ========================================================================== */

body.mv-theme input[type="text"],
body.mv-theme input[type="email"],
body.mv-theme input[type="tel"],
body.mv-theme textarea,
body.mv-theme select {
  background-color: transparent !important;
  color: var(--mv-text) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--mv-line) !important;
  border-radius: 0 !important;
}

body.mv-theme input::placeholder,
body.mv-theme textarea::placeholder {
  color: var(--mv-text-mute) !important;
}

body.mv-theme input:focus,
body.mv-theme textarea:focus {
  border-bottom-color: var(--mv-gold) !important;
  outline: none;
}

/* ==========================================================================
   7. LÁBLÉC
   ========================================================================== */

body.mv-theme .elementor-location-footer,
body.mv-theme .elementor-location-footer .e-con {
  background-color: var(--mv-black) !important;
  background-image: none !important;
  border-top: 1px solid var(--mv-line-soft);
}

body.mv-theme .elementor-location-footer,
body.mv-theme .elementor-location-footer p,
body.mv-theme .elementor-location-footer a:not(.elementor-social-icon),
body.mv-theme .elementor-location-footer li {
  color: var(--mv-text-mute) !important;
}

body.mv-theme .elementor-location-footer a:not(.elementor-social-icon):hover { color: var(--mv-gold) !important; }

body.mv-theme .elementor-location-footer h1,
body.mv-theme .elementor-location-footer h2,
body.mv-theme .elementor-location-footer h3,
body.mv-theme .elementor-location-footer h4 {
  color: var(--mv-text) !important;
}

/* Közösségi ikonok */
body.mv-theme .elementor-social-icon {
  background-color: transparent !important;
  border: 1px solid var(--mv-line);
  color: var(--mv-text-soft) !important;
  transition: border-color 380ms ease, color 380ms ease;
}

body.mv-theme .elementor-social-icon:hover {
  border-color: var(--mv-gold);
  color: var(--mv-gold) !important;
}

/* ==========================================================================
   8. HERO / NYITÓKÉP
   A régi nyitókép egy kimosott, szürke könyvtárfotó volt. Sötétre húzzuk,
   hogy a fehér palack-rajz és a cím kiemelkedjen belőle.
   ========================================================================== */

/* CSAK A FŐOLDALON. Ez a sötétítő réteg a nyitóképhez készült, de eredetileg
   minden oldal első szekciójára ráült — a világos termékoldalt is besötétítette,
   pedig ott a body már elefántcsont volt. */
body.mv-home.mv-theme .elementor:not(.elementor-location-header) > .e-con.e-parent:first-of-type {
  position: relative;
  isolation: isolate;
}

/* Az intro NEM kapja meg ezt a fátylat: az oldal saját nyitóanimációja, a
   sötétítést a saját háttérképe hozza. A `:not(#intro-hero)` zárja ki. */
body.mv-home.mv-theme .elementor:not(.elementor-location-header) > .e-con.e-parent:first-of-type:not(#intro-hero)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
      rgba(8, 9, 11, 0.62) 0%,
      rgba(8, 9, 11, 0.78) 55%,
      rgba(8, 9, 11, 0.95) 100%);
  pointer-events: none;
}

/* ==========================================================================
   9. GYIK / ACCORDION
   ========================================================================== */

body.mv-theme .elementor-accordion .elementor-tab-title,
body.mv-theme .e-n-accordion-item-title {
  color: var(--mv-text) !important;
  background: transparent !important;
  border-bottom: 1px solid var(--mv-line-soft) !important;
}

body.mv-theme .elementor-accordion .elementor-tab-content {
  color: var(--mv-text-soft) !important;
  background: transparent !important;
  border: 0 !important;
}

/* ==========================================================================
   10. WOOCOMMERCE — sötét bolt
   ========================================================================== */

body.mv-theme.woocommerce-page,
body.mv-theme .woocommerce {
  background-color: var(--mv-black) !important;
}

body.mv-theme .woocommerce ul.products li.product .woocommerce-loop-product__title,
body.mv-theme .woocommerce div.product .product_title {
  color: var(--mv-text) !important;
}

body.mv-theme .woocommerce ul.products li.product .price,
body.mv-theme .woocommerce div.product p.price {
  color: var(--mv-text-soft) !important;
}

body.mv-theme .woocommerce table.shop_table th,
body.mv-theme .woocommerce table.shop_table td {
  color: var(--mv-text-soft) !important;
  border-color: var(--mv-line) !important;
}

body.mv-theme .woocommerce-message,
body.mv-theme .woocommerce-info,
body.mv-theme .woocommerce-error {
  background-color: var(--mv-black-3) !important;
  color: var(--mv-text) !important;
  border-left-color: var(--mv-gold) !important;
}

/* ==========================================================================
   11. FILMSZEMCSE finomhangolás sötéten
   Feketén az overlay blend túl erős, ezért halkabbra vesszük.
   ========================================================================== */

.mv-grain {
  opacity: 0.028;
  mix-blend-mode: soft-light;
}

/* ==========================================================================
   12. ADMIN SÁV
   Bejelentkezve a WP admin sáv fehér csíkot húz a fejléc fölé — a fix
   fejlécet lejjebb kell tolni, különben egymásra csúsznak.
   ========================================================================== */

body.admin-bar.mv-theme .modiviam-header { top: 32px !important; }

@media screen and (max-width: 782px) {
  body.admin-bar.mv-theme .modiviam-header { top: 46px !important; }
}

/* ==========================================================================
   13. MOBIL KORREKCIÓK
   Mérésen alapuló, szűk hatókörű javítások a 767 képpont alatti nézetre.
   ========================================================================== */

@media (max-width: 767px) {

  /* A hírlevél oszlopnak nincs oldalpaddingja — mérve 0..375 egy 375
     képpontos képernyőn, tehát az űrlap és a szöveg kiért a lap széléig.
     A mellette álló GYIK oszlop 20 képpontot kap; ugyanennyit adunk ennek
     is, hogy a két hasáb egy vonalban álljon. A `:has()` azért kell, hogy
     kizárólag ezt az oszlopot érintse, ne az összes teljes szélességűt
     (a videós jelenetek szándékosan érnek ki a szélig). */
  body.mv-theme .e-con-inner > .e-con:has(> .elementor-widget-shortcode) {
    padding-inline: 20px !important;
  }

  /* A közösségi ikonsor vízszintesen középre. A sor `inline-block` volt,
     ezért a rá írt `center` igazítás nem ért semmit: mérve 27..355 egy 375
     képpontos képernyőn — bal oldalt 27, jobb oldalt 20 képpont. Flexben a
     `justify-content` valóban középre teszi, és több sorba tördelve is
     középen marad. */
  body.mv-theme .elementor-widget-social-icons { width: 100%; }

  body.mv-theme .elementor-social-icons-wrapper {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center !important;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   A GYIK sziluettje a KÉRDÉSEK közepén
   --------------------------------------------------------------------------
   A szekcióhoz kötött rajz a szekció közepén ült, a lenyíló kérdések viszont
   csak annak egy részét foglalják el — a kettő nem esett egybe. Itt a rajzot
   magához a kérdéssorhoz kötjük, így pontosan mögötte áll, bármilyen
   képernyőn és akkor is, ha a kérdések kinyílnak.
   -------------------------------------------------------------------------- */

body.mv-theme .elementor-element-8d11569.mv-deco::before {
  display: none !important;
}

body.mv-theme .elementor-element-8d11569 .elementor-widget-n-accordion {
  position: relative;
  isolation: isolate;
}

body.mv-theme .elementor-element-8d11569 .elementor-widget-n-accordion::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: clamp(15rem, 26vw, 30rem);
  height: min(96%, 30rem);
  min-height: 12rem;
  pointer-events: none;
  background-image: url("../img/uvegcse.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.09;
  transform: translate(-50%, -50%);
}

@media (max-width: 860px) {
  body.mv-theme .elementor-element-8d11569 .elementor-widget-n-accordion::before {
    opacity: 0.06;
    width: 60vw;
  }
}

/* --------------------------------------------------------------------------
   A NYITÓANIMÁCIÓ ÉRINTETLEN
   --------------------------------------------------------------------------
   Az intro az oldal saját, mentett szekciója. A téma képszabálya rátette a
   18 képpontos sarkot, a mély vetett árnyékot és a sötétítő szűrőt is — egy
   átlátszó hátterű logón mindhárom látszik. Itt semmit nem alakítunk: az
   animáció úgy fut le, ahogy eredetileg megírták.
   -------------------------------------------------------------------------- */

body.mv-theme #intro-hero img,
body.mv-theme #intro-hero .elementor-widget-image img,
body.mv-theme #intro-hero .elementor-widget-image:not(.elementor-widget-theme-site-logo) img,
body.mv-theme .elementor:not(.elementor-location-header):not(.elementor-location-footer) #intro-hero .elementor-widget-image:not(.elementor-widget-theme-site-logo) img {
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

/* ==========================================================================
   A NYITÓANIMÁCIÓ TELJESEN ÉRINTETLEN
   --------------------------------------------------------------------------
   Az intro az oldal eredeti, mentett szekciója — nem a mi tervünk, tehát nem
   is alakítjuk. A téma két beavatkozása viszont elrontotta, mérve:

     · a felső képet az Elementor ABSZOLÚT pozícióval helyezi el
       (`.elementor-absolute`); a téma minden konténerre `position: relative`-t
       ad, ettől a widget beállt a flex-sorba és nulla szélességű lett — a kép
       egyszerűen eltűnt;
     · a képek margóját a téma nullázza, ezért a logó a hasáb bal szélére
       csúszott (a közepe 178 képpontnál állt a lap 713-as középvonala helyett).

   Itt mindkettőt visszaadjuk az Elementornak, és a többi téma-szabályt is
   kikapcsoljuk az intro belsejében.
   ========================================================================== */

body.mv-theme #intro-hero .elementor-absolute {
  position: absolute !important;
}

body.mv-theme #intro-hero .elementor-widget-image,
body.mv-theme #intro-hero .elementor-widget-image .elementor-widget-container {
  text-align: center !important;
}

/* A MÉRETET nem mi szabjuk meg — azt az Elementor mentett beállítása adja.
   (Egy `width: auto` itt elrontotta a lusta betöltésű képet: amíg nem
   érkezett meg, nem volt mihez igazodnia, és nulla szélességű maradt.)
   Csak a KÖZÉPRE igazítást adjuk vissza, meg a téma díszítéseit vesszük le. */
body.mv-theme #intro-hero .elementor-widget-image img,
body.mv-theme #intro-hero img {
  display: block !important;
  margin-inline: auto !important;
  max-width: 100% !important;
  /* A magasság a szélességből következik, és a kép ILLESZKEDIK a dobozába,
     nem tölti ki: így akkor sem vágódik le a rajz alja, ha a widget doboza
     szélesebb, mint amilyen magas. (`fill` mellett egy nem négyzetes doboz
     összenyomta volna, `cover` mellett levágta.) */
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  opacity: 1 !important;
  /* EZ VÁGTA LE A RAJZ ALJÁT. A téma minden képnek `clip-path: inset(4%
     round 18px)`-et ad — egy fotón ez alig észrevehető szélvágás, a
     kalligrafikus jelnél viszont végzetes: annak a vonalai pontosan a kép
     széléig futnak, így a bal alsó szár záró íve beleesett a levágott 4%-ba. */
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

/* A címsor is az eredeti módján tördel és igazodik. */
body.mv-theme #intro-hero h1,
body.mv-theme #intro-hero h2,
body.mv-theme #intro-hero h3,
body.mv-theme #intro-hero .elementor-heading-title {
  white-space: normal !important;
  text-align: center !important;
}

/* Az Elementor belépő animációi (fadeInUp, fadeIn, fadeInDown) futhassanak:
   a téma egyetlen szabálya se rögzítse az átlátszóságot vagy az eltolást. */
body.mv-theme #intro-hero .elementor-invisible {
  opacity: 0;
}

body.mv-theme #intro-hero .animated {
  opacity: 1;
}

/* A TÜKRÖZŐDÉS az intróban nem kell.
   A téma a képek alá egy `::after` réteget tesz ugyanazzal a képpel — az a
   termékfotókon szép, itt viszont a felső, kalligrafikus jel widgetje 1080
   képpont széles és csak 162 magas, a tükörkép pedig erre a sávra nyúlik ki
   `background-size: 100%`-kal. Ettől a rajznak egy megnyúlt vízszintes csíkja
   jelent meg a képkocka jobb oldalán, láthatóan oda nem illő foltként. */
body.mv-theme #intro-hero .mv-reflected::after,
body.mv-theme #intro-hero .mv-reflected::before,
body.mv-theme #intro-hero .elementor-widget-image::after,
body.mv-theme #intro-hero .elementor-widget-image::before,
body.mv-theme #intro-hero .elementor-widget::after {
  content: none !important;
  display: none !important;
  background-image: none !important;
}

body.mv-theme #intro-hero .mv-reflected {
  transform: none !important;
  overflow: visible !important;
}

/* --------------------------------------------------------------------------
   A LOGÓ FÜGGŐLEGESEN KÖZÉPEN — mobil fejléc
   --------------------------------------------------------------------------
   A mobil fejlécsáv belső sora középre igazít (`align-items: center`), a logó
   widgetje viszont `align-self: flex-start`-ot visel: a saját tetejéhez
   igazodott, nem a sor közepéhez. Mérve a logó közepe 46 képpontnál állt a
   sáv 48-as középvonala helyett, és három képponttal a mellette álló
   hamburger–kosár csoport fölött végződött.
   -------------------------------------------------------------------------- */

body.mv-theme .elementor-location-header .elementor-widget-theme-site-logo,
body.mv-theme .elementor-location-header .elementor-widget-image.elementor-widget-theme-site-logo {
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
}

body.mv-theme .elementor-location-header .elementor-widget-theme-site-logo > .elementor-widget-container {
  display: flex !important;
  align-items: center !important;
  width: 100%;
}

body.mv-theme .elementor-location-header .elementor-widget-theme-site-logo img {
  display: block !important;
  margin-block: 0 !important;
}