/*
 * Az allando rendelo-oldal, telefonra.
 *
 * Ugyanaz a ket meres vezette, mint a rendezveny-oldalt, es ott sem izles volt:
 *  - a gombok legalabb 48 CSS px magasak, mert egy kezzel, allva is hasznaljak;
 *  - minden beviteli mezo betuje 16px vagy nagyobb, kulonben az iOS ranagyit az
 *    egesz lapra, amint valaki belekattint, es onnantol a lap nem fer ki.
 *
 * EGY HARMADIK, AMI ITT UJ: a darabszam-mezo SZAMBEVITELES, nem csak ±1 gomb.
 * A legkisebb rendeles 6 palack, ingyenes kiszallitas 12-tol: a +6 es +12
 * gomb pontosan ezt a ket hatart eri el egy erintessel.
 */

:root {
  --hatter: #17161a;
  --lap: #201f24;
  --lap2: #2a2930;
  --ink: #f2f0ee;
  --halvany: #a09c98;
  --vonal: #35333a;
  --arany: #c9a227;
  --arany-vilagos: #e0bf4d;
  --zold: #2f9e5f;
  --piros: #e06a6a;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--hatter);
  color: var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(2rem + env(safe-area-inset-bottom));
}

.mag { max-width: 34rem; margin: 0 auto; padding: 0 1rem; }

.fejlec {
  padding: max(1.6rem, env(safe-area-inset-top)) 1rem 1.2rem;
  border-bottom: 1px solid var(--vonal);
  margin-bottom: 1.4rem;
  text-align: center;
}
.marka { margin: 0; letter-spacing: .38em; font-size: .78rem; color: var(--arany); }
.fejlec h1 { margin: .45rem 0 .3rem; font-size: 1.35rem; font-weight: 600; }
.alcim { margin: 0; color: var(--halvany); font-size: .92rem; }
.szallitasi-info {
  margin: .7rem auto 0; max-width: 30rem; color: var(--ink); font-size: .84rem;
  line-height: 1.5; padding: .5rem .8rem; border: 1px solid var(--vonal);
  border-radius: 10px; background: var(--lap);
}

.szekcio {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--halvany); font-weight: 600; margin: 1.6rem 0 .7rem;
}

/* ---- termekek ---- */
.racs { display: grid; gap: .7rem; }
.termek {
  display: grid; grid-template-columns: auto 1fr; gap: .8rem;
  align-items: center;
  background: var(--lap); border: 1px solid var(--vonal);
  border-radius: 14px; padding: .8rem;
}
/* A SZALLITOTT KEP 400px MAGAS -- height:auto NELKUL a HTML width/height
   attributum (103x200, layout-hint a vasarlas/index.php mintajabol atvetve)
   eroltetne rossz aranyba a kepet, mert az nem egyezik a valodi 102x400
   arannyal. Itt height fix + width auto: a bongeszo a VALODI aranyt szamolja,
   a HTML attributum csak a betoltes elotti hely-foglalasra szolgal. */
.termek img { height: 200px; width: auto; grid-row: span 2; border-radius: 8px; }
.termek h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.jelleg { margin: .15rem 0 .35rem; color: var(--halvany); font-size: .84rem; }
/* Gluten line: a factual label on every bottle, so it must stay readable but
   never shout louder than the product name. Green only for the lab-verified two. */
.jelveny {
  display: inline-block; margin: 0 0 .4rem; padding: .1rem .5rem;
  border: 1px solid var(--vonal); border-radius: 999px;
  color: var(--halvany); font-size: .76rem;
}
.jelveny.gm { color: var(--zold); border-color: var(--zold); font-weight: 600; }
.ar { margin: 0; font-weight: 600; }
.ar .egyseg { color: var(--halvany); font-weight: 400; font-size: .84rem; }

.lepteto { grid-column: 2; display: flex; align-items: center; gap: .5rem; margin-top: .5rem; }
.lepteto button {
  width: 48px; height: 48px; flex: none;
  border-radius: 10px; border: 1px solid var(--vonal);
  background: var(--lap2); color: var(--ink); font-size: 1.3rem; line-height: 1;
}
.lepteto button:active { background: var(--vonal); }
.lepteto .db {
  width: 4.2rem; height: 48px; text-align: center;
  font-size: 1.05rem; font-weight: 600;
  border-radius: 10px; border: 1px solid var(--vonal);
  background: var(--hatter); color: var(--ink);
}
.gyors { grid-column: 2; display: flex; gap: .5rem; }
.gyors button {
  min-height: 40px; padding: 0 .9rem; border-radius: 999px;
  border: 1px solid var(--vonal); background: transparent;
  color: var(--halvany); font-size: .88rem;
}

/* ---- osszesito ---- */
.osszesito {
  position: sticky; bottom: 0; margin-top: 1.2rem;
  background: var(--lap); border: 1px solid var(--vonal);
  border-radius: 14px; padding: .9rem 1rem 1rem;
  box-shadow: 0 -10px 30px rgba(0,0,0,.45);
}
/* A [hidden] attributumot a bongeszo `display:none`-nal valositja meg, de azt
   EGY OSZTALY-szabaly is felulirja. A .sor display:flex-e pontosan ezt tette:
   a kedvezmeny-sor `hidden`-re volt allitva, megis ott allt a lapon
   "5% mennyiségi kedvezmény -0 Ft" szoveggel MINDEN 48 palack alatti kosarnal.
   A JS jol mukodott -- a CSS ette meg. Ezert all itt kifejezetten. */
[hidden] { display: none !important; }
.sor { display: flex; justify-content: space-between; margin: .25rem 0; }
.sor.kedvezmeny { color: var(--zold); }
.sor.szallitas { color: var(--halvany); }
.sor.szallitas strong { color: var(--ink); }
.adat-osszeg { margin: .2rem 0 1rem; font-weight: 600; }
.sor.fizetendo { border-top: 1px solid var(--vonal); margin-top: .6rem; padding-top: .6rem; font-size: 1.1rem; }
.megjegyzes { margin: .6rem 0 .8rem; color: var(--halvany); font-size: .86rem; }

button#tovabb, button#kuld {
  width: 100%; min-height: 52px; border: 0; border-radius: 12px;
  background: var(--arany); color: #1a1710; font-size: 1rem; font-weight: 700;
}
button#tovabb:disabled { background: var(--lap2); color: var(--halvany); }
button#vissza, button#ujra {
  width: 100%; min-height: 48px; border-radius: 12px;
  border: 1px solid var(--vonal); background: transparent; color: var(--ink); font-size: .95rem;
}
.gombsor { display: grid; gap: .6rem; margin-top: 1rem; }

/* ---- urlap ---- */
form label { display: block; margin: .8rem 0; font-size: .9rem; color: var(--halvany); }
form input:not([type=radio]):not([type=checkbox]) {
  display: block; width: 100%; margin-top: .3rem;
  min-height: 48px; padding: 0 .8rem;
  font-size: 16px;                       /* iOS: ez alatt ranagyit a lapra */
  color: var(--ink); background: var(--hatter);
  border: 1px solid var(--vonal); border-radius: 10px;
}
fieldset { border: 1px solid var(--vonal); border-radius: 12px; padding: .4rem .9rem 1rem; margin: 1.2rem 0; }
legend { padding: 0 .4rem; color: var(--halvany); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.valaszt { display: flex; gap: .6rem; align-items: flex-start; color: var(--ink); font-size: .95rem; }
.valaszt input { width: 22px; height: 22px; margin-top: .15rem; flex: none; accent-color: var(--arany); }
.sugo { color: var(--halvany); font-size: .86rem; margin: .5rem 0 0; }
.hiba { color: var(--piros); font-size: .9rem; }
/* The ÁSZF link inside the form: the browser default blue is unreadable on the dark page. */
form a { color: var(--arany-vilagos); }

.sorszam { font-size: 1.3rem; }
.sorszam strong { color: var(--arany-vilagos); }

.lablec { margin: 2.5rem auto 0; max-width: 34rem; padding: 1.2rem 1rem 2rem;
          border-top: 1px solid var(--vonal); color: var(--halvany); font-size: .84rem; text-align: center; }
.lablec a { color: var(--halvany); }

/* ---- ASZF-oldal ---- */
.szoveges .cikk { padding-bottom: 3rem; }
.cikk h2 { font-size: 1.05rem; margin: 1.8rem 0 .5rem; }
.cikk h3 { font-size: .95rem; margin: 1.2rem 0 .4rem; color: var(--halvany); }
.cikk p, .cikk li { font-size: .94rem; }
.cikk ul { padding-left: 1.1rem; }
.cikk blockquote {
  margin: 1rem 0; padding: .7rem .9rem; border-left: 3px solid var(--arany);
  background: var(--lap); border-radius: 0 10px 10px 0; color: var(--halvany); font-size: .9rem;
}
.cikk a { color: var(--arany-vilagos); }
.vissza { margin-top: 2rem; }

/* A nem valaszthato atveteli mod (limitalt doboz 24 palack alatt: csak
   szemelyes). Halvanyan, de LATHATOAN ott marad -- eltuntetve a vasarlo azt
   hinne, hogy kiszallitas egyaltalan nincs. */
.valaszt.tiltott { opacity: .45; }
.valaszt.tiltott span { text-decoration: line-through; }