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

/* Skryté, ale ovladatelné klávesnicí — přepínač níž. Nepoužívat display:none,
   tím by prvek vypadl z pořadí tabulátoru. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Tři obchody jednoho provozovatele ────────────────────────────────────
   Posouvatelná okna vedle sebe. Na mobilu pod sebou, od 900 px do tří sloupců. */
.shops{display:grid;gap:26px;grid-template-columns:1fr}
@media(min-width:900px){ .shops{grid-template-columns:repeat(3,1fr);gap:22px} }
.shop{display:flex;flex-direction:column}
.shop-win{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);
  background:var(--surface);box-shadow:0 10px 30px rgba(26,37,71,.10)}
.shop-win .site-window-view{max-height:320px}
.shop-meta{padding:14px 2px 0}
.shop-meta b{display:block;font-family:var(--font-head);font-weight:700;color:var(--navy);
  font-size:1.08rem;margin-bottom:.25em}
.shop-meta span{display:block;color:var(--muted);font-size:.94rem;line-height:1.45}

/* ── Přepínač: pronajatá platforma vs. na míru ────────────────────────────
   ⚠️ Popisuje se MODEL, nikdy konkrétní firma (§6). Čistě CSS, funguje bez JS.
   ⚠️ Vstupy MUSÍ zůstat v DOM před přepínači i panely. */
.cmp2 input{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0)}
.cmp2-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:24px}
.cmp2-tabs label{display:inline-flex;align-items:center;cursor:pointer;
  border:1px solid var(--border);background:var(--surface);border-radius:999px;
  padding:11px 20px;font-size:.98rem;font-weight:600;color:var(--navy);
  transition:background .15s,border-color .15s,color .15s}
.cmp2-tabs label:hover{border-color:var(--navy)}
.cmp2 input:focus-visible + label{outline:2px solid var(--orange);outline-offset:2px}
#e-najem:checked ~ .cmp2-tabs label[for="e-najem"],
#e-miru:checked  ~ .cmp2-tabs label[for="e-miru"]{background:var(--navy);
  border-color:var(--navy);color:#fff}
.cmp2-panel{display:none}
#e-najem:checked ~ .cmp2-panels .cmp2-panel--najem,
#e-miru:checked  ~ .cmp2-panels .cmp2-panel--miru{display:block}
.cmp2-card{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:26px 22px;box-shadow:var(--shadow)}
.cmp2-card--miru{border-color:var(--orange)}
.cmp2-card h3{font-size:1.18rem;margin-bottom:.45em}
.cmp2-card > p{color:var(--muted);margin:0 0 16px}
.cmp2-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cmp2-list li{display:flex;gap:11px;align-items:flex-start;color:var(--muted);
  font-size:.97rem;line-height:1.5}
.cmp2-list svg{width:19px;height:19px;flex:none;margin-top:2px;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.cmp2-list .ok svg{stroke:var(--green-600)}
.cmp2-list .bad svg{stroke:var(--orange)}
.cmp2-list b{color:var(--navy);font-weight:600}

/* ── Co e-shop potřebuje navíc proti webu ────────────────────────────────
   Čísla nejsou dekorace: čtenář má vidět, že e-shop je víc práce než web,
   a proto se cena nedá říct dopředu jedním číslem. */
.parts{list-style:none;margin:0;padding:0;display:grid;gap:2px;grid-template-columns:1fr}
@media(min-width:820px){ .parts{grid-template-columns:1fr 1fr;column-gap:48px} }
.parts li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  padding:20px 0;border-top:1px solid var(--border)}
.parts li:first-child{border-top:0}
@media(min-width:820px){ .parts li:nth-child(2){border-top:0} }
.parts i{font-style:normal;font-family:var(--font-head);font-weight:700;
  font-size:1rem;color:var(--orange);padding-top:.2em;letter-spacing:.02em}
.parts b{display:block;font-family:var(--font-head);font-weight:600;color:var(--navy);
  font-size:1.08rem;margin-bottom:.25em}
.parts span{color:var(--muted);font-size:.96rem;line-height:1.5}

/* ── Ceník e-shopu ────────────────────────────────────────────────────────
   Dvě karty vedle sebe od 860 px, pod sebou na mobilu. Doporučovaná je ta
   DRUHÁ (oranžová) — je to schválně, liší se jen pokročilým SEO a bez
   zvýraznění by ji nikdo nepřečetl jako doporučení.
   ⚠️ Ceny se sem NIKDY nepíšou číslem, jdou z config/pricing.php. */
.epack{display:grid;gap:20px;grid-template-columns:1fr;align-items:start;
  max-width:1000px;margin:0 auto}
@media(min-width:860px){ .epack{grid-template-columns:1fr 1fr;gap:24px} }
.epack-card{position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:28px 24px}
.epack-card--hi{border-color:var(--orange);box-shadow:0 10px 34px rgba(239,96,29,.14)}
/* Štítek „Doporučujeme" sedí na horním okraji karty. Navy text na oranžové —
   bílá by na oranžové neprošla kontrastem u takhle drobného písma. */
.epack-flag{position:absolute;top:-13px;left:24px;background:var(--orange);color:var(--navy);
  font-family:var(--font-head);font-weight:700;font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;border-radius:999px;padding:6px 14px}
.epack-lab{display:block;font-family:var(--font-head);font-weight:700;color:var(--navy);
  font-size:1.2rem;margin-bottom:.25em}
.epack-card--hi .epack-lab{color:var(--orange-600)}
.epack-price{font-family:var(--font-head);font-weight:700;color:var(--navy);
  font-size:clamp(2rem,6vw,2.7rem);line-height:1;letter-spacing:-.03em}
.epack-card--hi .epack-price{color:var(--orange-600)}
.epack-tag{color:var(--muted);font-size:.97rem;line-height:1.5;margin:.7em 0 18px;
  padding-bottom:18px;border-bottom:1px solid var(--border)}
.epack-list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.epack-list li{position:relative;padding-left:30px;color:var(--muted);
  font-size:.96rem;line-height:1.5}
.epack-list li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;
  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/13px no-repeat}
.epack-list b{color:var(--navy);font-weight:600}
.epack-note{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--border);
  color:var(--muted);font-size:.9rem;line-height:1.55}
.epack-note b{color:var(--navy);font-weight:600}
.epack-after{text-align:center;color:var(--muted);font-size:.96rem;line-height:1.6;
  max-width:70ch;margin:26px auto 0}
.epack-after b{color:var(--navy);font-weight:600}

/* ── Co platí u obou balíčků ──────────────────────────────────────────────
   Pruh mezi nadpisem sekce a kartami. Shrnuje to společné, aby to člověk
   nemusel číst dvakrát v obou kartách — a hlavně aby sekce nezačínala jen
   nadpisem a odstavcem. */
.eshop-spolecne{list-style:none;margin:0 auto 30px;padding:0;max-width:1000px;
  display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:620px){ .eshop-spolecne{grid-template-columns:1fr 1fr;gap:16px 26px} }
@media(min-width:1000px){ .eshop-spolecne{grid-template-columns:repeat(4,1fr);gap:20px} }
.eshop-spolecne li{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;
  align-items:start}
.eshop-spolecne svg{grid-row:span 2;width:26px;height:26px;flex:none;margin-top:2px;
  fill:none;stroke:var(--orange);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.eshop-spolecne b{font-family:var(--font-head);font-weight:600;color:var(--navy);
  font-size:1rem;line-height:1.3}
.eshop-spolecne span{color:var(--muted);font-size:.93rem;line-height:1.5}