/* =========================================================================
   Magellán Bike – nyilvános oldal stílusa
   Színek: sötét szürkészöld + a logó limezöldje. Nincs külső keretrendszer.
   ========================================================================= */

:root{
  /* A sötét felületek (fejléc, fejléckép-blokk, lábléc, sötét szekciók) mind
     ebből a négy színből épülnek fel, világosodó sorrendben. Ha az üzlet később
     más árnyalatot szeretne, ELÉG EZT A NÉGY SORT átírni – a többi stílus
     ezekre hivatkozik. Alább néhány kipróbált, jó kontrasztú változat:
       mostani (szürkészöld):  #151e19  #1e2923  #2a372f  #37483e
       hűvösebb, kevesebb zöld:#141a16  #1d2520  #26312a  #344138
       mohazöldebb:            #182018  #212c21  #2d392d  #3b4a3b
       a logó limezöldje felé: #171e15  #20291e  #2c372a  #3b4738
       eredeti grafit (fekete):#0e1113  #161a1e  #1f2429  #2a3138 */
  --ink:      #151e19;
  --ink-2:    #1e2923;
  --ink-3:    #2a372f;
  --ink-4:    #37483e;
  --lime:     #a8d53a;
  --lime-2:   #c2ec55;
  --lime-dim: #7ea628;
  /* Zöld SZÖVEGHEZ világos háttéren. A --lime-dim erre túl világos: fehéren
     csak 2,85:1, alig olvasható. Ez a sötétebb árnyalat 5,4:1 fehéren és 4,6:1
     a legsötétebb halvány háttéren is. Kitöltéshez, ikonhoz továbbra is a
     --lime és a --lime-dim való. */
  --lime-ink: #55731d;
  --paper:    #ffffff;
  --paper-2:  #f5f7f4;
  --paper-3:  #e9ede6;
  /* A szövegszínek is egy leheletnyi zöldet kaptak, hogy ne „idegen” szürke
     üljön a zöldes felületeken. A sötét háttéren lévő szövegek kontrasztja:
     --text-inv 15,2:1, --text-inv-2 7,4:1 (a szabvány 4,5:1-et vár el). */
  --text:     #151b17;
  --text-2:   #5b665e;
  --text-inv: #eef3ee;
  --text-inv-2: #a3aea2;
  --line:     #dfe4dc;
  --line-dark: rgba(255,255,255,.10);
  --red:      #d94b3d;
  --amber:    #e0a32a;
  --radius:   14px;
  --radius-lg:22px;
  --shadow:   0 1px 2px rgba(17,28,21,.05), 0 8px 24px -12px rgba(17,28,21,.22);
  --shadow-lg:0 24px 60px -24px rgba(12,22,16,.45);
  --wrap:     1200px;
  --head-h:   76px;
  --ease:     cubic-bezier(.22,.61,.36,1);
  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--head-h) + 12px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0; font-family:var(--sans); color:var(--text); background:var(--paper);
  font-size:clamp(16px,.55vw + 14.4px,17.5px); line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3,h4{line-height:1.12; margin:0 0 .5em; letter-spacing:-.022em; font-weight:800}
h1{font-size:clamp(2.1rem,5.2vw,3.9rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.7rem)}
h3{font-size:clamp(1.15rem,1.6vw,1.4rem)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
:focus-visible{outline:3px solid var(--lime); outline-offset:3px; border-radius:4px}

.wrap{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto}
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--lime); color:var(--ink); padding:.8rem 1.2rem; font-weight:700}
.skip:focus{left:1rem; top:1rem}

/* ---------- Gombok ------------------------------------------------------ */
.btn{
  --btn-bg:var(--lime); --btn-fg:#10140f;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  background:var(--btn-bg); color:var(--btn-fg);
  padding:.85rem 1.5rem; border:0; border-radius:999px;
  font:inherit; font-weight:750; letter-spacing:.01em; text-decoration:none;
  cursor:pointer; white-space:nowrap;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s;
  box-shadow:0 6px 18px -8px rgba(120,168,20,.8);
}
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 26px -10px rgba(120,168,20,.85)}
.btn:active{transform:translateY(0)}
.btn--primary{--btn-bg:var(--lime); --btn-fg:#10140f}
.btn--ghost{--btn-bg:transparent; --btn-fg:currentColor; border:2px solid currentColor; box-shadow:none; opacity:.92}
.btn--ghost:hover{box-shadow:none; opacity:1; background:rgba(168,213,58,.12)}
.btn--dark{--btn-bg:var(--ink-3); --btn-fg:#fff; box-shadow:none}
.btn--sm{padding:.55rem 1.05rem; font-size:.9rem}
.btn--lg{padding:1.05rem 2rem; font-size:1.06rem}

/* ---------- Fejléc ------------------------------------------------------ */
.announce{background:var(--ink-3); color:var(--text-inv); font-size:.95rem}
.announce--warning{background:#7a2f26}
.announce--holiday{background:#2c4a63}
.announce--success{background:#2f5a2a}
.announce__in{display:flex; align-items:center; gap:1rem; padding:.7rem 0; flex-wrap:wrap}
.announce__in p{margin:0; flex:1 1 260px}
.announce__cta{color:var(--lime-2); font-weight:700; text-decoration:underline}
.announce__x{margin-left:auto; background:none; border:0; color:inherit; font-size:1.5rem; line-height:1; cursor:pointer; opacity:.7; padding:0 .25rem}
.announce__x:hover{opacity:1}

/* A fejléc és a mobil gyorssáv áttetsző: ezek a --ink (#151e19 = 21,30,25)
   átlátszó változatai. Ha a --ink változik, ezt a két sort is át kell írni. */
.site-head{position:sticky; top:0; z-index:90; background:rgba(21,30,25,.93); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-dark); color:var(--text-inv)}
.site-head__in{display:flex; align-items:center; gap:1.25rem; min-height:var(--head-h)}
.brand img{width:132px; height:auto}
.mainnav{margin-left:auto; display:flex; align-items:center; gap:1.75rem}
.mainnav ul{display:flex; gap:.35rem; list-style:none; margin:0; padding:0}
/* FIGYELEM: `.mainnav ul a`, nem `.mainnav a`! A telefongomb is egy <a> a menüben,
   és a laza szabály erősebb volt a `.btn`-nél: elvette a betűszínét (halvány szürke
   lett a zöld gombon), a belső térközét és a display:inline-flex-ét is. */
.mainnav ul a{
  display:block; padding:.55rem .85rem; border-radius:9px; text-decoration:none;
  font-weight:650; font-size:.96rem; color:var(--text-inv-2);
  transition:color .16s, background .16s;
}
.mainnav ul a:hover{color:#fff; background:rgba(255,255,255,.06)}
.mainnav ul a[aria-current="page"]{color:var(--lime-2)}
.mainnav__cta{display:flex; align-items:center; gap:1rem}
.mainnav__cta .btn{padding:.62rem 1.15rem; font-size:.95rem}

/* A „Most nyitva / Most zárva” jelzés VILÁGOS háttérre van beállítva, és a sötét
   felületeken (fejléc, lábléc, sötét szekció) világosodik ki. Korábban fordítva
   volt: a `b` fixen fehér volt, ezért a Kapcsolat oldal fehér kártyáján a
   „Most nyitva” felirat fehér lett fehéren, azaz olvashatatlan. */
.status{display:inline-flex; align-items:center; gap:.45rem; font-size:.85rem; color:var(--text-2); white-space:nowrap}
.status i{width:9px; height:9px; border-radius:50%; background:var(--red); flex:none}
.status--open i{background:#4ade5a; box-shadow:0 0 0 0 rgba(74,222,90,.6); animation:pulse 2.4s infinite}
.status b{color:var(--text); font-weight:700}
.site-head .status,.site-foot .status,.sec--dark .status{color:var(--text-inv-2)}
.site-head .status b,.site-foot .status b,.sec--dark .status b{color:#fff}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(74,222,90,0)}100%{box-shadow:0 0 0 0 rgba(74,222,90,0)}}

.burger{display:none; margin-left:auto; width:44px; height:44px; background:none; border:0; cursor:pointer; flex-direction:column; justify-content:center; gap:5px; padding:0}
.burger span{display:block; height:2px; background:#fff; border-radius:2px; transition:transform .25s var(--ease), opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* A vízszintes menü hat menüpontból, az állapotjelvényből és a telefongombból áll,
   ezért csak 1080 px felett fér ki kényelmesen – alatta hamburgermenü.
   A határ szándékosan bőven a tényleges szükséglet felett van: 125%-os Windows-
   nagyításnál a böngésző törtpixeles viewportot számol, és egy szűkre húzott
   határérték ott billeg (1023 px-es ablaknál a max-width:1023px már nem talál). */
@media (max-width:1080px){
  .burger{display:flex}
  .mainnav{
    position:fixed; inset:var(--head-h) 0 auto 0; flex-direction:column; align-items:stretch;
    gap:0; background:var(--ink); border-bottom:1px solid var(--line-dark);
    padding:.5rem 1.25rem 1.5rem; max-height:calc(100dvh - var(--head-h)); overflow:auto;
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:.22s var(--ease);
  }
  .mainnav.is-open{transform:none; opacity:1; pointer-events:auto}
  .mainnav ul{flex-direction:column; gap:0}
  .mainnav ul a{padding:.95rem .4rem; font-size:1.1rem; border-bottom:1px solid var(--line-dark)}
  .mainnav__cta{flex-direction:column; align-items:stretch; gap:.85rem; margin-top:1.25rem}
  .mainnav__cta .btn{width:100%; padding:.9rem}
  .status{justify-content:center}
}

/* ---------- Szekció-alapok --------------------------------------------- */
.sec{padding:clamp(3.5rem,7vw,6.5rem) 0}
.sec--tight{padding:clamp(2.5rem,4vw,4rem) 0}
.sec--paper{background:var(--paper-2)}
.sec--dark{background:var(--ink); color:var(--text-inv)}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p{color:var(--text-inv-2)}

.sec-head{max-width:62ch; margin-bottom:clamp(2rem,3.5vw,3rem)}
.sec-head--center{margin-inline:auto; text-align:center}
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem; margin-bottom:.9rem;
  font-size:.78rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--lime-ink);
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--lime); border-radius:2px}
/* Sötét háttéren a világos limezöld olvasható, nem a sötét változat. */
.sec--dark .eyebrow,.hero .eyebrow,.site-foot .eyebrow{color:var(--lime-2)}
.lead{font-size:1.1em; color:var(--text-2)}
.sec--dark .lead{color:var(--text-inv-2)}

/* ---------- Hero -------------------------------------------------------- */
/* A fejléc-blokk MAGASSÁGA a képernyőhöz igazodik, nem csak a tartalomhoz.
   Enélkül a sötét sáv ott ért véget, ahol a szöveg – egy nagyobb monitoron vagy
   100%-os nagyításnál pedig a képernyő alján még maradt egy csík a fehér
   háttérből, mintha félbemaradt volna az oldal. Most a sötét rész mindig
   leér a képernyő aljáig (a fejlécsáv magasságát levonva), a tartalom pedig
   függőlegesen középen áll benne. A `min-height` sosem vág le semmit: ha a
   tartalom magasabb – kis nagyítás, telefon –, egyszerűen tovább nő.
   A `svh` a telefonok változó magasságú böngészősávját is helyesen kezeli;
   a fölötte lévő `vh`-s sor a régebbi böngészők tartaléka. */
.hero{
  position:relative; background:var(--ink); color:#fff; overflow:hidden; isolation:isolate;
  display:grid; align-content:center;
  min-height:calc(100vh - var(--head-h));
  min-height:calc(100svh - var(--head-h));
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(1000px 520px at 80% -5%, rgba(168,213,58,.22), transparent 62%),
    radial-gradient(700px 420px at 5% 105%, rgba(168,213,58,.10), transparent 60%),
    var(--ink);
}
.hero__grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4vw,4rem); align-items:center;
  padding:clamp(3.5rem,7vw,6rem) 0 clamp(4rem,7vw,6.5rem);
}
.hero h1{margin-bottom:1rem}
.hero h1 em{font-style:normal; color:var(--lime); display:block}
.hero__sub{font-size:clamp(1.05rem,1.5vw,1.28rem); color:var(--text-inv-2); max-width:46ch; margin-bottom:1.9rem}
.hero__actions{display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:2.4rem}
.hero__facts{display:flex; flex-wrap:wrap; gap:2.2rem; border-top:1px solid var(--line-dark); padding-top:1.6rem}
.hero__fact b{display:block; font-size:clamp(1.6rem,2.6vw,2.2rem); color:var(--lime); line-height:1; font-weight:850}
.hero__fact span{font-size:.85rem; color:var(--text-inv-2); letter-spacing:.02em}
/* A névjegykártya a kép ALATT van, nem rajta. Korábban ráúszott a képre
   (position:absolute), de a fejléckép széles és alacsony (1880×675), ezért a
   kártya a kép jó részét kitakarta. Így mindig olvasható, a kép pedig látszik. */
.hero__media{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:.9rem}
.hero__media img{border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:100%; align-self:stretch}
.hero__badge{
  background:#fff; color:var(--text); border-radius:var(--radius);
  padding:1rem 1.25rem; box-shadow:var(--shadow-lg); max-width:min(100%,24rem);
}
.hero__badge strong{display:block; font-size:1.02rem}
.hero__badge span{font-size:.85rem; color:var(--text-2)}
.hero__badge .status{color:var(--text-2); margin-top:.35rem}
.hero__badge .status b{color:var(--text)}
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr; padding-bottom:3.5rem}
  .hero__media{order:-1}
  .hero__badge{align-self:stretch; max-width:none}
}

/* ---------- Szolgáltatás-kártyák ---------------------------------------- */
.cards{display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:1.9rem 1.6rem; text-decoration:none; display:flex; flex-direction:column;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
}
a.card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--lime)}
.card__icon{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center; margin-bottom:1.1rem;
  background:linear-gradient(140deg,var(--lime),var(--lime-dim)); color:#12160e; flex:none;
}
.card h3{margin-bottom:.4rem}
.card p{color:var(--text-2); font-size:.97rem}
.card__more{margin-top:auto; padding-top:1rem; color:var(--lime-ink); font-weight:750; font-size:.93rem}
.card__more::after{content:" →"; transition:margin .18s}
a.card:hover .card__more::after{margin-left:.25rem}

/* ---------- Termékek ---------------------------------------------------- */
.filters{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; align-items:center}
.chip{
  border:1.5px solid var(--line); background:var(--paper); color:var(--text-2);
  border-radius:999px; padding:.5rem 1.05rem; font:inherit; font-size:.92rem; font-weight:650;
  cursor:pointer; text-decoration:none; transition:.16s;
}
.chip:hover{border-color:var(--lime); color:var(--text)}
.chip.is-active{background:var(--ink); border-color:var(--ink); color:#fff}
.filters__sort{margin-left:auto; display:flex; align-items:center; gap:.5rem; font-size:.9rem; color:var(--text-2)}
.filters__sort select{font:inherit; font-size:.92rem; padding:.5rem .75rem; border-radius:9px; border:1.5px solid var(--line); background:#fff}

.products{display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))}
.product{
  position:relative; display:flex; flex-direction:column; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
}
/* FONTOS: a böngésző beépített [hidden]{display:none} szabályát a fenti
   .product{display:flex} felülírja (azonos erősség, de a mi stíluslapunk erősebb).
   Enélkül a kategóriaszűrő beállítja a hidden attribútumot, a kártya mégis látszik –
   pontosan ez volt a hiba, hogy a szűrés nem csinált semmit. */
.product[hidden], .empty[hidden]{display:none}
.product:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:#cfd8c8}
.product__img{aspect-ratio:4/3; background:#fff; display:grid; place-items:center; padding:1.1rem; overflow:hidden}
.product__img img{max-height:100%; width:auto; object-fit:contain; transition:transform .35s var(--ease)}
.product:hover .product__img img{transform:scale(1.045)}
.product__body{padding:0 1.25rem 1.35rem; display:flex; flex-direction:column; flex:1}
.product__cat{font-size:.72rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--text-2); margin-bottom:.35rem}
.product h3{font-size:1.12rem; margin-bottom:.15rem}
.product__sub{font-size:.9rem; color:var(--text-2); margin-bottom:.9rem}
.product__price{margin-top:auto; display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap}
.product__price b{font-size:1.28rem; font-weight:850; letter-spacing:-.02em}
.product__price s{color:var(--text-2); font-size:.95rem}
.product__note{font-size:.82rem; color:var(--text-2)}
.product__tag{
  position:absolute; top:.85rem; left:.85rem; z-index:2; background:var(--lime); color:#12160e;
  padding:.3rem .7rem; border-radius:999px; font-size:.73rem; font-weight:850; letter-spacing:.06em; text-transform:uppercase;
}
.product__tag--sale{background:var(--red); color:#fff}
.product__tag--out{background:var(--ink-4); color:#fff}
.product__ask{margin-top:1rem}
.empty{padding:3rem 1rem; text-align:center; color:var(--text-2); border:2px dashed var(--line); border-radius:var(--radius-lg)}

/* Rácselemek alapból nem zsugorodnak a tartalmuk alá (min-width:auto), ezért a
   széles tartalom – például a logó-futószalag – szétfeszítené a rácsot. */
.split > *, .split--narrow > *, .cards > *, .products > *, .pricing > *,
.info-grid > *, .contact-grid > *, .foot-grid > *, .logo-grid > *{min-width:0}

/* ---------- Logó-futószalag --------------------------------------------- */
.marquee{min-width:0; max-width:100%; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex; gap:3.2rem; width:max-content; animation:slide 42s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee img{height:46px; width:auto; object-fit:contain; filter:grayscale(1) brightness(1.7); opacity:.65; transition:.25s}
.marquee img:hover{filter:none; opacity:1}
.sec--paper .marquee img{filter:grayscale(1); opacity:.6}
@keyframes slide{to{transform:translateX(-50%)}}

.logo-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(130px,100%),1fr)); gap:1.5rem; align-items:center}
.logo-grid figure{margin:0; display:grid; place-items:center; gap:.5rem}
.logo-grid img{max-height:64px; width:auto; object-fit:contain}
.logo-grid figcaption{font-size:.78rem; color:var(--text-2); text-align:center}

/* ---------- Szerviz árlista --------------------------------------------- */
/* A `min(320px,100%)` a rácsoknál nem szépészeti kérdés: a puszta `minmax(320px,1fr)`
   egy 320 px széles telefonon 320 px-es oszlopot csinál a 280 px-es tartalomsávban,
   és az egész oldal oldalra csúszik. A min()-nel az oszlop soha nem lesz szélesebb
   a rendelkezésre álló helynél. Ugyanez minden auto-fit/auto-fill rácsra érvényes. */
.pricing{display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.pricegroup{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.75rem}
.pricegroup h3{display:flex; align-items:center; gap:.6rem; margin-bottom:.35rem}
.pricegroup__note{font-size:.87rem; color:var(--text-2); margin-bottom:1.2rem}
.pricelist{list-style:none; margin:0; padding:0}
.pricelist li{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.7rem 0; border-bottom:1px dashed var(--line)}
.pricelist li:last-child{border-bottom:0; padding-bottom:0}
.pricelist .pname{font-weight:650}
.pricelist .pdesc{display:block; font-weight:400; font-size:.85rem; color:var(--text-2)}
.pricelist .pval{font-weight:800; white-space:nowrap; color:var(--text)}
.pricelist .pval--text{font-weight:650; font-size:.88rem; color:var(--text-2)}

/* ---------- Egyebek ----------------------------------------------------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.split--narrow{grid-template-columns:1.15fr .85fr}
@media (max-width:860px){.split,.split--narrow{grid-template-columns:1fr}}
.split img{border-radius:var(--radius-lg); box-shadow:var(--shadow)}
.prose{max-width:70ch}
.prose p{margin-bottom:1.1em}
.checklist{list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:.85rem}
.checklist li{display:flex; gap:.75rem; align-items:flex-start; font-weight:600}
.checklist li::before{
  content:"✓"; flex:none; width:24px; height:24px; border-radius:50%;
  background:var(--lime); color:#12160e; display:grid; place-items:center; font-size:.8rem; font-weight:900; margin-top:.15rem;
}
.sec--dark .checklist li{color:var(--text-inv)}

.callout{
  background:linear-gradient(135deg,var(--lime),var(--lime-dim)); color:#101408;
  border-radius:var(--radius-lg); padding:clamp(2rem,4vw,3.25rem);
  display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center; justify-content:space-between;
}
.callout h2{margin:0 0 .35rem; font-size:clamp(1.5rem,2.6vw,2.1rem)}
.callout p{margin:0; opacity:.82; font-weight:600}
.callout .btn{--btn-bg:var(--ink); --btn-fg:#fff; box-shadow:none}

.info-grid{display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.info-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem}
.info-card h3{font-size:1.02rem; margin-bottom:.6rem}
.info-card ul{margin:0; padding-left:1.15rem; color:var(--text-2); font-size:.95rem}
.info-card li{margin-bottom:.3rem}

.reveal{opacity:0; transform:translateY(22px)}
.reveal.is-in{opacity:1; transform:none; transition:opacity .6s var(--ease), transform .6s var(--ease)}

/* ---------- Lábléc ------------------------------------------------------ */
.site-foot{background:var(--ink); color:var(--text-inv-2); padding:clamp(3rem,5vw,4.5rem) 0 0; font-size:.95rem}
.foot-grid{display:grid; gap:2.5rem; grid-template-columns:1.1fr 1fr 1.1fr 1.3fr}
@media (max-width:980px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.foot-grid{grid-template-columns:1fr}}
.site-foot h2{color:#fff; font-size:.82rem; letter-spacing:.15em; text-transform:uppercase; margin-bottom:1.1rem}
.site-foot a{color:var(--text-inv-2); text-decoration:none; transition:color .15s}
.site-foot a:hover{color:var(--lime-2)}
.foot-logo{margin-bottom:1rem}
.foot-tag{max-width:26ch}
.foot-list{list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.4rem}
.social{display:inline-flex; align-items:center; gap:.5rem; margin-top:1.2rem; border:1px solid var(--line-dark); padding:.5rem .95rem; border-radius:999px}
.hours{width:100%; border-collapse:collapse}
/* Ugyanaz a logika, mint a státuszjelzésnél: az alapbeállítás világos háttérre
   szól, a lábléc és a sötét szekciók írják felül. A mai nap kiemelése világos
   háttéren nem lehet limezöld szöveg (fehéren 1,4:1 – gyakorlatilag olvashatatlan),
   ezért ott sötét, félkövér szöveg egy halvány zöld sávon jelöli a mai napot. */
.hours th{text-align:left; font-weight:500; padding:.32rem 0; color:var(--text-2)}
.hours td{text-align:right; padding:.32rem 0; font-variant-numeric:tabular-nums}
.hours .is-today th,.hours .is-today td{color:var(--text); font-weight:750; background:#eef7dc}
.hours .is-today th{padding-left:.5rem; border-radius:6px 0 0 6px}
.hours .is-today td{padding-right:.5rem; border-radius:0 6px 6px 0}
.site-foot .hours th,.sec--dark .hours th{color:var(--text-inv-2)}
.site-foot .hours .is-today th,.site-foot .hours .is-today td,
.sec--dark .hours .is-today th,.sec--dark .hours .is-today td{color:var(--lime-2); background:none; padding-left:0; padding-right:0}
.foot-special{list-style:none; margin:1rem 0 0; padding:.85rem 1rem; background:rgba(224,163,42,.14); border-left:3px solid var(--amber); border-radius:0 8px 8px 0; font-size:.88rem}
.foot-special li+li{margin-top:.4rem}
.map{aspect-ratio:16/10; border-radius:var(--radius); overflow:hidden; margin-bottom:1rem; background:var(--ink-3)}
.map iframe{width:100%; height:100%; border:0; filter:grayscale(.35) contrast(1.05)}
.foot-bottom{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  margin-top:3rem; padding:1.5rem 0; border-top:1px solid var(--line-dark); font-size:.85rem;
}
.foot-bottom nav{display:flex; gap:1.5rem; flex-wrap:wrap}
.foot-bottom p{margin:0}

/* =========================================================================
   TABLET (≈600–1024 px) – köztes állapotok, hogy ne „asztali kicsiben” nézzen ki
   ========================================================================= */

/* Tablet fekvő és kis laptop: szűkebb belső margó, kisebb fejléc */
@media (min-width:1081px) and (max-width:1280px){
  :root{--wrap:1040px}
  .mainnav{gap:1rem}
  .mainnav ul a{padding:.5rem .6rem; font-size:.9rem}   /* a telefongombot NE érintse */
  .mainnav__cta{gap:.6rem}
  .mainnav__cta .btn{padding:.55rem .9rem; font-size:.88rem}
  .status span{display:none}          /* csak a „Most nyitva” marad, a részlet nem fér ki */
  /* A szűkebb tartalomsávban is maradjon 4 termék egy sorban, mint tablet fekvőben. */
  .products{grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr))}
}

/* Tablet álló (768) és fekvő (1024) között */
@media (min-width:601px) and (max-width:1080px){
  .products{grid-template-columns:repeat(auto-fill,minmax(min(212px,100%),1fr)); gap:1.1rem}
  .cards{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
  .pricing{grid-template-columns:1fr}
  .info-grid{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
  .logo-grid{grid-template-columns:repeat(auto-fill,minmax(min(110px,100%),1fr))}
  .sec{padding:clamp(3rem,6vw,4.5rem) 0}
  .hero__facts{gap:1.5rem}
}

/* Tablet álló: a kétoszlopos elrendezések nem férnek el jól */
@media (min-width:601px) and (max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-col--map{grid-column:1/-1}
  .map{aspect-ratio:21/9}
  .contact-grid{grid-template-columns:1fr}
  .map--big{aspect-ratio:16/9}
  .hero__badge{align-self:stretch; max-width:none}
  .callout{flex-direction:column; align-items:flex-start}
}

/* Érintőképernyőn nincs egérmutató: a hover-effektek helyett aktív állapot.
   Enélkül a hover „beragad” az első koppintás után. */
@media (hover:none){
  .product:hover,
  a.card:hover{transform:none; box-shadow:none}
  .product:active{transform:scale(.985)}
  .btn:hover{transform:none; box-shadow:0 6px 18px -8px rgba(120,168,20,.8)}
  .btn:active{transform:scale(.97)}
  .marquee img{filter:none; opacity:.85}      /* koppintás nélkül is látszódjon */
  .product:hover .product__img img{transform:none}
}

/* Érintésre méretezett kattintható felületek.
   A WCAG 2.5.8 minimuma 24×24 px; a fontos elemeknél (telefonszám, menü) 44 px-re
   megyünk, mert azokat menet közben, egy kézzel nyomják meg. */
@media (pointer:coarse){
  .mainnav ul a{min-height:48px; display:flex; align-items:center}   /* a telefongombot NE érintse (lásd fent) */
  .chip{padding:.6rem 1.15rem}
  .btn{min-height:46px}
  .btn--sm{min-height:40px}
  .filters__sort select{min-height:44px; padding:.6rem .8rem}
  .foot-list a{display:flex; align-items:center; min-height:44px}
  .foot-bottom nav a{display:inline-flex; align-items:center; min-height:44px}
  .foot-col address a{display:inline-block; padding:.35rem 0}
  .crumbs a{display:inline-block; padding:.4rem .1rem}
  .contact-list a{display:inline-flex; align-items:center; min-height:40px}
  .modal__x{width:44px; height:44px}
  .announce__x{width:44px; height:44px}
  .social{min-height:44px}
  /* Az adatlapokon (impresszum, adatvédelem) a telefon- és e-mail-linkek nem
     mondat közben állnak, ezért ezeket is megnöveljük. */
  .legal dd a, .info-card li a{display:inline-block; padding:.35rem 0}
}

/* ---------- Mobil gyorssáv, vissza a tetejére --------------------------- */
.quickbar{display:none}
/* Tableten is legyen alsó gyorssáv – ott is egy kézzel, menet közben használják. */
@media (max-width:1080px){
  .quickbar{
    display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
    position:fixed; left:0; right:0; bottom:0; z-index:95;
    background:rgba(21,30,25,.97); backdrop-filter:blur(12px);
    border-top:1px solid var(--line-dark); padding:.4rem .2rem calc(.4rem + env(safe-area-inset-bottom));
  }
  .quickbar a{display:grid; place-items:center; gap:.15rem; padding:.45rem .2rem; color:var(--text-inv-2); text-decoration:none; font-size:.68rem; font-weight:650}
  .quickbar a:active{color:var(--lime-2)}
  body{padding-bottom:70px}
  .totop{display:none!important}
}
.totop{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:80;
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:var(--ink); color:#fff; box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:.25s var(--ease);
}
.totop.is-on{opacity:1; pointer-events:auto}
.totop:hover{background:var(--lime); color:#12160e}

/* ---------- Felugró ablak / cookie -------------------------------------- */
.modal{position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:1.25rem}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute; inset:0; background:rgba(8,11,13,.72); backdrop-filter:blur(3px); animation:fade .25s}
.modal__box{
  position:relative; background:#fff; border-radius:var(--radius-lg); padding:clamp(1.75rem,4vw,2.75rem);
  max-width:520px; width:100%; box-shadow:var(--shadow-lg); animation:pop .3s var(--ease);
  border-top:6px solid var(--lime); max-height:85dvh; overflow:auto;
}
.modal--warning{border-top-color:var(--red)}
.modal--holiday{border-top-color:#3d7fb3}
.modal--success{border-top-color:#4ca843}
.modal__box h2{font-size:clamp(1.4rem,2.6vw,1.85rem)}
/* Az üzenethez tartozó kép (nem kötelező): a szöveg fölött, a doboz szélességében.
   NINCS object-fit:cover és nincs fix magasság – különben egy álló plakátnak
   levágná a tetejét-alját. A kép mindig a teljes egészében látszik; a magasságot
   a képernyő magassága korlátozza, a képarány sosem torzul. */
.modal__img{
  display:block; width:auto; max-width:100%; height:auto; max-height:44dvh;
  margin:0 auto 1.5rem; border-radius:var(--radius); background:var(--paper);
}

/* „Csak kép” üzenet: nincs cím és nincs szöveg, csak egy kész plakát (ugyanaz,
   ami a Facebookra megy). Ilyenkor a fehér doboz csak útban lenne: a kép maga
   AZ üzenet, a képernyőhöz igazítva, keret és térköz nélkül. */
.modal__box--kep{
  padding:0; background:none; box-shadow:none; border-top:0; overflow:visible;
  max-width:min(94vw, 640px); width:auto;
  max-height:none;   /* a doboz pontosan akkora, mint a kép – nincs benne görgetősáv */
}
.modal__box--kep .modal__img{
  max-height:88dvh; margin:0; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
}
/* A bezáró gomb fényképen is látszódjon: saját sötét korongot kap, és kicsit
   kilóg a kép sarkából, hogy ne takarja a plakát tartalmát. */
.modal__box--kep .modal__x{
  top:-14px; right:-14px; width:40px; height:40px; border-radius:50%;
  background:var(--ink); color:#fff; opacity:.94; font-size:1.5rem;
  display:grid; place-items:center; box-shadow:var(--shadow);
}
.modal__box--kep .modal__x:hover{opacity:1; color:var(--lime-2)}
.modal__box--kep .btn{margin-top:1rem}
/* Kis képernyőn a gomb ne lógjon le a kép mellől a semmibe */
@media (max-width:560px){
  .modal__box--kep .modal__x{top:-10px; right:-6px; width:38px; height:38px}
}
.modal__box .btn{margin-top:1.25rem}
.modal__x{position:absolute; top:.75rem; right:.9rem; background:none; border:0; font-size:1.9rem; line-height:1; color:var(--text-2); cursor:pointer}
.modal__x:hover{color:var(--text)}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0; transform:translateY(18px) scale(.97)}}

.cookie{
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:110; max-width:520px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg);
  padding:1.1rem 1.25rem; display:flex; gap:1rem; align-items:center; flex-wrap:wrap; font-size:.9rem;
}
.cookie[hidden]{display:none}
.cookie p{margin:0; flex:1 1 240px; color:var(--text-2)}
.cookie a{color:var(--lime-ink); font-weight:700}
/* A süti-sáv ne takarja el az alsó gyorssávot. */
@media (max-width:1080px){.cookie{bottom:76px}}

/* ---------- Belső oldalfejléc ------------------------------------------- */
.pagehead{background:var(--ink); color:#fff; padding:clamp(2.75rem,5vw,4.5rem) 0 clamp(2.5rem,4vw,3.5rem); position:relative; overflow:hidden}
.pagehead::after{content:""; position:absolute; inset:0; background:radial-gradient(800px 300px at 85% 0%, rgba(168,213,58,.18), transparent 65%); pointer-events:none}
.pagehead .lead{max-width:60ch; color:var(--text-inv-2)}
.crumbs{font-size:.83rem; color:var(--text-inv-2); margin-bottom:.9rem}
.crumbs a{color:var(--lime-2); text-decoration:none}
.crumbs span{margin:0 .4rem; opacity:.5}

/* ---------- Kapcsolat --------------------------------------------------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3.5rem)}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
.contact-list{list-style:none; margin:0; padding:0; display:grid; gap:1.25rem}
.contact-list li{display:flex; gap:1rem; align-items:flex-start}
/* A szövegoszlop zsugorodhasson az ikon mellett, a hosszú e-mail-cím pedig törhessen:
   e nélkül egy nagyon keskeny telefonon (280 px) az egész sor kilógna. */
.contact-list li > div{min-width:0}
.contact-list a{overflow-wrap:anywhere}
.contact-list .ci{width:44px; height:44px; border-radius:12px; background:var(--paper-3); display:grid; place-items:center; flex:none; color:var(--ink)}
.contact-list b{display:block; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-2); font-weight:800}
.contact-list a{font-size:1.1rem; font-weight:700; text-decoration:none}
.contact-list a:hover{color:var(--lime-ink)}
.map--big{aspect-ratio:4/3; border-radius:var(--radius-lg)}

/* ---------- Gyakori kérdések -------------------------------------------- */
.faq-wrap{max-width:820px; margin-inline:auto}
.faq-group + .faq-group{margin-top:clamp(2.5rem,5vw,4rem)}
.faq-group .sec-head{margin-bottom:1.5rem}
.faq-group .sec-head h2{font-size:clamp(1.3rem,2.2vw,1.75rem)}
.faq-list{display:grid; gap:.75rem}
.faq{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:border-color .18s, box-shadow .18s;
}
.faq[open]{border-color:var(--lime); box-shadow:var(--shadow)}
.faq summary{
  display:flex; align-items:center; gap:1rem; justify-content:space-between;
  padding:1.1rem 1.35rem; font-weight:700; cursor:pointer; list-style:none;
  font-size:1.02rem; line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; flex:none; width:11px; height:11px; border-right:2.5px solid var(--lime-ink);
  border-bottom:2.5px solid var(--lime-ink); transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .22s var(--ease);
}
.faq[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq summary:hover{background:var(--paper-2)}
.faq__a{padding:0 1.35rem 1.25rem; color:var(--text-2); max-width:70ch}
.faq__a p{margin-bottom:.75em}

/* Rövid kérdés–felelet blokk más oldalakon */
.faq-inline{max-width:760px}
.faq-inline .faq{background:transparent; border-color:var(--line)}

/* ---------- Jogi oldalak ------------------------------------------------ */
.legal{max-width:75ch}
.legal h2{font-size:1.35rem; margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line)}
.legal h2:first-of-type{border-top:0; padding-top:0; margin-top:1rem}
.legal h3{font-size:1.05rem; margin-top:1.75rem}
.legal dl{display:grid; grid-template-columns:minmax(9rem,auto) 1fr; gap:.55rem 1.5rem; margin:1.25rem 0}
.legal dt{font-weight:700; color:var(--text-2)}
.legal dd{margin:0}
.legal ul{padding-left:1.25rem}
.legal li{margin-bottom:.5rem}
.legal code{background:var(--paper-3); padding:.1em .4em; border-radius:5px; font-size:.88em}
/* Nagyon keskeny kijelző (Galaxy Fold külső képernyője, régi iPhone SE: 280–360 px).
   Itt a hosszú, egy sorba kényszerített feliratok már nem férnek ki, ezért
   engedjük őket tördelni. Szélesebb kijelzőn marad az egysoros, feszes megjelenés. */
@media (max-width:400px){
  .btn{white-space:normal; text-align:center}
  .pricelist li{flex-wrap:wrap; gap:.15rem 1rem}
  .pricelist .pval{margin-left:auto}
}

@media (max-width:560px){
  .legal dl{grid-template-columns:1fr; gap:.15rem}
  .legal dt{margin-top:.75rem}
  .legal dt:first-child{margin-top:0}
}

.datatable{width:100%; border-collapse:collapse; margin:1.25rem 0; font-size:.95rem}
.datatable th,.datatable td{text-align:left; vertical-align:top; padding:.7rem .9rem; border-bottom:1px solid var(--line)}
.datatable thead th{background:var(--paper-2); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.datatable tbody th{width:32%; color:var(--text-2); font-weight:700}
.datatable tr:last-child th,.datatable tr:last-child td{border-bottom:0}
@media (max-width:560px){
  .datatable, .datatable tbody, .datatable tr, .datatable th, .datatable td{display:block; width:auto}
  .datatable thead{display:none}
  .datatable tr{border-bottom:1px solid var(--line); padding:.5rem 0}
  .datatable tr:last-child{border-bottom:0}
  .datatable th,.datatable td{border:0; padding:.2rem 0}
  .datatable tbody th{width:auto}
}

.legal-todo{
  background:#fdf5e5; border-left:4px solid var(--amber); border-radius:0 10px 10px 0;
  padding:1rem 1.25rem; font-size:.93rem; margin:1.5rem 0;
}