/* ══════════════════════════════════════════════════════════════════════════
   /doplnky — styly JEN pro tuhle stránku. Načítá se přes $extra_css.
   ⚠️ Barvy VÝHRADNĚ z proměnných base.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Dvě velké věci s vlastní stránkou ────────────────────────────────────
   Celá karta je odkaz. Není to tlačítko: kdo sem přišel pro ceny, chce
   nejdřív vidět číslo a teprve pak klikat.
   ⚠️ Jsou DVĚ a je to schválně (e-shop je samostatná služba, ne doplněk).
   Proto mají ikonu, výčet a širší sloupce — dvojice drobných boxů by
   vypadala jako řada, ze které něco vypadlo. */
.bigadd{display:grid;gap:18px;grid-template-columns:1fr;max-width:940px;margin:0 auto}
@media(min-width:820px){ .bigadd{grid-template-columns:1fr 1fr;gap:24px} }
/* Jedna karta od 17. 9. 2026 (Péče o web odešla), na střed místo půlky řádku. */
@media(min-width:820px){ .bigadd--one{grid-template-columns:1fr;max-width:470px} }
.bigadd-card{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);padding:28px 26px;
  color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s}
.bigadd-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);
  border-color:var(--orange);text-decoration:none}
.bigadd-ico{display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:13px;background:var(--orange-tint);margin-bottom:16px;flex:none}
.bigadd-ico svg{width:24px;height:24px;fill:none;stroke:var(--orange-600);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.bigadd-lab{display:block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--muted);margin-bottom:.4em}
.bigadd-price{display:block;font-family:var(--font-head);font-weight:700;color:var(--navy);
  font-size:clamp(1.6rem,4.6vw,2.1rem);line-height:1;letter-spacing:-.03em;margin-bottom:.7em}
/* Poznámka za cenou drobným — „jednorázově" vedle „měsíčně" je rozdíl, který
   musí být vidět dřív, než člověk začne porovnávat čísla. */
.bigadd-price em{display:block;font-style:normal;font-family:var(--font-body);
  font-weight:400;font-size:.8rem;color:var(--muted);letter-spacing:0;margin-top:.5em}
.bigadd-card:hover .bigadd-price{color:var(--orange-600)}
.bigadd-desc{display:block;color:var(--muted);font-size:.97rem;line-height:1.6}
.bigadd-list{list-style:none;margin:18px 0 0;padding:18px 0 0;
  border-top:1px solid var(--border);display:grid;gap:9px;flex:1;align-content:start}
.bigadd-list li{position:relative;padding-left:26px;color:var(--muted);
  font-size:.93rem;line-height:1.5}
.bigadd-list li::before{content:"";position:absolute;left:0;top:1px;width:17px;height:17px;
  border-radius:50%;background:var(--orange-tint) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EF601D' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5L20 7'/></svg>") center/11px no-repeat}
.bigadd-go{display:block;margin-top:20px;font-family:var(--font-head);font-weight:600;
  font-size:.92rem;color:var(--orange-600)}
.bigadd-go::after{content:" →"}

/* ── Ceník doplňků ────────────────────────────────────────────────────────
   Ne tabulka: na mobilu se tabulka se dvěma sloupci nedá číst a popis by se
   do buňky nevešel. Řádky s cenou vpravo dělají totéž a čtou se všude. */
.addons{list-style:none;margin:0;padding:0;display:grid;gap:0;grid-template-columns:1fr;
  max-width:1080px;margin:0 auto}
@media(min-width:900px){ .addons{grid-template-columns:1fr 1fr;column-gap:48px} }
.addons li{padding:18px 0;border-top:1px solid var(--border)}
.addons li:first-child{border-top:0}
@media(min-width:900px){ .addons li:nth-child(2){border-top:0} }
/* Název a cena na jednom řádku, cena zarovnaná doprava a nikdy nezalomená —
   je to to jediné, kvůli čemu člověk na tuhle stránku přišel. */
.addon-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-bottom:6px}
.addon-h b{font-family:var(--font-head);font-weight:600;color:var(--navy);
  font-size:1.05rem;line-height:1.3}
.addon-p{flex:none;font-family:var(--font-head);font-weight:700;color:var(--orange-600);
  font-size:1rem;white-space:nowrap}
.addons p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55}
.addons-note{text-align:center;color:var(--muted);font-size:.96rem;line-height:1.6;
  max-width:72ch;margin:30px auto 0;padding-top:22px;border-top:1px solid var(--border)}
.addons-note b{color:var(--navy);font-weight:600}

/* ── Co je naopak v ceně ──────────────────────────────────────────────────
   ⚠️ NENÍ to seznam „co neděláme" (ten majitel 11. 8. 2026 zakázal). Je to
   opak: věci, za které lidé čekají příplatek, a ony příplatek nemají. */
.freebies{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:760px){ .freebies{grid-template-columns:1fr 1fr;column-gap:34px} }
.freebies li{position:relative;padding-left:32px;color:var(--muted);font-size:.97rem;
  line-height:1.55}
.freebies li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;
  border-radius:50%;background:var(--orange-tint) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EF601D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5L20 7'/></svg>") center/14px no-repeat}
.freebies b{display:block;color:var(--navy);font-weight:600}

/* ── „Nenašli jste, co potřebujete?" ──────────────────────────────────────
   Text vlevo, tři skutečné zakázky vpravo. Bez těch příkladů to byly dva
   odstavce v rámečku a působilo to nedodělaně (Alexandr 12. 8. 2026).
   ⚠️ Příklady MUSÍ být věci, které jsme opravdu postavili — stejné pravidlo
   jako u pásu schopností (§13). */
.askmore{max-width:1080px;margin:34px auto 0;background:var(--surface);
  border:1px solid var(--border);border-left:4px solid var(--orange);
  border-radius:var(--radius);padding:28px 24px}
@media(min-width:760px){ .askmore{padding:36px 38px} }
.askmore-grid{display:grid;gap:28px;grid-template-columns:1fr;align-items:start}
@media(min-width:900px){ .askmore-grid{grid-template-columns:1fr 1fr;gap:44px} }
.askmore h3{font-size:clamp(1.2rem,3.4vw,1.55rem);margin-bottom:.5em}
.askmore p{color:var(--muted);font-size:1rem;line-height:1.65;margin:0 0 1em}
.askmore p strong{color:var(--navy);font-weight:600}
.askmore-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.askmore-cta .btn{flex:1 1 auto;min-width:min(100%,220px);justify-content:center}
@media(min-width:560px){ .askmore-cta .btn{flex:0 0 auto} }
.askmore-fine{font-size:.92rem;margin:16px 0 0 !important}

/* Tři příklady. Uvozovky ve zvýrazněném řádku jsou schválně: je to věta, se
   kterou klient přišel, ne název funkce z ceníku. */
.askmore-priklady{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.askmore-priklady li{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:16px 16px}
.askmore-priklady svg{grid-row:span 2;width:24px;height:24px;flex:none;margin-top:2px;
  fill:none;stroke:var(--orange);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.askmore-priklady b{font-family:var(--font-head);font-weight:600;color:var(--navy);
  font-size:.98rem;line-height:1.35}
.askmore-priklady span{color:var(--muted);font-size:.9rem;line-height:1.5}