/* ==========================================================
   PAGE TITLE
========================================================== */

.pageArticleDetail > header > h1{

    text-align:left;

    margin-top:0;
    margin-bottom:var(--sh-space-title-gap); /* stejný rytmus jako .sh-hero__title (homepage.css) */

}

/* na tabletu/mobilu je hlavička position:fixed a i po opravě její
   výšky (header.css) sedí nadpis hned na hraně obsahu — malá rezerva
   navíc, ať to nepůsobí nalepené */
@media (max-width: 991px) {
    .pageArticleDetail > header > h1{
        margin-top: var(--sh-space-xs);
    }
}

/* ==========================================================
   OBSAHOVÉ STRÁNKY (Spolek, Jak balíme objednávky, ...)
   Stránka (.pageArticleDetail) nemá na rozdíl od blogového článku
   žádný ".text" obal se základní typografií (viz blog.css
   ".news-item-detail .text h2/p/...") – stejné hodnoty tady znovu,
   scoped na [itemprop="about"] (Shoptetův obal obsahu z admin
   HTML editoru), ať vypadá stejně jako text v článku.

   Třídy s prefixem .sh-page__ jsou sdílené komponenty pro TENHLE typ
   stránky obecně (ne jen pro Spolek) – 2sloupcový řádek, úvodní text,
   mřížka fotek, číslované kroky, kontakt s kulatou fotkou. Používá je
   Spolek i "Jak balíme objednávky" a měly by je používat i další
   podobné stránky, ať vypadají konzistentně a styl se udržuje na
   jednom místě. Potřebuje-li konkrétní stránka vlastní výjimku,
   neupravuj tyhle sdílené třídy — obal obsah té stránky vlastní
   třídou (např. .sh-page--baleni) a přepiš jen v jejím scope. */

.pageArticleDetail [itemprop="about"] {
    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-base);
    line-height: var(--sh-line-height-body);
    color: var(--sh-color-text);
}

.pageArticleDetail [itemprop="about"] p {
    margin: 0 0 var(--sh-space-sm);
}

.pageArticleDetail [itemprop="about"] h2 {
    margin: var(--sh-space-lg) 0 var(--sh-space-sm);

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-heading-sm);
    line-height: var(--sh-line-height-heading-sm);
    font-weight: var(--sh-font-weight-heading);
    color: var(--sh-color-text);
}

/* úvodní věta hned pod H1 – stejný rytmus jako .sh-hero__subtitle
   (homepage.css) */
.sh-page__intro {
    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-text-xl);
    font-weight: var(--sh-font-weight-medium);
    line-height: var(--sh-line-height-body);
    color: var(--sh-color-text);

    margin: 0 0 var(--sh-space-lead-gap);
}

/* H1 + intro — širší než 1. sloupec řádků níže (na zkoušku 70 %
   šířky <article>, dřív přesně na šířku sloupce, viz calc() níže).
   H1 je sice mimo [itemprop="about"] (vlastní admin pole), ale měří
   se proti stejné šířce <article>, takže procento sedí i tam.
   :has() omezuje H1 pravidlo jen na stránky s tímhle rozvržením
   (pozná je podle .sh-page__intro uvnitř téhož article) —
   ".pageArticleDetail > header > h1" samo o sobě cílí na VŠECHNY
   stránky s tímhle Shoptet šablonou (Kontakty, Obchodní podmínky...),
   který tuhle šířku nechceme. */
.pageArticleDetail:has(.sh-page__intro) > header > h1,
.sh-page__intro {
    max-width: 70%;
}

/* ---------- nadpis sekce: eyebrow label + velký title ----------
   Znovupoužité .sh-segmentation-intro__label/__title z homepage.css.
   Label (span) je bez konfliktu, ale .pageArticleDetail
   [itemprop="about"] h2 výše (třída+atribut+tag) má vyšší specificitu
   než samotné .sh-segmentation-intro__title (jedna třída), takže by
   jeho menší --sh-heading-sm tiše vyhrávalo nad zamýšleným větším
   --sh-heading-md – stejný scope navíc, ať naše pravidlo vyhraje.
   margin-top:0 (místo zděděných var(--sh-space-lg) shora) – nad
   titulkem už je label, který spacing sám zajišťuje. */
.pageArticleDetail [itemprop="about"] h2.sh-segmentation-intro__title {
    max-width: none;
    margin: 0 0 var(--sh-space-sm);

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-heading-md);
    line-height: var(--sh-line-height-heading-sm);
    font-weight: var(--sh-font-weight-heading);
    color: var(--sh-color-text);
}

/* ---------- ikona v podbarveném boxu (např. "Ještě méně odpadu") ----------
   Stejná mask-image technika jako ikony na stránce Doprava (viz níže
   .sh-page__delivery-row) – nezávisí na tom, že Shoptetův editor
   při uložení odstraňuje <svg> z HTML. Samostatná (ne přes
   .sh-delivery-feature__icon), protože box tu není v .sh-delivery-row
   mřížce. */
.sh-page__icon {
    display: block;
    width: 48px;
    height: 48px;
    margin-bottom: var(--sh-space-sm);

    color: var(--sh-color-cta);
    background-color: currentColor;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* když je druhý icon+nadpis blok naskládaný rovnou pod odstavec
   předchozího (Jak balíme: Potraviny na váhu / Prací a čistící
   prostředky na váhu v jednom sloupci), potřebuje odstup shora –
   stejný token jako zbytek mezer mezi bloky na těchto stránkách */
p + .sh-page__icon {
    margin-top: var(--sh-space-lg);
}

/* list – reálná ikona "leaf" z Lucide (MIT), viewBox ponechán 0 0 24
   24 (stejný princip škálování jako u sáčku výše), stroke-width:1 */
.sh-page__icon--leaf {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M11%2020A7%207%200%200%201%209.8%206.1C15.5%205%2017%204.48%2019%202c1%202%202%204.18%202%208%200%205.5-4.78%2010-10%2010Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M2%2021c0-3%201.85-5.36%205.08-6C9.5%2014.52%2012%2013%2013%2012%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M11%2020A7%207%200%200%201%209.8%206.1C15.5%205%2017%204.48%2019%202c1%202%202%204.18%202%208%200%205.5-4.78%2010-10%2010Z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M2%2021c0-3%201.85-5.36%205.08-6C9.5%2014.52%2012%2013%2013%2012%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

/* papírový sáček (Potraviny na váhu, stránka Jak balíme) – reálná
   ikona "paper-bag" z Lucide (MIT), ne vlastní kresba. Ponechán
   originální viewBox 0 0 24 24 (žádné přepočítávání souřadnic) –
   mask-size:contain ho i tak roztáhne na stejných 48px jako ostatní
   ikony, takže stroke-width:1 tady vyjde opticky stejně silně jako
   stroke-width:2 na ikonách kreslených v prostoru 0 0 48 48
   (1 jednotka z 24 se do 48px boxu škáluje 2×, stejně jako
   1 jednotka z 48). */
.sh-page__icon--bag {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5.364%203.848C4%206%203%209.652%203%2012.652V19a2%202%200%20002%202h14a2%202%200%20002-2v-5c0-2.334-1.816-4.668-2.622-7.002%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M7%203h11.379a2%202%200%20011.789%201.106l.723%201.447A1%201%200%200119.997%207h-8.525a2%202%200%2001-1.789-1.106L8.79%204.105a2%202%200%2010-3.579%201.789l2.261%204.522A5%205%200%20018%2012.652V21%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5.364%203.848C4%206%203%209.652%203%2012.652V19a2%202%200%20002%202h14a2%202%200%20002-2v-5c0-2.334-1.816-4.668-2.622-7.002%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M7%203h11.379a2%202%200%20011.789%201.106l.723%201.447A1%201%200%200119.997%207h-8.525a2%202%200%2001-1.789-1.106L8.79%204.105a2%202%200%2010-3.579%201.789l2.261%204.522A5%205%200%20018%2012.652V21%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

/* čisticí prostředky (Prací a čisticí prostředky na váhu, stránka
   Jak balíme) – reálná ikona "soap-dispenser-droplet" z Lucide (MIT),
   viewBox 0 0 24 24, stroke-width:1 (stejný princip jako výše) */
.sh-page__icon--bottle {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M10.5%202v4%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M14%202H7a2%202%200%200%200-2%202%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M19.29%2014.76A6.67%206.67%200%200%201%2017%2011a6.6%206.6%200%200%201-2.29%203.76c-1.15.92-1.71%202.04-1.71%203.19%200%202.22%201.8%204.05%204%204.05s4-1.83%204-4.05c0-1.16-.57-2.26-1.71-3.19%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M9.607%2021H6a2%202%200%200%201-2-2v-7a2%202%200%200%201%202-2h7V7a1%201%200%200%200-1-1H9a1%201%200%200%200-1%201v3%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M10.5%202v4%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M14%202H7a2%202%200%200%200-2%202%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M19.29%2014.76A6.67%206.67%200%200%201%2017%2011a6.6%206.6%200%200%201-2.29%203.76c-1.15.92-1.71%202.04-1.71%203.19%200%202.22%201.8%204.05%204%204.05s4-1.83%204-4.05c0-1.16-.57-2.26-1.71-3.19%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M9.607%2021H6a2%202%200%200%201-2-2v-7a2%202%200%200%201%202-2h7V7a1%201%200%200%200-1-1H9a1%201%200%200%200-1%201v3%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

/* h2 hned za ikonou nemá dostávat zděděný velký margin-top z
   [itemprop="about"] h2 – ikona sama dělá odstup shora dost.
   Musí mít stejnou/vyšší specificitu než ".pageArticleDetail
   [itemprop='about'] h2" (třída+atribut+tag), jinak dřívější
   verze (jen ".sh-page__icon + h2") tiše prohrávala a mezera
   zůstávala stejně velká jako bez opravy. */
.pageArticleDetail [itemprop="about"] .sh-page__icon + h2 {
    margin-top: 0;
}

/* ---------- řádky (2sloupcová komponenta) ----------
   Grid (ne flex+%) ze stejného důvodu jako .homepage-blog-wrapper.row
   v blog.css: s procentuální šířkou sloupců by "gap" mohl přetéct přes
   100 %; "fr" jednotky ho odečtou automaticky. 1fr/1fr = poměr 50/50,
   stejné jako u H1/intro výše. align-items necháno na výchozím
   "stretch" (grid), takže druhý sloupec vždy vyplní stejnou výšku,
   jakou má sloupec vedle (obrázek, mřížka fotek...). */
.sh-page__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sh-space-xl);

    /* stejný rytmus jako mezi sekcemi na homepage a na stránce
       Doprava (.sh-page__delivery-row) – padding, ne margin, ať se
       sekce nesčítají zvlášť nahoře/dole mezi sousedícími řádky */
    padding-top: var(--sh-space-section);
    padding-bottom: var(--sh-space-md);
}

/* [itemprop="about"] h2 výše dává nadpisu margin-top pro odstup od
   předchozího obsahu – jako první prvek textového sloupce by ale
   posouval text pod horní hranu sloupce vedle; vynulováno, ať oboje
   začíná na stejné výšce */
.sh-page__row > .sh-article__col-main > h2:first-child,
.sh-page__row > .sh-article__toc > h2:first-child,
.sh-page__row > .sh-article__col-main > .sh-article__toc:first-child > h2:first-child {
    margin-top: 0;
}

/* poslední prvek textového sloupce nesmí mít spodní margin – jinak
   text končí výš, než je spodní hrana sloupce vedle něj */
.sh-page__row > .sh-article__col-main > :last-child {
    margin-bottom: 0;
}

/* box VLOŽENÝ v textovém sloupci ZA jiným obsahem (na konci textu) –
   sedí hned pod odstavci, vlastní odstup nahoře navíc k tomu, co dává
   .sh-article__toc (margin-top:0 v blog.css) */
.sh-page__row > .sh-article__col-main .sh-article__toc {
    margin-top: var(--sh-space-md);
}

/* box, který je JEDINÝM obsahem sloupce (žádný text před ním) – bez
   toho odstupu navíc, ať začíná na stejné výšce jako sloupec vedle.
   Vyšší specificita (:first-child navíc) než pravidlo výše, vyhrává
   bez ohledu na pořadí v souboru. */
.sh-page__row > .sh-article__col-main > .sh-article__toc:first-child {
    margin-top: 0;
}

/* box jako SAMOSTATNÝ sloupec – bez vlastního odstupu shora, jen ať
   se nenatahuje na celou výšku řádku (výchozí grid stretch), zůstává
   v přirozené výšce nahoře */
.sh-page__row > .sh-article__toc {
    align-self: start;
}

.sh-page__media {
    border-radius: var(--sh-radius-md);
    overflow: hidden;
}

.sh-page__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0 !important;
}

/* ---------- mřížka čtvercových fotek ----------
   Stejné fotky jako na homepage Instagram feedu
   (.sh-origin-social__photo v homepage.css) */
.sh-page__gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sh-space-xs);
}

/* varianta 4 vedle sebe v jedné řadě (stránka Kontakty) – vlastní
   modifikátor, ať se výchozí 2×2 mřížka (Spolek atd.) nemění */
.sh-page__gallery-grid--row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 767px) {
    .sh-page__gallery-grid--row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.sh-page__gallery-photo {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--sh-radius-md);
}

.sh-page__gallery-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.25, 1, .5, 1);
}

.sh-page__gallery-photo:hover img {
    transform: scale(1.04);
}

/* ---------- kulaté ikony sociálních sítí + odkaz (stránka Kontakty) ----------
   Ikony jako CSS mask (stejný princip jako .sh-page__icon výše), jen
   místo currentColor na 48px boxu tady sedí bílé (--sh-color-text-inverse)
   uvnitř menšího kulatého kotoučku v naší CTA barvě – logo platformy,
   ne její oficiální barva. */
/* sloupec ikona+text pod sebou, ne v řadě vedle sebe */
.sh-page__social-links {
    display: flex;
    flex-direction: column;
    gap: var(--sh-space-xs);

    margin-bottom: var(--sh-space-md);
}

.sh-page__social-link-row {
    display: flex;
    align-items: center;
    gap: var(--sh-space-xs);
}

.sh-page__social-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;

    border-radius: var(--sh-radius-btn);
    background: var(--sh-color-cta);

    transition: var(--sh-transition);
}

.sh-page__social-icon:hover {
    background: var(--sh-color-cta-hover);
    transform: var(--sh-btn-hover-transform);
    box-shadow: var(--sh-btn-hover-shadow);
}

.sh-page__social-icon::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;

    background-color: var(--sh-color-text-inverse);

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* reálná ikona "brand-instagram" z Tabler (MIT) */
.sh-page__social-icon--instagram::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%208a4%204%200%200%201%204%20-4h8a4%204%200%200%201%204%204v8a4%204%200%200%201%20-4%204h-8a4%204%200%200%201%20-4%20-4l0%20-8%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M9%2012a3%203%200%201%200%206%200a3%203%200%200%200%20-6%200%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M16.5%207.5v.01%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%208a4%204%200%200%201%204%20-4h8a4%204%200%200%201%204%204v8a4%204%200%200%201%20-4%204h-8a4%204%200%200%201%20-4%20-4l0%20-8%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M9%2012a3%203%200%201%200%206%200a3%203%200%200%200%20-6%200%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M16.5%207.5v.01%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

/* reálná ikona "brand-facebook" z Tabler (MIT) */
.sh-page__social-icon--facebook::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M7%2010v4h3v7h4v-7h3l1%20-4h-4v-2a1%201%200%200%201%201%20-1h3v-4h-3a5%205%200%200%200%20-5%205v2h-3%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M7%2010v4h3v7h4v-7h3l1%20-4h-4v-2a1%201%200%200%201%201%20-1h3v-4h-3a5%205%200%200%200%20-5%205v2h-3%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

.sh-page__social-text {
    margin-left: var(--sh-space-xs);

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-text-lg);
    font-weight: var(--sh-font-weight-medium);
    color: var(--sh-color-cta);
    text-decoration: none;

    transition: var(--sh-transition);
}

.sh-page__social-text:hover {
    color: var(--sh-color-cta-hover);
}

/* ---------- řádek "3 karty s ikonou" (homepage .sh-delivery-feature)
   ---------- a řádek pod ním "podbarvený box (2/3) + obrázek (1/3)" –
   obě řady sdílí stejnou 3sloupcovou mřížku, ať jejich sloupce
   opticky lícují nad sebou. */
.sh-page__delivery-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sh-space-md);
}

/* rytmus mezi sekcemi stejný jako na homepage (padding-top:
   var(--sh-space-section) na začátku každé sekce); 1. řádek navíc
   padding-bottom, ať karty a box "Doprava zdarma" pod nimi nejsou
   nalepené na sebe */
.sh-page__delivery-row {
    padding-top: var(--sh-space-section);
}

/* obecný obal pro další sekce na stránce (mimo .sh-page__delivery-row
   dvojici výše), stejný odstup shora jako mezi sekcemi na homepage */
.sh-page__section {
    padding-top: var(--sh-space-section);
}

.sh-page__delivery-row:first-of-type {
    padding-bottom: var(--sh-space-md);
}

/* box zabírající šířku 2 sloupců (Doprava zdarma vedle obrázku) */
.sh-page__col-span-2 {
    grid-column: span 2;
}

/* Ikony karet "Kurýr na adresu" / "Výdejní boxy..." / "Naše výdejny..."
   – Shoptetův editor obsahu (TinyMCE) při uložení "Zdrojového kódu"
   potichu odstraňuje <svg> tagy (nejsou na jeho whitelistu povolených
   elementů), takže inline SVG v HTML nikdy nepřežije uložení. Ikony
   proto místo v HTML žijí tady jako CSS mask-image (base64/URL-encoded
   SVG) – background-color: currentColor pak funguje stejně jako
   stroke:currentColor u inline SVG na homepage, takže barva jde dál
   řídit přes .sh-delivery-feature__icon { color: ... } beze změny.
   Cílené podle pořadí karty v řádku (:nth-child), protože všechny tři
   prázdné <div class="sh-delivery-feature__icon"> jsou po výmazu SVG
   editorem nerozlišitelné. */
.sh-page__delivery-row .sh-delivery-feature__icon {
    background-color: currentColor;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* 1. karta – dům (Kurýr na adresu) – reálná ikona "house" z Lucide
   (MIT), viewBox 0 0 24 24, stroke-width:1 (stejný princip jako
   sáček/list výše) */
.sh-page__delivery-row .sh-delivery-feature:nth-child(1) .sh-delivery-feature__icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M15%2021v-8a1%201%200%200%200-1-1h-4a1%201%200%200%200-1%201v8%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M3%2010a2%202%200%200%201%20.709-1.528l7-6a2%202%200%200%201%202.582%200l7%206A2%202%200%200%201%2021%2010v9a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M15%2021v-8a1%201%200%200%200-1-1h-4a1%201%200%200%200-1%201v8%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M3%2010a2%202%200%200%201%20.709-1.528l7-6a2%202%200%200%201%202.582%200l7%206A2%202%200%200%201%2021%2010v9a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

/* 2. karta – výdejní box/schránka (Výdejní boxy a odběrná místa),
   mřížka přihrádek s úchyty místo obecné krabice */
.sh-page__delivery-row .sh-delivery-feature:nth-child(2) .sh-delivery-feature__icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%2236%22%20height%3D%2236%22%20rx%3D%222%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%226%22%20y1%3D%2219%22%20x2%3D%2242%22%20y2%3D%2219%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%226%22%20y1%3D%2232%22%20x2%3D%2242%22%20y2%3D%2232%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%2224%22%20y1%3D%226%22%20x2%3D%2224%22%20y2%3D%2242%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2212.5%22%20r%3D%221.5%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2225.5%22%20r%3D%221.5%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2238.5%22%20r%3D%221.5%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2237%22%20cy%3D%2212.5%22%20r%3D%221.5%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2237%22%20cy%3D%2225.5%22%20r%3D%221.5%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2237%22%20cy%3D%2238.5%22%20r%3D%221.5%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%2236%22%20height%3D%2236%22%20rx%3D%222%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%226%22%20y1%3D%2219%22%20x2%3D%2242%22%20y2%3D%2219%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%226%22%20y1%3D%2232%22%20x2%3D%2242%22%20y2%3D%2232%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%3Cline%20x1%3D%2224%22%20y1%3D%226%22%20x2%3D%2224%22%20y2%3D%2242%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2212.5%22%20r%3D%221.5%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2225.5%22%20r%3D%221.5%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2238.5%22%20r%3D%221.5%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2237%22%20cy%3D%2212.5%22%20r%3D%221.5%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2237%22%20cy%3D%2225.5%22%20r%3D%221.5%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2237%22%20cy%3D%2238.5%22%20r%3D%221.5%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

/* 3. karta – komunita (Naše výdejny na Zlínsku) – přepracováno,
   původní tvar seděl výš (~y16–48 v 48px canvasu = 66% výšky
   posunuté dolů), zatímco dům/box (1./2. karta) sedí ~y6–41 (79%
   výšky, vycentrováno) – opticky pak vypadala menší a níž. Nová
   verze má stejný rozsah y6–42 jako sesterské ikony. */
.sh-page__delivery-row .sh-delivery-feature:nth-child(3) .sh-delivery-feature__icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2215%22%20r%3D%226%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2219%22%20r%3D%225%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M6%2042c0-10%205-17%2011-17s11%207%2011%2017%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M24%2042c0-8%204-14%208-14s8%206%208%2014%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2215%22%20r%3D%226%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2219%22%20r%3D%225%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M6%2042c0-10%205-17%2011-17s11%207%2011%2017%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M24%2042c0-8%204-14%208-14s8%206%208%2014%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

/* box v tomhle řádku nemá nad sebou ikonu jako karty vedle něj – jeho
   nadpis (h2, dědí velký margin-top z [itemprop="about"] h2 výše) by
   jinak sedněl níž než nadpisy karet; zarovnáno na stejnou výšku */
.sh-page__delivery-row .sh-article__toc > h2:first-child {
    margin-top: 0;
}

/* ---------- mřížka podbarvených boxů s adresami výdejen ---------- */
.sh-page__locations-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sh-space-md);
    margin-top: var(--sh-space-md);
}

.sh-page__locations-grid .sh-article__toc {
    margin: 0;
}

.sh-page__location-name {
    display: block;
    margin: 0 0 var(--sh-space-xs);

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-text-lg);
    font-weight: var(--sh-font-weight-medium);
    color: var(--sh-color-text);
}

.sh-page__location-address {
    margin: 0 0 var(--sh-space-xs);
    color: var(--sh-color-text-muted);
}

.sh-page__location-price {
    margin: 0;
    font-weight: var(--sh-font-weight-medium);
}

@media (max-width: 991px) {
    .sh-page__delivery-row,
    .sh-page__locations-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .sh-page__delivery-row,
    .sh-page__locations-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- číslované kroky ("Jak to funguje" apod.) ----------
   Bez boxu/karty — plyne v textu jako běžný odstavec/nadpis. */
.sh-page__steps-title {
    display: block;
    margin: var(--sh-space-md) 0 var(--sh-space-sm);

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-text-xl);
    font-weight: var(--sh-font-weight-heading);
    color: var(--sh-color-text);
}

/* číslování přes CSS counter + kolečko, stejný vizuální jazyk jako
   kroky v košíku (cart.css: ol.cart-header > li > a::before) – na
   rozdíl od nativního <ol> markeru (viz historie výše) nezávisí na
   list-style ani na tom, jestli <li> zůstane display:list-item. */
.sh-page__steps-list {
    counter-reset: sh-page-step;

    display: flex;
    flex-direction: column;
    gap: var(--sh-space-xs);

    list-style: none;
    margin: 0 0 var(--sh-space-md);
    padding: 0;
}

.sh-page__steps-list li {
    counter-increment: sh-page-step;

    display: flex;
    align-items: flex-start;
    gap: var(--sh-space-sm);

    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-sm);
    line-height: var(--sh-line-height-body);
    color: var(--sh-color-text);
}

.sh-page__steps-list li::before {
    content: counter(sh-page-step);

    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;

    border-radius: var(--sh-radius-btn);
    background: var(--sh-color-cta-subtle);
    color: var(--sh-color-text);

    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-text-sm);
    font-weight: var(--sh-font-weight-medium);
    line-height: 1;
}

/* odkaz "Doprava a výdejní místa" uvnitř podbarveného boxu – hned
   pod odstavcem, ne s obvyklým odstupem .sh-delivery-feature__link
   (ten je určený pro sloupec pod textem na homepage; tady je bez
   něj blíž k textu). Zásah jen v tomhle kontextu, ne do sdílené
   třídy samotné, ať homepage dál používá svůj vlastní odstup.

   font-weight navíc: blog.css ".sh-article__toc a" (třída+tag) má
   vyšší specificitu než samotné ".sh-delivery-feature__link" (jen
   třída), takže jeho font-weight-medium tiše přebíjelo zamýšlené
   font-weight-bold odkazu – opraveno tady ve stejném scope. */
.sh-article__toc .sh-delivery-feature__link {
    margin-top: 0;
    font-weight: var(--sh-font-weight-bold);
}

/* ---------- kontaktní blok ----------
   Bez boxu/pozadí – kulatá fotka vlevo, e-mail/telefon vpravo pod sebou. */
.sh-page__contact {
    display: flex;
    align-items: center;
    gap: var(--sh-space-sm);

    margin-top: var(--sh-space-sm);
}

.sh-page__contact-photo {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    border-radius: var(--sh-radius-btn);
    object-fit: cover;
    margin: 0 !important;
}

/* .pageArticleDetail [itemprop="about"] p výše (třída+atribut+tag) má
   vyšší specificitu než tohle samotné pravidlo (třída+tag), takže jeho
   var(--sh-space-sm) tiše vyhrávalo nad zamýšleným menším odstupem
   tady – proto stejný scope navíc, ať naše pravidlo skutečně vyhraje */
.pageArticleDetail [itemprop="about"] .sh-page__contact-info p {
    margin: 0 0 var(--sh-space-xs);
}

/* stejný specificity problém jako u kontaktu výše – .pageArticleDetail
   [itemprop="about"] p (třída+atribut+tag) přebíjí .sh-article__faq-item
   p (třída+tag), takže margin-top odpovědi na Spolku/Kontaktech/Dopravě
   tiše mizel, i když na blogu (mimo [itemprop="about"]) je vidět */
.pageArticleDetail [itemprop="about"] .sh-article__faq-item p {
    margin-top: var(--sh-space-sm);
}

/* na Spolku/Kontaktech/Dopravě (mimo blog) je FAQ v 1 sloupci omezené
   na stejnou šířku jako H1+intro pod nadpisem stránky (max-width:70 %
   v pravidle níže), ne na celou šířku článku */
.pageArticleDetail [itemprop="about"] .sh-article__faq {
    max-width: 70%;
}

@media (max-width: 991px) {
    .pageArticleDetail [itemprop="about"] .sh-article__faq {
        max-width: none;
    }
}

.sh-page__contact-info p:last-child {
    margin-bottom: 0;
}

.sh-page__contact-info a {
    font-family: var(--sh-font-family-headings);
    font-size: var(--sh-text-lg);
    font-weight: var(--sh-font-weight-medium);
    color: var(--sh-color-accent);
    text-decoration: none;

    transition: var(--sh-transition);
}

.sh-page__contact-info a:hover {
    color: var(--sh-color-accent-hover);
}

/* na desktopu je H1/intro schválně užší (70 % šířky article) kvůli
   vizuální rovnováze se sloupci níže – na tabletu/mobilu už žádné
   sloupce vedle sebe nejsou (viz níže), 70 % by jen zbytečně lámalo
   řádky na úzké obrazovce */
@media (max-width: 991px) {
    .pageArticleDetail:has(.sh-page__intro) > header > h1,
    .sh-page__intro {
        max-width: 100%;
    }

    /* 2 sloupce vedle sebe (text/text, text/obrázek...) jsou na tabletu
       už dost úzké na to, aby se v nich pohodlně četlo – zalomeno na
       jeden sloupec o breakpoint dřív než běžný mobilní 767px.
       Menší gap/margin-top než na desktopu (--sh-space-xl), ať
       stránka na menší obrazovce zbytečně nenatahuje. */
    .sh-page__row {
        grid-template-columns: 1fr;
        gap: var(--sh-space-lg);
        margin-top: var(--sh-space-lg);
    }

    .sh-page__row > .sh-article__toc {
        margin-top: var(--sh-space-md);
    }
}

@media (max-width: 767px) {
    /* na mobilu obrázek/box padá pod text (ne stretch na výšku) –
       vlastní rozumná výška, ne 100 % rodiče */
    .sh-page__media {
        min-height: 280px;
    }

    /* ještě o něco menší odstup mezi řádky než na tabletu */
    .sh-page__row {
        gap: var(--sh-space-md);
        margin-top: var(--sh-space-md);
    }

    /* kulatá fotka + kontakt vedle sebe se na úzkém mobilu snadno
       zmáčknou – ať se v případě potřeby zalomí, ne přetečou */
    .sh-page__contact {
        flex-wrap: wrap;
    }
}

/* ==========================================================
   404 – dva sloupce, text/tlačítka vlevo, foto vpravo
   Nadpis (h1) se zadává v administraci, zbytek (text, tlačítka,
   foto) je vlastní HTML blok vložený hned za něj. Shoptetem
   generovaný podnadpis a odstavce ("Stránka nebyla nalezena...")
   se schovávají – nahrazuje je vlastní text s třídou .sh-404__text.
========================================================== */

.empty-content-404 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: var(--sh-space-lg);
}

.empty-content-404 > h1 {
    grid-column: 1;

    font-size: var(--sh-heading-md);
    margin-top: 0;
    margin-bottom: var(--sh-space-sm);
}

/* Shoptetem generovaný podnadpis/odstavce a jejich ikona pryč,
   nahrazuje je vlastní obsah níže */
.empty-content-404 > h2,
.empty-content-404 > p:not(.sh-404__text) {
    display: none;
}

.empty-content-404 > .sh-404__text {
    grid-column: 1;

    font-family: var(--sh-font-family-body);
    font-size: var(--sh-text-xl);
    font-weight: var(--sh-font-weight-body);
    line-height: var(--sh-line-height-body);
    color: var(--sh-color-text);

    margin: 0 0 var(--sh-space-md);
}

.empty-content-404 > .sh-404__actions {
    grid-column: 1;

    display: flex;
    flex-wrap: wrap;
    gap: var(--sh-space-sm);
}

.empty-content-404 > .sh-404__media {
    grid-column: 2;
    grid-row: 1 / -1;

    align-self: stretch;

    min-height: 400px;

    border-radius: var(--sh-radius-md);
    overflow: hidden;
}

.empty-content-404 > .sh-404__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 767px) {

    .empty-content-404 {
        grid-template-columns: 1fr;
    }

    .empty-content-404 > .sh-404__media {
        grid-column: 1;
        grid-row: auto;
        order: 10;

        min-height: 280px;
        margin-top: var(--sh-space-sm);
    }

}