/**
 * Detail bodu — vizuální vrstva (v46, 2026-08-17).
 *
 * Načítá se AŽ ZA point-detail.css, takže při stejné specificitě vyhrává.
 * Odebrat = smazat jeden `<link>` v point.phtml a v pointpublic.phtml.
 * Rozvržení, pořadí prvků ani funkce nemění: jen povrch, typografii a stavy.
 *
 * ---------------------------------------------------------------------------
 * SMĚR: EDITORIAL MAPA-HERO
 *
 * Stránka dosud vypadala jako administrační formulář: jedenáct karet stejné
 * váhy, každá s rámečkem, stínem a zaoblením, všechny texty mezi 11 a 19 px
 * a modrá rozdaná i tomu, co se nedá zmáčknout. Název místa nebyl vidět vůbec
 * (`h1` byl `sr-only`), takže první, co oko našlo, byla trojice tlačítek.
 *
 * Čtyři rozhodnutí, ze kterých plyne všechno ostatní:
 *
 *  1. MAPA JE HERO. Celošířkový pás bez rámečku a bez zaoblení nahoře,
 *     výška clamp(240px, 34vh, 380px) místo pevných 220 px. Je to nejvíc
 *     charakteristická věc, kterou o bodu víme — kde to je.
 *
 *  2. PŘESAH MÍSTO STOHU. Přes spodní hranu mapy se posadí jediná vyvýšená
 *     plocha stránky: deska s názvem bodu (`h1`, dnes viditelný). Tím vzniká
 *     vrstva, ne dva bloky nad sebou. Je to jediné místo se stínem `-md`
 *     a jediné, kde se něco překrývá — celá odvaha stránky je utracená tady.
 *
 *  3. HIERARCHII NESE TYPOGRAFIE, NE RÁMEČKY. Název dostal display stupeň
 *     clamp(23px … 40px), autor spadl na 15 px a metadata na 12 px do
 *     tlumené barvy. Ostatní sekce přestaly být kartami: dělí je prostor
 *     a velikost nadpisu, ne čára a stín. Ubylo tím 6 rámečků, 6 stínů
 *     a ~180 px svislého odsazení.
 *
 *  4. BARVA JEN NA AKCE. Plochy jsou neutrální (--gc-surface / --gc-bg-soft).
 *     Plná modrá zbyla jedinému tlačítku, které dokončuje úlohu („Navigovat"),
 *     ostatní akce jsou tiché. Stavové štítky si barvu drží, ale nikdy jako
 *     jediného nositele informace — vždy s ikonou a textem.
 *
 * KOMPAKTNOST je tvrdé zadání, ne vedlejší efekt: hero smí být vyšší, ale
 * všechno pod ním musí vyjít kratší. Měřeno na `.page-body` scrollHeight,
 * čísla jsou v závěrečné zprávě.
 *
 * BARVY: výhradně z css/gosscard-theme.css (--gc-*). Žádný nový hex.
 * Odstíny, které v tokenech nejsou, vznikají přes color-mix() z tokenu.
 * Lokální --md-* jména zůstávají, protože na ně odkazuje převzatý blok
 * nabídky na konci souboru; jsou to dnes už jen aliasy na --gc-*.
 * ---------------------------------------------------------------------------
 */

/* ===========================================================================
   1. TOKENY
   --md-* jsou aliasy na --gc-* z gosscard-theme.css (jediný zdroj barev).
   --gcp-* jsou kompoziční proměnné téhle stránky (hero, okap, rytmus).
   =========================================================================== */

.pointPageBody {
    /* Plochy */
    --md-bg:         var(--gc-bg-soft, #f8fafc);
    --md-surface:    var(--gc-surface, #ffffff);
    --md-surface-2:  var(--gc-bg-soft, #f8fafc);
    --md-border:     var(--gc-border, #e2e8f0);
    --md-border-2:   color-mix(in srgb, var(--gc-border, #e2e8f0) 55%, var(--gc-surface, #fff));

    /* Text */
    --md-ink:        var(--gc-text, #1a202c);
    /* Text odstavce, ne popisek: --gc-text-muted (5,4:1) je na souvislé čtení
       zbytečně světlý, tak se o kousek přitáhne k základní barvě (≈12:1). */
    --md-ink-2:      color-mix(in srgb, var(--gc-text, #1a202c) 86%, var(--gc-surface, #fff));
    --md-ink-3:      var(--gc-text-muted, #5c6b7f);

    /* Značka */
    --md-brand:      var(--gc-primary-strong, #0069d9);
    --md-brand-dark: var(--gc-primary-darker, #0056b3);
    --md-brand-soft: var(--gc-primary-soft, #eff6ff);
    --md-brand-line: color-mix(in srgb, var(--gc-primary, #007bff) 30%, var(--gc-surface, #fff));

    /* Stav */
    --md-ok:         var(--gc-join-strong, #15803d);
    /* Amber v tokenech není. Vzniká smícháním obou existujících stavových
       barev v oklab — je to tmavý jantar, který na světlém štítku drží
       kontrast nad 4,5:1 (ověřeno v prohlížeči). */
    --md-warn:       color-mix(in oklab, var(--gc-danger-darker, #b91c1c) 62%, var(--gc-join-darker, #14532d));
    --md-danger:     var(--gc-danger-darker, #b91c1c);

    /* Tvar — jedna soustava z tokenů, tři stupně a pilulka */
    --md-r-sm:       calc(var(--gc-radius, 12px) - 4px);
    --md-r:          var(--gc-radius, 12px);
    --md-r-lg:       var(--gc-radius-lg, 16px);
    --md-r-pill:     var(--gc-radius-pill, 999px);

    /* Dvě úrovně stínu, víc ne. -sm nesou karty, -md jediná deska nadpisu. */
    --md-shadow:     var(--gc-shadow-sm, 0 2px 6px rgba(0, 0, 0, .06));
    --md-shadow-btn: var(--gc-shadow-sm, 0 2px 6px rgba(0, 0, 0, .06));

    /* --- Kompozice ------------------------------------------------------- */

    /* Okap obsahu. Mapa ho NEMÁ (jde od kraje ke kraji), všechno ostatní ano. */
    --gcp-gutter:    clamp(12px, 1.6vw, 24px);

    /* Výška hero pásu. vh, ne pevná hodnota: na nízkém okně nesmí mapa
       sežrat celou první obrazovku a nechat obsah pod zlomem. */
    --gcp-hero-h:    clamp(240px, 34vh, 380px);

    /* O kolik deska s názvem přesahuje přes spodní hranu mapy. Zhruba
       třetina její výšky — víc a deska vypadá, že do mapy spadla. */
    --gcp-overlap:   34px;

    /* Svislý rytmus. Čtyřbodová mřížka: 4 / 8 / 12 / 16 / 24 / 32. */
    --gcp-gap:       12px;   /* mezi kartami v jednom sloupci */
    --gcp-section:   20px;   /* mezi sekcemi stránky */

    /* Pohyb: jedno trvání a jedna křivka na celou stránku. */
    --gcp-dur:       140ms;
    --gcp-ease:      cubic-bezier(.2, 0, .2, 1);
}

/* ===========================================================================
   2. PLOCHA STRÁNKY
   Podklad je tlumený neutrál, karty bílé. Obaly (.container, .rowPointDetail,
   #pointPageArticleBody) jsou jen mřížka — plochu má obsah, ne ony.
   =========================================================================== */

.pointPageBody .pointPageInside {
    background: var(--md-bg) !important;
    /* Konec stránky nesmí skončit pod PWA lištou (95 px) a plovoucím chatem. */
    padding-bottom: 104px !important;
}

.pointPageBody .container,
.pointPageBody .rowPointDetail,
.pointPageBody #pointPageArticleBody,
.pointPageBody .rowPointDetailLeftPanel,
.pointPageBody .rowPointDetailRightPanel {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Prázdné čističe floatů jsou v svislém toku jen mezera navíc. */
.pointPageBody #pointPageArticleBody > .clear,
.pointPageBody .rowPointDetailLeftRight > .clear,
.pointPageBody .rowPointDetailLeftPanel > .clear,
.pointPageBody .rowPointDetailRightPanel > .clear,
.pointPageBody .detailPoint-box > .clear:last-child,
.pointPageBody .detailPoint-user-card-body > .clear {
    display: none !important;
}

/* ===========================================================================
   3. HERO: MAPA + DESKA S NÁZVEM
   ---------------------------------------------------------------------------
   `#pointPageArticleBody` se stává svislým flexem, aby šlo pořadí přeskládat
   bez zásahu do šablony: `h1` stojí v DOM PŘED mapou, ale patří pod ni.
   `order` to řeší jedním řádkem a `<script>` i `<link>` mezi nimi jsou
   display:none, takže do flexu nevstupují.

   Přesah drží záporný `margin-top` desky. Bod bez GPS mapu nevykresluje —
   `:has()` proto přesah zapíná jen tam, kde je co překrývat; jinak deska
   normálně sedí nahoře a nikde nezbývá díra.
   =========================================================================== */

.pointPageBody #pointPageArticleBody {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.pointPageBody #pointPageArticleBody > .pointPageArticleMap {
    order: -2;
}

.pointPageBody #pointPageArticleBody > h1 {
    order: -1;
}

/* --- Mapa: celošířkový pás -------------------------------------------------
   Bez rámečku, bez stínu, bez zaoblení. `public.css` má na `.mapPointPage`
   `height: 220px !important`, takže výška se sem musí psát taky s !important. */
.pointPageBody .pointPageArticleMap {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
    background: var(--md-surface-2);

    /* `public.css` drží na obalu pevných `height: 220px` — bez tohohle řádku
       zůstal pás 220 px vysoký a mapa uvnitř se jen ořízla. `min-width: 301px`
       odtamtud taky padá: na 280px kontejneru by pás přetekl. */
    height: var(--gcp-hero-h) !important;
    min-width: 0 !important;
    width: 100% !important;

    /* Leaflet dává svým vrstvám z-index 400 (dlaždice, značky) a 800 (ovládání)
       a `#map` je jen `position: relative` bez z-indexu, takže ta čísla platila
       v kořenovém kontextu — deska s názvem se z-indexem 2 se pod ně schovala.
       `isolation` udělá z hero pásu vlastní kontext a čísla uvnitř zůstanou
       uvnitř. Bez tohohle řádku přesah vůbec není vidět. */
    position: relative;
    z-index: 0;
    isolation: isolate;
}

.pointPageBody .pointPageArticleMap .mapPointPage,
.pointPageBody .pointPageArticleMap #map {
    height: var(--gcp-hero-h) !important;
    min-height: var(--gcp-hero-h) !important;
    max-height: none !important;
    border-radius: 0 !important;
    width: 100% !important;
}

/* Deska s názvem překrývá spodní pruh mapy, kde Leaflet drží povinné
   uvedení zdroje dlaždic (OpenStreetMap / OpenMapTiles). To se zakrýt nesmí,
   takže se spodní ovládání zvedne nad přesah. */
.pointPageBody .pointPageArticleMap .leaflet-bottom {
    bottom: calc(var(--gcp-overlap) + 6px);
}

/* Na úzkém displeji se text uvedení zdroje nevešel na řádek, zalomil se na dva
   a přes mapu se natáhl souvislý bílý pruh přes celou šířku. Menší písmo ho
   vrátí na jeden řádek a průsvitný podklad z něj udělá překryv, ne pás. */
@media (max-width: 560px) {
    .pointPageBody .pointPageArticleMap .leaflet-control-attribution {
        font-size: 9px;
        line-height: 1.4;
        padding: 1px 6px;
        background: rgba(255, 255, 255, 0.82);
        border-radius: var(--md-r-sm, 8px) 0 0 0;
    }
}

/* Ovládání mapy je součástí hero pásu, ne cizí prvek na něm. */
.pointPageBody .pointPageArticleMap .leaflet-control-zoom a {
    border-radius: var(--md-r-sm) !important;
    color: var(--md-ink) !important;
    border-color: var(--md-border) !important;
    transition: background-color var(--gcp-dur) var(--gcp-ease);
}

/* --- Deska s názvem bodu ---------------------------------------------------
   `h1` je v šabloně `sr-only`. Třída zůstává (nemažeme cizí třídy), jen se
   tady ruší její skrývací mechanika. Je to obsah bodu, ne popisek rozhraní —
   žádný nový jazykový řetězec z toho neplyne. */
.pointPageBody #pointPageArticleBody > h1.gcPointMasthead {
    position: relative;
    z-index: 2;
    clip: auto;
    clip-path: none;
    width: auto;
    height: auto;
    overflow: visible;
    white-space: normal;
    /* Bod bez GPS mapu nemá — deska pak stojí rovnou nahoře a potřebuje
       nad sebou dýchat. S mapou tenhle margin přebije pravidlo s `:has()`. */
    margin: var(--gcp-section) var(--gcp-gutter) var(--gcp-section);
    padding: 18px 20px;
    background: var(--md-surface);
    border: 1px solid var(--md-border);
    border-radius: var(--md-r-lg);
    box-shadow: var(--gc-shadow-md, 0 10px 26px rgba(30, 64, 175, .13));

    /* Display stupeň. Kořenová velikost písma je v projektu 10 px, takže
       rem vychází o 37 % menší, než člověk čeká — proto clamp v px/vw. */
    font-family: var(--gc-font);
    font-size: clamp(23px, 3.2vw, 40px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: var(--md-ink);
    text-wrap: balance;
}

/* Přesah jen tam, kde mapa opravdu je. */
.pointPageBody #pointPageArticleBody:has(.pointPageArticleMap) > h1.gcPointMasthead {
    margin-top: calc(var(--gcp-overlap) * -1);
}

/* Bod bez názvu kolekce si jméno odvozuje ze začátku popisu — ten je o kus
   níž celý, takže se tu ořízne na dva řádky, aby se text neopakoval třikrát. */
.pointPageBody #pointPageArticleBody > h1.gcPointMasthead--derived {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: clamp(20px, 2.4vw, 30px);
}

/* ===========================================================================
   4. TYPOGRAFIE
   Pět stupňů, nic pod 12 px. Váha a barva nesou hierarchii dřív než velikost.
   =========================================================================== */

/* Popisek sekce — jediná věc, která sekce od sebe odděluje kromě prostoru. */
.pointPageBody .detailPoint-section-label {
    margin: 0 0 10px !important;
    padding: 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: var(--md-ink-3) !important;
    border: 0 !important;
}

.pointPageBody .detailPoint-section-label:empty {
    display: none !important;
}

.pointPageBody .pointPageArticleText {
    font-size: 15px !important;
    line-height: 1.58 !important;
    color: var(--md-ink-2) !important;
}

.pointPageBody .pointPageArticleText p {
    margin: 0 0 8px !important;
}

.pointPageBody .pointPageArticleText p:last-child {
    margin-bottom: 0 !important;
}

/* Autor je o dva stupně pod názvem — je to údaj o bodu, ne nadpis stránky. */
.pointPageBody .detailPoint-user-details-name,
.pointPageBody .detailPoint-user-details h2,
.pointPageBody .detailPoint-user-details h2 a,
.pointPageBody .detailPoint-user-details h3,
.pointPageBody .detailPoint-user-details h3 a {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    color: var(--md-ink) !important;
}

.pointPageBody h2,
.pointPageBody h3 {
    margin: 0 !important;
}

/* ===========================================================================
   5. SEKCE: PLOCHÉ, VEDENÉ POPISKEM
   Karta byla dosud výchozím stavem každého bloku. Nově je karta výjimka:
   jedinou plochu v levém sloupci má identita bodu, jinde stačí prostor.
   =========================================================================== */

.pointPageBody .detailPoint-box {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 var(--gcp-section) !important;
    overflow: visible;
}

/* Obsah stránky drží jednu levou hranu; mapa je jediná výjimka. */
.pointPageBody .rowPointDetailLeftRight,
.pointPageBody #pointEshopSection,
.pointPageBody .listEshop,
.pointPageBody .pointPageArticleComments {
    padding-left: var(--gcp-gutter) !important;
    padding-right: var(--gcp-gutter) !important;
    box-sizing: border-box;
}

.pointPageBody .rowPointDetailLeftRight {
    margin-bottom: var(--gcp-section) !important;
}

.pointPageBody #pointEshopSection,
.pointPageBody .listEshop {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: var(--gcp-section) !important;
}

/* Nadpis nabídky je nadpis sekce jako každý jiný — stejné tvarosloví jako
   `.detailPoint-section-label`, aby stránka měla jednu soustavu nadpisů. */
.pointPageBody .listEshopHeader {
    margin-bottom: 10px !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: var(--md-ink-3) !important;
    gap: 7px !important;
}

/* Ikona sekce měla z publicredesign.css plnou modrou dlaždici 36×36 px.
   Nadpis se nedá zmáčknout, takže na něm nemá co dělat plná značková
   plocha — a hlavně: `fa-store` v osekaném Font Awesome (css/gosscard-fa.css
   + subset fontu) nemá glyf, takže z té dlaždice byl na stránce jen modrý
   čtverec. Bez plochy chybějící glyf tiše zmizí, místo aby křičel. */
.pointPageBody .listEshopHeader i,
.pointPageBody .listEshopHeader .fas {
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--md-ink-3) !important;
    font-size: 12px !important;
}

.pointPageBody .listEshopHeader span {
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    color: inherit !important;
}

/* Pás filtrů byl jediný blok na stránce zarovnaný na střed — rozbíjel jednu
   levou hranu, na které stojí všechno ostatní. */
.pointPageBody .listEshopItemsCategoryListMenu {
    justify-content: flex-start !important;
}

/* Pilulka filtru měla 22 px na výšku — pod 24×24 px z WCAG 2.2 (2.5.8). */
.pointPageBody .listEshopItemsCategoryListMenuItem {
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center;
}

/* ===========================================================================
   6. KARTA IDENTITY (autor + štítky + akce + nastavení)
   Jediná plocha v levém sloupci. Uvnitř žádné další rámečky ani linky:
   vrstvy odděluje odsazení, ne čára.
   =========================================================================== */

.pointPageBody .detailPoint-user-info-section {
    background: var(--md-surface) !important;
    border: 1px solid var(--md-border) !important;
    border-radius: var(--md-r-lg) !important;
    box-shadow: var(--md-shadow) !important;
    padding: 0 !important;
    overflow: hidden;
}

.pointPageBody .detailPoint-user-card-body {
    padding: 14px !important;
}

/* Vnitřní předěly byly vlasové linky přes celou šířku karty. Zůstává jen
   odsazení — sekce v kartě jsou tři, ne deset, a poznají se rozestupem. */
.pointPageBody .detailPoint-user-card-body > .pointActionsWrap,
.pointPageBody .detailPoint-user-card-body > .detailPoint-card-settings {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-top: 0 !important;
}

.pointPageBody .detailPoint-user-card-body > .pointActionsWrap {
    margin-top: 12px !important;
    padding-top: 0 !important;
}

.pointPageBody .detailPoint-user-card-body .pointActionsBar {
    border-top: 0 !important;
    padding-top: 0 !important;
    gap: 10px !important;
}

/* Avatar drží proporci s 15px jménem — 40 px, ne 48. */
.pointPageBody .detailPoint-user-head {
    align-items: center !important;
    gap: 10px !important;
}

.pointPageBody .detailPoint-user-head .detailPoint-profile-pic {
    width: 40px !important;
    height: 40px !important;
    border-width: 0 !important;
    box-shadow: 0 0 0 1px var(--md-border) !important;
    transition: transform var(--gcp-dur) var(--gcp-ease);
}

.pointPageBody .detailPoint-user-head-avatar:hover .detailPoint-profile-pic {
    transform: scale(1.04);
}

.pointPageBody .detailPoint-user-info-section .pointPageOwnerRatingStrip {
    margin: 1px 0 0 !important;
    padding-left: 0 !important;
}

/* Sbalené nastavení je tichá patička karty, ne další vnořená karta. */
.pointPageBody .detailPoint-user-card-body > .detailPoint-card-settings {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top: 1px solid var(--md-border-2) !important;
}

.pointPageBody .detailPoint-card-settings .detailPoint-collapse {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

.pointPageBody .detailPoint-collapse-summary {
    padding: 10px 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--md-ink-2) !important;
    border-radius: var(--md-r-sm);
    transition: color var(--gcp-dur) var(--gcp-ease);
}

.pointPageBody .detailPoint-collapse-summary:hover {
    background: transparent !important;
    color: var(--md-ink) !important;
}

.pointPageBody .detailPoint-collapse-summary .glyphicon {
    color: var(--md-ink-3) !important;
}

.pointPageBody .detailPoint-collapse-chevron {
    border-right-color: var(--md-ink-3);
    border-bottom-color: var(--md-ink-3);
    transition: transform var(--gcp-dur) var(--gcp-ease);
}

.pointPageBody .detailPoint-collapse-body {
    padding: 0 0 10px !important;
    border-top: 0 !important;
    /* Obsah uvnitř je legacy plovoucí rozvržení, takže rozbalený `<details>`
       měl výšku 10 px a formulář z něj vytékal. `flow-root` udělá vlastní
       blokový kontext a plováky se do něj vejdou. */
    display: flow-root;
}

.pointPageBody .pointPageAttributesSet {
    display: flow-root;
    float: none !important;
}

/* Formulář nastavení: popisky nad poli, pole na plnou šířku, nic na střed. */
.pointPageBody .pointPageAttributesSetCheckboxIsPublicText,
.pointPageBody .pointPageAttributesSetSelectFiltrText {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--md-ink-3) !important;
    text-align: left !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    float: none !important;
    width: 100% !important;
}

/* Šipka rozbalovacího seznamu: `background` (zkratka) s `!important` mazala
   `background-image` ze sdíleného pravidla v publicredesign.css, takže selecty
   na detailu bodu vypadaly jako obyčejná textová pole a nešlo poznat, že se
   rozbalují. Barva jde proto přes `background-color` a šipka se kreslí tady —
   nezávisle na tom, jestli sdílené pravidlo prvek trefí (týká se i
   `#gcJoinModeSelect`, na který ID selektory v publicredesign.css nemíří). */
.pointPageBody .pointPageAttributesPublicSelect,
.pointPageBody .pointPageAttributesCategorySelect,
/* Sdílené `#isPublicPointSelect { background: … !important }` v publicredesign.css
   má vyšší specificitu než třídy, takže se sem musí přidat i ID. */
.pointPageBody #isPublicPointSelect,
.pointPageBody #dialogAddFilt,
.pointPageBody #gcJoinModeSelect {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 40px;
    box-sizing: border-box;
    padding: 8px 32px 8px 10px !important;
    font-size: 13px !important;
    color: var(--md-ink) !important;
    background-color: var(--md-surface) !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 14px !important;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--md-border) !important;
    border-radius: var(--md-r-sm) !important;
    transition: border-color var(--gcp-dur) var(--gcp-ease), box-shadow var(--gcp-dur) var(--gcp-ease);
}

.pointPageBody .pointPageAttributesPublicSelect:hover,
.pointPageBody .pointPageAttributesCategorySelect:hover,
.pointPageBody #isPublicPointSelect:hover,
.pointPageBody #dialogAddFilt:hover,
.pointPageBody #gcJoinModeSelect:hover {
    border-color: color-mix(in srgb, var(--md-brand) 45%, var(--md-border)) !important;
}

.pointPageBody .pointPageAttributesSetCheckboxIsPublic,
.pointPageBody .pointPageAttributesSetSelectFiltr {
    margin-bottom: 10px !important;
    float: none !important;
    width: 100% !important;
}

.pointPageBody .pointPageAttributesSetSelectFiltrSelect {
    display: flex;
    align-items: stretch;
    gap: 8px;
    float: none !important;
    width: 100% !important;
}

.pointPageBody .pointPageAttributesSetSelectFiltrSelect .pointPageAttributesCategorySelect {
    flex: 1 1 auto;
    min-width: 0;
}

.pointPageBody #submitPointChanges {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: var(--md-r-sm) !important;
    background: var(--md-brand) !important;
    color: var(--md-surface) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: background-color var(--gcp-dur) var(--gcp-ease), transform var(--gcp-dur) var(--gcp-ease);
}

.pointPageBody #submitPointChanges:hover {
    background: var(--md-brand-dark) !important;
    transform: translateY(-1px);
}

.pointPageBody #submitPointChanges:active {
    transform: translateY(0) scale(.985);
}

/* Popisek pole viditelnosti byl v legacy CSS `display: none` — u výběru
   „Pro sledující / Veřejný / Jen pro mě" tedy nestál žádný název a jediné
   vysvětlení nesl `aria-labelledby` mířící na skrytý prvek. Zapíná se zpátky
   a dostává stejné tvarosloví jako popisek kategorie o řádek níž.
   Vnější nadpis bloku zůstává skrytý (říká přesně totéž). */
.pointPageBody #pointPageVisibilityLabel {
    display: block !important;
}

/* --- Nevratná akce ---------------------------------------------------------
   Šablona má na tlačítko vlastní inline <style> až za tímhle souborem, takže
   se sem musí psát se specificitou (0,2,0) a výš. Zůstává destruktivní
   a odlišené: tlumená červená v klidu, plná plocha na hover. */
.pointPageBody .detailPoint-danger-zone {
    display: flex !important;
    justify-content: flex-start !important;
    margin: 10px 0 0 !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--md-border-2) !important;
}

.pointPageBody .detailPointDeletePointBtn {
    color: var(--gc-danger-strong, #dc2626) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--md-r-pill) !important;
    padding: 8px 14px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    transition: background-color var(--gcp-dur) var(--gcp-ease), color var(--gcp-dur) var(--gcp-ease);
}

.pointPageBody .detailPointDeletePointBtn:hover {
    background: var(--gc-danger-soft, #fef2f2) !important;
    border-color: color-mix(in srgb, var(--gc-danger, #ef4444) 35%, var(--gc-surface, #fff)) !important;
    color: var(--gc-danger-darker, #b91c1c) !important;
}

.pointPageBody .detailPointDeletePointBtn:active {
    background: var(--gc-danger-press, #fee2e2) !important;
}

/* ===========================================================================
   7. ŠTÍTKY A ODZNAKY
   Barvu stavových štítků z point-detail.css schválně NEPŘEPISUJEME —
   je odladěná na kontrast a zavádět pro ni nové odstíny by bylo zbytečné.
   Tady se řeší jen tvar, velikost a rytmus řady.
   =========================================================================== */

.pointPageBody .detailPoint-meta-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 10px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}

.pointPageBody .detailPoint-meta-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 9px !important;
    border-radius: var(--md-r-pill) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    white-space: nowrap;
}

/* Ikona štítku je dekorace vedle textu (aria-hidden), ale i tak nemá být
   světlejší než tlumený text — 2,3:1 bylo pod prahem pro grafiku. */
.pointPageBody .detailPoint-meta-chip .glyphicon {
    font-size: 11px !important;
    color: var(--md-ink-3) !important;
    top: 0 !important;
}

.pointPageBody .detailPoint-state-chip {
    padding: 4px 9px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    border-radius: var(--md-r-pill) !important;
}

.pointPageBody .detailPoint-state-chip .pointPageArticlePublicState-icon {
    font-size: 11px !important;
}

/* Proužek se staršími tagy byl vyplněný box uvnitř karty — další plocha
   v ploše. Zůstává jen linka a odsazení; tagy samy nesou modrou. */
.pointPageBody .pointPageHashtagsSection,
.pointPageBody .pointPageHashtagsSection--legacy {
    margin: 10px 0 0 !important;
    padding: 10px 0 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--md-border-2) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ===========================================================================
   8. TLAČÍTKA
   Jedna výška (44 px na dotyk), jeden poloměr, jedna váha.
   Plná modrá jen na akci, která dokončuje úlohu; ostatní jsou tiché.
   `public.css` má `a { color: … !important }`, takže popisek na tlačítku,
   které je `<a>`, se musí přebít taky s !important.
   =========================================================================== */

.pointPageBody .btnSet {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 16px !important;
    border: 1px solid transparent !important;
    border-radius: var(--md-r) !important;
    font-family: var(--gc-font);
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: none !important;
    background-image: none !important;
    transition: background-color var(--gcp-dur) var(--gcp-ease),
                border-color var(--gcp-dur) var(--gcp-ease),
                color var(--gcp-dur) var(--gcp-ease),
                transform var(--gcp-dur) var(--gcp-ease);
}

.pointPageBody .btnSet:hover {
    transform: translateY(-1px);
}

.pointPageBody .btnSet:active {
    transform: translateY(0) scale(.985);
}

/* --- Tiché tlačítko: výchozí stav všeho, co není hlavní akce -------------- */
.pointPageBody .btnSet,
.pointPageBody .btnSet.btnSetBlue {
    background: var(--md-surface) !important;
    border-color: var(--md-border) !important;
    color: var(--md-ink) !important;
}

/* Popisek uvnitř tlačítka je vlastní <span>; barvu mu musí předat tohle
   pravidlo, protože `a { color: … !important }` z public.css by mu jinak
   vnutilo modrou. Plochu si span nebere — tu drží tlačítko. */
.pointPageBody .btnSet span,
.pointPageBody .btnSet.btnSetBlue span {
    background: transparent !important;
    color: var(--md-ink) !important;
}

.pointPageBody .btnSet:hover,
.pointPageBody .btnSet.btnSetBlue:hover {
    background: var(--md-surface-2) !important;
    border-color: color-mix(in srgb, var(--md-ink-3) 45%, var(--md-border)) !important;
}

.pointPageBody .btnSet .glyphicon,
.pointPageBody .btnSet .fas,
.pointPageBody .btnSet .fa {
    color: var(--md-ink-3) !important;
    font-size: 13px !important;
    top: 0 !important;
}

/* --- Hlavní akce: „Navigovat" -------------------------------------------
   Jediné plné tlačítko na stránce. Je to jediná akce, která dokončuje to,
   proč se člověk na detail bodu dívá: dostat se tam. */
/* Plné tlačítko dostane jen akce, která dokončuje úlohu své sekce:
     • hero / levý sloupec  → Navigovat (dostat se na místo),
     • popis (vlastník)     → Uložit,
     • komentáře            → Přidat komentář.
   Nic jiného na stránce plnou modrou nemá.

   Specificita (0,4,0) je nutná: tiché `.btnSet.btnSetBlue` výš má (0,3,0)
   a popisky uvnitř (0,3,1), takže kratší zápis by prohrál a plné tlačítko
   by mělo bílý text na bílém proužku uprostřed modré plochy. */
.pointPageBody .btnSet.btnSetBlue.pointPageNavigateButton,
.pointPageBody .btnSet.btnSetBlue.btnAddCommentPoint,
.pointPageBody .btnSet.btnSetBlue.pointPageArticleTextSaveBtn {
    background: var(--md-brand) !important;
    border-color: var(--md-brand) !important;
    color: var(--md-surface) !important;
}

.pointPageBody .btnSet.btnSetBlue.pointPageNavigateButton span,
.pointPageBody .btnSet.btnSetBlue.btnAddCommentPoint span,
.pointPageBody .btnSet.btnSetBlue.pointPageArticleTextSaveBtn span,
.pointPageBody .btnSet.btnSetBlue.pointPageNavigateButton .fas,
.pointPageBody .btnSet.btnSetBlue.pointPageNavigateButton .glyphicon,
.pointPageBody .btnSet.btnSetBlue.pointPageArticleTextSaveBtn .glyphicon {
    background: transparent !important;
    color: var(--md-surface) !important;
}

.pointPageBody .btnSet.btnSetBlue.pointPageNavigateButton:hover,
.pointPageBody .btnSet.btnSetBlue.btnAddCommentPoint:hover,
.pointPageBody .btnSet.btnSetBlue.pointPageArticleTextSaveBtn:hover {
    background: var(--md-brand-dark) !important;
    border-color: var(--md-brand-dark) !important;
}

/* --- Destruktivní tlačítka (zakázat komentáře) --------------------------- */
.pointPageBody .btnSet.btnSetRed,
.pointPageBody .btnSet.btnSetRed span {
    background: transparent !important;
    border-color: color-mix(in srgb, var(--gc-danger, #ef4444) 35%, var(--gc-surface, #fff)) !important;
    color: var(--gc-danger-strong, #dc2626) !important;
}

.pointPageBody .btnSet.btnSetRed:hover {
    background: var(--gc-danger-soft, #fef2f2) !important;
}

/* --- Lišta akcí u GPS ---------------------------------------------------- */
.pointPageBody .detailPoint-gps-info-section {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 var(--gcp-gap) !important;
}

.pointPageBody .detailPoint-gps-info-section .detailPoint-gps-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Selektory jsou schválně stejně dlouhé jako v point-detail.css (0,5,0):
   ten drží na týchž obalech `flex: 0 0 auto !important` a kratší zápis by
   prohrál — tlačítka by zůstala smrsklá na šířku textu a v širokém sloupci
   by po nich zbývalo prázdno. Při shodné specificitě rozhoduje pořadí
   načtení a tenhle soubor je až za ním. */
.pointPageBody .rowPointDetailLeftPanel .detailPoint-gps-info-section .detailPoint-gps-actions .pointPageLeftPanelGpsButton,
.pointPageBody .rowPointDetailLeftPanel .detailPoint-gps-info-section .detailPoint-gps-actions #pointPageCopyUrlToClipboardPoint,
.pointPageBody .rowPointDetailLeftPanel .detailPoint-gps-info-section .detailPoint-gps-actions #pointPageReportPointBox,
.pointPageBody .detailPoint-gps-info-section .detailPoint-gps-actions > div {
    /* `1 1 auto`, ne `1 1 0`: se základem 0 dostala všechna tři tlačítka
       stejnou šířku a delší popisek („Kopírovat url") se zalomil, i když
       vedle něj zbývalo místo. Se základem auto se volné místo rozdělí
       až NAD obsah, takže se zalomí, teprve když se opravdu nevejde. */
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    display: flex;
}

.pointPageBody .rowPointDetailLeftPanel .detailPoint-gps-info-section .detailPoint-gps-actions .btnSet,
.pointPageBody .detailPoint-gps-info-section .detailPoint-gps-actions > div > .btnSet {
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
}

/* ===========================================================================
   9. LIŠTA HODNOCENÍ (palce + Okomentovat)
   Musí zůstat na jednom řádku: palce si drží velikost, tlačítko dobírá
   zbytek, a když je místa málo, spadne celé na vlastní řádek — nikdy se
   nerozseká na dva půlřádky.
   =========================================================================== */

.pointPageBody .pointActionsWrap {
    margin-top: 12px !important;
    width: 100%;
}

/* `nowrap`, ne `wrap`: nejužší reálný kontejner je levý sloupec (min. 260 px)
   a se zalamováním tam „Okomentovat" spadlo pod palce, takže lišta měla dva
   řádky. Nezalomená řada se místo toho smrští — tlačítko má `min-width: 0`
   a jeho popisek `overflow-wrap: anywhere` (blok o 48 jazycích níž), takže
   se zalomí TEXT uvnitř tlačítka a řada zůstane jedna. */
.pointPageBody .pointActionsBar {
    display: flex !important;
    /* `stretch`, ne `center`: v úzkém sloupci se popisek „Okomentovat"
       zalomí, tlačítko povyroste a se středovým zarovnáním by sourozenci
       měli různý `top` — řada by měřením vycházela jako dva řádky, i když
       je jedna. Se `stretch` mají oba potomci shodnou horní hranu. */
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
}

.pointPageBody .pointReactionGroup {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.pointPageBody .pointReactionItem {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* Palec je tichý ovládací prvek, dokud ho někdo nezmáčkne. Barvu si bere
   až v aktivním stavu — přesně to je „barva jen na akce". */
.pointPageBody .pointReactionOrb {
    width: 38px !important;
    height: 38px !important;
    border: 1px solid var(--md-border) !important;
    border-radius: 50% !important;
    background: var(--md-surface) !important;
    background-image: none !important;
    color: var(--md-ink-3) !important;
    box-shadow: none !important;
    transition: background-color var(--gcp-dur) var(--gcp-ease),
                border-color var(--gcp-dur) var(--gcp-ease),
                color var(--gcp-dur) var(--gcp-ease),
                transform var(--gcp-dur) var(--gcp-ease);
}

.pointPageBody .pointReactionOrb .glyphicon {
    font-size: 15px !important;
}

.pointPageBody .pointReactionOrb:hover {
    background: var(--md-surface-2) !important;
    border-color: color-mix(in srgb, var(--md-ink-3) 45%, var(--md-border)) !important;
    color: var(--md-ink) !important;
    transform: translateY(-1px);
}

.pointPageBody .pointReactionOrb:active {
    transform: translateY(0) scale(.94);
}

.pointPageBody .pointReactionOrb--up.pointReactionOrb--active {
    background: var(--md-brand) !important;
    background-image: none !important;
    border-color: var(--md-brand) !important;
    color: var(--md-surface) !important;
}

.pointPageBody .pointReactionOrb--down.pointReactionOrb--active {
    background: var(--gc-danger-strong, #dc2626) !important;
    background-image: none !important;
    border-color: var(--gc-danger-strong, #dc2626) !important;
    color: var(--md-surface) !important;
}

.pointPageBody .pointReactionCount {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--md-ink-2) !important;
    min-width: .7em;
}

/* Číslo u palce je zároveň ovládací prvek (otevírá seznam, kdo hlas dal),
   takže na něj platí 24×24 px z WCAG 2.2 (2.5.8) — mělo 16×17. */
.pointPageBody .pointReactionCount.is-clickable {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 2px 4px !important;
    border-radius: var(--md-r-sm) !important;
    transition: background-color var(--gcp-dur) var(--gcp-ease);
}

.pointPageBody .pointReactionCount.is-clickable:hover {
    background: var(--md-surface-2) !important;
}

/* „Okomentovat" je tiché tlačítko ve stejném jazyce jako palce vedle něj. */
.pointPageBody .pointFbActionBtn {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: auto !important;
    padding: 6px 14px !important;
    border: 1px solid var(--md-border) !important;
    border-radius: var(--md-r-pill) !important;
    background: var(--md-surface) !important;
    color: var(--md-ink-2) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    transition: background-color var(--gcp-dur) var(--gcp-ease),
                border-color var(--gcp-dur) var(--gcp-ease),
                color var(--gcp-dur) var(--gcp-ease),
                transform var(--gcp-dur) var(--gcp-ease);
}

.pointPageBody .pointFbActionBtn:hover {
    background: var(--md-surface-2) !important;
    border-color: color-mix(in srgb, var(--md-ink-3) 45%, var(--md-border)) !important;
    color: var(--md-ink) !important;
    transform: translateY(-1px);
}

.pointPageBody .pointFbActionBtn:active {
    transform: translateY(0) scale(.985);
}

.pointPageBody .pointFbActionBtn .glyphicon {
    font-size: 15px !important;
    color: inherit !important;
    top: 0 !important;
}

/* ===========================================================================
   10. POPIS
   Bez karty. Popisek „POPIS" nad ním má smysl jen tam, kde popis nesousedí
   přímo s kartou autora; sešívání karet z point-detail.css je pryč, protože
   karta je dnes jen jedna.

   POZOR: od 2026-08-21 stojí popis v PRAVÉM sloupci pod fotkami (šablony
   point.phtml / pointpublic.phtml). Obě pravidla se sousedským `+` níž tedy
   nemají co spárovat a jsou bez účinku — zůstávají pro případ návratu popisu
   do levého sloupce, nové pravidlo na ně nestavět.
   =========================================================================== */

.pointPageBody .detailPoint-description-info-section {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.pointPageBody .rowPointDetailLeftPanel > .detailPoint-user-info-section:has(+ .detailPoint-description-info-section) {
    border-radius: var(--md-r-lg) !important;
    border-bottom: 1px solid var(--md-border) !important;
    box-shadow: var(--md-shadow) !important;
    margin-bottom: var(--gcp-section) !important;
}

.pointPageBody .rowPointDetailLeftPanel > .detailPoint-user-info-section + .detailPoint-description-info-section {
    border-radius: 0 !important;
    border-top: 0 !important;
    box-shadow: none !important;
}

.pointPageBody .detailPoint-user-info-section + .detailPoint-description-info-section .detailPoint-section-label {
    display: block !important;
}

/* Tužka u popisu: kruhový tichý ovládací prvek, ne plovoucí ikona. */
.pointPageBody .pointPageArticleTextContentBoxIcon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--md-ink-3) !important;
    background: transparent;
    cursor: pointer;
    transition: background-color var(--gcp-dur) var(--gcp-ease), color var(--gcp-dur) var(--gcp-ease);
}

.pointPageBody .pointPageArticleTextContentBoxIcon:hover {
    background: var(--md-surface-2);
    color: var(--md-ink) !important;
}

.pointPageBody .pointPageArticleTextTranslate {
    display: inline-flex;
    align-items: center;
    margin: 8px 0 0 !important;
    padding: 4px 0;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer;
    border-radius: var(--md-r-sm);
}

.pointPageBody .pointPageArticleTextTranslate:hover {
    text-decoration: underline;
}

/* Editor popisu */
.pointPageBody .pointPageArticleTextEditAreaBody {
    margin-top: 10px;
}

.pointPageBody .pointPageArticleTextEditSaveBar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

/* ===========================================================================
   11. GALERIE
   Fotky jsou doprovod, ne hero — hero je mapa. Hlavní fotka proto dostane
   strop podle výšky okna, ne podle šířky sloupce: dřív měla 474 px a byla
   největší prvek stránky.
   =========================================================================== */

.pointPageBody .detailPoint-galery-info-section {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.pointPageBody .pointPageArticleGaleryItemBig {
    border-radius: var(--md-r) !important;
    overflow: hidden;
    margin-bottom: 8px !important;
}

.pointPageBody .pointPageArticleGaleryItemBig img,
.pointPageBody .pointPageArticleGaleryItemImgBig {
    width: 100% !important;
    aspect-ratio: 16 / 10;
    height: auto !important;
    max-height: clamp(200px, 30vh, 330px) !important;
    object-fit: cover !important;
    display: block;
    border-radius: var(--md-r) !important;
    transition: transform 180ms var(--gcp-ease);
}

.pointPageBody .pointPageArticleGaleryItemBig:hover img {
    transform: scale(1.015);
}

.pointPageBody .pointPageArticleGaleryItemBodySmallImgs {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important;
    gap: 6px !important;
}

.pointPageBody .pointPageArticleGaleryItem {
    border-radius: var(--md-r-sm) !important;
    overflow: hidden;
    aspect-ratio: 1;
}

.pointPageBody .pointPageArticleGaleryItem img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    transition: transform 180ms var(--gcp-ease), opacity var(--gcp-dur) var(--gcp-ease);
}

.pointPageBody .pointPageArticleGaleryItem:hover img {
    transform: scale(1.06);
}

/* --- Koš u fotky ----------------------------------------------------------
   Vlastník viděl na čtrnácti náhledech čtrnáct plných červených dlaždic —
   nevratná akce křičela hlasitěji než samotné fotky. Nevratnost zůstává
   čitelná (ikona koše + popisek pro odečítač), ale barvu si prvek bere
   až ve chvíli, kdy na něj člověk míří.

   Velikost zůstává 30 px: 44px cíl by na 64px náhledu zabral polovinu
   dlaždice a znemožnil klik na samotnou fotku. WCAG 2.2 AA (2.5.8) žádá
   24×24 px, což je splněno s rezervou. */
.pointPageBody .uploadedFilesListItemDeleteEditPoint {
    display: flex !important;
    align-items: center;
    justify-content: center;
    top: 6px;
    left: 6px;
    width: 30px !important;
    height: 30px;
    margin-top: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background-color: color-mix(in srgb, var(--gc-text, #1a202c) 62%, transparent) !important;
    color: var(--md-surface) !important;
    font-size: 13px !important;
    box-shadow: none;
    transition: background-color var(--gcp-dur) var(--gcp-ease), transform var(--gcp-dur) var(--gcp-ease);
}

.pointPageBody .uploadedFilesListItemDeleteEditPoint .glyphicon {
    font-size: 13px;
    top: 0;
}

.pointPageBody .uploadedFilesListItemDeleteEditPoint:hover,
.pointPageBody .uploadedFilesListItemDeleteEditPoint:focus-visible {
    background-color: var(--gc-danger-strong, #dc2626) !important;
    transform: scale(1.06);
}

/* Nahrání fotek: tichý pruh, ne velká prázdná plocha. */
.pointPageBody #drop-zone.upload-button {
    margin-top: 10px !important;
    padding: 10px !important;
    min-height: 0 !important;
    border: 1px dashed var(--md-border) !important;
    border-radius: var(--md-r) !important;
    background: var(--md-surface-2) !important;
    transition: border-color var(--gcp-dur) var(--gcp-ease), background-color var(--gcp-dur) var(--gcp-ease);
}

.pointPageBody #drop-zone.upload-button:hover {
    border-color: var(--md-brand) !important;
    background: var(--md-brand-soft) !important;
}

/* ===========================================================================
   12. POZVÁNÍ / PŘIPOJENÍ / AKCE U BODU
   =========================================================================== */

.pointPageBody .gc-invite-section,
.pointPageBody .gc-join-section,
.pointPageBody .detailPoint-action-info-section {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: var(--gcp-section) !important;
}

.pointPageBody .gc-invite-section--hidden {
    display: none !important;
}

.pointPageBody .pointPageActionsBodyItemOnlyView {
    background: var(--md-surface) !important;
    border: 1px solid var(--md-border) !important;
    border-radius: var(--md-r) !important;
    box-shadow: none !important;
    padding: 10px !important;
    margin-bottom: 8px !important;
}

.pointPageBody .pointPageActionsBodyItemImg {
    border-radius: var(--md-r-sm) !important;
    transition: transform 180ms var(--gcp-ease);
}

.pointPageBody .pointPageActionsBodyItemImg:hover {
    transform: scale(1.03);
}

/* ===========================================================================
   13. KOMENTÁŘE
   Sekce má JEDNU plochu. Psací pole a vlákno uvnitř jsou ploché a dělí je
   vlasová linka, ne další rámeček — dřív tu byly tři bílé plochy v sobě.
   =========================================================================== */

.pointPageBody .pointPageArticleComments {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.pointPageBody .pointPageArticle {
    background: var(--md-surface) !important;
    border: 1px solid var(--md-border) !important;
    border-radius: var(--md-r-lg) !important;
    box-shadow: none !important;
    padding: 12px !important;
}

.pointPageBody .pointCommentComposer,
.pointPageBody .pointBodyAddonsCommentsBody,
.pointPageBody .pointPageBodyCommentInput,
.pointPageBody .pointCommentPhotoBar,
.pointPageBody .pointPageBodyCommentSend,
.pointPageBody .pointBodyAddonsComments {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.pointPageBody .pointPageArticle {
    /* Legacy `margin-bottom: 40px` pod vláknem — 40 px prázdna na konci
       stránky, kde už nic není. */
    margin-bottom: 0 !important;
}

.pointPageBody .pointBodyAddonsCommentsBody {
    margin-top: 12px !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--md-border-2) !important;
    gap: 12px !important;
}

/* ZMĚŘENO: vlákno je svislý flex s `gap: 15px` a mezi šesti komentáři v něm
   stálo DVANÁCT prázdných čističů floatů. Každý z nich je plnohodnotná
   položka flexu, takže si nárokoval vlastní mezeru — 17 mezer místo 5,
   tedy 180 px prázdna navíc jen v jedné sekci. Čističe nemají ve flexu co
   dělat; obtékání tam žádné není. */
.pointPageBody .pointBodyAddonsCommentsBody > .clear,
.pointPageBody .pointBodyAddonsCommentsBody > br {
    display: none !important;
}

.pointPageBody .pointBodyAddonsComments {
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--md-border-2) !important;
}

.pointPageBody .pointBodyAddonsComments:last-child {
    border-bottom: 0 !important;
}

/* Psací pole je jediný orámovaný prvek v sekci — je to ovládací prvek. */
.pointPageBody #addcomment,
.pointPageBody .pointPageBodyCommentInput textarea {
    width: 100% !important;
    box-sizing: border-box;
    min-height: 44px !important;
    padding: 10px 12px !important;
    border: 1px solid var(--md-border) !important;
    border-radius: var(--md-r) !important;
    background: var(--md-surface-2) !important;
    color: var(--md-ink) !important;
    font-family: var(--gc-font);
    font-size: 14px !important;
    line-height: 1.45 !important;
    transition: border-color var(--gcp-dur) var(--gcp-ease), background-color var(--gcp-dur) var(--gcp-ease);
}

.pointPageBody #addcomment:hover {
    border-color: color-mix(in srgb, var(--md-ink-3) 45%, var(--md-border)) !important;
}

.pointPageBody .pointCommentPhotoBar {
    margin-top: 8px !important;
}

.pointPageBody .pointPageBodyCommentSend {
    margin-top: 8px !important;
}

.pointPageBody .pointCommentAddBtn {
    border: 1px solid var(--md-border) !important;
    border-radius: var(--md-r-pill) !important;
    background: var(--md-surface) !important;
    color: var(--md-ink-2) !important;
    min-height: 32px;
    transition: border-color var(--gcp-dur) var(--gcp-ease), background-color var(--gcp-dur) var(--gcp-ease), color var(--gcp-dur) var(--gcp-ease);
}

.pointPageBody .pointCommentAddBtn:hover {
    border-color: var(--md-brand) !important;
    background: var(--md-brand-soft) !important;
    color: var(--md-brand) !important;
}

.pointPageBody .pointCommentPhotoItem {
    border-radius: var(--md-r-sm) !important;
    border-color: var(--md-border) !important;
}

.pointPageBody .pointBodyAddonsCommentPhoto {
    border-radius: var(--md-r-sm) !important;
    border-color: var(--md-border) !important;
    transition: transform 180ms var(--gcp-ease);
}

.pointPageBody .pointBodyAddonsCommentPhoto:hover {
    transform: scale(1.02);
}

/* „Odpovědět" je klikací div (ne odkaz v souvislém textu), takže výjimka
   pro vnořené odkazy na něj neplatí a musí mít 24 px na výšku. */
.pointPageBody .pointBodyAddonsCommentReply {
    display: inline-flex !important;
    align-items: center;
    min-height: 24px !important;
    width: auto !important;
    border-radius: var(--md-r-sm);
}

/* Tužka a koš u vlastního komentáře měly 14×20 a 12×20 px — pod hranicí
   24×24 px, kterou žádá WCAG 2.2 (2.5.8 Target Size). Ikona zůstává drobná,
   roste jen klikací plocha kolem ní. */
.pointPageBody .pointBodyAddonsCommentEdit,
.pointPageBody .pointBodyAddonsCommentDelete,
.pointPageBody div[id^="pointBodyAddonsCommentEdit"],
.pointPageBody div[id^="pointBodyAddonsCommentDelete"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 26px !important;
    min-height: 26px !important;
    border-radius: var(--md-r-sm) !important;
    color: var(--md-ink-3) !important;
    transition: background-color var(--gcp-dur) var(--gcp-ease), color var(--gcp-dur) var(--gcp-ease);
}

.pointPageBody .pointBodyAddonsCommentEdit:hover,
.pointPageBody .pointBodyAddonsCommentDelete:hover,
.pointPageBody div[id^="pointBodyAddonsCommentEdit"]:hover,
.pointPageBody div[id^="pointBodyAddonsCommentDelete"]:hover {
    background: var(--md-surface-2) !important;
    color: var(--md-ink) !important;
}

.pointPageBody .pointPageArticleDisableButton {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.pointPageBody .btnDisableCommentPoint {
    min-height: 36px !important;
    font-size: 12.5px !important;
    padding: 6px 12px !important;
}

/* ===========================================================================
   14. ODKAZY
   `a { color: … !important }` z public.css jde přebít jen taky !important.
   =========================================================================== */

.pointPageBody a:not(.btnSet):not(.listEshopItemsCategoryListMenuItem):not(.pointPageNavigateButton),
.pointPageBody .gc-hashtag,
.pointPageBody .gc-mention,
.pointPageBody .pointBodyAddonsCommentReply,
.pointPageBody .pointPageArticleTextTranslate,
.pointPageBody .leaflet-control-attribution a {
    color: var(--md-brand) !important;
}

.pointPageBody .gc-hashtag,
.pointPageBody .gc-mention {
    font-weight: 600;
    text-decoration: none;
}

.pointPageBody .gc-hashtag:hover,
.pointPageBody .gc-mention:hover {
    text-decoration: underline;
}

/* Jméno autora je odkaz, ale vede se jako text — modrá by z něj udělala
   druhý akční prvek hned vedle názvu bodu. */
.pointPageBody .detailPoint-user-details-name a,
.pointPageBody .detailPoint-user-details h2 a,
.pointPageBody .detailPoint-user-details h3 a {
    color: var(--md-ink) !important;
    text-decoration: none !important;
}

.pointPageBody .detailPoint-user-details h2 a:hover,
.pointPageBody .detailPoint-user-details h3 a:hover {
    text-decoration: underline !important;
}

/* ===========================================================================
   15. FOKUS
   Dvojitý prstenec z tokenu na všem, na co se dá doskákat klávesnicí.
   Bílá vnitřní vrstva dělá podložku na tmavém tlačítku, modrá vnější drží
   3:1 proti podkladu (WCAG 1.4.11).
   =========================================================================== */

.pointPageBody a:focus-visible,
.pointPageBody button:focus-visible,
.pointPageBody select:focus-visible,
.pointPageBody textarea:focus-visible,
.pointPageBody input:focus-visible,
.pointPageBody summary:focus-visible,
.pointPageBody [tabindex]:focus-visible,
.pointPageBody [role="button"]:focus-visible,
.pointPageBody label.pointCommentAddBtn:focus-within {
    outline: none !important;
    box-shadow: var(--gc-focus-ring, 0 0 0 2px #fff, 0 0 0 5px #0069d9) !important;
    border-radius: var(--md-r-sm);
    position: relative;
    z-index: 3;
}

.pointPageBody .pointReactionOrb:focus-visible,
.pointPageBody .detailPoint-user-head-avatar:focus-visible {
    border-radius: 50%;
}

.pointPageBody .btnSet:focus-visible,
.pointPageBody .pointFbActionBtn:focus-visible {
    border-radius: var(--md-r);
}

.pointPageBody #addcomment:focus,
.pointPageBody .pointPageBodyCommentInput textarea:focus {
    outline: none !important;
    border-color: var(--md-brand) !important;
    background: var(--md-surface) !important;
    box-shadow: var(--gc-focus-ring, 0 0 0 2px #fff, 0 0 0 5px #0069d9) !important;
}

/* Rozbalovací seznamy a plocha pro nahrání fotek `:focus-visible` v Chromiu
   při programovém fokusu nechytily — u nich se proto prsten věší na `:focus`.
   Změřeno: bez tohohle pravidla neměly ani prsten, ani obrys. */
.pointPageBody #isPublicPointSelect:focus,
.pointPageBody #dialogAddFilt:focus,
.pointPageBody .pointPageAttributesPublicSelect:focus,
.pointPageBody .pointPageAttributesCategorySelect:focus,
.pointPageBody #drop-zone:focus,
.pointPageBody #drop-zone:focus-within,
.pointPageBody .gcEshopSearch:focus,
.pointPageBody .gcEshopSort:focus {
    outline: none !important;
    border-color: var(--md-brand) !important;
    box-shadow: var(--gc-focus-ring, 0 0 0 2px #fff, 0 0 0 5px #0069d9) !important;
}

/* Sdílené `#isPublicPointSelect:focus { background: #fff !important }` je
   zkratka, takže by při fokusu smazala šipku vykreslenou výš. Vracíme ji
   selektorem o třídu silnějším. */
.pointPageBody #isPublicPointSelect:focus,
.pointPageBody #dialogAddFilt:focus,
.pointPageBody #gcJoinModeSelect:focus,
.pointPageBody .pointPageAttributesPublicSelect:focus,
.pointPageBody .pointPageAttributesCategorySelect:focus {
    background-color: var(--md-surface) !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 14px !important;
}

/* ===========================================================================
   16. POHYB
   Všechny přechody jdou přes transform/opacity/barvu, 140–180 ms, jedna
   křivka. Kdo si vypnul animace, dostane stejné stavy bez pohybu.
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .pointPageBody *,
    .pointPageBody *::before,
    .pointPageBody *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .pointPageBody .btnSet:hover,
    .pointPageBody .btnSet:active,
    .pointPageBody .pointFbActionBtn:hover,
    .pointPageBody .pointFbActionBtn:active,
    .pointPageBody .pointReactionOrb:hover,
    .pointPageBody .pointReactionOrb:active,
    .pointPageBody #submitPointChanges:hover,
    .pointPageBody #submitPointChanges:active,
    .pointPageBody .pointPageArticleGaleryItemBig:hover img,
    .pointPageBody .pointPageArticleGaleryItem:hover img,
    .pointPageBody .pointPageActionsBodyItemImg:hover,
    .pointPageBody .pointBodyAddonsCommentPhoto:hover,
    .pointPageBody .detailPoint-user-head-avatar:hover .detailPoint-profile-pic {
        transform: none !important;
    }
}

/* ===========================================================================
   17. ŠIRŠÍ DISPLEJE
   Rozvržení sloupců se nemění (dvousloupec od 769 px je rozhodnutí uživatele).
   Roste jen hero a okap.
   =========================================================================== */

@media (min-width: 769px) {
    .pointPageBody .rowPointDetailLeftRight {
        gap: var(--gcp-section) !important;
        align-items: flex-start;
    }

    .pointPageBody .rowPointDetailLeftPanel > .detailPoint-box,
    .pointPageBody .rowPointDetailLeftPanel > .gc-invite-section,
    .pointPageBody .rowPointDetailRightPanel > .detailPoint-box {
        margin-bottom: var(--gcp-section) !important;
    }

    .pointPageBody .rowPointDetailLeftPanel > .detailPoint-box:last-of-type,
    .pointPageBody .rowPointDetailRightPanel > .detailPoint-box:last-of-type {
        margin-bottom: 0 !important;
    }
}

@media (min-width: 1200px) {
    .pointPageBody {
        --gcp-overlap: 52px;
    }
}

/* ===========================================================================
   18. MOBIL (≤ 768 px)
   Jeden sloupec, pořadí mapa → název → fotky → popis → zbytek.
   Mechanismus `display: contents` + `order` drží point-detail.css; tady se
   na `display` obou panelů ZÁMĚRNĚ nesahá, aby ho tenhle soubor nepřebil.
   =========================================================================== */

@media (max-width: 768px) {
    .pointPageBody {
        --gcp-overlap: 30px;
        --gcp-section: 18px;
    }

    .pointPageBody #pointPageArticleBody > h1.gcPointMasthead {
        padding: 14px 16px;
        border-radius: var(--md-r);
        margin-bottom: 16px;
    }

    .pointPageBody .rowPointDetailLeftRight {
        gap: 16px !important;
        padding-left: var(--gcp-gutter) !important;
        padding-right: var(--gcp-gutter) !important;
    }

    /* Mezery řeší gap kontejneru, karty už si je nepřidávají. */
    .pointPageBody .rowPointDetailLeftPanel > .detailPoint-box,
    .pointPageBody .rowPointDetailRightPanel > .detailPoint-box,
    .pointPageBody .rowPointDetailLeftPanel > .gc-invite-section {
        margin-bottom: 0 !important;
    }

    /* Popis stojí samostatně (je nad kartou autora), takže sešívání neplatí. */
    .pointPageBody .rowPointDetailLeftPanel > .detailPoint-user-info-section:has(+ .detailPoint-description-info-section) {
        margin-bottom: 0 !important;
    }

    /* Dotykové cíle nesmí klesnout pod 44 px. */
    .pointPageBody .btnSet,
    .pointPageBody .pointFbActionBtn,
    .pointPageBody .detailPointDeletePointBtn,
    .pointPageBody .pointCommentAddBtn,
    .pointPageBody .gcEmojiTrigger,
    .pointPageBody .detailPoint-collapse-summary,
    .pointPageBody .pointPageArticleTextContentBoxIcon {
        min-height: 44px !important;
    }

    .pointPageBody .gcEmojiTrigger,
    .pointPageBody .pointPageArticleTextContentBoxIcon {
        min-width: 44px !important;
        width: 44px !important;
        height: 44px !important;
    }

    .pointPageBody .pointReactionOrb {
        width: 44px !important;
        height: 44px !important;
    }

    .pointPageBody .pointPageArticleGaleryItemBodySmallImgs {
        grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)) !important;
    }

    .pointPageBody .pointPageArticleGaleryItemBig img,
    .pointPageBody .pointPageArticleGaleryItemImgBig {
        max-height: clamp(180px, 28vh, 260px) !important;
    }
}

/* Nejužší telefony: řada akcí se smí zalomit, tlačítka zůstávají 44 px. */
@media (max-width: 420px) {
    .pointPageBody .detailPoint-gps-info-section .detailPoint-gps-actions > div {
        flex: 1 1 calc(50% - 4px) !important;
    }
}

/* ===========================================================================
   19. NIC NESMÍ PŘETÉKAT
   Poslední pojistka: nejužší reálný kontejner je levý sloupec (~260 px).
   =========================================================================== */

.pointPageBody .detailPoint-box > *,
.pointPageBody .detailPoint-user-card-body > *,
.pointPageBody .listEshop > * {
    max-width: 100%;
}

.pointPageBody .detailPoint-attributes-info-section,
.pointPageBody .detailPoint-card-settings,
.pointPageBody .pointPageAttributesSet {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ###########################################################################
   ###########################################################################

   PŘEVZATO BEZE ZMĚNY z verze 45 — NABÍDKA A KARTA ZBOŽÍ

   Následující blok se ZÁMĚRNĚ nepřepisoval. Nejsou to estetická rozhodnutí,
   ale změřené opravy skládání karty zboží (poměr fotky, ořez názvu bez
   `-webkit-box`, cena a dostupnost na jedné lince, režim úprav, mřížka,
   šířky popisků ve 48 jazycích). Poslední z nich vznikly 16.–17. 8. 2026
   (commity 557e65e, 83832e8, 7538d77) a přepsat je „nanovo" by znamenalo
   ta měření zahodit.

   Blok odkazuje na --md-* proměnné, které jsou nahoře nově definované jako
   aliasy na --gc-* tokeny — barvy tedy pocházejí z tématu, i když se rozhodnutí
   o rozvržení nemění.

   ###########################################################################
   ########################################################################### */
/* ===========================================================================
   NABÍDKA JAKO E-SHOP
   Přestavba na přání: má vypadat a chovat se jako obchod, ne jako výpis.

   Mřížka karet, fotka v pevném poměru, název a popis pod ní, cena
   a dostupnost v patě a jedno plné tlačítko přes celou šířku karty.
   Filtry jsou pilulky ve vodorovném pásu, hledání a řazení jeden řádek.
   Tlačítka v kartách mají stejnou výšku i v kartách s různě dlouhým názvem.
   =========================================================================== */

/* POZNÁMKA K PŘEVZATÉMU BLOKU: čtyři pravidla pro `.listEshop` a hlavičku
   sekce, která tu stála, přešla do nové soustavy nadpisů a ploch v části 5
   a 8 nahoře (sekce je plochá, nadpis má tvarosloví `.detailPoint-section-label`).
   Zbytek bloku — mřížka, karta zboží, režim úprav — zůstává beze změny. */

/* --- Filtry: pilulky ve vodorovném pásu --------------------------------- */
.pointPageBody .listEshopItemsCategoryListMenu {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.pointPageBody .listEshopItemsCategoryListMenu::-webkit-scrollbar {
    display: none;
}

.pointPageBody .listEshopItemsCategoryListMenuItem {
    flex: 0 0 auto !important;
    max-width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Hledání a řazení --------------------------------------------------- */
.pointPageBody .gcEshopToolbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin: 10px 0 12px !important;
}

.pointPageBody .gcEshopSearch {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.pointPageBody .gcEshopSort {
    flex: 0 1 44% !important;
    min-width: 0 !important;
    max-width: 46%;
}

/* --- Mřížka karet ------------------------------------------------------- */
.pointPageBody .listEshopItemsView {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px !important;
    align-items: stretch;
}

@media (min-width: 640px) {
    .pointPageBody .listEshopItemsView {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* Karta je sloupec: fotka nahoře, text uprostřed, cena a akce dole na jedné
   linii i u karet s různě dlouhým názvem (`margin-top: auto` na patě). */
.pointPageBody .listEshopItem {
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    padding: 0 !important;
    background: var(--md-surface) !important;
    border: 1px solid var(--md-border) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.pointPageBody .listEshopItem:hover {
    border-color: var(--md-brand-line) !important;
    box-shadow: var(--md-shadow) !important;
}

.pointPageBody .listEshopItemImg,
.pointPageBody .listEshopItemImgBody {
    order: 0;
    position: relative;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--md-surface-2);
}

.pointPageBody .listEshopItemImg img,
.pointPageBody .listEshopItemImgBody img {
    display: block;
    width: 100% !important;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0 !important;
    margin: 0 !important;
}

.pointPageBody .listEshopItemNameBody { order: 1; padding: 12px 12px 0 !important; }
.pointPageBody .listEshopItemTextBody { order: 2; padding: 4px 12px 0 !important; }
.pointPageBody .listEshopItemCategory { order: 3; padding: 8px 12px 0 !important; }
.pointPageBody .listEshopItemAttrEditor { order: 4; padding: 8px 12px 0 !important; }
.pointPageBody .listEshopItemTags { order: 5; padding: 6px 12px 0 !important; }
.pointPageBody .listEshopItemPriceBody { order: 6; padding: 10px 12px 0 !important; }
.pointPageBody .listEshopItemState { order: 7; padding: 2px 12px 0 !important; }
.pointPageBody .listEshopItemButttonBody { order: 8; margin-top: auto; padding: 10px 12px 12px !important; }

.pointPageBody .listEshopItemName {
    font-size: 14.5px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--md-ink) !important;
}

.pointPageBody .listEshopItemText {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    color: var(--md-ink-3) !important;
}

.pointPageBody .listEshopItemCategoryName {
    display: inline-block;
    max-width: 100%;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    background: var(--md-brand-soft) !important;
    border: 1px solid var(--md-brand-line) !important;
    color: var(--md-brand) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .02em;
    text-transform: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pointPageBody .listEshopItemPrice,
.pointPageBody .listEshopItemPriceBig {
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: -.02em;
    color: var(--md-ink) !important;
    padding: 0 !important;
}

.pointPageBody .listEshopItemPriceCurrency,
.pointPageBody .listEshopItemPriceBigCurrency {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--md-ink-3) !important;
    padding: 0 !important;
}

/* Dostupnost jako tečka a text, ne jako další odznak. */
.pointPageBody .listEshopItemStateAvailable {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    color: var(--md-ok) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* Tlačítko drží uvnitř karty a text se do něj vejde i v delších jazycích. */
.pointPageBody .listEshopItemButttonBody,
.pointPageBody .listEshopItemButtton {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    float: none !important;
}

.pointPageBody .listEshopItem .btnSet,
.pointPageBody .listEshopItem .btnSetGreen {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 40px;
    padding: 0 10px !important;
    font-size: 13px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: none !important;
}

/* --- Prázdná nabídka ---------------------------------------------------- */
.pointPageBody .listEshopItemAddBody--empty {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pointPageBody .listEshopItemAddInfo {
    flex: 1 1 160px;
    min-width: 0;
    color: var(--md-ink-3) !important;
    font-size: 13px !important;
}

/* ===========================================================================
   PŘETÉKÁNÍ — dohledané příčiny
   Každý řádek níž má konkrétní změřenou příčinu, ne preventivní opatření.
   =========================================================================== */

/* 1. Sbalené nastavení vlastníka bylo 340 px v obalu širokém 312 px. */
.pointPageBody .detailPoint-attributes-info-section,
.pointPageBody .detailPoint-card-settings,
.pointPageBody .pointPageAttributesSet {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 2. Pás filtrů nabídky přesahoval o 10 px přes odsazení sekce. */
.pointPageBody .listEshopItemsCategoryListMenuBody {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden;
}

/* 3. Text komentáře začínal odsazený, ale šířku si nechal původní, takže
      přesahoval o 36 px přes pravou hranu vlákna. */
.pointPageBody .pointBodyAddonsCommentText,
.pointPageBody .pointBodyAddonsCommentTextBody,
.pointPageBody .pointBodyAddonsCommentUserNameBody {
    width: auto !important;
    max-width: 100% !important;
    margin-right: 0 !important;
}

.pointPageBody .pointBodyAddonsComments {
    overflow: hidden;
}

/* 4. Popisky tlačítek se v delších jazycích nevejdou na jeden řádek.
      Zalomení je lepší než ořez — text zůstane celý a tlačítko povyroste.
      Změřeno: „Objednat" potřebuje 78 px, tlačítko v úzké kartě má 75 px;
      v maďarštině nebo řečtině je rozdíl výrazně větší. */
.pointPageBody .listEshopItem .btnSet,
.pointPageBody .listEshopItem .btnSetGreen,
.pointPageBody .detailPoint-gps-actions .btnSet {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    height: auto !important;
    min-height: 40px;
    padding: 8px 10px !important;
    line-height: 1.2 !important;
    text-align: center;
}

/* 5. Karta v mřížce ať není užší, než aby se do ní vešel popisek tlačítka. */
.pointPageBody .listEshopItemsView {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

@media (min-width: 640px) {
    .pointPageBody .listEshopItemsView {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* 6. Poslední pojistka: nic uvnitř stránky nesmí být širší než jeho obal. */
.pointPageBody .listEshopItem > *,
.pointPageBody .detailPoint-box > *,
.pointPageBody .listEshop > * {
    max-width: 100%;
}

/* ===========================================================================
   TEXTY VE VŠECH 48 JAZYCÍCH
   Šířky popisků změřené v reálném písmu (scripts/lang-fit.mjs). Česky je
   všechno nejkratší; „Přidat komentář" má ve filipínštině 178 px místo 117,
   „Zakázat komentáře" ve francouzštině 208 místo 140, „Uložit" v maďarštině
   96 místo 40. Pravidlo je proto všude stejné: text se smí zalomit a prvek
   povyroste — nikdy se neořezává a nikdy nepřeteče.
   =========================================================================== */

.pointPageBody .btnSet,
.pointPageBody .pointFbActionBtn,
.pointPageBody .listEshopItemAdd,
.pointPageBody .btnDisableCommentPoint,
.pointPageBody .btnAddCommentPoint,
.pointPageBody #submitPointChanges,
.pointPageBody .pointCommentAddBtn,
.pointPageBody .listEshopItemImgPlaceholderLabel,
.pointPageBody .pointPageArticlePublicState,
.pointPageBody .listEshopItemAttrEditorTitle,
.pointPageBody .listEshopItemTagsTitle,
.pointPageBody .gcPointHero-edit {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    height: auto !important;
    max-width: 100% !important;
    line-height: 1.2 !important;
    text-align: center;
}

/* Popisky uvnitř řádkových prvků se zarovnávají doleva, ne na střed. */
.pointPageBody .listEshopItemAttrEditorTitle,
.pointPageBody .listEshopItemTagsTitle,
.pointPageBody .listEshopItemImgPlaceholderLabel,
.pointPageBody .pointPageArticlePublicState {
    text-align: left;
}

/* Odznak stavu bodu má v některých jazycích 306 px textu — dva řádky jsou
   v pořádku, ořez ne. */
.pointPageBody .pointPageArticlePublicState {
    display: inline-flex !important;
    align-items: flex-start;
    gap: 6px;
    padding: 5px 10px !important;
}

.pointPageBody .pointPageArticlePublicState-text {
    white-space: normal !important;
}

/* Pilulky filtrů: pás roluje vodorovně, takže se nemusí nic zkracovat. */
.pointPageBody .listEshopItemsCategoryListMenuItem {
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    padding: 0 14px !important;
}

/* Hledání a řazení: v jazycích s dlouhým „Řadit podle" se rozdělí na dva
   řádky, místo aby se text schoval. */
.pointPageBody .gcEshopToolbar {
    flex-wrap: wrap !important;
}

.pointPageBody .gcEshopSearch {
    flex: 1 1 160px !important;
}

.pointPageBody .gcEshopSort {
    flex: 1 1 140px !important;
    max-width: 100% !important;
}

/* Název položky a druh nabídky se taky radši zalomí, než aby zmizely. */
.pointPageBody .listEshopItemCategoryName {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: 100% !important;
}

/* Lišta hodnocení zůstává jedním řádkem, i když popisek „Okomentovat"
   naroste na dva řádky — jen povyroste do výšky. */
.pointPageBody .pointFbActionBtn {
    min-height: 42px;
    padding: 6px 12px !important;
}

/* Popisek „Okomentovat" se na 320 px ořezával na „Okomentov…" — ellipsis
   zůstal z dřívějšího pravidla. Text se má zalomit, ne zmizet. */
.pointPageBody .pointFbActionBtnLabel {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Nejdelší jednotlivé slovo, které se nedá zalomit („Комментировать",
   „Megtakarítás"), musí projít i v nejužší kartě — proto se popisky
   v kartách nabídky smí o půl stupně zmenšit místo ořezu. */
@media (max-width: 380px) {
    .pointPageBody .listEshopItem .btnSet,
    .pointPageBody .listEshopItem .btnSetGreen {
        font-size: 12.5px !important;
        padding: 8px 6px !important;
    }
}

/* Dvě místa, kde je šířku určena obalem a jedno dlouhé slovo by ji přerostlo:
   tlačítko v kartě nabídky (v úzké kartě 72 px, „Zarezerwować" potřebuje 96)
   a „Okomentovat" v liště hodnocení (69 px na 320 px displeji, „Комментировать"
   potřebuje 105). Slovo se rozdělí, takže se nic neztratí ani nepřeteče. */
.pointPageBody .listEshopItem .btnSet,
.pointPageBody .listEshopItem .btnSetGreen,
.pointPageBody .pointFbActionBtn,
.pointPageBody .pointFbActionBtnLabel,
.pointPageBody .listEshopItemsCategoryListMenuItem {
    overflow-wrap: anywhere !important;
    hyphens: auto;
}

/* O deset pixelů širší karta ať k tomu dělení nedochází zbytečně často. */
.pointPageBody .listEshopItemsView {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

@media (min-width: 640px) {
    .pointPageBody .listEshopItemsView {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* ===========================================================================
   KARTA ZBOŽÍ — oprava skládání
   Flexový sloupec vypadal jako správné řešení, jenže `listEshopItemName`,
   `listEshopItemPriceBig`, `listEshopItemPriceBigCurrency` a
   `listEshopItemState` jsou PŘÍMÍ potomci karty, ne obsah obalů `*Body`.
   Ve flexu z každého z nich vznikl vlastní řádek — cena „89" a měna „CZK"
   skončily pod sebou a `order` na obalech na ně vůbec nedosáhl.

   Karta se proto vrací do normálního toku a dvojice, které patří k sobě,
   se skládají inline. Ověřeno souřadnicemi, ne odhadem.
   =========================================================================== */

.pointPageBody .listEshopItem {
    display: block !important;
    padding-bottom: 12px !important;
}

/* Obaly i přímí potomci dostanou stejné odsazení, ať je karta zarovnaná. */
.pointPageBody .listEshopItemNameBody,
.pointPageBody .listEshopItemName,
.pointPageBody .listEshopItemTextBody,
.pointPageBody .listEshopItemText,
.pointPageBody .listEshopItemCategory,
.pointPageBody .listEshopItemCapacity,
.pointPageBody .listEshopItemAttrEditor,
.pointPageBody .listEshopItemTags,
.pointPageBody .listEshopItemPriceBody,
.pointPageBody .listEshopItemState,
.pointPageBody .listEshopItemButttonBody {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.pointPageBody .listEshopItemName {
    padding-top: 12px !important;
    padding-bottom: 0 !important;
}

.pointPageBody .listEshopItemTextBody,
.pointPageBody .listEshopItemText {
    padding-top: 4px !important;
}

.pointPageBody .listEshopItemCategory {
    padding-top: 8px !important;
}

.pointPageBody .listEshopItemButttonBody {
    padding-top: 10px !important;
    padding-bottom: 0 !important;
}

/* Cena, měna, dostupnost a tužky u polí patří na jeden řádek. */
.pointPageBody .listEshopItemPriceBig,
.pointPageBody .listEshopItemPrice,
.pointPageBody .listEshopItemPriceBigCurrency,
.pointPageBody .listEshopItemPriceCurrency,
.pointPageBody .listEshopItemState,
.pointPageBody .listEshopItemStateAvailable,
.pointPageBody .listEshopItemNameEdit,
.pointPageBody .listEshopItemTextEdit,
.pointPageBody .listEshopItemCategoryEdit,
.pointPageBody .listEshopItemPriceEdit,
.pointPageBody .listEshopItemStateEdit,
.pointPageBody .listEshopItemButttonEdit {
    display: inline-flex !important;
    align-items: center;
    vertical-align: middle;
    width: auto !important;
    float: none !important;
}

.pointPageBody .listEshopItemPriceBig,
.pointPageBody .listEshopItemPrice {
    padding-top: 10px !important;
    padding-right: 4px !important;
}

.pointPageBody .listEshopItemPriceBigCurrency,
.pointPageBody .listEshopItemPriceCurrency {
    padding: 10px 8px 0 0 !important;
}

.pointPageBody .listEshopItemState {
    padding-top: 10px !important;
    padding-left: 0 !important;
}

/* Fotka drží celou šířku karty i v normálním toku. */
.pointPageBody .listEshopItemImg,
.pointPageBody .listEshopItemImgBody {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Dvě karty vedle sebe i na 360 px: kontejner nabídky je tam 330 px,
   takže sloupec smí mít nejvýš 158 px (2 × 158 + 10 mezera = 326). */
.pointPageBody .listEshopItemsView {
    grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
}

@media (min-width: 640px) {
    .pointPageBody .listEshopItemsView {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* Kontejner nabídky je na 360 px displeji široký 312 px. Dva sloupce po
   152 px + mezera 10 potřebovaly 314 px — chyběly dva pixely a mřížka
   spadla na jeden sloupec. Základ 144 px a mezera 8 nechá dvě karty vedle
   sebe i tam, a na 320 px displeji taky (kontejner 272, potřeba 296 → jeden
   sloupec, což je na té šířce správně). */
.pointPageBody .listEshopItemsView {
    grid-template-columns: repeat(auto-fill, minmax(144px, 1fr));
    gap: 8px !important;
}

@media (min-width: 640px) {
    .pointPageBody .listEshopItemsView {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 12px !important;
    }
}

/* `overflow-wrap: anywhere` láme i tam, kde by se slovo na další řádek vešlo
   celé — v popisu položky vzniklo „Eti / opie“. Pro souvislý text patří
   `break-word`, který zalomí až slovo, které se samo nevejde. `anywhere`
   zůstává jen popiskům tlačítek v úzkých kartách, kde jiná možnost není. */
.pointPageBody .pointPageArticleText,
.pointPageBody .pointBodyAddonsCommentText,
.pointPageBody .listEshopItemName,
.pointPageBody .listEshopItemText,
.pointPageBody .detailPoint-user-details-name,
.pointPageBody .pointBodyAddonsCommentUserName,
.pointPageBody .listEshopItemCategoryName {
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none;
}

/* ===========================================================================
   POSLEDNÍ DVĚ VADY V KARTĚ ZBOŽÍ
   =========================================================================== */

/* 1. Inline se skládá JEN cena a měna. Když se to samé dalo dostupnosti,
      u položky bez popisu (rezervace) se údaje zamotaly mezi název a štítek
      — „0" skončilo vedle názvu a „CZK" o dva řádky níž. Ostatní pole
      zůstávají řádkem, což je předvídatelné napříč všemi druhy položek. */
.pointPageBody .listEshopItemState,
.pointPageBody .listEshopItemCategory,
.pointPageBody .listEshopItemName {
    display: block !important;
    width: auto !important;
}

.pointPageBody .listEshopItemPriceBig,
.pointPageBody .listEshopItemPrice,
.pointPageBody .listEshopItemPriceBigCurrency,
.pointPageBody .listEshopItemPriceCurrency {
    display: inline-block !important;
    vertical-align: baseline;
}

.pointPageBody .listEshopItemStateAvailable {
    display: inline-flex !important;
}

/* Tužky u polí zůstávají inline, ale nesmí se vecpat mezi cizí řádky. */
.pointPageBody .listEshopItemNameEdit,
.pointPageBody .listEshopItemTextEdit,
.pointPageBody .listEshopItemCategoryEdit,
.pointPageBody .listEshopItemPriceEdit,
.pointPageBody .listEshopItemStateEdit,
.pointPageBody .listEshopItemButttonEdit {
    display: inline-flex !important;
    vertical-align: middle;
}

/* 2. `hyphens: auto` rozdělovalo popisky tlačítek („Rezervo-vat"), i když se
      slovo do tlačítka vešlo. Dělení zůstává jen jako poslední možnost přes
      `overflow-wrap`, bez spojovníku. */
.pointPageBody .listEshopItem .btnSet,
.pointPageBody .listEshopItem .btnSetGreen,
.pointPageBody .pointFbActionBtn,
.pointPageBody .pointFbActionBtnLabel,
.pointPageBody .listEshopItemsCategoryListMenuItem {
    hyphens: none !important;
}

/* ===========================================================================
   PŘÍČINA ROZHÁZENÉ KARTY: legacy `float: left`
   Změřeno: `listEshopItemName`, `listEshopItemTextBody`,
   `listEshopItemCategory`, `listEshopItemAttrEditor` a `listEshopItemTags`
   mají ze starých stylů `float: left`. Cena („89") je inline-block bez
   floatu, takže ji obtékání vytáhlo nahoru vedle názvu, zatímco měna
   („CZK") zůstala o 250 px níž. Odsud ta rozsypaná karta.

   Karta je dnes položkou mřížky, kde obtékání nemá co dělat.
   =========================================================================== */

.pointPageBody .listEshopItem > *:not(.listEshopItemDelete):not(.listEshopItemImgEdit) {
    float: none !important;
}

/* Cena a měna zůstávají na jednom řádku, ostatní pole mají řádek vlastní. */
.pointPageBody .listEshopItemPriceBig,
.pointPageBody .listEshopItemPrice {
    display: inline-block !important;
    padding-right: 4px !important;
}

.pointPageBody .listEshopItemPriceBigCurrency,
.pointPageBody .listEshopItemPriceCurrency {
    display: inline-block !important;
    padding: 0 6px 0 0 !important;
}

/* „Rezervovat" se v úzké kartě lámalo na „Rezervova / t“. Slovo potřebuje
   96 px, tlačítko mělo po odsazení 88 — místo dělení slova mu ho radši
   přidáme. Dělení zůstává pojistkou pro delší slova v jiných jazycích. */
@media (max-width: 640px) {
    .pointPageBody .listEshopItemButttonBody {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .pointPageBody .listEshopItem .btnSet,
    .pointPageBody .listEshopItem .btnSetGreen {
        padding: 8px 4px !important;
    }
}

/* Fotka položky měla `2px dashed` rámeček ze stylů nahrávací zóny — u hotové
   fotky nemá co dělat. Přerušovaná čára zůstává jen skutečné dropzóně
   (`.upload-button`), kde něco znamená. */
.pointPageBody .listEshopItemImg,
.pointPageBody .listEshopItemImgBody {
    border: 0 !important;
    outline: none !important;
}

/* Uvnitř komentáře žádné vnitřní rámečky — vlákno dělí jen vlasová linka
   mezi jednotlivými komentáři. */
.pointPageBody .pointBodyAddonsComments *,
.pointPageBody .pointBodyAddonsCommentReplies,
.pointPageBody .pointBodyAddonsCommentTextBody,
.pointPageBody .pointBodyAddonsCommentText {
    border: 0 !important;
    box-shadow: none !important;
}

.pointPageBody .pointBodyAddonsComments {
    border-bottom: 1px solid var(--md-border-2) !important;
}

.pointPageBody .pointBodyAddonsComments:last-child {
    border-bottom: 0 !important;
}

/* ===========================================================================
   KDO DAL PALEC — číslo jako ovládací prvek + dialog se seznamem
   =========================================================================== */

.pointPageBody .pointReactionCount.is-clickable {
    cursor: pointer;
    border-radius: 6px;
    padding: 2px 4px;
    margin: 0 -2px;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    text-decoration-color: var(--md-ink-3);
}

.pointPageBody .pointReactionCount.is-clickable:hover {
    background: var(--md-surface-2);
    color: var(--md-brand) !important;
    text-decoration-color: var(--md-brand);
}

.gcLikesDialog {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.gcLikesDialog[hidden] {
    display: none;
}

.gcLikesDialog__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .45);
}

.gcLikesDialog__panel {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: 78vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 30px rgba(15, 23, 42, .25);
    overflow: hidden;
}

@media (min-width: 640px) {
    .gcLikesDialog {
        align-items: center;
    }

    .gcLikesDialog__panel {
        border-radius: 18px;
        max-height: 70vh;
    }
}

.gcLikesDialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #eef2f7;
}

.gcLikesDialog__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}

.gcLikesDialog__close {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: #f8fafc;
    color: #334155;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.gcLikesDialog__close:hover {
    background: #eef2f7;
}

.gcLikesDialog__body {
    overflow-y: auto;
    padding: 6px 8px 12px;
    -webkit-overflow-scrolling: touch;
}

.gcLikesList {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gcLikesList__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 10px;
    color: #0f172a !important;
    text-decoration: none;
}

.gcLikesList__link:hover {
    background: #f8fafc;
}

.gcLikesList__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.gcLikesList__name {
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: break-word;
    min-width: 0;
}

.gcLikesList__empty {
    margin: 0;
    padding: 18px 10px;
    text-align: center;
    color: #64748b;
    font-size: 13px;
}

/* Pod otevřeným dialogem se stránka nemá rolovat. */
html.gc-likes-open,
html.gc-likes-open body {
    overflow: hidden;
}

/* ===========================================================================
   NABÍDKA NA DETAILU BODU — rozvržení mřížky a řádků karty (2026-08-09)

   Změřeno na /point (vlastník, 1280 px, sekce v plné šířce pod oběma sloupci):

     kontejner sekce  1265 px
     mřížka           grid-template-columns: 200.83px × 6  (auto-fill, min 200)
     karta            200.83 px  → dvě položky obsadily 414 px z 1265,
                                   zbylých 851 px zůstalo prázdných
     .listEshop       padding-left 0  → hlavička, filtr i první karta na x = 0
     .listEshopItemName      max-width calc(100% - 44px), display: block
     .listEshopItemNameEdit  (tužka) na dalším řádku, y +36 px pod polem
     .listEshopItemPriceBig  odsazení zleva 1 px (na rámečku karty)

   PŘÍČINY (tři, ne jedna):

   1) `repeat(auto-fill, …)` drží prázdné sloupce naživu. Se dvěma položkami
      vzniknou čtyři prázdné stopy vpravo — odtud „prázdná plocha". Základ
      200 px navíc pochází z doby, kdy se laděla mřížka na 360px displeji;
      na 1265 px kontejneru je karta zbytečně úzká a všechno se v ní láme.
      → `auto-fit` prázdné stopy sbalí a zbylé se roztáhnou; strop stopy
        (400 / 480 px) zabrání tomu, aby se jediná karta roztáhla přes celou
        šířku sekce.

   2) `.listEshopItem > .clear { display: none !important }` (publicredesign.css
      ř. 5165). Prázdné `<div class="clear">` mezi skupinami polí byly za časů
      `float: left` jen šum, takže se skryly. Jenže karta dnes floaty nemá
      (`float: none !important` výš v tomhle souboru) a bez těch předělů nemá
      řádek karty žádnou hranici — pole a tužky se skládají do jednoho
      inline toku. Předěly se proto vracejí jako nulově vysoké bloky.

   3) Pole si od publicredesign.css nesou `width/max-width: calc(100% - 44px)`
      — 44 px je místo vyhrazené tužce. Tužka je `inline-flex`, ale
      `.listEshopItemName`, `.listEshopItemState` a `.listEshopItemButttonBody`
      jsou `display: block`, takže tužku odsunou na další řádek A ZÁROVEŇ jí
      drží prázdných 44 px. U popisu, kategorie a ceny (ty inline jsou) tužka
      vedle pole sedí správně — proto byly „rozházené" jen tři ze sedmi.
      → dvojice pole+tužka se dává na jeden řádek tím, že se pole udělá
        inline-level; šířka calc(100% - 44px) pak sama zaručí, že se na řádek
        nevejde nic dalšího než ta tužka.

   Kredity se tady neřeší — sekce je čistě vizuální vrstva.
   =========================================================================== */

/* --- 1. Sekce nesmí sedět na okraji stránky ------------------------------
   Ostatní bloky detailu (karta autora, komentáře, text bodu) mají odsazení
   ~15 px; nabídka jediná začínala na x = 0, takže hlavička „NABÍDKA", pole
   „Hledat" i levý sloupec karet vypadaly useknuté. Na mobilu se stejné
   odsazení dosud dávalo jen mřížce (publicredesign.css ř. 6063) — přesouvá
   se na celou sekci, ať ho má i hlavička a filtr. Šířka mřížky na 360px
   displeji zůstává 344 px, tedy dvě karty vedle sebe jako dosud. */
.pointPageBody .listEshop {
    box-sizing: border-box;
    /* `!important` je nutné: ř. 2426 výš má `padding: 0 !important`. */
    padding-left: 8px !important;
    padding-right: 8px !important;
}

@media screen and (max-width: 767px) {
    .pointPageBody .listEshopItemsViewBody {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (min-width: 768px) {
    .pointPageBody .listEshop {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* --- 2. Mřížka karet -----------------------------------------------------
   Zalamovaný flex místo gridu. Grid to neumí: potřebujeme, aby se dvě karty
   ve zbylém místě roztáhly (jinak zůstane prázdná stopa), ale aby jedna
   karta nebyla přes celou sekci. `repeat(auto-fit, minmax(260px, 480px))`
   zní jako odpověď, jenže počet opakování se podle specifikace počítá z
   MAXIMA, když je definitní — změřeno: v pravém panelu (841 px) z toho
   vyšla jediná stopa 480 px a dvě karty se postavily pod sebe.

   `flex: 1 1 <základ>` + `max-width` dělá obojí správně:
     základ 260 px určuje, kolik karet se vedle sebe vejde,
     `flex-grow` zbytek řádku rozdělí mezi ně,
     `max-width` zastaví růst na šířce běžné karty.

   Změřeno po úpravě (šířka mřížky → karty):
     1233 px, 2 položky → 2 × 480      (dřív 2 × 200 a 4 prázdné stopy)
      841 px, 2 položky → 2 × 414,5    (dřív 1 sloupec, karty pod sebou)
      721 px, 2 položky → 2 × 354,5
      344 px, 2 položky → 2 × 168      (beze změny, mobil zůstává 2 vedle sebe)

   `justify-content: flex-start` drží levý okraj karet v jedné svislici
   s hlavičkou sekce a polem „Hledat" — publicredesign.css jinak centruje. */
.pointPageBody .listEshopItemsView {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 8px !important;
}

/* Prázdný `<div class="clear">` na konci seznamu by jako flex položka ukrojil
   jednu mezeru navíc. Ve flexu nemá co dělat. */
.pointPageBody .listEshopItemsView > .clear {
    display: none !important;
}

.pointPageBody .listEshopItemsView > .listEshopItem {
    flex: 1 1 144px !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

@media (min-width: 640px) {
    .pointPageBody .listEshopItemsView {
        gap: 12px !important;
    }

    .pointPageBody .listEshopItemsView > .listEshopItem {
        flex: 1 1 220px !important;
        max-width: 400px !important;
    }
}

@media (min-width: 1024px) {
    .pointPageBody .listEshopItemsView > .listEshopItem {
        flex: 1 1 260px !important;
        max-width: 480px !important;
    }
}

/* --- 3. Předěly řádků uvnitř karty --------------------------------------
   Nulová výška, žádný vizuální dopad — jen hranice mezi skupinami polí,
   aby se sousední řádky nemohly slít do jednoho inline toku. */
.pointPageBody .listEshopItem > .clear {
    display: block !important;
    width: 100% !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    clear: both;
}

/* --- 4. `display: none` z JavaScriptu musí platit -----------------------
   Nutná pojistka, ne kosmetika. Nabídka přepíná stavy VÝHRADNĚ přes
   `element.style.display` (jQuery `.hide()/.show()` v point.phtml u tužek,
   `el.style.display = 'none'` v js/gosscard-eshop-filter.js:99 u filtru),
   jenže tenhle soubor dává kartě i jejím polím `display: … !important`
   (ř. 1160, 1707, 2216, 2240) — a `!important` ze stylopisu přebije inline
   styl. Změřeno na živé stránce PŘED touto opravou:

       card.style.display = 'none'  → getComputedStyle = 'block'
       name.style.display = 'none'  → getComputedStyle = 'inline-flex'

   Hledání tedy nedokázalo skrýt kartu a klik na tužku nedokázal schovat
   text ani sebe (zůstala vidět tužka i fajfka zároveň). Pravidlo níž vrací
   inline `display: none` platnost a je zároveň podmínkou toho, aby se
   editační pole v bodu 5 směla stylovat s `!important`. */
.pointPageBody .listEshop .listEshopItemsView [style*="display: none"],
.pointPageBody .listEshop .listEshopItemsView [style*="display:none"],
.pointPageBody .listEshop [style*="display: none"],
.pointPageBody .listEshop [style*="display:none"] {
    display: none !important;
}

/* --- 5. Pole a jeho tužka na jednom řádku -------------------------------
   Vyjmenované prvky jsou zobrazovací i editační varianty polí, u kterých
   tužka (resp. fajfka „uložit") padala pod pole. Šířka calc(100% - 44px)
   je ta samá, kterou pole už mají — jen se konečně využije: 44 px vpravo
   zbude přesně na 36px tužku a 8px mezeru. */
.pointPageBody .listEshopItemName,
.pointPageBody .listEshopItemState,
.pointPageBody .listEshopItemButttonBody {
    display: inline-flex !important;
    vertical-align: middle;
    box-sizing: border-box !important;
    width: calc(100% - 44px) !important;
    max-width: calc(100% - 44px) !important;
}

/* Editační varianty téhož (vidí je jen vlastník po kliknutí na tužku).
   `display` se jim smí nastavit AŽ VE CHVÍLI, kdy je JS ukázal: ve výchozím
   stavu je schovává `display: none` z public.css (ř. 9528, 9579, 9629, 9683,
   9735, 10732) — bez atributového selektoru by je `!important` odkrylo
   natrvalo. jQuery `.show()` zapíše inline `display`, takže `[style]` je
   přesně ten okamžik; `.hide()` zapíše `display: none` a přebije to pravidlo
   z bodu 4 (má o třídu vyšší specificitu). */
.pointPageBody .listEshopItemNameSelectEdit[style],
.pointPageBody .listEshopItemTextSelectEdit[style],
.pointPageBody .listEshopItemCategoryNameSelectbox[style],
.pointPageBody .listEshopItemPriceSelectEdit[style],
.pointPageBody .listEshopItemStateSelectEdit[style],
.pointPageBody .listEshopItemButttonSelectEdit[style] {
    display: inline-flex !important;
    /* `wrap`: každý z těchto obalů teď nese i `.listEshopItemFieldLabel`
       (VADA 1, 2026-08-17) PŘED polem. `.listEshopItemPriceSelectEdit` má ale
       TŘI děti (popisek, input s cenou, měna) a cena+měna musí zůstat vedle
       sebe jako dřív — `flex-direction: column` by je rozházelo pod sebe.
       Místo směru se mění jen zalamování: popisek dostane níž
       `flex: 0 0 100%`, což ho vždy vynutí na vlastní řádek (viz stejný trik
       u `.listEshopItem > .clear` o pár set řádků výš); zbytek dětí (pole,
       případně pole+měna) pokračuje v řádku za ním beze změny. */
    flex-wrap: wrap !important;
    vertical-align: middle;
    box-sizing: border-box !important;
    width: calc(100% - 44px) !important;
    max-width: calc(100% - 44px) !important;
    padding-left: 12px !important;
    padding-right: 0 !important;
}

/* Fajfka „uložit" nastupuje na místo tužky, takže musí být inline stejně jako
   ona. Ze stejného důvodu jako výš je gated na `[style]` — publicredesign.css
   ř. 5927 na to upozorňuje výslovně: *EditSave se do sdílených flex pravidel
   dávat nesmí, jinak se ukáže natrvalo. */
.pointPageBody .listEshopItemNameEditSave[style],
.pointPageBody .listEshopItemTextEditSave[style],
.pointPageBody .listEshopItemCategoryEditSave[style],
.pointPageBody .listEshopItemPriceEditSave[style],
.pointPageBody .listEshopItemStateEditSave[style],
.pointPageBody .listEshopItemButttonEditSave[style] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
    padding: 0;
}

/* --- 6. Cena a dostupnost mají mít stejný okraj jako ostatní řádky -------
   `.listEshopItemPriceBody` v šabloně vůbec není (PHP sází `listEshopItemPriceBig`
   rovnou do karty), takže odsazení z bloku „padding-left: 12px" tuhle dvojici
   minulo a číslo ceny leželo na rámečku karty. Dostupnosti odsazení sebral
   pozdější `padding-left: 0 !important`. */
.pointPageBody .listEshopItemPriceBig,
.pointPageBody .listEshopItemPrice {
    margin-left: 12px !important;
}

.pointPageBody .listEshopItemState {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* --- 7. Tužky v jedné svislici u pravého okraje karty --------------------
   Popis a kategorie mají vlastní obal, takže tam stačí flex + `margin-left:
   auto`. Cena obal nemá (viz bod 6), její tužka se proto k pravému okraji
   dostane jediným způsobem, který v inline řádku funguje — plovoucím boxem.
   Vyšší specificita než `float: none !important` z bloku „PŘÍČINA ROZHÁZENÉ
   KARTY" výš; zbytek karty floaty dál nemá a `.clear` z bodu 3 řádek uzavře. */
.pointPageBody .listEshop .listEshopItem .listEshopItemTextBody,
.pointPageBody .listEshop .listEshopItem .listEshopItemCategory {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    /* Bez `height: auto` má řádek kategorie pevných 40 px z legacy stylů a na
       168px kartě (mobil, dvě karty vedle sebe) by z něj tužka vypadla dolů
       přes řádek se štítky. */
    height: auto !important;
    min-height: 40px;
}

.pointPageBody .listEshop .listEshopItem .listEshopItemTextBody {
    align-items: flex-start;
}

/* Štítek kategorie se smí zúžit, aby tužka zůstala na řádku i na 168px kartě
   (mobil). `min-width: 0` je nutné — flex položka se jinak pod obsah
   nesmrskne. Delší název se uvnitř štítku zalomí na dva řádky; řezat ho
   výpustkou by u kategorie „Ubytování a stravování" nebylo k poznání. */
.pointPageBody .listEshop .listEshopItem .listEshopItemCategory > .listEshopItemCategoryName {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
}

.pointPageBody .listEshop .listEshopItem .listEshopItemTextBody > .listEshopItemTextEdit,
.pointPageBody .listEshop .listEshopItem .listEshopItemTextBody > .listEshopItemTextEditSave,
.pointPageBody .listEshop .listEshopItem .listEshopItemCategory > .listEshopItemCategoryEdit,
.pointPageBody .listEshop .listEshopItem .listEshopItemCategory > .listEshopItemCategoryEditSave {
    margin-left: auto !important;
}

.pointPageBody .listEshop .listEshopItem > .listEshopItemPriceEdit,
.pointPageBody .listEshop .listEshopItem > .listEshopItemPriceEditSave {
    float: right !important;
    margin-right: 8px !important;
}

/* ==========================================================================
   KOMPAKTNÍ KARTA NABÍDKY (2026-08-14)

   Karta působila roztaženě ve dvou směrech zároveň a měřitelně:

   ŠÍŘKA — strop 480 px při šířce mřížky 1297 px znamenal dvě karty a 325 px
   prázdna vpravo, u jediné položky dokonce jednu banner-kartu přes půl
   obrazovky. Text uvnitř přitom využil sotva třetinu šířky.

   VÝŠKA — hero fotka měla PEVNÝCH 158 px bez ohledu na šířku karty
   (publicredesign.css:5873–5922), takže na 480px kartě z ní byl pruh 3:1.
   Zbytek karty pak nasčítal ~90 px samotných odsazení: pole měla svislý
   padding 8–12 px A K TOMU vlastní margin 4–8 px, dvakrát to samé.

   Řešení: užší strop (karta vypadá jako produkt, ne jako pruh), fotka jako
   POMĚR místo pevné výšky (drží se šířky karty na všech šířkách) a jednotný
   svislý rytmus 4 / 8 / 12 px. Naměřeno na 1344×900, karta vlastníka:
   480 × 494 px  →  340 × 424 px (plocha −39 %).

   Výšky ovládacích prvků (tužky 34–36 px, tlačítko Objednat 40 px) se tu
   ZÁMĚRNĚ nesnižují — jsou to klikací cíle, ne dekorace (WCAG 2.5.8).
   ========================================================================== */

@media (min-width: 640px) {
    .pointPageBody .listEshopItemsView > .listEshopItem {
        flex: 1 1 200px !important;
        max-width: 320px !important;
    }
}

@media (min-width: 1024px) {
    .pointPageBody .listEshopItemsView > .listEshopItem {
        flex: 1 1 220px !important;
        max-width: 340px !important;
    }
}

/* Hero fotka: poměr místo pevné výšky. `height: auto` musí přebít
   `height: 158px !important` z publicredesign.css (ten soubor se načítá dřív,
   takže tady stačí stejná síla). Placeholder „Nahrajte obrázek" jede na stejném
   poměru, jinak by karta po nahrání fotky poskočila. */
.pointPageBody .listEshopItem .listEshopItemImg img,
.pointPageBody .listEshopItem .listEshopItemImgBody img,
.pointPageBody .listEshopItem .listEshopItemImgPlaceholder {
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover;
}

.pointPageBody .listEshopItem .listEshopItemImg {
    margin: 0 0 8px !important;
}

/* Svislý rytmus: každý řádek má odsazení JEN v paddingu, margin dorovnává
   mezeru mezi skupinami. Vodorovných 12 px se nedotýkáme — drží svislici
   s názvem sekce. */
.pointPageBody .listEshop .listEshopItem .listEshopItemName {
    padding: 4px 12px 0 !important;
    margin: 0 0 2px 4px !important;
}

.pointPageBody .listEshop .listEshopItem .listEshopItemTextBody {
    padding: 2px 12px 0 !important;
    min-height: 32px;
}

.pointPageBody .listEshop .listEshopItem .listEshopItemText {
    padding: 0 !important;
    margin: 0 0 2px 4px !important;
}

.pointPageBody .listEshop .listEshopItem .listEshopItemCategory {
    padding: 4px 12px 0 !important;
    margin: 0 0 2px !important;
    min-height: 32px;
}

.pointPageBody .listEshop .listEshopItem .listEshopItemTags {
    padding: 4px 12px 0 !important;
    margin: 2px 0 0 !important;
}

.pointPageBody .listEshop .listEshopItem .listEshopItemPriceBig {
    padding: 4px 4px 0 0 !important;
    margin: 2px 6px 0 12px !important;
}

.pointPageBody .listEshop .listEshopItem .listEshopItemState {
    padding: 4px 12px 0 !important;
}

.pointPageBody .listEshop .listEshopItem .listEshopItemButttonBody {
    padding: 8px 12px 0 !important;
}

.pointPageBody .listEshop .listEshopItem {
    padding-bottom: 10px !important;
}

/* ===========================================================================
   KARTA ZBOŽÍ: jedna tužka místo osmi
   Změřeno na mobilu (375 px): karta 176 px široká, 445 px vysoká a v ní osm
   samostatných tužek, každá na vlastním řádku — u názvu, popisu, kategorie,
   ceny, dostupnosti, typu tlačítka, fotky a atributů. Vlastník tak viděl
   hlavně ovládání, kupující nic z toho vidět nemá.

   Nově je tužka jedna (`.listEshopItemEditToggle`) a přepíná celou kartu do
   režimu úprav (`.is-editing`). Původní obsluhy polí zůstaly — jen se volají
   hromadně z point.phtml, takže ukládání se nemění.
   =========================================================================== */

.pointPageBody .listEshopItemEditToggle {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    z-index: 3 !important;
    width: 30px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    cursor: pointer !important;
}

/* Karta je kotva pro tužku v rohu (koš už na absolutní pozici počítá). */
.pointPageBody .listEshopItem {
    position: relative !important;
}

/* Jednotlivé tužky a fajfky u polí jsou pryč — nahradila je ta jedna nahoře.
   Varianty s `[style]` tu nejsou navíc: pravidla o pár stovek řádků výš cílí
   přesně na ně (fajfka nastupovala na místo tužky, jakmile jQuery `.show()`
   nastavil inline styl) a mají vyšší specificitu, takže by samotné
   dvoutřídní skrytí přebily a fajfky by v úpravách zůstaly svítit. */
.pointPageBody .listEshopItemNameEdit,
.pointPageBody .listEshopItemNameEdit[style],
.pointPageBody .listEshopItemNameEditSave,
.pointPageBody .listEshopItemNameEditSave[style],
.pointPageBody .listEshopItemTextEdit,
.pointPageBody .listEshopItemTextEdit[style],
.pointPageBody .listEshopItemTextEditSave,
.pointPageBody .listEshopItemTextEditSave[style],
.pointPageBody .listEshopItemCategoryEdit,
.pointPageBody .listEshopItemCategoryEdit[style],
.pointPageBody .listEshopItemCategoryEditSave,
.pointPageBody .listEshopItemCategoryEditSave[style],
.pointPageBody .listEshopItemPriceEdit,
.pointPageBody .listEshopItemPriceEdit[style],
.pointPageBody .listEshopItemPriceEditSave,
.pointPageBody .listEshopItemPriceEditSave[style],
.pointPageBody .listEshopItemStateEdit,
.pointPageBody .listEshopItemStateEdit[style],
.pointPageBody .listEshopItemStateEditSave,
.pointPageBody .listEshopItemStateEditSave[style],
.pointPageBody .listEshopItemButttonEdit,
.pointPageBody .listEshopItemButttonEdit[style],
.pointPageBody .listEshopItemButttonEditSave,
.pointPageBody .listEshopItemButttonEditSave[style] {
    display: none !important;
}

/* Fotka, atributy a štítky se nabízejí k úpravě až v režimu úprav. */
.pointPageBody .listEshopItemImgEdit,
.pointPageBody .listEshopItemAttrEditor,
.pointPageBody .listEshopItemTags,
.pointPageBody .listEshopItemEditActions {
    display: none !important;
}

/* ===========================================================================
   KARTA ZBOŽÍ: pevná šířka místo roztahování na celý řádek
   Zalamovaný flex výš (bod 2) dával kartám `flex-grow: 1`, aby po řádku
   nezůstala prázdná stopa. U dvou položek z toho ale vyšly karty 320 px
   (v širokém panelu až 480 px) a většinu jejich plochy zabral prázdný
   rámeček na fotku — uživatel to popsal jako „položka je moc široká".

   Katalogy druhého sortimentu (Vinted, eBay) drží kartu v konstantní šířce
   a volné místo nechají vpravo: rozhoduje čitelnost mřížky, ne zaplnění
   řádku. Karta proto přestává růst a zastaví se na šířce, kde fotka 4:3
   ještě nevytlačí text pod přehyb.

   Změřeno po úpravě (šířka mřížky, 2 položky → karty):
     1233 px → 2 × 280   (dřív 2 × 480)
      729 px → 2 × 260   (dřív 2 × 320)
      375 px → 2 × 168   (beze změny, mobil zůstává dvousloupcový)
   =========================================================================== */
@media (min-width: 640px) {
    .pointPageBody .listEshopItemsView > .listEshopItem {
        flex: 0 1 240px !important;
        max-width: 260px !important;
    }
}

@media (min-width: 1024px) {
    .pointPageBody .listEshopItemsView > .listEshopItem {
        flex: 0 1 260px !important;
        max-width: 280px !important;
    }
}

/* Vnitřní odsazení karty bylo 20 px na všech stranách. Na 260px kartě to je
   16 % šířky jen na okraje; 14 px dá textu o 12 px víc a řádky se přestanou
   lámat uprostřed názvu. */
.pointPageBody .listEshopItem {
    padding: 14px !important;
}

/* ===========================================================================
   KARTA ZBOŽÍ — KOMPLETNÍ PŘEDĚLÁNÍ (2026-08-17)

   Zadání: „design není nic moc, položka je moc široká, kompletně to předělej."
   Měřeno na /point/3735307c7c3235 (vlastník = uživatel 25), Chromium,
   šířky 375 / 768 / 1280 px. Čísla PŘED:

     šířka   karta (kupující)   fotoblok   ovládacích   karta v úpravách
      375    175,5 × 458,8 px    140 px        6            1 924,8 px
      768    240   × 458,8 px    140 px        6            1 607,4 px
     1280    260   × 418,9 px    140 px        6            1 579,7 px

   Čtyři měřitelné vady, ne dojmy:

   1) FANTOMOVÝ SLOUPEC 44 px. „Bod 5" výš dává názvu, dostupnosti a tlačítku
      width: calc(100% - 44px) — místo pro tužku u pole. Jenže per-pole tužky
      jsou od přechodu na jedinou tužku display: none a KUPUJÍCÍ je neměl
      nikdy. Změřeno na 1280: karta 260 px, obsah 232 px, název 186 px.
      Na mobilu zbylo na název 103,5 px ze 175,5px karty — 41 % šířky karty
      se nepoužívá a název se láme do tří řádků. Karta tedy nebyla moc
      široká; byla moc PRÁZDNÁ, což je totéž nepohodlí (Gestalt: proximita —
      text nedrží pohromadě s plochou, na které leží).

   2) FOTOBLOK MĚL PEVNÝCH 140 px (public.css:3913 min-height) bez ohledu na
      obsah. Fotka je přitom poměrová (16/9): na 375 px vyšla 83 px, takže
      i karta S FOTKOU nesla ~57 px prázdné šedi. Placeholder byl na tom
      stejně — 81,8 px obsahu ve 140px rámu. Katalog vypadal prázdně přesně
      tak, jak to majitel popsal.

   3) SEDM ŘÁDKŮ POD SEBOU. Cena (32 px), dostupnost (40,8 px) a tlačítko
      (48 px) měly každé vlastní řádek. Cena — jediný údaj, podle kterého se
      v katalogu rozhoduje — byla šestá v pořadí a sotva větší než popis.
      Zbytečné zastávky oka tam, kde stačí dvě.

   4) ÚPRAVY = FORMULÁŘ VYSYPANÝ DO KARTY. 1 924,8 px výšky a 53 viditelných
      ovládacích prvků ve 175,5px sloupci (poměr 1 : 11). Z toho 1 189,1 px
      (62 %) je editor „Volby při objednávce": 25 předvoleb (velikost, barva,
      stav) skládaných po jedné pod sebe, protože sloupec má 148 px obsahu.
      NNG #8 (estetický a minimalistický design) i #6 (rozpoznat místo
      vybavovat) padají naráz — vlastník nevidí, co vlastně edituje.
      Navíc dvě modrá tlačítka „Uložit" UPROSTŘED karty (atributy, štítky),
      která patičkové „Uložit" neukládalo — dva různé významy téhož slova
      na jedné ploše (NNG #4, konzistence a standardy).

   ŘEŠENÍ

   Karta se vrací do zalamovaného flexu a .clear v šabloně — které tam
   odjakživa jsou — se konečně použijí k tomu, k čemu se jmenují: jako ZLOMY
   ŘÁDKŮ. Tím odpadá důvod, proč byla karta display: block (cena a měna jsou
   přímí potomci a musely zůstat vedle sebe — ve flexu s flex-wrap zůstanou,
   protože mezi nimi žádný .clear není).

   Kupující: fotka na celou šířku (bez okrajů — je to produkt, ne pole
   formuláře), název na 2 řádky, popis na 2 řádky, kategorie jako drobný
   štítek, CENA A DOSTUPNOST NA JEDNÉ LINCE (cena vlevo velká, dostupnost
   vpravo jako tečkový štítek) a tlačítko přes celou šířku.

   Vlastník: karta v úpravách přestane být kartou v mřížce a roztáhne se na
   celou šířku řádku. Předvolby atributů tak tečou vodorovně místo po jedné
   pod sebe — to je celý ten 1 189px rozdíl. Pořadí v DOM se NEMĚNÍ (žádné
   order), takže sled pro odečítač i tabulátor zůstává (WCAG 1.3.2).

   Klikací cíle zůstávají >= 34 px (WCAG 2.5.8) — zmenšuje se prázdno,
   ne ovládání.
   =========================================================================== */

/* --- 1. Karta = zalamovaný flex, .clear jsou zlomy řádků -----------------

   Specificita schválně JEN (0,3,0): pojistka „display: none z JavaScriptu
   musí platit" (bod 4 výš) má (0,4,0) a musí dál vyhrát, jinak by hledání
   v nabídce přestalo karty skrývat. Ověřeno měřením po úpravě. */
.pointPageBody .listEshop .listEshopItem {
    display: flex !important;
    /* `flex-direction: row` NENÍ nadbytečné: blok „Mřížka karet" (ř. 1714) dává
       kartě `flex-direction: column`. S ním by byla hlavní osa svislá,
       `flex-basis: 100 %` u řádků by znamenalo 100 % VÝŠKY a karta by se
       zalomila do sloupců vedle sebe — změřeno, řádky skončily na x 17…3998
       místo pod sebou. */
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    align-items: center !important;
    /* Fotka jde na krev, text má vlastní vodorovné odsazení. */
    padding: 0 0 12px !important;
    overflow: hidden !important;
    border-radius: var(--md-r) !important;
    /* publicredesign.css:5790 centruje text na kartě kupujícího
       (`:not(:has(.listEshopItemDelete))`), zatímco karta vlastníka zůstává
       vlevo. Stejná karta by pak vypadala jinak podle toho, kdo se dívá.
       Katalog čte oko po levé svislici — zarovnání je vlevo pro oba. */
    text-align: left !important;
}

.pointPageBody .listEshop .listEshopItem .listEshopItemName,
.pointPageBody .listEshop .listEshopItem .listEshopItemText,
.pointPageBody .listEshop .listEshopItem .listEshopItemTextBody,
.pointPageBody .listEshop .listEshopItem .listEshopItemCategory {
    text-align: left !important;
    justify-content: flex-start !important;
}

/* Legacy `order` (ř. 1752–1759) byl roky mrtvý — psal se pro flexovou kartu,
   která se mezitím vrátila na `display: block`, kde `order` nedělá nic.
   Jakmile je karta zase flex, ožil: cena (bez `order`, tedy 0) se vyhoupla
   NAD popis (`order: 2`) a karta se četla „název → cena → popis".
   Změřeno: cena y = 1 398 px, popis y = 1 430 px, potvrzeno snímkem.

   Pořadí v šabloně už je to správné, takže se `order` plošně vypíná.
   Vedlejší efekt je žádoucí: vizuální pořadí = pořadí v DOM = pořadí pro
   odečítač i tabulátor (WCAG 1.3.2 a 2.4.3). */
.pointPageBody .listEshop .listEshopItem > * {
    order: 0 !important;
}

/* .clear je nulový zlom řádku, ne prvek. flex-basis 100 % ho pošle na
   vlastní linku a všechno za ním začne na nové. */
.pointPageBody .listEshop .listEshopItem > .clear {
    flex: 0 0 100% !important;
    width: 100% !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Prázdný obal v šabloně nemá v mřížce co dělat — jinak si ve flexu
   ukrojí vlastní linku. */
.pointPageBody .listEshop .listEshopItem > .listEshopItemSmallImgs {
    display: none !important;
}

/* Karty se přestanou natahovat na výšku nejvyšší karty v řádku.
   Se `stretch` (bod 2 výš) měla karta bez fotky — která je nově o 79 px
   nižší, protože placeholder se zmenšil — pod tlačítkem „Objednat" 90 px
   prázdna. Prázdno pod akcí vypadá jako chybějící obsah. `flex-start`
   nechá každou kartu vysokou přesně podle obsahu; karty s fotkou zůstávají
   stejně vysoké mezi sebou (fotka má pevný poměr 16/9), takže mřížka
   zůstává srovnaná a nižší je jen to, co má míň obsahu. */
.pointPageBody .listEshop .listEshopItemsView {
    align-items: flex-start !important;
}

/* --- 2. Konec fantomového sloupce 44 px ---------------------------------
   Per-pole tužky jsou display: none (viz blok „jedna tužka místo osmi"),
   takže rezervace místa vpravo nemá komu sloužit. Vrací se 44 px šířky
   na každém řádku karty. */
.pointPageBody .listEshop .listEshopItem .listEshopItemName,
.pointPageBody .listEshop .listEshopItem .listEshopItemTextBody,
.pointPageBody .listEshop .listEshopItem .listEshopItemCategory,
.pointPageBody .listEshop .listEshopItem .listEshopItemButttonBody {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Samotný popis má calc(100% - 44px) z publicredesign.css:5368 ještě jednou,
   uvnitř svého obalu. Na 375px kartě z toho byl text široký 106 px v obalu
   širokém 150 px — změřeno. Obal i text musí mít plnou šířku, jinak se 44 px
   ubere dvakrát. */
.pointPageBody .listEshop .listEshopItem .listEshopItemText {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* --- 3. Fotka na celou šířku karty --------------------------------------
   public.css:3911 stylovalo obal fotky jako přerušovaný „drop zone" rámeček
   s min-height: 140px. Na produktové kartě je to fotka, ne nahrávací pole:
   rámeček pryč, výšku určuje obsah. */
.pointPageBody .listEshop .listEshopItem > .listEshopItemImg {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--md-surface-2) !important;
    overflow: hidden !important;
    float: none !important;
}

.pointPageBody .listEshop .listEshopItem > .listEshopItemImg img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

/* --- 4. MENŠÍ PLACEHOLDER FOTKY -----------------------------------------
   Zadání majitele č. 1. Prázdný rámeček měl stejnou stopu jako fotka
   (16/9 = 81,8 / 118,1 / 129,4 px podle šířky) a v katalogu, kde půlka
   položek fotku nemá, z toho byl dojem prázdné stránky.

   Placeholder ale NENÍ fotka — je to sdělení „fotka chybí". Dostane proto
   nízký pruh pevné výšky (66 px, na mobilu 58 px) a menší ikonu (22 px
   místo 46 px). Karta bez fotky tím zkrátí fotoblok zhruba na polovinu
   a v mřížce přestane soupeřit s kartami, které fotku mají.

   Vlastníkovi zůstává celý pruh klikací (nahrání fotky) i s popiskem —
   klikací cíl 58 px je pořád nad prahem WCAG 2.5.8 (24 px). */
.pointPageBody .listEshop .listEshopItem .listEshopItemImgPlaceholder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: 66px !important;
    min-height: 0 !important;
    max-height: 66px !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--md-surface-2) !important;
    color: #94a3b8 !important;
}

.pointPageBody .listEshop .listEshopItem .listEshopItemImgPlaceholder svg {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    opacity: .85;
}

.pointPageBody .listEshop .listEshopItem .listEshopItemImgPlaceholderLabel {
    font-size: 12px !important;
    line-height: 1.2 !important;
    color: #94a3b8 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Vlastníkův prázdný pruh je zároveň tlačítko — jemná přerušovaná linka to
   řekne, aniž by z pruhu udělala další kartu v kartě. */
.pointPageBody .listEshop .listEshopItem .listEshopItemImgPlaceholder.is-upload {
    border: 1px dashed #dbe3ee !important;
    cursor: pointer !important;
}

.pointPageBody .listEshop .listEshopItem .listEshopItemImgPlaceholder.is-upload:hover {
    border-color: var(--md-brand-line) !important;
    color: var(--md-brand) !important;
}

@media (max-width: 639px) {
    .pointPageBody .listEshop .listEshopItem .listEshopItemImgPlaceholder {
        height: 58px !important;
        max-height: 58px !important;
    }

    .pointPageBody .listEshop .listEshopItem .listEshopItemImgPlaceholderLabel {
        display: none !important;
    }
}

/* --- 5. Text karty: pevný počet řádků ------------------------------------
   Bez ořezu měla každá karta v řádku jinou výšku a tlačítka se rozjela do
   schodů. Dva řádky na název a dva na popis dají mřížce jeden rytmus. */
/* POZOR na `:not([style*="display…"])` u následujících tří pravidel.
   Zobrazovací varianty názvu, popisu a štítku kategorie schovává v režimu
   úprav jQuery inline stylem (`listEshopItemNameEdit` a spol. v point.phtml).
   Pojistka „display: none z JavaScriptu musí platit" má specificitu (0,4,0)
   — přesně jako selektory níž — jenže tenhle blok je v souboru POZDĚJI,
   takže by ji přebil. Změřeno bez té podmínky: v úpravách svítil zároveň
   text názvu i pole s názvem (`display: flow-root` místo `none`).
   Podmínka vrací rozhodnutí zpátky JavaScriptu. */
/* Název: `.listEshopItemName` je PŘÍMÝ potomek karty, a ta je flex. Chrome
   takový flex item „blokifikuje" a `display: -webkit-box` mu tiše přepíše na
   `flow-root` (naměřeno: computed display = flow-root, i když
   `-webkit-line-clamp: 2` se propsalo) — bez `-webkit-box` kontextu clamp nic
   neořeže. Řešení (VADA 2, 2026-08-17, WCAG-nezávislá čitelnost): text se v
   markupu obaluje do vnitřního `<span class="listEshopItemNameText">`
   (pohledy/partials/_pointEshopSection.phtml,
   datafunc/viewItemsByIdCategoryEshopPoint.php, datafunc/addItemEshopPoint.php).
   Ten span NENÍ flex položka — jeho rodič `.listEshopItemName` je díky
   pravidlu níž `display: block` — takže na něm `-webkit-box` platí a
   `-webkit-line-clamp` může uřezávat s výpustkou „…". */
.pointPageBody .listEshop .listEshopItem .listEshopItemName:not([style*="display: none"]):not([style*="display:none"]) {
    display: block !important;
    overflow: hidden !important;
    padding: 0 12px !important;
    margin: 0 0 2px !important;
    min-height: 0 !important;
}

.pointPageBody .listEshop .listEshopItem .listEshopItemNameText {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    /* Fallback pro prohlížeče bez `-webkit-line-clamp` — stejný výpočet
       (2 × line-height), jaký dřív nesl samotný `.listEshopItemName`. */
    max-height: 2.6em !important;
    font-size: 14.5px !important;
    font-weight: 650 !important;
    line-height: 1.3 !important;
    color: var(--md-ink) !important;
}

.pointPageBody .listEshop .listEshopItem .listEshopItemTextBody {
    display: block !important;
    padding: 0 12px !important;
    margin: 0 0 6px !important;
    min-height: 0 !important;
}

/* Popis se ořezává stejně jako název — výškou. `-webkit-line-clamp` se tu
   sice propsal, ale i popis se ukázal být flexovou položkou (computed
   display = flow-root), takže dva řádky vycházely náhodou, ne řízeně.
   2 × 1.45 em je totéž číslo, ale plyne z pravidla, ne ze shody okolností. */
.pointPageBody .listEshop .listEshopItem .listEshopItemText:not([style*="display: none"]):not([style*="display:none"]) {
    display: block !important;
    max-height: 2.9em !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    color: var(--md-ink-3) !important;
}

/* --- 6. Kategorie jako drobný štítek ------------------------------------ */
.pointPageBody .listEshop .listEshopItem .listEshopItemCategory {
    display: block !important;
    padding: 0 12px !important;
    margin: 0 0 8px !important;
    min-height: 0 !important;
    height: auto !important;
}

.pointPageBody .listEshop .listEshopItem .listEshopItemCategoryName:not([style*="display: none"]):not([style*="display:none"]) {
    display: inline-block !important;
    max-width: 100% !important;
    padding: 2px 8px !important;
    border-radius: var(--md-r-pill) !important;
    background: var(--md-surface-2) !important;
    border: 1px solid var(--md-border) !important;
    color: var(--md-ink-3) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* --- 7. Cena a dostupnost na jedné lince --------------------------------
   Zlom řádku mezi měnou a dostupností se ruší, takže trojice cena / měna /
   dostupnost sdílí jednu linku: cena vlevo jako dominanta karty, dostupnost
   odsunutá margin-left: auto k pravému okraji. Obě varianty zlomu
   (kupující končí měnou, vlastník fajfkou u ceny). */
.pointPageBody .listEshop .listEshopItem > .listEshopItemPriceBigCurrency + .clear,
.pointPageBody .listEshop .listEshopItem > .listEshopItemPriceEditSave + .clear {
    display: none !important;
}

.pointPageBody .listEshop .listEshopItem > .listEshopItemPriceBig {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 0 0 12px !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -.02em !important;
    color: var(--md-ink) !important;
}

.pointPageBody .listEshop .listEshopItem > .listEshopItemPriceBigCurrency {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 0 0 4px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    color: var(--md-ink-3) !important;
}

.pointPageBody .listEshop .listEshopItem > .listEshopItemState {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 50% !important;
    min-width: 0 !important;
    margin: 0 12px 0 auto !important;
    padding: 0 !important;
    text-align: right !important;
}

/* Dostupnost je stav, ne věta — tečkový štítek jako v e-shopech.
   Barva NENÍ jediný nosič informace (WCAG 1.4.1): rozlišuje i text. */
.pointPageBody .listEshop .listEshopItem .listEshopItemStateAvailable,
.pointPageBody .listEshop .listEshopItem .listEshopItemStateUnavailable,
.pointPageBody .listEshop .listEshopItem .listEshopItemStateQuery {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.pointPageBody .listEshop .listEshopItem .listEshopItemStateAvailable::before,
.pointPageBody .listEshop .listEshopItem .listEshopItemStateUnavailable::before,
.pointPageBody .listEshop .listEshopItem .listEshopItemStateQuery::before {
    content: "";
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.pointPageBody .listEshop .listEshopItem .listEshopItemStateAvailable {
    color: var(--md-ok) !important;
}

.pointPageBody .listEshop .listEshopItem .listEshopItemStateUnavailable {
    color: var(--md-danger) !important;
}

.pointPageBody .listEshop .listEshopItem .listEshopItemStateQuery {
    color: var(--md-warn) !important;
}

/* --- 8. Tlačítko akce ---------------------------------------------------- */
.pointPageBody .listEshop .listEshopItem > .listEshopItemButttonBody {
    padding: 10px 12px 0 !important;
    margin: 0 !important;
}

.pointPageBody .listEshop .listEshopItem .listEshopItemButtton {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

.pointPageBody .listEshop .listEshopItem .btnEshopItem {
    width: 100% !important;
    min-height: 40px !important;
    border-radius: var(--md-r-sm) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
}

/* --- 9. Koš až v úpravách ------------------------------------------------
   Trvale viditelné tlačítko pro nevratné smazání nad každou položkou je
   past (NNG #5, prevence chyb). Vlastník ho uvidí, až kartu otevře tužkou —
   tedy ve chvíli, kdy s položkou opravdu pracuje. Tužka zůstává vždy. */
.pointPageBody .listEshop .listEshopItem > .listEshopItemDelete {
    display: none !important;
}

/* Viditelný popisek nad editačním polem (VADA 1, WCAG 3.3.2 — 2026-08-17).
   Pole (název, popis, kategorie, cena, dostupnost, typ) měla dřív jen
   aria-label — kdo kartu upravuje poprvé, netušil, co které pole je.
   Popisek se renderuje VŽDY uvnitř *SelectEdit obalu, který je mimo režim
   úprav schovaný (viz public.css / listEshopItemEditToggle v point.phtml),
   takže sám žádnou viditelnost neřídí — jen styl, ať v úpravách nesoutěží
   s hodnotou pod sebou (stejný drobný, potlačený vzhled jako titulky
   „Atributy položky"/„Štítky" o pár řádků výš). */
.pointPageBody .listEshop .listEshopItem .listEshopItemFieldLabel {
    display: block !important;
    /* Vynutí vlastní řádek uvnitř rodičovského `inline-flex` obalu (`row` +
       `wrap` výš) — stejný trik jako `.listEshopItem > .clear`. `flex-shrink:
       0` je nutný, jinak by prohlížeč popisek zmenšil, aby se i s dalším
       dítětem (u ceny: pole + měna) vešel do jednoho řádku. */
    flex: 0 0 100% !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    margin: 0 0 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    color: var(--md-ink-3) !important;
}

/* Hlášení o zamítnutí patří přes celou šířku, ne do sloupce s cenou. */
.pointPageBody .listEshop .listEshopItem > .gcEshopRejected {
    flex: 0 0 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 8px 12px 0 !important;
    max-width: calc(100% - 24px) !important;
}

/* ===========================================================================
   OŘEZ NÁZVU A POPISU: `-webkit-box` v téhle kartě nepřežije
   Předchozí pokus obalil text do `.listEshopItemNameText` s `display:
   -webkit-box` a spoléhal na `-webkit-line-clamp`. Změřeno v prohlížeči:
   computed display toho spanu je `flow-root`, a to i u čerstvě vloženého
   prvku s inline `display:-webkit-box` na stejném místě DOMu — Chrome ho
   v tomhle kontextu blokifikuje. Clamp je proto neúčinný a text končil
   uprostřed slova bez náznaku pokračování; totéž platilo pro popis.

   Řešení bez `-webkit-box`:
     název — jeden řádek s pravou výpustkou (`text-overflow: ellipsis`),
             což je chování podporované všude a s viditelnými třemi tečkami,
     popis — dva řádky s postupným zesvětlením posledního řádku (maska),
             takže je vidět, že text pokračuje, aniž by se lámal glyf.
   =========================================================================== */
.pointPageBody .listEshop .listEshopItem .listEshopItemNameText {
    display: block !important;
    max-height: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.pointPageBody .listEshop .listEshopItem .listEshopItemText {
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 60%, rgba(0, 0, 0, .15) 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 60%, rgba(0, 0, 0, .15) 100%);
}

/* ===========================================================================
   NABÍDKA — vodorovné vystředění celé sekce (2026-08-18)
   ---------------------------------------------------------------------------
   Rozhodnutí uživatele: sekce nabídky se má centrovat, jak to jde. Přebíjí
   dřívější volbu `justify-content: flex-start` u pásu filtrů (ř. ~426;
   ten se ale centruje auto okraji, viz níže) a u mřížky karet (ř. ~2658),
   která držela karty na jedné levé svislici s hlavičkou sekce.

   Proč to má viditelný dopad: karta má `max-width: 280px`, takže tři karty
   zaberou ~824 px z 1224 px šířky sekce a zbytek zůstával prázdný vpravo.
   Po vystředění je prázdno rozdělené na obě strany.

   Běžící text uvnitř karty (popis položky) zůstává zarovnaný vlevo —
   centrovaný víceřádkový odstavec se hůř čte, protože každý řádek začíná
   jinde. Centruje se rozvržení sekce, ne sazba textu.
   =========================================================================== */
.pointPageBody .listEshopHeader {
    justify-content: center !important;
    text-align: center !important;
}

/* Pás filtrů se NESMÍ centrovat přes `justify-content: center`. Je to
   vodorovně rolovatelný flex (`overflow-x: auto`, `nowrap`, ř. ~1783)
   a když se pilulky nevejdou, center rozdělí přetečení na obě strany:
   začátek pásu leží na záporné souřadnici, kam se rolováním dostat nejde
   (scrollLeft 0 je minimum). Na mobilu tak mizela pilulka „VŠE" a s ní
   jediná cesta zpět na všechny položky (živý test ZT0926, Pixel 7 i iPhone).

   Auto okraje na první a poslední pilulce dělají totéž co center, jen když
   zbývá volné místo; při přetečení se spočtou na 0 a pás začne na levém
   kraji. `justify-content: safe center` by stačilo taky, ale Safari klíčové
   slovo `safe` ve flexu umí až od 17.6 — starší iPhony by skončily u stejné
   chyby. Logické okraje (inline-start/end) drží vystředění i v RTL jazycích. */
.pointPageBody .listEshopItemsCategoryListMenu {
    justify-content: flex-start !important;
}

.pointPageBody .listEshopItemsCategoryListMenuItem:first-child {
    margin-inline-start: auto !important;
}

.pointPageBody .listEshopItemsCategoryListMenuItem:last-child {
    margin-inline-end: auto !important;
}

.pointPageBody .gcEshopToolbar {
    justify-content: center !important;
}

/* Bez omezení šířky by se `select` roztáhl přes zbytek řádku a dvojice
   „Hledat + Řadit" by opticky visela vlevo, i když je kontejner centrovaný.

   Jen od 640 px: na mobilu má lišta `flex-wrap: wrap`, takže pevné základy
   320 + 240 px se do 366 px široké sekce nevejdou a pole se zalomí pod sebe.
   Užší displej si sizing řeší po svém (viz blok „Hledání a řazení"). */
@media (min-width: 640px) {
    .pointPageBody .gcEshopSearch {
        flex: 0 1 320px !important;
    }

    .pointPageBody .gcEshopSort {
        flex: 0 1 240px !important;
        max-width: 240px !important;
    }
}

.pointPageBody .listEshopItemsView,
.pointPageBody .listEshop .listEshopItemsView {
    justify-content: center !important;
}

/* Karty ve flexu s `flex-grow: 1` by se roztáhly a vystředění by nebylo vidět;
   `flex-grow: 0` je nechá v přirozené šířce a mezera se rozdělí na obě strany.
   Poslední neúplný řádek tak zůstane vystředěný pod plným řádkem. */
.pointPageBody .listEshopItemsView > .listEshopItem {
    flex-grow: 0 !important;
}

/* ===========================================================================
   NABÍDKA — všechny karty stejně vysoké (2026-08-18)
   ---------------------------------------------------------------------------
   Rozhodnutí uživatele. Přebíjí dřívější `align-items: flex-start` (ř. ~3229)
   i zkrácený placeholder na 66 px (ř. ~3302).

   Samotné `stretch` nestačí: karta bez fotky měla fotoblok o ~79 px nižší,
   takže se natáhla na výšku sousedů a pod tlačítkem jí zbylo prázdno.
   Proto placeholder dostává zpět stejný mediální slot jako fotka (16/9) —
   horní hrany textu tak sedí na jedné lince a dorovnávat není co.

   Zbytkový rozdíl (různě dlouhý popis) pohlcuje pata karty, která má
   `margin-top: auto`, takže cena a tlačítko drží na spodní lince.
   =========================================================================== */
.pointPageBody .listEshop .listEshopItemsView,
.pointPageBody .listEshopItemsView {
    align-items: stretch !important;
}

.pointPageBody .listEshop .listEshopItem .listEshopItemImgPlaceholder {
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.pointPageBody .listEshop .listEshopItem .listEshopItemImgPlaceholder svg {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
}

/* ===========================================================================
   BÍLÉ PLOCHY SEKCÍ, VELIKOST KARTY V ÚPRAVÁCH, DECENTNÍ BARVA (2026-08-18)
   ---------------------------------------------------------------------------
   Tři přání uživatele v jednom bloku, protože se navzájem drží:

   1. Sekce mají zase bílé podbarvení. Část 5 nahoře je zploštila na
      `background: transparent` — na světlém podkladu stránky pak sekce
      splývaly a jediná plocha zůstala kartě autora.
   2. Položka nabídky si v režimu úprav drží velikost. Dosud si brala celý
      řádek mřížky (`flex: 1 1 100%`), takže klik na tužku skokem přeskládal
      celou nabídku.
   3. Barva decentně: cena, kategorie a hlavní akce karty přestávají být šedé.
      Pořád platí, že plnou značkovou plochu má jen akce — zbytek jsou jemné
      tinty odvozené z tokenů přes `color-mix`.
   =========================================================================== */

/* --- 1. Bílé plochy sekcí ----------------------------------------------- */
.pointPageBody .rowPointDetailLeftPanel > .detailPoint-box,
.pointPageBody .rowPointDetailRightPanel > .detailPoint-box,
.pointPageBody #pointEshopSection,
.pointPageBody .listEshop {
    background: var(--md-surface) !important;
    border: 1px solid var(--md-border) !important;
    border-radius: var(--md-r-lg) !important;
    box-shadow: var(--md-shadow) !important;
    padding: 14px !important;
    box-sizing: border-box !important;
}

/* Sekce nabídky si nese vlastní vodorovný okap z části 5 — s vlastní plochou
   by se sčítal a obsah by se odsadil dvakrát. */
.pointPageBody #pointEshopSection,
.pointPageBody .listEshop {
    padding-left: 14px !important;
    padding-right: 14px !important;
}

/* Prázdná sekce (bez obsahu) by jako bílý pruh vypadala jako chyba.
   `:empty` nestačí: v šabloně jsou uvnitř odřádkování a mezery, takže div
   s bílým místem `:empty` NENÍ. `:not(:has(*))` se ptá na to, o co tu jde —
   „nemá jediného potomka-element". Jakmile do sekce něco přibude (i AJAXem
   po přidání položky), pravidlo přestane platit samo.

   Nabídka na cizím bodě bez zboží je přesně ten případ: partial
   `_pointEshopSection.phtml` vykreslí obal vždy, ale jeho obsah jen vlastníkovi
   nebo když nějaké zboží existuje. Nahlášeno 19. 8. 2026.

   POZOR: `:not(:has(*))` platí i pro prvek, který má JEN TEXT bez vnořených
   elementů — na `.detailPoint-box` by tedy schoval i kartu s holým textem
   (změřeno). Karty proto zůstávají na `:empty` a širší podmínka je jen na
   sekci nabídky, jejíž obsah jsou vždycky elementy. */
.pointPageBody .rowPointDetailLeftPanel > .detailPoint-box:empty,
.pointPageBody .rowPointDetailRightPanel > .detailPoint-box:empty,
.pointPageBody #pointEshopSection:not(:has(*)) {
    display: none !important;
}

/* Karta autora už plochu měla — jinak by vznikla karta v kartě. Zůstává
   jediná bez vnitřního odsazení, protože si ho řeší `.detailPoint-user-card-body`. */
.pointPageBody .detailPoint-user-info-section {
    padding: 0 !important;
}

/* Základ stopy se musí shodovat s běžnou kartou na každém zlomu, jinak je
   upravovaná karta o 20 px širší než sousedi (hodnoty odpovídají pravidlům
   pro `.listEshopItemsView > .listEshopItem` v převzatém bloku). */
@media (min-width: 640px) {
    .pointPageBody .listEshop .listEshopItemsView > .listEshopItem.is-editing {
        flex-basis: 220px !important;
    }
}

@media (min-width: 1024px) {
    .pointPageBody .listEshop .listEshopItemsView > .listEshopItem.is-editing {
        flex-basis: 260px !important;
    }
}

/* --- 3. Decentní barva v kartě ------------------------------------------ */

/* Cena je nejdůležitější číslo na kartě — dosud černá jako všechno ostatní. */
.pointPageBody .listEshop .listEshopItem .listEshopItemPriceBig {
    color: var(--md-brand-dark) !important;
}

.pointPageBody .listEshop .listEshopItem .listEshopItemPriceBigCurrency {
    color: color-mix(in srgb, var(--md-brand-dark) 55%, var(--md-ink-3)) !important;
}

/* Štítek kategorie: jemná značková tinta místo šedé pilulky. */
.pointPageBody .listEshop .listEshopItem .listEshopItemCategoryName:not([style*="display: none"]):not([style*="display:none"]) {
    background: var(--md-brand-soft) !important;
    border-color: var(--md-brand-line) !important;
    color: var(--md-brand-dark) !important;
}

/* Hlavní akce karty. Plná plocha zůstává vyhrazená akci — teď ji karta má,
   protože „Objednat" je to jediné, co na kartě něco dokončuje. */
.pointPageBody .listEshop .listEshopItem .listEshopItemButttonBody .btnSet,
.pointPageBody .listEshop .listEshopItem .listEshopItemButttonBody button,
.pointPageBody .listEshop .listEshopItem .listEshopItemButttonBody a {
    background: var(--md-brand) !important;
    border-color: var(--md-brand) !important;
    color: #ffffff !important;
}

.pointPageBody .listEshop .listEshopItem .listEshopItemButttonBody .btnSet:hover,
.pointPageBody .listEshop .listEshopItem .listEshopItemButttonBody button:hover,
.pointPageBody .listEshop .listEshopItem .listEshopItemButttonBody a:hover {
    background: var(--md-brand-dark) !important;
    border-color: var(--md-brand-dark) !important;
}

/* Prázdné místo po fotce dostane náznak značky, ať karta bez obrázku
   nevypadá jako rozbitá. */
.pointPageBody .listEshop .listEshopItem .listEshopItemImgPlaceholder {
    background: color-mix(in srgb, var(--md-brand-soft) 60%, var(--md-surface)) !important;
    color: color-mix(in srgb, var(--md-brand-dark) 45%, var(--md-ink-3)) !important;
}

/* Sekce nabídky je sourozenec dvousloupce, ne jeho potomek — bez vlastního
   vodorovného odsazení by její bílá plocha lícovala s okrajem obrazovky,
   zatímco karty sloupců jsou zapuštěné o okap. Na mobilu to bylo vidět
   nejvíc (sekce 375 px od kraje ke kraji vs. karty 351 px se zápustkou). */
.pointPageBody #pointEshopSection,
.pointPageBody .listEshop {
    margin-left: var(--gcp-gutter) !important;
    margin-right: var(--gcp-gutter) !important;
    width: auto !important;
}

/* Štítek kategorie stál u levého okraje karty, zatímco název i popis jsou
   vystředěné — pilulka teď sedí uprostřed řádku a její text (u delších
   kategorií zalomený na dva řádky) je vycentrovaný taky. */
.pointPageBody .listEshop .listEshopItem .listEshopItemCategory {
    text-align: center !important;
    justify-content: center !important;
}

.pointPageBody .listEshop .listEshopItem .listEshopItemCategoryName:not([style*="display: none"]):not([style*="display:none"]) {
    /* `float: left` z legacy vrstvy (public.css, publicredesign.css) pilulku
       přilepil k levému okraji a zároveň ji blokifikoval — `display:
       inline-block` výš se pak nikdy neprojevil a vystředění řádku na ni
       nemohlo dosáhnout. Bez floatu je z ní zase inline-level box, který
       `text-align: center` na obalu posadí doprostřed. */
    float: none !important;
    text-align: center !important;
}

/* V úpravách drží řádek kategorie rozbalovací seznam přes celou šířku —
   ten se čte zleva, vystředění patří jen štítku. */
.pointPageBody .listEshop .listEshopItem .listEshopItemCategoryNameSelectbox,
.pointPageBody .listEshop .listEshopItem .listEshopItemCategorySelectbox {
    text-align: left !important;
}

/* --- Pořadí polí: DOM je zároveň pořadí čtení ----------------------------
   Zkoušel jsem přeskládat kartu flexovým `order` tak, aby cena a dostupnost
   stály před Volbami a Štítky. Vypadalo to líp, ale rozešlo se pořadí čtení
   s pořadím na obrazovce: tabulátor šel z kategorie na hlavičku Voleb, která
   je vidět až o dvě pole níž (WCAG 2.4.3 Pořadí fokusu). Sbalené skupiny mají
   po 44 px, takže mezi kategorií a cenou nepřekáží — a stojí hned za
   kategorií, ze které se jejich obsah odvozuje. Pořadí proto zůstává takové,
   jak ho posílá server. */

/* --- Mobil: formulář si vezme celý řádek --------------------------------- */
/* Do 640 px má karta stopu 144 px. Formulář v ní nefunguje — změřeno:
   pole názvu 118 px, cena 58 px a obě tlačítka patičky 55 px, takže se
   „Zrušit" i „Uložit" lámaly uprostřed slova („Zruši / t"). Stopa v mřížce
   se drží tam, kde má smysl (od 640 px se sousedi nepřeskládají), na mobilu
   je nabídka stejně dvousloupcová a formulář má přednost před mřížkou. */
@media (max-width: 639.98px) {
    .pointPageBody .listEshop .listEshopItemsView > .listEshopItem.is-editing {
        flex-basis: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ===========================================================================
   DESKA S NÁZVEM BODU — zmenšení (2026-08-18)
   ---------------------------------------------------------------------------
   Uživatel: „zmenši" a „celý box je moc velký". Změřeno před zásahem na
   1280px okně: písmo 40 px, řádek 44 px, vnitřní odsazení 18/20 a celá deska
   1224 × 82 px — název bodu tak zabíral víc plochy než karta autora pod ním
   a na mobilu vytlačoval obsah pod ohyb.

   Nově: písmo clamp(19–28 px) místo 23–40, odsazení 12/16 místo 18/20,
   stín o stupeň jemnější. Deska zůstává deskou (bílá plocha s rámečkem, jak
   ji zavedla část 5 výš) — jen přestává soutěžit s obsahem.
   =========================================================================== */
.pointPageBody #pointPageArticleBody > h1.gcPointMasthead {
    padding: 12px 16px;
    font-size: clamp(19px, 2.1vw, 28px);
    line-height: 1.2;
    box-shadow: var(--gc-shadow-sm, 0 2px 6px rgba(0, 0, 0, .06));
}

/* Odvozený název (ze začátku popisu) byl o stupeň menší už dřív — poměr
   zůstává zachovaný. */
.pointPageBody #pointPageArticleBody > h1.gcPointMasthead--derived {
    font-size: clamp(17px, 1.8vw, 22px);
}

@media (max-width: 768px) {
    .pointPageBody #pointPageArticleBody > h1.gcPointMasthead {
        padding: 10px 14px;
        margin-bottom: 12px;
    }
}

/* ===========================================================================
   PRÁZDNÝ PRAVÝ SLOUPEC: ŠIROKÁ OBRAZOVKA
   ---------------------------------------------------------------------------
   Pravý sloupec drží fotky, POD NIMI popis a pod ním nabídku (šablony
   `point.phtml` / `pointpublic.phtml`, hledej `rowPointDetailRightPanel`).
   Vykreslí se, jakmile do něj patří aspoň jedna z těch tří věcí — takže
   `:not(:has(…))` níž platí jen pro bod, který nemá ANI JEDNU: bez fotek,
   bez popisu, bez nabídky.

   Levý sloupec by v tom případě zůstal na svých 380 px a zbylých ~880 px
   z 1280px okna by zelo prázdnotou. Roztáhne se tedy doprostřed přes 1000 px;
   karty zůstávají pod sebou (jsou nanejvýš dvě, grid by tu neměl co skládat).
   `:has()` je v tomhle souboru použité i výš (pravidlo u `.detailPoint-user-info-section`).
   =========================================================================== */
@media (min-width: 1000px) {
    .pointPageBody .rowPointDetailLeftRight:not(:has(.rowPointDetailRightPanel)) .rowPointDetailLeftPanel {
        flex: 1 1 auto !important;
        max-width: 1000px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}