/* ── base.css ── */
/* Griff v2 · base.css — a teljes designrendszer (c1 „Konverziós gép” váz + c3 alsó lapok és visszajelzés).
   Tokenek, betűk, alap-tipó, gombok, címkék, mezők, termékkártya, rétegek, fejléc, menü, kereső, lábléc, jogi lapok, 404.
   A modulok (home .hm-, plp .pl-, pdp .pd-, cart .ct-, checkout .co-, account .ac-) a saját <modul>.css-üket írják,
   CSAK ezekkel a tokenekkel és közös komponensekkel. Szerződés: v2/src/CORE-API.md. !important nincs (kivéve [hidden] és reduced-motion). */

/* ---------- 0. Betűk: csak Montserrat (400/500/600/700), latin + latin-ext; a fallback csak a méret-illesztés (CLS) ---------- */
/* [PERF-1014] egy magyar részhalmaz súlyonként (12 KB), nincs latin/latin-ext kettéosztás (az ő/ű miatt mindig mindkettő töltődött: 6 fájl, 300 KB) */
@font-face{font-family:Montserrat;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/montserrat-400-hu.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/montserrat-500-hu.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/montserrat-600-hu.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/montserrat-700-hu.woff2) format("woff2")}
@font-face{font-family:"Montserrat Fallback";src:local("Arial"),local("Helvetica Neue");size-adjust:113%;ascent-override:96%;descent-override:25%;line-gap-override:0%}

/* ---------- 1. Tokenek ---------- */
:root{
  /* színek: fehér alap, fekete gomb, OI-narancs csak jelzésnek (sötét mód nincs) */
  --ink:#0E1013; --ink-2:#1D2023; --mute:#5F6670; --mute-2:#8A9099;
  --line:#E4E6EA; --line-2:#D3D6DB; --tint:#F4F5F7; --tint-2:#ECEEF1; --white:#fff;
  --accent:#F97316; --accent-text:#B45309; --accent-soft:#FFF1E6;
  --sale:#C2410C; --err:#D92D20; --ok:#1F7A3D;   /* [PENZTAR-JOG-1015] B9: a hiba piros, a narancs csak a fő gombé */
  --scrim:rgba(14,16,19,.42);
  /* forma: fotó 0 px, UI-elem lekerekített */
  --r-ui:12px; --r-sm:10px; --r-xs:6px; --r-sheet:18px; --r-pill:999px;
  --chk-line:var(--ink);   /* [XP-PIPA-1015] Olivér: a szürke keret „fura”, 1,5 px fekete mindenhol · [LISTA-GEP-1015] a jelölőnégyzet kerete MINDENHOL (szűrő-lap, pénztár, gyors fizetés, elállás): egy helyen állítható */
  /* betű és skála: 12 · 13 · 14 · 16 · 18 · 22 · 26 */
  --font:Montserrat,"Montserrat Fallback",Arial,sans-serif;
  --fs-xs:12px; --fs-s:13px; --fs-m:14px; --fs-l:16px; --fs-xl:18px; --fs-2xl:22px; --fs-3xl:26px;
  /* méretek */
  --gut:16px; --hd:56px; --bar:52px; --tap:44px; --maxw:1600px; --maxw-text:720px;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  /* mozgás és mélység */
  --ease:cubic-bezier(.2,.7,.2,1); --t-fast:.15s; --t-ly:.24s;
  --shadow:0 10px 30px -12px rgba(14,16,19,.28),0 2px 8px -2px rgba(14,16,19,.10);
  --shadow-s:0 1px 3px rgba(14,16,19,.18);
  /* rétegsorrend: a rétegek (scrim + .ly) egy szinten, a DOM-sorrend dönt */
  --z-bar:30; --z-stick:35; --z-hd:40; --z-ly:60; --z-pay:80; --z-toast:90;
  /* a toast emelése, ha a modul lebegő alsó sávot mutat (body.lift) */
  --lift:64px;
}

/* ---------- 2. Alap ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hd) + 64px);touch-action:manipulation}   /* [DUPLA-ZOOM-1020] dupla koppintásra ne nagyítson (appban és mobilweben), a csippentés megmarad */
body{margin:0;background:var(--white);color:var(--ink);font:400 var(--fs-m)/1.45 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
body.lock{overflow:hidden}
main{display:block;min-height:60vh}
/* SPA-tartalék (/rendeles/…, régi #/ címek): a worker a főoldal HTML-jét adja → a #main rejtve, amíg az első route le nem fut
   (a shell inline szkriptje teszi a html-re a .nossr-t; 3 mp után JS-hiba esetén is előjön) */
html.nossr body:not(.ready) #main{visibility:hidden;animation:reveal 0s 3s forwards}
@keyframes reveal{to{visibility:visible}}
img{display:block;max-width:100%}
img.broken{opacity:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
::selection{background:var(--accent-soft)}
svg.i{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
svg.i.s{width:18px;height:18px}
svg.i.xs{width:14px;height:14px;stroke-width:2}

/* ---------- 3. Segédosztályok ---------- */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pad{padding-left:var(--gut);padding-right:var(--gut)}
.wrap{max-width:var(--maxw);margin-left:auto;margin-right:auto}
.mute{color:var(--mute)}
.nowrap{white-space:nowrap}
.lead-p{font-size:var(--fs-m);line-height:1.55;color:var(--ink-2)}
.lead-p b{color:var(--ink);font-weight:700}
.h1{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.015em;line-height:1.2}
.h2{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.01em;line-height:1.25}
.small{font-size:var(--fs-xs);color:var(--mute)}
.ok-t{color:var(--ok);font-weight:600}
.err-t{color:var(--err);font-weight:600}
.last-t{color:var(--accent-text);font-weight:600}

/* ---------- 4. Gombok, linkek ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--bar);padding:0 20px;border-radius:var(--r-ui);font-weight:600;font-size:15px;letter-spacing:.005em;white-space:nowrap;transition:background var(--t-fast),transform .1s,opacity var(--t-fast);user-select:none;-webkit-user-select:none}
.btn:active{transform:scale(.985)}
.btn.p{background:var(--ink);color:#fff}
.btn.s{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.t{background:var(--tint);color:var(--ink)}
.btn.w{display:flex;width:100%}
.btn.sm{height:var(--tap);font-size:var(--fs-m);padding:0 14px}
.btn.xs{height:36px;font-size:var(--fs-s);padding:0 12px;border-radius:var(--r-sm)}
.btn .sub{font-weight:500;opacity:.75}
.btn[disabled],.btn.busy{opacity:.45;pointer-events:none}
.btn.busy::after{content:"";width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
.row2,.row3{display:grid;gap:8px}
.row2{grid-template-columns:repeat(2,minmax(0,1fr))}
.row3{grid-template-columns:repeat(3,minmax(0,1fr))}
.row2>.btn,.row3>.btn{width:100%;min-width:0;padding:0 10px}
.lnk{font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.lnk-g{display:inline-flex;align-items:center;gap:2px;min-height:var(--tap);font-size:var(--fs-s);font-weight:600;color:var(--mute)}
.ib{position:relative;width:var(--tap);height:var(--tap);display:grid;place-items:center;border-radius:var(--r-ui);flex:none}
.ib:active{background:var(--tint)}
/* gyorsfizetés (Apple Pay / Google Pay) */
.xp{height:48px;border-radius:var(--r-ui);display:flex;align-items:center;justify-content:center;gap:6px;font-weight:600;font-size:var(--fs-l);letter-spacing:-.01em;width:100%}
.xp.apple{background:#000;color:#fff}
.xp.google{background:#fff;color:#3c4043;box-shadow:inset 0 0 0 1px #dadce0}
.xp svg{display:block}
.xp .pay{font-weight:500;font-size:17px}
.or-line{display:flex;align-items:center;gap:12px;color:var(--mute);font-size:var(--fs-xs);margin:14px 0}
.or-line::before,.or-line::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- 5. Címkék, chipek, szegmens ---------- */
.tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:5px;font-size:10.5px;font-weight:700;letter-spacing:.02em;line-height:1;background:var(--white);color:var(--mute);white-space:nowrap}
.tag.club{background:var(--ink);color:#fff}
.tag.new{background:var(--white);color:var(--ink)}
.tag.last{background:var(--white);color:var(--accent-text)}
.tag.sale{background:var(--sale);color:#fff}
.tag.soft{background:var(--tint);color:var(--ink-2)}
.pmk{display:inline-flex;align-items:center;height:20px;padding:0 5px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--line-2);font-size:9.5px;font-weight:700;letter-spacing:.02em;color:var(--ink-2);background:var(--white)}
.chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:var(--r-pill);background:var(--tint);font-size:var(--fs-s);font-weight:500;white-space:nowrap;flex:none;transition:background var(--t-fast),color var(--t-fast)}
.chip.on{background:var(--ink);color:#fff}
.chip svg{width:14px;height:14px}
.chip.ln{background:var(--white);box-shadow:inset 0 0 0 1px var(--line-2)}
.chip.clr{background:none;box-shadow:none;text-decoration:underline;text-underline-offset:3px;padding:0 6px;font-weight:600}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:0 var(--gut)}
.chips::-webkit-scrollbar{display:none}
.gsw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:6px;background:var(--tint);border-radius:14px}
.gsw button,.gsw a{height:40px;border-radius:var(--r-sm);font-weight:600;font-size:var(--fs-m);color:var(--mute);display:flex;align-items:center;justify-content:center;transition:background var(--t-fast),color var(--t-fast)}
.gsw .on{background:var(--white);color:var(--ink);box-shadow:0 1px 2px rgba(14,16,19,.08),0 0 0 1px rgba(14,16,19,.04)}
.cnt{position:absolute;top:6px;right:4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--ink);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;pointer-events:none}
.cnt.or{background:var(--accent)}
.cnt.bump{animation:bump .42s var(--ease)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.35)}100%{transform:scale(1)}}

/* ---------- 6. Mezők (pénztár, fiók, hírlevél) ---------- */
.fld{position:relative;margin-bottom:10px}
.fld input,.fld select,.fld textarea{width:100%;height:52px;border-radius:var(--r-ui);border:0;box-shadow:inset 0 0 0 1px var(--line-2);background:var(--white);padding:18px 14px 4px;font-size:var(--fs-l);outline:0;transition:box-shadow .12s;-webkit-appearance:none;appearance:none}
.fld textarea{height:auto;min-height:96px;padding-top:24px;resize:vertical}
.fld select{padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1013' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px}
.fld input:focus,.fld select:focus,.fld textarea:focus{box-shadow:inset 0 0 0 2px var(--ink)}
.fld label{position:absolute;left:14px;top:16px;font-size:15px;color:var(--mute);pointer-events:none;transition:top .12s,font-size .12s}
.fld input:focus+label,.fld input:not(:placeholder-shown)+label,.fld textarea:focus+label,.fld textarea:not(:placeholder-shown)+label,.fld select+label{top:7px;font-size:11.5px}
.fld.bad input,.fld.bad select{box-shadow:inset 0 0 0 1.5px var(--err)}
.fld .msg{font-size:12.5px;color:var(--err);font-weight:600;margin-top:5px;display:none}
.fld.bad .msg{display:block}
.fld .help{font-size:12.5px;color:var(--mute);margin-top:5px}
.fld.pre input{padding-left:58px}
.fld.pre label{left:14px;top:7px;font-size:11.5px}   /* az előtag (+36) látszik, ezért a címke mindig fent ül */
.fld .pf{position:absolute;left:14px;top:23px;font-size:var(--fs-l);color:var(--ink-2)}
.fld .act{position:absolute;right:6px;top:4px;height:var(--tap);padding:0 10px;font-size:var(--fs-s);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.f2{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px}
.f2.eq{grid-template-columns:repeat(2,minmax(0,1fr))}
.inp{width:100%;height:var(--tap);border-radius:var(--r-ui);border:0;box-shadow:inset 0 0 0 1px var(--line-2);background:var(--white);padding:0 14px;font-size:var(--fs-l);outline:0}
.inp:focus{box-shadow:inset 0 0 0 2px var(--ink)}
/* jelölőnégyzet-sor (ÁSZF, hírlevél) */
.chk{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;width:100%;text-align:left;padding:8px 0;font-size:var(--fs-m)}
.chk .bx{width:22px;height:22px;border-radius:var(--r-xs);box-shadow:inset 0 0 0 1.5px var(--chk-line);display:grid;place-items:center;margin-top:-1px;transition:background .12s}
.chk.on .bx{background:var(--ink);box-shadow:none;color:#fff}
.chk .bx svg{width:14px;height:14px;stroke-width:2.6;opacity:0}
.chk.on .bx svg{opacity:1}
.chk.bad .bx{box-shadow:inset 0 0 0 1.5px var(--err)}
.chk a,.chk a.lnk{text-decoration:underline;text-underline-offset:3px}   /* [LISTA-GEP-1015] a gs.css a.lnk{none} ne vegye el: az ÁSZF-link a kosár gyors fizetésénél is aláhúzott, mint a pénztárban */
.chk-msg{font-size:12.5px;color:var(--err);font-weight:600;margin:-2px 0 6px 34px;display:none}
.chk-msg.on{display:block}
/* választható doboz (szállítás, fizetés): rádió jobbra-balra */
.opt{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;text-align:left;padding:14px;border-radius:var(--r-ui);box-shadow:inset 0 0 0 1px var(--line-2);margin-bottom:8px;background:var(--white);transition:box-shadow .12s}
.opt.on{box-shadow:inset 0 0 0 2px var(--ink)}
.opt[disabled]{opacity:.45;pointer-events:none}
.rd{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-2);flex:none;transition:box-shadow .12s}
.on>.rd,.on .rd{box-shadow:inset 0 0 0 7px var(--ink)}
.opt b{display:block;font-size:var(--fs-m);font-weight:600}
.opt span{display:block;font-size:12.5px;color:var(--mute);margin-top:1px}
.opt .pr{font-size:var(--fs-m);font-weight:600;white-space:nowrap;text-align:right;color:var(--ink);margin:0}
.opt .ic{display:flex;gap:4px;align-items:center}
/* egyszer használatos kód (6 mező) */
.otp{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;max-width:340px}
.otp input{height:54px;border-radius:var(--r-sm);border:0;box-shadow:inset 0 0 0 1px var(--line-2);background:var(--white);text-align:center;font-size:var(--fs-2xl);font-weight:700;outline:0;padding:0;width:100%}
.otp input:focus{box-shadow:inset 0 0 0 2px var(--ink)}
.otp.bad input{box-shadow:inset 0 0 0 1.5px var(--err)}
/* doboz (szürke tájékoztató / űrlap-blokk) */
.box{background:var(--tint);border-radius:var(--r-ui);padding:14px}
.box.ln{background:var(--white);box-shadow:inset 0 0 0 1px var(--line)}

/* ---------- 7. Fejléc ---------- */
.hd{position:sticky;top:0;z-index:var(--z-hd);background:var(--white);height:var(--hd);border-bottom:1px solid transparent;transition:border-color .2s}
.hd.sc,.hd.co{border-bottom-color:var(--line)}
.hd-in{height:100%;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;padding:0 4px;max-width:var(--maxw);margin:0 auto}
.hd-l,.hd-r{display:flex;align-items:center;gap:0;min-width:0}
.hd-r{justify-content:flex-end}
.hd .ib{width:42px}
.hd .ib.acct.on::after{content:"";position:absolute;top:10px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--white)}
.logo{display:block;height:20px;width:auto}
.logo-w{display:flex;align-items:center;justify-content:center;height:var(--tap);padding:0 6px}
.hd-txt{display:none}
.hd-search{display:none}
.co-back{display:flex;align-items:center;gap:2px;height:var(--tap);padding:0 10px 0 4px;font-weight:600;font-size:var(--fs-s)}
.co-lock{display:flex;align-items:center;gap:6px;justify-content:flex-end;font-size:var(--fs-xs);font-weight:600;color:var(--mute);padding-right:10px;text-align:right;line-height:1.2}

/* ---------- 7b. Előnysáv a fejléc alatt (#usp, chrome.js G.uspHTML): nem ragad, a pénztárban rejtve ----------
   mobil/tablet: egyszerre egy tény, 4 mp-enként a következő (az utolsó után a 0. másolata jön, így nincs ugrás) · gép: egy sorban mind a 4 */
.usp{background:var(--tint);color:var(--ink-2)}
.usp-in{display:block;width:100%;max-width:var(--maxw);height:36px;margin:0 auto;overflow:hidden;font-size:12.5px;font-weight:500;line-height:1.2;letter-spacing:-.005em}
.usp-tr{display:flex;flex-direction:column;animation:usp-rot 16s infinite}
.usp-i{flex:none;display:flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 var(--gut);white-space:nowrap}
.usp-i>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.usp-i b{font-weight:700;color:var(--ink)}
.usp-i svg{flex:none;width:17px;height:17px;color:var(--ink)}
.usp-in:hover .usp-tr,.usp-in:focus-visible .usp-tr{animation-play-state:paused}
.usp-in:focus-visible{outline-offset:-2px}
@media (max-width:1023px) and (prefers-reduced-motion:no-preference){.usp-tr.usp-n5{animation:usp-rot5 20s infinite}.usp-tr.usp-n3{animation:usp-rot3 12s infinite}}   /* [MEGUJULT-1016] 5 / 3 üzenet + ismétlés */
@keyframes usp-rot5{0%,18%{transform:translateY(0)}20%,38%{transform:translateY(-16.667%)}40%,58%{transform:translateY(-33.333%)}60%,78%{transform:translateY(-50%)}80%,98%{transform:translateY(-66.667%)}100%{transform:translateY(-83.333%)}}
@keyframes usp-rot3{0%,30%{transform:translateY(0)}33.33%,63%{transform:translateY(-25%)}66.67%,97%{transform:translateY(-50%)}100%{transform:translateY(-75%)}}
@keyframes usp-rot{0%,22%{transform:translateY(0)}25%,47%{transform:translateY(-20%)}50%,72%{transform:translateY(-40%)}75%,97%{transform:translateY(-60%)}100%{transform:translateY(-80%)}}
/* részletek-lap */
.usp-l{display:grid}
.usp-r{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.usp-r:first-child{padding-top:4px}
.usp-r h3{font-size:var(--fs-m);font-weight:700;line-height:1.35}
.usp-r p{font-size:var(--fs-s);line-height:1.5;color:var(--ink-2);margin-top:3px}
.usp-r p b{font-weight:600;color:var(--ink)}
.usp-r .usp-m{color:var(--mute)}
.usp-send{display:block}
.usp-send::first-letter{text-transform:uppercase}
.usp-send:has(>[data-eta]:empty){display:none}
.usp-lg{padding-top:14px;font-size:var(--fs-xs);line-height:1.5;color:var(--mute)}
.usp-lk{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:10px;font-size:var(--fs-s)}
.usp-lk .lnk{display:inline-flex;align-items:center;min-height:32px}
@media (prefers-reduced-motion:reduce) and (max-width:1023px){
  .usp-in{height:auto;padding:6px 0}
  .usp-tr{flex-direction:row;flex-wrap:wrap;justify-content:center;column-gap:16px;padding:0 var(--gut)}
  .usp-i{height:26px;padding:0}
  .usp-i[aria-hidden]{display:none}
}
@media (min-width:1024px){
  .usp-in{height:38px;padding:0 var(--gut);font-size:13px}
  .usp-tr{flex-direction:row;justify-content:center;height:100%;gap:clamp(24px,3.4vw,64px);animation:none}
  .usp-i{height:100%;padding:0}
  .usp-i[aria-hidden]{display:none}
}
@media (max-width:339px),(min-width:1024px) and (max-width:1279px){
  .usp-x{display:none}
}
@media (hover:hover) and (pointer:fine){
  .usp-in:hover .usp-i>span{text-decoration:underline;text-decoration-color:var(--mute-2);text-underline-offset:3px}
}

/* ---------- 8. Szakasz, sáv, rács ---------- */
.sec{margin-top:28px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 var(--gut);margin-bottom:12px}
.sec-h>div{min-width:0}
.sec-h h2{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.01em;line-height:1.25}
.sec-h p{font-size:var(--fs-s);color:var(--mute);margin-top:2px}
.sec-h>a{font-size:var(--fs-s);font-weight:600;white-space:nowrap;display:flex;align-items:center;gap:2px;min-height:32px}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 4px) / 2.35);gap:2px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
.rail .card-b{padding-left:8px;padding-right:8px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;row-gap:22px}
.mini-rail{display:grid;grid-auto-flow:column;grid-auto-columns:128px;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gut) * -1);padding:0 var(--gut);overscroll-behavior-x:contain}
.mini-rail::-webkit-scrollbar{display:none}

/* ---------- 9. Termékkártya (G.card): méretek, +, OI CLUB, Utolsó darab, Új ---------- */
.card{position:relative;min-width:0;display:flex;flex-direction:column}
.card-img{position:relative;display:block;aspect-ratio:2/3;background:var(--tint);overflow:hidden}
.card-img>a{position:absolute;inset:0;z-index:1}
.card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card-img img.alt{opacity:0;transition:opacity .2s}
.card-img img.contain{object-fit:contain;padding:12%}
.badges{position:absolute;top:8px;left:8px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;z-index:2;pointer-events:none}
.fav{position:absolute;top:2px;right:2px;width:var(--tap);height:var(--tap);display:grid;place-items:center;z-index:3}
.fav svg{width:22px;height:22px;filter:drop-shadow(0 0 1px rgba(255,255,255,.9));transition:fill .12s}
.fav.on svg{fill:var(--ink);stroke:var(--ink)}
.fav.pop svg{animation:pop .36s var(--ease)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
.qadd{position:absolute;right:6px;bottom:6px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.96);display:grid;place-items:center;z-index:3;box-shadow:var(--shadow-s);transition:transform .1s}
.qadd::before{content:"";position:absolute;inset:-4px}
.qadd svg{width:20px;height:20px;stroke-width:2}
.qadd:active{transform:scale(.94)}
.qadd.ok{background:var(--ink);color:#fff}
.qsz{display:none}
.card-b{padding:8px 10px 0;display:flex;flex-direction:column;gap:1px;min-width:0}
.sw{display:flex;gap:2px;margin:0 0 4px -6px;height:28px;align-items:center}
.sw button{width:28px;height:28px;display:grid;place-items:center;border-radius:50%}
.sw i{display:block;width:18px;height:18px;border-radius:50%;background-size:340%;background-position:50% 48%;background-color:var(--tint-2);box-shadow:inset 0 0 0 1px rgba(14,16,19,.12)}
.sw button.on i{box-shadow:0 0 0 1.5px var(--white),0 0 0 2.5px var(--ink)}
.sw .more{font-size:11px;color:var(--mute);font-weight:600;padding-left:2px}
.c-brand{font-size:11.5px;color:var(--mute);font-weight:500;line-height:1.3}
.c-title{font-size:var(--fs-s);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}
.c-price{font-size:var(--fs-m);font-weight:700;margin-top:3px;line-height:1.3}
.c-price small{font-size:var(--fs-xs);font-weight:500;color:var(--mute)}
.c-price:has(.was){color:var(--sale)}
.was{color:var(--mute);font-weight:500;font-size:.86em;margin-left:4px;text-decoration-thickness:1px}
.c-club{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:600;margin-top:3px}
.c-club .tag{height:17px;font-size:9.5px;padding:0 5px;border-radius:4px}
.c-sizes{font-size:var(--fs-xs);color:var(--mute);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}
.c-sizes b{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}
/* mini-kártya (ajánló a „Kosárba tetted” lapon, kosárban) */
.mc{position:relative;display:flex;flex-direction:column;min-width:0}
.mc .card-img{aspect-ratio:2/3}
.mc .qadd{width:34px;height:34px;right:4px;bottom:4px}
.mc .qadd svg{width:18px;height:18px}
.mc b{font-size:var(--fs-xs);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:6px}
.mc>span{font-size:var(--fs-s);font-weight:700}
.mc>span small{font-size:11px;font-weight:500;color:var(--mute)}

/* ---------- 10. Közös vásárlási elemek: méretgomb, darabszám, szállítás-sáv, összesítő, tételsor ---------- */
.zs{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:6px}
.z{position:relative;height:48px;border-radius:var(--r-sm);background:var(--tint);font-weight:600;font-size:var(--fs-m);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;min-width:0;transition:background .12s,color .12s,transform .12s}
.z:active{transform:scale(.96)}
.z small{font-size:10px;font-weight:600;color:var(--accent-text);margin-top:2px}
.z.on{background:var(--ink);color:#fff}
.z.on small{color:#FDBA74}
.z.out{background:var(--white);color:var(--mute-2);box-shadow:inset 0 0 0 1px var(--line);text-decoration:line-through;text-decoration-thickness:1px}
.z[disabled]{pointer-events:none}
.z.flash{animation:flash .9s}
@keyframes flash{0%,100%{box-shadow:none}30%,70%{box-shadow:0 0 0 2px var(--accent)}}
.zmsg{font-size:var(--fs-s);margin-top:8px}
.zmsg:empty{display:none}
.zmsg.last{color:var(--accent-text);font-weight:600}
.zmsg.hint{color:var(--mute)}
.zmsg.err{color:var(--err);font-weight:600}
.qty{display:inline-flex;align-items:center;height:36px;border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px var(--line-2)}
.qty button{width:36px;height:36px;display:grid;place-items:center}
.qty button svg{width:16px;height:16px}
.qty button[disabled]{opacity:.3;pointer-events:none}
.qty span{min-width:22px;text-align:center;font-weight:600;font-size:var(--fs-m)}
/* ingyenes szállításig sáv (G.cfg.freeShip) */
.fs{background:var(--tint);border-radius:var(--r-ui);padding:12px 14px}
.fs p{font-size:var(--fs-s);font-weight:600;display:flex;align-items:center;gap:8px}
.fs p svg{width:18px;height:18px}
.fs .bar{height:6px;border-radius:3px;background:var(--white);margin-top:9px;overflow:hidden}
.fs .bar i{display:block;height:100%;background:var(--accent);border-radius:3px;transition:width .35s var(--ease)}
.fs.done .bar i{background:var(--ink)}
/* összesítő (kosár, pénztár, rendelés) */
.sum{display:grid;gap:7px;font-size:var(--fs-m)}
.sum>div{display:flex;justify-content:space-between;gap:12px}
.sum>div>b,.sum>div>span:last-child{white-space:nowrap;text-align:right}
.sum .tot{font-size:17px;font-weight:700;padding-top:10px;margin-top:4px;border-top:1px solid var(--line)}
.sum .sm{font-size:12.5px;color:var(--mute)}
.sum .club-l{font-size:12.5px;color:var(--ink-2)}
.sum .free{color:var(--ok);font-weight:600}
/* tételsor (pénztár-összesítő, visszaigazolás, rendelés) */
.si{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 0}
.si .im{position:relative;width:56px}
.si img{width:56px;aspect-ratio:2/3;object-fit:cover;background:var(--white)}
.si .q{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:10px;background:var(--mute);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 5px}
.si b{display:block;font-size:var(--fs-s);font-weight:600;line-height:1.3}
.si span{font-size:var(--fs-xs);color:var(--mute)}
.si .pr{font-size:13.5px;font-weight:600;white-space:nowrap;color:var(--ink)}
/* tény-sor ikonnal (szállítás, visszaküldés, bolt) */
.facts{border-top:1px solid var(--line)}
.facts li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;padding:13px 0;border-bottom:1px solid var(--line);align-items:start}
.facts li svg{margin-top:1px}
.facts b{display:block;font-size:var(--fs-m);font-weight:600}
.facts span{display:block;font-size:var(--fs-s);color:var(--mute);margin-top:1px}
.facts .ok{color:var(--ink);font-weight:600}
/* összecsukható blokk */
.acc{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:14px 0;font-weight:700;font-size:var(--fs-m);cursor:pointer}
.acc summary::-webkit-details-marker{display:none}
.acc summary svg{transition:transform .2s}
.acc[open] summary svg{transform:rotate(180deg)}
.acc .ab{padding:0 0 18px;font-size:var(--fs-m);color:var(--ink-2)}
.acc .ab p{margin:0 0 8px}
.acc .ab ul{padding-left:18px;list-style:disc;margin:0 0 8px}
.acc .ab li{margin:3px 0}
/* kulcs–érték sor */
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;font-size:var(--fs-m)}
.kv dt{color:var(--mute)}
.kv dd{margin:0}

/* ---------- 11. Rétegek (G.sheet): .scrim + .ly.<kind> [.cls] ---------- */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:var(--z-ly);opacity:0;transition:opacity .2s}
.scrim.on{opacity:1}
.ly{--gut:16px;position:fixed;z-index:var(--z-ly);background:var(--white);display:flex;flex-direction:column;outline:0}
.ly.drag{transition:none}
/* alsó lap (méret, gyors kosár, „Kosárba tetted”, szűrés, rendezés, OI Club) */
.ly.sheet{left:0;right:0;bottom:0;max-height:calc(100% - 44px - var(--safe-t));border-radius:var(--r-sheet) var(--r-sheet) 0 0;transform:translateY(100%);transition:transform var(--t-ly) var(--ease);box-shadow:0 -8px 30px -10px rgba(14,16,19,.25);padding-bottom:var(--safe-b);touch-action:pan-y}
.ly.sheet.on{transform:none}
.ly.sheet.drag{transition:none}
.grab{flex:none;width:38px;height:5px;border-radius:3px;background:var(--line-2);margin:8px auto 0;cursor:grab}
/* teljes képernyő (kereső, jogi szöveg) */
.ly.full{inset:0;opacity:0;transform:translateY(12px);transition:opacity .2s,transform .2s var(--ease);padding-top:var(--safe-t);padding-bottom:var(--safe-b)}
.ly.full.on{opacity:1;transform:none}
/* fiók jobbról (kosár) és balról (menü) */
.ly.drawer{top:0;right:0;bottom:0;width:100%;max-width:440px;transform:translateX(100%);transition:transform .26s var(--ease);padding-bottom:var(--safe-b)}
.ly.drawer.on{transform:none}
.ly.left{top:0;left:0;bottom:0;width:min(100%,420px);transform:translateX(-100%);transition:transform .26s var(--ease);padding-bottom:var(--safe-b)}
.ly.left.on{transform:none}
/* nagyító (a tartalmat a pdp adja) */
.ly.zoom{inset:0;opacity:0;transition:opacity .18s}
.ly.zoom.on{opacity:1}
/* réteg-fej, -törzs, -láb */
.sh-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 6px 8px var(--gut);min-height:56px;flex:none}
.ly.full .sh-h,.ly.drawer .sh-h,.ly.left .sh-h{border-bottom:1px solid var(--line)}
.sh-t{min-width:0}
.sh-h h2{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.01em;line-height:1.25}
.sh-h .sub{font-size:12.5px;color:var(--mute);font-weight:500;margin-top:1px}
.sh-b{overflow-y:auto;padding:10px var(--gut) 18px;flex:1;min-height:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.ly.full .sh-b,.ly.drawer .sh-b,.ly.left .sh-b{padding-top:16px}
.sh-f{flex:none;padding:12px var(--gut);border-top:1px solid var(--line);background:var(--white)}
.sh-f .row2+*,.sh-f>*+*{margin-top:8px}
.sh-h3{margin:18px 0 10px;font-size:var(--fs-m);font-weight:700}
.ly.full .doc{max-width:var(--maxw-text);margin:0 auto}

/* ---------- 12. Menü (bal fiók, .ly.left.menu) ---------- */
.mn-h{display:grid;grid-template-columns:var(--tap) minmax(0,1fr) var(--tap);align-items:center;padding:6px;border-bottom:1px solid var(--line);flex:none}
.mn-b{overflow-y:auto;flex:1;min-height:0;padding:16px var(--gut) 24px;overscroll-behavior:contain}
.mn-all{display:flex;justify-content:space-between;align-items:center;min-height:52px;font-weight:700;font-size:15px;border-bottom:1px solid var(--line);margin-top:10px}
.mn-all span{color:var(--mute);font-weight:500;font-size:var(--fs-s)}
.mn-sec{font-size:var(--fs-s);font-weight:700;color:var(--mute);margin:20px 0 12px}
.circles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 8px}
.circ{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-width:0}
.circ .ph{width:100%;max-width:72px;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--tint)}
.circ .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.circ .ph.all{display:grid;place-items:center}
.circ .ph.all svg{width:26px;height:26px}
.circ span{font-size:11.5px;font-weight:600;line-height:1.25}
.mn-list{margin-top:14px;border-top:1px solid var(--line)}
.mn-list a,.mn-list button{display:flex;justify-content:space-between;align-items:center;min-height:52px;border-bottom:1px solid var(--line);font-weight:600;font-size:15px;width:100%;text-align:left;gap:12px}
.mn-list a span,.mn-list button span{color:var(--mute);font-weight:500;font-size:var(--fs-s);display:flex;align-items:center;gap:4px}
.mn-small{margin-top:14px}
.mn-small a,.mn-small button{display:flex;align-items:center;gap:12px;min-height:46px;font-size:var(--fs-m);width:100%;text-align:left}
.mn-small svg{color:var(--mute)}

/* ---------- 13. Kereső (.ly.full.search) ---------- */
.sr-h{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px var(--gut);border-bottom:1px solid var(--line);flex:none}
.sr-f{position:relative;display:flex;align-items:center;height:46px;border-radius:var(--r-ui);background:var(--tint);padding:0 4px 0 12px;gap:8px;margin:0;min-width:0}
.sr-ic{display:flex;color:var(--mute)}
.sr-f input{flex:1;min-width:0;border:0;background:none;outline:0;font-size:var(--fs-l);height:100%;-webkit-appearance:none;appearance:none}
.sr-f input::-webkit-search-cancel-button{-webkit-appearance:none}
.sr-f .ib{width:38px;height:38px}
.sr-go{height:46px;padding:0 16px;border-radius:var(--r-ui);background:var(--ink);color:#fff;font-weight:600;font-size:var(--fs-m)}
.sr-b{overflow-y:auto;flex:1;min-height:0;padding:16px var(--gut) 32px;overscroll-behavior:contain}
.sr-sec{font-size:var(--fs-s);font-weight:700;color:var(--mute);margin:4px 0 10px}
.sr-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.sr-cat{margin-bottom:12px}
.sr-cat a{display:flex;justify-content:space-between;align-items:center;min-height:48px;border-bottom:1px solid var(--line);font-size:15px;gap:12px}
.sr-cat a b{font-weight:600}
.sr-cat a span{color:var(--mute);font-size:var(--fs-s);display:flex;align-items:center;gap:4px}
.sr-p a{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.sr-p img{width:48px;aspect-ratio:2/3;object-fit:cover;background:var(--tint)}
.sr-p b{display:block;font-size:13.5px;font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-p small{display:block;font-size:var(--fs-xs);color:var(--mute)}
.sr-p .pr{font-weight:700;font-size:13.5px;white-space:nowrap}
.sr-all{margin-top:16px}
.sr-none{padding:8px 0 18px}
.sr-none b{display:block;font-size:15px;margin-bottom:4px}
.sr-other{margin-top:14px;font-size:var(--fs-m)}

/* ---------- 14. Lábléc + hírlevél ---------- */
.ft{margin-top:44px;background:var(--tint);padding:28px var(--gut) calc(28px + var(--safe-b))}
.ft-in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
.ft-shop,.ft-nl,.ft .cr,.ft-legal{grid-column:1/-1}
.nf-cats{max-width:var(--maxw);margin:0 auto 8px}
.nf-cats .chips{justify-content:center;flex-wrap:wrap}
.ft h3{font-size:var(--fs-s);font-weight:700;margin-bottom:8px}
.ft .ft-pm-h{margin-top:18px}
.ft p,.ft li{font-size:var(--fs-s);color:var(--ink-2);line-height:1.6}
.ft li a{display:inline-block;padding:3px 0}
.ft a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.ft .pm{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.ft .pm span{height:28px;padding:0 9px;border-radius:var(--r-xs);background:var(--white);display:inline-flex;align-items:center;font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.ft .cr{font-size:var(--fs-xs);color:var(--mute);line-height:1.55}
.ft-nl p{margin-bottom:10px}
.ft-nl-r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.ft-nl input{width:100%;height:var(--tap);border-radius:var(--r-ui);border:0;box-shadow:inset 0 0 0 1px var(--line-2);background:var(--white);padding:0 14px;font-size:var(--fs-l);outline:0;min-width:0}
.ft-nl input:focus{box-shadow:inset 0 0 0 2px var(--ink)}
.ft-nl-m{margin-top:8px;font-weight:600;color:var(--ink)}

/* ---------- 15. Egyszerű lapok: jogi lap, morzsa, üres állapot, 404, töltés ---------- */
.page{max-width:var(--maxw-text);margin:0 auto;padding:22px var(--gut) 20px}
.page h1{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.015em;line-height:1.2;margin-bottom:6px}
.page h2{font-size:var(--fs-l);font-weight:700;margin:22px 0 8px}
.page>p,.page li{font-size:var(--fs-m);color:var(--ink-2);line-height:1.6}
.crumbs{font-size:var(--fs-xs);color:var(--mute);margin-bottom:10px;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.crumbs a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.doc-sub{font-size:var(--fs-s);color:var(--mute);margin-bottom:14px}
.doc{font-size:var(--fs-m);color:var(--ink-2);line-height:1.6;overflow-wrap:anywhere}
.doc h4{font-size:15px;font-weight:700;color:var(--ink);margin:22px 0 6px;line-height:1.35}
.doc h4:first-child{margin-top:4px}
.doc p{margin:0 0 10px}
.doc ul,.doc ol{list-style:disc;padding-left:20px;margin:0 0 10px}
.doc li{margin:3px 0}
.doc b,.doc strong{color:var(--ink);font-weight:600}
.doc a{text-decoration:underline;text-underline-offset:3px}
.empty{padding:40px var(--gut);text-align:center}
.empty .ic{width:64px;height:64px;border-radius:50%;background:var(--tint);display:grid;place-items:center;margin:0 auto 16px}
.empty .ic svg{width:28px;height:28px}
.empty h1,.empty h2{font-size:var(--fs-xl);font-weight:700;margin-bottom:6px;line-height:1.3}
.empty p{color:var(--mute);margin:0 auto 18px;max-width:340px}
.empty.big{padding:72px var(--gut) 40px}
.empty.big h1{font-size:var(--fs-2xl);letter-spacing:-.015em}
.empty .row2{max-width:380px;margin:0 auto}
.spin{width:36px;height:36px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--ink);animation:spin .8s linear infinite;margin:40px auto}
.paying .spin{margin:0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
.paying{position:fixed;inset:0;z-index:var(--z-pay);background:rgba(255,255,255,.94);display:grid;place-items:center;text-align:center;padding:var(--gut)}
.paying b{display:block;font-size:var(--fs-l);margin-top:14px}
.paying p{font-size:var(--fs-s);color:var(--mute);margin-top:4px}
.skel{background:linear-gradient(90deg,var(--tint) 0,var(--tint-2) 50%,var(--tint) 100%);background-size:200% 100%;animation:skel 1.2s linear infinite;border-radius:var(--r-xs)}
@keyframes skel{to{background-position:-200% 0}}

/* ---------- 16. Toast (G.toast) ---------- */
.toast{position:fixed;left:50%;bottom:calc(20px + var(--safe-b));transform:translate(-50%,20px);z-index:var(--z-toast);max-width:calc(100% - 32px);display:flex;align-items:center;gap:10px;min-height:48px;padding:0 8px 0 16px;border-radius:var(--r-ui);background:var(--ink);color:#fff;font-size:13.5px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s var(--ease),bottom .2s var(--ease);box-shadow:var(--shadow)}
.toast:not(:has(button)){padding-right:16px}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast span{min-width:0}
.toast button{flex:none;font-weight:700;color:#fff;text-decoration:underline;text-underline-offset:3px;min-height:var(--tap);padding:0 8px}
body.lift .toast{bottom:calc(20px + var(--lift) + var(--safe-b))}

/* ---------- 17. Gép: egér ---------- */
@media (hover:hover) and (pointer:fine){
  .btn.p:hover{background:#25292e}
  .btn.s:hover,.btn.t:hover{background:var(--tint-2)}
  .ib:hover{background:var(--tint)}
  .card-img:hover img.alt{opacity:1}
  .card:hover .qsz{display:flex}
  .card:hover .qadd{display:none}
  .qsz{position:absolute;left:0;right:0;bottom:0;z-index:4;background:rgba(255,255,255,.96);padding:10px 10px 12px;flex-direction:column;gap:8px}
  .qsz p{font-size:var(--fs-xs);font-weight:600;color:var(--mute)}
  .qsz div{display:flex;flex-wrap:wrap;gap:4px}
  .qsz button{min-width:40px;height:34px;padding:0 8px;border-radius:8px;background:var(--tint);font-size:var(--fs-s);font-weight:600}
  .qsz button:hover{background:var(--ink);color:#fff}
  .z:not(.on):not(.out):hover{background:var(--tint-2)}
  .chip:not(.on):hover{background:var(--tint-2)}
  .chip.ln:not(.on):hover{background:var(--tint)}
  .gsw button:not(.on):hover,.gsw a:not(.on):hover{color:var(--ink)}
  .opt:not(.on):hover{box-shadow:inset 0 0 0 1px var(--mute-2)}
  .mn-list a:hover,.sr-cat a:hover,.sr-p a:hover{background:var(--tint)}
  .c-title:hover{text-decoration:underline;text-underline-offset:3px}
  .ft a:hover{text-decoration-color:var(--ink)}
}

/* ---------- 18. Kis telefon ---------- */
@media (max-width:379px){
  .hd .ib{width:40px}
  .logo{height:18px}
  .co-lock span{display:none}
}

/* ---------- 19. Tablet és gép ---------- */
@media (min-width:768px){
  :root{--gut:32px;--hd:68px}
  .hd-in{padding:0 20px}
  .hd .ib{width:var(--tap)}
  .logo{height:24px}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;row-gap:28px}
  .rail{grid-auto-columns:calc((100% - 16px) / 4.4);gap:4px}
  .sec{margin-top:44px}
  .sec-h h2{font-size:var(--fs-2xl)}
  /* alsó lap gépen: középre zárt ablak; .side = jobb oldali panel; .wide = széles ablak */
  .ly.sheet{left:50%;right:auto;bottom:auto;top:50%;width:520px;max-height:84vh;border-radius:var(--r-sheet);transform:translate(-50%,-46%);opacity:0;transition:transform .2s var(--ease),opacity .2s;box-shadow:var(--shadow);padding-bottom:0}
  .ly.sheet.on{transform:translate(-50%,-50%);opacity:1}
  .ly.sheet.wide{width:760px}
  .ly.sheet.side{left:auto;right:0;top:0;bottom:0;width:440px;max-height:none;border-radius:0;transform:translateX(100%);opacity:1;transition:transform .26s var(--ease)}
  .ly.sheet.side.on{transform:none}
  .ly.sheet .grab{display:none}
  .ly{--gut:24px}
  .sh-h{padding:14px 12px 10px var(--gut)}
  .sh-b{padding:12px var(--gut) 24px}
  .sh-f{padding:16px var(--gut)}
  .ly.full.search{bottom:auto;max-height:86vh;border-bottom:1px solid var(--line);box-shadow:var(--shadow);transform:translateY(-12px)}
  .ly.full.search.on{transform:none}
  .ly.full.search .sr-h,.ly.full.search .sr-b{padding-left:max(var(--gut),calc(50% - 440px));padding-right:max(var(--gut),calc(50% - 440px))}
  .ly.full.search .sr-h{padding-top:12px;padding-bottom:12px}
  .ft{padding-top:40px}
  .ft-in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ft-legal{grid-column:auto}
  .ft-nl-r{max-width:440px}
  .page{padding-top:40px}
  .page h1{font-size:var(--fs-3xl)}
  .empty.big{padding-top:110px}
}
@media (min-width:1024px){
  .hd-txt{display:inline;font-size:var(--fs-s);font-weight:600;margin-left:2px}
  .hd .ib.wide{width:auto;padding:0 12px;gap:6px;display:flex}
  .hd .ib.wide .cnt{position:static;margin-left:2px}
  .hd-search{display:flex;align-items:center;gap:8px;height:42px;width:300px;border-radius:var(--r-ui);background:var(--tint);padding:0 14px;color:var(--mute);font-size:13.5px;margin-left:8px;transition:background var(--t-fast)}
  .hd-search:hover{background:var(--tint-2)}
  .hd-l .ib.srch{display:none}
  .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rail{grid-auto-columns:calc((100% - 20px) / 5.5)}
  .ft-in{grid-template-columns:1.3fr 1fr 1fr 1fr 1.5fr;gap:32px}
  .ft-shop,.ft-nl{grid-column:auto}
  .toast{bottom:28px}
  body.lift .toast{bottom:28px}
}
@media (min-width:1440px){
  .rail{grid-auto-columns:calc((100% - 24px) / 6.5)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
@media (min-width:1024px) and (max-width:1279px){ .usp-tr.usp-n5 .usp-i:nth-child(5){display:none} }   /* [MEGUJULT-1016c] keskeny gépen 5 elem nem fér el → az elállás kimarad (a sáv ablakában ott van) */
/* ── home.css ── */
/* Griff v2 · home.css — főoldal (/). Csak base.css-tokenek; minden szabály a .hm- konténeren belül. */
.hm{padding-bottom:8px}

/* ---------- hős-sáv: valódi újdonság-fotók széltől szélig, alacsonyan, szögletesen; egy kattintási cél ---------- */
.hm-hero{position:relative;display:block;background:var(--tint);overflow:hidden}
.hm-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.hm-strip img{width:100%;aspect-ratio:2/3;object-fit:cover;object-position:50% 20%;background:var(--tint-2)}
.hm-strip img:nth-child(n+4){display:none}
.hm-cap{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:48px var(--gut) 14px;background:linear-gradient(to top,rgba(14,16,19,.6),rgba(14,16,19,0));color:var(--white)}
.hm-cap-t{min-width:0}
.hm-cap h1{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.015em;line-height:1.15}
.hm-cap p{font-size:var(--fs-s);font-weight:500;opacity:.92;margin-top:3px}
.hm-go{flex:none;display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 14px;border-radius:var(--r-pill);background:var(--white);color:var(--ink);font-weight:600;font-size:var(--fs-s)}

/* ---------- Női | Férfi a hős alatt ---------- */
.hm-gsw{padding:10px var(--gut) 0}

/* ---------- kategória-csempék: 4:5, felső fókusz; mobilon oldalra húzható sor ---------- */
.hm-tiles{display:grid;grid-auto-flow:column;grid-auto-columns:72px;gap:8px;overflow-x:auto;padding:12px var(--gut) 2px;scrollbar-width:none;scroll-padding:0 var(--gut);overscroll-behavior-x:contain}
.hm-tiles::-webkit-scrollbar{display:none}
.hm-tile{display:flex;flex-direction:column;gap:6px;min-width:0}
.hm-tile .ph{position:relative;aspect-ratio:4/5;background:var(--tint);border-radius:var(--r-sm);overflow:hidden}
.hm-tile .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.hm-tile .ph img.contain{object-fit:contain;padding:12%}
.hm-tile span{font-size:var(--fs-xs);font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-tile.all .ph{display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line)}
.hm-tile.all .ph svg{width:26px;height:26px}
.hm-tile:active .ph{opacity:.85}

/* ---------- előny-blokk a csempék után: választék + érkezés, szállítás, fizetés, csere (mobilon húzható sor, gépen 5 egyforma oszlop) ---------- */
.hm-usp{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:8px;overflow-x:auto;padding:16px var(--gut) 2px;scrollbar-width:none;scroll-padding:0 var(--gut);overscroll-behavior-x:contain}
.hm-usp::-webkit-scrollbar{display:none}
.hm-u{display:grid;grid-template-columns:20px auto;gap:10px;align-items:center;min-height:56px;padding:9px 16px 9px 12px;border-radius:var(--r-ui);background:var(--tint);text-align:left;transition:background var(--t-fast)}
.hm-u svg{width:20px;height:20px}
.hm-u b{display:block;font-size:var(--fs-s);font-weight:700;line-height:1.3;white-space:nowrap}
.hm-u small{display:block;font-size:var(--fs-xs);color:var(--mute);line-height:1.3;margin-top:2px;white-space:nowrap}
.hm-u:active{background:var(--tint-2)}
.hm-usp+.sec{margin-top:20px}
@media (min-width:768px){
  .hm-usp{gap:12px;padding-top:24px}
  .hm-usp+.sec{margin-top:36px}
}
@media (min-width:1024px){
  .hm-usp{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;max-width:var(--maxw);margin:0 auto}
  .hm-u{grid-template-columns:22px minmax(0,1fr);min-height:64px;padding:12px 16px}
  .hm-u svg{width:22px;height:22px}
  .hm-u b,.hm-u small{white-space:normal}
}
@media (hover:hover) and (pointer:fine){
  .hm-u:hover{background:var(--tint-2)}
}

/* az első sáv közelebb, hogy a 390 × 844-es első képernyőn a kártya ára is látsszon */
.hm-tiles+.sec{margin-top:16px}
.hm .sec-h{margin-bottom:10px}
.hm .sec-h p{line-height:1.4}
.hm .rail{grid-auto-columns:calc((100% - 4px) / 2.5)}
.hm-send:has(>[data-eta]:empty){display:none}

/* ---------- OI Club: egy sor, egyszer (világos, nem fekete kártya) ---------- */
/* az egész sor egy gomb (a klub-lapot nyitja) */
.hm-club{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;width:calc(100% - var(--gut) * 2);margin:32px var(--gut) 0;padding:12px 8px 12px 14px;border-radius:var(--r-ui);background:var(--tint);text-align:left;transition:background var(--t-fast)}
.hm-club:active{background:var(--tint-2)}
.hm-club-t{font-size:var(--fs-s);line-height:1.4}
.hm-club b{font-weight:700}
.hm-more{display:inline-flex;align-items:center;gap:2px;min-height:var(--tap);padding:0 8px;font-size:var(--fs-s);font-weight:600;white-space:nowrap}

/* ---------- Utoljára nézted (decorate tölti, ha van) ---------- */
.hm-seen:empty{display:none}

/* ---------- üzlet-kártya ---------- */
.hm-shop{margin:32px var(--gut) 8px;padding:16px;border-radius:var(--r-ui);box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:14px}
.hm-shop-h{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center}
.hm-shop-ic{width:44px;height:44px;border-radius:50%;background:var(--tint);display:grid;place-items:center}
.hm-shop h2{font-size:var(--fs-l);font-weight:700;line-height:1.3}
.hm-shop-h p{font-size:var(--fs-s);color:var(--mute);margin-top:1px}
.hm-shop-t{font-size:var(--fs-s);line-height:1.45;color:var(--ink-2)}
.hm-shop .btn svg{margin-left:-2px}

/* ---------- egér ---------- */
@media (hover:hover) and (pointer:fine){
  .hm-hero:hover .hm-go{background:var(--tint)}
  .hm-tile:hover .ph img{opacity:.92}
  .hm-tile:hover span{text-decoration:underline;text-underline-offset:3px}
  .hm-club:hover{background:var(--tint-2)}
  .hm-club:hover .hm-more{text-decoration:underline;text-underline-offset:3px}
}

/* ---------- kis telefon ---------- */
@media (max-width:379px){
  .hm-cap h1{font-size:var(--fs-xl)}
  .hm-go{padding:0 12px}
  .hm-tiles{grid-auto-columns:66px}
}

/* ---------- tablet ---------- */
@media (min-width:768px){
  .hm-strip{grid-template-columns:repeat(6,minmax(0,1fr))}
  .hm-strip img:nth-child(n+4){display:block}
  .hm-strip img:nth-child(n+7){display:none}
  .hm-cap{padding:64px var(--gut) 22px}
  .hm-cap h1{font-size:var(--fs-3xl)}
  .hm-cap p{font-size:var(--fs-m)}
  .hm-go{height:var(--tap);padding:0 18px;font-size:var(--fs-m)}
  .hm-gsw{max-width:420px;margin:0 auto;padding-top:22px}
  .hm-tiles{grid-auto-columns:96px;gap:12px;padding-top:20px}
  .hm-tile span{font-size:var(--fs-s)}
  .hm-tiles+.sec{margin-top:36px}
  .hm .sec-h{margin-bottom:12px}
  .hm .rail{grid-auto-columns:calc((100% - 16px) / 4.4)}
  .hm-club,.hm-shop{max-width:820px;margin-left:auto;margin-right:auto}
  .hm-club{margin-top:44px;padding:14px 12px 14px 18px}
  .hm-shop{margin-top:44px;grid-template-columns:minmax(0,1fr) 340px;align-items:center;column-gap:24px;padding:20px 24px}
  .hm-shop-t{grid-column:1;grid-row:2}
  .hm-shop .row2{grid-column:2;grid-row:1/3}
}

/* ---------- gép: 8 fotós hős, csempék egy sorban egyforma szélességgel ---------- */
@media (min-width:1024px){
  .hm-strip{grid-template-columns:repeat(8,minmax(0,1fr))}
  .hm-strip img,.hm-strip img:nth-child(n+4){display:block;aspect-ratio:auto;height:min(18.75vw,300px)}
  .hm-strip img:nth-child(n+9){display:none}
  .hm-cap{padding:72px var(--gut) 24px}
  .hm .rail{grid-auto-columns:calc((100% - 20px) / 5.5)}
  .hm-tiles{grid-auto-flow:row;grid-template-columns:repeat(var(--n),minmax(0,1fr));grid-auto-columns:auto;overflow:visible;max-width:var(--maxw);margin:0 auto}
}
@media (min-width:1440px){
  .hm .rail{grid-auto-columns:calc((100% - 24px) / 6.5)}
}

/* [FOOLDAL-1018] márka-pirulák a főoldalon */
.hm-br{display:flex;gap:8px;overflow-x:auto;padding:2px var(--gut) 4px;scrollbar-width:none;overscroll-behavior-x:contain}
.hm-br::-webkit-scrollbar{display:none}
.hm-br a{flex:none;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px;border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap}
.hm-br a span{font-size:11.5px;font-weight:500;color:var(--mute)}
@media (min-width:1024px){ .hm-br{flex-wrap:wrap;max-width:var(--maxw);margin:0 auto;overflow:visible} }
/* ── plp.css ── */
/* Griff v2 · plp.css — terméklisták (.pl-). Csak a base.css tokenjei és komponensei; a base-osztályokat csak a saját konténeren belül szűkíti.
   Mobil: lebegő fekete Méret · Szűrés · Rendezés pirula a hüvelykujj-zónában (body.lift). Gép (≥1024): ugyanez ragadó eszközsor a fejléc alatt. */

.pl{max-width:var(--maxw);margin:0 auto;padding-bottom:calc(76px + var(--safe-b))}

/* ---------- fejrész: cím + darabszám, rácsméret ---------- */
.pl-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px var(--gut) 0}
.pl-ht{min-width:0}
.pl-h h1{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.015em;line-height:1.2;overflow-wrap:anywhere}
.pl-n{font-size:var(--fs-s);color:var(--mute);margin-top:3px}
.pl-n .lnk{color:var(--ink)}
.pl-eta{white-space:nowrap}
.pl-dn{display:grid;grid-template-columns:repeat(2,40px);flex:none;margin:-6px -8px 0 0}
.pl-dn .ib{width:40px;color:var(--mute-2)}
.pl-dn .ib[aria-pressed="true"]{color:var(--ink)}
.pl-dn svg{width:20px;height:20px}
.pl-g{margin:12px var(--gut) 0;max-width:300px}

/* ---------- kategória-körök: mobilon egy sor (húzható), tableten és gépen tördelve ---------- */
.pl-cats{position:relative;display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:14px var(--gut) 4px;scroll-padding:0 var(--gut);overscroll-behavior-x:contain}
.pl-cats::-webkit-scrollbar{display:none}
.pl-c{flex:none;width:68px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-width:0}
.pl-c .ph{width:62px;height:62px;border-radius:50%;overflow:hidden;background:var(--tint);display:grid;place-items:center;transition:box-shadow var(--t-fast)}
.pl-c .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.pl-c .ph svg{width:24px;height:24px}
.pl-c .ph.ic{background:var(--tint)}
.pl-c.bk .ph{background:var(--white);box-shadow:inset 0 0 0 1px var(--line-2)}
.pl-c>span:last-child{font-size:11.5px;font-weight:600;line-height:1.25;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%}
.pl-c.on .ph{box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--ink)}
.pl-c.on>span:last-child{color:var(--ink);font-weight:700}

/* ---------- Méret · Szűrés · Rendezés: lebegő pirula (mobil, tablet) ---------- */
.pl-bar{position:fixed;left:50%;bottom:calc(14px + var(--safe-b));z-index:var(--z-bar);width:min(380px,calc(100% - 2 * var(--gut)));height:50px;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));border-radius:var(--r-pill);background:var(--ink);color:var(--white);box-shadow:var(--shadow);transform:translateX(-50%);transition:transform var(--t-ly) var(--ease),opacity var(--t-ly)}
.pl-bar.hide{transform:translate(-50%,calc(100% + 24px));opacity:0;pointer-events:none}
.pl-bar button{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;padding:0 8px;font-size:13.5px;font-weight:600;color:inherit;border-radius:var(--r-pill)}
.pl-bar button+button::before{content:"";position:absolute;left:0;top:15px;bottom:15px;width:1px;background:var(--mute)}
.pl-bar button:active{background:var(--ink-2)}
.pl-bar svg{width:17px;height:17px}
.pl-bar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-k{flex:none;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:var(--ink);font-size:11px;font-weight:700;line-height:18px;text-align:center}

/* ---------- szűrő-pirulák ---------- */
.pl-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:12px var(--gut) 0}
.pl-chips::-webkit-scrollbar{display:none}
.pl-chips:empty{display:none}
.pl-chips .chip{height:36px;padding:0 10px 0 12px;font-size:12.5px}
.pl-chips .chip svg{color:var(--mute)}
.pl-chips .chip.clr{padding:0 6px}

/* ---------- rács, „Add meg a méreted”, további termékek ---------- */
.pl-res{margin-top:14px}
.pl-grid.big{grid-template-columns:minmax(0,1fr)}
.pl-ask{grid-column:1/-1;background:var(--tint);padding:16px var(--gut) 18px;margin:2px 0}
.pl-ask h2{font-size:15px;font-weight:700}
.pl-ask p{font-size:var(--fs-s);color:var(--mute);margin:3px 0 12px}
.pl-ask .z{height:var(--tap);background:var(--white);box-shadow:inset 0 0 0 1px var(--line)}
.pl-more{padding:28px var(--gut) 8px;text-align:center}
.pl-more p{font-size:var(--fs-xs);color:var(--mute);margin-bottom:10px}
.pl-more .btn{min-width:240px}
.pl-gone{opacity:.4}
.pl-empty>.btn{min-width:220px;margin-bottom:6px}
.pl-sr{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:520px;margin:16px auto 0}
.pl-seen:empty{display:none}

/* ---------- alsó lapok: méret, szűrés, rendezés ---------- */
.pl-sh .sh-b{padding-top:6px}
.pl-sec{padding:6px 0 14px;border-bottom:1px solid var(--line);margin-bottom:10px}
.pl-sec:last-child{border-bottom:0;margin-bottom:0}
.pl-sec h3{font-size:var(--fs-m);font-weight:700;margin-bottom:10px}
.pl-zs .z{height:52px}
.pl-zh{font-size:var(--fs-xs);font-weight:600;color:var(--mute);margin:12px 0 6px}
.pl-zh:first-child{margin-top:0}
.pl-zs .z small{color:var(--mute);font-weight:500;font-size:10.5px}
.pl-zs .z.on small{color:var(--line-2)}
.pl-zs .z[disabled]{opacity:.35}
.chk.pl-o{grid-template-columns:22px minmax(0,1fr) auto;align-items:center;min-height:var(--tap);padding:6px 0;border-bottom:1px solid var(--tint-2)}
.chk.pl-o:last-child{border-bottom:0}
.pl-o .bx{margin-top:0}
.pl-o span{min-width:0}
.pl-o em{display:block;font-style:normal;font-size:var(--fs-xs);color:var(--mute);margin-top:1px}
.pl-o small{font-size:12.5px;color:var(--mute);font-variant-numeric:tabular-nums}
.pl-o[disabled]{opacity:.38;pointer-events:none}
.pl-so{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;text-align:left;font-size:15px;font-weight:500;border-bottom:1px solid var(--tint-2)}
.pl-so:last-child{border-bottom:0}
.pl-so.on{font-weight:700}

/* ---------- egér ---------- */
@media (hover:hover) and (pointer:fine){
  .pl-c:not(.on):hover .ph{box-shadow:0 0 0 2px var(--white),0 0 0 3px var(--line-2)}
  .pl-c.bk:hover .ph{box-shadow:inset 0 0 0 1px var(--ink)}
  .pl-dn .ib:hover{color:var(--ink)}
  .chk.pl-o:hover,.pl-so:hover{background:var(--tint)}
  .chip.ln:hover{background:var(--tint)}
}

/* ---------- kis telefon ---------- */
@media (max-width:379px){
  .pl-bar button{gap:4px;padding:0 6px;font-size:var(--fs-s)}
  .pl-bar svg{width:15px;height:15px}
}

/* ---------- tablet ---------- */
@media (min-width:768px){
  .pl-h{padding-top:24px}
  .pl-cats{flex-wrap:wrap;overflow:visible;gap:14px 12px;padding-top:18px}
  .pl-c{width:80px}
  .pl-c .ph{width:68px;height:68px}
  .pl-grid.big{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pl-ask .zs{max-width:440px}
  .pl-chips{flex-wrap:wrap;overflow:visible}
}

/* ---------- gép: ragadó eszközsor a fejléc alatt ---------- */
@media (min-width:1024px){
  .pl{padding-bottom:0}
  .pl-h{padding-top:30px;align-items:flex-end}
  .pl-h h1{font-size:var(--fs-3xl)}
  .pl-n{font-size:var(--fs-m)}
  .pl-dn{margin:0 -8px -6px 0}
  .pl-c{width:88px}
  .pl-c .ph{width:76px;height:76px}
  .pl-c>span:last-child{font-size:var(--fs-xs)}
  .pl-bar{position:sticky;top:var(--hd);left:auto;bottom:auto;transform:none;width:auto;height:auto;grid-template-columns:repeat(var(--n,3),200px);gap:8px;padding:12px var(--gut);margin-top:12px;border-radius:0;background:var(--white);color:var(--ink);box-shadow:0 1px 0 var(--line);transition:none}
  .pl-bar.hide{transform:none;opacity:1;pointer-events:auto}
  .pl-bar button{height:var(--tap);border-radius:var(--r-ui);background:var(--tint);font-size:var(--fs-s);padding:0 14px}
  .pl-bar button+button::before{display:none}
  .pl-bar button:active{background:var(--tint-2)}
  .pl-bar button.on{background:var(--ink);color:var(--white)}
  .pl-bar+.pl-chips{padding-top:2px}
  .pl-res{margin-top:16px}
  .pl-grid.big{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .pl-bar button:not(.on):hover{background:var(--tint-2)}
  .pl-bar button.on:hover{background:var(--ink-2)}
}
/* ── szett.css ── */
/* Griff v2 · szett.css — „Teljes szett” blokk (terméklap + „Kosárba tetted” lap) és „Ehhez ajánljuk” (.sz-).
   Csak a base.css tokenjei; fotó = 0 px sarok; mobil az elsődleges (390 px). */
.sz{margin-top:24px}
.sz-h{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.sz-h h2{font-size:var(--fs-m);font-weight:700;line-height:1.3}
.sz-h span{font-size:var(--fs-s);font-weight:500;color:var(--mute)}

/* párdarab: kép · név + ár · Kosárba · méretek */
.sz-it{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.sz-im{display:block;align-self:start;aspect-ratio:2/3;background:var(--tint);overflow:hidden}
.sz-im img{width:100%;height:100%;object-fit:cover}
.sz-im img.contain{object-fit:contain;padding:6px}
.sz-b{display:flex;flex-direction:column;gap:10px;min-width:0}
.sz-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.sz-tt{display:flex;flex-direction:column;gap:2px;min-width:0}
.sz-nm{font-size:var(--fs-s);font-weight:600;line-height:1.3}
.sz-p{font-size:var(--fs-m);font-weight:700;font-variant-numeric:tabular-nums}
.sz-p small{font-size:var(--fs-xs);font-weight:500;color:var(--mute)}
.sz-p:has(.was){color:var(--sale)}
.sz-p .was{font-size:var(--fs-xs)}
.sz-add{flex:none;gap:4px;padding:0 12px}
.sz-zs .z{height:var(--tap);font-size:var(--fs-s)}
.sz-zs .z small{font-size:9.5px;margin-top:1px}
.sz-one{font-size:var(--fs-s);color:var(--mute)}

/* mindkét darab egyszerre */
.sz-both{margin-top:14px;font-size:var(--fs-m)}
.sz-both span[aria-hidden]{color:var(--mute)}
.sz-sum{font-variant-numeric:tabular-nums}
.sz-sum small{font-size:var(--fs-xs);font-weight:500;color:var(--mute)}
.sz-msg{margin-top:8px}
.sz-msg:empty{display:none}

/* „Ehhez ajánljuk”: 4 mini kártya egy sorban */
.sz-gr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.sz-gr .mc>span{font-size:var(--fs-xs)}

/* „Kosárba tetted” lapon */
.sz-sh{margin-top:4px}
.sz-sh .sh-h3{margin:20px 0 0}
.sz-sh .sz-it:last-child{border-bottom:0}
/* ── pdp.css ── */
/* Griff v2 · pdp.css — terméklap alapjai: cm-tábla (.pd-tab), méret-sheet (.pd-szs), mérettábla-sheet (.pd-ch), nagyító (.pd-zm).
   A lap elrendezése (galéria, vásárló-oszlop, sziget, lenyíló sorok) a pdp-1014.css-ben van [PDP-1014], ami a build végén jön (gs/lista után).
   Csak a base.css tokenjei és közös komponensei; mobil az elsődleges (390 px). */

/* leírás, cm-tábla */
.pd-d h3{font-size:var(--fs-m);font-weight:700;margin:12px 0 6px}
.pd-d table{display:none}
.pd-tabw{overflow-x:auto;margin:0 calc(var(--gut) * -1);padding:0 var(--gut);overscroll-behavior-x:contain}
.pd-tab{width:100%;border-collapse:collapse;font-size:var(--fs-s);font-variant-numeric:tabular-nums}
.pd-tab th,.pd-tab td{padding:9px 8px;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap;font-weight:500}
.pd-tab tr>:first-child{text-align:left;padding-left:0;font-weight:600}
.pd-tab thead th,.pd-tab:not(:has(thead)) tr:first-child>*{font-size:var(--fs-xs);font-weight:600;color:var(--mute)}
.pd-tab tr.on>*,.pd-tab .on{font-weight:700;color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.pd-model{display:flex;align-items:center;gap:6px;font-size:var(--fs-s);color:var(--mute)}
.pd-model:empty{display:none}

/* ---------- méret-sheet (gyorsfizetés méret nélkül) ---------- */
.pd-szs .pd-szg .z{height:56px;font-size:var(--fs-l)}
.pd-szs .zmsg{margin-top:12px}
.pd-szs .sh-f .btn svg{color:var(--mute)}

/* ---------- mérettábla-sheet ---------- */
.pd-ch .sh-h3:first-child{margin-top:4px}
.pd-ch-n{font-size:var(--fs-s);color:var(--mute);margin-top:10px}
.pd-ch .pd-model{margin:14px 0 0}
.pd-ch .pd-chz{margin-top:2px}
.pd-ask{font-size:var(--fs-s);margin-top:18px;color:var(--ink-2)}
.pd-ch .pd-tabw{margin:0 calc(var(--gut) * -1);padding:0 var(--gut)}

/* ---------- nagyító (G.sheet kind:"zoom") ---------- */
.ly.zoom.pd-zm{background:var(--white)}
.pd-zm-tr{position:absolute;inset:0;display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior:contain}
.pd-zm-tr::-webkit-scrollbar{display:none}
.pd-zm-tr.lk{overflow:hidden}
.pd-zf{margin:0;height:100%;min-width:0;display:flex;align-items:center;justify-content:center;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;padding:calc(56px + var(--safe-t)) 0 calc(76px + var(--safe-b));cursor:zoom-in}
.pd-zf img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.pd-zf img.contain{padding:6%}
.pd-zf.z2{display:block;overflow:auto;padding:0;cursor:zoom-out;overscroll-behavior:contain;scrollbar-width:none}
.pd-zf.z2::-webkit-scrollbar{display:none}
.pd-zf.z2 img{max-width:none;max-height:none;width:auto;height:220%;margin:0 auto}
.pd-zm-x{position:absolute;top:calc(8px + var(--safe-t));right:8px;z-index:2;background:rgba(255,255,255,.92);border-radius:50%}
.pd-zm-n{position:absolute;top:calc(16px + var(--safe-t));left:var(--gut);z-index:2;display:flex;align-items:center;gap:3px;height:28px;padding:0 10px;border-radius:var(--r-pill);background:rgba(255,255,255,.92);font-size:var(--fs-s);font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums;pointer-events:none}
.pd-zm-n b{color:var(--ink)}
.pd-zm-a{display:none}
.pd-zm-th{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:10px var(--gut) calc(10px + var(--safe-b));background:rgba(255,255,255,.92)}
.pd-zm-th::-webkit-scrollbar{display:none}
.pd-zm-th>:first-child{margin-left:auto}
.pd-zm-th>:last-child{margin-right:auto}
.pd-zm-th button{position:relative;flex:none;width:38px;aspect-ratio:2/3;background:var(--white);opacity:.5;transition:opacity var(--t-fast)}
.pd-zm-th button.on{opacity:1;box-shadow:0 0 0 1.5px var(--ink)}
.pd-zm-th img{width:100%;height:100%;object-fit:cover}

@media (hover:hover) and (pointer:fine){
  .pd-zm-a{display:grid;position:absolute;top:50%;z-index:2;transform:translateY(-50%);background:rgba(255,255,255,.92);border-radius:50%;box-shadow:var(--shadow-s)}
  .pd-zm-a:hover{background:var(--white)}
  .pd-zm-l{left:16px}
  .pd-zm-r{right:16px}
  .pd-zm-th button:hover{opacity:1}
}
@media (min-width:768px){
  .pd-tabw,.pd-ch .pd-tabw{margin:0;padding:0}
}

/* [CHAT-HELY-1018] „Kérdésed van a méretről? Írj nekünk” a Kosárba / előnyök alatt */
.pd-ask{display:flex;align-items:center;gap:8px;margin:12px 0 4px;padding:6px 0;border:0;background:none;font:inherit;font-size:13px;color:var(--ink);cursor:pointer;text-align:left}
.pd-ask svg{flex:none;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.pd-ask u{font-weight:700;text-underline-offset:3px}
/* ── cart.css ── */
/* Griff v2 · cart.css — gyors kosár, „Kosárba tetted”, kosárfiók, /kosar/ oldal. Csak base.css-tokenek, előtag: .ct- */

/* ---------- közös: termék-fej a lapokon (gyors kosár, Kosárba tetted) ---------- */
.ct-pr{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center;margin-bottom:16px}
.ct-pr img{width:72px;aspect-ratio:2/3;object-fit:cover;background:var(--tint)}
.ct-pr img.contain{object-fit:contain;padding:6px}
.ct-pr>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.ct-pr b{font-size:var(--fs-m);font-weight:600;line-height:1.3}
.ct-pr span{font-size:var(--fs-xs);color:var(--mute)}
.ct-pr .ct-br{font-size:11.5px;font-weight:500}
.ct-pr .ct-p{font-size:15px;font-weight:700;color:var(--ink);margin-top:3px}
.ct-pr .ct-p:has(.was){color:var(--sale)}
.ct-pr .ct-p small{font-size:var(--fs-xs);font-weight:500;color:var(--mute)}
.ct-eta{display:flex;align-items:center;gap:6px;margin-top:4px}
.ct-eta svg{color:var(--ink)}
.ct-eta span{color:var(--ink-2);font-weight:500}

/* ---------- gyors kosár (méret-lap) ---------- */
.ct-lbl{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:var(--fs-s);font-weight:700;margin:16px 0 8px}
.ct-lbl span{font-weight:500;color:var(--mute)}
.ct-lbl .lnk{font-size:var(--fs-s);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ct-pr+.ct-lbl{margin-top:4px}
.ct-cs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:3px;margin:-3px}
.ct-cs::-webkit-scrollbar{display:none}
.ct-cs button{flex:none;width:48px;border-radius:var(--r-xs);overflow:hidden;background:var(--tint);box-shadow:0 0 0 1px var(--line);transition:box-shadow var(--t-fast)}
.ct-cs button img{width:48px;aspect-ratio:2/3;object-fit:cover}
.ct-cs button.on{box-shadow:0 0 0 2px var(--ink)}
.ct-cs button.dim img{opacity:.4}
.ct-qab .zs{margin-top:2px}
.ct-qab .z.ct-my{box-shadow:inset 0 0 0 1.5px var(--ink)}
.ct-qab .z.on{box-shadow:none}
.ct-qab .z .ct-zp{color:var(--mute);font-weight:500}
.ct-qab .z.on .ct-zp{color:var(--white)}
.ct-qab .zmsg{margin-top:12px}

/* ---------- „Kosárba tetted” ---------- */
.ct-okh{display:flex;align-items:center;gap:10px}
.ct-okh i{width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--white);display:grid;place-items:center;flex:none;animation:ct-pop .32s var(--ease)}
.ct-okh i svg{width:16px;height:16px;stroke-width:2.4}
@keyframes ct-pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
.ct-ad .ct-pr{margin-bottom:14px}
.ct-ad .ct-pr a{display:block}
.ct-ad .row2 .btn,.ct-dr .sh-f .btn{font-size:var(--fs-m)}
.ct-reco{margin-top:4px}
.ct-reco .sh-h3{margin:20px 0 10px}

/* ---------- ingyenes szállításig sáv ---------- */
.ct-fs{margin-bottom:4px}

/* ---------- tételsor ([KOSAR-1014]: kép 72 px 3/4.2 · név 14/700 · méret·szín 12 px · ár jobbra · −/+ 32 px vonalas körök · kis vonalas ×; hajszálvonal a sorok közt) ---------- */
.ct-lines{margin-top:6px}
.ct-ln{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid var(--line);transition:opacity .17s,transform .17s var(--ease)}
.ct-ln.ct-gone{opacity:0;transform:translateX(12px)}
.ct-im{display:block;aspect-ratio:3/4.2;background:var(--tint);overflow:hidden}
.ct-im img{width:100%;height:100%;object-fit:cover}
.ct-im img.contain{object-fit:contain;padding:8%}
.ct-t{display:flex;flex-direction:column;min-width:0}
.ct-top{display:flex;gap:8px;justify-content:space-between;align-items:flex-start}
.ct-nm{min-width:0;display:block}
.ct-nm b{display:block;font-size:14px;font-weight:700;line-height:1.3}
.ct-nm span{display:block;font-size:12px;color:var(--mute);margin-top:3px;line-height:1.4}
.ct-x{width:32px;height:32px;display:grid;place-items:center;margin:-6px -6px 0 0;color:var(--ink);flex:none;border-radius:50%}
.ct-x svg{width:16px;height:16px}
.ct-last,.ct-max{font-size:12px;font-weight:600;margin-top:5px}
.ct-last{color:var(--ink)}
.ct-max{color:var(--mute);font-weight:500}
.ct-bot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:10px}
.ct-ln .qty{height:32px;gap:4px;box-shadow:none;border-radius:0}
.ct-ln .qty button{width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink)}
.ct-ln .qty button svg{width:14px;height:14px}
.ct-ln .qty span{min-width:24px;font-size:14px;font-weight:600}
.ct-lp{display:flex;flex-direction:column;align-items:flex-end;text-align:right;line-height:1.3}
.ct-lp b{font-size:14px;font-weight:700;white-space:nowrap}
.ct-lp b:has(+.was){color:var(--ink)}
.ct-lp .was{margin:0;font-size:12px;color:var(--mute)}
.ct-lp small{font-size:12px;color:var(--mute);white-space:nowrap}
/* törlés visszavonása (a tétel helyén) */
.ct-undo{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px;padding:6px 0;margin:0;border-bottom:1px solid var(--line);font-size:13px;animation:ct-in .2s var(--ease)}
.ct-undo span{min-width:0}
.ct-undo b{font-weight:600}
.ct-sold{border-top:1px solid var(--line)}
.ct-sold button{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);padding:0;text-decoration:none}
.ct-undo button{flex:none;min-height:var(--tap);padding:0 10px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
@keyframes ct-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- klub-sor (nem tagnak): EGY sor, hajszálvonallal; összesítő: Termékek · klub · Szállítás · Összesen 16/700 + egy 12 px-es tény ---------- */
.ct-club{display:flex;align-items:center;gap:8px;width:100%;min-height:var(--tap);margin-top:14px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13px;text-align:left}
.ct-club span:not(.tag){flex:1;min-width:0}
.ct-club b{font-weight:700}
.ct-club svg{color:var(--ink)}
.ct-club .tag.club{height:18px;font-size:9.5px}
.ct-sum{gap:8px;font-size:14px}
.ct-sum .ct-cl{font-size:13px;color:var(--ink)}
.ct-sum .ct-cl .tag{height:18px;font-size:9.5px;margin-right:4px}
.ct-sum .ct-cl>span:last-child{color:var(--ink);font-weight:600}
.ct-sum .free{color:var(--ink);font-weight:400}
.ct-sum .tot{font-size:16px;font-weight:700;padding-top:12px;margin-top:4px;border-top:1px solid var(--line)}
.ct-sum .ct-fact{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mute);line-height:1.4;margin-top:2px}
.ct-sum .ct-fact svg{flex:none;color:var(--mute)}
.ct-legal{font-size:12px;color:var(--mute);line-height:1.5;margin-top:14px}
/* ---------- gyorspénztár (helye; csak élesben jelenik meg) ---------- */
.ct-xpw{max-width:420px;margin:0 auto}
.ct-xpw:has(>.ct-xp:empty){display:none}
.ct-xpw .or-line{margin:14px 0 6px}
.ct-xpw .chk{padding:6px 0 10px;font-size:var(--fs-s);cursor:pointer}
/* [LISTA-GEP-1015] a kosárban sincs narancs villogó gyűrű a négyzet körül: hibánál ugyanaz a piros keret, mint a terméklapon és a pénztárban (base.css .chk.bad) */
.ct-xp{position:relative;transition:opacity var(--t-fast)}
.ct-xp:has(>iframe){margin-right:5px}            /* a Revolut-gomb iframe-je 100% + 5 px széles */
.ct-xp.off{opacity:.45}
.ct-xp.off::after{content:"";position:absolute;inset:0;z-index:2;cursor:not-allowed}

/* ---------- kosárfiók ---------- */
.ct-dr .sh-b{padding-top:12px}
.ct-dr .ct-ln{grid-template-columns:72px minmax(0,1fr);gap:12px}
.ct-dr .ct-ln:last-child{border-bottom:0}
.ct-dr .sh-f .ct-sum{gap:5px;margin-bottom:12px}
.ct-dr .sh-f .ct-sum .tot{padding-top:8px}
.ct-all{display:flex;justify-content:center;align-items:center;min-height:var(--tap);font-size:var(--fs-s);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ct-dr .sh-f .ct-all{margin-top:2px;margin-bottom:-6px}
.ct-dr .ct-empty{padding-top:28px}
.ct-dr .sec,.ct-page .sec{margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1)}
.ct-dr .sec{margin-top:20px}

/* ---------- kosár-oldal ---------- */
.ct-page{max-width:1240px;margin:0 auto;padding:10px var(--gut) 32px}   /* a sziget alatti 96 px-et a lábléc lift-paddingja adja */
.ct-head{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin-bottom:14px}
.ct-head .h1{font-size:26px;font-weight:700;text-transform:uppercase;letter-spacing:-.01em;line-height:1.1}
.ct-n{font-size:13px;color:var(--mute);font-weight:400;margin-top:4px}
.ct-page>#ct-body>.empty{padding-top:24px}
.ct-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.ct-main{min-width:0}
.ct-side{min-width:0;border-top:1px solid var(--line);padding-top:16px}
.ct-box{background:none;border-radius:0;padding:0}
.ct-box .ct-club{margin-top:14px}
.ct-box .ct-xpw{margin-top:16px}
.ct-more .sec{margin-top:14px}
.ct-main .ct-reco{margin-top:6px}
/* ingyenes szállításig: nem doboz, 13 px sor + 3 px fekete csík */
.ct-fs{background:none;border-radius:0;padding:14px 0 12px;margin:0;border-bottom:1px solid var(--line)}
.ct-fs p{font-size:13px;font-weight:500}
.ct-fs .bar{height:3px;border-radius:0;background:var(--line);margin-top:10px}
.ct-fs .bar i{background:var(--ink);border-radius:0}
/* az EGY fő gomb: lebegő fekete sziget a lap alján (16 px margó, 56 px, pirula, árnyék), balra az Összesen, jobbra a zöld „Fizetés” */
.ct-sticky{position:fixed;left:16px;right:16px;bottom:calc(16px + var(--safe-b));z-index:var(--z-stick);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;height:56px;padding:0 6px 0 20px;border-radius:999px;background:var(--ink);color:#fff;box-shadow:0 14px 34px -14px rgba(0,0,0,.5)}
.ct-sticky[hidden]{display:none}
.ct-sticky>div{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.ct-sticky span{font-size:12px;color:rgba(255,255,255,.72)}
.ct-sticky b{font-size:16px;font-weight:700;white-space:nowrap;color:#fff}
.ct-sticky .btn{height:44px;padding:0 26px;width:auto}
body[data-page=cart].lift .ft{padding-bottom:calc(28px + 76px + var(--safe-b))}
/* ---------- egér ---------- */
@media (hover:hover) and (pointer:fine){
  .ct-undo button:hover{color:var(--mute)}
  .ct-x:hover{background:var(--tint-2)}
  .ct-nm:hover b{text-decoration:underline;text-underline-offset:3px}
  .ct-club:hover span:not(.tag){text-decoration:underline;text-underline-offset:3px}
  .ct-cs button:not(.on):hover{box-shadow:0 0 0 1px var(--mute-2)}
  .ct-all:hover{color:var(--mute)}
}

/* ---------- kis telefon ---------- */
@media (max-width:389px){                            /* 375-ös telefonon a „Tovább a pénztárhoz” nem fér el fél szélességen */
  .ct-ad .row2{grid-template-columns:minmax(0,1fr)}
  .ct-ad .row2 .btn.p{order:-1}
}
@media (max-width:379px){
  .ct-sticky{padding-left:16px}
  .ct-sticky .btn{padding:0 20px}
}

/* ---------- tablet és gép ---------- */
@media (min-width:768px){
  .ct-page{padding-top:20px}
  .ct-head{margin-bottom:18px}
}
@media (min-width:1024px){
  .ct-grid{grid-template-columns:minmax(0,1fr) 400px;grid-template-areas:"main side" "more side";column-gap:48px;row-gap:0;align-items:start}
  .ct-main{grid-area:main}
  .ct-side{grid-area:side;border-top:0;padding-top:14px;position:sticky;top:calc(var(--hd) + 16px)}
  .ct-more{grid-area:more;min-width:0}
  .ct-more .sec{margin-top:40px}
  .ct-more .sec{margin-left:0;margin-right:0}
  .ct-more .sec-h{padding:0}
  .ct-more .rail{grid-auto-columns:calc((100% - 12px) / 4)}
  .ct-main .mini-rail{margin:0;padding:0}          /* gépen a hasáb széléig, ne lógjon át az összesítő melletti résbe */
  .ct-sticky{left:50%;right:auto;transform:translateX(-50%);width:min(1120px,calc(100% - 24px));padding-left:24px}   /* a fejléc-szigettel egyforma széles */
}
/* ── checkout.css ── */
/* Griff v2 · checkout.css — pénztár (/penztar/). Csak base.css-tokenek; előtag .co- (a .co-back és .co-lock a fejlécé).
   [KOSAR-1014] a lista nyelvén: fehér, nincs doboz, hajszálvonalak; mezők 48 px 1,5 px fekete vonal 12 px sugár (a gs-réteg felett a kosar-1014.css adja);
   szállítás/fizetés = vonalas kártyák, az aktív 2 px fekete; EGY zöld gomb a lap alján lebegő szigeten (#co-isl); gépen két oszlop, az összesítő ragad. */

/* ---------- váz: mobilon egy oszlop, felül összecsukható összesítő; gépen jobbra az összesítő ---------- */
.co-pg{min-height:calc(100vh - var(--hd))}
.co-sm{background:var(--white);border-bottom:1px solid var(--line)}
.co-sm>button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:0 var(--gut);font-size:14px;font-weight:600}
.co-sm>button span{display:flex;align-items:center;gap:6px}
.co-sm>button i{font-style:normal;font-weight:400;color:var(--mute)}
.co-sm>button svg{transition:transform var(--t-fast)}
.co-sm.open>button svg{transform:rotate(180deg)}
.co-sm>button b{font-size:16px;font-weight:700}
.co-sm .co-items{display:none;padding:2px var(--gut) 16px}
.co-sm.open .co-items{display:block}
.co-main{padding:16px var(--gut) 96px}
.co-aside{display:none}

/* ---------- szakaszok: nincs doboz, a cím 17/700, a szakaszok közt levegő ---------- */
.co-sec{margin-top:28px}
.co-sec:first-child,.co-xps[hidden]+.co-sec{margin-top:4px}   /* [PENZTAR-PROFI-1015] a „Folytatás mint …” sor a Belépés szakaszban van, nem fölötte */
.co-sec>h2,.co-extra h2{font-size:17px;font-weight:700;letter-spacing:-.01em;margin-bottom:12px;line-height:1.3}
.co-msg{display:none;font-size:12px;color:var(--err);font-weight:600;margin-top:2px}
.co-sec.bad .co-msg{display:block}
.co-sec.bad .opt:not(.on){box-shadow:inset 0 0 0 1.5px var(--err)}
.co-xps{margin-top:4px}
.co-xps>h2{font-size:12px;font-weight:600;color:var(--mute);margin-bottom:10px;text-align:center;letter-spacing:0}
.co-xps .or-line{margin:16px 0 0}

/* visszatérő vevő: „Folytatás mint …” — egy sor a Belépés címe alatt ([PENZTAR-PROFI-1015] a szakaszon belül, vonal nélkül) */
.co-ret{padding:2px 0 0}
.co-ret-r{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center}
.co-av{width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--white);display:grid;place-items:center;font-weight:700;font-size:16px}
.co-ret-r b{display:block;font-size:14px;font-weight:700}
.co-ret-r div span{display:block;font-size:12px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.co-ret .co-code{margin:12px 0 0}
.co-pg .co-ret .btn{border-radius:12px}   /* [PENZTAR-PROFI-1015 javítás] a „Kódot kérek” sarka = a mezőké (12 px), nem pirula */
.co-ret .co-code:empty{display:none}

/* kapcsolat */
.co-sent{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-size:13px;color:var(--ink);margin:-2px 0 8px;overflow-wrap:anywhere}
.co-sent b{font-weight:600}
.co-sent.err{color:var(--err);font-weight:600}
.co-sent button,.co-typo button,.co-chg{font-weight:600;text-decoration:underline;text-underline-offset:3px;min-height:32px}
.co-dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--ink);animation:spin .8s linear infinite;flex:none}
.co-typo{font-size:13px;margin:-2px 0 8px;color:var(--ink)}
.co-typo button{color:var(--ink)}
.co-club{font-size:12px;color:var(--mute);line-height:1.5}
/* [PENZTAR-PROFI-1015] Belépés: egy halk sor a mező alatt; a kód-doboz a mező alatt (vonal nélkül, a szakasz része); „Másik e-mail-címmel lépek be” a „Folytatás” sor alatt */
.co-mhint{font-size:12px;color:var(--mute);line-height:1.45;margin:-4px 0 0}
.co-mhint[hidden],.co-other[hidden]{display:none}
.co-login .fld.bad+.co-mhint{display:none}   /* [PENZTAR-PROFI-1015 javítás] hibás / üres címnél a hibaüzenet mondja az okot, a halk sor nem áll alatta másik okkal */
.co-mcode:empty{display:none}
.co-login .co-code{margin:8px 0 0;padding:6px 0 0;border:0}
.co-login .co-code h3{font-size:14px}
.co-login .co-sent{margin:8px 0 0}
.co-login .co-other{display:inline-flex;min-height:32px;margin:6px 0 0;font-size:12px}   /* [PENZTAR-PROFI-1015 javítás] = a mező alatti halk sor távolsága, nem 44 px-es sor */
.co-code .co-cact{display:flex;flex-wrap:wrap;gap:4px 20px;margin:6px 0 0}
.co-code .co-cact button{min-height:32px;font-size:12px;font-weight:600;color:var(--ink)}
/* belépve: fehér kártya hajszálvonallal (mint a választó-kártyák): e-mail-cím + „Más cím”, alatta „Belépve”, klubtagnak a klub-sor */
.co-verbox{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center;padding:12px 8px 12px 14px;border-radius:12px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line-2)}
.co-verbox b{display:block;font-size:14px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.co-vk{grid-column:1/-1;display:flex;align-items:center;gap:5px;font-size:12px;color:var(--mute);margin-top:2px;padding-right:6px}
.co-vk svg{flex:none;color:var(--ink)}
.co-vl{grid-column:1/-1;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mute);margin-top:8px;flex-wrap:wrap;padding-right:6px}
.co-vl .tag{height:18px;font-size:9.5px}
.co-chg{font-size:13px;padding:0 6px}

/* szállítási mód: [PENZTAR-PROFI-1015 javítás] ugyanaz a választó-sor, mint a fizetésnél (kosar-1014.css .co-pg .opt): rádió balra, ár jobbra a cím sorában */
.co-ship{display:block}
.co-ship>.opt:last-child{margin-bottom:0}

/* cím, telefon */
.co-more{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;margin:-6px 0 4px}
.co-extra .co-more{margin:0;display:flex}
.co-warn{font-size:12px;color:var(--ink);font-weight:600;margin:-4px 0 10px}
.co-hu{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mute);margin-top:2px}
.fld .pf[hidden]{display:none}
#co-s-addr .fld.bad .help{display:none}

/* fizetés */
#co-pays>:last-child{margin-bottom:0}
/* [PENZTAR-PROFI-1015] kártyalogók: 38×24 px-es fehér keret, 1 px-es hajszálvonal, 4 px sarok; benne a márka saját jele (checkout.js PM_VISA, PM_MC) */
.co-pg .opt .ic{gap:6px}
.co-pg .opt .ic .pmk{display:inline-grid;place-items:center;width:38px;height:24px;padding:0;margin:0;border-radius:4px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
#co-pays .opt .pmk svg{display:block;margin:0}
.co-pg .pmk-v svg{width:28px;height:10px}
.co-pg .pmk-mc svg{width:27px;height:17px}
.co-save{margin-top:2px;font-size:13px;color:var(--ink)}
.co-save .bx,.co-acc .bx,.co-xacc .bx{cursor:pointer}
.chk span[data-a],.chk[data-a]{cursor:pointer}   /* [LISTA-GEP-1015] a pénztár jelölő-sora egészében kattintható */
.co-pad{pointer-events:none}   /* [LISTA-GEP-1015] lásd checkout.js accHide: a lap alján az összecsukott ÁSZF-üzenet helye a pénztár legaljára kerül, a négyzet nem mozdul */

/* számla, megjegyzés */
.co-extra{margin-top:18px}
.co-extra #co-bill{margin:6px 0 10px}
.co-extra #co-bill h2{font-size:14px;margin-bottom:10px}
.co-extra #co-note-w{margin-top:6px}

/* kód: 6 mező a gomb fölött (vagy a „Folytatás mint …” sorban) — nem doboz */
.co-code{padding:14px 0 16px;margin-bottom:18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.co-code h3{font-size:14px;font-weight:700}
.co-code>p{font-size:13px;color:var(--mute);margin:3px 0 12px;overflow-wrap:anywhere;text-wrap:pretty}
.co-code>p b{color:var(--ink);font-weight:600}
.co-code.bad .otp input{box-shadow:inset 0 0 0 1.5px var(--err)}
.co-code .co-cm{margin:10px 0 0;font-size:13px;font-weight:600;color:var(--ink)}
.co-code .co-cm.err{color:var(--err)}
.co-code .co-cm:empty{display:none}
.co-code .co-ch{margin:10px 0 0;font-size:12px;color:var(--mute)}
.co-code .co-ch .lnk{color:var(--ink)}

/* elfogadás, ÁFA, hiba, jegyzet, tájékoztatók */
.co-fin{margin-top:26px;padding-top:4px}
.co-acc{font-weight:500;font-size:14px}
.co-legal{font-size:12px;color:var(--mute);margin:2px 0 0 34px;line-height:1.5;text-wrap:pretty}
.co-legal .lnk{color:var(--ink)}
.co-err{color:var(--err);font-size:13px;font-weight:600;margin:12px 0 0;overflow-wrap:anywhere}
.co-err .lnk{color:var(--err)}
.co-note{font-size:12px;color:var(--mute);margin-top:10px;line-height:1.5}
.co-nw{white-space:nowrap}   /* [PENZTAR-PROFI-1015 javítás] „e-mailben” nem törik a kötőjelnél */
.co-links{display:flex;flex-wrap:wrap;gap:0 12px;margin-top:18px;padding-top:8px;border-top:1px solid var(--line)}
.co-links a{display:inline-flex;align-items:center;min-height:var(--tap);font-size:12px;font-weight:600;color:var(--mute)}

/* ---------- az EGY fő gomb: lebegő fekete sziget a lap alján — balra a Fizetendő, jobbra a zöld „Megrendelem” / „Fizetek” ---------- */
.co-isl{position:fixed;left:16px;right:16px;bottom:calc(16px + var(--safe-b));z-index:var(--z-stick);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;height:56px;padding:0 6px 0 20px;border-radius:999px;background:var(--ink);color:#fff;box-shadow:0 14px 34px -14px rgba(0,0,0,.5)}
.co-isl[hidden]{display:none}
.co-islt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.co-islt span{font-size:12px;color:rgba(255,255,255,.72)}
.co-islt b{font-size:16px;font-weight:700;white-space:nowrap;color:#fff}
.co-isl .btn{height:44px;padding:0 26px;width:auto}
.co-isl .btn[hidden]{display:none}
/* [PENZTAR-PROFI-1015 javítás] telefonon és tableten (web): a sziget mögött a lap aljáig fehér sáv, tetején hajszálvonal, hogy a lap tartalma ne látsszon
   át a sziget mellett / alatt. A sziget saját rétegében (z-index → saját stacking context): ::before = a sáv, ::after = a fekete pirula háttere (utána festődik),
   a tartalom (végösszeg, gomb) fölöttük. Az appban nincs változás. */
@media (max-width:1023px){
  html:not(.is-app) .co-isl{background:none;box-shadow:none}
  html:not(.is-app) .co-isl::before{content:"";position:absolute;z-index:-1;left:-16px;right:-16px;top:-12px;bottom:calc(-16px - var(--safe-b));background:#fff;border-top:1px solid var(--line)}
  html:not(.is-app) .co-isl::after{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;background:var(--ink);box-shadow:0 10px 24px -14px rgba(0,0,0,.45)}
}
/* [JOGI-1015] utánvétnél a törvényi felirat („Megrendelés fizetési kötelezettséggel”, 45/2014. 15. § (2)) két sorban fér el a szigeten; a felirat nem rövidülhet */
.co-isl .btn.co-go.co-go2{white-space:normal;text-align:center;line-height:1.2;font-size:12px;letter-spacing:.02em;padding:0 18px;max-width:min(232px,62vw)}

/* ---------- összesítő (mobilon lenyitva, gépen oldalt) ---------- */
.co-lines .si .pr{text-align:right;font-size:14px;font-weight:700;color:var(--ink)}   /* [PENZTAR-PROFI-1015 javítás] a fizetendő ár fekete (a .si span szürkéje nem érheti el) */
.co-lines .si .pr s{display:block;font-size:12px;color:var(--mute);font-weight:400}
.co-lines .si{grid-template-columns:56px minmax(0,1fr) auto}
.co-lines .si .im img{aspect-ratio:3/4.2;background:var(--tint)}
.co-lines .si .q{background:var(--ink)}
.co-lines .si b{font-size:14px;font-weight:700}
.co-lines .si span{font-size:12px;color:var(--mute)}
.co-sum{margin-top:10px;padding-top:12px;border-top:1px solid var(--line);gap:8px;font-size:14px}
.co-sum .club-l{font-size:13px;color:var(--ink)}
.co-sum .club-l>span:first-child{display:flex;align-items:center;gap:6px}
.co-sum .club-l .tag{height:18px;font-size:9.5px}
.co-sum .free{color:var(--ink);font-weight:400}
.co-sum .tot{font-size:16px;font-weight:700;padding-top:12px;border-top:1px solid var(--line)}
.co-sum .sm{font-size:12px;color:var(--mute)}
.co-left{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mute);margin-top:10px}
.co-left svg{color:var(--ink)}
.co-trust{margin-top:22px}
.co-trust li[hidden]{display:none}
.co-trust li{padding:11px 0}
.co-trust b{font-size:13px;font-weight:600}
.co-trust span{font-size:12px}

/* ---------- fizetés-lépés: kártyamező ---------- */
.co-pay h2{font-size:17px;font-weight:700;margin:6px 0 12px}
.co-back2{margin:0 0 4px -2px}
.co-okline{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13px;line-height:1.45}
.co-okline svg{color:var(--ink);margin-top:1px}
.co-who{font-size:13px;color:var(--mute);margin:12px 0 18px;line-height:1.55;overflow-wrap:anywhere}
.co-pw{max-width:420px;margin:0 auto}
.co-pw:empty{display:none}
.co-cl{font-size:12px;font-weight:600;color:var(--mute);margin:16px 0 6px}
.co-cf{min-height:48px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line-2);background:var(--white);padding:0 14px;display:flex;align-items:center;transition:box-shadow .12s;margin-bottom:12px}
.co-cf>iframe,.co-cf>div{width:100%}
.co-cf.co-cf-on{box-shadow:inset 0 0 0 2px var(--ink)}
.co-cf.co-cf-bad{box-shadow:inset 0 0 0 1.5px var(--err)}
.co-cfph{font-size:14px;color:var(--mute)}
.co-safe{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--mute);margin-top:12px;text-align:left}
.co-safe svg{margin-top:2px}

/* ---------- gyorsfizetés (Apple Pay / Google Pay) — a kosár és a terméklap is ezt kapja; a tárca gombja a lap tetején fekete tömör ---------- */
.co-xpw{max-width:420px;margin:0 auto}
.co-xpw .chk{padding:0 0 8px;font-size:13px}
.co-xpw .chk-msg{margin:8px 0 0;text-align:center}   /* [LISTA-GEP-1015] az üzenet a tárca-gomb alatt (xpHTML): a gomb nem mozdul */
.co-xpbtn{position:relative;min-height:48px}
.co-xpblk{position:absolute;inset:0;z-index:2;width:100%;background:transparent;border-radius:999px;cursor:pointer}
.co-xpblk[hidden]{display:none}                     /* [JOGI-1015] pipa után a takaró eltűnik, a tárca-gomb kattintható */
.co-xpn{font-size:12px;color:var(--mute);margin-top:8px;text-align:center;line-height:1.45}

/* ---------- töréspontok ---------- */
@media (max-width:379px){
  .co-isl{padding-left:16px}
  .co-isl .btn{padding:0 20px}
  .co-isl .btn.co-go.co-go2{font-size:11.5px;padding:0 12px;max-width:52vw}   /* [JOGI-1015] 320 px-en is elfér mellette a 6 jegyű végösszeg */
}
@media (min-width:768px){
  .co-main{max-width:640px;margin:0 auto;padding:28px var(--gut) 112px}
  .co-sm{border-bottom:0}
  .co-sm>button,.co-sm .co-items{max-width:640px;margin:0 auto}
  .co-sm .co-items{padding-left:var(--gut);padding-right:var(--gut)}
}
@media (min-width:1024px){
  .co-pg{display:grid;grid-template-columns:minmax(0,1fr) minmax(400px,38%)}
  .co-sm{display:none}
  .co-main{max-width:620px;margin:0 0 0 auto;width:100%;padding:24px 56px 120px 32px}
  .co-aside{display:block;background:var(--white);padding:24px 32px 120px}
  .co-in{position:sticky;top:calc(var(--hd) + 16px);max-width:400px;padding-left:24px;border-left:1px solid var(--line)}
  .co-in>h2{font-size:17px;font-weight:700;margin-bottom:12px}
  .co-isl{left:50%;right:auto;transform:translateX(-50%);width:min(1120px,calc(100% - 24px));padding-left:24px}   /* a fejléc-szigettel egyforma széles */
}
@media (min-width:1440px){
  .co-aside{padding-left:56px}
  .co-main{padding-right:72px}
}
/* [PENZTAR-PROFI-1015 javítás] tableten / iPaden van hely: az utánvétes törvényi felirat („Megrendelés fizetési kötelezettséggel”) egy sorban, olvasható méretben */
@media (min-width:768px){
  .co-isl .btn.co-go.co-go2{white-space:nowrap;font-size:13px;letter-spacing:0;padding:0 22px;max-width:none}
}
/* [PENZTAR-PROFI-1015 javítás] GÉPEN (web, ≥1024 px) NINCS lebegő sziget (a Shopify-pénztárban sincs): a végösszeg és a fő gomb az űrlap-oszlop végén áll,
   a jogi szöveg és a jegyzet után, teljes oszlopszélességben (52 px, a felirat egy sorban); alatta a tájékoztató-linkek. A kártya-lépésben ugyanitt a „Fizetek …”.
   Így a sziget nem takarja a Fizetés-kártyát, és nincs a laptól független széle. Az appban (iPad) marad a lebegő sziget. */
@media (min-width:1024px){
  html:not(.is-app) .co-main,html:not(.is-app) .co-aside{padding-bottom:56px}
  html:not(.is-app) .co-isl{position:static;display:block;left:auto;right:auto;bottom:auto;transform:none;width:auto;height:auto;z-index:auto;margin:22px 0 0;padding:16px 0 0;border-radius:0;background:none;color:var(--ink);box-shadow:none;border-top:1px solid var(--line)}
  html:not(.is-app) .co-islt{flex-direction:row;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}
  html:not(.is-app) .co-islt span{font-size:15px;font-weight:600;color:var(--ink)}
  html:not(.is-app) .co-islt b{font-size:20px;color:var(--ink)}
  html:not(.is-app) .co-isl .btn{display:flex;width:100%;height:52px;padding:0 24px;font-size:15px}
  html:not(.is-app) .co-isl .btn.co-go.co-go2{font-size:15px;padding:0 24px}
  html:not(.is-app) .co-isl .btn[hidden]{display:none}
  html:not(.is-app) .co-links{margin-top:24px}
}
@media (hover:hover) and (pointer:fine){
  .co-ship .opt:hover:not(.on),#co-pays .opt:hover:not(.on){box-shadow:inset 0 0 0 1px var(--ink)}
  .co-links a:hover,.co-more:hover{color:var(--ink)}
}
/* [XP-KATT-1015] koppintásra betöltő gyorsfizetés: fekete pirula, a Kosárba gomb formájában */
.co-xpl{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:50px;border:0;border-radius:999px;background:#000;color:#fff;font:600 15px/1 Montserrat,system-ui,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
.co-xpl svg{width:18px;height:18px;margin-top:-2px}
.co-xpl.busy{opacity:.6}
.co-xpl:active{transform:scale(.98)}
/* [PENZTAR-JOG-1015] A2: a megrendelés előtt közvetlenül látható tétellista (mobilon és tableten; gépen az oldalsáv mutatja) */
.co-finsum{margin:0 0 18px;padding:0 0 4px;border-bottom:1px solid var(--line)}
.co-finsum h2{font-size:15px;font-weight:700;margin:0 0 8px}
.co-fl{list-style:none;margin:0;padding:0}
.co-fl li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:13.5px;color:var(--ink);border-top:1px solid var(--line)}
.co-fl li:first-child{border-top:0}
.co-fl li span{min-width:0;overflow-wrap:anywhere}
.co-fl li b{font-weight:600;white-space:nowrap}
.co-fl li.tot{font-size:15px}
.co-fl li.tot b,.co-fl li.tot span{font-weight:700}
@media (min-width:1024px){ html:not(.is-app) .co-finsum{display:none} }
.co-mhint .lnk{white-space:nowrap}
/* [XP-PIPA-1015] gyorsfizetés (terméklap, kosár): a pipa és a tárca-gomb egy egység — a pipa közvetlenül a gomb fölött (8 px), a gomb bal széléhez igazítva, 13,5 px-es egysoros szöveg */
.co-xpw{display:flex;flex-direction:column;align-items:stretch}
.co-xpw .chk.co-xacc{display:flex;align-items:center;gap:10px;padding:0 !important;margin:0 0 8px;min-height:0;font-size:13.5px;line-height:1.3;white-space:nowrap}
.co-xpw .chk.co-xacc .bx{margin-top:0;flex:none}
.ct-xpw .chk.co-xacc{padding:0 !important}
.pd-xp .co-xpw{margin-top:2px}

/* [INLINE-KARTYA-1018] kártyamező rögtön a Bankkártya alatt + tárca-gomb az ÁSZF-pipa után */
.co-cfw{margin:-2px 0 12px;padding:14px 16px 12px;border-radius:0 0 14px 14px;box-shadow:inset 0 0 0 1px var(--line-2);background:var(--white)}
.co-cfw .co-cl{margin:0 0 6px}
.co-cfw .co-cf{margin-bottom:6px}
.co-cfw .co-safe{margin-top:6px}
.co-cf.co-cf-ok{box-shadow:inset 0 0 0 1.5px var(--ok,#1F7A3A)}
.co-cfph{font-size:14px;color:var(--mute)}
.co-iw{margin:14px 0 18px}
.co-iw .or-line{margin:0 0 12px}
.co-iwb{min-height:50px}
.co-cfgo{all:unset;box-sizing:border-box;width:100%;min-height:48px;display:flex;align-items:center;gap:8px;cursor:text;font-size:16px;color:var(--mute)}
.co-cfgo-r{margin-left:auto;font-size:14px}
.co-iwgo{width:100%;height:50px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600}
.co-iwgo.busy{opacity:.6}
.co-iwno{font-size:13px;color:var(--mute);text-align:center;margin:0}

/* [KARTYA-DOBOZ-1019] Olivér: „ronda lett” → a kiválasztott Bankkártya és alatta a kártyamező EGY doboz (közös 2 px-es keret), a mentés-pipa a mező alatt,
   a „Kártyaadatok” cím és a második „Titkosított…” sor nélkül; a mező a felirattal egy vonalban kezdődik */
.co-pg #co-s-pay:has(#co-cfw:not([hidden])) .opt-w.co-optk{margin-bottom:0;border-radius:12px 12px 0 0;box-shadow:inset 2px 0 0 var(--ink),inset -2px 0 0 var(--ink),inset 0 2px 0 var(--ink)}
.co-pg .co-cfw{margin:0 0 8px;padding:2px 16px 14px 50px;border-radius:0 0 12px 12px;box-shadow:inset 2px 0 0 var(--ink),inset -2px 0 0 var(--ink),inset 0 -2px 0 var(--ink);background:var(--white)}
.co-pg .co-cfw .co-cl{display:none}
.co-pg .co-cfw .co-cf{margin-bottom:0}
.co-pg .co-cfw .co-save{padding:12px 0 0;font-size:13px;line-height:1.45}
@media (max-width:380px){ .co-pg .co-cfw{padding-left:16px} }
/* [XP-FELUL-1019] gyorsfizetés a pénztár tetején */
#co-s-xp.kup-off{display:none}   /* [KUPON-XP-1020] kuponnal nincs felső gyorsfizetés (a kupont nem ismeri) */
.co-xptop h2{display:none}   /* a gomb maga mondja: „Gyors fizetés” (iPhone-on Apple-jellel) */
.co-xptop .ct-xp{min-height:50px}
.co-xptop .co-xpw .co-xpn{font-size:12px;line-height:1.45;color:var(--mute);margin-top:10px}
.co-xpor{margin:18px 0 0}

/* [TARCA-OPCIO-1019] Apple Pay / Google Pay mint fizetési mód: kiválasztva a gomb az opcióval egy dobozban (mint a bankkártya és a kártyamező) */
/* Apple Pay / Google Pay jel: ugyanaz a fehér, hajszálvonalas 24 px-es doboz, mint a Visa/Mastercard mellett (nem fekete tömb) */
.co-pg .pmk-ap,.co-pg .pmk-gp{display:inline-flex!important;align-items:center;justify-content:center;gap:1px;width:46px!important;height:24px;padding:0!important;border-radius:4px;background:#fff!important;box-shadow:inset 0 0 0 1px var(--line)!important;color:#000}
.co-pg .pmk-ap svg{width:11px!important;height:11px!important;margin:-2px 0 0!important;fill:#000}
.co-pg .pmk-ap b,.co-pg .pmk-gp b{font:500 11.5px/1 -apple-system,"SF Pro Text","Helvetica Neue",Arial,sans-serif;letter-spacing:-.01em;color:#000}
.co-pg .pmk-gp b.g{font-weight:700;color:#4285F4;margin-right:2px}
.co-pg #co-paysw .opt{margin-bottom:8px}
.co-pg #co-s-pay:has(#co-iw:not([hidden])) #co-paysw .opt.on{margin-bottom:0;border-radius:12px 12px 0 0;box-shadow:inset 2px 0 0 var(--ink),inset -2px 0 0 var(--ink),inset 0 2px 0 var(--ink)}
.co-pg #co-iw{margin:0 0 8px;padding:2px 16px 14px 50px;border-radius:0 0 12px 12px;box-shadow:inset 2px 0 0 var(--ink),inset -2px 0 0 var(--ink),inset 0 -2px 0 var(--ink);background:var(--white)}
.co-pg #co-iw .co-iwb{min-height:50px}
.co-pg #co-iw .co-iwh{margin-top:8px;font-size:12px;color:var(--mute)}
@media (max-width:380px){ .co-pg #co-iw{padding-left:16px} }
/* [ASZF-SOR-1019] a pipa helyén nincs behúzás: a jogi szöveg és az ÁSZF-sor egy vonalban */
.co-accn{font-size:13px;margin:4px 0 6px}
.co-legal{margin-left:0!important}

/* [KUPON-1019] kuponkód a pénztár záró részében */
.co-kupw{margin:0 0 14px}
.co-kup{display:flex;gap:8px;align-items:stretch}
.co-kup .fld{flex:1;margin:0}
.co-kup .btn{flex:none;min-width:110px}
.co-kup.on{align-items:center;justify-content:space-between;padding:10px 14px;border-radius:12px;background:#F2FBF2;box-shadow:inset 0 0 0 1px #BFE8BF;font-size:13.5px}
.co-kup.on svg{vertical-align:-2px;color:#0a8a07}
.co-kuperr{margin:6px 2px 0;font-size:12.5px;color:var(--err,#c0392b)}
/* ── account.css ── */
/* Griff v2 · account.css — /fiok/<fül>/ és /rendeles/<id>/<token>/ (előtag: .ac-). Csak base.css-tokenek; base-osztályt csak a saját konténeren belül szűkít. */

/* ---------- 1. Fiók-váz: mobilon fej + vízszintes fül-sáv, gépen bal oldali menü ---------- */
.ac{max-width:1240px;margin:0 auto;padding:18px var(--gut) 48px}
.ac-h1{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.015em;line-height:1.2}
.ac-who{display:grid;grid-template-columns:40px minmax(0,1fr) auto auto;gap:10px;align-items:center;margin-top:12px}
.ac-who .av,.ac-cont .av{width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--white);display:grid;place-items:center;font-weight:700;font-size:var(--fs-l)}
.ac-who-t{min-width:0}
.ac-who-t b{display:block;font-size:var(--fs-m);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-who-t small{display:block;font-size:var(--fs-xs);color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-out{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 4px;font-size:var(--fs-s);font-weight:600;color:var(--mute)}
.ac-out span{text-decoration:underline;text-underline-offset:3px}
.ac-out.busy{opacity:.45;pointer-events:none}
.ac-nav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:14px calc(var(--gut) * -1) 0;padding:0 var(--gut);overscroll-behavior-x:contain}
.ac-nav::-webkit-scrollbar{display:none}
.ac-tab{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:var(--r-pill);background:var(--tint);font-size:var(--fs-s);font-weight:600;color:var(--ink-2);white-space:nowrap;flex:none;transition:background var(--t-fast),color var(--t-fast)}
.ac-tab svg{display:none}
.ac-tab .n{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--white);color:var(--ink);font-size:11px;font-weight:700;display:inline-grid;place-items:center}
.ac-tab.on{background:var(--ink);color:var(--white)}
.ac-tab.on .n{background:var(--ink-2);color:var(--white)}
.ac-main{margin-top:20px;min-height:320px}
.ac-tt{display:none}
.ac-cnt{font-size:var(--fs-s);color:var(--mute);margin-bottom:6px}
.ac-note{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--mute);margin-top:14px;line-height:1.45}
.ac-note svg{margin-top:2px;flex:none}
.ac-main .empty{padding:36px 0 28px}
.ac-main .empty .btn{display:inline-flex}
.ac-main .empty .btn svg{margin-right:-2px}
.ac-main .grid{margin:0 calc(var(--gut) * -1)}

/* töltés: tételsor-csontváz */
.ac-sks{border-top:1px solid var(--line)}
.ac-sk{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.ac-sk>.skel{width:56px;height:84px}
.ac-sk>span{display:grid;gap:8px;align-content:start;padding-top:2px}
.ac-sk i{display:block;height:12px}
.ac-sk i:nth-child(1){width:38%}
.ac-sk i:nth-child(2){width:70%}
.ac-sk i:nth-child(3){width:52%}
.ac-card .ac-sks{border-top:0}
.ac-card .ac-sk:last-child{border-bottom:0}

/* ---------- 2. Belépés (oldalon és alsó lapon) ---------- */
.ac-lg{max-width:440px}
.ac-lg-h{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.01em;line-height:1.25}
.ac-lg-p{font-size:var(--fs-m);color:var(--ink-2);line-height:1.55;margin:6px 0 18px}
.ac-lg-p b{color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.ac-lg-f .fld{margin-bottom:8px}
.ac-lg-f .otp{max-width:none;margin:0 0 12px}
.ac-lg-f>.btn{margin-top:8px}
.ac-cont{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;min-height:64px;padding:10px 12px;border-radius:var(--r-ui);box-shadow:inset 0 0 0 1.5px var(--ink);text-align:left;transition:background var(--t-fast)}
.ac-cont b{display:block;font-size:var(--fs-m);font-weight:600}
.ac-cont small{display:block;font-size:12.5px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-cont span{min-width:0}
.ac-cont.busy{opacity:.5;pointer-events:none}
.ac-cont:active{background:var(--tint)}
.ac-fix{font-size:var(--fs-s);color:var(--ink-2);margin:0 0 8px}
.ac-fix .lnk{min-height:32px}
.ac-err{font-size:12.5px;font-weight:600;color:var(--err);margin:0 0 8px;line-height:1.4}
.ac-dev{font-size:12.5px;background:var(--accent-soft);color:var(--accent-text);border-radius:var(--r-sm);padding:8px 12px;margin:-6px 0 14px;font-weight:600}
.ac-lg-l{display:flex;justify-content:space-between;gap:12px;margin-top:6px}
.ac-lg-l .lnk{min-height:var(--tap);font-size:var(--fs-s)}
.ac-lg-s{font-size:12.5px;color:var(--mute);margin-top:4px;line-height:1.45}
.ac-why{margin-top:24px;max-width:440px;border-top:1px solid var(--line)}
.ac-why li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px;align-items:start;padding:11px 0;border-bottom:1px solid var(--line);font-size:var(--fs-s);color:var(--ink-2)}
.ac-why svg{margin-top:1px;color:var(--ink)}
.ly.ac-lsh .ac-lg{max-width:none}
.ly.ac-lsh .ac-lg-h{display:none}
.ly.ac-lsh .ac-lg-p{margin-top:0}

/* ---------- 3. Rendeléseim ---------- */
.ac-ol{border-top:1px solid var(--line)}
.ac-or{border-bottom:1px solid var(--line)}
.ac-or-a{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:start;padding:14px 0}
.ac-or-im{position:relative;width:56px;aspect-ratio:2/3;background:var(--tint)}
.ac-or-im img,.ac-noimg{width:100%;height:100%;object-fit:cover}
.ac-noimg{display:grid;place-items:center;color:var(--mute-2)}
.ac-or-im .q{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:10px;background:var(--mute);color:var(--white);font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 5px}
.ac-or-t{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.ac-or-t b{font-size:var(--fs-m);font-weight:600;margin-top:4px}
.ac-or-t small{font-size:var(--fs-xs);color:var(--mute)}
.ac-or-s{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink-2);line-height:1.4;margin-top:2px}
.ac-or-t small.ac-or-s{color:var(--ink-2)}
.ac-or-r{display:flex;align-items:center;gap:2px;white-space:nowrap;padding-top:1px}
.ac-or-r b{font-size:var(--fs-m);font-weight:700}
.ac-or-r svg{color:var(--mute-2);transition:transform var(--t-fast)}
.ac-or-f{display:flex;flex-wrap:wrap;gap:4px 18px;padding:0 0 10px 68px;margin-top:-6px}
.ac-or-f a{display:inline-flex;align-items:center;gap:6px;min-height:36px;font-size:12.5px;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.ac-or-f .ac-or-pay{color:var(--accent-text);text-decoration:none}

/* állapot-pirula: pötty + szöveg (ok = kézbesítve, wait = fizetésre vár, off = sztornó) */
.ac-st{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px 0 8px;border-radius:var(--r-pill);background:var(--tint);font-size:11.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.ac-st::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink)}
.ac-st.ok{color:var(--ok)}
.ac-st.ok::before{background:var(--ok)}
.ac-st.wait{background:var(--accent-soft);color:var(--accent-text)}
.ac-st.wait::before{background:var(--accent)}
.ac-st.off{color:var(--mute)}
.ac-st.off::before{background:var(--mute-2)}

/* ---------- 4. Számláim, Kártyáim (sorlista) ---------- */
.ac-rows{border-top:1px solid var(--line)}
.ac-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:68px;padding:12px 0;border-bottom:1px solid var(--line)}
.ac-row .ri{width:40px;height:40px;border-radius:50%;background:var(--tint);display:grid;place-items:center}
.ac-row>span{min-width:0}
.ac-row b{display:block;font-size:var(--fs-m);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-row small{display:flex;align-items:center;gap:4px;font-size:var(--fs-xs);color:var(--mute);margin-top:1px}
.ac-row .rr{text-align:right;display:flex;flex-direction:column;align-items:flex-end}
.ac-row .rr b{white-space:nowrap}
.ac-row-sh{border:0;padding-top:0;min-height:0}
.ly.ac-del .sh-b>p{font-size:var(--fs-m);line-height:1.5}

/* ---------- 5. Adataim ---------- */
.ac-card{border-radius:var(--r-ui);box-shadow:inset 0 0 0 1px var(--line);padding:16px;margin-bottom:12px;background:var(--white)}
.ac-kv{grid-template-columns:minmax(88px,auto) minmax(0,1fr);gap:10px 16px}
.ac-kv dd{font-weight:500;overflow-wrap:anywhere}
.ac-card .ac-note{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.ac-club{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 12px;align-items:center;background:var(--tint);border-radius:var(--r-ui);padding:14px 16px}
.ac-club p{font-size:var(--fs-s);color:var(--ink-2);line-height:1.5}
.ac-club .btn{grid-column:2;justify-self:start}

/* ---------- 6. Rendelés-követő ---------- */
.ac-od{max-width:1120px;margin:0 auto;padding:18px var(--gut) 48px}
.ac-od-h{padding:6px 0 18px}
.ac-od-ic{width:52px;height:52px;border-radius:50%;background:var(--ink);color:var(--white);display:grid;place-items:center;margin-bottom:14px}
.ac-od-ic svg{width:26px;height:26px;stroke-width:2.2}
.ac-od-ic.wait{background:var(--accent-soft);color:var(--accent-text)}
.ac-od-ic.off{background:var(--tint);color:var(--mute)}
.ac-od-ic.chk{background:var(--tint)}
.ac-od-ic .spin{width:24px;height:24px;border-width:2.5px;margin:0}
.ac-od-h h1{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.015em;line-height:1.2}
.ac-od-h .lead-p{margin-top:8px;max-width:600px}
.ac-od-meta{font-size:var(--fs-s);color:var(--mute);margin-top:10px}
.ac-od-meta b{color:var(--ink);font-weight:600}
.ac-pay{background:var(--tint);border-radius:var(--r-ui);padding:16px;margin-bottom:12px;display:grid;gap:8px}
.ac-pay-t{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-m);margin-bottom:4px}
.ac-pay-t b{font-size:var(--fs-xl);font-weight:700}
.ac-pay .btn.s{background:transparent}
.ac-pay .ac-note{margin-top:2px}
.ac-h2{font-size:var(--fs-l);font-weight:700;margin-bottom:8px}
.ac-sth{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ac-sth b{font-size:15px;font-weight:700;line-height:1.3}
.ac-sth small{font-size:var(--fs-xs);color:var(--mute);white-space:nowrap}

/* állapot-lánc: pöttyök vonallal, a kész lépés fekete */
.ac-tl{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));margin:18px -4px 2px;counter-reset:s}
.ac-tl li{position:relative;text-align:center;padding:0 4px;font-size:var(--fs-xs);color:var(--mute)}
.ac-tl li::before{content:"";position:absolute;top:10px;left:-50%;right:50%;height:2px;background:var(--line-2);margin:0 12px}
.ac-tl li:first-child::before{display:none}
.ac-tl i{position:relative;z-index:1;width:22px;height:22px;border-radius:50%;margin:0 auto 6px;display:grid;place-items:center;background:var(--white);box-shadow:inset 0 0 0 2px var(--line-2)}
.ac-tl i svg{width:13px;height:13px;stroke-width:3;color:var(--white)}
.ac-tl b{display:block;font-weight:600;line-height:1.25}
.ac-tl small{display:block;font-size:11px;color:var(--mute);margin-top:1px}
.ac-tl li.done{color:var(--ink)}
.ac-tl li.done::before{background:var(--ink)}
.ac-tl li.done i{background:var(--ink);box-shadow:none}
.ac-tl li.now i{background:var(--white);box-shadow:inset 0 0 0 6px var(--ink),0 0 0 4px var(--accent-soft)}

.ac-trk{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:12px;align-items:center;margin-top:14px;padding:12px 14px;border-radius:var(--r-ui);background:var(--tint);transition:background var(--t-fast)}
.ac-trk small{display:block;font-size:var(--fs-xs);color:var(--mute)}
.ac-trk b{display:block;font-size:var(--fs-m);font-weight:600;overflow-wrap:anywhere}
.ac-trk em{font-style:normal;font-size:var(--fs-s);font-weight:600;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.ac-trk+.ac-trk{margin-top:8px}
.ac-items{border-top:1px solid var(--line)}
.ac-items .si .im{aspect-ratio:2/3;background:var(--tint)}
.ac-items .si img{width:100%;height:100%;background:none}
.ac-items .si{border-bottom:1px solid var(--line);padding:10px 0}
.ac-items .si b a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color var(--t-fast)}
.ac-inv{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:var(--fs-s);color:var(--ink-2)}
a.ac-inv{font-weight:600;color:var(--ink)}
a.ac-inv span{text-decoration:underline;text-underline-offset:3px}
.ac-od .sum .club-l .tag{height:17px;font-size:9.5px;padding:0 5px;border-radius:4px;margin-right:2px;vertical-align:1px}
.ac-help{border-top:1px solid var(--line);margin:6px 0 4px}
.ac-help a{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:56px;padding:10px 0;border-bottom:1px solid var(--line)}
.ac-help b{display:block;font-size:var(--fs-m);font-weight:600}
.ac-help small{display:block;font-size:var(--fs-xs);color:var(--mute)}
.ac-help a>svg:last-child{color:var(--mute-2)}
.ac-od-b{margin-top:16px}
.ac-main .ac-empty h2,.ac-od .ac-empty h1{overflow-wrap:anywhere}

/* ---------- 7. Kis telefon ---------- */
@media (max-width:379px){
  .ac-or-a{grid-template-columns:48px minmax(0,1fr) auto;gap:10px}
  .ac-or-im{width:48px}
  .ac-or-f{padding-left:58px}
  .ac-tl b{font-size:11px}
}

/* ---------- 8. Tablet és gép ---------- */
@media (min-width:768px){
  .ac,.ac-od{padding-top:32px}
  .ac-main .grid{margin:0}
  .ac-lg-page{padding:28px;border-radius:var(--r-sheet);box-shadow:inset 0 0 0 1px var(--line)}
  .ac-card{padding:20px}
  .ac-od-h h1{font-size:var(--fs-3xl)}
  .ac-pay{grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;padding:18px 20px}
  .ac-pay-t,.ac-pay .ac-note{grid-column:1/-1}
  .ac-club{grid-template-columns:auto minmax(0,1fr) auto}
  .ac-club .btn{grid-column:auto}
}
@media (min-width:1024px){
  .ac{display:grid;grid-template-columns:260px minmax(0,1fr);gap:56px;padding-top:40px;align-items:start}
  .ac-side{position:sticky;top:calc(var(--hd) + 24px)}
  .ac-h1{font-size:var(--fs-3xl)}
  .ac-who{grid-template-columns:40px minmax(0,1fr) auto;margin-top:18px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .ac-who .ac-out{grid-column:1/-1;justify-self:start;padding:0;min-height:32px;margin-bottom:-6px}
  .ac-nav{flex-direction:column;gap:2px;margin:16px 0 0;padding:0;overflow:visible}
  .ac-tab{height:46px;border-radius:var(--r-ui);background:none;padding:0 12px;gap:12px;font-size:var(--fs-m);color:var(--ink-2)}
  .ac-tab svg{display:block}
  .ac-tab .n{margin-left:auto;background:var(--tint)}
  .ac-tab.on{background:var(--tint);color:var(--ink)}
  .ac-tab.on .n{background:var(--white);color:var(--ink)}
  .ac-main{margin-top:4px}
  .ac-tt{display:block;font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.015em;line-height:1.2;margin-bottom:18px}
  .ac-main .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ac-or-a{grid-template-columns:64px minmax(0,1fr) auto;gap:16px;padding:16px 8px;margin:0 -8px;border-radius:var(--r-ui)}
  .ac-or-im{width:64px}
  .ac-or-f{padding-left:80px}
  .ac-od-g{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:32px;align-items:start}
  .ac-od-r{position:sticky;top:calc(var(--hd) + 24px)}
  .ac-od-h{padding-bottom:24px}
  .ac-pay{max-width:640px}
}
@media (min-width:1440px){
  .ac-main .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (hover:hover) and (pointer:fine){
  .ac-tab:hover{background:var(--tint-2)}
  .ac-tab.on:hover{background:var(--ink)}
  .ac-cont:hover{background:var(--tint)}
  .ac-out:hover{color:var(--ink)}
  .ac-or-a:hover{background:var(--tint)}
  .ac-or-a:hover .ac-or-r svg{transform:translateX(2px);color:var(--ink)}
  .ac-or-f a:hover{text-decoration-color:currentColor}
  a.ac-row:hover b{text-decoration:underline;text-underline-offset:3px}
  .ac-trk:hover{background:var(--tint-2)}
  .ac-help a:hover b{text-decoration:underline;text-underline-offset:3px}
  .ac-items .si b a:hover{text-decoration-color:currentColor}
}
@media (hover:hover) and (pointer:fine) and (min-width:1024px){
  .ac-tab.on:hover{background:var(--tint)}
}
.ac-delacc{display:block;margin:28px auto 8px;min-height:var(--tap);padding:0 8px;font-size:var(--fs-s);font-weight:500;color:var(--mute);text-decoration:underline;text-underline-offset:3px}   /* [FIOK-TORLES-1014] */
/* [REGI-FIOK-1015] a régi webshop rendelései */
.ac-regi-h{margin-top:28px}
.ac-regi .ac-or-a{cursor:default}
.ac-regi a.ac-or-a{cursor:pointer}

/* [CHAT-HELY-1018] Segítség-kártya a Fiókom alatt (chat) + az appban az infó-linkek a lap alján */
.ac-help{display:flex;align-items:center;gap:12px;width:100%;margin:10px 0 14px;padding:13px 14px;border:0;border-radius:16px;background:#FFF4EC;color:var(--ink);text-align:left;font:inherit;cursor:pointer}
.ac-help svg{flex:none;width:26px;height:26px;fill:none;stroke:#F2742A;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ac-help b{display:block;font-size:13.5px;font-weight:700}
.ac-help small{display:block;margin-top:2px;font-size:12px;color:var(--ink-2)}
.ac-help-go{margin-left:auto;flex:none;padding:8px 14px;border-radius:999px;background:var(--ink);color:#fff;font-size:12px;font-weight:600}
.ac-info{display:none}
html.is-app .ac-info{display:block;grid-column:1/-1;margin:28px 0 8px}
html.is-app .ac-info h2{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
html.is-app .ac-info a{display:flex;justify-content:space-between;align-items:center;min-height:46px;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink)}
html.is-app .ac-info a::after{content:"›";color:var(--mute-2,#aaa);font-size:18px}
/* ── desktop.css ── */
/* Griff v2 · desktop.css — gépes elrendezés (≥1024 px). A build UTOLSÓKÉNT fűzi be, ezért ez nyer.
   Olivér 10-11: széles kijelzőn szétesett (8 apró szelfi a hősben, óriás kártyák, a tartalom szélről szélre, a fejléc középen).
   Szabály: a tartalom egy középre igazított, legfeljebb 1440 px-es sávban él, 32 px-es oldalréssel; mobil (<1024) érintetlen. */
@media (min-width:1024px){
  :root{--maxw:1440px}
  #main{max-width:var(--maxw);margin-left:auto;margin-right:auto;--gut:32px}
  .hd-in,.ft-in{max-width:var(--maxw);padding-left:20px;padding-right:20px}

  /* hős: 4 nagy fotó (nem 8 apró), a sávon belül; fotó szögletes (szerződés: kép 0 px) */
  .hm-hero{margin:20px var(--gut) 0}
  .hm-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hm-strip img,.hm-strip img:nth-child(n+4){display:block;aspect-ratio:auto;height:clamp(380px,34vw,520px)}
  .hm-strip img:nth-child(n+5){display:none}
  .hm-cap{padding:96px 36px 30px}
  .hm-cap h1{font-size:44px;line-height:1.05}

  /* termék-sávok a főoldalon: gépen rács (6 egyforma kártya, a többi a „Mind” mögött) — oldalra húzás gépen nem kézenfekvő */
  .hm .rail{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;gap:16px;row-gap:28px;margin:0 var(--gut);padding:0}
  .hm .rail>*:nth-child(n+6){display:none}
  .hm .rail .card-b{padding-left:2px;padding-right:2px}
  .hm .sec-h{padding:0 var(--gut);margin-bottom:16px}
  .hm .sec-h h2{font-size:24px}

  /* lista: 4 oszlop a sávon belül, levegővel */
  .pl-grid,.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;row-gap:36px;padding:0 var(--gut)}
  .pl-grid .card-b,.grid .card-b{padding-left:2px;padding-right:2px}
  .pl-grid.big{grid-template-columns:repeat(3,minmax(0,1fr))}

}
@media (min-width:1440px){
  .hm .rail{grid-template-columns:repeat(6,minmax(0,1fr))}
  .hm .rail>*:nth-child(n+6){display:block}
  .hm .rail>*:nth-child(n+7){display:none}
}

/* ── fejléc gépen (desknav.js): Menü · logó · kategóriák · [kereső] · fiók/kedvenc/kosár — EGY sor, nincs második csík ── */
.hd-nav{display:none}
@media (min-width:1024px){
  .hd:not(.co) .hd-in{display:flex;align-items:center;gap:6px}
  .hd:not(.co) .hd-l{display:contents}
  .hd:not(.co) .hd-l .ib.wide{order:0}
  .hd:not(.co) .hd-l .ib.wide .hd-txt{display:none}
  .hd:not(.co) .logo-w{order:1;padding:0 10px 0 4px}
  .hd-nav{order:2;display:flex;align-items:center;gap:2px;margin-left:8px;min-width:0}
  .hd-nl{display:inline-flex;align-items:center;height:40px;padding:0 12px;border-radius:999px;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;transition:background var(--t-fast)}
  .hd-nl:hover{background:var(--tint)}
  .hd-nl.on{background:var(--tint);font-weight:700}
  .hd:not(.co) .hd-l .ib.srch{order:3;margin-left:auto;display:inline-flex}
  .hd:not(.co) .hd-search{order:3;margin-left:auto;display:none;width:240px}
  .hd:not(.co) .hd-r{order:4}
}
@media (min-width:1280px){
  .hd:not(.co) .hd-l .ib.srch{display:none}
  .hd:not(.co) .hd-search{display:flex}
  .hd-nav{gap:4px;margin-left:16px}
}

/* ── főoldal gépen (10-11, Olivér: „a desktop view még mindig nem jó”) ── */
@media (min-width:1024px){
  .hm-usp{display:none}                                  /* ugyanaz a 4 tény a fejléc alatti sávban már látszik — ne legyen kétszer */
  .hm-club,.hm-shop{max-width:none;margin-left:var(--gut);margin-right:var(--gut)}
  .hm-tiles+.sec,.hm-tiles~.sec{margin-top:44px}
}

/* ── [DH-1013] gépes nyitókép: termékvezérelt (home.js deskHeroHTML); a mobil hős, a dupla Női/Férfi váltó és az előnysáv aláhúzása gépen ki ── */
.hm-dh{display:none}
@media (min-width:1024px){
  .hm-hero,.hm-gsw{display:none}
  .hm-dh{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.15fr);gap:20px;margin:24px var(--gut) 0;align-items:stretch}
  .hm-dh-t{display:flex;flex-direction:column;justify-content:center;background:var(--tint);padding:40px 36px}
  .hm-dh-k{font-size:13px;font-weight:600;color:var(--mute)}
  .hm-dh-t h2{margin-top:8px;font-size:clamp(30px,2.6vw,40px);font-weight:700;line-height:1.04;letter-spacing:-.025em}
  .hm-dh-t>p:not(.hm-dh-k){margin-top:12px;font-size:15px;line-height:1.5;color:var(--ink-2);max-width:34ch}
  .hm-dh-t .row2{margin-top:24px}
  .hm-dh-c{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
  .hm-dh-c .card-b{padding-left:2px;padding-right:2px}
  .hm-dh+.hm-tiles,.hm-dh~.hm-tiles{margin-top:36px}
  .usp-in:hover .usp-i>span{text-decoration:none}
}

/* ── [EGYMENU-1013] gépen EGY navigáció: a fejléc kategóriái. A hamburger (bal fiók) gépen KI — Olivér: „redundáns ennyi menü”.
   Az alkategóriák a csoport-lapokon (pl. /noi-ruhazat/) körökként érhetők el; mobilon a hamburger marad. ── */
@media (min-width:1024px){
  .hd:not(.co) [data-a="menu"]{display:none}
  .hd:not(.co) .logo-w{padding-left:0}
}
@media (min-width:1024px){ .hd:not(.co) .hd-in{padding-left:32px;padding-right:22px} }   /* a logó a tartalom bal élére (32 px), az ikonok belső rése miatt jobbra 22 */
/* ── tiszta.css ── */
/* Griff v2 · tiszta.css — LETISZTÍTÁS (10-13, Olivér: „nem elég szép és letisztult az oldal”). A build legutolsóként fűzi be.
   Elv: kevesebb elem, kevesebb kitöltött felület, halkabb másodlagos infó; a fotó és az ár beszél. */

/* 1. előnysáv: nem szürke tömb, hanem halk sor hajszálvonallal */
.usp{background:var(--white);border-bottom:1px solid var(--line);color:var(--mute)}
.usp-in{height:32px;font-size:12px}
.usp-i{height:32px}
.usp-i b{font-weight:600;color:var(--ink-2)}
.usp-i svg{width:15px;height:15px;color:var(--mute)}
@media (min-width:1024px){ .usp-in{height:34px;font-size:12.5px} }

/* 2. kategóriák a listán: szöveges pirulák, nem fotós körök (Olivér 09-05: a kör-sor a listán „fal”) */
.pl-cats{gap:6px;padding-top:12px;padding-bottom:2px}
.pl-c{width:auto;flex-direction:row;gap:4px;height:36px;padding:0 14px;border-radius:999px;background:var(--tint);align-items:center}
.pl-c .ph{display:none}
.pl-c>span:last-child{font-size:13px;font-weight:600;color:var(--ink);-webkit-line-clamp:1;white-space:nowrap}
.pl-c.on{background:var(--ink)}
.pl-c.on>span:last-child{color:var(--white)}
.pl-c.bk{background:var(--white);box-shadow:inset 0 0 0 1px var(--line-2);padding-left:10px}
.pl-c.bk::before{content:"";width:7px;height:7px;border-left:1.8px solid var(--ink);border-bottom:1.8px solid var(--ink);transform:rotate(45deg);margin:0 4px 0 2px}
@media (min-width:768px){ .pl-cats{flex-wrap:wrap;gap:8px} .pl-c{width:auto} }
@media (hover:hover) and (pointer:fine){ .pl-c:not(.on):hover{background:var(--tint-2)} .pl-c.bk:hover{box-shadow:inset 0 0 0 1px var(--ink)} }
.pl-dn{display:none}                                                   /* rács-sűrűség kapcsoló: ki, felesleges vezérlő */

/* 3. kártya: halkabb másodlagos sorok, könnyebb OI CLUB címke */
.card-b{gap:2px;padding-top:10px}
.c-brand{font-size:11.5px;color:var(--mute);font-weight:500}
.c-title{font-size:13.5px;font-weight:500;color:var(--ink)}
.c-price{font-size:14px;font-weight:700;margin-top:2px}
.c-club{font-size:12px;color:var(--ink-2);font-weight:500}
.c-club .tag.club{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);height:18px;padding:0 5px;font-size:9.5px}
.c-sizes{font-size:11.5px;color:var(--mute)}
.c-ncol{color:var(--mute)}
.card .sw:empty{display:none}
.badges .tag{font-size:10.5px;height:20px;padding:0 7px}

/* 4. lista eszközsor gépen: kompaktabb, vonal nélkül */
@media (min-width:1024px){
  .pl-bar{grid-template-columns:repeat(var(--n,3),150px);box-shadow:none;padding-top:8px;padding-bottom:8px}
  .pl-bar button{height:40px;font-size:13px}
  .pl-res{margin-top:12px}
}

/* 5. főoldal: a kategória-csempék „Összes” üres lapja ki (a fejléc/menü úgyis viszi) */
.hm-tile.all{display:none}
@media (min-width:1024px){ .hm-tiles{display:flex;gap:12px} .hm-tiles .hm-tile{flex:1 1 0;min-width:0} }   /* az „Összes” nélkül is töltse ki a sort */
/* ── brand.css ── */
/* Griff v2 · brand.css — GRIFF NEONZÖLD + KÖZÉPRE ZÁRT LOGÓ (10-13, Olivér: „szeretem ha a logó középen van, ez nekem fontos”,
   „a szürke színeket utálom… a webshopunk színe mindig is neonzöld volt”, „a kereső… lehetne teljes lekerekített rubrika”).
   A zöld: #0ADD08 „Vibrant Green” (Olivér választása 10-13; a régi oldal #00FF9D-je túl „csúnya” lett nagy felületen). Rajta FEKETE szöveg (a fehér olvashatatlan lenne).
   A build legutolsóként fűzi be. */
:root{
  --accent:#0ADD08; --accent-2:#09C507; --accent-text:#077A05; --accent-soft:#EAFBEA;   /* Olivér 10-13: „Vibrant Green” #0ADD08 (az első neon #00FF9D „nagyon csúnya zöld”) */
  --tint:#F4FCF4; --tint-2:#E6F8E6;                 /* szürke helyett alig zöldes fehér, a zöld árnyalatához igazítva */
}
/* fő gomb = neonzöld, fekete felirattal */
.btn.p{background:var(--accent);color:var(--ink)}
@media (hover:hover) and (pointer:fine){ .btn.p:hover{background:var(--accent-2)} }
.cnt{background:var(--accent);color:var(--ink)}
.tag.last{color:var(--sale)}                       /* az „Utolsó darab” sürgető maradjon (nem zöld) */

/* gépes nyitókép: NINCS színes tömb (Olivér 10-13: „az a kurvanagy zöld kártya borzalmas”, „pofátlan nagy”) —
   fehér alapon tiszta szöveg, keskenyebb oszlop; a neonzöld csak a fő gombon */
@media (min-width:1024px){
  .hm-dh{grid-template-columns:minmax(0,.78fr) minmax(0,2.4fr);gap:32px}
  .hm-dh-t{background:transparent;padding:0 8px 0 0;justify-content:center}
  .hm-dh-t .row2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ── fejléc gépen: logó KÖZÉPEN, balra a kategóriák, jobbra a lekerekített kereső + ikonok egy csoportban ── */
@media (min-width:1024px){
  .hd:not(.co) .hd-in{position:relative}
  .hd:not(.co) .logo-w{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:0;order:0}
  .hd-nav{margin-left:0}
  .hd:not(.co) .hd-l .ib.srch{display:none}
  .hd:not(.co) .hd-search{display:flex;order:3;margin-left:auto;margin-right:6px;width:190px;height:40px;border-radius:999px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--mute);padding:0 16px}
  .hd:not(.co) .hd-search:hover{background:var(--white);box-shadow:inset 0 0 0 1.5px var(--ink)}
}
/* 1024–1199: a 6 kategória nem fér el a középső logó mellett → mobil-szerű: menü-gomb balra, logó középen */
@media (min-width:1024px) and (max-width:1199px){
  .hd-nav{display:none}
  .hd:not(.co) [data-a="menu"]{display:inline-flex}
}
@media (min-width:1280px){ .hd:not(.co) .hd-search{width:230px} }
/* ── gs.css ── */
/* Griff v2 · gs.css — RÁNCFELVARRÁS A GYMSHARK RENDSZERÉRE (10-13, Olivér: „miért ronda az egész”, mintának a Gymsharkot választotta).
   A build LEGUTOLSÓKÉNT fűzi be: ez az egyetlen érvényes vizuális nyelv, a korábbi rétegek (desktop/tiszta/brand) ütköző részeit itt rendezzük.
   Kötött (Olivér): logó KÖZÉPEN · zöld #0ADD08 csak a fő gombon, FEKETE felirattal · SZÜRKE és MINT FELÜLET NINCS · csak Montserrat 400–700.
   Rendszer: fehér alap, fekete tinta, 1 halk szövegszürke (csak szövegre), 1 px-es vonal; NAGYBETŰS, vastag címek és gombfeliratok;
   pontosan 3 gomb (fő zöld · másodlagos fekete · szöveges link); egy sugár a gombokra (pirula), egy a mezőkre (10 px). */
:root{
  --ink:#0E1013; --ink-2:#2A2D31; --mute:#6B7078; --mute-2:#9A9EA5;
  --line:#E6E6E6; --line-2:#D6D6D6;
  --tint:#FFFFFF; --tint-2:#F6F6F6;                 /* nincs szürke/mint felület: a régi „tint” mostantól fehér */
  --accent:#0ADD08; --accent-2:#09C507; --accent-text:#077A05;
  --r-ui:999px; --r-sm:999px; --r-fld:10px;
}

/* ── betű: NAGYBETŰS, vastag címek (Gymshark), a szöveg nyugodt ── */
.sec-h h2,.pl-h h1,.page h1,.pd-t h1,.ct-h h1,.co h2,.ac h1,.hm-dh-t h2{text-transform:uppercase;font-weight:700;letter-spacing:.01em}
.sec-h h2{font-size:18px;line-height:1.2}
.sec-h a{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;color:var(--ink)}
@media (min-width:1024px){ .sec-h h2{font-size:22px} }

/* ── gombok: 3 fajta ── */
.btn{height:48px;border-radius:999px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;box-shadow:none}
.btn.p{background:var(--accent);color:var(--ink)}
.btn.s,.btn.w{background:var(--ink);color:#fff;box-shadow:none}
.btn.t{background:none;color:var(--ink);text-decoration:none}
@media (hover:hover) and (pointer:fine){
  .btn.p:hover{background:var(--accent-2)} .btn.s:hover,.btn.w:hover{background:#2A2D31}
  .btn.t:hover{text-decoration:underline;text-underline-offset:4px}
}
.btn.sm{height:40px;font-size:12px}
a.lnk,.lnk{text-decoration:none;font-weight:600}
@media (hover:hover){ a.lnk:hover,.lnk:hover{text-decoration:underline;text-underline-offset:3px} }

/* ── mezők: fehér, 1 px vonal, 10 px sugár ── */
.fld input,.fld select,.fld textarea,.ft-nl input,.hd-search{border-radius:var(--r-fld)}
.hd:not(.co) .hd-search{border-radius:999px}

/* ── pirulák / chipek / méretek: fehér + vonal, kiválasztva fekete (nincs tint-kitöltés) ── */
.chip,.pl-c,.pl-bar button,.z,.sizebtn{background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink)}
.chip.on,.pl-c.on,.pl-bar button.on,.z.on{background:var(--ink);color:#fff;box-shadow:none}
.pl-c.on>span:last-child{color:#fff}
.z{border-radius:999px;font-weight:700}
.z.out{background:#fff;color:var(--mute-2);box-shadow:inset 0 0 0 1px var(--line)}
@media (hover:hover) and (pointer:fine){ .chip:not(.on):hover,.pl-c:not(.on):hover,.pl-bar button:not(.on):hover,.z:not(.on):not(.out):hover{background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)} }

/* ── fejléc: fehér, logó középen, NAGYBETŰS kategóriák, hover = aláhúzás (nincs kitöltés) ── */
.hd-nl{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:0 10px;border-radius:0;background:none !important;position:relative}
.hd-nl::after{content:"";position:absolute;left:10px;right:10px;bottom:6px;height:2px;background:var(--ink);transform:scaleX(0);transition:transform .15s}
.hd-nl:hover::after,.hd-nl.on::after{transform:scaleX(1)}
.hd-nl.on{font-weight:700}
.hd .ib:hover{background:none}
.cnt{background:var(--accent);color:var(--ink)}

/* ── előnysáv: vékony fekete promósáv fehér nagybetűvel (Gymshark) ── */
.usp{background:var(--ink);color:#fff;border-bottom:0}
.usp-in{height:32px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.usp-i{height:32px}
.usp-i b{color:#fff;font-weight:700}
.usp-i svg{color:#fff;width:14px;height:14px}
@media (min-width:1024px){ .usp-in{height:34px;font-size:11px} .usp-i{height:34px} }
.usp-in:hover .usp-i>span{text-decoration:none}

/* ── termékkártya: kép · név · szín/méret · ár · OI Club egy halk sorban ── */
.card-b{padding:10px 2px 0;gap:3px}
.c-brand{font-size:11px;font-weight:600;color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
.c-title{font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}
.c-price{font-size:14px;font-weight:700;color:var(--ink);margin-top:1px}
.c-club{font-size:12px;font-weight:500;color:var(--mute)}
.c-club .tag.club{background:none;box-shadow:none;color:var(--mute);padding:0;height:auto;font-size:12px;font-weight:600;letter-spacing:0;text-transform:none}
.c-club .tag.club::after{content:":"}
.c-sizes{font-size:12px;color:var(--mute)}
.c-sizes b{color:var(--ink);text-decoration:none;font-weight:700}
.badges .tag{background:#fff;color:var(--ink);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;height:22px;padding:0 8px;border-radius:999px;box-shadow:none}
.badges .tag.last{color:var(--sale)}
.card .fav,.card .qadd{background:#fff;box-shadow:0 1px 4px rgba(14,16,19,.12)}
/* gyorskosár-panel a képen (gépen hoverre): tömör fehér, nagybetűs felirat, kerek méretek */
.qsz{background:#fff !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
.qsz p{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink)}
.qsz button{background:#fff !important;box-shadow:inset 0 0 0 1px var(--line-2) !important;border-radius:999px !important;font-weight:700;color:var(--ink)}
.qsz button:hover{background:var(--ink) !important;color:#fff !important}

/* ── lista ── */
.pl-h h1{font-size:22px}
@media (min-width:1024px){ .pl-h h1{font-size:30px} }
.pl-n{color:var(--mute)}
.pl-c{height:36px}
.pl-c>span:last-child{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.pl-bar button{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}

/* ── főoldal gépen: Gymshark-hős = nagy, széltől szélig fotósáv, rajta NAGY nagybetűs cím és fehér pirula; a „szöveg + 3 kártya” hős KI ── */
@media (min-width:1024px){
  .hm-dh{display:none !important}
  .hm-hero{display:block !important;margin:0}
  .hm-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
  .hm-strip img,.hm-strip img:nth-child(n+4){display:block;height:clamp(460px,44vw,680px);aspect-ratio:auto}
  .hm-strip img:nth-child(n+4){display:none}
  .hm-cap{padding:140px 48px 44px;background:linear-gradient(to top,rgba(14,16,19,.55),rgba(14,16,19,0))}
  .hm-cap h1{font-size:64px;line-height:.98}
}
.hm-cap h1{text-transform:uppercase;font-weight:700;letter-spacing:.01em}
.hm-cap p{font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:12px}
.hm-go{background:#fff;color:var(--ink);border-radius:999px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12px}
@media (min-width:1024px){ .hm-go{height:48px;padding:0 26px} }
.hm-tile span{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.hm-tile .ph{border-radius:0}
.hm-club{background:#fff;box-shadow:inset 0 0 0 1px var(--line);border-radius:0}
.hm-shop{background:#fff;box-shadow:inset 0 0 0 1px var(--line);border-radius:0}
.hm-shop h2{text-transform:uppercase;font-size:15px;letter-spacing:.02em}

/* ── terméklap ── */
.pd-t h1,.pd h1{text-transform:uppercase;font-weight:700;letter-spacing:.01em}

/* ── lábléc: fehér, felső vonal, nagybetűs oszlopcímek, linkek aláhúzás nélkül ── */
.ft{background:#fff;border-top:1px solid var(--line)}
.ft h3{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.ft a{text-decoration:none}
@media (hover:hover){ .ft a:hover{text-decoration:underline;text-underline-offset:3px} }
.ft .pm span{box-shadow:none;background:none;padding:0 10px 0 0;height:auto;font-size:11px;letter-spacing:.06em;color:var(--mute)}
.ft-nl input{box-shadow:inset 0 0 0 1px var(--line-2)}

/* ── sheetek, pénztár: fehér, vonallal ── */
.opt{background:#fff;box-shadow:inset 0 0 0 1px var(--line-2)}
.opt.on,.opt:has(input:checked){box-shadow:inset 0 0 0 2px var(--ink)}
.co-xpw .co-xpn{color:var(--mute)}

/* ── finomítás (1. kör) ── */
.card .fav,.card .qadd{border-radius:50%}
.hd-txt{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.gsw{background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);border-radius:999px;padding:4px}
.gsw button{border-radius:999px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);box-shadow:none;background:none}
.gsw button.on{background:var(--ink);color:#fff;box-shadow:none}
@media (max-width:767px){ .hm-tile span{font-size:10.5px;letter-spacing:.02em} }
.hm-u b{font-weight:700}
/* a fő gomb akkor is zöld, ha széles (.btn.p.w) — a .btn.w fekete szabálya ne írja felül */
.btn.p,.btn.p.w{background:var(--accent);color:var(--ink)}
@media (hover:hover) and (pointer:fine){ .btn.p:hover,.btn.p.w:hover{background:var(--accent-2)} }

/* ── 2. kör (10-13, Olivér: „fura hogy nem megy széltől szélig”, terméklap „megint nem szép”) ── */
@media (min-width:1024px){ .hm-hero{width:100vw;margin-left:calc(50% - 50vw) !important;margin-right:0 !important} }
/* terméklap: aláhúzás nélküli morzsa és márka, kisebb nagybetűs cím, halk OI Club sor (fekete címke nélkül) */
.pd-crumbs a,.crumbs a,.pd-br a{text-decoration:none}
.pd-br,.pd-br a{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--mute)}
.pd-h1{font-size:22px;line-height:1.2;text-transform:uppercase;font-weight:700;letter-spacing:.01em}
@media (min-width:1024px){ .pd-h1{font-size:26px} }
.pd-club .tag.club{display:none}
.pd-club{font-size:13.5px;color:var(--ink-2);background:none;box-shadow:none}
.pd-q{color:var(--mute);text-decoration:none;font-weight:600}
/* méretek: szögletesebb dobozok (Gymshark-mód), az „utolsó” apró piros nagybetű */
.z{border-radius:10px}
.z small{color:var(--sale);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.z.on small{color:#fff}
/* szett-blokk: csak EGY kitöltött nagy gomb van a lapon (a zöld Kosárba) — a többi körvonalas */
.btn.s.xs.sz-add,.btn.s.w.sz-both{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
@media (hover:hover) and (pointer:fine){ .btn.s.xs.sz-add:hover,.btn.s.w.sz-both:hover{background:var(--ink);color:#fff} }
.co-xpw,.co-xpbtn,.co-xpt{max-width:100%;overflow:hidden}   /* a gyorsfizetés-gomb ne lógjon ki a Kosárba gomb szélességéből */

/* ── 3. kör (10-13, Olivér: „ilyen szép clean legyen a menü… csak férfi és női gomb”, „nem kell másolni senkit”):
   LEBEGŐ ÜVEG-FEJLÉC — az OI75 app saját fejléc-nyelve (úszó, lekerekített, áttetsző fehér + elmosás), Griff-logó középen.
   A fekete sáv megszűnik; az előnyök a nyitókép alá, egy vékony sorba kerülnek (a főoldalon). ── */
#usp{display:none !important}
body{padding-top:80px}
.hd,.hd.co{position:fixed;top:12px;left:50%;right:auto;transform:translateX(-50%);width:min(1120px,calc(100% - 24px));height:56px;border-radius:999px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);box-shadow:0 8px 28px -12px rgba(14,16,19,.28),inset 0 0 0 1px rgba(255,255,255,.65);border-bottom:0 !important}
.hd .hd-in{height:100%;max-width:none;padding:0 8px 0 10px !important}
.logo{mix-blend-mode:multiply}                                   /* a fehér hátterű logó-kép doboza eltűnik az üvegen */
/* főoldal: a nyitókép a lap tetejéről indul, a fejléc rajta lebeg; az előnysor rögtön alatta */
.hm{display:flex;flex-direction:column}
.hm>*{order:2}
.hm-hero{order:0;margin-top:-80px}
.hm-usp{order:1}
.hm-usp{gap:22px;padding:14px var(--gut);border-bottom:1px solid var(--line)}
.hm-u{background:none;min-height:0;padding:0;border-radius:0;gap:8px}
.hm-u b{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink)}
.hm-u small{font-size:11.5px;color:var(--mute)}
.hm-u svg{width:16px;height:16px}
@media (min-width:1024px){
  .hm-usp{display:flex !important;justify-content:center;flex-wrap:wrap;gap:12px 40px;padding:18px var(--gut)}
  .hm-u small{display:none}
  /* fejléc gépen: balra NŐI · FÉRFI, középen a logó, jobbra kereső-ikon + fiók + kedvencek + kosár */
  .hd-nav{display:flex !important;margin-left:6px}
  .hd:not(.co) [data-a="menu"]{display:none !important}
  .hd:not(.co) .hd-search{display:none !important}
  .hd:not(.co) .hd-l .ib.srch{display:inline-flex !important;order:3;margin-left:auto}
  .hd:not(.co) .hd-in{padding:0 10px 0 14px !important}
  .hm-strip img,.hm-strip img:nth-child(n+4){height:clamp(520px,48vw,760px)}
}

/* ── a lebegő fejléc alá semmi ne ragadjon össze-vissza (Olivér 10-13: „ez gáz nézd” — a szűrősor a pirula alá tapadt) ──
   --hd = a pirula alja + rés: a ragadó oldalpanelek (terméklap, pénztár, fiók) ez alatt állnak meg; a lista eszközsora gépen nem ragad. */
:root{--hd:84px}
@media (min-width:1024px){ .pl-bar{position:static !important;box-shadow:none} }
/* jobb oldali ikonsor: kereső · fiók · kedvencek · kosár EGYFORMA közzel (10-13: „kereső design nem egységes”) */
@media (min-width:1024px){
  .hd:not(.co) .hd-in{gap:0}
  .hd:not(.co) .hd-l .ib.srch,.hd:not(.co) .hd-r .ib{width:42px;height:42px;margin:0;padding:0}
  .hd:not(.co) .hd-r{gap:0;padding:0;margin:0}
  .hd:not(.co) .hd-r .ib.wide{width:auto;padding:0 10px 0 9px;gap:7px}
}
/* előnysor a hős alatt: gépen ugyanúgy széltől szélig, mint a hős (a vonal ne érjen véget a sáv szélén); halkabb betű */
@media (min-width:1024px){
  .hm-usp{width:100vw;margin-left:calc(50% - 50vw);margin-right:0;padding:16px 32px;border-bottom:1px solid var(--line)}
  .hm-u b{font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--ink-2)}
  .hm-u svg{width:15px;height:15px;color:var(--mute)}
}
@media (min-width:1024px){
  .hm-usp{max-width:none !important;width:100vw !important;justify-content:center}            /* tényleg széltől szélig (a régi max-width:1440 fogta) */
  .hd:not(.co) .hd-l .ib.srch{margin-left:auto !important}                                     /* az ikonsor jobbra (az előző „margin:0” ezt elvitte) */
}

/* ── „Ugrás a lap tetejére” (fel.js) ── */
.fel{position:fixed;z-index:var(--z-bar);left:24px;bottom:calc(24px + var(--safe-b));display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 18px 0 20px;border-radius:999px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;box-shadow:0 8px 24px -10px rgba(14,16,19,.45);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .2s,transform .2s var(--ease)}
.fel.on{opacity:1;transform:none;pointer-events:auto}
.fel svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){ .fel:hover{background:#2A2D31} }
@media (max-width:1023px){
  .fel{left:auto;right:16px;bottom:calc(84px + var(--safe-b));width:46px;padding:0;justify-content:center}
  .fel .fel-t{display:none}
}

/* ── oszlopszám-választó a listán (10-13, Olivér: „2 vagy 3 opció, hány oszlopban”) — a kód megvolt (.pl-dn), most szép pirula ──
   mobil: 2 oszlop ↔ 1 nagy kép · gép: 4 oszlop ↔ 3 nagyobb */
.pl-dn{display:inline-flex !important;align-items:center;gap:0;padding:3px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);background:#fff;margin:0}
.pl-dn .ib{width:38px;height:32px;border-radius:999px;color:var(--mute);display:grid;place-items:center}
.pl-dn .ib svg{width:18px;height:18px}
.pl-dn .ib[aria-pressed="true"]{background:var(--ink);color:#fff}

/* ── nyitott kereső gépen a lebegő fejlécben (látható mező > nagyító-ikon) ── */
@media (min-width:1024px){
  .hd:not(.co) .hd-l .ib.srch{display:none !important}
  .hd:not(.co) .hd-search{display:flex !important;order:3;margin-left:auto !important;margin-right:10px;width:220px;height:40px;border-radius:999px;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px var(--line-2);padding:0 16px;color:var(--mute);font-size:13px}
  .hd:not(.co) .hd-search:hover{box-shadow:inset 0 0 0 1px var(--ink)}
}
@media (min-width:1280px){ .hd:not(.co) .hd-search{width:260px} }
/* mobil: a lebegő Méret · Szűrés · Rendezés sáv EGY fekete pirula fehér felirattal (a fehér-keretes gomb-szabály csak gépen él) */
@media (max-width:1023px){
  .pl-bar button,.pl-bar button.on{background:transparent !important;box-shadow:none !important;color:#fff !important;border-radius:0}
  .pl-bar button.on{text-decoration:underline;text-underline-offset:4px}
}

/* ── LISTA-FEJ LETISZTÍTVA (10-13, Olivér: „ez most teljes fejfájás lett ez a design”): nincs pirula-fal ──
   kategóriák = keret nélküli szöveglinkek (a kiválasztott aláhúzva) · Méret/Szűrés/Rendezés = keret nélküli ikonos gombok
   gépen a cím sorában jobbra · oszlopváltó = 2 halk ikon */
.pl-cats{gap:4px 22px}
.pl-c,.pl-c.on,.pl-c.bk{height:32px;padding:0;background:none !important;box-shadow:none !important;border-radius:0}
.pl-c>span:last-child{font-size:12px;font-weight:600;letter-spacing:.05em;color:var(--mute)}
.pl-c.on>span:last-child{color:var(--ink) !important;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.pl-c.bk>span:last-child{color:var(--ink)}
@media (hover:hover) and (pointer:fine){ .pl-c:not(.on):hover>span:last-child{color:var(--ink)} }
.pl-dn{box-shadow:none !important;padding:0;background:none}
.pl-dn .ib{width:34px;height:34px;color:var(--mute-2)}
.pl-dn .ib[aria-pressed="true"]{background:none;color:var(--ink)}
@media (min-width:1024px){
  .pl{position:relative}
  .pl-bar{position:absolute !important;top:30px;right:calc(var(--gut) + 84px);display:flex !important;gap:22px;padding:0 !important;margin:0 !important;background:none !important}
  .pl-bar button,.pl-bar button.on{height:36px !important;width:auto !important;padding:0 !important;background:none !important;box-shadow:none !important;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--ink)}
  .pl-bar button.on{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
  .pl-bar+.pl-chips{padding-top:8px}
  .pl-res{margin-top:20px}
}
@media (min-width:1024px){ .pl-h{align-items:flex-start !important} .pl-dn{margin-top:22px} }   /* az oszlopváltó egy vonalban a Méret · Szűrés · Rendezés sorral */
/* ── lista.css ── */
/* Griff v2 · lista.css — VÉGLEGES MOBIL LISTAOLDAL + FEJLÉC „B” [LISTA-1014] (Olivér 10-14, makett: koncepciok/veg2.html).
   A build LEGUTOLSÓKÉNT fűzi be, ezért itt minden korábbi réteg (plp, tiszta, gs) listára vonatkozó szabályát felülírjuk.
   Elemek: fejléc (logó bal · kereső · kosár · menü; lefelé elmegy, felhúzásra vissza) → cím + darabszám → story-körök (76 px) →
   sáv: balra a két NEM aktív nézet kerek gombja, jobbra „Szűrő és rendezés” pirula → rács (2/3/1 oszlop), SKIMS-kártya: kép · pöttyök · név · ár. */

/* ---------- fejléc B MINDEN szélességen (Olivér 10-14: „nem kell középen logós nézet, ez így jó… amit látsz a képen ez legyen desktopon”):
   logó bal · jobbra kereső · kosár · menü; a kategóriák, a nyitott keresőmező, a fiók- és a szív-ikon a menüben ---------- */
.hd:not(.co) .hd-in{display:flex !important;align-items:center;gap:0 !important;padding:0 6px 0 6px !important;position:static}
.hd:not(.co) .hd-l,.hd:not(.co) .hd-r{display:contents}
.hd:not(.co) .logo-w{position:static !important;transform:none !important;left:auto;top:auto;order:0;padding:0 4px 0 10px;margin:0 auto 0 0}
.hd:not(.co) .hd-nav{display:none !important}
.hd:not(.co) .hd-search{display:none !important}
.hd:not(.co) .hd-l .ib.srch{order:1;display:grid !important;margin:0 !important;width:42px}
.hd:not(.co) .hd-r .ib.wide{order:2;width:42px !important;padding:0 !important;display:grid}
.hd:not(.co) .hd-r .ib.wide .hd-txt{display:none}
.hd:not(.co) .hd-r .ib.wide .cnt{position:absolute;margin:0}
.hd:not(.co) .hd-l [data-a="menu"]{order:3;width:42px !important;padding:0 !important;display:grid !important}
.hd:not(.co) .hd-l [data-a="menu"] .hd-txt{display:none}
.hd:not(.co) .hd-r .acct{display:none}
@media (min-width:1024px){ .hd:not(.co) .hd-in{padding:0 12px 0 10px !important} .hd:not(.co) .logo-w{padding-left:14px} }
.hd{transition:transform .22s ease,opacity .18s,border-color .2s}
.hd.away{transform:translate(-50%,-140%);opacity:0;pointer-events:none}

/* ---------- cím ---------- */
.pl{padding-bottom:28px}
.pl-h{padding:14px var(--gut) 0;align-items:flex-end}
.pl-h h1{font-size:26px;letter-spacing:-.01em;text-transform:uppercase;line-height:1.1}
.pl-n{font-size:13px;color:#555;margin-top:4px}
.pl-dn{display:none !important}

/* ---------- story-körök ---------- */
.pl-cats{gap:12px;padding:16px var(--gut) 0;flex-wrap:nowrap;overflow-x:auto}
.pl-c,.pl-c.on,.pl-c.bk{width:78px;height:auto;flex-direction:column;gap:7px;padding:0;background:none !important;box-shadow:none !important;border-radius:0;align-items:center}
.pl-c .ph{display:grid;width:76px;height:76px;border-radius:50%;background:var(--tint);box-shadow:0 0 0 1.5px #E5E5E5;overflow:hidden}
.pl-c .ph img{object-position:50% 10%}
.pl-c .ph svg{width:26px;height:26px}
.pl-c.on .ph{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--ink)}
.pl-c.bk .ph{box-shadow:inset 0 0 0 1.5px var(--ink)}
.pl-c.bk::before{display:none}
.pl-c>span:last-child{font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:#555;white-space:normal;-webkit-line-clamp:2;line-height:1.2}
.pl-c.on>span:last-child{color:var(--ink) !important;font-weight:700;text-decoration:none}
@media (hover:hover) and (pointer:fine){ .pl-c:not(.on):hover .ph{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line-2)} }
@media (min-width:768px){ .pl-cats{flex-wrap:nowrap;overflow-x:auto;gap:12px} .pl-c{width:78px} .pl-c .ph{width:76px;height:76px} }

/* ---------- sáv: nézet-gombok + „Szűrő és rendezés” ---------- */
.pl-bar,.pl-flo{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;height:46px}
.pl-bar{position:static !important;top:auto;left:auto;right:auto;bottom:auto;transform:none !important;width:auto !important;margin:16px var(--gut) 0 !important;padding:0 !important;background:none !important;color:var(--ink);box-shadow:none !important;border-radius:0;opacity:1 !important;pointer-events:auto !important;transition:none}
.pl-bar.hide{transform:none;opacity:1;pointer-events:auto}
.pl-vv{display:flex;gap:8px}
.pl-bar button,.pl-flo button,.pl-bar button.on{height:46px;width:auto;background:var(--ink) !important;color:#fff !important;box-shadow:none !important;border-radius:999px;font-size:13px;font-weight:600;text-transform:none;letter-spacing:0;text-decoration:none;padding:0;margin:0}
.pl-bar button+button::before{display:none}
.pl-bar .pl-v,.pl-flo .pl-v{width:46px !important;display:grid;place-items:center;padding:0 !important}
.pl-v svg{width:18px;height:18px;stroke-width:1.5}
.pl-bar .pl-pill,.pl-flo .pl-pill{display:inline-flex;align-items:center;gap:8px;padding:0 16px 0 14px !important}
.pl-pill svg{width:15px;height:15px}
.pl-pill .pl-pt{white-space:nowrap}
.pl-k{flex:none;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#fff;color:var(--ink);font-size:11px;font-weight:700;line-height:18px;text-align:center}
@media (max-width:359px){ .pl-pt2{display:none} }
.pl-flo{position:fixed;left:var(--gut);right:var(--gut);top:74px;z-index:var(--z-stick);height:44px;transform:translateY(-140%);opacity:0;pointer-events:none;transition:transform .22s ease,opacity .18s}
.pl-flo.on{transform:none;opacity:1;pointer-events:auto}
.pl-flo button{height:44px;box-shadow:0 12px 28px -12px rgba(0,0,0,.5) !important}
.pl-flo .pl-v{width:44px !important}
body.lift{padding-bottom:0}
.pl-chips{padding-top:12px}
.pl-res{margin-top:16px}

/* ---------- rács + SKIMS-kártya (mobil, tablet) ---------- */
@media (max-width:1023px){
  .pl-grid{gap:2px;row-gap:2px;padding:0}
  .pl-grid[data-c="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pl-grid[data-c="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pl-grid[data-c="1"]{grid-template-columns:minmax(0,1fr)}
  .pl-grid .card-img{aspect-ratio:3/4.2;border-radius:0}
  .pl-grid .card .fav{top:auto;right:10px;bottom:10px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:none}
  .pl-grid .card .fav svg{width:16px;height:16px;filter:none}
  .pl-grid .card .qadd{display:none}
  .pl-grid .badges .tag.last{display:none}
  .pl-grid .card-b{padding:10px 10px 16px;gap:0}
  .pl-grid .sw{margin:0 0 8px 0;height:22px;gap:7px}
  .pl-grid .sw button{width:22px;height:22px}
  .pl-grid .sw i{width:22px;height:22px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
  .pl-grid .sw button.on i{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--ink)}
  .pl-grid .c-brand,.pl-grid .c-club,.pl-grid .c-sizes{display:none}
  .pl-grid .c-title{font-size:14px;font-weight:700;line-height:1.25;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .pl-grid .c-price{font-size:14px;font-weight:400;margin-top:5px}
  .pl-grid .c-price:has(.was){color:var(--ink)}
  .pl-grid[data-c="3"] .card-b{padding:8px 8px 12px}
  .pl-grid[data-c="3"] .c-title,.pl-grid[data-c="3"] .c-price{font-size:12px}
  .pl-grid[data-c="3"] .sw{height:16px;gap:5px;margin-bottom:6px}
  .pl-grid[data-c="3"] .sw button,.pl-grid[data-c="3"] .sw i{width:16px;height:16px}
  .pl-grid[data-c="3"] .card .fav{width:28px;height:28px;right:6px;bottom:6px}
  .pl-grid[data-c="3"] .card .fav svg{width:13px;height:13px}
  .pl-grid[data-c="1"] .card-b{padding:12px var(--gut) 22px}
  .pl-grid[data-c="1"] .c-title{font-size:16px}
  .pl-grid[data-c="1"] .c-price{font-size:15px}
  .pl-ask{margin:2px 0}
}
/* tablet: egy oszloppal több */
@media (min-width:768px) and (max-width:1023px){
  .pl-grid[data-c="2"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pl-grid[data-c="3"]{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pl-grid[data-c="1"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* gép: a sáv a körök alatt marad (nem a cím mellett), két oszloppal több */
@media (min-width:1024px){
  .pl-bar{position:static !important;display:grid !important;grid-template-columns:auto 1fr auto !important;gap:8px !important;margin:16px var(--gut) 0 !important}
  .pl-bar button,.pl-bar button.on{height:46px !important;background:var(--ink) !important;color:#fff !important;font-size:13px;font-weight:600;letter-spacing:0;text-decoration:none}
  .pl-bar .pl-pill{padding:0 16px 0 14px !important}
  .pl-bar .pl-v{width:46px !important}
  .pl-flo{left:50%;right:auto;width:min(1120px,calc(100% - 24px));transform:translate(-50%,-140%);top:84px}
  .pl-flo.on{transform:translate(-50%,0)}
  .pl-grid[data-c="3"]{grid-template-columns:repeat(5,minmax(0,1fr))}
  .pl-grid[data-c="1"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pl-grid .badges .tag.last{display:none}
  .pl-h{align-items:flex-end !important}
}

/* ---------- szűrő-lap: rendezés-chipek a tetején ---------- */
.pl-rsec h3{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#555;margin-bottom:8px}
.pl-rch{display:flex;flex-wrap:wrap;gap:8px}
.pl-rch .chip{height:36px;padding:0 14px;font-size:13px;font-weight:600;border-radius:999px}

/* ---------- javítások (10-14, Olivér „okok javítsd ki”) ---------- */
.pl-sh .row2 .btn.s{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);text-transform:none;letter-spacing:0}   /* Törlés vonalas, egy fő gomb (a zöld) */
.pl-grid .sw{display:none}

/* ---------- MINDEN kártya, mindenhol (főoldal, szettek, ajánló-sávok is): kép · név · ár (+ szív). Olivér 10-14: „annyi adat, hogy stroke-ot kapunk” ---------- */
.card .c-brand,.card .c-club,.card .c-sizes,.card .sw,.mc .sw{display:none !important}
.card .badges .tag.last{display:none}
.card .c-title{font-size:14px;font-weight:700;line-height:1.25;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .c-price{font-size:14px;font-weight:400;margin-top:5px;color:var(--ink)}
.card .c-price:has(.was){color:var(--ink)}
.card .c-price .was{color:#555;font-weight:400}
.card-b{padding:10px 10px 16px;gap:0}
.grid .card .fav,.rail .card .fav{top:auto;right:10px;bottom:10px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:none}
.grid .card .fav svg,.rail .card .fav svg{width:16px;height:16px;filter:none}
/* EGYSÉGES KÁRTYA mindenhol (Olivér 10-14): nincs gyors-kosár (+) és nincs méretpanel, gépen sem — a méret a terméklapon */
.card .qadd,.card .qsz,.mc .qadd{display:none !important}
@media (min-width:1024px){ .card .card-b{padding:12px 2px 18px} }

/* ---------- gépen is: logó BALRA (Olivér 10-14 „desktopon is lehet bal oldalt a griff logo”), utána a kategóriák, jobbra kereső · fiók · kedvencek · kosár ---------- */
@media (min-width:1024px){
  .hd:not(.co) .hd-in{position:relative}
  .hd:not(.co) .logo-w{position:static !important;transform:none !important;left:auto;top:auto;order:0;padding:0 18px 0 10px;margin:0 auto 0 0}
  .hd:not(.co) .hd-nav{order:2;margin-left:4px}
  .hd:not(.co) .hd-l .ib.wide{order:1}
}

/* ---------- főoldali kategóriák = KÖRÖK (Olivér 10-14 „ezek legyenek körök”), ugyanaz a nyelv, mint a lista story-körei ---------- */
.hm-tiles{display:flex;gap:12px;grid-auto-flow:unset;grid-auto-columns:unset;grid-template-columns:none;overflow-x:auto;padding:16px var(--gut) 2px;justify-content:flex-start}
.hm-tile{flex:none;width:78px;align-items:center;gap:7px}
.hm-tile .ph{width:76px;height:76px;aspect-ratio:1;border-radius:50% !important;box-shadow:0 0 0 1.5px #E5E5E5;background:var(--tint)}
.hm-tile .ph img{object-position:50% 10%}
.hm-tile span{font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:#555;white-space:normal;text-align:center;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hm-tile.all{display:none}
@media (hover:hover) and (pointer:fine){ .hm-tile:hover .ph{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line-2)} .hm-tile:hover .ph img{opacity:1} .hm-tile:hover span{text-decoration:none;color:var(--ink)} }
@media (min-width:768px){ .hm-tiles{gap:16px;padding-top:20px} .hm-tile{width:96px} .hm-tile .ph{width:92px;height:92px} .hm-tile span{font-size:13px} }
@media (min-width:1024px){ .hm-tiles{display:flex;justify-content:center;gap:28px;overflow:visible;max-width:var(--maxw);margin:0 auto;padding-top:24px} .hm-tile{width:128px;flex:none} .hm-tile .ph{width:120px;height:120px} .hm-tile span{font-size:13px;font-weight:500} }

/* ---------- „Ugrás a lap tetejére”: gépen KI (Olivér 10-14 „ez nem kell”), mobilon kis fehér kör nyíllal jobb alul ---------- */
.fel{display:none !important}
@media (max-width:1023px){
  .fel{display:inline-flex !important;left:auto;right:16px;bottom:calc(20px + var(--safe-b));width:40px;height:40px;padding:0;justify-content:center;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);box-shadow:0 0 0 1px rgba(0,0,0,.08) inset,0 10px 24px -12px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .fel .fel-t{display:none}
  .fel svg{width:18px;height:18px;stroke-width:1.8}
}

/* ---------- aktív szűrők gépen a sáv közepén (Olivér 10-14 „ki lehetne rakosgatni desktopon középre is, ha elfér”) ---------- */
.pl-bc{display:none}
@media (min-width:1024px){
  .pl-bc{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;min-width:0;padding:0 12px}
  .pl-bc .chip{height:36px;font-size:12.5px}
  .pl-chips{display:none !important}
}

/* ikon-sorrend a fejlécben minden szélességen: kereső · kosár · menü (a desktop.css order-szabályai felett) */
.hd:not(.co) .hd-l .ib.srch{order:1 !important}
.hd:not(.co) .hd-r a[href="/kedvencek/"]{order:2 !important}
.hd:not(.co) .hd-r .ib.wide{order:3 !important}
.hd:not(.co) .hd-l .ib.wide[data-a="menu"]{order:4 !important}
/* a sáv közepén a szűrő-pirulák fehérek, vékonyak (nem a fekete gomb-stílus) */
.pl-bar .pl-bc .chip,.pl-flo .pl-bc .chip{height:36px !important;background:#fff !important;color:var(--ink) !important;box-shadow:inset 0 0 0 1px var(--line-2) !important;border-radius:999px;font-size:12.5px;font-weight:600;padding:0 10px 0 12px !important;gap:6px}
.pl-bar .pl-bc .chip svg,.pl-flo .pl-bc .chip svg{width:13px;height:13px;color:var(--mute)}
.pl-bar .pl-bc .chip.clr,.pl-flo .pl-bc .chip.clr{box-shadow:none !important;text-decoration:underline;text-underline-offset:3px;padding:0 6px !important}

/* ---------- szűrő-lap lábléc: két egyforma magas gomb, a zöld szélesebb, felirat nem nagybetűs, nem lóg ki (Olivér 10-14 „nézd ez nem jó”) ---------- */
.pl-sh .sh-f .row2{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:8px}
.pl-sh .sh-f .btn{height:48px;min-width:0;padding:0 12px;font-size:13.5px;font-weight:700;text-transform:none;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:999px}
.pl-sh .sh-f .btn.s{box-shadow:inset 0 0 0 1.5px var(--ink)}

/* ---------- 2. kör finomítás (10-14 ellenőrök): gombfelirat sehol nem nagybetűs; egy lapon egy zöld gomb (hírlevél fekete); 44 px érintési célok ---------- */
.btn{text-transform:none;letter-spacing:0}
.ft-nl .btn.p{background:var(--ink);color:#fff}
.ct-ln .qty button,.ct-x{width:40px;height:40px}
.ct-ln .qty button svg{width:15px;height:15px}
.pd-club{min-height:44px;display:flex;align-items:center;gap:6px}
.ct-page{padding-bottom:calc(128px + var(--safe-b))}
@media (min-width:1024px){ .ct-page{padding-bottom:40px} }

/* ---------- körök képe Safarin is pontosan kitölti a kört (Olivér 10-14: „a körök teteje fehér” a telefonján): abszolút kitöltés, nem height:100% ---------- */
.hm-tile .ph,.pl-c .ph{position:relative;display:block;overflow:hidden}
.hm-tile .ph img,.pl-c .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 10%;display:block}
.pl-c .ph svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}

/* ---------- kiegészítők (öv, táska) képe is kitölti a kártyát, nincs „contain” fehér keret (Olivér 10-14 „ezeket is normálisan kéne kirakni”) ---------- */
.card-img img.contain,.mc .card-img img.contain,.hm-tile .ph img.contain,.pl-c .ph img.contain{object-fit:cover;padding:0}

/* ---------- ~10%-kal nagyobb fejléc és szűrősor (Olivér 10-14 „picit pici a menü és a szűrő rész”) ---------- */
.hd:not(.co){height:60px}
.hd .ib,.hd:not(.co) .hd-l .ib.srch,.hd:not(.co) .hd-r .ib.wide,.hd:not(.co) .hd-l [data-a="menu"]{width:46px !important;height:46px}
.hd .ib svg{width:24px;height:24px}
.logo{height:19px}
@media (min-width:1024px){ .logo{height:22px} }
.pl-bar,.pl-flo{height:50px}
.pl-bar button,.pl-flo button,.pl-bar button.on{height:50px;font-size:14px}
.pl-bar .pl-v,.pl-flo .pl-v{width:50px !important}
.pl-v svg{width:20px;height:20px}
.pl-pill svg{width:17px;height:17px}
.pl-k{min-width:20px;height:20px;line-height:20px;font-size:12px;border-radius:10px}
.pl-flo{top:78px;height:48px}.pl-flo button{height:48px}.pl-flo .pl-v{width:48px !important}
@media (min-width:1024px){ .pl-bar button,.pl-bar button.on{height:50px !important} .pl-bar .pl-v{width:50px !important} }

/* ---------- toast: több soros szövegnél sem lóg ki (Olivér 10-14 „ez nem túl szép”) ---------- */
.toast{height:auto;min-height:48px;padding:11px 10px 11px 16px;border-radius:20px;line-height:1.35;font-size:13.5px;width:max-content;max-width:calc(100% - 32px);text-align:left}
.toast:not(:has(button)){padding-right:16px}
.toast span{white-space:normal}

/* ---------- főoldal (Olivér 10-14 „nagyon betakar ez a menü” + „ez is szar”): a hős a sziget ALATT indul; az előny-sor egy halk, egysoros, görgethető szövegsáv ikon nélkül ---------- */
/* [HOS-1014b] a hős a sziget alá fut (gs.css -80px); mobilon 2 kép, a fejek a sziget alatt */
@media (max-width:767px){ .hm-strip{grid-template-columns:repeat(2,minmax(0,1fr))} .hm-strip img{aspect-ratio:3/4;object-position:50% 32%} .hm-strip img:nth-child(n+3){display:none} .hm-cap{padding-top:64px} }
.hm-usp{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;padding:12px var(--gut);border-bottom:1px solid #E5E5E5;background:#fff}
.hm-usp::-webkit-scrollbar{display:none}
.hm-u{display:inline-flex;align-items:center;gap:0;min-height:0;padding:0;border-radius:0;background:none;flex:none;white-space:nowrap}
.hm-u+.hm-u::before{content:"·";padding:0 10px;color:#B5B5B5}
.hm-u svg{display:none}
.hm-u span{display:inline}
.hm-u b{display:inline;font-size:12.5px;font-weight:600;color:var(--ink);text-transform:none;letter-spacing:0}
.hm-u small{display:none}
.hm-u:active,.hm-u:hover{background:none}
@media (min-width:1024px){ .hm-usp{justify-content:center;padding:14px var(--gut)} .hm-u b{font-size:13px} }

/* ---------- [MENU-1014] egységes menü: minden sor egyforma (15px 700, 52px, hajszálvonal), nyílra lenyíló körsor, nincs halvány szekciócím ---------- */
.mn-b{padding-top:8px}
.mn-sec{display:none}
.mn-row{display:flex;justify-content:space-between;align-items:center;min-height:52px;font-size:15px;font-weight:700;color:var(--ink);border-bottom:1px solid #E5E5E5;text-decoration:none}
.mn-row span{color:#555;font-weight:500;font-size:13px}
.mn-acc{gap:10px;justify-content:flex-start;border-bottom:1px solid #E5E5E5;margin-bottom:12px}
.mn-acc svg{width:20px;height:20px;color:var(--ink)}
.mn-acc b{font-weight:700}
.mn-acc span{margin-left:auto;max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mn-all{margin-top:12px}
.mn-grp{position:relative;border-bottom:1px solid #E5E5E5}
.mn-grp .mn-row{border-bottom:0;padding-right:48px}
.mn-tg{position:absolute;right:-8px;top:4px;width:44px;height:44px;display:grid;place-items:center;color:var(--ink)}
.mn-tg svg{width:18px;height:18px;transition:transform .18s}
.mn-grp.open .mn-tg svg{transform:rotate(180deg)}
.mn-circ{padding:4px 0 16px}
.mn-list{margin-top:0;border-top:0}
.mn-list .mn-row svg{display:none}
.mn-small{margin-top:18px}

/* ---------- [NEM-GOMB-1014] gépen „Női · Férfi” a logó mellett: a hamburgermenüt az adott nemmel nyitja (Olivér 10-14 „fasza ötlet lenne”) ---------- */
.hd-gn{display:none}
@media (min-width:1024px){
  .hd:not(.co) .hd-gn{display:flex;align-items:center;gap:4px;margin-left:14px;order:0}
  .hd-gn button{height:40px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink);position:relative}
  .hd-gn button::after{content:"";position:absolute;left:12px;right:12px;bottom:7px;height:2px;background:var(--ink);transform:scaleX(0);transition:transform .15s}
  .hd-gn button:hover::after,.hd-gn button.on::after{transform:scaleX(1)}
  .hd:not(.co) .logo-w{margin-right:0}
  .hd:not(.co) .hd-gn{margin-right:auto}
}

/* ---------- [JELZO-1014] badge-ek a kártyán és a terméklapon: Népszerű (fekete, narancs pötty) · Új (fehér) · −X% (fehér) ---------- */
.badges{top:10px;left:10px;gap:6px}
.badges .tag,.pd-tags .tag{height:24px;padding:0 10px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:#fff;color:var(--ink);box-shadow:none;display:inline-flex;align-items:center;gap:6px}
.tag.hot{background:var(--ink) !important;color:#fff !important}
.tag.hot::before{content:"";width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#FF8A3C,#E8641F)}
.tag.new{background:#fff;color:var(--ink)}
.tag.out{background:#fff;color:#555}
.pd-tags{display:flex;gap:6px;margin:0 0 10px}
.pd-tags .tag{box-shadow:inset 0 0 0 1px #E5E5E5}
.pd-tags .tag.hot{box-shadow:none}
.pl-grid .badges .tag.last,.card .badges .tag.last{display:none}

/* ---------- [MENU-1014b] menü: kereső a tetején, csoportok mindig nyitva „Összes ›”-sel, profil a kis listában; gépen profil-ikon a fejlécben ---------- */
.mn-h2{grid-template-columns:var(--tap) minmax(0,1fr);gap:6px;padding:8px 12px 8px 6px}
.mn-srch{display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--ink);font-size:14px;font-weight:500;color:#555;width:100%}
.mn-srch svg{width:18px;height:18px;color:var(--ink)}
.mn-gh{padding-right:0}
.mn-gt{font-size:15px;font-weight:700;color:var(--ink)}
.mn-allg{display:inline-flex;align-items:center;gap:2px;font-size:13px;font-weight:600;color:var(--ink) !important;text-decoration:underline;text-underline-offset:3px}
.mn-allg svg{width:12px;height:12px}
.mn-tg{display:none}
.mn-circ{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 8px;padding:2px 0 16px}
.mn-small a .mn-mail{color:#555;font-size:12px;margin-left:6px}
@media (min-width:1024px){ .hd:not(.co) .hd-r .acct{display:grid;order:2;width:42px} }

/* ---------- hős mobilon: halvány fehér átmenet a sziget mögött + a fejek lejjebb (Olivér 10-14 „így látod a problémát”) ---------- */
@media (max-width:767px){
  /* nincs fehérítés (Olivér: „semmiképp”); a kép szándékosan a nyak alatt indul (SKIMS-vágás), így a sziget nem a fejeket takarja */
  .hm-strip img{object-position:50% 78%}
}
.mn-row .mn-gt,.mn-gh .mn-gt{color:var(--ink);font-weight:700;font-size:15px}   /* a csoportcím ne halvány (Olivér) */

/* ---------- [JELZO-1014b] diszkrét badge-ek: a képen csak −X% / Elfogyott; Népszerű · Új halk sor az ár alatt; nincs narancs pötty ---------- */
.c-tags{display:block;font-size:11.5px;font-weight:600;color:#555;margin-top:4px;letter-spacing:.02em}
.tag.hot::before{display:none}
.tag.hot{background:#fff !important;color:var(--ink) !important}
.pd-tags .tag{box-shadow:inset 0 0 0 1px #E5E5E5;background:#fff;color:var(--ink);font-weight:600;letter-spacing:.04em}
.badges .tag.sale{background:#fff;color:var(--ink)}
/* ---------- [KLUB-KI-1014] OI Club: minden klub-felület rejtve (a számítás marad a tagoknak) ---------- */
.ct-club,.ct-cl,.club-l,.co-club,.ac-club,.hm-club,[data-a="club"],.ac-st .tag.club,.co-ver .tag.club{display:none !important}
/* [KLUB-TAG-1015] belépett klubtagnak a klubár látszik (kártya + terméklap) */
/* [KLUB-MINDENKI-1015] a klubár mindenkinek látszik; nem-tagnak „Klubár”, tagnak „Klubtagként neked” */
.card .c-club,.pl-grid .card .c-club{display:block !important;font-size:12.5px;color:var(--ink);margin-top:2px}
.c-club .cm,html.is-member .c-club .cg{display:none}
html.is-member .c-club .cm{display:inline}
.pd-club[data-a="club"]{display:block !important;color:var(--ink)}

/* [JELZO-1014c] terméklapon a Népszerű · Új ugyanaz a halk sor, mint a kártyán (nem pirula) */
.pd-tags{display:none}
.pd-tagline{font-size:12px;font-weight:600;color:#555;letter-spacing:.02em;margin:4px 0 0}

/* ---------- [JELZO-1014d] badge a kártya képén, diszkréten: apró, áttetsző fehér, elmosott háttér, egy sorban ---------- */
.badges{top:8px;left:8px;flex-direction:row;flex-wrap:wrap;gap:4px}
.badges .tag{height:20px;padding:0 8px;border-radius:999px;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink);box-shadow:none}
.badges .tag.hot,.badges .tag.new,.badges .tag.sale{background:rgba(255,255,255,.78);color:var(--ink)}
.badges .tag.out{color:#555}
.pl-grid[data-c="3"] .badges{top:6px;left:6px}
.pl-grid[data-c="3"] .badges .tag{height:18px;padding:0 6px;font-size:8.5px}
.c-tags{display:none}

/* ---------- [FEJLEC-1014c] legfelül nem sziget: teljes szélességű, fehér, hajszálvonallal; görgetve válik lebegő üveg-szigetté (Lululemon-minta). A hős a fejléc alatt indul. ---------- */
.hd:not(.co){transition:top .25s ease,left .25s ease,width .25s ease,border-radius .25s ease,background .25s ease,box-shadow .25s ease,transform .22s ease,opacity .18s}
.hd:not(.co):not(.sc){top:0 !important;left:0 !important;right:0;width:100% !important;transform:none !important;border-radius:0 !important;background:#fff !important;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 1px 0 #E5E5E5 !important}
.hd:not(.co):not(.sc) .hd-in{padding:0 10px 0 10px !important}
@media (min-width:1024px){ .hd:not(.co):not(.sc) .hd-in{max-width:1400px;margin:0 auto;padding:0 20px !important} }
.hm-hero{margin-top:0 !important}
/* görgetve: a szigeten lassú, halvány fény fut végig (csillogás), csak ha a mozgás engedett */
.hd.sc:not(.co){overflow:hidden}
.hd.sc:not(.co)::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:28%;background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 100%);transform:skewX(-18deg);pointer-events:none;animation:hd-sheen 7s ease-in-out infinite}
@keyframes hd-sheen{0%,55%{left:-40%}85%,100%{left:120%}}
@media (prefers-reduced-motion:reduce){ .hd.sc:not(.co)::after{animation:none;display:none} }

/* [FEJLEC-1014d] a tartalom közvetlenül a fejléc alatt indul (nincs 20 px rés) — Olivér: „zárd oda” */
body{padding-top:60px !important}
.pl-h{padding-top:18px}

/* ---------- [FEJLEC-1014e] simább váltás (nincs transform-ugrás: a sziget bal/jobb távolsággal középre, nem translate-tel), lassabb, folyamatos fény ---------- */
.hd:not(.co){left:max(12px, calc(50% - 560px)) !important;right:max(12px, calc(50% - 560px)) !important;width:auto !important;transform:none !important;transition:top .28s ease,left .28s ease,right .28s ease,border-radius .28s ease,background-color .28s ease,box-shadow .28s ease,transform .22s ease,opacity .18s}
.hd:not(.co):not(.sc){left:0 !important;right:0 !important}
.hd.away{transform:translateY(-140%) !important}
.hd.sc:not(.co)::after{animation:hd-sheen 14s linear infinite;width:34%;background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%)}
@keyframes hd-sheen{0%{left:-45%}100%{left:125%}}
/* [SAV-1014] gépen a „Szűrő és rendezés” pirula belső térköze (a gs.css padding:0 !important-ját üti) */
@media (min-width:1024px){ .pl-bar button.pl-pill.pl-pill,.pl-flo button.pl-pill.pl-pill{padding:0 16px 0 16px !important;gap:8px} }
.pl-pill .pl-k{margin-left:2px}
/* [FEJLEC-1014f] mobilon is profil-ikon a fejlécben (Olivér: „idefér”): kereső · profil · szív · kosár · menü, 40 px-es gombok, a logó kisebb */
@media (max-width:1023px){
  .hd:not(.co) .hd-r .acct{display:grid !important;order:1;width:40px !important;height:40px}
  .hd:not(.co) .hd-l .ib.srch{order:0}
  .hd:not(.co) .hd-r a[href="/kedvencek/"]{order:2 !important}
  .hd:not(.co) .hd-r .ib.wide{order:3 !important}
  .hd:not(.co) .hd-l [data-a="menu"]{order:4 !important}
  .hd .ib,.hd:not(.co) .hd-l .ib.srch,.hd:not(.co) .hd-r .ib.wide,.hd:not(.co) .hd-l [data-a="menu"],.hd:not(.co) .hd-r a[href="/kedvencek/"]{width:40px !important;height:40px}
  .hd .ib svg{width:22px;height:22px}
  .logo{height:17px}
  .hd:not(.co) .logo-w{padding-left:8px}
}
@media (max-width:359px){ .hd:not(.co) .hd-r .acct{display:none !important} }   /* nagyon keskeny telefonon marad a menüben */

/* [SZIN-NEV-1015] színnév a kártya címe alatt */
.card .c-col{display:block;font-size:12.5px;font-weight:500;color:var(--mute);line-height:1.3;margin-top:1px}

/* [APP-APROSAG-1018] üres kedvencek/lista: két egyforma körvonalas gomb, mint az üres kosárban (nem narancs + fekete) */
.pl-empty .row2 .btn{background:#fff!important;color:var(--ink)!important;border:1.5px solid var(--ink)!important;box-shadow:none!important}
/* ── pdp-1014.css ── */
/* Griff v2 · pdp-1014.css — TERMÉKLAP A LISTA NYELVÉN [PDP-1014] (10-14, makett: koncepciok/veg2.html, lista.css).
   A build a gs.css és a lista.css UTÁN fűzi be, ezért itt minden korábbi terméklap-szabályt felülírunk.
   Nyelv: fehér alap · #1A1A1A / #555 / #E5E5E5 · zöld CSAK a sziget Kosárba gombján · Montserrat 400–700 · pirula-gombok 44–48 px ·
   fotó 0 px sarok · vonalas ikon. Mobil-first (390 px), tablet középre zárt oszlop, gépen 2 oszlopos képrács + vásárló-oszlop. */
body[data-page=pdp]{--lift:76px}

/* ---------- 1. galéria: széltől szélig, 3/4.2, a lebegő üveg-fejléc alá fut; lapozás pöttyökkel; szív jobb-alul fehér körben ---------- */
.pd-gal{position:relative;background:#fff;margin-top:0}
.pd-tr{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.pd-tr::-webkit-scrollbar{display:none}
.pd-im{position:relative;display:block;width:100%;aspect-ratio:3/4.2;background:#fff;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;cursor:zoom-in;border-radius:0}
.pd-im img{width:100%;height:100%;object-fit:cover}
.pd-im img.contain{object-fit:contain;padding:10%}
.pd-noimg{cursor:default;box-shadow:inset 0 0 0 1px #E5E5E5}
.pd-fav{top:auto;left:auto;right:12px;bottom:12px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:none;z-index:3}
.pd-fav svg{width:16px;height:16px;filter:none}
.pd-dots{position:absolute;left:0;right:0;bottom:22px;z-index:2;display:flex;justify-content:center;gap:6px;pointer-events:none}
.pd-dots i{width:6px;height:6px;border-radius:50%;background:rgba(26,26,26,.22);box-shadow:0 0 0 1px rgba(255,255,255,.6)}
.pd-dots i.on{background:#1A1A1A}
.pd-outt{position:absolute;left:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.9);font-size:11px;font-weight:600;color:var(--ink)}

/* ---------- 2. vásárló-oszlop: név 20/700 · ár 16 (áthúzott #555 + „−X%”) · halk OI Club-sor ---------- */
.pd-info{padding:14px var(--gut) 0}
.pd-crumbs{display:none}
.pd-h1,.pd h1{font-size:20px;font-weight:700;line-height:1.2;letter-spacing:0;text-transform:uppercase;margin:0}
.pd-pr{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:6px;font-size:16px;font-weight:400;line-height:1.3;color:var(--ink)}
.pd-pr.sale{color:var(--ink)}
.pd-pr small{font-size:13px;font-weight:400;color:#555}
.pd-pr .was{margin:0;font-size:14px;font-weight:400;color:#555;text-decoration:line-through;text-decoration-thickness:1px}
.pd-pct{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:999px;background:var(--ink);color:#fff;font-size:11px;font-weight:600;letter-spacing:0}
.pd-club{display:block;width:100%;min-height:0;margin-top:6px;padding:0;font-size:13px;font-weight:400;line-height:1.4;color:#555;text-align:left;background:none;box-shadow:none}
.pd-club b{font-weight:700;color:var(--ink)}
.pd-club .tag,.pd-q{display:none}

/* blokk-fej: 11 px nagybetűs címke + jobbra szöveges link */
.pd-blk{margin-top:22px}
.pd-bh{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:20px;margin-bottom:10px}
.pd-lab{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#555}
.pd-bv{font-size:12px;font-weight:500;color:var(--ink)}
.pd-cb .pd-bh{justify-content:flex-start;gap:8px}
.pd-lnk{display:inline-flex;align-items:center;min-height:0;margin:0;padding:0;font-size:12px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;gap:0}
.pd-lnk svg{display:none}

/* ---------- 3. színek: 36 px-es körök (a fotóból), aktív = fekete gyűrű ---------- */
.pd-cs{display:flex;flex-wrap:wrap;gap:10px;padding:3px;margin:-3px;overflow:visible}
.pd-c{position:relative;flex:none;width:36px;height:36px;aspect-ratio:auto;border-radius:50%;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);transition:opacity var(--t-fast),box-shadow var(--t-fast)}
.pd-c img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.pd-c img.contain{object-fit:contain;padding:6%}
.pd-c.on{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--ink)}
.pd-c.dim{opacity:.45}
.pd-c.out img{opacity:.35}
.pd-c.out::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - .75px),#555 calc(50% - .75px),#555 calc(50% + .75px),transparent calc(50% + .75px))}

/* ---------- 4. méretek: 44 px-es pirulák, 1,5 px fekete vonal; aktív tömör fekete; elfogyott halványan áthúzva ---------- */
.pd-zs{gap:8px}
.pd-zs .z,.pd-zs .z.out{height:44px;border-radius:999px;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);font-size:13px;font-weight:600;line-height:1;text-decoration:none}
.pd-zs .z.on{background:var(--ink);color:#fff;box-shadow:none}
.pd-zs .z.out{color:#999;box-shadow:inset 0 0 0 1px #E5E5E5;text-decoration:line-through;text-decoration-thickness:1px}
.pd-zs .z small{display:none}
.pd-zs .z.flash{animation:pd-flash .9s}
@keyframes pd-flash{0%,100%{box-shadow:inset 0 0 0 1.5px var(--ink)}30%,70%{box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 3px #E5E5E5}}
.pd-one{display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:999px;background:var(--ink);color:#fff;font-size:13px;font-weight:600}
.pd-szb .zmsg{font-size:12px;margin-top:10px}
.pd-szb .zmsg.last{color:var(--ink);font-weight:600}
.pd-szb .zmsg.hint{color:#555;font-weight:400}
.pd-szb .zmsg.err{color:var(--ink);font-weight:600}
.pd-szb .pd-model{font-size:12px;color:#555;margin:8px 0 0}
.pd-szb .pd-model[hidden]{display:none}
/* „Melyik méret jó rád?”: vonalas 44 px-es gomb (nem nagybetűs) */
.pd-info .pd-fitb{display:flex;width:100%;height:44px;margin-top:14px;padding:0 16px;border-radius:999px;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;gap:8px}
.pd-info .pd-fitb svg{width:18px;height:18px;color:var(--ink)}
.pd-xp{margin-top:14px;display:grid;gap:8px}
@media (min-width:1024px){ .pd-xp{margin-top:12px} }
.pd-xp:empty,.pd-nosize .pd-xp{display:none}   /* méret nélkül nincs GPay/Apple Pay gomb (Olivér 10-14) */

/* ---------- 5. sziget: mobilon lebeg alul (16 px margó, 56 px, pirula, üveg), gépen az oszlop sora. Balra ár + „S · raktáron, szerdán nálad”,
   jobbra az EGYETLEN zöld gomb ---------- */
.pd-isl{position:fixed;left:12px;right:12px;bottom:calc(12px + var(--safe-b));z-index:var(--z-stick);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;height:60px;padding:0 6px 0 18px;border-radius:999px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);transition:transform .22s ease,opacity .18s}   /* Olivér 10-14: árnyék NÉLKÜL */   /* = a fejléc-sziget anyaga (Olivér 10-14: „legyen pont olyan, mint a menü”) */
.pd-isl-hide{transform:translateY(140%);opacity:0;pointer-events:none}
.pd-add-in{height:50px;margin-top:14px;font-size:14px}
.pd-isl .btn.p{height:48px}
.pd-isl-t{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1px;line-height:1.2}
.pd-isl-t b{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-isl-t span{font-size:11px;font-weight:400;color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-isl .btn,.pd-isl .btn.p,.pd-isl .btn.s{flex:none;height:44px;padding:0 20px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:0;text-transform:none;white-space:nowrap;transition:background var(--t-fast),transform .1s}
.pd-isl .btn.p{background:var(--accent);color:var(--ink)}
.pd-isl .btn.p.ok{background:var(--ink);color:#fff}
.pd-isl .btn.s{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.pd-isl-off .pd-isl-t b{color:#555}
body[data-page=pdp] .ft{padding-bottom:calc(28px + 96px + var(--safe-b))}
body[data-page=pdp] .fel{bottom:calc(92px + var(--safe-b))}                        /* a „fel” nyíl a sziget fölött */

/* ---------- 6. lenyíló sorok: hajszálvonal, nincs doboz, nincs szürke felület ---------- */
.pd-acc{margin-top:26px;border-top:1px solid #E5E5E5}
.pd-acc .acc{border-bottom:1px solid #E5E5E5}
.pd-acc .acc summary{min-height:52px;padding:14px 0;font-size:14px;font-weight:600;color:var(--ink)}
.pd-acc .acc summary svg{width:18px;height:18px;color:var(--ink)}
.pd-acc .acc .ab{padding:0 0 18px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.pd-acc .acc .ab p{margin:0 0 8px}
.pd-acc .acc .ab ul{padding-left:18px;list-style:disc;margin:0 0 8px}
.pd-acc .pd-d h3{font-size:13px;font-weight:700;margin:10px 0 4px}
.pd-acc .kv{font-size:13px;gap:6px 16px}
.pd-acc .kv dt{color:#555}
.pd-acc .pd-tab{font-size:12.5px}
.pd-acc .pd-model{margin-top:10px;font-size:12px}
.pd-ship{list-style:none;padding:0;margin:0}
.pd-ship li{padding:0 0 10px}
.pd-ship li:last-child{padding-bottom:0}
.pd-ship b{display:block;font-weight:600;color:var(--ink)}
.pd-ship span{display:block;color:#555;margin-top:1px}
.pd-ship span::first-letter{text-transform:uppercase}
.pd-ship [data-eta]{display:inline}
.pd-ship .lnk{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- 7. szett-blokk ugyanebben a nyelvben (szett.js, .sz): pirula-méretek, vonalas gombok ---------- */
.pd .sz{margin-top:24px}
.pd .sz-h h2{font-size:14px;font-weight:700;text-transform:none;letter-spacing:0}
.pd .sz-zs .z{height:40px;border-radius:999px;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);font-size:12.5px;font-weight:600}
.pd .sz-zs .z.on{background:var(--ink);color:#fff;box-shadow:none}
.pd .sz-zs .z.out,.pd .sz-zs .z[disabled]{color:#999;box-shadow:inset 0 0 0 1px #E5E5E5;text-decoration:line-through}
.pd .sz-zs .z small{display:none}
.pd .btn.s.xs.sz-add,.pd .btn.s.w.sz-both{height:36px;border-radius:999px;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);font-size:12.5px;font-weight:600;text-transform:none;letter-spacing:0}
.pd .btn.s.w.sz-both{height:44px;font-size:13px}

/* ---------- 8. sávok: Hasonló · Ehhez illik · Ugyanebből a kollekcióból · Utoljára nézted (G.rail, kártya érintetlen) ---------- */
.pd-rails{margin-top:34px}
.pd-rails .sec{margin-top:30px}
.pd-rails .sec:first-child{margin-top:0}
.pd-rails .sec-h{align-items:center}

/* ---------- 9. „Melyik méret jó rád?” lap (G.sheet .pd-fs) ---------- */
.pd-fs .pd-fit-f{margin-top:4px}
.pd-fs .fld{margin-bottom:0}
.pd-fs .fld input{border-radius:10px;font-size:16px}
.pd-fit-h{font-size:13px;line-height:1.5;color:#555;margin-top:10px}
.pd-fit-l{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#555;margin:20px 0 8px}
.pd-fit-c{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pd-fit-c .chip{height:40px;padding:0 8px;justify-content:center;border-radius:999px;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);font-size:12.5px;font-weight:600;white-space:nowrap;min-width:0}
.pd-fit-c .chip.on{background:var(--ink);color:#fff;box-shadow:none}
.pd-fit-r{margin-top:22px;padding-top:18px;border-top:1px solid #E5E5E5;min-height:72px}
.pd-fit-r .pd-fit-h{margin-top:0}
.pd-fit-s{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;align-items:center}
.pd-fit-big{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--ink);color:#fff;font-size:18px;font-weight:700;letter-spacing:0}
.pd-fit-s p{font-size:13px;line-height:1.5;color:var(--ink-2);margin:0}
.pd-fs .sh-f .btn{height:48px;border-radius:999px;font-size:13.5px;font-weight:700;text-transform:none;letter-spacing:0}
.pd-fs .sh-f .btn[disabled]{opacity:.4}

/* ---------- egér ---------- */
@media (hover:hover) and (pointer:fine){
  .pd-c:not(.on):hover{box-shadow:0 0 0 2px #fff,0 0 0 3px #E5E5E5}
  .pd-lnk:hover,.pd-club:hover b{text-decoration:underline;text-underline-offset:3px}
  .pd-zs .z:not(.on):not(.out):hover{background:#fff;box-shadow:inset 0 0 0 2px var(--ink)}
  .pd-info .pd-fitb:hover{background:var(--ink);color:#fff}
  .pd-info .pd-fitb:hover svg{color:#fff}
  .pd-isl .btn.p:hover{background:var(--accent-2)}
  .pd-fit-c .chip:not(.on):hover{background:#fff;box-shadow:inset 0 0 0 2px var(--ink)}
}

/* ---------- tablet: két kép egymás mellett, a szöveg-oszlop középre zárva; a sziget marad lebegő ---------- */
@media (min-width:768px) and (max-width:1023px){
  .pd-tr{grid-auto-columns:calc(50% - 2px);gap:4px}
  .pd-tr.one{grid-auto-columns:minmax(0,560px);justify-content:center}
  .pd-info{max-width:var(--maxw-text);margin:0 auto;padding-top:24px}
  .pd-isl{left:50%;right:auto;width:min(560px,calc(100% - 32px));transform:translateX(-50%)}
  .pd-isl-hide{transform:translate(-50%,140%)}
}

/* ---------- gép: 2 oszlopos képrács + vásárló-oszlop (ragad, ha belefér); a sziget az oszlop sora, nem lebeg ---------- */
@media (min-width:1024px){
  .pd{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:48px;align-items:start;max-width:var(--maxw);margin:0 auto;padding:24px var(--gut) 0}
  .pd-gal{margin-top:0}
  .pd-tr{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-columns:auto;gap:4px;overflow:visible;scroll-snap-type:none}
  .pd-tr.one{grid-template-columns:minmax(0,600px);justify-content:start}
  .pd-fav{right:16px;bottom:16px;width:40px;height:40px}
  .pd-fav svg{width:18px;height:18px}
  .pd-dots{display:none}
  .pd-info{max-width:none;margin:0;padding:0}
  .pd-info.stk{position:sticky;top:calc(var(--hd) + 24px)}
  .pd-crumbs{display:flex;margin-bottom:14px;font-size:12px;color:#555}
  .pd-crumbs a{text-decoration:none}
  .pd-h1,.pd h1{font-size:24px}
  .pd-pr{font-size:18px}
  .pd-isl{position:static;left:auto;right:auto;bottom:auto;width:auto;transform:none;margin-top:18px;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 0 1.5px var(--ink)}
  .pd-isl .btn,.pd-isl .btn.p{height:46px;padding:0 24px}
  .pd-isl-off{box-shadow:inset 0 0 0 1px #E5E5E5}
  .pd-rails{max-width:var(--maxw);margin:40px auto 0}
  body[data-page=pdp] .ft{padding-bottom:28px}
  body[data-page=pdp] .fel{bottom:calc(24px + var(--safe-b))}
}

/* [KESZLET-1014] ár sora: balra az ár, jobbra a készlet-jelző (Olivér 10-14 „készleten kevés darab vagy elég”) */
.pd-prrow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pd-stk{flex:none;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap}
.pd-stk i{width:9px;height:9px;border-radius:50%;background:#22C55E;flex:none}
.pd-stk.ok i{animation:pd-pulse 2.2s ease-in-out infinite}
.pd-stk.few i{background:#F5B800}
.pd-stk.last i{background:#E5484D}
.pd-stk.out{color:#555}.pd-stk.out i{background:#C9C9C9}
@keyframes pd-pulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.45)}50%{box-shadow:0 0 0 5px rgba(34,197,94,0)}}
@media (prefers-reduced-motion:reduce){ .pd-stk.ok i{animation:none} }

/* [PDP-USP-1014] előnyök a Kosárba alatt: 3 halk sor ikonnal */
.pd-usp{list-style:none;margin:14px 0 0;padding:12px 0 0;border-top:1px solid #E5E5E5;display:grid;gap:8px}
.pd-usp li{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#555;line-height:1.3}
.pd-usp svg{width:17px;height:17px;flex:none;color:var(--ink)}
.pd-usp+.pd-acc,.pd-usp+.sz{margin-top:18px}
/* [SZIGET-FENY-1014] a Kosárba-szigeten ugyanaz a lassú, folyamatos fény, mint a fejlécen (Olivér 10-14) */
.pd-isl{overflow:hidden}
.pd-isl::after{content:"";position:absolute;top:0;bottom:0;left:-45%;width:34%;background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);transform:skewX(-18deg);pointer-events:none;animation:hd-sheen 14s linear infinite}
.pd-isl>*{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){ .pd-isl::after{animation:none;display:none} }
@media (min-width:1024px){ .pd-isl::after{display:none} }   /* gépen a sziget statikus sor, ott nem fut fény */

/* [KLUB-BLOKK-1016] klubár + gyűjthető Griff Forint egy keretes kis blokkban (fehér, hajszál keret — szürke felület nem), jobbra fent „i” */
.pd-kb{margin-top:12px;padding:10px 12px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line-2);background:var(--white)}
.pd-kb:not(:has(.pd-club span:not(:empty))):not(:has(.pd-gf:not(:empty))){display:none}
.pd-kb-r{display:flex;align-items:center;gap:8px}
.pd-kb-r:has(.pd-club span:empty){display:none}
.pd-kb .pd-club,.pd-kb .pd-club[data-a="club"]{display:block;flex:1;min-width:0;min-height:0;margin:0;font-size:13.5px;color:var(--ink)}
.pd-kb-i{flex:none;display:grid;place-items:center;width:32px;height:32px;margin:-6px -6px -6px 0;padding:0;border:0;border-radius:50%;background:none;color:var(--mute);cursor:pointer}
.pd-kb-i svg.i{width:18px;height:18px}
.pd-kb .pd-gf{margin-top:4px}
.pd-kb-r:has(.pd-club span:empty)+.pd-gf{margin-top:0}
/* ── kosar-1014.css ── */
/* Griff v2 · kosar-1014.css — [KOSAR-1014] (10-14). A lista.css után, utolsó réteg: a KOSÁR (/kosar/, kosárfiók, méret-lap, „Kosárba tetted”) és a PÉNZTÁR (/penztar/)
   a ma élesített listaoldal nyelvén. Itt csak az van, amit a korábbi rétegek (gs: verzál gombok, 999 px-es mezők és kártyák; brand: zöld/mint felületek) felülírnának:
   gombok 48 px pirula, felirat NEM nagybetűs; egy zöld fő gomb, a többi vonalas; mezők 48 px, 1,5 px fekete vonal, 12 px sugár; választó-kártyák 12 px, az aktív 2 px fekete. */

/* ---------- gombok a kosár- és pénztár-felületeken: 48 px, pirula, 13/700, nem verzál; zöld = csak a fő gomb; a többi 1,5 px-es vonalas ---------- */
.ct-page .btn,.ct-dr .btn,.ct-ad .btn,.ct-qa .btn,.co-pg .btn{height:48px;border-radius:999px;font-size:13px;font-weight:700;text-transform:none;letter-spacing:0}
.ct-page .btn.s,.ct-dr .btn.s,.ct-ad .btn.s,.ct-qa .btn.s{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.ct-page .btn.p,.ct-dr .btn.p,.ct-ad .btn.p,.co-pg .btn.p{background:var(--accent);color:var(--ink)}
.ct-sticky .btn,.co-isl .btn{height:44px}
.co-pg .co-ret .btn.p,.co-ret .btn{height:40px;padding:0 18px;background:var(--ink);color:#fff}                      /* „Folytatás” = másodlagos fő-művelet: fekete tömör */
@media (hover:hover) and (pointer:fine){
  .ct-page .btn.s:hover,.ct-dr .btn.s:hover,.ct-ad .btn.s:hover,.ct-qa .btn.s:hover{background:var(--ink);color:#fff}
  .co-pg .co-ret .btn.p:hover,.co-ret .btn:hover{background:var(--ink-2)}
}
.ct-all{font-size:13px;font-weight:600}

/* ---------- kosár: nincs szürke/zöld felület, hajszálvonalak; a mennyiség-körök és a × fekete vonalasak ---------- */
.ct-ln .qty,.ct-ln .qty button{border-radius:50%}
.ct-ln .qty{border-radius:0}
.ct-undo,.ct-sold,.ct-fs{background:none;border-radius:0}
.ct-fs .bar i,.ct-fs.done .bar i{background:var(--ink)}
.ct-fs p svg{color:var(--ink)}
.ct-pr img,.ct-im,.ct-cs button{background:var(--white)}
.ct-pr .ct-p:has(.was){color:var(--ink)}
.ct-pr span,.ct-pr .ct-br{color:var(--mute)}
.ct-cs button{border-radius:0}
.ct-dr .sh-f .ct-sum{gap:6px}
.ct-dr .sh-f .ct-sum .tot{font-size:16px}
.ct-empty .ic{background:var(--white);box-shadow:inset 0 0 0 1.5px var(--ink)}
.ct-page .ct-empty h2{font-size:26px;text-transform:uppercase;letter-spacing:-.01em}

/* ---------- pénztár: mezők 48 px, 12 px sugár; címkék 12 px szürke ----------
   [PENZTAR-PROFI-1015 javítás] EGY keret-skála a pénztárban (mint a base.css mezői és a Shopify-pénztár): nyugalomban 1 px hajszálvonal (var(--line-2)) a mezőn,
   a kód-mezőn és a választó-kártyán, 1,5 px a kis jelölőkön (rádió, négyzet: var(--chk-line)); fókuszban / kiválasztva 2 px fekete; hiba: piros. (Volt: 1,5 px fekete minden mezőn.) */
.co-pg .fld input,.co-pg .fld select,.co-pg .fld textarea{height:48px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line-2);padding:17px 14px 2px;font-size:16px;font-weight:500}   /* [IOS-ZOOM-1015] 16 px alatt az iPhone ránagyít a mezőre */
.co-pg .fld textarea{height:auto;min-height:96px;padding-top:22px}
.co-pg .fld input:focus,.co-pg .fld select:focus,.co-pg .fld textarea:focus{box-shadow:inset 0 0 0 2px var(--ink)}
.co-pg .fld.bad input,.co-pg .fld.bad select{box-shadow:inset 0 0 0 1.5px var(--err)}
.co-pg .fld label{left:14px;top:14px;font-size:14px;color:var(--mute)}
.co-pg .fld input:focus+label,.co-pg .fld input:not(:placeholder-shown)+label,.co-pg .fld textarea:focus+label,.co-pg .fld textarea:not(:placeholder-shown)+label,.co-pg .fld select+label,.co-pg .fld.pre label{top:5px;font-size:12px;color:var(--mute)}
.co-pg .fld.pre input{padding-left:52px}
.co-pg .fld .pf{left:14px;top:20px;font-size:16px;font-weight:500;color:var(--ink)}
.co-pg .fld .msg,.co-pg .fld .help{font-size:12px}
.co-pg .fld .help{color:var(--mute)}
.co-pg .fld{margin-bottom:10px}
/* [PENZTAR-PROFI-1015 javítás] a 6 kód-mező telefonon kitölti a sort (a fenti e-mail-mezővel egy vonalban végződik); 768 px-től dobozonként legfeljebb 56 px */
.co-code .otp{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;max-width:none}
@media (min-width:768px){ .co-code .otp{grid-template-columns:repeat(6,minmax(0,56px))} }
.co-code .otp input{height:48px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line-2);font-size:18px}
.co-code .otp input:focus{box-shadow:inset 0 0 0 2px var(--ink)}
.co-code.bad .otp input{box-shadow:inset 0 0 0 1.5px var(--err)}

/* szállítás / fizetés választó: vonalas kártyák 12 px sugárral, az aktív 2 px fekete; a rádió-kör is vonalas
   [PENZTAR-PROFI-1015 javítás] a két csoport (Szállítási mód, Fizetés) EGY sor-mintát kap (checkout.js optHTML): 22 px-es rádió balra a cím sorában,
   a cím mellett jobbra (ugyanabban a sorban) az ár vagy a kártyalogók, alatta a leírás teljes szélességben. Nincs abszolút pozíció. */
.co-pg .opt{display:grid;grid-template-columns:22px minmax(0,1fr) auto;column-gap:12px;row-gap:2px;align-items:start;min-height:0;border-radius:12px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line-2);padding:14px 16px;margin-bottom:8px}
.co-pg .opt.on{box-shadow:inset 0 0 0 2px var(--ink)}
.co-pg .opt .rd{grid-column:1;grid-row:1}
.co-pg .opt b,.co-pg .opt .opt-t{grid-column:2;grid-row:1;font-size:14px;font-weight:700;line-height:22px}
.co-pg .opt span{font-size:12px;color:var(--mute)}
.co-pg .opt .opt-s{grid-column:2/-1;grid-row:2;display:block;margin:0;font-size:12px;line-height:1.5;color:var(--mute);text-wrap:pretty}
.co-pg .opt .opt-s span{display:inline;margin:0;font-size:inherit;color:inherit}
.co-pg .opt .opt-s svg{vertical-align:-2px;margin-right:2px}
.co-pg .opt .pr,.co-pg .opt .ic{grid-column:3;grid-row:1;align-self:start;margin:0}
.co-pg .opt .pr{font-size:14px;font-weight:700;line-height:22px;color:var(--ink);white-space:nowrap;text-align:right}
.co-pg .opt .ic{display:flex;align-items:center;height:22px}
.co-pg .opt .ic .pmk{border-radius:4px}
.co-pg .rd{box-shadow:inset 0 0 0 1.5px var(--chk-line)}
.co-pg .opt.on .rd{box-shadow:inset 0 0 0 7px var(--ink)}
/* a kiválasztott Bankkártya + a benne lenyíló kártyamentés: a keret a közös dobozon (.opt-w), a gomb maga keret nélküli */
.co-pg .opt-w{border-radius:12px;background:var(--white);box-shadow:inset 0 0 0 2px var(--ink);margin-bottom:8px}
.co-pg .opt-w>.opt,.co-pg .opt-w>.opt.on{box-shadow:none;margin:0;background:none}
.co-pg .opt-x{padding:0 16px 14px 50px;margin-top:-6px}
.co-pg .opt-x .chk{padding:6px 0 0;font-size:13px;line-height:1.45;color:var(--ink)}
.co-sec.bad .opt:not(.on){box-shadow:inset 0 0 0 1.5px var(--err)}
/* [LISTA-GEP-1015] a pénztár jelölőnégyzete (ÁSZF, kártyamentés, GF, gyors fizetés) NEM kap külön fekete keretet: ugyanaz a finom négyzet, mint a szűrő-lapon
   (base.css .chk .bx: 22 px, 6 px sarok, 1,5 px var(--line-2); bepipálva fekete tömör + fehér pipa; hiba: var(--err) keret). Olivér 10-15: „fura a design a kockának”. */
.co-pg .chk,.co-pg .chk a{font-size:14px}
.co-pg .chk-msg{font-size:12px}
.co-pg .co-err{background:none;border-radius:0;padding:0}
.co-pg .tag.club{background:var(--ink);color:#fff}
.co-pg .or-line{font-size:12px;color:var(--mute)}
.co-pg .lnk{text-decoration:underline;text-underline-offset:3px}
.co-pg .co-code{background:none;border-radius:0}
.co-pg .co-xpw .co-xpn{font-size:12px}

/* ---------- a fejléc-sziget a pénztárban is (chrome „co”): a „Kosár” vissza-link és a lakat halk, nem verzál ---------- */
.hd.co .co-back{font-size:13px;font-weight:600;text-transform:none;letter-spacing:0}
.hd.co .co-lock{font-size:12px;font-weight:500;text-transform:none;letter-spacing:0}
/* ── kereses-1014.css ── */
/* Griff v2 · kereses-1014.css — [KERESES-1014] (10-14). A lista.css után, utolsó rétegek.
   Kereső-lap (.ly.full.search, chrome.js G.openSearch) a lista nyelvén: fehér, #1A1A1A / #E5E5E5 hajszálvonal / #555 másodlagos.
   Mező: 48 px, 1,5 px fekete vonal, 999 px, nagyító; jobbra „Mégse”. Üresen chipek + „Utoljára nézted” körök; gépelésre kártya-rács. */

/* ---------- fej: mező + Mégse ---------- */
.search .sr-h{grid-template-columns:minmax(0,1fr) auto;gap:4px;padding:10px var(--gut);border-bottom:1px solid #E5E5E5}
.search .sr-f{height:48px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink);padding:0 6px 0 16px;gap:10px}
.search .sr-ic{color:var(--ink)}
.search .sr-ic svg{width:20px;height:20px}
.search .sr-f input{font-size:16px;font-weight:500;color:var(--ink);padding:0}
.search .sr-f input::placeholder{color:#555;font-weight:400}
.search .sr-f input::-webkit-search-decoration,.search .sr-f input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.search .sr-clr{display:none;width:36px;height:36px;border-radius:50%;place-items:center;color:var(--ink);background:none;flex:none}
.search .sr-f.has .sr-clr{display:grid}
.search .sr-clr svg{width:18px;height:18px}
.search .sr-x{height:48px;padding:0 4px 0 12px;font-size:14px;font-weight:600;color:var(--ink);background:none;border-radius:0}
.search .sr-go{display:none}

/* ---------- törzs ---------- */
.search .sr-b{padding:18px var(--gut) 32px}
.search .sr-sec{font-size:14px;font-weight:700;color:var(--ink);margin:0 0 10px;letter-spacing:0;text-transform:none}
.search .sr-chips{gap:8px;margin:0 0 26px}
.search .sr-chips .chip{height:40px;padding:0 16px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px #E5E5E5;color:var(--ink);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none}

/* „Utoljára nézted”: körök, mint a lista story-körei (76 px, 1,5 px #E5E5E5 gyűrű, 12 px #555 felirat) */
.search .sr-seen{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gut));padding:0 var(--gut) 4px}
.search .sr-seen::-webkit-scrollbar{display:none}
.search .sr-c{flex:none;width:78px;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;text-decoration:none}
.search .sr-c .ph{display:block;width:76px;height:76px;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 0 0 1.5px #E5E5E5}
.search .sr-c .ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 10%}
.search .sr-c>span:last-child{font-size:12px;font-weight:500;color:#555;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}

/* találatok: kategória-sor hajszálvonallal · találatszám 13 px #555 · kártya-rács (G.card, a lista kártyája) · „Mind a N találat” vonalas gomb */
.search .sr-cat{margin:0 0 4px}
.search .sr-cat a{min-height:46px;border-bottom:1px solid #E5E5E5;font-size:14px;padding:0;background:none}
.search .sr-cat a b{font-weight:700}
.search .sr-cat a span{font-size:13px;color:#555}
.search .sr-n{font-size:13px;color:#555;margin:0 0 10px}
.search .sr-cat+.sr-n{margin-top:14px}
.search .sr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;row-gap:2px;margin:0 calc(-1 * var(--gut))}
.search .sr-grid .card-img{aspect-ratio:3/4.2;border-radius:0}
.search .btn.sr-all{display:flex;height:48px;margin-top:16px;border-radius:999px;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);font-size:14px;font-weight:700;letter-spacing:0;text-transform:none}
.search .sr-other{margin-top:14px;font-size:13px;color:#555}
.search .sr-other .lnk{color:var(--ink);font-weight:600}
.search .sr-none{font-size:14px;color:var(--ink);line-height:1.45;padding:2px 0 16px}

@media (hover:hover) and (pointer:fine){
  .search .sr-chips .chip:not(.on):hover{background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)}
  .search .sr-c:hover .ph{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line-2)}
  .search .sr-c:hover>span:last-child{color:var(--ink)}
  .search .sr-cat a:hover{background:none}
  .search .sr-cat a:hover b{text-decoration:underline;text-underline-offset:3px}
  .search .btn.sr-all:hover{background:var(--ink);color:#fff}
  .search .sr-x:hover{text-decoration:underline;text-underline-offset:3px}
}

/* gép: felső panel (base.css), 4 oszlopos rács, a rács a 880 px-es oszlopon belül marad */
@media (min-width:1024px){
  .ly.full.search{max-height:88vh}
  .search .sr-h{padding-top:12px;padding-bottom:12px}
  .search .sr-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin:0}
  .search .sr-seen{margin:0;padding:0 0 4px}
  .search .sr-c{width:96px}
  .search .sr-c .ph{width:92px;height:92px}
  .search .sr-c>span:last-child{font-size:13px}
  .search .btn.sr-all{width:auto;min-width:280px;margin-left:auto;margin-right:auto}
}
/* ── narancs-1014.css ── */
/* Griff v2 · narancs-1014.css — A FŐ GOMB SZÍNE: OI-NARANCS ÁTMENET (Olivér 10-14: „a zöld nem tetszik… narancssárga mint OI-nál, azok a menő átmenetes gombok” → „igen a narancs tetszik”).
   Pont az OI75 app gombja: linear-gradient(135deg,#FF8A3C,#E8641F), fehér felirat. A build LEGUTOLSÓKÉNT fűzi be. */
:root{--accent:#F2712A; --accent-2:#E8641F; --accent-text:#C4530F; --accent-soft:#FFF1E8; --tint:#FFF8F3; --tint-2:#FFEDE0}
.btn.p,.btn.p.w,.btn.p.sm,.pd-add-in,.pd-fit-ok,.pd-isl .btn.p,.ct-page .btn.p,.ct-dr .btn.p,.ct-ad .btn.p,.co-pg .btn.p,.pl-sh .sh-f .btn.p,.hm-go.p{background:linear-gradient(135deg,#FF8A3C,#E8641F);color:#fff;box-shadow:none}
.btn.p[disabled],.btn.p.off{background:linear-gradient(135deg,#FFC7A3,#F3B08C);color:#fff;opacity:1}
@media (hover:hover) and (pointer:fine){ .btn.p:hover,.btn.p.w:hover,.pd-isl .btn.p:hover,.co-pg .btn.p:hover{background:linear-gradient(135deg,#FF7E2B,#D95A17);color:#fff} }
.btn.p:active{background:linear-gradient(135deg,#F06E22,#C9520F)}
.cnt{background:#1A1A1A;color:#fff}                         /* kosár-számláló: fekete, nem narancs */
.ft-nl .btn.p{background:var(--ink);color:#fff}             /* hírlevél-gomb marad fekete (egy narancs gomb egy lapon) */
/* ── fix-lista-1014.css ── */
/* [APP-AUDIT-1014] lista — az app-átnézés javításai (csak ennek a területnek a szabályai; app-only szabály: html.is-app alatt) */

/* [APP-AUDIT-1014 #25/#121] rács: a teljes szélességű „Add meg a méreted” (a 4. kártya után) előtt nincs lyuk 3 és 5 oszlopnál sem —
   a következő 1–2 kártya kitölti a sort, a doboz a következő sorba kerül (élő oszlopváltáskor is) */
.pl-grid{grid-auto-flow:row dense}

/* [APP-AUDIT-1014 #30] fehér hátterű fotón (órák, táskák) is látszik a −X% címke és a szív köre: halk hajszálvonal */
.badges .tag{box-shadow:inset 0 0 0 1px rgba(14,16,19,.08)}
.grid .card .fav,.rail .card .fav,.pl-grid .card .fav{box-shadow:inset 0 0 0 1px rgba(14,16,19,.08)}

/* [APP-AUDIT-1014 #33] érintőképernyőn nincs hover: a kártya második (hover-)képe le sem töltődik (display:none lusta kép nem tölt) */
@media (hover:none){ .card-img img.alt{display:none} }

/* [APP-AUDIT-1014 #35] szűrő-lap: egyféle hajszálvonal — a sorok között is a szekciók szürkéje, nem a barack --tint-2 */
.chk.pl-o,.pl-so{border-bottom-color:var(--line)}

/* [APP-AUDIT-1014 #36/#112/#133] szűrő-lap lábléc: „Törlés” és „N darab mutatása” egyforma széles (a felirat nowrap, kifér) */
.pl-sh .sh-f .row2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* [APP-AUDIT-1014 #37] akció: a Női/Férfi kapcsoló telefonon és tableten a sávval egy szélességű (gépen marad a 300 px) */
@media (max-width:1023px){ .pl-g{max-width:none} }

/* [APP-AUDIT-1014 #41] rendezés-chipek egy sorban, nincs árva „Ár ↓”: telefonon vízszintesen húzható sor a lap széléig;
   tableten / gépen (440 px-es oldalpanel) kisebb belső térközzel kifér egy sorba */
.pl-rch{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-top:2px;padding-bottom:2px}
.pl-rch::-webkit-scrollbar{display:none}
.pl-rch .chip{flex:none}
@media (max-width:767px){
  .pl-rch{margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));padding-left:var(--gut);padding-right:var(--gut);scroll-padding:0 var(--gut);overscroll-behavior-x:contain}
}
@media (min-width:768px){ .pl-rch{gap:6px} .pl-rch .chip{padding:0 12px} }

/* [APP-AUDIT-1014 #11] termék-sávok (főoldal, terméklap): a név mindig két sornyi helyet kap → az árak egy vonalban */

/* [APP-AUDIT-1014 #127] appban iPaden (≥768 pt) a nézet-gombok címkéje nem a valódi oszlopszám (tableten +1, gépen +2) → ott nincsenek
   (a plp.js cols() ott az alap nézetet adja); a „Szűrő és rendezés” pirula a jobb szélen marad, gépes szélességen a szűrő-chipek középen */
@media (min-width:768px){
  html.is-app .pl-vv{display:none}
  html.is-app .pl-bar .pl-bc,html.is-app .pl-flo .pl-bc{grid-column:2}
  html.is-app .pl-bar .pl-pill,html.is-app .pl-flo .pl-pill{grid-column:3}
}

/* [APP-AUDIT-1014 2. kör] sávban az árak egy vonalban, üres sor nélkül: a kártya oszlop, az ár alulra kerül (a sáv kártyái egyforma magasak) */
.rail .card{display:flex;flex-direction:column}
.rail .card-b{flex:1;display:flex;flex-direction:column}
.rail .card .c-price,.rail .card .c-pr{margin-top:auto}
@media (max-width:767px){ .pl-bar .pl-pill,.pl-flo .pl-pill{grid-column:2 / -1} }
/* ── fix-pdp-1014.css ── */
/* [APP-AUDIT-1014] pdp — az app-átnézés javításai (csak ennek a területnek a szabályai; app-only szabály: html.is-app alatt) */

/* [APP-AUDIT-1014 #45] a sziget 2. sora („raktáron, jellemzően hétfőn nálad”) két sorba törhet, nem vágódik szó közben */
.pd-isl-t span{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.25}

/* [APP-AUDIT-1014 #49] „Szállítás és visszaküldés”: nincs pötty, nincs behúzás (a .pd-acc .acc .ab ul erősebb volt a .pd-ship-nél) */
.pd-acc .acc .ab ul.pd-ship{list-style:none;padding:0;margin:0}

/* [APP-AUDIT-1014 #50] az „Utoljára nézted” sáv (a data-slot=seen első gyereke) is kapja a 30 px-es sávközt */
.pd-rails>.sec~[data-slot=seen]>.sec:first-child{margin-top:30px}

/* [APP-AUDIT-1014 #51] az aktív pötty alakban is különbözik (nyújtott, fehér keretes), sötét fotón is látszik */
.pd-dots i{transition:width .2s}
.pd-dots i.on{width:16px;border-radius:3px;background:#1A1A1A;box-shadow:0 0 0 1px #fff}

/* [APP-AUDIT-1014 #52] a lapokon (mérettáblázat, méretválasztó, „Kosárba tetted” szett-sora) ugyanazok a pirula-méretek, mint a terméklapon */
.pd-chz,.pd-szg{gap:8px}
.pd-chz .z,.pd-chz .z.out,.pd-szg .z,.pd-szg .z.out,.pd-szs .pd-szg .z{height:44px;border-radius:999px;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);font-size:13px;font-weight:600;line-height:1;text-decoration:none}
.pd-chz .z.on,.pd-szg .z.on{background:var(--ink);color:#fff;box-shadow:none}
.pd-chz .z.out,.pd-szg .z.out{color:#999;box-shadow:inset 0 0 0 1px #E5E5E5;text-decoration:line-through;text-decoration-thickness:1px}
.pd-chz .z small,.pd-szg .z small{display:none}
.pd-chz .z.flash,.pd-szg .z.flash{animation:pd-flash .9s}
.sz-sh .sz-zs .z{height:40px;border-radius:999px;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);font-size:12.5px;font-weight:600;text-decoration:none}
.sz-sh .sz-zs .z.on{background:var(--ink);color:#fff;box-shadow:none}
.sz-sh .sz-zs .z.out,.sz-sh .sz-zs .z[disabled]{color:#999;box-shadow:inset 0 0 0 1px #E5E5E5;text-decoration:line-through}
.sz-sh .sz-zs .z small{display:none}
@media (hover:hover) and (pointer:fine){
  .pd-chz .z:not(.on):not(.out):hover,.pd-szg .z:not(.on):not(.out):hover,.sz-sh .sz-zs .z:not(.on):not(.out):not([disabled]):hover{background:#fff;box-shadow:inset 0 0 0 2px var(--ink)}
}

/* [APP-AUDIT-1014 #54] hosszú terméknévnél ne maradjon egy szó egyedül a 2. sorban (régebbi WebKit figyelmen kívül hagyja) */
.pd-h1,.pd h1{text-wrap:balance}

@media (min-width:1024px){
  /* [APP-AUDIT-1014 #43/#118] gépen és iPaden a sziget-sor (ár + érkezés + gomb) az egyetlen fő gomb; a lapon lévő Kosárba gomb rejtve
     (a .btn.w{display:flex} erősebb volt egy sima .pd-add-in-nél) */
  .pd-info .btn.pd-add-in{display:none}
  /* [APP-AUDIT-1014 #119] kétoszlopos fotórácsban a szív a galéria tetején, egy fotón ül (páratlan fotószámnál ne lógjon az üres cellában) */
  .pd-fav{top:16px;bottom:auto;right:16px}
  /* [APP-AUDIT-1014 #61] ha a vásárló-oszlop a magasabb, a galéria ragad (pdp.js colWatch: .stk + top), ne maradjon üres a bal oldal */
  .pd-gal.stk{position:sticky;align-self:start}
  /* [APP-AUDIT-1014 #120] az ajánló-sávok a szekciócímmel egy vonalban kezdődnek, nem a képernyő szélén */
  .pd-rails .rail{padding:0 var(--gut);scroll-padding:0 var(--gut);gap:12px}
}

/* [APP-AUDIT-1014 2. kör] a sziget gombja fix szélességű: a felirat-váltás („Válassz méretet” → „Kosárba tettük”) nem tördeli át a bal oldalt */
@media (max-width:1023px){ .pd-isl{grid-template-columns:minmax(0,1fr) 168px} .pd-isl .btn{width:100%;padding-left:8px;padding-right:8px} }
/* ── fix-kosar-1014.css ── */
/* [APP-AUDIT-1014] kosar — az app-átnézés javításai (csak ennek a területnek a szabályai; app-only szabály: html.is-app alatt) */

/* #64 pénztár, szállítási mód: a [BOLT-KI-1014] óta egyetlen kártya van — ne a kétoszlopos rács bal felében üljön (a dátum ott „okt. / 21.” törik),
   hanem teljes szélességben, a tartalma magasságában. Ha valaha újra két opció lesz, azok maradnak a régi két oszlopban. (web + app) */
.co-ship>.opt:only-child{grid-column:1/-1;min-height:0}

/* #65 kosár az appban: NINCS itt szabály — az új nativ.css adja (html.is-app.tabs .ct-page{padding-bottom:96px} + a lábléc az appban display:none).
   [APP-AUDIT-1014 ellenőr] az itteni .ct-page{padding-bottom:32px} (0,4,2) felülírta a nativ.css 96 px-ét, és lábléc nélkül az összesítő
   „Összesen” sora a Fizetés-pirula alá csúszott (mérve: tartalom alja 732, pirula teteje 692) → kivéve. */

/* #68 kosár: ha az utolsó elem a tétellista (ingyenes szállításnál nincs alatta ajánló), az utolsó sor vonala + az összesítő felső vonala = dupla csík.
   Csak egyoszlopos elrendezésben; ≥1024 px-en az összesítő külön oszlopban van felső vonal nélkül, ott a lista záróvonala kell. (web + app) */
@media (max-width:1023px){
  .ct-main>.ct-lines:last-child>:last-child{border-bottom:0}
}

/* #71 pénztár alja telefonon: a tájékoztató linksor ne érjen a lebegő Fizetendő-sziget alá (16 + 56 + safe-b); ≥768 px-en a checkout.css saját paddingja marad.
   [APP-AUDIT-1014 ellenőr] csak a weben: az appban az új nativ.css már ad a #main-nek 96 px + safe-b alsó helyet a sziget miatt; ezzel együtt
   170 pt üres sáv maradt a linksor és a sziget között (mérve: linksor alja 598, sziget teteje 768) */
@media (max-width:767px){
  html:not(.is-app) .co-main{padding-bottom:calc(112px + var(--safe-b))}
}

/* #75 megjegyzés-mező: az appban ne legyen átméretező fogantyú */
html.is-app .co-pg .fld textarea{resize:none}

/* #76 / #126 iPad (app): a lebegő Összesen/Fizetés és Fizetendő/Fizetek pirula ne fusson a teljes szélességen (a „fejléc-sziget” az appban nincs),
   hanem középre zárva, 560 px-ig — minden iPad-szélességen (768 px-től) */
@media (min-width:768px){
  html.is-app .ct-sticky,html.is-app .co-isl{left:50%;right:auto;transform:translateX(-50%);width:min(560px,calc(100% - 32px))}
}

/* #79 pénztár ≥1024 px: az „Ebből ÁFA” a jobb oldali összesítőben már látszik — a bal oszlop alján ne ismételjük (web + app) */
@media (min-width:1024px){
  .co-vat{display:none}
}

/* [APP-AUDIT-1014 2. kör] kosár ajánló-sáv: a szélektől beljebb, mint a többi sáv; megjegyzés-mező elválasztva a számlaadatoktól */
body[data-page=cart] .sec .rail,body[data-page="404"] .sec>.rail{padding:0 var(--gut);scroll-padding:0 var(--gut);gap:12px}
#co-bill:not([hidden]) ~ #co-note-w{margin-top:28px}
/* ── fix-menu-1014.css ── */
/* [APP-AUDIT-1014] menu — az app-átnézés javításai (csak ennek a területnek a szabályai; app-only szabály: html.is-app alatt) */

/* [APP-AUDIT-1014] #90 #109 menü: az „Összes ›” a jobb szélre igazodjon, mint a darabszámok.
   A .mn-grp .mn-row{padding-right:48px} (lista.css, a kivett lenyitó-nyíl helye) erősebb volt, mint a .mn-gh{padding-right:0}. Web + app. */
.mn-grp .mn-gh{padding-right:0}

/* [APP-AUDIT-1014] #95 menü alja belépve: hosszú e-mail ne lógjon ki (a menü ne legyen oldalra görgethető), hanem „…”-tal vágódjon. Web + app. */
.mn-small a{min-width:0}
.mn-small a .mn-mail{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* [APP-AUDIT-1014] #84 #106 fiók és rendelés-lap: a többsoros kártyák ne stadion/ovális alakúak legyenek.
   A gs.css --r-ui:999px a gombokat teszi pirulává, a kártyákra rendes lekerekítés kell. Web + app. */
.ac-card,.ac-pay,.ac-club,.ac-trk{border-radius:16px}
.ac-or-a{border-radius:12px}   /* gépen a rendelés-sor egér-kiemelése */

/* [APP-AUDIT-1014] #115 rendelés-lap: a „Rendelés betöltése” / „Fizetés ellenőrzése” pörgő a köre közepén.
   A base.css .chk (jelölőnégyzet-sor: 22px-es első oszlop, gap, padding) ráillett az .ac-od-ic.chk-ra. Web + app. */
.ac-od-ic.chk{grid-template-columns:none;gap:0;padding:0;text-align:center}

/* [APP-AUDIT-1014] #94 fiók- és kártyatörlés alsó lapja: a visszavonhatatlan „Törlés” piros (romboló művelet), nem a narancs fő gomb. Web + app. */
.ly.ac-del .sh-f .btn.p{background:#C8321E;color:#fff;box-shadow:none}
.ly.ac-del .sh-f .btn.p:active{background:#A82815}
.ly.ac-del .sh-f .btn.p[disabled]{opacity:.6}
@media (hover:hover) and (pointer:fine){ .ly.ac-del .sh-f .btn.p:hover{background:#B02B18;color:#fff} }

/* [APP-AUDIT-1014] #131 kereső-réteg gépen/iPaden (≥1024): a találati rács egy élben a fejléc-sorral, a „N találat”-tal és a gombbal.
   A desktop.css .grid{padding:0 var(--gut)} beljebb tolta a rácsot (a kereses-1014.css csak a margót nullázta). */
@media (min-width:1024px){
  .search .sr-grid{margin:0;padding:0;gap:12px}
}

/* [APP-AUDIT-1014 2. kör] törlő lapokon a Mégse semleges körvonalas gomb */
.ly.ac-del .sh-f .btn:not(.p){background:#fff;color:#0E1013;box-shadow:inset 0 0 0 1px #D5D8DD}
/* ── fix-home-1014.css ── */
/* [APP-AUDIT-1014] home — az app-átnézés javításai (csak ennek a területnek a szabályai; app-only szabály: html.is-app alatt) */

/* [APP-AUDIT-1014] #5/#89/#116 kategória-körök ≥1024 px-en: a .hm flex-oszlopában (gs.css) a lista.css margin:0 auto-ja miatt a sor
   a tartalma szélességét vette fel (8×128 + 7×28 + 64 = 1284 px), és 1024–1283 px között kitolta az egész lapot (iPad álló: 1032 pt,
   levágott „Cipők”, elérhetetlen „Kiegészítők”, kicsinyített lap, jobbra csúszó kereső). Most a sor a sáv szélességét kapja, a körök
   legfeljebb 120 px-esek, szűkebb ablakban arányosan kisebbek; széles gépen (≥1284) a kép változatlan (128 px-es oszlop, 28 px rés). Weben is. */
@media (min-width:1024px){
  .hm-tiles{width:100%;gap:clamp(16px,2.2vw,28px)}
  .hm-tiles .hm-tile{flex:1 1 0;min-width:0;width:auto;max-width:128px}
  .hm-tiles .hm-tile .ph{width:100%;max-width:120px;height:auto;aspect-ratio:1;margin:0 auto}
}

/* [APP-AUDIT-1014] #124 a Női/Férfi váltó a .hm flex-oszlopában a margin:0 auto (home.css, ≥768) miatt összeesett (820 pt-es iPaden 94 pt-es pötty,
   a „FÉRFI” kilógott): teljes szélesség, legfeljebb 420 px (home.css). Telefonon eddig is teljes szélességű volt, ott nem változik. */
.hm-gsw{width:100%;box-sizing:border-box}

/* [APP-AUDIT-1014] #6/#123 iPaden (≥1024 pt) a desktop.css elrejti a váltót, mert a weben a fejlécben van Női/Férfi — az appban viszont nincs fejléc
   (nativ.css FEJLEC-KI-1014), így a főoldalon sehol sem volt nemváltó. Az appban marad, a tableten megszokott helyén és méretében. */
@media (min-width:1024px){
  html.is-app .hm-gsw{display:block;max-width:420px;margin:0 auto;padding-top:22px}
}

/* [APP-AUDIT-1014] #9 „Gyors szállítás” alcím: a feladás („holnap adjuk fel”) egyben marad, a „fel” nem kerül egyedül a második sorba; a tördelés kiegyensúlyozott */
.hm .sec-h p{text-wrap:balance}
.hm-send [data-eta]{white-space:nowrap}

/* [APP-AUDIT-1014] #17/#129 lábléc-hírlevél 1024–1279 px között (iPad álló, keskeny gép): az 5 oszlopos láblécben a mező ~88 px-re szorult
   („E-mail-c…”), mert mellette állt a gomb. Itt a gomb a mező alá kerül, egyforma szélességgel; 1280 px felett (mező ≥150 px) marad egy sorban. */
@media (min-width:1024px) and (max-width:1279px){
  .ft-nl-r{grid-template-columns:minmax(0,1fr)}
}
/* ── fix-web-1015.css ── */
/* [WEB-1015] web-only csíkok és gombok (Olivér 10-15): narancs előny-csík legfelül, narancs gomb fénye, gépes terméklap egyszerűsítve, pirula Apple/Google Pay */
/* 1) ELŐNY-CSÍK legfelül (csak weben; az appban nincs „tető”): narancs átmenet + lassú fény-söprés; lefelé görgetve a fejléccel együtt elúszik */
html:not(.is-app) #usp.usp:not([hidden]){display:block!important;position:fixed;left:0;right:0;top:0;height:32px;z-index:41;overflow:hidden;
  background:linear-gradient(100deg,#FF8A3C 0%,#F2742A 55%,#E8641F 100%);color:#fff;box-shadow:0 4px 14px -6px rgba(232,100,31,.55);transition:transform .25s ease}
html:not(.is-app) .usp::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.32),rgba(255,255,255,0));transform:skewX(-18deg);animation:usp-sheen 5.5s ease-in-out infinite;pointer-events:none}
@keyframes usp-sheen{0%,50%{left:-40%}85%,100%{left:120%}}
html:not(.is-app) .usp .usp-in{height:32px;color:#fff;font-size:12px;font-weight:500;letter-spacing:.01em}
html:not(.is-app) .usp .usp-i{height:32px;gap:7px;color:#fff}
html:not(.is-app) .usp .usp-i b,html:not(.is-app) .usp .usp-i svg{color:#fff}
html:not(.is-app) .usp .usp-i svg{width:15px;height:15px}
html:not(.is-app) body:has(.usp:not([hidden])){padding-top:92px!important}
html:not(.is-app) body:has(.usp:not([hidden])) .hd{top:32px!important}
html:not(.is-app) .hd.away~.usp{transform:translateY(-100%)}
html:not(.is-app) body:has(.usp:not([hidden])) .hd.away{top:0!important}
@media (min-width:1024px){
  /* gépen mind a 4 előny egy sorban, nem forog */
  html:not(.is-app) .usp .usp-tr{flex-direction:row;justify-content:center;gap:34px;animation:none}
  html:not(.is-app) .usp .usp-i[aria-hidden]{display:none}
  html:not(.is-app) .usp .usp-i{padding:0}
}
@media (prefers-reduced-motion:reduce){ html:not(.is-app) .usp::after{animation:none;display:none} }
/* a csík miatt a lapokon belüli előny-listák fölöslegesek (weben) */
html:not(.is-app) .pd-usp,html:not(.is-app) .hm-usp{display:none!important}

/* 2) NARANCS GOMB FÉNYE (glow): puha narancs fény alatta + a fő Kosárba gombon lassú fény-söprés */
.btn.p:not([disabled]):not(.off),.pd-add-in,.pd-fit-ok,.hm-go.p{box-shadow:0 10px 24px -10px rgba(232,100,31,.75),0 2px 8px -3px rgba(232,100,31,.40)!important}
.btn.p:not([disabled]):not(.off):active,.pd-add-in:active{box-shadow:0 4px 12px -6px rgba(232,100,31,.7)!important;transform:translateY(1px)}
.pd-add-in{position:relative;overflow:hidden}
.pd-add-in::after{content:"";position:absolute;top:0;bottom:0;left:-45%;width:30%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.38),rgba(255,255,255,0));transform:skewX(-18deg);animation:usp-sheen 4.8s ease-in-out infinite;pointer-events:none}
.pd-add-in>*{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){ .pd-add-in::after{animation:none;display:none} }

/* 3) GÉPES TERMÉKLAP: ugyanaz a sima, széles narancs Kosárba, mint mobilon; a keretes ár+gomb doboz nincs */
@media (min-width:1024px){
  .pd-info .btn.pd-add-in{display:flex!important;height:52px;margin-top:16px}
  .pd-info .pd-isl{display:none!important}
}
/* 4) Apple Pay / Google Pay gomb: pirula a Revolut-gomb saját „round” kerekítésével (checkout.js buttonStyle) */
.co-xpt iframe{width:100%!important;min-width:0!important;max-width:100%!important}   /* a Revolut-keret 5 px-szel szélesebb volt → a pirula jobb vége levágódott */
/* [FEJLEC-FENT-1015 v2] Olivér: a narancs csík csak a lap tetején legyen (görgetéskor elmegy, nem jön vissza), a menü-sziget viszont úgy működjön, mint eddig:
   lefelé görgetve elmegy, felfelé húzásra visszajön. A sziget teteje a csík alatt indul, és ahogy a csík kifut, felcsúszik a lap tetejére (--uo, chrome.js) */
html:not(.is-app) #usp.usp:not([hidden]){position:absolute}
html:not(.is-app) .hd.away~.usp{transform:none}
html:not(.is-app) body:has(.usp:not([hidden])) .hd,html:not(.is-app) body:has(.usp:not([hidden])) .hd.away{top:var(--uo,32px)!important}
/* [FLO-1015] a lebegő szűrő-sáv: telefonon a visszajövő menü-sziget alatt (lista.css top), gépen NINCS (Olivér 10-13: gépen a szűrősor nem ragad) */
@media (min-width:1024px){ html:not(.is-app) .pl-flo{display:none!important} }
/* [ZOOM-1015] képnagyító: a kép a lehető legnagyobb (széltől szélig), kis képek nélkül; húzással lapoz, 1 koppintás nagyít, még 1 kicsinyít */
.pd-zm-th{display:none!important}
.pd-zf{padding:0!important}
.pd-zf img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
.pd-zf.z2 img{width:auto;height:230%;max-width:none;max-height:none}
.pd-zm-n{top:calc(10px + var(--safe-t))!important}
.pd-zm-x{top:calc(6px + var(--safe-t))!important;background:#fff!important;box-shadow:0 4px 16px rgba(14,16,19,.10)}

/* [CO-FIX-1015] a pénztár összesítőjében a klubkedvezmény sora látszik (a [KLUB-KI-1014] minden klub-felületet elrejt, de enélkül a Részösszeg + Szállítás ≠ Összesen) */
.co-sum .club-l{display:flex !important}
/* [SZIGET-REST-1015] Olivér: „nulla a fentre zár, nem szép” — görgetve a menü-sziget (.hd.sc) a narancs csík kifutása után sem tapad a lap tetejére:
   legalább 12 px (= gs.css sziget-alap; a .pl-flo top:78px erre számol). A görgetés előtti, teljes szélességű fejléc marad a csík alatt (--uo). */
html:not(.is-app) body:has(.usp:not([hidden])) .hd.sc:not(.co),html:not(.is-app) body:has(.usp:not([hidden])) .hd.sc.away:not(.co){top:max(var(--uo,32px),12px)!important}
/* [PENZTAR-PROFI-1015] A PÉNZTÁR FEJLÉCE A WEBEN (Olivér 10-15: a lebegő üveg-pirula „nem profi”): teljes szélességű fehér sáv a lap tetején, alján 1 px-es #E5E5E5 vonal;
   NEM ragad és nem jön vissza (a lappal együtt elgördül, mint a Shopify-pénztárban). Balra „‹ Kosár”, középen a GRIFF-logó, jobbra lakat + „Biztonságos fizetés”
   (480 px alatt a felirat nem fér ki egy sorban: ott csak a lakat látszik, a felirat a képernyőolvasónak megmarad). Az appban (html.is-app) a fejléc rejtve van: ott nem változik semmi. */
html:not(.is-app) body:has(#hd.co){padding-top:0!important}
html:not(.is-app) .hd.co,html:not(.is-app) .hd.co.sc,html:not(.is-app) .hd.co.away{position:relative!important;top:auto!important;left:auto!important;right:auto!important;transform:none!important;opacity:1!important;pointer-events:auto!important;width:auto!important;height:56px!important;margin:0;border-radius:0!important;background:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;border-bottom:1px solid #E5E5E5!important;transition:none!important}
html:not(.is-app) .hd.co .hd-in{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;height:100%;max-width:1120px;margin:0 auto;padding:0 var(--gut)!important}
html:not(.is-app) .hd.co .hd-l{display:flex;min-width:0}
html:not(.is-app) .hd.co .co-back{height:44px;padding:0 8px 0 0;margin-left:-5px;gap:2px;font-size:13px;font-weight:600;color:var(--ink)}
html:not(.is-app) .hd.co .logo-w{padding:0}
html:not(.is-app) .hd.co .logo{height:20px}
html:not(.is-app) .hd.co .co-lock{display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:0;min-width:0;font-size:12px;font-weight:500;color:var(--mute);white-space:nowrap}
html:not(.is-app) .hd.co .co-lock svg{flex:none;color:var(--ink)}
@media (max-width:479px){ html:not(.is-app) .hd.co .co-lock span{display:block;position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;white-space:nowrap} }
@media (min-width:768px){
  html:not(.is-app) .hd.co,html:not(.is-app) .hd.co.sc,html:not(.is-app) .hd.co.away{height:64px!important}
  html:not(.is-app) .hd.co .logo{height:22px}
}
/* [PENZTAR-PROFI-1015 javítás] a fejléc tartalma a lap tartalmával egy vonalban (nem egy független, 1120 px-es középső sávban):
   „‹ Kosár” = az űrlap bal széle, a lakat jobb széle = az összesítő jobb széle, a logó a kettő között középen.
   768–1023 px: az űrlap 640 px-es, középre zárt oszlopa (.co-main) + var(--gut).
   ≥1024 px: a .co-pg rácsa (checkout.css): W = min(lapszélesség, --maxw) középen; jobb oszlop c2 = max(400 px, 38% W); az űrlap (.co-main) legfeljebb 620 px,
   a bal oszlop jobb szélére zárva, bal belső margója 32 px → bal szél = W − c2 − min(620, W − c2) + 32; az összesítő (.co-in, ≤400 px) a jobb oszlopban
   32 px-től (1440 px-től 56 px-től) → jobb rés = c2 − 32 − min(400, c2 − 64) (1440-től c2 − 56 − min(400, c2 − 88)). A % itt a fejléc szélessége = a lapé. */
@media (min-width:768px) and (max-width:1023px){
  html:not(.is-app) .hd.co .hd-in{max-width:640px;padding:0 var(--gut)!important}
}
@media (min-width:1024px){
  html:not(.is-app) .hd.co .hd-in{--co-w:min(100%,var(--maxw));--co-c2:max(400px,calc(var(--co-w) * .38));max-width:var(--maxw);
    padding:0 calc(var(--co-c2) - 32px - min(400px,var(--co-c2) - 64px)) 0 calc(var(--co-w) - var(--co-c2) - min(620px,var(--co-w) - var(--co-c2)) + 32px)!important}
}
@media (min-width:1440px){
  html:not(.is-app) .hd.co .hd-in{padding-right:calc(var(--co-c2) - 56px - min(400px,var(--co-c2) - 88px))!important}
}
/* a lap közvetlenül a fejléc alatt indul; gépen több levegő fölötte, és az oldalsó összesítő a lap tetejétől 24 px-re ragad (a fejléc elgördült, nem takarja) */
@media (min-width:1024px){
  html:not(.is-app) body:has(#hd.co) .co-main,html:not(.is-app) body:has(#hd.co) .co-aside{padding-top:32px}
  html:not(.is-app) body:has(#hd.co) .co-in{top:24px}
}
/* [PENZTAR-PROFI-1015] a Belépés „Folytatás” gombja fekete (kosar-1014): a narancs gomb fénye (2. pont) alatta nem kell */
.co-ret .btn.p:not([disabled]):not(.off){box-shadow:none!important}
/* [PENZTAR-PROFI-1015 javítás] görgetve a menü-sziget üvege kevésbé áttetsző (0,8 → 0,94): a mögötte elfutó méret-chipek / feliratok ne olvashatók
   rajta keresztül (Olivér: clean, nem effekt). Az elmosás és a fény-söprés marad; a görgetés előtti, fehér teljes szélességű fejléc nem változik. */
html:not(.is-app) .hd.sc:not(.co){background:rgba(255,255,255,.94)}
/* ── lista-gep-1015.css ── */
/* [LISTA-GEP-1015] Gépi lista (≥1024 px, nem az appban): bal oldalsáv mindig látható (kategóriafa + szűrők), a cím mellett rendezés + 3/4 oszlop,
   aktív szűrő-chipek a cím alatt. Mobil, tablet és az app változatlan. A jóváhagyott vázlat: v2/koncepciok/sketch-gep.html. */

/* csendes morzsa a cím fölött (minden szélességen): felfelé a kategóriafában */
.pl-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 6px;font-size:12.5px;font-weight:500;color:var(--mute)}
.pl-crumb a{color:var(--mute);text-decoration:none}
.pl-crumb span{color:var(--mute-2)}
@media (hover:hover) and (pointer:fine){ .pl-crumb a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px} }

.pl-side,.pl-tools{display:none}

@media (min-width:1024px){
  html:not(.is-app) .pl-wrap.has-side{display:grid;grid-template-columns:216px minmax(0,1fr);column-gap:28px;padding:0 var(--gut);align-items:start}
  html:not(.is-app) .pl-wrap.has-side .pl-side{display:block;position:sticky;top:var(--st);max-height:calc(100vh - var(--st) - 16px);overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;scrollbar-color:#D6D6D6 transparent;padding:18px 8px 24px 0;transition:top .22s ease,max-height .22s ease;--st:16px}
  html:not(.is-app) .hd:not(.away) ~ #main .pl-side{--st:84px}

  /* fa */
  html:not(.is-app) .pl-tree{padding-bottom:14px}
  html:not(.is-app) .pl-tree ul{list-style:none;margin:0;padding:0}
  html:not(.is-app) .pl-t{display:block;padding:6px 0;font-size:14px;font-weight:500;line-height:1.3;color:var(--ink);text-decoration:none}
  html:not(.is-app) .pl-t0,html:not(.is-app) .pl-tree>.pl-tl>li>.pl-t{font-weight:600}
  html:not(.is-app) .pl-tl .pl-tl .pl-t{padding-left:14px;font-size:13.5px;font-weight:500}
  html:not(.is-app) .pl-tl .pl-tl .pl-tl .pl-t{padding-left:28px}
  html:not(.is-app) .pl-t.in{font-weight:700}
  html:not(.is-app) .pl-t.on{font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
  html:not(.is-app) .pl-up{display:inline-flex;align-items:center;gap:4px;font-size:13.5px;font-weight:600;padding:6px 0 14px;color:var(--ink);text-decoration:none}
  html:not(.is-app) .pl-up svg{width:14px;height:14px}

  /* szekciók: ugyanaz a nyelv, mint a szűrő-lap (fekete 14/700 cím, hajszálvonal) */
  html:not(.is-app) .pl-side .pl-sec{padding:18px 0;margin:0;border-top:1px solid var(--line);border-bottom:0}
  html:not(.is-app) .pl-side .pl-sec h3{font-size:14px;font-weight:700;color:var(--ink);margin:0 0 12px}
  html:not(.is-app) .pl-side .pl-zs{gap:6px}
  html:not(.is-app) .pl-side .pl-zs .z{height:44px;font-size:13px}
  /* [MERET-RACS-1016] a méretnév nem törik két sorba, az „Egyéb” hosszú nevei kisebb betűvel férnek ki */
  html:not(.is-app) .pl-side .pl-zs .z{white-space:nowrap;padding:0 4px;min-width:0;overflow:hidden;text-overflow:ellipsis}
  html:not(.is-app) .pl-side .pl-zs2 .z{font-size:12px}
  html:not(.is-app) .pl-side .pl-zs .z small{font-size:10px}
  html:not(.is-app) .pl-side .pl-zh{font-size:12px;font-weight:600;color:var(--mute);margin:10px 0 6px}
  html:not(.is-app) .pl-side .chk.pl-o{min-height:36px;padding:4px 0;border-bottom:0;gap:10px;font-size:13.5px;width:100%}
  html:not(.is-app) .pl-side .pl-o small{font-size:12px;color:var(--mute)}
  html:not(.is-app) .pl-side .pl-o em{font-size:12px}
  html:not(.is-app) .pl-side .chk.pl-o:hover{background:none}
  html:not(.is-app) .pl-side .pl-o.pl-x{display:none}
  html:not(.is-app) .pl-side .pl-mk{margin-top:6px;font-size:13px}

  /* fő oszlop: cím balra, eszközök jobbra ugyanabban a sorban */
  html:not(.is-app) .pl-wrap.has-side .pl-main{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;min-width:0}
  html:not(.is-app) .pl-wrap.has-side .pl-main>*{grid-column:1/-1}
  html:not(.is-app) .pl-wrap.has-side .pl-main>.pl-h{grid-column:1;grid-row:1;padding:18px 0 0}
  html:not(.is-app) .pl-wrap.has-side .pl-main>.pl-tools{grid-column:2;grid-row:1;align-self:end;display:flex;align-items:center;gap:16px;padding-bottom:2px}

  /* aktív szűrők chipként a cím alatt (a lista.css a sávba tette és itt elrejtette) */
  html:not(.is-app) .pl-wrap.has-side .pl-chips{display:flex !important;flex-wrap:wrap;gap:8px;padding:14px 0 0;overflow:visible}
  html:not(.is-app) .pl-wrap.has-side .pl-chips:empty{display:none !important}
  html:not(.is-app) .pl-wrap.has-side .pl-chips .chip{height:36px;padding:0 12px;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2);border-radius:999px;font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
  html:not(.is-app) .pl-wrap.has-side .pl-chips .chip svg{width:13px;height:13px;color:var(--mute)}
  html:not(.is-app) .pl-wrap.has-side .pl-chips .chip.clr{box-shadow:none;text-decoration:underline;text-underline-offset:3px;padding:0 6px}

  /* gépen rejtve: a fekete sáv (a DOM-ban marad, a nativ.js olvassa), a körök (helyettük a fa), a méret-kérdés doboza (a Méret szekció mindig látszik) */
  html:not(.is-app) .pl-wrap.has-side .pl-bar,html:not(.is-app) body:has(.pl-wrap.has-side) .pl-flo{display:none !important}
  html:not(.is-app) .pl-wrap.has-side .pl-cats{display:none}
  html:not(.is-app) .pl-wrap.has-side .pl-ask{display:none}

  /* rács: data-c 2 → 3 oszlop (alap), 3 → 4, 1 (mobilról mentett) → 2 */
  html:not(.is-app) .pl-wrap.has-side .pl-grid{padding:0;column-gap:20px;row-gap:36px}
  html:not(.is-app) .pl-wrap.has-side .pl-grid[data-c="2"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  html:not(.is-app) .pl-wrap.has-side .pl-grid[data-c="3"]{grid-template-columns:repeat(4,minmax(0,1fr))}
  html:not(.is-app) .pl-wrap.has-side .pl-grid[data-c="1"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  html:not(.is-app) .pl-wrap.has-side .pl-res{margin-top:20px}
  html:not(.is-app) .pl-wrap.has-side .pl-more{padding:28px 0 8px}

  /* rendezés-legördülő */
  html:not(.is-app) .pl-dd{position:relative}
  html:not(.is-app) .pl-dd summary{list-style:none;display:inline-flex;align-items:center;gap:6px;height:36px;font-size:13.5px;font-weight:500;color:var(--ink);cursor:pointer;white-space:nowrap}
  html:not(.is-app) .pl-dd summary b{font-weight:700}
  html:not(.is-app) .pl-dd summary::-webkit-details-marker{display:none}
  html:not(.is-app) .pl-dd summary svg{width:16px;height:16px;transition:transform .15s ease}
  html:not(.is-app) .pl-dd[open] summary svg{transform:rotate(180deg)}
  html:not(.is-app) .pl-ddb{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:248px;background:#fff;border-radius:12px;box-shadow:0 0 0 1px var(--line),0 16px 40px -16px rgba(14,16,19,.28);padding:4px 16px}
  html:not(.is-app) .pl-ddb .pl-so{min-height:44px;font-size:14px;width:100%}

  /* halk 3/4 oszlopos váltó (nincs fekete kör) */
  html:not(.is-app) .pl-vt{display:flex;gap:4px}
  html:not(.is-app) .pl-vt button{width:32px;height:32px;display:grid;place-items:center;background:none;color:var(--mute-2);border-radius:8px}
  html:not(.is-app) .pl-vt button[aria-pressed="true"],html:not(.is-app) .pl-vt button:hover{color:var(--ink)}
  html:not(.is-app) .pl-vt svg{width:18px;height:18px}
}
@media (min-width:1280px){
  html:not(.is-app) .pl-wrap.has-side{grid-template-columns:240px minmax(0,1fr);column-gap:40px}
}

/* [MARKA-1015] a menü „Márkák” blokkja: kétoszlopos, sima szöveges lista (nincs chip, nincs szürke) */
.mn-brands{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;padding:2px 0 10px}
.mn-brands a{display:block;padding:10px 0;font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (hover:hover) and (pointer:fine){ .mn-brands a:hover{text-decoration:underline;text-underline-offset:4px} }
/* ── i18n.css ── */
/* [I18N-VALTO-1015] ország / nyelv / pénznem választó (lábléc, menü, alsó lap) */
.loc-btn{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--line);border-radius:var(--r-pill);padding:9px 14px;font:500 var(--fs-s)/1.2 var(--font);color:var(--ink);cursor:pointer}
.loc-btn svg{flex:none}
.ft-loc{margin:0 0 14px}
.mn-loc{display:flex;width:100%;margin:0 0 10px}
.loc-list{list-style:none;margin:0;padding:0}
.loc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 2px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.loc-row b{display:block;font-weight:600}
.loc-row small{display:block;color:var(--mute);font-size:var(--fs-s);margin-top:2px}
.loc-list li:last-child .loc-row{border-bottom:0}
.hd-r .ib.hd-loc,.hd-loc{display:inline-flex;align-items:center;gap:5px;width:auto;min-width:40px;padding:0 8px;font:600 var(--fs-xs)/1 var(--font);color:var(--ink)}
.hd-loc span{white-space:nowrap}
.loc-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 12px;font-size:var(--fs-s)}
.loc-links a{color:var(--ink);text-decoration:none}
.loc-links a[aria-current]{font-weight:600}
.loc-links small{color:var(--mute);font-size:inherit}
.loc-sug{display:flex;align-items:center;gap:12px;padding:10px var(--gut);border-bottom:1px solid var(--line);background:#fff;font-size:var(--fs-s)}
.loc-sug p{flex:1;margin:0}
.loc-sug .ib{flex:none}
@media (max-width:420px){.hd-r .ib.hd-loc span{display:none}.hd-r .ib.hd-loc{padding:0}}
.hd:not(.co) .hd-r .ib.hd-loc{width:auto;padding:0 8px}
@media (max-width:420px){.hd:not(.co) .hd-r .ib.hd-loc{width:42px;padding:0}}
.ac-loc{margin:14px 0}
/* ── suti.css ── */
/* Griff v2 · suti.css — süti-tájékoztató kártya és Süti-beállítások lap [JOGI-1015] [SUTI-1015]. Előtag: .suti-. Csak base-tokenek, !important nincs.
   A kártya a lap alján lebeg, nem modális, nem takarja a lebegő szigeteket: telefonon a terméklap, a kosár és a pénztár szigete FÖLÖTT ül
   (body.lift + --lift, a pénztárban a fizetés-sziget magassága) — a terméklapon akkor is, ha a sziget épp rejtve van; gépen bal alul 400 px széles.
   Amíg látszik, a lap alja a kártya magasságával (--suti-h, a suti.js méri) kigörgethető, a toast fölötte jelenik meg.
   Tájékoztató mód (.suti-i): szöveg + vonalas × jobbra fent, gomb nincs. Hozzájárulás-mód (.suti-c): három egyforma, fekete keretes gomb, × nincs.
   Az appban nem jelenik meg (suti.js). Fehér alap, keretes doboz, szürke felület nincs; a gombok egy sorban egyforma szélesek. */

/* ---------- helyzet: alsó rés (--suti-g) + a lebegő sziget helye (--suti-l) + iOS home-csík ---------- */
body.suti-on{--suti-g:12px;--suti-l:0px}
body.suti-on.lift{--suti-l:max(72px,calc(var(--lift) + 8px))}                      /* terméklap (12 + 60 px) és kosár (16 + 56 px) alsó szigete fölött */
body.suti-on[data-page=checkout]{--suti-l:84px}                                    /* pénztár: a Fizetendő-sziget (16 + 56 px) fölött; [SUTI-1015 3. kör] +12 px: a sziget fehér alapjának felső vonala ne a kártya aljára essen */
@media (min-width:768px){ body.suti-on{--suti-g:24px} }
/* [SUTI-1015] a lap alja (hírlevél, ©, a pénztár jogi sorai) kigörgethető a kártya mögül */
html body.suti-on{padding-bottom:calc(var(--suti-h,0px) + var(--suti-g,12px))}
/* [SUTI-1015 3. kör] gépi lista (lista-gep-1015.css): a ragadó, saját görgetésű szűrőoszlop alja is kigörgethető a kártya fölé (a body padding-je ezen nem segít,
   az oszlop magassága a 100vh-ból jön). A lista-gep szabályánál (0,4,1) erősebb, így a sorrend nem számít. A lista-ügynök komponense: vele egyeztetve maradjon itt. */
@media (min-width:1024px){ html:not(.is-app) body.suti-on .pl-wrap.has-side .pl-side{padding-bottom:calc(var(--suti-h,0px) + var(--suti-g,24px) + 8px)} }

/* ---------- a kártya ---------- */
.suti{position:fixed;left:12px;right:12px;bottom:calc(var(--suti-g,12px) + var(--suti-l,0px) + var(--safe-b));z-index:calc(var(--z-stick) + 1);
  background:var(--white);color:var(--ink);border-radius:var(--r-sheet);box-shadow:0 0 0 1px var(--line),var(--shadow);padding:14px 16px 16px;
  opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .22s var(--ease),transform .22s var(--ease),bottom .2s var(--ease)}
.suti.on{opacity:1;transform:none;pointer-events:auto}
.suti-p{font-size:var(--fs-s);line-height:1.5;color:var(--ink)}
.suti-p b{font-weight:700}
.suti-p .lnk{white-space:nowrap;position:relative}
.suti-p .lnk::after{content:"";position:absolute;inset:-14px -6px}   /* [SUTI-1015 3. kör] a „Részletek” érintési felülete ~44 px magas, a sorkép nem változik */
/* [SUTI-1015] tájékoztató mód: a szöveg mellett jobbra fent a bezárás (×), 44×44 px-es érintési felület */
.suti.suti-i{display:flex;align-items:flex-start;gap:4px;padding:12px 8px 12px 16px}
.suti-i .suti-p{flex:1 1 auto;min-width:0}
.suti-x{flex:none;position:relative;z-index:1;width:44px;height:44px;margin:-10px -4px -10px 0;color:var(--ink);border-radius:50%}
.suti-x svg.i{width:20px;height:20px}
.suti-x:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
@media (hover:hover) and (pointer:fine){ .suti-x:hover{background:var(--tint)} }
.suti-b{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:12px;position:relative;z-index:1}   /* [SUTI-1015 3. kör] a gombok a „Részletek” nagyított érintési felülete fölött */
.suti-b>.btn{width:100%;min-width:0;height:auto;min-height:var(--tap);padding:10px 12px;white-space:normal;line-height:1.2;text-align:center;letter-spacing:.02em}
@media (min-width:320px){ .suti-b.n3{grid-template-columns:repeat(3,minmax(0,1fr))} .suti-b.n3>.btn{padding:8px 6px} }   /* egy sorban három egyforma gomb; [SUTI-1015 2. kör] 320 px-en is elfér, alatta egymás alatt */
@media (min-width:320px) and (max-width:359px){ .suti-b.n3>.btn{font-size:12px} }   /* [SUTI-1015 3. kör] a kisebb betű csak 360 px alatt; fölötte 13 px, mint a „Bezárás” */
/* [SUTI-1015] mindhárom gomb fehér, fekete keretes (a gs.css a .btn.s-t feketére tölti); egyik sem narancs */
.suti-b>.btn.s{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
@media (hover:hover) and (pointer:fine){ .suti-b>.btn.s:hover{background:var(--ink);color:var(--white)} }
@media (min-width:768px){ .suti{left:24px;right:auto;width:400px;max-width:calc(100% - 48px)} .suti.suti-c{width:500px} }   /* [SUTI-1015 2. kör] mérés-módban szélesebb: kevesebb sor */
@media (prefers-reduced-motion:reduce){ .suti{transition:none;transform:none} }

/* amíg a kártya látszik: a toast fölötte jelenik meg; a „fel” nyíl (csak 1023 px alatt van, jobb alul) telefonon a kártya fölé emelkedik [SUTI-1015 2. kör]
   (768 px-től a kártya bal alul 400 px széles, a nyíl jobbra mellette elfér) */
html body.suti-on[data-page] .toast{bottom:calc(var(--suti-g,12px) + var(--suti-l,0px) + var(--safe-b) + var(--suti-h,140px) + 8px)}
@media (max-width:767px){ html body.suti-on .fel{bottom:calc(var(--suti-g,12px) + var(--suti-l,0px) + var(--safe-b) + var(--suti-h,140px) + 16px)} }   /* [SUTI-1015 3. kör] 16 px: ne a × fölött, közvetlenül álljon (melléütés) */

/* [SUTI-1015 2. kör] terméklap telefonon / tableten, amíg a sziget kint van: a kártya és a sziget közötti rés (és a sziget melletti / alatti csík) fehér alapot kap,
   hogy alatta ne látsszon ki a méretsor; a lapon lévő Kosárba ilyenkor rejtve (pdp.js liftWatch), így egyszerre egy narancs Kosárba látszik.
   A fehér alap a kártya alja mögé is benyúlik 16 px-et (a kártya fölötte ül), a teteje 12 px-en át finoman indul. [SUTI-1015 3. kör] 768 px-től is így
   (az egyenes él a kártya melletti tartalmat, pl. a „Gyors fizetés” pirulát, éles ívvel vágta). A „fel” nyíl (z-bar) és a sziget fölötte marad. */
html:not(.is-app) body.suti-on.lift[data-page=pdp]:has(.pd-isl:not(.pd-isl-hide))::after{content:"";position:fixed;left:0;right:0;bottom:0;
  height:calc(var(--suti-g,12px) + var(--suti-l,0px) + var(--safe-b) + 16px);z-index:calc(var(--z-bar) - 1);pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0),var(--white) 12px)}

/* ---------- Süti-beállítások lap (G.openCookies, alsó lap) ---------- */
.suti-ly .suti-lead{font-size:var(--fs-m);line-height:1.5;margin:2px 0 6px}
.suti-kat{border:1px solid var(--line);border-radius:16px;padding:10px 16px 14px;margin-top:10px;background:var(--white)}   /* 16 px: a gs.css --r-ui-ja 999 px (pirula), a többsoros doboz attól ovális lenne (vö. fix-menu-1014) */
.suti-kh{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:var(--tap);text-align:left;font-size:var(--fs-m)}
.suti-kh b{font-weight:700}
.suti-mindig{font-size:var(--fs-xs);font-weight:600;color:var(--mute);text-align:right}
.suti-kat p{font-size:var(--fs-s);line-height:1.5;color:var(--mute)}
.suti-tg{flex:none;position:relative;width:44px;height:26px;border-radius:var(--r-pill);background:var(--line-2);transition:background var(--t-fast)}
.suti-tg::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--white);box-shadow:var(--shadow-s);transition:transform var(--t-fast) var(--ease)}
.suti-sw[aria-checked=true] .suti-tg{background:var(--ink)}
.suti-sw[aria-checked=true] .suti-tg::after{transform:translateX(18px)}
.suti-sw:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:var(--r-xs)}
.suti-sz{margin-top:8px;font-size:var(--fs-xs);line-height:1.5;color:var(--mute)}
.suti-nw{white-space:nowrap}   /* [SUTI-1015 3. kör] „Google · 2 év” egy sorban */
.suti-sz li+li{margin-top:6px}
.suti-sz b{color:var(--ink);font-weight:600}
/* [SUTI-1015] szolgáltatónkénti kapcsoló a kategória alatt (GA4 / Google Ads / Meta), vékony elválasztóval */
.suti-sv{border-top:1px solid var(--line);margin-top:10px;padding-top:2px}
.suti-sv .suti-kh b{font-weight:600}
.suti-kat p.suti-sz{margin-top:0;font-size:var(--fs-xs)}
.suti-more{font-size:var(--fs-s);line-height:1.5;color:var(--mute);margin-top:14px}
.suti-ly .sh-f .suti-b{margin-top:0}

/* ---------- a tájékoztató táblázata (jog/suti-tablazat.html, az adatkezelési lapon); telefonon soronként kártya ---------- */
.suti-tab{width:100%;border-collapse:collapse;margin:6px 0 16px;font-size:var(--fs-s);line-height:1.5}
.suti-tab th{text-align:left;font-weight:700;color:var(--ink);padding:8px 10px 8px 0;border-bottom:1px solid var(--line-2);vertical-align:bottom}
.suti-tab td{padding:10px 10px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.suti-tab td:first-child{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.suti-tab small{display:block;font-weight:400;color:var(--mute);font-size:var(--fs-xs)}
@media (max-width:639px){
  .suti-tab thead{display:none}
  .suti-tab,.suti-tab tbody,.suti-tab tr,.suti-tab td{display:block;width:100%}
  .suti-tab tr{border-bottom:1px solid var(--line);padding:10px 0}
  .suti-tab td{border:0;padding:2px 0}
  .suti-tab td+td::before{content:attr(data-l) ": ";font-weight:600;color:var(--ink)}
}
/* ── elallas.css ── */
/* [JOGI-1015] Griff v2 · elallas.css — /elallas/ (online elállási funkció). A jogi lapok (.page.doc) stílusában: fehér, vonalas keret, nincs szürke tömb.
   Csak base-tokenek, minden a .el konténeren belül; a fő gomb a narancs .btn.p (narancs-1014.css).
   A lekerekítés szám, nem var(--r-ui): a gs.css a --r-ui-t 999px-re állítja (pirula-gomb), a kártya így ovális lenne (mint a fix-menu-1014.css .ac-card-ja: 16px). */
.el .el-card{margin:16px 0 4px;padding:18px 16px 16px;border-radius:16px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line)}
.el h2.el-h{font-size:var(--fs-l);font-weight:700;color:var(--ink);margin:0 0 14px;outline:0}
.el .el-h3{font-size:var(--fs-m);font-weight:700;color:var(--ink);margin:18px 0 8px}
.el a.btn{text-decoration:none}
.el .fld .help{line-height:1.45}
.el .fld label{max-width:calc(100% - 28px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* a lebegő címke egy sorban marad (a hosszú címke két sorba törve a beírt szövegre csúszna) */
.el .fld.bad textarea{box-shadow:inset 0 0 0 1.5px var(--err)}
.el .co-err{margin:4px 0 12px}

/* a rendelés fejléce a 2. lépésben */
.el .el-ord{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 0 12px;margin:0 0 4px;border-bottom:1px solid var(--line)}
.el .el-ord span{display:block;font-size:var(--fs-xs);color:var(--mute)}
.el .el-ord b{display:block;font-size:var(--fs-l);color:var(--ink);letter-spacing:.01em}
.el .el-ord small{display:block;font-size:var(--fs-xs);color:var(--mute);margin-top:1px}
.el .el-ord .lnk,.el .el-to .lnk{font-size:var(--fs-s);white-space:nowrap;min-height:var(--tap)}

/* tájékoztató sor (nem talált rendelés, korábbi elállás, sztornó) */
.el .el-warn{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start;margin:12px 0;padding:12px 14px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line-2);font-size:var(--fs-s);color:var(--ink-2);line-height:1.5}
.el .el-warn svg{margin-top:1px;color:var(--accent-text)}

/* termékek: egy sor = jelölő + kép + név (egy gomb), mellette a darabszám */
.el .el-items{margin:0}
.el .el-it{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.el .el-it:first-child{border-top:0}
.el .el-ck{flex:1;min-width:0;display:grid;grid-template-columns:22px 48px minmax(0,1fr);gap:12px;align-items:center;text-align:left;min-height:var(--tap);padding:4px 0;color:var(--ink)}
.el .el-bx{width:22px;height:22px;border-radius:var(--r-xs);box-shadow:inset 0 0 0 1.5px var(--chk-line);display:grid;place-items:center;color:var(--white);transition:background var(--t-fast)}
.el .el-bx svg{width:14px;height:14px;stroke-width:2.6;opacity:0}
.el .el-it.on .el-bx{background:var(--ink);box-shadow:none}
.el .el-it.on .el-bx svg{opacity:1}
.el .el-items.bad .el-it:not(.on) .el-bx{box-shadow:inset 0 0 0 1.5px var(--err)}   /* [LISTA-GEP-1015] hibaállapot = pénztár .chk.bad */
.el .el-im{width:48px;height:64px;overflow:hidden;display:grid;place-items:center;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);color:var(--mute-2)}
.el .el-im img{width:100%;height:100%;object-fit:cover;display:block}
.el .el-tx{min-width:0}
.el .el-tx b{display:block;font-size:var(--fs-m);font-weight:600;line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
.el .el-tx small{display:block;font-size:var(--fs-xs);color:var(--mute);margin-top:2px}
.el .el-it:not(.on) .el-im,.el .el-it:not(.on) .el-tx{opacity:.55}
.el .el-q{flex:0 0 auto;height:var(--tap);min-width:76px;padding:0 10px;border:0;border-radius:10px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line-2);font:inherit;font-size:var(--fs-s);color:var(--ink)}
.el .el-q:focus{outline:0;box-shadow:inset 0 0 0 2px var(--ink)}
.el .el-q[disabled]{opacity:.45}
.el .chk-msg{margin:6px 0 4px}

.el .el-to{font-size:var(--fs-s);color:var(--ink-2);margin:6px 0 12px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.el .el-to b{color:var(--ink);overflow-wrap:anywhere}

/* összegzés */
.el .el-kv{font-size:var(--fs-s);margin:0 0 14px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.el .el-kv dd{color:var(--ink);overflow-wrap:anywhere}
.el .el-small{font-size:var(--fs-xs);color:var(--mute);line-height:1.5;margin:0 0 14px}
.el .el-acts{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}

/* kész */
.el .el-done .el-okic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--ok);box-shadow:inset 0 0 0 1.5px var(--ok);margin:2px 0 12px}
.el .el-done .el-okic svg{width:24px;height:24px;stroke-width:2.2}
.el .el-done>p{font-size:var(--fs-m);color:var(--ink-2)}
.el .el-fin{margin-top:16px}

/* tudnivalók a lap alján */
.el .el-info{margin-top:26px}
.el .el-info ul{padding-left:18px}
.el .el-info li{margin:6px 0}
.el .el-lk{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px}

@media (min-width:768px){
  .el .el-card{padding:22px 24px 20px}
}

/* a másodlagos gomb (Vissza, Rendeléseim) vonalas, mint a kosárban (kosar-1014.css); a gs.css alapból feketére festené: egy fő gomb a narancs */
.el .btn.s{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
@media (hover:hover) and (pointer:fine){ .el .btn.s:hover{background:var(--ink);color:var(--white)} }
/* ── gf-1014.css ── */
/* Griff v2 · gf-1014.css — [GF-1014] GRIFF FORINT: pénztár (egyenleg + „Felhasználom” kapcsoló, összesítő-sor), kosár (becsült jóváírás),
   fiók „Griff Forint” fül, rendelés-lap, /klub/ szabálylap. A kosar-1014/lista rétegek után: fehér alap, 1 px-es vonal, nincs szürke felület,
   zöld csak a fő gombon, ikon csak vonalas SVG (G.ic("coin")). */

/* ── becsült jóváírás: egy halk sor az összesítő alatt (kosár, pénztár, rendelés-lap) ── */
.gf-earn{display:flex;align-items:center;gap:6px;font-size:12px;line-height:1.4;color:var(--mute);margin-top:10px}
.gf-earn svg{flex:none;color:var(--ink)}
.ct-sum .gf-earn{margin-top:2px}

/* ── [GF-PDP-1015] terméklap: jóváírás az ár alatt, a klub-sor halk stílusában (13 px, #555, a szám félkövér). Egy rövid sor, nincs doboz; a link a szabályok rétegét nyitja.
   [PENZTAR-PROFI-1015] beváltási sor (.pd-gf-r) és helyfoglalója (.pd-gf-ph) nincs többé ── */
.pd-gf{margin-top:6px;font-size:13px;font-weight:400;line-height:1.4;color:#555}
.pd-gf:empty{display:none}
.pd-gf a.pd-gf-e{display:inline-flex;align-items:center;gap:6px;color:#555;text-decoration:none;padding:3px 0;margin:-3px 0}   /* [GF-PDP-1015b] 24 px magas koppintási felület, a sor helye nem változik */
.pd-gf svg{flex:none;color:var(--ink)}
.pd-gf b{font-weight:700;color:var(--ink);white-space:nowrap}
@media (hover:hover) and (pointer:fine){.pd-gf a.pd-gf-e:hover b{text-decoration:underline;text-underline-offset:3px}}

/* ── pénztár: GF-szakasz ── */
.co-gf h2{margin-bottom:8px}
.co-gfb{display:flex;align-items:center;gap:8px;font-size:var(--fs-m);color:var(--ink);line-height:1.4}
.co-gfb svg{flex:none}
.co-gfb b{font-weight:700}
.co-gfb .lnk{font-weight:600;text-decoration:underline;text-underline-offset:3px}
.co-gfr{font-size:12.5px;color:var(--mute);line-height:1.45;margin-top:6px;padding-left:26px}
.co-gfchk{margin-top:6px;font-weight:600}
.sum .co-gfl,.sum .gf-l{font-size:var(--fs-m);color:var(--ink)}

/* ── fiók: Griff Forint fül ── */
.gf-card{padding:16px}
.gf-bal{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.gf-bal small{font-size:var(--fs-xs);color:var(--mute);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.gf-bal b{font-size:var(--fs-3xl);font-weight:700;letter-spacing:-.01em;line-height:1.15}
.gf-h3{font-size:var(--fs-s);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin:20px 0 4px}
.gf-lots .ri{box-shadow:inset 0 0 0 1px var(--line)}
.gf-none{font-size:var(--fs-m);padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gf-rules{margin-top:16px}

/* ── /klub/: szabálylap ── */
.gf-klub h4{text-transform:uppercase;letter-spacing:.04em;font-size:var(--fs-s)}
.gf-t{width:100%;border-collapse:collapse;margin:6px 0 14px;font-size:var(--fs-m);color:var(--ink)}
.gf-t th,.gf-t td{text-align:left;padding:10px 8px 10px 0;border-bottom:1px solid var(--line)}
.gf-t th{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.gf-t td:not(:first-child),.gf-t th:not(:first-child){text-align:right;white-space:nowrap}
.gf-t td:first-child{font-weight:600}
.gf-t td small{display:block;font-size:var(--fs-xs);font-weight:400;color:var(--mute);line-height:1.35;margin-top:2px;white-space:normal}   /* [GF-1014] a szint feltétele */
.gf-klub-b{margin-top:22px}
/* [GF-1014] a .doc lap linkjei aláhúzottak (base.css), a gombok nem */
.gf-klub a.btn{text-decoration:none}
/* a pénztár „Szabályok” rétege: ugyanaz a törzs, a lap gombjai nélkül */
.gf-klub-sh .doc-sub{margin-top:0}
/* GF nélküli szerveren (a /api/config gf: null) a GF-linkek rejtve: lábléc, fiók-adatok (a fül a drawNav-ban marad ki) */
html.gf-off .gf-only{display:none}
/* ── blog.css ── */
/* [BLOG-1015] Griff v2 · blog.css — /blog/ (lista) és /blog/<slug>/ (cikk). Fehér, nagy kövér verzál cím (mint a lista-lapok h1-e), olvasható hasáb:
   legfeljebb 680 px, 17 px, 1,6 sor; a képek a hasáb teljes szélességében (a keskeny, kis felbontásúak a saját méretükön). Csak base-tokenek, minden a .bl-en belül. */
.bl{color:var(--ink)}
.bl .crumbs{margin-bottom:14px}

/* ---------- lista ---------- */
.bl-l{max-width:var(--maxw);margin:0 auto;padding:18px var(--gut) 8px}
.bl-lh h1{font-size:28px;font-weight:700;line-height:1.1;letter-spacing:-.01em;text-transform:uppercase}
.bl-n{font-size:var(--fs-s);color:var(--mute);margin-top:4px}
.bl-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin-top:20px}
.bl-c{display:block;color:var(--ink)}
.bl-ph{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--tint)}
.bl-ph img{width:100%;height:100%;object-fit:cover}
.bl-ct{display:block;margin-top:10px;font-size:var(--fs-l);font-weight:700;line-height:1.3;overflow-wrap:anywhere}
@media (min-width:600px){ .bl-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px} }
@media (min-width:1024px){
  .bl-l{padding-top:30px}
  .bl-lh h1{font-size:40px}
  .bl-n{font-size:var(--fs-m)}
  .bl-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 24px;margin-top:28px}
  .bl-ct{font-size:var(--fs-xl);margin-top:14px}
}
@media (hover:hover) and (pointer:fine){
  .bl-ph img{transition:transform .5s var(--ease)}
  .bl-c:hover .bl-ph img{transform:scale(1.03)}
  .bl-c:hover .bl-ct{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
}

/* ---------- cikk ---------- */
.bl-a{max-width:712px;margin:0 auto;padding:18px var(--gut) 0}
.bl-a h1{font-size:30px;font-weight:700;line-height:1.08;letter-spacing:-.015em;text-transform:uppercase;overflow-wrap:break-word}
.bl-x{font-size:19px;font-weight:500;line-height:1.45;color:var(--ink-2);margin-top:14px}
.bl-m{font-size:var(--fs-s);color:var(--mute);margin-top:12px}
.bl-cv{margin:22px 0 0}
.bl-a img{width:100%;height:auto;background:var(--tint)}
.bl-a img.sm{width:auto;max-width:100%;margin:0 auto}
.bl-old{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start;margin:22px 0 0;padding:12px 14px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line-2);font-size:var(--fs-s);line-height:1.5;color:var(--ink-2)}
.bl-old svg{margin-top:1px;color:var(--mute)}
.bl-b{font-size:17px;line-height:1.6;color:var(--ink-2);margin-top:26px;overflow-wrap:break-word}
.bl-b p{margin:0 0 18px}
.bl-b h2{font-size:24px;font-weight:700;line-height:1.2;color:var(--ink);margin:38px 0 12px;letter-spacing:-.01em}
.bl-b h3{font-size:20px;font-weight:700;line-height:1.25;color:var(--ink);margin:32px 0 10px}
.bl-b h2:first-child,.bl-b h3:first-child{margin-top:0}
.bl-b strong{font-weight:700;color:var(--ink)}
.bl-b em{font-style:italic}
.bl-b a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--mute-2)}
.bl-b figure{margin:28px 0}
.bl-b figure+figure{margin-top:-12px}
.bl-b .bl-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.bl-b .bl-g img{height:100%;object-fit:cover}
@media (hover:hover) and (pointer:fine){ .bl-b a:hover{text-decoration-color:var(--ink)} }
@media (min-width:768px){
  .bl-a{padding-top:30px}
  .bl-a h1{font-size:44px}
  .bl-x{font-size:21px}
  .bl-cv{margin-top:28px}
}

/* ---------- termékek a cikkből + vége ---------- */
.bl-pr{max-width:1064px;margin:44px auto 0;padding:28px 0 0;border-top:1px solid var(--line)}
.bl-pr h2{font-size:22px;font-weight:700;line-height:1.15;text-transform:uppercase;letter-spacing:.01em;padding:0 var(--gut);margin-bottom:16px}
.bl-pr .grid{padding:0}
.bl-end{display:flex;justify-content:center;padding:28px var(--gut) 56px}
.bl-end .btn{min-width:220px}
@media (min-width:1024px){
  .bl-pr h2{font-size:26px;margin-bottom:22px}
  .bl-pr .grid{padding:0 var(--gut)}
}
/* ── chat.css ── */
/* [CHAT-1016] segítő chat (chat.js) — lebegő gomb + ablak. Fehér felület, fekete gomb (a fejléc-sziget nyelve), emoji nincs. */
.cht-fab{position:fixed;z-index:var(--z-bar);right:24px;bottom:var(--cht-b);display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px 0 14px;border-radius:999px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;box-shadow:0 8px 24px -10px rgba(14,16,19,.45);transition:opacity .2s,transform .2s var(--ease),bottom .2s var(--ease)}
.cht-fab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cht-fab.off,body.suti-on .cht-fab{opacity:0;transform:translateY(12px);pointer-events:none}
@media (hover:hover) and (pointer:fine){ .cht-fab:hover{background:#2A2D31} }
/* [CHAT-BUBI-1019] a gomb mindig látszik (mobilon és az appban is, a pénztárt kivéve); --cht-b = a gomb alja, --cht-h = a magassága */
body{--cht-b:calc(24px + var(--safe-b));--cht-h:46px}
@media (max-width:1023px){
  body{--cht-b:calc(16px + var(--safe-b));--cht-h:52px}
  body:has(.pd-isl,.ct-sticky,.pl-bar){--cht-b:calc(84px + var(--safe-b))}   /* alsó sziget/sáv fölé */
  .cht-fab{right:16px;width:52px;height:52px;padding:0;justify-content:center}
  .cht-fab .cht-fab-t{display:none}
  html body:has(.cht-fab:not(.off)) .fel{bottom:calc(var(--cht-b) + var(--cht-h) + 12px)}
  html body.cht-hion:has(.cht-fab:not(.off)) .fel{left:16px;right:auto}   /* a szövegbuborék mellett balra */
}
/* [CHAT-BUBI-1019] üdvözlő szövegbuborék a gomb fölött; X = csak a szöveg zárul (munkamenetre) */
.cht-hi{position:fixed;z-index:var(--z-bar);right:16px;bottom:calc(var(--cht-b) + var(--cht-h) + 10px);width:min(260px,calc(100% - 32px));padding:14px 38px 14px 16px;border-radius:16px 16px 4px 16px;background:#fff;color:var(--ink);font-size:13px;font-weight:500;line-height:1.45;text-align:left;box-shadow:0 10px 30px -10px rgba(14,16,19,.35),0 0 0 1px rgba(14,16,19,.06);cursor:pointer;transition:opacity .2s,transform .2s var(--ease),bottom .2s var(--ease)}
.cht-hi b{display:block;font-weight:700;margin-bottom:2px}
.cht-hi-x{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#8a8f96}
.cht-hi-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media (min-width:1024px){ .cht-hi{right:24px} }
.cht-hi.off,body.suti-on .cht-hi,body:has(.cht-fab.off) .cht-hi{opacity:0;transform:translateY(8px);pointer-events:none}
/* ablak */
.ly.cht{height:min(640px,calc(100% - 44px - var(--safe-t)))}
.ly.cht .sh-b{display:flex;flex-direction:column;padding:0;overflow:hidden}
.cht-m{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:flex;flex-direction:column;gap:8px;padding:14px var(--gut) 16px}
.cht-b{max-width:88%;padding:10px 13px;border-radius:16px;font-size:14px;line-height:1.45}
.cht-b.bot{align-self:flex-start;background:var(--tint);color:var(--ink);border-bottom-left-radius:6px}
.cht-b.me{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:6px}
.cht-b b{font-weight:700}
.cht-b .lnk{font-weight:600;text-decoration:underline;text-underline-offset:2px}
.cht-s{margin-top:8px;font-size:12.5px;color:var(--ink-2)}
.cht-c{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.cht-c button{height:36px;padding:0 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);background:var(--white);font-size:13px;font-weight:600;color:var(--ink)}
@media (hover:hover) and (pointer:fine){ .cht-c button:hover{box-shadow:inset 0 0 0 1.5px var(--ink)} }
.cht-f{margin-top:10px}
.cht-f .fld input,.cht-f .fld textarea{font-size:16px}
.cht-f .btn{width:100%;height:46px}
.cht-in{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px;align-items:center}
.cht-in input{height:44px;border:0;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);padding:0 16px;font-size:16px;outline:0;background:var(--white);min-width:0}
.cht-in input:focus{box-shadow:inset 0 0 0 2px var(--ink)}
.cht-in button{width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center}
.cht-in svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:1024px){
  .ly.sheet.cht{left:auto;right:24px;top:auto;bottom:24px;width:400px;height:min(620px,calc(100vh - 48px));max-height:none;transform:translateY(16px)}
  .ly.sheet.cht.on{transform:none}
}
.ft li .ft-chat{display:inline-block;padding:3px 0;font:inherit;color:inherit;text-decoration:none;cursor:pointer}

/* [CHAT-DM-1019] a bolt válasza a chatben (DM) + új válasz jelzése a gombon */
.cht-b.griff{background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink,#0E1013)}
.cht-b.griff::before{content:"Griff";display:block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:3px;color:var(--mute,#777)}
.cht-fab.has-new::after{content:attr(data-n);position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#F2742A;color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;box-shadow:0 0 0 2px #fff}
/* ── nativ.css ── */
/* [APP-1014] csak az iOS-appban (html.is-app: a <head> UA-szkriptje és a nativ.js teszi rá). Böngészőben semmi nem hat innen.
   [APP-AUDIT-1014] átírva az app-átnézés után: egy helyen az egész keret. Osztályok a <html>-en (nativ.js állítja):
     .tabs   = fül-lap (a natív alsó sziget látszik; csak az útvonaltól függ, egy nyitott réteg NEM veszi le → nem ugrik a lap)
     .detail = fül nélküli lap (terméklap, pénztár, rendelés, jogi lap): a natív sziget rejtve, bal felül .app-back
     .nb     = olyan detail lap, ahol a lap tetején nincs kép: mindig van fehér navigációs sáv a vissza-gomb mögött (pénztár, rendelés, jogi lap)
     .scd    = el van görgetve a lap (>8 px) */

/* ---------- a lap teteje: óra-sáv (safe-area), webes fejléc nincs ---------- */
html.is-app{--hd:var(--safe-t);scroll-padding-top:calc(var(--safe-t) + 64px)}
html.is-app body{padding-top:var(--safe-t)!important}                         /* a lista.css „body{padding-top:60px !important}” ellen: a valódi safe-area */
html.is-app .hd{display:none!important}                                         /* [FEJLEC-KI-1014] a menü/kereső/kedvencek/kosár a natív szigeten van */
html.is-app main,html.is-app #app,html.is-app .pg{margin-top:0!important;padding-top:0!important}
html.is-app .hm-hero{margin-top:calc(-1 * var(--safe-t))!important}           /* a főoldali hős az óra alá fut, széltől szélig */
html.is-app .hm-hero img,html.is-app .hm-strip img{object-position:50% 4% !important}
html.is-app .pl-flo{top:calc(var(--safe-t) + 8px)}
html.is-app .crumbs{display:none!important}                                     /* webes morzsa-sor („Griff › …”): az appban a vissza-gomb a navigáció */

/* óra-sáv: tömör fehér, a lap tetején nincs (a hős alá fut), görgetve megjelenik. z 55: a vissza-gomb (56) alatta,
   a rétegek sötétítése (60) fölötte — így egy nyitott alsó lapnál a sáv is elsötétül, nem világít a tetején */
html.is-app body::before{content:"";position:fixed;left:0;right:0;top:0;height:var(--safe-t);background:#fff;z-index:55;pointer-events:none;opacity:0;transition:opacity .18s,height .18s,box-shadow .18s}
html.is-app.scd body::before{opacity:1}
/* fül nélküli lapon a sáv a vissza-gombot is magába foglalja (natív navigációs sáv): görgetve a terméklapon, mindig a pénztárban/rendelés-/jogi lapon */
html.is-app.detail.scd body::before,html.is-app.sub.scd body::before,html.is-app.nb body::before{height:calc(var(--safe-t) + 58px);opacity:1;box-shadow:0 .5px 0 rgba(0,0,0,.12)}
html.is-app.nb{--hd:calc(var(--safe-t) + 58px)}
html.is-app.nb body{padding-top:calc(var(--safe-t) + 58px)!important}
html.is-app.sub body{padding-top:calc(var(--safe-t) + 50px)!important}   /* mélyebb fül-lap (lista, fiók): a lap címe a vissza-gomb ALATT kezdődik */
html.is-app.sub{--hd:calc(var(--safe-t) + 58px)}
/* a navigációs sáv címe: középen, a vissza- és megosztás-gomb között */
.app-title{position:fixed;left:64px;right:64px;top:calc(var(--safe-t) + 7px);height:44px;z-index:56;display:none;align-items:center;justify-content:center;font:600 16px/1.2 Montserrat,-apple-system,Helvetica,Arial,sans-serif;color:#0E1013;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;opacity:0;transition:opacity .18s}
html.is-app.nb .app-title,html.is-app.detail.scd .app-title,html.is-app.sub.scd .app-title{display:block;line-height:44px;text-align:center;opacity:1}

/* ---------- vissza-gomb (fül nélküli lapokon) ---------- */
.app-back{position:fixed;left:10px;top:calc(var(--safe-t) + 7px);z-index:56;width:44px;height:44px;border-radius:50%;display:none;place-items:center;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);box-shadow:0 1px 8px rgba(0,0,0,.10);color:#0E1013}
.app-back svg{width:22px;height:22px}
html.is-app.detail .app-back,html.is-app.sub .app-back{display:grid}
.app-share{position:fixed;right:10px;top:calc(var(--safe-t) + 7px);z-index:56;width:44px;height:44px;border-radius:50%;display:none;place-items:center;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);box-shadow:0 1px 8px rgba(0,0,0,.10);color:#0E1013}
.app-share svg{width:21px;height:21px}
html.is-app.detail body[data-page=pdp] .app-share{display:grid}
html.is-app.detail.scd .app-share{box-shadow:none;background:transparent}
html.is-app.detail.scd .app-back,html.is-app.sub .app-back,html.is-app.nb .app-back{box-shadow:none;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}   /* a fehér sávon ne legyen külön buborék */

/* ---------- a lap alja: natív sziget ---------- */
/* fül-lapon a --safe-b = a sziget magassága (a natív oldal méri), így minden alsó lebegő elem fölé kerül; a body alja adja a sziget helyét */
html.is-app.tabs{--safe-b:var(--app-tab,110px)}
html.is-app.tabs body{padding-bottom:var(--app-tab,110px)}
/* a rétegek (alsó lapok, menü, kereső, kosár-fiók) alatt a sziget rejtve van: ott a valódi home-csík a mérce */
html.is-app .ly{--safe-b:env(safe-area-inset-bottom,0px)}
html.is-app .ly.left,html.is-app .ly.full,html.is-app .ly.drawer{padding-top:var(--safe-t)}
@media (min-width:768px){ html.is-app .ly.sheet.side{padding-top:var(--safe-t);padding-bottom:var(--safe-b)} }   /* iPad: oldallapok az óra alatt, a home-csík fölött */

/* webes lábléc az appban nincs (hírlevél-űrlap, fizetési logók, a menüt duplázó linkek); az ÁSZF/Adatkezelés a Menüben van */
html.is-app #ft,html.is-app .ft{display:none!important}
html.is-app.tabs .pl{padding-bottom:24px}
html.is-app.tabs .ct-page{padding-bottom:96px}                                  /* kosár: a Fizetés-sáv helye (a sziget helyét a body adja) */
html.is-app body[data-page=pdp] #main{padding-bottom:calc(104px + var(--safe-b))}   /* terméklap: az alsó vásárló-sziget helye */
html.is-app body[data-page=order] #main,html.is-app body[data-page=policy] #main{padding-bottom:calc(32px + var(--safe-b))}
/* kosár: a Fizetés-pirula és a sziget közti résben ne látsszanak át a kártyák */
html.is-app.tabs body[data-page=cart].lift::after{content:"";position:fixed;left:0;right:0;bottom:0;height:calc(92px + var(--safe-b));background:linear-gradient(rgba(255,255,255,0),#fff 28px);z-index:34;pointer-events:none}

/* „Ugrás a lap tetejére” nyíl: az appban dupla funkció (a fül újbóli koppintása és az óra-koppintás is felgörget), és rácsúszik a tartalomra */
html.is-app .fel{display:none!important}

/* ---------- toastok ---------- */
html.is-app.tabs.lyo .toast{bottom:calc(20px + env(safe-area-inset-bottom,0px))}   /* nyitott réteg fölött a sziget rejtve: ne lebegjen a helyén */
html body[data-page=checkout] .toast{bottom:calc(84px + var(--safe-b))}        /* pénztár: a fizetés-sziget fölött (a weben is ez a helyes) */
html.is-app body.lift:has(.pd-isl.pd-isl-hide) .toast{bottom:calc(20px + var(--safe-b))}   /* terméklap: ha az alsó sziget rejtve, ne lebegjen félúton */
@media (min-width:1024px){
  html.is-app body:not([data-page=checkout]) .toast{bottom:calc(20px + var(--safe-b))}     /* iPad: a natív sziget fölé */
  html.is-app body.lift:not([data-page=checkout]) .toast{bottom:calc(20px + var(--lift) + var(--safe-b))}
}

/* ---------- apróságok ---------- */
html.is-app a,html.is-app img,html.is-app button{-webkit-touch-callout:none}   /* hosszú nyomásra ne jöjjön böngésző-menü */
html.is-app .pm-w{display:none!important}                                       /* tárcás fizetés (Apple/Google Pay) az appban nincs */

/* [MENU-FEJ-1014] menü teteje: X sima ikon (nem lóg ki), mellette hajszálas kereső-pirula, rendes margók (a weben is) */
.mn-h2{grid-template-columns:40px minmax(0,1fr)!important;gap:8px!important;padding:10px 16px 10px 8px!important;border-bottom:0!important}
.mn-h2>.ib{width:40px!important;height:40px!important;border:0!important;box-shadow:none!important;background:none!important;margin:0!important}
.mn-srch{box-shadow:inset 0 0 0 1px #E3E5E9!important;background:#fff;color:#6B7079;height:44px}

/* ---------- [APP-AUDIT-1014] 2. kör ---------- */
/* iPad terméklap: a ragadó galéria és vásárló-oszlop a navigációs sáv alatt álljon meg */
@media (min-width:1024px){ html.is-app .pd-info.stk,html.is-app .pd-gal.stk{top:calc(var(--safe-t) + 74px)!important} }
/* pénztár alja: a tájékoztató linksor ne érjen a fizetés-szigethez */
@media (max-width:767px){ html.is-app body[data-page=checkout] .co-main{padding-bottom:calc(112px + var(--safe-b))} }
/* [PDP-TETO-1014] Olivér: „tetejét ne vágd le” — telefonon a terméklap galériája is az óra alá fut, széltől szélig (görgetve jön a fehér sáv) */
@media (max-width:1023px){ html.is-app body[data-page=pdp] .pd-gal{margin-top:calc(-1 * var(--safe-t))!important} }

/* ---------- [MORPH-1014] terméklista telefonon: a fekete sáv rejtve; a cím sorában vonalas nézet-ikonok + „Szűrés ②”; görgetve a natív sziget alakul át ---------- */
.app-lbar,.app-lv,.app-lf{display:none}
@media (max-width:1023px){
  html.is-app.lst .pl-bar,html.is-app.lst .pl-flo{display:none!important}
  html.is-app.lst .pl-h{position:relative}
  html.is-app.lst .app-lv{display:flex;position:absolute;right:8px;top:-46px;gap:2px}
  html.is-app.lst .app-lv button,html.is-app.lst .app-lf{all:unset;-webkit-tap-highlight-color:transparent;cursor:pointer}
  html.is-app.lst .app-lv button{width:38px;height:44px;display:grid;place-items:center;color:#9A9EA6}
  html.is-app.lst .app-lv button.on{color:#0E1013}
  html.is-app.lst .app-lv svg,html.is-app.lst .app-lf svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  html.is-app.lst .app-lv button.on svg{stroke-width:1.8}
  html.is-app.lst .app-lf{display:flex;align-items:center;gap:7px;position:absolute;right:var(--gut);bottom:2px;height:36px;color:#0E1013;font:600 14px/1 Montserrat,-apple-system,Helvetica,Arial,sans-serif}
  html.is-app.lst .app-lf b{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;border-radius:9px;box-shadow:inset 0 0 0 1.2px #0E1013;font:600 11px/1 -apple-system,Helvetica,Arial,sans-serif}
  html.is-app.lst .app-lf:active,html.is-app.lst .app-lv button:active{opacity:.5}
  html.is-app.lst .pl-ht{padding-right:118px}   /* a cím ne fusson a „Szűrés” alá */
}
}
/* [MENU-FIX-1014] menü: (1) iOS fókusz-keret ne rajzoljon kört az X köré nyitáskor; (2) a Női/Férfi váltó a kereső alatt álljon meg, ne vágódjon félbe görgetéskor */
html.is-app button:focus,html.is-app a:focus,html.is-app [tabindex]:focus{outline:none}
.mn-b>.gsw:first-child{position:sticky;top:-8px;z-index:2;background:#fff;margin-top:-8px;padding-top:8px;padding-bottom:12px;box-shadow:0 8px 8px -8px rgba(255,255,255,1)}
/* [VISSZA-KOR-1014] Olivér: „ilyesmi modern visszagombokat mindenhol” — tömör fehér kör, puha árnyék, vékony nyíl; görgetve sem vált át,
   és nincs fehér navigációs sáv („tető”) a gomb mögött: csak az óra-sáv marad görgetve */
.app-back,.app-share,html.is-app.detail.scd .app-back,html.is-app.sub .app-back,html.is-app.nb .app-back,html.is-app.detail.scd .app-share{
  width:44px;height:44px;left:12px;top:calc(var(--safe-t) + 8px);background:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:0 4px 16px rgba(14,16,19,.10),0 1px 3px rgba(14,16,19,.06)!important;color:#0E1013;transition:transform .12s}
.app-share{left:auto;right:12px}
.app-back svg,.app-share svg{width:20px;height:20px;stroke-width:1.6}
.app-back:active,.app-share:active{transform:scale(.92)}
html.is-app.detail.scd body::before,html.is-app.sub.scd body::before,html.is-app.nb body::before{height:var(--safe-t)!important;box-shadow:none!important}
html.is-app.nb body::before{opacity:0}
html.is-app.nb.scd body::before{opacity:1}
.app-title{display:none!important}
html.is-app .app-share,html.is-app.detail.scd .app-share{left:auto!important;right:12px!important}
@media (max-width:1023px){
  html.is-app.lst body{padding-top:calc(var(--safe-t) + 50px)!important}   /* a vissza-gomb + nézet-ikonok sora mindig ott van (közvetlen nyitáskor is) */
  html.is-app.lst .app-back{display:grid}
}
html.is-app.lst .app-lv button{color:#AEB2B9}
html.is-app.lst .app-lv button.on{color:#0E1013}
html.is-app.lst .app-lv svg{stroke-linejoin:round}
/* [MENU-ALUL-1015] Olivér: a menüben a Női/Férfi választó és a kereső legyen alul, hogy könnyebb legyen elérni; a menü teljes szélességű */
html.is-app .ly.left{width:100%!important;max-width:none!important;display:flex;flex-direction:column}
html.is-app .ly.left .mn-b{order:1;flex:1;min-height:0}
html.is-app .ly.left .app-mnb{order:2;flex:none;background:#fff;box-shadow:0 -.5px 0 rgba(14,16,19,.12);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
html.is-app .ly.left .app-mnb .gsw{position:static!important;margin:0 0 10px!important;padding:0!important;box-shadow:none!important}
html.is-app .ly.left .app-mnb .mn-h2{padding:0!important;border:0!important}
/* [TETO-KI-1015] Olivér: „fehér tetők ne legyenek sehol, nem profi” — az óra mögött nincs tömör fehér sáv: görgetve az iOS 26-os lágy áttűnés
   (a tartalom elhalványul az óra alatt, éles csík nélkül); a lap tetején semmi */
html.is-app body::before,html.is-app.detail.scd body::before,html.is-app.sub.scd body::before,html.is-app.nb body::before{
  height:calc(var(--safe-t) + 22px)!important;box-shadow:none!important;
  background:linear-gradient(rgba(255,255,255,.92) 0%,rgba(255,255,255,.75) 45%,rgba(255,255,255,0) 100%)!important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
html.is-app.nb:not(.scd) body::before{opacity:0!important}
/* [MENU-ALUL-1015 v2] a menü alja: lebegő üveg-sziget (mint az alsó menü), alatta nincs üres sáv */
html.is-app .ly.left{padding-bottom:0!important}
html.is-app .ly.left .mn-b{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))!important}
html.is-app .ly.left .app-mnb{position:absolute;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 4px);z-index:3;
  padding:8px;border-radius:28px;box-shadow:0 6px 18px rgba(0,0,0,.10),inset 0 0 0 .5px rgba(0,0,0,.08)!important;
  background:rgba(255,255,255,.80)!important;-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6)}
html.is-app .ly.left .app-mnb .gsw{height:40px;margin:0 0 8px!important;padding:3px!important;background:rgba(14,16,19,.05)!important;box-shadow:none!important;border-radius:999px}
html.is-app .ly.left .app-mnb .gsw button{height:34px;font-size:11.5px}
html.is-app .ly.left .app-mnb .gsw button.on{background:#0E1013;color:#fff}
html.is-app .ly.left .app-mnb .mn-h2{display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;gap:6px!important;padding:0!important;align-items:center}
html.is-app .ly.left .app-mnb .mn-h2>.ib{width:44px!important;height:44px!important;border-radius:50%!important;background:#fff!important;box-shadow:0 1px 6px rgba(14,16,19,.08)!important}
html.is-app .ly.left .app-mnb .mn-srch{height:44px;background:#fff!important;box-shadow:0 1px 6px rgba(14,16,19,.08)!important}
html.is-app .hm-usp{display:none!important}   /* [USP-1015] az appban az előnyök a terméklapon (Kosárba alatt) vannak, a főoldalon nem zsúfolnak; weben a narancs csík viszi */

/* [APP-USP-1018] Olivér 10-18: „appokban nincs kiírva a webshop előnyök meg hogy megújult” → a web narancs forgó csíkja a főoldali nyitókép alatt */
.hm-appusp{display:none}
html.is-app .hm-appusp{display:block;order:0;position:relative;height:34px;overflow:hidden;background:linear-gradient(100deg,#FF8A3C 0%,#F2742A 55%,#E8641F 100%);color:#fff}
html.is-app .hm-appusp::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.32),rgba(255,255,255,0));transform:skewX(-18deg);animation:usp-sheen 5.5s ease-in-out infinite;pointer-events:none}
html.is-app .hm-appusp .usp-in{height:34px;color:#fff;font-size:12px;font-weight:500}
html.is-app .hm-appusp .usp-in,html.is-app .hm-appusp .usp-i,html.is-app .hm-appusp .usp-i b{letter-spacing:0!important;text-transform:none!important;font-size:12px!important}   /* az app nagybetűs stílusa nélkül 375 px-en is kifér
html.is-app .hm-appusp .usp-i{height:34px;gap:7px;color:#fff}
html.is-app .hm-appusp .usp-i b,html.is-app .hm-appusp .usp-i svg{color:#fff}
html.is-app .hm-appusp .usp-i svg{width:15px;height:15px}
@media (prefers-reduced-motion:reduce){html.is-app .hm-appusp::after{display:none}}

/* [KATEGORIAK-1018] Olivér: „a kereső is fura, elbújik benne a főmenü” → a „Kategóriák” réteg TETEJÉN a kereső, alatta Női/Férfi;
   a fiók/kedvencek/rendelések/jogi/chat linkek kikerülnek (Profil fül, ott a Segítség-kártya és az Információ) */
html.is-app .ly.left .app-mnb{position:relative!important;left:auto;right:auto;bottom:auto;order:0;display:flex;flex-direction:column;margin:4px 12px 2px;padding:4px 0 6px;border-radius:0;
  box-shadow:none!important;background:#fff!important;-webkit-backdrop-filter:none;backdrop-filter:none}
html.is-app .ly.left .app-mnb .mn-h2{order:1}
html.is-app .ly.left .app-mnb .gsw{order:2;margin:10px 0 0!important}
html.is-app .ly.left .app-mnb .mn-h2>.ib{box-shadow:none!important;background:#f2f2f3!important}
html.is-app .ly.left .app-mnb .mn-srch{background:#f2f2f3!important;box-shadow:none!important}
html.is-app .ly.left .mn-b{padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))!important}
html.is-app .mn-small a[href="/fiok/"],html.is-app .mn-small a[href="/kedvencek/"],html.is-app .mn-small a[href="/fiok/rendelesek/"],
html.is-app .mn-small a[href="/szallitas/"],html.is-app .mn-small a[href="/visszakuldes/"],html.is-app .mn-small a[href="/elallas/"],
html.is-app .mn-small a[href="/aszf/"],html.is-app .mn-small a[href="/adatkezeles/"],html.is-app .mn-small a[href="/kapcsolat/"],
html.is-app .mn-small button[data-a="chat"]{display:none!important}

/* [ANDROID-APP-1018] Android-app: a natív iOS-sziget helyett webes alsó üveg-sáv (nativ.js webBar); ugyanaz a felület, görgetve összemegy */
.wbar{display:none}
html.is-and .wbar{position:fixed;left:50%;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:40;transform:translateX(-50%);width:min(360px,calc(100% - 24px));height:64px;
  display:flex;align-items:center;justify-content:space-around;padding:0 6px;border-radius:32px;background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8);box-shadow:0 8px 28px -10px rgba(14,16,19,.30),inset 0 0 0 .5px rgba(14,16,19,.10);
  transition:width .25s ease,height .25s ease,opacity .2s ease,transform .25s ease}
html.is-and .wbar button{position:relative;flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0;border:0;background:none;color:#8a8f96;font:inherit;font-size:10px;font-weight:500;-webkit-tap-highlight-color:transparent}
html.is-and .wbar svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
html.is-and .wbar button.on{color:#0E1013;font-weight:700}
html.is-and .wbar button.on svg{stroke-width:1.8}
html.is-and .wbar.cmp{width:min(270px,calc(100% - 24px));height:50px}
html.is-and .wbar.cmp span{display:none}
html.is-and .wbar.off{opacity:0;pointer-events:none;transform:translate(-50%,24px)}
html.is-and .wbar-n{position:absolute;top:7px;left:calc(50% + 4px);min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#F2742A;color:#fff;font-size:10px;font-weight:700;line-height:17px;text-align:center}
html.is-and .wbar.cmp .wbar-n{top:4px}

/* [APP-APROSAG-1018] görgetve a vissza-gomb mögött fehér sáv (pénztár/rendelés/jogi lapon a kör ne üljön rá a szövegre) */
html.is-app.nb.scd body::before,html.is-app.detail.scd body::before,html.is-app.sub.scd body::before{height:calc(var(--safe-t) + 66px)!important;
  background:linear-gradient(#fff 0%,#fff 70%,rgba(255,255,255,0) 100%)!important;-webkit-mask-image:none!important;mask-image:none!important}

/* [FEJLEC-TISZTA-1019] Olivér: „idióta blurry header sok helyen, semmi szükség, nem profi” → NINCS homály/átmenet/maszk.
   Görgetve: fül-lapon csak egy tiszta fehér sáv az óra mögött; vissza-gombos lapon (termék, lista, pénztár, jogi) egy natív navigációs sáv:
   tömör fehér, alul egy hajszálvonal, benne a vissza-gomb árnyék nélkül. Görgetés nélkül semmi (a kép az óra alá fut). */
html.is-app body::before,html.is-app.scd body::before,html.is-app.detail.scd body::before,html.is-app.sub.scd body::before,html.is-app.nb body::before,html.is-app.nb.scd body::before{
  background:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;-webkit-mask-image:none!important;mask-image:none!important;
  height:var(--safe-t)!important;box-shadow:none!important;opacity:0!important}
html.is-app.scd body::before{opacity:1!important}
html.is-app.detail.scd body::before,html.is-app.sub.scd body::before,html.is-app.nb.scd body::before,html.is-app.lst.scd body::before{height:calc(var(--safe-t) + 58px)!important;box-shadow:0 .5px 0 rgba(14,16,19,.14)!important;opacity:1!important}
html.is-app.nb:not(.scd) body::before{opacity:0!important}
html.is-app .app-back{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:#fff!important;box-shadow:0 1px 4px rgba(14,16,19,.12)!important}
html.is-app .app-share{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:#fff!important;box-shadow:0 1px 4px rgba(14,16,19,.12)!important}
html.is-app.scd .app-share{box-shadow:none!important}

/* [TELJES-KEPERNYO-1019] Olivér: „ez a hányinger fehér kitakarás… full screenbe kéne mennie, mi a francnak ide vissza gomb a listaoldalra” →
   görgetve SEHOL nincs sáv az óra mögött (a tartalom teljes képernyőn fut), és görgetve a vissza-/megosztás-gomb is eltűnik (felgörgetve visszajön a lap tetején). */
html.is-app body::before,html.is-app.scd body::before,html.is-app.detail.scd body::before,html.is-app.sub.scd body::before,html.is-app.nb.scd body::before,html.is-app.lst.scd body::before{display:none!important}
html.is-app .app-back,html.is-app .app-share{transition:opacity .18s ease,transform .18s ease}
html.is-app.scd .app-share{opacity:0!important;transform:scale(.85);pointer-events:none}   /* [VISSZA-MARAD-1020] a vissza-gomb már nem tűnik el */
/* [TELJES-KEPERNYO-1019b] „ez se profi” (fiók-lap: a szöveg az óra alá csúszott) → görgetve egy keskeny, tömör fehér sáv CSAK az óra mögött (státuszsor-magasság),
   hajszálvonal és homály nélkül; vissza-/megosztás-gomb görgetve eltűnik. A lap tetején (görgetés nélkül) nincs sáv: a nyitókép/termékkép az óra alá fut. */
html.is-app.scd body::before,html.is-app.detail.scd body::before,html.is-app.sub.scd body::before,html.is-app.nb.scd body::before,html.is-app.lst.scd body::before{
  display:block!important;opacity:1!important;height:var(--safe-t)!important;background:#fff!important;box-shadow:none!important}
html.is-app.nb body::before{display:block!important;opacity:1!important;height:var(--safe-t)!important;background:#fff!important;box-shadow:none!important}
/* [STATUSZSOR-LAGY-1019] Olivér: a kemény fehér csík elvágja a képet → görgetve a státuszsor mögött lágy fehér átmenet (homály/blur NÉLKÜL):
   az óra alatt tömör fehér, alatta 28 px alatt átlátszóba fut; a vissza-/megosztás-gomb görgetve mindenhol eltűnik (a jogi/pénztár lapon is) */
html.is-app.scd body::before,html.is-app.detail.scd body::before,html.is-app.sub.scd body::before,html.is-app.nb.scd body::before,html.is-app.lst.scd body::before,html.is-app.nb body::before{
  display:block!important;opacity:1!important;height:calc(var(--safe-t) + 28px)!important;box-shadow:none!important;
  background:linear-gradient(to bottom,#fff 0,#fff calc(100% - 28px),rgba(255,255,255,.86) calc(100% - 18px),rgba(255,255,255,0) 100%)!important}
html.is-app.nb:not(.scd) body::before{opacity:0!important}
html.is-app.scd .app-share{opacity:0!important;transform:scale(.85);pointer-events:none}
/* [VISSZA-MARAD-1020] Olivér: „azért vissza gombok nem ártanak” → a vissza-gomb görgetve is ott marad (tömör fehér kör, puha árnyék, hogy a tartalom fölött is látsszon); csak a megosztás tűnik el */
html.is-app.scd .app-back{opacity:1!important;transform:none;pointer-events:auto}