/* =========================================================================
   keramicky – vlastní vzhled nad šablonou Blossom Speaker
   Načítá se s prioritou 99, tzn. až za styly šablony -> minimum !important.
   ========================================================================= */

:root {
  /* Paleta „Návrh E – šalvěj, meruňka, mlha" podle brand manuálu.
     Hodnoty jsou doslovné, nic se nezaokrouhluje. */
  --km-espresso: #3A2A22;   /* text a tmavé plochy */
  --km-bg:       #F5F0E6;   /* pozadí stránky */
  --km-cream:    #FFF8EC;   /* karty, panely */
  --km-beige:    #ECE2D1;   /* sekundární plochy, oddělovače */
  --km-sage:     #B9C9AE;   /* šalvěj */
  --km-apricot:  #F4C7A6;   /* světlá meruňka */
  --km-mist:     #B7C9D6;   /* mlha */
  --km-clay:     #D8C8B3;   /* hlína */
  --km-accent:   #E39A6F;   /* akcent – plochy tlačítek, tečka v logu */

  /* Odvozené odstíny.
     Akcent #E39A6F má proti pozadí jen 2,0:1, takže se používá výhradně jako
     plocha (s espresso textem, 5,9:1) nebo jako dekorace – nikdy jako text.
     Pro akcentní text existuje ztmavená varianta --km-accent-ink. */
  --km-accent-hover: #D98355;   /* tmavší akcent pro hover ploch; espresso na něm 4,8:1 */
  --km-accent-ink:   #974C2B;   /* akcentní text a odkazy; na pozadí 5,5:1, na béžové 4,8:1 */
  --km-ink:          #4A382E;   /* běžný text, 9,8:1 na pozadí */
  --km-muted:        #746254;   /* popisky, 5,1:1 na pozadí a 4,5:1 na béžové */
  --km-line:         var(--km-clay);   /* linky a rámečky */

  /* Typografie – rodiny zavádí assets/fonts.css, tady jen tokeny. */
  --km-font-sans: 'Bricolage Grotesque', system-ui, -apple-system, "Segoe UI", sans-serif;
  --km-font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --km-radius: 14px;
}

/* ── Aliasy starých názvů ────────────────────────────────────────────────
   Drží při životě případná pravidla mimo tento soubor (šablona, inline styly).
   V tomto stylopisu se už nepoužívají. */
:root {
  --km-dark:       var(--km-espresso);
  --km-sand:       var(--km-beige);
  --km-sand-hover: var(--km-clay);
  --km-soft:       var(--km-cream);
}

/* ── Základ ─────────────────────────────────────────────────────────────
   Šablona nechává prosvítat tmavé pozadí (odtud „černé pruhy" mezi produkty). */
html,
body,
body .site,
body #page {
  background-color: var(--km-bg);
}

body {
  color: var(--km-ink);
  font-family: var(--km-font-sans);
  font-weight: 400;
  font-variation-settings: 'opsz' 14;
}

/* ── Typografie ──────────────────────────────────────────────────────────
   Bricolage Grotesque na všechno, DM Mono jen na čísla a drobné popisky.
   Šablona si rodiny nastavuje vlastními selektory, proto !important. */
h1, h2, h3, h4, h5, h6,
.entry-title, .page-title, .site-title,
.km-hero__title, .km-section__head, .km-related__head,
.km-detail__head, .km-filters__head, .km-card-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.main-navigation ul li a, .site-header .menu > li > a,
button, input, select, textarea,
.km-btn, .woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit {
  font-family: var(--km-font-sans) !important;
}

/* Značka píše malými písmeny. */
h1, h2, h3, h4, h5, h6,
.entry-title, .page-title,
.km-hero__title, .km-section__head, .km-related__head,
.km-detail__head, .km-filters__head, .km-card-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  text-transform: lowercase;
}

/* Optická osa: čím větší nadpis, tím vyšší opsz a tučnost. */
h1, .entry-title, .page-title, .km-hero__title {
  font-variation-settings: 'opsz' 72;
  font-weight: 800;
}
h2, .km-section__head, .km-related__head {
  font-variation-settings: 'opsz' 48;
  font-weight: 700;
}
h3, h4 {
  font-variation-settings: 'opsz' 28;
  font-weight: 700;
}
h5, h6, .km-card-title, .km-detail__head, .km-filters__head {
  font-variation-settings: 'opsz' 20;
  font-weight: 700;
}

/* DM Mono – podle manuálu „objemy, ceny, drobné popisky". Nikam jinam. */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.km-cart-pill .km-cart-total,
.km-cart-count,
.km-soldout-badge,
.km-card-date,
.km-specs dd,
.km-filter h3,
.km-price-row label,
.km-price-row input,
.km-swatch,
.km-check,
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select,
.product_meta, .product_meta .sku,
.posted-on, .entry-date {
  font-family: var(--km-font-mono) !important;
  font-weight: 400;              /* DM Mono umí jen 400 a 500, 700 by se falšovalo */
  font-variation-settings: normal;
  font-feature-settings: 'tnum' 1;
}

/* ── Hlavička ────────────────────────────────────────────────────────── */
.site-header {
  background: var(--km-bg);
  border-bottom: 1px solid var(--km-line);
}

/* Když je nahrané logo, textový název schováme (zůstává pro čtečky a SEO).
   Bez loga se text zobrazí normálně, jen jemnějším řezem. */
.site-branding:has(.custom-logo, .km-logo) .site-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Logo místo tučného nápisu; když logo chybí, aspoň jemný font */
.site-header .site-title,
.site-header .site-title a {
  font-weight: 300;
  letter-spacing: .04em;
  text-transform: lowercase;
  color: var(--km-espresso);
}
.site-header .custom-logo {
  max-height: 64px;
  width: auto;
}
.site-header .site-branding img {
  image-rendering: auto;
}

/* Navigace – vzdušná, jemná */
.main-navigation ul li a,
.site-header .menu > li > a {
  font-weight: 500;
  font-size: .92rem;
  letter-spacing: .06em;
  text-transform: lowercase;
  color: var(--km-ink);
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
  color: var(--km-espresso);
}

/* ── Košík: růžová pilulka s ikonou a částkou ────────────────────────── */
.header-cart .km-cart-pill {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .6em 1.15em;
  border-radius: 999px;
  background: var(--km-beige);
  color: var(--km-espresso);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1;
  text-decoration: none;
  transition: background-color .18s ease, transform .18s ease;
}
.header-cart .km-cart-pill:hover {
  background: var(--km-accent-hover);
  transform: translateY(-1px);
}
.km-cart-ico {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/></svg>") no-repeat center / contain;
}
.km-cart-pill .km-cart-total .amount { font-weight: 500; }
.km-cart-count {
  min-width: 1.5em;
  padding: .15em .4em;
  border-radius: 999px;
  background: var(--km-espresso);
  color: var(--km-cream);
  font-size: .72rem;
  text-align: center;
}
/* původní ikonka šablony pryč */
.header-cart .km-cart-pill .fa { display: none; }

/* ── Výpis produktů ──────────────────────────────────────────────────
   Blossom míchá masonry a grid, obrázky přetékaly přes okraj stránky.
   Přebíráme mřížku úplně. */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;             /* přebíjí isotope/masonry inline styly */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.2em 1.6em;
  margin: 0;
  padding: 0;
  list-style: none;
  float: none;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  position: relative !important;        /* ruší absolutní pozicování masonry
                                           A ZÁROVEŇ kotví odznak „vyprodáno" */
  left: auto !important;
  top: auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0;
  float: none !important;
  text-align: center;
  background: transparent;
}
/* pomocný prvek masonry – ve své mřížce ho nechceme */
.woocommerce ul.products li.grid-sizer:empty,
.woocommerce ul.products .gutter-sizer { display: none !important; }

/* Fotka: čtverec, ořez, jemný podklad (žádné černé pozadí) */
.woocommerce ul.products li.product a img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0 0 .9em;
  border-radius: var(--km-radius);
  background: var(--km-cream);
  transition: transform .45s ease;
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.03); }

.woocommerce ul.products li.product .woocommerce-loop-product__link {
  display: block;
  overflow: hidden;
  border-radius: var(--km-radius);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: .98rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--km-ink);
  padding: 0;
  margin: 0 0 .3em;
}
.woocommerce ul.products li.product .price {
  font-size: .95rem;
  font-weight: 500;
  color: var(--km-espresso);
}
.woocommerce ul.products li.product .price del { opacity: .45; font-weight: 400; }

/* ── Odznak „vyprodáno" ─────────────────────────────────────────────── */
.km-soldout-badge {
  position: absolute;
  top: .7em;
  left: .7em;
  z-index: 2;
  padding: .35em .8em;
  border-radius: 999px;
  background: var(--km-espresso);
  color: var(--km-cream);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;   /* výjimka pro krátký technický štítek v DM Mono */
}
/* vyprodané kousky zjemníme, ať je hned vidět, co je pryč */
li.product.km-is-soldout a img { filter: grayscale(.55) opacity(.72); }
li.product.km-is-soldout .price { color: var(--km-muted); text-decoration: line-through; }

/* ── Tlačítka ────────────────────────────────────────────────────────── */
.km-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  display: inline-block;
  padding: .8em 1.5em;
  border: 0;
  border-radius: 999px;
  background: var(--km-beige);
  color: var(--km-espresso);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .02em;
  text-decoration: none;
  text-shadow: none;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
.km-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--km-accent-hover);
  color: var(--km-espresso);
  transform: translateY(-1px);
}

/* ── Patička ─────────────────────────────────────────────────────────── */
.bottom-footer {
  background: var(--km-bg);
  border-top: 1px solid var(--km-line);
  padding: 2.4em 0;
}
.km-footer { text-align: center; }

.km-follow {
  margin: 0 0 .7em;
  font-size: .85rem;
  letter-spacing: .04em;
  color: var(--km-muted);
}
.km-social { margin: 0 0 1.4em; }
.km-social a {
  display: inline-block;
  width: 26px;
  height: 26px;
  background-color: var(--km-espresso);
  transition: background-color .15s ease, transform .15s ease;
}
.km-social a:hover { background-color: var(--km-accent-ink); transform: translateY(-2px); }

.km-copy {
  margin: 0;
  font-size: .82rem;
  color: var(--km-muted);
}
.km-powered { margin: .5em 0 0; }
.bottom-footer .km-powered a,
.bottom-footer .km-powered a:hover,
.bottom-footer .km-powered a:focus {
  font-size: .8rem;
  letter-spacing: .08em;
  color: var(--km-muted);
  text-decoration: none;
}
.bottom-footer .km-powered a:hover { color: var(--km-espresso); }

/* ── Kontaktní formulář ─────────────────────────────────────────────── */
.km-kontakt { max-width: 560px; }
.km-kontakt p { margin: 0 0 1.2em; }
.km-kontakt label {
  display: block;
  margin-bottom: .4em;
  font-size: .9rem;
  color: var(--km-muted);
}
.km-kontakt input,
.km-kontakt textarea {
  width: 100%;
  padding: .8em 1em;
  border: 1px solid var(--km-line);
  border-radius: 10px;
  font: inherit;
  background: var(--km-cream);
}
.km-kontakt input:focus,
.km-kontakt textarea:focus { outline: none; border-color: var(--km-espresso); }
.km-hp { position: absolute !important; left: -9999px; }
.km-form-ok,
.km-form-err { padding: 1em 1.2em; border-radius: 10px; }
.km-form-ok  { background: var(--km-cream); border: 1px solid var(--km-sage); color: var(--km-ink); }
.km-form-err { background: var(--km-cream); border: 1px solid var(--km-accent-ink); color: var(--km-accent-ink); }

/* ── Responzivita ────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6em 1em; }
  .header-cart .km-cart-pill { padding: .5em .85em; font-size: .85rem; }
}

/* ══════════════════ OBCHOD: rozvržení s filtry vlevo ══════════════════ */
.km-shop-layout {
  display: flex;
  align-items: flex-start;
  gap: 2.5em;
  width: min(1170px, calc(100% - 3em));
  margin: 0 auto;
  padding: 2em 0 3.5em;
}
.km-shop-layout #primary.content-area {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin: 0;
}
.km-shop-layout .km-filters {
  flex: 0 0 230px;
  order: -1;                 /* filtry vlevo */
  width: 230px;
  margin: 0;
  padding: 1.4em 1.3em;
  border-radius: var(--km-radius);
  background: var(--km-cream);
}

/* Řádek nad výpisem (počet výsledků + třídění) taky do obalu */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { font-size: .88rem; color: var(--km-muted); }
.woocommerce .woocommerce-ordering select {
  padding: .5em .8em;
  border: 1px solid var(--km-line);
  border-radius: 8px;
  font-size: .88rem;
}

/* ── Panel filtrů ── */
.km-filters__head {
  margin: 0 0 1.1em;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--km-espresso);
}
.km-filter { margin-bottom: 1.6em; }
.km-filter h3 {
  margin: 0 0 .7em;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;   /* výjimka pro krátké popisky v DM Mono */
  color: var(--km-muted);
}
.km-filters ul { list-style: none; margin: 0; padding: 0; }

/* barevné puntíky */
.km-swatches { display: flex; flex-wrap: wrap; gap: .5em; }
.km-swatch {
  display: flex;
  align-items: center;
  gap: .45em;
  padding: .3em .7em .3em .35em;
  border: 1px solid var(--km-line);
  border-radius: 999px;
  background: var(--km-cream);
  font-size: .82rem;
  color: var(--km-ink);
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.km-swatch__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sw, var(--km-clay));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.km-swatch:hover { border-color: var(--km-espresso); }
.km-swatch.is-active {
  border-color: var(--km-espresso);
  background: var(--km-beige);
  color: var(--km-espresso);
  font-weight: 500;
}

/* zaškrtávátka */
.km-checks li { margin-bottom: .45em; }
.km-check {
  display: flex;
  align-items: center;
  gap: .55em;
  font-size: .88rem;
  color: var(--km-ink);
  text-decoration: none;
}
.km-check__box {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 1px solid var(--km-line);
  border-radius: 4px;
  background: var(--km-cream);
}
.km-check.is-active .km-check__box {
  border-color: var(--km-espresso);
  background: var(--km-espresso) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / 12px;
}
.km-check.is-active { color: var(--km-espresso); font-weight: 500; }

/* cena */
.km-price-row { display: flex; gap: .5em; margin-bottom: .8em; }
.km-price-row label { flex: 1; font-size: .75rem; color: var(--km-muted); }
.km-price-row span { display: block; margin-bottom: .25em; }
.km-price-row input {
  width: 100%;
  padding: .45em .55em;
  border: 1px solid var(--km-line);
  border-radius: 8px;
  font: inherit;
  font-size: .85rem;
}
.km-btn--small { padding: .55em 1.1em; font-size: .8rem; }
.km-filter-reset { margin: 0; }
.km-filter-reset a { font-size: .82rem; color: var(--km-muted); }
.km-filter-reset a:hover { color: var(--km-espresso); }

/* ══════════════════ DETAIL PRODUKTU ══════════════════ */
.km-detail {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 2.5em;
  width: min(880px, 100%);      /* užší než předloha – přání klientky */
  margin: 3em auto 0;
  padding-top: 2.2em;
  border-top: 1px solid var(--km-line);
}
.km-detail__head {
  margin: 0 0 .9em;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--km-espresso);
}
.km-detail__text {
  font-size: .92rem;
  line-height: 1.7;
  color: var(--km-ink);
}
.km-detail__text p { margin: 0 0 .8em; }

.km-specs { margin: 0; font-size: .88rem; }
.km-specs__row {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  padding: .5em 0;
  border-bottom: 1px solid var(--km-line);
}
.km-specs dt { color: var(--km-muted); }
.km-specs dd { margin: 0; text-align: right; font-weight: 500; }
/* Šalvěj (#B9C9AE) má na krémovém panelu jen 1,5:1, jako text neprojde –
   skladem proto espresso, vyprodáno tlumenou barvou. */
.km-specs .km-in  { color: var(--km-espresso); font-weight: 500; }
.km-specs .km-out { color: var(--km-muted); font-weight: 500; }

/* ══════════════════ Související produkty ══════════════════ */
.km-related {
  width: min(1170px, calc(100% - 3em));
  margin: 3.5em auto 0;
  padding-top: 2.5em;
  border-top: 1px solid var(--km-line);
}
.km-related__head {
  margin: 0 0 1.8em;
  font-size: 1.35rem;
  font-weight: 700;
  text-align: center;
  color: var(--km-espresso);
}

/* ══════════════════ BLOG: karty ══════════════════ */
.blog #secondary,
.archive:not(.woocommerce) #secondary,
.search #secondary { display: none; }

.blog #primary,
.archive:not(.woocommerce) #primary {
  width: min(1170px, calc(100% - 3em));
  margin: 2.5em auto 3.5em;
  float: none;
}

.blog #main.site-main,
.archive:not(.woocommerce) #main.site-main {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2em 1.6em;
  margin: 0;
}
.blog #main > :not(article),
.archive:not(.woocommerce) #main > :not(article) { grid-column: 1 / -1; }

.blog #main article,
.archive:not(.woocommerce) #main article {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--km-radius);
  background: var(--km-cream);
  box-shadow: 0 1px 3px rgba(58, 42, 34, .07);
  overflow: hidden;
  /* jemné „povyskočení" při najetí – přání klientky */
  transition: transform .28s ease, box-shadow .28s ease;
}
.blog #main article:hover,
.archive:not(.woocommerce) #main article:hover {
  transform: translateY(-8px);
  box-shadow: 0 14px 30px rgba(58, 42, 34, .13);
}

.km-card-media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--km-cream);
}
.km-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
article:hover .km-card-media img { transform: scale(1.05); }

.blog #main .article-content-wrap,
.archive:not(.woocommerce) #main .article-content-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.2em 1.3em 1.4em;
}
.km-card-date {
  margin: 0 0 .4em;
  font-size: .76rem;
  color: var(--km-muted);
}
.km-card-title {
  margin: 0 0 .6em;
  font-size: 1.02rem;
  line-height: 1.35;
  font-weight: 700;
}
.km-card-title a { color: var(--km-espresso); text-decoration: none; }
.km-card-title a:hover { opacity: .75; }
.km-card-excerpt {
  margin: 0 0 1.2em;
  font-size: .87rem;
  line-height: 1.6;
  color: var(--km-ink);
}
.km-card-more { margin: auto 0 0; }

/* ══════════════════ ÚVODNÍ STRÁNKA ══════════════════ */
.km-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 3em;
  width: min(1170px, calc(100% - 3em));
  margin: 2.5em auto 0;
  padding: 2.5em 0;
}
.km-hero__title {
  margin: 0 0 .6em;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.15;
  font-weight: 700;
  color: var(--km-espresso);
}
.km-hero__lead {
  margin: 0 0 1.6em;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--km-ink);
}
.km-hero__media img {
  display: block;
  width: 100%;
  border-radius: var(--km-radius);
}
.km-section {
  width: min(1170px, calc(100% - 3em));
  margin: 3.5em auto;
}
.km-section__head {
  margin: 0 0 .4em;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  color: var(--km-espresso);
}
.km-section__sub {
  margin: 0 0 2em;
  text-align: center;
  color: var(--km-muted);
}
.km-section--center { text-align: center; }
.km-usp {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6em;
  width: min(1170px, calc(100% - 3em));
  margin: 3.5em auto;
}
.km-usp > div {
  padding: 1.6em 1.4em;
  border-radius: var(--km-radius);
  background: var(--km-cream);
  text-align: center;
}
.km-usp h3 {
  margin: 0 0 .4em;
  font-size: 1rem;
  color: var(--km-espresso);
}
.km-usp p { margin: 0; font-size: .9rem; color: var(--km-ink); }

/* ══════════════════ Responzivita ══════════════════ */
@media (max-width: 1024px) {
  .blog #main.site-main,
  .archive:not(.woocommerce) #main.site-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .km-hero { grid-template-columns: 1fr; gap: 2em; }
  .km-usp { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .km-shop-layout { flex-direction: column; }
  .km-shop-layout .km-filters { flex: 1 1 auto; width: 100%; order: -1; }
  .km-detail { grid-template-columns: 1fr; gap: 1.8em; }
}
@media (max-width: 600px) {
  .blog #main.site-main,
  .archive:not(.woocommerce) #main.site-main { grid-template-columns: 1fr; }
}

/* ══════════════ Opravy po přechodu na page.php ══════════════ */

/* Instagram ikona – maska (soubor leží vedle tohoto CSS) */
.km-social a {
  -webkit-mask: url("instagram.svg") no-repeat center / contain;
  mask: url("instagram.svg") no-repeat center / contain;
}

/* Titulní stránka: hero má vlastní nadpis, panel ani titulek stránky tam nechceme */
.home #secondary { display: none; }
.home #primary,
.home .content-area {
  width: 100%;
  max-width: none;
  float: none;
  margin: 0;
}
.home .entry-header,
.home .page-header,
.home .entry-title { display: none; }
.home .site-main > article > .entry-content,
.home .entry-content { margin: 0; }

/* Patička musí být pod obsahem, ne vedle plovoucího sloupce */
.site-footer,
.bottom-footer,
.top-footer { clear: both; }

/* Nikde nesmí vzniknout vodorovné rolování */
body { overflow-x: hidden; }

/* ═══════════════ Doladění UI po průchodu webem ═══════════════ */

/* Tlačítka: plná meruňková s espresso textem (dřív pískové pozadí) */
.km-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--km-accent);
  color: var(--km-espresso);     /* krémová má na akcentu jen 2,2:1, espresso 5,9:1 */
  text-transform: none;     /* šablona dávala „Přidat Do Košíku" */
  letter-spacing: .01em;
}
.km-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--km-accent-hover);
  color: var(--km-espresso);
}

/* Košík: šablona kreslí kolem něj modrý kroužek 35×35 – pryč s ním */
.header-cart {
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  line-height: normal !important;
  background: none !important;
}
.header-cart:hover { background: none !important; }
.header-cart .km-cart-pill { background: var(--km-beige); color: var(--km-espresso); }
.header-cart .km-cart-pill:hover { background: var(--km-clay); color: var(--km-espresso); }

/* Vyprodané kousky: tlačítko má být klidné, ne výzva k akci */
li.product.km-is-soldout a.button {
  background: var(--km-cream);
  color: var(--km-muted);
  pointer-events: auto;
}
li.product.km-is-soldout a.button:hover {
  background: var(--km-beige);
  color: var(--km-espresso);
}

/* Blossom dává obsahu karty float a pevnou šířku 140 px – rozbíjelo to mřížku */
.blog #main .article-content-wrap,
.archive:not(.woocommerce) #main .article-content-wrap,
.search #main .article-content-wrap {
  float: none !important;
  width: auto !important;
}

/* Postranní panel s hledáním nechceme na běžných stránkách ani u článku;
   výjimka je panel filtrů v obchodě. */
.page #secondary:not(.km-filters),
.single-post #secondary:not(.km-filters) { display: none; }
.page #primary,
.single-post #primary {
  width: min(1170px, calc(100% - 3em));
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  float: none;
}

/* Fotka na detailu produktu byla neúměrně vysoká */
.single-product .woocommerce-product-gallery {
  max-width: 480px;
}
.single-product .woocommerce-product-gallery img {
  border-radius: var(--km-radius);
}

/* Odznak „vyprodáno" v nové paletě */
.km-soldout-badge {
  background: var(--km-espresso);
  color: var(--km-cream);
}

/* ── Blokové komponenty WooCommerce (košík, pokladna) ──
   Měly tmavě šedé pozadí s růžovým textem – mimo paletu. */
.wc-block-components-button,
.wc-block-components-button.contained,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wp-element-button {
  background-color: var(--km-accent) !important;
  color: var(--km-espresso) !important;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}
.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background-color: var(--km-accent-hover) !important;
  color: var(--km-espresso) !important;
}
.wc-block-components-button__text { text-decoration: none; }

/* odkazy uvnitř bloků do palety */
.wc-block-components-totals-coupon__button,
.wc-block-components-product-name,
.woocommerce-cart a,
.woocommerce-checkout a { color: var(--km-espresso); }
.woocommerce-cart a:hover,
.woocommerce-checkout a:hover { color: var(--km-accent-ink); }

/* Upozornění („produkt byl přidán do košíku") do palety */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--km-accent);
  background: var(--km-cream);
  color: var(--km-ink);
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--km-accent-ink); }

/* ══════════ Přepis barevných proměnných šablony ══════════
   Blossom má vlastní růžovou (#fc769c) a modrou (#76c3fc) a používá je
   napříč celým webem – mobilní menu, drobečky, odkazy, ikony. Místo
   honění jednotlivých selektorů přepíšeme rovnou proměnné.
   Náš stylesheet se načítá poslední, takže tyhle hodnoty vyhrávají. */
:root {
  --primary-color:       #974C2B;   /* = --km-accent-ink, čitelná varianta akcentu */
  --primary-color-rgb:   151, 76, 43;
  --secondary-color:     #3A2A22;   /* = --km-espresso */
  --secondary-color-rgb: 58, 42, 34;
  --font-color:          #4A382E;   /* = --km-ink */
  --font-color-rgb:      74, 56, 46;
  --background-color:    #F5F0E6;   /* = --km-bg */
  --background-color-rgb: 245, 240, 230;
}

/* Odkazy v drobečkové navigaci byly světle modré */
.breadcrumb-wrapper a,
.breadcrumb-wrapper .breadcrumb-trail a { color: var(--km-muted); }
.breadcrumb-wrapper a:hover { color: var(--km-accent-ink); }
.breadcrumb-wrapper .trail-end,
.breadcrumb-wrapper span:last-child { color: var(--km-espresso); }

/* ── Mobil: kompaktnější panel filtrů, ať nezabírá celou obrazovku ── */
@media (max-width: 900px) {
  .km-shop-layout .km-filters { padding: 1.1em 1.2em; }
  .km-filters__head { margin-bottom: .8em; }
  .km-filter { margin-bottom: 1.1em; }
  .km-filter h3 { margin-bottom: .5em; font-size: .74rem; }
  .km-swatches { gap: .4em; }
  .km-swatch { padding: .25em .6em .25em .3em; font-size: .78rem; }
  .km-swatch__dot { width: 14px; height: 14px; }
  /* štítky vedle sebe místo pod sebou */
  .km-checks { display: flex; gap: 1.2em; }
  .km-checks li { margin-bottom: 0; }
  .km-filter--price form { display: flex; align-items: flex-end; gap: .6em; }
  .km-filter--price .km-price-row { margin-bottom: 0; flex: 1; }
}

/* Nadpis stránky na mobilu byl neúměrně velký */
@media (max-width: 600px) {
  .page-title,
  .entry-title,
  h1.entry-title { font-size: 1.9rem; }
}

/* Kolem nadpisu stránky bylo zbytečně moc prázdna */
.page-header { margin-bottom: 1.6em !important; }
.breadcrumb-wrapper { margin-bottom: .4em; }
.km-shop-layout { padding-top: .5em; }
.woocommerce .page-header .page-title { margin-bottom: 0; }

/* ══════════════ Vzor teček z loga ══════════════
   Utilita pro integrátora – pověsí se třeba na patičku. Jen gradienty,
   žádný obrázek. Kolečka jsou drobná a řídká, ať zůstane nenápadná. */
.km-tecky {
  background-color: var(--km-espresso);
  background-image:
    radial-gradient(circle at 12% 24%, var(--km-sage)    0 4px, transparent 4px),
    radial-gradient(circle at 37% 68%, var(--km-apricot) 0 3px, transparent 3px),
    radial-gradient(circle at 58% 18%, var(--km-mist)    0 5px, transparent 5px),
    radial-gradient(circle at 76% 54%, var(--km-clay)    0 3px, transparent 3px),
    radial-gradient(circle at 91% 82%, var(--km-cream)   0 4px, transparent 4px);
  background-size: 280px 220px;
  background-repeat: repeat;
}
.km-tecky,
.km-tecky a,
.km-tecky .km-copy,
.km-tecky .km-follow { color: var(--km-beige); }
.km-tecky .km-social a { background-color: var(--km-beige); }

/* ══════════════ Značka: SVG logo, tagline, tmavá patička ══════════════
   Logo je vložené jako obrysy (viz keramicky_svg() v pluginu). Text loga
   má fill="currentColor", takže barvu řídí color; tečka zůstává meruňková. */
.site-header .km-logo {
  display: block;
  color: var(--km-espresso);
  line-height: 0;
}
.site-header .km-logo svg {
  display: block;
  height: 42px;
  width: auto;
}
.site-header .site-description {
  margin: .35em 0 0;
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--km-muted);
}
@media (max-width: 600px) {
  .site-header .km-logo svg { height: 32px; }
  .site-header .site-description { display: none; }
}

/* Patička na espresso s tečkami – světlé logo, tagline, čitelné odkazy */
.bottom-footer.km-tecky { border-top: 0; padding: 3.2em 0 2.4em; }
.km-footer-logo {
  display: inline-block;
  color: var(--km-cream);
  line-height: 0;
  margin-bottom: .6em;
}
.km-footer-logo svg { height: 38px; width: auto; }
.km-tagline {
  margin: 0 0 1.8em;
  font-size: .95rem;
  color: var(--km-beige);
}
.bottom-footer.km-tecky .km-powered a,
.bottom-footer.km-tecky .km-powered a:focus { color: var(--km-clay); }
.bottom-footer.km-tecky .km-powered a:hover { color: var(--km-cream); }
.km-tecky .km-social a:hover { background-color: var(--km-cream); }

/* Tlačítko-odkaz nesmí zdědit podtržení odkazů z obsahu stránky */
.km-btn,
.km-btn:hover,
.km-btn:focus { text-decoration: none !important; }

/* Názvy produktů jsou h2, ale malé – optická velikost podle skutečné velikosti
   písma, jinak je opsz 48 z nadpisů zbytečně stáhne */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.km-related .woocommerce-loop-product__title {
  font-variation-settings: 'opsz' 16 !important;
}

/* Blossom kreslí nadpisy přes --black-color (#000) a u .page-title a
   .entry-title má černou ještě natvrdo. Čistá černá do palety nepatří. */
:root {
  --black-color: #3A2A22;
  --black-color-rgb: 58, 42, 34;
}
.page-header .page-title,
.entry-header .entry-title,
h1.entry-title,
.entry-content h2,
.wp-block-heading { color: var(--km-espresso); }

/* Karty výhod: na mobilu jen jeden okraj (stránka už má vlastní 24 px) */
@media (max-width: 600px) {
  .km-usp { width: 100%; margin-left: 0 !important; margin-right: 0 !important; }
}

/* ══════════════ Zbytky barev šablony mimo paletu ══════════════
   Nalezeno průchodem všech stránek (barvy, které nejsou v paletě). */

/* Detail produktu – souhrn vedle galerie */
.single-product div.product .product_title { color: var(--km-espresso); }
.single-product div.product .summary .price,
.single-product div.product .summary .price bdi,
.single-product div.product .summary .price .woocommerce-Price-currencySymbol {
  color: var(--km-espresso) !important;
}
.single-product div.product .stock { color: var(--km-ink) !important; }
.single-product div.product .stock.in-stock::before {
  content: "";
  display: inline-block;
  width: .6em;
  height: .6em;
  margin-right: .45em;
  border-radius: 50%;
  background: var(--km-sage);
  vertical-align: .05em;
}
.single-product .product_meta,
.single-product .product_meta > span,
.single-product .product_meta .sku { color: var(--km-muted) !important; }
.single-product .product_meta a { color: var(--km-ink) !important; }
.single-product .product_meta a:hover { color: var(--km-accent-ink) !important; }

/* Článek – datum, odkazy na další články, nadpis komentářů */
.single-post .entry-meta,
.single-post .entry-meta a,
.single-post time.entry-date { color: var(--km-muted) !important; }
.post-navigation a,
.post-navigation .post-title,
.comment-reply-title { color: var(--km-espresso) !important; }
.post-navigation a:hover .post-title { color: var(--km-accent-ink) !important; }

/* Bloková tlačítka WooCommerce (košík, doporučené produkty) – výchozí
   šedá z WordPressu → akcent jako všude jinde */
.wp-block-button__link.add_to_cart_button,
.wc-block-components-product-button .wp-block-button__link {
  background-color: var(--km-accent) !important;
  color: var(--km-espresso) !important;
  border-radius: 999px;
}
.wp-block-button__link.add_to_cart_button:hover,
.wc-block-components-product-button .wp-block-button__link:hover {
  background-color: var(--km-accent-hover) !important;
}

/* Pod článkem: předchozí/další článek a související články */
.navigation.pagination .nav-links a,
.navigation.pagination .post-title,
.entry-header .entry-title a,
.skip-link { color: var(--km-espresso) !important; }
.navigation.pagination .nav-links a:hover,
.navigation.pagination .nav-links a:hover .post-title,
.entry-header .entry-title a:hover { color: var(--km-accent-ink) !important; }

/* Hlavní tlačítko na detailu – WooCommerce ho přes .alt barví na
   --secondary-color (espresso); chceme stejný akcent jako všude jinde */
.woocommerce div.product .cart .single_add_to_cart_button,
.woocommerce div.product .cart .single_add_to_cart_button.alt {
  background-color: var(--km-accent) !important;
  color: var(--km-espresso) !important;
  border-color: var(--km-accent) !important;
}
.woocommerce div.product .cart .single_add_to_cart_button:hover,
.woocommerce div.product .cart .single_add_to_cart_button.alt:hover {
  background-color: var(--km-accent-hover) !important;
  border-color: var(--km-accent-hover) !important;
}

/* ══════════════ Hlavička: jen logo ══════════════
   Klientka chce nahoře jen kera·micky. Tagline zůstává v patičce
   a v titulku stránky (blogdescription), jen ho tu nevypisujeme. */
.site-header .site-description { display: none !important; }

/* ══════════════ Barevná škála značky ve webu ══════════════
   Prvky převzaté z brand manuálu: tři tečky (šalvěj · meruňka · mlha),
   barevné štítky, béžový panel. Na barevných plochách je text vždy
   espresso/ink – šalvěj, meruňka i mlha s ním mají kontrast 6:1 a víc.
   --km-muted (#746254) na nich NEPOUŽÍVAT, vychází pod 3:1. */
:root {
  --km-tri-tecky:
    radial-gradient(circle at 6px 50%,  var(--km-sage)    5.5px, transparent 6px),
    radial-gradient(circle at 25px 50%, var(--km-apricot) 5.5px, transparent 6px),
    radial-gradient(circle at 44px 50%, var(--km-mist)    5.5px, transparent 6px);
}

/* Tři tečky jako podpis nad nadpisy */
.km-hero__title::before,
.km-section__head::before,
.page-header .page-title::before,
.page .entry-header h1.entry-title::before {
  content: "";
  display: block;
  width: 50px;
  height: 12px;
  margin-bottom: .7em;
  background: var(--km-tri-tecky);
}
.km-section__head::before,
.page-header .page-title::before { margin-left: auto; margin-right: auto; }
.km-hero__title::before { margin-bottom: .9em; }

/* Fotka v hero s barevným blokem za ní */
.km-hero__media { position: relative; }
.km-hero__media::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border-radius: var(--km-radius);
  background: var(--km-sage);
}
.km-hero__media img { position: relative; z-index: 1; }
@media (max-width: 600px) {
  .km-hero__media::before { inset: 10px -10px -10px 10px; }
}

/* Karty výhod jako štítky z manuálu – každá v jiné barvě */
.km-usp > div:nth-child(3n+1) { background: var(--km-sage); }
.km-usp > div:nth-child(3n+2) { background: var(--km-apricot); }
.km-usp > div:nth-child(3n+3) { background: var(--km-mist); }
.km-usp > div p { color: var(--km-ink); }

/* Vybrané kousky na béžovém panelu (jako panel „tvary" v manuálu) */
.home .km-section {
  padding: 2.6em 2em 2.8em;
  border-radius: calc(var(--km-radius) * 2);
  background: var(--km-beige);
}
@media (max-width: 600px) {
  .home .km-section { padding: 2em 1em 2.2em; }
}

/* Navigace: meruňková tečka z loga pod položkou (najetí + aktuální stránka) */
.main-navigation ul li a,
.site-header .menu > li > a {
  padding-bottom: .55em;
  background-image: radial-gradient(circle, var(--km-accent) 2.6px, transparent 3px);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 0 0;
  transition: background-size .2s ease, color .15s ease;
}
.main-navigation ul li a:hover,
.main-navigation ul li a:focus-visible,
.main-navigation ul li.current-menu-item > a,
.site-header .menu > li > a:hover,
.site-header .menu > li.current-menu-item > a { background-size: 7px 7px; }

/* Košík jako meruňková pilulka */
.km-cart-pill { background: var(--km-apricot) !important; }
.km-cart-pill:hover { background: var(--km-accent) !important; }

/* Filtry: zaškrtnuté políčko v šalvěji */
.km-check.is-active .km-check__box {
  background: var(--km-sage) !important;
  border-color: var(--km-sage) !important;
}

/* Formuláře: zaměření v mlze místo modré prohlížeče */
.km-kontakt input:focus,
.km-kontakt textarea:focus,
.km-price-row input:focus {
  outline: 2px solid var(--km-mist);
  outline-offset: 1px;
  border-color: var(--km-mist);
}

/* Vybrané kousky: skladem bývá méně než 4 kusy – řadu vystředit,
   ať nevisí vlevo s prázdným sloupcem */
.home .km-section ul.products {
  grid-template-columns: repeat(auto-fit, minmax(170px, 230px)) !important;
  justify-content: center;
}
@media (max-width: 600px) {
  .home .km-section { width: calc(100% - 2em); padding-left: .9em; padding-right: .9em; }
  .home .km-section ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.6em .9em !important;
  }
}

/* ══════════════ Hlavička: logo přesně na středu ══════════════
   Blossom dělí hlavičku na tři pružné sloupce (sociální sítě · logo · košík)
   s různě širokým obsahem, takže logo ujíždělo o ~65 px doleva. Mřížka
   1fr auto 1fr drží logo uprostřed bez ohledu na šířku košíku. */
.site-header .header-t .wrapper {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
/* clearfix pseudo-elementy Blossomu by v mřížce zabraly buňky navíc */
.site-header .header-t .wrapper::before,
.site-header .header-t .wrapper::after { content: none !important; display: none !important; }
/* sloupce napevno – Blossom na mobilu přehazuje pořadí přes `order` */
.site-header .header-t .header-social { grid-column: 1; grid-row: 1; justify-self: start; }
.site-header .header-t .site-branding { grid-column: 2; grid-row: 1; justify-self: center; margin: 0; }
.site-header .header-t .top-right     { grid-column: 3; grid-row: 1; justify-self: end; }
/* na úzkém displeji se vedle loga na středu vejde jen ikona košíku */
@media (max-width: 600px) {
  .site-header .header-t .km-cart-total { display: none; }
}
/* schovaný textový název nesmí vedle loga zabírat místo */
.site-branding .site-title-wrap {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ══════════════ Menu: každá záložka má svou barvu tečky ══════════════ */
#primary-menu > li:nth-child(5n+1) > a { --km-tecka: var(--km-accent); }  /* úvod – meruňka */
#primary-menu > li:nth-child(5n+2) > a { --km-tecka: var(--km-sage); }    /* produkty – šalvěj */
#primary-menu > li:nth-child(5n+3) > a { --km-tecka: var(--km-mist); }    /* blog – mlha */
#primary-menu > li:nth-child(5n+4) > a { --km-tecka: var(--km-apricot); } /* kontakt – světlá meruňka */
#primary-menu > li:nth-child(5n+5) > a { --km-tecka: var(--km-clay); }    /* o nás – hlína */
#primary-menu > li > a {
  background-image: radial-gradient(circle, var(--km-tecka, var(--km-accent)) 3.2px, transparent 3.7px) !important;
}
#primary-menu > li > a:hover,
#primary-menu > li > a:focus-visible,
#primary-menu > li.current-menu-item > a { background-size: 8px 8px !important; }
/* Mobilní (vysouvací) menu: položka je přes celou šířku, tečka „na středu dole"
   by visela uprostřed prázdného místa → tečka vlevo před textem, jako odrážka. */
@media (max-width: 1024px) {
  #primary-menu > li > a {
    padding-left: 2em !important;
    /* svisle na střed prvního řádku: horní odsazení šablony 20 px + půlka řádku */
    background-position: .8em calc(20px + .88em - 4px) !important;
  }
}

/* ══════════════ Úvod: tvary hrnků místo „vybraných kousků" ══════════════
   Ilustrace jsou z brand manuálu ve stejném měřítku, na pozadí #ECE2D1 =
   stejná béžová jako panel, takže splývají. */
.km-tvary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2em;
  max-width: 540px;   /* klientka chtěla celou sekci v menším měřítku */
  margin: 0 auto;
}
.km-tvar {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none !important;
  color: var(--km-espresso);
}
.km-tvar img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .3s ease;
}
.km-tvar:hover img { transform: translateY(-6px); }
.km-tvar__nazev {
  margin-top: .1em;
  font-size: 1.05rem;
  font-weight: 600;
  font-variation-settings: 'opsz' 28;
}
.km-tvar__cena {
  margin-top: .2em;
  font-family: var(--km-font-mono);
  font-size: .78rem;
  color: var(--km-ink);
}
@media (max-width: 600px) {
  .km-tvary { gap: .6em; max-width: 360px; }
  .km-tvar__nazev { font-size: 1rem; }
  .km-tvar__cena { font-size: .75rem; }
}

/* ══════════════ O nás ══════════════
   Úvod jako měkký béžový panel (stejný jako panely na úvodní stránce),
   pod ním dva sloupce bez rámečků – nese je jen barevná linka nahoře. */
.km-onas { max-width: 880px; margin: 0 auto; }
.km-onas__intro {
  margin: 0 0 2.6em;
  padding: 2.4em 2.6em;
  border-radius: 28px;
  background: var(--km-beige);
  text-align: center;
}
.km-onas__intro p {
  max-width: 34em;
  margin: 0 auto;
  font-size: clamp(1.1rem, 2.2vw, 1.32rem);
  line-height: 1.6;
  font-variation-settings: 'opsz' 28;
  color: var(--km-espresso);
}
.km-onas__intro p + p { margin-top: .8em; }
.km-onas__boxy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4em;
}
.km-onas__box {
  padding-top: 1.1em;
  border-top: 3px solid var(--km-sage);
}
.km-onas__box:nth-child(2) { border-top-color: var(--km-apricot); }
.km-onas__box:nth-child(3) { border-top-color: var(--km-mist); }
.km-onas__box h2 {
  margin: 0 0 .55em;
  font-size: 1.2rem;
  font-variation-settings: 'opsz' 28;
}
.km-onas__box p { margin: 0; font-size: .97rem; line-height: 1.75; color: var(--km-ink); }
/* tagline nenápadně jako podpis na závěr – oddělený vzduchem a třemi
   tečkami z palety (.entry-content p by jinak margin vynuloval) */
.entry-content .km-onas__podpis,
.km-onas__podpis {
  margin: 3.4em 0 0;
  padding-top: 1.5em;
  background: radial-gradient(circle, var(--km-sage) 3px, transparent 3.5px) calc(50% - 16px) 0 / 8px 8px no-repeat,
              radial-gradient(circle, var(--km-apricot) 3px, transparent 3.5px) 50% 0 / 8px 8px no-repeat,
              radial-gradient(circle, var(--km-mist) 3px, transparent 3.5px) calc(50% + 16px) 0 / 8px 8px no-repeat;
  text-align: center;
  font-family: var(--km-font-mono);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--km-muted);
}
@media (max-width: 700px) {
  .km-onas__boxy { grid-template-columns: 1fr; gap: 1.8em; }
  .km-onas__intro { padding: 1.7em 1.3em; border-radius: 20px; }
}