/** Shopify CDN: Minification failed

Line 849:0 Unexpected "}"

**/
/* ============================================================================
   OLDAL-MARGO: EGYETLEN FORRAS  (Balint 2026-08-02)
   Eddig harom kulonbozo margo elt egymas mellett a termekoldalon:
     - a fejlec menuje         3.2rem  (sajat szabaly)
     - a galeria belyeg-sinje  1.5rem  (a --k-pagepad TARTALEK erteke:
                                        a valtozot soha senki nem definialta)
     - a page-width szekciok   1300px-re zarva, kozepre  -> 70px 1440-en
   Innentol MINDHARMOT ez a valtozo adja. Ha a margot valtoztatni kell,
   EZT az egy erteket kell atirni.
   ============================================================================ */
:root{--k-pagepad:1.5rem}
@media screen and (min-width:990px){ :root{--k-pagepad:3.2rem} }

/* ============================================================================
   KARMA temaréteg  (karma-theme.css)
   ============================================================================
   MI EZ: a Dawn folé huzott sajat reteg. A fejlec VEGEN tolt be, minden Dawn
   komponens-CSS utan -> a szabalyaink a SORREND miatt nyernek, nem-tal.
   (Ha uj szabalyhoz megis kell, az arulkodo jel: valoszinuleg egy
   szekcio sajat <style> blokkja irja felul - ott javitsd, ne itt eroltesd.)

   HOL VAN MI (sorszamok a fajl ~644 sorahoz):
     1) Alapok, tipografia, gombok, urlap-elemek .............. ~40
     2) Fejlec, logo, navigacio, bejelentkezes ................ ~150
     3) Termekkartya v2 (grid card) ........................... ~293
     4) Mega menu (Seymoure-tipus) ............................ ~302
     5) Mobil menu-drawer ..................................... ~316
     6) Szuro-reteg (drawer + savok, 8 alpont) ................ ~389
     7) KOLLEKCIO: navigacios zona (sav + csempek + szuro) .... ~518
     8) KOLLEKCIO: also tapado szuro-sav ...................... ~559
     9) KOLLEKCIO: felso szures-jel (desktop, halk) ........... ~633

   !IMPORTANT-MERLEG 2026-08-02: 131 darab kiveve, 12 maradt - mind a ket
   dokumentaltan szukseges blokkban (szuro-drawer panel + mobile-facets szin).
   A bizonyitas: stripped-CSS diff a dev szerveren, 3 oldal desktop + 2 mobil,
   ~30 elem x 22 tulajdonsag versus valtozatlan bazis. Ket szabalyt nem
   !important, hanem ".template-product" specificitas-bump mentett meg
   (karma-pdp.css: felezett kepernyo + mobil full-bleed ors).

   TAKARITVA 2026-08-02 (Fable-kor): 89 halott szabaly torolve - a kivezetett
   funkciok stilusai (zsak-upsell a PDP-n, szallitas-valaszto, gift-band,
   mega-menu kartyak, karma-personal, karma-trust, regi quotes-racs, stb.).
   A "halott" minositest a scratchpad audit adta: az osztaly SEM a temaban,
   SEM a Shopify-oldalak torzseben, SEM a termekleirasokban nem fordul elo.

   MAS FAJLOKBAN:
     karma-pdp.css ....... termekoldal (galeria, sin, lenyilo, nagyito)
     karma-prose.css ..... tartalom-oldalak tipografiaja (.karma-prose)
     section-karma-home.css .. fooldali szekciok (csempek, hero, ...)
     szekcio-specifikus stilus: az adott sections/karma-*.liquid <style> blokkjaban
       (ez SZANDEKOS: a komponens egyben marad - markup + stilus + viselkedes)

   SZABALY: uj kollekcio-oldali stilust MINDIG a .template-collection ala szukits
   (a body-n ott a template-<page_type> osztaly) - kulonben athat mas oldalakra.
   ============================================================================ */

:root{--k-ease:cubic-bezier(0.16,1,0.3,1);--k-gold:#C8A24B;--k-sepia:#9D6724;--k-line:rgba(17,17,17,.08)}

/* --- termékkártyák: Casablanca-quiet (kis sans név + hangsúlyos ár + swatch-pöttyök) --- */
/* VEGSO (user-dontes): keret NELKULI, tiszta kartya - feher kep-mezo, minimal.
   A .card__content Dawn 3-soros gridje block-ra cserelve (az info egysegesen
   a kep alatt ul, nem uszkal fuggolegesen). */
.card-wrapper .card{background:transparent;border:0;box-shadow:none}
.card-wrapper .card__inner{background:#fff}
.card-wrapper .card__media img{transition:opacity .3s ease;transform:none;
  object-fit:contain;padding:5% 7%;box-sizing:border-box}
.card-wrapper .card__content{display:block;text-align:left;padding:1.4rem .2rem 0}
.card-wrapper .card__information{padding:0}
.card-wrapper .karma-card-mat{display:none}
.card .card__heading{font-family:var(--font-body-family);font-size:1.3rem;font-weight:500;
  line-height:1.4;letter-spacing:.02em;text-transform:none;color:#1a1a1a;margin:0}
.card .card__heading a{text-decoration:none;color:inherit}
.card .card__heading::after{display:none}
.karma-card-mat{font-size:1rem;font-weight:300;text-transform:uppercase;
  letter-spacing:.12em;color:#8a8a8a;margin:.3rem 0 0}

.karma-personal{padding:clamp(3rem,4.5vw,5.5rem) 2rem 0;text-align:center}

/* min-width:0 - flex-gyerek nem csordulhat tul a karten */
.karma-personal__body{flex:1 1 auto;min-width:0}

@media screen and (max-width:749px){
  
  .karma-personal__body{width:100%}
  
}

/* kiemelt velemeny-hármas a teljes widget elott */
.karma-pdp-quotes{padding-top:clamp(3.5rem,5vw,6rem)}

.karma-pdp-quotes blockquote{margin:0;padding:0 clamp(2rem,3vw,4rem);border-left:1px solid rgba(17,17,17,.12)}
.karma-pdp-quotes blockquote:first-child{border-left:0;padding-left:0}

.karma-pdp-quotes p{margin:1rem 0 1.2rem;font-size:1.35rem;line-height:1.7;color:rgba(17,17,17,.75)}
.karma-pdp-quotes cite{font-style:normal;font-size:1.02rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(17,17,17,.45)}
@media screen and (max-width:749px){
  
  .karma-pdp-quotes blockquote{border-left:0;padding-left:0;padding-right:0}
}

/* csendes Bestseller-jelzes (arany kiscaps) - kartya + PDP */
.karma-card-flag{display:block;margin:0 0 .4rem;font-size:.95rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--k-gold)}

/* Judge.me csillag-badge a cim alatt: kompakt, halk */
.jdgm-preview-badge{display:block;margin:.2rem 0 .6rem}
.jdgm-preview-badge .jdgm-star{color:var(--k-gold)}

/* tombositett info-blokk (VEGSO): nev felul, AR kozvetlenul alatta balra, majd swatchok */
.karma-card__row{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}
.karma-card__row .card__heading{margin:0;padding-right:0}
.karma-card__price .price,.card-information .price{font-size:1.3rem;font-weight:600;
  letter-spacing:.04em;color:#1a1a1a;margin:0;justify-content:flex-start;
  font-variant-numeric:tabular-nums}
/* cim-hover: nincs alahuzas, halk elhalvanyulas (csendes-luxus) */
.card .card__heading a:hover{text-decoration:none;opacity:.6;transition:opacity .25s}
.card-information s.price-item{color:#8a8a8a;font-weight:300}
/* a kartya-overlay (.card__heading a::after) FOLE emelve, hogy kattinthatok legyenek */
.karma-swatches{display:flex;gap:.7rem;margin-top:1.1rem;position:relative;z-index:3}
/* negyzetes szin-minta (KHAITE-minta - nalunk minden szogletes) */
.karma-swatch{width:2rem;height:2rem;border-radius:0;overflow:hidden;cursor:pointer;
  border:1px solid rgba(17,17,17,.18);flex:none;transition:border-color .2s,box-shadow .2s}
.karma-swatch:hover{border-color:rgba(17,17,17,.5)}
.karma-swatch.is-active{border-color:#111;box-shadow:0 0 0 1px #111}

.karma-swatches .karma-swatch:nth-child(n/**/+7){display:none}
.card-wrapper .card__badge,.card-wrapper .quick-add,.card-wrapper .rating{display:none}
.product-grid{column-gap:2.4rem;row-gap:5.6rem}
@media screen and (max-width: 749px){
  .product-grid{column-gap:1.2rem;row-gap:4rem}
  .card .card__heading{font-size:1.2rem}
  .card-wrapper .card__content{padding-top:1rem}
}

/* --- kollekció-csempék: overlay-címke + zoom --- */
[id*="__collections"] .card{position:relative}
[id*="__collections"] .card__content{position:absolute;left:0;right:0;bottom:0;z-index:2;
  background:linear-gradient(transparent,rgba(0,0,0,.5));padding:2.4rem 2.2rem 2rem;pointer-events:none}
[id*="__collections"] .card__heading{margin:0}
[id*="__collections"] .card__heading a{color:#fff;font-family:var(--font-heading-family);
  text-transform:uppercase;letter-spacing:.18em;font-size:2.1rem;pointer-events:auto}
[id*="__collections"] .card__heading .icon-wrap{display:none}
[id*="__collections"] .card:hover .card__media img{transform:scale(1.05)}

/* --- trust-sáv: kompakt --- */
[id*="__trust"] .multicolumn{border-bottom:1px solid var(--k-line)}
[id*="__trust"] .section-padding,[id*="__trust"] .multicolumn{padding-top:1.8rem;padding-bottom:1.8rem}
[id*="__trust"] h3{font-family:var(--font-body-family);font-size:1.25rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;margin:0}
[id*="__trust"] .multicolumn-card__info{padding:0}
[id*="__trust"] .multicolumn-card__info p{font-size:1.15rem;color:rgba(17,17,17,.55);margin:.2rem 0 0}
[id*="__trust"] .multicolumn-list__item{padding:0}


/* --- vélemények --- */
[id*="__velemenyek"] .multicolumn-card{border:1px solid rgba(17,17,17,.12);border-radius:0;
  padding:2.8rem 2.6rem;height:100%}
[id*="__velemenyek"] .multicolumn-card__info{padding:0}
.multicolumn [id*="velemenyek"] p{margin:0}
[id*="__velemenyek"] .multicolumn-card__info p:first-child{color:var(--k-gold);letter-spacing:.2rem;margin:0}
[id*="__velemenyek"] .multicolumn-card__info em{font-family:var(--font-heading-family);font-size:1.9rem;
  font-style:italic;line-height:1.45;display:block;margin:.8rem 0 1.4rem}
[id*="__velemenyek"] .multicolumn-card__info p:last-child{font-size:1.05rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(17,17,17,.5)}

/* --- story: fekete-fehér --- */
[id*="__story"] .image-with-text__media img{filter:grayscale(1)}

/* --- craft: spec-lista --- */
[id*="__craft"] .image-with-text__text ul{list-style:none;padding:0;margin:1.8rem 0}
[id*="__craft"] .image-with-text__text li{padding:1.1rem 0;border-bottom:1px solid #e7ddcd;font-size:1.35rem}
[id*="__craft"] .image-with-text__text li strong{font-weight:500;margin-right:.8rem}

/* --- PDP finomítás --- */
.product__accordion .accordion__content{color:rgba(17,17,17,.72);font-size:1.35rem}
.product__info-container .product__title h1{letter-spacing:.05em}

/* --- ingyenes szállítás progress (drawer) --- */
.karma-progress{padding:1.4rem 0 .4rem;margin:0 0 .6rem;border-bottom:1px solid var(--k-line)}
.karma-progress__msg{margin:0 0 .8rem;font-size:1.2rem;letter-spacing:.04em;color:rgba(17,17,17,.7)}
.karma-progress__msg strong{font-weight:500;color:#111}
.karma-progress__msg--done{color:#111}
.karma-progress__bar{height:2px;background:rgba(17,17,17,.1);overflow:hidden}
.karma-progress__bar span{display:block;height:100%;background:var(--k-gold);
  transition:width .6s var(--k-ease)}
/* --- addon-doboz (hímzés + ajándék) --- */
.karma-addon{border:1px solid rgba(17,17,17,.2);padding:1.5rem 1.6rem;margin:0 0 1.2rem}
.karma-addon label.toggle{display:flex;gap:1.2rem;align-items:flex-start;cursor:pointer;font-size:1.3rem;line-height:1.5}
.karma-addon label.toggle input{margin-top:.4rem;accent-color:#111;width:1.6rem;height:1.6rem;flex:none}
.karma-addon .ar{margin-left:auto;white-space:nowrap;font-weight:500}
.karma-addon .mezo{display:none;margin-top:1.2rem}
.karma-addon .mezo.lathato{display:block}
.karma-addon .mezo input{width:100%;border:1px solid rgba(17,17,17,.3);padding:1.1rem 1.2rem;
  font-size:1.4rem;border-radius:0;letter-spacing:.06em}
.karma-addon .mezo small{display:block;margin-top:.5rem;color:rgba(17,17,17,.55);font-size:1.1rem}

/* --- hímzés-szerkesztés a kosárban --- */
.karma-himzes-edit{margin:.8rem 0 .4rem}
.karma-himzes-edit label{display:block;font-size:1.05rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(17,17,17,.55);margin-bottom:.4rem}
.karma-himzes-edit__row{display:flex;gap:.8rem;align-items:center}
.karma-himzes-edit input{flex:1;min-width:0;max-width:18rem;border:1px solid rgba(17,17,17,.25);
  padding:.7rem .9rem;font-size:1.3rem;border-radius:0;letter-spacing:.06em;background:#fff}
.karma-himzes-edit__save{border:1px solid #111;background:#111;color:#fff;font-size:1rem;
  letter-spacing:.14em;text-transform:uppercase;padding:.7rem 1.2rem;cursor:pointer;border-radius:0}
.karma-himzes-edit__ok{font-size:1.1rem;color:#9D6724;letter-spacing:.08em}

/* --- szekció-elválasztó cím (hub: kategóriák | termékek határ) --- */
.karma-secthead{margin-top:4.4rem;padding-top:3.6rem;text-align:center}
.karma-secthead--divider{border-top:1px solid rgba(17,17,17,.12)}
.karma-secthead__eyebrow{margin:0 0 .8rem;font-size:1.05rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:#8a8a8a}
.karma-secthead__title{margin:0;font-family:var(--font-body-family);font-weight:500;
  font-size:1.7rem;letter-spacing:.26em;text-transform:uppercase}
.karma-secthead__count{margin:.6rem 0 0;font-size:1.15rem;letter-spacing:.12em;
  color:rgba(17,17,17,.5)}

/* --- szűrő: bal oldali függőleges, prémium-minimál (Mytheresa/Net-a-Porter vonal) --- */
.facets-container{border:0;padding:0;margin:0}
/* szűrő-csoportok: hairline-elválasztva */
.facets__disclosure-vertical{border-bottom:1px solid rgba(17,17,17,.1)}
.facets__disclosure-vertical:first-child{border-top:1px solid rgba(17,17,17,.1)}
.facets__disclosure-vertical .facets__summary{border:0;background:none;
  padding:1.7rem .2rem;margin:0;list-style:none;cursor:pointer}
.facets__disclosure-vertical .facets__summary::-webkit-details-marker{display:none}
.facets__disclosure-vertical .facets__summary>div{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.facets__disclosure-vertical .facets__summary span{font-size:1.12rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:#1a1a1a}
.facets__disclosure-vertical .facets__summary .icon-caret{width:1.1rem;height:1.1rem;opacity:.55;transition:transform .3s}
.facets__disclosure-vertical[open] .facets__summary .icon-caret{transform:rotate(180deg)}
.facets__display-vertical{border:0;padding:0 0 1.6rem}
/* értékek: tiszta checkbox-sorok, halvány db-szám */
.facet-checkbox{font-size:1.3rem;padding:.65rem .2rem;color:rgba(17,17,17,.72);
  letter-spacing:.01em;font-weight:400;display:flex;align-items:center;border:0;margin:0}
.facet-checkbox:hover{color:#111}
.facet-checkbox input[type=checkbox]{width:1.6rem;height:1.6rem;margin:0 1.1rem 0 0;accent-color:#1a1a1a;flex:none}
.facet-checkbox>span{letter-spacing:.01em}
/* aktív szűrő chip: EGY tiszta lekerekített pill, nincs dupla keret */
.active-facets__button,.active-facets__button--light{border:1px solid rgba(17,17,17,.28);
  background:#fff;color:#1a1a1a;border-radius:5rem;box-shadow:none;padding:0}
.active-facets__button-inner,.active-facets .button,.active-facets .button--tertiary{border:0;
  box-shadow:none;background:transparent;border-radius:0;padding:.75rem 1.7rem;
  font-size:1.1rem;letter-spacing:.05em;text-transform:uppercase;color:#1a1a1a}
/* szűrő fejléc-sor: SZŰRÉS + törlés tisztán, egy sorban */
.active-facets-vertical-filter{display:flex;justify-content:space-between;align-items:baseline;
  gap:1.2rem;flex-wrap:wrap;row-gap:.3rem;margin-bottom:1.4rem}
.facets__heading--vertical{font-size:1.12rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:#1a1a1a;margin:0;padding:0;white-space:nowrap}
.active-facets__button-remove{font-size:1.05rem;letter-spacing:.02em;
  text-transform:none;color:rgba(17,17,17,.5);white-space:nowrap;text-underline-offset:.3rem}
.active-facets__button-remove:hover{color:#111}
/* szűrő mobilon: minden balra igazítva, tiszta */
@media screen and (max-width:749px){
  .facets-vertical.page-width .facets-wrapper{padding-left:0;padding-right:0;text-align:left}
  .facets-vertical .active-facets,.facets-vertical .active-facets-desktop{justify-content:flex-start;text-align:left}
  .facets-vertical .active-facets-vertical-filter{justify-content:space-between;width:100%}
  .facets-vertical .product-count,.facets-vertical .product-count__text{text-align:left;
    justify-content:flex-start;margin-left:0}
  .mobile-facets__open{border:0;padding:0;
    letter-spacing:.1em;justify-content:flex-start}
  .mobile-facets__open-wrapper{justify-content:flex-start}
  .mobile-facets__list .mobile-facets__item{text-align:left}
}
.active-facets:empty,.active-facets__button-wrapper:empty{display:none}
.facets__price{padding-top:1rem}
/* szűrő-nyitó gomb: desktopon keret NELKUL (tiszta ikon+szoveg), mobilon marad a keret (fentebb) */
.mobile-facets__open{border:0;color:#1a1a1a;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
/* biztonsagi halo: a kollekcio-grid desktopon 3 oszlop, teljes szelesseg (drawer modban is) */
@media screen and (min-width:990px){
  #ProductGridContainer .product-grid{display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr))}
  #ProductGridContainer .product-grid > li{width:auto;max-width:none;margin:0}
}

/* --- Stockholm-skin: sans display-címek a bolt többi részén --- */
.product__title h1,.product__title{font-family:var(--font-body-family);
  font-size:1.9rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;line-height:1.5}
.collection-hero__title,.main-page-title,.cart__title{font-family:var(--font-body-family);
  font-size:1.8rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase}

/* --- Judge.me: Stockholm-ráigazítás (ne app-doboz legyen, hanem a bolt része) --- */
.jdgm-star{color:#C8A24B}
.jdgm-prev-badge__text{font-size:1.1rem;letter-spacing:.08em;color:rgba(17,17,17,.55)}
/* A VELEMENY-WIDGET teljes ratervezese ATKOLTOZOTT: assets/karma-judgeme.css
   (a termekoldal `pdp-reviews` blokkja tolti be). Itt CSAK a kartyakon latszo
   elonezeti csillag marad, mert az a kollekcio-oldalakon is kell. */


/* ===== termekkartya v2: letisztult, konturos, contain-kepes ===== */
.card--standard .card__media .media img{object-fit:contain;background:#fff}
.card--standard .card__media{background:#fff}
.card--standard .card__inner{border:1px solid rgba(17,17,17,.1);
  transition:border-color .3s cubic-bezier(.16,1,.3,1)}
.card-wrapper:hover .card--standard .card__inner{border-color:rgba(17,17,17,.4)}
.card--standard .card__media .media img{transition:none}
.card-wrapper:hover .card__media .media img{transform:none}

/* ===== Seymoure-tipusu mega menu ===== */
/* A linkoszlop AHHOZ A MENUPONTHOZ igazodik, amelyiken a kurzor all
   (Balint kerese 2026-08-06). Az eltolast JS meri es a --karma-mega-x
   valtozoban adja at (header-mega-menu.liquid); JS nelkul a fejlec sajat
   margojara esik vissza - igy sosem csuszik szet. */
.karma-mega.page-width{max-width:none;
  padding-left:var(--karma-mega-x, 3.2rem);padding-right:3.2rem;
  transition:padding-left .28s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){ .karma-mega.page-width{transition:none} }
.karma-mega{padding-top:.2rem;padding-bottom:.8rem;
  /* egyseges panel-magassag: a legtobb alpontot tartalmazo menu szabja meg
     (--karma-mega-rows a snippetbol jon), igy a dropdown nem ugral.
     Balint 2026-08-11: konszolidalva - az also parnazas a felsovel azonos,
     a keplet konstansa a ket parnazas osszege, igy a panel eppen a tartalomra zar */
  min-height:calc(var(--karma-mega-rows, 6) * var(--karma-mega-row, 3.9rem) + 1rem);
  box-sizing:border-box}
.karma-mega__links{list-style:none;margin:0;padding:0;columns:1}
.karma-mega__link{display:inline-block;padding:.85rem 0;font-size:1.2rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(17,17,17,.75);text-decoration:none;
  transition:color .2s}
.karma-mega__link:hover{color:#111;text-decoration:underline;text-underline-offset:.5rem}


/* ===== mobil menu-drawer: nagy, szellos, ritkitott ===== */
.menu-drawer__menu-item{text-transform:uppercase;letter-spacing:.18em;font-size:1.35rem;
  padding:1.7rem 3rem}
.menu-drawer__menu li{border-bottom:1px solid rgba(17,17,17,.05)}


/* ===== Seymoure-drawer: valto + flat lista ===== */
.karma-drawer{padding:2.4rem 3rem 0}
.karma-drawer__tabs{display:flex;gap:1.6rem;margin-bottom:2.4rem}
.karma-drawer__tab{display:inline-block;background:none;border:1px solid transparent;padding:1rem 1.8rem;
  cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;
  font-size:1.6rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:rgba(17,17,17,.45)}
.karma-drawer__tab.is-active{color:#111;border-color:#111}
.karma-drawer__list{list-style:none;margin:0 0 1.6rem;padding:0}
.karma-drawer__link{display:block;padding:1.3rem 0;font-size:1.25rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(17,17,17,.8);text-decoration:none}
.karma-drawer__rest{border-top:1px solid rgba(17,17,17,.1);padding-top:1.2rem}
.karma-drawer__link--top{font-size:1.3rem;color:#111}
.karma-drawer__group summary{display:flex;justify-content:space-between;align-items:center;
  cursor:pointer;list-style:none}
.karma-drawer__group summary::-webkit-details-marker{display:none}
.karma-drawer__plus::before{content:"+";font-size:1.8rem;font-weight:300}
.karma-drawer__group[open] .karma-drawer__plus::before{content:"−"}
.karma-drawer__sublist{list-style:none;margin:0;padding:0 0 1rem 1.6rem}
.karma-drawer__link--sub{font-size:1.15rem;color:rgba(17,17,17,.6);padding:1rem 0}

/* Header: kozepen-logo - menu balra kiloghat (teljes szelesseg), EGY sorban, nyilak nelkul */
@media screen and (min-width: 990px){
  .header--middle-center.page-width{max-width:none}
  /* A Dawn base.css-ben ".header:not(.drawer-menu).page-width" (0,3,0) ad 5rem
     paddinget 990px folott - a :not() is beleszamit a specificitasba, ezert az
     egyszeru ket-osztalyos szelektorunk hiaba toltodik kesobb, veszit. UGYANAZT
     a szelektort hasznaljuk, igy mar a sorrend dont. */
  .header:not(.drawer-menu).page-width{
    padding-left:var(--k-pagepad);padding-right:var(--k-pagepad)}
  .header--middle-center .header__inline-menu{margin-left:0;justify-self:start}
  .header--middle-center .header__inline-menu > .list-menu--inline{
    flex-wrap:nowrap;justify-content:flex-start;column-gap:2.4rem}
  .header--middle-center .header__menu-item{
    padding:1.2rem 0;white-space:nowrap;letter-spacing:.1em;font-size:1.22rem;font-weight:500;
    color:rgba(17,17,17,.82)}
  .header--middle-center .header__menu-item .icon-caret,
  .header--middle-center .header__inline-menu summary.header__menu-item svg{display:none}
  .header--middle-center .header__inline-menu .header__submenu{white-space:normal}
}

/* Mega-menu dropdown: HOVER-re es kattintasra is nyilik (robusztus).
   A tartalmat mindig rendereljuk (feluliras a natv <details> rejtes ellen),
   a lathatosagot a li:hover (DOM-alapu, gap nelkul) / [open] / focus-within vezerli.

   FONTOS - BETOLTESI VILLANAS JAVITASA (Balint jelezte 2026-08-06: "ilyeneket
   csinal a honlap, amikor megerkezek ra... aztan beall egy ido utan"):
   a POZICIONALAS is ITT all, nem csak a Dawn component-mega-menu.css-eben.
   Az a fajl ASZINKRON tolt (media="print" + onload), a mi retegunk viszont
   render-blokkolo. Amig az aszinkron CSS meg nem ert oda, a panel
   position:static volt -> BENT ULT A DOKUMENTUM-FOLYAMBAN, ezert a szulo <li>
   olyan magas lett, mint az egesz lenyilo. Ha a kurzor barhol ebben a savban
   allt (pl. mert a lap toltese kozben ott volt az eger), a li:hover AZONNAL
   megnyitotta a panelt - ez volt a "hibanak tuno" villanas. Amint az aszinkron
   CSS megerkezett, a li visszazsugorodott, a hover megszunt, a panel becsukodott:
   innen jott a "beall egy ido utan".
   A .header-wrapper{position:relative} a base.css-bol jon, ami szinten
   render-blokkolo - tehat a containing block az elso festeskor mar letezik. */
/* BETOLTESI GLITCH JAVITASA (Balint jelezte 2026-08-18: "ezt miert csinalja a
   theme a menuben amikor akad?" - a lenyilo panel keskeny feher csik volt, a
   menupont szelessegevel, a tartalom pedig kilogott belole).

   A lanc: a base.css (render-blokkolo) `header-menu > details{position:relative}`
   szabalya miatt a <details> a viszonyitasi doboz. A feloldas
   (`.mega-menu{position:static}`) viszont a component-mega-menu.css-ben ul, ami
   ASZINKRON tolt (media="print" + onload). Amig az meg nem erkezik, a mi
   `position:absolute; left:0; right:0` panelunk a <details>-hez meretezodik -
   vagyis olyan szeles lesz, mint a menupont szovege.

   Ezert a feloldast IDE hozzuk, a render-blokkolo retegbe: az elso festeskor mar
   ervenyes, tehat a villanas fel sem lephet. (Specificitas: .mega-menu = 0,1,0
   veri a header-menu > details = 0,0,2-t.) */
.mega-menu{position:static}

@media screen and (min-width: 990px){
  .header__inline-menu .mega-menu > .mega-menu__content{
    position:absolute;
    left:0; right:0; top:100%;
    background:rgb(var(--color-background));
    display:block;
    visibility:hidden;
    opacity:0;
    transform:translateY(-1rem);
    pointer-events:none;
    transition:opacity .26s ease, visibility .26s ease, transform .26s ease;
    z-index:5;
    /* Balint 2026-08-10: az almenuk kozelebb a fomenuhoz - a Dawn 3rem-es felso
       parnazasa 1.4rem-re szukult; 2026-08-11 este: meg kozelebb, 0.5rem-re.
       Az also 1.4rem marad: a zaro hajszalvonal folott optikailag kell a levego. */
    padding-top:0;
    padding-bottom:1.4rem;
  }
  .header__inline-menu li:hover .mega-menu__content,
  .header__inline-menu .mega-menu[open] > .mega-menu__content,
  .header__inline-menu .mega-menu:focus-within > .mega-menu__content{
    visibility:visible;
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  /* hid a summary es a lenyilo kozott, hogy athuzaskor ne csukjon be */
  .header__inline-menu .mega-menu__content::before{
    content:"";position:absolute;left:0;right:0;bottom:100%;height:2.2rem;
  }
  /* a lenyilo felett legyen a kurzor "kattinthato" jelzes a summary-n */
  .header__inline-menu summary.header__menu-item{cursor:pointer}
  /* Balint 2026-08-10: az aktiv oldal alahuzasa a fomenuben "beragadt" hatasu volt
     (a Dawn az epp nyitott szekcio menupontjat huzza ala allandoan). Kivesszuk;
     hoverre tovabbra is alahuz. A lenyilo aktiv elemenel ugyanigy. */
  .header__inline-menu span.header__active-menu-item{text-decoration:none}
  .header__inline-menu summary:hover span.header__active-menu-item,
  .header__inline-menu .header__menu-item:hover span.header__active-menu-item{text-decoration:underline;text-underline-offset:.3rem}
  .karma-mega__link.mega-menu__link--active{text-decoration:none}
  .karma-mega__link.mega-menu__link--active:hover{text-decoration:underline}
}

/* Morzsamenu (docs/45 7.2): halk linksor a sav bal szelen, a rendszer
   UI-hangjan. Kollekcion a hero tetejen, termeklapon a racs folott ul. */
.karma-morzsa{display:block;max-width:var(--karma-sav);margin:0 auto;
  padding:1.8rem var(--karma-margo) 0;font-size:1.15rem;letter-spacing:.06em;
  color:rgba(17,17,17,.45)}
.karma-morzsa a{color:inherit;text-decoration:none;transition:color .2s ease}
.karma-morzsa a:hover{color:#111;text-decoration:underline;text-underline-offset:.3rem}
.karma-morzsa__elv{margin:0 .55em;color:rgba(17,17,17,.3)}
.karma-morzsa__itt{color:rgba(17,17,17,.6)}
/* a kollekcio-fejlec sajat felso levegoje mar boseges - a morzsa utan ne dupla */
.template-collection:not(:has(.karma-tiles)) .collection-hero{position:relative}
.template-collection:not(:has(.karma-tiles)) .collection-hero .karma-morzsa{
  position:absolute;top:0;left:0;right:0}
/* termeklapon normal folyasban, kis also terkozzel */
/* ===== PDP fuggoleges ritmus (Balint 2026-08-12): a szoveg- es szekcio-kozok
   egysegesen a content-oldalak nagy szekcio-kozet kapjak. A szekcio-wrapperek
   osszevissza parnazasa nullazva; a kozt MINDIG a blokk sajat felso margoja
   adja (az 1.2rem-es Dawn szekcio-margoval korrigalva). SZELESSEGHEZ NEM
   nyulunk - a felezett-kepernyos design erintetlen. */
.template-product .shopify-section[id*="__pdp-"] [class*="-padding"],
.template-product .shopify-section[id*="__main"] [class*="-padding"]{
  padding-top:0;padding-bottom:0}
/* Balint 2026-08-12: a termek-blokk ne tapadjon a menu aljara - merskelt
   felso levego a galeria es az info-oszlop folott */
.template-product product-component > .page-width{padding-top:clamp(2rem,3vw,4rem)}
/* a Dawn 1.2rem-es szekcio-margoi kiszamithatatlanul adodnak ossze (ures
   blokkoknal duplan) - a PDP tartalmi szekcioin nullazzuk, igy MINDEN kozt
   kizarolag a --pdp-koz ad, blokk-kihagyasnal is pontosan. */
.template-product .shopify-section[id*="__pdp-"],
.template-product .shopify-section[id*="__kalkulator"],
.template-product .shopify-section[id*="__related-products"],
.template-product .shopify-section[id*="__disclosures"]{margin-top:0}
.template-product{--pdp-koz:clamp(7rem,10vw,12rem)}
.template-product .karma-manu{margin-top:var(--pdp-koz)}
.template-product .karma-pdp-quotes{margin-top:var(--pdp-koz);padding-top:0}
.template-product .karma-jdgm{margin-top:var(--pdp-koz)}
.template-product .karma-kalk{padding-block:0;margin-top:var(--pdp-koz)}
.template-product .shopify-section[id*="__related-products"] .page-width{
  padding-top:var(--pdp-koz)}
/* ures Judge.me blokk (meg nincs velemeny / nem toltott be): ne vigyen el
   egy teljes szekcio-kozt - amint a widget tartalmat kap, megjelenik */
.template-product .karma-jdgm:not(:has(.jdgm-review-widget *)){display:none}
/* "Hasonlo termekek" cimsor a kanonikus H-nyelven, hajszalvonallal */
.template-product .related-products__heading{
  font-family:var(--font-heading-family,Georgia,'Times New Roman',serif);
  font-weight:400;font-size:clamp(2.1rem,3.4vw,3.3rem);line-height:1.16;
  letter-spacing:.01em;text-transform:uppercase;color:#111;text-align:center;
  text-wrap:balance;margin:0 0 clamp(2.4rem,3.2vw,3.2rem)}
.template-product .related-products__heading::after{
  content:"";display:block;width:4.4rem;height:1px;background:rgba(17,17,17,.22);
  margin:clamp(1.8rem,2.6vw,2.6rem) auto 0}

/* termeklapon az info-oszlopban, a terméknev folott: kicsi, halk, sorolhato
   (a hosszu termeknev miatt a sajat neve nem link, es torhet) */
.product__info-container .karma-morzsa{max-width:none;margin:0 0 1.6rem;
  padding:0;font-size:1.05rem;line-height:1.6}
.product__info-container .karma-morzsa .karma-morzsa__itt{display:none}
.product__info-container .karma-morzsa .karma-morzsa__elv:last-of-type{display:none}

/* Footer: nagyon enyhe szurke hatter (a feher KARMA Klub savtol finoman elkulonul) */
footer.footer{background-color:#f6f5f3}

/* ============ KARMA szuro (drawer) - premium filter réteg ============ */

/* 1) A panel fix BAL oldali drawer (a section-CSS kesobb toltodik -> !important kell,
   kulonben a margin-left:auto + margin-right:auto miatt KOZEPRE ult) */
.mobile-facets__inner{margin-left:0!important;margin-right:auto!important;
  max-width:40rem;border-width:0 var(--drawer-border-width) 0 0}
.js .disclosure-has-popup:not(.menu-opening) .mobile-facets__inner{transform:translateX(-105vw)!important}

/* 2) ACCORDION a nyilas-almenu helyett: a szurocsoport helyben nyilik le */
.js .mobile-facets__submenu{position:static!important;transform:none!important;
  visibility:visible!important;display:none;bottom:auto;width:100%;z-index:1;
  background:transparent;box-shadow:none;filter:none}
.js details[open] > .mobile-facets__submenu{display:block}
/* FIX: a Dawn a csoport nyitasakor .submenu-open-nal ELREJTI a fo listat (a regi
   csuszo-almenuhoz kellett) -> accordionban minden eltunt es nem volt visszaut */
.js .mobile-facets .submenu-open{visibility:visible!important}
.mobile-facets__close-button{display:none!important} /* accordionban nem kell vissza-gomb */
/* nincs kulon Torles/ALKALMAZ gombsor (sem csoportonkent, sem alul): a checkboxok
   elore szurnek (input -> AJAX), torles a chipekkel; bezaras: overlay-katt vagy X */
.mobile-facets__footer{display:none!important}
/* chipek koze minimal ter (fuggolegesen is) */
.active-facets{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
/* a Dawn lebego X-e a fejlec kosar-ikonjara csuszott -> rejtve; helyette sajat kontursos gomb */
.mobile-facets__close{display:none!important}
.mobile-facets__header{position:relative}
.karma-facets-close{position:absolute;right:2rem;top:50%;transform:translateY(-50%);
  width:3.6rem;height:3.6rem;border-radius:50%;border:1px solid rgba(17,17,17,.32);
  background:#fff;color:#111;display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;transition:background .25s,color .25s,border-color .25s}
.karma-facets-close:hover{background:#111;color:#fff;border-color:#111}
.karma-facets-close svg{width:1.3rem;height:1.3rem}
/* also, sticky BEZARAS-sav (mobil huvelykujj-zona; desktopon is elegans lezaras) */
.karma-facets-closebar{position:sticky;bottom:0;background:#fff;z-index:2;
  border-top:1px solid rgba(17,17,17,.08);padding:1.2rem 2.5rem;margin-top:2rem}
.karma-facets-closebtn{display:block;width:100%;background:#fff;color:#111;border:1px solid #111;
  padding:1.5rem;font-size:1.2rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;transition:background .3s,color .3s}
.karma-facets-closebtn:hover{background:#111;color:#fff}
/* 2/b) BEZARAS a fiok MELLE kattintva (Balint kerese, 2026-08-11).
   MIERT NEM MENT EDDIG - merve: a Dawn homalyos hatterlapja
   (.mobile-facets, component-facets.css) pointer-events:none-t kap, tehat a
   katt ATMENT rajta a mogotte allo termekkartyara. Nyitott szuro mellé
   kattintva nem bezarodott a fiok, hanem elindult egy TERMEKLAP
   (merve: /products/adaline-noi-borkesztyu) - ez volt a valodi hiba.
   A .karma-fout jelzot a karma-filter-bar.liquid teszi ki: csak ott
   kapcsoljuk be a lapot, ahol a bezaro JS is fut (kollekcio-oldal), kulonben
   a kereso-oldalon a katt csak elnyelodne, bezaras nelkul.
   Specificitas (0,3,0) a Dawn (0,1,0) ellen - a component-facets.css a
   body-ban tolt (kesobb), ezert kell erosebb szelektor, nem !important.
   Csak menu-opening alatt el: zarasi animacio kozben a lap azonnal atengedi
   a kattintast, nem nyel el semmit. */
.karma-fout .mobile-facets__disclosure.menu-opening .mobile-facets{pointer-events:auto}
.mobile-facets__arrow .svg-wrapper,.mobile-facets__arrow svg{transition:transform .25s ease}
.mobile-facets__details[open] > .mobile-facets__summary .mobile-facets__arrow svg{transform:rotate(90deg)}

/* 3) Csoport-sorok: halk uppercase cimkek, hairline elvalasztok */
.mobile-facets__summary{padding:1.6rem 2.5rem;border-bottom:1px solid rgba(17,17,17,.07)}
.mobile-facets__summary > div > span:first-child{font-size:1.18rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:#1a1a1a}
.mobile-facets__list{padding:.4rem 2.5rem 1.4rem;border-bottom:1px solid rgba(17,17,17,.07)}
.mobile-facets__label{font-size:1.25rem;color:rgba(17,17,17,.72)}

/* 4) Felso sor rendberakva: [SZURES  n termek] ................ [Rendezes: v]
   - a szurt termekszam a SZURES gomb melle kerul, azonos alapvonalon
   - a rendezes jobbra, kompakt cimkevel */
@media screen and (min-width:750px){
  .facets-container-drawer{display:flex;align-items:center;flex-wrap:wrap;
    padding:1rem 0;border-top:1px solid rgba(17,17,17,.08);border-bottom:1px solid rgba(17,17,17,.08);
    margin-bottom:2.8rem}
  .facets-container-drawer .mobile-facets__wrapper{flex-grow:0;margin-right:.2rem}
  .facets-container-drawer .product-count{order:2;margin:0 0 0 1.2rem}
  .facets-container-drawer .facet-filters.sorting{order:3;margin:0 0 0 auto;
    display:flex;align-items:center;gap:.4rem}
  .facets-container-drawer .facets-pill{order:4;width:100%}
  .facets-container-drawer .product-count__text{font-size:1.15rem;font-weight:400;
    letter-spacing:.04em;text-transform:none;color:rgba(17,17,17,.45)}
  .facet-filters__label{margin:0}
  .facet-filters__label label{font-size:1.15rem;letter-spacing:.1em;text-transform:uppercase;
    color:rgba(17,17,17,.6)}
}

/* 5) MOBIL szuro-sav: ugyanaz a vonal-sav mint desktopon, keret nelkuli gombbal,
   terkozzel a chip-sornak; + fixen 2 oszlopos termek-grid */
@media screen and (max-width:749px){
  .facets-container-drawer{display:flex;align-items:center;flex-wrap:wrap;position:relative;
    border-top:1px solid rgba(17,17,17,.08);border-bottom:1px solid rgba(17,17,17,.08);
    padding:1.2rem 0;margin-bottom:2rem}
  /*: a Dawn section-CSS (flex-grow:1 a wrapperen, margin a counton) kesobb
     toltodik es felulutne -> az ikonok uj sorba tortek es nem ertek a szelig */
  .facets-container-drawer .mobile-facets__wrapper{flex:0 0 auto;margin-right:1.2rem}
  .facets-container-drawer .product-count{margin:0;order:2}
  .karma-viewtoggle{order:3;margin-right:0}
  .facets-container-drawer .active-facets-mobile{order:4}
  .facets-container-drawer .product-count__text{font-size:1.15rem;font-weight:400;
    letter-spacing:.04em;text-transform:none;color:rgba(17,17,17,.45)}
  .facets-container-drawer .active-facets-mobile{width:100%;margin-top:1.2rem}
  #ProductGridContainer .product-grid{display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr))}
  #ProductGridContainer .product-grid > li{width:auto;max-width:none;margin:0}
  /* 1|2 nezetvalto: ABSZOLUT a sav jobb also sarkaban (determinisztikus, nem uszhat el;
     a sav padding-bottom:4.4rem tartja neki a helyet) */
  /* B-elrendezes: a nezetvalto ugyanabban a sorban, jobbra tolva (nem abszolut) */
  .karma-viewtoggle{position:static;margin:0 0 0 auto;
    display:flex;gap:1.2rem;align-items:center}
  .karma-viewtoggle__btn{display:flex;gap:2px;background:none;border:0;padding:.5rem .2rem;cursor:pointer}
  .karma-vt{border:1px solid #b5b5b5;background:transparent}
  .karma-vt--1{width:13px;height:16px}
  .karma-vt--2{width:5px;height:16px}
  .karma-viewtoggle__btn.is-active .karma-vt{background:#111;border-color:#111}
  /* 1 oszlopos nezet: nagy foto, kisebb belso margo */
  #ProductGridContainer .product-grid.karma-grid-1col{grid-template-columns:1fr}
  .karma-grid-1col .card-wrapper .card__media img{padding:4% 6%}
}
/* NEM ELERHETO MERET: egyaltalan NE jelenjen meg (Balint 2026-07-28, ujra 08-11).
   MIERT NEM MUKODOTT EDDIG: a Dawn
     .product-form__input--pill input[type='radio'] + label { display:inline-block }
   szabalya (component-product-variant-picker.css:60) PONTOSAN ugyanolyan eros,
   mint a miénk volt (0,2,2) - viszont az a fajl a BODY-ban tolt (main-product
   szekcio), a mi retegunk meg a fejlecben. Dontetlennel a kesobbi nyer, ezert a
   cimke lathato maradt, hiaba kapta meg a "disabled" osztalyt.
   MEGOLDAS: eggyel erosebb szelektor (0,3,2) - nem !important. A tipus-osztalyt
   (--pill / --swatch) is kiirjuk, igy biztosan felenk dol a kaszkad. */
.product-form__input input.disabled { display: none; }
.product-form__input.product-form__input--pill input.disabled + label,
.product-form__input.product-form__input--swatch input.disabled + label,
.product-form__input.product-form__input--pill input.disabled + label::after,
.product-form__input.product-form__input--swatch input.disabled + label::after { display: none; }

/* 6) SZURO-SAV: a vonal TELJES szelessegben fut (a kategoria-csempek is full-bleed-ek),
   a TARTALOM viszont a termekracs vonalaban marad -> editorial lenia, igazitott felirat.
   Nem 100vw-vel (az a fuggoleges gorgetosav miatt vizszintes tulcsordulast okozna),
   hanem a szulo page-width feloldasaval + szamolt belso paddinggel. */
.facets-wrapper:has(> .facets-container-drawer){max-width:none;padding-left:0;padding-right:0}
.facets-container-drawer{
  padding-left:max(1.5rem, calc((100% - var(--page-width) + 10rem) / 2));
  padding-right:max(1.5rem, calc((100% - var(--page-width) + 10rem) / 2));
}

/* 7) Letisztitas (Balint): a szuro-savbol KI a termekszam es az also vonal.
   - a darabszam nem dontesi informacio, es mobilon kiszoritotta az oszlopvaltot (4 sorba tort)
   - egyetlen felso lenia marad: a sav a racs fole huzott vonal, nem doboz
   (a szuro-PANELBEN a szamlalo MARAD: ott valodi visszajelzes szures kozben) */
.facets-container-drawer{border-bottom:0}
.facets-container-drawer > .product-count{display:none}

/* 8) Mobil: a szuro-gomb CSAK IKON (felirat nelkul) - a sav igy ket jelre egyszerusodik:
   balra a szuro-ikon, jobbra a nezetvalto. Desktopon marad a "Szures" felirat. */
@media screen and (max-width:749px){
  .facets-container-drawer .mobile-facets__open-label{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .facets-container-drawer .mobile-facets__open{padding:.4rem .2rem}
  .facets-container-drawer .mobile-facets__open .icon-filter{width:1.9rem;height:1.9rem}
}

/* ============================================================
   9) KOLLEKCIO-OLDAL: "NAVIGACIOS ZONA"  (Balint valasztasa: E+ / #f6f5f3)
   FONTOS: MINDEN szabaly a .template-collection ala van szukitve, kulonben
   a fooldal kategoria-sora is megkapna (ez egyszer mar megtortent).
   A fejlec + kategoria-csempek + szuro EGY halvany savon; alatta feher racs.
   Nincs elvalaszto vonal: a FELULET tagol. A sav szine a temaban mar hasznalt
   tortfeher, nem uj szin.
   ============================================================ */
.template-collection{--k-band:#F8F8F8}

/* a zona: a fejlec-szekcio + a csempe-szekcio + a szuro-sav kozos hattere */
.template-collection .shopify-section:has(.karma-secthead),
.template-collection .shopify-section:has(> .karma-tiles),
/* A racs-szekcio kapja a savszint (itt ul a szuro is)...
   DE CSAK ott, ahol a zona tobbi eleme (kategoria-csempek) is jelen van, vagyis a
   kesztyuink-sablonon. A noi/ferfi kategoria-oldalakon (alap sablon, nincs csempe)
   a sav ures szurke csikkent lebegett a leiras es a termekek kozott
   (Balint 2026-08-10: "ez a szurke szekcio nem kell"). */
.template-collection:has(.karma-tiles) .shopify-section:has(.facets-container-drawer){background:var(--k-band)}
/* csempe nelkuli kollekcio-oldalon a (rejtett) szuro-sav ne foglaljon helyet */
.template-collection:not(:has(.karma-tiles)) .facets-container-drawer{padding-top:0;padding-bottom:0}
/* Balint 2026-08-10: a hirlevel felett futo torésvonal tavolabb a termekkartyaktol -
   a racs also levegoje UGYANAZ a clamp, mint a hirlevel (karma-news) felso paddingja,
   igy a vonal pontosan felezi a ket tartalom kozti teret. Csak a csempe nelkuli
   oldalakon: a kesztyuink-sablonon a sav-logika miatt marad a nulla. */
.template-collection:not(:has(.karma-tiles)) collection-component > [class*="-padding"]{
  /* a racs sajat belso ~5.4rem-je (ul margin + lapozo-sav) beleszamit, ezert
     annyival kevesebb padding kell, hogy a vegosszeg egyezzen a hirlevel felso
     paddingjaval */
  padding-bottom:max(0rem, calc(clamp(5rem,7vw,8rem) - 5.4rem))}
/* Balint 2026-08-11: LAPOZOS oldalon a lapozo az utolso elem - ilyenkor a lapozo
   es a hirlevel-szoveg legyen egyenlo tavolsagra a toresvonaltol (a lapozo alatt
   nincs sajat levego, a teljes clamp-et a padding adja). */
.template-collection:not(:has(.karma-tiles)) collection-component:has(.pagination) > [class*="-padding"]{
  /* a lapozo ~2.1rem-mel belelog a padding-savba (a racs-elrendezes hozza igy),
     ezert ennyivel tobb kell a pontos felezeshez - merve 1440-en */
  padding-bottom:calc(clamp(5rem,7vw,8rem) + 2.1rem)}
/* ...DE a Dawn egy sajat FEHER wrappert tesz kozbe (.section-<id>-padding), ami
   eltakarna. Atlatszova tesszuk; a hatart a racs sajat feher hattere adja. */
.template-collection collection-component > [class*="-padding"]{background:transparent;
  /* Az also paddingja a racs ALATT hagyta latszani a savot: egy ~16 px-es szurke
     csik ult a legutolso termeksor es a hirlevel kozott (Balint 2026-08-11:
     "azt tuntesd el"). Nullazzuk, igy a szekcio a racs aljan vegzodik.
     A racsra NEM tehetjuk at a paddingot: ott mar ul a mobil szuro-sav szabalya
     (body.karma-fbar-on #ProductGridContainer), az erosebb es desktopon nullaz.
     Levego amugy is bosegesen van: a hirlevel sajat felso paddingja 5-8rem. */
  padding-bottom:0}

/* a csempek terkoze a savon belul marad */
.template-collection .karma-tiles{padding-bottom:0}

/* a szuro-sav a ZONA resze: nincs felso vonal, a sav aljan levego */
/* a szuro a savon BELUL ul, nem a sav alja - alatta bo levego (mint a mockupon) */
.template-collection .facets-container-drawer{
  border-top:0;padding-top:2.2rem;
  padding-bottom:5.2rem;margin-bottom:0}

/* a termekracs tiszta feheren, sajat felso levegovel */
.template-collection #ProductGridContainer{background:#fff;padding-top:clamp(2.6rem,4vw,4.4rem)}

/* A kategoria-fotok FEHER HATTERE eltunik a savon: a feher pixelek felveszik a sav
   szinet (multiply), a kesztyu valtozatlan marad. Nulla kepfeldolgozas.
   CSAK a kollekcio-oldalon - a fooldali sor feher hatteren all, ott nem kell.
   FONTOS: a csempenek es a media-doboznak SAJAT feher hattere van (Dawn/karma-cards),
   a multiply pedig a kozvetlen hatter ellen kever -> ezeket atlatszova kell tenni,
   kulonben a feher megmarad (ez volt az elso nekifutas hibaja). */
.template-collection .karma-tiles--quiet .karma-tile,
.template-collection .karma-tiles--quiet .karma-tile__media{background:transparent}
.template-collection .karma-tiles--quiet .karma-tile__img{mix-blend-mode:multiply}

/* ============================================================
   9b) KOLLEKCIO-LEIRAS a Tortenetunk/Muhely szovegrendszeren (Balint 2026-08-11:
   "a kategoria leirasokat hozza kell igazitani a tortenetunk meg muhely text
   designjahoz es legyen a szolid toresvonal itt is a konkret kesztyuk elott").
   A cim a kanonikus H-nyelven (szerif, verzal, kozepre), alatta a kozos 4.4rem-es
   hajszalvonal; a leiras a proza hangjan, kozepre zarva, a 62rem-es display-lede
   mertekkel (a seta lede-jenek nevesitett kivetele - rovid bevezetonek az valo,
   nem a 46rem-es hasab-mertek). A racs elott teljes szelessegu toresvonal,
   a hirlevel-sav vonalritmusaval (a vonal felezi a ket tartalom kozti teret).
   Csak a csempe nelkuli (alap sablonos) kollekcio-oldalakon.
   ============================================================ */
.template-collection:not(:has(.karma-tiles)) .collection-hero{
  padding:clamp(4rem,6vw,7rem) 0 clamp(5rem,7vw,8rem);
  border-bottom:1px solid rgba(17,17,17,.12)}
.template-collection:not(:has(.karma-tiles)) .collection-hero__inner{
  padding:0 var(--karma-margo);margin:0 auto;max-width:var(--karma-sav)}
.template-collection:not(:has(.karma-tiles)) .collection-hero__title{
  font-family:var(--font-heading-family,Georgia,'Times New Roman',serif);
  font-weight:400;font-size:clamp(2.1rem,3.4vw,3.3rem);line-height:1.16;
  letter-spacing:.01em;text-transform:uppercase;color:#111;text-align:center;
  text-wrap:balance;margin:0}
.template-collection:not(:has(.karma-tiles)) .collection-hero__title::after{
  content:"";display:block;width:4.4rem;height:1px;background:rgba(17,17,17,.22);
  margin:clamp(1.8rem,2.6vw,2.6rem) auto 0}
.template-collection:not(:has(.karma-tiles)) .collection-hero__description{
  /* Balint 2026-08-11: ugyanaz a margo, mint a Tortenetunk es Muhely
     szovegblokkjain - a leiras a kozos savot tolti ki, nem kulon hasabot. */
  max-width:var(--karma-sav);
  margin:clamp(2.4rem,3.2vw,3.2rem) auto 0;
  padding:0 var(--karma-margo);text-align:center}
.template-collection:not(:has(.karma-tiles)) .collection-hero__description p{
  margin:0 0 1.4rem;font-size:1.45rem;line-height:1.8;color:rgba(17,17,17,.68);
  text-wrap:pretty}
.template-collection:not(:has(.karma-tiles)) .collection-hero__description p:last-child{
  margin-bottom:0}
/* A toresvonal ALATTI ter kalibralasa: a szekcio sajat 2.8rem-je (1.2rem
   szekcio-margo + 1.6rem ul-margo) beleszamit, ezert annyival kevesebb padding
   kell, hogy a vonal-kartya tavolsag egyezzen a leiras-vonal tavolsaggal. */
.template-collection:not(:has(.karma-tiles)) collection-component > [class*="-padding"]{
  padding-top:0}
.template-collection:not(:has(.karma-tiles)) #ProductGridContainer{
  padding-top:max(1.6rem, calc(clamp(5rem,7vw,8rem) - 2.8rem))}

/* ============================================================
   10) ALSO TAPADO SZURO-SAV (Balint valasztasa: "D", 2026-07-29)
   Amint a szurosor kigorog felul, alul beuszik egy vekony sav:
   balra SZURES (a meglevo fiokot nyitja), jobbra a talalatszam.
   (Volt egy jobbra-igazitott korunk a bongeszo link-elonezete miatt - Balint
   visszakerte balra, marad igy.)
   ============================================================ */
/* MOBIL (<990px): also sav - ott a hupelyk-zona alul van, es nincs hover-buborek sem.
   DESKTOP (>=990px): fuggoleges ful a bal szelen (Balint valasztasa, artifact "03"). */
.karma-ftab{position:fixed;left:0;right:0;bottom:0;z-index:3;background:#fff;
  border:0;border-top:1px solid var(--k-line,rgba(17,17,17,.11));
  display:flex;align-items:center;gap:0;cursor:pointer;
  font-family:inherit;color:#111;text-align:left;
  padding:1.3rem max(2rem, env(safe-area-inset-right)) calc(1.3rem + env(safe-area-inset-bottom))
    max(2rem, env(safe-area-inset-left));
  transform:translateY(110%);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.karma-ftab.on{transform:none}
.karma-ftab__t{font-size:1.02rem;letter-spacing:.24em;text-transform:uppercase}
/* mobilon a szuro-ikon is ott van (Balint: intuitivabb); desktopon a fuggoleges
   fulon csak a felirat all, mert a dontott ikon ott zavaros lenne */
.karma-ftab__ic{flex:none;margin-right:.85rem;color:#111}
.karma-ftab__count{font-size:1.05rem;color:rgba(17,17,17,.42);letter-spacing:.04em;
  font-variant-numeric:tabular-nums;margin-left:auto}
.karma-ftab:focus-visible{outline:2px solid #111;outline-offset:-4px}
@media (prefers-reduced-motion: reduce){.karma-ftab{transition:none}}
/* a sav sosem takarhat terméknevet/arat */
body.karma-fbar-on #ProductGridContainer{padding-bottom:calc(6.4rem + env(safe-area-inset-bottom))}

@media screen and (min-width:990px){
  /* Kontrasztosabb ful (Balint 2026-07-31): a hairline-keretes feher ful beleolvadt
     a lapba. Most sotet alapon vilagos felirat - a "Kosarba" gomb formanyelvén. */
  .karma-ftab{left:0;right:auto;bottom:auto;top:50%;
    border:0;background:#1a1a1a;color:#fff;
    display:block;padding:1.7rem .8rem;
    writing-mode:vertical-rl;
    box-shadow:0 6px 22px rgba(0,0,0,.18);
    transform:translate(-100%,-50%);transition:transform .3s cubic-bezier(.22,1,.36,1),background .25s ease}
  .karma-ftab.on{transform:translate(0,-50%)}
  .karma-ftab:hover{background:#000}
  .karma-ftab:focus-visible{outline:2px solid #111;outline-offset:3px}
  .karma-ftab__t{font-weight:500}
  .karma-ftab__count,
  .karma-ftab__ic{display:none}
  body.karma-fbar-on #ProductGridContainer{padding-bottom:0}
}

/* A statikus szuro-NYITO elrejtve (Balint: "levehetjuk a statikus szuro ikont").
   FONTOS: csak a <summary>-t rejtjuk, a burkolot NEM - a nyitott fiok panelje ugyanis
   a burkolon BELUL van, ezert ha azt rejtettuk, a fiok lathatatlanul nyilt ki. */
.facets-container-drawer .mobile-facets__open-wrapper{position:absolute;width:1px;height:1px;
  margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.facets-container-drawer .product-count{margin-left:0}

/* PDP galeria - belyegkepek KERET NELKUL (Balint 2026-07-31: "butan nez ki ez a
   dupla keret"). Ket kulon elem rajzolt keretet: a belyegkep-GOMB (aktivnal fekete)
   es a benne levo media-doboz (halvany 1px) -> dupla rama, ami ráadásul le is
   vagodott a sav szelen. Helyette a mar bevalt galeria-logika: nincs keret, az aktivat
   a TELJES telítettség jeloli, a tobbi visszafogott - ugyanaz az elv, mint az
   "Így készül" szekcio kepeinel. */
.thumbnail,
.thumbnail .global-media-settings,
.thumbnail-list__item .global-media-settings{border:0;box-shadow:none}
.thumbnail{opacity:.4;transition:opacity .25s cubic-bezier(.22,1,.36,1)}
.thumbnail:hover{opacity:.7}
.thumbnail[aria-current]{opacity:1}
.thumbnail:focus-visible{outline:1px solid #111;outline-offset:2px;opacity:1}
.thumbnail:focus:not(:focus-visible){outline:0}
@media (prefers-reduced-motion: reduce){.thumbnail{transition:none}}

/* a nagy galeria-kepek hajszalvonala marad (a fehér hatteru termekfotot ez hatarolja) */
.product__media-item .global-media-settings,
.product__media-wrapper .global-media-settings{border-color:rgba(17,17,17,.08)}
}

/* ============================================================
   11) FELSO SZURES-JEL desktopon: szolidabb (Balint kerese) -
   ugyanaz a halk hang, mint az also save: kisebb, halvanyabb,
   hoverre sotetul. Mobilon marad az ikon-only valtozat.
   ============================================================ */
@media screen and (min-width: 990px){
  .facets-container-drawer .mobile-facets__open{
    /* a Dawn .85-os szinszabalyat csak !important-tal lehet halkitani */
    color:rgba(17,17,17,.55)!important;font-size:1.02rem;letter-spacing:.24em;transition:color .2s}
  .facets-container-drawer .mobile-facets__open:hover{color:#111!important}
  .facets-container-drawer .mobile-facets__open .icon-filter{width:1.55rem;height:1.55rem}
}

/* ===== Műhely-oldal: egységes szekció-címsorok (2026-08-06) =====
   Egyetlen H2-nyelv az egész oldalon. A dupla osztálynév szándékos: így a szabály
   erősebb, mint a szekciók saját, egyosztályos szabályai, a forrásrendtől függetlenül.
   Csak tipográfiát állít - a térközt és a középre zárást a szekciók intézik. */
.karma-muhely-h2.karma-muhely-h2.karma-muhely-h2{
  font-family:var(--font-heading-family,Georgia,'Times New Roman',serif);
  font-weight:400;font-size:clamp(2.1rem,3.4vw,3.3rem);line-height:1.16;letter-spacing:.01em;
  text-transform:uppercase;color:#111;text-align:center;text-wrap:balance}

/* A Muhely-oldal tipografiai skalaja - EGY hely, ahol allitani lehet.
   A harmas osztalynev azert kell, mert a fooldallal kozos section-CSS azonos
   erossegu, de kesobb tolt be, es felulirna. */
.karma-muhely-body{font-size:1.45rem;line-height:1.8;color:rgba(17,17,17,.68)}
.karma-muhely-kicker{font-size:1.05rem;letter-spacing:.22em;text-transform:uppercase}

/* ===== Muhely-oldal: EGYSEGES OLDALMARGO (Balint, 2026-08-06) =====
   Egy helyen allithato. Ehhez igazodik a kattinthato pontok bal szele, a szekciok
   szoveg-szele es a fejlecek is. */
:root{--karma-margo:1.5rem}
@media (min-width:750px){:root{--karma-margo:5rem}}

/* ===== Muhely-oldal: GERINC-RENDSZER (2026-08-09) =====
   EGY elv minden szoveges szekciora (TET, ANYAGOK-bevezeto, EMBER):
   a torzs egyetlen, a lap kozeptengelyere ultetett, 46rem merteku tomb,
   balra zarva, hasab nelkul. 46rem = 460px a Dawn 10px-skalajan, ami az
   1.45rem-es Montserratnal kb. 64 leutes/sor (a klasszikus 55-70ch sav kozepe).
   A display-elemek (H2, hajszalvonal, felhivas, zaromondat) kozepre zartak,
   a proza balra zart: a tengely kozos, a hang kulonbozik.
   A harmas osztalynev a Dawn kaszkadja ES a kesobb betolto snippet-<style>
   blokkok ellen ved (mint a .karma-muhely-h2-nel). */
/* SAV-SZELESSEG (Balint 2026-08-11: "egysegesen minden content oldalon
   szelesitsuk a site-ot es csokkentsuk a margo meretet izlesesen").
   118rem -> 126rem: a tartalmi sav 1180 -> 1260 px, azaz +80 px minden
   muhely-tipusu oldalon. A --karma-margo (5rem) NEM valtozott: a belso
   levego megmarad, csak a kulso, kihasznalatlan sav fogy.
   A PROZA szelesseget ez nem befolyasolja - azt a --karma-mertek (46rem)
   szabja meg kulon, hogy a sorhossz olvashato maradjon. A nyeremeny oda
   megy, ahol tenyleg kell: a harom hasabos (lista|kep|szoveg) szekciokba. */
:root{--karma-mertek:46rem;--karma-sav:calc(126rem + 2*var(--karma-margo))}
.karma-proza.karma-proza.karma-proza{
  max-width:calc(var(--karma-mertek) + 2*var(--karma-margo));
  margin:0 auto;padding:0 var(--karma-margo);text-align:left}
.karma-proza.karma-proza.karma-proza p{margin:0 0 1.4rem;font-size:1.45rem;
  line-height:1.8;color:rgba(17,17,17,.68);text-wrap:pretty}
.karma-proza.karma-proza.karma-proza p:last-child{margin-bottom:0}
/* LEAD-SZABALY: lead kizarolag a copyban kijelolt nyitobekezdes lehet (ma csak
   a TET-ben letezik). Kiemelese CSAK tinta (.88) + egy teljes ures sor (2.6rem).
   Meretnoveles SOHA: az oldal egyetlen display-csucspontja az EMBER
   Cormorant-zaromondata marad. */
.karma-proza.karma-proza.karma-proza .karma-lead{
  color:rgba(17,17,17,.88);margin-bottom:2.6rem}
/* Szovegkozi link a prozaban: halk, hajszal-alahuzas, tinta-szinen marad. */
.karma-proza.karma-proza.karma-proza a{color:inherit;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.25em;
  text-decoration-color:rgba(17,17,17,.35);transition:text-decoration-color .2s ease}
.karma-proza.karma-proza.karma-proza a:hover{text-decoration-color:#111}

/* Kozos hajszalvonal a H2 alatt - a korabbi harom, kicsit eltero __rule
   valtozat helyett EGY. Az auto oldalmargo miatt flexen kivul is a tengelyre ul. */
.karma-muhely-rule.karma-muhely-rule.karma-muhely-rule{display:block;
  width:4.4rem;height:1px;background:rgba(17,17,17,.22);
  margin:clamp(1.8rem,2.6vw,2.6rem) auto clamp(2.4rem,3.2vw,3.2rem)}

/* Kozos "Kattints" felhivas-sor: a rendszer halk UI-hangja, mindig kozepre a
   tengelyen, mindig az interaktiv racs elotti UTOLSO elem. Ertekei pontosan a
   seta .km-seta__hivas ertekei, ezert a seta valtozatlan maradhatott.
   Az --anyag modosito a teljes bevezeto utani nagyobb levegot adja. */
/* Balint 2026-08-10: a felhivas a KEPHEZ tartozik, nem a szoveghez - nagy
   terkoz fole (4.8rem), kicsi ala (az interaktiv blokk felso terkoze 1.6rem). */
.karma-hivas.karma-hivas.karma-hivas{margin:4.8rem auto 0;max-width:var(--karma-sav);
  padding:0 var(--karma-margo);text-align:center;font-size:1.2rem;
  letter-spacing:.08em;color:rgba(17,17,17,.45)}

/* NYITOTT (Balint dontese kell): a seta .km-seta__lede 62rem-es merteke a
   rendszerben nevesitett DISPLAY-LEDE kivetel. Vagy igy marad dokumentalva,
   vagy a kovetkezo korben atall a 46rem-es kozos mertekre. */

/* ===== DESKTOP-OPTIMALIZALAS (Balint 2026-08-09/10: vegleges dontes HAROM hasab)
   990px felett a proza harom hasabban fut, a tomb kozepre ultetve. A bekezdesek
   NEM torhetnek kette (break-inside:avoid), a column-fill:balance pedig
   nagyjabol egyenlo magassagura egyensulyozza a hasabokat - a "kb egyenlo"
   pontosan az elvaras. A lead a folyamban marad, csak tintaval emelkedik ki.
   Mobil es tablet valtozatlan: egy hasab, 46rem. */
@media screen and (min-width:990px){
  .karma-proza.karma-proza.karma-proza{
    max-width:var(--karma-sav);
    columns:3;column-gap:clamp(3.4rem,4vw,5.6rem);column-fill:balance}
  .karma-proza.karma-proza.karma-proza p{margin-bottom:1.5rem;
    break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid}
  .karma-proza.karma-proza.karma-proza p:last-child{margin-bottom:0}
  .karma-proza.karma-proza.karma-proza .karma-lead{margin-bottom:1.5rem}
}



/* ============================================================
   MAGAZIN (blog) es CIKK - a content-oldalak Gerinc-rendszeren
   (Balint 2026-08-12). A cikk-torzs a proza mertekere (46rem) fogva,
   a listaoldal a savon. Minden mas a Dawn sajat szekcioibol jon, hogy
   a tema-szerkesztoben szerkesztheto maradjon.
   ============================================================ */
/* --- listaoldal fej: kanonikus H-nyelv --- */
.template-blog .rich-text__heading,
.template-article .rich-text__heading{
  font-family:var(--font-heading-family,Georgia,'Times New Roman',serif);
  font-weight:400;letter-spacing:.01em;text-transform:uppercase;color:#111;
  text-wrap:balance}
.template-blog .rich-text__heading{font-size:clamp(2.1rem,3.4vw,3.3rem);line-height:1.16}
.template-blog .rich-text__heading::after{
  content:"";display:block;width:4.4rem;height:1px;background:rgba(17,17,17,.22);
  margin:clamp(1.8rem,2.6vw,2.6rem) auto 0}
.template-blog .rich-text__text{font-size:1.45rem;line-height:1.8;
  color:rgba(17,17,17,.68)}
/* KERET (Balint 2026-08-13: "minden blog es a teljes magazin gyujtooldal eseten
   is a contentes oldalakra jellemzo margot hasznald"). A Dawn .page-width
   (120rem) es a sajat 62rem-es belso sapkak keskenyebbek voltak a --karma-sav
   savnal, ezert a fejlec-szoveg es a cikk-cim MAS tengelyen allt, mint a kepek
   es a racs. Itt mindket sablon a tartalmi oldalak keretere all: kulso sav
   --karma-sav, oldalmargo --karma-margo - pontosan ugy, mint a Muhely/GYIK/Meret
   szekciok fejei. A TORZS mertekehez ez nem nyul: azt a --karma-mertek (46rem)
   szabja, kulon szabalyban lejjebb. */
.template-blog .rich-text__wrapper.page-width,
.template-article .rich-text__wrapper.page-width{
  max-width:var(--karma-sav);
  padding-left:var(--karma-margo);padding-right:var(--karma-margo)}
.template-blog .rich-text__blocks{max-width:none;margin-inline:auto}

/* EGYSEGES GOMB (Balint 2026-08-13: "itt nem az egyseges gomb szinezesi
   logika van"). A Magazin/cikk rich-text gombja a Dawn .button--secondary
   metrikajat hozta; itt a rendszer sajat .karma-btn ertekeire all: atlatszo
   hattér + 1px tinta keret, hoveren tomor tintara valt. Ugyanaz a
   letter-spacing, meret es padding, mint a kezdolap es a hero gombjain. */
.template-blog .rich-text .button,
.template-article .rich-text .button{
  background:transparent;color:#111;text-decoration:none;
  font-size:1.2rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  padding:1.6rem 3.6rem;border:1px solid #111;border-radius:0;box-shadow:none;
  min-height:0;
  transition:background .3s cubic-bezier(.16,1,.3,1),color .3s cubic-bezier(.16,1,.3,1)}
.template-blog .rich-text .button::after,
.template-article .rich-text .button::after,
.template-blog .rich-text .button::before,
.template-article .rich-text .button::before{display:none}
.template-blog .rich-text .button:hover,
.template-article .rich-text .button:hover{background:#111;color:#fff}

/* --- listaoldal racs: a sav margojan --- */
.template-blog .blog__posts.page-width,
.template-blog .blog-articles{max-width:var(--karma-sav);margin-inline:auto;
  padding-left:var(--karma-margo);padding-right:var(--karma-margo)}
.template-blog .article-card__title{
  font-family:var(--font-heading-family,Georgia,serif);font-weight:400;
  letter-spacing:.01em;line-height:1.25}
.template-blog .article-card__excerpt{font-size:1.4rem;line-height:1.75;
  color:rgba(17,17,17,.6)}
.template-blog .article-card__info,.template-blog .circle-divider{
  font-size:1.15rem;letter-spacing:.08em;color:rgba(17,17,17,.45)}
.template-blog .article-card-wrapper .card__inner{border-radius:0}

/* --- cikk: cim kozepre, kanonikus meretben, alatta hajszalvonal ---
   A cim-fejlec a Dawn .page-width--narrow savjabol a tartalmi keretre kerult,
   igy a cim ugyanazon a tengelyen all, mint a folotte levo hero-kep. */
.template-article .article-template > header.page-width{
  max-width:var(--karma-sav);
  padding-left:var(--karma-margo);padding-right:var(--karma-margo)}
.template-article .article-template__title{
  font-family:var(--font-heading-family,Georgia,serif);font-weight:400;
  font-size:clamp(2.4rem,4vw,4rem);line-height:1.14;letter-spacing:.01em;
  text-transform:none;text-align:center;text-wrap:balance;
  max-width:none;margin:0 auto}
.template-article .article-template__title::after{
  content:"";display:block;width:4.4rem;height:1px;background:rgba(17,17,17,.22);
  margin:clamp(2rem,2.8vw,2.8rem) auto 0}
/* HERO (Balint 2026-08-13: "full szelessegben kell hero kep, teljes elso
   hajtasra"). A kep kilep a savbol: teljes szelesseg, es a fejlec alatti
   teljes kepernyo-magassag. svh-t hasznalunk, hogy mobilon a bongeszo-sav
   be- es kicsuszasa ne ugralja a magassagot. A morzsamenu a kep ALA kerult,
   igy nem eszik az elso hajtasbol.
   Sorrend: hero-kep -> morzsa+cim -> torzs. A kep ala kotott terkoz kerul,
   kulonben a Dawn sajat cim-margoja adna a levegot, ami a regi (cim elol)
   sorrendhez volt szabva. */
.template-article .article-template__hero-container{max-width:none;
  margin-inline:0;padding-left:0;padding-right:0;
  margin-bottom:clamp(3.4rem,5vw,5.4rem)}
.template-article .article-template__hero-container .media{
  height:calc(100svh - 8.5rem);min-height:42rem;padding-bottom:0}
.template-article .article-template__hero-container .media img{
  width:100%;height:100%;object-fit:cover}
.template-article .article-template > header.page-width{margin-top:0}

/* --- cikk-torzs: EGY hasab, a tartalmi oldalak keretere feszitve ---
   Balint 2026-08-13: a torzs a --karma-sav savot kapja, nem a 46rem-es
   sapkat, tehat a szoveg ugyanott kezdodik es vegzodik, mint a hero-kep,
   a morzsa es a cim. Hasabolas NINCS (az a Muhely-tipusu szekcioke). */
.template-article .article-template__content{
  max-width:var(--karma-sav);
  margin:clamp(3.4rem,5vw,5.4rem) auto 0;
  padding-left:var(--karma-margo);padding-right:var(--karma-margo)}
.template-article .article-template__content p,
.template-article .article-template__content li{
  font-size:1.55rem;line-height:1.85;color:rgba(17,17,17,.72);text-wrap:pretty}
.template-article .article-template__content h2{
  font-family:var(--font-heading-family,Georgia,serif);font-weight:400;
  font-size:clamp(2rem,2.6vw,2.6rem);line-height:1.25;color:#111;
  margin:clamp(3.4rem,4.4vw,4.8rem) 0 1.4rem}
.template-article .article-template__content h3{
  font-size:1.7rem;font-weight:500;color:#111;margin:2.8rem 0 1rem}
.template-article .article-template__content a{color:inherit;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.25em;
  text-decoration-color:rgba(17,17,17,.35)}
.template-article .article-template__content a:hover{text-decoration-color:#111}
.template-article .article-template__content img{width:100%;height:auto;margin:3rem 0}
/* Balint 2026-08-13: a cikk-torzs EGY HASABOS marad ("a blog szoveg lehet egy
   hasabos, csak a margo volt keres"). A haromhasabos kiserlet visszavonva - a
   tartalmi oldalak hasabolasa a Muhely-tipusu szekciokra valo, egy folyo
   cikkre nem. Ami maradt: a KERET a tartalmi oldalake (--karma-margo), a
   sorhossz pedig a kozos --karma-mertek. */
.template-article .article-template__content blockquote{
  border:0;border-left:2px solid rgba(17,17,17,.22);margin:3rem 0;padding:0 0 0 2.4rem;
  font-family:var(--font-heading-family,Georgia,serif);font-size:1.9rem;line-height:1.5;
  color:#111}



/* "A" valtozat (Balint jovahagyta 2026-08-12): az AKTIV nyelv alahuzast kap,
   a masik halk marad. Eddig csak szinben tertek el, ezert morzsamenunek
   latszott, es nem derult ki, melyiken allsz. Az elvalaszto "/" kikerul: az
   alahuzas mellett mar redundans es zajos. A snippet markupjahoz szandekosan
   NEM nyulok (mas munkamenet szerkeszti), ezert rejtjuk, nem toroljuk. */
.karma-nyelv{display:inline-flex;align-items:center;gap:1.1rem;white-space:nowrap}
.karma-nyelv__elv{display:none}
.karma-nyelv--fejlec{margin-right:1.6rem}
.karma-nyelv__urlap{display:inline-flex;margin:0}
.karma-nyelv__aktiv,.karma-nyelv__gomb{
  font-family:inherit;font-size:1.15rem;font-weight:500;letter-spacing:.16em;
  line-height:1;padding:.4rem .1rem}
/* mindketto ugyanazt a also szegelyt viseli, csak a szine kulonbozik - igy a
   ket kod ALAPVONALA egy szinten all, nem ugral a valtaskor */
/* a `border:0` NEM hagyhato el: nelkule a <button> megtartja a bongeszo
   alapertelmezett keretet, es 2 px-szel magasabb lesz a <span>-nel - a ket kod
   alapvonala elcsuszik egymastol. */
.karma-nyelv__aktiv,.karma-nyelv__gomb{
  border:0;border-bottom:1px solid transparent;padding-bottom:.35rem}
.karma-nyelv__aktiv{color:rgb(var(--color-foreground));
  border-bottom-color:rgb(var(--color-foreground))}
.karma-nyelv__gomb{appearance:none;background:none;cursor:pointer;
  color:rgba(var(--color-foreground),.38);
  transition:color .2s ease,border-color .2s ease}
.karma-nyelv__gomb:hover{color:rgb(var(--color-foreground));
  border-bottom-color:rgba(var(--color-foreground),.3)}
.karma-nyelv__gomb:focus-visible{outline:2px solid #C8A24B;outline-offset:3px}
.karma-nyelv__elv{color:rgba(var(--color-foreground),.25);font-size:1.05rem;
  line-height:1}
/* mobil menu: a fiok aljan, kicsit levegosebben */
.karma-nyelv--fiok{margin:1.6rem 0 .4rem}
.karma-nyelv--fiok .karma-nyelv__aktiv,
.karma-nyelv--fiok .karma-nyelv__gomb{font-size:1.3rem;padding:.6rem .2rem}
@media (prefers-reduced-motion:reduce){.karma-nyelv__gomb{transition:none}}



/* ===== Valtok (nyelv + penznem): halk legordulo a fejlecben (2026-08-12) =====
   A summary az aktualis erteket mutatja, a panel a valasztast. A nyito nyil
   elfordul nyitott allapotban. Mobil menuben nagyobb kattintofelulet. */
.karma-valto{position:relative;display:inline-block}
/* Balint 2026-08-13: a valto a fejlec ikonsavaban fuggolegesen KOZEPRE - a
   szulo .header__icons flex, de align-items:normal, ezert a details kinyulik
   es a summary felul ragad. Sajat flex-kozepites oldja meg. */
.karma-valto--fejlec{margin-right:1.4rem;display:flex;align-items:center}
.karma-valto--fejlec .karma-valto__fej{align-self:center}
.karma-valto__fej{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  list-style:none;padding:.4rem 0;font-size:1.15rem;font-weight:500;letter-spacing:.16em;
  color:rgb(var(--color-foreground));transition:opacity .2s ease}
.karma-valto__fej::-webkit-details-marker{display:none}
.karma-valto__fej:hover{opacity:.6}
.karma-valto__fej:focus-visible{outline:2px solid #C8A24B;outline-offset:3px}
.karma-valto__nyil{transition:transform .2s ease;opacity:.5}
.karma-valto[open] .karma-valto__nyil{transform:rotate(180deg)}
/* A FEJLEC-VALTOZAT panelje (Balint 2026-08-13): essen kozvetlenul a fejlec also
   vonala ala, es a JOBB szele a kosar-ikon alatt vegzodjon - ne a kis "HU" gombhoz
   igazodjon, mert az balra lot ki.
   Hogyan: a .karma-valto--fejlec statikus lesz, igy a panel legkozelebbi pozicionalt
   ose a .header-wrapper (relative, a base.css-bol) - pontosan az a doboz, amihez a
   mega menu is igazodik. Onnan a top:100% a fejlec alja, a right pedig a fejlec
   tartalmi jobb szele (ugyanaz a --k-pagepad, mint mindenhol).
   A mobil fiok-valtozat (--fiok) erintetlen: ott a panel position:static. */
.karma-valto--fejlec{position:static}
.karma-valto--fejlec .karma-valto__panel{top:100%;right:var(--k-pagepad)}
.karma-valto__panel{position:absolute;top:calc(100% + .8rem);right:0;z-index:20;
  min-width:12rem;background:rgb(var(--color-background));
  border:1px solid rgba(var(--color-foreground),.14);padding:.6rem 0}
.karma-valto__urlap{margin:0}
.karma-valto__cimke{margin:0;padding:.8rem 1.4rem .4rem;font-size:1rem;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(var(--color-foreground),.4)}
.karma-valto__cimke--masodik{margin-top:.4rem;
  border-top:1px solid rgba(var(--color-foreground),.1);padding-top:1rem}
.karma-valto--fiok .karma-valto__cimke{padding-left:0}
.karma-valto__tetel{display:flex;align-items:baseline;gap:.8rem;width:100%;
  appearance:none;background:none;border:0;cursor:pointer;text-align:left;
  padding:.9rem 1.4rem;font-family:inherit;font-size:1.2rem;
  color:rgba(var(--color-foreground),.6);transition:background .2s ease,color .2s ease}
.karma-valto__tetel:hover{background:rgba(var(--color-foreground),.04);
  color:rgb(var(--color-foreground))}
.karma-valto__tetel.is-aktiv{color:rgb(var(--color-foreground))}
.karma-valto__kod{font-weight:500;letter-spacing:.14em;min-width:7.2rem;white-space:nowrap}
.karma-valto__nev{font-size:1.15rem;color:rgba(var(--color-foreground),.45)}
.karma-valto__tetel:focus-visible{outline:2px solid #C8A24B;outline-offset:-2px}
/* mobil menu: a panel a folyamban nyilik, nem lebeg */
.karma-valto--fiok{display:block;margin:.6rem 0}
.karma-valto--fiok .karma-valto__fej{font-size:1.4rem;padding:.8rem 0}
.karma-valto--fiok .karma-valto__panel{position:static;min-width:0;border:0;
  padding:0 0 0 1.2rem;background:none}
@media (prefers-reduced-motion:reduce){.karma-valto__nyil{transition:none}}


/* ============================================================
   MAGAZIN-LISTA ("A" elrendezes, Balint 2026-08-13): vezercikk + racs.
   A Gerinc-savon ul, a cimbetu es a hajszalvonalak a content-oldalak
   rendszerebol jonnek. Rovat-cimke nincs (kesobbi kor).
   ============================================================ */
.karma-mag{max-width:var(--karma-sav);margin-inline:auto;
  padding-left:var(--karma-margo);padding-right:var(--karma-margo)}

/* --- vezercikk --- */
.karma-mag__vezer{display:grid;gap:clamp(2rem,3vw,4rem);align-items:center}
@media screen and (min-width:990px){
  .karma-mag__vezer{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}
.karma-mag__kep{display:block;background:#f6f4f0;overflow:hidden}
.karma-mag__kep img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.16,1,.3,1)}
.karma-mag__kep:hover img{transform:scale(1.02)}
.karma-mag__kep--vezer{aspect-ratio:4/3}
.karma-mag__tetel .karma-mag__kep{aspect-ratio:3/2}

.karma-mag__cim{margin:0 0 1.2rem;font-family:var(--font-heading-family,Georgia,serif);
  font-weight:400;line-height:1.16;letter-spacing:.005em;text-wrap:balance}
.karma-mag__cim a{color:#111;text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .3s ease}
.karma-mag__cim a:hover{background-size:100% 1px}
.karma-mag__cim--vezer{font-size:clamp(2.6rem,3.6vw,4.4rem);margin-bottom:1.6rem}
.karma-mag__tetel .karma-mag__cim{font-size:clamp(1.9rem,2vw,2.3rem);margin-top:1.6rem}

.karma-mag__lead{margin:0;font-size:1.45rem;line-height:1.8;color:rgba(17,17,17,.66);
  max-width:58ch;text-wrap:pretty}
.karma-mag__meta{margin:1.6rem 0 0;font-size:1.15rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(17,17,17,.45);font-variant-numeric:tabular-nums}

/* --- racs --- */
/* Balint 2026-08-13: a vezercikk utan NINCS sortoro vonal - a terkoz maga
   valasztja el a racsot. Az egyetlen vonal az oldalon a hirlevel felso vonala. */
.karma-mag__racs{display:grid;gap:clamp(2.4rem,3vw,4rem);
  margin-top:clamp(5.4rem,8vw,9rem)}
@media screen and (min-width:750px){
  .karma-mag__racs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.karma-mag__tetel .karma-mag__lead{font-size:1.35rem;line-height:1.75}
.karma-mag__tetel .karma-mag__meta{margin-top:1.2rem}

.karma-mag__ures{text-align:center;font-size:1.45rem;color:rgba(17,17,17,.55);
  padding:clamp(4rem,6vw,8rem) 0}
.karma-mag__lapozo{margin-top:clamp(4rem,6vw,7rem);padding-top:clamp(2.6rem,3.4vw,4rem);
  border-top:1px solid rgba(17,17,17,.13)}
@media (prefers-reduced-motion:reduce){.karma-mag__kep img{transition:none}}

/* ===== "Skip to content" ugrolink - CSAK billentyuzetes navigacionál =====
   Balint 2026-08-19: "olykor-olykor bedobalja a store, idegesito es irrelevans".
   Ok: a Dawn `.skip-to-content-link:focus` BARMILYEN fokuszra megjeleniti - igy
   egerkattintas utan, oldalvaltaskor vagy fokusz-visszaallitaskor is felvillan.
   Megoldas: `:focus:not(:focus-visible)` allapotban visszarejtjuk. A link MARAD
   a billentyuzettel navigalok szamara (Tab -> megjelenik), csak egerrel nem villan.
   NEM toroljuk: az ugrolink akadalymentessegi kovetelmeny (WCAG 2.4.1), es az
   Europai Akadalymentesitesi Iranyelv 2025 ota a webshopokra is vonatkozik.
   Specificitas: (0,3,0) veri a Dawn (0,2,0)-jat, ezert nem kell !important. */
/* Balint 2026-08-19 masodik kerese: "az a focusos ize sose jelenjen meg" -
   ezert NEM csak a nem-billentyuzetes fokuszt rejtjuk, hanem MINDEN allapotot.
   TUDATOSAN VALLALT: a WCAG 2.4.1 ugrolink ezzel megszunik. Ha az akadalymentesitesi
   atvizsgalas (EAA) elokerul, ezt a blokkot kell visszavenni :focus-visible-re. */
.skip-to-content-link,
.skip-to-content-link:focus,
.skip-to-content-link:focus-visible {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ============================================================================
   MOBIL FEJLEC (Balint 2026-08-19): "kozepen a logo, balra a hamburger, jobbra
   kulturaltan az ikonok - ne tulzsufolva".
   MERTANI ALAP: a page-width belso szelessege 375px-en 343px (1rem parna).
   A logo 120px. Ha a ket szelso savot 1fr-1fr adja, mindkettonek (343-120)/2 =
   111px jut - EZERT a jobb oldali ikonblokk NEM lehet szelesebb 111px-nel,
   kulonben a racs a logot tolja el a kozeprol. Innen jon a 3x~36px-es keret:
   kereses + kosar = 72px, bosegesen belefer. A fiok-ikont a Dawn mobilon amugy is
   rejti, a nyelvvalto pedig a menube kerult - ez a "ne tulzsufolva".
   ========================================================================== */
@media screen and (max-width: 989px) {
  .header.header--middle-center,
  .header.header--mobile-center {
    grid-template-areas: 'left-icons heading icons';
    grid-template-columns: 1fr auto 1fr;
    column-gap: 0;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  /* BAL: hamburger */
  .header header-drawer { grid-area: left-icons; justify-self: start; }
  .header .header__icon--menu { margin-left: -.4rem; }
  /* KOZEP: logo - a racs kozepe */
  .header .header__heading,
  .header .header__heading-link { grid-area: heading; justify-self: center; margin: 0; }
  .header .header__heading-link { padding-left: 0; padding-right: 0; }
  /* JOBB: szellos, egyenletes ikonsor */
  .header .header__icons {
    grid-area: icons;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0;
    padding-right: 0;
  }
  .header .header__icons .header__icon--search,
  .header .header__icons .header__icon--cart,
  .header .header__icons .header__icon--account {
    width: 36px; height: 36px; min-width: 36px;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .header .header__icons .header__icon .icon,
  .header .header__icons .header__icon > svg,
  .header .header__icons .header__icon .svg-wrapper > svg { width: 20px; height: 20px; }
  /* a fiok-ikont a Dawn mobilon amugy is rejti (small-hide) - itt csak biztositva */
  .header .header__icon--account { display: none; }
  /* A nyelv/penznem-valto mobilon KIKERUL a fejlecbol (Balint, 2026-08-19): negy elem
     mellett zsufolt volt, es a kod+ikon megoldas sem tetszett. Helyette a mobil menuben
     all, nyitott allapotban, "Magyar / English" felirattal - lasd .karma-valto--menu. */
  .header .karma-valto--fejlec { display: none; }
}
/* nagyon keskeny keszulek (<=360px): meg egy fokozat, hogy a logo kozepen maradjon */
@media screen and (max-width: 360px) {
  .header.header--middle-center,
  .header.header--mobile-center { padding-left: .8rem; padding-right: .8rem; }
  .header .header__icons .header__icon--search,
  .header .header__icons .header__icon--cart { width: 33px; min-width: 33px; }
}

/* --- Nyelv/penznem-valto a mobil menuben (karma-lokalizacio, helye:'menu') ---------
   Nem legordulo: a ket lehetoseg mindig latszik, kozvetlenul a menupontok alatt.
   Endonim nevek (Magyar / English), hogy nyelvtudas nelkul is egyertelmu legyen. */
.karma-valto--menu {
  display: block;
  margin: 1.6rem 0 .4rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(var(--color-foreground), .12);
}
.karma-valto--menu .karma-valto__cimke {
  display: block;
  font-size: 1.1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .55;
  margin-bottom: .8rem;
}
.karma-valto--menu .karma-valto__panel {
  position: static; display: flex; gap: .8rem;
  background: none; border: 0; box-shadow: none; padding: 0; min-width: 0;
}
.karma-valto--menu .karma-valto__urlap { flex: 1 1 0; min-width: 0; }
.karma-valto--menu .karma-valto__tetel {
  width: 100%; min-height: 44px;
  display: flex; align-items: baseline; justify-content: center; gap: .5rem;
  padding: .9rem .6rem;
  border: 1px solid rgba(var(--color-foreground), .18);
  border-radius: 2px;
  background: none;
  cursor: pointer;
  font-size: 1.4rem;
  color: rgb(var(--color-foreground));
}
.karma-valto--menu .karma-valto__nev { font-weight: 500; }
.karma-valto--menu .karma-valto__kod { font-size: 1.1rem; opacity: .5; letter-spacing: .06em; }
.karma-valto--menu .karma-valto__tetel.is-aktiv {
  border-color: rgb(var(--color-foreground));
  background: rgba(var(--color-foreground), .05);
}