/* Termékoldali árcédula és az árpanel sora minden ágban (kártyás, közönséges, promóciós és közös ajánlat); sablon: arcedula_html() és termek-ar.php.
 * Két család: a szórólap-zászló (--zaszlo) a bolt saját árcímkéjét követi a felhasználó terve szerint, boltonként eltérő felépítéssel és színnel
 * (--myspar, --auchan, --clubcard); a Leltem árlap (--leltem) a többi ajánlat semleges lapja, a promóciós és a közös ajánlaté is. Az egyik bolt tervét nem húzzuk rá a többire.
 * A termékoldal felülete mindig világos, ezért a komponens saját, a témától független színkészletet használ (--ac-*). */
.ar-blokk--cedula,
.kombinalt-panel{
  --ac-szoveg:#2b2118;
  --ac-halk:#766553;
  --ac-zold:#1f6b45;
  --ac-sav:#bc4c13;
}
.arcedula-sor{
  grid-column:1/-1;
  flex:1 1 100%;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:18px 30px;
  min-width:0;
  padding:22px 22px 24px;
  color:var(--ac-szoveg);
}
.arcedula{
  --ac-arnyek:0 0 0 1px #0000001f,0 6px 14px #3a22101a;
  position:relative;
  container-type:inline-size;
  display:grid;
  width:244px;
  max-width:100%;
  overflow:hidden;
  border-radius:4px;
}
.arcedula-ar{
  display:flex;
  align-items:baseline;
  gap:.12em;
  font-weight:900;
  letter-spacing:-.035em;
  line-height:1;
  white-space:nowrap;
}
.arcedula-ft{
  font-size:.4em;
  font-weight:800;
  letter-spacing:0;
}
/* Szórólap-zászló: sávok egymás alatt; a változat a színeket és az elrendezést adja. */
.arcedula--zaszlo{
  --ac-sarga:#ffe500;
  --ac-tinta:#1c1814;
  --ac-regi-hatter:var(--ac-sarga);
  --ac-regi-szin:var(--ac-tinta);
  --ac-cimke-hatter:#3a2a1e;
  --ac-cimke-szin:#fff;
  --ac-sz-hatter:#e0242b;
  --ac-sz-szin:#fff;
  --ac-ar-hatter:var(--ac-sarga);
  --ac-ar-szin:var(--ac-tinta);
  grid-template-columns:minmax(0,1fr);
  align-content:start;
  background:var(--ac-ar-hatter);
  box-shadow:var(--ac-arnyek);
  color:var(--ac-ar-szin);
}
.arcedula--zaszlo .arcedula-regi{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:2cqw 3cqw;
  padding:2.8cqw 5.5cqw;
  background:var(--ac-regi-hatter);
  color:var(--ac-regi-szin);
  font-size:max(6.2cqw,11.5px);
  line-height:1.2;
}
.arcedula--zaszlo .arcedula-regi small{
  font-size:max(4.6cqw,9.5px);
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.arcedula--zaszlo .arcedula-regi s{
  font-weight:800;
  text-decoration-thickness:.12em;
}
.arcedula--zaszlo .arcedula-cimke{
  padding:2.8cqw 5.5cqw;
  background:var(--ac-cimke-hatter);
  color:var(--ac-cimke-szin);
  font-size:max(6cqw,11px);
  font-weight:900;
  letter-spacing:.04em;
  line-height:1.2;
  text-align:center;
  text-transform:uppercase;
}
.arcedula--zaszlo .arcedula-szazalek{
  padding:.8cqw 5.5cqw 1.8cqw;
  background:var(--ac-sz-hatter);
  color:var(--ac-sz-szin);
  font-size:max(13cqw,20px);
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.1;
  text-align:center;
}
.arcedula--zaszlo .arcedula-ar{
  justify-content:center;
  padding:3cqw 4cqw 4.5cqw;
  background:var(--ac-ar-hatter);
  color:var(--ac-ar-szin);
  font-size:max(22cqw,32px);
}
/* MySPAR: négy sáv egymás alatt: korábbi ár (sárga), „MySPAR ár” (türkiz), kedvezmény (piros), nagy ár (sárga). */
.arcedula--myspar{
  --ac-cimke-hatter:#12806f;
}
/* OK Auchan: felül sárga sáv a kedvezménnyel és a korábbi árral, alatta egy zöld tömb a felirattal és az árral. */
.arcedula--auchan{
  --ac-sz-hatter:var(--ac-sarga);
  --ac-sz-szin:var(--ac-tinta);
  --ac-cimke-hatter:#0e8a76;
  --ac-ar-hatter:#0e8a76;
  --ac-ar-szin:#fff;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"sz regi" "cimke cimke" "ar ar";
}
.arcedula--auchan .arcedula-szazalek{
  grid-area:sz;
  padding:3.4cqw 2cqw 3.4cqw 5.5cqw;
  font-size:max(12cqw,19px);
  text-align:left;
}
.arcedula--auchan .arcedula-regi{
  grid-area:regi;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:0;
  padding:3cqw 5.5cqw 3cqw 2cqw;
  text-align:right;
}
.arcedula--auchan .arcedula-cimke{
  grid-area:cimke;
  padding-bottom:0;
  font-size:max(6.2cqw,11.5px);
  letter-spacing:0;
  text-align:left;
  text-transform:none;
}
.arcedula--auchan .arcedula-ar{
  grid-area:ar;
  justify-content:flex-start;
  padding:1cqw 5.5cqw 4.5cqw;
}
/* Tesco Clubcard: felül halvány sáv a Clubcard nélküli árral, középen a nagy ár, alul kék felirat; a kedvezmény kis piros jelvény a sárga tömbben. */
.arcedula--clubcard{
  --ac-regi-hatter:#fff5bf;
  --ac-cimke-hatter:#1a4f9c;
  grid-template-areas:"regi" "ar" "cimke";
}
.arcedula--clubcard .arcedula-regi{
  grid-area:regi;
  justify-content:center;
  gap:2cqw;
}
.arcedula--clubcard .arcedula-ar{
  grid-area:ar;
  padding:12cqw 4cqw 5cqw;
}
.arcedula--clubcard .arcedula-cimke{
  grid-area:cimke;
}
.arcedula--clubcard .arcedula-szazalek{
  grid-area:ar;
  position:relative;
  z-index:1;
  align-self:start;
  justify-self:start;
  margin:3cqw 0 0 4cqw;
  padding:.8cqw 2.6cqw;
  border-radius:3px;
  font-size:max(6.6cqw,11px);
  letter-spacing:0;
}
/* Leltem árlap: a bolt saját terve nélküli ajánlatok semleges, krém lapja terrakotta sávval, felirattal, piros kedvezményjelvénnyel és nagy árral.
 * A cqw egység a tárolóhoz (a címke) képest számol, ezért a belső távolságokat a gyermekek kapják, nem maga a címke. */
.arcedula--leltem{
  --ac-lap:#fbf0d9;
  --ac-lap-szoveg:#2b1a10;
  --ac-lap-halk:#8a6a48;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"cimke szazalek" "ar ar" "db db" "regi regi";
  align-content:start;
  background:var(--ac-lap);
  box-shadow:var(--ac-arnyek);
  color:var(--ac-lap-szoveg);
}
.arcedula--leltem::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:1.8cqw;
  background:var(--ac-sav);
}
.arcedula--leltem .arcedula-cimke{
  grid-area:cimke;
  align-self:center;
  min-width:0;
  padding:3.8cqw 0 0 8cqw;
  color:var(--ac-sav);
  font-size:max(5.4cqw,11px);
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.arcedula--akcio .arcedula-cimke{
  padding-right:2.4cqw;
}
.arcedula--leltem .arcedula-szazalek{
  grid-area:szazalek;
  align-self:end;
  margin:3.2cqw 5cqw 0 0;
  padding:.8cqw 2.6cqw;
  border-radius:3px;
  background:#b3261e;
  color:#fff;
  font-size:max(6.6cqw,12px);
  font-weight:900;
}
.arcedula--leltem .arcedula-ar{
  grid-area:ar;
  padding:2.4cqw 5cqw 0 8cqw;
  font-size:max(22cqw,32px);
}
.arcedula--leltem .arcedula-db{
  grid-area:db;
  padding:1.8cqw 5cqw 0 8cqw;
  color:var(--ac-lap-halk);
  font-size:max(5.4cqw,11px);
  font-weight:700;
  line-height:1.3;
}
.arcedula--leltem .arcedula-db:last-child{
  padding-bottom:4.6cqw;
}
.arcedula--leltem .arcedula-regi{
  grid-area:regi;
  display:flex;
  align-items:baseline;
  gap:2.4cqw;
  padding:2cqw 5cqw 4.4cqw 8cqw;
  color:var(--ac-lap-halk);
  font-size:max(5.6cqw,11px);
}
.arcedula--leltem .arcedula-regi small{
  font-size:inherit;
  font-weight:700;
}
.arcedula--leltem .arcedula-regi s{
  font-weight:800;
}
/* hosszú összegek és lejárt állapot a családi szabályok után, hogy azokat írják */
.arcedula--hosszu .arcedula-ar{
  font-size:max(17cqw,26px);
}
.arcedula--nagyon-hosszu .arcedula-ar{
  font-size:max(13.5cqw,21px);
}
.arcedula--lejart{
  filter:grayscale(1);
  opacity:.62;
}
/* A címke melletti adatok */
.arcedula-adat{
  display:grid;
  gap:14px;
  align-content:start;
  min-width:0;
}
.arcedula-egysegar{
  display:grid;
  gap:3px;
}
.arcedula-egysegar>span{
  color:var(--ac-halk);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.arcedula-egysegar>b{
  font-size:32px;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.1;
}
.arcedula-egysegar>b small{
  color:var(--ac-halk);
  font-size:.5em;
  font-weight:700;
  letter-spacing:0;
}
.arcedula-megtakaritas{
  margin:0;
  color:var(--ac-zold);
  font-size:15px;
  font-weight:800;
  line-height:1.35;
}
.arcedula-megjegyzes{
  margin:0;
  color:var(--ac-halk);
  font-size:13px;
  line-height:1.5;
}
.arcedula-program{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  margin:0;
  color:var(--ac-halk);
  font-size:13px;
  font-weight:700;
  line-height:1.35;
}
.arcedula-program a{
  display:flex;
  flex:0 0 auto;
}
.arcedula-program img{
  width:30px;
  height:30px;
  object-fit:contain;
}
/* Többdarabos (promóciós) ajánlat: telefonon a termékkép a cédula mellett áll (két példány a darabszámmal), a külön képdoboz ott rejtve; asztalon a kép nem látszik */
.promo-ar-kep,
.promo-ar-eredet{
  display:none;
}
/* Közös (kombinált) ajánlat: a fej, a termékcsempék, az árcédula-sor és a gomb egymás alatt; az ár az árcédulán áll */
.kombinalt-cimke{
  color:var(--ac-sav);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.kombinalt-valasztas,
.kombinalt-szoveg{
  margin:0;
  padding:18px 22px 0;
  color:var(--ac-halk);
  font-size:13px;
  line-height:1.5;
}
.kombinalt-szoveg p{
  margin:0 0 8px;
}
.kombinalt-termekek{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  padding:18px 22px 0;
}
.kombinalt-plusz{
  display:none;
}
.kombinalt-tag{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  padding:10px;
  border:1px solid #e8ddca;
  border-radius:4px;
  background:#f7f0e4;
}
.kombinalt-kep{
  display:grid;
  place-items:center;
  flex:none;
  width:64px;
  height:64px;
  overflow:hidden;
  border-radius:4px;
  background:var(--kep-szin,#fff);
}
.kombinalt-kep>img{
  width:100%;
  height:100%;
  padding:3px;
  object-fit:contain;
}
.kombinalt-kep>span{
  color:#7c7369;
  font-size:24px;
}
.kombinalt-tag-nev{
  display:grid;
  gap:3px;
  min-width:0;
  font-size:14px;
  line-height:1.3;
  overflow-wrap:anywhere;
}
.kombinalt-tag-nev small,
.kombinalt-tag-nev label{
  color:var(--ac-halk);
  font-size:11px;
}
.kombinalt-tag-nev label{
  display:flex;
  align-items:center;
  gap:6px;
}
.kombinalt-tag-nev a,
.kombinalt-tag-nev b{
  color:var(--ac-szoveg);
  font-weight:800;
  text-decoration:none;
}
.kombinalt-tag-nev a:hover{
  text-decoration:underline;
}
.kombinalt-feltetel{
  margin:0;
  font-size:14px;
  font-weight:700;
  line-height:1.5;
}
.kombinalt-lista-gomb{
  max-width:calc(100% - 44px);
  margin:0 22px 22px;
  white-space:normal;
}
@media (max-width:1000px){
  .promo-ar .arcedula-sor,
  .kombinalt-panel .arcedula-sor{
    grid-template-columns:minmax(0,1fr);
  }
  .promo-ar .arcedula,
  .kombinalt-panel .arcedula{
    width:224px;
  }
  .kombinalt-termekek{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .kombinalt-plusz{
    display:block;
    color:var(--ac-sav);
    font-size:16px;
    font-weight:800;
    line-height:1;
    text-align:center;
  }
}
@media (max-width:700px){
  .arcedula-sor{
    grid-template-columns:168px minmax(0,1fr);
    gap:14px 16px;
    padding:16px 16px 18px;
  }
  .arcedula{
    width:168px;
  }
  .arcedula-egysegar>b{
    font-size:24px;
  }
  .arcedula-megtakaritas{
    font-size:14px;
  }
  .promo-ar--kep .arcedula-sor{
    grid-template-columns:116px minmax(0,1fr);
    align-items:center;
  }
  .promo-ar--kep .arcedula{
    width:100%;
  }
  .promo-ar--kep .termek-akciosor,
  .promo-ar--kep .arcedula-adat{
    grid-column:1/-1;
  }
  .promo-ar-kep{
    position:relative;
    display:block;
    height:116px;
  }
  .promo-ar-kep-hat,
  .promo-ar-kep-elo{
    position:absolute;
    display:grid;
    place-items:center;
    width:92px;
    height:92px;
    padding:5px;
    overflow:hidden;
    border:2px solid #fff;
    border-radius:5px;
    background-color:#fff;
    box-shadow:0 4px 10px #3a22101f;
  }
  .promo-ar-kep-hat{
    top:4px;
    left:18px;
    background-image:var(--promo-kep);
    background-origin:content-box;
    background-position:center;
    background-repeat:no-repeat;
    background-size:contain;
    transform:rotate(6deg);
  }
  .promo-ar-kep-elo{
    top:18px;
    left:0;
  }
  .promo-ar-kep img{
    width:100%;
    height:100%;
    object-fit:contain;
  }
  .promo-ar-kep-db{
    position:absolute;
    top:8px;
    left:-4px;
    z-index:3;
    padding:2px 7px;
    border-radius:4px;
    background:var(--ac-sav);
    color:#fff;
    font-size:14px;
    font-weight:900;
    box-shadow:0 2px 6px #3a221026;
  }
  .promo-ar-eredet{
    display:block;
    margin:0;
    padding:0 16px 14px;
    color:var(--ac-halk);
    font-size:12px;
    line-height:1.35;
  }
  .kombinalt-valasztas,
  .kombinalt-szoveg{
    padding:14px 16px 0;
  }
  .kombinalt-termekek{
    padding:14px 16px 0;
  }
  .kombinalt-lista-gomb{
    max-width:calc(100% - 32px);
    margin:0 16px 18px;
  }
}
@media (max-width:400px){
  .arcedula-sor{
    grid-template-columns:minmax(0,1fr);
  }
  .arcedula{
    width:224px;
  }
}
@media (max-width:340px){
  .promo-ar--kep .arcedula-sor{
    grid-template-columns:minmax(0,1fr);
  }
  .promo-ar-kep{
    width:116px;
    justify-self:center;
  }
}