/* ==========================================================================
   AutoExtra - egyedi rendszamtabla keret
   Design system: one blue (#1D4ED8, a logóból), Montserrat display (a logó betűje) + Raleway body.
   Radius rule: visszafogott lekerekítés — a logó éles, a felület csak annyit lágyul,
   hogy ne vágjon. Konténer 6px, gomb és mező 4px, apróságok 3px.
   Accent rule (locked): a márkakék adja a struktúrát és a cselekvést is; piros csak hibára.
   ========================================================================== */

:root {
  /* brand — a logó legmélyebb kékje, 224° */
  --brand:        #1D4ED8;
  --brand-soft:   #88A4F2;
  --brand-wash:   #E7EDFD;
  --brand-ink:    #18378B;

  /* A cselekvés színe ugyanaz a kék, tömör kitöltésben: a korábbi rendszer
     "brand vs. accent" hue-különbsége a logóval értelmét vesztette, két
     egymás melletti kék csak zavarossá tenné. Az elsődleges gomb a
     márkaszínnel telik ki, a hover megy egy fokkal mélyebbre. */
  --accent:       var(--brand);
  --accent-strong:var(--brand);   /* fehér felirat rajta 6,7:1 — AA */
  --accent-hover: #1641B6;
  --accent-wash:  var(--brand-wash);
  --accent-ink:   var(--brand-ink);
  --on-accent:    #FFFFFF;

  /* the only red on the page, and only when something is wrong */
  --danger:       #C0392B;

  /* surfaces */
  --bg:           #F9FBFF;
  --surface:      #FFFFFF;
  --surface-2:    #F1F5FC;
  --surface-3:    #E4EBF8;

  /* ink */
  --ink:          #141A31;
  --ink-2:        #434C6A;
  --ink-3:        #5F6782;

  /* Színpad: ahol termék jelenik meg. A rendszámtábla kerete majdnem fekete,
     ezért ezek a felületek sötét témában is világosak maradnak — különben a
     tábla beleolvadna a háttérbe. */
  --stage:        var(--surface);      /* tervező vászna */
  --stage-2:      var(--surface-2);    /* katalógus- és kiemelt kártyák */
  --stage-3:      var(--surface-3);    /* kosár bélyegképek */

  --line:         rgba(20, 26, 49, .11);
  --line-strong:  rgba(20, 26, 49, .22);
  --shadow-sm:    0 1px 2px rgba(24, 36, 84, .06), 0 4px 12px rgba(24, 36, 84, .05);
  --shadow-md:    0 2px 6px rgba(24, 36, 84, .08), 0 18px 40px rgba(24, 36, 84, .10);
  --shadow-lg:    0 8px 24px rgba(24, 36, 84, .14), 0 32px 72px rgba(24, 36, 84, .18);

  /* Szögletes rendszer: a logó éles geometriájából. A három token a három
     rádiusz-szerep — ha valaha lágyítani kell egy réteget, itt az egy hely. */
  --r-container:  6px;   /* kártyák, panelek, modál, drawer */
  --r-field:      4px;   /* input, select, textarea */
  --r-action:     4px;   /* gomb, chip, ikon-gomb */

  --ease:         cubic-bezier(.16, 1, .3, 1);
  --dur:          .24s;

  --wrap:         1240px;
  --pad:          clamp(1.25rem, 4vw, 2.5rem);

  --font-display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;

  color-scheme: light dark;
}

/* -------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.022em;
  margin: 0;
  color: var(--ink);
}

p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }

/* the display values set on .sum, .empty and friends would otherwise beat the
   user-agent rule for [hidden] */
[hidden] { display: none !important; }

button, input, textarea, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* the skip link is the one visually hidden element that must come back */
a.sr-only:focus {
  position: fixed;
  top: .75rem; left: .75rem;
  z-index: 100;
  width: auto; height: auto;
  margin: 0; padding: .7rem 1.2rem;
  clip: auto; overflow: visible;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--brand);
  border-radius: var(--r-action);
  font-weight: 600;
  box-shadow: var(--shadow-md);
}

.eyebrow {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: .9rem;
}

.lede { color: var(--ink-2); font-size: 1.05rem; max-width: 58ch; }

/* -------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 44px;
  padding: .78rem 1.5rem;
  border-radius: var(--r-action);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.btn:active { transform: scale(.977); }

.btn--primary {
  background: var(--accent-strong);
  color: var(--on-accent);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-md); }

.btn--brand { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn--brand:hover { background: var(--brand-wash); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { background: var(--surface-2); border-color: var(--brand); }

.btn--block { width: 100%; }
.btn--sm { padding: .5rem 1.1rem; font-size: .86rem; min-height: 44px; }

.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn[disabled]:active { transform: none; }

/* -------------------------------------------------- header */

.hdr {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 68px;
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

@supports not (backdrop-filter: blur(4px)) { .hdr { background: var(--bg); } }

/* mobil: keskenyebb header, alacsonyabb gombok (Figma: 64px / 36px) */
@media (max-width: 680px) {
  .hdr { height: 64px; }
  .hdr__actions .btn--sm { min-height: 36px; padding: .4rem .95rem; }
  .hdr__actions .cartbtn,
  .hdr__actions .burger { width: 36px; height: 36px; font-size: 16px; }
}

/* "Egyedi tervező" mobilon csak "Tervező" */
.lbl-s { display: none; }
@media (max-width: 680px) {
  .lbl-l { display: none; }
  .lbl-s { display: inline; }
}

/* burger + lenyíló mobil menü */
.burger {
  display: none;
  width: 44px; height: 44px;
  place-items: center;
  border-radius: var(--r-action);
  border: 1px solid var(--brand);
  background: var(--surface);
  box-shadow: 0 4px 4.2px rgba(29, 78, 216, .10);
  color: var(--brand);
  font-size: 19px;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.burger:hover { background: var(--brand-wash); }
@media (max-width: 900px) { .burger { display: grid; } }

.mobilemenu {
  position: absolute;
  top: 100%; left: 0; right: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  padding: .4rem 1rem .8rem;
  z-index: 39;
}
.mobilemenu a {
  min-height: 60px;
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.mobilemenu a:last-child { border-bottom: 0; }
@media (min-width: 901px) { .mobilemenu { display: none !important; } }

/* a lenyitott mobil menü mögötti fátyol */
.menuveil {
  position: fixed;
  inset: 0;
  z-index: 38;
  background: rgb(255 255 255 / .75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.menuveil.is-open { opacity: 1; pointer-events: auto; }
@media (min-width: 901px) { .menuveil { display: none; } }
@media (prefers-reduced-motion: reduce) { .menuveil { transition: none; } }

.hdr__in {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  flex-shrink: 0;
}

/* a wordmark a képben van; keskenyen csak a jel fér el a gombok mellett */
.logo__full { display: block; height: 28px; width: auto; max-width: 100%; }
.logo__icon { display: none;  height: 30px; width: auto; }
/* Mobilon is kiírjuk a nevet: a lockup a gombok melletti maradék helyre
   zsugorodik, arányt tartva. A jel csak a legkeskenyebb készülékeken ugrik be,
   ahol a wordmark már olvashatatlan lenne. */
@media (max-width: 900px) {
  .hdr__in { gap: 12px; }
  .hdr .logo { flex: 0 1 auto; min-width: 0; }
  .hdr .logo__full { width: 190px; max-width: 100%; height: auto; }
  .hdr__actions { flex-shrink: 0; }
}
@media (max-width: 359px) {
  .hdr .logo__full { display: none; }
  .hdr .logo__icon { display: block; }
}
/* a footerben mindig a teljes lockup megy, ott van rá hely */
.logo--ftr .logo__full { display: block; height: 26px; }

.nav { display: flex; gap: 1.5rem; margin-left: auto; }

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.nav a:hover { color: var(--brand); }

.hdr__actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
/* Figma 85:5250 — fehér kitöltés + finom brand árnyék a navbar gombokon */
.hdr__actions .btn--brand,
.hdr__actions .cartbtn { background: var(--surface); box-shadow: 0 4px 4.2px rgba(29, 78, 216, .10); }
.hdr__actions .btn--brand:hover { background: var(--brand-wash); }
.hdr__actions .cartbtn:hover { background: var(--brand-wash); }
.nav ~ .hdr__actions { margin-left: 0; }

.cartbtn {
  position: relative;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-action);
  border: 1px solid var(--brand);
  background: transparent;
  color: var(--brand);
  cursor: pointer;
  font-size: 19px;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.cartbtn:hover { background: var(--brand-wash); }

.cartbtn__n {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: var(--r-action);
  background: var(--accent-strong);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 700;
  display: grid; place-items: center;
  transform: scale(0);
  transition: transform .2s var(--ease);
}
.cartbtn__n.is-on { transform: scale(1); }

@media (max-width: 900px) {
  .nav { display: none; }
  /* mobilon a Tervező + kosár jobbra igazodik */
  .nav ~ .hdr__actions { margin-left: auto; }
}

/* -------------------------------------------------- car preview component */

/* The plate frame is composited onto a real photo. The blank plate rectangle
   in the retired photo was measured at 58.97% / 57.45%, 9.94% x 3.61% of the image;
   the frame sits slightly proud of it on every side, hence the values below.
   `top` is a percentage of the BOX height, so it is re-stated per aspect
   ratio. `left` and the slot values are percentages of the IMAGE, so they
   stay constant. */

.carview {
  --z:  240%;      /* image width, relative to the box width */
  --zl: -103.5%;   /* image left,  relative to the box width */
  --zt: -75%;      /* image top,   relative to the box HEIGHT (4:3 default) */

  position: relative;
  overflow: hidden;
  border-radius: var(--r-container);
  background: var(--surface-2);
  aspect-ratio: 4 / 3;
}

.carview__zoom {
  position: absolute;
  width: var(--z);
  left: var(--zl);
  top: var(--zt);
}

.carview__zoom img { width: 100%; height: auto; display: block; }

.carview__slot {
  position: absolute;
  left: 58.70%;
  top: 57.19%;
  width: 10.48%;
  height: 4.73%;
  transform: perspective(900px) rotateY(-2deg);
  transform-origin: center;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .38));
}

.carview__slot svg { width: 100%; height: 100%; display: block; }

.carview--tight { aspect-ratio: 3 / 2; --z: 300%; --zl: -141.8%; --zt: -126.6%; }

/* -------------------------------------------------- hero */

/* A nyitóblokk: a hero és a kategória-widget együtt egy fehér mező. A minta
   a közös burkolón ül, különben a két szekció határán újraindulna a fázis.

   Levente pattern_recs.svg-je: 45 fokos vonások szórt rácsban, 5000-es csempe.
   A fájl 4,8 kB, ezért közvetlenül beágyazva megy — a közös fill az svg-re
   került, így a 40 alakzatból kimaradt 40 ismételt színattribútum.
   A felső réteg lecsengeti a mintát az alsó szélen. */
.heroblock {
  background-color: var(--surface);
  background-image:
    linear-gradient(to bottom, rgb(255 255 255 / 0) calc(100% - 160px), var(--surface)),
    url("data:image/svg+xml,%3Csvg%20fill='%23F8FBFF'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%205000%204999.96'%3E%3Cpolygon%20points='332.35%204249.55%200%204581.9%200%204168.04%20125.41%204042.61%20332.35%204249.55'/%3E%3Cpolygon%20points='332.35%202999.57%200%203331.92%200%202918.03%20125.4%202792.63%20332.35%202999.57'/%3E%3Cpolygon%20points='332.35%201749.57%200%202081.91%200%201668.04%20125.41%201542.62%20332.35%201749.57'/%3E%3Cpolygon%20points='332.35%20499.57%200%20831.93%200%20418.04%20125.4%20292.64%20332.35%20499.57'/%3E%3Cpolygon%20points='499.57%20332.34%20292.62%20125.41%20418.04%200%20831.92%200%20499.57%20332.34'/%3E%3Cpolygon%20points='292.64%203875.42%20750.41%203417.63%20957.34%203624.58%20499.57%204082.33%20292.64%203875.42'/%3E%3Crect%20x='301.3'%20y='1103.66'%20width='647.38'%20height='292.65'%20transform='translate(-700.8%20808.01)%20rotate(-45)'/%3E%3Cpolygon%20points='292.62%202625.4%20750.41%202167.63%20957.36%202374.56%20499.57%202832.35%20292.62%202625.4'/%3E%3Cpolygon%20points='418.06%204999.96%20750.41%204667.61%20957.36%204874.56%20831.94%204999.96%20418.06%204999.96'/%3E%3Crect%20x='926.3'%20y='1728.66'%20width='647.37'%20height='292.66'%20transform='translate(-959.71%201433.1)%20rotate(-45)'/%3E%3Cpolygon%20points='1582.35%204249.55%201124.58%204707.34%20917.63%204500.39%201375.4%204042.64%201582.35%204249.55'/%3E%3Crect%20x='926.29'%20y='2978.66'%20width='647.41'%20height='292.65'%20transform='translate(-1843.56%201799.09)%20rotate(-45)'/%3E%3Cpolygon%20points='1124.58%20957.35%20917.63%20750.4%201375.4%20292.64%201582.35%20499.57%201124.58%20957.35'/%3E%3Cpolygon%20points='1749.57%20332.36%201542.63%20125.41%201668.05%200%202081.92%200%201749.57%20332.36'/%3E%3Cpolygon%20points='2000.41%202167.64%202207.34%202374.57%201749.57%202832.35%201542.64%202625.4%202000.41%202167.64'/%3E%3Crect%20x='1551.3'%20y='1103.66'%20width='647.39'%20height='292.65'%20transform='translate(-334.71%201691.88)%20rotate(-45)'/%3E%3Cpolygon%20points='1749.57%204082.33%201542.63%203875.42%202000.41%203417.63%202207.36%203624.58%201749.57%204082.33'/%3E%3Cpolygon%20points='1668.05%204999.96%202000.4%204667.61%202207.34%204874.56%202081.94%204999.96%201668.05%204999.96'/%3E%3Cpolygon%20points='2374.59%203457.35%202167.64%203250.41%202625.41%202792.63%202832.34%202999.57%202374.59%203457.35'/%3E%3Cpolygon%20points='2832.35%204249.55%202374.57%204707.34%202167.62%204500.39%202625.41%204042.61%202832.35%204249.55'/%3E%3Crect%20x='2176.31'%20y='1728.66'%20width='647.37'%20height='292.65'%20transform='translate(-593.57%202317.01)%20rotate(-45)'/%3E%3Cpolygon%20points='2374.57%20957.35%202167.64%20750.4%202625.41%20292.64%202832.35%20499.57%202374.57%20957.35'/%3E%3Cpolygon%20points='2999.56%20332.34%202792.63%20125.41%202918.05%200%203331.93%200%202999.56%20332.34'/%3E%3Cpolygon%20points='2999.56%204082.33%202792.63%203875.38%203250.4%203417.63%203457.35%203624.58%202999.56%204082.33'/%3E%3Crect%20x='2801.3'%20y='2353.65'%20width='647.39'%20height='292.67'%20transform='translate(-852.46%202942.03)%20rotate(-45)'/%3E%3Crect%20x='2801.29'%20y='1103.67'%20width='647.41'%20height='292.65'%20transform='translate(31.38%202575.74)%20rotate(-45)'/%3E%3Cpolygon%20points='2918.05%204999.96%203250.4%204667.61%203457.35%204874.56%203331.93%204999.96%202918.05%204999.96'/%3E%3Cpolygon%20points='4082.34%204249.55%203624.57%204707.34%203417.62%204500.39%203875.41%204042.64%204082.34%204249.55'/%3E%3Cpolygon%20points='3624.57%203457.32%203417.62%203250.41%203875.41%202792.63%204082.36%202999.57%203624.57%203457.32'/%3E%3Crect%20x='3426.29'%20y='1728.65'%20width='647.41'%20height='292.67'%20transform='translate(-227.47%203200.81)%20rotate(-45)'/%3E%3Cpolygon%20points='3624.57%20957.35%203417.62%20750.4%203875.41%20292.64%204082.36%20499.57%203624.57%20957.35'/%3E%3Cpolygon%20points='4249.58%20332.34%204042.64%20125.41%204168.05%200%204581.93%200%204249.58%20332.34'/%3E%3Cpolygon%20points='4249.58%204082.33%204042.64%203875.38%204500.4%203417.63%204707.35%203624.54%204249.58%204082.33'/%3E%3Crect%20x='4051.29'%20y='2353.65'%20width='647.41'%20height='292.66'%20transform='translate(-486.33%203825.87)%20rotate(-45)'/%3E%3Cpolygon%20points='4707.35%201124.57%204249.58%201582.36%204042.64%201375.41%204500.4%20917.63%204707.35%201124.57'/%3E%3Cpolygon%20points='4168.05%204999.96%204500.4%204667.61%204707.33%204874.56%204581.93%204999.96%204168.05%204999.96'/%3E%3Cpolygon%20points='5000%20418.04%205000%20831.93%204874.58%20957.35%204667.63%20750.4%205000%20418.04'/%3E%3Cpolygon%20points='4667.63%202000.4%205000%201668.04%205000%202081.91%204874.56%202207.35%204667.63%202000.4'/%3E%3Cpolygon%20points='4667.63%203250.41%205000%202918.03%205000%203331.92%204874.58%203457.32%204667.63%203250.41'/%3E%3Cpolygon%20points='4667.65%204500.39%205000%204168.04%205000%204581.9%204874.58%204707.34%204667.65%204500.39'/%3E%3C/svg%3E");
  background-size: auto, 340px 340px;
}
@media (prefers-reduced-transparency: reduce) {
  .heroblock { background-image: none; }
}

.hero {
  padding-top: clamp(1.75rem, 3.5vw, 3rem);
  padding-bottom: 0;
  overflow: hidden;
  background: transparent;
}

.hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); }

.hero h1 em {
  font-style: italic;
  color: var(--brand);
  line-height: 1.12;
  padding-bottom: .06em;
  display: inline-block;
}

.hero__lede {
  margin-top: 1.05rem;
  font-size: 1.06rem;
  color: var(--ink-2);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.6rem;
}

/* Row two: the product itself. One real photo, the frame composited on the
   measured plate rectangle (28.2/40.1 to 72.3/72.5 in hero-clean.jpg). The
   SVG aperture must cover the photographed plate, hence the oversize. */
/* Tight crop of hero-clean.jpg: a 2.75:1 band centred on the plate.
   The 16:9 photo is 154.7% of the box height; shifted up 37.1% so the
   measured plate centre (56.29% of the image) sits mid-band. */
.carview--close {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-container);
  background: var(--surface-2);
  aspect-ratio: 2.75;
}
.carview--close img {
  position: absolute;
  width: 100%;
  top: -37.1%;
  left: 0;
}

.carview__slot--close {
  position: absolute;
  left: 4.2%;
  top: 20.9%;
  width: 92.1%;
  height: 66.5%;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .3));
}
.carview__slot--close svg { width: 100%; height: 100%; display: block; }


/* -------------------------------------------------- sections */

.sec { padding-block: clamp(3.25rem, 7vw, 6rem); }


.sec--wash { background: var(--surface-2); }
.sec--white { background: var(--surface); }
/* a főoldali matrica-kiemelés a keretsorral azonos ritmusban: 2 x 3 */
@media (min-width: 1000px) { #matricak .grid.grid--stickers { grid-template-columns: repeat(3, 1fr); } }

.sec__head { max-width: 46ch; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.sec__head h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); }
.sec__head p { margin-top: .75rem; color: var(--ink-2); }

.sec__headrow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.sec__headrow .lede { font-size: .95rem; max-width: none !important; }
.sec__headrow h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); }

/* -------------------------------------------- category widget (57:4226) */

.catsec {
  padding-top: 20px;
  padding-bottom: clamp(2rem, 4vw, 2.75rem);
  background: transparent;
}

.catwidget {
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  box-shadow: 0 0 24px rgba(0, 0, 0, .1);
  overflow: hidden;
}

.catwidget__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 20px 20px 0;
}

.catwidget__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0;
  color: var(--ink);
}

.catwidget__lede {
  font-size: 13px;
  color: var(--ink-2);
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 820px) { .catwidget__lede { display: none; } }
/* Figma 94:1944 — mobilon a kategóriakártyák alatti teljes szélességű gomb */
.catwidget__all { display: none; margin-top: 14px; background: var(--surface); }
.sec__allbtn { display: none; margin-top: 1.25rem; background: var(--surface); }
@media (max-width: 680px) {
  /* a gomb a widget 20px-es belső paddingján belül marad, nem ér ki a szélig */
  .catwidget__all { display: flex; width: auto; margin: 14px 20px 20px; }
  .sec__headrow-btn { display: none; }
  .sec__allbtn { display: inline-flex; }
}

.catscroll {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 107px;
  padding: 0 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 20px;
  scrollbar-width: thin;
}

/* flexbox swallows padding-right past overflowing content; a spacer keeps
   the last card 20px off the edge when scrolled to the end */
.catscroll::after {
  content: "";
  flex: 0 0 9px;
}
.catscroll::-webkit-scrollbar { height: 6px; }
.catscroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }

.cat {
  scroll-snap-align: start;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cat:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }

.cat__ico {
  width: 42px; height: 42px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 6px;
  background: var(--brand-wash);
  color: var(--brand-ink);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cat:hover .cat__ico { background: var(--brand); color: #fff; }
.cat__ico svg { width: 22px; height: 22px; }

.cat__txt { display: grid; gap: 2px; }
.cat__txt strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16.6px;
  line-height: normal;
  color: var(--ink);
  white-space: nowrap;
}
.cat__note {
  font-size: 12.8px;
  line-height: normal;
  color: var(--ink-3);
  white-space: nowrap;
}

.cat--adult .cat__ico { background: #F6E7E4; color: #7A2E22; }
.cat--adult:hover .cat__ico { background: #7A2E22; color: #fff; }

/* -------------------------------------------------- catalogue page */

.cataloglayout {
  display: grid;
  gap: 1.75rem;
  align-items: start;
}
/* a grid-elemek min-width:auto alapértéke miatt a nem törő chipsor
   szétfeszítené az oldalt mobilon */
.cataloglayout > * { min-width: 0; }
@media (min-width: 900px) {
  .cataloglayout { grid-template-columns: 230px minmax(0, 1fr); }
  .catside { position: sticky; top: 84px; }
}

.catside__list { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 899px) {
  .catside__list {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: .5rem;
    gap: .4rem;
  }
}

.catlink {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  padding: .45rem .8rem;
  border: 0;
  border-radius: var(--r-field);
  background: transparent;
  color: var(--ink-2);
  font-size: .92rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.catlink:hover { background: var(--surface-2); color: var(--ink); }
.catlink.is-on { background: var(--brand-wash); color: var(--brand-ink); }
.catlink svg { width: 18px; height: 18px; flex-shrink: 0; }
.catlink__n { margin-left: auto; font-size: .78rem; color: var(--ink-3); font-weight: 600; padding-left: .5rem; }
.catlink.is-on .catlink__n { color: var(--brand-ink); }

/* ------------------------------------------------ matrica kártyák */

.grid.grid--stickers { grid-template-columns: repeat(2, 1fr); gap: .9rem; }
@media (min-width: 680px)  { .grid.grid--stickers { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .grid.grid--stickers { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 679px) {
  .grid--stickers .card__name { font-size: .92rem; }
  .grid--stickers .card__foot { flex-wrap: wrap; gap: .5rem; }
  .grid--stickers .card__body { padding: .8rem .9rem 1rem; }
}

.card__media--sticker {
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  padding: 0;
}
.card__media--sticker svg { width: 100%; height: 100%; display: block; }

/* a matrica-szűrő a lap tetején, nem sticky */
.subcats.subcats--top {
  position: static;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: .6rem;
  margin-bottom: 1.5rem;
  scrollbar-width: thin;
}
.subcats.subcats--top .subchip { flex-shrink: 0; }
.subchip__n { margin-left: .45rem; font-size: .74rem; color: var(--ink-3); font-weight: 600; }
.subchip.is-on .subchip__n { color: var(--brand-ink); }

.line__thumb--sticker { background: transparent; }
.line__thumb--sticker svg { width: 100%; height: auto; border-radius: 4px; }

/* ------------------------------------------ alkategória szűrősor */

.subcats {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.25rem;
}
@media (min-width: 900px) {
  /* mindig látható: a navbar alá tapad görgetésnél */
  .subcats {
    position: sticky;
    top: 68px;
    z-index: 30;
    background: var(--bg);
    padding: .55rem 0 .8rem;
    margin-bottom: .75rem;
  }
}

.subchip {
  min-height: 36px;
  padding: .4rem 1.05rem;
  border-radius: var(--r-action);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-2);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.subchip:hover { border-color: var(--brand-soft); color: var(--ink); }
.subchip.is-on { background: var(--brand-wash); border-color: transparent; color: var(--brand-ink); }

.card__acts { display: flex; align-items: center; gap: .5rem; }
.card__foot .btn--brand { min-height: 34px; padding: .3rem .95rem; font-size: .84rem; gap: 3px; /* + az ikonjel ~2px belso margoja = ~5px latszo tavolsag */ }
/* a Tabler-rács 24-ből ~20-at rajzol: 19.2px betűméretnél lesz a látható jel 16px */
.card__foot .btn--brand .ti { font-size: 19.2px; }
.editbtn {
  width: 34px; height: 34px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--r-action);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 19.2px; /* látható jel = 16px a Tabler belső paddingje miatt */
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.editbtn:hover { background: var(--brand-wash); border-color: var(--brand); color: var(--brand-ink); }

.subchip--back {
  width: 36px;
  min-width: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 16px;
  flex-shrink: 0;
}

.catside__sub {
  display: none;
  align-items: center;
  gap: .4rem;
  overflow-x: auto;
  padding-bottom: .5rem;
}
@media (max-width: 899px) {
  .subcats { display: none; }
  /* a matrica-oldal szűrője mobilon is kell */
  .subcats.subcats--top { display: flex; }
  .catlink--designer { display: none; }
  .catside {
    position: sticky;
    top: 64px;
    z-index: 30;
    background: var(--bg);
    transition: transform .22s var(--ease), opacity .18s var(--ease);
  }
  .catside.is-tucked { transform: translateY(-14px); opacity: 0; pointer-events: none; }
  .catside__sub[hidden] { display: none; }
  .catside__sub:not([hidden]) { display: flex; }
  .cataloglayout.has-cat .catside__list { display: none; }
  .catside__sub .catlink { flex-shrink: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .catside { transition: none; }
}

.catlink--designer { color: var(--accent-ink); background: var(--accent-wash); margin-bottom: .6rem; }
.catlink--designer:hover { background: var(--accent-strong); color: #fff; }
.catlink--designer:hover .catlink__n { color: #fff; }

/* -------------------------------------------------- catalogue */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.75rem;
}

.chip {
  min-height: 44px;
  padding: .5rem 1.15rem;
  border-radius: var(--r-action);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-2);
  font-size: .87rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.chip:hover { border-color: var(--brand); color: var(--ink); }
.chip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(.9rem, 2vw, 1.5rem);
}
@media (min-width: 680px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .grid { grid-template-columns: repeat(3, 1fr); } .grid--catalog { grid-template-columns: repeat(2, 1fr); } }

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-container);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }

.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-3);
  overflow: hidden;
}

/* fotó nélküli mockup: csak a keret, nagy, lágy árnyékkal */
.card__media--plate {
  aspect-ratio: 2.5;
  background: var(--stage-2);
  display: grid;
  place-items: center;
}
.plateview {
  width: 84%;
  filter: drop-shadow(0 22px 34px rgba(20, 26, 49, .22));
}
.plateview svg { width: 100%; height: auto; display: block; }

.card__media .carview {
  position: absolute; inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
  /* tighter crop than the hero so the design reads at card size */
  --z: 320%; --zl: -154.6%; --zt: -117.4%;
}

/* the printable strip, full card width, so the wording is actually legible */
.card__strip {
  padding: .7rem .8rem 0;
  background: var(--surface);
}
.card__strip svg { width: 100%; height: auto; display: block; border-radius: 3px; }

.card__body {
  padding: .95rem 1.05rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  flex: 1;
}

.card__name { font-weight: 600; font-size: .98rem; letter-spacing: -.005em; }
.card__cat { font-size: .78rem; color: var(--ink-3); }

.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-top: .8rem;
}

.price { font-weight: 700; font-size: 1.02rem; font-variant-numeric: tabular-nums; }

.empty {
  padding: 3.5rem 1.5rem;
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-container);
  color: var(--ink-2);
}
.empty i { font-size: 30px; color: var(--ink-3); }
.empty p { margin-top: .6rem; }

/* -------------------------------------------------- how it works (strip timeline) */

/* --------------------------------------------- folyamat (két hasáb) */

.process { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .process { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }

/* a lépések egy oszlopban, a számok függőleges vonalon */
.steps {
  display: grid;
  gap: 0;
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
}

.step {
  position: relative;
  padding: 0 0 1.9rem 3.9rem;
}
.steps .step:last-child { padding-bottom: 0; }

.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0; left: 0;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-action);
  background: var(--brand-wash);
  border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
  color: var(--brand-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
}
/* a chipeket összekötő függőleges vonal */
.step::after {
  content: "";
  position: absolute;
  top: 46px; bottom: .5rem; left: 19.5px;
  width: 2px;
  background: linear-gradient(var(--line-strong), color-mix(in srgb, var(--line-strong) 25%, transparent));
}
.steps .step:last-child::after { display: none; }

.step h3 { font-size: 1.16rem; margin-bottom: .3rem; padding-top: .35rem; }
.step p { color: var(--ink-2); font-size: .95rem; max-width: 46ch; }

/* termékfotó a valódi kerettel ráillesztve */
.process__shot {
  position: relative;
  margin: 0;
  border-radius: var(--r-container);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--surface-3);
  isolation: isolate;
}
.process__shot img { width: 100%; height: auto; display: block; }

.process__stamp {
  position: absolute;
  right: clamp(.7rem, 2vw, 1.15rem);
  top: clamp(.7rem, 2vw, 1.15rem);
  display: grid;
  gap: .05rem;
  padding: .55rem .95rem;
  border-radius: var(--r-action);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.1;
  color: var(--ink);
  text-align: center;
}
.process__stamp em {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--ink-3);
}

/* -------------------------------------------------- faq */

.sec--faq { background: var(--surface); }
@media (max-width: 859px) { .sec--faq { background: transparent; } }

.faqwrap { display: grid; gap: 2rem; }
@media (min-width: 1000px) {
  .faqwrap { grid-template-columns: minmax(0, 1fr) 402px; gap: 60px; align-items: start; }
}

.faq { display: grid; gap: .35rem; align-content: start; }

.qa {
  border-bottom: 1px solid var(--line);
  padding: .35rem 0;
}

.qa summary {
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  padding: .85rem 0;
  font-weight: 600;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.qa summary::-webkit-details-marker { display: none; }

.qa summary i {
  color: var(--brand);
  font-size: 18px;
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}
.qa[open] summary i { transform: rotate(45deg); }

.qa p { padding-bottom: 1rem; color: var(--ink-2); font-size: .95rem; max-width: 52ch; }

/* -------------------------------------------------- trust row */

.trust { display: grid; gap: 29px; align-content: start; }
@media (max-width: 859px) { .trust { gap: 14px; } }

/* Figma: fehér kártya, r16, #C5CCE0 keret, 20px padding, ikon + szöveg */
.trust__i {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid #C5CCE0;
  border-radius: 6px;
  padding: 20px;
}
.trust__i i { font-size: 20px; color: var(--brand); flex-shrink: 0; margin-top: 1px; }
.trust__i strong { display: block; font-size: .93rem; }
.trust__i span { font-size: .86rem; color: var(--ink-2); }

/* footer social gombok */
.ftr__social { display: flex; gap: .6rem; margin-top: 1rem; }
.socialbtn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--r-action);
  border: 1px solid var(--brand);
  background: var(--surface);
  color: var(--brand);
  font-size: 18px;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}
.socialbtn:hover { background: var(--brand-wash); }

/* -------------------------------------------------- footer */

.ftr {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
  font-size: .9rem;
}

.ftr__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.ftr h3 { font-family: var(--font-body); font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .8rem; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.ftr li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); text-decoration: none; }
.ftr a { color: var(--ink-2); text-decoration: none; }
.ftr a:hover { color: var(--brand); }

.ftr__base {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: .82rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
}

/* -------------------------------------------------- overlays: drawer + modal */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(11, 16, 38, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.scrim.is-open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 60;
  width: min(420px, 100%);
  background: var(--surface);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .28s var(--ease);
  box-shadow: var(--shadow-lg);
}
.drawer.is-open { transform: translateX(0); }

.drawer__hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid var(--line);
}
.drawer__hd h2 { font-size: 1.18rem; }

.iconbtn {
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--r-action);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-size: 19px;
  color: var(--ink-2);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.iconbtn:hover { background: var(--surface-2); color: var(--ink); }

.drawer__body { flex: 1; overflow-y: auto; padding: 1.25rem; }
.drawer__foot { border-top: 1px solid var(--line); padding: 1.25rem; }

.line {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: .9rem;
  align-items: center;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
}
.line:last-child { border-bottom: 0; }

.line__thumb {
  border-radius: 4px;
  overflow: hidden;
  background: var(--stage-3);
  padding: 6px;
  display: grid;
  place-items: center;
}
.line__thumb svg { width: 100%; height: auto; display: block; }

.line__name { font-weight: 600; font-size: .92rem; }
.line__meta { font-size: .78rem; color: var(--ink-3); }

.qty { display: inline-flex; align-items: center; gap: .1rem; margin-top: .35rem; }
.qty button {
  position: relative;
  width: 28px; height: 28px;
  border: 1px solid var(--line-strong);
  background: transparent;
  border-radius: var(--r-action);
  cursor: pointer;
  display: grid; place-items: center;
  font-size: 14px;
  color: var(--ink-2);
}
/* visually 28px, 44px to the thumb */
.qty button::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}
.qty button:hover { border-color: var(--brand); color: var(--brand); }
.qty span { min-width: 30px; text-align: center; font-weight: 600; font-size: .88rem; font-variant-numeric: tabular-nums; }

.sum { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .35rem; font-size: .9rem; color: var(--ink-2); }
.sum--total { color: var(--ink); font-size: 1.12rem; font-weight: 700; margin-bottom: 1.1rem; }
.sum--total span:last-child { font-variant-numeric: tabular-nums; }

/* modal */

.modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
  overflow-y: auto;
}
.modal.is-open { opacity: 1; pointer-events: auto; }

.modal__box {
  position: relative;
  width: min(520px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-container);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  transform: translateY(14px) scale(.97);
  transition: transform .26s var(--ease);
  margin-block: auto;
}
.modal.is-open .modal__box { transform: translateY(0) scale(1); }

.modal__close { position: absolute; top: .7rem; right: .7rem; }

.modal h2 { font-size: 1.5rem; }
.modal .lede { margin-top: .7rem; font-size: .98rem; }

.notice {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .9rem 1rem;
  border-radius: var(--r-field);
  background: var(--brand-wash);
  color: var(--brand-ink);
  font-size: .9rem;
  margin-top: 1.25rem;
}
.notice i { font-size: 19px; flex-shrink: 0; margin-top: 1px; }

/* -------------------------------------------------- forms */

.field { display: grid; gap: .4rem; margin-top: 1.25rem; }
.field label { font-size: .86rem; font-weight: 600; }

.field input[type="email"],
.field input[type="text"] {
  width: 100%;
  padding: .78rem .9rem;
  border-radius: var(--r-field);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input::placeholder { color: var(--ink-3); }
.field input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
.field input[aria-invalid="true"] { border-color: var(--danger); }

.field__err { font-size: .82rem; color: var(--danger); font-weight: 600; min-height: 0; }

.consent {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  margin-top: 1rem;
  font-size: .84rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.consent input {
  position: relative;
  width: 22px; height: 22px;
  margin-top: 1px;
  flex-shrink: 0;
  accent-color: var(--brand);
}
.consent input::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}
.consent a { color: var(--brand); font-weight: 600; }

.formnote { margin-top: .9rem; font-size: .78rem; color: var(--ink-3); }

.done { text-align: center; padding: 1rem 0; }
.done__icon {
  width: 56px; height: 56px;
  border-radius: var(--r-action);
  background: var(--brand-wash);
  color: var(--brand-ink);
  display: grid; place-items: center;
  font-size: 27px;
  margin: 0 auto 1.1rem;
}
.code {
  display: inline-block;
  margin-top: 1rem;
  padding: .6rem 1.4rem;
  border-radius: var(--r-field);
  border: 1px dashed var(--brand);
  background: var(--brand-wash);
  color: var(--brand-ink);
  font-weight: 700;
  letter-spacing: .12em;
  font-size: 1.05rem;
}


/* hero fejléc: cím + badge egy sorban, lede teljes szélességben alattuk */
.hero__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem 1rem;
  align-items: start;
}
.hero__head .hero__lede { grid-column: 1 / -1; }
.hero__badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  justify-self: end;
  margin-top: .4rem;
  padding: .75rem 1.35rem;
  background: var(--brand-wash);
  border: 1.5px dashed var(--brand);
  border-radius: 6px;
  color: var(--brand-ink);
  transform: rotate(1.5deg);
  text-align: center;
}
.hero__badge-t { font-size: .82rem; font-weight: 600; letter-spacing: .01em; }
.hero__badge-p { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.15; }
/* mobilon ugyanott, csak nagyon kicsiben; rövid szöveg + 2 soros H1 */
.bdg-s, .h1-s { display: none; }
@media (max-width: 899px) {
  .bdg-l, .h1-l { display: none; }
  .bdg-s, .h1-s { display: inline; }
  .hero .hero__title { font-size: clamp(1.25rem, 5.7vw, 2rem); }
  .hero__badge { padding: .35rem .6rem; border-width: 1px; border-radius: 4px; margin-top: .1rem; }
  .hero__badge-t { font-size: .58rem; }
  .hero__badge-p { font-size: .82rem; }
}

/* -------------------------------------------------- inline designer (hero) */

.dsg {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr) 190px;
  gap: 0;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-container);
  box-shadow: 0 0 24px rgba(0, 0, 0, .1);
  overflow: hidden;
}

/* the widget has a fixed stage height: panels scroll, the canvas centres */
@media (min-width: 941px) {
  .dsg { height: 475px; }
  .dsg__side { min-height: 0; display: flex; flex-direction: column; }
  .dsg__side > .dsg__panel { flex: 1; min-height: 0; }
  .dsg__side--right { overflow-y: auto; scrollbar-width: thin; display: block; }
  .dsg__mid { min-height: 0; }
}
@media (max-width: 940px) {
  /* Figma 88:9268 — a kártya max 530px, a tartalom görgethető */
  .dsg { display: flex; flex-direction: column; height: 530px; }
  .dsg .dsg__mid { display: contents; }
  .dsg .dsg__topbar { order: 1; }
  .dsg .dsg__canvas { order: 2; flex: none; padding: 18px 16px; height: 122px; }
  /* a tábla a fix magasságú vászonba illeszkedjen, ne lógjon ki tableten */
  .dsg .dsg__canvas > svg {
    width: auto; height: auto;
    max-width: 100%; max-height: 100%;
    margin-inline: auto;
  }
  .dsg .dsg__canvas.is-z1 > svg,
  .dsg .dsg__canvas.is-z2 > svg { max-width: none; max-height: none; }

  /* tableten a kártya és a vászon is magasabb, hogy a tábla ne törpüljön el */
  @media (min-width: 620px) {
    .dsg { height: 620px; }
    .dsg .dsg__canvas { height: 215px; }
  }
  .dsg .dsg__side--left { order: 3; flex: 1; min-height: 0; overflow-y: hidden; border-top: 1px solid var(--line); border-right: 0; display: flex; flex-direction: column; }
  .dsg .dsg__side--left .dsg__panel:not([data-panel="menu"]) { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .dsg .dsg__side--left .dsg__panel[hidden] { display: none; }
  .dsg .dsg__side--left .dsg__panel:not([data-panel="menu"]) .panel__scroll { flex: 1; min-height: 0; overflow-y: auto; }
  .dsg .dsg__side--left .dsg__panel .panel__adjust { flex: none; }
  .dsg .dsg__side--left .dsg__panel[data-panel="menu"] { overflow-y: auto; }
  .dsg .dsg__side--right { order: 4; flex: 1; min-height: 0; overflow-y: auto; border-top: 1px solid var(--line); border-left: 0; display: none; }
  .dsg .adjreopen { order: 5; }
  /* mobilon gomb, nem a kártya aljához hegesztett sáv */
  .dsg .dsg__cartbar {
    order: 6;
    flex: none;
    margin: 10px 12px 12px;
    border-radius: var(--r-field);
  }

  /* rétegek nézet: a toolbar gombja váltja */
  .dsg.layers-open .dsg__side--left { display: none; }
  .dsg.layers-open .dsg__side--right { display: block; }
  .dsg .dsg__layersbtn { display: grid; }
  .dsg .dsg__toolsep--m { display: block; }

  /* Adj hozzá: 2 oszlopos kompakt rács */
  .dsg__panel[data-panel="menu"] { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; align-content: start; }
  .dsg__panel[data-panel="menu"] .dsg__ptitle { grid-column: 1 / -1; }
  .dsg__panel[data-panel="menu"] .addbtn { padding: .35rem .5rem; font-size: .82rem; gap: .45rem; }
  .dsg__panel[data-panel="menu"] .addbtn__ic { width: 26px; height: 26px; font-size: 13px; }

  /* a beállításblokk csak kiválasztott elemnél látszik */
  .dsg [data-panel] .panel__adjust:not(.is-on) { display: none; }

  /* kompakt beállításblokk, hogy a panel tartalma (pl. szöveg input) ne nyomódjon össze */
  .dsg .panel__adjust { gap: .2rem; padding: .3rem .9rem .55rem; }
  .dsg .panel__adjust .dsg__lbl { gap: .1rem; }
  .dsg .panel__adjust input[type="range"] { margin: 0; }
  .dsg .dsg__side--left .dsg__panel:not([data-panel="menu"]) .panel__scroll { min-height: 132px; }

  /* iOS: 16px alatti inputoknál a Safari rázoomol fókuszkor — kikapcsoljuk */
  .dsg input, .dsg select, .dsg textarea { font-size: 16px !important; }
  /* a felirat mező soha ne nyomódjon össze */
  .dsg textarea[data-t-text] { min-height: 72px; }

  /* iOS Safari a grid-es görgetőben összenyomja a gyerekeket —
     flex oszlop + flex-shrink:0 minden mezőre */
  .dsg .dsg__side--left .dsg__panel .panel__scroll {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
  }
  .dsg .dsg__side--left .dsg__panel .panel__scroll > * { flex-shrink: 0; }
  .dsg .dsg__panel select { min-height: 44px; }

  /* rétegek nézet + kiválasztás: a bal panelből csak a beállításblokk látszik,
     a rétegek lista alatt, a kosársáv fölött */
  .dsg.layers-open .dsg__side--left { display: flex; flex: none; order: 5; border-top: 0; }
  .dsg.layers-open .dsg__side--left .panel__scroll { display: none !important; }
  .dsg.layers-open .dsg__side--left .dsg__panel[data-panel="menu"] { display: none; }

  /* beállítások (szín/méret/pozíció/forgatás) csukása-nyitása */
  .dsg .adjcollapse {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: .1rem 0 .25rem;
    border: 0;
    background: transparent;
    color: var(--accent-strong);
    font-size: 17px;
    cursor: pointer;
  }
  .dsg.adj-min .panel__adjust { display: none !important; }
  .dsg.adj-min.has-adj .adjreopen {
    display: flex;
    justify-content: center;
    padding: .2rem 0 .35rem;
    border: 0;
    border-top: 1px solid var(--line);
    background: var(--surface);
    color: var(--accent-strong);
    font-size: 17px;
    cursor: pointer;
  }
  .dsg__panel:not([data-panel="menu"]) { max-height: none; }
}

@media (max-width: 940px) {
}

.dsg__side {
  padding: .9rem;
  background: var(--bg);
}
.dsg__side--left { border-right: 1px solid var(--line); }
.dsg__side--right { border-left: 1px solid var(--line); }

.dsg__ptitle {
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .7rem;
}
.dsg__ptitle--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dsg__panel { display: grid; gap: .5rem; align-content: start; }

/* sub-panels: scrolling body on top, size/pos/rot pinned to the bottom */
.dsg__panel:not([data-panel="menu"]) {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0;
  min-height: 0;
}
.panel__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  display: grid;
  gap: .5rem;
  align-content: start;
  padding-bottom: .4rem;
}
.panel__adjust {
  flex-shrink: 0;
  display: grid;
  gap: .35rem;
  margin: 0 -.9rem -.9rem;
  padding: .55rem .9rem .9rem;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.panel__adjust--shadow {
  box-shadow: 0 -10px 14px -10px rgba(24, 36, 84, .28);
  position: relative;
}

/* logók/illusztrációk panel: a csúszkák csak kiválasztott elemnél jelennek meg, alulról felúszva */
[data-panel="logok"] .panel__adjust,
[data-panel="illusztraciok"] .panel__adjust { display: none; }
[data-panel="logok"] .panel__adjust.is-on,
[data-panel="illusztraciok"] .panel__adjust.is-on {
  display: grid;
  animation: adjust-in .22s ease-out;
}
@keyframes adjust-in {
  from { transform: translateY(14px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  [data-panel="logok"] .panel__adjust.is-on,
  [data-panel="illusztraciok"] .panel__adjust.is-on { animation: none; }
}

.addbtn {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  min-height: 40px;
  padding: .4rem .6rem;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--surface);
  color: var(--accent-ink);
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background-color var(--dur) var(--ease);
}
.addbtn:hover { background: var(--accent-wash); }
.addbtn__ic {
  width: 26px; height: 26px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 3px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
}
.addbtn--ghost { border-style: dashed; }
.addbtn--ghost .addbtn__ic { display: none; }

.dsg__back {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 36px;
  border: 0;
  background: none;
  padding: 0;
  font-size: .86rem;
  font-weight: 700;
  color: var(--brand);
  cursor: pointer;
}

.dsg__lbl {
  display: grid;
  gap: .25rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.dsg__panel input[type="text"],
.dsg__panel textarea {
  width: 100%;
  padding: .5rem .6rem;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
  font-size: .88rem;
  resize: vertical;
}
.dsg__panel input[type="text"]:focus,
.dsg__panel textarea:focus,
.dsg__panel select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}
.dsg__panel select {
  width: 100%;
  padding: .5rem .5rem;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
  font-size: .88rem;
}
.dsg__panel input[type="color"] {
  width: 100%;
  height: 36px;
  padding: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
  cursor: pointer;
}
.dsg__colorbig { height: 150px !important; }
.dsg__hex { font-family: ui-monospace, monospace; }
.dsg__panel input[type="range"] { width: 100%; accent-color: var(--brand); }

/* forgatás sor: rövidebb csúszka + tükrözés gomb a sor végén */
.adjust__row {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.adjust__row input[type="range"] { flex: 1; min-width: 0; }
.flipbtn {
  flex-shrink: 0;
  width: 30px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 15px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.flipbtn:hover { border-color: var(--brand); color: var(--brand); }
.flipbtn .ti { transform: rotate(90deg); }

.dsg__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 4px;
}

/* emblem cards: three per row, cells clamped so wide SVGs can't stretch the grid */
.dsg__grid--logos {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.ico--emblem {
  aspect-ratio: 1;
  min-width: 0;
  overflow: hidden;
  padding: 7px !important;
  border-radius: 4px !important;
  background: transparent !important;
}
.ico--emblem img,
.ico--emblem svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.dsg__grid .ico {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  padding: 0;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dsg__grid .ico:hover { border-color: var(--brand); color: var(--brand); }

.dsg__drop {
  display: grid;
  justify-items: center;
  gap: .3rem;
  padding: 1.2rem .8rem;
  border: 1.5px dashed var(--accent);
  border-radius: 4px;
  background: var(--accent-wash);
  color: var(--accent-ink);
  text-align: center;
  font-size: .78rem;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.dsg__drop:hover, .dsg__drop.is-over { background: color-mix(in srgb, var(--accent) 14%, #fff); }

/* helper copy in the panels: same size as the drop zone's format list */
.hint {
  font-size: .78rem;
  line-height: 1.5;
  color: var(--ink-3);
}
.hint.is-warn { color: var(--danger); font-weight: 600; }
.dsg__drop i { font-size: 22px; }
.dsg__drop strong { font-size: .82rem; line-height: 1.35; }
.dsg__drop span { color: var(--ink-3); }

.dsg__mid {
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

.dsg__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem .7rem 0;
}
/* zoomolt nézetben alul is annyi hely, mint felül */
.dsg.is-zoomed .dsg__topbar { padding-bottom: .6rem; }
.dsg__hgroup { display: inline-flex; gap: .35rem; }

.iconbtn--frame {
  width: 36px; height: 36px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--accent-ink);
  background: var(--surface);
}
.iconbtn--frame:hover { background: var(--accent-wash); color: var(--accent-ink); }
/* zoom határon: inaktív gomb (Figma: 4F46E5 @ 50%) */
.iconbtn--frame:disabled { opacity: .5; cursor: default; pointer-events: none; }
.iconbtn--danger { border-color: var(--danger); color: var(--danger); }
.iconbtn--danger:hover { background: #FBEDEB; color: var(--danger); }

.dsg__canvas {
  background: var(--stage);
  padding: .75rem clamp(.9rem, 3vw, 2.4rem);
  flex: 1;
  min-height: 0;
  display: grid;
  align-content: center;
}
.dsg__canvas svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 16px rgba(24, 36, 84, .16));
}

/* teljes szélességű tervező mód */
.dsg-fullrow { display: flex; justify-content: flex-end; margin-top: .5rem; }
.dsg-fullbtn .dsg-fullbtn__min { display: none; }
body.dsg-full .dsg-fullbtn .dsg-fullbtn__max { display: none; }
body.dsg-full .dsg-fullbtn .dsg-fullbtn__min { display: inline; }

.dsg-scrim {
  position: fixed;
  inset: 0;
  z-index: 59;
  background: rgba(10, 14, 34, .55);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s var(--ease);
}
body.dsg-full { overflow: hidden; }
body.dsg-full .dsg-scrim { opacity: 1; pointer-events: auto; }
body.dsg-full .dsg {
  position: fixed;
  z-index: 60;
  inset: 0;
  margin: auto; /* transform nélkül centírozunk, mert a .rise felülírná */
  width: min(1500px, calc(100vw - 28px));
  height: min(820px, calc(100vh - 84px));
  max-height: none;
}
body.dsg-full .dsg-fullrow {
  position: fixed;
  z-index: 61;
  right: 16px;
  top: 12px;
  margin: 0;
}
body.dsg-full .dsg-fullbtn { background: var(--surface); box-shadow: var(--shadow-md); }
@media (prefers-reduced-motion: reduce) { .dsg-scrim { transition: none; } }

/* mobil tervező vezérlők — desktopon rejtve */
.dsg__layersbtn, .dsg__toolsep--m, .adjcollapse, .adjreopen { display: none; }
.dsg__layersbtn.is-on { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }

/* zoom: 3 szint (alap + 2 nagyítás); nagyítva a vászon görgethető */
.dsg__toolsep { width: 1px; height: 22px; background: var(--line-strong); margin-inline: .3rem; align-self: center; }
.dsg__canvas.is-z1, .dsg__canvas.is-z2 {
  display: flex;
  align-items: flex-end;      /* a keret aljához igazítva, a teteje croppolódik */
  overflow-x: auto;
  overflow-y: hidden;
}
.dsg__canvas.is-z1 > svg { width: 155%; flex: none; }
.dsg__canvas.is-z2 > svg { width: 220%; flex: none; }
.dsg__canvas [data-el] { cursor: pointer; }

.dsg__cartbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: .6rem 1rem;
  border: 0;
  background: var(--accent-strong);
  color: var(--on-accent);
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.dsg__cartbar:hover { background: var(--accent-hover); }

/* layers */
.lay { display: grid; gap: 4px; align-content: start; min-height: 120px; }

.lay__empty {
  margin-top: 1.5rem;
  padding: .5rem .6rem;
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--accent-ink);
  font-size: .74rem;
  font-weight: 600;
  text-align: center;
}

.lay { gap: 6px; }

.lay__row {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 40px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--surface);
  font-size: .8rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  overflow: hidden;
}
.lay__row.is-on { background: var(--accent-wash); box-shadow: 0 0 0 1px var(--accent); }

.lay__kind {
  width: 34px;
  flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
}
.lay__name {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 0 .5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lay__act {
  width: 26px;
  flex-shrink: 0;
  display: grid; place-items: center;
  align-self: center;
  height: 26px;
  border: 0;
  background: none;
  font-size: 15px;
  cursor: pointer;
  border-radius: 3px;
  padding: 0;
}
.lay__act--dup { color: var(--accent); }
.lay__act--del { color: var(--danger); margin-right: .3rem; }
.lay__act:hover { background: var(--surface-2); }

/* -------------------------------------------------- toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 80;
  transform: translate(-50%, calc(100% + 2rem)); /* teljesen a képernyő alá, ne lógjon ki */
  background: var(--ink);
  color: var(--bg);
  padding: .8rem 1.3rem;
  border-radius: var(--r-action);
  font-size: .9rem;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  transition: transform .3s var(--ease);
  max-width: calc(100vw - 2rem);
}
.toast.is-on { transform: translate(-50%, 0); }

/* -------------------------------------------------- motion */

.rise { opacity: 0; transform: translateY(20px); }
.rise.is-in {
  animation: rise .46s var(--ease) both;
  animation-delay: var(--d, 0ms);
}

@keyframes rise { to { opacity: 1; transform: none; } }

.hero .rise { animation: rise .52s var(--ease) both; opacity: 0; }
.hero .rise:nth-child(1) { animation-delay: 60ms; }
.hero .rise:nth-child(2) { animation-delay: 140ms; }
.hero .rise:nth-child(3) { animation-delay: 220ms; }
.hero__stage.rise { animation-delay: 180ms; }

/* Reduced motion keeps every state change legible. What goes away is
   travel: entrance slides, lift on hover, image zoom, the hero rotation.
   Colour and opacity feedback stay, just faster. */
@media (prefers-reduced-motion: reduce) {
  .rise, .hero .rise, .hero__stage.rise {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .pane.is-on { animation: none; }

  .card:hover,
  .cat:hover,
  .cat:hover img,
  .sw:hover,
  .btn:active { transform: none; }

  .card, .cat, .cat img, .sw, .btn, .chip, .ico, .cartbtn, .iconbtn, .tab, .nav a {
    transition-duration: 80ms;
    transition-property: background-color, border-color, color, box-shadow, opacity;
  }

  /* overlays still need to read as arriving, so they fade without sliding */
  .drawer { transition: opacity 120ms var(--ease); transform: none; opacity: 0; }
  .drawer.is-open { opacity: 1; }
  .modal__box { transition: none; transform: none; }
  .toast { transition: opacity 120ms var(--ease); transform: translate(-50%, 0); opacity: 0; }
  .toast.is-on { opacity: 1; }
  .qa summary i { transition: none; }
}


/* ==========================================================================
   Nyelvválasztó — footer sáv (desktop) + burger menü (mobil)
   ========================================================================== */

.langsel__item {
  display: flex; align-items: center; gap: .55rem;
  min-height: 36px; padding: 0 .6rem;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-action);
  color: var(--ink-2); font: inherit; font-size: .88rem; text-align: left;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.langsel__item svg {
  width: 20px; height: 14px; flex: 0 0 auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .16) inset;
}

/* footer sáv */
.ftr__lang {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
}
/* a nyelv- és a témasor címkéje közös: fix minimum szélesség, hogy a két
   vezérlő egy vonalban kezdődjön bármelyik nyelven */
.ftr__preflbl {
  font-size: .78rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3);
  min-width: 9.5rem;
}
@media (max-width: 560px) { .ftr__preflbl { min-width: 0; } }
.langrow { display: flex; flex-wrap: wrap; gap: .3rem; }
.langrow .langsel__item { padding-inline: .7rem; color: var(--ink-3); }
.langrow .langsel__item:hover { border-color: var(--line); background: var(--surface); color: var(--ink); }
.langrow .langsel__item.is-on {
  border-color: var(--brand); background: var(--brand-wash);
  color: var(--brand); font-weight: 600;
}
.ftr__lang + .ftr__base { margin-top: 1.25rem; }

/* cégadatok: kötelező impresszum-tartalom, a copyright fölött */
.ftr__co {
  margin-top: 1.25rem;
  color: var(--ink-3);
  font-size: .82rem;
  line-height: 1.7;
}
.ftr__co + .ftr__base { margin-top: 1rem; padding-top: 1rem; }

/* ==========================================================================
   Sötét téma
   A témát a <html data-theme> hordozza, nem a média-lekérdezés — így a footer
   kapcsolója felül tudja írni a rendszer beállítását. Az attribútumot egy
   beágyazott script teszi ki még az első festés előtt, hogy ne villanjon.
   A --stage* hármas szándékosan világos marad: ott termék van, és a majdnem
   fekete keret beleolvadna a sötétbe.
   ========================================================================== */

:root[data-theme="dark"] {
  /* A márkakék világosodik: a #1D4ED8 sötét alapon 2,7:1 lenne, olvashatatlan.
     A gombkitöltés viszont mélyebb marad, hogy a fehér felirat átmenjen AA-n. */
  --brand:        #688DF3;
  --brand-soft:   #9DB4F8;
  --brand-wash:   #1C2540;
  --brand-ink:    #B9C9FA;

  --accent:       #2B5FE3;
  --accent-strong:#2B5FE3;
  --accent-hover: #3A6BE8;
  --accent-wash:  #1C2540;
  --accent-ink:   #B9C9FA;
  --on-accent:    #FFFFFF;

  --danger:       #F2685A;

  --bg:           #0B0F19;
  --surface:      #131825;
  --surface-2:    #1B2132;
  --surface-3:    #272F45;

  /* színpadok: világosak maradnak, hogy a tábla kirajzolódjon */
  --stage:        #F4F7FD;
  --stage-2:      #E8EDF7;
  --stage-3:      #DCE4F2;

  --ink:          #E8ECF6;
  --ink-2:        #A9B3CC;
  --ink-3:        #7E88A6;

  --line:         rgb(232 236 246 / .14);
  --line-strong:  rgb(232 236 246 / .26);

  /* sötéten az árnyék alig látszik, ezért mélyebb és a keret viszi a szerepet */
  --shadow-sm:    0 1px 2px rgb(0 0 0 / .40), 0 4px 12px rgb(0 0 0 / .30);
  --shadow-md:    0 2px 6px rgb(0 0 0 / .45), 0 18px 40px rgb(0 0 0 / .40);
  --shadow-lg:    0 8px 24px rgb(0 0 0 / .50), 0 32px 72px rgb(0 0 0 / .55);

  color-scheme: dark;
}

:root[data-theme="dark"] .heroblock {
  background-image:
    linear-gradient(to bottom, rgb(19 24 37 / 0) calc(100% - 160px), var(--surface)),
    url("data:image/svg+xml,%3Csvg%20fill='%23182034'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%205000%204999.96'%3E%3Cpolygon%20points='332.35%204249.55%200%204581.9%200%204168.04%20125.41%204042.61%20332.35%204249.55'/%3E%3Cpolygon%20points='332.35%202999.57%200%203331.92%200%202918.03%20125.4%202792.63%20332.35%202999.57'/%3E%3Cpolygon%20points='332.35%201749.57%200%202081.91%200%201668.04%20125.41%201542.62%20332.35%201749.57'/%3E%3Cpolygon%20points='332.35%20499.57%200%20831.93%200%20418.04%20125.4%20292.64%20332.35%20499.57'/%3E%3Cpolygon%20points='499.57%20332.34%20292.62%20125.41%20418.04%200%20831.92%200%20499.57%20332.34'/%3E%3Cpolygon%20points='292.64%203875.42%20750.41%203417.63%20957.34%203624.58%20499.57%204082.33%20292.64%203875.42'/%3E%3Crect%20x='301.3'%20y='1103.66'%20width='647.38'%20height='292.65'%20transform='translate(-700.8%20808.01)%20rotate(-45)'/%3E%3Cpolygon%20points='292.62%202625.4%20750.41%202167.63%20957.36%202374.56%20499.57%202832.35%20292.62%202625.4'/%3E%3Cpolygon%20points='418.06%204999.96%20750.41%204667.61%20957.36%204874.56%20831.94%204999.96%20418.06%204999.96'/%3E%3Crect%20x='926.3'%20y='1728.66'%20width='647.37'%20height='292.66'%20transform='translate(-959.71%201433.1)%20rotate(-45)'/%3E%3Cpolygon%20points='1582.35%204249.55%201124.58%204707.34%20917.63%204500.39%201375.4%204042.64%201582.35%204249.55'/%3E%3Crect%20x='926.29'%20y='2978.66'%20width='647.41'%20height='292.65'%20transform='translate(-1843.56%201799.09)%20rotate(-45)'/%3E%3Cpolygon%20points='1124.58%20957.35%20917.63%20750.4%201375.4%20292.64%201582.35%20499.57%201124.58%20957.35'/%3E%3Cpolygon%20points='1749.57%20332.36%201542.63%20125.41%201668.05%200%202081.92%200%201749.57%20332.36'/%3E%3Cpolygon%20points='2000.41%202167.64%202207.34%202374.57%201749.57%202832.35%201542.64%202625.4%202000.41%202167.64'/%3E%3Crect%20x='1551.3'%20y='1103.66'%20width='647.39'%20height='292.65'%20transform='translate(-334.71%201691.88)%20rotate(-45)'/%3E%3Cpolygon%20points='1749.57%204082.33%201542.63%203875.42%202000.41%203417.63%202207.36%203624.58%201749.57%204082.33'/%3E%3Cpolygon%20points='1668.05%204999.96%202000.4%204667.61%202207.34%204874.56%202081.94%204999.96%201668.05%204999.96'/%3E%3Cpolygon%20points='2374.59%203457.35%202167.64%203250.41%202625.41%202792.63%202832.34%202999.57%202374.59%203457.35'/%3E%3Cpolygon%20points='2832.35%204249.55%202374.57%204707.34%202167.62%204500.39%202625.41%204042.61%202832.35%204249.55'/%3E%3Crect%20x='2176.31'%20y='1728.66'%20width='647.37'%20height='292.65'%20transform='translate(-593.57%202317.01)%20rotate(-45)'/%3E%3Cpolygon%20points='2374.57%20957.35%202167.64%20750.4%202625.41%20292.64%202832.35%20499.57%202374.57%20957.35'/%3E%3Cpolygon%20points='2999.56%20332.34%202792.63%20125.41%202918.05%200%203331.93%200%202999.56%20332.34'/%3E%3Cpolygon%20points='2999.56%204082.33%202792.63%203875.38%203250.4%203417.63%203457.35%203624.58%202999.56%204082.33'/%3E%3Crect%20x='2801.3'%20y='2353.65'%20width='647.39'%20height='292.67'%20transform='translate(-852.46%202942.03)%20rotate(-45)'/%3E%3Crect%20x='2801.29'%20y='1103.67'%20width='647.41'%20height='292.65'%20transform='translate(31.38%202575.74)%20rotate(-45)'/%3E%3Cpolygon%20points='2918.05%204999.96%203250.4%204667.61%203457.35%204874.56%203331.93%204999.96%202918.05%204999.96'/%3E%3Cpolygon%20points='4082.34%204249.55%203624.57%204707.34%203417.62%204500.39%203875.41%204042.64%204082.34%204249.55'/%3E%3Cpolygon%20points='3624.57%203457.32%203417.62%203250.41%203875.41%202792.63%204082.36%202999.57%203624.57%203457.32'/%3E%3Crect%20x='3426.29'%20y='1728.65'%20width='647.41'%20height='292.67'%20transform='translate(-227.47%203200.81)%20rotate(-45)'/%3E%3Cpolygon%20points='3624.57%20957.35%203417.62%20750.4%203875.41%20292.64%204082.36%20499.57%203624.57%20957.35'/%3E%3Cpolygon%20points='4249.58%20332.34%204042.64%20125.41%204168.05%200%204581.93%200%204249.58%20332.34'/%3E%3Cpolygon%20points='4249.58%204082.33%204042.64%203875.38%204500.4%203417.63%204707.35%203624.54%204249.58%204082.33'/%3E%3Crect%20x='4051.29'%20y='2353.65'%20width='647.41'%20height='292.66'%20transform='translate(-486.33%203825.87)%20rotate(-45)'/%3E%3Cpolygon%20points='4707.35%201124.57%204249.58%201582.36%204042.64%201375.41%204500.4%20917.63%204707.35%201124.57'/%3E%3Cpolygon%20points='4168.05%204999.96%204500.4%204667.61%204707.33%204874.56%204581.93%204999.96%204168.05%204999.96'/%3E%3Cpolygon%20points='5000%20418.04%205000%20831.93%204874.58%20957.35%204667.63%20750.4%205000%20418.04'/%3E%3Cpolygon%20points='4667.63%202000.4%205000%201668.04%205000%202081.91%204874.56%202207.35%204667.63%202000.4'/%3E%3Cpolygon%20points='4667.63%203250.41%205000%202918.03%205000%203331.92%204874.58%203457.32%204667.63%203250.41'/%3E%3Cpolygon%20points='4667.65%204500.39%205000%204168.04%205000%204581.9%204874.58%204707.34%204667.65%204500.39'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .menuveil { background: rgb(11 15 25 / .78); }
:root[data-theme="dark"] .plateview { filter: drop-shadow(0 22px 34px rgb(0 0 0 / .45)); }
:root[data-theme="dark"] .trust__i { border-color: var(--line-strong); }
:root[data-theme="dark"] .card { border: 1px solid var(--line); }

/* a wordmark két fix változatban van; a téma dönti el, melyik látszik */
.logo__full--dark { display: none; }
:root[data-theme="dark"] .logo__full--light { display: none; }
:root[data-theme="dark"] .logo__full--dark  { display: block; }

/* ------------------------------------------------------- téma-kapcsoló */

.ftr__theme {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
  margin-top: .9rem;
}
.themeset { display: flex; flex-wrap: wrap; gap: .3rem; }
.themeset__item {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 36px; padding: 0 .7rem;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--r-action);
  color: var(--ink-3); font: inherit; font-size: .88rem;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.themeset__item .ti { font-size: 15px; }
.themeset__item:hover { border-color: var(--line); background: var(--surface); color: var(--ink); }
.themeset__item.is-on {
  border-color: var(--brand); background: var(--brand-wash);
  color: var(--brand); font-weight: 600;
}

/* ==========================================================================
   Süti-hozzájárulás
   Alulról felcsúszó kártya. A fejlécében a hátsó-keret fotó, alul-felül vágva
   úgy, hogy a tábla középen maradjon; a sínre kerülő felirat egy pozicionált
   sáv, ami a fotó saját feliratát takarja — ezért a színe a sín valódi
   árnyalata (#1D1D1F a fotóból mintázva).
   ========================================================================== */

.cookiebar {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 70;
  width: min(430px, calc(100vw - 2rem));
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-container);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translate(-50%, calc(100% + 2rem));
  transition: transform .42s var(--ease);
}
.cookiebar.is-in { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .cookiebar { transition: none; } }

.cookiebar__shot {
  margin: 0;
  height: 148px;
  overflow: hidden;
  display: grid;
  align-content: center;
  background: var(--stage-3);
}
.cookiebar__frame { position: relative; display: block; width: 100%; }
.cookiebar__frame img { display: block; width: 100%; height: auto; }

/* a fotó sínje — a mért arányok a képre vetítve */
.cookiebar__rail {
  position: absolute;
  left: 21.6%; width: 57.1%;
  top: 54.7%; height: 3.7%;
  background: #1D1D1F;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 3.5%;
  color: #FFFFFF;
}
.cookiebar__rail em {
  font-style: normal;
  font-weight: 700;
  font-size: clamp(6px, 1.55cqw, 11px);
  letter-spacing: .1em;
  white-space: nowrap;
}
.cookiebar__rail .ti { font-size: clamp(7px, 1.9cqw, 13px); line-height: 1; }
.cookiebar__frame { container-type: inline-size; }

.cookiebar__body { padding: 1.1rem 1.25rem 1.25rem; }
.cookiebar__body h2 { font-size: 1.12rem; }
.cookiebar__body p {
  margin-top: .5rem;
  color: var(--ink-2);
  font-size: .89rem;
  line-height: 1.55;
}
.cookiebar__acts {
  display: flex;
  gap: .5rem;
  margin-top: 1rem;
}
.cookiebar__acts .btn { flex: 1; min-height: 42px; padding-inline: .6rem; font-size: .88rem; }
.cookiebar__more {
  display: inline-block;
  margin-top: .75rem;
  color: var(--ink-3);
  font-size: .78rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookiebar__more:hover { color: var(--brand); }

@media (max-width: 480px) {
  .cookiebar { width: calc(100vw - 1.5rem); }
  .cookiebar__shot { height: 124px; }
  .cookiebar__acts { flex-direction: column-reverse; }
}

/* a matrica-kategóriák tizenötre nőttek: széles képernyőn tördeljünk,
   mert vízszintesen görgetni egy nem nyilvánvaló rejtett sort rossz csere */
@media (min-width: 900px) {
  .subcats.subcats--top { flex-wrap: wrap; overflow-x: visible; }
}

/* Matricapanel világos témában: ugyanaz a színpad, mint a táblás kártyáké,
   a rajz pedig tinta. A színek a renderelt SVG-ben attribútumként ülnek
   (0 specificitás), ezért ez a szabály felülírja őket — sötét témában
   viszont nincs felülírás, ott az attribútum-alapértékek maradnak:
   fehér rajz a sötétkék gradiensen, pont ahogy eddig. */
:root[data-theme="light"] .stk { color: var(--ink); }
:root[data-theme="light"] .stk__g1,
:root[data-theme="light"] .stk__g2 { stop-color: var(--stage-2); }