.clear { clear: both;height: 1px; line-height: 1px; overflow: hidden; margin-bottom: -1px; }
.chyba { background-color:#c81816; color:#ffffff; text-align:center; font-size:14px; padding:5px 0px 5px 0px; margin:2px auto 0px auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.embedBlok {display: block; width: 100%;}
.embedBlok--audio { max-width: 660px; margin: 15px auto; }
.embedBlok--audio iframe { display: block; }
.PKWin_print_html, .PKWin_print_body { background: #333333 !important; background-image: none !important; color: #ffffff !important; }

.in_website_hp { position: absolute; left: -9999px; opacity: 0; height: 0px; width: 0px; z-index: -1; }

.editor { padding:20px; }


.news-detail {
    max-width: 705px; margin: 10px auto;
    border: 1px solid black;
    padding: 10px;
    height: auto!important;
}

.enRozvrzeni {
}

.deRozvrzeni {
}
    
body {
    display: block !important;
}

/*------------------------RESET---------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ul,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {

	margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; text-decoration:none; list-style-type: none;}

article, aside, details, figcaption, figure, hgroup, menu, nav, section { display: block; }

/*------------------------------------------------------*/

.chyba { background-color:#c81816; color:#ffffff; text-align:center; font-size:14px; padding:5px 0px 5px 0px; margin:1px auto 10px auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }





:root                                           {

                                                --font1:                "elza-narrow", sans-serif; /* 200, 300, 400, 500 */

                                                --font2:                "olimpico", sans-serif; /* 400, 700 */



                                                --color0:               #3C3F46; 

                                                --color0b:              #505a6f;

                                                --color1:               #E0D4AD; 

                                                --color1-15:            rgb(224, 212, 173, 0.15); 

                                                --color1-60:            rgb(224, 212, 173, 0.6); 

                                                --color1b:              #dbc48e; 

                                                --color1c:              #C7B07C;

                                                --white-70:             rgba(255,255,255,0.7);

                                                --white-80:             rgba(255,255,255,0.8);

                                                --white-90:             rgba(255,255,255,0.9);

                                                --black-04:             rgba(0,0,0,0.04);

                                                --black-10:             rgba(0,0,0,0.1);

                                                --black-15:             rgba(0,0,0,0.15);

                                                --black-20:             rgba(0,0,0,0.2);

                                                --black-30:             rgba(0,0,0,0.3);

                                                --black-50:             rgba(0,0,0,0.5);

                                                --error:                #e63d4b;



                                                --section-padding:      clamp(4.5rem, calc(2rem + 6vw), 8rem);

                                                --section-padding-low:  clamp(2rem, calc(1rem + 3vw), 4.5rem);

                                                --wrapper-padding:      max(1.2rem, 5vw);

                                                --wrapper-wide-max:     74rem;

                                                --wrapper-medium-max:   54rem;

                                                --wrapper-narrow-max:   46rem;

                                                --wrapper-thin-max:     38rem;



                                                --header:               6.4rem;



                                                --gap1:                 1rem;

                                                --gap2:                 min(2.5rem, calc(1rem + 5vw));



                                                --article-gap:          var(--gap1);



                                                --font1-spacing:        0.08em;

                                                --font2-spacing:        0.13em;

                                                --font1-line-height:    1.5;       

                                                --font2-line-height:    1.15;      

                                                

                                                --h1:                   min(4rem, calc(1.5rem + 3vw));

                                                --h2:                   min(3.4rem, calc(1.3rem + 3vw));

                                                --h3:                   min(2.4rem, calc(0.9rem + 3vw));

                                                --h4:                   min(1.65rem, calc(0.9rem + 3vw));

                                

                                                --border-radius0:       0.3rem;

                                                --border-radius1:       0.9rem;

                                                --border-radius2:       1.2rem;

                                                --border-radius3:       3rem;

                                                --border-radius4:       6rem;

                                                --border-radius5:       clamp(5rem, calc(3rem + 10vw), 10rem);

                                                --button-radius:        var(--border-radius0) var(--border-radius2);

                                                --button-radius-rev:    var(--border-radius2) var(--border-radius0);



                                                --text-shadow1:         0 0.1em 0.3em rgba(0,0,0,0.7);

                                                --blur1:                blur(4px);

                                                --blur2:                blur(10px);

                                                --box-shadow1:          0 0.3rem 0.6rem var(--black-20);



                                                --preview-padding:      0.8rem;

                                                --button-min:           max(11px, 0.7em);

                                                --booking-box-height:   3.5rem;



                                                --form-items-gap:       min(1.6em, calc(0.25em + 2vw));

                                                --form-item-height:     3rem;

                                                --input-padding-inline: 1.1em;

                                                }

  

html                                            {display: block; width: 100%; height: 100%; background: white; text-align: center; font-size: clamp(14px, calc(11px + 1vw), 18px); color: var(--color0); font-weight: 200; line-height: var(--font1-line-height); letter-spacing: var(--font1-spacing); font-family: var(--font1);}

body                                            {display: block; width: 100%; height: 100%; margin-inline: auto; position: relative; overflow-x: hidden; overflow-y: auto; padding-top: var(--header); box-sizing: border-box;}

body.fixed                                      {height: 100%; overflow: hidden;}

form                                            {display: flex; width: 100%; min-height: 100%; flex-direction: column; overflow-x: hidden;}



.wrapper                                        {display: flex; width: calc(100% - 2 * var(--wrapper-padding)); max-width: 64rem; flex-direction: column; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--gap2) 0; margin-inline: auto; position: relative; container-type: inline-size; box-sizing: border-box; z-index: 10;}

.wrapper.wide                                   {max-width: var(--wrapper-wide-max);}

.wrapper.medium                                 {max-width: var(--wrapper-medium-max);}

.wrapper.narrow                                 {max-width: var(--wrapper-narrow-max);}

.wrapper.thin                                   {max-width: var(--wrapper-thin-max);}



button                                          {background: none; outline: none; cursor: pointer; position: relative; border: none; box-sizing: border-box; padding: 0; white-space: nowrap; font-family: var(--font1); letter-spacing: var(--font1-spacing);  transition: .25s ease-in-out;}

input, textarea                                 {display: block; width: 100%; color: var(--color0); font-size: 1em; font-weight: 500; letter-spacing: var(--font1-spacing); background: transparent; border: none; outline: none; font-family: var(--font1); box-sizing: border-box; transition: .25s ease-in-out;}

input                                           {display: inline-flex; align-items: center;}



input[type="date"]::-webkit-calendar-picker-indicator,

input[type="date"]::-webkit-inner-spin-button,

input[type="date"]::-webkit-clear-button        {display: none; -webkit-appearance: none;}

input[type="date"]                              {-moz-appearance: textfield; appearance: none;}



body:not(.hp):before,

body:not(.hp):after,

.decor-separator:before,

.decor-separator:after                          {display: block; width: 100%; height: 2.5em; background-image: linear-gradient(to top, var(--black-10), transparent); opacity: 0.65; border-bottom-right-radius: var(--border-radius3); position: absolute; left: 0; z-index: 1; content: "";

                                                 -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center top; mask-position: center top; -webkit-mask-size: 100% auto; mask-size: 100% auto;

                                                 mask-image: linear-gradient(to left, black, transparent);                                           

                                                 -webkit-mask-image: linear-gradient(to left, black, transparent);

                                                }

body:not(.hp):before                            {top: calc(var(--header) - 2.5em);}

body:not(.hp):after                             {top: var(--header); transform: rotate(180deg);}

.decor-separator:before                         {top: -2.5em;}

.decor-separator:after                          {top: 0; transform: rotate(180deg);}

  @media screen and (min-width: 1081px)         {

  body:not(.hp):before,

  body:not(.hp):after,

  .decor-separator:before,

  .decor-separator:after                        {width: 96%; left: 2%;}

  }

  @media screen and (min-width: 1601px)         {

  body:not(.hp):before,

  body:not(.hp):after,

  .decor-separator:before,

  .decor-separator:after                        {width: calc(4rem + var(--wrapper-wide-max)); left: calc(50% - 0.5 * var(--wrapper-wide-max) - 2rem);}

  }



.header                                         {display: flex; width: 100%; height: var(--header); box-sizing: border-box; position: fixed; left: 0; top: 0; z-index: 1000; container-type: inline-size; transition: .5s ease-in-out;}

.header .wrapper                                {height: 100%; flex-direction: row; justify-content: space-between; align-items: center;}

.header .logo                                   {display: flex; height: 100%; justify-content: center; align-items: center; position: absolute; top: 0; z-index: 2;}

.header .logo img                               {display: block; width: 100%; height: auto; position: relative; top: -0.2em;} 

.header .collapse                               {display: block; width: 100%;}

.header .collapse .inner                        {display: flex; width: 100%; box-sizing: border-box;}

.header nav                                     {display: flex; flex-wrap: wrap; box-sizing: border-box;}

.header nav > ul                                {display: flex; align-content: center; flex-wrap: wrap;}

.header nav > ul > li                           {display: block; position: relative;}

.header nav > ul > li a                         {display: flex; align-items: center; gap: 0.4em; color: var(--color0); box-sizing: border-box; position: relative; transition: .25s ease-in-out;}

.header nav > ul > li:has(ul) a:after           {display: block; width: 0.5em; height: 0.5em; background: url("images/icons/chevron-down-color0.svg") no-repeat center center; background-size: contain; content: "";}

.header nav ul li a:hover                       {color: var(--color1c);}                   

.header nav ul li a[aria-current="page"],
.header nav ul li a[data-aktivni="vetev"],
.header nav ul li[data-aktivni="vetev"] > a,
.header nav ul li[data-aktivni="vetev"] > span  {color: var(--color0); font-weight: 500;}

.header nav ul li ul li a                       {min-width: 8em; gap: 0.5em;}

.header .header-elements                        {display: flex; gap: 0.45em; flex-wrap: wrap;}

.header.scroll                                  {height: calc(0.85 * var(--header)); background: var(--white-80); backdrop-filter: var(--blur2);}

  @media screen and (min-width: 1081px)         {

  .header .logo                                 {width: 14cqw; left: calc(50% - 7cqw);}

  .header .collapse                             {width: 100%;}

  .header .collapse .inner                      {justify-content: space-between; align-items: center;}

  .header nav                                   {flex-grow: 2;}

  .header nav > ul                              {gap: 4cqw;}

  .header nav > ul > li:nth-child(5)            {margin-right: 16cqw;}

  .header nav > ul > li:nth-child(n+7)          {margin-left: -1.3cqw;}

  .header nav > ul > li > a                     {font-size: 1.45cqw; padding-block: 0.4em;}

  .header nav > ul ul                           {flex-direction: column; gap: 0.3em; position: absolute; --header-submenu-gap: 1.5rem; padding: var(--header-submenu-gap); border-radius: var(--border-radius0) var(--border-radius1); left: 9999px; top: 95%; opacity: 0; margin-top: 1rem; transition: background-color 0.5s ease, margin-top 0.5s ease, opacity 0.5s ease, left 0s linear 0.5s;}

  .header nav > ul li:hover ul                  {left: calc(-1 * var(--header-submenu-gap)); opacity: 1; margin-top: 0; transition: background-color 0.5s ease, margin-top 0.5s ease, opacity 0.5s ease, left 0s linear 0s;}

  .header nav > ul > li ul li a                 {justify-content: space-between;}

  .header nav > ul > li ul li a:after           {transform: rotate(-90deg);}

  .header .header-elements                      {gap: 0.5cqw;}

  .header .header-elements .button              {font-size: 1cqw;}

  .header :is(.home, #navicon)                  {display: none;}                 

  }

  @media screen and (max-width: 1080px)         {

  .header :is(.home, .navicon)                  {display: flex; width: 1.6em; height: 1.6em; justify-content: center; align-items: center; cursor: pointer; position: relative; z-index: 10;}

  .header :is(.home, .navicon) > *              {display: block; width: 70%; transition: .25s ease-in-out;}

  .header .home svg                             {fill: var(--color0);}

  .header .home:hover svg                       {fill: var(--color1c);}

  .header .navicon span                         {height: 0.12em; background: var(--color0); border-radius: 2px; position: absolute; left: 15%;}

  .header .navicon span:nth-child(1)            {top: 0.35em;}

  .header .navicon span:nth-child(2),

  .header .navicon span:nth-child(3)            {top: calc(50% - 0.06em);}

  .header .navicon span:nth-child(4)            {bottom: 0.35em;}

  .header .navicon:hover span                   {background: var(--color1c);}

  .header #navicon div                          {display: none; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2;}

  .header .logo                                 {width: 9rem; left: calc(50% - 4.5rem);}

  .header .collapse                             {width: 200svh; height: 95svh; background: white;  overflow-y: auto; position: fixed; opacity: 0; right: -100svh; top: -100svh; z-index: 5; border-bottom-left-radius: 100svh; box-shadow: var(--box-shadow1); box-sizing: border-box; transition: 1s ease-in-out;}                                              

  .header .collapse .inner                      {min-height: 100%; flex-direction: column; align-content: flex-start; gap: 2em; padding: 2.8rem;}

  .header .collapse .inner > *                  {transform: translate(1.5rem); opacity: 0; transition: 0.3s ease;}

  .header nav                                   {margin-top: -0.5em;}

  .header nav ul                                {width: 100%; flex-direction: column;}

  .header nav ul li                             {width: 100%;}

  .header nav ul li a                           {width: 100%; text-align: left; font-size: 1em; padding: 0.25em 0;}              

  .header nav > ul > li ul,

  .header nav > ul > li a:after                 {display: none !important;}

  .header nav > ul > li ul:has(a[aria-current="page"]),

  .header nav > ul > li:has(ul li a[aria-current="page"]) > a:after

                                                {display: block !important;}

  .header nav ul li a[aria-current="page"]      {padding-left: 0.9em;}

  .header nav ul li a[aria-current="page"]:before

                                                {display: block; width: 1em; height: 1em; margin-left: -0.5em; background: url("images/pictogram.svg") no-repeat center center; background-size: contain; position: absolute; left: 0; top: calc(50% - 0.5em); content: "";}

  .header nav > ul > li > a                     {justify-content: space-between; font-size: 1.3rem;}

  .header nav ul li ul                          {background-color: transparent !important; backdrop-filter: none; box-shadow: none; padding: 0 0 0.5em 1em;}

  .header nav > ul > li ul li a:after           {display: none;}

  .header .header-elements                      {align-items: flex-end; align-content: flex-end; flex-grow: 2; font-size: 0.85em;}

  .header .header-elements .button              {width: 100%; font-size: 0.8rem;}

  .header .header-elements .button:last-child   {order: -1;}

  .header.show:before                           {opacity: 0.85 !important;}

  .header.show #navicon:after                   {color: white;}

  .header.show #navicon span:nth-child(2)       {transform: rotate(45deg);}

  .header.show #navicon span:nth-child(3)       {transform: rotate(-45deg);}

  .header.show #navicon span:nth-child(1), 

  .header.show #navicon span:nth-child(4)       {opacity: 0 !important;}

  .header.show #navicon div                     {display: block;}

  .header.show .collapse                        {width: 20rem; right: 0; top: 0; opacity: 1; border-bottom-left-radius: var(--border-radius3);}

  .header.show .collapse .inner > *             {transform: translate(0); opacity: 1; transition: 0.5s ease 0.9s;}

  .header.show .collapse .inner > *:nth-child(2){transition-delay: 1.2s;}

}



.footer                                         {display: block; width: 100%; background: var(--color0d); padding-block: var(--section-padding) calc(0.4 * var(--section-padding)); overflow: hidden;}

.footer .wrapper                                {row-gap: calc(0.5 * var(--section-padding)); padding: 3.5rem min(4rem, calc(1rem + 5vw)) 2rem;}

.footer .back                                   {display: block; position: absolute; inset: 0; z-index: -1; background: var(--color0); border-radius: var(--border-radius1) var(--border-radius4) var(--border-radius1) var(--border-radius1); overflow: hidden; transform: scale(1.1); transition: 1s ease-in-out;}

.footer .back:after                             {display: block; position: absolute; inset: 0; z-index: 1; opacity: 0.1; background: url("images/pictogram.svg") no-repeat left 10% bottom -3rem; background-size: 20rem; content: "";}

.footer .back.play                              {transform: scale(1);}

.footer .title                                  {display: block; font-size: 0.8em; color: var(--color1); font-weight: 300; margin-bottom: 0.4em;}

.footer-contacts                                {display: flex; flex-direction: column; align-items: flex-start;}

.footer-contacts .footer-contact                {display: flex; align-items: center; gap: 0.35em; font-size: 1em; color: white; font-weight: 400; transition: 0.25s ease-in-out;}

.footer-contacts .footer-contact img            {display: block; height: 0.85em;}

.footer-contacts .footer-contact:hover          {color: var(--color1);}

.footer-contacts .hours                         {display: block; font-size: 0.8em; color: var(--white-70); margin-block: -0.1em 1.2em;}

.footer-contacts .button                        {font-size: var(--button-min);}

.footer nav                                     {display: block; width: 17em; column-count: 2; column-gap: 1.5rem;}

.footer nav ul                                  {display: block; margin-bottom: -0.45em;}

.footer nav li                                  {display: inline-block; width: 100%; text-align: left; margin-bottom: 0.45em;}

.footer nav a                                   {display: inline-block; font-size: 0.95em; color: white; font-weight: 300; transition: 0.25s ease-in-out;}

.footer nav a:hover                             {color: var(--color1);}

.footer .soc                                    {display: flex; flex-wrap: wrap;}

.footer .soc a                                  {display: flex; align-items: center; gap: 0.35em; font-size: 0.9rem; color: white; font-weight: 300; transition: 0.25s ease-in-out;}

.footer .soc a img                              {display: block; height: 1em;}

.footer .soc a:hover                            {color: var(--color1);}

.footer .logo                                   {display: block; width: 10em;}

.footer .logo img                               {display: block; width: 100%;}

.footer .bottom                                 {display: flex; width: 100%; align-items: flex-end; gap: 0.7em 2em;}

.footer .bottom > div                           {display: flex; justify-content: center; align-items: flex-end; flex-wrap: wrap; gap: 0.4em 1em;}

.footer .bottom > div *                         {font-size: 0.8em; color: var(--color1c); font-weight: 300; transition: 0.25s ease-in-out;}

.footer .bottom > div a[href]:hover             {color: var(--color1);}

.footer .bottom > div a img                     {display: block; width: 4em; position: relative; top: -0.35em;}

  @media screen and (min-width: 1081px) and (max-width: 1280px){

  .footer .wrapper                              {font-size: 0.9rem;}

  }

  @media screen and (min-width: 1081px)         {

  .footer .wrapper                              {flex-direction: row; justify-content: space-between; align-items: stretch;}

  .footer .soc                                  {flex-direction: column; align-items: flex-start;}

  .footer .bottom                               {justify-content: space-between;}

  }

  @media screen and (max-width: 1080px)         {

  .footer .back:after                           {background-position: center bottom -3rem; background-size: 20rem;}

  .footer .title                                {width: 100%; text-align: center;}

  .footer-contacts                              {align-items: center;}

  .footer .soc                                  {justify-content: center;}

  .footer .logo                                 {margin-block: var(--gap1);}

  .footer .bottom                               {flex-direction: column; align-items: center;}

  .footer .bottom > div:last-child              {flex-direction: column; align-items: center; margin-top: var(--gap1);}

  .footer .bottom > div:last-child a            {margin-top: 0.5rem;}

  }



.main                                           {display: flex; width: 100%; flex-direction: column; align-items: center; flex-grow: 3;}

.main > div                                     {display: block; width: 100%;}



.section                                        {display: block; width: 100%; position: relative; z-index: 1; padding-top: var(--section-padding); isolation: isolate;}

.section.padding-top-0                          {padding-top: 0;}

.section.padding-bottom                         {padding-bottom: var(--section-padding);}

.section:first-child                            {padding-top: calc(0.5 * var(--section-padding));}



body:not(.hp) .section:first-child + .section   {padding-top: var(--section-padding-low);}



.section:has(+ .decor-separator),

.section:has(+ .section .bg-image),

.section:has(> .bg-image)                       {padding-bottom: var(--section-padding);}



.section:has(> .bg-image) *                     {color: white;}

.section > .bg-image                            {display: block; position: absolute; inset: 0; background: var(--color0); border-bottom-left-radius: var(--border-radius5) !important; overflow: hidden;}

.section > .bg-image picture                    {display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.3; filter: var(--blur1); border-bottom-left-radius: var(--border-radius5); overflow: hidden;}

.section > .bg-image picture img                {display: block; width: 100%; height: 100%; object-fit: cover;}

  @media screen and (min-width: 1801px)         {

  .section > .bg-image                          {width: 1600px; left: calc(50% - 800px); border-radius: var(--border-radius1)}

  }



.container                                      {display: flex; width: 100%; max-width: 50rem; flex-direction: column; justify-content: center; align-items: center; gap: var(--container-gap); --container-gap: var(--gap1); box-sizing: border-box;}

.container.no-max-width                         {max-width: 100%;}

.container > .icon1                             {font-size: 1.4em;}

.container .subheadline                         {margin-top: calc(-0.8 * var(--container-gap));}

.container .note                                {display: block; font-size: 0.8em; font-weight: 300;}

.container > .button                            {font-size: 1em;}

.container > .button + .note                    {margin-top: calc(-0.4 * var(--gap1));}



.container.box                                  {max-width: 100%; background: var(--black-04); border-radius: var(--border-radius1) var(--border-radius4); padding: min(5rem, calc(1rem + 5vw)); font-size: 0.9em;}

.container.box h2                               {font-size: calc(0.75 * var(--h2)); margin-bottom: 0.2em;}



.cols2                                          {display: flex; width: 100%; flex-direction: column; align-items: center; gap: var(--gap1) 0;}

  @media screen and (min-width: 961px)          {

  .cols2                                        {flex-direction: row; justify-content: space-between; align-items: stretch; text-align: left;}

  .cols2 > *                                    {width: 46.5% !important;}

  }



.icon1                                          {display: flex; width: 2.6em; height: 2.6em; justify-content: center; align-items: center; font-size: 1.2em; background: var(--black-04); font-weight: 700; border-radius: var(--border-radius0) var(--border-radius2); flex-shrink: 0; font-family: var(--font2); box-sizing: border-box;}

.icon1 img                                      {display: block; width: 50%;}

.icon1.border1                                  {background: none; border: solid 0.1em var(--color1b);}

.icon1.border1 img                              {width: 38%;}



.text-box                                       {display: block; background: var(--black-04); font-size: min(1.3em, calc(0.35em + 3vw)); font-weight: 400; padding: 0.8em 2.2em; border-radius: var(--border-radius3) var(--border-radius0); box-sizing: border-box; font-family: var(--font2); line-height: var(--font2-line-height);}

.text-box img                                   {display: inline-block; height: 0.85em; margin-right: 0.18em; position: relative; top: 0.075em;}



em                                              {font-style: italic;}

strong                                          {font-weight: 500;}

.color1                                         {color: var(--color1b);}

.large                                          {font-size: 1.3em;}

.small                                          {font-size: 0.85em;}



h1, h2, h3                                      {display: block; width: 100%; text-align: center; font-weight: 700; text-transform: uppercase; box-sizing: border-box; font-family: var(--font2); line-height: var(--font2-line-height); letter-spacing: var(--font2-spacing)}

h1                                              {font-size: var(--h1);}

h2                                              {font-size: var(--h2);}

h2.small                                        {font-size: var(--h3);}

h3                                              {font-size: var(--h3);}



.subheadline                                    {color: var(--color1c); font-weight: 300;}

.subheadline2                                   {font-family: var(--font2); line-height: var(--font2-line-height);}



h1 + .subheadline                               {font-size: max(1rem, calc(0.5 * var(--h1)));}

h2 + .subheadline                               {font-size: max(1rem, calc(0.4 * var(--h2)));}

h1 + .subheadline2                              {font-size: max(1rem, calc(0.4 * var(--h1)));}

h2 + .subheadline2                              {font-size: max(1rem, calc(0.4 * var(--h2)));}



.intext-icon                                    {display: inline-block; height: 1em; position: relative; top: 0.12em;}



.box-glass                                      {display: flex; flex-wrap: wrap; box-sizing: border-box; background-color: var(--white-80); backdrop-filter: var(--blur1); box-shadow: var(--box-shadow1); transition: background-color 0.5s ease;}

.box-glass:hover                                {background-color: var(--white-90);}



.buttons                                        {display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5em;}

.wrapper > .buttons .button                     {min-width: 12em; font-size: var(--button-min);}



.button                                         {display: flex; justify-content: center; align-items: center; gap: 0.5em; font-size: 0.8rem; color: white; font-weight: 500; text-transform: uppercase; line-height: 1.3; border: none; outline: solid 0.15em transparent; padding: 0.8em 1.7em 0.75em; border-radius: var(--button-radius); cursor: pointer; text-decoration: none !important; box-sizing: border-box; font-family: var(--font1); transition: .25s ease-in-out;}

.button:hover                                   {transform: scale(0.97);}

.button img                                     {display: block; height: 1em; position: relative; top: -0.03em;}

.button img.large                               {height: 1.3em;}

.button.color0                                  {background: var(--color0);}

.button.color0:hover                            {background: var(--color0b);}

.button.color1                                  {background: var(--color1); color: var(--color0);}

.button.color1:hover                            {background: var(--color1b);}

.button.color1c                                 {background: var(--color1c); color: var(--color0);}

.button.color1c:hover                           {background: var(--color1b);}

.button.border1                                 {background: transparent; color: var(--color0); border: solid 0.1em var(--color1c);}

.button.border1:hover                           {background: var(--color1-15);}



.button + .button:nth-child(even)               {border-radius: var(--border-radius2) var(--border-radius0);}



.img                                            {display: block; width: 100%; --aspect-ratio: 3/4; flex-shrink: 0; position: relative; z-index: 5;}

.img .img-inner                                 {display: block; width: 100%; padding-top: calc(var(--aspect-ratio) * 100%); position: relative; box-sizing: border-box;}

.img .img-inner span                            {display: block; position: absolute; inset: 0; border-radius: var(--border-radius1); overflow: hidden; transition: 0.5s ease;}

.img .img-inner span img                        {display: block; width: 100%; height: 100%; object-fit: cover;}

.img[href]:hover .img-inner span,

.preview:has(> a):hover .img .img-inner span    {filter: brightness(1.1); transform: scale(calc(1 + (0.3 * var(--preview-padding) / 1rem) * 0.1));; box-shadow: var(--box-shadow1);}



.img.cover                                      {}

.img.cover                                      {width: 100%; --aspect-ratio: 9/16;}

.img.cover .img-inner span                      {border-radius: var(--border-radius3) var(--border-radius1);}

  @media screen and (min-width: 769px)          {

  .img.cover .img-inner span                    {border-radius: var(--border-radius4) var(--border-radius1);}

  }





.link                                           {display: block; font-size: 1em; color: var(--color1); text-decoration: underline; transition: .25s ease-in-out;}

.link:hover                                     {color: Var(--color1b); text-decoration-color: transparent;}



.main :is(p, li)                                {width: 100%; position: relative; box-sizing: border-box;}

.main :is(p a, li a)                            {color: var(--color1c); font-weight: 300; text-decoration: underline; transition: .25s ease-in-out;}

.main :is(p a, li a):hover                      {color: var(--color1b); text-decoration-color: transparent;}

.main :is(p strong a, li strong a)              {font-weight: 500;}



.check-list li                                  {padding-left: 1.3em;}

.check-list li:not(:first-child)                {margin-top: 0.2em;}

.check-list li:before                           {display: block; width: 0.7em; height: 0.7em; background: url("images/icons/check-color1.svg") no-repeat center center; background-size: contain; position: absolute; left: 0; top: 0.43em; content: "";}



.breadcrumbs                                    {display: block; max-width: 100%;}

.breadcrumbs ul                                 {display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 1.5em; font-size: 0.85em; margin: 0; padding: 0 !important;}

.breadcrumbs ul li                              {display: flex; width: auto; align-items: center; color: var(--color0); opacity: 0.6; position: relative; padding: 0; margin: 0;}

.breadcrumbs ul li:before                       {display: none;}

.breadcrumbs ul li:not(:last-child) a:after     {display: inline-block; width: 0.55em; height: 1em; position: absolute; right: -1em; top: calc(50% - 0.5em); background: url("images/icons/chevron-right-color0.svg") no-repeat center center; background-size: contain; content: "";}

.breadcrumbs ul li a                            {display: block; color: inherit !important; text-decoration: underline; font-weight: 400; border: none; transition: .25s ease-in-out;}

.breadcrumbs ul li:last-child a                 {text-decoration: none;}

.breadcrumbs ul li a[href]:hover                {color: var(--color1c) !important; text-decoration-color: transparent;}

  @media screen and (max-width: 768px)          {  

  .breadcrumbs                                  {overflow-x: auto; scrollbar-width: none;}

  .breadcrumbs::-webkit-scrollbar               {display: none;}

  .breadcrumbs ul                               {flex-wrap: nowrap;}

  .breadcrumbs ul li a                          {white-space: nowrap;}

  } 



.submenu                                        {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.3em;}

.submenu > div                                  {display: flex; max-width: 100%; overflow-y: auto; padding-inline: 1em; box-sizing: border-box; scrollbar-width: none; -ms-overflow-style: none;}

.submenu > div::-webkit-scrollbar               {display: none; width: 0;}

.submenu > div nav                              {display: flex; gap: 0.3em;}

.submenu a                                      {display: flex; height: 2.4em; align-items: center; font-size: 0.85em; color: var(--color0b); background: var(--color0d); letter-spacing: var(--spacing1); padding: 0.15em 1em 0 1.1em; border-radius: 1.2em; border: solid 0.14em transparent; box-sizing: border-box; white-space: nowrap; transition: .25s ease-in-out;}

.submenu a:hover                                {background: transparent; border-color: var(--color0c);}

.submenu a.sel                                  {color: white; background: var(--color0c); border-color: var(--color0c);}

.submenu:has(> div)                             {width: 100vw; margin-inline: calc(50% - 50vw);}



.pagination                                     {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.3em;}

.pagination a                                   {display: flex; width: 2.7em; height: 2.4em; justify-content: center; align-items: center; font-size: 0.85em; color: var(--color0); font-weight: 400; background: var(--black-10); opacity: 0.6; border-radius: var(--border-radius0); box-sizing: border-box; white-space: nowrap; transition: .25s ease-in-out;}

.pagination a:first-child                       {border-bottom-left-radius: var(--border-radius2);}

.pagination a:last-child                        {border-bottom-right-radius: var(--border-radius2);}

.pagination a:hover                             {opacity: 1;}

.pagination a.sel                               {opacity: 1; background: var(--color1); font-weight: 500;}

.pagination:empty                               {display: none;}



.anim                                           {transition-delay: 2s; transition: .6s ease-in-out;}

.anim.zoom                                      {opacity: 0; transform: scale(0.9,0.9);}

.anim.zoom.play                                 {opacity: 1; transform: scale(1,1);}



.flex                                           {display: flex !important; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.3em; box-sizing: border-box;}



.section:has(+ .cta1)                           {padding-bottom: var(--section-padding);}



.cta1                                           {padding-bottom: 0 !important; container-type: inline-size;}

.cta1 .wrapper                                  {position: static;}

.cta1 .back                                     {display: block; position: absolute; inset: 0; background: var(--black-04); border-bottom-right-radius: var(--border-radius5);}

.cta1 .content                                  {display: flex; width: 100%; justify-content: center; flex-wrap: wrap;}

.cta1 .content > div                            {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: var(--gap1); position: relative; overflow: hidden;}

.cta1 .content .image img                       {display: block; position: relative;}

.cta1 .content .image img:nth-child(2)          {position: absolute; left: 0; bottom: -9%;}

.cta1 .content .title                           {font-size: min(1.9em, calc(0.8em + 3vw)); text-transform: uppercase; font-weight: 700; font-family: var(--font2); line-height: var(--font2-line-height); letter-spacing: var(--font2-spacing); margin-bottom: -0.15em;}

.cta1 .content .buttons                         {margin-top: 0.4em;}

.cta1 .content .buttons .button                 {min-width: 12.5em; font-size: var(--button-min);}

.cta1 .image2                                   {display: block; width: 12em; position: absolute; left: calc(50% + min(28rem, 32vw)); top: -2rem;}

.cta1 .image2 img                               {display: block; width: 100%;}

  @media screen and (min-width: 1801px)         {

  .cta1 .back                                   {width: 1600px; left: calc(50% - 800px);}

  }

  @media screen and (min-width: 1081px)         {

  .cta1 .back:after                             {display: block; position: absolute; inset: 0; background: url("images/pictogram.svg") no-repeat right 10% bottom -10rem; background-size: auto min(90%, 40rem); opacity: 0.15; overflow: hidden; content: "";}

  .cta1 .content                                {justify-content: flex-end; margin-top: calc(-1 * var(--gap2));}

  .cta1 .content > div *                        {text-align: left;}

  .cta1 .content .image                         {display: flex; width: 34rem; height: 115%; align-items: flex-end; position: absolute; right: 50%; bottom: 0;}

  .cta1 .content .image img                     {width: 100%; position: relative; top: 21%;}

  .cta1 .content .info                          {width: 48%; justify-content: flex-start; padding-bottom: var(--section-padding); margin-top: var(--gap2);}

  }

  @media screen and (max-width: 1080px)         {

  .cta1                                         {margin-top: 2rem;}

  .cta1 .wrapper                                {margin-top: 4.5rem;}

  .cta1 .content .image                         {width: 28rem; margin-top: -0.3rem; z-index: 2; overflow: visible;}

  .cta1 .content .image img                     {width: 100%; top: 6svh;}

  .cta1 .image2                                 {left: calc(50% - 6rem); top: -4rem;}

  }



/* Rychlejší parallax */

  @media screen and (min-width: 1081px)         {

  .cta1 .content .image img                     {top: calc(var(--gap2) + 4rem - 8svh);}

  }

  @media screen and (max-width: 1080px)         {

  .cta1 .content .image img                     {top: -5svh;}

  }



.cta2                                           {display: flex; width: 100%; flex-direction: column; align-items: center; gap: var(--gap1); padding: max(2.5em, 8%) max(2em, 6%); box-sizing: border-box; --h2: min(3rem, calc(1rem + 3vw)); position: relative; isolation: isolate;}

.cta2:before, .cta2:after                       {display: block; position: absolute; inset: 0; border-radius: var(--border-radius1) var(--border-radius5); overflow: hidden; content: "";}

.cta2:before                                    {background: url("images/pictogram.svg") no-repeat right 10% bottom -3rem; background-size: 24rem; z-index: -2; opacity: 0.15;}

.cta2:after                                     {background: var(--black-04); z-index: -2; }

.cta2 .booking-bar                              {max-width: 100%; background: white;}

  @media screen and (max-width: 1080px)         {

  .cta2:before                                  {background-position: center bottom -3rem; background-size: 20rem;}

  }

  @media screen and (max-width: 480px)          {

  .cta2                                         {width: 100vw; margin-inline: calc(50% - 50vw);}

  }



.cta3                                           {display: flex; width: 100%; flex-direction: column; align-items: center; gap: var(--gap1); background: var(--black-04); padding: 0 max(2em, 6%); box-sizing: border-box; border-radius: var(--border-radius1) var(--border-radius5); --h2: min(3rem, calc(1rem + 3vw)); position: relative; overflow: hidden;}

.cta3:before                                    {display: block; position: absolute; inset: 0; z-index: 1; opacity: 0.15; background: url("images/pictogram.svg") no-repeat right 10% bottom -3rem; background-size: 24rem; z-index: -1; content: "";}

.cta3 .container                                {padding: max(2.5em, 8%) 0;}

.cta3 .title                                    {display: block; width: 100%; font-size: var(--h3); font-weight: 700; text-transform: uppercase; font-family: var(--font2); line-height: var(--font2-line-height); margin-block: -0.05em -0.2em;}

.cta3 .image                                    {display: block; width: 100%;}

.cta3 .image img                                {display: block; width: 100%; position: relative;}

  @media screen and (min-width: 1081px)         {

  .cta3                                         {flex-direction: row; justify-content: space-between;}

  .cta3 > *                                     {width: 48% !important;}

  .cta3 .image                                  {order: -1;}

  .cta3 .container > *                          {text-align: left;} 

  .cta3 .container .buttons                     {width: 100%; justify-content: flex-start;}                         

  }

  @media screen and (max-width: 1080px)         {

  .cta3:before                                  {background-position: center bottom -3rem; background-size: 20rem;}

  .cta3 .container                              {padding-bottom: 0;}

  .cta3 .image                                  {max-width: 30rem; margin-bottom: -10svh;}

  .cta3 .image img                              {top: -10svh;}

  }

  @media screen and (max-width: 480px)          {

  .cta3                                         {width: 100vw; margin-inline: calc(50% - 50vw);}

  }



.cta4                                           {display: flex; width: 100%; max-width: 34rem; flex-direction: column; align-items: center; gap: var(--gap1); margin-block: var(--gap1);}

.cta4 .button                                   {font-size: 1em;}



.contact-box                                    {display: flex; width: 100%; max-width: 36em; flex-direction: column; justify-content: space-between; align-items: center; gap: var(--gap1) 1.4em; background: var(--black-04); padding: 1.2em 2.4em; border-radius: var(--border-radius0) var(--border-radius3); box-sizing: border-box;}  

.contact-box .title                             {display: block; font-size: 1.2em; font-weight: 700; font-family: var(--font2); line-height: var(--font2-line-height);}

.contact-box > div                              {display: flex; flex-direction: column; align-items: center; gap: 0.5em; flex-shrink: 0;}

.contact-box :is(.mail, .phone)                 {display: flex; align-items: center; gap: 0.35em; font-size: 1.1em; color: inherit; font-weight: 500; margin-bottom: -0.5em; transition: 0.25s ease-in-out;}

.contact-box :is(.mail, .phone) img             {display: block; height: 0.85em;}

.contact-box :is(.mail, .phone):hover           {color: var(--color1b);}

.contact-box .hours                             {display: block; font-size: 0.8em; color: var(--black-50); font-weight: 300;}

  @media screen and (min-width: 541px)          {

  .contact-box                                  {flex-direction: row; align-items: stretch;}

  .contact-box > div                            {align-items: flex-start;}

  .contact-box :is(.title, .phone, .hours)      {text-align: left;}

  }



.hero                                           {isolation: isolate; overflow: hidden;}

.hero .back                                     {display: block; position: absolute; inset: 0;}

.hero .back .images                             {display: block; width: 100%; height: calc(85% + 15svh); min-height: 100%; position: absolute; left: 0; bottom: 0; z-index: -2; border-bottom-left-radius: var(--border-radius5) !important; overflow: hidden;}

.hero .back .mask                               {display: block; width: 100%; height: 70%; background: var(--black-50); backdrop-filter: var(--blur2); position: absolute; left: 0; bottom: 0; border-bottom-left-radius: var(--border-radius5); overflow: hidden;

                                                 -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center top; mask-position: center top; -webkit-mask-size: 100% auto; mask-size: 100% auto;

                                                 mask-image: linear-gradient(to top, black, transparent);                                           

                                                 -webkit-mask-image: linear-gradient(to top, black, transparent);

                                                }

.hero .images span                              {display: block; width: 100%; height: 100%; position: absolute; inset: 0; opacity: 0; transform-origin: center bottom; animation-name: hero; animation-duration: 16s; animation-iteration-count: infinite;}

.hero .images span:nth-child(2)                 {animation-delay: 4s;}

.hero .images span:nth-child(3)                 {animation-delay: 8s;}

.hero .images span:nth-child(4)                 {animation-delay: 12s;}

.hero .images span img                          {display: block; width: 100%; height: 100%; object-fit: cover; /* object-position: center top; */}

.hero .container                                {max-width: min(84%, 60rem);}

.hero :is(h1, p)                                {color: white; text-shadow: var(--text-shadow1);}

  @media screen and (min-width: 1801px)         {

  .hero .back                                   {width: 1600px; left: calc(50% - 800px);} /* stejne jako .bg-image */

  .hero .back .images                           {border-radius: var(--border-radius1);}

  }

  @media screen and (min-width: 481px)          {

  .hero .container                              {padding-block: 12rem 6rem;}

  }

  @media screen and (max-width: 480px)          {

  .hero .container                              {padding-block: 15rem 3rem;}

  }

 

@keyframes hero                                 {

                                                0%      {opacity: 0;}

                                                18%     {opacity: 1;}

                                                22%     {opacity: 1;}

                                                100%    {opacity: 0;}



}



.section:has(.booking-box)                      {z-index: 500;}



.booking-box                                    {display: flex; width: 100%; flex-direction: column; align-items: center; gap: var(--gap1); position: relative;}

.booking-box .features                          {display: flex; width: 90%; justify-content: center; flex-wrap: wrap; gap: 0.4em 1.25em;}

.booking-box .features span                     {display: flex; align-items: center; gap: 0.45em; font-size: 0.85em; font-weight: 300;}

.booking-box .features span img                 {display: block; height: 0.9em; position: relative; top: -0.03em;}

.booking-bar, .price-bar                        {display: flex; align-items: center; border-radius: var(--border-radius0) 1.8rem; box-sizing: border-box;}

.booking-bar .inputs                            {display: flex; align-items: center; flex-grow: 2; position: relative;}

.booking-bar .inputs > div                      {display: block; position: relative; box-sizing: border-box;}

.booking-bar .inputs > div:nth-child(-n+2):after{display: block; width: 1em; height: 1.8em; background-repeat: no-repeat; background-position: center center; background-size: 90%; background-color: white; position: absolute; right: -0.5em; top: calc(50% - 0.9em); z-index: 2; content: "";}

.booking-bar .inputs > div:nth-child(-n+2) .custom-select:before

                                                {display: none;}

.booking-bar .inputs > div:nth-child(-n+2) .custom-select-trigger.show::after

                                                {display: block; width: calc(100% - 2 * var(--input-padding-inline)); height: 0.2em; background: var(--color1c); position: absolute; left: var(--input-padding-inline); bottom: -0.2em; border-radius: 0.1em; content: "";}

.booking-bar .inputs > div:nth-child(1):after   {background-image: url("images/icons/calendar-black40.svg");}

.booking-bar .inputs > div:not(:first-child)    {border-left: solid 1px var(--black-15);}

.booking-bar :is(input, .custom-select-trigger) {height: 100% !important; line-height: calc(1.2 * var(--form-item-height)); padding: 0 0 0 var(--input-padding-inline);}

.booking-bar input::placeholder                 {color: var(--black-50); font-weight: 300;}

.booking-bar .custom-select-wrapper             {height: 100%;}

.booking-bar .custom-options                    {width: 16rem; max-height: none; padding: var(--input-padding-inline); left: 0; border-radius: var(--border-radius0) var(--border-radius0) var(--border-radius2) var(--border-radius0);}

.price-bar                                      {min-width: 20em; height: var(--booking-box-height); padding-inline: 1.3em 0.6rem; gap: 0.6em 1.2em;}

.price-bar .price                               {display: flex; align-items: center; flex-wrap: wrap; gap: 0.3em; flex-grow: 2; text-align: left; font-size: 1.8em; font-weight: 400;}

.price-bar .price .note                         {display: block; font-size: 0.36em; line-height: 1.2;}

  @media screen and (min-width: 1081px)         {

  .booking-bar                                  {height: var(--booking-box-height); padding: 0 0.6rem 0 0; --input-padding-inline: 1.8rem;}

  .booking-bar .inputs                          {height: 100%;}

  .booking-bar .inputs > div                    {height: 100%;}

  .booking-bar .inputs > div:nth-child(-n+2)    {width: 10.4rem;}

  .booking-bar .inputs > div:nth-child(-n+2) .custom-options

                                                {width: 18rem;}

  .booking-bar .inputs > div:nth-child(1) .custom-options

                                                {border-top-left-radius: var(--border-radius2);}

  .booking-bar .inputs > div:nth-child(2):after {background-image: url("images/icons/user-black40.svg");}

  .booking-bar .inputs > div:nth-child(3)       {width: 11.2rem;}

  .booking-bar .custom-select:before            {display: none;}

  .booking-bar > .button                        {height: calc(100% - 1.2rem); padding-block: 0;}



  }

  @media screen and (max-width: 1080px)         {

  .booking-bar                                  {width: 100%; flex-wrap: wrap; padding: 0.8rem; --input-padding-inline: 1.2rem;}

  .booking-bar .inputs                          {width: 100%; flex-wrap: wrap;}

  .booking-bar .inputs > div                    {height: 3rem;}

  .booking-bar .inputs > div:nth-child(-n+2)    {width: 50%; margin-block: -0.36rem 0.36rem;}

  .booking-bar .inputs > div:nth-child(2):after {display: none;}

  .booking-bar .inputs > div:nth-child(3)       {width: 100%; border-left: none; border-top: solid 1px var(--black-10);}

  .booking-bar .custom-select:before            {right: var(--input-padding-inline);}

  .booking-bar .custom-options                  {width: 100%;}

  .booking-bar > .button                        {width: calc(100% - 1.6rem); margin: 0.8rem;}

  }

  @media screen and (max-width: 768px)          {

  .booking-bar .inputs > div:nth-child(-n+2) .custom-options

                                                {width: 200%;}

  .booking-bar .inputs > div:nth-child(2) .custom-options

                                                {left: auto; right: 0;}

  }

  @media screen and (min-width: 481px)          {

  .hero + .section:has(.booking-box),

  .section:has(.cover) + .section:has(.booking-box)

                                                {padding-top: 0; margin-top: calc(-0.5 * var(--booking-box-height)); z-index: 500;}

  .booking-bar, .price-bar                      {max-width: 84%; background: white; box-shadow: 0 0 0.8em var(--black-20);}

  }

  @media screen and (max-width: 480px)          {

  .hero + .section:has(.booking-box),

  .section:has(.cover) + .section:has(.booking-box)

                                                {padding-top: 0;}

  .booking-bar                                  {width: 100vw; margin-inline: calc(50vw - 50%); padding: var(--wrapper-padding); background-image: linear-gradient(to top, var(--black-4), transparent); box-shadow: 0 0.4em 0.4em var(--black-10); margin-bottom: 0.5rem;}

  .price-bar                                    {height: auto; flex-direction: column; padding-inline: 0; margin-top: var(--gap1);}

  .price-bar .button                            {width: 100%;}

  }



.age-pick                                       {display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; font-size: 0.8em;}

.age-pick:not(:first-child)                     {padding-top: 0.75em; margin-top: 0.75em; border-top: solid 1px var(--black-15);}

.age-pick > div                                 {display: block;}

.age-pick .title                                {display: block; font-weight: 500;}

.age-pick .num                                  {display: flex; align-items: center;}

.age-pick .num button                           {display: flex; width: 1.5em; height: 1.5em; justify-content: center; align-items: center; font-size: 1.15em; background-repeat: no-repeat; background-position: center center; background-color: var(--black-04); background-size: 25%; font-weight: 400; border-radius: var(--border-radius0) var(--border-radius1); transition: 0.25s ease-in-out;}

.age-pick .num button:first-child               {background-image: url("images/icons/minus-color0.svg");}

.age-pick .num button:last-child                {background-image: url("images/icons/plus-color0.svg"); border-radius: var(--border-radius1) var(--border-radius0);}

.age-pick .num button:hover                     {background-color: var(--black-10);}

.age-pick .num input                            {width: 2.6em; height: 2em; text-align: center; padding: 0;}



.custom-select-wrapper select                   {position: absolute !important; left: -9999px;}

.custom-select-wrapper .custom-select           {display: block; width: 100%; height: 100%; position: relative; cursor: pointer; user-select: none;}

.custom-select:before                           {display: flex; width: 0.55em; height: 100%; position: absolute; right: 0; top: 0; background: url("images/icons/chevron-down-color0.svg") no-repeat center center; background-size: contain; content: " "; transition: .2s ease-in-out;}

.custom-select:has(.custom-select-trigger.show):before

                                                {transform: rotateX(180deg);}

.custom-select-trigger                          {display: block; width: 100%; height: 100%; line-height: var(--form-item-height); text-align: left; position: absolute; inset: 0; white-space: nowrap; padding-right: var(--input-padding-inline); box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; transition: .15s ease-in-out;}

.custom-select-trigger:hover                    {color: ;}

.custom-select-trigger.chosen                   {font-weight: 500;}

.custom-options                                 {display: none; width: calc(100% + 1.6em); max-height: 15em; background: white; position: absolute; z-index: 1; left: -0.8em; top: calc(100% + 0.3em); border: solid 1px var(--black-10); border-radius: 0.3em; box-shadow: var(--box-shadow1); box-sizing: border-box; overflow-y: auto; z-index: 100;}

.custom-option                                  {display: flex; width: 100%; align-items: center; gap: 0.4em; text-align: left; font-size: 0.9em; color: var(--color0b); font-weight: 300; line-height: 1.3; padding: 0.7em 0.85em; box-sizing: border-box; cursor: pointer; transition: .15s ease-in-out;}

.custom-option:not(:last-child)                 {border-bottom: solid 1px var(--black-10);}

.custom-option:hover,

.custom-option.selected                         {color: var(--color0); background: var(--color1-15);}

.custom-option.selected                         {font-weight: 500;}

/* Misto pro otevreny panel custom-selectu. Panel je absolutni, takze by
   jinak lezel na tlacitkach pod sebou ("Zjistit vice", "Zobrazit nabidku")
   a tap na ne by propadl do panelu - na uzkych displejich, kde jsou pole
   i tlacitka pod sebou, je to jinak slepa ulicka. Vysku presahu dopocita
   default.js (_RezervaPanelu) do --rezerva-panelu; bez JS zustava 0px. */

.rezerva-panelu                                 {padding-bottom: var(--rezerva-panelu, 0px);}



.date .custom-select:before                     {width: 1em; height: 1em; top: calc(50% - 0.5em); background-image: url("images/icons/calendar-color0.svg"); background-size: 94%; transform: none !important;}

.date .custom-options                           {width: calc(100% + 2 * var(--input-padding-inline)); max-height: unset; padding: var(--input-padding-inline); left: calc(-1 * var(--input-padding-inline)); border-radius: var(--border-radius1);}



.calendar                                           {display: flex; width: 100%; flex-direction: column; gap: 0.6em; --calendar-gap: clamp(0.2rem, 2cqw, 0.85rem); container-type: inline-size;}

.cal-header                                         {display: flex; width: 100%; height: 2.2em; background: var(--black-04); border-radius: var(--border-radius2) var(--border-radius0); overflow: hidden;}

.cal-header .nav-btn                                {appearance: none; display: block; width: 2.6em; height: 100%;; background-repeat: no-repeat; background-position: center center; background-size: 30% auto; cursor: pointer; transition: background-color .15s ease, transform .1s ease, opacity .15s ease;}

.cal-header .nav-btn:hover:not(:disabled)           {background-color: var(--black-04);}

.cal-header .nav-btn:disabled                       {opacity: 0.25; cursor: not-allowed;}

.cal-header .nav-btn.right                          {background-image: url("images/icons/chevron-right-color0.svg");}

.cal-header .nav-btn.left                           {background-image: url("images/icons/chevron-left-color0.svg");}

.cal-header .cal-title                              {display: flex; height: 100%;; justify-content: center; align-items: center; flex-grow: 2; text-align: center; font-size: 0.75em; font-weight: 400; text-transform: uppercase; user-select: none;}

.calendar .weekdays                                 {display: grid; width: 100%; grid-template-columns: repeat(7, 1fr); gap: var(--calendar-gap);}

.calendar .weekdays span                            {display: block; flex: 1; text-align: center; font-size: 0.7em; font-weight: 400;}

.calendar .days                                     {display: grid; width: 100%; grid-template-columns: repeat(7, 1fr); gap: var(--calendar-gap);}

.calendar .day                                      {display: flex; aspect-ratio: 1 / 1; justify-content: center; align-items: center; background-color: var(--black-04); border-radius: 3cqw 1cqw; font-size: clamp(11px, 5cqw, 14px); font-weight: 500; cursor: pointer; transition: .15s ease; user-select: none; position: relative; box-sizing: border-box;}

.calendar .day:hover:not(:disabled):not(.selected)  {background: var(--black-10);}

.calendar .day.in-range                             {background-color: var(--color1-60);}

.calendar .day.past                                 {opacity: 0.6; background-color: transparent; cursor: not-allowed;}

.calendar .day.empty                                {background-color: transparent; cursor: default; pointer-events: none;}

.calendar .day.selected                             {background: var(--color1);}

.calendar .day.selected:hover                       {background: var(--color1);}

.calendar .day.today:not(.selected)                 {border: solid 0.1em var(--color1c);}                                                



.preview                                        {display: flex; width: 100%; container-type: inline-size; --preview-title: clamp(1.25rem, 8cqw, 1.45rem); padding: var(--preview-padding); box-sizing: border-box;}

.preview .inner                                 {display: flex; width: 100%; flex-direction: column; flex-wrap: wrap; gap: 1em; position: relative;}

.preview .inner > div                           {display: flex; width: 100%; flex-direction: column; align-items: flex-start; align-content: flex-start; flex-grow: 2; flex-wrap: wrap; box-sizing: border-box; position: relative;}

.preview .inner :is(.images, .img)              {display: block; flex-grow: unset;}

.preview .inner :is(.images, .images .swiper-wrapper, .images .swiper-slide)

                                                {overflow: visible;}

.preview .inner > div span                      {display: block;}

.preview :is(.title, .date)                     {font-size: var(--preview-title); font-weight: 700; font-family: var(--font2); line-height: var(--font2-line-height);}

.preview .title                                 {width: 100%; text-align: left; text-transform: uppercase; position: relative; left: -0.05em;}

.preview .title a                               {color: inherit; text-decoration-color: transparent; transition: .25s ease-in-out;}

.preview .info                                  {display: flex; width: 100%; flex-direction: column; align-items: flex-start; text-align: left; flex-grow: 2;}

.preview .info > *                              {margin-top: 0.4rem;}

.preview .perex                                 {width: 100%; text-align: left; font-size: max(14px, 0.8em);}

.preview .button                                {display: inline-block; margin-top: 0.7rem;}

.preview .bottom                                {display: flex; width: 100%; flex-grow: 2; align-items: center; align-content: flex-end; gap: 0.6em 1em; flex-wrap: wrap; margin-top: 0.7rem;}

.preview .bottom .button                        {margin-top: 0;}

.preview .price                                 {display: block; font-size: 1.2em; font-weight: 400; position: relative; top: 0.05em;}

.preview .price .label                          {display: block; font-size: 0.5em; margin-bottom: -0.4em;}

.preview .date                                  {display: flex; width: calc(2.6 * var(--preview-title)); justify-content: center; flex-wrap: wrap; position: absolute; left: 0; top: 0; margin-top: 0;}

.preview .date span:first-child:after           {content: "/";}

.preview .inner > div:has(.date)                {padding-left: calc(3.3 * var(--preview-title));}

.preview:has(> a)                               {position: relative;} 

/* Kliknutelny prekryv cele dlazdice. Musi lezet NAD dekorativnim obrazkem
   (.img ma z-index 5), jinak tap na fotku propadne do prazdna - odkaz je
   sourozenec .inner, takze se k nemu klik z obrazku nemuze probublat.
   Na mobilu zabira fotka vetsinu dlazdice, tam je proto nekliknutelna cela.
   Co ma zustat nad prekryvem (napr. "Vice o balicku", strankovani swiperu),
   musi mit z-index vyssi nez 6. */

.preview > a                                    {display: block; position: absolute; inset: 0; z-index: 6;}

.preview:has(> a):hover .title a                {color: var(--color1c);}



.swiper-slide                                   {display: flex; height: auto; flex-shrink: 0; box-sizing: border-box;}



.swiper-button                                  {display: flex; --swiper-button: 2.4rem; width: var(--swiper-button); height: var(--swiper-button); background: url("images/icons/chevron-down-color0.svg") no-repeat center center; background-size: 0.8em; position: absolute; top: calc(50% - 0.5 * var(--swiper-button)); z-index: 5; margin: 0; cursor: pointer; transition: .25s ease-in-out;} 

.swiper-button-prev                             {left: 0; right: auto; transform: rotate(90deg); border-radius: var(--border-radius1) var(--border-radius0);}

.swiper-button-next                             {right: 0; left: auto; transform: rotate(-90deg); border-radius: var(--border-radius0) var(--border-radius1);}                                 

.swiper-button:after                            {display: none;}

.swiper-button:hover                            {background-color: var(--black-04);}

.swiper-button-disabled,

.swiper-button-lock                             {opacity: 0 !important;}



.swiper-pagination                              {display: flex; width: 100%; justify-content: center; gap: 0.3em; position: relative; inset: auto; margin-top: var(--gap2); box-sizing: border-box;}

.swiper-pagination-bullet                       {display: block; width: 1.6em; height: var(--swiper-pagination-height); background: var(--color0); opacity: 0.2; border-radius: 0.1em; margin: 0 !important; cursor: pointer;}

.swiper-pagination-bullet-active                {opacity: 1; background: var(--color1b) !important;}

.swiper-pagination-lock                         {display: none;}

.swiper-pagination:empty                        {display: none;}



.carousel:has(.swiper-pagination) .swiper-button{top: calc(50% - 0.5 * var(--swiper-button) - 0.5 * var(--gap2) - 0.5 * var(--swiper-pagination-height));}



.carousel                                       {display: block; width: 100%; position: relative; box-sizing: border-box; --swiper-pagination-height: 0.3em;}

.carousel-inner                                 {display: block; width: 100%; box-sizing: border-box; overflow: hidden;}

.carousel .swiper                               {display: block; width: 100%; box-sizing: border-box;}

  @media screen and (min-width: 1081px)         {

  .carousel-hub,

  .carousel-gallery,

  .carousel-article-gallery                     {padding-inline: 3rem;}

  }

  @media screen and (min-width: 641px) and (max-width: 1080px){

  .carousel                                     {padding-inline: 2.5rem;}

  }

  @media screen and (max-width: 640px)          {

  .carousel                                     {width: 100vw; margin-inline: calc(50% - 50vw); }

  .carousel .swiper                             {padding-inline: 0;}

  .carousel-hub .swiper-slide:not(.swiper-slide-active),

  .carousel-blog .swiper-slide:not(.swiper-slide-active),

  .carousel-gallery .swiper-slide:not(.swiper-slide-active),

  .carousel-article-gallery .swiper-slide:not(.swiper-slide-active)

                                                {opacity: 0.15; filter: grayscale(1);}

  .carousel-thumbs .swiper-button,

  .carousel-hub .swiper-button,

  .carousel-blog .swiper-button,

  .carousel-reviews .swiper-button,

  .carousel-gallery .swiper-button,

  .carousel-article-gallery .swiper-button      {display: none !important;}

  }



.hp .carousel-thumbs                                {top: 3rem; opacity: 0; transition-delay: 0.25s;}

.hp .carousel-thumbs .preview .img .img-inner       {transform: scale(0.6); transition: 1.25s ease-in-out;}

.hp .carousel-thumbs .preview .img .img-inner img   {transform: scale(1.5); transition: 1.25s ease-in-out;}

.hp .carousel-thumbs.play                           {top: 0; opacity: 1;}

.hp .carousel-thumbs.play .img .img-inner           {transform: scale(1);}

.hp .carousel-thumbs.play .img .img-inner span img  {transform: scale(1);}



.carousel-gallery .swiper-slide,

.carousel-article-gallery .swiper-slide             {padding: 0.6em;}

  @media screen and (min-width: 961px)              {

  .carousel-gallery .swiper-slide-active + .swiper-slide + .swiper-slide .img span

                                                    {border-bottom-right-radius: var(--border-radius4);}



  }

  @media screen and (min-width: 641px) and (max-width: 960px){

  .carousel-gallery .swiper-slide-active + .swiper-slide .img span

                                                    {border-bottom-right-radius: var(--border-radius4);}

  }

  @media screen and (min-width: 641px)              {

  .carousel-gallery .swiper-slide-active .img span

                                                    {border-top-left-radius: var(--border-radius4);}

  }

  @media screen and (max-width: 640px)          {

  .carousel-gallery .swiper-slide:nth-child(odd) .img span

                                                {border-radius: var(--border-radius4) var(--border-radius1);}

  .carousel-gallery .swiper-slide:nth-child(even) .img span

                                                {border-radius: var(--border-radius1) var(--border-radius4);}

  }



.carousel-thumbs .carousel-inner                    {overflow: visible;}  

.carousel-thumbs .swiper                            {overflow: visible;}

.carousel-thumbs .preview                           {position: static;}

.carousel-thumbs .preview .img .img-inner span      {border-radius: var(--border-radius1) var(--border-radius5);}

.carousel-thumbs .images .swiper-pagination-bullet  {background: white;}

.carousel-thumbs .images:has(.swiper-pagination:not(.swiper-pagination-lock)) .img-inner span:after

                                                    {display: block; width: 100%; height: 5rem; opacity: 0.8; background-image: linear-gradient(to top, black, transparent); position: absolute; left: 0; bottom: 0; z-index: 1; content: "";}

.carousel-thumbs .images .swiper-pagination:not(.swiper-pagination-lock)

                                                    {padding: 1.2em; position: absolute; right: 0;}

.carousel-thumbs .preview .perex                    {font-size: 1em;}

.carousel-thumbs .preview .button                   {font-size: var(--button-min);}

.carousel-thumbs .preview > a                       {display: none;}

  @media screen and (min-width: 1081px)         {

  .hp .carousel-thumbs:before                   {display: block; width: 40rem; height: 40rem; background: url("images/pictogram.svg") no-repeat center center; background-size: contain; filter: grayscale(1); opacity: 0.12; position: absolute; right: 43%; top: 25%; content: ""; z-index: -1;}

  .carousel-thumbs                              {min-height: 45cqw; --preview-padding: 0;}

  .carousel-thumbs > .carousel-inner > .swiper > .swiper-wrapper

                                                {width: 40%; height: auto; flex-direction: column; position: static; transform: none !important;}

  .carousel-thumbs > .carousel-inner > .swiper > .swiper-wrapper > .swiper-slide

                                                {width: 100% !important; position: static; transform: none !important; padding: 0.4rem 0 0.4rem 3rem; border-left: solid 0.1em var(--black-15);}

  .carousel-thumbs > .carousel-inner > .swiper > .swiper-wrapper > .swiper-slide:first-child    

                                                {margin-top: var(--gap1);}

  .carousel-thumbs > .carousel-inner > .swiper > .swiper-wrapper > .swiper-slide:not(:first-child)

                                                {padding-top: 0.6rem;}

  .carousel-thumbs .preview .inner              {position: static;}

  .carousel-thumbs .preview .images             {width: 45%; height: 128cqw; --aspect-ratio: 1; position: absolute; right: 0; top: 0; opacity: 0; transition: 0.75s ease-in-out;}

  .carousel-thumbs .preview .images .img-inner  {min-height: 100%;}

  .carousel-thumbs .preview .title              {width: auto; font-size: 1.55rem; opacity: 0.4; cursor: pointer; transition: .25s ease-in-out, font-size .75s ease-in-out;}

  .carousel-thumbs .preview .title:hover        {opacity: 1; color: var(--color1c);}

  .carousel-thumbs .preview .info               {display: none; padding-bottom: 0.8rem;}

  .carousel-thumbs .swiper-button               {display: none;}

  .carousel-thumbs .swiper-pagination

                                                {display: none;}

                                              

  .carousel-thumbs > .carousel-inner > .swiper > .swiper-wrapper > .swiper-slide-active                     {border-color: var(--color1c); border-width: 0.15em; z-index: 10;}

  .carousel-thumbs > .carousel-inner > .swiper > .swiper-wrapper > .swiper-slide-active .preview .images    {opacity: 1;}

  .carousel-thumbs > .carousel-inner > .swiper > .swiper-wrapper > .swiper-slide-active .swiper-pagination  {display: flex;}

  .carousel-thumbs > .carousel-inner > .swiper > .swiper-wrapper > .swiper-slide-active .preview .title     {font-size: 2.2rem; opacity: 1;}

  }



  @media screen and (max-width: 1080px)         {

  .carousel-thumbs .carousel-inner              {--carousel-thumbs-width: min(80%, 40rem); width: var(--carousel-thumbs-width); margin-inline: calc(50% - 0.5 * var(--carousel-thumbs-width));}

  .carousel-thumbs .swiper-slide:not(.swiper-slide-active)

                                                {opacity: 0.15; filter: grayscale(1);}

  .carousel-thumbs .swiper-slide:nth-child(even) .preview .img .img-inner span  

                                                {border-radius: var(--border-radius5) var(--border-radius1);}

  .carousel-thumbs .preview .title              {font-size: 1.8rem;}

  }



.carousel-hub .img                              {--aspect-ratio: 4/3;}

.carousel-hub .preview                          {--preview-title: clamp(1.25rem, 11cqw, 1.6rem);}

  @media screen and (min-width: 1081px)         {

  .carousel-hub .swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide .preview .img span

                                                {border-bottom-right-radius: var(--border-radius4);}

  }

  @media screen and (min-width: 789px) and (max-width: 1080px){

  .carousel-hub .swiper-slide-active + .swiper-slide + .swiper-slide .preview .img span

                                                {border-bottom-right-radius: var(--border-radius4);}

  }

  @media screen and (min-width: 641px) and (max-width: 768px){

  .carousel-hub .swiper-slide-active + .swiper-slide .preview .img span

                                                {border-bottom-right-radius: var(--border-radius4);}

  }

  @media screen and (min-width: 641px)          {

  .carousel-hub .swiper-slide-active .preview .img span

                                                {border-top-left-radius: var(--border-radius4);}

  }

  @media screen and (max-width: 640px)          {

  .carousel-hub .swiper-slide:nth-child(odd) .preview .img span

                                                {border-radius: var(--border-radius4) var(--border-radius1);}

  .carousel-hub .swiper-slide:nth-child(even) .preview .img span

                                                {border-radius: var(--border-radius1) var(--border-radius4);}

  }



.hp .carousel-blog .swiper-slide                {top: 3rem; opacity: 0; transition: 1s ease-in-out;}

.hp .carousel-blog .swiper-slide:nth-child(2)   {transition-delay: 0.2s;}

.hp .carousel-blog .swiper-slide:nth-child(3)   {transition-delay: 0.4s;}

.hp .carousel-blog.play .swiper-slide           {top: 0; opacity: 1;}



.carousel-blog .preview .title                  {text-transform: none;}

  @media screen and (min-width: 1081px)         {

  .carousel-blog .swiper-slide-active + .swiper-slide + .swiper-slide .preview .img span

                                                {border-bottom-right-radius: var(--border-radius4);}

  }

  @media screen and (min-width: 641px) and (max-width: 1080px){

  .carousel-blog .swiper-slide-active + .swiper-slide .preview .img span

                                                {border-bottom-right-radius: var(--border-radius4);}

  }

  @media screen and (min-width: 641px)          {

  .carousel-blog .swiper-slide-active .preview .img span

                                                {border-top-left-radius: var(--border-radius4);}

  }

  @media screen and (max-width: 640px)          {

  .carousel-blog .swiper-slide:nth-child(odd) .preview .img span

                                                {border-radius: var(--border-radius4) var(--border-radius1);}

  .carousel-blog .swiper-slide:nth-child(even) .preview .img span

                                                {border-radius: var(--border-radius1) var(--border-radius4);}

  }



.review                                         {display: flex; width: 100%; flex-direction: column; gap: var(--gap1); align-items: flex-start; background: var(--black-04); padding: max(1.5rem, 13%); border-radius: var(--border-radius1) var(--border-radius3); box-sizing: border-box;}

.review span                                    {display: block; width: 100%; text-align: left; font-size: max(13px, 0.85rem);}

.review .head                                   {display: block;}

.review .head .name                             {font-size: 1.15em; font-family: var(--font2); line-height: var(--font2-line-height); letter-spacing: var(--font2-spacing);}

.review .text                                   {flex-grow: 2;}

.review > img                                   {display: block; width: 5em;}



.reviews .swiper-slide:nth-child(even) .review  {border-radius: var(--border-radius3) var(--border-radius1);}

  @media screen and (min-width: 1081px)         {

  .reviews .wrapper                             {flex-direction: row; justify-content: space-between;}

  .reviews .container                           {width: 17rem; align-items: flex-start;}

  .reviews .container > *                       {text-align: left;}

  .reviews .carousel                            {width: calc(100% - 18rem); padding-left: 3rem;}

  .reviews .carousel .swiper-button-prev        {display: none;}

  .reviews .carousel .swiper-button-next        {left: 0; right: auto; transform: rotate(90deg);}

  .reviews .swiper-pagination                   {display: none;}

  .reviews .wrapper > .buttons                  {display: none;}

  }

  @media screen and (min-width: 1081px) and (max-width: 1600px){

  .reviews .carousel                            {width: calc(50% + 50vw - 18rem); margin-right: calc(50% - 50vw);}

  }

  @media screen and (max-width: 1080px)         {

  .reviews .container .button                   {display: none;}

  }



.image-container                                {display: flex; width: 100%; flex-direction: column; align-items: center; gap: var(--gap2) 0;}

.image-container > *                            {container-type: inline-size;}

.image-container .image .img-inner span         {border-radius: var(--border-radius1) var(--border-radius5);}

.image-container .container li                  {text-align: left;}

.image-container .container :is(h2, h3):not(:first-child)

                                                {margin-top: 1.2rem;}

  @media screen and (min-width: 1081px)         {

  .image-container                              {flex-direction: row; justify-content: space-between; align-items: stretch;}

  .image-container > *                          {width: 45%;}

  .image-container .image .img                  {height: 100cqw; --aspect-ratio: 1;}

  .image-container .image .img-inner            {min-height: 100%;}

  .image-container .container                   {align-items: flex-start;}

  .image-container .container > *               {text-align: left;}

  .image-container .container :is(h2, h3)       {font-size: calc(0.7 * var(--h2));}

  .image-container .container:has(h2) h3        {font-size: calc(0.55 * var(--h3));}

  .image-container .buttons                     {width: 100%; justify-content: flex-start;}

  .image-container .buttons .button             {font-size: 0.75em;}

  .image-container .infographics                {justify-content: flex-start;}

  .image-container .infographics > div          {width: auto; max-width: calc(50% - 0.5 * var(--infographic-gap)); flex-direction: row; flex-wrap: nowrap;}

  .image-container .infographics > div span     {text-align: left;}

  .image-container.reversed .container          {order: -1;}

  }

  @media screen and (max-width: 1080px)         {

  .image-container .image                       {width: min(100%, 30rem);}

  }



.booking-home                                   {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; gap: var(--gap1) 0; flex-wrap: wrap;}

.booking-home > *                               {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap;}

.booking-home :is(.filters, .results-head)      {display: flex; justify-content: space-between; flex-wrap: wrap; background: var(--black-04); padding: min(2em, calc(0.7rem + 3vw)) min(2.2em, calc(1rem + 3vw)); box-sizing: border-box; border-radius: var(--border-radius1);}

.booking-home h2                                {text-align: left; font-size: min(var(--h2), 1.7em); position: relative; bottom: -0.15em;}

.booking-home .filters                          {border-top-right-radius: var(--border-radius3);}

.booking-home .filter-items                     {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap1); font-size: 0.9em; padding-top: 1.2rem; --form-items-gap: 0.8em; --form-item-height: 2.6em;}

.booking-home .filter-items .form-items         {row-gap: 1rem;}

.booking-home .form-item-element                {font-size: 0.9em;}

.booking-home .calendar.merged                  {margin-block: 0.6rem;}

.booking-home .results-panel                    {gap: var(--gap1) 0;}

.booking-home .results                          {display: flex; width: 100%; flex-wrap: wrap; gap: calc(1.75 * var(--gap1)) var(--gap1);}

.booking-home .results-head                     {width: 100%; gap: 1em 1.5em;}

.booking-home .results-head .buttons            {display: flex; justify-content: flex-end; align-items: center; gap: 0.4em; flex-grow: 2;}

.booking-home .results-head .buttons > *        {flex-grow: 1;}

.booking-home .results-head .buttons > *:not(.sel)

                                                {background: var(--black-04);}

.booking-home .results-head .buttons > *:not(.sel):hover

                                                {background: var(--black-10);}

.booking-home .results .preview                 {width: 100%; padding: 0; position: relative;}

/* Kroky rezervace. Tridy rozdava server pres {krok2Trida} / {krok3Trida}
   v obsahu stranky "ubytovani-vypis" (Default.aspx.cs -> _UBYTOVANI_TRIDA_*),
   rozbaleni kroku 2 zpatky dela default.js - meni se spolu.
     .skryto  = krok 3, dokud neni vybrano v kroku 2
     .sbaleno = krok 2 po vyberu: misto dlazdic zustane souhrnny radek */

.booking-home .krok                             {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap1) 0;}

.booking-home .skryto                           {display: none;}

.booking-home .krok2 .vyber-souhrn,
.booking-home .krok2 #bt_ubytovani_zmenit       {display: none;}

.booking-home .krok2.sbaleno > .results         {display: none;}

.booking-home .krok2.sbaleno .vyber-souhrn      {display: flex; align-items: center; gap: 0.2em 0.6em; flex-wrap: wrap; text-align: left; flex-grow: 2;}

.booking-home .krok2.sbaleno #bt_ubytovani_zmenit
                                                {display: inline-block;}

.booking-home .vyber-souhrn strong              {font-weight: 700; font-family: var(--font2); letter-spacing: var(--font2-spacing);}

.booking-home .vyber-souhrn span                {opacity: 0.7; font-size: 0.9em;}

/* Dlazdice pobytovych balicku v kroku 2 - stejna karta jako u pokoju, jen
   uzsi (tri v rade na desktopu), takze se cely krok vejde nad zahyb. */

.booking-home .results-group                    {display: flex; width: 100%; flex-wrap: wrap; gap: calc(1.75 * var(--gap1)) var(--gap1);}

.booking-home .preview.balicek .images          {display: block; width: 100%;}

/* "Vice o balicku" ma vlastni akci (popup), musi proto zustat nad
   kliknutelnym prekryvem dlazdice (.preview > a ma z-index 6). */

.booking-home .preview.balicek .detail          {position: relative; z-index: 7; align-self: flex-start; font-size: max(13px, 0.75em); margin-top: 0.7rem; text-underline-offset: 0.25em; color: var(--color0); padding-bottom:0.5rem; padding-left:0.6rem;}

.booking-home .preview.balicek .detail:hover    {color: var(--color1c);}

/* Tlacitko s cenou drzi na dolni hrane karty, at je perex jakkoli dlouhy -
   jinak sedi kazde tlacitko jinde vysoko i mezi balicky navzajem. */

.booking-home .preview.balicek .bottom          {align-items: flex-end;}

/* Dlazdice bez balicku nema odkaz "Vice o balicku", tak si pod tlacitkem
   necha presne tak vysoke misto, jake zabira on. */

.booking-home .preview.bez-balicku .info        {padding-bottom: calc(max(13px, 0.75em) * var(--font1-line-height) + 1rem);}

/* Balicek, ktery neodpovida filtrum vlevo, zustava videt - jen zesedne
   a nejde vybrat. "Vice o balicku" funguje dal. */

.booking-home .preview.nevyhovuje :is(.img, .title, .perex, .price, .vybrat)
                                                {opacity: 0.45; filter: grayscale(1);}

.booking-home .preview.nevyhovuje :is(.vyber, .vybrat)
                                                {pointer-events: none;}

/* Proc je dlazdice zesedla. Zustava plne citelny - je to jedina vec na
   dlazdici, kterou ma navstevnik v tu chvili cist. */

.booking-home .preview .duvod                   {font-size: max(12px, 0.7em); font-weight: 500; letter-spacing: var(--font1-spacing); color: var(--color1c);}

.booking-home .preview .duvod:empty             {display: none;}

.booking-home .preview.sel                      {outline: 2px solid var(--color1c); outline-offset: 3px; border-radius: var(--border-radius1);}

/* Detail balicku otevreny v popup okne rezervace ("?popup=1"). */

body.popup :is(.header, .footer)                {display: none;}

  @media screen and (min-width: 1081px)         {

  .booking-home .results-group.balicky .preview {width: calc((100% - 3 * var(--gap1)) / 4);}

  .booking-home .results-group.balicky .preview   {--preview-title: clamp(0.95rem, 9cqw, 1.3rem);}

  .booking-home .filters                        {width: 21em;}

  .booking-home .filters .date .custom-options  {width: calc(2 * (100% + 2 * var(--input-padding-inline) + 0.5 * var(--form-items-gap) + 2px));}

  .booking-home .filters .date + .date .custom-options

                                                {left: auto; right: calc(-1px - var(--input-padding-inline));}

  .booking-home .results-panel                  {width: calc(100% - 21.5em - var(--gap1));}

  .booking-home .results-head                   {border-top-left-radius: var(--border-radius3);}

  }

  @media screen and (max-width: 1080px)         {

  .booking-home h2.mobile-collapse-trigger      {width: 100%; padding-right: 1.2em; position: relative; box-sizing: border-box; cursor: pointer;}

  .booking-home h2.mobile-collapse-trigger:after{display: block; width: 1em; height: 100%; font-size: 0.55em; background: url("images/icons/chevron-down-color0.svg") no-repeat center center; background-size: contain; position: absolute; top: 0; right: 0.2em; content: ""; transition: 0.25s ease-in-out;}

  .booking-home h2.mobile-collapse-trigger.show:after

                                                {transform: rotateX(180deg);}

  .booking-home .mobile-collapse                {display: none;}    

  .booking-home .results-head                   {border-bottom-left-radius: var(--border-radius3);}

  }

  @media screen and (min-width: 769px)          {

  .booking-home h2                              {width: auto;}

  .booking-home .results-head .buttons > *      {width: 10em; flex-grow: unset;}

  .booking-home .results-head .buttons > *:not(.sel)

                                                {background: transparent;}

  .booking-home .results-head .buttons > *:not(.sel):hover

                                                {background: var(--black-04);}

  }

  @media screen and (min-width: 641px)          {

  .booking-home .results .preview               {width: calc(50% - 0.5 * var(--gap1));}

  }

  @media screen and (min-width: 641px) and (max-width: 1080px){

  .booking-home .calendar.merged .day           {aspect-ratio: unset; height: 2.4em;}

  }



.infographics                                   {display: flex; width: 100%; justify-content: center; align-items: flex-start; flex-wrap: wrap; gap: var(--infographic-gap); margin-top: var(--gap1); --infographic-gap: 1.1rem;}

.infographics > div                             {display: flex; width: 6em; flex-direction: column; align-items: center; gap: 0.8em;}

.infographics > div .title                      {font-size: 1em; font-weight: 700; font-family: var(--font2); line-height: var(--font2-line-height);}

.infographics.more-text > div                   {width: 100%;}

.infographics.more-text > div .icon1            {font-size: 1.2em;}

.infographics.more-text > div .title            {font-size: 1.4em; margin-block: 0.15em -0.15em;}

  @media screen and (min-width: 961px)          {

  .infographics.more-text > div                 {width: calc(33.33% - 0.67 * var(--infographic-gap));}

  }

  @media screen and (min-width: 641px) and (max-width: 960px){

  .infographics.more-text > div                 {width: calc(50% - 0.5 * var(--infographic-gap));}

  }



.section:has(.infographics) + .section:has(.cover)

                                                {padding-top: var(--gap2);}

  

.section:has(.booking-box) + .section:has(.pricelist), .balicky

                                                {padding-top: var(--section-padding-low);}



.pricelist                                      {display: block; width: 100%;}

.pricelist table                                {width: 100%; border-collapse: collapse;}

.pricelist :is(th, td)                          {text-align: left; padding: 0.65rem 0.4rem; line-height: 1.3;}

.pricelist th                                   {font-size: 0.9em; font-weight: 500; padding-top: 0; vertical-align: bottom;}

.pricelist td                                   {font-size: 1.1em; font-weight: 300; vertical-align: top;}

.pricelist :is(th, td):nth-child(n+2)           {text-align: right;}

.pricelist tr:not(:last-child)                  {border-bottom: solid 1px var(--black-10);}

  @media screen and (max-width: 640px)          {  

  .pricelist table                              {font-size: 0.9em;}

  .pricelist table :is(th, td):first-child      {padding-left: 0;}

  .pricelist table :is(th, td):last-child       {padding-right: 0;}

  }



.gallery-grid                                   {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gallery-grid-gap); --gallery-grid-gap: 0.8rem;}

.gallery-grid > *                               {width: calc(50% - 0.5 * var(--gallery-grid-gap));}

.gallery-grid > *:first-child .img-inner span   {border-top-left-radius: var(--border-radius3);}

.gallery-grid > *:last-child .img-inner span    {border-bottom-right-radius: var(--border-radius3);}

  @media screen and (min-width: 769px)          {

  .gallery-grid > *                             {width: calc(33.33% - 0.67 * var(--gallery-grid-gap));}

  .gallery-grid > *:first-child .img-inner span {border-top-left-radius: var(--border-radius4);}

  .gallery-grid > *:last-child .img-inner span  {border-bottom-right-radius: var(--border-radius4);}

  }



.form                                           {display: flex; width: 100%; flex-wrap: wrap;; gap: var(--gap1);}

.form :is(h2, h3):not(:first-child)             {margin-top: var(--gap2);}

.form .hidden                                   {display: none; width: 100%;}

/* Sekce objednavky poukazu prepina JS (odebranim .hidden) - sirku jim proto
   musi dat vlastni pravidlo, jinak by se jako flex polozky .form smrskly na obsah. */
.form .poukaz-sekce                             {width: 100%;}

.form-items, .form-items .col                   {display: flex; width: 100%; flex-wrap: wrap; gap: var(--form-items-gap);}

.form-items                                     {display: flex; width: 100%; flex-wrap: wrap; gap: var(--form-items-gap);}

.form-items .col                                {align-items: flex-start; align-content: flex-start; }

.form-items .col .form-item                     {align-content: flex-start; align-items: flex-start;}

  @media screen and (min-width: 769px)          {

  .form-items .col                              {width: calc(50% - 0.5 * var(--form-items-gap));}

  }



.checkbox-border                                {display: flex; width: 100%; min-height: var(--form-item-height); align-items: center; position: relative; padding: 0.6em var(--input-padding-inline); box-sizing: border-box; border: solid 0.08em var(--black-30); border-radius: var(--border-radius0) var(--border-radius2);}

.checkbox-border:has(.chk1:checked)             {background: var(--color1-15); border-color: var(--color1c);}

.checkbox-border .chk1:not(:checked) + label,   

.checkbox-border .chk1:checked + label          {width: 100%; font-size: 0.9em;}



.chk1                                           {position: absolute; left: -9999px; top: 0;}

.chk1:not(:checked) + label,   

.chk1:checked + label                           {display: block; position: relative; text-align: left; font-size: 1em; color: inherit; font-weight: 300; padding-inline-start: 1.35em; cursor: pointer; box-sizing: border-box; transition: .15s ease-in-out;}

.chk1:not(:checked) + label:before,

.chk1:checked + label:before                    {display: block; width: 0.9em; height: 0.9em; background-color: var(--black-15); border-radius: 0.15em; position: absolute; left: 0; top: 0.31em; overflow: hidden; content: "";}

.chk1:checked + label:before                    {background: URL('images/icons/check-color0.svg') no-repeat center center, var(--color1); background-size: contain;}

.chk1:disabled + label,                  

.chk1:disabled + label:before                   {opacity: 0.4;}

.chk1 + label a                                 {color: inherit; text-decoration: underline; transition: .15s ease-in-out;}

.chk1 + label a:hover                           {color: var(--color2); text-decoration-color: transparent;}



.form .checkbox-border:has(.chk1:checked) + .hidden,

.form .form-item:has(.chk1:checked) + .hidden   {display: block;}



.form-bottom                                    {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: var(--gap1);}

.form-bottom .consent                           {display: block; width: 100%; font-size: 0.85em;}

.form-bottom .consent a                         {color: inherit; text-decoration: underline; transition: 0.15s ease-in-out;}

.form-bottom .consent a:hover                   {text-decoration-color: transparent;}

.form-bottom .button                            {min-width: 18em;}

  @media screen and (max-width: 640px)          {  

  .form-bottom .button                          {width: 100%;}

  }



.form-item                                      {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.3em; box-sizing: border-box; position: relative; transition: .35s ease-in-out;}

.form-item:has(.button),

.form-item:has(.checkbox-border)               {align-items: flex-end; align-content: flex-end;}

.form-item-element > .button                    {width: 100%; height: var(--form-item-height);}

.form-item.date:has(.show) .custom-select-wrapper

                                                {border-color: var(--color1c); outline-color: var(--color1c);}                                              



.form-item > label                              {display: flex; width: 100%; min-height: 1em; text-align: left; font-size: 1em; color: var(--color0); font-weight: 700; line-height: var(--font2-line-height); padding-inline: calc(0.6 * var(--input-padding-inline)); box-sizing: border-box; position: relative; order: -1; font-family: var(--font2);}

.form-item-element                              {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; position: relative;}

.form-item :is(input, select, textarea, .custom-select-wrapper)

                                                {display: block; width: 100%; color: var(--color0); font-size: 1em; font-weight: 500; background: var(--black-04); padding-inline: var(--input-padding-inline); border: solid 1px var(--black-10); outline: solid 0.1em transparent; border-radius: var(--border-radius0) var(--border-radius2); font-family: var(--font1); box-sizing: border-box; transition: .25s ease-in-out;}

.form-item:nth-child(even) :is(input, select, textarea, .custom-select-wrapper, .button)

                                                {border-radius: var(--border-radius2) var(--border-radius0);}

.form-item :is(input, select, .custom-select)           {height: var(--form-item-height);}

.form-item textarea                             {min-height: 8em; padding-block: 0.9em;}

.form-item select                               {appearance: none; padding-right: 2.2em; cursor: pointer; background-image: url("images/icons/chevron-down-color0.svg") !important; background-repeat: no-repeat !important; background-position: right var(--input-padding-inline) center !important; background-size: 0.65em !important;}

.form-item :is(input, select, .custom-select, textarea):focus

                                                {border-color: var(--color1c); outline-color: var(--color1c);}

.form-item :is(input, textarea)::placeholder    {color: var(--color0); opacity: 0.55; font-weight: 400;}

.form-item.disabled > label                     {opacity: 0.4;}

.form-item.disabled .form-item-element :is(input, select, textarea, .custom-select)

                                                {opacity: 0.5; pointer-events: none;}



.form-item.optional > label:after               {display: inline-block; color: var(--color1c); font-size: 0.96em; font-weight: 400; margin-left: 0.3em; content: "(nepovinné)";}



.form-item-note                                 {display: block; width: 100%; text-align: left; font-size: 0.8em; font-weight: 400; padding-inline: var(--input-padding-inline); box-sizing: border-box; overflow: hidden; text-overflow: ellipsis;}

.form-item-note.error                           {color: var(--error);}

.form-item:has(.error) .form-item-element > *   {outline-color: var(--error);}

.PKWin_frm_chyba.form-item-error                {display: block; width: 100%; text-align: left; color: var(--error); font-size: 0.8em; font-weight: 400; padding-inline: var(--input-padding-inline); box-sizing: border-box; cursor: pointer;}
.PKWin_frm_chyba.form-item-error span { color:white; }
.form-item:has(.PKWin_frm_chyba) .form-item-element > *
                                                {outline-color: var(--error);}



.form-item.w25-50,

.form-item.w50-25-50,

.form-item.w50                                  {width: calc(50% - 0.5 * var(--form-items-gap));}

  @media screen and (min-width: 1081px)         {  

  .form-item.w33-50-100,

  .form-item.w33-100                            {width: calc(33.33% - 0.67 * var(--form-items-gap));}

  }

  @media screen and (min-width: 769px) and (max-width: 1080px){  

  .form-item.w50-25-50                          {width: calc(25% - 3/4 * var(--form-items-gap));}

  .form-item.w33-50-100                         {width: calc(50% - 0.5 * var(--form-items-gap));}

  }

  @media screen and (min-width: 769px)          {  

  .form-item.w25-50                             {width: calc(25% - 3/4 * var(--form-items-gap));}

  .form-item.horizontal                         {height: var(--form-item-height); flex-wrap: nowrap; gap: 0; border: solid 1px var(--black-10); border-radius: var(--border-radius0) var(--border-radius2);}

  .form-item.horizontal:nth-child(even) {border-radius: var(--border-radius2) var(--border-radius0);}

  .form-item.horizontal label                   {width: auto; flex-grow: 2; height: 100%; align-items: center; font-size: 1.1em; top: 0.1em; padding-inline: 1em;}

  .form-item.horizontal .form-item-element      {width: 5em; flex-shrink: 0;}

  .form-item.horizontal :is(input, textarea, .custom-select-wrapper)

                                                {border: none; border-left: solid 1px var(--black-10);}

  .form-item.date.horizontal .form-item-element {width: calc(50% - 0.5 * var(--form-items-gap));}                                               

  .form-item.date.horizontal .custom-options    {width: calc(2 * (100% + 2 * var(--input-padding-inline) + 0.5 * var(--form-items-gap) + 2px)); right: calc(-1px - var(--input-padding-inline)); left: auto;}

  .form-item.horizontal:has(.error)             {margin-bottom: 1.2rem;}

  .form-item.horizontal .error                  {position: absolute; left: 0; top: calc(100% + 0.5em);}

  }

  @media screen and (max-width: 768px)          {  

  .form-item.date .custom-options               {width: calc(2 * (100% + 0.5 * var(--form-items-gap) + 2 * var(--input-padding-inline) + 2px)); left: calc(-1px - var(--input-padding-inline));}

  .form-item.date + .form-item.date .custom-options

                                                {left: auto; right: calc(-1px - var(--input-padding-inline));}

  }

  @media screen and (min-width: 641px)          {  

  .form-item.w50-100                            {width: calc(50% - 0.5 * var(--form-items-gap));}

  }



.form-item input[type="num"]                    {padding-right: 3em;}

.form-item:has(input[type="num"]) button        {width: 1em; height: 1em; font-size: 0.8em; background: url("images/icons/chevron-down-color0.svg") no-repeat center top; background-size: auto 80%; position: absolute; right: 1.4em; opacity: 0.5;}

.form-item:has(input[type="num"]) button:hover  {opacity: 1;}

.form-item:has(input[type="num"]) .num-up       {bottom: calc(50% + 0.1em); transform: rotate(180deg);}

.form-item:has(input[type="num"]) .num-down     {top: calc(50% + 0.1em);}



.toggle-select                                  {display: inline-flex; max-width: 100%; height: 2.2em; font-size: clamp(13px, calc(0.3em + 2vw), 0.9em); position: relative; align-items: stretch; background: var(--black-04); padding: var(--selection-toggle-padding); border-radius: calc(0.7 * var(--border-radius3)) var(--border-radius0); user-select: none; isolation: isolate; --selection-toggle-padding: 0.8em; --sel-x: 0px; --sel-w: 0px; margin-block: -0.2em 0.8em; overflow-x: auto; overscroll-behavior-x: contain; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none;}

.toggle-select::-webkit-scrollbar               {display: none;}

.toggle-select.can-scroll-left,

.toggle-select.can-scroll-right                 {-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%);}

.toggle-select.can-scroll-left                  {--fade-l: 1.4em;}

.toggle-select.can-scroll-right                 {--fade-r: 1.4em;}

.toggle-select::before                          {width: var(--sel-w); background: var(--color0); position: absolute; top: var(--selection-toggle-padding); bottom: var(--selection-toggle-padding); left: var(--selection-toggle-padding); z-index: 0; content: ""; transform: translateX(var(--sel-x)); border-radius: var(--border-radius2) var(--border-radius0); pointer-events: none; transition: transform .35s cubic-bezier(.5, 0, .2, 1), width    .35s cubic-bezier(.5, 0, .2, 1);}

.toggle-select:not(.is-ready)::before           {opacity: 0;}

.toggle-select > a                              {display: inline-flex; justify-content: center; align-items: center; font-weight: 400; padding-inline: 1em; white-space: nowrap; position: relative; z-index: 1; cursor: pointer; transition: color .2s ease; color:var(--color0);}

.toggle-select > a:hover                        {color: var(--color1c); }

.toggle-select > a.sel                          {color: white;}

.toggle-select > a:focus-visible                {outline: 2px solid var(--fg-1); outline-offset: 2px;}



.voucher-summary                                {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap1) 1.4em; background: var(--color0); padding: min(3rem, calc(1rem + 5vw)); border-radius: var(--border-radius1) var(--border-radius3); box-sizing: border-box; margin-top: var(--gap1); position: relative; isolation: isolate;}  

.voucher-summary:before                         {display: block; position: absolute; inset: 0; z-index: 1; opacity: 0.12; background: url("images/pictogram.svg") no-repeat right 8% bottom -3rem; background-size: 18rem; z-index: 1; content: "";}

.voucher-summary  > *                           {text-align: left; color: white; position: relative; z-index: 2;}

.voucher-summary span                           {display: block; width: 100%;}

.voucher-summary .title                         {font-size: var(--h3); font-weight: 700; font-family: var(--font2); line-height: var(--font2-line-height); text-transform: uppercase;}

.voucher-summary .info1                         {font-size: 1em; font-weight: 300; color: var(--color1); margin-top: -0.6em;}

.voucher-summary ul                             {font-size: 0.9em;}

.voucher-summary .price                         {font-size: 1.4em; font-weight: 400;}

  @media screen and (min-width: 769px)          {  

  .voucher-summary ul                           {column-count: 2; column-gap: 1.4em;}

  }



.selection                                      {display: flex; width: 100%; flex-direction: column; align-items: center; gap: var(--gap1);}

.selection h2                                   {font-size: 1.7em;}

.selection-optiones                             {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: var(--gap1);}

.selection-option                               {display: flex; width: 100%; flex-direction: column; background: var(--black-04); border-radius: var(--border-radius3) var(--border-radius1); overflow: hidden; container-type: inline-size;}

.selection-option:nth-child(even)               {border-radius: var(--border-radius1) var(--border-radius3);}          

.selection-option:nth-child(odd) .button        {border-radius: var(--button-radius-rev);}          

.selection-option .inner                        {display: flex; width: 100%; flex-direction: column; gap: 0.4em; flex-grow: 2; padding: clamp(1.5em, 10cqw, 3rem); box-sizing: border-box;}

.selection-option .inner :is(p, li, span)       {display: block; width: 100%; text-align: left;}

.selection-option .title                        {font-size: 1.8em; font-weight: 700; font-family: var(--font2); line-height: var(--font2-line-height);}

.selection-option ul                            {font-size: 0.85em;}

.selection-option ul li                         {padding-left: 1em; position: relative; box-sizing: border-box;}

.selection-option ul li:not(:first-child)       {margin-top: 0.3em;}

.selection-option ul li:before                  {display: block; width: 0.25em; height: 0.25em; background: var(--color0); border-radius: 100%; position: absolute; left: 0; top: 0.65em; content: "";}

.selection-option .bottom                       {display: flex; width: 100%; justify-content: space-between; align-items: center; align-content: flex-end; flex-wrap: wrap; gap: var(--gap1); flex-grow: 2; margin-top: 0.6em;}

.selection-option .bottom .price                {font-size: 1.3em; font-weight: 500;}

.selection-option .bottom .price + .price       {margin-top: calc(-0.9 * var(--gap1));}

.selection-option .bottom .button               {width: 100%;}

  @media screen and (min-width: 961px)          {  

  .selection-option                             {width: calc(33.33% - 0.67 * var(--gap1));}

  .selection-option:only-child                  {width: 100%; max-width: var(--wrapper-narrow-max); flex-direction: row;}

  .selection-option:only-child .img             {display: flex; width: 30%; height: auto; --aspect-ratio: none;}

  .selection-option:only-child .img-inner       {padding: 0;}

  .selection-option:only-child .img-inner span  {border-bottom-right-radius: var(--border-radius3);}

  .selection-option:only-child .inner           {width: 70%; font-size: 0.9em; padding: 2.5em;}

  .selection-option:only-child .bottom .button  {width: auto;}  

  }

  @media screen and (min-width: 541px) and (max-width: 960px){  

  .selection-option                             {width: calc(50% - 0.5 * var(--gap1));}

  }



.grid                                           {display: flex; width: calc(100% + 2 * var(--preview-padding)); flex-wrap: wrap; margin: calc(-1 * var(--preview-padding));}

.grid-item                                      {display: block; width: 100%; box-sizing: border-box;}

.grid-item:not(:has(> .preview))                {padding: var(--preview-padding);}

.grid-item:first-child .img-inner span          {border-top-left-radius: var(--border-radius3);}

.grid-item:last-child .img-inner span           {border-bottom-right-radius: var(--border-radius3);}

.grid.g3-2 .grid-item                           {width: 50%;}

  @media screen and (min-width: 961px)          {  

  .grid.g3-2-1 .grid-item                       {width: 33.33%;}

  .grid.g2-1 .grid-item                         {width: 50%;}

  }

  @media screen and (min-width: 481px) and (max-width: 960px){  

  .grid.g3-2-1 .grid-item                       {width: 50%;}

  }

  @media screen and (min-width: 769px)          {

  .grid.g3-2 .grid-item                         {width: 33.33%;}

  .grid.g2-1 .grid-item                         {width: 50%;}

  .grid-item:first-child .img-inner span        {border-top-left-radius: var(--border-radius4);}

  .grid-item:last-child .img-inner span         {border-bottom-right-radius: var(--border-radius4);}

  }



.cta-business                                   {display: flex; width: 100%; flex-direction: column; align-items: center; gap: 1.5rem var(--gap1); background: var(--black-04); padding: max(2.5em, 8%) max(2em, 6%); box-sizing: border-box; border-radius: var(--border-radius1) var(--border-radius4); --h2: min(3rem, calc(1rem + 3vw));}

.cta-business:before                            {display: block; position: absolute; inset: 0; z-index: 1; opacity: 0.12; background: url("images/pictogram.svg") no-repeat right 10% bottom -3rem; background-size: 20rem; z-index: -1; content: "";}

.cta-business .prices                           {display: flex; width: 27em; justify-content: space-between; gap: var(--gap1) 1.4em;}

.cta-business .prices > div                     {display: flex; flex-direction: column; align-items: flex-start; flex-grow: 1; gap: 0.3em; padding-left: 3.3em; box-sizing: border-box; position: relative;}

.cta-business .prices > div .num                {display: flex; width: 2.2em; height: 2.2em; justify-content: center; align-items: center; text-align: center; font-size: 1.05em; font-weight: 300; border-radius: var(--border-radius0) var(--border-radius2); border: solid 0.08em var(--color1c); position: absolute; left: 0; top: 0.05em;}

.cta-business .prices > div h3                  {text-align: left; font-size: 1.15em; text-transform: none;}

.cta-business .prices > div .price              {text-align: left; font-size: 1.3em;}

.cta-business .prices > div .button             {font-size: 0.6em; margin-top: 0.5em;}

  @media screen and (min-width: 1081px)         {

  .cta-business                                 {flex-direction: row; justify-content: space-between; align-items: flex-start;}

  .cta-business .container                      {width: calc(100% - 30em);}

  .cta-business .container *                    {text-align: left;}

  .cta-business .container h2                   {font-size: 2.2em; margin-top: -0.05em;}

  }

  @media screen and (max-width: 1080px)         {

  .cta-business:before                          {background-position: center bottom -3rem; background-size: 20rem;}

  }

  @media screen and (max-width: 640px)          {

  .cta-business .prices                         {width: auto; flex-direction: column;}

  }

  @media screen and (max-width: 480px)          {

  .cta-business                                 {width: 100vw; margin-inline: calc(50% - 50vw);}

  }



.opening-hours span                             {display: inline-block; width: 9em;}



.article-styles                                 {gap: var(--article-gap);}

.article-styles :is(ul, ol), .odrazky :is(ul, ol)                    {display: block; padding: 0 0 0 1.2em; margin: -0.35em 0 0;}

.article-styles :is(ul li, ol li), .odrazky :is(ul li, ol li)              {text-align: left; padding-left: 1.6em; margin-top: 0.2em; position: relative; box-sizing: border-box;}

.article-styles li:before, .odrazky li:before                      {display: block; position: absolute; content: "";}

.article-styles ul:not([class]) li:before, .odrazky ul:not([class]) li:before     {width: 0.36em; height: 0.36em; top: 0.6em; left: 0; background: var(--color1c); border-radius: 0.18em 0;}

.article-styles ol, .odrazky ol                             {list-style-type: none; counter-reset: li;}

.article-styles ol li, .odrazky ol li                          {counter-increment: li;}

.article-styles ol li:before, .odrazky ol li:before                   {color: var(--color1c); font-weight: 500; top: 0; left: -0.025em; content: counter(li)".";}

.article-styles p + :is(ul, ol)                 {margin-top: calc(-0.5 * var(--article-gap));}



.container:has(.breadcrumbs) + .article         {margin-top: calc(-1 * var(--gap1));}



.article                                        {display: flex; width: 100%; max-width: var(--wrapper-thin-max); align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: var(--article-gap); }

.article *:not(h1, .date)                       {text-align: left;}

.article h1                                     {font-size: min(3em, calc(0.8em + 4vw)); margin-top: 0 !important; text-transform: none;}

.article > .date                                {display: block; width: 100%; font-size: 1.2em; font-weight: 400; font-family: var(--font2); letter-spacing: var(--font2-spacing); margin-top: -0.3em;}

.article :is(h2, h3)                            {margin-block: 1em -0.1em;}

.article h2                                     {font-size: 1.75em;}

.article h3                                     {font-size: 1.4em; color: var(--color1c);}

.article :is(p a, li a, td a)                   {color: var(--color0);}

.article :is(p a, li a, td a):hover             {color: var(--color1c);}

.article .img .img-inner span                   {border-radius: var(--border-radius1) var(--border-radius4);}

.article .cover                                 {margin-block: 0.3rem var(--gap1);}

.article .highlight, .balicky .highlight                            {display: flex; width: 100%; flex-direction: column; align-items: center; gap: calc(0.85 * var(--article-gap)); padding: min(4rem, calc(1rem + 5vw)); margin-block: 0.5em; box-sizing: border-box; border-radius: var(--border-radius1) var(--border-radius3); overflow: hidden; position: relative;}

.article .highlight > *:first-child, .balicky .highlight > *:first-child            {margin-top: 0;}

.article .highlight :is(h2, h3), .balicky .highlight :is(h2, h3)                {font-size: max(1.4em, calc(0.5 * var(--h2)));}

.article .highlight .button, .balicky .highlight .button                    {font-size: 0.7em; margin-top: 0.25em;}

.article .highlight.color0                     {background: var(--color0);}

.article .highlight.color0 :is(h2, h3, p)       {text-align: center; color: white;}

.article .highlight.black-04, .balicky .highlight.black-04                   {align-items: flex-start; background: var(--black-04);}

.article .highlight.black-04 :is(h2, h3, p), .balicky .highlight.black-04 :is(h2, h3, p)     {color: var(--color0);}

.article .embed                                 {display: block; width: 100%; border-radius: var(--border-radius1); overflow: hidden;}

.article .embed > *                             {display: block; width: 100%;}

.article .preview                               {margin-block: 0.5rem; padding: 0;}

.article .grid                                  {margin-block: 0.5rem; --preview-padding: 0.35rem;}

.article .grid-item .img-inner span             {border-radius: var(--border-radius1);}

  @media screen and (min-width: 1080px)         {

  .article .cover                               {width: 120%; margin-inline: -10%;}

  .article .cover:after                         {display: block; width: 6%; aspect-ratio: 1; background: url("images/pictogram.svg") no-repeat center center; background-size: contain; position: absolute; left: 0; top: calc(100% + var(--article-gap) + var(--gap1)); content: "";}  

  }

  @media screen and (min-width: 641px)          {

  .article .preview .inner                      {flex-direction: row; align-items: stretch; background: var(--black-04); border-radius: var(--border-radius1) var(--border-radius3);}

  .article .preview .inner .img                 {width: 27%; height: auto; --aspect-ratio: unset;}

  .article .preview .inner .img-inner           {height: 100%;}

  .article .preview .inner .img-inner span      {border-radius: var(--border-radius1) var(--border-radius3);}

  .article .preview .inner > div                {width: 70%; padding: 1.5rem 6rem 1.5rem 0.5rem;}

  .article .preview .date                       {right: 1.5rem; top: 1.5rem; left: auto;}

  }

  @media screen and (min-width: 961px)          {

  .carousel-article-gallery                    {width: calc(100% + 2 * var(--preview-padding)); margin-inline: calc(-1 * var(--preview-padding)); padding: 0;}

  .carousel-article-gallery .swiper-button-prev{left: -2.6rem;}  

  .carousel-article-gallery .swiper-button-next{right: -2.6rem;}  

  }

  @media screen and (min-width: 641px)          {

  .carousel-article-gallery .swiper-slide-active .img span

                                                {border-radius: var(--border-radius1) var(--border-radius3);}

  .carousel-article-gallery .swiper-slide-active + .swiper-slide .img span

                                                {border-radius: var(--border-radius3) var(--border-radius1);}

  }

  @media screen and (max-width: 640px)          {

  .carousel-gallery .swiper-slide:nth-child(odd) .img span

                                                {border-radius: var(--border-radius4) var(--border-radius1);}

  .carousel-gallery .swiper-slide:nth-child(even) .img span

                                                {border-radius: var(--border-radius1) var(--border-radius4);}

  }

  @media screen and (min-width: 769px)          {

  .article .grid-item:first-child .img-inner span 

                                                {border-top-left-radius: var(--border-radius3);}

  .article .grid-item:last-child .img-inner span         

                                                {border-bottom-right-radius: var(--border-radius3);}

  }



.contact                                        {--preview-padding: 1.4rem;}

.contact .grid-item                             {display: flex; flex-wrap: wrap; padding: var(--preview-padding);}  

.contact-perex                                  {font-size: 1.45em; font-family: var(--font2); line-height: var(--font2-line-height);}  

.contact-soc                                    {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.4em 1.2em; margin-top: 0.8rem;}

.contact-soc a                                  {display: flex; align-items: center; gap: 0.35em; font-size: 1.15em; color: inherit; font-weight: 300; transition: 0.25s ease-in-out;}

.contact-soc a img                              {display: block; height: 1em;}

.contact-soc a:hover                            {color: var(--color1);}

  @media screen and (min-width: 769px)          {

  .contact-perex                                {text-align: left;}

  .contact-soc                                  {justify-content: flex-start;}

  }



.contact-section                                {display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 0.5em; padding: min(2.8rem, calc(1rem + 4vw)) min(3rem, calc(1rem + 5vw)); box-sizing: border-box; position: relative; overflow: hidden; border-radius: var(--border-radius3) var(--border-radius1);}

.grid-item:nth-child(even) .contact-section     {border-radius: var(--border-radius1) var(--border-radius3);}

.contact-section > *                            {text-align: left;}

.contact-section h2                             {font-size: 1.6em;}

.contact-section .contact-button                {display: flex !important; width: 100%; justify-content: space-between; align-items: flex-end; gap: var(--gap1); flex-wrap: wrap; margin-top: 0.4rem;}

.contact-section .contact                       {display: flex; align-items: center; gap: 0.35em; font-size: 1em; color: inherit; font-weight: 400; transition: 0.25s ease-in-out;}

.contact-section .contact img                   {display: block; height: 0.85em;}

.contact-section .contact:hover                 {color: var(--color1);}

.contact-section .button                        {font-size: 0.7em;}

.contact-section .contact-title                 {font-size: 0.8em; font-weight: 300; margin-bottom: -0.55em;}

.contact-section .hours                         {font-size: 0.8em; margin-top: -0.7em;}

.contact-section .billing                       {display: block; width: 100%; margin-top: -0.15em;}

.contact-section .billing p                     {display: inline-block; margin-top: 0.5em;}

  @media screen and (min-width: 961px)          {

  .contact-section .billing                     {column-count: 2; column-gap: 1.4em;}

  }

  @media screen and (min-width: 481px) and (max-width: 768px){

  .contact-section .billing                     {column-count: 2; column-gap: 1.4em;}

  }



.contact-section.color0                         {background: var(--color0);}

.contact-section.color0 > *                     {color: white; text-transform: none;}

.contact-section.black-04                       {background: var(--black-04);}

.contact-section.black-04:before                {display: block; position: absolute; inset: 0; z-index: 1; opacity: 0.15; background: url("images/pictogram.svg") no-repeat right 10% bottom -3rem; background-size: 14rem; z-index: -1; content: "";}

.contact-section.black-04 .phone                {color: white;}



.section:has(+ .locality)                       {padding-bottom: var(--section-padding);}



.locality                                       {background: var(--black-04); padding: 0 !important; container-type: inline-size; border-bottom-left-radius: var(--border-radius5); overflow: hidden;}

.locality .wrapper                              {gap: 0;}

.locality .container                            {padding-block: var(--section-padding);}

.locality h2                                    {font-size: var(--h3);}

.locality .nav-list                             {margin-top: -0.7em;}

.locality .nav-list li                          {text-align: left; padding-left: 1.3em;}

.locality .nav-list li:before                   {display: block; width: 0.9em; height: 0.9em; background: url("images/icons/nav-color1c.svg") no-repeat center center; background-size: contain; position: var(--article-gap); position: absolute; left: 0; top: 0.28em; content: "";}

.locality .map                                  {display: block; width: 100%; position: relative; border-top-left-radius: var(--border-radius3); overflow: hidden;}

.locality .map #map                             {display: block; position: absolute; inset: 0;}

.locality .map .marker                          {display: block; width: 50px; height: 50px; background: url("images/pictogram.svg") no-repeat center center; background-size: contain;}

  @media screen and (min-width: 1801px)         {

  .locality                                     {width: 1600px; margin-inline: calc(50% - 50vw - 800px); border-radius: var(--border-radius1) var(--border-radius1) var(--border-radius1) var(--border-radius5);}

  .locality .map                                {width: 800px; margin-right: calc(50% - 800px);}

  }

  @media screen and (min-width: 1081px) and (max-width: 1800px){

  .locality .map                                {width: 50vw; margin-right: calc(50% - 50vw);}

  }

  @media screen and (min-width: 1081px)         {

  .locality .wrapper                            {flex-direction: row; justify-content: space-between; align-items: stretch;}

  .locality .container                          {width: 45%;}

  .locality .container *                        {text-align: left;}

  .locality .nav-list                           {width: 100%;}

  }

  @media screen and (max-width: 1080px)         {

  .locality .map                                {width: 100vw; height: 30em; margin-inline: calc(50% - 50vw);}

  }



.split-block                                    {display: flex; width: 100%; flex-direction: column; align-items: center; gap: var(--gap1) var(--gap2);}

.split-block + .split-block                     {margin-top: var(--gap1);}

.split-block > div                              {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: calc(0.7 * var(--gap1)); flex-grow: 2;}

.split-block > div :is(h2, h3)                  {font-size: var(--h4); text-transform: none; letter-spacing: var(--font1-spacing); margin-top: -0.06em; position: relative; box-sizing: border-box; padding-top: calc(1.3 * var(--h4));}

.split-block > div :is(h2, h3) img              {display: block; width: 1em; height: 1em; font-size: 0.92em; position: absolute; left: calc(50% - 0.5em); top: 0.07em;}

.split-block .subheadline2                      {font-size: 1.3em; font-weight: 700;}

.split-block .subheadline2:not(:first-child)    {margin-top: 1em;}

  @media screen and (min-width: 1081px)         {

  .split-block                                  {flex-direction: row; justify-content: space-between; align-items: stretch;}

  .split-block > div:has(h2, h3)                {width: 40%;}

  .split-block > div :is(h2, h3)                {padding: 0 0 0 calc(1.3 * var(--h4));}

  .split-block > div :is(h2, h3) img            {left: 0;}

  .split-block > div *                          {text-align: left;}  

  }









.wndw                                           {display: flex; width: 100%; height: 100%; flex-direction: row; justify-content: center; align-items: center; padding: min(1rem, 4%); box-sizing: border-box; position: fixed; left: -99999px; top: 0; z-index: 1000000;}

.wndw:before                                    {display: block; width: 100%; height: 100%; background: var(--black-15); backdrop-filter: blur(6px); position: absolute; left: 0; top: 0; z-index: -1; content: ""; opacity: 0; transition: opacity .3s ease-in-out;}

.wndw > .outer                                  {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1;}

.wndw > div                                     {display: flex; width: 100%; max-width: 40em; max-height: calc(100vh - 6rem); background: white; backdrop-filter: blur(6px); position: relative; border-radius: var(--border-radius3) var(--border-radius1); top: 0; z-index: 2; box-shadow: 0 0 0.6em rgba(0,0,0,0.12); transform: scale(0.8); transition: .25s ease-in-out;}

.wndw > div .overflow                           {display: block; width: 100%; max-height: 100%; overflow-y: auto; overflow-x: hidden; box-sizing: border-box;}

.wndw > div .overflow > div                     {display: block; width: 100%; height: auto;}

.wndw.show                                      {left: 0;}

.wndw.show:before                               {opacity: 1;}

.wndw.show > div                                {transform: scale(1);}

.wndw.show.hide                                 {left: -99999px; transition: left 0s ease-in-out; transition-delay: 0.3s;}

.wndw.show.hide:before                          {opacity: 0;}

.wndw.show.hide > div                           {transform: scale(0.8) !important; opacity: 0;}

.wndw .cross                                    {display: block; width: 1.5em; height: 1.5em; font-size: 1em; background: var(--color0); border-radius: var(--border-radius0) var(--border-radius1); cursor: pointer; position: absolute; right: -0.4em; top: -0.4em; z-index: 10002; box-shadow: 0 0 0.4em rgba(0,0,0,0.1); transition: .2s ease-in-out;}

.wndw .cross span                               {display: block; width: 50%; height: 0.1em; background: white; border-radius: 2px; position: absolute; left: 25%; top: calc(50% - 0.05em); z-index: 1;}

.wndw .cross:hover                              {background: var(--color0b);}

.wndw .cross span:nth-child(1)                  {transform: rotate(45deg);}

.wndw .cross span:nth-child(2)                  {transform: rotate(-45deg);}

.wndw .wndw-content                             {display: flex; width: 100%; justify-content: center; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1.2em; font-size: 1rem; padding: max(2rem, 8%) min(5rem, 8vw); box-sizing: border-box;}

.wndw .wndw-content .icon                       {display: block; width: 2.5em; margin-bottom: -0.35em;}

.wndw .wndw-content .title                      {display: block; width: 100%; text-align: center; font-size: 1.6em; color: var(--color0); font-weight: 700; line-height: 1.1; margin-bottom: -0.15em;}

.wndw .wndw-content .title span                 {display: block; font-weight: 500;}

.wndw .wndw-content p                           {display: block; width: 100%; text-align: center; font-size: 0.9em;}

.wndw .wndw-content p strong                    {font-weight: 700;}

.wndw .wndw-content .title:has(+ p),

.wndw .wndw-content .title2:has(+ p)            {margin-bottom: -0.35em;}

.wndw .wndw-content .flex                       {gap: 0.3em; }

.wndw .wndw-content .flex .button               {min-width: 8em; font-size: 0.9em;}  

.wndw .wndw-content .link                       {font-size: 0.9em; color: var(--black-50); font-weight: 300; text-decoration: underline; cursor: pointer; transition: .15s ease-in-out;}

.wndw .wndw-content .link:hover                 {color: var(--color0); text-decoration-color: transparent;}



/* Potvrzovací („děkovací") stránka objednávky - /objednavka-odeslana.
   Souhrn i platební údaje používají .container.box a .pricelist; tady jsou
   jen drobnosti, které v designovém systému chyběly. */

.pricelist td .note                             {display: block; width: 100%; text-align: left; font-size: 0.75em; font-weight: 300; color: var(--black-50); margin-top: 0.2em;}

.platba-qr                                      {display: block; width: 11rem; height: auto; margin-inline: auto; border-radius: var(--border-radius3) var(--border-radius1);}

.pbrana-chyba                                   {color: var(--error); font-weight: 400;}


.form-item.horizontal :is(.form-item-note, .PKWin_frm_chyba)

                                                {position: absolute; left: 0; top: calc(100% + 0.5em);}