/* ==========================================================================
   MODIVIAM — WEBSHOP
   --------------------------------------------------------------------------
   Ez a réteg tölt be UTOLSÓKÉNT a bolti oldalakon, tehát ez az irányadó.
   Cél: ömlesztett terméklista helyett önálló, lekerekített termékkártyák,
   tiszta szekcióhatárok, és olvasható leírások.

   Csak megjelenés — semmilyen WooCommerce sablon nincs felülírva.
   ========================================================================== */

:root {
  --mv-card-radius: 18px;
  --mv-card-bg: #101318;
  --mv-card-bg-hover: #141821;
  --mv-plate: #F2EDE4;          /* a fehér hátterű termékfotók lapja */
}

/* ==========================================================================
   1. SZEKCIÓK ELVÁLASZTÁSA
   ========================================================================== */

body.mv-theme.woocommerce-page .site-main,
body.mv-theme .woocommerce .site-main {
  padding-block: clamp(3rem, 6vw, 6rem);
}

body.mv-theme .woocommerce-products-header,
body.mv-theme .woocommerce .related,
body.mv-theme .woocommerce .upsells {
  padding-top: clamp(3rem, 6vw, 5.5rem);
  margin-top: clamp(3rem, 6vw, 5.5rem);
  border-top: 1px solid var(--mv-line);
}

body.mv-theme .woocommerce-products-header { border-top: 0; margin-top: 0; }

/* ==========================================================================
   2. TERMÉKRÁCS
   Nagy térköz, egyértelmű kártyák.
   ========================================================================== */

body.mv-theme .woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(clamp(250px, 24vw, 330px), 1fr)) !important;
  gap: clamp(1.5rem, 2.6vw, 2.75rem) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.mv-theme .woocommerce ul.products::before,
body.mv-theme .woocommerce ul.products::after { content: none !important; }

/* --- A kártya ------------------------------------------------------------- */

body.mv-theme .woocommerce ul.products li.product {
  position: relative;
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  display: flex !important;
  flex-direction: column;
  background: var(--mv-card-bg);
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-card-radius);
  overflow: hidden;
  text-align: left;
  padding: 0 !important;
  transition:
    transform 520ms var(--mv-e),
    border-color 520ms var(--mv-e),
    background-color 520ms var(--mv-e),
    box-shadow 520ms var(--mv-e);
}

body.mv-theme .woocommerce ul.products li.product:hover {
  transform: translateY(-6px);
  border-color: rgba(198, 169, 124, 0.45);
  background: var(--mv-card-bg-hover);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}

/* --- Termékkép ------------------------------------------------------------
   A fotók fehér hátterűek; halvány elefántcsont lapra tesszük őket, hogy
   szándékosnak hassanak a sötét kártyán, ne kilyukasztott foltnak.        */

body.mv-theme .woocommerce ul.products li.product .mv-thumb-wrap,
body.mv-theme .woocommerce ul.products li.product > a:first-of-type {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--mv-plate);
  border-radius: var(--mv-card-radius) var(--mv-card-radius) 0 0;
}

body.mv-theme .woocommerce ul.products li.product img {
  margin: 0 !important;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
  clip-path: none !important;
  transform: scale(1);
  transition: transform 900ms var(--mv-e);
}

body.mv-theme .woocommerce ul.products li.product:hover img {
  transform: scale(1.05) !important;
}

/* --- Szövegblokk ----------------------------------------------------------- */

body.mv-theme .woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--mv-font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.4rem) !important;
  line-height: 1.2 !important;
  color: var(--mv-text) !important;
  padding: clamp(1.15rem, 2vw, 1.6rem) clamp(1.15rem, 2vw, 1.6rem) 0 !important;
  margin: 0 !important;
  transition: color 420ms var(--mv-e);
}

body.mv-theme .woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
  color: var(--mv-gold) !important;
}

body.mv-theme .woocommerce ul.products li.product .price {
  font-family: var(--mv-font-ui) !important;
  font-size: 0.8125rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.14em !important;
  color: var(--mv-text-soft) !important;
  padding: 0.55rem clamp(1.15rem, 2vw, 1.6rem) 0 !important;
  margin: 0 !important;
  display: block;
}

body.mv-theme .woocommerce ul.products li.product .price ins {
  text-decoration: none;
  color: var(--mv-gold) !important;
}

body.mv-theme .woocommerce ul.products li.product .price del { opacity: 0.45; }

/* --- Gomb a kártyán -------------------------------------------------------
   Mindig látszik (nem hoveren bukkan elő), így érintőképernyőn is elérhető,
   és a kártya alja nem ugrál.                                             */

body.mv-theme .woocommerce ul.products li.product .button {
  margin: auto clamp(1.15rem, 2vw, 1.6rem) clamp(1.15rem, 2vw, 1.6rem) !important;
  margin-top: clamp(1.15rem, 2vw, 1.6rem) !important;
  align-self: stretch;
  opacity: 1 !important;
  transform: none !important;
  border-radius: 999px !important;
  border: 1px solid var(--mv-line) !important;
  padding: 0.95em 1.5em !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.2em !important;
}

/* ==========================================================================
   2b. KATEGÓRIAKÁRTYÁK
   A Woo a kategóriánál a KÉPET ÉS A CÍMET is egyetlen linkbe teszi. Emiatt a
   cím ráesett az elefántcsont lapra, világos betűvel — vagyis olvashatatlan
   volt. Itt szétválasztjuk: a kép fent, alatta sötét sáv a névvel.
   ========================================================================== */

/* A KÉPEK MARADNAK — a legutóbbi visszajelzés szerint hiányoztak.
   A kártya lekerekített, hoverre megemelkedik, és a név sötét sávban ül. */

/* A RÁCS három oszlop marad. A rugalmas `auto-fill` szűkebb konténerben
   egyetlen oszlopra esett vissza, ezért kerültek egymás alá. */
body.mv-theme .woocommerce ul.products.columns-3,
body.mv-theme .woocommerce ul.products.elementor-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 900px) {
  body.mv-theme .woocommerce ul.products.columns-3,
  body.mv-theme .woocommerce ul.products.elementor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  body.mv-theme .woocommerce ul.products.columns-3,
  body.mv-theme .woocommerce ul.products.elementor-grid {
    grid-template-columns: 1fr !important;
  }
}

body.mv-theme .woocommerce ul.products li.product-category {
  background: linear-gradient(160deg, var(--mv-card-bg) 0%, #0C1420 100%) !important;
  border: 1px solid var(--mv-line) !important;
  border-radius: var(--mv-card-radius) !important;
  overflow: hidden !important;
  position: relative;
  min-height: clamp(9rem, 14vw, 13rem);
  transition:
    transform 520ms var(--mv-e),
    border-color 520ms var(--mv-e),
    box-shadow 520ms var(--mv-e);
}

body.mv-theme .woocommerce ul.products li.product-category:hover {
  transform: translateY(-6px);
  border-color: rgba(198, 169, 124, 0.45) !important;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}

/* Halvány tükröződés a kártya alján. */
body.mv-theme .woocommerce ul.products li.product-category::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(198, 169, 124, 0.07));
}

body.mv-theme .woocommerce ul.products li.product-category > a {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  background: transparent !important;
  border-radius: var(--mv-card-radius);
  overflow: hidden;
  height: 100%;
  min-height: inherit;
}

/* A kategóriaképeket az oldal saját (Elementor) stílusa halványítja
   `li.product-category img { opacity: .45 }` szabállyal — ettől néztek ki
   sötétítve. Visszaállítjuk teljes fedettségre. */
body.mv-theme .woocommerce ul.products li.product-category img {
  border-radius: 0 !important;
  background: var(--mv-plate);
  opacity: 1 !important;
  filter: none !important;
}

body.mv-theme .woocommerce ul.products li.product-category h2,
body.mv-theme .woocommerce ul.products li.product-category .woocommerce-loop-category__title {
  font-family: var(--mv-font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.08rem) !important;
  color: var(--mv-text) !important;
  background: transparent;
  margin: 0 !important;
  padding: 0.85rem 0.15rem 0 !important;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  transition: color 420ms var(--mv-e), background-color 420ms var(--mv-e);
}

body.mv-theme .woocommerce ul.products li.product-category:hover h2,
body.mv-theme .woocommerce ul.products li.product-category:hover .woocommerce-loop-category__title {
  color: var(--mv-dresden-deep, #262F40) !important;
  background: transparent;
}

/* A darabszám halkabb, mint a név. */
body.mv-theme .woocommerce ul.products li.product-category h2 .count,
body.mv-theme .woocommerce ul.products li.product-category .count {
  background: transparent !important;
  color: var(--mv-text-mute) !important;
  font-family: var(--mv-font-ui) !important;
  font-size: 0.75rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.1em;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* --- Akció-jelölő ---------------------------------------------------------- */

body.mv-theme .woocommerce span.onsale {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  right: auto;
  z-index: 3;
  min-height: 0;
  min-width: 0;
  line-height: 1;
  border-radius: 999px;
  background: var(--mv-noir, #08090B);
  color: var(--mv-gold);
  font-family: var(--mv-font-ui);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.6em 1em;
  margin: 0;
}

/* ==========================================================================
   2c. ELEMENTORBAN ÉPÍTETT TERMÉKKÁRTYÁK
   A webshop termékei nem WooCommerce elemek, hanem kézzel összerakott
   Elementor konténerek. A JS jelöli meg őket `mv-pcard` osztállyal.
   ========================================================================== */

/* A rács, amibe a szétszórt termékszekciókat összegyűjtjük. */
body.mv-theme .mv-pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(260px, 26vw, 360px), 1fr));
  gap: clamp(1.5rem, 2.6vw, 2.75rem);
  width: 100%;
  max-width: var(--mv-maxw, 1320px);
  margin-inline: auto;
  padding-inline: var(--mv-gutter, 1.5rem);
  padding-block: clamp(2rem, 4vw, 4rem);
  align-items: stretch;
}

body.mv-theme .mv-pgrid__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

body.mv-theme .mv-pgrid__item > .mv-pcard { flex: 1 1 auto; }

/* A kiürült eredeti szekciók — elrejtve, nem törölve. */
body.mv-theme .mv-emptied { display: none !important; }

/* MAGA A KÁRTYA VILÁGOS.
   Korábban az egyes widgetekre tettem világos hátteret, de köztük ott maradt
   a kártya sötét háttere és a konténer térköze — ettől lett zebracsíkos.
   Most a kártya alapja világos, a widgetek átlátszók, a térköz nulla:
   egyetlen összefüggő világos tömb, a tetején a képpel. */
/* A SZELEKTOR SZÁNDÉKOSAN HOSSZÚ.
   A sötét réteg `body.mv-theme .elementor:not(.elementor-location-header) .e-con`
   szabálya minden konténert átlátszóra állít — és a kártya maga is `.e-con`.
   Az a szelektor erősebb volt, ezért maradt a kártya háttere átlátszó,
   és a sötét szöveg olvashatatlanul ült a sötét lapon. */
body.mv-theme .elementor:not(.elementor-location-header):not(.elementor-location-footer) .e-con.mv-pcard,
body.mv-theme .mv-pgrid .e-con.mv-pcard,
body.mv-theme .mv-pcard {
  width: auto !important;
  max-width: none !important;
  background: var(--mv-plate) !important;
  background-color: var(--mv-plate) !important;
  border: 1px solid var(--mv-line) !important;
  border-radius: var(--mv-card-radius) !important;
  overflow: hidden !important;
  padding: 0 0 clamp(1.25rem, 2.4vw, 1.9rem) !important;
  gap: 0 !important;
  row-gap: 0 !important;
  /* A KÁRTYA TARTALMA FELÜLRŐL KEZDŐDIK.
     A főoldali szekciókhoz írt „függőlegesen középre" szabályom a kártyákra
     is ráült: a hosszabb szövegű középső kártyánál a tartalom kitöltötte a
     dobozt és a kép kiért a tetejére, a rövidebb kettőnél viszont középre
     csúszott — ezért maradt fehér sáv a kép fölött. */
  justify-content: flex-start !important;
  align-content: flex-start !important;
  transition:
    transform 520ms var(--mv-e),
    border-color 520ms var(--mv-e),
    background-color 520ms var(--mv-e),
    box-shadow 520ms var(--mv-e);
}

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

/* Minden widget a kártyán belül ÁTLÁTSZÓ és térköz nélküli — így nincs
   sötét sáv a szövegblokkok között. */
body.mv-theme .mv-pcard .elementor-widget,
body.mv-theme .mv-pcard .e-con,
body.mv-theme .mv-pcard .e-con-inner {
  background: transparent !important;
  margin-block: 0 !important;
  gap: 0 !important;
}

/* A kép a kártya tetejét tölti ki, keret nélkül. */
body.mv-theme .mv-pcard > .elementor-widget-image,
body.mv-theme .mv-pcard .elementor-widget-image {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

/* A kártyán belül a KÁRTYA vág, nem a kép: a képnek nincs saját kerekítése,
   árnyéka és tükröződése — különben doboz a dobozban hatást keltene.
   A szelektor azért hosszú, mert a globális képszabály (`.elementor:not(...)
   .elementor-widget-image img`) erősebb volt, és a 18px kerekítés miatt úgy
   tűnt, mintha a kép nem a kártya tetején kezdődne. */
body.mv-theme .elementor:not(.elementor-location-header):not(.elementor-location-footer) .mv-pcard .elementor-widget-image img,
body.mv-theme .mv-pgrid .mv-pcard .elementor-widget-image img,
body.mv-theme .mv-pcard .elementor-widget-image img {
  width: 100% !important;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
  filter: none !important;
  transform: scale(1) !important;
  transition: transform 900ms var(--mv-e);
}

/* A képet `<a>` fogja körül, ami INLINE elem — a sorköze fehér csíkot hagyott
   a kép fölött a kártya tetején. A nulla sormagasság és betűméret ezt zárja ki.
   Tükröződés sincs a kártyán belül: ott a kép a kártya része, nem önálló lap. */
body.mv-theme .mv-pcard .elementor-widget-image,
body.mv-theme .mv-pcard .elementor-widget-image a {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  transform: none !important;
  -webkit-box-reflect: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.mv-theme .mv-pcard:hover .elementor-widget-image img {
  transform: scale(1.05) !important;
}

/* Cím, ár, leírás — közös belső térköz, hogy a kártya ne legyen ömlesztett. */
body.mv-theme .mv-pcard .elementor-widget-heading,
body.mv-theme .mv-pcard .elementor-widget-text-editor {
  padding-inline: clamp(1.25rem, 2.4vw, 1.9rem) !important;
  margin: 0 !important;
}

body.mv-theme .mv-pcard .elementor-widget-heading {
  padding-top: clamp(1.25rem, 2.4vw, 1.9rem) !important;
}

body.mv-theme .mv-pcard .elementor-widget-heading .elementor-heading-title {
  font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem) !important;
  margin: 0 !important;
  color: #12161A !important;
  transition: color 420ms var(--mv-e);
}

body.mv-theme .mv-pcard:hover .elementor-heading-title { color: #7A6236 !important; }

/* Az ELSŐ szövegblokk az ár — kisebb, tág betűközzel, arany hajszálvonal alatt. */
/* NINCS elválasztó vonal az ár alatt. Ez törte meg a világos hátteret a
   kártya közepén — úgy nézett ki, mintha újraindulna a lap. */
body.mv-theme .mv-pcard .elementor-widget-text-editor:first-of-type,
body.mv-theme .mv-pcard .elementor-widget-heading + .elementor-widget-text-editor {
  padding-top: 0.5rem !important;
  padding-bottom: 1.1rem !important;
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
}

body.mv-theme .mv-pcard .elementor-widget-heading + .elementor-widget-text-editor p {
  font-family: var(--mv-font-ui) !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.14em !important;
  color: #7A6236 !important;
  margin: 0 !important;
}

body.mv-theme .mv-pcard .elementor-widget-heading + .elementor-widget-text-editor {
  border-bottom-color: rgba(26, 31, 36, 0.12) !important;
}

/* A kártya ALSÓ FELE eleve világos — nincs fehér alkártya a fekete kártyán
   belül. A kép alatti teljes szövegblokk (cím, ár, leírás) egy összefüggő
   világos lap. */
body.mv-theme .mv-pcard .elementor-widget-text-editor:last-of-type {
  color: #2A3138 !important;
  margin: 0 !important;
  padding: 0 clamp(1.25rem, 2.4vw, 1.9rem) clamp(1.25rem, 2.4vw, 1.9rem) !important;
  border-radius: 0 !important;
}

body.mv-theme .mv-pcard .elementor-widget-text-editor:last-of-type p,
body.mv-theme .mv-pcard .elementor-widget-text-editor:last-of-type li,
body.mv-theme .mv-pcard .elementor-widget-text-editor:last-of-type em,
body.mv-theme .mv-pcard .elementor-widget-text-editor:last-of-type strong {
  font-size: 0.9rem !important;
  line-height: 1.8 !important;
  color: #2A3138 !important;
}

body.mv-theme .mv-pcard .elementor-widget-text-editor:last-of-type strong {
  color: #12161A !important;
}

/* A gombot tartalmazó testvérkonténer a kártya lábaként viselkedik. */
body.mv-theme .mv-pcard__foot {
  padding: 0 clamp(1.25rem, 2.4vw, 1.9rem) clamp(1.25rem, 2.4vw, 1.9rem) !important;
  margin-top: -0.5rem !important;
}

body.mv-theme .mv-pcard__foot .elementor-button {
  border-radius: 999px !important;
  width: 100%;
}

/* ==========================================================================
   2d. GOMBSÁVOK
   A két gombnak nem kell teljes szélességű, vastag sáv. Összehúzzuk, és a
   gombok középre kerülnek, nem a sáv aljára.
   ========================================================================== */

body.mv-theme .mv-band--slim {
  /* Két gomb nem érdemel vastag sávot: épp csak annyi levegő, hogy ne
     tapadjon a fölötte és alatta lévő tartalomhoz. */
  padding-block: 0.6rem !important;
  min-height: 0 !important;
  height: auto !important;
  align-items: center !important;
  background: transparent !important;
}

body.mv-theme .mv-band--slim > .e-con-inner,
body.mv-theme .mv-band--slim .e-con {
  min-height: 0 !important;
  padding-block: 0 !important;
}

body.mv-theme .mv-band--slim .e-con-inner,
body.mv-theme .mv-band--slim .e-con {
  align-items: center !important;
  align-content: center !important;
}

body.mv-theme .mv-band--slim .elementor-widget-button {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

body.mv-theme .mv-band--slim .elementor-button {
  border-radius: 999px !important;
}

/* ==========================================================================
   3. EGY TERMÉK OLDALA
   ========================================================================== */

body.mv-theme .woocommerce div.product div.images img {
  border-radius: var(--mv-card-radius);
  background: var(--mv-plate);
  clip-path: none !important;
}

body.mv-theme .woocommerce div.product .flex-control-thumbs img {
  border-radius: 10px;
}

/* A LEÍRÁS világos lapon, sötét betűvel — hosszabb szövegnél ez olvasható
   a legjobban, és kellemesen megtöri a sötét oldalt. */
body.mv-theme .woocommerce div.product .woocommerce-tabs .panel,
body.mv-theme .woocommerce div.product .woocommerce-Tabs-panel {
  background: var(--mv-plate) !important;
  color: #1A1F24 !important;
  border-radius: var(--mv-card-radius);
  padding: clamp(1.75rem, 4vw, 3.25rem) !important;
  max-width: none !important;
}

body.mv-theme .woocommerce div.product .woocommerce-tabs .panel h1,
body.mv-theme .woocommerce div.product .woocommerce-tabs .panel h2,
body.mv-theme .woocommerce div.product .woocommerce-tabs .panel h3,
body.mv-theme .woocommerce div.product .woocommerce-tabs .panel strong,
body.mv-theme .woocommerce div.product .woocommerce-tabs .panel b {
  color: #12161A !important;
}

body.mv-theme .woocommerce div.product .woocommerce-tabs .panel p,
body.mv-theme .woocommerce div.product .woocommerce-tabs .panel li,
body.mv-theme .woocommerce div.product .woocommerce-tabs .panel td,
body.mv-theme .woocommerce div.product .woocommerce-tabs .panel th {
  color: #3A424A !important;
}

body.mv-theme .woocommerce div.product .woocommerce-tabs .panel a { color: #7A6236 !important; }

/* Kosárba gomb a termékoldalon */
body.mv-theme .woocommerce div.product form.cart .button,
body.mv-theme .woocommerce button.button.alt {
  border-radius: 999px !important;
}

body.mv-theme .woocommerce .quantity .qty {
  border-radius: 999px !important;
  border: 1px solid var(--mv-line) !important;
  min-height: 3.4rem;
}

/* ==========================================================================
   3b. A TERMÉK ALOLDAL VILÁGOS
   A hosszú összetevő- és illatleírásokat sötét alapon fárasztó olvasni.
   Az egész aloldal világos elefántcsontra vált, sötét betűvel — a fejléc és
   a lábléc marad sötét, azok a márka kerete.
   ========================================================================== */

/* A LAP alapja világos… */
html:has(body.single-product),
body.mv-theme.single-product {
  background-color: var(--mv-plate) !important;
  background-image: none !important;
}

/* …és a tartalmi részen MINDEN elem háttere átlátszó, hogy a világos alap
   mindenhol átüssön. Így nem maradhat sötét sáv se középen, se a széleken —
   egyesével sosem sikerült mindet megtalálni. */
body.mv-theme.single-product .elementor:not(.elementor-location-header):not(.elementor-location-footer),
body.mv-theme.single-product .elementor:not(.elementor-location-header):not(.elementor-location-footer) *,
body.mv-theme.single-product .site-main,
body.mv-theme.single-product .site-main *,
body.mv-theme.single-product #content,
body.mv-theme.single-product .woocommerce,
body.mv-theme.single-product .woocommerce * {
  background-color: transparent !important;
  background-image: none !important;
}

/* Kivételek: amiknek szándékosan van saját felülete. */
body.mv-theme.single-product .elementor-button::before,
body.mv-theme.single-product .mv-depth__tint {
  background-color: initial;
}

/* A fejléc alatti fátyol a világos lapon szürke sávnak látszott — ott nem kell,
   mert a fejléc saját sötét háttere adja a kontrasztot. */
body.mv-theme.single-product .modiviam-header::before { display: none !important; }

/* A fejléc SZÍNÉT innen is kivettük: a paletta réteg festi, minden lapon
   ugyanúgy. Csak a homályosítást kapcsoljuk ki, mert az a tömör felület
   alatt fölösleges. */
body.mv-theme.single-product .modiviam-header {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.mv-theme.single-product h1,
body.mv-theme.single-product h2,
body.mv-theme.single-product h3,
body.mv-theme.single-product h4,
body.mv-theme.single-product .elementor-heading-title,
body.mv-theme.single-product .product_title,
body.mv-theme.single-product strong,
body.mv-theme.single-product b {
  color: #12161A !important;
}

body.mv-theme.single-product p,
body.mv-theme.single-product li,
body.mv-theme.single-product td,
body.mv-theme.single-product th,
body.mv-theme.single-product .elementor-widget-text-editor,
body.mv-theme.single-product .elementor-icon-list-text,
body.mv-theme.single-product .price,
body.mv-theme.single-product .woocommerce-breadcrumb {
  color: #3A424A !important;
}

body.mv-theme.single-product .elementor-icon-list-icon svg,
body.mv-theme.single-product .elementor-icon-list-icon i { color: #7A6236 !important; fill: #7A6236 !important; }

/* Gombok világos alapon */
body.mv-theme.single-product .elementor-button,
body.mv-theme.single-product .woocommerce a.button,
body.mv-theme.single-product .woocommerce button.button {
  color: #12161A !important;
  border-color: rgba(26, 31, 36, 0.28) !important;
}

body.mv-theme.single-product .elementor-button:hover,
body.mv-theme.single-product .woocommerce a.button:hover,
body.mv-theme.single-product .woocommerce button.button:hover {
  color: #12161A !important;
  border-color: #7A6236 !important;
}

/* Mezők és vonalak világos alapon */
body.mv-theme.single-product input,
body.mv-theme.single-product textarea,
body.mv-theme.single-product select {
  color: #12161A !important;
  border-color: rgba(26, 31, 36, 0.28) !important;
}

body.mv-theme.single-product .woocommerce table.shop_table td,
body.mv-theme.single-product .woocommerce table.shop_table th,
body.mv-theme.single-product .product_meta {
  border-color: rgba(26, 31, 36, 0.14) !important;
  color: #3A424A !important;
}

/* A képek ne kapjanak sötét tükröződést a világos lapon. */
body.mv-theme.single-product .elementor-widget-image::after { content: none !important; }

body.mv-theme.single-product .elementor-widget-image {
  box-shadow: 0 24px 50px -30px rgba(26, 31, 36, 0.45) !important;
}

/* A FEJLÉC ÉS A LÁBLÉC marad sötét — ezek a márka kerete.
   A szabály a fenti „minden átlátszó" után áll, ezért érvényesül. */
/* A LÁBLÉC innen kikerült: a termékoldalon is a paletta réteg festi, egyetlen
   végigfutó márkakék átmenettel, ahogy a főoldalon. Ez a szabály itt a régi
   éjkéket kényszerítette rá, és minden belső szekcióra külön is — így a
   lábléc a bolti oldalakon fekete csíkokra esett szét. */
/* (A fejléc színe innen kikerült: a paletta réteg festi, minden lapon
   ugyanúgy — márkakék, és csak a főoldal tetején áttetsző. Ez a szabály itt
   a régi éjkéket kényszerítette a termékoldalra.) */
body.mv-theme.single-product .elementor-location-header {
  background-color: transparent !important;
}

body.mv-theme.single-product .elementor-location-footer,
body.mv-theme.single-product .elementor-location-footer *,
body.mv-theme.single-product .elementor-location-header * {
  color: var(--mv-text-soft) !important;
}

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

/* ==========================================================================
   4. KOSÁR ÉS PÉNZTÁR
   ========================================================================== */

body.mv-theme .woocommerce-cart table.cart,
body.mv-theme .woocommerce-checkout #payment,
body.mv-theme .woocommerce .cart_totals {
  background: var(--mv-card-bg) !important;
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-card-radius);
  padding: clamp(1.25rem, 3vw, 2.25rem);
}

body.mv-theme .woocommerce-cart table.cart img { border-radius: 12px; }

body.mv-theme .woocommerce-checkout #payment div.payment_box {
  background: var(--mv-plate) !important;
  color: #3A424A !important;
  border-radius: 12px;
}

body.mv-theme .woocommerce-message,
body.mv-theme .woocommerce-info,
body.mv-theme .woocommerce-error {
  border-radius: var(--mv-card-radius);
  border-left-width: 3px;
}

/* ==========================================================================
   5. LAPOZÓ ÉS RENDEZÉS
   ========================================================================== */

body.mv-theme .woocommerce nav.woocommerce-pagination ul li a,
body.mv-theme .woocommerce nav.woocommerce-pagination ul li span {
  border-radius: 999px !important;
  min-width: 2.5rem;
  text-align: center;
}

body.mv-theme .woocommerce .woocommerce-ordering select {
  border-radius: 999px !important;
  border: 1px solid var(--mv-line) !important;
  padding: 0.7em 1.2em !important;
  background: transparent !important;
  color: var(--mv-text-soft) !important;
}

/* ==========================================================================
   6. RESZPONZÍV
   ========================================================================== */

@media (max-width: 768px) {
  body.mv-theme .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
  body.mv-theme .woocommerce ul.products li.product .button {
    font-size: 0.625rem !important;
    letter-spacing: 0.14em !important;
  }
}

@media (max-width: 420px) {
  body.mv-theme .woocommerce ul.products { grid-template-columns: 1fr !important; }
}