/*
Theme Name: Löwenkind
Theme URI: https://loewenkind.hu/
Author: BaraSuite
Author URI: https://loewenkind.hu/
Description: Természetes gyógynövény-illatpárnák és babatermékek webáruháza. Testreszabható kezdőlap, termékoldalak és tartalmi oldalak, teljes WooCommerce-támogatással.
Version: 5.13.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: loewenkind-hu
Tags: e-commerce, custom-colors, custom-menu, custom-logo, translation-ready
*/

@font-face{
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/barlow-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/barlow-400-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}
@font-face{
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/barlow-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/barlow-500-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}
@font-face{
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/barlow-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/barlow-600-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}
@font-face{
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/barlow-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/barlow-700-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}

:root{
  --lk-primary: #8EB7AD;
  --lk-primary-dark: #6f9d92;
  --lk-primary-tint: #EAF2F0;
  --lk-text: #676766;
  --lk-dark: #1a1a1a;
  --lk-bg: #ffffff;
  --lk-bg-soft: #F7F5F2;
  --lk-border: #E5E1DB;
  --lk-white: #ffffff;
  --lk-error: #C0392B;
  --lk-radius-s: 4px;
  --lk-radius-m: 8px;
  --lk-radius-l: 16px;
  --lk-radius-pill: 999px;
  --lk-container: 1280px;
  --lk-pad: 24px;
  --font-heading: 'Barlow', sans-serif;
  --font-body: 'Barlow', sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-body) !important;
  font-weight: 400;
  color: var(--lk-text) !important;
  background: var(--lk-bg);
  line-height: 1.5;
  font-size: 16px;
}
img,svg,video,iframe{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
/* !important a font-family/font-weight/color-on: a BodyShape-projekt
   tanulsága szerint az Elementor globális Kit-tipográfiája (Site Settings →
   Theme Style → Headings) ugyanezekre a nyers h1-h6 elemekre ad ki alap-
   értéket, jellemzően a témánk stíluslapja UTÁN betöltve — enélkül csendben
   felülírja ezt, és a betűtípus/szín az Elementor Kit alapértékére esik
   vissza a saját dizájnunk helyett. */
h1,h2,h3,h4{
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  color: var(--lk-dark) !important;
  margin: 0 0 .5em;
  line-height: 1.2;
}
h1{ font-size: clamp(28px, 4vw, 44px); }
h2{ font-size: clamp(24px, 3vw, 34px); }
h3{ font-size: clamp(19px, 2.2vw, 24px); }
p{ margin: 0 0 1em; }

.container{
  max-width: var(--lk-container);
  margin: 0 auto;
  padding: 0 var(--lk-pad);
}

/* padding-top/bottom (nem a `padding` shorthand!) — mindig .container-rel
   együtt szerepel (lásd woocommerce.php/page.php/index.php/single.php), és a
   shorthand felülírná a .container bal/jobb paddingjét ugyanazon az elemen,
   ami a shop/kosár rácsot élben a viewport szélére húzta ki. */
.section{ padding-top: 56px; padding-bottom: 56px; }
.section--soft{ background: var(--lk-bg-soft); }
.section-title{ text-align: center; margin-bottom: 32px; }

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--lk-radius-pill);
  background: var(--lk-primary);
  color: var(--lk-white);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid var(--lk-primary);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.btn:hover{ background: var(--lk-primary-dark); border-color: var(--lk-primary-dark); }
.btn--outline{ background: transparent; color: var(--lk-dark); border-color: var(--lk-dark); }
.btn--outline:hover{ background: var(--lk-dark); color: var(--lk-white); }
.btn--sm{ padding: 9px 20px; font-size: 14px; border-radius: var(--lk-radius-s); }

.pill{
  display: inline-block;
  padding: 4px 14px;
  border-radius: var(--lk-radius-pill);
  background: var(--lk-primary-tint);
  color: var(--lk-primary-dark);
  font-size: 13px;
  font-weight: 600;
}

.skip-link{
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--lk-dark);
  color: #fff;
  padding: 10px 16px;
  z-index: 10000;
}
.skip-link:focus{ left: 16px; top: 16px; }

/* ---------- Announcement bar ---------- */
/* Méretek/betűjellemzők az élő referenciáról (loewenkind.net .announcement-bar
   computed style: h 40px, font-size 12px, weight 500, szín #F8F8F8). */
.announcement-bar{
  background: var(--lk-primary);
  color: #f8f8f8;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  letter-spacing: .02em;
}

/* ---------- Header ---------- */
.site-header{
  border-bottom: 1px solid var(--lk-border);
  position: sticky;
  top: 0;
  background: var(--lk-white);
  z-index: 500;
}
.site-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px var(--lk-pad);
  max-width: var(--lk-container);
  margin: 0 auto;
  position: relative;
}
.site-logo img{ height: 36px; width: auto; }
.primary-nav > ul{ display: flex; gap: 28px; }
.primary-nav a{
  font-weight: 600;
  font-size: 15px;
  color: var(--lk-dark);
}
.primary-nav a:hover{ color: var(--lk-primary-dark); }
.header-icons{ display: flex; align-items: center; gap: 18px; }
.header-icons a, .header-icons button, .header-icons label{
  background: none;
  border: none;
  cursor: pointer;
  color: var(--lk-dark);
  display: inline-flex;
  position: relative;
}
/* A kosár/keresés ikon <label>-ré alakítása után (checkbox-hack) az SVG-k a
   .header-icons flex-sorban 0 szélességre zsugorodtak, mert csak a HTML
   width="20" attribútumra támaszkodtak, CSS-szélesség nélkül — flex-item
   kontextusban ez auto-alapú méretezési hibát okozott. Explicit méret és
   `flex: none` kell nekik. */
.header-icons svg{ width: 20px; height: 20px; flex: none; }
.cart-count{
  position: absolute;
  top: -8px;
  right: -10px;
  background: var(--lk-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobilmenü — rejtett checkbox + label ("checkbox hack"), NEM JavaScripttel,
   így nem függ semmilyen szkript-betöltési sorrendtől. */
.lk-nav-toggle{ position: absolute; opacity: 0; pointer-events: none; }
/* Magasabb specificitás kell, mint a ".header-icons label" szabálynak
   (ami a kosár/keresés <label>-ök miatt került be), különben az felülírja
   ezt, és a hamburger asztali nézetben is látszana. */
.header-icons label.menu-toggle{ display: none; }
label.menu-toggle svg:last-child{ display: none; }
.lk-nav-toggle:checked ~ .header-icons label.menu-toggle svg:first-child{ display: none; }
.lk-nav-toggle:checked ~ .header-icons label.menu-toggle svg:last-child{ display: inline-flex; }

/* Kosár-oldalsáv (drawer) — ugyanaz a checkbox-hack, mint a mobilmenünél.
   A checkbox és a .lk-cart-drawer közös szülője a .site-header__inner, hogy
   a `~` testvér-szelektor működjön. */
.lk-cart-toggle{ position: absolute; opacity: 0; pointer-events: none; }
.lk-cart-open{ cursor: pointer; }

.lk-cart-drawer{ position: fixed; inset: 0; z-index: 1000; visibility: hidden; }
.lk-cart-toggle:checked ~ .lk-cart-drawer{ visibility: visible; }

.lk-cart-drawer__overlay{
  position: absolute; inset: 0;
  background: rgba(28, 26, 23, .45);
  opacity: 0;
  transition: opacity .25s ease;
  cursor: pointer;
}
.lk-cart-toggle:checked ~ .lk-cart-drawer .lk-cart-drawer__overlay{ opacity: 1; }

.lk-cart-drawer__panel{
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 100vw);
  background: var(--lk-white);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s ease;
  box-shadow: -8px 0 24px rgba(0,0,0,.12);
}
.lk-cart-toggle:checked ~ .lk-cart-drawer .lk-cart-drawer__panel{ transform: translateX(0); }

.lk-cart-drawer__head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid var(--lk-border);
  font-weight: 700; font-size: 18px;
}
.lk-cart-drawer__close{ cursor: pointer; font-size: 26px; line-height: 1; color: var(--lk-text); }
.lk-shipping-bar{ padding: 16px 24px; border-bottom: 1px solid var(--lk-border); }
.lk-shipping-bar__text{ font-size: 13px; color: var(--lk-text); margin: 0 0 8px; text-align: center; }
.lk-shipping-bar__text--done{ color: var(--lk-primary-dark); font-weight: 600; }
.lk-shipping-bar__track{ height: 6px; border-radius: 100px; background: var(--lk-bg-soft); overflow: hidden; }
.lk-shipping-bar__fill{ height: 100%; background: var(--lk-primary); border-radius: 100px; transition: width .3s ease; }

.lk-cart-drawer__body{ flex: 1; overflow-y: auto; padding: 20px 24px; }
.lk-cart-drawer__empty{ color: var(--lk-text); margin-bottom: 16px; }

.lk-cart-drawer__items{ display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.lk-cart-drawer__item{ display: flex; gap: 12px; }
.lk-cart-drawer__item-media{ flex: none; width: 64px; height: 64px; border-radius: var(--lk-radius-s); overflow: hidden; background: var(--lk-bg-soft); }
.lk-cart-drawer__item-media img{ width: 100%; height: 100%; object-fit: cover; }
.lk-cart-drawer__item-body{ display: flex; flex-direction: column; gap: 4px; }
.lk-cart-drawer__item-name{ font-weight: 600; color: var(--lk-dark); }
.lk-cart-drawer__item-qty{ font-size: 13px; color: var(--lk-text); }
.lk-cart-drawer__item-remove{ font-size: 13px; text-decoration: underline; color: var(--lk-text); align-self: flex-start; }

.lk-cart-drawer__subtotal{
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 16px; border-top: 1px solid var(--lk-border);
  font-size: 16px; margin-bottom: 16px;
}
.lk-cart-drawer__checkout{ width: 100%; text-align: center; margin-bottom: 12px; }
.lk-cart-drawer__view{ display: block; text-align: center; font-size: 14px; text-decoration: underline; color: var(--lk-text); }

/* Keresés — nagyítógombra lenyíló sáv a fejléc alatt, ugyanaz a
   checkbox-hack, mint a mobilmenünél/kosárnál. */
.lk-search-toggle{ position: absolute; opacity: 0; pointer-events: none; }
.lk-search-open{ cursor: pointer; }

.lk-search-panel{
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--lk-white);
  border-bottom: 1px solid var(--lk-border);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}
.lk-search-toggle:checked ~ .lk-search-panel{ max-height: 80px; }
.lk-search-panel__form{
  display: flex; align-items: center; gap: 12px;
  max-width: var(--lk-container); margin: 0 auto;
  padding: 16px var(--lk-pad);
}
.lk-search-panel__form input[type="search"]{
  flex: 1; border: 1px solid var(--lk-border); border-radius: var(--lk-radius-s);
  padding: 10px 14px; font-family: var(--font-body); font-size: 15px;
}
.lk-search-panel__form button{
  background: none; border: none; cursor: pointer; color: var(--lk-dark); display: inline-flex;
}
.lk-search-panel__close{ cursor: pointer; font-size: 24px; line-height: 1; color: var(--lk-text); }

/* ---------- Hero ----------
   EGYSZERŰ FEJLÉC-FOTÓ, nem háttérkép-trükk.

   A kép NORMÁL képként, a dokumentum-folyamban van, teljes szélességben, a
   saját képarányával — TEHÁT A KÉP ADJA A SZEKCIÓ MAGASSÁGÁT. Nincs
   rögzített hero-magasság, nincs abszolút pozicionált "háttérréteg", és
   így nincs is mit "kilógni": ez okozta a korábbi hibát, amikor a 802px
   magas fotó a 343px-es hero-ból kicsordult a bizalom-sávra és a
   termékekre.

   A szövegdoboz (.hero__content) az, ami RÁÚSZIK a fotóra (abszolút),
   sötétítő színátmenettel, hogy a fehér szöveg olvasható maradjon.

   FONTOS: minden olyan tulajdonságon !important van, amit az Elementor
   Container alap-CSS-e is beállít (position, width, height, padding,
   margin, display, flex-*, z-index, overflow) — élőben ellenőrizve, hogy
   az Elementor base-desktop.css-e KÉSŐBB töltődik be, mint ez a
   stíluslap, tehát azonos specificitásnál különben mindig ő nyer. */
/* `.lk-sec.lk-hero` (2 osztály) KELL, nem csak `.lk-hero` — a hero
   MINDKÉT osztályt viseli (lk-sec ÉS lk-hero), és a `.lk-sec{padding:56px
   0 !important}` szabály (lejjebb a fájlban, a bizalom-sáv/termékrács
   igazításához) különben egyenlő specificitásnál, KÉSŐBBI szabályként
   felülírja ezt — élőben pontosan ez adta a fekete sávot a fotó fölött/
   alatt (56px padding mindkét oldalon, ami alól kilátszott a sötét
   háttérszín). */
.lk-sec.lk-hero{
  position: relative !important;
  overflow: hidden !important;
  background: var(--lk-dark);
  padding: 0 !important;
  display: block !important;
}
/* A fotó: folyamban marad, teljes szélesség, természetes arány.
   `.lk-hero .hero__media` (2 osztály) KELL a szelektorba, nem csak
   `.hero__media` — a lk_el_column() minden oszlopra rátesz egy
   `.lk-w-NN` szélesség-osztályt is (lásd feljebb), és annak azonos
   `!important`-tal egyenlő specificitásnál a KÉSŐBBI szabály nyerne. */
.lk-hero .hero__media{
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  /* FIX magasság (nem "auto", nem "max-height") + object-fit:cover a
     képen: a forrásfotó saját aránya elég "lapos" ahhoz, hogy teljes
     szélességben renderelve a gyerek teste/a termék csak alig látszódjon.
     Ezzel a képet felnagyítjuk egy magasabb dobozra, ami oldalt kicsit
     vág belőle (nem nyújtja/torzítja) — így nagyobb, jobban kivehető a
     tartalom, ahogy a referencián is. */
  height: 750px !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}
.hero__media .elementor-widget-image{ width: 100% !important; height: 100% !important; }
.hero__media img{
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
@media (max-width: 900px){
  .lk-hero .hero__media{ height: 420px !important; }
}
/* A szöveg: ráúszik a fotóra. */
.lk-hero .hero__content{
  position: absolute !important;
  top: 0 !important; bottom: 0 !important; left: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 560px;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 48px 56px !important;
  margin: 0 !important;
  background: linear-gradient(to right, rgba(26,18,15,.68) 0%, rgba(26,18,15,.42) 65%, rgba(26,18,15,0) 100%);
}
.lk-hero h1{ color: #fff; }
.lk-hero p{ font-size: 18px; margin-bottom: 24px; color: #fff; }
.lk-hero .btn{ background: var(--lk-primary); color: #fff; border-color: var(--lk-primary); align-self: flex-start; }
.lk-hero .btn:hover{ background: var(--lk-primary-dark); border-color: var(--lk-primary-dark); }

/* ---------- Trust bar ----------
   A `.trust-bar` BOXED szekció: a tartalma a belső `.lk-row`-ba kerül, ami
   ugyanaz az 1280px-es, középre igazított keret, mint a termékrácsé — a
   referencián is a termékkártyák szélességéhez igazodik, nem ér a képernyő
   széléig. A sorrendezést (space-between, nowrap, center) natív Elementor
   flex-beállításként kapja (lásd inc/importer.php $badges_row_settings /
   a section 2. paramétere) — a CSS itt csak a függőleges térközt adja.

   A `.trust-bar__badges` egy beágyazott Container (a régi Column helyén),
   aminek a 3 kép-widget KÖZVETLEN gyereke (nincs köztes
   `.elementor-widget-wrap`, mert az csak a régi Section/Column modellben
   létezett) — a sorba rendezést is natívan, `flex_direction: row` +
   `flex_gap` beállításként kapja ugyanonnan, nem CSS-ből. */
/* Csak függőleges térköz — az oldalsó margót/középre igazítást a belső
   `.lk-row` adja, ugyanaz, ami a termékrácsot is keretezi, így a két rész
   pontosan egy vonalban kezdődik és végződik.
   `.lk-sec.trust-bar` (2 osztály) KELL, nem csak `.trust-bar` — az általános
   `.lk-sec{padding:56px 0 !important}` szabály lejjebb a fájlban van, tehát
   egyenlő specificitásnál (mindkettő 1 osztály) az nyerne, ezért itt 56px
   jött ki 40px helyett. A felhasználó kérésére (2026-09-17) ez a sáv
   alacsonyabb legyen — 24px-re csökkentve. */
.lk-sec.trust-bar{ padding: 24px 0 !important; }
.trust-bar__text strong{ display: block; font-size: 18px; color: var(--lk-dark); margin-bottom: 6px; }
.trust-bar__stars{ color: var(--lk-primary); letter-spacing: 2px; }
.trust-bar__stars span{ color: var(--lk-text); letter-spacing: normal; font-weight: 600; margin-left: 6px; }
/* A pecsét kicsi és jobbra igazított legyen — a referencián (loewenkind.net)
   is egy apró, oldalra tett dermatest-pecsét, nem egy nagy, középre tett
   embléma; ettől lehet a teljes sáv alacsonyabb. */
.trust-bar__badges img{ height: 40px; width: auto; }

@media (max-width: 900px){
  /* Mobilon a fotó túl alacsony ahhoz, hogy ráférjen a szöveg (egy 375px
     széles nézetben a 2,1:1 arányú kép ~180px magas), ezért ott a
     szövegdoboz visszakerül a normál folyamba, a fotó ALÁ, sötét
     háttérrel — nem ráúsztatva. */
  .hero__content{
    position: static !important;
    max-width: none;
    padding: 28px 20px !important;
    background: var(--lk-dark);
  }
  .trust-bar{ justify-content: center; text-align: center; }
}

/* ---------- Product grid ----------
   Az ÚJ importáló natív Elementor oszlopokat épít soronként 3-asával
   (inc/importer.php lk_do_home()) — ehhez nem kell a .product-grid
   CSS grid, Elementor saját sor-elrendezése adja. DE: amíg valakinek a
   webhelyén a "Oldal felépítése" gomb nincs újrafuttatva az új kód
   feltöltése után, a régi, egyben beégetett HTML-rács (<div
   class="product-grid"><article class="product-card">...) van élesben —
   ezt a .product-grid szabály tartja életben. NE töröld, amíg biztos nem
   vagy benne, hogy minden site újra lett építve. */
.product-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; margin-bottom: 24px; }
.lk-product-grid{ margin-bottom: 24px; }
.product-card{
  position: relative;
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius-m);
  overflow: hidden;
  background: #fff;
  transition: box-shadow .15s ease, transform .15s ease;
}
.product-card:hover{ box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-2px); }
.product-card__media{ aspect-ratio: 1/1; background: var(--lk-bg-soft); overflow: hidden; position: relative; }
.product-card__media img{ width: 100%; height: 100%; object-fit: contain; padding: 16px; }
/* A jelvény a KÉPEN ül, kis matricaként (mint a referencián az "AB GEBURT"/
   "BIS 4 J" jelvények a termékfotón) — NEM egy nagy, teljes szélességű sáv
   a kép alatt. !important kell a position/top/left/z-index-re: élőben
   ellenőrizve, hogy az Elementor saját (később betöltődő) widget-CSS-e
   egyenlő specificitásnál felülírja a sima position:absolute-ot. */
.product-card__badge{
  position: absolute !important; top: 10px !important; left: 10px !important; z-index: 2 !important;
  background: var(--lk-dark); color: #fff;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 4px 10px; border-radius: var(--lk-radius-pill);
  max-width: calc(100% - 20px);
}
.product-card__badge p{ margin: 0; }
.product-card__title, .product-card__desc, .product-card__price{ padding-left: 16px; padding-right: 16px; }
.product-card__title{ font-weight: 600; color: var(--lk-dark); font-size: 15px; margin-top: 14px; }
.product-card__title a{ color: inherit; text-decoration: none; }
.product-card__desc{ font-size: 13px; color: var(--lk-text); margin-top: 4px; }
.product-card__title p, .product-card__desc p, .product-card__price p{ margin: 0; }
/* Ár + csillagos értékelés egy sorban, mint a referencián — a $rating_html
   üres marad, ha a terméknek nincs még értékelése, ekkor csak az ár látszik. */
.product-card__price{ margin: 8px 0 16px; }
.product-card__meta{ display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.product-card__meta .price{ font-weight: 700; color: var(--lk-dark); }
.product-card__meta del{ color: var(--lk-text); font-weight: 400; margin-right: 6px; }
.product-card__meta ins{ text-decoration: none; }
.product-card__rating{ font-weight: 600; color: var(--lk-primary-dark); font-size: 13px; white-space: nowrap; }
.product-card__cta{ padding-left: 16px; padding-right: 16px; margin-bottom: 16px; }
.product-card__cta .button{ width: 100%; justify-content: center; }
/* A WooCommerce [add_to_cart] rövidkódja saját maga ad egy beégetett
   inline style="border:4px solid #ccc; padding:12px"-et a <p class=
   "add_to_cart_inline">-re (ez a WooCommerce SAJÁT core kódja, nem a téma
   hibája) — élőben ellenőrizve: pontosan ez adta a csúnya szögletes
   keretet a lekerekített "Kosárba teszem" gomb körül. Inline style-t csak
   !important-tal lehet felülírni. */
.product-card__cta .add_to_cart_inline{ border: none !important; padding: 0 !important; margin: 0 !important; }

/* ---------- Category grid ----------
   Ugyanaz a régi/új kompatibilitási megfontolás, mint a termékrácsnál. */
.category-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.category-card{ position: relative; border-radius: var(--lk-radius-l); overflow: hidden; aspect-ratio: 4/5; background: var(--lk-bg-soft); }
.category-card > img,
.category-card .elementor-widget-image{ position: absolute; inset: 0; z-index: 0; }
.category-card > img,
.category-card .elementor-widget-image img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.category-card::before{ content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,.45), transparent 55%); pointer-events: none; }
.category-card > span,
.category-card__title{ position: absolute; left: 16px; bottom: 16px; z-index: 2; color: #fff; font-weight: 700; font-size: 17px; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.category-card__title p{ margin: 0; }

/* ---------- Split image + text ---------- */
.split{ display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split img{ border-radius: var(--lk-radius-l); }
.split.reverse .split__media{ order: 2; }

/* ---------- Team ---------- */
.team-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; text-align: center; }
.team-grid img{ width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin: 0 auto 16px; }

/* ---------- Testimonials ---------- */
.testimonial-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.testimonial-card{ background: #fff; border: 1px solid var(--lk-border); border-radius: var(--lk-radius-m); padding: 24px;
  box-shadow: 0 10px 26px -20px rgba(26,26,26,.28); }
.testimonial-card .stars{ color: var(--lk-primary); letter-spacing: 2px; margin-bottom: 12px; }
.testimonial-card .stars p{ margin: 0; }
.testimonial-card cite,
.testimonial-card__name{ display: block; margin-top: 12px; font-style: normal; font-weight: 600; color: var(--lk-dark); }
.testimonial-card__name p{ margin: 0; }

/* ---------- Newsletter CTA ---------- */
.newsletter{ background: var(--lk-dark); color: #fff; border-radius: var(--lk-radius-l); padding: 48px; text-align: center; }
.newsletter h2{ color: #fff; }
.newsletter form{ display: flex; gap: 12px; max-width: 420px; margin: 24px auto 0; }
.newsletter input[type=email]{ flex: 1; padding: 12px 16px; border-radius: var(--lk-radius-pill); border: none; font-size: 15px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--lk-bg-soft); border-top: 1px solid var(--lk-border); padding: 56px 0 24px; margin-top: 0; }
.footer-grid{ display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; margin-bottom: 40px; }
.footer-grid h4{ font-size: 14px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 16px; }
.footer-grid li{ margin-bottom: 10px; font-size: 14px; }
.footer-grid a:hover{ color: var(--lk-primary-dark); }
.footer-social{ display: flex; gap: 12px; margin-top: 16px; }
.footer-social a{ width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--lk-border); display: flex; align-items: center; justify-content: center; }
.footer-social a:hover{ background: var(--lk-primary); border-color: var(--lk-primary); color: #fff; }
.footer-bottom{ border-top: 1px solid var(--lk-border); padding-top: 24px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; font-size: 13px; }
.footer-bottom a{ color: inherit; text-decoration: none; }
.footer-bottom a:hover{ text-decoration: underline; }

/* ---------- Breadcrumb / page header ---------- */
.page-header{ padding: 40px 0 8px; text-align: center; }
.page-header p{ color: var(--lk-text); max-width: 620px; margin: 0 auto; }

/* ---------- Content page ---------- */
.content-page{ max-width: 800px; margin: 0 auto; }
/* Rólunk — a bevezető szöveg középre igazítva, a középre igazított cím alá
   (ügyfél kérése, 2026-10). A `margin:auto` !important nélkül nem hat: az
   Elementor Container alap-CSS-e később töltődik be és 0 margót ad, ezért
   a 800px-es doboz eddig balra tapadt. Csak a Rólunk bevezetőt érinti
   (lk-sec--prose), a GYIK/Kapcsolat content-page dobozait nem. */
.lk-sec--prose .content-page{ margin-left: auto !important; margin-right: auto !important; text-align: center; }
.content-page h2{ margin-top: 1.6em; }

/* ---------- FAQ ----------
   Natív "Text Editor" Elementor-widget adja a HTML-t (lásd inc/importer.php
   lk_faq_page_elements()) — natív <details>/<summary> elemekkel, JS nélkül.
   (Korábban egy Elementor "Accordion" widgettel próbálkoztunk, de az élesben
   500-as szerverhibát okozott ezen a telepítésen — lásd a kódban lévő
   megjegyzést —, ezért a bizonyítottan stabil Text Editor widgetre álltunk.) */
.faq-group h3{ margin-top: 2em; }
.faq-item{
  background: #fff; border: 1px solid var(--lk-border); border-radius: var(--lk-radius-m);
  padding: 2px 20px; margin-bottom: 10px;
}
.faq-item summary{
  list-style: none; cursor: pointer; padding: 14px 30px 14px 0; position: relative;
  font-weight: 600; color: var(--lk-dark); font-size: 15px;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{
  content: "+"; position: absolute; right: 0; top: 10px; font-size: 22px; line-height: 1;
  color: var(--lk-primary-dark); transition: transform .2s ease;
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item p{ margin: 0 0 18px; font-size: 14px; color: var(--lk-text); }

/* ---------- Product single ----------
   A `.product-single*` BEM-osztályok a régi kézzel írt témából maradtak itt,
   de sosem kerültek rá a valódi WooCommerce kimenetre — élőben ellenőrizve
   (loewenkind.hu/termek/harmonia-parna/) a WC saját `.images`/`.summary`
   gyerekeit adja a `div.product` alá, ezekre kell közvetlenül célozni. */
.woocommerce div.product{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
/* Vevői visszajelzés (2026-09-08): a név/ár/"Kosárba teszem" blokk NE
   "gördüljön együtt az oldallal" — vagyis NE kövesse a görgetést. Korábban
   `position: sticky` volt rajta, emiatt görgetéskor lecsúszott a termékkép
   mellől és belelógott az orvos-idézet sávjába. Most sima, statikus blokk:
   a termékkép mellett marad, és a lap normálisan elgördül mellette.
   NE tegyél rá újra sticky-t/fixed-et. */
.woocommerce div.product > .images{ grid-column: 1; }
.woocommerce div.product > .images img{ border-radius: var(--lk-radius-l); }
.woocommerce div.product > .summary{ grid-column: 2; position: static; }
/* A fülek/leírás, az idézet és a kapcsolódó termékek teljes szélességű
   sorok a galéria + blokk alatt. */
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .lk-doctor-quote,
.woocommerce div.product > .related.products,
.woocommerce div.product > .up-sells{
  grid-column: 1 / -1;
}

.lk-doctor-quote{
  max-width: 720px; margin: 32px auto; padding: 24px 28px;
  background: var(--lk-bg-soft); border-left: 3px solid var(--lk-primary);
  border-radius: var(--lk-radius-m);
}
.lk-doctor-quote p{ font-size: 16px; font-style: italic; color: var(--lk-dark); margin: 0 0 10px; }
.lk-doctor-quote footer{ font-size: 14px; color: var(--lk-text); }

.lk-safety-tab h3{ font-size: 16px; margin: 1.2em 0 .4em; }
.lk-safety-tab p{ font-size: 14px; color: var(--lk-text); }
.woocommerce div.product .summary .price{ font-size: 26px; font-weight: 700; color: var(--lk-dark); margin: 8px 0 16px; display: block; }

/* Bizalom-jelvény lista a "Kosárba teszem" gomb alatt — lásd functions.php
   lk_product_trust_badges(), a woocommerce_single_product_summary hook 35-ös
   prioritásán (add-to-cart után, termék-meta előtt fut le). */
.lk-trust-badges{ display: flex; flex-direction: column; gap: 8px; margin: 20px 0; font-size: 14px; color: var(--lk-text); }
.lk-trust-badges li{ display: flex; align-items: center; gap: 8px; }
.lk-trust-badges svg{ flex: none; color: var(--lk-primary-dark); }


@media (max-width: 900px){
  .woocommerce div.product{ grid-template-columns: 1fr; }
  /* FONTOS, élőben ellenőrizve (mobil nézet, getComputedStyle): a
     `grid-template-columns: 1fr` önmagában NEM elég — az asztali
     `.summary{grid-column:2}` szabály mobilon is érvényben maradt, ami
     egy IMPLICIT 2. oszlopot hozott létre (mért rács: "364px 119px"),
     és a név/ár/"Kosárba teszem" blokk egy 119px-es sávba préselődött a
     galéria mellé — gyakorlatilag eltűnt. Itt mindkét elemet vissza kell
     tenni az 1. oszlopba, hogy egymás ALÁ kerüljenek. */
  .woocommerce div.product > .images,
  .woocommerce div.product > .summary,
  .woocommerce div.product > .woocommerce-tabs,
  .woocommerce div.product > .lk-doctor-quote{ grid-column: 1; grid-row: auto; }
  /* grid-row:auto KELL: az asztali szabályok explicit sorokat adnak
     (galéria 1, fülek 2, idézet 3), a summary pedig több sort fog át —
     ha ezek mobilon maradnának, a summary az automatikus elhelyezéssel
     az idézet ALÁ (4. sorba) csúszna. Auto-val a DOM-sorrend érvényesül:
     galéria → név/ár/kosár → fülek → idézet. */
  .woocommerce div.product > .summary{ position: static; }
}

@media (max-width: 900px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .split, .product-single{ grid-template-columns: 1fr; }
  .split .split__media{ order: 0 !important; }
}

/* Mobil navigáció: teljes magasságú beúszó panel (ugyanaz a minta, mint a
   kosár-drawernél), NEM egy egyszerű lenyíló sáv — így egyezik a referencia
   hamburger-drawer viselkedésével. */
.lk-nav-drawer__overlay,
.lk-nav-drawer__head{ display: none; }

@media (max-width: 768px){
  .lk-nav-drawer__overlay{
    display: block; position: fixed; inset: 0; z-index: 999;
    background: rgba(28, 26, 23, .45);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s ease;
  }
  .lk-nav-toggle:checked ~ .lk-nav-drawer__overlay{ opacity: 1; visibility: visible; pointer-events: auto; }

  .site-header__inner .primary-nav{
    position: fixed; top: 0; bottom: 0; left: 0;
    width: min(320px, 85vw);
    background: var(--lk-white);
    z-index: 1000;
    display: flex; flex-direction: column;
    padding: 0 var(--lk-pad) 24px;
    transform: translateX(-100%);
    transition: transform .3s ease;
    box-shadow: 8px 0 24px rgba(0,0,0,.12);
    overflow-y: auto;
  }
  .lk-nav-toggle:checked ~ .primary-nav{ transform: translateX(0); }

  .lk-nav-drawer__head{
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 0; margin-bottom: 8px; border-bottom: 1px solid var(--lk-border);
    font-weight: 700; font-size: 18px; position: sticky; top: 0; background: var(--lk-white);
  }
  .lk-nav-drawer__close{ cursor: pointer; font-size: 26px; line-height: 1; color: var(--lk-text); }

  .primary-nav > ul{ flex-direction: column; gap: 4px; }
  .primary-nav a{ display: block; padding: 12px 0; }
  .header-icons label.menu-toggle{ display: inline-flex; }
  .footer-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   WooCommerce reskin — kizárólag megjelenés, a plugin saját HTML-jét/logikáját
   (kosár, checkout, mennyiség, nonce-ok) nem írjuk felül, csak stílust adunk rá.
   ========================================================================== */
.woocommerce-breadcrumb{ font-size: 13px; color: var(--lk-text); margin-bottom: 24px; }
.woocommerce-breadcrumb a{ color: var(--lk-text); }
.woocommerce-breadcrumb a:hover{ color: var(--lk-primary-dark); }

.woocommerce ul.products{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px;
  list-style: none; margin: 0 0 32px; padding: 0;
}
/* A WooCommerce saját clearfix-e (::before/::after, content:" ", display:table)
   a régi float-alapú elrendezéshez készült — grid-konténerben viszont ezek a
   generált pszeudo-elemek is valódi grid-elemként foglalnak helyet (az elsőt
   üresen), ami eltolta eggyel az összes valódi kártyát (üres első oszlop,
   az utolsó kártya pedig az első helyére csúszott). */
.woocommerce ul.products::before,
.woocommerce ul.products::after{ content: none; display: none; }
.woocommerce ul.products li.product{
  /* A WooCommerce saját alap-CSS-e (woocommerce.css) `width: 22.05%`-ot ad
     minden li.product-nak — ez a régi, float-alapú oszlop-elrendezéshez
     készült. Mivel a .woocommerce ul.products fentebb CSS grid, ez a
     százalék a GRID CELLA szélességéhez (itt kb. 250px) képest számolódik,
     nem az egész sorhoz — ezért lettek a kártyák ~55px szélesek 250px-es
     oszlopokban. A width:auto felülírja ezt, hogy a kártya kitöltse a
     saját grid celláját. !important kell, mert a WC-stílus ugyanolyan
     specificitású, és a betöltési sorrend nem garantált. */
  width: auto !important; margin: 0 !important;
  border: 1px solid var(--lk-border); border-radius: var(--lk-radius-m); overflow: hidden;
  background: #fff; padding: 0 0 16px; position: relative; text-align: left;
  transition: box-shadow .15s ease;
}
.woocommerce ul.products li.product:hover{ box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.woocommerce ul.products li.product .woocommerce-loop-product__link{ display: block; background: var(--lk-bg-soft); aspect-ratio: 1/1; overflow: hidden; }
.woocommerce ul.products li.product img{ width: 100%; height: 100%; object-fit: contain; padding: 16px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title{ font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: var(--lk-dark); margin: 12px 16px 4px; }
.woocommerce ul.products li.product .price{ margin: 0 16px; font-weight: 700; color: var(--lk-dark); }
.woocommerce ul.products li.product .price del{ color: var(--lk-text); font-weight: 400; opacity: .7; margin-right: 6px; }
.woocommerce ul.products li.product .price ins{ text-decoration: none; }
.woocommerce ul.products li.product .button{ margin: 12px 16px 0; display: inline-flex; }
.lk-in-cart-badge{ display: none; align-items: center; gap: 5px; margin: 8px 16px 0; font-size: 12px; font-weight: 600; color: var(--lk-primary-dark); }
.lk-in-cart-badge:not(:empty){ display: inline-flex; }
.woocommerce span.onsale{
  position: absolute; top: 10px; left: 10px; background: var(--lk-primary); color: #fff;
  font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: var(--lk-radius-pill);
  min-height: 0; min-width: 0; line-height: 1.6;
}

.woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit,
.woocommerce input.button, .woocommerce #place_order{
  background: var(--lk-primary) !important; color: #fff !important; border: 1px solid var(--lk-primary) !important;
  border-radius: var(--lk-radius-pill) !important; font-weight: 600 !important; padding: 12px 26px !important;
  font-family: var(--font-body) !important; transition: background .15s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce #place_order:hover{
  background: var(--lk-primary-dark) !important; border-color: var(--lk-primary-dark) !important;
}
/* A WooCommerce AJAX-os "Kosárba teszem" után a gomb mellé beszúr egy
   "Kosár" (a.added_to_cart.wc-forward) linket. A felhasználó kérésére
   (2026-09-30) ez nem jelenik meg: a gomb pipát kap, és a kosár-fiók
   magától kinyílik — a külön link csak duplikált, a kártya alá lógott. */
.woocommerce a.added_to_cart,
a.added_to_cart.wc-forward{ display: none !important; }

.woocommerce div.product .woocommerce-product-gallery{ border-radius: var(--lk-radius-l); overflow: hidden; }
.woocommerce div.product .summary{ padding-left: 8px; }
.woocommerce div.product p.price, .woocommerce div.product span.price{ color: var(--lk-dark); font-size: 26px; font-weight: 700; }
.woocommerce div.product .stock{ color: var(--lk-primary-dark); font-weight: 600; }
.woocommerce div.product form.cart{ margin: 20px 0; }
.woocommerce div.product .quantity input.qty{ border: 1px solid var(--lk-border); border-radius: var(--lk-radius-s); height: 44px; padding: 0 12px; width: 70px; }
.woocommerce table.variations select{ border: 1px solid var(--lk-border); border-radius: var(--lk-radius-s); height: 44px; padding: 0 12px; }
.woocommerce .woocommerce-tabs ul.tabs{ border-bottom: 1px solid var(--lk-border); padding: 0; margin: 32px 0 0; list-style: none; display: flex; gap: 24px; }
.woocommerce .woocommerce-tabs ul.tabs li{ margin: 0; }
.woocommerce .woocommerce-tabs ul.tabs li a{ font-weight: 600; color: var(--lk-text); padding: 12px 0; display: inline-block; }
.woocommerce .woocommerce-tabs ul.tabs li.active a{ color: var(--lk-primary-dark); border-bottom: 2px solid var(--lk-primary); }
.woocommerce .woocommerce-tabs .panel{ padding: 24px 0; }

.woocommerce-cart table.cart{ width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.woocommerce-cart table.cart th{ text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--lk-border); font-size: 13px; color: var(--lk-text); }
.woocommerce-cart table.cart td{ padding: 16px 8px; border-bottom: 1px solid var(--lk-border); vertical-align: middle; }
.woocommerce-cart table.cart img{ width: 64px; border-radius: var(--lk-radius-s); }
.cart-collaterals .cart_totals{ background: var(--lk-bg-soft); border-radius: var(--lk-radius-m); padding: 24px; max-width: 380px; margin-left: auto; }
.cart-collaterals .cart_totals table{ width: 100%; }
.cart-collaterals .cart_totals th, .cart-collaterals .cart_totals td{ padding: 8px 0; }

.woocommerce-checkout form.checkout .form-row label{ font-size: 13px; font-weight: 600; color: var(--lk-dark); margin-bottom: 4px; display: block; }
.woocommerce-checkout form.checkout input.input-text, .woocommerce-checkout form.checkout select, .woocommerce-checkout form.checkout textarea{
  width: 100%; border: 1px solid var(--lk-border); border-radius: var(--lk-radius-s); padding: 12px 14px; font-family: var(--font-body);
}
#order_review{ background: var(--lk-bg-soft); border-radius: var(--lk-radius-m); padding: 24px; }
.woocommerce-checkout-payment ul.payment_methods{ list-style: none; padding: 0; }
.woocommerce-checkout-payment li{ border: 1px solid var(--lk-border); border-radius: var(--lk-radius-s); padding: 12px; margin-bottom: 8px; }

.woocommerce-MyAccount-navigation ul{ list-style: none; padding: 0; border: 1px solid var(--lk-border); border-radius: var(--lk-radius-m); overflow: hidden; }
.woocommerce-MyAccount-navigation li{ border-bottom: 1px solid var(--lk-border); }
.woocommerce-MyAccount-navigation li:last-child{ border-bottom: none; }
.woocommerce-MyAccount-navigation li a{ display: block; padding: 12px 16px; }
.woocommerce-MyAccount-navigation li.is-active a{ background: var(--lk-primary-tint); color: var(--lk-primary-dark); font-weight: 600; }

.woocommerce-message, .woocommerce-info{ border-top-color: var(--lk-primary) !important; border-radius: var(--lk-radius-s); background: var(--lk-primary-tint); }
.woocommerce-error{ border-top-color: #C0392B !important; }

/* ==========================================================================
   Elementor-render támogatás — a section/column szélessége illeszkedjen a
   .container-hez, a kicker sima, olvasható legyen (nem kurzív script).
   ========================================================================== */
/* !important: az Elementor Container minden szekcióra ad egy alap 10px
   oldalsó paddinget (--padding-left/right), ami elcsúsztatja a belső
   `.lk-row`-t — emiatt nem esett egy vonalba a bizalom-sáv és a termékrács.
   Itt nullázzuk vízszintesen; az oldalsó margót egységesen a `.lk-row` adja. */
.lk-sec{ padding: 56px 0 !important; }
.lk-sec.lk-sec--soft{ background: var(--lk-bg-soft); }
/* `.lk-row`: a lk_el_section() által automatikusan beszúrt belső Container
   (lásd inc/data/elementor-builder.php) — ez veszi át a régi Section-nél az
   Elementor SAJÁT `.elementor-container` divjének szerepét (1280px-re
   korlátozott, középre igazított, oldalt kipárnázott tartalom-sáv), mert a
   Container elem `content_width:full` mellett nem ad ilyen wrappert
   automatikusan.

   !important MINDEN margin/padding-en: élőben ellenőrizve, hogy az
   Elementor saját base-desktop.css-e (ami KÉSŐBB töltődik be, mint a téma
   style.css-e) `margin-inline-start/end: 0` és `padding-*: 10px` alap-
   értékeket ad minden Containernek — enélkül a `margin:auto` veszített, és
   minden szekció balra tapadva jelent meg, nem középre igazítva. */
.lk-row{
  max-width: var(--lk-container) !important;
  margin-left: auto !important; margin-right: auto !important;
  width: 100% !important;
  padding: 0 var(--lk-pad) !important;
}
/* Oszlopszélesség SAJÁT osztályokkal (lásd lk_el_column() a builderben),
   NEM az Elementor natív Container "width" beállításával — élőben
   ellenőrizve (az Elementor generált per-oldal CSS fájlját közvetlenül
   megnézve), hogy az a beállítás NÉMÁN nem termel semmilyen CSS-t, ezért
   a kártyák eddig a saját tartalmuk szélességére zsugorodtak, balra
   tapadva a sor elején, ahelyett hogy kitöltötték volna a rácsot. */
/* A szélességből LE KELL VONNI a sor térközét (flex_gap, 32px — lásd
   inc/importer.php), különben N × (100%/N) + (N-1) × gap > 100%, és a
   flex-wrap az utolsó kártyát új sorba töri. Élőben mérve 1900px-es
   nézetben: 3 × 411px + 2 × 32px = 1296px > 1232px sor → csak 2 kártya
   fért egy sorba, balra tapadva. A calc-os változattal 3 × 389 + 64 = 1231
   → pontosan kitölti a sort. */
.lk-w-100{ width: 100% !important; }
.lk-w-80{ width: calc(80% - 6.4px) !important; }
.lk-w-75{ width: calc(75% - 8px) !important; }
.lk-w-66{ width: calc(66.666% - 10.7px) !important; }
.lk-w-60{ width: calc(60% - 12.8px) !important; }
.lk-w-50{ width: calc((100% - 32px) / 2) !important; }
.lk-w-40{ width: calc(40% - 19.2px) !important; }
.lk-w-33{ width: calc((100% - 64px) / 3) !important; }
.lk-w-25{ width: calc((100% - 96px) / 4) !important; }
.lk-w-20{ width: calc((100% - 128px) / 5) !important; }
@media (max-width: 900px){
  [class*="lk-w-"]{ width: 100% !important; }
}
.hero__content h1.elementor-heading-title{ color: #fff !important; }
.hero__content .lk-text{ color: #fff !important; font-size: 18px; margin-bottom: 8px; }
.lk-hero .lk-button .elementor-button{ background: var(--lk-primary) !important; color: #fff !important; border-color: var(--lk-primary) !important; }
.lk-hero .lk-button .elementor-button:hover{ background: var(--lk-primary-dark) !important; border-color: var(--lk-primary-dark) !important; }

/* Split (kép + szöveg) szekciók valódi Elementor-Containerekkel — a `.lk-row`
   (fent) adja a 1280px-es korlátot, itt csak a függőleges középre igazítás és
   a fordított sorrend kell. */
.lk-split .lk-row{ align-items: center !important; }
.lk-split img{ border-radius: var(--lk-radius-l); }
.lk-split.lk-split--reverse .lk-row{ flex-direction: row-reverse !important; }
@media (max-width: 900px){
  .lk-split.lk-split--reverse .lk-row{ flex-direction: column !important; }
}

/* Csapat-sor valódi Elementor-Containerekkel (kép+név+pozíció).
   `.lk-sec.lk-team-experts` (2 osztály) KELL az általános
   `.lk-sec{padding:56px 0 !important}` felülírásához (lásd a trust-bar
   fenti jegyzetét) — a felhasználó kérésére (2026-09-17) ez a szekció
   alacsonyabb legyen, a kisebb arckép mellett. Csak a homepage "Szakértői
   csapatunk" szekciójára vonatkozik (lk-team-experts), NEM a Rólunk oldal
   .lk-team osztályt (is) újrahasznosító statisztika-szekciójára. */
.lk-sec.lk-team-experts{ padding: 32px 0 !important; }
.lk-team > .lk-row > div{ text-align: center; }
.lk-team-experts img{ width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin: 0 auto 12px; }
.lk-team .lk-team__role{ color: var(--lk-text) !important; font-size: 14px; }
.lk-sec--head .lk-row{ text-align: center; max-width: 720px; margin: 0 auto 32px; }
.lk-kicker .elementor-heading-title{
  font-family: var(--font-body) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1.6px !important;
  font-size: 12px !important; color: var(--lk-primary-dark) !important; margin-bottom: 6px;
}
.lk-section-title .elementor-heading-title{ margin-bottom: 0; }
.lk-lead{ color: var(--lk-text) !important; font-size: 17px; }

/* Gomb — az lk_el_button() mindig 'lk-button'-t oszt ki, ez hidalja át a
   meglévő .btn dizájnra (pill alak, sage-zöld, körvonalas és 'a heróban
   krém' változat). FONTOS: minden stílus-tulajdonság !important a
   BodyShape-projekt tanulsága miatt — az Elementor globális Kit-stílusa
   (Site Settings → Theme Style → Buttons) ugyanolyan/nagyobb specificitással
   ad ki alap háttér/szöveg-színt minden .elementor-button-ra, és enélkül
   csendben felülírja ezt (ott ez okozta, hogy a gombok kiürültek/fakónak
   tűntek háttérszín nélkül). */
.lk-button .elementor-button{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 28px; border-radius: var(--lk-radius-pill) !important;
  background: var(--lk-primary) !important; color: var(--lk-white) !important;
  font-weight: 600 !important; font-size: 15px; font-family: var(--font-body) !important;
  border: 1px solid var(--lk-primary) !important; transition: background .15s ease, color .15s ease;
}
.lk-button .elementor-button:hover{ background: var(--lk-primary-dark) !important; border-color: var(--lk-primary-dark) !important; }
.lk-button--outline .elementor-button{ background: transparent !important; color: var(--lk-dark) !important; border-color: var(--lk-dark) !important; }
.lk-button--outline .elementor-button:hover{ background: var(--lk-dark) !important; color: var(--lk-white) !important; }

.lk-pagehead{ padding: 40px 0 16px; text-align: center; }
.lk-pagehead .elementor-widget-heading{ margin: 0 auto; }

.lk-map{ border-radius: var(--lk-radius-l); overflow: hidden; border: 1px solid var(--lk-border); margin-top: 16px; }
.lk-map iframe{ width: 100%; height: 280px; border: 0; }

/* Kapcsolat-oldal ikon-dobozok — natív Elementor "icon-box" widget adja a
   HTML-t (lásd inc/data/elementor-builder.php lk_el_icon_box()), itt csak a
   design-t igazítjuk a téma többi részéhez. */
.lk-icon-box.elementor-widget-icon-box{ padding: 14px 0; border-bottom: 1px solid var(--lk-border); }
.lk-icon-box .elementor-icon-box-icon{ color: var(--lk-primary-dark); }
.lk-icon-box .elementor-icon-box-title{ font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--lk-text); margin-bottom: 3px; }
.lk-icon-box .elementor-icon-box-description{ font-size: 15px; color: var(--lk-dark); }

/* Régi tartalom kompatibilitása: a korábbi Kapcsolat-oldal egyben beégetett
   .lk-info divekkel dolgozott (lk_info_row()), nem Icon Box widgettel. */
.lk-info{ display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--lk-border); }
.lk-info:first-of-type{ padding-top: 4px; }
.lk-info svg{ width: 20px; height: 20px; flex: 0 0 20px; stroke: var(--lk-primary-dark); margin-top: 3px; }
.lk-info .k{ font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--lk-text); margin-bottom: 3px; }
.lk-info .v{ font-size: 15px; color: var(--lk-dark); }
.lk-info .v a{ color: var(--lk-primary-dark); text-decoration: underline; text-underline-offset: 3px; }

.lk-stat__num .elementor-heading-title{ font-size: 32px; color: var(--lk-primary-dark) !important; font-weight: 700 !important; }

.lk-back-to-top{
  position: fixed; right: 24px; bottom: 24px; width: 46px; height: 46px; border-radius: 50%;
  background: var(--lk-dark); color: #fff; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease; z-index: 400; border: none; cursor: pointer;
}
.lk-back-to-top.is-visible{ opacity: 1; pointer-events: auto; transform: none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Ragadós „Kosárba" sáv mobilon (terméklap)
   Testreszabás → „Löwenkind — webshop" alatt kapcsolható.
   Csak mobilon jelenik meg; asztali nézetben a normál kosárgomb elég.
   ========================================================================== */
.lk-sticky-atc{ display:none; }
@media (max-width:768px){
  .lk-sticky-atc{
    position:fixed; left:0; right:0; bottom:0; z-index:90;
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:var(--lk-bg); border-top:1px solid var(--lk-border);
    box-shadow:0 -8px 24px -12px rgba(0,0,0,.18);
  }
  .lk-sticky-atc__info{ display:flex; flex-direction:column; min-width:0; }
  .lk-sticky-atc__title{
    font-size:13px; color:var(--lk-text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .lk-sticky-atc__price{ font-size:15px; font-weight:700; color:var(--lk-dark); }
  .lk-sticky-atc__price del{ opacity:.5; font-weight:400; margin-right:4px; }
  .lk-sticky-atc__btn{ flex-shrink:0; }
}

/* MOBIL LÁBLÉC.
   Korábban egyetlen hasáb futott: a lábléc irreálisan magas lett telefonon,
   szétesett szalagnak hatott. Két hasáb feleannyi helyen elfér és olvasható
   marad; a márka-blokk kapja a teljes szélességet. */
@media (max-width: 620px){
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .footer-brand{ grid-column: 1 / -1; }
  .footer-grid h4{ margin-bottom: 10px; }
  .footer-grid ul{ gap: 8px; }
  .footer-social{ margin-top: 14px; }
  .footer-bottom{ flex-direction: column; text-align: center; gap: 8px; }
}
/* Csak a tényleg pici kijelzők esnek vissza egy hasábra. */
@media (max-width: 340px){
  .footer-grid{ grid-template-columns: 1fr; }
}