/* ==========================================================================
   NARUSKA – egyedi frontend CSS
   Csak olyan finomítás, amire NINCS natív dsc beállítás. A blokkok az ügyfél
   2026-08-24-i észrevételeit követik (uj.txt).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) FEJLÉC – kompaktabb, finomabb (ügyfélkérés: „a fejléc kisebb helyet
   foglaljon", kisebb logó, lágyabb szlogen, kisebb ikonok)

   A header_v1 (navigation-section_v1) egy sorban hozza a logót, a szlogent és
   az ikoncsoportot, `justify-content-between` flexszel. Grid-re váltjuk, hogy
   a szlogen a logó ALÁ kerüljön (mint a látványterven), az ikonok pedig
   függőlegesen középre – így két elem magasságából egy sor lesz.
   -------------------------------------------------------------------------- */
.v-navigation-section-002 {
    display: grid !important;
    align-items: center;
    column-gap: .75rem;
    padding-top: .5rem !important;
    padding-bottom: .35rem !important;
}

/* asztali: [logó / szlogen] | [ikonok] */
@media (min-width: 992px) {
    .v-navigation-section-002 {
        grid-template-columns: auto 1fr;
    }
    .v-navigation-section-002 > .main-logo {
        grid-area: 1 / 1;
    }
    .v-navigation-section-002 > .v-header-logo-label-root {
        grid-area: 2 / 1;
    }
    .v-navigation-section-002 > .v-navigation-section-004 {
        grid-area: 1 / 2 / 3 / 3;
    }
}

/* mobil: [hamburger] | [logó / szlogen] | [kereső+kosár] – a látványterv
   szerinti elrendezés, a hamburger a BAL oldalon (onnan nyílik a menü) */
@media (max-width: 991.98px) {
    /* A két szélső sáv AZONOS szélessége teszi a logó+szlogen blokkot a kijelző
       tényleges közepére (ügyfélkérés). Korábban `auto 1fr auto` volt: a
       hamburger 44px, a jobb oldali ikonpár 70px, ezért a középső sáv – és vele
       a logó – 13px-szel balra csúszott. A 4.5rem a szélesebbik (ikonpár) mérete;
       a szűkebb középső sávban a logó arányosan (~5%-kal) kisebb lesz. */
    .v-navigation-section-002 {
        grid-template-columns: 4.5rem minmax(0, 1fr) 4.5rem;
        flex-wrap: nowrap !important;
    }
    .v-navigation-section-002 > .v-navigation-section-005 {
        grid-area: 1 / 1 / 3 / 2;
    }
    .v-navigation-section-002 > .main-logo {
        grid-area: 1 / 2;
        justify-self: center;
    }
    .v-navigation-section-002 > .v-header-logo-label-root {
        grid-area: 2 / 2;
    }
    .v-navigation-section-002 > .v-navigation-section-004 {
        grid-area: 1 / 3 / 3 / 4;
        display: flex !important; /* a sablon `d-none d-lg-flex`-e a kosarat is elrejtette */
    }
    /* a kedvencek és a fiók mobilon a hamburger menüből érhető el (látványterv) */
    .v-navigation-section-004 .v-auth-wrapper-003,
    .v-navigation-section-004 .v-auth-wrapper-006,
    .v-navigation-section-004 .v-auth-wrapper-008 {
        display: none !important;
    }
}

/* kisebb logó (a dsc common_logo legkisebb fokozata is 60px).
   A logó képéről 2026-08-25-én levágtuk a bal/jobb üres sávot, hogy a betű a
   tartalom bal szélével (72px) egy vonalban kezdődjön. A vágással a 360x180-as
   származék 33px -> 37px magas lett, ezért a max-height 33px, hogy a látszó
   logóméret NE változzon. */
.main-logo-img {
    max-height: 33px !important;
}

@media (max-width: 991.98px) {
    .main-logo-img {
        max-height: 36px !important;
    }
}

/* finomabb, kisebb fejléc-ikonok (a sablon w-40px + p-1 osztályokat ad) */
header .v-auth-wrapper-001 svg {
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
}

header .v-auth-wrapper-001 svg {
    margin: 0 !important; /* a kereső ikonon `mx-1` is van, a többin nincs */
}

/* a kosár ikonjának spanjén a sablon `mt-2`-t ad, ezért 8px-szel lejjebb ült,
   mint a többi fejléc-ikon (a mobil menü ikonsorában is) */
header .v-auth-wrapper-013 {
    margin-top: 0 !important;
}

header .v-auth-wrapper-001 {
    gap: .875rem !important;
}

/* Az ikonok EGYENLŐ távolságra: a sablon elemei eltérő szélességűek (a kereső
   `px-1 mx-1`-et, a login `text-center`-t kap), ezért a gap ellenére a látható
   ikonok közepe nem egyenletes. Minden elem az ikon szélességére szorítva, a
   linken belül középre – így a gap adja a teljes térközt. */
header .v-auth-wrapper-001 > li {
    width: 1.75rem;
    justify-content: center;
}

header .v-auth-wrapper-001 > li > a,
header .v-auth-wrapper-001 > li > button {
    display: flex !important;
    width: 100% !important; /* az `auth-icon` 3.5rem-et ad, ami túlnyúlik az elemen */
    min-width: 0 !important;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
}

/* A darabszám-jelvény a sablonban `start-90 translate-middle`, ami a 40px-es eredeti
   ikonhoz készült; a kisebb ikonon az ikon BAL oldalára csúszott. Vissza a jobb felső
   sarokba, kicsit feljebb. */
header .v-auth-wrapper-005,
header .v-auth-wrapper-014 {
    top: 0 !important;
    left: auto !important;
    right: 0 !important;
    transform: translate(40%, -40%) !important;
    margin-top: 0 !important;
}

/* a belépés `btn`-je 1px átlátszó keretet kap, ezért az ikonja 1px-szel
   lejjebb ült a többinél */
header .v-auth-wrapper-001 > li > button {
    border: 0 !important;
}

/* a kosár/kedvenc darabszám-jelvény arányosan kisebb */
header .v-auth-wrapper-005,
header .v-auth-wrapper-014 {
    font-size: .625rem;
    padding: .1rem .3rem;
}

/* --------------------------------------------------------------------------
   2) „Termékkategóriák" gomb – lágyabb vonalvezetés (ügyfélkérés)
   A menu-line.phtml fixen `btn btn-primary`-t ad (nincs rá dsc kulcs), ami egy
   tömör barna doboz. Szöveges, keret nélküli gombbá szelídítjük; a mellette
   lévő láthatatlan helyfoglaló gomb ugyanezt a szabályt kapja, hogy a menüsor
   igazítása ne csússzon el.
   -------------------------------------------------------------------------- */
.v-header-menu-line-001 .btn-primary {
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    color: rgb(var(--pcolor-rgb)) !important;
    padding-left: 0 !important;
    padding-right: .5rem !important;
    font-size: .9375rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.v-header-menu-line-001 .btn-primary .icon-white {
    fill: rgb(var(--pcolor-rgb)) !important;
}

.v-header-menu-line-001 .btn-primary:hover,
.v-header-menu-line-001 .btn-primary:focus-visible {
    color: rgb(var(--scolor-rgb)) !important;
}

.v-header-menu-line-001 .btn-primary:hover .icon-white {
    fill: rgb(var(--scolor-rgb)) !important;
}

/* --------------------------------------------------------------------------
   3) FELSŐ SÁVOK – figyelmeztető sáv + információs sáv (ügyfélkérés: a logó
   fölött a „20 000 Ft felett ingyenes szállítás" + boríték + telefon ikon,
   és mindkét sáv tartalma vízszintesen középen)
   Az info-line_v1 sablon `d-none d-lg-flex`-szel csak asztali nézetben látszik.
   A közösségi ikonok a láblécben maradnak, a felső sávba az ügyfél csak az
   e-mail és a telefon ikont kérte.

   ⚠️ Az info-sávot NEM a `.offscreen-btns` szomszédjaként célozzuk: amikor a
   figyelmeztető sáv (alertline) be van kapcsolva, az kerül a kettő közé, és a
   `+` szelektor némán nem talál. A sablon a szekcióra nem tesz saját marker
   osztályt, ezért a mindig kirenderelt infoline-menü blokkjáról azonosítjuk.
   -------------------------------------------------------------------------- */

/* a) FIGYELMEZTETŐ SÁV – a felirat a sáv közepén.
   A sablon `ps-4 pe-5` aszimmetrikus paddingot ad (1.5rem bal, 3rem jobb, hogy
   a bezáró gombnak legyen helye), így a középre zárt szöveg 12px-szel balra
   esne; ezért a bal paddingot a jobbhoz igazítjuk. A bezáró gomb absolute
   pozíciójú, a sor szélességébe nem számít bele. */
.v-header-alert-line-001 {
    text-align: center;
    padding-left: 3rem !important;
}

@media (max-width: 575.98px) {
    /* keskeny kijelzőn a 2x3rem padding már szűkre fogná a feliratot */
    .v-header-alert-line-001 {
        padding-left: 2.25rem !important;
        padding-right: 2.25rem !important;
    }
}

/* b) INFORMÁCIÓS SÁV
   2026-09-10 ügyfélkérés: a "20 000 Ft felett ingyenes szállítás" a felső sávból kikerül
   mobilon, mert a hamburger menüben is szerepel. A sablon alap `d-none d-lg-flex`-e
   érvényesül, ezért az itt korábban álló mobil-megjelenítő blokkot eltávolítottuk.
   Asztali nézetben marad, ott ugyanis nincs hamburger menü. */

/* A sáv tartalma MINDKÉT nézetben vízszintesen középen (ügyfélkérés). A sablon
   `d-lg-flex`-e balra zárja, a középső (üres) infoline-menü blokk pedig helyet
   foglalna – ezért rejtjük. A látszó tartalom közepe azért esne 8px-szel balra a
   képernyő közepétől, mert az utolsó ikon `mx-2`-jének jobb oldali 8px-e is
   beleszámít a flex-sorba; ezt az ikonlista negatív jobb margója egyenlíti ki. */
section:has(> .v-info-line-002) {
    justify-content: center;
}

section:has(> .v-info-line-002) .v-info-line-002 {
    display: none !important; /* üres infoline-menü helye */
}

section:has(> .v-info-line-002) .header-social-icons {
    margin-right: -.5rem;
}

.header-social-icons .v-social-icons-item-facebook,
.header-social-icons .v-social-icons-item-instagram {
    display: none !important;
}

/* A `|` elválasztó mindkét oldalán egyenlő térköz. A sablon `ps-2 pe-1`-et ad, és a
   jobb oldalra még az utána jövő – itt ÜRES – középső blokk `me-3`-a is beleszámít
   (mérve: 8px balra, 28px jobbra). A social ikonok saját `mx-2` levegőjéhez NEM nyúlunk,
   csak a szeparátor paddingját és az üres blokk margóját igazítjuk.
   Asztali: 12px (padding-left) = 4px (padding-right) + 8px (ikon `mx-2`).
   Mobil: a középső blokk rejtett, viszont a sáv `gap: .25rem`-je is beszámít →
   16px = 4px + 4px (gap) + 8px (ikon). */
.v-info-line-001 {
    padding-left: .75rem !important;
    padding-right: .25rem !important;
}


/* --------------------------------------------------------------------------
   4) MOBIL HAMBURGER MENÜ – balról nyílik, balra igazított tartalom
   (ügyfélkérés). A sablon `offcanvas-end`-et ad (jobbról), és mindent középre
   igazít; a header_v9/v10 fejlécnél lenne natívan `offcanvas-start`, de azoknál
   nincs asztali „Termékkategóriák" gomb, amit az ügyfél kért.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    #mobileMenu.offcanvas-end {
        right: auto;
        left: 0;
        transform: translateX(-100%);
    }
    #mobileMenu.offcanvas-end.show,
    #mobileMenu.offcanvas-end.showing {
        transform: none;
    }
    #mobileMenu .text-center {
        text-align: left !important;
    }
    #mobileMenu .v-mobil-navigation-004 .v-auth-wrapper-001,
    #mobileMenu .navbar-nav {
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }
    #mobileMenu .nav-link {
        padding-left: 0 !important;
    }
    #mobileMenu .v-header-mobil-info-line-001 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* A „Termékkategóriák" a sablonban `nav-link fw-bold`, a többi menüpont
       `btn btn-link` (normál betűsúly, .375rem/.75rem padding) – ügyfélkérés,
       hogy egyformák legyenek. A `.nav-link` szabály UTÁN kell állnia. */
    #mobileMenu .v-mobil-navigation-007 {
        font-weight: 400 !important;
        padding: .5rem .75rem !important; /* a `btn` keretével együtt 40px sormagasság */
    }
}

/* --------------------------------------------------------------------------
   5) TERMÉKKÁRTYA – kedvencek ikon a termékkép jobb felső sarkában, a
   kosár gomb a kártya bal alsó részén (ügyfélkérés)
   A kártya törzse `position-relative`, a kép a törzs tetején van, ezért a
   kedvenc-gomb absolute pozícióval pontosan a kép jobb felső sarkára kerül.
   Fehér, áttetsző korong: minden termékfotón láthatóan kirajzolódik.
   -------------------------------------------------------------------------- */
.v-item-card-006 {
    justify-content: flex-start !important;
}

.v-item-card-006 .btn-favourite {
    position: absolute;
    top: .5rem;
    /* A kártya SZÉLESEBB lehet, mint a termékkép (a lista-származék 276px, és
       `mw-100`-zal csak lefelé skálázódik), ilyenkor a kép középen áll, a
       kártya sarkába tett szív pedig a képen KÍVÜLRE esett – mobilon és
       tableten láthatóan (mérve: 390px-en 41px-szel). A kép fél oldalsávjával
       toljuk beljebb; keskenyebb kártyán a `min()` miatt marad a .5rem. */
    right: calc((100% - min(100%, 276px)) / 2 + .5rem);
    z-index: 3;
    width: 2.25rem;
    height: 2.25rem;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, .88) !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: 0 .125rem .375rem rgba(69, 56, 49, .2);
    margin: 0 !important;
}

/* A gomb két állapot-spanje `h-100` blokk, ezért az ikon a korong TETEJÉN ült
   (mérve 5,2px-szel a középpont felett) – a span flexbe kerül, az ikon pedig
   kicsit nagyobb lesz (ügyfélkérés). */
.v-item-card-006 .btn-favourite > span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100% !important;
}

.v-item-card-006 .btn-favourite svg {
    width: 1.375rem !important;
    height: 1.375rem !important;
    padding: 0 !important;
}

.v-item-card-006 .btn-add-to-cart,
.v-item-card-006 .btn-offer {
    flex-grow: 0 !important;
}

/* --------------------------------------------------------------------------
   6) SZÖVEGMÉRETEK a tartalmi oldalakon (ügyfélkérés: az Adatkezelés és az
   ÁSZF betűi aránytalanul nagyok)
   A TinyMCE-ből jövő h2/h3 a Bootstrap alapméretét kapja (h1 40px, h2 32px),
   ami egy 20 szakaszos jogi szövegben túl nagy. Arányosabb lépcső.
   -------------------------------------------------------------------------- */
h1.v-header-root {
    font-size: 2rem;
}

.default-style h1,
.default-style_v1 h1 {
    font-size: 1.875rem;
}

.default-style h2,
.default-style_v1 h2 {
    font-size: 1.375rem;
}

.default-style h3,
.default-style_v1 h3 {
    font-size: 1.1875rem;
}

.default-style h4,
.default-style_v1 h4,
.default-style h5,
.default-style_v1 h5 {
    font-size: 1.0625rem;
}

.default-style h2,
.default-style h3 {
    margin-top: 1.75rem;
}

/* --------------------------------------------------------------------------
   7) Kezdőlapi kategória-gyorsikonok (#section_box_2)
   A box_img-title-lead-vertical v18 sablon fixen col-6 col-lg-3-at ad (4/sor)
   és négyzetes képet. Az ügyfél kérése: 6 kategória egy sorban, kör alakú.
   -------------------------------------------------------------------------- */
#section_box_2 .v-inner-boxes-003 {
    justify-content: center !important;
    gap: 0;
}

@media (min-width: 992px) {
    #section_box_2 .v-img-title-lead-vertical-001 {
        flex: 0 0 auto;
        width: 16.6666%;
        max-width: 16.6666%;
    }
}

#section_box_2 .v-img-title-lead-vertical-002 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}

/* a sablon `rounded-0`-t ad (Bootstrap: border-radius:0 !important) -> kell a !important */
#section_box_2 .v-img-title-lead-vertical-004 {
    border-radius: 50% !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* a v18 az elemet Bootstrap .card-ba teszi (fehér háttér) – a mockupon átlátszó */
#section_box_2 .card {
    background-color: transparent !important;
}

#section_box_2 .v-img-title-lead-vertical-007 {
    padding-top: .625rem !important;
    padding-bottom: .25rem !important;
}

#section_box_2 .v-img-title-lead-vertical-008 {
    font-size: 1rem;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   8) Márkáink szekció (#section_collection_1)
   A névsáv `opacity-75`-je a márkaszínt kifakítja és rontja a kontrasztot.
   2026-09-14: a korábbi 3/sor felülírás (33.3333% 992px felett) TÖRÖLVE — az
   ügyfél nagy nézetben 2/sor elrendezést kért, azt a sablon `col-md-6`-ja
   magától adja, egyedi CSS nélkül.
   -------------------------------------------------------------------------- */

#section_collection_1 .v-item-001 h3 {
    opacity: 1 !important;
    font-size: 1rem;
    text-align: center !important;
}

/* --------------------------------------------------------------------------
   9) Szlogen a logó alatt („From my heart to little hearts")
   Az ügyfél lágyabb, finomabb betűt kért, hogy a hangsúly a NARUSKA
   márkanéven legyen. A címsor-betű (Crimson Pro) dőlt, világos változata.
   A sablon `mw-160px`-e két sorba törte, `align-items-center`-e középre zárta.
   -------------------------------------------------------------------------- */
.v-header-logo-label-root {
    font-family: 'Crimson Pro', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: .9375rem !important; /* a sablon font-size-24-e helyett */
    letter-spacing: .04em;
    line-height: 1.25;
    max-width: none !important;
    align-items: flex-start !important;
    /* a szlogen „F"-je pontosan a NARUSKA „N"-je alatt kezdődjön (ügyfélkérés):
       a logó képéről le van vágva az üres szél, ezért 0 margó = azonos bal szél */
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    opacity: .85;
}

@media (max-width: 991.98px) {
    .v-header-logo-label-root {
        align-items: center !important;
        font-size: .8125rem !important;
        text-align: center;
    }
}

/* --------------------------------------------------------------------------
   10) Információs dobozok a hírlevél felett (#section_sections_1)
   A sections-builder tartalma szabad HTML, ezért nincs rá natív hover-effekt
   dsc kulcs (az csak box/collection/news kártyákra van).
   -------------------------------------------------------------------------- */
#section_sections_1 .container > .row > [class*="col-"] > a {
    transition: transform .28s ease, box-shadow .28s ease;
}

#section_sections_1 .container > .row > [class*="col-"] > a:hover,
#section_sections_1 .container > .row > [class*="col-"] > a:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 .75rem 1.5rem rgba(69, 56, 49, .18);
}

/* --------------------------------------------------------------------------
   11) LÁBLÉC (footer-boxes v3)
   a) A v3 a két szövegblokkot `d-lg-flex`-be teszi, így a bekezdései EGY SORBA
      folynak. Oszlopba rendezzük.
   b) A footer-menü v2 sablonjában a csoport-fejléc és a gyerek-linkek azonos
      méretűek, így nem látszik a hierarchia – a fejlécet kiemeljük.
   c) MOBIL: a sablon `d-flex flex-nowrap` + `overflow-x-auto`, ezért a három
      hasáb vízszintesen kicsúszik a képernyőről („csúszkás verzió"). Az ügyfél
      egymás alatti, listás megjelenítést kért.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .v-footer-boxes-009,
    .v-footer-boxes-010 {
        flex-direction: column;
    }

    /* e) A „Rólunk" hasáb kivétele után (ügyfélkérés) két hasáb maradt. A sablon
       `justify-content-md-center`-je ezeket a sáv közepén egymáshoz tapasztotta,
       balra nagy üres felülettel. Két egyenlő sávra osztjuk, így az első hasáb a
       tartalmi bal szélhez (a lábléc-logó vonalához) igazodik, a csík pedig
       kiegyensúlyozottan telik meg. */
    .v-menu-menu-footer-template-001 {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .v-menu-menu-footer-template-002 {
        padding-left: 0 !important;
    }
}

.v-menu-menu-footer-template-002 > span > a {
    font-weight: 600;
    letter-spacing: .03em;
    line-height: 1.6 !important; /* a sablon `lh-sm` (1.25 !important) osztályt ad */
    margin-bottom: .5rem;
    opacity: 1;
}

/* c) A csoport-fejlécekhez NINCS saját oldal, ezért a menü `/`-ra (kezdőlapra)
      linkeli őket – ez félrevezető. Ha később valódi URL-t kap, újra link lesz. */
.v-menu-menu-footer-template-002 > span > a[href="/"] {
    pointer-events: none;
    cursor: default;
}

/* d) Szellősebb sorköz + a gyerek-menüpontok ne legyenek csupa nagybetűsek */
.v-menu-menu-footer-template-004 a {
    line-height: 1.85 !important;
    text-transform: none !important;
    opacity: .85;
}

.v-menu-menu-footer-template-004 a:hover {
    opacity: 1;
    text-decoration: underline !important;
}

@media (max-width: 991.98px) {
    .v-menu-menu-footer-template-001 {
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }
    .v-menu-menu-footer-template-002 {
        width: 100%;
        min-width: 0 !important;
        text-align: left !important;
        /* bal szél a lábléc többi blokkjának vonalában (a container paddingja adja) */
        padding: .875rem 0 !important;
    }
    .v-menu-menu-footer-template-002 + .v-menu-menu-footer-template-002 {
        border-top: 1px solid rgba(69, 56, 49, .12);
    }
}

/* --------------------------------------------------------------------------
   12) TÉRKÖZÖK – egységesebb, kompaktabb (ügyfélkérés)
   A szekció-paddingok dsc-ből mennek (pt-4/pb-4), de a szekciócím sablonja
   (start/section-title_v1) még egy pt-4-et tesz a H2-re, így a cím és az előző
   blokk között 3rem üresség marad.
   -------------------------------------------------------------------------- */
.v-section-title-001 h2 {
    padding-top: .5rem !important;
    margin-bottom: .5rem;
}

.v-section-title-002 {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   13) Hamburger ikon – finomabb vonalvezetés (ügyfélkérés)
   A hamburger_v2 sablon 42x32px-es dobozt és 4px vastag csíkokat rajzol (saját
   inline stílusblokkal), ami a letisztult fejlécben túl hangsúlyos.
   -------------------------------------------------------------------------- */
.v-hamburger-002 .hamburger-box {
    width: 26px !important;
    height: 18px !important;
}

.v-hamburger-002 .hamburger-bar {
    height: 1.5px !important;
    border-radius: 2px !important;
}

.v-hamburger-002 .hamburger-bar:nth-child(2) {
    margin-top: -.75px !important;
}

/* --------------------------------------------------------------------------
   14) Apróbb igazítások az ügyfél észrevételei mentén
   -------------------------------------------------------------------------- */
/* a lábléc-hasábok balra igazítva (a sablon `text-center`-t ad) – látványterv */
.v-menu-menu-footer-template-002 {
    text-align: left !important;
}

/* a lábléc-logó linkjén a sablon `px-3`-at ad, ami 16px-szel behúzza a logót a
   hasábok bal széléhez képest (ügyfélkérés: ne legyen padding) */
.v-footer-boxes-006 > a {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* a lábléc-logónál is a vágás előtti látszó magasság (a származék 33 -> 36 px lett) */
.v-footer-boxes-006 img {
    max-height: 33px;
}

/* a mobil menü közösségi/elérhetőség ikonjai is balra */
#mobileMenu .social-icons {
    justify-content: flex-start !important;
}

/* a hírlevél-blokk `display-6` címe (2.5rem) kilóg a betűméret-lépcsőből */
#section_sections_2 .display-6 {
    font-size: 1.75rem;
}

/* --------------------------------------------------------------------------
   15) HÍRLEVÉL SZEKCIÓ (#section_newsletter_2)
   A motor hírlevél-sablona (inner/newsletter) egy üres helykitöltő oszlopot ad
   a doboz elé, az űrlapot pedig a tartalmához zsugorítja (keskeny mezők), és a
   doboz címét a törzs-betűvel szedi. Ezekre nincs natív dsc beállítás.
   A SZÍNEK dsc-ből jönnek: a szekció „másodlagos világos szín" sávot kapott,
   ezért a doboz fehér lett – itt csak az arányok, a tipográfia és az
   űrlap-elemek finomítása van.
   -------------------------------------------------------------------------- */
/* a) helykitöltő oszlop helyett valódi középre zárás */
#section_newsletter_2 .v-newsletter-001 {
    justify-content: center;
}

#section_newsletter_2 .v-newsletter-003 {
    display: none;
}

/* b) a doboz: mért szélesség, lágy árnyék és halvány keret a sáv felett */
#section_newsletter_2 .v-newsletter-001 > div:has(#newsletterForm) {
    width: 100%;
    max-width: 40rem;
    padding: 2.5rem !important; /* a sablon p-5 (3rem) helyett */
    /* 2026-09-11: a rózsás keret helyett semleges, hogy a barackos tónus a
       nagyobb felületekről mindenhol eltűnjön (ügyfélkérés). */
    border: 1px solid rgba(69, 56, 49, .14);
    box-shadow: 0 .75rem 2rem rgba(69, 56, 49, .08);
}

/* c) a doboz címe a címsor-betűvel (a sablon font-size-24-et ad Jost-tal) */
#section_newsletter_2 .font-size-24 {
    font-family: 'Crimson Pro', Georgia, serif;
    font-size: 1.75rem !important;
    line-height: 1.25;
    letter-spacing: .01em;
    text-wrap: balance;
}

/* a leírás rövidebb sorhosszon, halványabban – a mezők kapják a hangsúlyt */
#section_newsletter_2 .font-size-24 + div {
    max-width: 32rem;
    opacity: .8;
    text-wrap: balance;
}

/* d) az űrlap töltse ki a dobozt (alapból a tartalomhoz zsugorodik) */
#section_newsletter_2 .v-newsletter-004 {
    width: 100%;
}

#section_newsletter_2 .form-control {
    /* a globális keretszín (#f6f0ea) a fehér dobozon szinte láthatatlan, és a
       WCAG 1.4.11 3:1-es kontrasztját sem éri el. 2026-09-11: a korábbi rózsás
       árnyalat helyett semleges barna – kontraszt a fehéren 6,9:1. */
    --bs-border-color: var(--pcolor3);
    min-height: 3rem;
    padding: .625rem .875rem;
}

#section_newsletter_2 .form-control:focus {
    border-color: var(--pcolor);
}

/* a helykitöltő szöveg is olvasható maradjon (.9 áttetszőséggel 5:1) */
#section_newsletter_2 .form-control::placeholder {
    color: var(--pcolor3);
    opacity: .9;
}

/* e) adatkezelési jelölő: a natív 13px-es négyzet helyett arculati színű,
   kattintható elem, olvashatóbb sorral */
#section_newsletter_2 .v-newsletter-008 {
    font-size: .9375rem;
    line-height: 1.5;
    cursor: pointer;
}

#section_newsletter_2 #newsletter-aszf {
    width: 1.125rem;
    height: 1.125rem;
    vertical-align: -.2rem;
    accent-color: var(--pcolor);
    cursor: pointer;
}

/* f) a feliratkozás gomb legyen a doboz fő hangsúlya */
#section_newsletter_2 #newsletter-submit {
    min-width: 13rem;
    padding: .625rem 2rem;
    font-weight: 600;
    letter-spacing: .03em;
}

/* g2) az üres visszajelző sáv ne adjon plusz térközt a gomb alá (a sablon
   mindkét üzenetet d-none-nal rendereli, az űrlap gap-3-a mégis kihagy egy sort) */
#section_newsletter_2 .newsletter-msg-box:not(:has(.newsletter-msg:not(.d-none))) {
    display: none;
}

/* h) borítékikon a doboz élén: a sablonban nincs rá hely, ezért díszítő
   pszeudo-elem. A rajz a szerkesztő-tárban van, arculati rózsás vonalakkal. */
#section_newsletter_2 .v-newsletter-001 > div:has(#newsletterForm)::before {
    content: "";
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: .875rem;
    background: url("/_upload/editor/hirlevel-boritek.svg") center / contain no-repeat;
}

/* i) a sáv ne legyen teljesen lapos: halvány fény a doboz mögött (a szekció
   overflow-hidden + a tartalom z-1, ezért a réteg biztosan alatta marad) */
#section_newsletter_2::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(55% 75% at 50% 45%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

/* g) mobil: kisebb belső térköz, teljes szélességű gomb */
@media (max-width: 575.98px) {
    #section_newsletter_2 .v-newsletter-001 > div:has(#newsletterForm) {
        padding: 1.75rem 1.25rem !important;
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
    }

    #section_newsletter_2 #newsletter-submit {
        width: 100%;
    }
}

/* === szekcio-segedosztalyok (inline style kivaltas) === */
/* --- Hirlevel-urlap szelessege (a korabbi inline max-width kivaltasa).
   A .row gutterjet nullazzuk, hogy a doboz belso szelessege pontosan 520px maradjon. --- */
.v-measure-520{max-width:520px}
.v-measure-520.row{--bs-gutter-x:0}
/* === /szekcio-segedosztalyok === */

/* ==========================================================================
   2026-09-10 – ügyfél-észrevételek II. kör
   ========================================================================== */

/* --------------------------------------------------------------------------
   A) FIGYELMEZTETŐ SÁV – vörös helyett grafit (ügyfélkérés).
   A sablon (header/alert-line.phtml) fixen `bg-danger`-t ad, nincs rá beállítási
   kulcs, ezért a portál egyedi CSS-e írja felül. A `--pcolor` (#453831) sötét
   barna alaphangjához illeszkedő semleges grafit; a fehér felirat kontrasztja
   ezen 13,9:1 (WCAG AAA).
   -------------------------------------------------------------------------- */
.v-header-alert-line-001 {
    background-color: #33302e !important;
}

/* --------------------------------------------------------------------------
   B) KERESŐ – ne sötétítse el az oldalt (ügyfélkérés).
   A `search-modal` háttere `.backdrop.bg-dark` = rgba(0,0,0,.7) + életlenítés.
   Világos, letisztult felületre cseréljük; az életlenítés marad, mert az
   választja el a keresőt a mögötte lévő tartalomtól.
   -------------------------------------------------------------------------- */
#search-modal-bg .backdrop {
    background-color: rgba(250, 249, 247, .93) !important;
}

/* A mező eddig a sötét háttéren kereten kívül is látszott; világos felületen
   kell neki saját keret és lágy árnyék. */
#search-modal-wrapper .v-modals-search-modal-004 {
    box-shadow: 0 .5rem 1.5rem rgba(69, 56, 49, .12) !important;
}

#search-modal-wrapper .search-field {
    /* 2026-09-11: rózsás keret helyett semleges (ügyfélkérés) */
    border: 1px solid rgba(69, 56, 49, .25) !important;
    border-right: 0 !important;
}

/* --------------------------------------------------------------------------
   C) KERESŐ IKON – mobilon csak a hamburger menüben (ügyfélkérés).
   A `.v-auth-wrapper-002` az auth-wrapper kereső listaeleme. Asztali nézetben
   MARAD: ott nincs hamburger menü, tehát az lenne az egyetlen kereső.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .v-navigation-section-004 .v-auth-wrapper-002 {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   D) JOGI OLDALAK – a cím ne szerepeljen kétszer egymás után (ügyfélkérés).
   A Fogyasztóbarát-beágyazás (`#embed-hud`) a saját, nagybetűs címét is
   kirendereli, közvetlenül a mi H1-ünk alatt. A H1-et ezért csak vizuálisan
   rejtjük el: a DOM-ban marad a képernyőolvasónak és a keresőnek.
   A `:has()` miatt a szabály CSAK azokon az oldalakon hat, ahol a beágyazás
   tényleg jelen van (ÁSZF, Adatkezelési Tájékoztató, Cookie Szabályzat).
   -------------------------------------------------------------------------- */
main:has(#embed-hud) h1.v-header-root {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   E) MORZSAMENÜ – a modulgyökérre mutató, tartalmatlan elemek elrejtése.
   Ezek a linkek a motor morzsamenü-építőjéből jönnek, és vagy hibaoldalra
   visznek, vagy ugyanannak a listának a nyers duplikátumára:
     /page/menu/10      – a kikapcsolt "Rólunk" lábléc-csoport (404)
     /collection/details – a gyűjtemény-lista nyers URL-je
     /news              – a Journal (/blog) modulgyökere, azonos tartalommal
   -------------------------------------------------------------------------- */
.breadcrumb-item:has(> a[href="/page/menu/10"]),
.breadcrumb-item:has(> a[href="/collection/details"]),
.breadcrumb-item:has(> a[href="/news"]) {
    display: none !important;
}

/* --------------------------------------------------------------------------
   F) KAPCSOLAT OLDAL – a látványterv szerinti, keskeny, kártyás elrendezés.
   Egyetlen középre zárt hasáb: bevezető, két ikonos elérhetőség-sor, majd az
   üzenetküldő űrlap. Az ikon a menü-törzsbe írt inline SVG, a korong és a
   méretezés innen jön.
   -------------------------------------------------------------------------- */
.naruska-contact {
    max-width: 40rem;   /* keskeny olvasosav, de a container BAL szelehez igazitva */
}

.naruska-contact > h2 {
    margin-bottom: .75rem;
}

.naruska-contact-formtitle {
    margin-top: 2.5rem;
}

.naruska-contact-list {
    margin: 1.5rem 0 0;
}

.naruska-contact-list li {
    display: flex;
    align-items: center;
    gap: .875rem;
    margin-bottom: 1rem;
}

.naruska-contact-ico {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgb(var(--highlighted-color-rgb));
}

.naruska-contact-ico svg {
    width: 1.125rem;
    height: 1.125rem;
    fill: rgb(var(--pcolor-rgb));
}

.naruska-contact-txt strong {
    font-weight: 600;
}

/* Az űrlap gombja a látványterven teljes szélességű, ritkított nagybetűs.
   A felirat maga a közös `send` nyelvi címke (más űrlapokon is ez fut), ezért
   csak a megjelenést állítjuk. */
.naruska-contact .v-default-ajax-btn-001 {
    width: 100%;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding-block: .625rem;
}

.naruska-contact .form_required_text {
    font-size: .875rem;
}

.naruska-contact-note {
    margin-top: 1.25rem;
    text-align: center;
    font-size: .875rem;
    opacity: .8;
}

/* Az adatkezelési checkbox felirata a motorban `btn btn-light` gomb (a szöveg
   kattintásra nyitja a tájékoztatót modálban). Szürke gombdobozként kirí a
   letisztult űrlapból, ezért sima aláhúzott hivatkozásként jelenítjük meg. */
.naruska-contact .dynamic_link {
    background-color: transparent !important;
    border: 0 !important;
    /* a megosztott stiluslap `.btn` szabalya kozepre zarna a tobbsoros feliratot */
    text-align: left !important;
    white-space: normal;
    padding: 0 !important;
    text-decoration: underline;
    vertical-align: baseline;
    /* a portal temaja a `btn-light`-nak feher betuszint ad (--bs-btn-color: #fff),
       ami hatter nelkul olvashatatlan -> a torzsszoveg linkszinet kenyszeritjuk */
    color: rgb(var(--linkcolor-rgb)) !important;
    --bs-btn-color: rgb(var(--linkcolor-rgb));
    --bs-btn-hover-color: rgb(var(--linkcolor-hover-rgb));
}

.naruska-contact .dynamic_link:hover {
    color: rgb(var(--linkcolor-hover-rgb)) !important;
}

.naruska-contact .checkbox label {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

/* a jelolonegyzet az elso sor kozepvonalaba kerul, ne a doboz tetejere */
.naruska-contact .checkbox input[type="checkbox"] {
    margin-top: .25rem;
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   G) FOGYASZTÓBARÁT-BEÁGYAZÁS – címsorméretek (ügyfélkérés: "a jelenlegi nagyon
   nagy betűméretet is vegyétek kisebbre").
   A widget keskeny nézetben (mobil) közvetlenül a lapba írja a dokumentumot, és
   a saját stíluslapjában h1 2.2rem / h2 2rem / h3 1.8rem / h4 1.6rem méretet ad
   (mérve: 35,2 / 32 / 28,8 / 25,6 px) – ez egy jogi szöveg törzsméretéhez képest
   aránytalan. Széles nézetben iframe-be kerül, oda nem látunk be, ott marad az
   eredeti. A `#embed-hud` csak a beágyazás alatt létezik, tehát a szabály
   máshova nem szivárog.
   -------------------------------------------------------------------------- */
#embed-hud h1, #embed-hud-2 h1 { font-size: 1.5rem !important; }
#embed-hud h2, #embed-hud-2 h2 { font-size: 1.25rem !important; }
#embed-hud h3, #embed-hud-2 h3 { font-size: 1.125rem !important; }
#embed-hud h4, #embed-hud-2 h4 { font-size: 1rem !important; }

/* --------------------------------------------------------------------------
   H) BEÁGYAZOTT HARMONIKA – a próza-címsormargó ne tolja szét a sávokat.
   A `%%FAQ_x%%` beágyazás a menü-oldal `.default-style` blokkjába kerül, ahol a
   fenti `.default-style h2, .default-style h3 { margin-top: 1.75rem }` szabály a
   `.accordion-header`-re (ez egy h3) is ráüt: 28 px hézag minden sáv között.
   A modul saját oldalán (/faq) nincs `.default-style`, ott a sávok illeszkednek –
   az a helyes megjelenés, ezt állítjuk vissza a beágyazásban is.
   -------------------------------------------------------------------------- */
.default-style .accordion-header {
    margin-top: 0;
}

/* ==========================================================================
   2026-09-11 – ügyfél-észrevételek III. kör
   ========================================================================== */

/* --------------------------------------------------------------------------
   I) BARACKOS/ROZSDÁS FELÜLETEK ÉS KERETEK SEMLEGESÍTÉSE (ügyfélkérés).
   A nagyobb felületek (hírlevél-sáv, GYIK-harmonika, információs sáv, szekció-
   hátterek) beállításból kaptak világos, visszafogott színt. Az alábbi elemek
   viszont a sablonokban FIXEN kapják a másodlagos (rózsás) színt, nincs rájuk
   beállítási kulcs, ezért itt írjuk felül őket semlegesre.
   A gombok és a jelvények színéhez SZÁNDÉKOSAN nem nyúlunk: az arculat
   kiemelő színe marad (egyeztetve).
   -------------------------------------------------------------------------- */

/* a) fejléc alsó vonala (header_v1: fixen másodlagos színű keret) */
.v-header-wrap.border-secondary {
    border-bottom-color: rgba(69, 56, 49, .14) !important;
}

/* b) a "Termékkategóriák" lenyíló első szintje (category-menu_v3: fixen rózsás
      hasáb; a második szint fehér lenyíló, ezért kell a halvány elválasztó) */
.v-category-menu-001 {
    background-color: rgb(var(--own-color-rgb)) !important;
    border: 1px solid rgba(69, 56, 49, .1);
}

/* c) katalógus-szűrők: a nyitó sáv és a kinyíló panel (filter-box: fixen
      másodlagos szín). A "Szűrés" és "Szűrők törlése" gombok változatlanok. */
.accordion-button.filters-show {
    background-color: rgb(var(--own-color-rgb2)) !important;
    color: var(--pcolor) !important;
}

.accordion-body.bg-secondary-subtle {
    background-color: rgb(var(--own-color-rgb)) !important;
}

/* d) lapozó: a szám-gombok kerete (pagination: fixen másodlagos keret) */
.page-link.border-secondary {
    border-color: rgba(69, 56, 49, .18) !important;
}

/* e) termékadatlap ár-/kosárblokk (action-box: fixen rózsás panel).
      Fehér panel, halvány kerettel – az árnyékot a sablon adja. */
#product-action-box.bg-secondary-subtle {
    background-color: #fff !important;
    border: 1px solid rgba(69, 56, 49, .1);
}

/* f) a mobil "gyors kosárba" sáv kerete (quick-add-to-cart: fixen másodlagos) */
#quick-add-to-cart.border-secondary {
    border-color: rgba(255, 255, 255, .18) !important;
}

/* --------------------------------------------------------------------------
   J) GYIK-HARMONIKA – a nyíl legyen látható a világos sávon.
   A motor stíluslapja a harmonika nyilát FEHÉRRE kényszeríti (!important),
   ami a korábbi rózsás sávon még látszott, a világos sávon viszont eltűnik.
   Adat-URI-t nem tehetünk az egyedi CSS-be (a mentés escape-eli), ezért a
   fehér rajzot szűrővel sötétítjük: brightness(0) = fekete, majd halványítás.
   -------------------------------------------------------------------------- */
.accordion-button::after {
    filter: brightness(0) opacity(.45);
}

/* --------------------------------------------------------------------------
   K) JOURNAL LISTA – a csonka utolsó sor BALRÓL kezdődjön.
   2026-09-11: az utolsó, nem teljes sor középre zárása kipróbálva, de a user
   ELVETETTE ("mindig balról kezdődjenek, akkor is, ha nem teljes a sor"),
   ezért a Bootstrap alap (bal szélhez igazított) rács marad, egyedi szabály
   nélkül. A hasábszámot sem csökkentjük: a kártyakép származéka 400 képpont
   széles, nagyobb hasábban felskálázódna.
   A cikkoldal üres foltját a dsc `news-common-content=v2` (banner felül)
   oldotta meg, nem CSS.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   L) MEGRENDELÉSI FOLYAMAT – a rózsás felületek itt is semlegesre (ügyfélkérés).
   Ezek csak kosárban lévő termékkel látszanak, ezért külön mérve:
   - a lépésjelző három csempéje (order-header): az aktív/elérhető állapotot az
     árnyék és az áttetszőség jelzi, a szín nem, ezért a csere nem visz el
     információt;
   - a kosár- és az áttekintő-tábla panelje, valamint a fejléc kosár-kivonata.
   -------------------------------------------------------------------------- */
.v-order-header-001 a {
    background-color: rgb(var(--own-color-rgb2)) !important;
}

.v-cart-items-001,
.v-cart-small-items-001,
.v-overview-item-details-row-001 {
    background-color: #fff !important;
    border: 1px solid rgba(69, 56, 49, .1);
}

/* --------------------------------------------------------------------------
   M) TERMÉKADATLAP – a „Termékképek" feliratot a sablon akkor is kiírja, ha a
   terméknek EGY képe van, tehát nincs alatta bélyegkép-sor: így magában álló,
   értelmezhetetlen feliratként lóg a fő kép alatt (a NARUSKA termékeinek
   többségénél egy kép van). A feliratot csak akkor rejtjük, ha nincs mellette
   képsáv, tehát több kép esetén változatlanul megjelenik.
   -------------------------------------------------------------------------- */
div:has(> .v-photos-box-002):not(:has(.product-photo-slider)) > .v-photos-box-002 {
    display: none;
}

/* --------------------------------------------------------------------------
   N) KERESŐ GOMB – a nagyító-ikon iPhone-on eltűnt (2026-09-14, ügyfélkérés).
   A gombba tett ikonnak nincs saját szélessége, a méretét a rajz arányából
   kellene kiszámolni. A Chrome ezt megteszi (20 képpont), a WebKit – tehát az
   iOS Safari – viszont nullára oldja fel, így a barna gomb üresen látszik.
   Rögzített méret kell. 18 képpont: a gomb 44 képpontos szélessége így nem
   változik, az asztali nézet mérete gyakorlatilag érintetlen marad.
   -------------------------------------------------------------------------- */
#search-modal-wrapper .btn-search svg {
    width: 18px;
    height: 18px;
}