:root {
  /* Nala palette */
  --barackkrem: #FEEBD7;
  --pir: #F4A394;
  --pasztellrozsa: #F3C4C9;
  --barackarany: #F7C68C;
  --galambszurke: #B7B0A6;
  --menta: #81AE9E;
  --meleg-barna: #403129;
  --meleg-fekete: #201813;
  --tejszin: #FFF8F2;
  /* role aliases (keep existing var names) */
  --peach: var(--barackkrem);
  --peach2: var(--pasztellrozsa);
  --peach3: var(--barackarany);
  --coral: var(--pir);
  --cream: var(--barackkrem);
  --ink: var(--meleg-barna);
  --ink-strong: var(--meleg-fekete);
  --muted: var(--galambszurke);
  --card: var(--tejszin);
  --shadow: 0 8px 24px rgba(32,24,19,.08);
  --radius: 18px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--barackkrem);
  color: var(--ink); min-height: 100vh; display:flex; flex-direction:column; /* sticky-footer-layout */
}
a { color: var(--coral); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap {  max-width: 1180px; margin: 0 auto; padding: 0 18px 48px; flex: 1 0 auto; width: 100%; box-sizing: border-box; }
header.app {
  position: sticky; top: 0; z-index: 50;
  background: var(--barackkrem);
  border-bottom: 1px solid rgba(244,163,148,.18);
}
header.app .inner { max-width: 1180px; margin: 0 auto; padding: 0 18px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.logo {
  font-weight: 800; font-size: 1.25rem; color: var(--ink); letter-spacing: -.02em;
  display:inline-flex; align-items:center; line-height:1;
  flex: 0 0 auto;
  text-decoration: none;
}
.logo-word {
  display: inline-block;
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(1.55rem, 2.6vw, 2.05rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: transparent;
  background: linear-gradient(100deg, #F7C68C 0%, #F4A394 42%, #ff8c42 78%, #F3C4C9 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(64,49,41,.08));
  animation: nala-logo-shimmer 7s ease-in-out infinite;
  transform-origin: left center;
}
@keyframes nala-logo-shimmer {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}
@keyframes nala-logo-intro {
  0% { transform: scale(.72) rotate(-4deg); opacity: 0; filter: blur(2px); }
  55% { transform: scale(1.08) rotate(1deg); opacity: 1; filter: blur(0); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes nala-logo-pulse {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.12); }
  70% { transform: scale(.96); }
}
@keyframes nala-logo-kiss {
  0%, 100% { transform: scale(1) translateY(0); }
  30% { transform: scale(1.16) translateY(-2px); }
  55% { transform: scale(.94) translateY(1px); }
  75% { transform: scale(1.06); }
}
.logo-word.is-intro { animation: nala-logo-intro .9s cubic-bezier(.2,.8,.2,1), nala-logo-shimmer 7s ease-in-out infinite; }
.logo-word.is-pulse { animation: nala-logo-pulse .65s ease, nala-logo-shimmer 7s ease-in-out infinite; }
.logo-word.is-kiss { animation: nala-logo-kiss .85s ease, nala-logo-shimmer 7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .logo-word, .logo-word.is-intro, .logo-word.is-pulse, .logo-word.is-kiss {
    animation: none;
    background-position: 50% center;
  }
}

/* logo anim slot — fixed 96px, seamless with header */
.logo-slot {
  position: relative;
  display: block;
  height: 96px;
  width: 64px;
  overflow: hidden;
  flex: 0 0 auto;
  line-height: 0;
  background: transparent;
}
.logo-slot img.logo-static,
.logo-slot video.logo-video {
  position: absolute;
  left: 0;
  top: 0;
  height: 96px;
  width: 64px;
  object-fit: contain;
  object-position: center bottom;
  display: block;
  border: 0;
  background: transparent;
  margin: 0;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
}
.logo-slot img.logo-static {
  opacity: 1;
  z-index: 2;
}
.logo-slot video.logo-video {
  opacity: 0;
  display: none;
  pointer-events: none;
  z-index: 1;
}
.logo-slot.is-playing video.logo-video {
  display: block;
  opacity: 1;
  z-index: 3;
}
.logo-slot.is-playing img.logo-static {
  opacity: 0;
  z-index: 1;
}
.logo img {
  height: 96px; width: auto; display: block;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 640px){  }
nav { display:flex; gap:8px; flex-wrap:wrap; flex:1; }
nav a {
  padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.65);
  color: var(--ink); font-size: .88rem; font-weight: 600;
}
nav a:hover, nav a.active { background: var(--coral); color: #fff; text-decoration:none; }
.search-box { display:flex; gap:6px; }
.search-box input {
  border: 1px solid rgba(61,44,41,.15); border-radius: 999px; padding: 8px 14px;
  min-width: 180px; background: #fff; color: var(--ink);
}
.search-box button {
  border:0; border-radius:999px; padding:8px 14px; background: var(--coral); color:#fff; font-weight:700; cursor:pointer;
}
.hero {
  margin: 22px 0 10px; padding: 28px 26px;
  background: linear-gradient(135deg, #FEEBD7, #F3C4C9 45%, #F4A394);
  border-radius: 28px; color: var(--ink); box-shadow: var(--shadow);
}
.hero h1 { margin:0 0 8px; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.hero p { margin:0; opacity:.9; max-width: 52ch; }

.hero.hero-compose {
  margin: 12px 0 8px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  min-height: 0;
}
.hero-compose-text {
  flex: 1 1 320px;
  min-width: 0;
  padding: 8px 4px 8px 0;
}
.hero-compose-text .hero-title {
  display: block;
  width: min(100%, 520px);
  height: auto;
  margin: 0 0 10px;
}
.hero-compose-text p {
  margin: 0;
  max-width: 42ch;
  opacity: .9;
  line-height: 1.45;
  color: var(--ink);
  font-size: clamp(.95rem, 1.6vw, 1.05rem);
}
.hero-compose .hero-girl {
  flex: 0 1 340px;
  width: min(42vw, 340px);
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(61,44,41,.12));
}
@media (max-width: 720px) {
  .hero.hero-compose { flex-direction: column-reverse; text-align: center; }
  .hero-compose-text { padding: 0; }
  .hero-compose-text .hero-title { margin-left: auto; margin-right: auto; }
  .hero-compose-text p { margin: 0 auto; }
  .hero-compose .hero-girl { width: min(70vw, 280px); }
}



.hero.hero-banner {
  margin: 4px 0 8px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}
.hero-banner-img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
  border-radius: 0;
}

.chips { display:flex; flex-wrap:wrap; gap:8px; margin: 18px 0; }
.chip {
  display:inline-flex; align-items:center; gap:6px;
  padding: 10px 16px; border-radius: 999px; background: #fff;
  box-shadow: var(--shadow); color: var(--ink); font-weight:700; font-size:.92rem;
}
.chip:hover { text-decoration:none; transform: translateY(-1px); }
.chip em { font-style:normal; background: var(--peach2); padding:2px 8px; border-radius:999px; font-size:.8rem; }
.section-title { margin: 28px 0 12px; font-size: 1.35rem; }
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.card {
  background: var(--card); border-radius: var(--radius); overflow:hidden;
  box-shadow: var(--shadow); color: var(--ink); display:flex; flex-direction:column;
  transition: transform .15s ease;
}
.card:hover { transform: translateY(-3px); text-decoration:none; }
.thumb { position:relative; aspect-ratio: 16/10; background: linear-gradient(135deg, var(--peach2), var(--peach3)); overflow:hidden; }
.thumb img { width:100%; height:100%; object-fit:contain; display:block; background:#FFF8F2; }
.thumb img.broken { display:none; }
.thumb .ph { width:100%; height:100%; }
.badge {
  position:absolute; left:10px; bottom:10px;
  background: rgba(61,44,41,.78); color:#fff; font-size:.72rem;
  padding:4px 8px; border-radius:999px; max-width:90%;
}
.card-body { padding: 12px 14px 16px; }
.card-body h3 { margin:0; font-size:.98rem; line-height:1.35; font-weight:700; }
.carousel {
  display:flex; gap:14px; overflow-x:auto; padding: 6px 2px 16px;
  scroll-snap-type: x mandatory;
}
.carousel .card { min-width: 240px; max-width: 240px; scroll-snap-align: start; }
.player-wrap {
  background:#201813; border-radius: 22px; overflow:hidden; box-shadow: var(--shadow);
}
video { width:100%; max-height: 72vh; background:#000; display:block; }
.meta-row { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.pill {
  background: var(--peach2); color: var(--ink); padding:6px 12px; border-radius:999px;
  font-size:.85rem; font-weight:600;
}
.recipe-content {
  background:#fff; border-radius: var(--radius); padding: 18px 20px;
  box-shadow: var(--shadow); line-height:1.55; white-space: normal;
  margin-top: 16px;
}
.recipe-content p { margin: 0 0 12px; }
.muted { color: var(--muted); }
.footer {
  margin-top: auto;
  padding: 28px 12px 36px;
  text-align: center;
  background: transparent;
  border: none;
  position: relative;
}
.footer::before {
  content: "";
  display: block;
  width: min(220px, 40%);
  height: 1px;
  margin: 0 auto 16px;
  background: linear-gradient(90deg, transparent, rgba(231,111,81,.35), transparent);
}
.footer-brand {
  display: inline-block;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: none;
  color: transparent;
  background: linear-gradient(120deg, rgba(122,92,84,.35) 0%, rgba(231,111,81,.7) 45%, rgba(244,162,97,.65) 70%, rgba(122,92,84,.35) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  animation: footer-shimmer 8s ease-in-out infinite;
  opacity: .9;
}
@keyframes footer-shimmer {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-brand { animation: none; background-position: 50% center; }
}
.footer a { color: inherit; text-decoration: none; }
.footer-version {
  display: block;
  margin-top: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #B7B0A6;
  opacity: 0.9;
}

.alert {
  background:#fff3cd; border:1px solid #ffecb5; color:#664d03;
  padding:12px 14px; border-radius:12px; margin:12px 0;
}
.empty { padding:40px; text-align:center; color:var(--muted); }
.cat-list { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:14px; }
.cat-list a {
  background:#fff; border-radius:14px; padding:14px 16px; box-shadow:var(--shadow);
  color:var(--ink); font-weight:650; display:flex; justify-content:space-between; align-items:center; gap:10px;
  min-height: 52px;
}
.cat-list a span {
  overflow: visible; text-overflow: unset; white-space: normal; min-width: 0;
  line-height: 1.25;
}
.cat-list a em {
  font-style: italic; font-weight: 600; color: var(--muted); flex-shrink: 0;
}
.cat-list a:hover { text-decoration:none; background: var(--peach); }
.back { display:inline-block; margin: 12px 0; font-weight:600; }

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

/* video extras — live-like stats + tags */
.vx-stats {
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 18px 0 8px;
}
@media (max-width: 720px){
  .vx-stats { grid-template-columns: repeat(2, 1fr); }
}
.vx-stat {
  background:#fff;
  border:1px solid rgba(231,111,81,.12);
  border-radius: 18px;
  padding: 16px 10px 14px;
  text-align:center;
  box-shadow: 0 6px 18px rgba(80,40,20,.04);
}
.vx-stat .vx-ico { font-size: 1.15rem; color:#F4A394; line-height:1; }
.vx-stat .vx-val { font-weight:800; font-size:1.15rem; margin-top:8px; color:var(--ink); }
.vx-stat .vx-lab { font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:2px; font-weight:700; }
.vx-tags {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 14px 0 8px;
}
@media (max-width: 720px){
  .vx-tags { grid-template-columns: 1fr; }
}
.vx-box {
  background:#fff;
  border:1px solid rgba(231,111,81,.12);
  border-radius: 18px;
  padding: 16px 16px 14px;
  box-shadow: 0 6px 18px rgba(80,40,20,.04);
}
.vx-box h4 { margin:0 0 10px; font-size:.95rem; }
.vx-chip {
  display:inline-block; padding:6px 12px; border-radius:999px;
  font-size:.82rem; font-weight:700; margin: 0 6px 6px 0;
}
.vx-chip.goal { background:#F3C4C9; color:#403129; }
.vx-chip.focus { background:#FDE2EC; color:#9B2C5A; }
.vx-chip.equip { background:#EDE4FF; color:#5B3FA0; }
.meta-row .pill.junk { display:none; }


#player-status { display:none !important; }


.fav-row { display:flex; align-items:center; gap:10px; margin: 12px 0 4px; }
.fav-btn {
  appearance:none; border:1px solid rgba(231,111,81,.25); background:#fff;
  width:48px; height:48px; border-radius:999px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 14px rgba(80,40,20,.06);
  transition: transform .12s ease, background .12s ease;
}
.fav-btn:hover { transform: scale(1.06); }
.fav-btn svg { width:26px; height:26px; fill:none; stroke:#F4A394; stroke-width:2.2; }
.fav-btn.on { background:#F3C4C9; border-color:#F4A394; }
.fav-btn.on svg { fill:#F4A394; stroke:#F4A394; }
.fav-label { font-size:.9rem; color:var(--muted); font-weight:600; }
nav a.nav-fav { background:#F3C4C9; }

.vx-stats .fav-slot {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#fff; border:1px solid rgba(231,111,81,.12); border-radius:18px;
  padding:10px 8px; box-shadow:0 6px 18px rgba(80,40,20,.04); gap:6px;
}
.vx-stats .fav-slot .fav-btn { width:44px; height:44px; margin:0; }
.vx-stats .fav-slot .fav-label { font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; text-align:center; }
.fav-row { display:none !important; } /* legacy standalone row hidden */

/* nav-categories-dropdown */
nav .nav-drop {
  position: relative;
  display: inline-flex;
}
nav .nav-drop > a.nav-drop-trigger {
  /* keep same pill look as other nav links */
}
nav .nav-drop-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  max-height: min(70vh, 480px);
  overflow-y: auto;
  /* top padding = hover bridge so cursor can reach the panel */
  padding: 10px 8px 8px;
  margin: 0;
  background: #fff;
  background-clip: padding-box;
  border-radius: 16px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(231,111,81,.12);
  z-index: 80;
}
nav .nav-drop-menu::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -12px;
  height: 14px;
}
nav .nav-drop:hover .nav-drop-menu,
nav .nav-drop:focus-within .nav-drop-menu {
  display: block;
}
nav .nav-drop-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
nav .nav-drop-menu a:hover {
  background: rgba(255,232,214,.85);
  color: var(--ink);
}
nav .nav-drop-menu a em {
  font-style: normal;
  font-size: .78rem;
  font-weight: 700;
  color: var(--coral);
  background: rgba(231,111,81,.12);
  padding: 2px 8px;
  border-radius: 999px;
}
nav .nav-drop-menu a.nav-drop-all {
  margin-top: 4px;
  border-top: 1px solid rgba(231,111,81,.12);
  border-radius: 10px 10px 12px 12px;
  color: var(--coral);
}
@media (max-width: 720px) {
  nav .nav-drop-menu {
    position: static;
    display: none;
    box-shadow: none;
    border: none;
    padding: 4px 0 4px 8px;
    max-height: none;
    background: transparent;
  }
  nav .nav-drop.open .nav-drop-menu { display: block; }
}

@media (max-width: 980px) {
  .cat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .cat-list { grid-template-columns: 1fr; }
}


/* —— Szűrők sidebar (bal) —— */
.page-with-filters {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.filters-sidebar {
  --filt-sticky-top: 100px;
  position: sticky;
  top: var(--filt-sticky-top);
  max-height: calc(100vh - var(--filt-sticky-top) - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border: 1px solid rgba(231, 111, 81, .10);
  border-radius: 22px;
  padding: 0 0 16px;
  box-shadow: var(--shadow);
  scrollbar-width: thin;
  z-index: 40;
}
.filters-sidebar-head {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff;
  padding: 18px 16px 10px;
  border-radius: 22px 22px 0 0;
}
.filters-sidebar-head h2 { margin: 0 0 14px; }
.filters-sidebar .filters-search { margin-bottom: 0; }
.filters-sidebar .filt-acc,
.filters-sidebar .filt-tip {
  margin-left: 16px;
  margin-right: 16px;
}
.filters-sidebar .filt-tip { margin-bottom: 4px; }
@media (max-width: 900px) {
  .filters-sidebar { --filt-sticky-top: 12px; }
}
.filters-sidebar h2 {
  margin: 0 0 14px;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--coral);
  letter-spacing: -.02em;
}
.filters-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff6ef;
  border: 1.5px solid rgba(231, 111, 81, .32);
  border-radius: 999px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.filters-search svg { flex-shrink: 0; color: var(--coral); opacity: .85; }
.filters-search input {
  border: 0;
  outline: 0;
  background: transparent;
  width: 100%;
  font: inherit;
  font-size: .92rem;
  color: var(--coral);
  font-weight: 600;
}
.filters-search input::placeholder { color: rgba(231, 111, 81, .55); font-weight: 500; }

.filt-acc {
  background: #fff;
  border-radius: 14px;
  margin-bottom: 10px;
  box-shadow: 0 4px 14px rgba(61,44,41,.06);
  overflow: hidden;
}
.filt-acc > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  color: var(--coral);
  font-weight: 700;
  font-size: .95rem;
}
.filt-acc > summary::-webkit-details-marker { display: none; }
.filt-acc > summary .filt-ico {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: #F3C4C9;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.filt-acc > summary .filt-ico svg { width: 18px; height: 18px; }
.filt-acc > summary .filt-chev {
  margin-left: auto;
  transition: transform .2s ease;
  opacity: .7;
}
.filt-acc[open] > summary .filt-chev { transform: rotate(180deg); }
.filt-acc-body {
  padding: 0 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: none;
  overflow: visible;
}
.filt-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.filt-opt:hover { background: rgba(255, 232, 214, .7); }
.filt-opt input { accent-color: var(--coral); width: 16px; height: 16px; }
.filt-opt .filt-count {
  margin-left: auto;
  font-size: .75rem;
  font-weight: 700;
  color: var(--coral);
  background: rgba(231,111,81,.1);
  padding: 1px 7px;
  border-radius: 999px;
}

.filt-tip {
  margin-top: 14px;
  background: linear-gradient(135deg, #F7C68C, #F4A394);
  color: #fff;
  border-radius: 16px;
  padding: 14px 14px 16px;
}
.filt-tip .filt-tip-h {
  display: flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: .95rem; margin-bottom: 4px;
}
.filt-tip p { margin: 0; font-size: .86rem; line-height: 1.35; opacity: .95; }

.filters-main { min-width: 0; }
.filters-status {
  margin: 0 0 12px;
  font-size: .9rem;
  color: var(--muted);
  font-weight: 600;
}
.filters-status strong { color: var(--coral); }
.card.is-filtered-out, .cat-list a.is-filtered-out { display: none !important; }

.filt-mobile-toggle {
  display: none;
  width: 100%;
  margin: 0 0 14px;
  padding: 12px 16px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow);
  color: var(--coral);
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
}

@media (max-width: 900px) {
  .page-with-filters {
    grid-template-columns: 1fr;
  }
  .filt-mobile-toggle { display: block; }
  .filters-sidebar {
    position: static;
    display: none;
    margin-bottom: 8px;
  }
  .filters-sidebar.is-open { display: block; }
}

/* recipe favorite heart */
.recipe-fav-row { display:flex; align-items:center; gap:10px; margin: 10px 0 14px; }
.recipe-fav-row .fav-btn { width:48px; height:48px; border-radius:999px; }


/* etrend/tudastar dropdown — same look as Kategóriák (no peach fill) */
nav .nav-drop-menu a.nav-with-ico {
  justify-content:flex-start;
  background:transparent;
  border-radius:10px;
  padding:8px 12px;
  margin:0;
  gap:10px;
}
nav .nav-drop-menu a.nav-with-ico:hover {
  background:rgba(255,232,214,.85);
  color:var(--ink);
}
nav .nav-drop-menu a.nav-with-ico .nav-ico {
  width:22px; height:22px; border-radius:6px; background:transparent;
  display:inline-flex; align-items:center; justify-content:center; margin-right:0; flex:0 0 auto;
  font-size:.95rem;
}
nav .nav-drop-menu a.nav-with-ico em { margin-left:auto; }

/* nav-submenu-no-peach */

/* force: icon submenu rows = category rows */
nav .nav-drop-menu a.nav-with-ico,
nav .nav-drop-menu a.nav-with-ico:hover {
  background: transparent !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
}
nav .nav-drop-menu a.nav-with-ico:hover {
  background: rgba(255,232,214,.85) !important;
}
nav .nav-drop-menu a.nav-with-ico .nav-ico {
  background: transparent !important;
  width: auto !important;
  height: auto !important;
}


/* nav-fix: always show full menu + search */
header.app { overflow: visible; }
header.app .inner { overflow: visible; align-items: center; padding-top: 6px; padding-bottom: 6px; }
header.app nav { flex: 1 1 auto; min-width: 0; }
header.app .search-box { flex: 0 0 auto; margin-left: auto; }


/* ===== fancy device view switcher under search ===== */
.rf-search-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .45rem;
  margin-left: auto;
  flex: 0 0 auto;
}
.rf-device-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .28rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #fff7ef, #ffe0cc);
  box-shadow: 0 8px 20px rgba(180,80,20,.10), inset 0 0 0 1px rgba(255,185,138,.55);
}
.rf-device-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .12rem;
  min-width: 58px;
  padding: .42rem .55rem .36rem;
  border-radius: 999px;
  background: transparent;
  color: #8a6a55;
  transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.rf-device-btn:hover {
  background: rgba(255,255,255,.7);
  color: #F4A394;
  transform: translateY(-1px);
}
.rf-device-btn.is-on {
  background: linear-gradient(135deg, #ff9a4d, #F4A394);
  color: #fff;
  box-shadow: 0 8px 18px rgba(231,111,81,.35);
}
.rf-device-ico {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
}
.rf-device-ico svg { width: 20px; height: 20px; display: block; }
.rf-device-lab {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
  text-transform: uppercase;
}

/* viewport simulation — ONLY Mac device-preview (p8g) */
html.device-preview.device-iphone body,
body.device-preview.device-iphone {
  background: #1c1410 !important;
}
html.device-preview.device-ipad body,
body.device-preview.device-ipad {
  background: #241a14 !important;
}
body.device-preview.device-iphone .wrap,
body.device-preview.device-iphone .et2-page,
body.device-preview.device-iphone .edz-page,
body.device-preview.device-iphone .main-container,
body.device-preview.device-iphone main.main-container {
  max-width: 390px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 28px;
  background: #FFF8F2;
  box-shadow: 0 0 0 10px #2a1e18, 0 24px 60px rgba(0,0,0,.45);
  overflow-x: hidden;
}
body.device-preview.device-ipad .wrap,
body.device-preview.device-ipad .et2-page,
body.device-preview.device-ipad .edz-page,
body.device-preview.device-ipad .main-container,
body.device-preview.device-ipad main.main-container {
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 22px;
  background: #FFF8F2;
  box-shadow: 0 0 0 12px #2a1e18, 0 24px 60px rgba(0,0,0,.4);
  overflow-x: hidden;
}
body.device-iphone header.app .inner,
body.device-ipad header.app .inner {
  max-width: 100%;
}
body.device-iphone header.app,
body.device-ipad header.app {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255,248,242,.92);
  backdrop-filter: blur(8px);
}
@media (max-width: 720px) {
  .rf-device-lab { display: none; }
  .rf-device-btn { min-width: 44px; padding: .4rem; }
}


/* device2 — keep switcher under header search, top-right */
header.app .inner { flex-wrap: wrap; align-items: flex-start; }
.rf-search-col {
  margin-left: auto;
  align-items: flex-end;
  max-width: 320px;
}
.rf-search-col .search-box { width: 100%; }
.rf-device-switch { align-self: flex-end; }
@media (max-width: 900px) {
  .rf-search-col { max-width: 100%; width: 100%; align-items: stretch; margin-left: 0; }
  .rf-device-switch { align-self: center; }
}


/* device3 — switcher beside Összes videó, compact */
header.app nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
header.app nav .rf-device-switch {
  margin-left: .35rem;
  padding: .18rem;
  gap: .2rem;
  flex: 0 0 auto;
}
header.app nav .rf-device-btn {
  min-width: 0;
  padding: .28rem .4rem;
  flex-direction: row;
  gap: .25rem;
}
header.app nav .rf-device-ico {
  width: 16px;
  height: 16px;
}
header.app nav .rf-device-ico svg {
  width: 15px;
  height: 15px;
}
header.app nav .rf-device-lab {
  font-size: 8px;
  text-transform: none;
  letter-spacing: 0;
}
@media (max-width: 1100px) {
  header.app nav .rf-device-lab { display: none; }
  header.app nav .rf-device-btn { padding: .28rem .34rem; }
}
/* legacy search-col (if any) — don't force full width */
.rf-search-col { margin-left: auto; }




/* header-align: search up with logo (not below logo mid) — tight gap v2 */
header.app .inner {
  align-items: center !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  gap: 8px 12px !important;
  row-gap: 4px !important;
}
header.app nav {
  align-self: center;
  row-gap: 4px;
}
header.app .search-box,
header.app .rf-search-col {
  align-self: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  transform: none !important;
}
header.app .search-box {
  margin-left: auto;
}
/* when search wraps to next line, keep it tight under nav */
header.app .inner > .search-box,
header.app .inner > .rf-search-col {
  margin-top: -2px !important;
}


/* fancy banner */
.hero.hero-banner {
  margin: 10px 0 14px !important;
  padding: 0 !important;
  position: relative;
  border-radius: 28px !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #ffe8d4, #ffd0b0 50%, #ffc09a) !important;
  box-shadow:
    0 18px 40px rgba(180, 80, 20, .16),
    0 2px 0 rgba(255,255,255,.55) inset,
    0 0 0 1px rgba(255, 170, 120, .35) !important;
}
.hero.hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 80% at 85% 50%, rgba(255,160,90,.22), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.28), transparent 35%, rgba(180,80,40,.06));
  z-index: 1;
  border-radius: inherit;
}
.hero.hero-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
  z-index: 2;
}
.hero-banner-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 28px !important;
  position: relative;
  z-index: 0;
}


/* fancy3 — compact device next to Összes + search takes right; fancy HTML hero */
header.app nav .rf-device-switch.is-compact {
  margin-left: .15rem;
  padding: .12rem;
  gap: .12rem;
  box-shadow: 0 4px 12px rgba(180,80,20,.08), inset 0 0 0 1px rgba(255,185,138,.45);
}
header.app nav .rf-device-switch.is-compact .rf-device-btn {
  min-width: 0;
  padding: .22rem .28rem;
}
header.app nav .rf-device-switch.is-compact .rf-device-ico {
  width: 14px;
  height: 14px;
}
header.app nav .rf-device-switch.is-compact .rf-device-ico svg {
  width: 14px;
  height: 14px;
}
header.app nav .rf-device-switch.is-compact .rf-device-lab { display: none !important; }

header.app .search-box {
  margin-left: auto !important;
  flex: 1 1 220px;
  max-width: 360px;
  min-width: 160px;
}
header.app .search-box input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

/* HTML fancy hero */
.hero.hero-fancy {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: end;
  gap: 0 1rem;
  margin: 10px 0 14px;
  padding: 1.35rem 1.35rem 0 1.6rem;
  min-height: 220px;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(135deg, #FFF8F2 0%, #F3C4C9 45%, #F7C68C 100%);
  box-shadow:
    0 18px 42px rgba(180, 80, 20, .16),
    inset 0 1px 0 rgba(255,255,255,.65);
}
.hero-fancy-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 70% at 88% 60%, rgba(255,140,66,.28), transparent 55%),
    radial-gradient(ellipse 40% 50% at 12% 20%, rgba(255,255,255,.45), transparent 50%);
  z-index: 0;
}
.hero-fancy-copy {
  position: relative;
  z-index: 2;
  padding: 0.4rem 0 1.4rem;
  max-width: 36rem;
}
.hero-fancy-kicker {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 .75rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: #F4A394;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 4px 14px rgba(180,80,20,.08);
}
.hero-fancy-title {
  margin: 0 0 .65rem;
  font-size: clamp(1.85rem, 4vw, 2.65rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 900;
  color: #201813;
}
.hero-fancy-title i {
  font-style: normal;
  color: #F4A394;
  margin: 0 .1em;
}
.hero-fancy-title em {
  font-style: normal;
  background: linear-gradient(90deg, #ff8c42, #F4A394);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-fancy-sub {
  margin: 0 0 1rem;
  max-width: 38ch;
  color: #5c4336;
  font-size: clamp(.92rem, 1.5vw, 1.05rem);
  line-height: 1.5;
  font-weight: 550;
}
.hero-fancy-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.hero-fancy-pills span {
  display: inline-flex;
  align-items: center;
  padding: .4rem .75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  color: #403129;
  font-size: .8rem;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(180,80,20,.08);
}
.hero-fancy-girl {
  position: relative;
  z-index: 1;
  justify-self: end;
  align-self: end;
  width: min(100%, 340px);
  max-height: 260px;
  object-fit: contain;
  object-position: right bottom;
  filter: drop-shadow(0 14px 28px rgba(120,60,20,.22));
  margin: 0;
  display: block;
}
@media (max-width: 820px) {
  .hero.hero-fancy {
    grid-template-columns: 1fr;
    padding: 1.15rem 1.15rem 0;
    min-height: 0;
  }
  .hero-fancy-girl {
    width: min(70%, 280px);
    max-height: 220px;
    justify-self: center;
  }
  .hero-fancy-copy { max-width: none; text-align: center; padding-bottom: .5rem; }
  .hero-fancy-sub { margin-left: auto; margin-right: auto; }
  .hero-fancy-pills { justify-content: center; }
}


/* device7 — Összes videó egy sorban a többivel; ikonok felette, flow nélkül */
header.app {
  overflow: visible !important;
}
header.app .inner {
  overflow: visible !important;
  align-items: center !important;
  padding-top: 1.7rem !important; /* hely a nézet-ikonoknak felül */
  padding-bottom: 6px !important;
}
header.app nav {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center !important;
  gap: 6px;
}
.rf-nav-osszes-stack {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  vertical-align: middle;
  align-self: center;
  padding: 0 !important;
  margin: 0;
  height: auto;
}
.rf-nav-osszes-stack > a {
  white-space: nowrap;
  margin: 0;
}
.rf-nav-osszes-stack .rf-device-switch {
  position: absolute !important;
  left: 50%;
  bottom: calc(100% + 0.28rem);
  top: auto !important;
  transform: translateX(-50%);
  margin: 0 !important;
  z-index: 5;
  pointer-events: auto;
}
header.app nav .rf-nav-osszes-stack .rf-device-switch.is-compact {
  margin: 0 !important;
  padding: .1rem;
  gap: .1rem;
}
header.app nav .rf-nav-osszes-stack .rf-device-switch.is-compact .rf-device-btn {
  padding: .18rem .22rem;
}
header.app nav .rf-nav-osszes-stack .rf-device-switch.is-compact .rf-device-ico,
header.app nav .rf-nav-osszes-stack .rf-device-switch.is-compact .rf-device-ico svg {
  width: 13px;
  height: 13px;
}


/* device9 — egy sor: menü + kereső; ikonok Összes fölött */
header.app {
  overflow: visible !important;
}
header.app .inner {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: visible !important;
  padding-top: 1.55rem !important;
  padding-bottom: 6px !important;
}
header.app .logo,
header.app .logo img {
  height: 72px !important;
}
header.app .logo-slot {
  height: 72px !important;
  width: 48px !important;
}
header.app .logo-slot img.logo-static,
header.app .logo-slot video.logo-video {
  height: 72px !important;
  width: 48px !important;
}
header.app nav {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  overflow: visible !important;
}
header.app nav > a {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 5px 9px !important;
  font-size: .78rem !important;
}
.rf-nav-osszes-stack {
  position: relative;
  display: inline-flex !important;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  align-self: center;
  padding: 0 !important;
  margin: 0;
}
.rf-nav-osszes-stack > a {
  white-space: nowrap;
  padding: 5px 9px !important;
  font-size: .78rem !important;
}
.rf-nav-osszes-stack .rf-device-switch {
  position: absolute !important;
  left: 50%;
  bottom: calc(100% + 0.22rem);
  top: auto !important;
  transform: translateX(-50%);
  margin: 0 !important;
  z-index: 6;
}
header.app nav .rf-nav-osszes-stack .rf-device-switch.is-compact {
  margin: 0 !important;
  padding: .08rem;
  gap: .08rem;
}
header.app nav .rf-nav-osszes-stack .rf-device-switch.is-compact .rf-device-btn {
  padding: .14rem .18rem;
}
header.app nav .rf-nav-osszes-stack .rf-device-switch.is-compact .rf-device-ico,
header.app nav .rf-nav-osszes-stack .rf-device-switch.is-compact .rf-device-ico svg {
  width: 12px;
  height: 12px;
}

/* kereső a nav-ban, Összes mellett — max ~banner jobb fele */
header.app nav .search-box.rf-search-in-nav,
header.app nav .rf-search-col.rf-search-in-nav {
  flex: 0 1 280px !important;
  max-width: min(38vw, 320px) !important;
  min-width: 140px !important;
  margin-left: 0.35rem !important;
  width: auto !important;
  align-self: center !important;
}
header.app nav .rf-search-col.rf-search-in-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
}
header.app nav .rf-search-col.rf-search-in-nav .search-box {
  width: 100%;
  max-width: 100%;
  margin: 0;
}
header.app nav .search-box {
  display: flex !important;
  gap: 5px;
  align-items: center;
}
header.app nav .search-box input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  padding: 6px 12px !important;
  font-size: .82rem;
}
header.app nav .search-box button {
  flex: 0 0 auto;
  padding: 6px 12px !important;
  font-size: .78rem;
  white-space: nowrap;
}

/* ha mégis kívül maradna a search (JS előtt) */
header.app .inner > .search-box:not(.rf-search-in-nav),
header.app .inner > .rf-search-col:not(.rf-search-in-nav) {
  flex: 0 1 280px !important;
  max-width: min(38vw, 320px) !important;
  min-width: 140px !important;
  margin-left: 0 !important;
}

@media (max-width: 980px) {
  header.app nav > a,
  .rf-nav-osszes-stack > a {
    padding: 4px 7px !important;
    font-size: .72rem !important;
  }
  header.app nav .search-box.rf-search-in-nav,
  header.app nav .rf-search-col.rf-search-in-nav {
    max-width: min(32vw, 240px) !important;
    min-width: 120px !important;
  }
}
@media (max-width: 760px) {
  header.app .inner { flex-wrap: wrap !important; padding-top: 1.2rem !important; }
  header.app nav { flex-wrap: wrap !important; }
  header.app nav .search-box.rf-search-in-nav,
  header.app nav .rf-search-col.rf-search-in-nav {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }
}


/* device10 — nézet-ikonok a keresőmező fölött */
.rf-search-stack {
  position: relative;
  display: inline-flex !important;
  flex: 0 1 300px;
  max-width: min(38vw, 320px);
  min-width: 150px;
  flex-direction: row;
  align-items: center;
  align-self: center;
  margin-left: 0.35rem;
  padding: 0 !important;
}
.rf-search-stack .rf-device-switch {
  position: absolute !important;
  left: 50%;
  bottom: calc(100% + 0.22rem);
  top: auto !important;
  transform: translateX(-50%);
  margin: 0 !important;
  z-index: 6;
}
.rf-search-stack .search-box,
.rf-search-stack .rf-search-col {
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
header.app nav .rf-search-stack .rf-device-switch.is-compact {
  margin: 0 !important;
  padding: .08rem;
  gap: .08rem;
}
header.app nav .rf-search-stack .rf-device-switch.is-compact .rf-device-btn {
  padding: .14rem .18rem;
}
header.app nav .rf-search-stack .rf-device-switch.is-compact .rf-device-ico,
header.app nav .rf-search-stack .rf-device-switch.is-compact .rf-device-ico svg {
  width: 12px;
  height: 12px;
}
/* régi Összes-stack ha még megvan: ne zavarjon */
.rf-nav-osszes-stack {
  display: contents !important;
}
.rf-nav-osszes-stack .rf-device-switch { display: none !important; }


/* fancy4 — girl cutout larger, fills banner top */
.hero.hero-fancy {
  align-items: stretch !important;
  min-height: 260px !important;
  padding: 1.1rem 0.6rem 0 1.5rem !important;
  grid-template-columns: 1.05fr 0.95fr !important;
}
.hero-fancy-copy {
  padding: 0.55rem 0 1.25rem !important;
  z-index: 3;
}
.hero-fancy-girl {
  width: min(100%, 420px) !important;
  max-height: none !important;
  height: 100% !important;
  max-width: 460px !important;
  object-fit: contain !important;
  object-position: right top !important;
  align-self: stretch !important;
  justify-self: end !important;
  margin: 0 !important;
  filter: drop-shadow(0 12px 26px rgba(120,60,20,.18)) !important;
  background: transparent !important;
}
@media (max-width: 820px) {
  .hero.hero-fancy {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    padding: 1.1rem 1.1rem 0 !important;
  }
  .hero-fancy-girl {
    width: min(85%, 360px) !important;
    height: auto !important;
    max-height: 300px !important;
    object-position: center top !important;
    justify-self: center !important;
  }
}


/* fancy6 — kategória chippek a banner üres közepén */
.hero.hero-fancy {
  display: grid !important;
  grid-template-columns: minmax(260px, 1.05fr) minmax(210px, 0.95fr) minmax(240px, 0.9fr) !important;
  grid-template-areas: "copy chips girl" !important;
  align-items: center !important;
  gap: 0.55rem 0.75rem !important;
  min-height: 250px !important;
  padding: 1rem 0.5rem 1rem 1.35rem !important;
}
.hero-fancy-bg { grid-area: 1 / 1 / -1 / -1; }
.hero-fancy-copy {
  grid-area: copy;
  max-width: none !important;
  padding: 0.35rem 0 0.35rem !important;
  z-index: 3;
}
.hero-fancy-chips {
  grid-area: chips;
  position: relative;
  z-index: 3;
  display: flex !important;
  flex-wrap: wrap !important;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
  gap: 6px !important;
  margin: 0 !important;
  max-height: 100%;
  overflow: hidden;
}
.hero-fancy-chips .chip {
  padding: 5px 8px 5px 10px !important;
  font-size: .74rem !important;
  font-weight: 700;
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 4px 12px rgba(180,80,20,.08);
  line-height: 1.15;
}
.hero-fancy-chips .chip em {
  font-size: .68rem !important;
  padding: 1px 6px !important;
  margin-left: 4px;
}
.hero-fancy-girl {
  grid-area: girl;
  width: 100% !important;
  max-width: 440px !important;
  height: 100% !important;
  max-height: 280px !important;
  object-fit: contain !important;
  object-position: right bottom !important;
  align-self: end !important;
  justify-self: end !important;
  z-index: 2;
}
.hero-fancy-sub {
  max-width: 34ch !important;
  font-size: clamp(.84rem, 1.3vw, .98rem) !important;
}
.hero-fancy-title {
  font-size: clamp(1.55rem, 3.2vw, 2.25rem) !important;
}
@media (max-width: 980px) {
  .hero.hero-fancy {
    grid-template-columns: 1.1fr 0.9fr !important;
    grid-template-areas:
      "copy girl"
      "chips chips" !important;
    padding: 1rem 1rem 0.85rem !important;
  }
  .hero-fancy-chips { justify-content: flex-start; }
  .hero-fancy-girl { max-height: 240px !important; }
}
@media (max-width: 640px) {
  .hero.hero-fancy {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "copy"
      "chips"
      "girl" !important;
    text-align: center;
  }
  .hero-fancy-copy { text-align: center; }
  .hero-fancy-sub { margin-left: auto; margin-right: auto; }
  .hero-fancy-pills { justify-content: center; }
  .hero-fancy-chips { justify-content: center; }
  .hero-fancy-girl {
    justify-self: center !important;
    max-height: 220px !important;
    object-position: center bottom !important;
  }
}


/* fancy7 — egységes, fancy kategória chip rács a bannerben */
.hero-fancy-chips {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-content: center !important;
  justify-items: stretch !important;
  padding: 0.15rem 0.1rem !important;
  margin: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
.hero-fancy-chips .chip {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  width: 100% !important;
  min-height: 34px !important;
  box-sizing: border-box !important;
  padding: 6px 8px 6px 10px !important;
  border-radius: 999px !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
  color: #403129 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,247,239,.92)) !important;
  border: 1px solid rgba(255,185,138,.55) !important;
  box-shadow:
    0 6px 14px rgba(180,80,20,.10),
    inset 0 1px 0 rgba(255,255,255,.8) !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.hero-fancy-chips .chip:hover {
  transform: translateY(-1px);
  border-color: rgba(231,111,81,.55) !important;
  box-shadow: 0 10px 18px rgba(231,111,81,.18), inset 0 1px 0 rgba(255,255,255,.85) !important;
  text-decoration: none !important;
  color: #F4A394 !important;
}
.hero-fancy-chips .chip em {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  min-width: 1.85rem;
  text-align: center;
  font-size: .68rem !important;
  font-weight: 800 !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #ffd7b8, #ffb07a) !important;
  color: #7a3d1e !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
/* 11 chip: utolsó 2 középre a 4. sorban */
.hero-fancy-chips .chip:nth-child(10) {
  grid-column: 1 / 2;
}
.hero-fancy-chips .chip:nth-child(11) {
  grid-column: 2 / 3;
}
@media (max-width: 980px) {
  .hero-fancy-chips {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .hero-fancy-chips .chip:nth-child(10),
  .hero-fancy-chips .chip:nth-child(11) {
    grid-column: auto;
  }
}
@media (max-width: 640px) {
  .hero-fancy-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* nav1 — egységes menügombok + betűméret */
header.app nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
}
header.app nav > a,
header.app nav .rf-nav-osszes-stack > a,
header.app nav .rf-search-stack ~ a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: 34px !important;
  height: 34px !important;
  min-width: 5.6rem !important;
  padding: 0 11px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
/* hosszabb címke: ugyanaz a betű, kicsit több hely */
header.app nav > a[href*="osszes"],
header.app nav .rf-nav-osszes-stack > a {
  min-width: 7.2rem !important;
  padding: 0 12px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
}
header.app nav > a.active,
header.app nav > a:hover,
header.app nav .rf-nav-osszes-stack > a.active,
header.app nav .rf-nav-osszes-stack > a:hover {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}
/* display:contents a régi stacken: a link ugyanúgy menjen */
header.app nav .rf-nav-osszes-stack {
  display: contents !important;
}
@media (max-width: 1100px) {
  header.app nav > a,
  header.app nav .rf-nav-osszes-stack > a {
    min-width: 0 !important;
    padding: 0 9px !important;
    font-size: 0.74rem !important;
    height: 32px !important;
    min-height: 32px !important;
  }
  header.app nav > a.active,
  header.app nav > a:hover,
  header.app nav .rf-nav-osszes-stack > a.active,
  header.app nav .rf-nav-osszes-stack > a:hover {
    font-size: 0.74rem !important;
  }
}


/* fancy8 — 12. Összes chip, teljes 3×4 rács */
.hero-fancy-chips .chip:nth-child(10),
.hero-fancy-chips .chip:nth-child(11),
.hero-fancy-chips .chip:nth-child(12) {
  grid-column: auto !important;
}
.hero-fancy-chips {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}


/* fancy9 — banner magasság a lány felső/alsó vágásáig */
.hero.hero-fancy {
  min-height: 0 !important;
  height: auto !important;
  align-items: stretch !important;
  padding: 0 0.35rem 0 1.15rem !important;
  gap: 0.4rem 0.65rem !important;
  overflow: hidden !important;
}
.hero-fancy-copy {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 0.55rem 0.25rem 0.55rem 0 !important;
  align-self: center !important;
}
.hero-fancy-chips {
  align-self: center !important;
  padding: 0.35rem 0.1rem !important;
}
.hero-fancy-kicker {
  margin: 0 0 0.45rem !important;
}
.hero-fancy-title {
  margin: 0 0 0.4rem !important;
  font-size: clamp(1.4rem, 2.8vw, 2.05rem) !important;
}
.hero-fancy-sub {
  margin: 0 0 0.55rem !important;
  font-size: clamp(.8rem, 1.2vw, .92rem) !important;
  line-height: 1.4 !important;
}
.hero-fancy-pills {
  gap: .35rem !important;
}
.hero-fancy-pills span {
  padding: .28rem .6rem !important;
  font-size: .72rem !important;
}
.hero-fancy-girl {
  height: 100% !important;
  max-height: 220px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: right center !important;
  align-self: stretch !important;
  justify-self: end !important;
  margin: 0 !important;
  display: block !important;
}
/* a sor magasságát a lány határozza meg */
.hero.hero-fancy {
  grid-template-rows: auto !important;
}
@media (max-width: 980px) {
  .hero.hero-fancy {
    padding: 0.55rem 0.75rem 0 !important;
  }
  .hero-fancy-girl {
    max-height: 200px !important;
  }
}
@media (max-width: 640px) {
  .hero.hero-fancy {
    padding: 0.7rem 0.85rem 0 !important;
  }
  .hero-fancy-girl {
    max-height: 210px !important;
    object-position: center bottom !important;
  }
}


/* fancy10 — működő hero pill linkek */
.hero-fancy-pills a.hero-fancy-pill,
.hero-fancy-pills a {
  display: inline-flex;
  align-items: center;
  padding: .28rem .6rem;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  color: #403129;
  font-size: .72rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(180,80,20,.08);
  transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.hero-fancy-pills a.hero-fancy-pill:hover,
.hero-fancy-pills a:hover {
  background: #fff;
  color: #F4A394;
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(231,111,81,.16);
  text-decoration: none;
}


/* logo2 — nagyobb logo, foglalt hellyel (nem vág bele a Főoldalba) */
header.app .logo {
  position: relative;
  z-index: 8;
  flex: 0 0 68px !important;
  width: 68px !important;
  height: 96px !important;
  overflow: visible !important;
  margin-right: 6px !important;
}
header.app .logo-slot {
  position: relative;
  width: 64px !important;
  height: 96px !important;
  overflow: visible !important;
  transform: none !important;
}
header.app .logo > img,
header.app .logo img.logo-static,
header.app .logo video.logo-video,
header.app .logo-slot img.logo-static,
header.app .logo-slot video.logo-video {
  height: 96px !important;
  width: 64px !important;
  max-width: none !important;
  transform: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}
header.app .logo > img:only-child {
  transform: none !important;
  height: 96px !important;
  width: auto !important;
}
header.app .inner {
  align-items: center !important;
  gap: 10px !important;
}

/* ha nincs slot, közvetlen img skálázása */
header.app .logo > img:only-child {
  transform: scale(1.35);
  transform-origin: left center;
}
header.app .inner {
  align-items: center !important;
}


/* logo3 — még nagyobb logo, foglalt hellyel */
header.app .logo {
  position: relative;
  z-index: 8;
  flex: 0 0 84px !important;
  width: 84px !important;
  height: 120px !important;
  overflow: visible !important;
  margin-right: 8px !important;
}
header.app .logo-slot {
  position: relative;
  width: 80px !important;
  height: 120px !important;
  overflow: visible !important;
  transform: none !important;
}
header.app .logo > img,
header.app .logo img.logo-static,
header.app .logo video.logo-video,
header.app .logo-slot img.logo-static,
header.app .logo-slot video.logo-video {
  height: 120px !important;
  width: 80px !important;
  max-width: none !important;
  transform: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}
header.app .logo > img:only-child {
  transform: none !important;
  height: 120px !important;
  width: auto !important;
}
/* header padding a magasabb logóhoz */
header.app .inner {
  align-items: center !important;
  padding-top: 1.35rem !important;
  padding-bottom: 0.55rem !important;
}


/* device11 — esztétikus nézet-piktogramok a kereső fölött */
.rf-search-stack {
  position: relative !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  gap: 0.35rem !important;
  flex: 0 1 300px !important;
  max-width: min(38vw, 320px) !important;
  min-width: 160px !important;
  margin-left: 0.35rem !important;
  padding-top: 0 !important;
}
.rf-search-stack .rf-device-switch {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  align-self: center !important;
  margin: 0 auto !important;
  z-index: 6;
  padding: 0.16rem !important;
  gap: 0.14rem !important;
  box-shadow:
    0 6px 14px rgba(180,80,20,.10),
    inset 0 0 0 1px rgba(255,185,138,.55) !important;
}
.rf-search-stack .rf-device-switch.is-compact .rf-device-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 0.22rem !important;
  border-radius: 999px !important;
}
.rf-search-stack .rf-device-switch.is-compact .rf-device-ico,
.rf-search-stack .rf-device-switch.is-compact .rf-device-ico svg {
  width: 14px !important;
  height: 14px !important;
}
.rf-search-stack .search-box,
.rf-search-stack .rf-search-col {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  position: relative;
  z-index: 1;
}
header.app nav .rf-search-stack .search-box input {
  padding: 7px 12px !important;
}
header.app nav .rf-search-stack .search-box button {
  padding: 7px 12px !important;
}
/* header tetején legyen hely a stacknek (nem abszolút) */
header.app .inner {
  padding-top: 0.85rem !important;
  align-items: flex-end !important;
}
header.app .logo {
  align-self: center !important;
}
header.app nav {
  align-items: flex-end !important;
}
header.app nav > a,
header.app nav .rf-nav-osszes-stack > a {
  align-self: center !important;
  margin-bottom: 0.15rem !important;
}


/* layout-fix1 — header menü újra egyben, nem szétcsúszva */
header.app {
  overflow: visible !important;
}
header.app .inner {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 0.55rem 18px !important;
  max-width: 1180px;
  margin: 0 auto;
  overflow: visible !important;
}
header.app .logo {
  flex: 0 0 76px !important;
  width: 76px !important;
  height: 110px !important;
  margin: 0 4px 0 0 !important;
  overflow: visible !important;
  align-self: center !important;
  z-index: 8;
}
header.app .logo-slot {
  width: 72px !important;
  height: 110px !important;
  transform: none !important;
  overflow: visible !important;
}
header.app .logo img,
header.app .logo img.logo-static,
header.app .logo video.logo-video,
header.app .logo-slot img.logo-static,
header.app .logo-slot video.logo-video {
  width: 72px !important;
  height: 110px !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: none !important;
}
header.app nav {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
header.app nav > a,
header.app nav .rf-nav-osszes-stack > a {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  margin: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 11px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  border-radius: 999px !important;
}
header.app nav .rf-nav-osszes-stack {
  display: contents !important;
}
header.app nav .rf-search-stack {
  position: relative !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  flex: 0 0 260px !important;
  width: 260px !important;
  max-width: 260px !important;
  min-width: 200px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  gap: 0.35rem !important;
  align-self: center !important;
}
header.app nav .rf-search-stack .rf-device-switch {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  align-self: center !important;
  margin: 0 auto !important;
}
header.app nav .rf-search-stack .search-box {
  width: 100% !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
header.app nav .rf-search-stack .search-box input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
}
header.app .inner > .search-box:not(.rf-search-in-nav),
header.app .inner > .rf-search-col:not(.rf-search-in-nav) {
  flex: 0 0 260px !important;
  max-width: 260px !important;
  margin-left: auto !important;
}
@media (max-width: 1100px) {
  header.app nav > a {
    padding: 0 8px !important;
    font-size: 0.72rem !important;
  }
  header.app nav .rf-search-stack {
    flex-basis: 200px !important;
    width: 200px !important;
    max-width: 200px !important;
    min-width: 160px !important;
  }
}
@media (max-width: 860px) {
  header.app .inner { flex-wrap: wrap !important; }
  header.app nav {
    flex-wrap: wrap !important;
    width: 100%;
  }
  header.app nav .rf-search-stack {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
}


/* fix2 — kereső egy síkban a menüvel; piktogramok abszolút felette */
header.app {
  overflow: visible !important;
}
header.app .inner {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 1.65rem 18px 0.55rem !important; /* hely a piktogramoknak felül */
  overflow: visible !important;
}
header.app nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
header.app nav > a {
  align-self: center !important;
  margin: 0 !important;
  height: 34px !important;
}
header.app nav .rf-search-stack {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important; /* kereső a menü síkjában */
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 0 260px !important;
  width: 260px !important;
  max-width: 260px !important;
  min-width: 200px !important;
  min-height: 34px !important;
  height: 34px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  align-self: center !important;
  overflow: visible !important;
}
header.app nav .rf-search-stack .rf-device-switch {
  position: absolute !important;
  left: 50% !important;
  bottom: calc(100% + 0.35rem) !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  z-index: 8;
  pointer-events: auto;
  padding: 0.14rem !important;
  gap: 0.12rem !important;
}
header.app nav .rf-search-stack .rf-device-switch.is-compact .rf-device-btn {
  min-width: 26px !important;
  min-height: 26px !important;
  padding: 0.18rem !important;
}
header.app nav .rf-search-stack .rf-device-switch.is-compact .rf-device-ico,
header.app nav .rf-search-stack .rf-device-switch.is-compact .rf-device-ico svg {
  width: 13px !important;
  height: 13px !important;
}
header.app nav .rf-search-stack .search-box {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 34px !important;
  margin: 0 !important;
  gap: 6px !important;
}
header.app nav .rf-search-stack .search-box input {
  height: 34px !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  line-height: 34px !important;
}
header.app nav .rf-search-stack .search-box button {
  height: 34px !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  line-height: 34px !important;
}


/* logo4 — nagyobb logo, layout stabil */
header.app .logo {
  flex: 0 0 96px !important;
  width: 96px !important;
  height: 140px !important;
  margin: 0 10px 0 0 !important;
  overflow: visible !important;
  align-self: center !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
header.app .logo-slot {
  width: 90px !important;
  height: 140px !important;
  background: transparent !important;
  overflow: visible !important;
  transform: none !important;
}
header.app .logo img,
header.app .logo img.logo-static,
header.app .logo video.logo-video,
header.app .logo-slot img.logo-static,
header.app .logo-slot video.logo-video {
  width: 90px !important;
  height: 140px !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  background: transparent !important;
  transform: none !important;
}
header.app .inner {
  /* maradjon a fix2 padding a piktogramoknak; logo magasabb lehet */
  align-items: center !important;
  min-height: 0 !important;
}


/* scroll1 — header együtt mozog az oldallal (nem sticky/fixed) */
header.app {
  position: static !important;
  top: auto !important;
  z-index: 10 !important;
}
body.device-iphone header.app,
body.device-ipad header.app,
html.device-iphone header.app,
html.device-ipad header.app {
  position: static !important;
  top: auto !important;
}


/* scroll2 — szűrők is együtt görgetnek az oldallal */
.filters-sidebar {
  position: static !important;
  top: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.filters-sidebar-head {
  position: static !important;
  top: auto !important;
}


/* zdrop1 — Kategóriák lenyíló mindig a szűrők felett */
header.app {
  position: relative !important; /* nem sticky, de stacking context */
  z-index: 200 !important;
}
nav .nav-drop {
  position: relative !important;
  z-index: 210 !important;
}
nav .nav-drop-menu {
  z-index: 220 !important;
}
.filters-sidebar,
.filters-sidebar-head {
  z-index: 1 !important;
}
.page-with-filters,
.filters-main,
.wrap {
  position: relative;
  z-index: 1;
}



/* mobile2 — igazi telefon/tablet shell, javított fejléc + drawer */
.rf-nav-burger {
  display: none;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(180,80,20,.14);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  z-index: 320;
}
.rf-nav-burger span {
  display: block;
  width: 18px;
  height: 2.2px;
  border-radius: 2px;
  background: #403129;
  transition: transform .2s ease, opacity .2s ease;
}
body.nav-drawer-open .rf-nav-burger span:nth-child(1) { transform: translateY(7.2px) rotate(45deg); }
body.nav-drawer-open .rf-nav-burger span:nth-child(2) { opacity: 0; }
body.nav-drawer-open .rf-nav-burger span:nth-child(3) { transform: translateY(-7.2px) rotate(-45deg); }
.rf-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20,12,8,.48);
  z-index: 290;
}
body.device-iphone.nav-drawer-open .rf-nav-backdrop,
body.device-ipad.nav-drawer-open .rf-nav-backdrop { display: block; }

body.device-desktop .rf-nav-burger,
body.device-desktop .rf-nav-backdrop { display: none !important; }

/* ——— shared phone/tablet column — preview only (p8g); native full-bleed separately ——— */
body.device-preview.device-iphone,
body.device-preview.device-ipad {
  background: #1c1410 !important;
}
body.device-iphone .rf-nav-burger,
body.device-ipad .rf-nav-burger { display: inline-flex !important; }

body.device-preview.device-iphone header.app,
body.device-preview.device-iphone .wrap,
body.device-preview.device-iphone .et2-page,
body.device-preview.device-iphone .edz-page,
body.device-preview.device-iphone .main-container,
body.device-preview.device-iphone main.main-container {
  max-width: 390px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.device-preview.device-ipad header.app,
body.device-preview.device-ipad .wrap,
body.device-preview.device-ipad .et2-page,
body.device-preview.device-ipad .edz-page,
body.device-preview.device-ipad .main-container,
body.device-preview.device-ipad main.main-container {
  max-width: 768px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.device-iphone header.app,
body.device-ipad header.app {
  position: sticky !important;
  top: 0 !important;
  z-index: 260 !important;
  background: #FEEBD7 !important;
  border-bottom: 1px solid rgba(231,111,81,.14) !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
body.device-iphone .wrap,
body.device-iphone .et2-page,
body.device-iphone .edz-page {
  background: #FFF8F2 !important;
  border-radius: 0 0 28px 28px !important;
  box-shadow: 0 0 0 10px #2a1e18, 0 24px 60px rgba(0,0,0,.4) !important;
  overflow-x: hidden !important;
  padding-bottom: 64px !important; /* hely a floating device switchnek */
}
body.device-ipad .wrap,
body.device-ipad .et2-page,
body.device-ipad .edz-page {
  background: #FFF8F2 !important;
  border-radius: 0 0 22px 22px !important;
  box-shadow: 0 0 0 12px #2a1e18, 0 24px 60px rgba(0,0,0,.35) !important;
  overflow-x: hidden !important;
  padding-bottom: 64px !important;
}

/* fejléc: logo | kereső | burger — egy sor, kis padding */
body.device-iphone header.app .inner,
body.device-ipad header.app .inner {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  max-width: 100% !important;
  min-height: 56px !important;
}
body.device-iphone header.app .logo,
body.device-ipad header.app .logo {
  order: 1 !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 64px !important;
  margin: 0 !important;
  align-self: center !important;
}
body.device-iphone header.app .logo-slot,
body.device-ipad header.app .logo-slot,
body.device-iphone header.app .logo img,
body.device-ipad header.app .logo img,
body.device-iphone header.app .logo-slot img,
body.device-ipad header.app .logo-slot img,
body.device-iphone header.app .logo video,
body.device-ipad header.app .logo video {
  width: 42px !important;
  height: 62px !important;
}
body.device-iphone header.app .rf-search-stack,
body.device-ipad header.app .rf-search-stack {
  order: 2 !important;
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}
body.device-iphone header.app .rf-nav-burger,
body.device-ipad header.app .rf-nav-burger {
  order: 3 !important;
  margin-left: 0 !important;
}

body.device-iphone header.app .rf-search-stack .search-box,
body.device-ipad header.app .rf-search-stack .search-box {
  display: flex !important;
  width: 100% !important;
  height: 38px !important;
  gap: 6px !important;
  margin: 0 !important;
}
body.device-iphone header.app .rf-search-stack .search-box input,
body.device-ipad header.app .rf-search-stack .search-box input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 38px !important;
  padding: 0 12px !important;
  font-size: 0.86rem !important;
  line-height: 38px !important;
}
body.device-iphone header.app .rf-search-stack .search-box button,
body.device-ipad header.app .rf-search-stack .search-box button {
  flex: 0 0 auto !important;
  height: 38px !important;
  padding: 0 12px !important;
  font-size: 0.8rem !important;
  white-space: nowrap !important;
}

/* nézetváltó: a telefon-oszlop alján, a kereten belül */
body.device-iphone header.app .rf-search-stack .rf-device-switch,
body.device-ipad header.app .rf-search-stack .rf-device-switch {
  position: fixed !important;
  left: 50% !important;
  bottom: 22px !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  z-index: 275 !important;
  margin: 0 !important;
  padding: 0.2rem !important;
  background: linear-gradient(135deg, #fff7ef, #ffe0cc) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,185,138,.6) !important;
}

/* drawer menü */
body.device-iphone header.app nav,
body.device-ipad header.app nav {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(82vw, 300px) !important;
  max-width: 300px !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 4.5rem 0.9rem 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  background: #FFF8F2 !important;
  box-shadow: -18px 0 40px rgba(0,0,0,.3);
  transform: translateX(110%) !important;
  transition: transform .22s ease !important;
  z-index: 310 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex: none !important;
}
body.device-iphone.nav-drawer-open header.app nav,
body.device-ipad.nav-drawer-open header.app nav {
  transform: translateX(0) !important;
}
body.device-iphone header.app nav > a,
body.device-ipad header.app nav > a,
body.device-iphone header.app nav .rf-nav-osszes-stack > a,
body.device-ipad header.app nav .rf-nav-osszes-stack > a {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  justify-content: flex-start !important;
  align-items: center !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
}
body.device-iphone header.app nav .nav-drop,
body.device-ipad header.app nav .nav-drop { width: 100%; }
body.device-iphone header.app nav .nav-drop-menu,
body.device-ipad header.app nav .nav-drop-menu {
  position: static !important;
  display: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 0 0 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
body.device-iphone header.app nav .nav-drop.open .nav-drop-menu,
body.device-iphone header.app nav .nav-drop:focus-within .nav-drop-menu,
body.device-ipad header.app nav .nav-drop.open .nav-drop-menu,
body.device-ipad header.app nav .nav-drop:focus-within .nav-drop-menu {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* tartalom */
body.device-iphone .hero.hero-fancy,
body.device-ipad .hero.hero-fancy {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-areas:
    "copy"
    "chips"
    "girl" !important;
  gap: 0.6rem !important;
  padding: 0.85rem !important;
  min-height: 0 !important;
  margin: 10px 10px 12px !important;
}
body.device-iphone .hero-fancy-copy,
body.device-ipad .hero-fancy-copy {
  grid-area: copy !important;
  text-align: left !important;
  padding: 0 !important;
  max-width: none !important;
}
body.device-iphone .hero-fancy-chips,
body.device-ipad .hero-fancy-chips {
  grid-area: chips !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body.device-iphone .hero-fancy-girl,
body.device-ipad .hero-fancy-girl {
  grid-area: girl !important;
  max-height: 180px !important;
  height: auto !important;
  width: min(70%, 240px) !important;
  justify-self: center !important;
  object-position: center bottom !important;
}
body.device-iphone .hero-fancy-title {
  font-size: 1.45rem !important;
}
body.device-iphone .page-with-filters,
body.device-ipad .page-with-filters {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
body.device-iphone .filters-sidebar,
body.device-ipad .filters-sidebar {
  width: 100% !important;
  max-width: none !important;
  position: static !important;
  z-index: 1 !important;
}
body.device-iphone .cat-list,
body.device-iphone .cards,
body.device-iphone .grid,
body.device-iphone .recipe-grid,
body.device-iphone .filters-main .cat-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
body.device-ipad .cat-list,
body.device-ipad .cards,
body.device-ipad .grid,
body.device-ipad .recipe-grid,
body.device-ipad .filters-main .cat-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
body.device-iphone .et2-layout,
body.device-iphone .edz-layout,
body.device-ipad .et2-layout,
body.device-ipad .edz-layout {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: 1fr !important;
}
body.device-iphone .et2-sidebar,
body.device-iphone .edz-sidebar,
body.device-ipad .et2-sidebar,
body.device-ipad .edz-sidebar {
  position: static !important;
  width: 100% !important;
  max-width: none !important;
}


/* mobile3 — phone shell: drawer és dock a kereten belül */
.rf-phone-shell {
  position: relative;
  margin: 18px auto;
  background: #FFF8F2;
  overflow: hidden;
  box-sizing: border-box;
}
/* p8g — legacy framed shell ONLY in Mac preview (ne native 100vw / letterbox) */
body.device-preview.device-iphone .rf-phone-shell,
body.device-preview .rf-phone-shell.is-iphone {
  width: 390px;
  max-width: calc(100% - 24px);
  border-radius: 32px;
  box-shadow: 0 0 0 12px #2a1e18, 0 28px 70px rgba(0,0,0,.45);
}
body.device-preview.device-ipad .rf-phone-shell,
body.device-preview .rf-phone-shell.is-ipad {
  width: 768px;
  max-width: calc(100% - 24px);
  border-radius: 26px;
  box-shadow: 0 0 0 12px #2a1e18, 0 28px 70px rgba(0,0,0,.4);
}
body.device-preview.device-iphone,
body.device-preview.device-ipad {
  background: #1c1410 !important;
  padding: 8px 0 24px !important;
}

/* shellen belül ne legyen külön max-width/árnyék a wrapen */
body.device-iphone .rf-phone-shell header.app,
body.device-ipad .rf-phone-shell header.app,
body.device-iphone .rf-phone-shell .wrap,
body.device-ipad .rf-phone-shell .wrap,
body.device-iphone .rf-phone-shell .et2-page,
body.device-ipad .rf-phone-shell .et2-page,
body.device-iphone .rf-phone-shell .edz-page,
body.device-ipad .rf-phone-shell .edz-page {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.device-iphone .rf-phone-shell .wrap,
body.device-ipad .rf-phone-shell .wrap,
body.device-iphone .rf-phone-shell .et2-page,
body.device-ipad .rf-phone-shell .et2-page,
body.device-iphone .rf-phone-shell .edz-page,
body.device-ipad .rf-phone-shell .edz-page {
  padding-bottom: 72px !important;
  background: #FFF8F2 !important;
}
body.device-iphone .rf-phone-shell header.app,
body.device-ipad .rf-phone-shell header.app {
  position: sticky !important;
  top: 0 !important;
  z-index: 40 !important;
  background: #FEEBD7 !important;
  backdrop-filter: none !important;
}

/* fejléc: csak logo + kereső + burger */
body.device-iphone header.app .inner,
body.device-ipad header.app .inner {
  padding: 8px 10px !important;
  gap: 8px !important;
  min-height: 52px !important;
}
body.device-iphone header.app .rf-search-stack .search-box button,
body.device-ipad header.app .rf-search-stack .search-box button {
  padding: 0 10px !important;
  font-size: 0 !important; /* elrejtjük a szöveget */
  width: 38px !important;
  position: relative;
}
body.device-iphone header.app .rf-search-stack .search-box button::before,
body.device-ipad header.app .rf-search-stack .search-box button::before {
  content: "⌕";
  font-size: 1.1rem;
  color: #fff;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

/* drawer: a shellhez képest absolute (nem a viewport jobb széle) */
body.device-iphone .rf-phone-shell header.app nav,
body.device-ipad .rf-phone-shell header.app nav {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: min(82%, 300px) !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  z-index: 60 !important;
  transform: translateX(105%) !important;
}
body.device-iphone.nav-drawer-open .rf-phone-shell header.app nav,
body.device-ipad.nav-drawer-open .rf-phone-shell header.app nav {
  transform: translateX(0) !important;
}
body.device-iphone .rf-nav-backdrop,
body.device-ipad .rf-nav-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 50 !important;
}
body.device-iphone.nav-drawer-open .rf-phone-shell .rf-nav-backdrop,
body.device-ipad.nav-drawer-open .rf-phone-shell .rf-nav-backdrop {
  display: block !important;
}

/* dock: shell alján */
.rf-device-dock {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 70;
}
body.device-iphone .rf-device-dock,
body.device-ipad .rf-device-dock {
  display: block;
}
.rf-device-dock .rf-device-switch {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,185,138,.6) !important;
}

/* backdrop a shellbe kerüljön */
body.device-iphone .rf-phone-shell > .rf-nav-backdrop,
body.device-ipad .rf-phone-shell > .rf-nav-backdrop { /* moved by js ideally */ }


/* mobile4 — hamburger menü kattintható (backdrop a nav alatt) */
body.device-iphone .rf-phone-shell .rf-nav-backdrop,
body.device-ipad .rf-phone-shell .rf-nav-backdrop {
  z-index: 50 !important;
  pointer-events: auto;
}
body.device-iphone .rf-phone-shell header.app,
body.device-ipad .rf-phone-shell header.app {
  z-index: 40 !important;
}
body.nav-drawer-open.device-iphone .rf-phone-shell header.app,
body.nav-drawer-open.device-ipad .rf-phone-shell header.app {
  z-index: 120 !important; /* egész header+nav a backdrop FELETT */
}
body.device-iphone .rf-phone-shell header.app nav,
body.device-ipad .rf-phone-shell header.app nav {
  z-index: 130 !important;
  pointer-events: auto !important;
}
body.device-iphone .rf-phone-shell header.app nav > a,
body.device-ipad .rf-phone-shell header.app nav > a {
  pointer-events: auto !important;
  position: relative;
  z-index: 1;
}
body.nav-drawer-open.device-iphone .rf-device-dock,
body.nav-drawer-open.device-ipad .rf-device-dock {
  z-index: 60 !important;
  pointer-events: none; /* ne fogja el a menü kattintásait */
}
body.nav-drawer-open.device-iphone .rf-device-dock .rf-device-switch,
body.nav-drawer-open.device-ipad .rf-device-dock .rf-device-switch {
  pointer-events: auto; /* a switch maga még mehessen */
}



/* mobile6 — összecsukható almenü + shell magasságra zárt, görgethető drawer */
body.device-iphone .rf-phone-shell,
body.device-ipad .rf-phone-shell {
  overflow: hidden !important;
}
body.nav-drawer-open.device-iphone .rf-phone-shell header.app,
body.nav-drawer-open.device-ipad .rf-phone-shell header.app {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  background: transparent !important;
  pointer-events: none !important;
  z-index: 200 !important;
}
body.nav-drawer-open.device-iphone .rf-phone-shell header.app .inner,
body.nav-drawer-open.device-ipad .rf-phone-shell header.app .inner {
  pointer-events: auto !important;
  background: #FEEBD7 !important;
  /* NE legyen position:relative — az abszolút nav különben az 80px-es sávhoz kötődik */
  position: static !important;
  z-index: 220;
}
body.device-iphone .rf-phone-shell header.app nav,
body.device-ipad .rf-phone-shell header.app nav {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  pointer-events: auto !important;
  z-index: 210 !important;
  padding: 4.2rem 0.85rem 5.5rem !important; /* hely a header + dock alatt */
}
body.device-iphone .rf-phone-shell header.app nav .nav-drop,
body.device-ipad .rf-phone-shell header.app nav .nav-drop {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  gap: 4px !important;
  flex: 0 0 auto !important;
}
body.device-iphone .rf-phone-shell header.app nav > a,
body.device-ipad .rf-phone-shell header.app nav > a,
body.device-iphone .rf-phone-shell header.app nav .nav-drop > a,
body.device-ipad .rf-phone-shell header.app nav .nav-drop > a,
body.device-iphone .rf-phone-shell header.app nav .nav-drop-menu a,
body.device-ipad .rf-phone-shell header.app nav .nav-drop-menu a {
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 46px !important;
  min-height: 46px !important;
  box-sizing: border-box !important;
  justify-content: flex-start !important;
  align-items: center !important;
  padding: 0 14px !important;
  margin: 0 !important;
  pointer-events: auto !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  flex: 0 0 auto !important;
}
/* almenü csak .open-nál (ne legyen 40+ sor egyszerre) */
body.device-iphone .rf-phone-shell header.app nav .nav-drop-menu,
body.device-ipad .rf-phone-shell header.app nav .nav-drop-menu {
  display: none !important;
  position: static !important;
  width: 100% !important;
  padding: 0 0 0 10px !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  gap: 4px !important;
}
body.device-iphone .rf-phone-shell header.app nav .nav-drop.open .nav-drop-menu,
body.device-ipad .rf-phone-shell header.app nav .nav-drop.open .nav-drop-menu {
  display: flex !important;
  flex-direction: column !important;
}
body.device-iphone .rf-phone-shell .rf-nav-backdrop,
body.device-ipad .rf-phone-shell .rf-nav-backdrop {
  z-index: 150 !important;
}
body.nav-drawer-open.device-iphone .rf-device-dock,
body.nav-drawer-open.device-ipad .rf-device-dock {
  z-index: 60 !important;
  pointer-events: none;
}
body.nav-drawer-open.device-iphone .rf-device-dock .rf-device-switch,
body.nav-drawer-open.device-ipad .rf-device-dock .rf-device-switch {
  pointer-events: auto;
}


/* mobile6b — teljes magasságú drawer a shellben */
body.device-iphone .rf-phone-shell,
body.device-ipad .rf-phone-shell {
  position: relative !important;
}
body.nav-drawer-open.device-iphone .rf-phone-shell header.app nav,
body.nav-drawer-open.device-ipad .rf-phone-shell header.app nav {
  height: 100% !important;
  max-height: 100% !important;
  bottom: 0 !important;
  top: 0 !important;
}


/* mobile6c — nav a teljes header (shell) magasságához, ne az .inner-hez */
body.device-iphone .rf-phone-shell header.app .inner,
body.device-ipad .rf-phone-shell header.app .inner {
  position: static !important;
}
body.nav-drawer-open.device-iphone .rf-phone-shell header.app,
body.nav-drawer-open.device-ipad .rf-phone-shell header.app {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
}
body.device-iphone .rf-phone-shell header.app nav,
body.device-ipad .rf-phone-shell header.app nav,
body.nav-drawer-open.device-iphone .rf-phone-shell header.app nav,
body.nav-drawer-open.device-ipad .rf-phone-shell header.app nav {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  width: min(82%, 300px) !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
}


/* device17/p8f — native vs preview */
:root {
  --rf-iphone17-w: 402px;
  --rf-iphone17-h: 874px;
  --rf-ipadpro-w: 1024px;
  --rf-ipadpro-h: 1366px;
}

/* Maces előnézet: sötét háttér + keretes shell (390/768) */
body.device-preview.device-iphone,
body.device-preview.device-ipad,
html.device-preview.device-iphone,
html.device-preview.device-ipad {
  background: #1c1410 !important;
  padding: 8px 0 24px !important;
  overflow-x: hidden !important;
}
body.device-preview.device-iphone .rf-phone-shell,
body.device-preview .rf-phone-shell.is-iphone {
  width: 390px !important;
  max-width: calc(100% - 24px) !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 18px auto !important;
  border-radius: 32px !important;
  box-shadow: 0 0 0 12px #2a1e18, 0 28px 70px rgba(0,0,0,.45) !important;
  overflow: hidden !important;
  padding: 0 !important;
}
body.device-preview.device-ipad .rf-phone-shell,
body.device-preview .rf-phone-shell.is-ipad {
  width: 768px !important;
  max-width: calc(100% - 24px) !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 18px auto !important;
  border-radius: 26px !important;
  box-shadow: 0 0 0 12px #2a1e18, 0 28px 70px rgba(0,0,0,.4) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* Valódi iPhone/iPad: full-bleed, NINCS 100vw (az kilóg), NINCS üres letterbox */
html.device-native,
body.device-native {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100% !important;
  background: #FFF8F2 !important;
  overflow-x: hidden !important;
}
body.device-native .rf-phone-shell,
body.device-native.device-iphone .rf-phone-shell,
body.device-native.device-ipad .rf-phone-shell {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 100% !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  background: #FFF8F2 !important;
  padding:
    env(safe-area-inset-top, 0px)
    env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px)
    env(safe-area-inset-left, 0px) !important;
  box-sizing: border-box !important;
}

/* Valódi eszközön a Desktop/iPhone/iPad váltó ne lógjon / ne foglaljon helyet */
body.device-native .rf-device-dock,
body.device-native .rf-device-switch {
  display: none !important;
}


/* régi „telefonkeret” max-width / árnyék kiütése */
body.device-iphone header.app,
body.device-iphone .wrap,
body.device-iphone .et2-page,
body.device-iphone .edz-page,
body.device-iphone .main-container,
body.device-iphone main.main-container,
body.device-iphone .rf-phone-shell header.app,
body.device-iphone .rf-phone-shell .wrap,
body.device-iphone .rf-phone-shell .et2-page,
body.device-iphone .rf-phone-shell .edz-page,
body.device-iphone .rf-phone-shell .main-container,
body.device-iphone .rf-phone-shell main.main-container {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.device-ipad header.app,
body.device-ipad .wrap,
body.device-ipad .et2-page,
body.device-ipad .edz-page,
body.device-ipad .main-container,
body.device-ipad main.main-container,
body.device-ipad .rf-phone-shell header.app,
body.device-ipad .rf-phone-shell .wrap,
body.device-ipad .rf-phone-shell .et2-page,
body.device-ipad .rf-phone-shell .edz-page,
body.device-ipad .rf-phone-shell .main-container,
body.device-ipad .rf-phone-shell main.main-container {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.device-iphone .rf-phone-shell .wrap,
body.device-iphone .rf-phone-shell .et2-page,
body.device-iphone .rf-phone-shell .edz-page,
body.device-ipad .rf-phone-shell .wrap,
body.device-ipad .rf-phone-shell .et2-page,
body.device-ipad .rf-phone-shell .edz-page {
  padding-left: 12px !important;
  padding-right: 12px !important;
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box !important;
}

/* iPhone 17 Pro: 1 oszlop, komfortos tipográfia */
body.device-iphone .cards,
body.device-iphone .cat-list,
body.device-iphone .grid,
body.device-iphone .video-grid,
body.device-iphone .rf-phone-shell .cards,
body.device-iphone .rf-phone-shell .cat-list {
  grid-template-columns: 1fr !important;
}
body.device-iphone .hero.hero-fancy,
body.device-iphone .rf-phone-shell .hero.hero-fancy {
  grid-template-columns: 1fr !important;
  border-radius: 0 !important;
  min-height: min(52vh, 420px);
}
body.device-iphone header.app .inner {
  padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
  padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
  padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
}

/* iPad Pro: 2 oszlop kártyák, szélesebb hero */
body.device-ipad .cards,
body.device-ipad .cat-list,
body.device-ipad .video-grid,
body.device-ipad .rf-phone-shell .cards,
body.device-ipad .rf-phone-shell .cat-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
body.device-ipad .hero.hero-fancy,
body.device-ipad .rf-phone-shell .hero.hero-fancy {
  grid-template-columns: 1.1fr 0.9fr !important;
  border-radius: 0 !important;
  min-height: min(42vh, 480px);
}
body.device-ipad header.app .inner {
  padding: 10px 18px !important;
  padding-top: max(10px, env(safe-area-inset-top, 0px)) !important;
}
/* p8d — logo slot/img/VIDEO azonos méret (ne ugráljon animációváltáskor) */
body.device-ipad header.app .logo,
body.device-ipad header.app .logo-slot,
body.device-ipad header.app .logo img,
body.device-ipad header.app .logo-slot img,
body.device-ipad header.app .logo video,
body.device-ipad header.app .logo-slot video,
body.device-ipad header.app .logo img.logo-static,
body.device-ipad header.app .logo video.logo-video,
body.device-ipad header.app .logo-slot img.logo-static,
body.device-ipad header.app .logo-slot video.logo-video {
  width: 56px !important;
  height: 82px !important;
  max-width: 56px !important;
  max-height: 82px !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}
body.device-ipad header.app .logo {
  flex: 0 0 56px !important;
  flex-basis: 56px !important;
  width: 56px !important;
  height: 82px !important;
  overflow: hidden !important;
}
body.device-ipad header.app .logo-slot {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  flex: 0 0 56px !important;
}
body.device-ipad header.app .logo-slot img.logo-static,
body.device-ipad header.app .logo-slot video.logo-video {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

/* dock a safe area fölött, ne takarjon */
body.device-iphone .rf-device-dock,
body.device-ipad .rf-device-dock {
  bottom: max(14px, calc(10px + env(safe-area-inset-bottom, 0px))) !important;
  z-index: 80 !important;
}

/* drawer továbbra is a shell teljes magasságában */
body.nav-drawer-open.device-iphone .rf-phone-shell header.app,
body.nav-drawer-open.device-ipad .rf-phone-shell header.app {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
}
body.device-iphone .rf-phone-shell header.app nav,
body.device-ipad .rf-phone-shell header.app nav {
  height: 100% !important;
  max-height: none !important;
}

/* ha nincs shell (edge), tartalom akkor is full bleed */
body.device-iphone > header.app,
body.device-ipad > header.app,
body.device-iphone > .wrap,
body.device-ipad > .wrap {
  max-width: none !important;
  width: 100% !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* device17b — body háttér is full bleed (html body specificitás) */
html.device-iphone,
html.device-ipad,
html.device-iphone body,
html.device-ipad body,
body.device-iphone,
body.device-ipad {
  background: #FFF8F2 !important;
  background-color: #FFF8F2 !important;
}


/* mobile7 — drawer hit-target + Safari pointer-events + teljes chrome */
/* Safari: pointer-events:none a headeren elnyeli a touch-ot a gyerekeken is → tiltsuk */
body.nav-drawer-open.device-iphone .rf-phone-shell header.app,
body.nav-drawer-open.device-ipad .rf-phone-shell header.app {
  pointer-events: auto !important;
  background: transparent !important;
}
body.nav-drawer-open.device-iphone .rf-phone-shell header.app .inner,
body.nav-drawer-open.device-ipad .rf-phone-shell header.app .inner {
  pointer-events: auto !important;
  position: relative !important; /* stacking a tartalom FELETT a sávhoz */
  z-index: 230 !important;
  background: #FEEBD7 !important;
}
/* nav abszolút a HEADER-hez (ne .inner), full height */
body.device-iphone .rf-phone-shell header.app,
body.device-ipad .rf-phone-shell header.app {
  isolation: isolate;
}
body.nav-drawer-open.device-iphone .rf-phone-shell header.app {
  /* header full-shell containing block for nav — .inner relative nem foghatja el */
}
body.device-iphone .rf-phone-shell header.app nav,
body.device-ipad .rf-phone-shell header.app nav {
  pointer-events: auto !important;
  touch-action: manipulation;
  z-index: 240 !important;
  -webkit-overflow-scrolling: touch;
}
body.device-iphone .rf-phone-shell header.app nav a,
body.device-ipad .rf-phone-shell header.app nav a,
body.device-iphone .rf-phone-shell header.app nav .nav-drop,
body.device-ipad .rf-phone-shell header.app nav .nav-drop,
body.device-iphone .rf-phone-shell header.app nav .nav-drop-menu,
body.device-ipad .rf-phone-shell header.app nav .nav-drop-menu {
  pointer-events: auto !important;
  touch-action: manipulation;
  cursor: pointer;
  position: relative;
  z-index: 1;
}
/* backdrop a nav ALATT, de a tartalom FELETT */
body.device-iphone .rf-phone-shell .rf-nav-backdrop,
body.device-ipad .rf-phone-shell .rf-nav-backdrop {
  z-index: 180 !important;
  pointer-events: auto !important;
}
body.nav-drawer-open.device-iphone .rf-phone-shell header.app,
body.nav-drawer-open.device-ipad .rf-phone-shell header.app {
  z-index: 220 !important;
}

/* .inner relative újra: nav-ot emeljük a header szintjére JS nélkül —
   a nav position absolute top/bottom a headerhez kell — .inner ne legyen CB */
body.nav-drawer-open.device-iphone .rf-phone-shell header.app .inner,
body.nav-drawer-open.device-ipad .rf-phone-shell header.app .inner {
  position: static !important;
}
body.nav-drawer-open.device-iphone .rf-phone-shell header.app .inner > *:not(nav),
body.nav-drawer-open.device-ipad .rf-phone-shell header.app .inner > *:not(nav) {
  position: relative;
  z-index: 250;
  pointer-events: auto !important;
}

/* dock ne takarja a menü alját drawer közben */
body.nav-drawer-open.device-iphone .rf-device-dock,
body.nav-drawer-open.device-ipad .rf-device-dock {
  pointer-events: none !important;
  opacity: 0.35;
}
body.nav-drawer-open.device-iphone .rf-device-dock .rf-device-switch,
body.nav-drawer-open.device-ipad .rf-device-dock .rf-device-switch {
  pointer-events: none !important;
}

/* kereső / logo / burger mindig elérhető */
body.device-iphone header.app .rf-nav-burger,
body.device-ipad header.app .rf-nav-burger,
body.device-iphone header.app .search-box,
body.device-ipad header.app .search-box,
body.device-iphone header.app .search-box input,
body.device-ipad header.app .search-box input,
body.device-iphone header.app .logo,
body.device-ipad header.app .logo {
  pointer-events: auto !important;
  touch-action: manipulation;
}

/* iPad Pro: szélesebb drawer */
body.device-ipad .rf-phone-shell header.app nav {
  width: min(42%, 380px) !important;
  max-width: 380px !important;
}

/* szűrő sidebar sticky ne fedje a drawert */
body.nav-drawer-open.device-iphone .filters,
body.nav-drawer-open.device-ipad .filters,
body.nav-drawer-open.device-iphone .filt-side,
body.nav-drawer-open.device-ipad .filt-side,
body.nav-drawer-open.device-iphone aside,
body.nav-drawer-open.device-ipad aside {
  pointer-events: none !important;
  z-index: 1 !important;
}


/* polish3 — dock sáv + shell nav + esztétika */
body.device-iphone .rf-device-dock,
body.device-ipad .rf-device-dock,
body.device-iphone .rf-device-dock.is-bar,
body.device-ipad .rf-device-dock.is-bar {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  transform: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  z-index: 30 !important;
  background: #FEEBD7 !important;
  border-bottom: 1px solid rgba(231,111,81,.16) !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
body.device-iphone .rf-device-dock .rf-device-switch,
body.device-ipad .rf-device-dock .rf-device-switch {
  position: static !important;
  transform: none !important;
  pointer-events: auto !important;
}
body.nav-drawer-open.device-iphone .rf-device-dock,
body.nav-drawer-open.device-ipad .rf-device-dock {
  pointer-events: none !important;
}
body.device-iphone .rf-phone-shell .wrap,
body.device-ipad .rf-phone-shell .wrap,
body.device-iphone .rf-phone-shell .et2-page,
body.device-ipad .rf-phone-shell .et2-page,
body.device-iphone .rf-phone-shell .edz-page,
body.device-ipad .rf-phone-shell .edz-page {
  padding-bottom: 28px !important;
}
body.device-iphone .hero-fancy-girl,
body.device-iphone .rf-phone-shell .hero-fancy-girl {
  max-height: 160px !important;
  width: min(58%, 200px) !important;
  justify-self: center !important;
}
body.device-iphone .hero.hero-fancy,
body.device-iphone .rf-phone-shell .hero.hero-fancy {
  margin: 8px 10px 10px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

/* shell > nav drawer */
body.device-iphone .rf-phone-shell > nav,
body.device-ipad .rf-phone-shell > nav {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: min(86%, 320px) !important;
  max-width: 320px !important;
  height: auto !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 4.5rem 0.85rem 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  background: #FFF8F2 !important;
  box-shadow: -18px 0 40px rgba(0,0,0,.28) !important;
  transform: translateX(110%) !important;
  transition: transform .22s ease !important;
  z-index: 400 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  pointer-events: auto !important;
  touch-action: manipulation;
}
body.device-iphone.nav-drawer-open .rf-phone-shell > nav,
body.device-ipad.nav-drawer-open .rf-phone-shell > nav {
  transform: translateX(0) !important;
}
body.device-iphone .rf-phone-shell > nav a,
body.device-ipad .rf-phone-shell > nav a {
  display: flex !important;
  width: 100% !important;
  min-height: 46px !important;
  height: 46px !important;
  align-items: center !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
  touch-action: manipulation;
  flex: 0 0 auto !important;
}
body.device-iphone .rf-phone-shell > nav .nav-drop { display:flex !important; flex-direction:column !important; width:100% !important; gap:4px !important; }
body.device-iphone .rf-phone-shell > nav .nav-drop-menu,
body.device-ipad .rf-phone-shell > nav .nav-drop-menu {
  display: none !important;
  position: static !important;
  width: 100% !important;
  padding: 0 0 0 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
body.device-iphone .rf-phone-shell > nav .nav-drop.open .nav-drop-menu,
body.device-ipad .rf-phone-shell > nav .nav-drop.open .nav-drop-menu {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
body.nav-drawer-open.device-iphone .rf-phone-shell header.app,
body.nav-drawer-open.device-ipad .rf-phone-shell header.app {
  position: sticky !important;
  top: 0 !important;
  inset: auto !important;
  height: auto !important;
  max-height: none !important;
  background: #FEEBD7 !important;
  pointer-events: auto !important;
  z-index: 420 !important;
}
body.device-iphone .rf-phone-shell > .rf-nav-backdrop,
body.device-ipad .rf-phone-shell > .rf-nav-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 350 !important;
  pointer-events: auto !important;
  background: rgba(20,12,8,.45) !important;
}
body.device-iphone.nav-drawer-open .rf-phone-shell > .rf-nav-backdrop,
body.device-ipad.nav-drawer-open .rf-phone-shell > .rf-nav-backdrop {
  display: block !important;
}
body.device-ipad .rf-phone-shell > nav {
  width: min(42%, 380px) !important;
  max-width: 380px !important;
}


/* polish4 — fejléc: logo | kereső | burger minden oldalon */
body.device-iphone header.app .inner,
body.device-ipad header.app .inner {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}
body.device-iphone header.app .logo,
body.device-ipad header.app .logo {
  order: 1 !important;
  flex: 0 0 auto !important;
  margin-right: 0 !important;
}
body.device-iphone header.app .rf-search-stack,
body.device-ipad header.app .rf-search-stack {
  order: 2 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  margin: 0 !important;
}
body.device-iphone header.app .rf-search-stack .rf-device-switch,
body.device-ipad header.app .rf-search-stack .rf-device-switch {
  display: none !important; /* dock sávban van */
}
body.device-iphone header.app .rf-search-stack .search-box,
body.device-ipad header.app .rf-search-stack .search-box {
  width: 100% !important;
  display: flex !important;
  min-width: 0 !important;
}
body.device-iphone header.app .rf-search-stack .search-box input,
body.device-ipad header.app .rf-search-stack .search-box input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
}
body.device-iphone header.app .rf-nav-burger,
body.device-ipad header.app .rf-nav-burger {
  order: 3 !important;
  flex: 0 0 40px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: inline-flex !important;
}


/* polish5 — drawer almenük mindig látszanak + erős kontraszt */
body.device-iphone .rf-phone-shell > nav,
body.device-ipad .rf-phone-shell > nav {
  background: #FFF8F2 !important;
  color: #403129 !important;
  overflow-y: scroll !important; /* iOS: auto néha nem görget */
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain;
}
body.device-iphone .rf-phone-shell > nav .nav-drop,
body.device-ipad .rf-phone-shell > nav .nav-drop {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  gap: 4px !important;
  flex: 0 0 auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  min-height: 46px !important;
}
/* ALMENÜ MINDIG NYITVA — ne kelljen külön koppintás */
body.device-iphone .rf-phone-shell > nav .nav-drop-menu,
body.device-ipad .rf-phone-shell > nav .nav-drop-menu,
body.device-iphone .rf-phone-shell > nav .nav-drop.open .nav-drop-menu,
body.device-ipad .rf-phone-shell > nav .nav-drop.open .nav-drop-menu,
body.device-iphone .rf-phone-shell > nav .nav-drop:focus-within .nav-drop-menu,
body.device-ipad .rf-phone-shell > nav .nav-drop:focus-within .nav-drop-menu {
  display: flex !important;
  flex-direction: column !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 0 0 10px !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  gap: 4px !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2 !important;
}
body.device-iphone .rf-phone-shell > nav > a,
body.device-ipad .rf-phone-shell > nav > a,
body.device-iphone .rf-phone-shell > nav .nav-drop > a,
body.device-ipad .rf-phone-shell > nav .nav-drop > a,
body.device-iphone .rf-phone-shell > nav .nav-drop-menu a,
body.device-ipad .rf-phone-shell > nav .nav-drop-menu a {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border-radius: 14px !important;
  background: #F3C4C9 !important;
  color: #403129 !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 2 !important;
}
body.device-iphone .rf-phone-shell > nav > a.active,
body.device-ipad .rf-phone-shell > nav > a.active {
  background: #F4A394 !important;
  color: #fff !important;
}
body.device-iphone .rf-phone-shell > nav .nav-drop-menu a,
body.device-ipad .rf-phone-shell > nav .nav-drop-menu a {
  background: #fff !important;
  border: 1px solid rgba(231,111,81,.18) !important;
  font-size: .95rem !important;
  font-weight: 650 !important;
}
body.device-iphone .rf-phone-shell > nav .nav-drop-menu a em,
body.device-ipad .rf-phone-shell > nav .nav-drop-menu a em {
  margin-left: auto !important;
  color: #F4A394 !important;
  font-style: normal !important;
  font-weight: 800 !important;
}


/* polish6 — lapos mobil menü: minden <a> látszik */
body.device-iphone .rf-phone-shell > nav,
body.device-ipad .rf-phone-shell > nav {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  padding: 4.2rem 0.85rem 2rem !important;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch !important;
  background: #FFF8F2 !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 500 !important;
}
body.device-iphone .rf-phone-shell > nav > a,
body.device-ipad .rf-phone-shell > nav > a {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #403129 !important;
  background: #F3C4C9 !important;
  min-height: 44px !important;
  height: auto !important;
  width: 100% !important;
  max-width: none !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 5 !important;
  pointer-events: auto !important;
}
body.device-iphone .rf-phone-shell > nav > a.active,
body.device-ipad .rf-phone-shell > nav > a.active {
  background: #F4A394 !important;
  color: #fff !important;
}
/* ha mégis maradna nav-drop, ne rejtse el */
body.device-iphone .rf-phone-shell > nav .nav-drop,
body.device-ipad .rf-phone-shell > nav .nav-drop {
  display: contents !important; /* gyerekek a nav flexébe kerülnek */
}
body.device-iphone .rf-phone-shell > nav .nav-drop-menu,
body.device-ipad .rf-phone-shell > nav .nav-drop-menu {
  display: contents !important;
}

/* p6c — almenü linkek a lapos listában */
body.device-iphone .rf-phone-shell > nav > a.rf-nav-sub,
body.device-ipad .rf-phone-shell > nav > a.rf-nav-sub {
  background: #fff !important;
  border: 1px solid rgba(231,111,81,.18) !important;
  padding-left: 22px !important;
  font-weight: 650 !important;
  font-size: 0.95rem !important;
}

/* p6d — drawer: TILTSUK a flex-wrap-ot (base nav{wrap} miatt 2. oszlopba mentek a linkek) */
body.device-iphone .rf-phone-shell > nav,
body.device-ipad .rf-phone-shell > nav {
  flex-wrap: nowrap !important;
  flex: none !important;
  align-content: flex-start !important;
  align-items: stretch !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)) !important;
}
body.device-iphone .rf-phone-shell > nav > a,
body.device-ipad .rf-phone-shell > nav > a,
body.device-iphone .rf-phone-shell > nav > .rf-nav-ver,
body.device-ipad .rf-phone-shell > nav > .rf-nav-ver {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
body.device-iphone .rf-phone-shell > nav > a.rf-nav-sub,
body.device-ipad .rf-phone-shell > nav > a.rf-nav-sub {
  min-height: 40px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
/* burger mindig a fejlécben mobil szélességen is, ha valaki desktop localStorage-rel nyit */
@media (max-width: 720px) {
  .rf-nav-burger { display: inline-flex !important; }
}


/* p8d — iPhone logo is locked; prevent HTML width/height attrs from jumping */
body.device-iphone header.app .logo,
body.device-iphone header.app .logo-slot {
  overflow: hidden !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 64px !important;
}
body.device-iphone header.app .logo-slot {
  width: 42px !important;
  height: 62px !important;
}
body.device-iphone header.app .logo img,
body.device-iphone header.app .logo video,
body.device-iphone header.app .logo-slot img,
body.device-iphone header.app .logo-slot video,
body.device-iphone header.app .logo img.logo-static,
body.device-iphone header.app .logo video.logo-video,
body.device-iphone header.app .logo-slot img.logo-static,
body.device-iphone header.app .logo-slot video.logo-video {
  width: 42px !important;
  height: 62px !important;
  max-width: 42px !important;
  max-height: 62px !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}
body.device-iphone header.app .logo-slot img.logo-static,
body.device-iphone header.app .logo-slot video.logo-video {
  position: absolute !important;
  left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important;
}

/* p8d — edzésterv videóképek mobil/tablet nézetben */
body.device-iphone .edz2-thumb,
body.device-ipad .edz2-thumb {
  width: 100% !important;
  height: auto !important;
  min-height: 120px !important;
  max-height: 180px !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  background: #f3e7dc !important;
}
body.device-iphone .edz2-thumb-ph,
body.device-ipad .edz2-thumb-ph {
  width: 100% !important;
  height: auto !important;
  min-height: 120px !important;
  max-height: 180px !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: #f3e7dc !important;
  /* ne force-oljuk a display:block-ot — a rejtett PH maradjon hidden */
}
body.device-iphone .edz-list-row .edz2-thumb,
body.device-ipad .edz-list-row .edz2-thumb,
body.device-iphone .edz-list-row .edz2-thumb-ph,
body.device-ipad .edz-list-row .edz2-thumb-ph {
  width: 96px !important;
  min-width: 96px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  aspect-ratio: auto !important;
  border-radius: 10px !important;
  object-fit: cover !important;
}
body.device-iphone .edz-week-grid,
body.device-ipad .edz-week-grid {
  grid-template-columns: 1fr !important;
}
@media (min-width: 700px) {
  body.device-ipad .edz-week-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* p8e — logo ne legyen narancs/pezsgő háttér a slotban */
body.device-iphone header.app .logo,
body.device-ipad header.app .logo,
body.device-iphone header.app .logo-slot,
body.device-ipad header.app .logo-slot,
body.device-iphone header.app .logo img,
body.device-ipad header.app .logo img,
body.device-iphone header.app .logo video,
body.device-ipad header.app .logo video {
  background: transparent !important;
  box-shadow: none !important;
}


/* p8f — native: ne legyen 390px középre zárt wrap / sötét keret */
body.device-native.device-iphone .wrap,
body.device-native.device-iphone .et2-page,
body.device-native.device-iphone .edz-page,
body.device-native.device-iphone .main-container,
body.device-native.device-iphone main.main-container,
body.device-native.device-ipad .wrap,
body.device-native.device-ipad .et2-page,
body.device-native.device-ipad .edz-page,
body.device-native.device-ipad .main-container,
body.device-native.device-ipad main.main-container {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.device-native .rf-device-dock.is-bar {
  display: none !important;
}


/* ========== p8g polish ========== */

/* Native: harden full-bleed (win over any leftover unscoped preview chrome) */
html.device-native,
body.device-native,
html.device-native.device-iphone,
body.device-native.device-iphone,
html.device-native.device-ipad,
body.device-native.device-ipad {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100% !important;
  background: #FFF8F2 !important;
  overflow-x: hidden !important;
}
body.device-native .rf-phone-shell,
body.device-native.device-iphone .rf-phone-shell,
body.device-native.device-ipad .rf-phone-shell {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow-x: hidden !important;
  background: #FFF8F2 !important;
}
body.device-native header.app,
body.device-native .wrap,
body.device-native .et2-page,
body.device-native .edz-page,
body.device-native .main-container,
body.device-native main.main-container {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Native drawer: viewport-fixed so menü görgethető 100dvh-n belül, nem a teljes oldal magasságán */
body.device-native .rf-phone-shell > nav,
body.device-native.device-iphone .rf-phone-shell > nav,
body.device-native.device-ipad .rf-phone-shell > nav {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(82vw, 300px) !important;
  height: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  z-index: 80 !important;
  transform: translateX(105%) !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.device-native.nav-drawer-open .rf-phone-shell > nav,
body.device-native.device-iphone.nav-drawer-open .rf-phone-shell > nav,
body.device-native.device-ipad.nav-drawer-open .rf-phone-shell > nav {
  transform: translateX(0) !important;
  visibility: visible !important;
  pointer-events: auto !important;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch !important;
}
body.device-native .rf-nav-backdrop,
body.device-native.device-iphone .rf-nav-backdrop,
body.device-native.device-ipad .rf-nav-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 70 !important;
}

/* Preview dock: soha ne lógjon ki vízszintesen */
body.device-preview .rf-device-dock.is-bar,
body.device-preview .rf-device-dock {
  max-width: 100% !important;
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
body.device-preview .rf-phone-shell {
  max-width: calc(100% - 24px) !important;
  box-sizing: border-box !important;
}
body.device-preview {
  overflow-x: hidden !important;
}

/* Étrend hét rács: vízszintes scroll a wrapen belül, ne a documenten */
body.device-iphone .et2-week-wrap,
body.device-ipad .et2-week-wrap,
body.device-native .et2-week-wrap,
body.device-preview .et2-week-wrap {
  max-width: 100% !important;
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  overscroll-behavior-x: contain !important;
  -webkit-overflow-scrolling: touch !important;
}
body.device-iphone .et2-cal-toolbar,
body.device-ipad .et2-cal-toolbar {
  max-width: 100% !important;
  overflow-x: auto !important;
  overscroll-behavior-x: contain !important;
}

/* Edzésterv thumbs: ne legyen óriás narancs gradient / túl magas placeholder */
body.device-iphone .edz2-thumb,
body.device-ipad .edz2-thumb,
body.device-iphone .edz2-thumb-ph,
body.device-ipad .edz2-thumb-ph,
body.device-preview .edz2-thumb,
body.device-preview .edz2-thumb-ph {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 96px !important;
  max-height: 160px !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  background: #f3e7dc !important;
  background-image: none !important;
}
body.device-iphone .edz2-card,
body.device-ipad .edz2-card {
  max-width: 100% !important;
  overflow: hidden !important;
}
body.device-iphone .edz-list-row .edz2-thumb,
body.device-ipad .edz-list-row .edz2-thumb,
body.device-iphone .edz-list-row .edz2-thumb-ph,
body.device-ipad .edz-list-row .edz2-thumb-ph {
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  aspect-ratio: auto !important;
}

/* Logo: ipad/iphone img==video box stabil */
body.device-iphone header.app .logo,
body.device-iphone header.app .logo-slot {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 64px !important;
  overflow: hidden !important;
  background: transparent !important;
}
body.device-iphone header.app .logo img,
body.device-iphone header.app .logo video,
body.device-iphone header.app .logo-slot img,
body.device-iphone header.app .logo-slot video {
  width: 42px !important;
  height: 62px !important;
  max-width: 42px !important;
  max-height: 62px !important;
  object-fit: contain !important;
  background: transparent !important;
}
body.device-ipad header.app .logo,
body.device-ipad header.app .logo-slot {
  flex: 0 0 56px !important;
  width: 56px !important;
  height: 82px !important;
  overflow: hidden !important;
  background: transparent !important;
}
body.device-ipad header.app .logo img,
body.device-ipad header.app .logo video,
body.device-ipad header.app .logo-slot img,
body.device-ipad header.app .logo-slot video {
  width: 56px !important;
  height: 82px !important;
  max-width: 56px !important;
  max-height: 82px !important;
  object-fit: contain !important;
  background: transparent !important;
}

/* Lista nézet: [hidden] győzzön display fölött (etrend + edz) */
.et2-week-grid[hidden],
.et2-week-list[hidden],
.et2-week-wrap[hidden],
.et2-week-wrap.is-lista-hidden,
.edz-week-grid[hidden],
.edz-week-list[hidden],
.edz-week-wrap[hidden] {
  display: none !important;
}


/* p8h — edz lista/egyszerű overflow */
body.device-iphone .edz-shell,
body.device-ipad .edz-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
body.device-iphone .edz-cal-section,
body.device-iphone .edz-sidebar,
body.device-iphone .edz-week-list,
body.device-iphone .edz-week-wrap,
body.device-iphone .edz-week-grid,
body.device-ipad .edz-cal-section,
body.device-ipad .edz-sidebar,
body.device-ipad .edz-week-list,
body.device-ipad .edz-week-wrap,
body.device-ipad .edz-week-grid {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}
body.device-iphone .edz-list-row,
body.device-iphone .edz-simple-row,
body.device-ipad .edz-list-row,
body.device-ipad .edz-simple-row {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
body.device-iphone .edz-list-row .edz2-actions,
body.device-ipad .edz-list-row .edz2-actions {
  flex-shrink: 0 !important;
}
/* lista thumb: 96px túl széles volt a sorban → vissza 56 */
body.device-iphone .edz-list-row .edz2-thumb,
body.device-iphone .edz-list-row .edz2-thumb-ph,
body.device-ipad .edz-list-row .edz2-thumb,
body.device-ipad .edz-list-row .edz2-thumb-ph {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  aspect-ratio: auto !important;
}
body.device-iphone .edz-view-toggles,
body.device-ipad .edz-view-toggles {
  max-width: 100% !important;
  flex-wrap: wrap !important;
}
body.device-iphone .edz-view-btn,
body.device-ipad .edz-view-btn {
  padding: 6px 10px !important;
  font-size: .78rem !important;
}
body.device-iphone .edz-cal-toolbar,
body.device-ipad .edz-cal-toolbar {
  max-width: 100% !important;
  min-width: 0 !important;
}
body.device-iphone .edz-cal-right,
body.device-ipad .edz-cal-right {
  max-width: 100% !important;
  min-width: 0 !important;
}


/* p8i — rejtett thumb-ph ne foglaljon helyet */
/* A mobil szabályok display:block !important-tel felülírták a style="display:none"-t,
   ezért a barnás placeholder a videókép ALATT is megjelent és helyet foglalt. */
body.device-iphone .edz2-thumb-ph[style*="display:none"],
body.device-iphone .edz2-thumb-ph[style*="display: none"],
body.device-ipad .edz2-thumb-ph[style*="display:none"],
body.device-ipad .edz2-thumb-ph[style*="display: none"],
body.device-preview .edz2-thumb-ph[style*="display:none"],
body.device-preview .edz2-thumb-ph[style*="display: none"],
.edz2-thumb-ph[style*="display:none"],
.edz2-thumb-ph[style*="display: none"] {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* —— Profil / auth (p9) —— */
header.app nav a.ba-nav-profil {
  background: #fff7f2;
  border: 1px solid rgba(231,111,81,.28);
}
header.app nav a.ba-nav-profil.is-in {
  background: #F4A394;
  color: #fff;
  border-color: transparent;
}
.ba-login-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  background: #fff4ec;
  border: 1px solid rgba(231,111,81,.25);
  color: #403129;
  padding: 10px 14px;
  border-radius: 14px;
  margin: 12px 0 8px;
  font-weight: 650;
}
.ba-btn-primary {
  appearance: none;
  border: 0;
  background: #F4A394;
  color: #fff;
  font-weight: 750;
  border-radius: 12px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 1rem;
}
.ba-btn-primary:disabled { opacity: .55; cursor: wait; }
.ba-btn-small { padding: 7px 12px; font-size: .92rem; }
.ba-btn-ghost {
  appearance: none;
  border: 1px solid rgba(61,44,41,.18);
  background: #fff;
  color: #403129;
  font-weight: 700;
  border-radius: 12px;
  padding: 10px 16px;
  cursor: pointer;
}
.ba-modal[hidden] { display: none !important; }
.ba-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 18px;
}
.ba-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(40, 22, 18, .45);
}
.ba-modal-card {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  background: #fffaf6;
  border-radius: 20px;
  padding: 22px 22px 18px;
  box-shadow: 0 18px 50px rgba(80, 30, 20, .22);
  color: #403129;
}
.ba-modal-x {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: #8a6c64;
}
.ba-modal-title { margin: 0 0 6px; font-size: 1.35rem; }
.ba-modal-lead { margin: 0 0 14px; color: #6d524c; font-size: .95rem; }
.ba-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-weight: 650; font-size: .92rem; }
.ba-field input {
  border: 1px solid rgba(61,44,41,.18);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 1rem;
  font-weight: 500;
}
.ba-modal-err { color: #b42318; font-weight: 700; margin: 0 0 10px; }
.ba-modal-foot { margin: 12px 0 0; font-size: .88rem; color: #6d524c; }
body.ba-modal-open { overflow: hidden; }

/* Auth Phase 2 — admin users panel */
.ba-modal-card-wide { width: min(560px, 100%); }
.ba-modal-ok { color: #1b7a3d; font-weight: 700; margin: 0 0 10px; }
.ba-profile-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.ba-users-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; max-height: min(42vh, 320px); overflow: auto; }
.ba-user-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid rgba(61,44,41,.12);
}
.ba-user-row.is-disabled { opacity: .72; background: #f7f2ef; }
.ba-user-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .95rem; }
.ba-user-meta { color: #8a6c64; font-weight: 600; font-size: .88rem; }
.ba-user-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ba-badge {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 999px; text-transform: lowercase;
}
.ba-badge-admin { background: #F4A394; color: #fff; }
.ba-badge-user { background: #f0e4dc; color: #5a3f38; }
.ba-badge-off { background: #ececec; color: #666; }
.ba-badge-you { background: #ffe8c8; color: #8a4b12; }
.ba-btn-tiny { padding: 5px 10px; font-size: .82rem; border-radius: 10px; }
.ba-btn-danger { color: #b42318; border-color: rgba(180,35,24,.28); }
.ba-create-box {
  border: 1px dashed rgba(231,111,81,.35); border-radius: 14px; padding: 8px 12px 12px; background: #fff7f2;
}
.ba-create-box summary { cursor: pointer; font-weight: 800; color: #403129; margin-bottom: 8px; }
.ba-admin-form .ba-field select {
  border: 1px solid rgba(61,44,41,.18); border-radius: 12px; padding: 10px 12px; font-size: 1rem; font-weight: 500; background: #fff;
}
.ba-muted { color: #6d524c; font-size: .9rem; margin: 0 0 8px; }

/* —— Recipe share ACL (p11) —— */
.ba-share-fieldset {
  border: 1px solid rgba(231,111,81,.22);
  border-radius: 14px;
  padding: 10px 12px 12px;
  margin: 12px 0;
  background: #fffaf7;
}
.ba-share-fieldset legend {
  font-weight: 800;
  padding: 0 6px;
  color: #403129;
}
.ba-share-list { display: flex; flex-direction: column; gap: 6px; max-height: min(36vh, 260px); overflow: auto; }
.ba-share-row {
  display: flex; align-items: flex-start; gap: 10px;
  font-weight: 650; font-size: .92rem; cursor: pointer;
  padding: 6px 8px; border-radius: 10px; background: #fff;
  border: 1px solid rgba(0,0,0,.04);
}
.ba-share-row input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.sr-tabs { display:flex; flex-wrap:wrap; gap:8px; margin: 0 0 14px; }
.sr-tab {
  appearance:none; border:1px solid rgba(231,111,81,.25); background:#fff7f2;
  color:var(--ink); font-weight:700; padding:8px 14px; border-radius:999px; cursor:pointer;
}
.sr-tab.is-active { background:#F4A394; color:#fff; border-color:#F4A394; }
.sr-section-label { margin: 18px 0 10px; font-size:1.05rem; font-weight:800; color:#403129; }
.sr-owner-badge {
  display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px;
  background:#e8f0fe; color:#1a56db; font-size:.72rem; font-weight:700;
}
.recipe-card-wrap.is-shared .card-actions { display:none; }
.recipe-card-wrap.is-shared .recipe-card { cursor:pointer; }

/* —— Site login gate (p14) —— */
html.ba-gate-pending body {
  visibility: hidden;
}

/* Logged out: hide library chrome / content; keep logo only (no Profil) */
body.ba-logged-out header.app nav a,
body.ba-logged-out header.app nav a.ba-nav-profil {
  display: none !important;
}
body.ba-logged-out header.app .search-box {
  display: none !important;
}
body.ba-logged-out #home-library,
body.ba-logged-out #hero-app,
body.ba-logged-out #hero-app-pills {
  display: none !important;
}
body.ba-logged-in #hero-login {
  display: none !important;
}

.hero-fancy-login {
  grid-area: chips;
  position: relative;
  z-index: 3;
  align-self: center;
  justify-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.15rem;
}

.hero-login-form {
  width: 100%;
  max-width: 280px;
  background: rgba(254, 235, 215, 0.92);
  border: 1px solid rgba(244, 163, 148, 0.28);
  border-radius: 22px;
  padding: 14px 14px 12px;
  box-shadow: 0 10px 28px rgba(64, 49, 41, 0.12), 0 2px 8px rgba(244, 163, 148, 0.15);
  backdrop-filter: blur(6px);
}

.hero-login-title {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--meleg-barna);
}

.hero-login-lead {
  margin: 0 0 10px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--galambszurke);
  font-weight: 600;
}

.hero-login-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px;
  font-size: 0.78rem;
  font-weight: 750;
  color: var(--meleg-barna);
}

.hero-login-field input {
  appearance: none;
  border: 1px solid rgba(64, 49, 41, 0.12);
  background: var(--tejszin);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 0.92rem;
  font-weight: 550;
  color: var(--meleg-fekete);
  box-shadow: inset 0 1px 2px rgba(64, 49, 41, 0.04), 0 2px 8px rgba(64, 49, 41, 0.05);
  outline: none;
}

.hero-login-field input:focus {
  border-color: rgba(244, 163, 148, 0.65);
  box-shadow: 0 0 0 3px rgba(244, 163, 148, 0.22);
}

.hero-login-btn {
  appearance: none;
  width: 100%;
  border: 0;
  margin-top: 4px;
  background: var(--pir);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  border-radius: 999px;
  padding: 10px 16px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(244, 163, 148, 0.35);
}

.hero-login-btn:hover { filter: brightness(1.03); }
.hero-login-btn:disabled { opacity: 0.55; cursor: wait; }

.hero-login-err {
  margin: 0 0 8px;
  color: #b42318;
  font-weight: 750;
  font-size: 0.8rem;
}

@media (max-width: 980px) {
  .hero-fancy-login {
    justify-content: flex-start;
  }
  .hero-login-form { max-width: 320px; }
}
@media (max-width: 640px) {
  .hero-fancy-login { justify-content: center; }
  .hero-login-form { max-width: 100%; }
}


/* Nala text logo — override legacy image/slot sizing */
header.app .logo,
header.app a.logo {
  position: relative !important;
  z-index: 8 !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  overflow: visible !important;
  margin-right: 10px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}
header.app .logo > img,
header.app .logo-slot,
header.app .logo img.logo-static,
header.app .logo video.logo-video {
  display: none !important;
}
header.app .inner {
  align-items: center !important;
  padding-top: 0.85rem !important;
  padding-bottom: 0.75rem !important;
}


/* —— Nala logo: girl mark + gradient word —— */
header.app a.logo {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.35rem !important;
  width: auto !important;
  height: auto !important;
  min-height: 64px !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  margin-right: 8px !important;
  text-decoration: none !important;
  line-height: 1 !important;
}
header.app a.logo .logo-slot {
  display: block !important;
  position: relative !important;
  width: 52px !important;
  height: 72px !important;
  flex: 0 0 52px !important;
  overflow: visible !important;
  background: transparent !important;
}
header.app a.logo .logo-slot img.logo-static,
header.app a.logo .logo-slot video.logo-video {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 52px !important;
  height: 72px !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  max-width: none !important;
  transform: none !important;
  background: transparent !important;
}
header.app a.logo .logo-slot video.logo-video {
  opacity: 0;
  display: none !important;
}
header.app a.logo .logo-slot.is-playing video.logo-video {
  display: block !important;
  opacity: 1 !important;
}
header.app a.logo .logo-word {
  display: inline-block !important;
  font-weight: 800 !important;
  font-size: clamp(1.45rem, 2.4vw, 1.95rem) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  color: transparent !important;
  background: linear-gradient(100deg, #F7C68C 0%, #F4A394 42%, #ff8c42 78%, #F3C4C9 100%) !important;
  background-size: 220% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: nala-logo-shimmer 7s ease-in-out infinite !important;
}
@media (max-width: 640px) {
  header.app a.logo .logo-slot {
    width: 44px !important;
    height: 62px !important;
    flex-basis: 44px !important;
  }
  header.app a.logo .logo-slot img.logo-static,
  header.app a.logo .logo-slot video.logo-video {
    width: 44px !important;
    height: 62px !important;
  }
}


/* —— Nala composite logo (girl + baked Nala text) —— */
header.app a.logo .logo-word { display: none !important; }
header.app a.logo {
  display: inline-flex !important;
  align-items: flex-end !important;
  width: auto !important;
  height: 96px !important;
  flex: 0 0 auto !important;
}
header.app a.logo .logo-slot {
  display: block !important;
  width: 64px !important;
  height: 96px !important;
  flex: 0 0 64px !important;
  position: relative !important;
  overflow: visible !important;
}
header.app a.logo .logo-slot img.logo-static,
header.app a.logo .logo-slot video.logo-video {
  display: block !important;
  width: 64px !important;
  height: 96px !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}


/* —— static Nala logo —— */
header.app a.logo {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  height: 72px !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  margin-right: 10px !important;
}
header.app a.logo img.logo-static,
header.app a.logo > img {
  display: block !important;
  height: 72px !important;
  width: auto !important;
  max-width: 120px !important;
  object-fit: contain !important;
  object-position: left center !important;
  background: transparent !important;
  transform: none !important;
}
header.app a.logo .logo-slot,
header.app a.logo video {
  display: none !important;
}
@media (max-width: 640px) {
  header.app a.logo { height: 58px !important; }
  header.app a.logo img.logo-static,
  header.app a.logo > img {
    height: 58px !important;
    max-width: 96px !important;
  }
}


/* —— animated transparent girl + gradient Nala —— */
header.app a.logo {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  margin-right: 10px !important;
  text-decoration: none !important;
  line-height: 1 !important;
  background: transparent !important;
}
header.app a.logo .logo-slot {
  display: block !important;
  position: relative !important;
  width: 52px !important;
  height: 70px !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  background: transparent !important;
}
header.app a.logo .logo-slot img.logo-static,
header.app a.logo .logo-slot video.logo-video {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 52px !important;
  height: 70px !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  background: transparent !important;
  /* hide residual black in mp4 fallback */
  mix-blend-mode: normal;
}
header.app a.logo .logo-slot video.logo-video {
  opacity: 0;
  display: none !important;
}
header.app a.logo .logo-slot.is-playing video.logo-video {
  display: block !important;
  opacity: 1 !important;
}
header.app a.logo .logo-word {
  display: block !important;
  margin-top: 1px !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
  color: transparent !important;
  background: linear-gradient(180deg, #F7C68C 0%, #F4A394 45%, #ff8c42 100%) !important;
  background-size: 100% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 1px 0 rgba(64,49,41,.12));
  animation: none !important;
}
@media (max-width: 640px) {
  header.app a.logo .logo-slot { width: 44px !important; height: 60px !important; }
  header.app a.logo .logo-slot img.logo-static,
  header.app a.logo .logo-slot video.logo-video { width: 44px !important; height: 60px !important; }
  header.app a.logo .logo-word { font-size: 0.85rem !important; }
}


/* —— v1.14.7 logo: identical still/video box, light-bg composite —— */
header.app a.logo {
  display: inline-flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  flex-direction: row !important;
  width: 64px !important;
  height: 96px !important;
  flex: 0 0 64px !important;
  overflow: visible !important;
  margin-right: 10px !important;
  background: transparent !important;
  line-height: 0 !important;
}
header.app a.logo .logo-word { display: none !important; }
header.app a.logo .logo-slot {
  display: block !important;
  position: relative !important;
  width: 64px !important;
  height: 96px !important;
  flex: 0 0 64px !important;
  overflow: hidden !important;
  background: transparent !important;
}
header.app a.logo .logo-slot img.logo-static,
header.app a.logo .logo-slot video.logo-video {
  position: absolute !important;
  inset: 0 !important;
  width: 64px !important;
  height: 96px !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  background: transparent !important;
  transform: none !important;
  display: block !important;
}
header.app a.logo .logo-slot video.logo-video {
  opacity: 0;
  pointer-events: none;
}
header.app a.logo .logo-slot.is-playing img.logo-static {
  opacity: 0 !important;
}
header.app a.logo .logo-slot.is-playing video.logo-video {
  opacity: 1 !important;
  display: block !important;
}
header.app a.logo > img {
  display: none !important;
}
@media (max-width: 640px) {
  header.app a.logo,
  header.app a.logo .logo-slot {
    width: 52px !important;
    height: 78px !important;
    flex-basis: 52px !important;
  }
  header.app a.logo .logo-slot img.logo-static,
  header.app a.logo .logo-slot video.logo-video {
    width: 52px !important;
    height: 78px !important;
  }
}