/* domacimazlicek.cz — jediný stylopis webu.
   Barvy rubrik přicházejí z HTML jako proměnná --c (viz site.json). */

:root {
  --zelena: #2F4A3A;
  --zelena-tm: #223729;
  --papir: #FBF8F2;
  --papir-tm: #F3EDE1;
  --text: #22201C;
  --text-sl: #5E5850;
  --linka: #E2DACB;
  --c: #4A6B57;
  --r: 14px;
  --w: 1140px;
  --wn: 760px;
  --pismo: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--papir);
  color: var(--text);
  font: 400 17px/1.65 var(--pismo);
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

a { color: var(--zelena); text-decoration-color: rgba(47, 74, 58, .35); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

h1, h2, h3 { line-height: 1.22; letter-spacing: -.012em; margin: 0 0 .5em; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.3vw, 2.7rem); }
h2 { font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.75rem); }
h3 { font-size: 1.12rem; }

.wrap { width: min(var(--w), 100% - 32px); margin-inline: auto; }
.wrap--n { width: min(var(--wn), 100% - 32px); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--zelena); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; }

:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; border-radius: 4px; }

/* ---------------------------------------------------------- hlavička */
.hd { background: var(--zelena); color: #fff; position: sticky; top: 0; z-index: 30; }
.hd__in { display: flex; align-items: center; gap: 16px; min-height: 62px; flex-wrap: wrap; }
.logo {
  color: #fff; text-decoration: none; font-weight: 700; font-size: 1.12rem;
  display: inline-flex; align-items: center; gap: 8px; margin-right: auto;
}
.logo__m { font-size: 1.3rem; }
.burger {
  display: none; background: none; border: 1px solid rgba(255, 255, 255, .35);
  color: #fff; font-size: 1.15rem; border-radius: 10px; padding: 5px 12px; cursor: pointer;
}
.menu { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.menu__l { display: flex; gap: 4px 14px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.menu__l a {
  color: rgba(255, 255, 255, .9); text-decoration: none; font-size: .87rem;
  padding: 4px 2px; border-bottom: 2px solid transparent; display: inline-block;
}
.menu__l a:hover { color: #fff; border-bottom-color: var(--c, #fff); }
.menu__l--sec a { opacity: .72; }

@media (max-width: 900px) {
  .burger { display: block; }
  .menu { display: none; width: 100%; padding-bottom: 12px; }
  .menu.is-open { display: block; }
  .menu__l { flex-direction: column; gap: 2px; }
  .menu__l a { padding: 7px 0; }
}

/* --------------------------------------------------------- drobečky */
.bc { margin: 18px 0 6px; font-size: .82rem; color: var(--text-sl); }
.bc ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.bc li + li::before { content: "›"; margin-right: 6px; opacity: .6; }
.bc a { color: var(--text-sl); }

/* --------------------------------------------------------- homepage */
.hero-h {
  background: linear-gradient(160deg, var(--zelena) 0%, var(--zelena-tm) 100%);
  color: #fff; padding: clamp(40px, 7vw, 76px) 0;
}
.hero-h__in { max-width: 760px; }
.hero-h__k { margin: 0 0 10px; font-size: .84rem; letter-spacing: .09em; text-transform: uppercase; opacity: .78; }
.hero-h__h1 { color: #fff; margin-bottom: .35em; }
.hero-h__l { font-size: 1.1rem; opacity: .92; margin: 0 0 20px; }
.hero-h__b { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; margin: 0 0 26px; font-size: .9rem; opacity: .85; }
.hero-h__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

.btn {
  display: inline-block; background: #fff; color: var(--zelena); font-weight: 600;
  padding: 11px 20px; border-radius: 999px; text-decoration: none; border: 2px solid #fff;
  cursor: pointer; font-size: .95rem; font-family: inherit;
}
.btn:hover { background: var(--papir-tm); }
.btn--g { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.btn--g:hover { background: rgba(255, 255, 255, .12); }
.p-art .btn, .p-404 .btn, .p-search .btn { background: var(--zelena); color: #fff; border-color: var(--zelena); }
.p-404 .btn--g { background: transparent; color: var(--zelena); border-color: var(--linka); }

.sec-b { padding: clamp(34px, 5vw, 56px) 0 0; }
.sec-b__h { margin-bottom: .3em; }
.sec-b__l { color: var(--text-sl); margin: 0 0 22px; max-width: 62ch; }

.rubs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.rub {
  background: #fff; border: 1px solid var(--linka); border-left: 5px solid var(--c);
  border-radius: var(--r); padding: 16px 18px; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 5px; transition: transform .16s, box-shadow .16s;
}
.rub:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(34, 32, 28, .09); }
.rub__n { font-weight: 700; font-size: 1.05rem; }
.rub__d { font-size: .87rem; color: var(--text-sl); }
.rub__c { font-size: .78rem; color: var(--c); font-weight: 600; margin-top: 4px; }

.qh { background: var(--papir-tm); margin-top: clamp(38px, 6vw, 62px); padding: clamp(32px, 5vw, 52px) 0; }
.qh__in { max-width: 680px; }
.qh__h { margin-bottom: .3em; }
.qh__l { color: var(--text-sl); margin: 0 0 18px; }

.nl { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 40px; }
.nl__lb { position: absolute; left: -9999px; }
.nl__in {
  flex: 1 1 240px; padding: 11px 15px; border: 1px solid var(--linka);
  border-radius: 999px; font: inherit; font-size: .95rem; background: #fff; min-width: 0;
}
.nl__note { flex-basis: 100%; font-size: .78rem; color: var(--text-sl); }

/* ------------------------------------------------------------ karty */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin: 4px 0 8px; }
.card { background: #fff; border: 1px solid var(--linka); border-radius: var(--r); overflow: hidden; transition: transform .16s, box-shadow .16s; }
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(34, 32, 28, .1); }
.card[hidden] { display: none; }
.card__a { text-decoration: none; color: inherit; display: block; height: 100%; }
.card__mw { aspect-ratio: 40 / 26; background: var(--papir-tm); overflow: hidden; }
.card__media { width: 100%; height: 100%; object-fit: cover; }
.card__media--svg { display: block; }
.card__media--svg svg { width: 100%; height: 100%; display: block; }
.card__b { padding: 14px 16px 18px; }
.card__typ, .card__rub {
  display: inline-block; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
  font-weight: 700; color: var(--c); margin-bottom: 7px;
}
.card__rub::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 6px; vertical-align: middle; }
.card__h { font-size: 1.04rem; margin: 0 0 7px; }
.card__p { margin: 0; font-size: .89rem; color: var(--text-sl); }

/* ------------------------------------------------ hlavička rubriky */
.ph { padding: 10px 0 24px; max-width: 72ch; }
.ph__kick { margin: 0 0 8px; font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--c); font-weight: 700; }
.ph__h1 { margin-bottom: .3em; }
.ph__lead { color: var(--text-sl); font-size: 1.05rem; margin: 0; }
.ph__n { margin: 14px 0 0; font-size: .85rem; color: var(--c); font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.chip {
  border: 1px solid var(--linka); background: #fff; border-radius: 999px;
  padding: 6px 14px; font: inherit; font-size: .85rem; cursor: pointer; color: var(--text-sl);
}
.chip:hover { border-color: var(--c); color: var(--text); }
.chip.is-on { background: var(--zelena); border-color: var(--zelena); color: #fff; }

/* ----------------------------------------------------------- článek */
.art { padding-bottom: 20px; }
.art__hd { max-width: 74ch; padding: 6px 0 18px; }
.art__kick { margin: 0 0 8px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c); font-weight: 700; }
.art__h1 { margin-bottom: .28em; }
.art__meta { display: flex; flex-wrap: wrap; gap: 9px; font-size: .85rem; color: var(--text-sl); margin: 0; }

.hero { margin: 0 0 24px; }
.hero__img { width: 100%; aspect-ratio: 40 / 21; object-fit: cover; border-radius: var(--r); }
.hero__img--svg { aspect-ratio: 40 / 21; border-radius: var(--r); overflow: hidden; }
.hero__img--svg svg { width: 100%; height: 100%; display: block; }
.hero__cap { font-size: .8rem; color: var(--text-sl); margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.hero__cred { opacity: .8; }

.art__lead { max-width: 68ch; font-size: 1.12rem; color: #3A362F; }
.art__lead p:first-child { margin-top: 0; }

.kostka {
  max-width: 68ch; background: #fff; border: 1px solid var(--linka);
  border-left: 5px solid var(--c); border-radius: var(--r); padding: 18px 22px; margin: 26px 0;
}
.kostka__h { font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; color: var(--c); margin: 0 0 10px; }
.kostka ul { margin: 0; padding-left: 20px; }
.kostka li { margin-bottom: 7px; }
.kostka li:last-child { margin-bottom: 0; }

.toc { max-width: 68ch; border-top: 1px solid var(--linka); border-bottom: 1px solid var(--linka); padding: 14px 0; margin: 26px 0; }
.toc__h { margin: 0 0 8px; font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text-sl); font-weight: 700; }
.toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; font-size: .92rem; }
.toc li { margin-bottom: 5px; break-inside: avoid; }
@media (max-width: 640px) { .toc ol { columns: 1; } }

.art__body { max-width: 68ch; }
.art__body p, .art__body ul, .art__body ol { margin: 0 0 1.05em; }
.art__body ul, .art__body ol { padding-left: 22px; }
.art__body li { margin-bottom: .45em; }
.sec { margin: 34px 0; scroll-margin-top: 80px; }
.sec h2 { scroll-margin-top: 80px; }
.art__body h3 { margin-top: 1.5em; }
.todo { color: var(--text-sl); font-style: italic; }

.tbl { margin: 28px 0; overflow-x: auto; }
.tbl figcaption { font-size: .85rem; color: var(--text-sl); margin-bottom: 8px; }
.tbl table { border-collapse: collapse; width: 100%; font-size: .92rem; min-width: 420px; }
.tbl th, .tbl td { border: 1px solid var(--linka); padding: 8px 12px; text-align: left; vertical-align: top; }
.tbl thead th { background: var(--papir-tm); font-size: .84rem; }

.faq { max-width: 68ch; margin: 38px 0; }
.faq__i { border-bottom: 1px solid var(--linka); padding: 4px 0; }
.faq__i summary { cursor: pointer; font-weight: 600; padding: 11px 0; list-style-position: outside; }
.faq__i summary::marker { color: var(--c); }
.faq__a { padding: 0 0 12px; color: #3A362F; }
.faq__a p { margin: 0 0 .8em; }

.ab {
  display: flex; gap: 16px; align-items: flex-start; max-width: 68ch;
  background: var(--papir-tm); border-radius: var(--r); padding: 18px 20px; margin: 34px 0;
}
.ab__av {
  flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; background: var(--zelena);
  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .95rem;
}
.ab__n { margin: 0; font-weight: 700; }
.ab__r { margin: 0 0 8px; font-size: .82rem; color: var(--text-sl); }
.ab__b { margin: 0; font-size: .9rem; color: #3A362F; }

.dal { margin: 40px 0 10px; }
.dal h2 { margin-bottom: .6em; }

/* -------------------------------------------------------- srovnávač */
.srv__f { margin: 4px 0 16px; }
.srv__lb { display: block; font-size: .8rem; color: var(--text-sl); margin-bottom: 6px; }
.srv__in { width: min(360px, 100%); padding: 10px 15px; border: 1px solid var(--linka); border-radius: 999px; font: inherit; font-size: .95rem; background: #fff; }
.srv__w { overflow-x: auto; border: 1px solid var(--linka); border-radius: var(--r); background: #fff; }
.srv { border-collapse: collapse; width: 100%; font-size: .9rem; min-width: 780px; }
.srv th, .srv td { border-bottom: 1px solid var(--linka); padding: 11px 14px; text-align: left; vertical-align: top; }
.srv thead th { background: var(--papir-tm); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-sl); position: sticky; top: 0; }
.srv tbody th a { font-weight: 700; text-decoration: none; color: var(--text); border-left: 4px solid var(--c); padding-left: 10px; display: inline-block; }
.srv tbody tr:hover { background: var(--papir); }
.srv tr[hidden] { display: none; }
.srv__note { font-size: .82rem; color: var(--text-sl); margin: 14px 0 10px; max-width: 70ch; }

@media (max-width: 720px) {
  .srv { min-width: 0; display: block; }
  .srv thead { display: none; }
  .srv tbody, .srv tr, .srv th, .srv td { display: block; width: auto; }
  .srv tr { border-bottom: 2px solid var(--linka); padding: 10px 4px; }
  .srv tbody th { border: 0; padding-bottom: 4px; }
  .srv td { border: 0; padding: 3px 14px; display: flex; gap: 10px; justify-content: space-between; }
  .srv td::before { content: attr(data-l); color: var(--text-sl); font-size: .8rem; flex: 0 0 auto; }
  .srv__w { overflow: visible; }
}

/* ------------------------------------------------- štítky a rozcestníky */
.tg { list-style: none; display: flex; flex-wrap: wrap; gap: 9px; padding: 0; margin: 6px 0 40px; }
.tg a {
  display: inline-flex; align-items: center; gap: 8px; background: #fff;
  border: 1px solid var(--linka); border-radius: 999px; padding: 7px 15px;
  text-decoration: none; font-size: .9rem;
}
.tg a:hover { border-color: var(--c); }
.tg__c { font-size: .76rem; color: var(--text-sl); }
.tg--404 a { background: var(--papir-tm); }

.mw__s { border-top: 1px solid var(--linka); padding: 22px 0 6px; }
.mw__h { font-size: 1.15rem; border-left: 5px solid var(--c); padding-left: 12px; }
.mw__h a { text-decoration: none; }
.mw__l { columns: 2; column-gap: 36px; list-style: none; padding: 0; margin: 0 0 12px; font-size: .93rem; }
.mw__l li { margin-bottom: 6px; break-inside: avoid; }
@media (max-width: 700px) { .mw__l { columns: 1; } }

.proza { max-width: 68ch; padding-bottom: 30px; }
.proza h2 { margin-top: 1.6em; }

.hl { margin: 6px 0 16px; }
.hl__lb { display: block; font-size: .8rem; color: var(--text-sl); margin-bottom: 6px; }
.hl__in { width: min(480px, 100%); padding: 12px 18px; border: 1px solid var(--linka); border-radius: 999px; font: inherit; font-size: 1rem; background: #fff; }
.hl__st { color: var(--text-sl); font-size: .88rem; margin: 0 0 16px; min-height: 1.4em; }

/* ----------------------------------------------------------- patička */
.ft { background: var(--zelena-tm); color: rgba(255, 255, 255, .8); margin-top: clamp(44px, 7vw, 76px); padding: 40px 0 32px; }
.ft__in { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 26px; }
.ft__c--o { grid-column: span 2; }
@media (max-width: 720px) { .ft__c--o { grid-column: span 1; } }
.ft__h { color: #fff; font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; margin: 0 0 12px; }
.ft__l { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.ft__l li { margin-bottom: 7px; }
.ft a { color: rgba(255, 255, 255, .85); text-decoration-color: rgba(255, 255, 255, .3); }
.ft a:hover { color: #fff; }
.ft__p { font-size: .87rem; margin: 0 0 12px; }
.ft__p--dis { font-size: .8rem; opacity: .68; border-left: 3px solid rgba(255, 255, 255, .25); padding-left: 12px; }

/* ------------------------------------------------------------- obchod
   Sekce s provizními odkazy. Vzorem je katalog zlatnictvi.org: výpis karet
   s řadami, stránka řady jako dvojsloupec s lepivým cenovým boxem.
   Reklamní plochy tu nejsou — viz _sablony/reklama.php. */
.ob-hl { padding: 26px 0 40px; }
.znak {
  display: inline-block; vertical-align: .3em; margin-left: 12px;
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--text-sl); background: #fff;
  border: 1px solid var(--linka); border-radius: 6px; padding: 3px 8px;
}
.jen-cist {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* rozcestník a výpis podkategorií */
.ob-druhy { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin: 0 0 28px; }
.ob-d { display: block; background: #fff; border: 1px solid var(--linka); border-left: 5px solid var(--c); border-radius: var(--r); padding: 22px 24px; text-decoration: none; color: inherit; }
.ob-d__h { margin: 0 0 4px; font-size: 1.35rem; }
.ob-d__m { margin: 0; color: var(--text-sl); font-size: .92rem; }
.ob-pod { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.ob-p { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--linka); border-radius: var(--r); padding: 12px 16px; text-decoration: none; color: inherit; }
.ob-p__o { flex: 0 0 60px; height: 60px; display: flex; align-items: center; justify-content: center; }
.ob-p__o img { max-height: 60px; width: auto; mix-blend-mode: multiply; }
.ob-p__t { display: block; }
.ob-p__m { display: block; font-size: .82rem; color: var(--text-sl); }

/* výpis řad */
.ob-pocet { font-size: .88rem; color: var(--text-sl); margin: 0 0 16px; }
.ob-mr { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 18px; margin: 0 0 26px; }
.ob-k { background: #fff; border: 1px solid var(--linka); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.ob-k__o { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; background: var(--papir-tm); padding: 12px; }
.ob-k__o img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.ob-k__t { padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ob-k__n { margin: 0; font-size: .97rem; line-height: 1.3; }
.ob-k__n a { text-decoration: none; color: var(--text); }
.ob-k__m { margin: 0; font-size: .8rem; color: var(--text-sl); }
.ob-k__c { margin: auto 0 0; font-weight: 700; font-size: .98rem; }
.ob-k__b { display: block; text-align: center; font-size: .86rem; font-weight: 600; text-decoration: none; color: var(--zelena); background: var(--papir-tm); border-radius: 10px; padding: 9px 10px; }
.ob-str { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 24px; }
.ob-str a, .ob-str strong { display: inline-block; min-width: 34px; text-align: center; padding: 6px 8px; border: 1px solid var(--linka); border-radius: 8px; background: #fff; text-decoration: none; }
.ob-str strong { background: var(--zelena); color: #fff; border-color: var(--zelena); }

/* stránka řady */
/* Stránka řady je mřížka ze čtyř buněk, ne dvousloupec ze dvou divů.
   Důvod je mobil: se dvěma sloupci se na úzké obrazovce složí celý levý
   sloupec (parametry, tabulka variant, popis) NAD cenový box, a tlačítko
   Koupit skončí až v polovině stránky — naměřeno 4 279 px z 8 799, tedy asi
   pět obrazovek scrollování. Se jmenovanými oblastmi se pořadí na mobilu
   přeskládá tak, že box jde hned pod obrázek, a desktop zůstane beze změny. */
.ob-dvoj {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-areas:
    "hlava bok"
    "foto  bok"
    "text  bok";
  gap: 0 34px;
  align-items: start;
}
.ob-hlava { grid-area: hlava; }
.ob-foto  { grid-area: foto; }
.ob-text  { grid-area: text; }
.ob-bok   { grid-area: bok; }
.ob-h1 { margin: 0 0 .3em; }
.ob-perex { color: var(--text-sl); margin: 0 0 20px; }
.ob-foto { background: #fff; border: 1px solid var(--linka); border-radius: var(--r); padding: 24px; display: flex; align-items: center; justify-content: center; min-height: 300px; }
.ob-foto img { max-height: 340px; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.ob-s { margin: 32px 0 0; }
.ob-s h2 { font-size: 1.28rem; }
.ob-tab { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--linka); border-radius: var(--r); overflow: hidden; }
.ob-tab td, .ob-tab th { padding: 11px 16px; border-bottom: 1px solid var(--linka); text-align: left; font-size: .93rem; }
.ob-tab tr:last-child td { border-bottom: 0; }
.ob-tab th { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-sl); font-weight: 600; width: 200px; }
.ob-tab thead th { background: var(--papir-tm); width: auto; }
.ob-tab .c { font-weight: 700; white-space: nowrap; }
.ob-tab .k { text-align: right; width: 1%; }
.ob-tab .k a { font-size: .86rem; font-weight: 600; white-space: nowrap; }
.ob-popis { background: #fff; border-left: 3px solid var(--c); border-radius: 0 var(--r) var(--r) 0; padding: 16px 20px; color: var(--text-sl); }
.ob-pozn { font-size: .85rem; color: var(--text-sl); margin: 10px 0 0; }
.ob-inz { background: var(--papir-tm); border-left: 3px solid var(--c); border-radius: 0 var(--r) var(--r) 0; padding: 14px 18px; font-size: .87rem; color: var(--text-sl); margin: 26px 0 0; }

/* cenový box */
.ob-box { background: #fff; border: 2px solid var(--c); border-radius: var(--r); padding: 20px 22px; position: sticky; top: 78px; }
.ob-box__c { font-size: 1.5rem; font-weight: 800; margin: 0; line-height: 1.2; }
.ob-box__p { font-size: .8rem; color: var(--text-sl); margin: 2px 0 14px; }
.ob-cta { display: block; text-align: center; background: var(--c); color: #fff; font-weight: 700; text-decoration: none; border-radius: 11px; padding: 14px 18px; margin: 0 0 16px; }
.ob-vyh { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 11px; }
.ob-vyh li { display: grid; grid-template-columns: 20px 1fr; gap: 9px; font-size: .86rem; color: var(--text-sl); }
.ob-vyh b { display: block; font-size: .92rem; color: var(--text); }
.ob-vyh i { color: var(--c); font-weight: 700; }
.ob-box__pozn { font-size: .76rem; color: var(--text-sl); margin: 0; }
.ob-rada-box { background: var(--papir-tm); border: 1px solid var(--linka); border-radius: var(--r); padding: 18px 20px; margin: 18px 0 0; }
.ob-rada-box h2 { font-size: 1rem; margin: 0 0 .4em; }
.ob-rada-box p { font-size: .9rem; color: var(--text-sl); margin: 0; }
.ob-hl > .ob-rada-box:first-of-type { margin: 0 0 22px; }

@media (max-width: 860px) {
  .ob-dvoj {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hlava"
      "foto"
      "bok"
      "text";
    gap: 0;
  }
  /* Cenový box je na mobilu hned pod obrázkem, takže potřebuje odsazení
     shora i zdola — na desktopu ho drží sloupec vedle a žádné nemá. */
  .ob-bok { margin: 18px 0 0; }
  .ob-box { position: static; }
  .ob-tab th { width: auto; }
}
.ob-vic { margin: 10px 0 0; }
.ob-vic > summary { cursor: pointer; font-weight: 600; font-size: .92rem; padding: 10px 14px; background: var(--papir-tm); border: 1px solid var(--linka); border-radius: 10px; }
.ob-vic[open] > summary { margin-bottom: 10px; }