/*
Theme Name: She Creates Design
Theme URI: https://shecreatesdesign.com
Author: She Creates Design
Description: Egyedi WordPress téma a She Creates Design Élénk Tél kollázs design systemre építve. Brand / Web / Systems.
Version: 1.51.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: shecreates
*/

/* ==========================================================================
   She Creates - Élénk Tél design system
   A tokenek és komponensek dokumentációja: README.md
   ========================================================================== */
:root{
    color-scheme: light;
    --ink:#0A0A0A;
    --paper:#FAFAF7;
    --paper-warm:#F1EAE0;
    --paper-hi:#FFFFFF;
    --paper-sh:#E6E2DA;
    --line:#0A0A0A;
    --on:#0A0A0A;               /* aktuális szövegszín a szekció alapján */

    --o-100:#FCD6CC; --o-300:#FC9981; --o-500:#F23000; --o-700:#A92200; --o-900:#6A1500;
    --m-100:#FCC9E5; --m-300:#FC7AC1; --m-500:#E4007C; --m-700:#A00057; --m-900:#640037;
    --y-100:#FCF5CF; --y-300:#FDE987; --y-500:#FFD400; --y-700:#B29400; --y-900:#705D00;
    --k-100:#C1D4FA; --k-300:#6696F8; --k-500:#043CAD; --k-700:#032A79; --k-900:#021A4C;
    /* türkiz zöld - a lépcsők a #097566 valódi tintjei/árnyalatai, nincs színeltolás */
    --g-100:#DAEAE8; --g-300:#90C1BA; --g-500:#097566; --g-700:#065247; --g-900:#04352E;

    --a-100:var(--o-100); --a-300:var(--o-300); --a-500:var(--o-500); --a-700:var(--o-700);

    --display:"Bricolage Grotesque","Archivo Narrow","Arial Narrow",sans-serif;
    --body:"Archivo","Helvetica Neue",Arial,sans-serif;
    --mono:"Space Mono","Courier New",monospace;
    --script:"Molle","Brush Script MT",cursive;

    --gut:clamp(1.15rem,4vw,3.5rem);
    --maxw:1240px;

    /* márka-asterisk: felsorolásjel és díszjel */
    --m-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.2 1h5.6v8.2H23v5.6h-8.2V23H9.2v-8.2H1V9.2h8.2z'/%3E%3C/svg%3E");
    --ast:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Crect x='10.85' y='1' width='2.3' height='22' rx='1.15'/%3E%3Crect x='10.85' y='1' width='2.3' height='22' rx='1.15' transform='rotate(45 12 12)'/%3E%3Crect x='10.85' y='1' width='2.3' height='22' rx='1.15' transform='rotate(90 12 12)'/%3E%3Crect x='10.85' y='1' width='2.3' height='22' rx='1.15' transform='rotate(135 12 12)'/%3E%3C/g%3E%3C/svg%3E");
  }
  .astmark{
    display:inline-block;flex:0 0 auto;
    background-color:var(--a-500);
    -webkit-mask:var(--ast) center/contain no-repeat;
    mask:var(--ast) center/contain no-repeat;
  }
  [data-accent="m"]{--a-100:var(--m-100);--a-300:var(--m-300);--a-500:var(--m-500);--a-700:var(--m-700)}
  [data-accent="k"]{--a-100:var(--k-100);--a-300:var(--k-300);--a-500:var(--k-500);--a-700:var(--k-700)}
  [data-accent="y"]{--a-100:var(--y-100);--a-300:var(--y-300);--a-500:var(--y-500);--a-700:var(--y-900)}
  [data-accent="g"]{--a-100:var(--g-100);--a-300:var(--g-300);--a-500:var(--g-500);--a-700:var(--g-700)}

  *{box-sizing:border-box}
  [hidden]{display:none!important}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased}
  .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
  .wrap--narrow{max-width:940px}
  /* Fejléc, mobilmenü és lábléc teljes szélességű - egy vonalban a heróval. */
  .topbar > .wrap,
  .mobnav > .wrap,
  footer.site > .wrap{max-width:none}

  /* ============ TYPE ============ */
  h1,h2,h3,h4{margin:0;text-wrap:balance}
  .dsp{font-family:var(--display);font-stretch:75%;font-weight:700;font-variation-settings:"wdth" 75,"wght" 700;text-transform:uppercase}
  h1{font-size:clamp(2.6rem,8.2vw,6rem);line-height:.9;letter-spacing:-.015em}
  h2{font-size:clamp(1.95rem,5vw,3.6rem);line-height:.96;letter-spacing:-.012em}
  h3{font-family:var(--body);font-weight:700;font-size:1.15rem;line-height:1.35}
  p{margin:0 0 1em}
  p:last-child{margin-bottom:0}
  .lede{font-size:clamp(1.06rem,1.8vw,1.28rem);line-height:1.55;max-width:56ch}
  .prose{max-width:64ch}
  .eyebrow{font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
  .quiet{opacity:.78}

  .hl{display:inline;padding:.03em .2em .07em;box-decoration-break:clone;-webkit-box-decoration-break:clone;color:var(--ink);background:var(--y-500)}
  .hl-o{background:var(--o-300)}
  .hl-m{background:var(--m-300)}
  .hl-k{background:var(--k-300)}
  /* A türkiz zöld a többi akcenssel ellentétben nem tintben, hanem teljes
     erősségben kerül a kiemelésbe - fehér szöveggel 5.5:1, AA fölött.
     (A #097566 tintje túl fakó lenne kiemelőnek.) */
  .hl-g{background:var(--g-500);color:var(--paper)}
  .txt-o{color:var(--o-500)}
  .txt-y{color:var(--y-500)}

  /* ============ SZEKCIÓ-ALAPOK ============ */
  section{padding:clamp(3.6rem,7.5vw,7rem) 0;position:relative;background:var(--paper);color:var(--on)}
  .band{border-top:2px solid var(--ink)}
  .sec--warm{background:var(--paper-warm)}
  .sec--blush{background:var(--m-100)}
  .sec--y{background:var(--y-500)}
  .sec--o{background:var(--o-500)}
  .sec--ink{background:var(--ink);--on:var(--paper);--line:#FAFAF7;color:var(--paper)}
  .sec--ink .eyebrow{color:var(--paper)}

  .sechead{display:flex;flex-direction:column;gap:1rem;margin-bottom:2.8rem;max-width:46ch}
  .sechead--mid{text-align:center;align-items:center;margin-left:auto;margin-right:auto;max-width:none}
  /* Szekciócímsorok legfeljebb 2 sorban. A korábbi 19ch (kb. 9.5em) 3-5 sorra
     tördelte őket; a leghosszabb (Rólam) 14.22em-nél billen 2 sorba, a 15.5em
     ennek a ráhagyása. Em-ben, hogy a betűmérettel skálázódjon. */
  .sechead--mid h2{max-width:15.5em}
  .sechead--mid p{max-width:60ch}
  .sechead p{font-size:1.02rem}

  /* ============ NAV ============ */
  .topbar{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:2px solid var(--ink)}
  .topbar .wrap{display:flex;align-items:center;gap:1.2rem;height:90px}
  .brand{display:flex;align-items:center;text-decoration:none;color:var(--ink);flex:0 0 auto}
  .logo{display:block;color:inherit}
  .logo--mark{height:66px;width:auto}
  .logo--full{height:150px;width:auto;color:var(--o-500)}
  @media(max-width:520px){.topbar .wrap{height:78px}.logo--mark{height:54px}}
  .nav{display:none;margin-left:auto;align-items:center;gap:.2rem}
  @media(min-width:1000px){.nav{display:flex}.burger{display:none}}
  .nav a,.nav button.navbtn{font-size:.94rem;font-weight:500;color:var(--ink);text-decoration:none;background:none;border:0;padding:.5rem .7rem;cursor:pointer;font-family:inherit}
  .nav a:hover,.nav button.navbtn:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
  .nav .cta{background:var(--ink);color:var(--paper);padding:.62rem 1.15rem;margin-left:.6rem;font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
  .nav .cta:hover{background:var(--a-700);color:var(--paper);text-decoration:none}
  .hasmenu{position:relative}
  .submenu{position:absolute;top:100%;left:0;min-width:252px;background:var(--paper-hi);border:2px solid var(--ink);padding:.4rem;display:flex;flex-direction:column}
  .submenu a{padding:.55rem .7rem;font-size:.92rem}
  .submenu a:hover{background:var(--a-100);text-decoration:none}
  .burger{margin-left:auto;background:none;border:2px solid var(--ink);padding:.5rem .8rem;cursor:pointer;font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
  .mobnav{border-bottom:2px solid var(--ink);background:var(--paper-hi)}
  .mobnav .wrap{display:flex;flex-direction:column;padding-top:1rem;padding-bottom:1.4rem}
  .mobnav a{color:var(--ink);text-decoration:none;padding:.5rem 0;font-size:1.05rem;font-weight:500}
  .mobnav .grp{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;opacity:.62;margin-top:1rem}
  .mobnav .sub{padding-left:1rem;font-size:.98rem}
  @media(min-width:1000px){.mobnav{display:none!important}}

  /* ============ BUTTONS ============ */
  .btn{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;cursor:pointer;font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.85rem 1.4rem;border:2px solid var(--ink);background:var(--ink);color:var(--paper)}
  .btn:hover{background:var(--a-700);border-color:var(--a-700)}
  .btn--ghost{background:transparent;color:var(--on);border-color:var(--line)}
  .btn--ghost:hover{background:var(--a-300);border-color:var(--ink);color:var(--ink)}
  .sec--ink .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
  .sec--ink .btn:hover{background:var(--o-500);border-color:var(--o-500);color:var(--ink)}
  .sec--o .btn,.sec--y .btn{background:var(--ink);border-color:var(--ink);color:var(--paper)}
  .sec--o .btn:hover,.sec--y .btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
  .btnrow{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
  .btnrow--mid{justify-content:center}
  .arrowlink{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;color:var(--on);font-weight:600;font-size:.95rem;border-bottom:2px solid var(--a-500);padding-bottom:.15rem}
  .arrowlink:hover{background:var(--a-300);color:var(--ink)}

  /* ============ HERO ============ */
  .hero{padding-top:clamp(2.4rem,5vw,4.2rem);padding-bottom:clamp(2.8rem,5vw,4.4rem);overflow:hidden}
  /* A hero teljes szélességű: a szekció nem kap max-width-et, csak a gutter marad. */
  .hero > .wrap{max-width:none}
  .heroGrid{display:grid;grid-template-columns:1fr;gap:2rem}
  /* A hero két oszlopa egységesen 60 / 40 - a 3fr 2fr a gap levonása UTÁN osztozik,
     így az arány a köznél is pontos marad. A szövegoszlop query-konténer, hogy a
     címsor a saját hasábszélességéhez igazodjon, ne a viewporthoz. */
  @media(min-width:980px){
    .heroGrid{grid-template-columns:3fr 2fr;gap:3.2rem;align-items:stretch}
    .heroGrid > :first-child{container-type:inline-size}
    /* A címsor kitölti a 60%-os hasábot. A --h1em a leghosszabb sor lemért
       szélessége em-ben (sablononként a <h1> style attribútumában); ebből a
       hasábszélesség (100cqi) egyenesen adja a betűméretet. A .97 a biztonsági
       tartalék, a 10rem a felső korlát a nagyon rövid címsorokhoz.
       Fallback 6.4em a dinamikus címeknek (blog, egyedi oldal, 404). */
    .heroGrid > :first-child h1{
      font-size:min(calc(100cqi / var(--h1em,6.4) * .97),10rem);
      letter-spacing:-.02em;
      /* A sortörések kézzel vannak megadva, a balance viszont újratördelné és
         eggyel több sort csinálna belőle - ezért itt kikapcsoljuk. */
      text-wrap:wrap;
    }
  }

  /* Aloldal-hero: grafika nélkül, középre igazítva, kisebb fokozatban.
     A főoldal hero-ja marad a kétoszlopos, kollázsos változat. */
  .hero--center{text-align:center;padding-bottom:clamp(2.2rem,4vw,3.4rem)}
  .hero--center > .wrap{max-width:1000px}
  .hero--center > .wrap--narrow{max-width:940px}
  .hero--center .heroKick{justify-content:center}
  /* Legfeljebb 3 sor. A szedéstükör 12.5em - a leghosszabb címsor (Csomagok)
     10.4em-nél billen 3 sorba, a ráhagyás a kisebb fokozatok eltérő tördelését
     fedi. A 7vw-s lejtő 891px-ig viszi a fokozatot, ezért a 12.5em minden
     szélességen belefér a konténerbe (ami 4vw gutterrel a viewport 92%-a),
     és a 3 soros korlát 320px-ig kitart. Fölötte a 3.9rem a plafon. */
  .hero--center h1{
    font-size:clamp(1.4rem,7vw,3.9rem);
    letter-spacing:-.012em;
    max-width:12.5em;margin-left:auto;margin-right:auto;
  }
  .hero--center .lede{margin-left:auto;margin-right:auto}
  .hero--center .btnrow{justify-content:center}

  .heroKick{display:flex;align-items:center;gap:.7rem;margin-bottom:1.4rem;flex-wrap:wrap}
  .ast{width:1.15rem;height:1.15rem}
  .heroFoot{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;margin-top:2.4rem;padding-top:1.2rem;border-top:2px solid var(--ink)}
  .heroFoot .eyebrow{opacity:.72}

  .sh{position:absolute}
  .circ{border-radius:50%}
  .dots{background-image:radial-gradient(var(--ink) 1.5px,transparent 1.7px);background-size:9px 9px}
  .stripe{background-image:repeating-linear-gradient(45deg,var(--ink) 0 3px,transparent 3px 9px)}
  /* szórt kollázs-elemek a hero oszlopában - X, O, +, folt, raszter */
  .d{position:absolute;pointer-events:none}
  .dplus{
    -webkit-mask:var(--m-plus) center/contain no-repeat;
    mask:var(--m-plus) center/contain no-repeat;
  }
  .dast{
    -webkit-mask:var(--ast) center/contain no-repeat;
    mask:var(--ast) center/contain no-repeat;
  }
  .dring{border-radius:50%;border-style:solid;background:none}
  .ddisc{border-radius:50%}
  .dstripe{background-image:repeating-linear-gradient(45deg,currentColor 0 3.5px,transparent 3.5px 10px)}
  .ddots{background-image:radial-gradient(currentColor 1.6px,transparent 1.8px);background-size:9px 9px}
  .d-under{z-index:0}
  .d-over{z-index:3}
  .collagePanel .sh{z-index:1}
  .collagePanel .sh.photo{z-index:2}
  .photocap{
    position:absolute;z-index:3;left:6%;top:8%;width:54%;height:84%;
    display:flex;align-items:flex-start;justify-content:center;padding-top:.9rem;
    font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--paper);opacity:.62;text-align:center;
  }
  /* A hero-kollázs valódi képe: fekvő mockup a szórt alakzatok között.
     A magasság az arányból jön, ezért csak a szélesség van megadva. */
  /* z-index 4: a d-over alakzatok (z-index 3) fölé, hogy a képernyő olvasható
     maradjon - a kilógó alakzatok így a kép köré rendeződnek, nem rá. */
  /* Post-it jellegű keret: papírlap, ragasztószalag, kemény árnyék, enyhe billentés
     - ugyanaz a nyelv, mint a .note elemeknél. A billentés a transformban van a
     függőleges középre igazítással együtt. */
  .collagePanel .heroshot{
    position:absolute;z-index:4;
    left:0;top:50%;transform:translateY(-50%) rotate(-1.4deg);
    width:100%;margin:0;
    padding:.85rem .85rem 2.4rem;
    background:var(--paper-hi);
    background-image:repeating-linear-gradient(var(--paper-hi) 0 1.75rem, var(--paper-sh) 1.75rem 1.77rem);
    background-position:0 100%;
    box-shadow:12px 14px 0 rgba(10,10,10,.18);
  }
  .collagePanel .heroshot::before{
    content:"";position:absolute;top:-.8rem;left:50%;
    width:7rem;height:1.6rem;background:rgba(10,10,10,.1);
    transform:translateX(-50%) rotate(-3.5deg);
  }
  .collagePanel .heroshot img{display:block;width:100%;height:auto}
  @media(max-width:979px){
    .collagePanel .heroshot{width:86%;padding:.7rem .7rem 2rem}
  }
  .collagePanel{position:relative;height:400px;overflow:hidden}
  /* 980px fölött nincs fix magasság: a panel a szövegoszlophoz igazodik, így a
     százalékosan pozicionált alakzatok a teljes oszlopmagasságon szóródnak szét.
     overflow:visible - az alakzatok kilóghatnak a kép mögül; a .hero saját
     overflow:hidden-je fogja meg őket a szekció szélénél. Mobilon marad a vágás,
     hogy ne ússzanak rá a szövegre. */
  @media(min-width:980px){.collagePanel{height:auto;min-height:500px;overflow:visible}}

  /* ---- A kollázs-alakzatok külön-külön mozognak ----
     A mozgás a `translate` tulajdonságon megy, NEM a transformon: több alakzatnak
     inline transform:rotate(...) van, amit a transform-animáció felülírna. */
  @keyframes sc-float{0%,100%{translate:0 0}50%{translate:0 -16px}}
  @keyframes sc-drift{0%,100%{translate:0 0}50%{translate:12px -10px}}
  @keyframes sc-sway {0%,100%{translate:0 0}50%{translate:-14px 8px}}
  @keyframes sc-bob  {0%,100%{translate:0 0}50%{translate:-8px -13px}}
  @media(prefers-reduced-motion:no-preference){
    .collagePanel .d,
    .collagePanel .sh{will-change:translate;animation:sc-float 9s ease-in-out infinite}
    .collagePanel > :nth-child(6n+1){animation:sc-drift 11s ease-in-out -1.2s infinite}
    .collagePanel > :nth-child(6n+2){animation:sc-sway  13s ease-in-out -3.4s infinite}
    .collagePanel > :nth-child(6n+3){animation:sc-bob   10s ease-in-out -5.1s infinite}
    .collagePanel > :nth-child(6n+4){animation:sc-float 12s ease-in-out -2.6s infinite}
    .collagePanel > :nth-child(6n+5){animation:sc-drift  8s ease-in-out -6.3s infinite}
    .collagePanel > :nth-child(6n)  {animation:sc-sway  14s ease-in-out -4.7s infinite}
    /* A mockup nem mozog - az a tartalom, nem dekor. */
    .collagePanel .heroshot{animation:none;will-change:auto}
  }

  /* portré-hely */
  .portrait{position:relative;background:var(--ink);overflow:hidden;min-height:360px;display:flex;align-items:center;justify-content:center;padding:1.6rem}
  .portrait::before{content:"";position:absolute;inset:20px;border:2px dashed rgba(250,250,247,.32);z-index:3}
  .portrait .dotfill{position:absolute;inset:0;background-image:radial-gradient(rgba(250,250,247,.28) 1.4px,transparent 1.6px);background-size:9px 9px;z-index:1}
  .portrait .cap{position:relative;z-index:4;font-family:var(--mono);font-size:.68rem;line-height:2;letter-spacing:.2em;text-transform:uppercase;color:var(--paper);opacity:.75;text-align:center}
  .portrait .swatch{position:absolute;z-index:2}
  /* Képhelyőrző kétoszlopos szekcióban: a portré-helyőrzővel azonos nyelv,
     de a hasáb szélességéhez igazodó 4:5 arányban, nem fix magassággal. */
  .two > .portrait{min-height:0;aspect-ratio:4/5}
  /* Valódi fotóval: nincs szaggatott helyőrző-keret és raszter, a kép kitölti
     a konténert, a dekor körök viszont maradnak a sarkokban. */
  .portrait--photo{padding:0;min-height:0;aspect-ratio:4/5}
  .portrait--photo::before{content:none}
  .portrait__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;z-index:1}
  @media(min-width:900px){.portrait--photo{aspect-ratio:auto;min-height:520px}}

  /* ============ NOTE (post-it) ============ */
  /* A post-it megjelenést két dolog kapja meg:
     1) bármi, amin explicit .note osztály van;
     2) globálisan minden .two blokk közvetlen <p> gyereke - vagyis a szekciók
        csupasz, kétoszlopos prózablokkjai. A .two-k, amelyekben <div>/<ul> van
        (mit kapsz listák, űrlapok), érintetlenek maradnak. */
  .note,
  .two > p{
    background:var(--paper-hi);
    background-image:repeating-linear-gradient(var(--paper-hi) 0 1.75rem, var(--paper-sh) 1.75rem 1.77rem);
    background-position:0 1.9rem;
    box-shadow:5px 6px 0 rgba(10,10,10,.14);
    border:0;padding:1.9rem 1.5rem;
    font-family:var(--mono);font-size:.83rem;line-height:1.75rem;
    position:relative;color:var(--ink);
  }
  .note::before,
  .two > p::before{
    content:"";position:absolute;top:-.72rem;left:50%;
    width:6rem;height:1.5rem;background:rgba(10,10,10,.1);
    transform:translateX(-50%) rotate(-3.5deg);
  }
  .note strong{display:block;letter-spacing:.1em;margin-bottom:.3rem}
  .note ul{margin:0;padding:0;list-style:none}
  .note li{padding-left:1.4rem;position:relative}
  .note li::before{
    content:"";position:absolute;left:0;top:.48em;width:.8rem;height:.8rem;
    background-color:var(--a-500);
    -webkit-mask:var(--ast) center/contain no-repeat;mask:var(--ast) center/contain no-repeat;
  }
  .notes{display:grid;grid-template-columns:1fr;gap:2.2rem}
  @media(min-width:760px){.notes{grid-template-columns:repeat(3,1fr);gap:1.8rem}}
  /* Az automatikus billentés a globális változatnak - a .tilt-* osztályok
     kézzel is használhatók ott, ahol a markup megadja őket. */
  .two > p:nth-child(odd){transform:rotate(-1.4deg)}
  .two > p:nth-child(even){transform:rotate(1.5deg)}
  /* Post-itekkel egyenlő hasábok és szorosabb köz. */
  .two:has(> p){grid-template-columns:1fr}
  @media(min-width:900px){.two:has(> p){grid-template-columns:1fr 1fr;gap:2.4rem}}
  .tilt-l{transform:rotate(-1.4deg)}
  .tilt-r{transform:rotate(1.5deg)}
  .tilt-0{transform:rotate(.6deg)}

  /* ============ TINT KÁRTYÁK ============ */
  .tints{display:grid;grid-template-columns:1fr;gap:1.2rem}
  @media(min-width:900px){.tints{grid-template-columns:repeat(3,1fr)}}
  .tints.two{grid-template-columns:1fr}
  @media(min-width:760px){.tints.two{grid-template-columns:1fr 1fr}}
  .tint{background:var(--t,var(--o-100));border:2px solid var(--ink);border-top-width:10px;border-top-color:var(--tb,var(--o-500));padding:1.6rem 1.5rem 1.8rem;display:flex;flex-direction:column;gap:.85rem;color:var(--ink)}
  .tint .num{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.2em;color:var(--tb,var(--o-500))}
  .tint h3{font-family:var(--display);font-stretch:75%;font-weight:700;font-variation-settings:"wdth" 75,"wght" 700;text-transform:uppercase;font-size:1.5rem;line-height:1.02}
  .tint p{font-size:.95rem;line-height:1.58;margin:0}
  .taglist{display:flex;flex-wrap:wrap;gap:.35rem}
  .taglist span{font-family:var(--mono);font-size:.65rem;border:1.5px solid var(--ink);padding:.22rem .48rem}
  .tint .arrowlink{margin-top:auto;padding-top:.5rem;align-self:flex-start;color:var(--ink);border-bottom-color:var(--tb,var(--o-500))}
  .tint .arrowlink:hover{background:var(--paper-hi)}



  /* ============ TÁBLÁZAT ============ */
  .scroller{overflow-x:auto;border:2px solid var(--line);background:var(--paper-hi)}
  table{border-collapse:collapse;width:100%;min-width:460px;font-size:.95rem}
  th,td{padding:.75rem 1rem;text-align:left;border-bottom:1.5px solid var(--paper-sh)}
  thead th{
    font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
    background:var(--ink);color:var(--paper);border-bottom:0;
  }
  tbody tr:last-child td{border-bottom:0}

  /* ============ CSOMAGLISTA ============ */
  .pkg{margin:.2rem 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.45rem}
  .pkg li{position:relative;padding-left:1.35rem;font-size:.9rem;line-height:1.5}
  .pkg li::before{
    content:"";position:absolute;left:0;top:.42em;width:.72rem;height:.72rem;
    background-color:var(--tb,var(--a-500));
    -webkit-mask:var(--ast) center/contain no-repeat;mask:var(--ast) center/contain no-repeat;
  }
  /* Valódi ár: display-fokozat, fölötte a szekciókkal egyező 2px-es vonal.
     A "-tól" fél fokozatban ül mellette. */
  /* p.pricebox, nem .pricebox: a .tint p (0,1,1) különben felülírja a méretet. */
  p.pricebox{
    font-family:var(--display);font-stretch:75%;font-weight:700;
    font-variation-settings:"wdth" 75,"wght" 700;
    font-size:1.85rem;line-height:1;letter-spacing:-.01em;
    border:0;border-top:2px solid var(--ink);
    padding:.85rem 0 0;text-align:left;margin:1.2rem 0 0;
  }
  p.pricebox span{font-size:.5em;letter-spacing:0;margin-left:.1em}

  /* Ajánlatkérés-megjegyzés az árkártyák alatt. */
  .pricenote{
    display:flex;align-items:flex-start;gap:.7rem;
    margin-top:2rem;max-width:70ch;font-size:.95rem;line-height:1.6;
  }
  .pricenote .ast{flex:0 0 auto;margin-top:.42em}
  .pricenote p{margin:0}
  /* .pricenote .pricenote__tax (0,2,0), hogy a fenti .pricenote p margin:0-t
     felülírja - !important nélkül. */
  .pricenote .pricenote__tax{
    font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
    line-height:1.7;margin-top:.7rem;opacity:.72;
  }
  .pricenote a{
    color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;
    text-underline-offset:3px;text-decoration-color:var(--a-500);
  }
  .pricenote a:hover{background:var(--a-300);text-decoration-color:transparent}

  /* ============ SZŰRŐK ============ */
  .filters{display:flex;flex-wrap:wrap;gap:.5rem}
  .filter{
    font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    border:2px solid var(--ink);background:transparent;color:var(--ink);
    padding:.55rem .95rem;cursor:pointer;
  }
  .filter:hover{background:var(--a-300)}
  .filter.is-on{background:var(--ink);color:var(--paper)}

  /* ============ FAQ ============ */
  .faq{border-top:2px solid var(--line)}
  .faq details{border-bottom:2px solid var(--line)}
  .faq summary{
    cursor:pointer;list-style:none;padding:1.15rem 2.4rem 1.15rem 0;position:relative;
    font-weight:700;font-size:1.05rem;line-height:1.4;
  }
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{
    content:"";position:absolute;right:.2rem;top:1.35rem;width:1.05rem;height:1.05rem;
    background-color:var(--a-500);
    -webkit-mask:var(--ast) center/contain no-repeat;mask:var(--ast) center/contain no-repeat;
    transition:transform .18s ease;
  }
  .faq details[open] summary::after{transform:rotate(45deg)}
  .faq summary:hover{color:var(--a-700)}
  .faq .ans{padding:0 0 1.3rem;max-width:66ch;font-size:.97rem;line-height:1.6}

  /* ============ HÍRLEVÉL ============ */
  .subscribe{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
  .subscribe input{
    font-family:var(--body);font-size:1rem;padding:.78rem .9rem;min-width:min(100%,300px);
    border:2px solid var(--ink);background:var(--paper-hi);color:var(--ink);border-radius:0;
  }
  .suberr{font-family:var(--mono);font-size:.78rem;text-align:center;margin:.7rem 0 0;min-height:1.2em}
  .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  /* ============ MODULRÁCS ============ */
  .modgrid{display:grid;grid-template-columns:1fr;gap:0}
  @media(min-width:620px){.modgrid{grid-template-columns:repeat(2,1fr)}}
  @media(min-width:980px){.modgrid{grid-template-columns:repeat(3,1fr)}}
  /* Negy elem eseten ne 3+1-be torjon. */
  @media(min-width:980px){.modgrid--negy{grid-template-columns:repeat(4,1fr)}}
  .modgrid .step{padding-bottom:1.3rem}

  /* ============ SPLIT ============ */
  .splitFull{display:grid;grid-template-columns:1fr}
  @media(min-width:900px){.splitFull{grid-template-columns:1fr 1fr;align-items:stretch}}
  .splitFull .pad{padding:clamp(2.4rem,5vw,4.5rem) var(--gut)}
  @media(min-width:900px){.splitFull .pad{padding:clamp(3rem,5vw,5rem) clamp(2rem,4vw,4rem)}}

  /* ============ STEPS ============ */
  .steps{display:grid;grid-template-columns:1fr}
  @media(min-width:760px){.steps{grid-template-columns:repeat(2,1fr)}}
  @media(min-width:1080px){.steps.four{grid-template-columns:repeat(4,1fr)}.steps.five{grid-template-columns:repeat(5,1fr)}}
  .step{border-top:2px solid var(--line);padding:1.3rem 1.4rem 1.7rem 0;display:flex;flex-direction:column;gap:.5rem}
  .step .n{font-family:var(--display);font-stretch:75%;font-weight:700;font-variation-settings:"wdth" 75,"wght" 700;font-size:2.6rem;line-height:.88;color:var(--a-500)}
  .sec--ink .step .n{color:var(--o-300)}
  .sec--y .step .n{color:var(--ink)}
  .step h4{font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
  .step p{font-size:.93rem;line-height:1.55}

  /* ============ LISTS ============ */
  .two{display:grid;grid-template-columns:1fr;gap:2.4rem}
  @media(min-width:900px){.two{grid-template-columns:1.1fr .9fr;gap:3.5rem}}
  .checks{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr;gap:.85rem}
  @media(min-width:760px){.checks{grid-template-columns:1fr 1fr;gap:.85rem 2.2rem}}
  /* Egyoszlopos változat: ott kell, ahol a lista egy kétoszlopos elrendezés
     egyik hasábjában áll, kép mellett. */
  .checks.checks--one{grid-template-columns:1fr;gap:.85rem}
  .checks li{padding-left:2rem;position:relative;font-size:.98rem;line-height:1.55}
  .checks li::before{
    content:"";position:absolute;left:0;top:.2em;width:1.15rem;height:1.15rem;
    background-color:var(--a-500);
    -webkit-mask:var(--ast) center/contain no-repeat;mask:var(--ast) center/contain no-repeat;
  }
  .sec--ink .checks li::before{background-color:var(--o-500)}
  .sec--y .checks li::before{background-color:var(--ink)}
  .pills{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
  .pills span{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;border:2px solid var(--ink);padding:.5rem .9rem;background:var(--paper-hi)}
  .deliver{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr;border-top:2px solid var(--line)}
  @media(min-width:700px){.deliver{grid-template-columns:1fr 1fr;column-gap:2.5rem}}
  .deliver li{border-bottom:1.5px solid rgba(10,10,10,.16);padding:.72rem 0;font-size:.96rem;display:flex;gap:.9rem;align-items:baseline}
  .deliver li b{font-family:var(--mono);font-size:.68rem;font-weight:700;opacity:.55;min-width:1.7rem}
  .sec--ink .deliver li{border-bottom-color:rgba(250,250,247,.22)}

  /* ============ CSOMAG-RÉSZLETEK (Csomagok aloldal) ============ */
  /* Egyoszlopos, magyarázatos változat: cím + alatta a leírás. */
  .deliver.deliver--wide{grid-template-columns:1fr}
  .deliver--wide li{align-items:flex-start;padding:.85rem 0}
  .deliver--wide li b{margin-top:.15rem}
  .deliver--wide li strong{display:block;font-weight:700;line-height:1.35}
  .deliver--wide li p{margin:.2rem 0 0;font-size:.9rem;line-height:1.55;opacity:.8}

  /* A sorszám-címke a szekció akcensét veszi fel. --a-700, nem --a-500: a sárga
     500-as papíron olvashatatlan lenne. */
  .num--pkg{
    font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.2em;
    text-transform:uppercase;color:var(--a-700);
  }

  /* Ár a részletes blokkban - ugyanaz a fokozat, mint a kártyán. */
  p.pkgprice{
    font-family:var(--display);font-stretch:75%;font-weight:700;
    font-variation-settings:"wdth" 75,"wght" 700;
    font-size:1.85rem;line-height:1;letter-spacing:-.01em;
    border-top:2px solid var(--ink);padding:.85rem 0 0;margin:1.4rem 0 0;
  }
  p.pkgprice span{font-size:.5em;letter-spacing:0;margin-left:.1em}

  /* "Ha inkább mást keresel" átvezetés. */
  .pkgalt{display:flex;align-items:flex-start;gap:.7rem;margin-top:1.4rem;font-size:.92rem;line-height:1.6;opacity:.85}
  .pkgalt .ast{flex:0 0 auto;width:1rem;height:1rem;margin-top:.35em;background-color:var(--a-700)}

  /* Ütemezés és fizetés: két tény, a lista alatti vonal alatt. */
  .pkgmeta{
    display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 2.5rem;
    margin:1.6rem 0 0;padding-top:1.1rem;border-top:2px solid var(--ink);
  }
  .pkgmeta dt{margin-bottom:.35rem}
  .pkgmeta dd{
    margin:0;font-family:var(--display);font-stretch:75%;font-weight:700;
    font-variation-settings:"wdth" 75,"wght" 700;text-transform:uppercase;
    font-size:1.25rem;line-height:1.05;letter-spacing:-.005em;
  }

  .cards{display:grid;grid-template-columns:1fr;border-top:2px solid var(--line)}
  @media(min-width:760px){.cards{grid-template-columns:1fr 1fr}}
  .card{border-bottom:2px solid var(--line);padding:1.6rem 0 1.8rem;display:flex;flex-direction:column;gap:.55rem}
  @media(min-width:760px){
    .card{padding:1.8rem 2rem 2rem;border-right:2px solid var(--line)}
    .card:nth-child(2n){border-right:0;padding-right:0}
    .card:nth-child(2n+1){padding-left:0}
  }
  .card h3{font-size:1.22rem}
  .card p{font-size:.95rem;line-height:1.6;margin:0}

  /* ============ PROJEKTEK ============ */
  .projects{display:grid;grid-template-columns:1fr;gap:1.8rem}
  @media(min-width:820px){.projects{grid-template-columns:repeat(3,1fr)}}
  .proj{display:flex;flex-direction:column;gap:.9rem}
  .proj .thumb{aspect-ratio:4/3;position:relative;overflow:hidden;border:2px solid var(--ink)}
  /* Valódi projektkép a színes helyőrző helyett. */
  .proj a.thumb{display:block;background:var(--paper-sh)}
  .proj .thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .45s ease}
  @media(prefers-reduced-motion:no-preference){.proj a.thumb:hover img{transform:scale(1.04)}}
  /* Referenciaképek: alapból fekete-fehér, egérrel színesednek.
     Csak ott kapcsoljuk be, ahol van valódi hover - érintőképernyőn nincs,
     ott a kép örökre szürkében ragadna. */
  @media (hover:hover) and (pointer:fine){
    .proj .thumb img{filter:grayscale(1)}
    .proj .thumb:hover img,
    .proj a.thumb:focus-visible img{filter:grayscale(0)}
  }
  .proj[hidden]{display:none}
  /* Egy referencia oldalan a nagy kepernyokep. */
  .refshot{margin:0;border:2px solid var(--ink);background:var(--paper-sh);line-height:0}
  .refshot img{display:block;width:100%;height:auto}
  .proj .meta{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;opacity:.72}
  .proj h3{font-family:var(--display);font-stretch:75%;font-weight:700;font-variation-settings:"wdth" 75,"wght" 700;text-transform:uppercase;font-size:1.3rem;line-height:1.05}
  .proj p{font-size:.93rem;line-height:1.5;margin:0}

  /* ============ PROMPT-PÁRBAJ (Academy ízelítő) ============ */
  .pmt-parbaj{display:grid;grid-template-columns:1fr;gap:1.1rem;margin-top:2.2rem}
  @media(min-width:760px){.pmt-parbaj{grid-template-columns:1fr 1fr;align-items:start}}
  .pmt{border:2px solid var(--ink);background:var(--paper-hi);padding:1.2rem 1.3rem 1.4rem}
  .pmt__cimke{
    display:inline-block;font-family:var(--mono);font-size:.62rem;font-weight:700;
    letter-spacing:.16em;text-transform:uppercase;margin-bottom:.7rem
  }
  .pmt p{font-size:.93rem;line-height:1.6;margin:0}
  .pmt--rossz{border-color:var(--line);background:var(--paper-sh)}
  .pmt--rossz .pmt__cimke{color:var(--o-700)}
  .pmt--jo{border-top-width:10px;border-top-color:var(--g-500)}
  .pmt--jo .pmt__cimke{color:var(--g-700)}
  .pmt__jegyzet{
    margin-top:.9rem !important;padding-top:.8rem;border-top:1.5px solid var(--line);
    font-family:var(--mono);font-size:.7rem;line-height:1.55;opacity:.8
  }

  /* ============ TIPO-PANEL ============ */

  .typeart{border:2px solid var(--ink);background:var(--paper-hi);padding:clamp(1.8rem,4vw,3rem);display:flex;flex-direction:column;gap:.1rem;align-items:center;text-align:center}
  /* Kepes valtozat: a keret marad, a belso terkoz nem kell. */
  .typeart--kep{padding:0;overflow:hidden;line-height:0}
  .typeart__kep{display:block;width:100%;height:auto}
  .typeart span{font-family:var(--display);font-stretch:75%;font-weight:700;font-variation-settings:"wdth" 75,"wght" 700;text-transform:uppercase;line-height:.92;font-size:clamp(1.7rem,4.4vw,3.1rem);letter-spacing:-.01em}
  .typeart .amp{color:var(--o-500)}

  /* ============ FORM ============ */
  .form{display:grid;grid-template-columns:1fr;gap:1.1rem}
  @media(min-width:720px){.form{grid-template-columns:1fr 1fr}.form .full{grid-column:1/-1}}
  .field{display:flex;flex-direction:column;gap:.35rem}
  .field label{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
  .field input,.field select,.field textarea{font-family:var(--body);font-size:1rem;padding:.78rem .9rem;border:2px solid var(--ink);background:var(--paper-hi);color:var(--ink);border-radius:0}
  .field textarea{min-height:150px;resize:vertical}
  .field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--k-500);outline-offset:1px}
  .field .err{font-family:var(--mono);font-size:.72rem;color:var(--m-700);min-height:1.1em}
  .field.bad input,.field.bad select,.field.bad textarea{border-color:var(--m-700)}
  .consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem}
  .consent input{width:1.2rem;height:1.2rem;margin-top:.2rem;accent-color:var(--ink);flex:0 0 auto}
  .formok{border:2px solid var(--ink);background:var(--y-500);padding:1.6rem 1.7rem;color:var(--ink)}

  /* ============ FLUENTFORM A TEMA NYELVEN ============
     A plugin CSS-e a shortcode kirendereleskor tolt be, tehat a temae UTAN -
     ezert kell a form.frm-fluent-form szint, kulonben a plugin nyer. Az ertekek
     ugyanazok, mint a .form / .field-nel: 2px fekete keret, mono cimke, fekete gomb. */
  .fluentform form.frm-fluent-form .ff-el-group{margin-bottom:1.1rem}
  .fluentform form.frm-fluent-form .ff-el-input--label label{
    font-family:var(--mono);font-size:.68rem;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  }
  .fluentform form.frm-fluent-form .ff-el-input--label.ff-el-is-required label:after{color:var(--m-700)}
  .fluentform form.frm-fluent-form .ff-el-form-control{
    font-family:var(--body);font-size:1rem;line-height:1.5;
    padding:.78rem .9rem;border:2px solid var(--ink);border-radius:0;
    background:var(--paper-hi);color:var(--ink);box-shadow:none;
  }
  .fluentform form.frm-fluent-form textarea.ff-el-form-control{min-height:150px;resize:vertical}
  .fluentform form.frm-fluent-form .ff-el-form-control:focus{
    outline:3px solid var(--k-500);outline-offset:1px;
    border-color:var(--ink);box-shadow:none;
  }
  .fluentform form.frm-fluent-form select.ff-el-form-control{appearance:none;background-image:none}
  /* Ket hasab, mint a prototipus urlapjanal. A FluentForm minden mezot kulon
     .ff-el-group-ba tesz egymas ala, ezert a <fieldset> lesz a racs. A hosszu
     mezok (uzenet, honnan hallottal, GDPR, gomb) teljes szelessegben allnak. */
  @media(min-width:720px){
    .fluentform form.frm-fluent-form > fieldset{
      display:grid;grid-template-columns:1fr 1fr;gap:0 1.1rem;
      border:0;padding:0;margin:0;min-inline-size:0;
    }
    .fluentform form.frm-fluent-form .ff-el-group:has(textarea),
    .fluentform form.frm-fluent-form .ff-el-group:has(input[name="source"]),
    .fluentform form.frm-fluent-form .ff-el-group:has(.ff-el-form-check),
    .fluentform form.frm-fluent-form .ff-el-group:has(.ff-btn-submit),
    .fluentform form.frm-fluent-form .ff_submit_btn_wrapper{grid-column:1/-1}
  }
  /* Beleegyezes es hibauzenet */
  /* A bovitmeny alapertelmezett kek linkje es sugoikonja idegen a
     markatol - a szekcio sajat szovegszinet vesszuk at helyettuk. */
  .fluentform form.frm-fluent-form a{
    color:var(--on,var(--ink));text-decoration:underline;
    text-underline-offset:2px;text-decoration-thickness:1px
  }
  .fluentform form.frm-fluent-form a:hover{text-decoration-thickness:2px}
  .fluentform form.frm-fluent-form .ff-el-tooltip svg{fill:currentColor}
  /* Szines szekcioban a magenta kotelezoseg-jelolo alig latszik. */
  .sec--o .fluentform form.frm-fluent-form .ff-el-input--label.ff-el-is-required label:after{
    color:var(--on,var(--ink))
  }
  .fluentform form.frm-fluent-form .ff-el-form-check-label{font-family:var(--body);font-size:.95rem;line-height:1.5}
  .fluentform form.frm-fluent-form .ff-el-form-check input[type=checkbox]{accent-color:var(--ink);width:1.2rem;height:1.2rem}
  .fluentform form.frm-fluent-form .error.text-danger,.fluentform form.frm-fluent-form .error-text{
    font-family:var(--mono);font-size:.72rem;color:var(--m-700);
  }
  .fluentform form.frm-fluent-form .ff-el-is-error .ff-el-form-control{border-color:var(--m-700)}
  /* Kuldes gomb - a .btn-nel hasznalt ertekek */
  .fluentform form.frm-fluent-form .ff-btn-submit,
  .fluentform form.frm-fluent-form button.ff-btn{
    font-family:var(--mono);font-size:.75rem;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;
    padding:.85rem 1.4rem;border:2px solid var(--ink);border-radius:0;
    background:var(--ink);color:var(--paper);box-shadow:none;cursor:pointer;
  }
  .fluentform form.frm-fluent-form .ff-btn-submit:hover,
  .fluentform form.frm-fluent-form button.ff-btn:hover{background:var(--a-700);border-color:var(--a-700);color:var(--paper)}
  /* Sikeres kuldes visszajelzese a .formok dobozzal egyezoen */
  .fluentform form.frm-fluent-form .ff-message-success{
    border:2px solid var(--ink);background:var(--y-500);color:var(--ink);
    padding:1.6rem 1.7rem;border-radius:0;
  }

  /* ============ FOOTER ============ */
  footer.site{background:var(--ink);color:var(--paper);padding:clamp(3rem,6vw,4.5rem) 0 2.2rem}
  footer.site a{color:var(--paper);text-decoration:none}
  footer.site a:hover{text-decoration:underline;text-underline-offset:3px}
  .fgrid{display:grid;grid-template-columns:1fr;gap:2.4rem;padding-bottom:2.6rem;border-bottom:1.5px solid rgba(250,250,247,.22)}
  @media(min-width:860px){.fgrid{grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:2.5rem}}
  .fcol h4{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.62;margin-bottom:.9rem}
  .fcol ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.5rem;font-size:.95rem}
  .fbrand p{font-size:.93rem;line-height:1.6;opacity:.85;margin-top:1.2rem;max-width:34ch}
  .fbot{display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;justify-content:space-between;padding-top:1.6rem;font-size:.8rem;opacity:.78}
  .flegal{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
  /* A sütibeállítás gomb, nem link: párbeszédet nyit, nem navigál.
     A megjelenése viszont egyezzen a szomszédos linkekkel. */
  .flegal .cookiegomb{
    font:inherit;color:inherit;background:none;border:0;padding:0;
    cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;
    text-underline-offset:3px;
  }
  .flegal .cookiegomb:hover{text-decoration-color:var(--a-500)}
  .flegal .cookiegomb:focus-visible{outline:3px solid var(--k-500);outline-offset:3px}

  /* ── Érintőfelületek mobilon ──────────────────────────────────────────
     A jelölőnégyzetek 19 px-esek voltak: fele az ajánlott 44 px-nek, pedig
     éppen ezek nélkül nem küldhető el az űrlap és nem adható le a rendelés. */
  @media(max-width:640px){
    .fluentform .ff-el-form-check,
    .wc-block-components-checkbox{
      padding-top:.55rem;
      padding-bottom:.55rem;
    }
    .fluentform .ff-el-form-check input[type="checkbox"],
    .fluentform .ff-el-form-check input[type="radio"]{
      width:22px;height:22px;
      margin-top:.1rem;
      flex:0 0 auto;
    }
    .wc-block-components-checkbox .wc-block-components-checkbox__input{
      width:22px;height:22px;
    }
  }
  .fsign{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em}

  .skip{position:absolute;left:-9999px}
  .skip:focus{left:1rem;top:1rem;z-index:99;background:var(--ink);color:var(--paper);padding:.7rem 1rem}
  a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--k-500);outline-offset:2px}
  h1[tabindex="-1"]:focus{outline:none}
  .sec--ink a:focus-visible,.sec--ink button:focus-visible{outline-color:var(--y-500)}
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

  /* ============ WP TARTALOM (the_content) ============ */
  .entry{font-size:1.05rem;line-height:1.7}
  .entry > *:first-child{margin-top:0}
  .entry h2{font-family:var(--display);font-stretch:75%;font-weight:700;font-variation-settings:"wdth" 75,"wght" 700;text-transform:uppercase;font-size:clamp(1.5rem,3.2vw,2.2rem);line-height:1.02;margin:2.4rem 0 .9rem}
  .entry h3{font-size:1.2rem;margin:2rem 0 .7rem}
  .entry h4{font-family:var(--mono);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;margin:1.8rem 0 .6rem}
  .entry ul,.entry ol{padding-left:1.4rem;margin:0 0 1.2rem}
  .entry li{margin-bottom:.45rem}
  .entry ul{list-style:none;padding-left:0}
  .entry ul li{padding-left:1.9rem;position:relative}
  .entry ul li::before{
    content:"";position:absolute;left:0;top:.28em;width:1.05rem;height:1.05rem;
    background-color:var(--a-500);
    -webkit-mask:var(--ast) center/contain no-repeat;mask:var(--ast) center/contain no-repeat;
  }
  .entry a{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--a-500)}
  .entry a:hover{background:var(--a-300)}
  .entry blockquote{margin:1.8rem 0;padding:0 0 0 1.4rem;border-left:6px solid var(--a-500);font-size:1.12rem}
  .entry blockquote p:last-child{margin-bottom:0}
  .entry img,.entry figure img,.entry video{max-width:100%;height:auto;border:2px solid var(--ink)}
  .entry figure{margin:2rem 0}
  .entry figcaption{font-family:var(--mono);font-size:.74rem;opacity:.75;margin-top:.5rem}
  .entry code{font-family:var(--mono);font-size:.9em;background:var(--paper-sh);padding:.1em .35em}
  .entry hr{border:0;border-top:2px solid var(--ink);margin:2.4rem 0}
  .entry table{margin:1.6rem 0;border:2px solid var(--ink)}

  /* ============ LAPOZÓ ============ */
  .navigation.pagination{width:100%}
  .nav-links{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
  .page-numbers{
    font-family:var(--mono);font-size:.78rem;font-weight:700;
    border:2px solid var(--ink);padding:.55rem .9rem;text-decoration:none;color:var(--ink);
  }
  .page-numbers:hover{background:var(--a-300)}
  .page-numbers.current{background:var(--ink);color:var(--paper)}

  /* ============ MINTA (háttér-textúra) ============ */
  /* Használat: tedd a .pat osztályt egy <section>-re. A minta a szekció mögé
     kerül, a tartalom fölé. Opacitást a --pat-op változóval állíts. */
  .pat{position:relative;isolation:isolate}
  .pat > *{position:relative;z-index:1}
  .pat::before{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background-image:url(assets/img/sc-pattern-subtle-transparent.svg);
    background-size:var(--pat-size,320px) var(--pat-size,320px);
    background-repeat:repeat;
    opacity:var(--pat-op,.16);
  }
  .pat--hero::before{background-image:url(assets/img/sc-pattern-hero-transparent.svg);--pat-op:.2}
  .pat--dense::before{background-image:url(assets/img/sc-pattern-dense-transparent.svg);--pat-op:.14;--pat-size:300px}

  /* Szín szerinti finomhangolás: sötét és telített alapokon kevesebb kell belőle. */
  .sec--ink.pat{--pat-op:.13;--pat-size:360px}
  .sec--o.pat,.sec--y.pat{--pat-op:.13}
  .sec--warm.pat,.sec--blush.pat{--pat-op:.2}

  /* Teljes erősségű minta - önálló dekor sávnak, nem szöveg mögé. */
  .patband{
    height:clamp(90px,12vw,150px);
    background-image:url(assets/img/sc-pattern-hero.svg);
    background-size:320px 320px;background-repeat:repeat;
    border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  }
  @media(prefers-reduced-motion:no-preference){}

  /* ============ LW COOKIE - a bannert az Élénk Tél nyelvére hangolva ============
     A plugin CSS-változóit írjuk felül, plusz néhány szerkezeti szabály. A
     `body` előtag azért kell, mert a plugin stílusa a témáé után tölt be. */
  :root{
    --lw-cookie-primary:var(--ink);
    --lw-cookie-text:var(--ink);
    --lw-cookie-bg:var(--paper-hi);
    --lw-cookie-radius:0;
    --lw-cookie-shadow:0 -2px 0 var(--ink);
  }

  /* --- alsó sáv --- */
  body .lw-cookie-notice{
    font-family:var(--body);
    font-size:.95rem;line-height:1.55;
    border-top:2px solid var(--ink);
    box-shadow:none;
  }
  body .lw-cookie-notice-inner{padding:1.3rem var(--gut)}
  body .lw-cookie-title{
    font-family:var(--display);font-stretch:75%;font-weight:700;
    font-variation-settings:"wdth" 75,"wght" 700;
    text-transform:uppercase;font-size:1.15rem;line-height:1.1;
    letter-spacing:-.01em;margin:0 0 .35rem;
  }
  body .lw-cookie-message{font-size:.92rem;line-height:1.55;opacity:.85}
  body .lw-cookie-message a{
    color:var(--ink);text-decoration:underline;
    text-decoration-thickness:2px;text-underline-offset:3px;
    text-decoration-color:var(--a-500);
  }

  /* --- gombok: ugyanaz a fokozat, mint a .btn-nél --- */
  body .lw-cookie-btn{
    font-family:var(--mono);font-size:.72rem;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;
    padding:.8rem 1.25rem;border:2px solid var(--ink);border-radius:0;
    box-shadow:none;transition:none;
  }
  body .lw-cookie-btn-primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  body .lw-cookie-btn-primary:hover{background:var(--a-700);border-color:var(--a-700);color:var(--paper)}
  body .lw-cookie-btn-secondary,
  body .lw-cookie-btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
  body .lw-cookie-btn-secondary:hover,
  body .lw-cookie-btn-outline:hover{background:var(--a-300);color:var(--ink);border-color:var(--ink)}
  body .lw-cookie-btn:focus-visible{outline:3px solid var(--k-500);outline-offset:2px}

  /* --- beállítások ablak --- */
  body .lw-cookie-modal{font-family:var(--body)}
  body .lw-cookie-modal-overlay{background:rgba(10,10,10,.62)}
  body .lw-cookie-modal-content{
    border:2px solid var(--ink);border-radius:0;
    box-shadow:10px 12px 0 rgba(10,10,10,.22);
    padding:1.8rem 1.7rem;
  }
  body .lw-cookie-modal-title{
    font-family:var(--display);font-stretch:75%;font-weight:700;
    font-variation-settings:"wdth" 75,"wght" 700;
    text-transform:uppercase;font-size:1.5rem;line-height:1.02;letter-spacing:-.012em;
  }
  body .lw-cookie-modal-close{
    border:2px solid var(--ink);border-radius:0;background:transparent;
    color:var(--ink);width:2rem;height:2rem;line-height:1;
  }
  body .lw-cookie-modal-close:hover{background:var(--ink);color:var(--paper)}

  /* --- kategóriák --- */
  body .lw-cookie-category{
    border-bottom:1.5px solid rgba(10,10,10,.16);
    padding:.9rem 0;
  }
  body .lw-cookie-category:last-child{border-bottom:0}
  body .lw-cookie-category-label{
    font-family:var(--body);font-weight:700;font-size:1rem;
  }
  body .lw-cookie-category-desc{font-size:.88rem;line-height:1.5;opacity:.8}
  body .lw-cookie-required{
    font-family:var(--mono);font-size:.62rem;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;opacity:.6;
  }
  body .lw-cookie-category input[type="checkbox"]{
    accent-color:var(--ink);width:1.15rem;height:1.15rem;
  }
  body .lw-cookie-modal-actions{
    border-top:2px solid var(--ink);padding-top:1.1rem;margin-top:1.2rem;
  }

  /* --- visszahívó lebegő gomb --- */
  body .lw-cookie-floating-btn{
    border:2px solid var(--ink);border-radius:0;
    background:var(--paper-hi);color:var(--ink);
    box-shadow:4px 5px 0 rgba(10,10,10,.18);
  }
  body .lw-cookie-floating-btn:hover{background:var(--a-300)}

  /* ============ WOOCOMMERCE AZ ÉLÉNK TÉL RENDSZERBEN ============
     Sablonfelülírás helyett CSS: a WooCommerce saját markupját öltöztetjük,
     így a plugin frissítései nem törik el a boltot, és nincs karbantartandó
     sablonmásolat. A body.woocommerce előtag azért kell, mert a Woo stílusa
     a témáé UTÁN tölt be. */

  /* --- fejrész, morzsa, rendezés --- */
  body.woocommerce .woocommerce-products-header__title,
  body.woocommerce h1.page-title,
  body.woocommerce .product_title{
    font-family:var(--display);font-stretch:75%;font-weight:700;
    font-variation-settings:"wdth" 75,"wght" 700;
    text-transform:uppercase;letter-spacing:-.015em;
    font-size:clamp(2rem,5vw,3.4rem);line-height:.96;margin:0 0 1.2rem;
  }
  body.woocommerce .woocommerce-breadcrumb{
    font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink);opacity:.62;margin:0 0 1.4rem;
  }
  body.woocommerce .woocommerce-breadcrumb a{
    color:var(--ink);text-decoration:none;border-bottom:2px solid var(--a-500);
  }
  body.woocommerce .woocommerce-result-count{
    font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
    text-transform:uppercase;opacity:.7;
  }
  body.woocommerce .woocommerce-ordering select,
  body.woocommerce select,
  body.woocommerce input[type="text"],
  body.woocommerce input[type="email"],
  body.woocommerce input[type="tel"],
  body.woocommerce input[type="password"],
  body.woocommerce input[type="number"],
  body.woocommerce textarea{
    font-family:var(--body);font-size:1rem;
    padding:.7rem .85rem;border:2px solid var(--ink);border-radius:0;
    background:var(--paper-hi);color:var(--ink);box-shadow:none;
  }
  body.woocommerce :is(select,input,textarea):focus{
    outline:3px solid var(--k-500);outline-offset:1px;border-color:var(--ink);
  }

  /* --- termékrács --- */
  body.woocommerce ul.products{
    display:grid;grid-template-columns:1fr;gap:2rem;
    margin:2.4rem 0 0;padding:0;list-style:none;
  }
  @media(min-width:640px){body.woocommerce ul.products{grid-template-columns:1fr 1fr}}
  @media(min-width:980px){body.woocommerce ul.products{grid-template-columns:repeat(3,1fr)}}
  body.woocommerce ul.products::before,
  body.woocommerce ul.products::after{display:none}
  /* A Woo .columns-N szabálya (0,4,2) erősebb a sima li.product-nál, ezért
     az attribútum-szelektorral megyünk fölé (0,4,3) - így tölti ki a sávot. */
  body.woocommerce ul.products[class*="columns-"] li.product,
  body.woocommerce ul.products li.product{
    width:100%;float:none;margin:0;padding:0;
    display:flex;flex-direction:column;gap:.6rem;text-align:left;
  }
  body.woocommerce ul.products li.product a img{
    display:block;width:100%;height:auto;
    border:2px solid var(--ink);background:var(--paper-sh);
    margin:0 0 .3rem;border-radius:0;box-shadow:none;
    transition:transform .5s ease;
  }
  @media(prefers-reduced-motion:no-preference){
    body.woocommerce ul.products li.product a:hover img{transform:scale(1.02)}
  }
  body.woocommerce ul.products li.product a:not(.button){text-decoration:none;color:var(--ink)}
  body.woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-family:var(--display);font-stretch:75%;font-weight:700;
    font-variation-settings:"wdth" 75,"wght" 700;text-transform:uppercase;
    font-size:1.08rem;line-height:1.08;padding:0;margin:0;color:var(--ink);
  }
  body.woocommerce ul.products li.product .price{
    font-family:var(--display);font-stretch:75%;font-weight:700;
    font-variation-settings:"wdth" 75,"wght" 700;
    font-size:1.3rem;line-height:1;color:var(--ink);margin:0;
  }
  body.woocommerce ul.products li.product .price del{opacity:.45;font-size:.8em;margin-right:.4rem}
  body.woocommerce ul.products li.product .price ins{text-decoration:none;background:var(--a-100);padding:0 .2em}
  /* Ingyenes: a szám helyén szó áll, ezért kap egy halk kiemelőt. */
  body.woocommerce .price--ingyenes{background:var(--y-500);color:var(--ink);padding:.05em .3em}
  /* A WooCommerce .price-e blokk (0,4,2), ezért a kiemelo kulon, magasabb
     specificitasu selectorral szukul a szoveghez. */
  body.woocommerce ul.products li.product .price.price--ingyenes,
  body.woocommerce div.product .price .price--ingyenes{display:inline-block;width:auto}
  body.woocommerce ul.products li.product .button{align-self:flex-start;margin-top:.2rem}
  body.woocommerce span.onsale{
    font-family:var(--mono);font-size:.62rem;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;
    background:var(--a-500);color:var(--ink);
    border-radius:0;min-height:0;min-width:0;line-height:1;
    padding:.4rem .6rem;top:.7rem;left:.7rem;right:auto;margin:0;
  }

  /* --- gombok: ugyanaz a fokozat, mint a .btn-nél --- */
  body.woocommerce .button,
  body.woocommerce a.button,
  body.woocommerce button.button,
  body.woocommerce input.button,
  body.woocommerce .woocommerce-button,
  body.woocommerce #respond input#submit{
    font-family:var(--mono);font-size:.72rem;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;
    padding:.85rem 1.35rem;border:2px solid var(--ink);border-radius:0;
    background:var(--ink);color:var(--paper);
    box-shadow:none;line-height:1.2;
  }
  body.woocommerce .button:hover,
  body.woocommerce a.button:hover,
  body.woocommerce button.button:hover,
  body.woocommerce input.button:hover,
  body.woocommerce .woocommerce-button:hover{
    background:var(--a-700);border-color:var(--a-700);color:var(--paper);
  }
  body.woocommerce .button.alt,
  body.woocommerce button.button.alt{background:var(--a-500);border-color:var(--a-500);color:var(--ink)}
  body.woocommerce .button.alt:hover,
  body.woocommerce button.button.alt:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
  body.woocommerce .added_to_cart{
    font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
    color:var(--ink);border-bottom:2px solid var(--a-500);text-decoration:none;
  }

  /* --- egy termék oldala --- */
  body.woocommerce div.product{display:grid;gap:2.6rem}
  @media(min-width:900px){
    body.woocommerce div.product{grid-template-columns:5fr 6fr;align-items:start}
    body.woocommerce div.product .woocommerce-product-gallery{width:auto;float:none;margin:0}
    body.woocommerce div.product .summary{width:auto;float:none;margin:0}
    body.woocommerce div.product .woocommerce-tabs,
    body.woocommerce div.product .related,
    body.woocommerce div.product .upsells{grid-column:1/-1}
  }
  body.woocommerce div.product .woocommerce-product-gallery img{
    border:2px solid var(--ink);background:var(--paper-sh);
  }
  body.woocommerce div.product p.price,
  body.woocommerce div.product span.price{
    font-family:var(--display);font-stretch:75%;font-weight:700;
    font-variation-settings:"wdth" 75,"wght" 700;
    font-size:2rem;line-height:1;color:var(--ink);
    border-top:2px solid var(--ink);padding-top:.9rem;margin:1.2rem 0;
  }
  body.woocommerce div.product .woocommerce-product-details__short-description{
    font-size:1.02rem;line-height:1.6;max-width:56ch;
  }
  body.woocommerce .quantity .qty{
    width:5rem;text-align:center;
    border:2px solid var(--ink);border-radius:0;padding:.7rem .4rem;
  }
  body.woocommerce div.product form.cart{
    display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;margin:1.4rem 0;
  }

  /* --- fülek és kapcsolódó termékek --- */
  body.woocommerce div.product .woocommerce-tabs ul.tabs{
    padding:0;margin:0 0 1.4rem;display:flex;flex-wrap:wrap;gap:.5rem;
  }
  body.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
  body.woocommerce div.product .woocommerce-tabs ul.tabs li{
    background:transparent;border:2px solid var(--ink);border-radius:0;
    margin:0;padding:0;box-shadow:none;
  }
  body.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
  body.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
  body.woocommerce div.product .woocommerce-tabs ul.tabs li a{
    font-family:var(--mono);font-size:.68rem;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;
    padding:.7rem 1rem;color:var(--ink);
  }
  body.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--ink)}
  body.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--paper)}
  body.woocommerce div.product .related > h2,
  body.woocommerce div.product .upsells > h2,
  body.woocommerce div.product .woocommerce-tabs h2{
    font-family:var(--display);font-stretch:75%;font-weight:700;
    font-variation-settings:"wdth" 75,"wght" 700;text-transform:uppercase;
    font-size:1.6rem;line-height:1;margin:0 0 1.2rem;
  }

  /* --- táblázatok: kosár, pénztár, fiók --- */
  body.woocommerce table.shop_table,
  body.woocommerce table.shop_attributes{
    border:2px solid var(--ink);border-radius:0;border-collapse:collapse;
    background:var(--paper-hi);
  }
  body.woocommerce table.shop_table th{
    font-family:var(--mono);font-size:.66rem;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;
    background:var(--ink);color:var(--paper);border:0;padding:.8rem 1rem;
  }
  body.woocommerce table.shop_table td{
    border-top:1.5px solid rgba(10,10,10,.16);padding:.9rem 1rem;
  }
  body.woocommerce table.shop_table .product-name a{color:var(--ink);font-weight:600}
  body.woocommerce .cart_totals h2,
  body.woocommerce #order_review_heading,
  body.woocommerce-checkout h3{
    font-family:var(--display);font-stretch:75%;font-weight:700;
    font-variation-settings:"wdth" 75,"wght" 700;text-transform:uppercase;
    font-size:1.4rem;line-height:1;margin:0 0 1rem;
  }
  body.woocommerce .cart-collaterals .cart_totals{border:0}

  /* --- értesítések --- */
  body.woocommerce .woocommerce-message,
  body.woocommerce .woocommerce-info,
  body.woocommerce .woocommerce-error{
    border:2px solid var(--ink);border-radius:0;
    background:var(--paper-hi);color:var(--ink);
    font-size:.95rem;padding:1rem 1.2rem;list-style:none;
  }
  body.woocommerce .woocommerce-message{background:var(--y-100)}
  body.woocommerce .woocommerce-error{background:var(--m-100)}
  body.woocommerce .woocommerce-message::before,
  body.woocommerce .woocommerce-info::before,
  body.woocommerce .woocommerce-error::before{display:none}
  body.woocommerce .woocommerce-message .button,
  body.woocommerce .woocommerce-info .button{padding:.55rem .9rem;font-size:.66rem}

  /* --- lapozó --- */
  body.woocommerce nav.woocommerce-pagination ul{border:0;display:flex;gap:.5rem;flex-wrap:wrap}
  body.woocommerce nav.woocommerce-pagination ul li{border:0;margin:0}
  body.woocommerce nav.woocommerce-pagination ul li a,
  body.woocommerce nav.woocommerce-pagination ul li span{
    font-family:var(--mono);font-size:.72rem;font-weight:700;
    border:2px solid var(--ink);padding:.55rem .85rem;
    color:var(--ink);background:transparent;
  }
  body.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--ink);color:var(--paper)}
  body.woocommerce nav.woocommerce-pagination ul li a:hover{background:var(--a-300)}

  /* --- fiók --- */
  body.woocommerce-account .woocommerce-MyAccount-navigation ul{
    list-style:none;margin:0;padding:0;display:grid;gap:.4rem;
  }
  body.woocommerce-account .woocommerce-MyAccount-navigation li a{
    display:block;font-family:var(--mono);font-size:.7rem;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;
    border:2px solid var(--ink);padding:.6rem .8rem;color:var(--ink);text-decoration:none;
  }
  body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
    background:var(--ink);color:var(--paper);
  }

  /* ============ WOOCOMMERCE BLOCKS: kosár és pénztár ============
     A Kosár és a Pénztár a Woo blokkos (React) változata, teljesen más
     markuppal, mint a klasszikus shop_table - ezért kell külön szakasz.
     A .wc-block-* osztályok futásidőben kerülnek a DOM-ba. */

  /* --- gombok --- */
  body .wc-block-components-button,
  body .wc-block-cart__submit-button,
  body .wc-block-components-checkout-place-order-button{
    font-family:var(--mono);font-size:.75rem;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;
    background:var(--ink);color:var(--paper);
    border:2px solid var(--ink);border-radius:0;
    padding:.95rem 1.4rem;box-shadow:none;min-height:0;
  }
  body .wc-block-components-button .wc-block-components-button__text,
  body .wc-block-cart__submit-button .wc-block-components-button__text{color:var(--paper)}
  body .wc-block-components-button:hover,
  body .wc-block-cart__submit-button:hover,
  body .wc-block-components-checkout-place-order-button:hover{
    background:var(--a-700);border-color:var(--a-700);color:var(--paper);
  }
  body .wc-block-components-button:focus-visible{outline:3px solid var(--k-500);outline-offset:2px}
  body .wc-block-components-button,
  body .wc-block-cart__submit-button{text-decoration:none}
  body .wc-block-components-button__text{text-decoration:none;border:0}

  /* A kosár és a pénztár szélesebb szedéstükröt kap, mint egy szöveges oldal:
     a tételsor, az összegzés és az űrlap egymás mellett is elfér. */
  body.woocommerce-cart .hero--center > .wrap--narrow,
  body.woocommerce-checkout .hero--center > .wrap--narrow{max-width:1000px}
  body.woocommerce-cart .band > .wrap--narrow,
  body.woocommerce-checkout .band > .wrap--narrow{max-width:1180px}

  /* A page.php a tartalmat .entry.prose-ba teszi, aminek 64ch a szedéstükre.
     A kosár- és pénztárblokk így 616px-en maradt, a WooCommerce pedig csak
     700px fölött kapcsol kétoszlopos módra - és amíg egyoszlopos, kétszer
     rajzolja ki a rendelés összesítőt (fent összecsukhatóan, lent oldalsávban).
     A méretkorlát feloldásával mindkettő megoldódik. */
  body.woocommerce-cart .entry.prose,
  body.woocommerce-checkout .entry.prose{max-width:none}
  body .wp-block-woocommerce-cart,
  body .wp-block-woocommerce-checkout{max-width:none;width:100%}

  /* --- tételsor --- */
  body .wc-block-cart-items__header{
    font-family:var(--mono);font-size:.64rem;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;
    background:var(--ink);color:var(--paper);
    border:0;padding:.7rem .9rem;
  }
  body .wc-block-cart-items__header th{color:var(--paper);border:0;padding:.2rem .4rem}
  body .wc-block-cart-items{border:2px solid var(--ink);background:var(--paper-hi)}
  body .wc-block-cart-items__row{border-bottom:1.5px solid rgba(10,10,10,.16)}
  body .wc-block-cart-items__row td{padding:1rem .9rem}
  /* A WooCommerce Blocks a kepcellanak 0 bal paddingot ad, ezert a termek
     a tablazat szelehez tapadt. A fejlec elso cellaja ugyanezt kapja, hogy
     a „TERMEK" felirat es a kepek egy vonalban alljanak. */
  body .wc-block-cart-items__row .wc-block-cart-item__image,
  body .wc-block-cart-items__header th:first-child{padding-left:1.15rem}
  body .wc-block-cart-items__row td:last-child,
  body .wc-block-cart-items__header th:last-child{padding-right:1.15rem}
  /* Keskeny nezetben a Woo `.is-mobile`/`.is-medium` osztalyt tesz a blokkra,
     es nullazza a cellak paddingjat - ott kulon kell kerni a terkozt. */
  body .is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image,
  body .is-medium table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image{
    padding-left:1rem
  }
  body .is-mobile table.wc-block-cart-items .wc-block-cart-items__row,
  body .is-medium table.wc-block-cart-items .wc-block-cart-items__row{padding-right:1rem}
  /* A tema altalanos `table{min-width:460px}` szabalya keskeny kepernyon
     kitolna a kosarat. A WooCommerce blokkok sajat mobil elrendezest
     hoznak (.is-mobile), ezert itt a minimum szelesseg feloldando. */
  body .wp-block-woocommerce-cart table,
  body .wc-block-checkout table{min-width:0}
  body .wc-block-cart-item__image img{
    border:2px solid var(--ink);background:var(--paper-sh);border-radius:0;
  }
  /* A WooCommerce a kepet a cellara feszíti (width:100%), ezert a cella bal
     paddingja zsugoritana. Ez a szelektor eppen egy fokkal erősebb annal. */
  body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img{
    width:64px;max-width:none;height:auto;
  }
  body .wc-block-components-product-name{
    font-family:var(--display);font-stretch:75%;font-weight:700;
    font-variation-settings:"wdth" 75,"wght" 700;text-transform:uppercase;
    font-size:1rem;line-height:1.1;color:var(--ink);text-decoration:none;
  }
  body .wc-block-components-product-name:hover{text-decoration:underline;text-underline-offset:3px}
  body .wc-block-components-product-price__value,
  body .wc-block-components-formatted-money-amount{
    font-family:var(--display);font-stretch:75%;font-weight:700;
    font-variation-settings:"wdth" 75,"wght" 700;
    color:var(--ink);font-variant-numeric:tabular-nums;
  }
  body .wc-block-cart-item__remove-link{
    font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink);opacity:.7;
  }
  body .wc-block-cart-item__remove-link:hover{opacity:1;color:var(--m-700)}
  body .wc-block-components-quantity-selector{border:2px solid var(--ink);border-radius:0}
  body .wc-block-components-quantity-selector__input{font-family:var(--body);color:var(--ink)}
  body .wc-block-components-quantity-selector__button{color:var(--ink)}

  /* --- összegzés oldalt --- */
  /* A .wc-block-cart__sidebar ES a .wc-block-components-sidebar ugyanazon az
     elemen ul, ezert nem leszarmazottkent celozzuk. A keret magara az
     osszesito blokkra kerul - a "Tovabb a penztarhoz" gomb a dobozon kivul
     marad, ahogy a penztarnal is. */
  body .wp-block-woocommerce-cart-order-summary-block,
  body .wc-block-components-checkout-order-summary{
    border:2px solid var(--ink);background:var(--paper-hi);
    border-radius:0;padding:1.3rem 1.25rem;
  }
  body .wc-block-cart__sidebar,
  body .wc-block-checkout__sidebar{display:grid;gap:1rem;align-content:start}
  body .wc-block-cart__totals-title,
  body .wc-block-components-totals-item__label{
    font-family:var(--mono);font-size:.66rem;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  }
  body .wc-block-components-totals-footer-item{
    border-top:2px solid var(--ink);padding-top:.9rem;margin-top:.6rem;
  }
  body .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
    font-family:var(--display);font-stretch:75%;font-weight:700;
    font-variation-settings:"wdth" 75,"wght" 700;font-size:1.5rem;
  }
  body .wc-block-components-panel__button{
    font-family:var(--mono);font-size:.68rem;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  }

  /* --- űrlapmezők a pénztárban --- */
  body .wc-block-components-text-input input,
  body .wc-block-components-form input,
  body .wc-block-components-address-form input,
  body .wc-block-components-combobox input,
  body .wc-block-components-textarea{
    font-family:var(--body);font-size:1rem;
    border:2px solid var(--ink);border-radius:0;
    background:var(--paper-hi);color:var(--ink);box-shadow:none;
    padding:.85rem .85rem .35rem;
  }
  body .wc-block-components-text-input.is-active label,
  body .wc-block-components-text-input label{
    font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink);opacity:.72;
  }
  body .wc-block-components-text-input input:focus{
    outline:3px solid var(--k-500);outline-offset:1px;border-color:var(--ink);
  }
  body .wc-block-components-checkout-step__title,
  body .wc-block-components-checkout-order-summary__title-text,
  body .wc-block-components-title{
    font-family:var(--display);font-stretch:75%;font-weight:700;
    font-variation-settings:"wdth" 75,"wght" 700;text-transform:uppercase;
    font-size:1.25rem;line-height:1.05;color:var(--ink);letter-spacing:-.008em;
  }
  body .wc-block-components-checkout-step{border:0;padding-left:0}
  body .wc-block-components-checkout-step__heading{margin-top:0}

  /* --- értesítések, üres kosár --- */
  body .wc-block-components-notice-banner{
    border:2px solid var(--ink);border-radius:0;
    background:var(--y-100);color:var(--ink);
    font-family:var(--body);font-size:.95rem;
  }
  body .wc-block-components-notice-banner.is-error{background:var(--m-100)}
  body .wc-block-cart__empty-cart__title{
    font-family:var(--display);font-stretch:75%;font-weight:700;
    font-variation-settings:"wdth" 75,"wght" 700;text-transform:uppercase;
    font-size:1.6rem;color:var(--ink);
  }

  /* ============ MORZSAMENÜ ============
     Vékony sáv a fejléc alatt, a hero fölött. Mono, verzál, halkan - a
     navigáció nem versenyez a címsorral. A Rank Math és a tartalék markup
     is ugyanazt a képet adja. */
  .crumbs{
    background:var(--paper);
    border-bottom:2px solid var(--ink);
    padding:.75rem 0;
    font-family:var(--mono);
    font-size:.64rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    line-height:1.6;
  }
  .crumbs .wrap{display:flex;flex-wrap:wrap;gap:.1rem .55rem;align-items:baseline}
  .crumbs a,
  .crumbs .separator,
  .crumbs .sep,
  .crumbs span{color:var(--ink)}
  .crumbs a{
    text-decoration:none;
    opacity:.72;
    border-bottom:2px solid transparent;
    padding-bottom:1px;
  }
  .crumbs a:hover{opacity:1;border-bottom-color:var(--a-500)}
  .crumbs a:focus-visible{outline:3px solid var(--k-500);outline-offset:2px}
  /* az aktuális oldal: teljes erő, nem link */
  .crumbs [aria-current="page"],
  .crumbs .last{opacity:1;font-weight:700}
  .crumbs .separator,
  .crumbs .sep{opacity:.38}

  /* A Rank Math sima szövegcsomópontként adja az elválasztót; a flex-gap
     miatt így is levegőt kap. Hosszú címnél ne törjön ki a sávból. */
  .crumbs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .crumbs .wrap{min-width:0}

  @media(max-width:520px){
    .crumbs{padding:.6rem 0;font-size:.6rem}
  }


  /* ==================================================================
     MOBIL-JAVÍTÁSOK
     A fájl végén, hogy a korábbi szabályokat felülírják.
     ================================================================== */
  /* ── Jogi oldalak táblázatai mobilon ──────────────────────────────────
     Az adatkezelési tájékoztató és az impresszum táblázatai 460-496 px
     szélesek, a telefon 375. Vízszintes görgetés helyett soronként törjük
     őket: az első cella a megnevezés, a többi a saját fejléccímkéjével
     (data-cimke) jelenik meg. */
  /* A kosar es a penztar sajat tablaelrendezest hasznal (WooCommerce
     Blocks), ezert kimarad: kulonben ez a szabaly szetszedne a sorait. */
  @media(max-width:640px){
    body:not(.woocommerce-cart):not(.woocommerce-checkout) .entry.prose table,
    body:not(.woocommerce-cart):not(.woocommerce-checkout) .entry.prose tbody,
    body:not(.woocommerce-cart):not(.woocommerce-checkout) .entry.prose tr,
    body:not(.woocommerce-cart):not(.woocommerce-checkout) .entry.prose td{display:block;width:auto;max-width:100%}
    body:not(.woocommerce-cart):not(.woocommerce-checkout) .entry.prose thead{display:none}
    body:not(.woocommerce-cart):not(.woocommerce-checkout) .entry.prose table{border:0;min-width:0}
    body:not(.woocommerce-cart):not(.woocommerce-checkout) .entry.prose tr{
      border:2px solid var(--line);
      margin:0 0 .9rem;
      padding:.7rem .9rem;
      background:var(--paper-hi);
    }
    body:not(.woocommerce-cart):not(.woocommerce-checkout) .entry.prose td{border:0;padding:0}
    body:not(.woocommerce-cart):not(.woocommerce-checkout) .entry.prose td + td{margin-top:.5rem}
    body:not(.woocommerce-cart):not(.woocommerce-checkout) .entry.prose td:first-child{
      font-family:var(--mono);
      font-size:.76rem;
      letter-spacing:.1em;
      text-transform:uppercase;
      color:var(--mute);
      margin-bottom:.15rem;
    }
    body:not(.woocommerce-cart):not(.woocommerce-checkout) .entry.prose td[data-cimke]::before{
      content:attr(data-cimke);
      display:block;
      font-family:var(--mono);
      font-size:.62rem;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:var(--mute);
      margin-bottom:.1rem;
    }
  }

  /* ── Lábléc-linkek érintőfelülete ─────────────────────────────────────
     A lábléc menüpontjai 16 px magasak voltak: egymás alatt, ujjal
     alig eltalálhatók. A padding a sormagasságot viszi 44 px közelébe. */
  @media(max-width:640px){
    .fcol li{margin:0}
    .fcol a,
    .flegal a,
    .flegal .cookiegomb{
      display:inline-block;
      padding-top:.62rem;
      padding-bottom:.62rem;
    }
  }

  /* ── Morzsamenü mobilon ───────────────────────────────────────────────
     9,6 px-es szöveg és 17 px-es linkmagasság: olvashatatlanul kicsi. */
  @media(max-width:520px){
    .crumbs{font-size:.7rem;padding:.55rem 0}
    .crumbs a,
    .crumbs [aria-current="page"],
    .crumbs .last{display:inline-block;padding:.3rem 0}
  }

  /* A mobilmenü csoportcímkéi 9,92 px-esek voltak. */
  /* A mobilmenü csoportcímkéi és a kártyák meta-sora 9,9 px-esek voltak. */
  @media(max-width:900px){
    .mobnav .grp{font-size:.72rem;opacity:.75}
  }
  @media(max-width:640px){
    .proj .meta{font-size:.72rem;opacity:.8}
    /* A kártyák „Elolvasom→” linkje 29 px magas volt: kap függőleges teret. */
    .proj .arrowlink,
    .tint .arrowlink{padding-top:.5rem;padding-bottom:.5rem}
  }

  /* A sütisáv doboza 419 px széles volt a 375 px-es kijelzőn: a szélei
     lelógtak. A bővítmény saját szélessége helyett a kijelzőhöz igazítjuk. */
  @media(max-width:640px){
    .lw-cookie-notice-inner,
    .lw-cookie-content,
    .lw-cookie-actions{max-width:100%;box-sizing:border-box}
    .lw-cookie-notice-inner{padding-left:1rem;padding-right:1rem}
  }

  /* ── Vissza a lap tetejére ────────────────────────────────────────────
     Jobb alsó sarok, a design nyelvén: fekete négyzet, kemény eltolt
     árnyékkal. Csak görgetés után jelenik meg, és amíg a sütisáv látszik,
     fölé emelkedik, hogy ne takarja a gombjait. */
  .fel{
    position:fixed;
    right:clamp(.9rem,3vw,1.7rem);
    bottom:calc(clamp(.9rem,3vw,1.7rem) + var(--sav-magassag, 0px));
    z-index:60;
    width:52px;height:52px;
    display:grid;place-items:center;
    background:var(--ink);color:var(--paper);
    border:2px solid var(--ink);
    box-shadow:5px 6px 0 rgba(10,10,10,.22);
    font-size:1.25rem;line-height:1;
    cursor:pointer;
    transition:transform .16s ease, background-color .16s ease, bottom .2s ease;
  }
  .fel[hidden]{display:none}
  .fel:hover{
    background:var(--a-500);border-color:var(--a-500);
    transform:translate(-2px,-2px);
    box-shadow:7px 8px 0 rgba(10,10,10,.24);
  }
  .fel:focus-visible{outline:3px solid var(--k-500);outline-offset:3px}
  @media(max-width:520px){
    .fel{width:46px;height:46px;font-size:1.1rem}
  }
  @media (prefers-reduced-motion:reduce){
    .fel{transition:none}
    .fel:hover{transform:none}
  }

  /* ---------------------------------------------------------------------
     Ügyfélasszisztens
     A sütisáv fölé emelkedik, ugyanúgy, mint a „vissza a tetejére" gomb.
     --------------------------------------------------------------------- */
  .asz-nyit{
    position:fixed;
    left:clamp(.9rem,3vw,1.7rem);
    /* A sutikezelo lebego gombja bal alul ul (20px + 48px magas), ezert
       az asszisztens gombja fole kerul - kulonben fedik egymast. */
    bottom:calc(5rem + var(--sav-magassag,0px));
    z-index:60;
    display:inline-flex;align-items:center;gap:.55rem;
    padding:.7rem 1.1rem;
    border:2px solid var(--ink);background:var(--ink);color:var(--paper);
    font-family:var(--mono);font-size:.72rem;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
    box-shadow:4px 4px 0 var(--a-500);
    transition:transform .12s ease,box-shadow .12s ease
  }
  .asz-nyit:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--a-500)}
  .asz-nyit__ikon{
    display:grid;place-items:center;width:1.35rem;height:1.35rem;
    border:2px solid var(--paper);border-radius:50%;
    font-size:.72rem;line-height:1
  }

  .asz{
    position:fixed;
    left:clamp(.9rem,3vw,1.7rem);
    bottom:calc(clamp(.9rem,3vw,1.7rem) + var(--sav-magassag,0px));
    z-index:999999;
    width:min(380px,calc(100vw - 2 * clamp(.9rem,3vw,1.7rem)));
    max-height:min(620px,calc(100vh - 3rem));
    display:flex;flex-direction:column;
    background:var(--paper-hi);border:2px solid var(--ink);
    box-shadow:6px 6px 0 var(--a-500)
  }
  .asz__fej{
    display:flex;align-items:center;justify-content:space-between;gap:.6rem;
    padding:.75rem .9rem;border-bottom:2px solid var(--ink);background:var(--ink)
  }
  .asz__cim{
    margin:0;color:var(--paper);font-family:var(--mono);
    font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase
  }
  .asz__bezar{
    border:0;background:none;color:var(--paper);
    font-size:1.4rem;line-height:1;cursor:pointer;padding:0 .25rem
  }
  .asz__jog{
    padding:.6rem .9rem;border-bottom:2px solid var(--line);background:var(--paper-warm)
  }
  .asz__jog p{margin:0;font-size:.7rem;line-height:1.5;opacity:.85}
  .asz__jog a{color:inherit}

  .asz__folyam{
    flex:1 1 auto;overflow-y:auto;padding:.9rem;
    display:flex;flex-direction:column;gap:.6rem;min-height:9rem
  }
  .asz__sor p{
    margin:0;padding:.6rem .8rem;font-size:.88rem;line-height:1.55;
    border:2px solid var(--ink);max-width:88%;white-space:pre-wrap
  }
  .asz__sor--bot p{background:var(--paper);align-self:flex-start}
  .asz__sor--en{display:flex;justify-content:flex-end}
  .asz__sor--en p{background:var(--a-100)}
  .asz__sor.is-hiba p{background:var(--o-100);border-color:var(--o-700)}

  .asz__sor--var p{display:flex;gap:.28rem;align-items:center;padding:.75rem .8rem}
  .asz__sor--var span{
    width:.4rem;height:.4rem;background:var(--ink);border-radius:50%;
    animation:aszPont 1.1s infinite ease-in-out
  }
  .asz__sor--var span:nth-child(2){animation-delay:.16s}
  .asz__sor--var span:nth-child(3){animation-delay:.32s}
  @keyframes aszPont{0%,80%,100%{opacity:.25}40%{opacity:1}}

  .asz__urlap{display:flex;gap:0;border-top:2px solid var(--ink)}
  .asz__urlap textarea{
    flex:1 1 auto;border:0;padding:.75rem .9rem;resize:none;
    font-family:var(--body);font-size:.88rem;line-height:1.5;
    background:var(--paper-hi);color:var(--ink);max-height:120px
  }
  .asz__urlap textarea:focus{outline:2px solid var(--a-500);outline-offset:-2px}
  .asz__kuld{
    flex:0 0 auto;width:3rem;border:0;border-left:2px solid var(--ink);
    background:var(--ink);color:var(--paper);font-size:1.1rem;cursor:pointer
  }
  .asz__kuld:disabled{opacity:.45;cursor:default}
  .asz__lab{
    margin:0;padding:.5rem .9rem;border-top:2px solid var(--line);
    font-family:var(--mono);font-size:.62rem;letter-spacing:.04em;opacity:.7
  }

  /* Nyitott panel mellett a nyitógomb és a sütikezelő lebegő gombja is
     elbújik, hogy ne lógjanak a beszélgetés fölé. */
  body.asz-nyitva .asz-nyit,
  body.asz-nyitva .lw-cookie-floating-btn{display:none}

  @media(max-width:520px){
    .asz{
      left:0;right:0;bottom:0;width:100%;
      max-height:min(78vh,600px);border-left:0;border-right:0;border-bottom:0;
      box-shadow:0 -2px 0 var(--ink)
    }
    .asz-nyit__cimke{display:none}
    .asz-nyit{padding:.7rem;border-radius:0}
    .asz{z-index:999999}
  }
  @media (prefers-reduced-motion:reduce){
    .asz-nyit{transition:none}
    .asz-nyit:hover{transform:none}
    .asz__sor--var span{animation:none;opacity:.6}
  }

  /* ============ ÜGYFÉLVÉLEMÉNYEK ============
     Idézőjel helyett a márka asterisk-je nyit; a kártya ugyanaz a 2px
     tintakeret, mint mindenhol. Nincs rá Review-séma: a Google-ről átemelt
     értékelést a saját oldalon nem szabad sajátként megjelölni. */
  .velemenyek{display:grid;grid-template-columns:1fr;gap:1.2rem;margin-top:2.2rem}
  @media(min-width:760px){.velemenyek{grid-template-columns:repeat(2,1fr)}}
  @media(min-width:1040px){.velemenyek{grid-template-columns:repeat(3,1fr)}}

  .velemeny{
    margin:0;padding:1.5rem 1.4rem 1.3rem;
    border:2px solid var(--ink);background:var(--paper-hi);
    display:flex;flex-direction:column;gap:.85rem;position:relative
  }
  .velemeny::before{
    content:"";position:absolute;top:-11px;left:1.3rem;
    width:22px;height:22px;background:var(--paper-hi);
    -webkit-mask:var(--ast) center/contain no-repeat;
    mask:var(--ast) center/contain no-repeat;
    background-color:var(--a-500)
  }
  .velemeny__csillag{
    font-size:.95rem;letter-spacing:.12em;color:var(--y-700);line-height:1
  }
  .velemeny blockquote{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:.6rem}
  .velemeny blockquote p{margin:0;font-size:.95rem;line-height:1.6}
  .velemeny__kiemel{
    font-family:var(--display);font-stretch:75%;font-weight:700;
    font-variation-settings:"wdth" 75,"wght" 700;
    font-size:1.12rem;line-height:1.15;text-transform:uppercase
  }
  .velemeny__ki{
    margin-top:auto;padding-top:.9rem;border-top:1.5px solid var(--line);
    display:flex;flex-direction:column;gap:.15rem
  }
  .velemeny__nev{font-weight:700;font-size:.9rem}
  .velemeny__ceg{font-size:.82rem;opacity:.75}
  .velemeny__forras{
    font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
    text-transform:uppercase;opacity:.7;margin-top:.25rem
  }
  .velemeny__forras a{color:inherit}

  /* Google-cimke. Szandekosan NEM a Google logojat hasznaljuk (vedjegy),
     hanem a tema sajat jelvenyet a negy markaszinnel utalva ra. */
  .gjel{
    display:inline-flex;align-items:center;gap:.4rem;
    border:1.5px solid var(--line);padding:.18rem .45rem;
    font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;
    text-transform:uppercase;text-decoration:none;color:var(--ink);
    background:var(--paper);vertical-align:middle
  }
  a.gjel:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  a.gjel:hover .gjel__pont{outline:1px solid var(--paper)}
  .gjel__pont{
    width:.6rem;height:.6rem;border-radius:50%;flex:0 0 auto;
    background:conic-gradient(#4285F4 0 25%,#EA4335 0 50%,#FBBC05 0 75%,#34A853 0)
  }

  /* Ellenorizheto hivatkozas a cegprofilra, a lista alatt. */
  .velemeny__ellenoriz{margin:1.6rem 0 0;text-align:center}
  .velemeny__ellenoriz a{
    display:inline-flex;align-items:center;gap:.55rem;
    font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
    color:var(--ink);text-decoration:none;
    border-bottom:2px solid var(--a-500);padding-bottom:.2rem
  }
  .velemeny__ellenoriz a:hover{border-bottom-color:var(--ink)}

  /* ============ BLOGRENDSZER ============
     Kereso, lapozo, cikknavigacio, hozzaszolasok. Minden a megszokott
     2px tintakerettel es eles sarokkal. */

  /* --- Kereso --- */
  .kereso{display:flex;border:2px solid var(--ink);background:var(--paper-hi)}
  .kereso input[type=search]{
    flex:1 1 auto;min-width:0;border:0;background:transparent;
    padding:.85rem 1rem;font-family:var(--body);font-size:.95rem;color:var(--ink)
  }
  .kereso input[type=search]:focus{outline:2px solid var(--a-500);outline-offset:-2px}
  .kereso input[type=search]::-webkit-search-cancel-button{cursor:pointer}
  .kereso__gomb{
    flex:0 0 auto;width:3.2rem;border:0;border-left:2px solid var(--ink);
    background:var(--ink);color:var(--paper);font-size:1.05rem;cursor:pointer
  }
  .kereso__gomb:hover{background:var(--a-700)}

  /* --- Kategoriaszuro: a gombok most valodi linkek --- */
  a.filter{text-decoration:none;display:inline-flex;align-items:center}
  a.filter[aria-current=page]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

  /* --- Lapozo --- */
  .lapozo{margin-top:2.6rem}
  .lapozo .nav-links{
    display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:center
  }
  .lapozo .page-numbers{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:2.6rem;height:2.6rem;padding:0 .7rem;
    border:2px solid var(--line);background:var(--paper-hi);color:var(--ink);
    font-family:var(--mono);font-size:.76rem;text-decoration:none
  }
  .lapozo .page-numbers:hover{background:var(--a-300);border-color:var(--ink)}
  .lapozo .page-numbers.current{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .lapozo .page-numbers.dots{border-color:transparent;background:none}
  .lapozo .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

  /* --- A cikk temacimkei --- */
  .cikk-katok{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:0}
  .cikk-katok .eyebrow{margin-right:.3rem}

  /* --- Elozo / kovetkezo cikk --- */
  .cikknav{display:grid;grid-template-columns:1fr;gap:1rem}
  @media(min-width:700px){.cikknav{grid-template-columns:1fr 1fr}}
  .cikknav__elem{
    display:flex;flex-direction:column;gap:.4rem;
    border:2px solid var(--ink);background:var(--paper-hi);
    padding:1rem 1.1rem;text-decoration:none;color:var(--ink);
    transition:transform .12s ease,box-shadow .12s ease
  }
  .cikknav__elem:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--a-500)}
  .cikknav__elem--jobb{text-align:right;align-items:flex-end}
  .cikknav__cimke{
    font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
    text-transform:uppercase;opacity:.7
  }
  .cikknav__cim{
    font-family:var(--display);font-stretch:75%;font-weight:700;
    font-variation-settings:"wdth" 75,"wght" 700;
    font-size:1.02rem;line-height:1.15;text-transform:uppercase
  }
  @media (prefers-reduced-motion:reduce){
    .cikknav__elem{transition:none}
    .cikknav__elem:hover{transform:none}
  }

  /* --- Hozzaszolasok --- */
  .hsz{list-style:none;margin:0 0 2rem;padding:0;display:flex;flex-direction:column;gap:1.1rem}
  .hsz .children{list-style:none;margin:1.1rem 0 0 1.2rem;padding-left:1.2rem;border-left:2px solid var(--line);display:flex;flex-direction:column;gap:1.1rem}
  .hsz .comment-body{border:2px solid var(--ink);background:var(--paper-hi);padding:1.1rem 1.2rem}
  .hsz .comment-author{display:flex;align-items:center;gap:.7rem;margin-bottom:.6rem}
  .hsz .comment-author img{border:2px solid var(--ink);display:block}
  .hsz .comment-author .fn{font-weight:700;font-style:normal;font-size:.92rem}
  .hsz .comment-metadata{
    font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
    text-transform:uppercase;opacity:.7;margin-bottom:.6rem
  }
  .hsz .comment-metadata a{color:inherit}
  .hsz .comment-content p{font-size:.95rem;line-height:1.6;margin:0 0 .7rem}
  .hsz .reply a{
    font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
    text-transform:uppercase;color:var(--ink)
  }
  .hsz .comment-awaiting-moderation{
    font-family:var(--mono);font-size:.7rem;background:var(--y-100);
    border:2px solid var(--y-500);padding:.4rem .6rem;display:inline-block
  }
  /* A WordPress alap hozzaszolas-urlapja sajat markupot hoz (p.comment-form-*),
     ezert a tema .field stilusai nem fognak rajta. Itt hozzuk egy szintre. */
  .hsz-urlap{display:grid;grid-template-columns:1fr;gap:1rem}
  .hsz-urlap .field{margin:0}
  .hsz-urlap p{margin:0;display:flex;flex-direction:column;gap:.35rem}
  .hsz-urlap label{
    font-family:var(--mono);font-size:.68rem;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase
  }
  .hsz-urlap input[type=text],
  .hsz-urlap input[type=email],
  .hsz-urlap input[type=url],
  .hsz-urlap textarea{
    width:100%;font-family:var(--body);font-size:1rem;padding:.78rem .9rem;
    border:2px solid var(--ink);background:var(--paper-hi);color:var(--ink);border-radius:0
  }
  .hsz-urlap textarea{min-height:150px;resize:vertical}
  .hsz-urlap input:focus,.hsz-urlap textarea:focus{outline:3px solid var(--k-500);outline-offset:1px}
  /* Nev es e-mail egymas mellett szeles kepernyon. */
  @media(min-width:720px){
    .hsz-urlap{grid-template-columns:1fr 1fr}
    .hsz-urlap .field,
    .hsz-urlap .comment-form-url,
    .hsz-urlap .comment-form-cookies-consent,
    .hsz-urlap .form-submit,
    .hsz-urlap .comment-notes{grid-column:1/-1}
  }
  /* A sutis jeloloneegyzet sorban alljon a szoveggel. */
  .hsz-urlap .comment-form-cookies-consent{
    flex-direction:row;align-items:flex-start;gap:.7rem;font-size:.92rem
  }
  .hsz-urlap .comment-form-cookies-consent input{
    width:1.2rem;height:1.2rem;margin-top:.15rem;accent-color:var(--ink);flex:0 0 auto
  }
  .hsz-urlap .comment-form-cookies-consent label{
    font-family:var(--body);font-size:.92rem;font-weight:400;
    letter-spacing:0;text-transform:none;line-height:1.5
  }
  .hsz-urlap .form-submit{margin-top:.4rem}