/* =====================================================================
   bundle-content.css — OBSAHOVÁ CSS vrstva (zadání 012, in-context editor).
   Jediné CSS webu, které se vpouští do adminu (Shadow DOM náhledy bloků):
   tokeny + content/komponentní/blokové styly. BEZ page-chrome (html/body
   reset, nav, footer, hero, page layout) — to zůstává v main.css / bundle-*.
   Web linkuje tento soubor PRVNÍ (tokeny+base), pak main.css (chrome), pak
   page bundle → výsledný vzhled identický.
   Tokeny cílí :root I :host, aby custom properties platily i uvnitř Shadow
   DOM (`:root` uvnitř shadow rootu nematchuje — proto :host).
   ===================================================================== */

/* ---- design tokeny (z main.css) — :root pro web, :host pro shadow ---- */
:root, :host {
  /* --- materiálová paleta z loga --- */
  --brick: #782121;   --brick-700: #5f1919;
  --terra: #d6966b;   --terra-600: #c07e50;
  --sage: #787d75;    --mauve: #916f6f;
  --graphite: #4d4d4d; --ink: #1a1a1a;

  /* neutrály laděné teple do kamene (ne čisté šedé) */
  --stone-50: #faf8f5;  --stone-100: #f1ece5; --stone-200: #e4dcd0;
  --stone-300: #d0c5b5; --stone-500: #8c8175;

  /* sémantické role — světlé téma */
  --bg: var(--stone-50);  --panel: #fffdfb;  --panel-2: var(--stone-100);
  --text: var(--ink);     --muted: #6b6157;  --line: var(--stone-200);
  --accent: var(--brick); --accent-ink: #fff;
  --scene-1: #2b2724;     --scene-2: #3c342e;

  /* type scale (fluid) */
  --fs-mega: clamp(2.6rem, 7.5vw, 6rem);
  --fs-h1:   clamp(2rem, 4.5vw, 3.2rem);
  --fs-h2:   clamp(1.5rem, 3vw, 2.2rem);
  --fs-h3:   clamp(1.15rem, 1.6vw, 1.4rem);
  --fs-body: clamp(1rem, 1.1vw, 1.12rem);
  --fs-sm:   .82rem;

  --font-display: "Arial Black", "Helvetica Neue", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

  --wrap: 1240px;
  --gap: clamp(.75rem, 1.4vw, 1.25rem);
  --radius: 3px;
  --shadow-1: 0 1px 0 var(--line), 0 10px 30px -18px rgba(26,20,14,.5);
  --shadow-2: 0 24px 60px -30px rgba(26,20,14,.55);
  --ease: cubic-bezier(.2,.7,.2,1);
}

@media (prefers-color-scheme: dark) {
  :root, :host {
    --bg: #171310; --panel: #201b17; --panel-2: #241e19; --text: #f3ece3;
    --muted: #b3a695; --line: #322a23; --accent: var(--terra); --accent-ink: #1a1a1a;
    --scene-1: #0f0c0a; --scene-2: #221b16;
  }
}
:root[data-theme="dark"], :host([data-theme="dark"]) {
  --bg: #171310; --panel: #201b17; --panel-2: #241e19; --text: #f3ece3;
  --muted: #b3a695; --line: #322a23; --accent: var(--terra); --accent-ink: #1a1a1a;
  --scene-1: #0f0c0a; --scene-2: #221b16;
}
:root[data-theme="light"], :host([data-theme="light"]) {
  --bg: var(--stone-50); --panel: #fffdfb; --panel-2: var(--stone-100); --text: var(--ink);
  --muted: #6b6157; --line: var(--stone-200); --accent: var(--brick); --accent-ink: #fff;
  --scene-1: #2b2724; --scene-2: #3c342e;
}

/* Základní obsahová typografie pro Shadow DOM náhled (zadání 012): na webu
   `:host` nematchuje (font/barvu bere z body chrome v main.css), v shadow rootu
   host zdědí webový font → náhled bloku vypadá jako na webu. */
:host {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text);
  line-height: 1.6;
}

/* Inline editace v náhledu (zadání 012, část 04) — vizuální indikace
   editovatelného regionu v shadow náhledu. Na webu se třída nevyskytuje. */
.tr-cms-preview__editable:focus-visible { outline: 2px dashed var(--terra); outline-offset: 3px; }
.tr-cms-preview__editable:hover { outline: 1px dashed color-mix(in srgb, var(--terra) 60%, transparent); outline-offset: 3px; }

/* ---- content base typografie (BEZ html/body resetu — ten je chrome) ---- */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; line-height: 1.04; text-wrap: balance; }
p { margin: 0 0 1rem; }
:focus-visible { outline: 3px solid var(--terra); outline-offset: 3px; }

/* Mapa — crawler/klávesnicový fallback nav (SEO/GEO + přístupnost). Reálné
   <a href> odkazy na cíle zón/markerů; Leaflet mapa je myší enhancement,
   tato lišta je server-renderovaná cesta k cílům. Mimo tok (nemění vzhled
   mapy), při fokusu klávesnicí se zobrazí jako fixed lišta (idiom skip-linku
   — uniká overflow:hidden předků). Viz docs/quality-standards.md (GEO). */
.tr-cms__sh__map-fallback { position: absolute; left: -9999px; }
.tr-cms__sh__map-fallback:focus-within {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 1150; max-width: calc(100vw - 2rem);
  display: flex; flex-wrap: wrap; gap: .4rem; padding: .8rem;
  background: var(--panel-2); border-radius: var(--radius); box-shadow: var(--shadow-1);
}
.tr-cms__sh__map-fallback a {
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em; padding: .35rem .7rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px; color: var(--text);
}
.tr-cms__sh__map-fallback a:hover, .tr-cms__sh__map-fallback a:focus-visible { border-color: var(--terra); color: var(--accent); }

/* echo loga: prostrkané verzálky */
.tr-cms__sh__eyebrow { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: .28em; text-transform: uppercase; color: var(--muted); margin: 0; }
.tr-cms__sh__display { font-family: var(--font-display); font-weight: 900; letter-spacing: -.02em; }

/* dekorativní „cihlový" pruh (motiv loga) */
.tr-cms__sh__bricks { display: flex; gap: 4px; height: 10px; }
.tr-cms__sh__bricks i { flex: 1; border-radius: 1px; }
.tr-cms__sh__bricks i:nth-child(1){background:var(--mauve)} .tr-cms__sh__bricks i:nth-child(2){background:var(--brick)}
.tr-cms__sh__bricks i:nth-child(3){background:var(--terra)} .tr-cms__sh__bricks i:nth-child(4){background:var(--sage)}
.tr-cms__sh__bricks i:nth-child(5){background:var(--graphite)}

/* ---- buttons ---- */
.tr-cms__sh__btn { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.3rem; border-radius: var(--radius); font-weight: 800; letter-spacing: .01em; transition: transform .1s var(--ease), background-color .15s, border-color .15s, color .15s; }
.tr-cms__sh__btn--primary { background: var(--accent); color: var(--accent-ink); }
.tr-cms__sh__btn--primary:hover { transform: translateY(-2px); filter: brightness(1.05); }
.tr-cms__sh__btn--ghost { border: 2px solid color-mix(in srgb, var(--text) 30%, transparent); color: var(--text); }
.tr-cms__sh__btn--ghost:hover { border-color: var(--terra); color: var(--terra); }

/* ---- section head (sdílené) ---- */
.tr-cms__sh__sec-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.8rem; flex-wrap: wrap; }
.tr-cms__sh__sec-head h2 { font-size: var(--fs-h2); font-family: var(--font-display); font-weight: 900; letter-spacing: -.02em; }
.tr-cms__sh__sec-head p { margin: .4rem 0 0; color: var(--muted); max-width: 48ch; }
.tr-cms__sh__link-more { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.tr-cms__sh__link-more:hover { text-decoration: underline; }

/* ---- editorial stránka: obsahová typografie (wrapper .tr-cms__sh__page je chrome) ---- */
.tr-cms__sh__page__perex { font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--muted); margin-bottom: 1.4rem; }
.tr-cms__sh__page__body { font-size: 1.05rem; }
.tr-cms__sh__page__body p { margin: 0 0 1rem; }

/* ---- kontakt (obsahový blok) ---- */
.tr-cms__sh__contact { display: grid; gap: var(--gap); margin-top: 2rem; }
.tr-cms__sh__contact__card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow-1); }
.tr-cms__sh__contact__card strong { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tr-cms__sh__contact__map { min-height: 240px; border-radius: var(--radius); background: linear-gradient(135deg, #5b6355, #7a6f63); display: grid; place-items: center; box-shadow: var(--shadow-1); }
.tr-cms__sh__contact__map span { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(23,19,16,.55); padding: .5rem .8rem; border-radius: 2px; }
/* Živá mapa (modul map) — vyplní slot, bez gradientu/centrovaného placeholderu.
   Explicitní výška (ne height:100%) — Leaflet potřebuje definitivní rozměr už
   při inicializaci; %-výška v grid/flex kontejneru se resolvuje pozdě → prázdná
   mapa. align-self:stretch necháme, mapa má pevnou výšku uvnitř. */
.tr-cms__sh__contact { align-items: start; }
.tr-cms__sh__contact__map--live { background: none; padding: 0; min-height: 0; display: block; }
.tr-cms__sh__contact__map--live .tr-cms__sh__map { height: 440px; min-height: 440px; }
@media (min-width: 720px) { .tr-cms__sh__contact { grid-template-columns: 1fr 1.2fr; align-items: stretch; } }

/* ===================== blokové styly (z bundle-home.css) ===================== */
/* BENTO / dlaždice (blok link_tiles + homepage) */
/* Na úzkém mobilu JEDEN sloupec. Dvousloupcová mřížka dávala na 390 px
   dlaždice široké ~172 px a nadpisy se lámaly po jednom slově
   („01 · AREÁL +
 MAPA", „Služby
 a rozvoz"). Změřeno snímkem přes
   iframe, který šířku 390 px opravdu vynutí — `--window-size` headless
   Chrome viewport neřídí a ukazoval 504 px oříznutých na 390. */
.tr-cms__sh__bento { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 560px) { .tr-cms__sh__bento { grid-template-columns: 1fr 1fr; } }
/* Výchozí pozadí je pojistka, ne dekorace (nález review 015, pass1): base třída
   nastavuje color:#fff, takže dlaždice bez platného modifikátoru by byla bílý
   text na světlé ploše — tedy neviditelná. S výchozím pozadím je z takového
   selhání kosmetická vada, ne výpadek obsahu. */
.tr-cms__sh__tile { position: relative; border-radius: var(--radius); padding: 1.2rem; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; background: var(--graphite); color: #fff; overflow: hidden; isolation: isolate; transition: transform .18s var(--ease), box-shadow .2s; }
.tr-cms__sh__tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.tr-cms__sh__tile::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16; mix-blend-mode: soft-light; background-image: repeating-linear-gradient(90deg, #000 0 1px, transparent 1px 26px), repeating-linear-gradient(0deg, #000 0 1px, transparent 1px 26px); }
.tr-cms__sh__tile__k { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; opacity: .85; }
.tr-cms__sh__tile h3 { font-size: var(--fs-h3); font-family: var(--font-display); font-weight: 900; margin-top: .3rem; letter-spacing: -.01em; }
.tr-cms__sh__tile p { margin: .35rem 0 0; font-size: .92rem; opacity: .92; max-width: 30ch; }
.tr-cms__sh__tile__go { align-self: flex-start; margin-top: 1rem; font-family: var(--font-mono); font-size: .8rem; letter-spacing: .06em; border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.tr-cms__sh__tile--sortiment { background: var(--terra); color: #2a1c12; }
.tr-cms__sh__tile--doprava { background: var(--sage); }
.tr-cms__sh__tile--pisky { background: var(--mauve); }
.tr-cms__sh__tile--kovo { background: var(--brick); }
.tr-cms__sh__tile--tym { background: var(--graphite); }
@media (min-width: 760px) {
  .tr-cms__sh__bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 168px; }
  .tr-cms__sh__tile--sortiment { grid-column: span 2; grid-row: span 2; }
  .tr-cms__sh__tile--doprava { grid-column: span 2; }
  .tr-cms__sh__tile--kovo { grid-column: span 2; }
}

/* MAPA (blok map / map_zones + homepage schéma) */
.tr-cms__sh__map { background: var(--panel-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tr-cms__sh__map__grid { display: grid; gap: var(--gap); }
.tr-cms__sh__map__plan { position: relative; aspect-ratio: 16/10; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-2); }
.tr-cms__sh__map__plan .tr-cms__sh__map-zones { position: absolute; inset: 0; width: 100%; height: 100%; }
.tr-cms__sh__map__plan-fallback { display: grid; place-items: center; width: 100%; height: 100%; margin: 0; background: linear-gradient(135deg, #5b6355, #6f6a5f 60%, #7a6f63); color: #fff; font-family: var(--font-mono); font-size: .8rem; text-align: center; padding: 1rem; }
.tr-cms__sh__map__aside h2 { font-size: var(--fs-h2); font-family: var(--font-display); font-weight: 900; letter-spacing: -.02em; }
.tr-cms__sh__map__aside p { color: var(--muted); }
@media (min-width: 900px) { .tr-cms__sh__map__grid { grid-template-columns: 1.5fr 1fr; align-items: center; } }

/* Statický náhled mapy v in-context editoru (zadání 012 follow-up) — Leaflet
   se v shadow náhledu neinicializuje, ukážeme informativní rám. */
.tr-cms__sh__map-preview { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(135deg, var(--panel-2), var(--panel)); padding: 1.1rem 1.2rem; }
.tr-cms__sh__map-preview__head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.tr-cms__sh__map-preview__head strong { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h3); }
.tr-cms__sh__map-preview__badge { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: .25rem .6rem; }
.tr-cms__sh__map-preview__note { color: var(--muted); font-size: .85rem; margin: .5rem 0 .2rem; }
.tr-cms__sh__map-preview__list { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.tr-cms__sh__map-preview__list li { font-family: var(--font-mono); font-size: .75rem; padding: .25rem .6rem; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; color: var(--text); }

/* KATEGORIE vzorníky (blok category_tiles + homepage) */
.tr-cms__sh__cats { display: grid; gap: var(--gap); grid-template-columns: repeat(2, 1fr); }
.tr-cms__sh__cat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .15s var(--ease), box-shadow .2s; }
.tr-cms__sh__cat:hover { transform: translateY(-3px); box-shadow: var(--shadow-1); }
.tr-cms__sh__cat__sw { height: 78px; position: relative; }
.tr-cms__sh__cat__sw::after { content: ""; position: absolute; inset: 0; opacity: .2; background-image: repeating-linear-gradient(45deg, #000 0 2px, transparent 2px 9px); }
.tr-cms__sh__cat__b { padding: .7rem .8rem; }
.tr-cms__sh__cat__b b { display: block; font-weight: 700; }
.tr-cms__sh__cat__b span { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
@media (min-width: 640px) { .tr-cms__sh__cats { grid-template-columns: repeat(4, 1fr); } }

/* ===================== blokové styly (z bundle-catalog.css) ===================== */
/* LayoutRenderer výstup (regiony + bloky) */
.layout-region { display: grid; gap: 1rem; }
.layout-region-main { max-width: 72ch; }
.layout-region-sidebar { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; }
.tr-cms__sh__block { min-width: 0; }
.tr-cms__sh__block-field .tr-cms__sh__block-label { display: block; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
.tr-cms__sh__block-field .tr-cms__sh__block-value { font-size: 1.05rem; color: var(--text); }
.tr-cms__sh__block-field.tr-cms__sh__block-name .tr-cms__sh__block-value,
.tr-cms__sh__block-field.tr-cms__sh__block-title .tr-cms__sh__block-value { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h2); letter-spacing: -.02em; }
.tr-cms__sh__block-field.tr-cms__sh__block-main_image img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-1); display: block; }
.tr-cms__sh__block-field .tr-cms__sh__attributes { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: 0; }
.tr-cms__sh__block-field .tr-cms__sh__attributes dt { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .04em; color: var(--muted); }
.tr-cms__sh__block-field .tr-cms__sh__attributes dd { margin: 0; color: var(--text); }
.tr-cms__sh__block-listing h2 { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h3); letter-spacing: -.01em; margin: 0 0 .8rem; }
.tr-cms__sh__block-listing ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.tr-cms__sh__block-listing li a {
  display: block; padding: .7rem .9rem; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); font-weight: 600; color: var(--text);
  transition: border-color .12s, transform .12s var(--ease);
}
.tr-cms__sh__block-listing li a:hover { border-color: var(--terra); transform: translateX(3px); color: var(--accent); }

/* interaktivní obrázek (SVG zóny) — a11y fallback nav */
.tr-cms__sh__interactive { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); border: 1px solid var(--line); }
/* SCÉNA má pevný poměr podle fotek naležato (1600:1064), takže se místo
   vyhradí před načtením a obsah pod fotkou neposkočí. Tmavé pozadí je
   pruh, který u fotek na výšku zbyde po stranách. */
.tr-cms__sh__interactive__stage {
  aspect-ratio: 1600 / 1064; display: grid; place-items: center;
  background: var(--ink); overflow: hidden;
}
/* Bez známých rozměrů fotky se poměr nevynucuje (viz komentář v bloku). */
.tr-cms__sh__interactive__stage--volna { aspect-ratio: auto; }
/* RÁM má poměr KONKRÉTNÍ fotky a nese zóny — je tedy přesně jejím
   obrysem i tehdy, když je fotka na výšku a scéna naležato. */
/* Obrázek je VYJMUTÝ Z TOKU. Dokud byl v toku, určoval šířku rámu on
   (`width: 100%` → vlastní šířka) a `height: 100%` se neprosadilo:
   fotka na výšku pak měla rám 829×1247 ve scéně vysoké 551 a scéna ji
   s `overflow: hidden` ořízla. Takhle rozměr rámu určuje jen poměr
   a výška scény. */
.tr-cms__sh__interactive__frame { position: relative; height: 100%; width: auto; max-width: 100%; }
.tr-cms__sh__interactive__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.tr-cms__sh__interactive__stage--volna .tr-cms__sh__interactive__frame { height: auto; width: 100%; }
.tr-cms__sh__interactive__stage--volna .tr-cms__sh__interactive__frame img { position: static; height: auto; }
.tr-cms__sh__interactive img { display: block; }
.tr-cms__sh__interactive svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tr-cms__sh__interactive__fallback { display: flex; flex-wrap: wrap; gap: .4rem; padding: .8rem; background: var(--panel-2); }
.tr-cms__sh__interactive__fallback a {
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em; padding: .35rem .7rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px; color: var(--text);
}
.tr-cms__sh__interactive__fallback a:hover, .tr-cms__sh__interactive__fallback a:focus-visible { border-color: var(--terra); color: var(--accent); }

/* galerie */
.tr-cms__sh__gallery { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.tr-cms__sh__gallery__item { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); }
.tr-cms__sh__gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

/* rich_text blok */
.tr-cms__sh__block--rich-text { }

/* katalogy místa (vlna 017, Č5) — sekce nad fotkami regálů
   na detailu kategorie a na stránce Prodejny */
.tr-cms__sh__place-catalogs { margin-block: calc(var(--gap) * 2); display: grid; gap: var(--gap); }
.tr-cms__sh__place-catalogs__title { margin: 0; font-size: 1.35rem; }
.tr-cms__sh__place-catalogs__lead { margin: 0; color: var(--muted); max-width: 52ch; }

/* výrobci u kategorie (úroveň 4) — loga s prokliky, fallback na název */
.tr-cms__sh__brands { margin-block: calc(var(--gap) * 2); display: grid; gap: var(--gap); }
.tr-cms__sh__brands__title { margin: 0; font-size: 1.35rem; }
.tr-cms__sh__brands__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.tr-cms__sh__brands__item {
  display: flex; align-items: center; justify-content: center; min-height: 72px;
  padding: .8rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.tr-cms__sh__brands__item img { max-height: 48px; width: auto; object-fit: contain; }
.tr-cms__sh__brands__item a { display: flex; align-items: center; justify-content: center; width: 100%; }
.tr-cms__sh__brands__item a:hover, .tr-cms__sh__brands__item a:focus-visible { color: var(--accent); }

/* přepínač fotek katalogu (místo s víc fotkami) */
.tr-cms__sh__place-catalogs__tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.tr-cms__sh__place-catalogs__tabs[hidden] { display: none; }
.tr-cms__sh__place-catalogs__tab {
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em;
  padding: .45rem .9rem; cursor: pointer; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
}
.tr-cms__sh__place-catalogs__tab:hover { border-color: var(--terra); }
.tr-cms__sh__place-catalogs__tab[aria-selected="true"] {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.tr-cms__sh__place-catalogs__panel[hidden] { display: none; }

/* detail kategorie / produktové skupiny: perex + hlavní fotka */
.tr-cms__sh__category__perex {
  font-size: 1.08rem; line-height: 1.65; color: var(--muted);
  max-width: 62ch; margin: 0 0 1.2rem;
}
.tr-cms__sh__category-photo { margin-block: calc(var(--gap) * 1.5); }
.tr-cms__sh__category-photo__fig {
  margin: 0; aspect-ratio: 1600 / 1064; border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--line); background: var(--ink);
  display: grid; place-items: center;
}
.tr-cms__sh__category-photo__fig img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Placeholder: stejný poměr i rám jako skutečná fotka, jen prázdný. */
.tr-cms__sh__category-photo__fig--prazdna { background: var(--panel-2); border-style: dashed; }
.tr-cms__sh__category-photo__fig--prazdna span {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
  border: 1px dashed var(--line); padding: .5rem .9rem; border-radius: 2px;
}

/* Galerie sekce se zarovnává na TÝŽ sloupec jako text stránky
   (`.tr-cms__sh__page` má max-width 760px), jinak fotky začínají jinde
   než odstavce nad nimi. */
/* Dvě třídy ve výběru schválně: `main.css` se linkuje AŽ ZA tímhle
   souborem a jeho `.tr-cms__sh__container { max-width: var(--wrap) }`
   by jednotřídní pravidlo přebilo. */
.tr-cms__sh__page-gallery.tr-cms__sh__container {
  max-width: 760px; margin-inline: auto; padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}