/*
 * Promocio-aloldal a bolt SAJAT szinkeszletevel (docs/89, Adam 2026-10-23: "amit irok a promohoz, minden webshop
 * mindig a sajat szinkeszletevel kapja meg").
 *
 * A promo-oldal.css utan toltodik, es a "--po-*" valtozokat a bolt szineibol szamolja: a nezet a .promo-oldal elemre
 * teszi a bolt ket szinet (--po-bolt-alap: Arculat szin_fo / premium tema --ej; --po-bolt-jel: Arculat szin_kiemelt /
 * premium tema --nap), a betuk a bolt sajat betui (--disp / --test, sajat tarhelyrol). Igy ugyanaz a promo-HTML a
 * Teli-Nyarin ejkek-narancs, a Kocsigumin kek-narancs, a regi Kocsigumin a sajat navy-narancs szinekkel jelenik meg.
 */
.promo-oldal.po-tema{
  --po-aszfalt:var(--po-bolt-alap,#0C1015);
  --po-aszfalt-2:color-mix(in srgb,var(--po-aszfalt) 90%,#fff);
  --po-aszfalt-3:color-mix(in srgb,var(--po-aszfalt) 82%,#fff);
  --po-vonal:color-mix(in srgb,var(--po-aszfalt) 70%,#fff);
  --po-kreta:#F2F5FA;
  --po-kreta-halk:color-mix(in srgb,#fff 66%,var(--po-aszfalt));
  --po-jel:var(--po-bolt-jel,#FFD400);
  --po-jel-sotet:color-mix(in srgb,var(--po-jel) 78%,#000);
  --po-kijelzo:var(--disp,"Segoe UI",system-ui,sans-serif);
  --po-szoveg:var(--test,"Segoe UI",system-ui,-apple-system,sans-serif);
}
.promo-oldal.po-tema .po-hos{
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb,var(--po-aszfalt) 74%,#fff) 0%, transparent 60%),
    linear-gradient(180deg,var(--po-aszfalt) 0%,color-mix(in srgb,var(--po-aszfalt) 92%,#fff) 70%,var(--po-aszfalt) 100%);
}
/* a gombok szovege a kiemelo szinen olvashato maradjon (sotet alap) */
.promo-oldal.po-tema .po-gomb-fo{color:var(--po-aszfalt)}

/* ----------------------------------------------------- meretsavok (lepcsok) */
.promo-oldal .po-savok{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:22px}
.promo-oldal .po-savok-k{border:1px solid var(--po-vonal);border-radius:14px;padding:18px 18px 16px;background:var(--po-aszfalt-2);display:grid;gap:6px}
.promo-oldal .po-savok-k .m{font-family:var(--po-kijelzo);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--po-kreta-halk);font-size:13px}
.promo-oldal .po-savok-k .e{font-family:var(--po-kijelzo);font-weight:800;font-size:clamp(26px,3.4vw,34px);line-height:1.05;color:var(--po-jel)}
.promo-oldal .po-savok-k .s{font-size:15px;color:var(--po-kreta)}

/* ----------------------------------------------------- anyagok: video, galeria, letoltes */
.promo-oldal .po-video{margin-top:4px;border-radius:16px;overflow:hidden;border:1px solid var(--po-vonal);background:#000;aspect-ratio:16/9}
.promo-oldal .po-video video{display:block;width:100%;height:100%;object-fit:cover}
.promo-oldal .po-galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:20px}
.promo-oldal .po-galeria a{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--po-vonal);background:var(--po-aszfalt-2)}
.promo-oldal .po-galeria img{display:block;width:100%;height:auto}
.promo-oldal .po-galeria a:focus-visible{outline:3px solid var(--po-jel);outline-offset:2px}
.promo-oldal .po-letolt{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.promo-oldal .po-letolt a{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--po-vonal);border-radius:12px;background:var(--po-aszfalt-2);text-decoration:none}
.promo-oldal .po-letolt a:hover{border-color:var(--po-jel)}
.promo-oldal .po-letolt .t{font-family:var(--po-kijelzo);font-weight:800;color:var(--po-aszfalt);background:var(--po-jel);border-radius:6px;padding:3px 8px;font-size:12px;letter-spacing:.08em}
.promo-oldal .po-letolt .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.promo-oldal .po-letolt .mr{color:var(--po-kreta-halk);font-size:14px}

/* ----------------------------------------------------- feltetelek, lepesek */
.promo-oldal .po-lepesek{list-style:none;counter-reset:pl;margin:20px 0 0;padding:0;display:grid;gap:12px}
.promo-oldal .po-lepesek li{counter-increment:pl;display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;padding:14px;border:1px solid var(--po-vonal);border-radius:12px;background:var(--po-aszfalt-2)}
.promo-oldal .po-lepesek li::before{content:counter(pl);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--po-jel);color:var(--po-aszfalt);font-family:var(--po-kijelzo);font-weight:800;font-size:20px}
.promo-oldal .po-lepesek b{display:block;margin-bottom:2px}
.promo-oldal .po-adat{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:20px}
.promo-oldal .po-adat div{padding:14px;border:1px solid var(--po-vonal);border-radius:12px;background:var(--po-aszfalt-2)}
.promo-oldal .po-adat dt{font-size:13px;color:var(--po-kreta-halk);font-weight:600;margin:0}
.promo-oldal .po-adat dd{margin:2px 0 0;font-weight:700}
.promo-oldal .po-forras{margin-top:14px;font-size:14px;color:var(--po-kreta-halk)}

@media (prefers-reduced-motion:reduce){.promo-oldal .po-video video{animation:none}}

/* ----------------------------------------------------- pecset a bolt kiemelo szinevel */
.promo-oldal.po-tema .po-pecset .po-st1{stop-color:color-mix(in srgb,var(--po-jel) 45%,#fff)}
.promo-oldal.po-tema .po-pecset .po-st2{stop-color:var(--po-jel)}
.promo-oldal.po-tema .po-pecset .po-st3{stop-color:color-mix(in srgb,var(--po-jel) 72%,#000)}
.promo-oldal.po-tema .po-pecset-mag strong{font-family:var(--po-kijelzo);color:var(--po-aszfalt)}
.promo-oldal.po-tema .po-pecset-also{white-space:nowrap;font-size:clamp(22px,6vw,29px)}
.promo-oldal.po-tema .po-pecset-csillagok{color:var(--po-aszfalt)}
.promo-oldal.po-tema .po-pecset-al{font-family:var(--po-kijelzo);color:color-mix(in srgb,var(--po-aszfalt) 80%,var(--po-jel))}