/* ---------------------------------------------------------
   HALODROP — shop kiegészítések
   A design_base.css (a halodrop.html eredeti dizájnja) VÁLTOZATLAN.
   Itt csak az jön hozzá, ami a valódi termékekhez kell:
   képes termékkártya, katalógus-rács, szűrők, termékoldal, kosár.
   Ugyanazok a tokenek (--accent, --surface, --border, Unbounded/
   Manrope/Space Mono), semmi új szín vagy betűtípus.
   --------------------------------------------------------- */

/* ---------- termékkép: fehér kártya + SÖTÉT "ablak" ---------- */
/* A kártya háttere a világos felület marad, a termék viszont egy sötét
   ablakban ül. A figura fehér matrica-szegélye ezen a sötét alapon
   erős kontraszttal olvasható — ez adja a kártyák látványát.
   #121212 = pontosan az a tónus, amivel a showcase-képek háttere készült
   (phase2_fast.py :: composite_on_color((18,18,18))), így az ablak széle
   és a kép háttere egybeolvad, nem látszik doboz a dobozban. */
.thumb{ background: #121212 !important; }
.thumb img{ width:100%; height:100%; object-fit:cover; border-radius:12px; }

.card a.card-link{ text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:14px; }
.card .cop{ text-decoration:none; display:inline-block; }

/* ---------- színpöttyök a kártyán ---------- */
.cardswatch{ display:flex; gap:7px; align-items:center; min-height:20px; }
.cardswatch.is-empty{ visibility:hidden; }
.cardswatch button{
  width:18px; height:18px; border-radius:50%; padding:0; cursor:pointer;
  border:2px solid var(--surface); box-shadow: 0 0 0 1.5px var(--border);
}
.cardswatch button[aria-pressed="true"]{ box-shadow: 0 0 0 2px var(--accent); }
.cardswatch button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- katalógus-rács ---------- */
/* A .card display:flex-et kap a design_base.css-től, ami erősebb, mint a
   böngésző alap [hidden]{display:none} szabálya — enélkül a szűrés csak
   számolna, de nem rejtene el semmit. */
.card[hidden]{ display:none !important; }

.catalog-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.catalog-grid .card{ flex: 1 1 auto; }

/* ---------- szűrősor ---------- */
.filters{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  padding: 16px 0 26px; border-bottom:1px solid var(--border); margin-bottom:26px;
}
.chip{
  font-family:'Manrope'; font-weight:700; font-size:13px; cursor:pointer;
  background: var(--surface); color: var(--ink-muted);
  border:1.5px solid var(--border); border-radius:999px; padding:8px 15px;
}
.chip[aria-pressed="true"]{ background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.searchbox{
  flex:1; min-width:180px; font-family:'Manrope'; font-size:14px; color:var(--ink);
  background: var(--surface); border:1.5px solid var(--border); border-radius:8px; padding:10px 14px;
}
.searchbox:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }

.filter-label{
  font-family:'Space Mono'; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.08em; color: var(--ink-muted); margin-right:2px;
}
.result-count{ font-family:'Space Mono'; font-size:12.5px; color:var(--ink-faint); margin-left:auto; }

/* ---------- szín-választó (a valódi 5 legyártott variáns) ---------- */
.colorpick{ display:flex; gap:8px; flex-wrap:wrap; }
.colorpick button{
  width:30px; height:30px; border-radius:50%; cursor:pointer; padding:0;
  border:2px solid var(--surface); box-shadow: 0 0 0 1.5px var(--border);
}
.colorpick button[aria-pressed="true"]{ box-shadow: 0 0 0 2.5px var(--accent); }
.colorpick button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* ---------- termékoldal ---------- */
.product{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(24px,4vw,56px); align-items:start; }
@media (max-width: 860px){ .product{ grid-template-columns:1fr; } }

.product-stage{
  aspect-ratio:1/1; border-radius:18px; overflow:hidden; position:relative;
  background: #121212; border:1px solid var(--border);
}
.product-stage img{ width:100%; height:100%; object-fit:cover; }
.stage-note{
  position:absolute; left:14px; bottom:14px; font-family:'Space Mono'; font-size:11px;
  background: color-mix(in oklab, var(--ink) 82%, transparent); color: var(--bg);
  padding:6px 11px; border-radius:999px;
}

.product h1{ font-size: clamp(26px,3.4vw,38px); font-weight:800; }
.product .cat{ font-family:'Space Mono'; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); }
.product .price-row{ display:flex; align-items:baseline; gap:12px; margin:18px 0 22px; }
.product .price-row .p{ font-family:'Space Mono'; font-weight:700; font-size:30px; }
.product .price-row .vat{ font-size:12.5px; color:var(--ink-muted); }

.spec{ border-top:1px solid var(--border); margin-top:26px; padding-top:18px; }
.spec dl{ display:grid; grid-template-columns: auto 1fr; gap:9px 18px; margin:0; font-size:13.5px; }
.spec dt{ font-family:'Space Mono'; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); }
.spec dd{ margin:0; font-weight:600; }

.field-title{
  font-family:'Space Mono'; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.08em; color: var(--ink-muted); display:block; margin-bottom:9px;
}

/* ---------- kosár ---------- */
.cart-btn{ position:relative; }
.cart-count{
  position:absolute; top:-6px; right:-6px; min-width:19px; height:19px; border-radius:999px;
  background: var(--accent); color: var(--accent-ink); font-family:'Space Mono'; font-size:11px;
  display:grid; place-items:center; padding:0 5px;
}
.cart-count[hidden]{ display:none; }

.cart-line{ display:flex; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid var(--border); }
.cart-line img{ width:56px; height:56px; border-radius:10px; object-fit:cover; background:var(--surface-2); }
.cart-line .n{ font-weight:700; font-size:14.5px; }
.cart-line .m{ font-family:'Space Mono'; font-size:11.5px; color:var(--ink-faint); }
.cart-line .p{ font-family:'Space Mono'; font-weight:700; margin-left:auto; }
.cart-line .rm{ background:none; border:none; cursor:pointer; color:var(--ink-faint); font-size:20px; line-height:1; padding:4px 6px; }
.cart-line .rm:hover{ color:var(--accent); }
.cart-total{ display:flex; justify-content:space-between; align-items:baseline; padding:20px 0; }
.cart-total .t{ font-family:'Space Mono'; font-weight:700; font-size:26px; }
.empty{ color:var(--ink-muted); font-size:15px; padding:30px 0; }

/* ---------- breadcrumb ---------- */
.crumb{ font-size:13px; color:var(--ink-muted); padding:22px 0 0; }
.crumb a{ text-decoration:none; }
.crumb a:hover{ color:var(--ink); }

/* ---------------------------------------------------------
   AVATAR-GENERÁTOR — a főoldal középpontja
   Az avatar a KÖZÉPEN, a katalógus-kártyáknál nagyobban; a vezérlők
   köré rendezve. A dizájn tokenjeit használja, nincs benne új szín.
   --------------------------------------------------------- */

.genfull{ margin: 4px 0 0; }
/* a címnek 672 px kell egy sorban 34 px-en; a bekezdés viszont maradjon
   640-nél, mert ott van a kényelmes sorhossz */
.genhead{ max-width: 720px; margin-bottom: 18px; }
/* ugyanaz a méret és súly, mint a kategória-címeké (.section-head h2) —
   a generátor nem külön szint, hanem a katalógus folytatása */
.genhead h2{ margin: 8px 0 6px; font-size: clamp(24px, 3.2vw, 34px); font-weight: 800; }
.genhead p{ max-width: 640px; color: var(--ink-muted); font-size: 14.5px;
            line-height: 1.6; margin: 0; }
.genhead em{ color: var(--ink); font-style: italic; }

.gen16{
  /* A középső (sötét) mező KÖZÉPEN üljön. Korábban 1.0 / 1.24 / 0.76 volt:
     a bal sáv 73 px-szel szélesebb volt a jobbnál, ezért a fekete mező
     36 px-szel jobbra tolódott — mérve. Most a jobb sáv kap többet, a
     középső egy hajszállal szélesebb lett, a bal pedig alig változik, hogy
     a vezérlő-csipek ne törjenek új sorba. */
  display: grid; grid-template-columns: 1.0fr 1.38fr 0.94fr; gap: 0;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
  background: var(--surface);
}
.genoszlop{
  padding: clamp(13px, 1.5vw, 20px);
  display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow: auto;
}
/* a vezérlők a bal sávot töltik ki, a színek és a vásárlás a jobbat —
   mindkettő függőlegesen kiegyensúlyozva, nem a sáv tetejére szorulva */
.gen-bal{ justify-content: space-between; }
.gen-jobb{ justify-content: center; gap: 18px; }
.gen-jobb .gen-note{ color: var(--ink-faint); }
/* a középső sáv sötét, hogy az avatar ugyanabban az ablakban üljön,
   mint a bolti termékkártyák — ez köti össze a generátort a katalógussal */
/* A sötét mező önálló, lekerekített lapként ül a világos felületen —
   ugyanaz a formanyelv, mint a „Minden héten" drop-blokké. */
.gen-kozep{
  background: #121212; color: #F3F0FF;
  align-items: center; justify-content: center; gap: 11px;
  margin: 10px; border-radius: 20px; border: 1px solid var(--border);
}
.gen-kozep .field-title{ color: #9A93B8; text-align: center; }

.genblokk{ display: flex; flex-direction: column; gap: 7px; }
.genblokk .chips{ display: flex; flex-wrap: wrap; gap: 5px; }
.genblokk .chip{ font-size: 12px; padding: 6px 12px; }
.genblokk .chip.mini{ font-size: 11.5px; padding: 5px 11px; }
.field-title .sugo{
  font-style: normal; font-weight: 600; color: var(--accent);
  text-transform: none; letter-spacing: 0; margin-left: 6px; font-size: 10.5px;
  white-space: nowrap;
}

/* --- a színpad: itt jelenik meg az avatar --- */
.genszinpad{
  position: relative; width: 100%; max-width: 460px; aspect-ratio: 1/1;
  border-radius: 20px; background: #0D0D0D;
  border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  flex: 0 1 auto; min-height: 272px;
}
.genszinpad::after{                       /* halvány halo-fény a háttérben */
  content: ""; position: absolute; width: 78%; aspect-ratio: 1/1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,61,119,.22), transparent 68%);
  pointer-events: none;
}
/* Két réteg egymáson: a Hall of Fame kiemelésével együtt vált, és
   keresztúsztatva — a hatás az, mintha a darab élőben gyártódna. */
.gen-kisertet{
  position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: contain;
  opacity: 0; filter: blur(1px);
  transition: opacity .85s ease, filter .5s ease;
}
.gen-kisertet.aktiv{ opacity: .13; }
@media (prefers-reduced-motion: reduce){
  .gen-kisertet{ transition: none; }
}
/* a felirat a színpad aljára kerül, nem a sejtelmes figura arcára */
.gen-ures{
  position: absolute; bottom: 12px; display: flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(0,0,0,.55); backdrop-filter: blur(6px);
  color: #8C86A3; font-size: 11.5px; font-weight: 600; text-align: center;
}
.gen-ures svg{ flex: none; width: 16px; height: 16px; }
.gen-zar{
  position: absolute; bottom: 12px; display: none; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: rgba(0,0,0,.62); color: #F3F0FF; backdrop-filter: blur(6px);
}

/* dolgozik: az avatar helye lüktet, amíg készül */
.genszinpad[data-allapot="dolgozik"] .gen-kisertet.aktiv{ opacity: .3; filter: blur(10px); }
.genszinpad[data-allapot="dolgozik"] .gen-ures{ color: #B9B3D0; }
.genszinpad[data-allapot="dolgozik"]::after{ animation: genlukt 1.1s ease-in-out infinite; }
@keyframes genlukt{ 0%,100%{ opacity:.5 } 50%{ opacity:1 } }

/* kész: fizetés előtt homályos — a forma és a szín látszik, a részlet nem */
.genszinpad[data-allapot="kesz"] .gen-kisertet.aktiv{ opacity: 1; filter: blur(13px); }
.genszinpad[data-allapot="kesz"] .gen-ures{ display: none; }
.genszinpad[data-allapot="kesz"] .gen-zar{ display: flex; }

/* --- őrültség-fok --- */
.gen-dial{ align-items: center; width: 100%; }
.dials{ display: flex; gap: 6px; }
.dial{
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  background: transparent; color: #9A93B8;
  border: 1.5px solid rgba(255,255,255,.14); border-radius: 999px;
  padding: 6px 13px; font-size: 12px; font-weight: 700;
}
.dial-jel{
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.22); transition: background .2s ease, box-shadow .2s ease;
}
.dial[aria-pressed="true"]{ color: #F3F0FF; border-color: var(--accent); }
.dial[aria-pressed="true"] .dial-jel{
  background: var(--accent); box-shadow: 0 0 0 4px rgba(255,61,119,.22);
}
.dial[data-szint="2"][aria-pressed="true"] .dial-jel{
  background: #F5B942; box-shadow: 0 0 0 4px rgba(245,185,66,.24);
}
.dial:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.dial-sugo{ font-size: 11.5px; color: #9A93B8; min-height: 15px; text-align: center; }

.gen-nev{ display: flex; flex-direction: column; align-items: center; gap: 1px; }
.gen-nev-cimke{ font-size: 9.5px; color: #6F6A85; letter-spacing: .08em; text-transform: uppercase; }
.gen-nev strong{ font-size: 15px; color: #F3F0FF; text-align: center; }

.gen-cta{ width: 100%; max-width: 420px; justify-content: center; }
.gen-note{ font-size: 11.5px; color: #6F6A85; text-align: center; }

/* --- színvariánsok: a valódi recolor_variant képei, nem CSS-szűrő --- */
.szinlapok{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.szinlap{
  position: relative; padding: 0; cursor: pointer; overflow: hidden;
  width: calc((100% - 16px) / 3);
  background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 12px;
  aspect-ratio: 1/1; opacity: .78;
  transition: opacity .2s ease, border-color .2s ease, transform .2s ease;
}
.szinlap img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.szinlap:hover{ opacity: 1; }
.szinlap.aktiv{ opacity: 1; border-color: var(--accent); transform: translateY(-2px); }
.szinlap:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.szinpont{
  position: absolute; top: 6px; left: 6px; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,.45);
}
/* a színnév csak a kiemelt lapkán jelenik meg, hogy ne legyen zsúfolt */
.szinnev{
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 4px;
  font-size: 10px; font-weight: 700; color: #F3F0FF;
  background: linear-gradient(transparent, rgba(0,0,0,.82));
  opacity: 0; transition: opacity .2s ease;
}
.szinlap.aktiv .szinnev, .szinlap:hover .szinnev{ opacity: 1; }

/* --- vásárlás: a felület egyben kosárfelület is --- */
.vasarlas{ display: flex; flex-direction: column; gap: 8px; }
/* a magyarázó sor a színválasztó ALATT, az ajánlatok FÖLÖTT — így a
   színek és az árak közé kerül, és nem szorítja az alatta lévő listát */
.vasarlas-jelzes{ text-align: center; line-height: 1.45; margin-bottom: 2px; }
/* A JOBB SÁV AZ ÉRTÉKESÍTÉSI FELÜLET. A rács kiegyensúlyozásakor nyert
   szélességet itt használjuk el: az ajánlat ne legyen tipográfiailag
   alárendelve a bal oldali vezérlőknek, mert ez a konverziós elem. */
.ajanlat{
  position: relative; display: flex; flex-direction: column; gap: 3px; width: 100%;
  padding: 13px 15px; text-align: left; cursor: pointer; flex: none;
  background: var(--surface); color: var(--ink);
  border: 1.5px solid var(--border); border-radius: 13px;
  transition: border-color .2s ease, background .2s ease, opacity .2s ease;
}
.ajanlat:hover:not([disabled]){ border-color: var(--ink-faint); background: var(--surface-2); }
.ajanlat[disabled]{ opacity: .55; cursor: not-allowed; }
.ajanlat-fej{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ajanlat-fej strong{ font-size: 15px; }
.ajanlat-ar{ font-family: 'Space Mono', ui-monospace, monospace; font-size: 19px; font-weight: 700; }
.ajanlat-alcim{ font-size: 11.5px; color: var(--ink-muted); }
.ajanlat.kiemelt{ border-color: var(--accent); background: var(--accent-soft, rgba(255,61,119,.08)); padding-top: 18px; }
.ajanlat.kiemelt .ajanlat-ar{ color: var(--accent); }
.cimke{
  position: absolute; top: -8px; left: 12px; padding: 2px 8px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 9px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
}
.vasarlas-lista{ list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 3px; }
.vasarlas-lista li{ font-size: 10.5px; color: var(--ink-muted); padding-left: 13px; position: relative; }
.vasarlas-lista li::before{
  content: ""; position: absolute; left: 0; top: 6px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--accent);
}

/* --- Hall of Fame --- */
.hof{
  margin-top: 14px; padding: 16px clamp(14px, 1.8vw, 22px) 18px;
  border: 1px solid var(--border); border-radius: 18px; background: #121212; color: #F3F0FF;
  display: flex; flex-direction: column; gap: 14px;
}
/* a felirat egy sorban fut a sáv fölött, hogy a figuráknak maradjon
   a teljes szélesség — ezért nem oszlop, hanem sor */
.hof-fej{
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; min-width: 0;
}
.hof-fej .eyebrow{ margin: 0; flex: none; color: #F3F0FF; }
.hof-fej span{ font-size: 12px; color: #9A93B8; line-height: 1.5; }
.hof-fej b{ color: #F3F0FF; }
/* az épp kiemelt darab neve a sor végén, jobbra kifutva */
.hof-fej strong{ font-size: 13px; color: var(--accent); margin-left: auto; flex: none; }

/* nyolc egyenlő oszlop: a figurák pontosan kitöltik a sáv szélességét */
.hof-sor{ display: grid; grid-template-columns: repeat(8, 1fr); gap: clamp(8px, 1vw, 14px); }
.hof-tile{
  width: 100%; aspect-ratio: 1/1; padding: 0; cursor: pointer;
  background: #0D0D0D; border: 1.5px solid rgba(255,255,255,.10); border-radius: 16px;
  overflow: hidden; opacity: .68;
  transition: opacity .25s ease, transform .25s ease, border-color .25s ease;
}
.hof-tile img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.hof-tile:hover{ opacity: 1; transform: translateY(-2px); }
.hof-tile.aktiv{ opacity: 1; border-color: var(--accent); transform: translateY(-4px); }
.hof-tile:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* a generált prompt előnézete — fejlesztői visszajelzés, amíg nincs API */
.gen-prompt{
  margin-top: 10px; font-family: 'Space Mono', ui-monospace, monospace; font-size: 10.5px;
  line-height: 1.5; color: #9A93B8; background: #0D0D0D;
  border: 1px solid rgba(255,255,255,.10); border-radius: 10px; padding: 10px;
  max-height: 54px; overflow: auto; width: 100%; max-width: 420px; white-space: pre-wrap;
}

/* A három sáv — vezérlők | avatar | eladás — akkor is megmarad, ha a
   kijelző keskenyebb: csak a rögzített 16:9-et engedjük el, mert az
   nyomná össze a vezérlőket. Egymás alá csak 700 px alatt kerülnek. */
@media (max-width: 1100px){
  .gen16{ aspect-ratio: auto; min-height: 0; }
  .genoszlop{ overflow: visible; }
  .genszinpad{ min-height: 220px; }
  .genblokk .chip{ font-size: 11.5px; padding: 5px 10px; }
  .genblokk .chip.mini{ font-size: 11px; padding: 4px 9px; }
}

@media (max-width: 700px){
  .gen16{ grid-template-columns: 1fr; }
  .hof-sor{ grid-template-columns: repeat(4, 1fr); }
  .gen-kozep{ order: -1; padding-bottom: 20px; }
  .szinlap{ width: calc((100% - 28px) / 5); }
  .hof{ gap: 12px; }
  .hof-fej strong{ margin-left: 0; }
  .dials{ flex-wrap: wrap; justify-content: center; }
}

/* ---------- hero lede kiemelései ----------
   A felütés ugyanabban a méretben és stílusban marad, csak a súlya nő;
   a „generátor" pedig CSAK színnel emelkedik ki — mérete nem változik,
   különben szétesne a bekezdés ritmusa. */
.hero p.lede .lede-lead{ font-weight: 800; color: var(--ink); }
.hero p.lede em{ font-style: normal; font-weight: 700; color: var(--accent); }

/* ---------- a termék-sávok jobb éle ----------
   A sáv vízszintesen görgethető, de az éles vágás nem árulta el, hogy arra
   még van tartalom. Halvány, keskeny elhalványodás jelzi — és eltűnik,
   amint a látogató a sáv végére ért, hogy ne sugalljon többet a valóságnál.
   A görgetősáv (10 px) szabadon marad alatta. */
.rail-wrap{ position: relative; }
.rail-wrap::after{
  content: ""; position: absolute; top: 0; right: 0; bottom: 10px; width: 34px;
  pointer-events: none; opacity: .7; transition: opacity .25s ease;
  background: linear-gradient(to right, transparent, var(--bg));
}
.rail-wrap[data-veg]::after{ opacity: 0; }

/* ---------- hero mozaik felirata ----------
   Pár pixellel feljebb: a két gyűrűsor közötti optikai középpont kissé
   magasabban van, mint a geometriai közép. A design_base.css-t nem
   módosítjuk, csak felülírjuk. */
.mosaic-tag{ transform: translate(-50%, calc(-50% - 6px)); }

/* ---------- hero mozaik ----------
   Néhány pixellel feljebb, hogy az alsó karikák ne tapadjanak a bizalmi
   sávhoz. Eltolással (transform), nem margóval: így az elrendezés, a hero
   magassága és a sáv helye egyáltalán nem változik. */
.mosaic{ transform: translateY(-8px); }

/* ---------- hero mozaik: a karikák ugrálásának javítása ----------
   MÉRT HIBA, nem ízlés kérdése. A design_base.css három oszlopot ír elő
   (`repeat(3,1fr)`), de a hero jobb hasábja ehhez keskeny: a harmadik sáv
   kimérve NULLA pixelre omlott össze (179.867px 189.289px 0px), így a 3. és
   a 6. karika szélessége 0 lett, és kicsúszott a mezőből. Ahogy az ablak
   változik, ez az összeomlás billeg — ettől ugrálnak a karikák.

   Ráadásul a függőleges eltolások SZÁZALÉKOSAK (align-self:end, margin-top
   18%/10%), tehát minden méretváltozáskor elmozdulnak. Egy nyugodt, stabil
   2×2-es rács jobban is néz ki, és minden szélességen ugyanaz marad.
   A design_base.css-t nem módosítjuk, csak felülírjuk. */
/* `1fr` önmagában nem elég: a sáv nem mehet a tartalom alá, a kör 1:1-es
   oldalaránya pedig visszahat a szélességre — ettől lettek egyenlőtlenek az
   oszlopok (137 vs 198 px). A `minmax(0, 1fr)` elvágja ezt a visszacsatolást,
   a négyzetes cellában pedig az oldalarányt a cella adja, nem a kör. */
.mosaic{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
/* A kör SAJÁT 1:1-es oldalaránya adja a magasságot — ezt nem szabad
   elvenni tőle (`aspect-ratio: auto`-val a sorok nullára estek, kimérve).
   Csak az igazítást vesszük vissza, hogy ne mozogjon méretezéskor. */
.mosaic .halo{ align-self: start; margin-top: 0; }
.mosaic .halo:nth-child(5), .mosaic .halo:nth-child(6){ display: none; }

/* ---------- „mind az 5 szín" csomag-gomb ----------
   Inverz vizuál: a sima Kosárba akcentszínnel tölt, ez sötét tintával.
   Így egymás alatt is elkülönül a kettő, és a csomag nem tűnik
   másodrendűnek — üzletileg ez a jobb vásárlás. */
.btn-csomag{
  margin-top: 10px; background: var(--ink); color: var(--bg);
  border: 1.5px solid var(--ink); font-weight: 700;
  transition: opacity .18s ease, transform .18s ease;
}
.btn-csomag:hover{ opacity: .88; }
.btn-csomag:active{ transform: translateY(1px); }
.btn-csomag[disabled]{ opacity: .45; cursor: not-allowed; }
.csomag-megjegyzes{
  margin: 8px 0 0; font-size: 12px; color: var(--ink-muted); text-align: center;
}
.csomag-megjegyzes strong{ color: var(--accent); }

/* ---------- egy lépés vissza ----------
   Szándékosan halk: ugyanaz a méret és szín, mint a morzsamenüé, és a
   SORÁN BELÜL ül, hogy ne kapjon külön vizuális súlyt és ne nőjön az oldal.
   Ott van, ahol a szem ösztönösen keresi — bal fent —, de nem kér figyelmet.
   A katalógusoldalra szándékosan NEM tettük: az felső szintű cél, oda a
   fejlécből is egy kattintás. */
.crumb .vissza{
  color: var(--ink-faint); margin-right: 14px; padding-right: 14px;
  border-right: 1px solid var(--border); white-space: nowrap;
}
.crumb .vissza:hover{ color: var(--ink); }
.crumb .vissza:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
/* a katalógus morzsája csak szűrt nézetben látszik */
.crumb[hidden]{ display: none !important; }

/* ---------- mobil-javítások (2026-09-07) ----------
   A `design_base.css`-hez NEM nyúlunk — minden felülbírálás itt van.

   1. A fejlécben a „Shop megnyitása" gomb 375 px-en kilógott a képernyőről:
      logó (170) + Kosár (85) + gomb (162) + hézagok > 375. Kimérve.
   2. A vízjeles-előnézet felirata két sorba tört, és a figura állát takaró
      széles táblává hízott. Egy sor, kisebb betű, kevesebb hely. */
@media (max-width: 620px){
  nav .wrap{ gap:10px; }
  .navcta{ gap:8px; min-width:0; }
  .navcta .btn{ padding:9px 13px; font-size:13px; white-space:nowrap; }
  nav .logo{ font-size:19px; letter-spacing:-.01em; }
}
@media (max-width: 430px){
  .navcta .btn{ padding:8px 11px; font-size:12px; }
  nav .logo{ font-size:17px; }
  nav .logo .ring{ width:14px; height:14px; }
}
/* A felirat mobilon RÖVIDEBB szöveget kap, nem levágottat: a „…" elrejtené
   pont a lényeget (hogy a megvásárolt fájl tiszta). */
.stage-note .note-rovid{ display:none; }
@media (max-width: 620px){
  .stage-note{
    left:10px; right:10px; bottom:10px; font-size:10px; padding:6px 10px;
    text-align:center; white-space:nowrap;
  }
  .stage-note .note-hosszu{ display:none; }
  .stage-note .note-rovid{ display:inline; }
}


/* ---------- jogi és kapcsolat oldalak ----------
   A forrás a két Markdown dokumentum; ez csak a megjelenítés. Az olvashatóság
   a lényeg: keskeny hasáb, nagy sorköz — jogi szöveget senki nem akar 120
   karakteres sorokban olvasni. */
.jogi{ max-width: 78ch; padding-block: 8px 64px; }
.jogi h1{ font-size: clamp(28px,4vw,40px); font-weight:800; margin:18px 0 10px; }
.jogi h2{ font-size: clamp(19px,2.4vw,24px); font-weight:800; margin:38px 0 10px;
          padding-top:18px; border-top:1px solid var(--border); }
.jogi h3{ font-size:17px; font-weight:700; margin:26px 0 8px; }
.jogi h4{ font-size:15px; font-weight:700; margin:20px 0 6px; color:var(--ink-muted); }
.jogi p, .jogi li{ line-height:1.72; font-size:15px; }
.jogi p{ margin:12px 0; }
.jogi ul, .jogi ol{ margin:12px 0 12px 22px; }
.jogi li{ margin:6px 0; }
.jogi hr{ border:0; border-top:1px solid var(--border); margin:34px 0; }
.jogi code{ font-family:'Space Mono', monospace; font-size:12.5px;
            background: color-mix(in oklab, var(--ink) 8%, transparent);
            padding:2px 6px; border-radius:6px; }
.jogi blockquote{ margin:18px 0; padding:14px 18px; border-left:3px solid var(--accent);
                  background: color-mix(in oklab, var(--ink) 4%, transparent);
                  border-radius:0 12px 12px 0; font-size:14.5px; }
.jogi blockquote p{ margin:0; }
.jogi a{ color:var(--accent); }

/* A táblázat SOSEM tolhatja szét a lapot — inkább görgessen saját magában. */
.tabla-gorgo{ overflow-x:auto; margin:16px 0; -webkit-overflow-scrolling:touch; }
.jogi table{ border-collapse:collapse; width:100%; min-width:420px; font-size:14px; }
.jogi th, .jogi td{ text-align:left; padding:10px 14px; border-bottom:1px solid var(--border);
                    vertical-align:top; }
.jogi th{ font-weight:700; white-space:nowrap; }
.jogi thead th{ font-family:'Space Mono'; font-size:11.5px; text-transform:uppercase;
                letter-spacing:.06em; color:var(--ink-muted); }

/* Amíg a dokumentumban maradt kitöltetlen mező, ez a sáv figyelmeztet. Magától
   eltűnik, amint az utolsó is kitöltésre kerül — nem lehet elfelejteni. */
.jogi-figyelem{
  margin:18px 0 26px; padding:14px 18px; border-radius:14px; font-size:14px;
  border:1px solid var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}


/* A generátor eladási listájának ELSŐ pontja: nem a felbontás adja el a
   terméket, hanem az, hogy nincs belőle másik. Ezért nagyobb és akcentszínű. */
.vasarlas-lista .kiemelt-elony{
  font-size: 13.5px; font-weight: 700; color: var(--accent);
  margin-bottom: 2px;
}
.vasarlas-lista .kiemelt-elony::marker{ color: var(--accent); }

/* A halk újragenerálás ugyanabban a sorban ül, ahol egyébként az
   állapotszöveg — cserélődik, nem mellé kerül. Nem gomb: nincs kerete,
   nincs háttere, és csak rámutatásnál erősödik. */
.gen-note.ujra{
  color: var(--ink-faint); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--border);
  cursor: pointer; background: none; border: 0; padding: 0; font: inherit;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.gen-note.ujra:hover{ color: var(--ink-muted); text-decoration-color: var(--ink-faint); }
.gen-note.ujra:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }


/* A címsorban az „as yesterday." egy sorban tartandó — külön sorba törve
   az „as" magában lóg, és elveszik a mondat lendülete. */
.hero h1 .egy-sor{ white-space: nowrap; }

/* ---------- generátor: a legyártott darabok közötti mozgás ----------
   A VEZÉRELV: a fekete színpad marad a főszereplő, és az újragenerálás ebbe
   ágyazódik — nem mellé kerül. Ezért a nyilak, a pöttyök és a kijelölő a
   színpadon ülnek, halkan, és CSAK a második darabtól jelennek meg. Ha az
   első darabnál látszana, hogy „még kettő jár", a puszta kíváncsiság
   végigvinné a felhasználót mind a hármon — miközben a cél az, hogy az első
   találjon. */
.gen-nyil{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.42);
  color: #EDE9FB; cursor: pointer; padding: 0; opacity: .32;
  transition: opacity .18s ease, background .18s ease;
}
.gen-nyil.bal{ left: 8px; }
.gen-nyil.jobb{ right: 8px; }
.genszinpad:hover .gen-nyil{ opacity: .72; }
.gen-nyil:hover{ opacity: 1; background: rgba(0,0,0,.62); }
.gen-nyil:focus-visible{ opacity: 1; outline: 2px solid var(--accent); outline-offset: 2px; }
.gen-nyil[disabled]{ opacity: .12; cursor: default; }

.gen-valaszt{
  position: absolute; top: 9px; right: 9px; display: inline-flex; align-items: center;
  gap: 5px; padding: 5px 10px; border-radius: 999px; cursor: pointer;
  font-family: 'Space Mono', ui-monospace, monospace; font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.5); color: #C9C2E4;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.gen-valaszt svg{ opacity: .35; transition: opacity .18s ease; }
.gen-valaszt:hover{ color: #F3F0FF; border-color: rgba(255,255,255,.42); }
.gen-valaszt[aria-pressed="true"]{
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.gen-valaszt[aria-pressed="true"] svg{ opacity: 1; }

.gen-pottyok{
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  display: flex; gap: 6px;
}
.gen-potty{
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.28); transition: background .18s ease;
}
.gen-potty.aktiv{ background: #F3F0FF; }
.gen-potty.valasztott{ background: var(--accent); }

/* A `hidden` attribútum önmagában csak `display:block`-ot tilt; a
   `.btn{display:inline-flex}` és a rácsok felülírják, és az elrejtett elem
   látszik marad. 2026-09-08-án pont ez történt a kosár „Tovább" gombjával.
   Egyetlen szabály, ami mindenhol érvényes — nem elemenként foltozunk. */
[hidden]{ display: none !important; }

/* ---------------------------------------------------------
   Fizetési űrlap a kosároldalon
   ---------------------------------------------------------
   A kosár marad a főszereplő: az űrlap csak akkor jelenik meg,
   amikor a vevő továbblép, és akkor is halkan nyílik ki. Nem
   akarunk azonnal hét mezőt az arcába tolni.
   A két pipa SOHA nem lehet előre bejelölve (ÁSZF 6. és 12.):
   az elállásról való lemondás és a kornyilatkozat csak tudatos
   kattintásból érvényes. */

.fiz{
  margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--border);
  max-width: 62ch;
}
@media (prefers-reduced-motion: no-preference){
  .fiz[data-nyilik]{ animation: fizNyilik .34s cubic-bezier(.22,.61,.36,1) both; }
}
@keyframes fizNyilik{ from{ opacity:0; transform: translateY(-6px); } to{ opacity:1; transform:none; } }

.fiz-cim{
  font-family:'Space Mono', ui-monospace, monospace; font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted);
  margin: 0 0 14px;
}
.fiz-cim + .fiz-pipa, .fiz-mezo + .fiz-cim{ margin-top: 22px; }

.fiz-mezo{ margin-bottom: 16px; }
.fiz-mezo label{
  display:block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--ink);
}
.fiz-mezo input, .fiz-mezo select{
  width: 100%; box-sizing: border-box; padding: 12px 13px;
  font-family: inherit; font-size: 15px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.fiz-mezo select{ appearance:none; cursor:pointer; padding-right: 38px;
  /* a nyíl beágyazva, hogy külső kérés ne induljon miatta */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B6480' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.fiz-mezo input:focus, .fiz-mezo select:focus{
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.fiz-mezo input[aria-invalid="true"], .fiz-mezo select[aria-invalid="true"]{
  border-color: var(--accent);
}
.fiz-sugo{ margin: 6px 0 0; font-size: 12.5px; color: var(--ink-muted); }

.fiz-pipa{
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  margin-bottom: 13px; font-size: 13.5px; line-height: 1.5; color: var(--ink-muted);
}
.fiz-pipa input{
  flex: none; width: 18px; height: 18px; margin: 1px 0 0; cursor: pointer;
  accent-color: var(--accent);
}
.fiz-pipa:hover span{ color: var(--ink); }

.fiz-slot{ margin: 20px 0 4px; }
.fiz-teszt{
  padding: 14px 15px; border-radius: 12px;
  background: var(--gold-soft); border: 1px solid var(--gold);
  font-size: 12.5px; line-height: 1.55; color: var(--ink);
}
.fiz-teszt .fiz-mezo{ margin: 12px 0 0; }
.fiz-teszt ul{ margin: 8px 0 0; padding-left: 18px; }
.fiz-teszt code{ font-family:'Space Mono', ui-monospace, monospace; font-size: 11.5px; }

.fiz-hiba{
  margin: 16px 0 0; padding: 12px 14px; border-radius: 10px;
  background: var(--accent-soft); color: var(--ink);
  border: 1px solid var(--accent); font-size: 13.5px; line-height: 1.5;
}
.fiz-siker{
  margin-top: 26px; padding: 22px 24px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border); font-size: 15px;
}

.fiz-gomb{ margin-top: 20px; padding: 15px 26px; width: 100%; justify-content: center; }
.fiz-gomb[disabled]{ opacity: .45; cursor: default; }

/* ---------------------------------------------------------
   Beágyazott stílusok helyett osztályok
   ---------------------------------------------------------
   Nem kozmetika: amíg `style="…"` attribútum van a lapon, a
   Content-Security-Policy csak `style-src 'unsafe-inline'`-nal
   működne — az pedig kinyitja a kaput a beszúrásos támadás előtt.
   17 538 attribútum volt a 507 oldalon, de csak 15-féle; ez a
   15 szabály váltja ki mindet, és a HTML is kisebb lett. */

.sw-original{ background:#FF3D77; }
.sw-blue    { background:#3A6FF7; }
.sw-green   { background:#0FA37A; }
.sw-gold    { background:#F5B942; }
.sw-violet  { background:#7C4DFF; }

.btn-blokk   { width:100%; justify-content:center; padding:15px; }
.btn-tovabb  { padding:15px 26px; }
.logo-sima   { text-decoration:none; }
.logo-also   { margin-bottom:12px; }
.szinblokk   { margin-bottom:22px; }
.nav-aktiv   { color: var(--ink); }
.eyebrow-halvany{ color: color-mix(in oklab, var(--bg) 55%, transparent); }
.dot-gold    { background: var(--gold); }
.szakasz-tapadt{ padding-bottom:0; }
.kosar-megjegyzes{ margin-top:20px; max-width:60ch; }
.foot-kozel  { margin-top:12px; }

/* A csapdamező: a vevő elől teljesen elrejtve, de a robot elől NEM.
   `display:none` helyett kimozgatjuk a képernyőről — sok robot kihagyja
   azt, ami display:none, és pont azt akarjuk, hogy kitöltse. */
.csapda{
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}