/* ========================================================== MOJE OBJEDNÁVKA (systémová stránka /moje-objednavka) Formulář na vyhledání objednávky/žádost o vrácení je Shoptetův React widget vykreslený ve web componentu (#shadow-root) - na jeho vnitřní elementy (.layout__login, .button_primary...) NELZE mířit běžnými CSS selektory, protože styly uvnitř shadow DOM jsou izolované od zbytku stránky. CSS custom properties (proměnné) jsou ale výjimka - ty přes hranici shadow DOM PROCHÁZEJÍ. DŮLEŽITÉ: musí se přepsat přímo na HOSTITELSKÉM elementu (main#order-withdraw - to je ten, co v sobě nese shadow root), NE na nějakém jeho obalu (#content-wrapper apod.)! Widget má tytéž proměnné znovu deklarované na ":host" uvnitř svého vlastního adoptovaného stylesheetu, a taková deklarace platí jako "vlastní" hodnota HOSTITELE - vlastní hodnota vždycky vyhraje nad zděděnou, bez ohledu na !important (ověřeno živě: přepis na #content-wrapper byl celý přeškrtnutý jako "Inherited from..."). Když ale cílíme na stejný element (#order-withdraw), na kterém je i ":host" deklarace, obě soupeří v normální cascade na stejné úrovni - tam už !important vyhraje. */ #order-withdraw { --Global-Backgrounds-Content-Primary: var(--sh-color-surface) !important; --Corner-Radius_Bigger: var(--sh-radius-md) !important; /* .button { border-radius: var(--Corner-Radius); } - samostatný token od --Corner-Radius_Bigger karty výš, ověřeno v devtools */ --Corner-Radius: var(--sh-radius-btn) !important; --Global-Backgrounds-Button-Primary: var(--sh-color-cta) !important; /* podtržítko před "Hover", ne pomlčka - stejná konvence jako --Corner-Radius_Bigger, ověřeno v devtools */ --Global-Backgrounds-Button-Primary_Hover: var(--sh-color-cta-hover) !important; --Global-Foregrounds-Button-Primary: var(--sh-color-cta) !important; --Global-Foregrounds-Button-Primary_Hover: var(--sh-color-cta-hover) !important; /* písmo - stejná technika, widget odkazuje na --Text-Font a tři váhové úrovně (Small/Base/Large) přes var(), viz devtools dump ":root,:host{--Text-Font:...; --Font-Weight-Body_Small:500; ...}" */ --Text-Font: var(--sh-font-family-body) !important; --Font-Weight-Body_Small: var(--sh-font-weight-body) !important; --Font-Weight-Body_Base: var(--sh-font-weight-body) !important; --Font-Weight-Body_Large: var(--sh-font-weight-body) !important; } /* .orderWithdraw (main-14.css) dává hostiteli pevné background-color: #f6f6f6 - žádný var(), takže tohle NENÍ shadow-DOM token, ale normální pravidlo v běžném (light) DOM. Jde tedy přepsat úplně normálně vyšší specificitou (ID+třída > jen třída), bez !important a bez triků s proměnnými. Tohle je POZADÍ STRÁNKY kolem karty formuláře. */ #order-withdraw.orderWithdraw { background-color: var(--sh-color-bg); } /* druhý, samostatný zdroj téhož vizuálního pozadí - .orderWithdraw--page má vlastní ::before (position:absolute, na celou šířku viewportu, z-index:-1), který "podkládá" stránku stejnou #f6f6f6 barvou. Musí se přepsat zvlášť, protože je to jiný selektor (jiná třída + ::before) než .orderWithdraw výš. */ #order-withdraw.orderWithdraw--page::before { background-color: var(--sh-color-bg); } /* #content-wrapper.container (homepage.css) dává VŠEM stránkám spodní padding (var(--sh-space-section)) - na téhle stránce v něm ale prosvítá jiná barva zespodu (patrně další sekce/pozadí za obsahem), protože ::before výš pokrývá jen výšku .orderWithdraw--page, ne tenhle padding navíc. Scoped jen na tuhle stránku (.orderWithdraw__container), ať se nedotkne spodního paddingu na žádné jiné stránce. Vyšší specificita (ID + 2 třídy) než #content-wrapper.container (ID + 1 třída), takže vyhraje bez ohledu na pořadí souborů. */ #content-wrapper.container.orderWithdraw__container { padding-bottom: 0; } /* ========================================================== 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-md); } } /* ========================================================== 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); } /* obyčejná fotka vložená přímo do textu (ne uvnitř .sh-page__media/ .sh-page__gallery-photo/... - ty mají vlastní width:100% pravidlo) - main-14 dává obrázkům jen max-width:100%, což užší/portrétové fotky nenatáhne na celou šířku sloupce, jen je omezí shora. Width:100% fotku roztáhne přes celou šířku jako zbytek obsahu (žádná mezera vpravo), height:auto zachová poměr stran. */ .pageArticleDetail [itemprop="about"] img { display: block; width: 100%; height: auto; border-radius: var(--sh-radius-md); } .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); } /* menší podnadpis uvnitř sloupce (např. "Zajímá vás víc?" na Výročních zprávách) - stejné hodnoty jako .news-item-detail .text h3 v blog.css, ať h3 vypadá stejně v článku i na téhle stránce */ .pageArticleDetail [itemprop="about"] h3 { margin: var(--sh-space-md) 0 var(--sh-space-xs); font-family: var(--sh-font-family-headings); font-size: var(--sh-text-xl); line-height: var(--sh-line-height-heading); font-weight: var(--sh-font-weight-heading); color: var(--sh-color-text); } /* .sh-value__title (homepage.css) je taky h3 - schválně BEZ marginu a s větším fontem, mezeru pod číslem dělá gap na .sh-value__heading (flex column), ne margin na h3. Bez tohohle scoped přebití by mu pravidlo výš (třída+atribut+tag > jedna třída) tiše vyhrávalo - stejný problém, jaký tu byl už víckrát (viz .sh-page__icon + h2 apod.) */ .pageArticleDetail [itemprop="about"] h3.sh-value__title { margin: 0; font-size: var(--sh-heading-sm); } /* dlouhé číslované/odrážkové texty (Obchodní podmínky a pod.) — stejný rytmus jako odstavce (p výš), jen s odsazením kvůli odrážkám/číslům */ .pageArticleDetail [itemprop="about"] ol, .pageArticleDetail [itemprop="about"] ul { margin: 0 0 var(--sh-space-sm); padding-left: 1.25em; } /* číslované seznamy (1. 2. 3.) chceme zarovnané na stejnou levou hranu jako běžné odstavce - list-style-position:inside dá číslo do řádku textu místo do vlastního sloupce vlevo od paddingu (na rozdíl od záporného margin-left tohle nikdy nepřeteče mimo obsah stránky) */ .pageArticleDetail [itemprop="about"] ol { padding-left: 0; list-style-position: inside; } /* stejná barva odrážky/čísla jako u blogových článků (blog.css .news-item-detail .text li::marker) */ .pageArticleDetail [itemprop="about"] li::marker { color: var(--sh-color-accent); } .pageArticleDetail [itemprop="about"] li { margin: 0 0 var(--sh-space-xs); } .pageArticleDetail [itemprop="about"] li:last-child { margin-bottom: 0; } .pageArticleDetail [itemprop="about"] li > ol, .pageArticleDetail [itemprop="about"] li > ul { margin-top: var(--sh-space-xs); } /* ú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-sm); } /* stejný vzhled automaticky i bez ruční třídy .sh-page__intro - první odstavec hned pod H1 (typicky prostý text bez .sh-page__ rozvržení, např. Obchodní podmínky, Ochrana osobních údajů) ať vypadá stejně, aniž bychom na každé nové stránce museli pamatovat přidat třídu. H1 + tenhle úvod jsou navíc na 70% šířky (viz :has() pravidlo níž) - ZBYTEK obsahu stránky (h2, p, ol, ul...) zůstává na celou šířku. */ .pageArticleDetail [itemprop="about"] > p:first-child { 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-sm); } /* H1 + intro — širší než 1. sloupec řádků níže (na zkoušku 70 % šířky
, 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
, takže procento sedí i tam. :has() omezuje H1 pravidlo jen na stránky, které mají nějaký úvod (ať už .sh-page__intro, nebo automatický p:first-child výš) — zbytek obsahu stránky (h2, p, ol, ul...) zůstává vždycky na celou šířku. */ .pageArticleDetail:has(.sh-page__intro) > header > h1, .pageArticleDetail:has([itemprop="about"] > p:first-child) > header > h1, .sh-page__intro, .pageArticleDetail [itemprop="about"] > p:first-child { 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); } /* stejný problém, stejná oprava jako .sh-segmentation-intro__title výš – .sh-value__text (homepage.css, kroky "01"/"02") je taky odstavec uvnitř [itemprop="about"], takže by mu bez tohohle scoped přebití potichu vyhrávalo obecné margin-bottom:sm místo zamýšlené 0 (mezeru mezi dvěma odstavci stejného kroku dělá .sh-value__text + .sh-value__text v homepage.css). */ .pageArticleDetail [itemprop="about"] p.sh-value__text { margin: 0; } /* .sh-value__text + .sh-value__text (homepage.css) samo o sobě prohrává - "margin:0" výš má vyšší specificitu (třída+atribut+tag) než dvě spojené třídy, takže by margin-top pro mezeru mezi odstavci stejného kroku potichu nikdy neplatil. Stejná specificita tady navíc (p.sh-value__text + p.sh-value__text), ať vyhraje. */ .pageArticleDetail [itemprop="about"] p.sh-value__text + p.sh-value__text { margin-top: var(--sh-space-xs); } /* ---------- samostatný úvod sekce (label + nadpis + text) ---------- Pro řádky BEZ druhého sloupce (obrázek/box) - třeba "Jak balíme objednávky" mezi dvěma .sh-page__row. Stejný rytmus nahoře/dole jako .sh-page__row, ať sekce navazují stejně jako všude jinde. */ .sh-page__section-intro { padding-top: var(--sh-space-section); padding-bottom: var(--sh-space-md); } /* .sh-page__row hned pod tímhle blokem má SVOJI vlastní padding-top: section - bez tohohle resetu by se sečetl s padding-bottom:md výš a mezi "Jak balíme" a další row by vznikla dvojnásobná (obří) mezera místo zamýšlených space-md. */ .sh-page__section-intro + .sh-page__row { padding-top: 0; } /* ---------- 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 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"); } /* ---------- seznam s tečkami, stejný vzor jako u článků na blogu ---------- .sh-article__toc li::marker má jinak content:none (blog.css, kvůli odkazovým seznamům typu "Vše o nákupu", kde tečku nechceme) - stejná specificita jako moje pravidlo níž, takže by prohrávalo podle pořadí souborů. .sh-page__member-tiers navíc ve selektoru = vyšší specificita, vyhraje jistě. content musí být nastavený explicitně (ne přes list-style, to by "content:none" stejně přebilo). */ .sh-article__toc .sh-page__member-tiers li::marker { content: "• "; color: var(--sh-color-accent); } /* stejný specificity problém jako u ::marker výš - .sh-article__toc ul (blog.css) má margin:0;padding:0, potřebujeme víc specifické */ .sh-article__toc .sh-page__member-tiers { padding-left: 1.25em; margin: 0 0 var(--sh-space-sm); } .sh-page__member-tiers li { margin-bottom: var(--sh-space-xs); font-size: var(--sh-text-lg); } /* telefonní čísla se nemají lámat přes dva řádky */ a[href^="tel:"] { white-space: nowrap; } /* 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; } /* !important - obecné pravidlo ".pageArticleDetail [itemprop='about'] img" výš (kvůli fotce vložené přímo do textu) má vyšší specificitu (třída+atribut+tag) než tohle (třída+tag), takže by jinak potichu přebíjelo height:100%/width:100% tady a rozbilo object-fit:cover ořez fotky do čtverce */ .sh-page__media img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover; margin: 0 !important; } /* varianta se 2 fotkami vedle sebe místo jedné (404 stránka) - každá fotka je vlastní .sh-page__media, ať se stejně jako výš stará o radius/overflow/cover; wrapper jen udělá 2sloupcový grid a na mobilu (viz media query níž) zalomí pod sebe */ .sh-page__media-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sh-space-sm); } /* ---------- 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 3 vedle sebe (stránka Výroční zprávy) – na desktopu i tabletu 3, na mobilu zpátky na výchozí 2 */ .sh-page__gallery-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 767px) { .sh-page__gallery-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 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); } /* !important ze stejného důvodu jako .sh-page__media img výš */ .sh-page__gallery-photo img { display: block !important; width: 100% !important; height: 100% !important; 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 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é
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; } /* totéž pro karty S ikonou (.sh-delivery-feature__title) - živě ověřeno v devtools, že skutečný tag je H3, ne H2 (moje předchozí verze cílila na h2, takže se vůbec netrefila - selektor prostě nic neodpovídalo). Soupeří s ".pageArticleDetail [itemprop='about'] h3 { margin: var(--sh-space-md) 0 var(--sh-space-xs); }" (třída+ atribut+typ) - proto tu typový selektor "h3" musí být taky, jinak má nižší specificitu a tiše prohrává. */ .sh-page__delivery-row h3.sh-delivery-feature__title, .sh-page__locations-grid h3.sh-delivery-feature__title { 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; } /* větší mezera pod názvem výdejny (výš by to bylo jen --sh-space-xs); stejná specificita jako pravidlo na h3 výš a je později, takže vyhrává */ .sh-page__locations-grid h3.sh-delivery-feature__title { margin-bottom: var(--sh-space-sm); } .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); } /* "Vše o nákupu" na Kontaktech – hned za kontaktní fotkou/telefonem, větší nadpis a větší odstup shora než ostatní použití .sh-page__steps-title */ .sh-page__contact + .sh-page__steps-title { margin-top: var(--sh-space-lg); font-size: var(--sh-heading-sm); } /* ---------- seznam odkazů se šipkou ("Vše o nákupu" apod.) ---------- Stejný vizuální recept jako .sh-delivery-feature__link/.read-article (viz homepage.css, blog.css) – text + šipka, podtržení jen na hover. Vlastní třída tady v pages.css, ať zůstanou soubory podle stránek oddělené. */ .sh-page__link-list { display: flex; flex-direction: column; gap: var(--sh-space-xs); margin-top: var(--sh-space-sm); } .sh-page__link { display: inline-flex; align-items: center; gap: 6px; width: fit-content; font-family: var(--sh-font-family-headings); font-size: var(--sh-text-base); font-weight: var(--sh-font-weight-bold); color: var(--sh-color-cta); text-decoration: none; transition: var(--sh-transition); } .sh-page__link i { margin-left: 4px; } .sh-page__link:hover { color: var(--sh-color-cta-hover); text-decoration: none; } /* čí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
    markeru (viz historie výše) nezávisí na list-style ani na tom, jestli
  1. 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); } /* !important ze stejného důvodu jako .sh-page__media img výš (jinak ".pageArticleDetail [itemprop='about'] img" tiše přebíjelo malou kulatou fotku na plnou šířku sloupce) */ .sh-page__contact-photo { flex: 0 0 auto; width: 96px !important; height: 96px !important; border-radius: var(--sh-radius-btn) !important; 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); } /* stejný specificity problém znovu – karty "Kurýr na adresu" / "Výdejní boxy..." / "Naše výdejny..." na Dopravě (.sh-page__delivery-row, sdílí .sh-delivery-feature__text z homepage.css) měly pod textem navíc margin-bottom: var(--sh-space-sm) z obecného [itemprop="about"] p, takže se sčítal s margin-top odkazu pod ním – na homepage (mimo [itemprop="about"]) se to neprojevuje, proto tam byla mezera menší. */ .pageArticleDetail [itemprop="about"] .sh-delivery-feature__text { margin: 0; } /* 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%; } /* FAQ jako sloupec v .sh-page__row (Kontakty) – přes celou šířku sloupce, ne dalších 70 % z už tak poloviční šířky */ .pageArticleDetail [itemprop="about"] .sh-page__row .sh-article__faq { max-width: 100%; } @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, .pageArticleDetail:has([itemprop="about"] > p:first-child) > header > h1, .sh-page__intro, .pageArticleDetail [itemprop="about"] > p:first-child { 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; } .sh-page__media-pair { grid-template-columns: 1fr; } /* ještě o něco menší odstup MEZI ŘÁDKY (margin-top) než na tabletu, ale VĚTŠÍ odstup MEZI SLOUPCI v rámci jednoho řádku (gap) - na mobilu se sloupce zalomí pod sebe a potřebují víc vzduchu, ať druhý sloupec (obrázek/box) nepůsobí jako součást prvního (např. hned za tlačítkem "Zpátky na úvod") */ .sh-page__row { gap: var(--sh-space-lg); 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); } }