/* LÉTÜNKÉRT.ORG — termékváltozatok, galéria, csomagolás, képkezelő (sql/81, 2026-10-16). A színek a lk.css változói. */

/* ---- Választó gombok (rádió, de gombnak látszik; billentyűzettel is) ---- */
.valtozat-urlap{margin-top:12px}
.valasztas{border:0;margin:0 0 14px;padding:0;min-width:0}
.valasztas legend{padding:0;margin-bottom:6px}
.valaszt-gombok{display:flex;flex-wrap:wrap;gap:8px}
.valaszt-gomb{position:relative;display:inline-flex}
.valaszt-gomb input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.valaszt-gomb > span{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 16px;border:2px solid var(--vonal);border-radius:999px;background:#fff;font-weight:600;cursor:pointer;line-height:1.2}
.valaszt-gomb input:checked + span{border-color:var(--zold);background:var(--zold-halvany);color:var(--zold-sotet)}
.valaszt-gomb input:focus-visible + span{outline:3px solid var(--zold);outline-offset:2px}
.valaszt-gomb.elfogyott > span{color:var(--halk);background:repeating-linear-gradient(135deg,#fff,#fff 6px,#f2efe8 6px,#f2efe8 8px);text-decoration:line-through;cursor:not-allowed;opacity:.75}
.valaszt-gomb input:disabled + span{cursor:not-allowed}
.csomag-gomb small{font-weight:400;color:var(--halk);font-size:14px}
.csomag-gomb input:checked + span small{color:var(--zold-sotet)}
.szabad-gramm{max-width:260px;margin:0 0 14px}
.szabad-gramm[hidden]{display:none}
.valtozat-osszesen{margin:10px 0 0;padding:10px 14px;border-radius:12px;background:var(--zold-halvany);font-weight:600}
.valtozat-osszesen:empty{display:none}
.valtozat-urlap .kosarba-sor{margin-top:4px}

/* ---- Galéria: nagy kép + bélyegsor; mobilon ujjal lapozható ---- */
.galeria{min-width:0}
.galeria-fo{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;border-radius:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.galeria-fo::-webkit-scrollbar{display:none}
.galeria-dia{flex:0 0 100%;scroll-snap-align:start;border:0;padding:0;margin:0;background:none;cursor:zoom-in;display:block}
.galeria-dia .termek-kep{border-radius:20px;aspect-ratio:1/1;object-fit:cover;height:auto;max-height:480px;background:#fff}
.galeria-sav{display:flex;gap:8px;overflow-x:auto;padding:10px 2px 4px;scrollbar-width:thin}
.galeria-belyeg{flex:0 0 auto;width:64px;height:64px;padding:0;border:2px solid var(--vonal);border-radius:12px;overflow:hidden;background:#fff;cursor:pointer}
.galeria-belyeg img{width:100%;height:100%;object-fit:cover;display:block}
.galeria-belyeg.aktiv{border-color:var(--zold)}
.nagyito{position:fixed;inset:0;z-index:1000;background:rgba(10,20,18,.92);display:flex;align-items:center;justify-content:center;padding:56px 12px}
.nagyito[hidden]{display:none}
.nagyito img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;background:#fff}
.nagyito button{position:absolute;border:0;background:rgba(255,255,255,.92);color:var(--tinta);width:48px;height:48px;border-radius:50%;font-size:26px;line-height:1;cursor:pointer}
.nagyito .nagyito-zar{top:10px;right:10px}
.nagyito .elozo{left:10px;top:50%;transform:translateY(-50%)}
.nagyito .kovetkezo{right:10px;top:50%;transform:translateY(-50%)}
.nagyito .nagyito-szam{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#fff;font-weight:600}
html.nagyito-nyitva{overflow:hidden}

/* ---- Kártya: „4 kiszerelés”, „…-tól” ---- */
.valtozat-jel{display:inline-block;margin:2px 0 0;padding:2px 10px;border-radius:999px;background:var(--zold-halvany);color:var(--zold-sotet);font-size:14px;font-weight:600}

/* ---- Kosár: a csomagolás külön sora ---- */
.csomag-sor td{border-top:0;padding-top:0;color:var(--halk);font-size:15px}
.tetel-csomag{display:block}

/* ---- Szerkesztő: képkezelő ---- */
.kepkezelo-lista{list-style:none;margin:0 0 10px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.kepkezelo-elem{border:2px solid var(--vonal);border-radius:14px;background:#fff;padding:6px;display:flex;flex-direction:column;gap:6px}
.kepkezelo-elem.huz{opacity:.5}
.kepkezelo-elem.cel{border-color:var(--zold)}
.kepkezelo-elem img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;display:block;cursor:grab}
.kepkezelo-elem .fo-jel{font-size:13px;font-weight:700;color:var(--zold-sotet)}
.kepkezelo-gombok{display:flex;gap:4px;flex-wrap:wrap}
.kepkezelo-gombok button{min-width:40px;min-height:40px;border-radius:10px;border:1px solid var(--vonal);background:#fff;cursor:pointer;font-size:16px}
.kepkezelo-gombok button:focus-visible{outline:3px solid var(--zold);outline-offset:1px}
.kepkezelo-allapot{display:block;margin-top:6px}

/* ---- Változatok szerkesztője ---- */
.valtozat-tabla input.mezo,.valtozat-tabla select.mezo{min-width:80px;padding:8px 10px}
.valtozat-tabla td{vertical-align:top}
.valtozat-tabla .szam{width:96px}
.valtozat-sor-gombok{display:flex;gap:4px}
.valtozat-sor-gombok button{min-width:40px;min-height:40px;border-radius:10px;border:1px solid var(--vonal);background:#fff;cursor:pointer}
@media (max-width:700px){
  .valtozat-tabla thead{display:none}
  .valtozat-tabla tr{display:block;border:1px solid var(--vonal);border-radius:14px;padding:8px;margin-bottom:10px;background:#fff}
  .valtozat-tabla td{display:flex;flex-direction:column;gap:2px;padding:4px 0;border:0}
  .valtozat-tabla td::before{content:attr(data-cim);font-size:13px;font-weight:700;color:var(--halk)}
  .valtozat-tabla .szam,.valtozat-tabla input.mezo{width:100%}
}
@media (max-width:600px){
  .valaszt-gomb > span{padding:8px 13px}
  .galeria-belyeg{width:56px;height:56px}
}