/* ==========================================================================
   MODIVIAM — Elrendezés és kompozíció
   --------------------------------------------------------------------------
   Két dolgot csinál:
   1. Kiszerkeszti az Elementor meglévő struktúráit (levegő, rács, arány).
   2. Ad egy sor kész osztályt (mv-hero, mv-split, mv-editorial…), amelyeket
      az Elementorban egyszerűen rá lehet tenni egy konténerre.
   ========================================================================== */

/* ==========================================================================
   1. ELEMENTOR SZERKEZET FINOMHANGOLÁSA
   A régi oldal legnagyobb baja a levegőtlenség és az egyforma ritmus volt.
   ========================================================================== */

/* Konténer szélessége — a régi túl széles, a szöveg elúszott */
body[class*="elementor-kit"] .e-con {
  --container-max-width: var(--mv-maxw);
}

/* MEGJEGYZÉS — itt korábban egy globális szabály minden `.e-con.e-parent`
   konténerre 96px függőleges paddinget tett. Ez súlyos hiba volt:
   az Elementor Theme Builder fejléce MAGA IS egy `.e-con.e-parent`, így a
   fejléc 100px-ről 292px-re hízott és elfoglalta a képernyő felét. A
   `:not([style*="padding"])` kivétel nem védett, mert az Elementor a paddinget
   stíluslapban adja, nem inline style attribútumban.

   Tanulság: soha ne adjunk vak, globális térközt idegen rendszer konténereire.
   A szekció-ritmus mostantól OPT-IN: tedd rá a konténerre a `mv-section`
   osztályt (lásd lentebb), és csak az kapja meg a nagy függőleges teret. */

/* Elementor címsor widget — a belső cím örökölje a mi rendszerünket */
.elementor-widget-heading .elementor-heading-title {
  font-family: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* Szövegdoboz olvashatósága */
/* A kép melletti szövegoszlop FÜGGŐLEGESEN KÖZÉPRE.
   Az Elementor alapból felülre igazítja, ezért a szöveg a magas képek mellett
   a tetejére tapadt, és alatta nagy üres folt maradt. */
body.mv-theme .elementor:not(.elementor-location-header):not(.elementor-location-footer)
  > .e-con.e-parent > .e-con-inner {
  align-items: center;
}

/* A termékkártyák KIMARADNAK a függőleges középre igazításból — ott a
   tartalomnak felülről kell kezdődnie, különben a rövidebb szövegű kártyákon
   a kép elcsúszik lefelé és fehér sáv marad fölötte. */
body.mv-theme .elementor:not(.elementor-location-header):not(.elementor-location-footer)
  .e-con.e-child:not(.mv-scene__bg):not(.mv-scene__pin):not(.mv-pcard) {
  justify-content: center;
}

/* A jelenetek, a rács és a bolt saját igazítást használnak. */
body.mv-theme .mv-scene .e-con-inner,
body.mv-theme .mv-pgrid .e-con,
body.mv-theme .woocommerce .e-con { align-items: initial; }

.elementor-widget-text-editor {
  font-size: var(--mv-fs-body);
  line-height: var(--mv-lh-body);
  color: var(--mv-ink-soft);
}

.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* Elementor kép widget — alapból kap lassú zoomot konténerben */
.elementor-widget-image img {
  transition: transform var(--mv-dur-slow) var(--mv-ease-out);
}

.mv-zoom .elementor-widget-image,
.mv-zoom.elementor-widget-image {
  overflow: hidden;
}

.mv-zoom:hover .elementor-widget-image img,
.mv-zoom.elementor-widget-image:hover img {
  transform: scale(1.05);
}

/* Elementor ikonlista — hajszálvonalas elválasztás */
.mv-list .elementor-icon-list-item {
  padding-block: var(--mv-space-sm);
  border-bottom: var(--mv-hairline) solid var(--mv-rule);
}

.mv-list .elementor-icon-list-item:last-child { border-bottom: 0; }

.mv-list .elementor-icon-list-text {
  font-family: var(--mv-font-sub);
  letter-spacing: 0.04em;
}

/* Elementor accordion / GYIK — a meglévő „Gyakori kérdések" blokkhoz */
.elementor-accordion .elementor-accordion-item,
.e-n-accordion-item {
  border: 0 !important;
  border-bottom: var(--mv-hairline) solid var(--mv-rule) !important;
}

.elementor-accordion .elementor-tab-title,
.e-n-accordion-item-title {
  font-family: var(--mv-font-sub) !important;
  font-size: var(--mv-fs-h4) !important;
  letter-spacing: 0.02em !important;
  padding: var(--mv-space-md) 0 !important;
  background: transparent !important;
  border: 0 !important;
  transition: color var(--mv-dur-fast) var(--mv-ease);
}

.elementor-accordion .elementor-tab-title:hover,
.e-n-accordion-item-title:hover { color: var(--mv-champagne-dk) !important; }

.elementor-accordion .elementor-tab-content {
  background: transparent !important;
  border: 0 !important;
  padding: 0 0 var(--mv-space-lg) !important;
  font-size: var(--mv-fs-body);
  line-height: var(--mv-lh-body);
  color: var(--mv-ink-soft);
  max-width: var(--mv-measure);
}

/* ==========================================================================
   2. HERO
   Teljes magasságú bársony nyitókép, középre zárt Cinzel címmel.
   ========================================================================== */

.mv-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(30rem, 88vh, 54rem);
  padding-block: var(--mv-space-3xl);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

.mv-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 60rem;
  padding-inline: var(--mv-gutter);
}

.mv-hero__title {
  font-family: var(--mv-font-display);
  font-size: var(--mv-fs-hero);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: var(--mv-ls-hero);
  color: var(--mv-ivory);
  margin: 0 0 var(--mv-space-md);
}

.mv-hero__title em {
  font-family: var(--mv-font-heading);
  font-style: italic;
  color: var(--mv-champagne-lt);
}

.mv-hero__sub {
  font-family: var(--mv-font-sub);
  font-size: var(--mv-fs-lead);
  line-height: 1.6;
  color: var(--mv-on-dark-soft);
  max-width: 42ch;
  margin: 0 auto var(--mv-space-xl);
}

.mv-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mv-space-sm);
  justify-content: center;
}

/* Görgetésjelző — vékony arany vonal, lassan pulzál */
.mv-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--mv-space-lg);
  transform: translateX(-50%);
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: var(--mv-space-xs);
  font-family: var(--mv-font-ui);
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mv-on-dark-soft);
}

.mv-hero__scroll::after {
  content: "";
  width: var(--mv-hairline);
  height: 3.5rem;
  background: linear-gradient(180deg, var(--mv-champagne), transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .mv-hero__scroll::after {
    animation: mv-scroll-pulse 2.8s var(--mv-ease-inout) infinite;
    transform-origin: top center;
  }
}

@keyframes mv-scroll-pulse {
  0%, 100% { transform: scaleY(0.45); opacity: 0.5; }
  50%      { transform: scaleY(1);    opacity: 1;   }
}

/* ==========================================================================
   3. SPLIT — kép + szöveg, váltakozó oldallal
   A régi oldalon minden blokk azonos irányú volt; ettől volt monoton.
   ========================================================================== */

.mv-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
}

@media (min-width: 861px) {
  .mv-split { grid-template-columns: 1fr 1fr; }
  .mv-split--wide-img { grid-template-columns: 1.25fr 1fr; }
  .mv-split--wide-text { grid-template-columns: 1fr 1.25fr; }

  /* Váltott irány: a kép a másik oldalra kerül, a DOM sorrend marad */
  .mv-split--reverse > *:first-child { order: 2; }
  .mv-split--reverse > *:last-child  { order: 1; }
}

.mv-split__text { max-width: 34rem; }

/* Eltolt, egymásra csúsztatott képpár — nagyon hatásos parfümfotóknál */
.mv-stack {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto;
}

.mv-stack__a { grid-column: 1 / 5; grid-row: 1; z-index: 1; }
.mv-stack__b {
  grid-column: 4 / 7;
  grid-row: 1;
  align-self: end;
  transform: translateY(clamp(2rem, 6vw, 5rem));
  z-index: 2;
  box-shadow: var(--mv-shadow-lg);
}

/* ==========================================================================
   4. EDITORIAL — nagy, levegős szövegblokk középen
   ========================================================================== */

.mv-editorial {
  max-width: var(--mv-maxw-text);
  margin-inline: auto;
  text-align: center;
}

.mv-editorial p {
  margin-inline: auto;
  max-width: var(--mv-measure);
}

.mv-editorial--left { text-align: left; margin-inline: 0; }

/* Nyitószó — a bekezdés első betűje Cinzelben, nagyban */
.mv-dropcap::first-letter {
  float: left;
  font-family: var(--mv-font-display);
  font-size: 3.6em;
  line-height: 0.82;
  padding: 0.08em 0.14em 0 0;
  color: var(--mv-champagne-dk);
}

/* ==========================================================================
   5. RÁCSOK
   ========================================================================== */

.mv-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.mv-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.mv-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.mv-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* Számozott érték-kártya — keret nélkül, csak hajszálvonal fölötte */
.mv-card {
  padding-top: var(--mv-space-md);
  border-top: var(--mv-hairline) solid var(--mv-rule-strong);
}

.mv-card__num {
  display: block;
  font-family: var(--mv-font-display);
  font-size: var(--mv-fs-micro);
  letter-spacing: 0.24em;
  color: var(--mv-champagne-dk);
  margin-bottom: var(--mv-space-sm);
}

.mv-card__title {
  font-family: var(--mv-font-sub);
  font-size: var(--mv-fs-h4);
  margin: 0 0 var(--mv-space-xs);
}

.mv-card__body {
  font-size: var(--mv-fs-small);
  line-height: 1.72;
  color: var(--mv-ink-soft);
  margin: 0;
}

/* ==========================================================================
   6. IDÉZET-SÁV — nagy, bársonyon
   ========================================================================== */

.mv-quote {
  text-align: center;
  max-width: 52rem;
  margin-inline: auto;
  padding-inline: var(--mv-gutter);
}

.mv-quote__text {
  font-family: var(--mv-font-heading);
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.75rem);
  line-height: 1.34;
  color: var(--mv-ivory);
  margin: 0 0 var(--mv-space-lg);
  max-width: none;
}

.mv-quote__cite {
  display: block;
  font-family: var(--mv-font-ui);
  font-size: var(--mv-fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mv-champagne);
  font-style: normal;
}

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

.mv-footer,
.elementor-location-footer {
  background: var(--mv-noir);
  color: var(--mv-on-dark-soft);
}

.elementor-location-footer h1, .elementor-location-footer h2,
.elementor-location-footer h3, .elementor-location-footer h4,
.elementor-location-footer h5, .elementor-location-footer h6 {
  color: var(--mv-on-dark);
}

.elementor-location-footer a { color: var(--mv-on-dark-soft); }
.elementor-location-footer a:hover { color: var(--mv-champagne); }

/* ==========================================================================
   8. HÍRLEVÉL — a meglévő MailerLite űrlaphoz
   ========================================================================== */

.mv-newsletter {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}

.mv-newsletter input[type="text"],
.mv-newsletter input[type="email"] {
  text-align: center;
  color: var(--mv-on-dark);
  border-bottom-color: var(--mv-rule-on-dark);
}

.mv-newsletter input::placeholder { color: var(--mv-on-dark-soft); }

/* ==========================================================================
   9. HASZNOS SEGÉDOSZTÁLYOK
   Ezeket az Elementorban egy konténerre rátéve azonnal működnek.
   ========================================================================== */

.mv-center      { text-align: center; }
.mv-measure     { max-width: var(--mv-measure); }
.mv-measure-narrow { max-width: var(--mv-measure-narrow); }
.mv-mx-auto     { margin-inline: auto; }

.mv-mt-sm { margin-top: var(--mv-space-sm); }
.mv-mt-md { margin-top: var(--mv-space-md); }
.mv-mt-lg { margin-top: var(--mv-space-lg); }
.mv-mt-xl { margin-top: var(--mv-space-xl); }

.mv-pad-none { padding: 0 !important; }
.mv-gold  { color: var(--mv-champagne-dk); }
.mv-mute  { color: var(--mv-ink-mute); }

.mv-caps {
  font-family: var(--mv-font-ui);
  font-size: var(--mv-fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ==========================================================================
   10. RESZPONZÍV FINOMHANGOLÁS
   ========================================================================== */

@media (max-width: 860px) {
  .mv-stack { grid-template-columns: 1fr; }
  .mv-stack__a, .mv-stack__b {
    grid-column: 1 / -1;
    transform: none;
  }
  .mv-stack__b { margin-top: var(--mv-space-sm); box-shadow: none; }
  .mv-hero { min-height: 78vh; }
}

@media (max-width: 600px) {
  .mv-hero__actions { flex-direction: column; }
  .mv-hero__actions > * { width: 100%; }
  .mv-dropcap::first-letter { font-size: 2.8em; }
}

/* Nyomtatás — a bársony és a szemcse felesleges */
@media print {
  .mv-grain, .mv-hero__scroll { display: none !important; }
  body { background: #fff; color: #000; }
  .mv-section--noir, .mv-section--navy { background: #fff !important; color: #000 !important; }
}