/* mompornhq — szilva + barack (jóváhagyva 2026-10-10). Pimpbunny-szerű szerkezet, saját kód és osztálynevek. */
/* Saját tárhelyről (Google Fonts v9, OFL): változó fontok, latin + latin-ext (pl/de/fr…); cirill nincs bennük → ru a tartalék stacket kapja. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700 800; font-display: swap; src: url(fonts/bricolage-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700 800; font-display: swap; src: url(fonts/bricolage-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/figtree-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/figtree-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
:root {
  --bg: #fbf7f5; --surface: #ffffff; --ink: #2b1630; --muted: #765f7a; --line: #ece1ec;
  --brand: #5e2a67; --spark: #c96f45; --on-brand: #ffffff; --thumb: #e9dce9;
  --f-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body: "Figtree", "Segoe UI", system-ui, sans-serif;
  --r: 12px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #150b18; --surface: #211325; --ink: #f5edf6; --muted: #b39cb8; --line: #3a2540;
  --brand: #c28bcc; --spark: #ffb48c; --on-brand: #1a0c1d; --thumb: #2c1a31; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #150b18; --surface: #211325; --ink: #f5edf6; --muted: #b39cb8; --line: #3a2540;
  --brand: #c28bcc; --spark: #ffb48c; --on-brand: #1a0c1d; --thumb: #2c1a31; color-scheme: dark }

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--f-body) }
a { color: inherit; text-decoration: none }
img { max-width: 100%; display: block }
button, input { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; border-radius: 6px }
h1, h2 { font-family: var(--f-display); font-weight: 800; letter-spacing: -.01em; text-wrap: balance; margin: 0 }

.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 16px }

/* fejléc */
.hd { display: grid; grid-template-columns: auto 1fr auto; gap: 14px 28px; align-items: center; padding-block: 16px 10px }
.logo { display: inline-flex; align-items: center; line-height: 0 }
.logo .lg { height: 40px; width: auto }
.lg-d { display: none }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lg-l { display: none } :root:not([data-theme="light"]) .lg-d { display: block } }
:root[data-theme="dark"] .lg-l { display: none } :root[data-theme="dark"] .lg-d { display: block }
.search { display: flex; align-items: center; gap: 10px; max-width: 460px; width: 100%; justify-self: center;
  border: 2px solid var(--line); background: var(--surface); border-radius: 999px; padding: 8px 16px; color: var(--muted) }
.search:focus-within { border-color: var(--brand) }
.search input { border: 0; outline: 0; background: transparent; width: 100%; min-width: 0; color: var(--ink) }
.search input::-webkit-search-cancel-button { cursor: pointer }
.search { position: relative }
/* autocomplete-lenyíló: pontosan a keresősáv alatt, azonos szélességben */
.acl { position: absolute; left: -2px; right: -2px; top: calc(100% + 6px); z-index: 30; list-style: none; margin: 0; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 34px rgba(20, 8, 24, .18);
  max-height: min(70vh, 470px); overflow-y: auto; overscroll-behavior: contain; color: var(--ink) }
.acl li[data-i] { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; cursor: pointer; min-width: 0 }
.acl li[data-i]:hover, .acl li.on { background: color-mix(in srgb, var(--brand) 10%, transparent) }
.acl img { width: 56px; height: 32px; object-fit: cover; border-radius: 6px; flex: none; background: var(--thumb) }
.acl .ico { width: 56px; height: 32px; display: grid; place-items: center; flex: none; color: var(--muted); font-size: 16px }
.acl .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px }
.acl .lbl small { display: block; color: var(--muted); font-size: 12px; line-height: 1.2 }
.acl mark { background: none; color: var(--brand); font-weight: 700 }
.acl .tag { flex: none; font: 600 10px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; padding: 4px 6px; border-radius: 5px }
.acl .tag.c { color: var(--spark); border: 1px solid var(--spark) }
.acl .tag.s { color: var(--muted) }
.acl.narrow .tag.s { display: none }
.acl .hdr { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 4px; font: 700 11px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.acl .clr { border: 0; background: none; color: var(--brand); font: 600 12px/1 var(--f-body); cursor: pointer; text-transform: none; letter-spacing: 0 }
.search svg { flex: none }
.tools { display: flex; gap: 8px; align-items: center }
.ib { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--ink); color: var(--bg); display: grid; place-items: center; cursor: pointer }
.langs { position: relative }
.langs summary { list-style: none; cursor: pointer; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 9px 14px; font-weight: 600; font-size: 14px }
.langs summary::-webkit-details-marker { display: none }
.langs ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; list-style: none; margin: 0; padding: 6px; min-width: 160px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(20, 8, 24, .15);
  display: grid; grid-template-columns: repeat(2, minmax(118px, 1fr)); gap: 2px 4px }   /* 14 nyelv: 2 oszlop × 7 sor (user 10-10) */
.langs a { display: block; padding: 6px 10px; border-radius: 6px; font-size: 14px; white-space: nowrap } .langs a:hover, .langs a[aria-current] { background: var(--line) }
.langs a[aria-current] { font-weight: 700 }

/* menü */
.nav { display: flex; gap: 4px 26px; flex-wrap: wrap; border-bottom: 2px solid var(--line); align-items: center }
.nav > a, .nav summary { font: 700 15px/1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; padding-block: 12px;
  border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer; list-style: none }
.nav summary::-webkit-details-marker { display: none }
.nav summary::after { content: " ▾"; font-size: 11px; color: var(--muted) }
.nav .on, .nav > a:hover, .nav summary:hover { color: var(--brand); border-color: var(--brand) }
.dd { position: relative }
.dd ul { position: absolute; left: 0; top: 100%; z-index: 20; list-style: none; margin: 0; padding: 8px; min-width: 200px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(20, 8, 24, .15) }
.dd ul.cols { columns: 2; min-width: 380px }
.dd li { break-inside: avoid } .dd a { display: block; padding: 7px 10px; border-radius: 6px; white-space: nowrap } .dd a:hover { background: var(--line) }
.dd .all a { color: var(--brand); font-weight: 600 }

/* szekciófejek */
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-block: 24px 14px; flex-wrap: wrap }
.sec-h.center { justify-content: center }
.sec-h h1, .sec-h h2 { font-size: 26px }
.sec-h a { color: var(--brand); font-weight: 600; font-size: 14px }
.cp-h { text-align: center; padding-block: 24px 4px } .cp-h h1 { font-size: 30px }

/* videókártyák */
.grid { display: grid; gap: 22px 18px; grid-template-columns: repeat(3, minmax(0, 1fr)) }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.grid.one { grid-template-columns: minmax(0, 1fr); gap: 16px }
.card { min-width: 0 }
.th { display: block; width: 100%; position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: var(--r); overflow: hidden; background: var(--thumb) }
.th img, .th video { width: 100%; height: 100%; object-fit: cover }
.th video { position: absolute; inset: 0 }
.badges { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 4px; z-index: 2 }
.badges span { font: 600 12px/1 var(--f-body); padding: 5px 7px; border-radius: 6px; background: rgba(12, 6, 14, .74); color: #fff; font-variant-numeric: tabular-nums }
.badges .hdb { background: var(--spark); color: #1a0c1d }
.labels { display: flex; gap: 6px; margin-top: 9px; align-items: center; min-width: 0; overflow: hidden; white-space: nowrap }
.chip { font-size: 13px; font-weight: 600; color: var(--brand); padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 10%, transparent);
  overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0 }
.chip:hover { background: var(--brand); color: var(--on-brand) }
.ago { font-size: 12px; color: var(--muted); margin-left: auto; flex: none; padding-left: 4px }
.more { text-align: center; padding-block: 22px 4px }
.btn { display: inline-block; background: var(--brand); color: var(--on-brand); font-weight: 700; padding: 11px 22px; border-radius: 999px }
.empty { color: var(--muted); padding-block: 20px }

/* kategóriacsempék */
.cats { display: grid; gap: 22px 16px; grid-template-columns: repeat(6, minmax(0, 1fr)) }
.cat { display: grid; gap: 2px; min-width: 0 }
.cat .th.sq { aspect-ratio: 1 }
.cat .cn { font: 700 16px/1.2 var(--f-display); text-align: center; margin-top: 8px }
.cat .cc { text-align: center; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums }
.cat:hover .cn { color: var(--brand) }
/* főoldal v3: a 12 legjobb kategória nagy, 16:9-es kártyán */
.cats.big { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 18px }
.cats.big .cn { font-size: 19px; text-align: left; margin-top: 10px }
.cats.big .cc { text-align: left; font-size: 14px }
.cat .th img { transition: transform .25s ease } .cat:hover .th img { transform: scale(1.03) }
@media (max-width: 1000px) { .cats.big { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 700px) { .cats.big { gap: 18px 12px } .cats.big .cn { font-size: 15px; margin-top: 6px } .cats.big .cc { font-size: 12px }
  .cats.sm { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px } .cats.sm .cn { font-size: 13px; margin-top: 5px } .cats.sm .cc { font-size: 11px } }
@media (prefers-reduced-motion: reduce) { .cat .th img { transition: none } .cat:hover .th img { transform: none } }

/* lista: rendezés + oldalsáv */
.sorts { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; padding-block: 8px 22px }
.sorts a { font: 700 15px/1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; color: var(--muted) }
.sorts a.on, .sorts a:hover { color: var(--brand) }
.cp { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 34px; align-items: start }
.cp-main { min-width: 0 }
.sh { font: 800 15px/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; margin: 0 0 12px }
.sh span { color: var(--muted); font-weight: 600 }
.durs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 26px }
.durs a { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; font-variant-numeric: tabular-nums }
.durs a.on { background: var(--brand); color: var(--on-brand); border-color: var(--brand) }
.clist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.clist a { display: flex; gap: 8px; font-size: 15px } .clist a span { color: var(--muted); font-variant-numeric: tabular-nums }
.clist a.on, .clist a:hover { color: var(--brand); font-weight: 600 }
.pager { display: grid; justify-items: center; gap: 12px; padding-block: 30px 6px }
.pg-row { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: nowrap; max-width: 100% }
.pg-num, .pg-arr { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; min-width: 44px; padding: 0 14px;
  border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  font: 700 15px/1 var(--f-body); font-variant-numeric: tabular-nums; transition: border-color .15s, color .15s, background .15s, transform .15s, box-shadow .15s }
.pg-num:hover, .pg-arr:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(94, 42, 103, .12) }
.pg-num.cur { background: var(--brand); border-color: var(--brand); color: var(--on-brand); box-shadow: 0 6px 18px rgba(94, 42, 103, .3) }
.pg-arr svg, .pg-more svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; flex: none }
.pg-arr.off { opacity: .35; pointer-events: none }
.pg-gap { color: var(--muted); font-weight: 700; padding: 0 2px; letter-spacing: 1px }
.pg-more { display: none }
.pg-info { margin: 0; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums }
@media (max-width: 600px) {
  .pg-row { gap: 5px } .pg-num, .pg-arr { height: 42px; min-width: 42px; padding: 0 10px; border-radius: 12px }
  .pg-arr span, .pg-num.far { display: none }
  .pg-more { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 420px; height: 50px; border-radius: 14px;
    background: var(--brand); color: var(--on-brand); font: 700 16px/1 var(--f-body); text-decoration: none; box-shadow: 0 8px 20px rgba(94, 42, 103, .28) }
}
.hero { padding-block: 22px 2px }
.hero h1 { font-size: 30px; line-height: 1.15; letter-spacing: -.01em }
.hero .lead { margin: 8px 0 0; color: var(--muted); font-size: 15.5px; max-width: 70ch }
.live { display: inline-flex; align-items: center; gap: 6px; vertical-align: 3px; margin-right: 6px; padding: 3px 9px 3px 8px; border-radius: 999px;
  background: color-mix(in srgb, #e5484d 14%, transparent); color: #d1343a; font: 800 11px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase }
.live i { width: 7px; height: 7px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 0 rgba(229, 72, 77, .6); animation: livep 1.8s infinite }
@keyframes livep { 0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .55) } 70% { box-shadow: 0 0 0 7px rgba(229, 72, 77, 0) } 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0) } }
@media (prefers-reduced-motion: reduce) { .live i { animation: none } }
.sec-h.first { padding-top: 18px }
.ctext.home-text { max-width: none; columns: 3 280px; column-gap: 36px; padding: 24px 28px }
.ctext.home-text h2 { column-span: all; margin-bottom: 12px } .ctext.home-text p { break-inside: avoid; margin: 0 0 12px }
@media (max-width: 600px) { .hero h1 { font-size: 24px } .hero .lead { font-size: 14.5px } }
.catlinks { margin-top: 30px; padding: 18px 20px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line) }
.catlinks h2 { font-size: 19px; margin-bottom: 12px }
.catlinks ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px }
.catlinks a { display: inline-flex; gap: 4px; align-items: baseline; padding: 7px 12px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; transition: border-color .15s, color .15s }
.catlinks a:hover { border-color: var(--brand); color: var(--brand) }
.catlinks a span { color: var(--muted); font-weight: 500; font-size: 12px; font-variant-numeric: tabular-nums }
.related-cats { margin-top: 30px } .related-cats .rc-h { font-size: 21px; margin-bottom: 14px }
.related-cats .cats { grid-template-columns: repeat(6, minmax(0, 1fr)) }
@media (max-width: 1100px) { .related-cats .cats { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
@media (max-width: 520px) { .related-cats .cats { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.ctext { margin-top: 30px; padding: 20px 22px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); max-width: 75ch }
.ctext h2 { font-size: 19px; margin-bottom: 8px } .ctext p { margin: 0 0 10px; color: var(--muted) } .ctext a { color: var(--brand); font-weight: 600 }

/* videólap */
.vp { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; padding-top: 20px; align-items: start }
.vp-main { min-width: 0 }
.player { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: var(--r); overflow: hidden; background: #0b0809 }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.vmeta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 14px }
.vlabels { display: flex; flex-wrap: wrap; gap: 6px } .vlabels .chip { font-size: 14px; padding: 6px 12px }
.vrow { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-top: 14px }
.vote { display: inline-flex; align-items: center; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 4px; position: relative }
.vb { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer;
  transition: background .15s, color .15s, transform .15s }
.vb svg { width: 20px; height: 20px; fill: currentColor }
.vb:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand) }
.vb:active { transform: scale(.92) }
.vb.up.on { background: var(--brand); color: var(--on-brand) }
.vb.down.on { background: var(--ink); color: var(--bg) }
.vc { display: inline-flex; gap: 6px; align-items: baseline; padding: 0 12px; font-variant-numeric: tabular-nums; color: var(--ink) }
.vc b { font-weight: 700; font-size: 15px } .vc i { font-style: normal; color: var(--muted) }
.vbar { position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden }
.vbar i { display: block; height: 100%; background: var(--spark) }
.vpct { margin-left: 10px; margin-right: 8px; font-size: 13px; font-weight: 700; color: var(--spark); font-variant-numeric: tabular-nums }
.vote.pop .vb.on { animation: vpop .35s ease }
@keyframes vpop { 50% { transform: scale(1.18) } }
.vinfo { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums }
.rel { min-width: 0 }

/* jogi oldalak */
.prose { max-width: 70ch; margin: 0 auto; padding-block: 10px 20px } .prose p { margin: 0 0 14px } .prose a { color: var(--brand); font-weight: 600 }

/* lábléc */
.ft { margin-top: 52px; border-top: 2px solid var(--line); padding-block: 38px 30px; text-align: center; display: grid; gap: 16px; justify-items: center }
.ft .logo .lg { height: 32px }
.fl { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; font-size: 16px } .fl a:hover { color: var(--brand) }
.fs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; font-size: 13px; color: var(--muted) } .fs a:hover { color: var(--ink) }
.rta { font: 800 13px/1 var(--f-display); letter-spacing: .06em; border: 2px solid var(--ink); padding: 6px 8px; border-radius: 4px }
.note { font-size: 13px; color: var(--muted); max-width: 70ch; margin: 0 }

/* mobil menü: a hamburger csak ≤ 700 px-en látszik (lásd lent), a panel balról csúszik be */
.burger { display: none }
.mnav-bg { position: fixed; inset: 0; z-index: 40; background: rgba(12, 5, 14, .55) }
.mnav { position: fixed; top: 0; bottom: 0; left: 0; z-index: 41; width: min(86vw, 340px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); color: var(--ink); padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px calc(env(safe-area-inset-bottom, 0px) + 24px);
  box-shadow: 8px 0 30px rgba(12, 5, 14, .3); transform: translateX(-105%); transition: transform .22s ease }
.mnav.open { transform: none }
.mnav-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px }
.mnav-hd .logo .lg { height: 30px }
.mnav ul { list-style: none; margin: 0; padding: 0 }
.mnav-main a { display: block; padding: 11px 6px; font: 700 16px/1.2 var(--f-display); border-bottom: 1px solid var(--line) }
.mnav-main a.on, .mnav-cats a.on, .mnav-langs a.on { color: var(--brand) }
/* lenyitható csoport (Categories, Language): alapból csukva, a nyíl lenyitáskor megfordul */
.mnav-acc { border-bottom: 1px solid var(--line) }
.mnav-acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 11px 6px; font: 700 16px/1.2 var(--f-display) }
.mnav-acc summary::-webkit-details-marker { display: none }
.mnav-acc summary .cnt { color: var(--muted); font: 600 13px/1 var(--f-body) }
.mnav-acc summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg); transition: transform .18s ease; color: var(--muted) }
.mnav-acc[open] summary::after { transform: translateY(2px) rotate(225deg); color: var(--brand) }
.mnav-acc > ul { padding: 2px 0 12px }
.mnav-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px }
.mnav-cats a { display: block; padding: 7px 4px; font-size: 14px; line-height: 1.25; min-width: 0 }
.mnav-cats a span { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums }
.mnav-langs { display: flex; flex-wrap: wrap; gap: 6px }
.mnav-langs a { padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; font-weight: 600; font-size: 14px }
body.menu-open { overflow: hidden }
@media (prefers-reduced-motion: reduce) { .mnav { transition: none } }

@media (max-width: 1000px) {
  .cats { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .cp, .vp { grid-template-columns: minmax(0, 1fr) }
  .side { order: 2 }
  .rel .grid.one { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 700px) {
  .hd { grid-template-columns: 1fr auto } .search { grid-column: 1 / -1; grid-row: 2; max-width: none }
  .grid, .grid.two { grid-template-columns: minmax(0, 1fr) }
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .logo .lg { height: 30px }
  .nav { display: none } .burger { display: grid } .langs { display: none }
  .cp-h h1 { font-size: 24px } .sec-h h1, .sec-h h2 { font-size: 22px }
}
@media (prefers-reduced-motion: no-preference) { .chip, .btn { transition: background .15s, color .15s } }