/**
 Theme Name: Bistro Lhotka broker šablona
 Template: ttm-broker
 Text Domain: ttm
 Version: 4.46
 Requires at least: 6.0
 Requires PHP: 7.3
 Author: TamToMy Agency s.r.o.
 Author URI: https://www.tamtomy.cz/
*/

/* Pojistka proti horizontálnímu scrollu na mobilu — kdyby cokoliv (mřížka,
   full-bleed sekce apod.) i přes vlastní opravy o pár px přeteklo, stránka
   se kvůli tomu nesmí dát posouvat do stran. */
html, body {
	overflow-x: hidden;
	max-width: 100%;
}

/* Kotvy (#nase-sluzby, #firemni, #oslavy apod.) i JS scrollIntoView (modal
   na katalogu produktů) by jinak zajely přesně na horní hranu cíle — tu ale
   překrývá sticky (position:fixed) hlavička. scroll-padding-top posune
   přistání o výšku hlavičky + malou rezervu, funguje pro obojí bez úprav
   na jednotlivých odkazech/cílech. Hodnota kopíruje výšku hlavičky na
   stejných zlomech jako header a.logo/header padding v rodičovské šabloně. */
html {
	scroll-padding-top: 110px;
}
@media screen and (max-width: 1400px) {
	html {
		scroll-padding-top: 90px;
	}
}

/* Sdílený radius zaoblení rohů pro dlaždice/fotky napříč widgety (homepage
   "Co Vám můžeme nabídnout?" i katalog služeb na /sluzby/*). Třída .bl-radius
   je volně použitelná i v editoru (pole "Additional CSS class(es)"). */
:root {
    --bl-radius: 6px;
}
.bl-radius {
    border-radius: var(--bl-radius);
    overflow: hidden;
}
.bl-radius img {
    border-radius: var(--bl-radius);
}

/* Vlastní blok "Eyebrow" (viz blocks/eyebrow/) — stejný typografický styl
   jako .nw-eyebrow v sekci "Co Vám můžeme nabídnout?", ale bez pevné barvy —
   tu si nese barevná třída/inline styl z bloku (has-primary-color apod.),
   takže je barva v editoru volně měnitelná. */
.bl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'gotham-bold', arial, sans-serif;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.bl-eyebrow:before {
    content: '';
    flex: 0 0 auto;
    width: 28px;
    height: 2px;
    background: currentColor;
}

/* ===========================================================================
   Nový homepage widget "Co Vám můžeme nabídnout?" (shortcode
   [nabizene-sluzby-slider], přepsaný v functions.php) — vzhled podle Claude
   design (varianta B: tyrkysový pás, dlaždice s fotkou, hover "pop").
   Barvy/fonty namapované na proměnné, které už šablona používá jinde
   (var(--primary-color), var(--secondary-color), 'mikela-regular' atd.),
   ne na cizí design-systémové tokeny.
   =========================================================================== */
/* WP core/téma dává každému přímému potomku .entry-content bez tříd
   alignwide/alignfull "max-width:1480px" (selektor s řetězcem :not() má
   vyšší specificitu než prosté .nw-section) — proto předchozí pokus
   o full-bleed nefungoval (width:100vw bylo touhle max-width oříznuté).
   Přebito !important, ať sekce skutečně sahá přes celou šířku obrazovky.
   Na mobilu (do 1630px) navíc stejný WP core selektor vynucuje ještě
   width:calc(100% - 2rem) — tu samou vyšší specificitu má i tohle pravidlo,
   proto se muselo přebít i "width", ne jen "max-width", jinak sekce na
   mobilu nesahala až k okraji obrazovky. */
.entry-content > .nw-section,
.container .entry-content > .nw-section:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    max-width: none !important;
    width: 100vw !important;
}
.nw-section {
    position: relative;
    overflow: hidden;
    background: var(--primary-color);
    padding: 96px 0;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
.nw-container {
    position: relative;
}
.nw-heading {
    margin-bottom: 48px;
    max-width: 60ch;
}
.nw-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'gotham-bold', arial, sans-serif;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--black-color);
    margin-bottom: 12px;
}
.nw-eyebrow:before {
    content: '';
    width: 28px;
    height: 2px;
    background: currentColor;
}
.nw-heading h2 {
    /* Stejný styl jako běžný Nadpis 2 v editoru (viz fonts/font-face.css:
       h2 { font-size:36px; margin:0 0 30px; }, h1..h6 { font-family:
       'mikela-light'; font-weight:300; letter-spacing:0.1rem; line-height:
       1.1em; } — margin necháváme 0, tu už řeší .nw-heading obalu. */
    font-family: 'mikela-light', arial, sans-serif;
    font-weight: 300;
    font-size: 36px;
    letter-spacing: 0.1rem;
    color: var(--black-color);
    margin: 0;
    line-height: 1.1em;
}

/* Mřížka má vždy "slot" na 4 stejně široké dlaždice — ale pokud jich (např.
   na stránce jedné služby, kde se ta aktuální vynechá) je jen 3, nenatahují
   se na šířku a nezůstává prázdné místo vpravo: grid-auto-columns počítá
   stejnou šířku sloupce, jakou by měl při 4 dlaždicích, a justify-content
   pak celou (užší) skupinu vycentruje. */
.nw-grid {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * 24px) / 4);
    justify-content: center;
    gap: 24px;
}
@media (max-width: 1080px) {
    .nw-grid { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px)  {
    .nw-grid { grid-auto-flow: row; grid-template-columns: 1fr !important; }
}

.nw-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Bylo justify-content:center — obsah se centroval jako celý blok,
       takže dlaždice s delším popiskem (Raut/Catering) měla ikonu i
       nadpis jinde než dlaždice s kratším textem. Zarovnáno od shora, ať
       ikona a nadpis sedí na stejné pozici napříč všemi dlaždicemi bez
       ohledu na délku popisku pod nimi. */
    justify-content: flex-start;
    text-align: center;
    gap: 16px;
    min-height: 343px;
    padding: 48px 24px;
    text-decoration: none;
    overflow: hidden;
    border-radius: var(--bl-radius);
    box-shadow: 0 2px 10px rgba(13,10,6,.08);
    transition: transform .2s ease-out, box-shadow .2s ease;
}
.nw-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(13,10,6,.16);
}
.nw-photo {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;
    z-index: 0;
}
.nw-photo:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13,10,6,.45) 0%, rgba(13,10,6,.55) 55%, rgba(13,10,6,.78) 100%);
    transition: background .2s ease;
}
.nw-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--bl-radius);
    transition: transform .4s ease-out;
}
.nw-card:hover .nw-photo img { transform: scale(1.06); }
.nw-card > :not(.nw-photo) {
    position: relative;
    z-index: 1;
}
.nw-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 100%;
    background: var(--primary-color);
    color: var(--white-color);
    transition: transform .2s ease-out, background .2s ease;
}
.nw-icon i { font-size: 26px; }
.nw-card:hover .nw-icon {
    transform: scale(1.14) rotate(-6deg);
}
.nw-title {
    margin: 0;
    font-family: 'mikela-regular', arial, sans-serif;
    font-size: 26px;
    line-height: 1.15;
    color: var(--white-color);
}
.nw-body {
    margin: 0;
    font-family: 'gotham-book', arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255,255,255,.88);
    max-width: 30ch;
}
.nw-cta {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nw-arrow-round, .nw-arrow-square { display: none !important; }
.nw-arrow-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'gotham-bold', arial, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 12px;
    color: var(--primary-color);
}
.nw-arrow-text i {
    font-size: 13px;
    color: var(--primary-color);
    transition: transform .2s ease-out;
}
.nw-card:hover .nw-arrow-text i {
    transform: translateX(6px);
}

/* Rodičovská šablona pozicuje .photo-broker (slider vpravo) přes
   position:absolute; top:50px; bottom:50px — výška se tak dopočítává podle
   toho, kde prohlížeč najde containing block (.broker-content, position:
   relative + display:table). V Safari .broker-content i přes explicitní
   height:100vh reálně vykreslí jen výšku podle obsahu (výrazně méně než
   100vh), takže slider s výškou odvozenou od 100vh přeteče do sekce pod
   ním. Řešení: height v procentech se počítá z REÁLNÉ výšky rodiče, ať je
   jakákoliv (100vh v Chrome, zmenšená na obsah v Safari), takže se slider
   vždy vejde přesně mezi 50px odshora a 50px odspoda.

   Pozadí boxu musí přesně odpovídat pozadí samotných snímků — obrázky se
   do boxu vkládají přes object-fit:contain (viz .photo-slideshow
   .photo-slide img), takže po stranách/nad a pod zůstává volné místo a to
   se má se snímkem slít v jednu plochu. Snímky slideru mají tyrkysové
   pozadí #3bccc5 (pozor: je to jiný tyrkys než --primary-color #40e0d0
   používaný jinde na webu, proto natvrdo, ne přes proměnnou). */
.welcome-section .broker-content .photo-broker {
    bottom: auto;
    height: calc(100% - 100px);
    overflow: hidden;
    background: #3bccc5;
}


.welcome-section .broker-content .center-all .broker-name span{
    color: var(--primary-color);
}
.welcome-section .broker-content .center-all .broker-name span.position{
    color: var(--black-color);
}

.welcome-section .broker-content .center-all .broker-name span.name,
.welcome-section .broker-content .center-all .broker-name span.surname{
    text-transform: none;
}

body:not(.home) .entry-content h3 {
    font-family: 'mikela-regular', arial, sans-serif;
    font-size: 1.5em;
}

body:not(.home) .entry-content h4 {
    font-family: 'mikela-bold', arial, sans-serif;
    font-size: 1.25em;
}

body:not(.home) .entry-content h5 {
    font-family: 'mikela-bold', arial, sans-serif;
    font-size: 1.125em;
}

body.render-bg-assets--custom :is(.big-circle, .small-circle, .middle-circle) {
    opacity: .04;
}

body.render-bg-assets--custom .glitch:after, body.render-bg-assets--custom .glitch .wp-block-group__inner-container:before {
    filter: opacity(.12);
}

.news-item .text-field :is(h2, h3),
.ar-item .text-field :is(h2, h3) {
    font-family: 'gotham-bold', arial, sans-serif;
    font-size: 20px;
    text-transform: none;
    letter-spacing: 0;
}

.photo-slideshow {
    display: grid !important;
    grid-template-areas: "img";
    grid-template-rows: minmax(0, 1fr);
}

/* Každý snímek je teď vlastní odkaz (.photo-slide), ne přímo <img> —
   umožňuje mít pro každý snímek jiný cílový odkaz (dřív celý slider
   vedl jen na jednu společnou adresu). */
.photo-slideshow .photo-slide {
    grid-area: img;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .4s ease-in-out;
}

.photo-slideshow .photo-slide img {
    display: block;
    width: 100%;
    height: 100%;
    /* Bylo object-fit:cover — box .photo-broker má na různých zařízeních/
       breakpointech různý poměr stran a slidy s víc obsahem (např.
       "Hledáme posily do týmu!") se pak různě ořezávaly podle toho, co si
       zrovna prohlížeč/zařízení spočítalo za výšku boxu. "contain" obrázek
       nikdy neořízne, jen zmenší — spolehlivé na jakémkoli rozlišení.
       Pozadí boxu (viz .photo-broker) je nastavené na stejný tyrkys jako
       pozadí samotných obrázků, takže případný okraj není vidět. */
    object-fit: contain;
    height: -webkit-fill-available;
}

/* Nad 1024px má slide vyplnit celou plochu bez tyrkysových pruhů, proto
   tady cover. Poměr stran slidu se na desktopu mění podle výšky okna
   (1920×1080 → 740×980 = 0,76; 1440×900 → 704×800 = 0,88; 1366×768 →
   667×668 = 1,00), takže se vždycky něco ořízne — snímky se proto dělají
   v poměru 0,88 (1760×2000 px), který leží uprostřed rozsahu a drží ořez
   do ~14 %. Veškerý text a odznaky musí být ve středních 85 % plochy.

   Pod 1024px zůstává contain: tam je slide naležato (na iPadu 992×500),
   cover by z nápisů usekal půlku a pruhy stejně nejsou vidět, protože
   pozadí boxu má stejný tyrkys jako snímky (viz .photo-broker). */
@media screen and (min-width: 1025px) {
    .photo-slideshow .photo-slide img {
        object-fit: cover;
    }
}

.photo-slideshow .photo-slide:is(.is-visible, :only-child),
.photo-slideshow:not(:has(.photo-slide.is-visible)) .photo-slide:first-child {
    opacity: 1;
}

html {
    scrollbar-gutter: stable;
}

body:has(dialog[open]) {
    overflow: clip;
}

.PopUp {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    align-items: center;
    gap: 0 1em;
    width: 64em;
    border: 0;
    padding: 0;
    box-shadow: 0 0 4em rgba(0,0,0,.12);
    transition: all .4s ease-in-out allow-discrete;

    @media(max-width: 640px) {
        grid-template-columns: 1fr;
    }
}

.PopUp:not(:has(figure)) {
    grid-template-columns: 1fr;
    width: 40em;
}

.PopUp:not([open]) {
    display: none;
    pointer-events: none;
    opacity: 0;
}

@starting-style {
    .PopUp {
        opacity: 0
    }
}

.PopUp button[data-close-popup] {
    position: absolute;
    inset: 0 2em auto auto;
    width: 3em;
    height: 3em;
    background: #000;
    color: #fff;
    border: 0;
    cursor: pointer;
}

.PopUp button[data-close-popup]:hover {
    opacity: .8;
}

.PopUp-content {
    padding: 4em 2em;
    line-height: 1.5;

    @media(max-width: 640px) {
        padding: 5em 1.5em 2.5em;
    }
}

.PopUp figure {
    display: flex;
    margin: 0;
}

.PopUp figure img {
    width: 100%;
    height: 100%;
    min-height: 25em;
    object-fit: cover;
}

dialog::backdrop {
    background: rgba(255,255,255,.8);
    backdrop-filter: blur(.5rem);
    transition: all .4s ease-in-out allow-discrete;
}

dialog:not([open])::backdrop {
    background: rgba(255,255,255,0);
    backdrop-filter: blur(0);
}

@starting-style {
    dialog::backdrop {
        background: rgba(255,255,255,0);
        backdrop-filter: blur(0);
    }
}

.AppInfoBar {
    position: relative;
    padding: .25em 0;
    font-size: 1em;
    color: white;
    background: var(--infoBarBackground);
    z-index: 12
}

.AppInfoBar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5em;
    position: relative;
    max-width: 1480px;
    margin: 0 auto;
    color: black;
    font-family: gotham-bold, sans-serif;

    @media(max-width: 1630px) {
        width: calc(100% - 2rem);
    }

}

.AppInfoBar-inner a[href] {
    text-decoration: underline;
}

.AppInfoBar-content {
    padding: .375em 1em;
}

.AppInfoBar-content p {
    margin: .25rem 0;
}
.AppInfoBar-content a {
    color: black;
    transition: opacity 0.3s ease;

    &:hover {
        opacity: .45;
    }
}
.AppInfoBar-closer {
    background: transparent;
    border: 0;
    color: black;
    font-family: gotham-bold, sans-serif;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.3s ease, scale 0.3s ease;

    &:hover {
        opacity: .45;
        scale: 1.25;
    }
}

/* Header má nižší/kompaktnější výšku než rodičovská šablona (padding
   12px nahoře i dole) — necháváme kompaktní, jen srovnáno na 0 z obou
   stran (dřív bylo 0 nahoře / 12px dole, proto obsah vypadal posunutý). */
header {
    padding: 0 !important;
}

/* Nový vizuál hlavičky: telefonní kontakt v horním panelu skrýt, zůstává jen e-mail.
   Cílí na skutečný odkaz (tel:), ne na pozici v DOMu — funguje bez ohledu na to,
   jestli je vyplněný mobil, pevná linka, nebo obojí. */
header .broker-contact li:has(a[href^="tel:"]) {
    display: none;
}

/* Modré popisky "Napište e-mail" (nad e-mailem) a "Zobrazit" (nad MENU)
   v horní liště jsou navíc — necháváme jen samotný e-mail a text MENU. */
header .broker-contact li .marvel span.small-text {
    display: none;
}
header .header-grid .box.last .respo-btn .box span.small {
    display: none;
}

/* Stejná úprava v postranním výsuvném menu (.side-panel) — jiná šablonová
   funkce (main_broker_contact), ale stejná HTML struktura. */
.side-panel .broker-contact li:has(a[href^="tel:"]) {
    display: none;
}

/* Odkazy v postranním menu dědí font-family "gotham-bold" z <ul class="bold">
   (font-family se dědí na potomky) a byly mnohem menší, než ukazuje návrh
   (14px/12px místo 18px/16px). Panel má stejnou šířku jako v návrhu (380px),
   takže jdou převzít stejné velikosti. Aktuální stránka zůstává tučná
   (gotham-bold), ostatní položky běžným řezem (gotham-book). */
.side-panel .main-menu > li > a {
    font-family: 'gotham-book', arial, sans-serif;
    font-size: 18px;
    color: var(--black-color);
}
.side-panel ul > li.current-menu-item > a {
    font-family: 'gotham-bold', arial, sans-serif;
    color: var(--primary-color);
}
/* "O nás" odkazuje na kotvu "/#onas" na homepage, takže si ji WordPress splete
   s aktuální stránkou "Domů" a označí OBĚ jako current-menu-item. Šablona pak
   tu druhou (O nás) natvrdo zešedí (jiný CSS pravidlo, vyšší specificita), aby
   nevypadaly obě jako aktivní zároveň — výsledek ale vypadá jako náhodná chyba,
   protože "O nás" pak nesedí s ostatními běžnými položkami. Sjednoceno se
   zbytkem menu (stejná barva/řez jako Dokumenty, Aktuality apod.). */
.side-panel ul > li.current-menu-item ~ li.current-menu-item > a[href*="/#"]:not(:hover) {
    color: var(--black-color);
    font-family: 'gotham-book', arial, sans-serif;
}
.side-panel .main-menu > li > a:hover {
    color: var(--primary-color);
}
/* Šablona má vlastní hover pravidla pro tenhle "duplicitní current-menu-item"
   případ (barví na černou, viz komentář výše) — ta by jinak přebila tyrkysový
   hover i po opravě. Vynuceno, aby "O nás" mělo stejný hover jako sourozenci. */
.side-panel ul > li.current-menu-item ~ li.current-menu-item > a:hover {
    color: var(--primary-color) !important;
}
.side-panel .menu-item-has-children.is-open > a {
    font-family: 'gotham-bold', arial, sans-serif;
}
.side-panel .menu-item-has-children ul.sub-menu li a {
    font-family: 'gotham-book', arial, sans-serif;
    font-size: 16px;
    color: #524b45;
}
.side-panel .menu-item-has-children ul.sub-menu li.current-menu-item a,
.side-panel .menu-item-has-children ul.sub-menu li a:hover {
    font-family: 'gotham-bold', arial, sans-serif;
    color: var(--primary-color);
}
.side-panel .broker-contact li .marvel span.big-text {
    font-size: 16px;
}

/* Logo v panelu se dřív roztahovalo na 100 % šířky (width:100%), takže
   vypadalo obrovské. Návrh má logo v pevné výšce 54px vedle tlačítka Zavřít
   na stejném řádku, s malou (ne vycentrovanou) linkou pod ním. */
.side-panel a.logo {
    width: auto;
    display: inline-block;
}
.side-panel a.logo img {
    width: auto;
    height: 54px;
}
.side-panel a.logo:after {
    margin: 20px 0 30px 0;
    width: 56px;
}
.side-panel .close {
    position: absolute;
    top: 24px;
    right: 24px;
    margin: 0;
    z-index: 2;
}

/* Accordion pro položky s podpoložkami ve výsuvném menu (.side-panel).
   Sbalovací chování je obecné — váže se na standardní WP třídu
   "menu-item-has-children", ne na konkrétní název položky, takže funguje
   pro cokoliv, co admin v Vzhled → Menu vnoří pod libovolnou položku. */
.side-panel .menu-item-has-children > a {
    position: relative;
    padding-right: 28px;
}
.side-panel .menu-item-has-children > a:after {
    content: '';
    position: absolute;
    right: 6px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    transition: transform var(--transition, 350ms);
}
.side-panel .menu-item-has-children.is-open > a:after {
    transform: translateY(-30%) rotate(-135deg);
}
.side-panel .menu-item-has-children > ul.sub-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition, 350ms) ease, margin var(--transition, 350ms) ease;
    /* Dle návrhu: bez šedého boxu, jen odsazení a tyrkysová linka vlevo.
       Margin musí být 0, dokud je zavřené — i při max-height:0 by margin
       zůstal v toku a natahoval by řádek "Služby" o pár px navíc oproti
       ostatním položkám (přesně tenhle rozdíl v USER zpětné vazbě). */
    background: transparent;
    padding-left: 16px;
    border-left: 2px solid var(--primary-color);
    margin: 0 0 0 4px;
}
.side-panel .menu-item-has-children.is-open > ul.sub-menu {
    margin: 4px 0 4px 4px;
}
.side-panel .menu-item-has-children.is-open > ul.sub-menu {
    max-height: 600px;
}
.side-panel .menu-item-has-children > ul.sub-menu li {
    border-bottom: none;
}
.side-panel .menu-item-has-children > ul.sub-menu li a {
    padding: 8px 0;
}

/* Panel se dřív vysouval zleva (left:-500px → left:0), návrh ho chce
   vysouvat zprava. Přepnuto jen zde, zbytek chování (JS toggle přes třídu
   .display, šířka, stín) zůstává beze změny. */
.side-panel {
    left: auto;
    right: -500px;
}
.side-panel.display {
    left: auto;
    right: 0;
}

/* Sociální ikony v postranním menu byly hranaté s obrysem — sjednoceno
   s plnými tyrkysovými kolečky, jaké se používají v hlavičce a patičce. */
.side-panel .social-menu li a {
    border-radius: 100%;
    border: none;
    background: var(--primary-color);
    color: var(--white-color);
}
.side-panel .social-menu li a:hover {
    background: var(--secondary-color);
    border: none;
}

/* Patička: hodnota kontaktu (adresa/telefon/e-mail) byla černá
   (var(--black-color)) — v ttm-broker/style.css počítaná pro světlý kontext.
   V nové tmavé patičce byla neviditelná (černá na černé). Barva stejná jako
   zbytek tlumeného textu v patičce (ne bílá). Opraveno jen zde, hlavička
   a postranní menu mají vlastní (světlé) pozadí a zůstávají beze změny. */
.section-footer .broker-contact li .marvel span.big-text {
    color: rgba(255, 255, 255, 0.55);
    font-family: 'gotham-book', arial, sans-serif;
    font-weight: normal;
}

/* Dle návrhu má patička obsahovat jen adresu, mobil a e-mail — bez otvírací
   doby. Cílí na skutečnou ikonu dané položky, ne na pozici v seznamu. */
.section-footer .broker-contact li:has(.fa-clock) {
    display: none;
}

/* Dle návrhu je kontaktní řádek v patičce jen ikona + hodnota, jedna řádka —
   bez zeleného popisku nad hodnotou (ten patří k hlavičce/menu, kde
   ho stejná šablonová funkce taky vypisuje a tam zůstává). */
.section-footer .broker-contact li .marvel span.small-text {
    display: none;
}
.section-footer .broker-contact li .marvel {
    padding: 14px 0 14px 46px;
}
.section-footer .broker-contact li .marvel i {
    width: 34px;
    height: 34px;
    line-height: 34px;
    top: 50%;
    transform: translateY(-50%);
}
.section-footer .broker-contact li {
    border-bottom: none;
    margin-bottom: 4px;
}

/* Sociální ikony ve widgetu patičky neměly žádný styl (holý seznam
   s odrážkami) — stejný vzhled tyrkysových koleček jako v hlavičce. */
.section-footer .social-menu {
    display: inline-flex;
    gap: 12px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}
.section-footer .social-menu a[href] {
    text-decoration: none;
}
.section-footer .social-menu a[href] i {
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 100%;
    background: var(--primary-color);
    color: var(--white-color);
    transition: 350ms;
}
.section-footer .social-menu a[href] i:before {
    font-size: 18px;
}
.section-footer .social-menu a[href]:hover i {
    background: var(--secondary-color);
}

/* Patička: sladit velikosti a barvy s vizuální hierarchií z návrhu.
   Základ patičky dědil 12px a čistě bílou barvu pro úplně vše (nadpisy
   i odkazy stejně), takže to nemělo žádný kontrast. Nadpisy zůstávají výrazné
   bílé/tučné (beze změny), odkazy a popisek jsou teď tlumeně šedé s tyrkysovým
   hoverem — a vše o trochu čitelnější velikosti. */
.section-footer {
    font-size: 14px;
}
.ar-foo-flex .ar-item h2 {
    font-size: 20px;
}
.ar-foo-flex .ar-item p {
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
}
.ar-foo-flex .ar-item ul.menu li a {
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
    padding: 8px 0;
}
/* ttm-broker/style.css dává první položce vlastní pravidlo (padding: 0 0 5px 0)
   se stejnou specificitou přes :nth-child(1) — přebít, ať jsou mezery mezi
   všemi položkami stejné. */
.ar-foo-flex .ar-item ul.menu li:nth-child(1) a {
    padding: 8px 0;
}
.ar-foo-flex .ar-item ul.menu li a:hover {
    color: var(--primary-color);
    padding-left: 0;
}
.ar-foo-flex .ar-item ul.menu li {
    border-bottom: none;
}
.section-footer .broker-contact li .marvel span.big-text {
    font-size: 15px;
}

/* Řádek "Na mls / Na chuť / Na zub" + tlačítko "Nabídněte si!" byl
   natvrdo roztažený na 4 stejně široké sloupce (width:25% !important),
   takže vypadal jako rovnoměrná mřížka přes celou šířku sloupce. Návrh má
   kompaktní řádek s přirozenou šířkou položek podle textu — vráceno na
   výchozí (auto) šířku z rodičovské šablony. */
.estate-info-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    margin-top: 24px;
}
/* Než se dotáhne vlastní font (Mikela/Gotham), "Na mls/Na chuť/Na zub" se
   krátce vykreslí v širším náhradním fontu — na šířkách nad 1024px (kde
   má trojice sedět v jednom řádku) to samo o sobě umí přetéct na druhý
   řádek přes flex-wrap:wrap, a i po dotažení fontu to zůstane rozlámané,
   dokud se stránka neobnoví. Nad 1024px proto zalomení úplně zakázáno. */
@media screen and (min-width: 1025px) {
    .estate-info-grid {
        flex-wrap: nowrap;
    }
}
.estate-info-grid .box {
    width: auto;
    flex: 0 0 auto;
    padding: 0 20px;
}
.estate-info-grid .box:first-child {
    padding-left: 0;
}

/* Od 1400px dolů zmenšuje rodičovská šablona v trojici fonty, ale sloupec
   vedle slideru se zároveň zužuje — na nejužším konci (1025px) měla trojice
   k dispozici 447px a potřebovala 441px. Zmenšené boční odsazení položek jí
   dá rozumnou rezervu (401px). */
@media screen and (min-width: 1025px) and (max-width: 1400px) {
    .estate-info-grid .box {
        padding: 0 12px;
    }
    .estate-info-grid .box:first-child {
        padding-left: 0;
    }
}

/* Trojice i s tlačítkem "Nabídněte si!" se do textového sloupce vedle
   slideru na jeden řádek nevejde — tlačítko vylézalo ven a slider ho
   překrýval. V návrhu z Claude designu je celá čtveřice na jednom řádku,
   jenže tam má stránka plnou šířku; tady se sloupec dělí se sliderem a na
   jeden řádek by to vyšlo až někde nad 2000px (změřeno: 1440px → potřeba
   738px, k dispozici 654px; 1700px → 738 vs 690). Tlačítko proto klesá pod
   trojici. Pod 1024px se stejně skládá všechno pod sebe, takže se to chová
   konzistentně.

   Schválně přes grid, ne přes flex-wrap: trojice se kvůli zalomení nesmí
   sama rozsypat, když se text na okamžik vykreslí v širším náhradním fontu
   (viz flex-wrap:nowrap výše) — grid má počet sloupců daný napevno, takže
   tenhle problém principiálně nemá. */
@media screen and (min-width: 1025px) {
    .estate-info-grid {
        display: grid;
        grid-template-columns: repeat(3, auto);
        justify-content: start;
        row-gap: 16px;
    }
    /* Poslední položka ve svém řádku už nemá co oddělovat. */
    .estate-info-grid .box:nth-child(3) {
        border-right: none;
    }
    /* Cíleně přes .box-cta, ne přes :last-child — když se v administraci
       smaže text i odkaz tlačítka "Nabídněte si!", stane se posledním
       prvkem "Na zub" a ten by si vzal grid-column: 1 / -1, tedy by spadl
       na vlastní řádek pod zbylou dvojici. Třída je zdvojená (.box.box-cta)
       kvůli specificitě: rodičovská šablona dává poslednímu boxu
       (.estate-info-grid .box:nth-last-child(1)) place-items:center, což by
       samotné .estate-info-grid .box-cta přebilo a tlačítko by se
       v roztaženém řádku vycentrovalo doprostřed. */
    .estate-info-grid .box.box-cta {
        grid-column: 1 / -1;
        justify-items: start;
        padding-left: 0;
    }
}

/* Na mobilu i na tabletu (iPad apod.) se "Na mls / Na chuť / Na zub" (auto
   šířka podle textu, vedle sebe) nevejde na jeden řádek a rozlámalo se to do
   schodovitého layoutu — proto skládáme pod sebe, s oddělovací linkou dole
   místo vpravo, až do 1024px (pokrývá i tablety, ne jen mobilní telefony). */
@media screen and (max-width: 1024px) {
    .estate-info-grid {
        flex-direction: column;
    }
    .estate-info-grid .box {
        padding: 14px 0;
    }
    .estate-info-grid .box:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid rgba(0,0,0,.1);
    }
    /* Tlačítko "Nabídněte si!" nemá spodní linku ani spodní padding —
       dorovnán jen horní odstup, ať je mezera nad ním stejná jako mezi
       ostatními položkami. Boční odsazení ruší pravidlo výše, aby
       tlačítko lícovalo se sloupcem nad ním. */
    .estate-info-grid .box-cta {
        padding: 14px 0 0;
    }
}

/* Rodičovská šablona přepíná úvodní slider (fotka/dárkový poukaz vpravo)
   z 50% šířky na 100% na výšku pod textem až od 800px dolů — na tabletech
   (iPad Air apod., ~768-820px) zůstává těsně nad touto hranicí, takže
   slider zůstává jen na cca polovině šířky a jeho obsah (nadpis, ikonka)
   se do něj nevejde. Stejné pravidlo proto vynucujeme už od 1024px. */
@media screen and (max-width: 1024px) {
    .welcome-section .broker-content {
        display: block;
    }
    .welcome-section .broker-content .photo-broker {
        position: relative;
        width: 100%;
        height: 500px;
        background-position: top;
        margin-top: 32px;
    }
    .welcome-section .broker-content .center-all {
        padding: 40px 0 24px;
    }
    .welcome-section .broker-content .center-all .broker-name {
        width: 100%;
    }
    .welcome-section .small-circle {
        display: none;
    }
    .welcome-section .big-circle {
        left: -10%;
        bottom: 15%;
        width: 300px;
        height: 300px;
    }
}

/* Dle návrhu má "Street view 360°" tyrkysový text (na rozdíl od "Rezervace
   stolu", která zůstává bílá). */
a.btn.bold.home_btn2 {
    color: var(--primary-color);
}

/* Třetí tlačítko v hlavičce ("Objednej si cukroví") — tyrkysové pozadí,
   žlutý rámeček, černý verzálkový text. Rámeček je schválně přes inset
   box-shadow, ne přes border: v návrhu mají všechna tři tlačítka stejnou
   vnější výšku, a border by tomuhle 8 px navíc přidal (a rozhodil zarovnání
   řádku). Barvy jsou natvrdo — jsou vlastní tomuhle tlačítku a neodpovídají
   proměnným šablony (--primary-color je jiný odstín tyrkysové).
   Text i odkaz se nastavují v administraci, viz page-welcome.php. */
a.btn.bold.home_bt4.cukrovi {
    background: #4fb0ba;
    color: var(--black-color);
    box-shadow: inset 0 0 0 4px #f5c444;
    text-transform: uppercase;
}
.bio-button a {
    display: block;
    text-align: center;
	 appearance: none;
  -webkit-appearance: none;
}

.bio-button {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 20px;
    align-items: flex-end;
	 appearance: none;
  -webkit-appearance: none;
}
input.wpcf7-form-control.wpcf7-date.wpcf7-validates-as-required.wpcf7-validates-as-date, form p label .wpcf7-form-control:not(.wpcf7-acceptance) {
    position: relative;
    width: 100%;
    border: 2px solid var(--primary-color);
    color: #707070;
    padding: 13px 13px 13px 50px;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
    transition: 350ms;
}
span.wpcf7-form-control-wrap input, span.wpcf7-form-control-wrap select{
    direction: ltr;
    overflow-clip-margin: 0px !important;
    overflow: clip !important;
    padding-block: 1px;
    padding-inline: 2px;
	background:white;
	  appearance: none;
  -webkit-appearance: none;
}
.field__help {
  margin-top: 6px;
  font-size: 0.875rem;       /* menší, čitelný i na mobilu */
  line-height: 1.4;
  color: #6b7280;            /* neutrální šedá */
}
@media screen and (max-width: 799px) {

	.welcome-section {
    padding-top: 0rem ;
}
	.under-header {
        display: block;
        height: 70px !important ;
    }
}

@media screen and (max-width: 1400px) {
    body.home .under-header {
        display: block;
        height: 50px;
    }
}

@media screen and (max-width:425px) {
	.bio-button {
		margin-bottom:1.5rem !important;
	}
}

@media only screen and (max-width: 425px) and (min-width: 320px) {
	/* Byly pod sebou (flex-direction:column) — dle zpětné vazby mají být
	   vedle sebe i na mobilu. */
	.bio-button {
	display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 8px;
	}
.bio-button a {
    margin: 0 !important;
    flex: 1 1 0;
}
}

@media only screen and (max-width: 768px) and (min-width: 425px) {
.bio-button {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-bottom: 1rem;
}
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
.bio-button {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
}
	.bio-button a {
    margin: 0 !important;
    flex: 1 1 0;
}
}

@media only screen and (max-width: 1440px) and (min-width: 1024px) {
.bio-button {
    display: flex;
    flex-direction: row;
	justify-content: space-around !important;
	flex-wrap: wrap;
	gap:0.2rem;

}
}

/* Svislý text vlevo (menu "is-vertical" z page-welcome.php, vykreslené
   otočené o 180°) zasahoval nahoře pod pevnou (position:fixed) hlavičku —
   posunuto o kus níž, aby s hlavičkou nekolidovalo. */
.is-vertical {
    top: 40px;
}

/* ===========================================================================
   Homepage story sekce "Poctivá domácí výroba" (podle Claude design) —
   dva sloupce (text vlevo / fotky vpravo), stejné jako předtím editovatelné
   Gutenberg bloky, jen doplněné o className "hp-story"/"hp-story-photos"
   pro cílený CSS zápis.
   =========================================================================== */
.hp-story {
	column-gap: 5rem;
	align-items: center;
}

.hp-story h2.wp-block-heading {
	font-family: 'mikela-regular', arial, sans-serif;
	font-size: 2.25rem;
	margin: 0 0 1.5rem;
}

.hp-story h3.wp-block-heading {
	font-family: 'mikela-regular', arial, sans-serif;
	font-size: 1.5rem;
	margin: 2rem 0 0.75rem;
}

.hp-story p {
	max-width: 52ch;
}

.hp-story-photos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.hp-story-photos figure {
	grid-column: 1 / -1;
	margin: 0;
}

.hp-story-photos figure:first-child img {
	width: 100%;
	height: 300px;
	object-fit: cover;
	display: block;
	box-shadow: 0 12px 32px rgba(0,0,0,.16);
}

.hp-story-photos figure:last-child img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
	box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

@media screen and (max-width: 782px) {
	.hp-story {
		column-gap: 0;
	}
}

/* ===========================================================================
   Kontaktní formulář v patičce (post ID 30) — doplněná pole "O jakou službu
   máte zájem?" (select) a "Termín" (date) podle Claude designu.
   =========================================================================== */

/* span.wpcf7-form-control-wrap select{appearance:none} (výše v souboru) sundá
   nativní šipku ze všech CF7 selectů na webu (i těch starších, cukroví/MDŽ) —
   vrátíme ji zpět jako vlastní tyrkysovou šipku dolů. */
span.wpcf7-form-control-wrap select.wpcf7-form-control {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2340e0d0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 16px;
	padding-right: 44px;
	cursor: pointer;
}

/* Pole "Termín" má nad sebou vlastní popisek ("Termín *") uvnitř téhož
   <label>, takže výchozích top:13px (počítáno od horního okraje labelu)
   by dalo ikonu kalendáře mimo střed vstupního pole. Dorovnáno na skutečný
   střed inputu (neřešeno přes .ar-icon2 — ta je nastavená pro jiný,
   dvouřádkový popisek v jiných formulářích a měnit by rozbila ty).*/
form p label.hp-termin-field .ar-icon {
	top: 32px;
}

/* ===========================================================================
   Katalog produktů na stránkách rodičovských služeb (/sluzby/sladka-vyroba/
   apod.) — rozcestník na dceřiné služby (Dorty, Zákusky…) + mřížka produktů
   + modální náhled produktu, viz bl_render_service_catalog() ve functions.php,
   vkládané shortcodem [katalog-produktu] přímo do obsahu stránky (uvnitř
   .entry-content), takže potřebuje stejný max-width override jako .nw-section
   na homepage.
   =========================================================================== */
.entry-content > .sr-section,
.container .entry-content > .sr-section:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
	max-width: none !important;
	width: 100vw !important;
}
.sr-section {
	position: relative;
	overflow: hidden;
	background: var(--primary-color);
	padding: 64px 0 48px;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}
.sr-section h2 {
	font-family: 'mikela-light', arial, sans-serif;
	font-weight: 300;
	font-size: 36px;
	letter-spacing: 0.1rem;
	color: var(--black-color);
	margin: 0 0 32px;
	line-height: 1.1em;
}

.sr-cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 20px;
	min-width: 0;
}
.sr-cat-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: inherit;
	min-width: 0;
}
.sr-cat-photo {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--bl-radius);
	background: rgba(0,0,0,.08);
	box-shadow: 0 2px 10px rgba(13,10,6,.1);
	transition: box-shadow .2s ease, transform .2s ease-out;
}
.sr-cat-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease-out;
}
.sr-cat-card:hover .sr-cat-photo img { transform: scale(1.06); }
.sr-cat-card[data-active="true"] .sr-cat-photo {
	box-shadow: 0 14px 34px rgba(13,10,6,.2);
	transform: translateY(-4px);
}
.sr-cat-label {
	font-family: 'gotham-bold', arial, sans-serif;
	font-size: 16px;
	color: var(--black-color);
}

.sr-products {
	padding: 64px 0;
}
.sr-prod-panel + .sr-prod-panel {
	margin-top: 0;
}
.sr-prod-heading {
	display: flex;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 32px;
}
.sr-eyebrow {
	font-family: 'gotham-bold', arial, sans-serif;
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--primary-color);
}
.sr-prod-heading h2 {
	font-family: 'mikela-regular', arial, sans-serif;
	font-size: 32px;
	color: var(--black-color);
	margin: 0;
	line-height: 1.15;
}
.sr-prod-empty {
	color: #524b45;
	font-family: 'gotham-book', arial, sans-serif;
}

.sr-prod-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 24px;
	min-width: 0;
}
.sr-prod-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	text-align: center;
	font: inherit;
	min-width: 0;
}
.sr-prod-photo {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: var(--bl-radius);
	overflow: hidden;
	background: #f7f6f4;
	box-shadow: 0 2px 10px rgba(13,10,6,.08);
	transition: transform .2s ease-out, box-shadow .2s ease;
}
.sr-prod-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s ease-out;
}
.sr-prod-card:hover .sr-prod-photo {
	transform: translateY(-4px);
	box-shadow: 0 14px 34px rgba(13,10,6,.16);
}
.sr-prod-card:hover .sr-prod-photo img { transform: scale(1.08); }
.sr-prod-name {
	font-family: 'gotham-bold', arial, sans-serif;
	font-size: 15px;
	color: var(--black-color);
}

/* --- Modální náhled produktu --- */
/* Od doby, co [katalog-produktu] běží jako shortcode uvnitř .entry-content,
   dopadá na overlay stejné WP core omezení jako na .nw-section/.sr-section
   apod. (.entry-content > :not(...) { max-width:1480px }) — bez override by
   se "fixed" overlay reálně vykreslil jen v šířce obsahu, ne přes celý displej. */
.entry-content > .sr-modal-overlay {
	max-width: none !important;
}
.sr-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	width: auto;
	max-width: none;
	margin: 0;
	background: rgba(13,10,6,.6);
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.sr-modal-overlay[data-open="true"] {
	display: flex;
}
.sr-modal-dialog {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	max-width: 860px;
	width: 100%;
	max-height: 90vh;
	overflow: auto;
	background: var(--white-color);
	border-radius: 8px;
	box-shadow: 0 24px 60px rgba(0,0,0,.3);
}
.sr-modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 1;
	width: 36px;
	height: 36px;
	border-radius: 100%;
	border: none;
	background: var(--white-color);
	color: var(--black-color);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0,0,0,.16);
}
.sr-modal-photo {
	background: #f7f6f4;
	aspect-ratio: 1 / 1;
	align-self: center;
}
.sr-modal-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.sr-modal-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 32px;
}
.sr-modal-category {
	font-family: 'gotham-bold', arial, sans-serif;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--primary-color);
}
.sr-modal-name {
	font-family: 'mikela-regular', arial, sans-serif;
	font-size: 26px;
	color: var(--black-color);
	margin: 0;
	line-height: 1.15;
}
.sr-modal-desc {
	font-family: 'gotham-book', arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #524b45;
	margin: 0;
}
.sr-modal-flags {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 8px;
	border-top: 1px solid #e2deda;
}
/* Když jsou "Bez laktózy"/"Bez lepku" oba skryté (produkt nemá ani jednu
   variantu), schová se i tenhle popisek — jinak by zůstal osamocený
   nadpis bez ničeho pod ním. */
.sr-modal-flags:not(:has(.sr-flag:not([hidden]))) {
	display: none;
}
.sr-flags-row {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}
.sr-flag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: 'gotham-bold', arial, sans-serif;
	font-size: 13px;
}
.sr-flag[hidden] { display: none; }
.sr-flag[data-ok="true"] { color: #2e9e6b; }
.sr-flag[data-ok="false"] { color: #b4ada6; }
.sr-modal-allergens {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 8px;
	border-top: 1px solid #e2deda;
}
.sr-allergens-label,
.sr-flags-label {
	font-family: 'gotham-bold', arial, sans-serif;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #8a817a;
}
.sr-allergens-list {
	font-family: 'gotham-book', arial, sans-serif;
	font-size: 14px;
	color: #524b45;
}
.sr-modal-buy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 8px;
	padding: 14px 20px;
	background: var(--primary-color);
	color: var(--white-color);
	font-family: 'gotham-bold', arial, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 13px;
	text-decoration: none;
	border-radius: 4px;
	transition: background .2s ease;
}
.sr-modal-buy:hover {
	background: var(--secondary-color);
}

@media (max-width: 700px) {
	.sr-modal-dialog {
		grid-template-columns: 1fr;
	}
	.sr-modal-photo {
		min-height: 180px;
	}
}

/* ===========================================================================
   "Ouško" — fixní tlačítko na pravé straně (.ar-smooth, def. v ttm-broker/
   style.css). Přepis přesně podle Claude designu (App.jsx, AktualityTab /
   "Sticky Eshop tab"): černá dlaždice, ikona nákupní tašky 20px, svislý
   tučný verzálkový text, radius 10px jen na levé straně, jemný stín.
   =========================================================================== */
.ar-smooth {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	width: auto;
	top: 42%;
	background: var(--black-color);
	padding: 16px 8px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	border: 1px solid var(--white-color);
	border-right: none;
	box-shadow: 0 8px 20px rgba(13, 10, 6, .10);
	z-index: 40;
}
.ar-smooth > i {
	font-size: 20px;
	line-height: 1;
}
.ar-smooth .ar-text {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	margin: 0;
	font-family: 'gotham-bold', arial, sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ===========================================================================
   "Naše reference" — nový vzhled podle Claude designu (shortcode
   [reference-slider], přepsaný v functions.php, bl_new_reference_widget).
   Karty přebírají stejný vizuální jazyk jako "anchor rozcestník" na stránce
   Raut / Catering (kulatá tyrkysová ikona, zaoblená bílá karta, bez tlačítka).
   =========================================================================== */
.rf-section {
	position: relative;
	overflow: hidden;
	background: var(--primary-color);
	padding: 96px 0;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}
.entry-content > .rf-section,
.container .entry-content > .rf-section:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
	max-width: none !important;
	width: 100vw !important;
}
.rf-section h2 {
	font-family: 'mikela-regular', arial, sans-serif;
	font-size: 36px;
	color: var(--black-color);
	margin: 0 0 40px;
	line-height: 1.15;
}

.rf-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	min-width: 0;
}
.rf-card {
	background: var(--white-color);
	border-radius: 16px;
	padding: 24px 32px;
	box-shadow: 0 1px 2px rgba(13, 10, 6, .05);
	transition: transform .22s ease-out, box-shadow .22s ease;
	min-width: 0;
}
.rf-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 34px rgba(13, 10, 6, .08);
}
.rf-card-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
	min-width: 0;
}
.rf-ico {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: var(--primary-color);
	color: var(--black-color);
	display: flex;
	align-items: center;
	justify-content: center;
}
.rf-ico i {
	font-size: 22px;
}
.rf-card-title {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.rf-label {
	font-family: 'mikela-regular', arial, sans-serif;
	font-size: 20px;
	color: var(--black-color);
	line-height: 1.2;
}
.rf-date {
	font-family: 'gotham-book', arial, sans-serif;
	font-size: 12px;
	color: #524b45;
	margin-top: 4px;
}
.rf-desc {
	font-family: 'gotham-book', arial, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: #524b45;
	margin: 0;
}
.rf-buttons {
	margin-top: 40px;
}

/* ===========================================================================
   "Co pro Vás zajistíme?" — anchor rozcestník na /sluzby/raut-catering/
   (viz bl_render_raut_catering_anchor_nav ve functions.php). Zduplikováno
   z .rf-* (Naše reference) a upraveno podle Claude designu (EventPage.jsx →
   AnchorRozcestnik): dlaždice jsou skutečné <a href="#kotva"> odkazy na
   sekce dále na stránce, žádný popis ani tlačítko pod mřížkou.
   =========================================================================== */
.sa-section {
	position: relative;
	overflow: hidden;
	background: var(--primary-color);
	padding: 80px 0;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}
.entry-content > .sa-section,
.container .entry-content > .sa-section:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
	max-width: none !important;
	width: 100vw !important;
}
.sa-section h2 {
	font-family: 'mikela-regular', arial, sans-serif;
	font-size: 36px;
	color: var(--black-color);
	margin: 0 0 40px;
	line-height: 1.15;
}

.sa-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px;
	min-width: 0;
}
.sa-card {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--white-color);
	border-radius: 16px;
	padding: 24px 32px;
	box-shadow: 0 1px 2px rgba(13, 10, 6, .05);
	text-decoration: none;
	transition: transform .22s ease-out, box-shadow .22s ease;
	min-width: 0;
}
.sa-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 34px rgba(13, 10, 6, .08);
}
.sa-ico {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: var(--primary-color);
	color: var(--black-color);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .22s ease, color .22s ease;
}
.sa-ico i {
	font-size: 22px;
}
.sa-card:hover .sa-ico {
	background: var(--black-color);
	color: var(--white-color);
}
.sa-card-title {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.sa-label {
	font-family: 'mikela-regular', arial, sans-serif;
	font-size: 20px;
	color: var(--black-color);
	line-height: 1.2;
}
.sa-go {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
	font-family: 'gotham-bold', arial, sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--primary-color);
}
.sa-go i {
	font-size: 11px;
}

/* ===========================================================================
   Odrážky (<ul>) v obsahu — tyrkysová barva odrážky, stejná jako u <ol>
   (viz .ar-single-desc ol > li::marker v ttm-broker/style.css), ale ta
   pravidla řešila jen číslované seznamy. .editor-styles-wrapper zajišťuje,
   že je odrážka tyrkysová i v náhledu přímo v editoru bloků.
   =========================================================================== */
.entry-content ul > li::marker,
.ar-single-desc ul > li::marker,
.editor-styles-wrapper ul > li::marker {
	color: var(--primary-color) !important;
	font-weight: 700;
	font-size: 1.4em;
}

/* ===========================================================================
   Vlastní blok "Ikonový odkaz" (blocks/icon-link/) — tučný tyrkysový odkaz
   s malou ikonkou vedle textu, podle Claude designu (.ev-link). Víc těchto
   bloků za sebou (bez obalujícího Group) se poskládá do řádku díky
   display:inline-flex + margin-right, bez nutnosti extra kroku v editoru.
   =========================================================================== */
.bl-icon-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 24px 8px 0;
	font-family: 'gotham-bold', arial, sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--primary-color);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}
.bl-icon-link:hover {
	color: var(--primary-color);
	border-bottom-color: var(--primary-color);
}
.bl-icon-link i {
	font-size: 16px;
}

/* ===========================================================================
   Mobil — mřížky se spoléhaly jen na auto-fit/minmax, bez explicitní
   zálomky. U .sr-cat-grid (min 180px) a .sr-prod-grid (min 160px) se na
   úzkém mobilu (~360–390px) i tak vešly 2 sloupce vedle sebe a dlaždice
   pak přetékaly mimo obrazovku (šlo i vodorovně scrollovat). Pod 600px
   proto vynucujeme jeden sloupec všude, stejně jako to má .nw-grid.
   =========================================================================== */
@media (max-width: 600px) {
	.sr-cat-grid,
	.sr-prod-grid,
	.sa-grid,
	.rf-grid,
	.dok-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ===========================================================================
   Stránka Kontakt — vložené widgety "Street view 360°" (Matterport) a mapa
   (Google Maps embed bez API klíče, souřadnice z ar_broker_address_map_2).
   =========================================================================== */
.kontakt-embeds {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	gap: 24px;
	margin: 16px 0 32px;
}
.kontakt-embed {
	position: relative;
	flex: 1 1 420px;
	max-width: 640px;
	aspect-ratio: 4 / 3;
	border-radius: var(--bl-radius);
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(13, 10, 6, .1);
}
.kontakt-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ===========================================================================
   Stránka /dokumenty — mřížka ke stažení (CPT "dokument", viz functions.php),
   podle Claude designu: dlaždice s ikonkou, velikostí souboru, popiskem
   a odkazem ke stažení.
   =========================================================================== */
.dok-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 280px));
	justify-content: start;
	gap: 24px;
	min-width: 0;
}
.dok-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	background: var(--white-color);
	border-radius: var(--bl-radius);
	padding: 24px;
	box-shadow: 0 1px 2px rgba(13, 10, 6, .05);
	min-width: 0;
}
.dok-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}
.dok-icon {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: var(--bl-radius);
	background: var(--primary-color);
	color: var(--white-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
}
.dok-size {
	font-family: 'gotham-bold', arial, sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #8a8a8a;
	white-space: nowrap;
	margin-top: 4px;
}
.dok-title {
	font-family: 'mikela-regular', arial, sans-serif;
	font-size: 20px;
	color: var(--black-color);
	margin: 0;
	line-height: 1.2;
}
.dok-desc {
	font-size: 14px;
	line-height: 1.5;
	color: #555;
	margin: 0;
}
.dok-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
}
.dok-download,
.dok-view {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'gotham-bold', arial, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--primary-color);
	text-decoration: none;
}
.dok-view {
	color: #555;
}
.dok-download:hover,
.dok-view:hover {
	text-decoration: underline;
}
.dok-empty {
	color: #8a8a8a;
	font-size: 15px;
}

/* "Objednej si cukroví" má výrazně delší text než "Street view 360°" a
   "Rezervace stolu" — na užších displejích se trojice do jednoho řádku
   nevejde a text se lámal uvnitř tlačítek. Pod 1024px proto dostane
   vlastní řádek přes celou šířku (řádek nad ním zůstává dvojice). */
@media screen and (max-width: 1024px) {
    .bio-button a.cukrovi {
        flex: 1 0 100%;
    }
}