.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%;}

#in_message {
    position: absolute;
    left: -9999em;
    top: 0;
}

.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; }





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



:root                                           {

                                                --font1:            "special-gothic", sans-serif; /* 400, 500, 600, 700 */



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

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

                                                --black-45:         rgba(0,0,0,0.45);

                                                --black-70:         rgba(0,0,0,0.7);

                                                --black-90:         rgba(0,0,0,0.9);

                                                --dark-gray-45:     rgba(60,60,60,0.45);

                                                --white-05:         rgba(255,255,255,0.05);

                                                --white-10:         rgba(255,255,255,0.1);

                                                --white-20:         rgba(255,255,255,0.2);

                                                --white-30:         rgba(255,255,255,0.3);

                                                --white-60:         rgba(255,255,255,0.6);

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

                                                --white-94:         rgba(255,255,255,0.94);

                                                --color0:           #333333;

                                                --color0b:          #161616;

                                                --color0c:          #414141;

                                                --color1:           #f36122;

                                                --color1b:          #ee7905;

                                                --color-error:      #ee3405; 

                                                --gradient1:        linear-gradient(to top, var(--color1), var(--color1b));



                                                --wrapper-max:        62rem;

                                                --wrapper-wide-max:   72rem;

                                                --wrapper-medium-max: 52rem;

                                                --wrapper-thin-max:   36rem;

                                                --section-padding:    min(5rem, calc(2rem + 10vw));

                                                --section-padding2:   min(5rem, calc(1rem + 3vw));

                                                --h1:                 min(2.8em, calc(1.1em + 4vw));

                                                --gap1:               0.74rem;

                                                --gap2:               1.5rem;

                                                --gap3:               min(2.5rem, calc(0.5rem + 5vw));

                                                --border-radius0:     0.4rem;

                                                --border-radius1:     1rem;

                                                --border-radius2:     3rem;

                                                --form-item-height:   3.2rem;

                                                --box-shadow1:        0 0.2em 1em var(--black-45);

                                                }









html                                            {background: var(--color0); font-size: min(18px, calc(12px + 1vw)); color: white; line-height: 1.35; font-family: var(--font1);}

html, body, form                                {width: 100%;}

body                                            {display: block; overflow-x: hidden; position: relative; --grunge: min(200rem, 160vw); background: url("images/grunge.webp") repeat-y center top; background-size: var(--grunge) auto;}

form                                            {display: flex; min-height: 100vh; flex-direction: column; flex-wrap: wrap;}



body.fixed                                      {overflow-y: hidden;}

body.fixed:after                                {display: block; width: 100%; height: 100%; background: black; opacity: 0.2; position: absolute; left: 0; top: 0; z-index: 998; content: "";}



.wrapper                                        {display: flex; width: 90%; max-width: var(--wrapper-max); justify-content: center; flex-wrap: wrap; margin: 0 auto; box-sizing: border-box; position: relative;}

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

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

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

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

  }



.hp .header                                     {position: absolute; left: 0; top: 0;}



.header                                         {display: block; width: 100%; position: relative; z-index: 1000;}

.header .wrapper                                {width: 94%;}

.header .collapse                               {display: block; width: 100%; z-index: 2;}

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

.header .topbar                                 {display: block; width: 100%; box-sizing: border-box;}

.header .topbar :is(nav, ul)                    {display: flex; align-items: center; flex-wrap: wrap; gap: 0.8em 1.6em; box-sizing: border-box;}

.header .topbar nav a                           {display: block; color: var(--color3); font-weight: 600; transition: .15s ease-in-out;}

.header .topbar nav a:hover,

.header .topbar nav a.sel                       {color: var(--color1);}

.header .topbar nav a:last-child                {margin-right: 0;}

.header .topbar ul li                           {display: flex; align-items: center; flex-wrap: wrap; gap: 0.4em; color: var(--color3); font-weight: 400;}

.header .topbar ul li a                         {display: flex; align-items: center; gap: 0.4em; color: inherit; font-weight: 600; transition: .15s ease-in-out;}

.header .topbar ul li a:hover                   {color: var(--color1);}

.header .topbar ul li a img                     {display: block; width: 1.15em;}

.header .topbar ul li:not([class]) span         {color: var(--white-60);}

.header .topbar ul li:not(.logged) span:nth-of-type(2),

.header .topbar ul li.logged span:nth-of-type(1){display: none;}

.header .submenu                                {display: block; width: 100%; gap: 0.5em;}

.header .submenu .wrapper                       {gap: 0.3em;}

.header .submenu .wrapper > *                   {display: flex; justify-content: space-between; align-items: center; box-sizing: border-box;}

.header .submenu .parts-cta                     {gap: 0.6em; padding-inline: 0.8em 1em; flex-shrink: 0; border: solid 0.12em var(--color1); transition: .15s ease-in-out;}

.header .submenu .parts-cta .icon               {display: flex; width: 1.8em; height: 1.8em; justify-content: center; align-items: center; background: var(--gradient1); border-radius: 100%;}

.header .submenu .parts-cta .icon img           {display: block; width: 60%;}

.header .submenu .parts-cta .text               {display: block; flex-grow: 2; font-size: 0.95em; color: white; font-weight: 600; position: relative; top: -0.06em;}

.header .submenu .parts-cta .text span          {display: block; font-size: 0.7em; color: var(--color1); line-height: 0.9; position: relative; top: -0.08em; left: 0.05em;}

.header .submenu .parts-cta > img               {display: block; width: 0.5em; margin-left: 0.3em;}

.header .submenu .parts-cta:hover               {background: var(--black-30); border-color: var(--color1b);}

.header .submenu nav                            {display: flex; flex-wrap: wrap; flex-grow: 2;}

.header .submenu nav a                          {display: flex; align-items: center; flex-grow: 2; gap: 0.5em; font-size: 0.95em; color: white; font-weight: 600; box-sizing: border-box; position: relative; transition: .15s ease-in-out;}

.header .submenu nav a img                      {display: block; width: 1.6em; position: relative; top: -0.05em;}

.header .submenu nav a:hover                    {background: var(--white-05);}

.header .submenu nav a.sel                      {background: var(--black-45); color: var(--color1);}

.header .menu                                   {display: block; width: 100%; background: var(--color2); position: relative; z-index: 5;}

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

.header .menu .wrapper > div                    {display: flex; justify-content: flex-end; flex-grow: 2; gap: 0.35em;}

.header .menu .logo                             {display: block; height: 58%; flex-shrink: 0;}    

.header .menu .logo img                         {display: block; height: 100%;}    

.header .menu .search-bar .form-item-element    {background: var(--black-45);}

.header .menu .search-bar input                 {padding-right: 7.2em;}

.header .menu .search-bar .button               {width: 7.3em; height: calc(100% - 1.6em); font-size: 0.8em; position: absolute; right: 0.7em; top: 0.8em;}

.header .menu :is(.btn-cart, .btn-currency)     {height: auto; font-size: 1.05em; position: relative;}

.header .menu .btn-cart .count                  {display: flex; width: 1.65em; height: 1.65em; justify-content: center; align-items: center; font-size: 0.55em; color: white; background: var(--gradient1); border-radius: 100%; padding-top: 0.1em; box-sizing: border-box;}

.header .menu .btn-currency                     {padding-block: 0;}

.header .menu .btn-currency > div               {display: flex; width: 1.6em; height: 200%; flex-direction: column; position: relative; transition: .25s ease-in-out;}

.header .menu .btn-currency > div span          {display: flex; height: 50%; align-items: center; padding-top: 0.1em; box-sizing: border-box;}

.header .menu .btn-currency img                 {height: 0.9em; transition: .25s ease-in-out;}

.header .menu .btn-currency.czk > div           {top: -50%;}

.header .menu .btn-currency.eur > div           {top: 50%;}

.header .menu .btn-currency.eur img             {transform: rotate(180deg);}

.header .message                                {display: block; width: 100%; padding: 1em 0 0; position: absolute; left: 0; top: 100%; z-index: 1;}

.header .message .wrapper > div                 {display: block; width: 100%; background: var(--gradient1); padding: 0.6em 2.2em 0.6em 1em; border-radius: var(--border-radius0) var(--border-radius0) var(--border-radius1) var(--border-radius1); box-sizing: border-box; position: relative;}

.header .message .wrapper > div p               {font-size: 0.9em; font-weight: 500; margin: 0;}

.header .message .close                         {display: block; width: 1em; height: 1em; position: absolute; right: 0.8em; top: 0.65em; z-index: 1;cursor: pointer; transition: .2s ease-in-out;}

.header .message .close span                    {display: block; width: 100%; height: 0.12em; background: white; position: absolute; left: 0; top: calc(50% - 0.06em);}

.header .message .close:hover                   {opacity: 0.7;}

.header .message .close span:nth-child(1)       {transform: rotate(45deg);}

.header .message .close span:nth-child(2)       {transform: rotate(-45deg);}

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

  .header                                       {height: 10em;}

  .header .collapse                             {height: 100%; position: relative;}

  .header .collapse > div                       {height: 100%;}

  .header .topbar                               {height: 2rem; background: var(--black-45); backdrop-filter: blur(6px);}

  .header .topbar .wrapper                      {height: 100%; justify-content: space-between;}

  .header .topbar :is(nav, ul)                  {font-size: 0.75em;}

  .header .submenu                              {height: 3.2rem; position: absolute; left: 0; bottom: 0;}

  .header .submenu .wrapper                     {height: 100%;}

  .header .submenu .wrapper > *                 {height: 100%; background: var(--black-45); border-radius: var(--border-radius0);}

  .header .submenu .wrapper nav a               {height: 100%; justify-content: center; padding: 0.08em 0.75em 0; border-right: solid 1px var(--white-20);}

  .header .submenu .wrapper nav a:last-of-type  {border: none;}

  .header .submenu nav a:not(:nth-child(4)) img {margin-inline: -0.2em;}

  .header .menu                                 {height: calc(100% - 3.2rem - 2rem); position: absolute; left: 0; top: 2rem;}

  .header .menu .search-bar                     {display: block; width: 24.5em; position: relative;}

  .header .menu .btn-cart .count                {position: relative; top: -0.03em;}

  .header :is(.icon-search, #navicon, .search-bar .close)

                                                {display: none;}

  }

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

  body:not(.hp) .header                         {background: var(--black-30);}

  .header .collapse                             {width: 20em; height: calc(100vh - 3.6rem); background: var(--black-70); backdrop-filter: blur(8px); border-top-left-radius: var(--border-radius0); position: fixed; right: -22em; top: calc(4em - 1px); overflow-y: auto; transition: .5s ease-in-out;}

  .header .collapse .wrapper                    {width: 100%;}

  .header :is(.topbar, .topbar nav, .topbar ul) {padding: 1rem;}

  .header .topbar nav                           {width: 100%; font-size: 0.9em; column-gap: 1.5em;}

  .header .topbar ul li                         {font-size: 1.1em;}

  .header .topbar ul li:not([class]) span       {display: block; font-size: 0.7em; position: relative; top: -0.35em; left: 2.2em;}

  .header .topbar ul li.login                   {order: -1; width: 100%; font-size: 0.9em; background: var(--white-10); padding: 0.9em 1.1em; border-radius: var(--border-radius0); box-sizing: border-box; margin-bottom: 1em;}

  .header .topbar ul li.login a                 {flex-grow: 2;}

  .header .topbar ul li.login a:after           {display: block; width: 0.9em; height: 0.9em; flex-grow: 2; background: url("images/chevron-right-white.svg") no-repeat right center; background-size: contain; content: "";}



  .header .submenu                              {background: var(--color2);}

  .header .submenu .parts-cta                   {width: calc(100% - 4rem); height: 3.4em; margin: -0.5rem 2rem 1rem; border-radius: var(--border-radius0);}

  .header .submenu nav                          {display: block; width: 100%;}

  .header .submenu nav a                        {padding: 0.7em 2rem; border-top: solid 1px var(--color0c);}

  .header .submenu nav a.sel:after              {display: block; width: 0.15em; height: 100%; background: var(--color1); position: absolute; left: 0; content: "";} 

  .header .menu                                 {height: 3.6rem;}

  .header .menu .wrapper > div                  {align-items: center; gap: 0;}

  .header .menu .icon-search                    {display: block; width: 1.1em; height: 1.1em; margin-right: 0.9em; cursor: pointer; transition: .15s ease-in-out;}

  .header .menu .icon-search svg                {display: block; width: 100%; height: 100%; fill: white; transition: .15s ease-in-out;}

  .header .menu .icon-search.hide               {opacity: 0;}

  .header .menu .icon-search:hover svg          {fill: var(--color4);}

  .header .menu .search-bar                     {width: 96%; position: fixed; margin-top: -1em; opacity: 0; top: -100em; left: 3%; transition: margin .15s ease-in-out, opacity .15s ease-in-out;}

  .header .menu .search-bar:before              {display: block; width: calc(100% + 4em); height: calc(100% + 1.5em); position: absolute; left: -2em; top: -1px; z-index: -1; background: var(--color2); content: "";}

  .header .menu .search-bar .close              {display: flex; height: 2.4em; align-items: center; font-size: 0.75em; color: white; font-weight: 700; background: var(--black-45); padding: 0.1em 1.4em 0; border-radius: 1.2em var(--border-radius0) var(--border-radius0) 1.2em; box-sizing: border-box; position: absolute; right: 0; bottom: -3.1em; z-index: 1;}

  .header .menu .search-bar .close:hover        {color: white;}

  .header .menu .search-bar.show                {margin-top: 0; top: calc(4em - 1px); opacity: 1;}

  .header .menu :is(.btn-cart, .btn-currency)   {height: 2.4rem; font-size: 0.9em; padding-inline: 0.8em;}

  .header .menu .btn-cart                       {border-top-right-radius: 0; border-bottom-right-radius: 0;}

  .header .menu .btn-cart .text                 {display: none;}

  .header .menu .btn-cart .count                {position: absolute; right: 0.5em; bottom: 0.5em;}

  .header .menu .btn-currency                   {border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 0;}

  .header .menu .btn-currency > div span        {justify-content: flex-end; text-align: right;}

  .header #navicon                              {display: block; width: 1.3em; height: 1.1em; margin-left: 0.9em; cursor: pointer; position: relative; z-index: 10002;}

  .header #navicon span                         {display: block; width: 100%; height: 0.12em; background: white; position: absolute; left: 0; z-index: 1; border-radius: 0.06em; transition: .2s ease-in-out;}

  .header #navicon:hover span                   {color: white;}

  .header #navicon span:nth-child(1)            {top: 0;}

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

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

  .header #navicon span:nth-child(4)            {bottom: 0;}

  .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 .collapse                        {right: 0;}

  } 

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

  .header                                       {font-size: 0.9em;}    

  .header .menu .logo                           {height: 50%;}

  .header .menu .search-bar input               {padding-right: 3.2em;}

  .header .menu .search-bar .button             {width: auto;}

  .header .menu .search-bar .button span        {display: none;}

  .header .menu .btn-currency img               {display: none;}

  }



.footer                                         {display: block; width: 100%; background: var(--black-20); position: relative; z-index: 10;}

.footer #map                                    {display: block; position: absolute; right: 0; top: 0; z-index: 2;}

.footer .wrapper > div                          {display: flex; flex-direction: column; gap: 2.5em;}

.footer .upper                                  {display: flex; width: 100%; justify-content: space-between; background: var(--white-10); padding: 1em; box-sizing: border-box; border-radius: var(--border-radius1);}

.footer .upper .parts-link                      {display: flex; flex-grow: 2; justify-content: center; align-items: center; gap: 0.85em; padding: 1rem; border-radius: calc(0.7 * var(--border-radius1)); box-sizing: border-box; transition: .15s ease-in-out;}

.footer .upper .parts-link img                  {display: block; width: 3em;}

.footer .upper .parts-link > span               {display: block; font-size: 1.1em; color: white; font-weight: 600; line-height: 1.15;}

.footer .upper .parts-link > span span          {display: block; font-size: 0.65em; color: var(--color1); text-decoration: underline; margin-top: 0.6em; transition: .15s ease-in-out;}

.footer .upper .parts-link:hover                {background: var(--black-20);}

.footer .upper .parts-link:hover > span span    {color: var(--color1b); text-decoration-color: transparent;}

.footer .upper .rating                          {display: flex; flex-direction: column; justify-content: center; padding: 0 0.6rem 0 1rem; box-sizing: border-box; margin-left: 1rem; border-left: solid 1px var(--white-20);}

.footer .upper .rating > *                      {display: flex; justify-content: space-between; align-items: center; gap: 1.2em; padding: 0.4rem; border-radius: var(--border-radius0); box-sizing: border-box; transition: .15s ease-in-out;}

.footer .upper .rating > span                   {font-size: 0.8em; font-weight: 600; margin-bottom: 0.1em;}

.footer .upper .rating > span img               {display: block; width: 0.85em; position: relative; top: -0.065em; right: -0.2em;}

.footer .upper .rating > a img:nth-child(1)     {display: block; height: 1.1em;}

.footer .upper .rating > a img:nth-child(2)     {display: block; height: 0.55em;}

.footer .upper .rating > a:hover                {background: var(--black-20)}

.footer-contacts                                {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 1.5em 10%;}

.footer-contacts > div                          {display: flex; flex-direction: column;}

.footer-contacts .title                         {display: block; font-size: 0.9em; color: var(--color1); font-weight: 600; margin-bottom: 0.6em;}

.footer-contacts ul                             {display: flex; flex-direction: column; gap: 0.15em;}

.footer-contacts ul li                          {display: block; font-size: 0.9em; font-weight: 600;}

.footer-contacts ul li a                        {display: flex; align-items: center; gap: 0.35em; color: inherit; transition: .15s ease-in-out;}

.footer-contacts ul li a img                    {display: block; width: 1.1em; height: 1.1em;}

.footer-contacts ul li a:hover                  {color: var(--color1);}

.footer-contacts ul li.small                    {font-size: 0.6em;}

.footer-contacts .address li.small              {margin-top: 0.5em;}

.footer-contacts .address li.small a            {color: var(--color1); text-decoration: underline;}

.footer-contacts .address li.small a:hover      {color: var(--color1b); text-decoration-color: transparent;}

.footer-contacts .hours li span                 {display: inline-block; width: 4em;}

.footer-contacts .hours li.small                {max-width: 15em; color: var(--white-60); font-weight: 400; margin-top: 0.5em;}

.footer .bottom                                 {display: flex; width: 100%; flex-wrap: wrap; gap: 0.4em 0.8em;}

.footer .bottom li                              {display: block; font-size: 0.7em; color: var(--white-60); font-weight: 500;}

.footer .bottom li a                            {color: inherit; transition: .15s ease-in-out;}

.footer .bottom li a:hover                      {color: var(--white-90);}

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

  .footer                                       {padding-block: var(--section-padding);}

  .footer #map                                  {width: 50%; height: 100%; right: 50%;}

  .footer .wrapper                              {justify-content: flex-end;}

  .footer .wrapper > div                        {width: 44%;}

  .footer .bottom li:last-child                 {flex-grow: 2; text-align: right;}

  }

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

  .footer #map                                  {width: 42rem;

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

                                                 mask-image: linear-gradient(to right, transparent, black 35%);                                           

                                                 -webkit-mask-image: linear-gradient(to right, transparent, black 35%);

                                                }

  }

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

  .footer-contacts                              {font-size: 0.9em;}

  }

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

  .footer                                       {padding-top: var(--map-height); --map-height: calc(13rem + (20rem - 30vw));}

  .footer #map                                  {width: 100%; height: var(--map-height);}

  .footer .wrapper > div                        {width: 100%; max-width: 30rem; padding-block: 2.5rem 1.5rem;}

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

  }

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

  .footer .upper .parts-link                    {flex-direction: column;}

  .footer .upper .parts-link img                {width: 2em;}

  .footer .upper .parts-link > span             {text-align: center; font-size: 0.9em;}



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

  .footer-contacts .links                       {width: 100%; flex-direction: row; justify-content: center;}

  .footer-contacts .links .title                {display: none;}

  .footer-contacts .links ul                    {width: 100%; flex-direction: row; justify-content: center; gap: 0.2em 0.6em;}

  }



.main                                           {display: block; width: 100%; flex-grow: 1;}



.section                                        {display: block; width: 100%; position: relative; padding-top: var(--section-padding);}

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

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



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



.content                                        {display: flex; width: 100%; flex-direction: column; align-items: center; position: relative; z-index: 3;}

.content h2                                     {max-width: 30rem; margin-bottom: var(--gap2);}

.content h2 + p                                 {max-width: 46rem; text-align: center; margin-block: 0 var(--gap2);}



.flex                                           {display: flex !important; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.6em;}



strong                                          {font-weight: 700;}

em                                              {font-style: italic;}



.txt-clr1                                       {color: var(--color1);}



.upcoming                                       {width: 100%; text-align: center; color: var(--color1); font-weight: 600; padding: 1em 1em 0.95em; background: var(--black-45); border-radius: var(--border-radius0); box-sizing: border-box;}



.button                                         {display: flex; justify-content: center; align-items: center; gap: 0.4em; font-size: 0.9em; font-weight: 600; color: white; padding: 0.5em 1em 0.4em; border-radius: var(--border-radius0); border: none; outline: none; box-sizing: border-box; overflow: hidden; cursor: pointer; --button-rounded: calc(0.5 * var(--form-item-height)); transition: .25s ease-in-out;}

.button img                                     {display: block; height: 0.95em; position: relative; top: -0.06em;}

.button.color1                                  {background-image: var(--gradient1);}

.button.color1:hover                            {filter: brightness(0.9);}

.button.black45                                 {background: var(--black-45); backdrop-filter: blur(6px);}

.button.black45:hover                           {background: var(--black-20);}

.button.color1:hover                            {filter: brightness(0.9);}

.button.white10                                 {background: var(--white-10); backdrop-filter: blur(6px);}

.button.white10:hover                           {background: var(--white-20);}

.button.rounded-left                            {border-top-left-radius: var(--button-rounded); border-bottom-left-radius: var(--button-rounded);}

.button.rounded-bottom                          {padding-inline: 1.6em; border-bottom-left-radius: var(--button-rounded); border-bottom-right-radius: var(--button-rounded);}

.button.rounded-bottom-right                    {padding-right: 1.6em; border-bottom-right-radius: var(--button-rounded);}



.link                                           {display: block; font-weight: 500; text-decoration: underline; transition: .15s ease-in-out;}

.link:hover                                     {text-decoration-color: transparent; filter: brightness(0.9)Å‚}

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



h1, h2, h3, .subheadline                        {display: block; width: 100%; text-align: center; font-weight: 700; line-height: 1.2; box-sizing: border-box;}

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

h2                                              {font-size: min(2.4em, calc(0.8em + 4vw));}

h3                                              {font-size: min(1.6em, calc(0.5em + 4vw)); color: var(--color1);}

.subheadline                                    {font-size: min(1em, calc(0.3em + 4vw)); color: var(--color1); font-weight: 600; margin-bottom: 0.4em;}



.main :is(p a, li a)                            {color: inherit; text-decoration: underline; text-decoration-color: var(--color1); transition: .15s ease-in-out;}

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

.main :is(ul, ol)                               {display: block; margin-top: -0.4em;}

.main li                                        {display: inline-block; width: 100%; text-align: left; padding-left: 1.6em; box-sizing: border-box; position: relative; margin-top: 0.4em;}

.main li:before                                 {display: block; position: absolute; content: "";}

.main ul li:before                              {width: 0.35em; height: 0.35em; background: var(--color1); left: 0; top: 0.43em; border-radius: 100%;}

.main ol                                        {list-style-type: none; counter-reset: li;}

.main ol li                                     {counter-increment: li;}

.main ol li:before                              {color: var(--color1); font-weight: 600; left: -0.05em; top: 0; content: counter(li)".";}

.main ul.chevrons li                            {padding-left: 1.1em;}

.main ul.chevrons li:before                     {width: 1em; height: 1em; background: url("images/chevron-right-color1.svg") no-repeat left center; background-size: auto 0.8em; top: 0.16em;}

.main ul.checks li                              {padding-left: 1.4em;}

.main ul.checks li:before                       {width: 1em; height: 1em; background: url("images/icons/icon-check-round-color1.svg") no-repeat left center; background-size: auto 0.9em; top: 0.12em;}



.page-head                                      {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap1) var(--gap2); margin-bottom: var(--gap2); position: relative; box-sizing: border-box;}

.page-head h1                                   {width: auto; text-align: left;}

.page-head .logo                                {display: block; width: 2.1em; font-size: var(--h1);}

.page-head p                                    {width: 100%; margin-top: 0.5em;}

.page-head .subheadline                         {text-align: left; font-size: calc(0.6 * var(--h1)); margin-top: -0.2em;}

.page-head .icon-info                           {flex-direction: row; width: auto; max-width: 18rem; align-items: center; flex-wrap: nowrap; font-size: 0.8em; font-weight: 500; padding: 1.8em; border-bottom-left-radius: calc(0.8 * var(--border-radius2));}

.page-head .icon-info .icon                     {display: flex; width: 2.8em; height: 2.8em; justify-content: center; align-items: center; border-radius: 100%; background: var(--white-10); flex-shrink: 0; position: relative; top: -0.03em;}

.page-head .icon-info .icon img                 {display: block; width: 50%;}

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

  .page-head:has(.icon-info)                    {padding-right: 22rem;}

  .page-head .icon-info                         {position: absolute; right: 0; top: 0;}

  }

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

  .page-head .icon-info                         {width: 100%; max-width: 100%;}

  }

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

  .page-head .icon-info                         {font-size: 0.7em;}

  }



.breadcrumbs                                    {display: block; width: 100%; font-size: 0.8em; overflow-x: auto; scrollbar-width: none;}

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

.breadcrumbs ul                                 {display: flex; width: 100%; flex-wrap: nowrap; gap: 0.6em; margin: 0;}

.breadcrumbs ul li                              {display: flex; width: auto; align-items: center; gap: 0.6em; padding: 0; margin: 0; position: relative;}

.breadcrumbs ul li:last-child                   {padding-right: 0; margin-right: 0;}

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

.breadcrumbs ul li:after                        {display: block; width: 0.4em; height: 1em; opacity: 0.6; margin: 0; background: URL('images/chevron-right-white.svg') no-repeat center center; background-size: 100% auto; position: relative; top: -0.05em; content: "";}

.breadcrumbs ul li:last-child:after             {display: none;}

.breadcrumbs ul li a                            {display: block; color: var(--white-60); text-decoration: underline; text-decoration-color: var(--white-60); font-weight: 500; line-height: 1.3em; border: none; white-space: nowrap; transition: .15s ease-in-out;}

.breadcrumbs ul li:last-child a                 {text-decoration: none; font-weight: 600; padding-right: 1em; pointer-events: none;}

.breadcrumbs ul li a[href]:hover                {color: white; text-decoration-color: transparent;}

@media (max-width: 768px){
    .breadcrumbs {overflow-x: visible;}
    .breadcrumbs ul {flex-wrap: wrap;}
    .breadcrumbs ul li {white-space: normal;}
    .breadcrumbs ul li a {white-space: normal;}
}


.pagination                                     {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.5em; margin-top: var(--gap2);}

.pagination a                                   {display: flex; width: 2.4em; height: 2.4em; justify-content: center; align-items: center; text-align: center; font-size: 0.8em; color: var(--white-90); font-weight: 500; background: var(--white-10); border-radius: 100%; transition: .15s ease-in-out;}

.pagination a:hover                             {color: white; background: var(--white-20);}

.pagination a.sel                               {color: white; font-weight: 700; background: var(--color1);}



.box                                            {display: flex; width: 100%; flex-direction: column; flex-wrap: wrap; gap: var(--gap1); background: var(--black-45); box-sizing: border-box; border-radius: var(--border-radius1);}



.img-full-size                                  {display: flex; justify-content: center; position: absolute; inset: 0;}

.img-full-size div                              {display: block; width: 100%; height: 100%;}

.img-full-size div img                          {display: block; width: 100%; height: 100%; object-fit: cover;}

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

  .img-full-size div                            {width: 1800px;

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

                                                 mask-image: linear-gradient(to right, transparent, black 40%, black 60%, transparent);                                           

                                                 -webkit-mask-image: linear-gradient(to right, transparent, black 40%, black 60%, transparent);

                                                }

  }



.hero                                           {padding-block: 0 var(--section-padding);}

.hero .img-full-size                            {

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

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

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

                                                }

.hero .img-full-size div                        {background: URL('images/hero-mobile.webp') no-repeat center top; background-size: cover;}

.hero .wrapper                                  {padding-top: clamp(20rem, calc(5rem + 30vw), 35rem); gap: 2em;}

.hero .wrapper h1 span                          {color: var(--color1);}

.hero .wrapper img                              {display: block; width: min(7.6em, calc(3em + 10vw)); flex-shrink: 0;}

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

  .hero .img-full-size div                      {background-image: URL('images/hero.webp');}

  .hero .wrapper                                {justify-content: space-between; flex-wrap: nowrap;}

  .hero .wrapper h1                             {width: auto; max-width: 14em; text-align: left;}

  }

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

  .hero .wrapper img                            {order: -1;}

  }                             



.nav-grid                                       {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 1em 0;}

.nav-grid a                                     {display: flex; width: 47%; flex-direction: column; align-items: center; gap: 0.8em; border-radius: var(--border-radius1); padding: 1em; box-sizing: border-box; transition: .15s ease-in-out;}

.nav-grid a div                                 {display: flex; width: 100%; flex-direction: column; align-items: center; justify-content: flex-end; flex-grow: 2; gap: 0.7em;}

.nav-grid a .icon                               {display: flex; width: min(6em, calc(4em + 5vw)); aspect-ratio: 1; justify-content: center; align-items: center; background: var(--black-30); border-radius: 100%;}

.nav-grid a .icon img                           {display: block; width: 50%;}

.nav-grid a .label                              {display: block; width: 100%; text-align: center; color: var(--color1); font-size: 0.75em; font-weight: 600; margin-block: -0.65em;}

.nav-grid a .title                              {display: block; width: 100%; text-align: center; color: white; font-size: 1.1em; font-weight: 600;}

.nav-grid a .button                             {font-size: 0.7em; padding-inline: 1.5em;}

.nav-grid a:hover                               {background: var(--white-05);}

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

  .nav-grid a                                   {width: 16.66%;}

  }

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

  .nav-grid a                                   {width: 33.33%;}

  }



.swiper-slide                                   {display: flex; height: auto; flex-shrink: 0; transition: .35s ease-in-out;}



.swiper-button                                  {display: flex; justify-content: center; align-items: center; background: var(--color1); position: absolute; z-index: 5; margin: 0; box-sizing: border-box; cursor: pointer;} 

.swiper-button-prev                             {right: auto; transform: rotate(-180deg);}

.swiper-button-next                             {left: auto;}                                 

.swiper-button img                              {display: block; height: 33%;}

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

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

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

.swiper-buttons-edges .swiper-button            {width: 1.6em; height: 3.2em; padding-left: 0.2em; border-radius: 3.2em 0 0 3.2em; top: calc(50% - 1.6em);}

.swiper-buttons-edges .swiper-button-prev       {left: 0 !important;}

.swiper-buttons-edges .swiper-button-next       {right: 0 !important;}

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

  .swiper-button                                {width: 2.6em; height: 2.6em; top: calc(50% - 1.3em); border-radius: 100%;}

  }

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

  .swiper-button                                {width: 1.6em; height: 3.2em; padding-left: 0.2em; border-radius: 3.2em 0 0 3.2em; top: calc(50% - 1.6em);}

  .swiper-button-prev                           {left: calc(-50vw + 50%)}

  .swiper-button-next                           {right: calc(-50vw + 50%);}

  }



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

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

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

.carousel + .flex                               {margin-top: var(--gap2);}

.carousel + .flex .button                       {padding-inline: 2em;}

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

  .carousel .swiper-button-prev                 {left: -10%;}

  .carousel .swiper-button-next                 {right: -10%;}

  }

  @media screen and (min-width: 1367px) and (max-width: 1800px){

  .carousel                                     { --carousel-edge: calc(50vw - 0.5 * var(--wrapper-max));}

  .carousel-inner                               {width: 100vw; margin-inline: calc(-1 * var(--carousel-edge)); padding-inline: var(--carousel-edge);

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

                                                 mask-image: linear-gradient(to right, transparent, black var(--carousel-edge), black calc(100% - var(--carousel-edge)), transparent);                                           

                                                 -webkit-mask-image: linear-gradient(to right, transparent, black var(--carousel-edge), black calc(100% - var(--carousel-edge)), transparent);

                                                }



  .carousel .swiper                             {overflow: visible;}

  }

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

  .carousel-blog                                {padding-inline: 10%;}

  }

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

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

  .carousel .swiper                             {padding-inline: calc(40vw - 10rem);}

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

                                                {opacity: 0.4;}

  }



.no-tax:after                                   {display: inline-block; margin-left: 0.1em; content: " bez DPH";}



.pricing                                        {display: block;}

.pricing span                                   {display: block; line-height: 1;}

.pricing .price-old                             {display: flex; align-items: center; gap: 0.4em;}

.pricing .price-old .discount                   {font-size: 0.8em; font-weight: 700; padding: 0.35em 0.4em 0.25em; border: solid 0.14em var(--color1); border-radius: 0.4em; box-sizing: border-box; position: relative; top: -0.08em;}

.pricing .price-old .amount                     {color: var(--white-60); text-decoration: line-through;}

.pricing .price                                 {font-size: 1.6em; font-weight: 700; padding-top: 0.07em;}

.pricing .price.no-tax                          {font-size: 0.75em; font-weight: 600; padding-top: 0.09em;}



.preview                                        {display: flex; width: 100%; height: auto; background: var(--black-30); border-radius: var(--border-radius1) var(--border-radius1) var(--border-radius2) var(--border-radius1); box-sizing: border-box; position: relative; container-type: inline-size;}

.preview .inner                                 {display: flex; width: 100%; flex-direction: column; gap: var(--inner-padding); --inner-padding: 8cqw; padding: var(--inner-padding); box-sizing: border-box;}

.preview .img                                   {display: block; width: calc(100% + var(--inner-padding)); background: white; padding-top: var(--img-aspect-ratio); --img-aspect-ratio: calc(100% / 3 * 2); margin-left: calc(-1 * var(--inner-padding)); border-radius: 0 calc(0.6 * var(--border-radius1)) calc(0.6 * var(--border-radius1)) 0; overflow: hidden; position: relative;}

.preview .img-inner                             {display: block; position: absolute; inset: 0; transition: .15s ease-in-out;}

.preview .img-inner:not(:has(img)):before       {display: flex; justify-content: center; align-items: center; position: absolute; inset: 0; font-size: 4.5cqw; color: black; font-weight: 600; text-align: center; background: url("images/pictogram-black.svg") no-repeat center top calc(50% - 5cqw); background-size: 22cqw auto; padding-top: 18cqw; content: "Foto se připravuje"; opacity: 0.25;}

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

.preview .img:hover .img-inner                  {opacity: 0.9;}

.preview .inner > div                           {display: flex; flex-direction: column; flex-grow: 2; align-items: flex-start; gap: 0.8em;}

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

.preview .title                                 {font-size: clamp(1.2em, calc(0.6em + 3cqw), 1.6em); font-weight: 700; line-height: 1.2;}

.preview .title a                               {color: white; transition: .15s ease-in-out;}

.preview .title a:hover                         {color: var(--color1) !important;}

.preview .perex                                 {font-size: 0.8em; opacity: 0.65;}

.preview .flex                                  {justify-content: space-between; align-items: center; align-content: flex-end; flex-grow: 2; font-size: 0.75em; margin-top: 0.4em;}

.preview .date                                  {display: block; opacity: 0.45; margin-right: 0.5em;}



.preview.shop-item                              {background: var(--white-94);}

.preview.shop-item .img                         {--img-aspect-ratio: calc(100% / 4 * 3);}

.preview.shop-item .category-label              {display: flex; align-items: center; gap: 0.4em; font-size: 0.7em; color: white; font-weight: 600; background: var(--black-70); padding: 0.7em 2.2em 0.6em 0.8em; border-top-right-radius: 3em; position: absolute; left: 0; bottom: 0; z-index: 2;}

.preview.shop-item .category-label img          {display: block; width: 1.2em; position: relative; top: -0.05em;}

.preview.shop-item :is(.title a, .perex)        {color: var(--color0);}

.preview.shop-item .price-old .discount         {color: var(--color0);}                             

.preview.shop-item .price                       {color: var(--color0);}

.preview.shop-item .button                      {font-size: 1.2em;}

.preview.shop-item .discount-label              {display: flex; width: 3.2em; height: 3.2em; justify-content: center; align-items: center; font-size: 0.85em; font-weight: 600; background-image: var(--gradient1); border-radius: 100%; padding-top: 0.1em; box-sizing: border-box; position: absolute; top: calc(0.5 * var(--inner-padding)); right: calc(0.5 * var(--inner-padding)); z-index: 2; box-shadow: 0 0 0.6em var(--black-20);}

.preview.shop-item .pricing .price-old :is(.amount, .price-no-tax)

                                                {color: var(--color0c)}



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

.items > *                                      {width: 100%;}

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

  .items > *                                    {width: calc(33.33% - 2 / 3 * var(--gap1));}

  }

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

  .items > *                                    {width: calc(50% - 0.5 * var(--gap1));}

  }



.section:has(.assets)                           {z-index: 2;} 

.main .assets                                   {display: flex; flex-wrap: wrap; margin: 0; border-radius: var(--border-radius1); overflow: hidden; box-shadow: var(--box-shadow1); padding: 0;}

.main .assets li                                {display: flex; flex-direction: column; align-items: center; gap: 1em; text-align: center; font-size: 0.9em; font-weight: 500; text-shadow: 0 0 0.2em var(--black-30); background: var(--black-45); padding: 8% 12%; box-sizing: border-box; margin: 0; backdrop-filter: blur(6px);}

.main .assets li:nth-child(2)                   {background-image: var(--gradient1);}

.main .assets li:before                         {display: flex; width: 2.7em; aspect-ratio: 1; justify-content: center; align-items: center; font-size: 1.25em; color: white; border: solid 0.16em white; padding-top: 0.1em; box-sizing: border-box; border-radius: 100%; position: relative; inset: 0; content: counter(li)""; box-shadow: 0 0 0.5em var(--black-30);}

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

  .main .assets li                              {width: 33.33%; padding: 4% 7%;}

  .customer-care                                {padding-top: calc(2 * var(--section-padding)); margin-top: calc(-1 * var(--section-padding));}

  }

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

  .main .assets li                              {font-size: 0.85em; padding: 3% 5%;}

  }

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

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

  }



.img-text-about                                 {display: flex; width: 100%; flex-direction: column; justify-content: center; align-items: center; flex-wrap: wrap; gap: 2.5em 0; overflow: hidden;}

.img-text-about .img                            {display: block; width: 100%;}

.img-text-about .img img                        {display: block; width: 100%;}

.img-text-about h2                              {margin-bottom: 0.5em;}

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

  .img-text-about                               {flex-direction: row; justify-content: space-between;}

  .img-text-about .content                      {width: 45%;}

  .img-text-about .img                          {width: 65%; margin-inline: -6%;}

  .img-text-about :is(h2, .subheadline)         {text-align: left;}

  }

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

  .img-text-about > div                         {max-width: 36rem;}

  .img-text-about .img                          {order: -1;}

  .img-text-about ul.chevrons li                  {padding: 0.5em 0 0; text-align: center;}

  .img-text-about ul.chevrons li:before           {width: 1em; height: 0.16em; background: var(--color1); border-radius: 0.08em; left: calc(50% - 0.5em); top: -0.04em;}

  .img-text-about ul.chevrons li:first-child      {padding: 0;}

  .img-text-about ul.chevrons li:first-child:before{display: none;}

  }

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

  .img-text-about .img                          {width: calc(10rem + 80%); margin-inline: calc(-5rem - 40%);}

  }



.customer-care .img-full-size div               {background: black;}

.customer-care .img-full-size div img           {opacity: 0.35;}

.customer-care p                                {margin-block: -0.5em 1.5em;}

.customer-care .img-controls                    {display: flex; height: 2.8em; align-items: center; background: var(--black-70); padding: 0 1.3em; border-radius: 2em; box-shadow: 0 0 1em var(--white-20);}

.customer-care .img-controls img                {display: block; height: 60%;}



.support                                        {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: var(--section-padding) 0;}

.support-contact                                {display: flex; width: 100%; flex-direction: column; justify-content: flex-end; align-items: center; gap: var(--gap1); flex-grow: 2; box-sizing: border-box; position: relative;}

.support-contact .img                           {display: block; width: 100%; max-width: 12rem; margin-bottom: -3rem;}

.support-contact .img img                       {display: block; width: 100%;}

.support-contact .name                          {display: block; font-size: 1.4em; font-weight: 700; margin-bottom: -0.5rem;}

.support-contact .quick-contact                 {display: flex; align-items: center; gap: 0.4em; font-size: 0.85em; color: inherit; font-weight: 500; transition: .15s ease-in-out;}

.support-contact .quick-contact:hover           {color: var(--color1);}

.support-contact .quick-contact img             {display: block; width: 1.15em;}

.support-contact .button                        {font-size: 0.8em;}

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

  .support                                      {justify-content: space-between;}

  .support .content                             {width: 15rem;}

  .support .content :is(.subheadline, h2, p)    {text-align: left;}

  .support .faq-chat                            {width: calc(90% - 15rem);}

  }

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

  .support-contact                              {max-width: 28rem; background: var(--black-45); border-radius: var(--border-radius1) var(--border-radius2); padding: 3rem 0 3rem 10rem; margin-top: 1.5rem;}

  .support-contact .img                         {width: 9rem; position: absolute; left: 2.5rem; top: -1.5rem;}

  }



.faq-chat                                       {display: flex; flex-direction: column; width: 100%;}

.faq-chat > div                                 {display: flex; align-items: flex-start; width: 75%; gap: 0 0.8em; position: relative;}

.faq-chat > div p                               {padding: 0.6rem 1rem 0.5rem; box-sizing: border-box; border-radius: var(--border-radius0); position: relative;}

.faq-chat > div .photo                          {display: block; width: 2.2em; aspect-ratio: 1; border-radius: 100%; overflow: hidden; flex-shrink: 0;}

.faq-chat > div .photo img                      {display: block; width: 100%; height: 100%; object-fit: cover;}

.faq-chat .question:not(:first-child)           {margin-top: 1.5em;}

.faq-chat .question                             {align-self: flex-end; justify-content: flex-end; z-index: 2;}

.faq-chat .question p                           {background: var(--gradient1); font-size: 1em; font-weight: 600; border-bottom-right-radius: 2rem; padding-right: 1.6rem;}

.faq-chat .answer                               {margin-top: -0.8rem;}

.faq-chat .answer .photo                        {order: -1; align-self: flex-end; background: var(--black-45);}

.faq-chat .answer p                             {background: var(--black-45); font-size: 0.9em; border-top-left-radius: 2rem; padding-block: 2rem; padding-left: 1.6rem;}

.faq-chat .answer p:after                       {display: block; font-size: 0.75em; position: absolute; right: 0.9rem; bottom: 0.6rem; opacity: 0.5; content: "Jakub";}

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

  .faq-chat                                     {font-size: 0.9em;}

  .faq-chat > div                               {width: 80%;}

  .faq-chat > div .photo                        {width: 1.6em;}

  }



.article-styles :is(ul, ol)                     {display: flex; flex-wrap: wrap; gap: 0.2em; padding: 0 0 0 0.7em;}

.article-styles :is(ul li, ol li)               {text-align: left; padding-left: 1.6em; position: relative; box-sizing: border-box;}

.article-styles li:before                       {display: block; position: absolute; content: "";}

.article-styles ul li:before                    {width: 0.32em; height: 0.32em; top: 0.56em; left: 0; background: var(--color1); border-radius: 100%;}

.article-styles ol                              {list-style-type: none; counter-reset: li;}

.article-styles ol li                           {counter-increment: li;}

.article-styles ol li:before                    {top: 0; left: -0.05em; content: counter(li)".";}



.breadcrumbs:has(+ .article)                    {margin-bottom: var(--gap1);}

 

.article                                        {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: var(--gap2); line-height: 1.5;}

.article *                                      {text-align: left;}

.article h1                                     {font-size: min(2.2rem, calc(1rem + 5vw)); margin-top: 0 !important; text-wrap: unset;}

.article .article-info                          {display: flex; width: 100%; font-size: 0.9em; margin-top: calc(-0.5 * var(--gap2));}

.article .article-info > span                   {display: flex; align-items: center; color: var(--white-60); font-weight: 500;}

.article .article-info > span a                 {color: var(--color1); text-decoration: underline; transition: .25s ease-in-out;}

.article .article-info > span a:hover           {color: var(--color1b); text-decoration-color: transparent;}         

.article .article-info > span:nth-child(2)::before

                                                {display: block; width: 0.07em; height: 0.95em; background: var(--color0); opacity: 0.35; margin-inline: 0.55em; position: relative; top: -0.08em; content: "";}

.article :is(h2, h3)                            {margin-block: 0.4em -0.2rem;}

.article h2                                     {font-size: 1.75em;}

.article h3                                     {font-size: 1.35em; color: var(--color1);}

.article p + p                                  {margin-top: calc(-0.5 * var(--gap2));}

.article .image                                 {display: block; width: 100%; aspect-ratio: 16/9; border-radius: var(--border-radius1); overflow: hidden; transition: .25s ease-in-out;} 

.article .image span                            {display: block; width: 100%; height: 100%; transition: .25s ease-in-out;}

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

.article .image:hover                           {opacity: 0.8;}

.article .highlight1                            {display: flex; width: calc(100% - 1.5em); flex-wrap: wrap; gap: 0.9rem; font-size: 0.9em; padding-left: 2em; margin-left: 1.5em; border-left: solid 0.35em var(--color1); border-bottom-left-radius: var(--border-radius1); box-sizing: border-box; margin-block: var(--gap1);}

.article .highlight1 > *:first-child            {margin-top: 0 !important;}

.article .highlight1 :is(h2, h3)                {color: white;}

.article .highlight1 .button                    {font-size: 0.85em;}

.article .highlight2                            {display: flex; width: 100%; flex-wrap: wrap; gap: 0.9rem; font-size: 0.9em; background: var(--black-30); padding: 3em; border-radius: var(--border-radius1) var(--border-radius1) var(--border-radius2) var(--border-radius1); box-sizing: border-box; margin-block: 0.5em;}

.article .highlight2 > *:first-child            {margin-top: 0 !important;}

.article .highlight2 :is(h2, h3)                {color: white;}

.article .highlight2 .button                    {font-size: 0.84em;}

.article .embed                                 {display: block; width: 100%; border-radius: 1em; overflow: hidden;}

.article .embed iframe                          {display: block; width: 100%;}

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

  .article .preview .inner                      {flex-direction: row; --inner-padding: 5cqw;}

  .article .preview .inner .img                 {width: 30%; padding-top: calc(0.3 * var(--img-aspect-ratio));}

  .article .preview .inner > div                {width: 70%; padding-block: 0.5em;}

  .article .preview .inner > div .title         {font-size: 1.35em; margin: -0.1em 0 0 !important;}

  }



.slider-gallery                                 {position: relative; --button-size: 2em;}                      

.slider-gallery .swiper                         {overflow: hidden; border-radius: 0 var(--border-radius2);}

.slider-gallery .swiper-slide a                 {display: block; width: 100%; padding-top: 66.66%; position: relative; border-radius: var(--border-radius1); overflow: hidden; transition: .25s ease-in-out;}     

.slider-gallery .swiper-slide a span            {display: block; position: absolute; inset: 0;}

.slider-gallery .swiper-slide a span img        {display: block; width: 100%; height: 100%; object-fit: cover;}     

.slider-gallery .swiper-slide a[href]:hover     {opacity: 0.8;}

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

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

  .slider-gallery .swiper                       {padding-inline: 5%;}

  .slider-gallery .swiper-slide-active + .swiper-slide

                                                {opacity: 1;}

  }



.about                                          {display: flex; width: 100%; flex-direction: column; gap: var(--gap3); line-height: 1.5;}

.about .row                                     {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap2);}

.about .year strong                             {display: block; font-size: 1.8em;}

.about .image                                   {display: block; width: 100%; aspect-ratio: 4/3; border-radius: var(--border-radius1) var(--border-radius1) var(--border-radius2) var(--border-radius1); overflow: hidden;}

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

.about .line                                    {display: block; width: 100%; height: 1px; background: var(--white-20);}

.about-bottom                                   {display: flex; width: 100%; flex-direction: column; justify-content: center; align-items: center; gap: var(--gap2); background: var(--black-30); padding: 2.5em; margin-top: var(--section-padding); border-radius: var(--border-radius1) var(--border-radius1) var(--border-radius2) var(--border-radius2); box-sizing: border-box;}               

.about-bottom .photo                            {display: block; width: 5em; height: 5em; border-radius: 100%; background: var(--color1); overflow: hidden;}

.about-bottom .photo img                        {display: block; width: 100%; height: 100%; object-fit: cover;}

.about-bottom .text                             {display: block; width: 100%; text-align: center;}

.about-bottom .text p strong                    {display: block; font-size: 1.3em;}

.about-bottom .text .name                       {font-size: 0.8em; color: var(--white-60); margin-top: 1em;}

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

  .about .row > *:first-child                   {width: 53%;}

  .about .row > *:last-child                    {width: 35%;}

  .about .year                                  {text-align: right;}

  .about .image                                 {aspect-ratio: 16/9;}

  .about-bottom                                 {flex-direction: row;}

  .about-bottom .text                           {width: auto; max-width: calc(100% - 5em - var(--gap2)); text-align: left;}

  } 

  

.img-text                                       {display: flex; width: 100%; flex-direction: column; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--gap2) 0;}

.img-text:not(:last-child)                      {margin-bottom: var(--section-padding);}

.img-text .img                                  {display: block; width: 100%; aspect-ratio: 3/2; order: -1; border-radius: var(--border-radius1) var(--border-radius2); overflow: hidden;}

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

.img-text .text                                 {display: flex; width: 100%; flex-wrap: wrap;}

.img-text .text *                               {text-align: left;}

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

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

  .img-text :is(.img, .text)                    {width: 47%;}

  .img-text:not(.reversed) .img                 {order: 2;}

  .img-text .img                                {aspect-ratio: 1;}

  .img-text .text h2                            {font-size: min(2em, calc(0.9em + 4vw));}

  }



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

.contacts > div                                 {display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap1); flex-shrink: 0;}

.contacts *                                     {text-align: left;}

.contacts h2                                    {width: auto; font-size: 1.3em; color: var(--color1); margin: 0;}

.contacts .subheadline                          {font-size: 0.8em; color: white; font-weight: 500; margin-top: -0.5em;}

.contacts p                                     {font-weight: 500; margin: 0 !important;}

.contacts .map-link                             {font-size: 0.8em;}

.contacts .map-link a                           {color: var(--color1); font-weight: 500; text-decoration: underline; transition: .15s ease-in-out;}

.contacts .map-link a:hover                     {color: var(--color1b); text-decoration-color: transparent;}

.contacts .hours > span                         {display: block;}

.contacts .hours > span > span                  {display: inline-block; width: 3.8em;}

.contacts .note                                 {display: block; font-size: 0.75em; color: var(--white-60);}

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

  .contacts > div:last-child                    {width: auto; padding: 1.6em; border-bottom-right-radius: var(--border-radius2);}

  .contacts > div:last-child h2                 {color: white;}

  }

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

  .contacts > div                               {width: auto; max-width: 25%;}

  }

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

  .contacts > div                               {max-width: 33.33%;}

  .contacts > div:last-child                    {width: 100%; max-width: 100%; flex-direction: row; justify-content: center; align-items: center;}

  }

  @media screen and (min-width: 441px) and (max-width: 680px){

  .contacts > div                               {width: 48% !important;}

  .contacts > div:last-child                    {border: none; background: none;}

  }

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

  .contacts > div                               {font-size: 0.9em;}

  .contacts > div:nth-child(1)                  {order: 0; width: 45%;}

  .contacts > div:nth-child(3)                  {order: 1; width: 49%;}

  .contacts > div:nth-child(2)                  {order: 2;}

  .contacts > div:nth-child(2) p                {column-count: 2;}

  .contacts > div:last-child                    {order: 3; width: 100%; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; background: var(--black-45); padding: 1.6em; border-radius: var(--border-radius1) var(--border-radius1) var(--border-radius2) var(--border-radius1); box-sizing: border-box;}

  .contacts > div:last-child h2                 {color: white;}

  }



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

.team .member                                   {display: flex; width: 100%; justify-content: space-between; gap: 1.4em; background: white; padding: 2em; border-radius: var(--border-radius2) var(--border-radius1) var(--border-radius1) var(--border-radius1); box-sizing: border-box;}

.team .member .photo                            {display: block; width: 5em; height: 5em; background: var(--black-20); border-radius: 100%; overflow: hidden; flex-shrink: 0;}

.team .member .photo img                        {display: block; width: 100%; height: 100%; object-fit: cover;}

.team .member > div                             {display: flex; flex-direction: column; flex-grow: 2;}

.team .member > div span                        {display: block;}

.team .member > div .name                       {font-size: 1.3em; color: var(--color0); font-weight: 600;}

.team .member > div .post                       {font-size: 0.9em; color: var(--color1); font-weight: 600; margin-block: -0.1em 0.6em;}

.team .member > div a                           {display: flex; align-items: center; gap: 0.4em; color: var(--color0); font-weight: 500; transition: .15s ease-in-out;}

.team .member > div a img                       {display: block; width: 1em;}

.team .member > div a:hover                     {color: var(--color1);}

.team .member > div .hours                      {font-size: 0.85em; color: var(--black-45); margin-top: 0.8em;}

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

  .team                                         {font-size: 0.9em;}

  .team .member                                 {flex-direction: column;}

  }

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

  .team .member                                 {width: calc(50% - 0.5 * var(--gap2));}

  }

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

  .team                                         {font-size: 0.9em;}

  .team .member                                 {flex-direction: column;}

  }



.whisperer                                      {display: none; width: calc(100% + 0.2em); max-height: 0; --whisperer-max-height: 360px; font-size: 1rem; position: absolute; top: 105%; left: 0; z-index: -1; padding-top: 0.25rem; box-sizing: border-box; overflow: hidden; transition: .35s ease-in-out;}

.whisperer .inner                               {display: flex; width: calc(100% - 2 * 0.1em); height: 100%; max-height: calc(var(--whisperer-max-height) - 0.35rem); flex-direction: column; border-radius: var(--border-radius0); box-sizing: border-box; overflow: hidden; background: var(--color0b); border: solid 0.1em var(--white-10);}

.whisperer .form-item                           {padding: 0.9rem;}

.whisperer .overflow                            {display: block; width: 100%; overflow-y: auto;}

.whisperer .whisperer-title                     {display: block; width: 100%; font-size: 0.7em; font-weight: 500; color: var(--color1); margin-block: 0.9em 0.35em; padding-inline: 0.9rem; box-sizing: border-box;}

.whisperer .results                             {display: block; width: 100%; font-size: 0.85em}

.whisperer .results > div                       {display: block; width: 100%; position: relative; transition: .25s ease-in-out;}

.whisperer .results > div a                     {display: block; width: 100%; padding: 0.5em 3rem 0.5em 1.1rem; box-sizing: border-box; position: relative;}

.whisperer .results > div a .phrase             {display: flex; align-items: center; gap: 0.4em; font-size: 0.95em; color: var(--white-90); font-weight: 500; transition: .25s ease-in-out;}

.whisperer .results > div a .phrase img         {display: block; width: auto; height: 1em;}

.whisperer .results > div button                {display: flex; width: 1.8em; height: 1.8em; justify-content: center; align-items: center; position: absolute; outline: solid 0.15em transparent; border-radius: 100%; right: 0.8rem; top: calc(50% - 0.9em); z-index: 1;}

.whisperer .results > div button svg            {display: block; width: 0.8em; height: auto; fill: var(--white-60); transition: .25s ease-in-out;}

.whisperer .results > div button:hover svg      {fill: var(--color1b);}

.whisperer .results > div button:focus          {outline-color: var(--color1);}

.whisperer .results > div a .path               {display: flex; align-items: center; flex-wrap: wrap;}

.whisperer .path span                           {display: flex; align-items: center; font-size: 0.95em; color: var(--white-60); font-weight: 500; box-sizing: border-box;}

.whisperer .path span:not(:last-child)          {margin-right: 0.4em;}

.whisperer .path span:not(:first-child):before  {display: block; width: 0.33em; height: 1em; margin-right: 0.4em; background: url("images/chevron-right-white.svg") no-repeat center center; background-size: contain; opacity: 0.6; position: relative; top: -0.03em; content: "";}

.whisperer .path span strong                    {color: white; font-weight: 500;}

.whisperer .results > div:hover                 {background: var(--color0);}

.whisperer .results > div:hover a .phrase       {color: white;}

.whisperer.show                                 {display: block;}

.whisperer.slide-down                           {max-height: var(--whisperer-max-height);}



.form                                           {display: flex; width: 100%; flex-direction: row; gap: var(--form-gap); flex-wrap: wrap; --form-gap: 1.2rem; padding: min(4.5em, calc(1em + 5vw)); border-bottom-right-radius: var(--border-radius2); box-sizing: border-box;}

.form h2                                        {margin-bottom: 0.5em;}

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

.form-bottom .consent                           {display: block; width: 100%; text-align: center; font-size: 0.85em; color: var(--white-60);}

.form-bottom .consent a                         {color: inherit; text-decoration: underline; transition: .15s ease-in-out;}

.form-bottom .consent a:hover                   {color: white; text-decoration-color: transparent;}

.form-bottom .button                            {font-size: 1em;}



.form-item                                      {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.5em; position: relative; --form-item-height: min(3rem, calc(2rem + 2vw)); --form-item-padding-inline: 1rem; --form-item-border-width: 0.1rem;}

.form-item-element                              {display: flex; width: 100%; height: var(--form-item-height); align-items: flex-start; align-content: flex-start; flex-wrap: wrap; position: relative; background: var(--white-10); border: solid var(--form-item-border-width) var(--color0-300); border-radius: var(--border-radius0); box-sizing: border-box;}

.form-item :is(input, textarea)                 {display: block; width: 100%; height: var(--form-item-height); background: none; font-size: 1em; color: white; font-weight: 600; border: none; outline: none; padding: 0 var(--form-item-padding-inline); box-sizing: border-box; position: relative; z-index: 2; font-family: var(--font1); transition: .15s ease-in-out;}

.form-item textarea                             {height: 8em !important; padding-block: 1em;}

.form-item :is(input, textarea)::placeholder    {font-weight: 500;}

.form-item-element:focus-within                 {border-color: var(--color1);}

.form-item label                                {display: block; width: 100%; font-size: 0.9em; color: var(--color1); font-weight: 600;}

.form-item.obligatory label:after               {display: inline-block; content: " *";}

.form-item:has(textarea)                        {width: 100% !important;}

.form-item .note                                {display: block; width: 100%; font-size: 0.65em; color: var(--color0-500); font-weight: 400; margin-top: -0.15em;}

.form-item .note a                              {color: var(--white-60); text-decoration: underline; cursor: pointer; transition: .15s ease-in-out;}

.form-item .note a:hover                        {color: var(--white-90); text-decoration-color: transparent;}

.form-item .form-error                          {display: block; width: 100%; font-size: 0.7em; color: var(--color-error); font-weight: 500; margin-top: -0.25em;}

.form-item-element:has(textarea)                {height: auto;}

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

  .form .form-item.w33-50-100                   {width: calc(33.33% - 2 / 3 * var(--form-gap));}

  }

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

  .form .form-item.w33-50-100                   {width: calc(50% - 0.5 * var(--form-gap));}

  }

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

  .form .form-item.w33-100                      {width: calc(33.33% - 2 / 3 * var(--form-gap));}

  .form .form-item.w50-100                      {width: calc(50% - 0.5 * var(--form-gap));}

  }



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

  .form-item textarea                           {height: 13em !important;}

  }



.checkbox                                       {display: block; position: relative;}



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

.chk1:not(:checked) + label,   

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

.chk1:not(:checked) + label:before,

.chk1:checked + label:before                    {display: block; width: 0.95em; height: 0.95em; background-color: var(--white-30); border-radius: 0.15em; position: absolute; left: 0; top: 0.145em; overflow: hidden; content: "";}

.chk1:checked + label:before                    {background: URL('images/check.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;}

.chk1.no-text:not(:checked) + label,   

.chk1.no-text:checked + label                   {padding-inline-start: 0.9em;}

.chk1.no-text:not(:checked) + label:before,   

.chk1.no-text:checked + label:before            {top: 0;}



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

.page-message .icon-info                        {display: flex; justify-content: center; align-items: center; gap: 0.4em; font-size: 1.2em; color: var(--color1); font-weight: 600; margin-top: -0.4em;}

.page-message .icon-info img                    {display: block; width: 1.1em; position: relative; top: -0.05em;}



.payment-box                                    {width: auto; flex-direction: row; justify-content: center; gap: 1.2em; background: var(--white-94); border-bottom-right-radius: var(--border-radius2); padding: 1.5em;}

.payment-box .qr                                {display: block; width: 8em;}

.payment-box .qr img                            {display: block; width: 100%;}

.payment-box .data                              {display: flex; flex-direction: column;}

.payment-box .data span                         {display: block; font-size: 0.85em; color: var(--color0); margin-block: 0.1rem;}

.payment-box .data span strong                  {display: inline-block; margin-right: 0.4em;}

.payment-box .data .title                       {font-size: 1.3em; font-weight: 700; margin-bottom: 0.4rem;}

.payment-box .data .price                       {font-size: 1.15em; font-weight: 700; margin-top: 0.4rem;}

.payment-box + p                                {text-align: center; font-size: 0.85em;}

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

  .payment-box                                  {flex-direction: column; align-items: center;}

  .payment-box .data span                       {text-align: center;}

  }



.models                                         {padding: 2.5em; border-bottom-right-radius: var(--border-radius2);}

.models ul                                      {column-gap: 1.2em;}

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

  .models ul                                    {column-count: 4;}

  }

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

  .models ul                                    {column-count: 3;}

  }

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

  .models ul                                    {column-count: 2;}

  }



.page-parts1                                    {display: block; width: 100%; margin-top: var(--section-padding);}

.page-parts1 h2                                 {text-align: left;}

.page-parts1 .list                              {display: block; width: 100%; overflow: hidden;}

.page-parts1 .list ul                           {margin-top: -3em;}

.page-parts1 .list ul li                        {margin-top: 3em;}

.page-parts1 .list ul li:after                  {display: block; width: 100%; height: 1px; background: var(--white-20); position: absolute; left: 0; top: -1.52em; content: "";}

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

  .page-parts1 ul                               {column-count: 2; column-gap: 2em;}

  }



.page-parts2                                    {display: block; width: 100%; margin-top: var(--section-padding);}

.page-parts2 h2                                 {text-align: left;}

.page-parts2 .box                               {display: block; padding: 2.5em 2.5em 1em; border-bottom-right-radius: var(--border-radius2);}

.page-parts2 .box > div                         {display: inline-block; margin-bottom: 1.5em;}

.page-parts2 .box > div h3                      {text-align: left; font-size: 1em; margin-bottom: 0.2em;}

.page-parts2 .box > div p                       {font-size: 0.9em;}

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

  .page-parts2 .box                             {column-count: 2; column-gap: 2em;}

  }



.cleaning                                       {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap2); --cleaning-padding: 2.5em;}

.cleaning .program                              {gap: var(--gap2); border-top-right-radius: var(--border-radius2); overflow: hidden; padding: var(--cleaning-padding);}

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

.cleaning .head .info                           {display: flex; flex-direction: column; box-sizing: border-box;}

.cleaning .head .info h2                        {text-align: left; margin-bottom: 0.6rem;}

.cleaning .head .info h2 span                   {color: var(--color1);}

.cleaning .head .info .icon-info                {display: flex; align-items: center; gap: 0.4em; font-size: 0.9em; color: white; font-weight: 500; margin-block: 0.2em;}

.cleaning .head .info .icon-info img            {display: block; width: 1em;}

.cleaning .head .info .claim                    {display: block; font-size: 0.85em; color: var(--color1); margin-top: 0.6em;}

.cleaning .head .img                            {display: block; overflow: hidden;}

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

.cleaning ul                                    {font-size: 0.9em; margin-top: 0.5em;}

.cleaning .price                                {display: flex; align-items: flex-end; flex-grow: 2; font-size: 1.3em; font-weight: 700;}

.cleaning .price-notes                          {display: flex; flex-wrap: wrap; gap: 0.2em 0.8em; margin-top: calc(-0.8 * var(--gap2));}

.cleaning .price-notes p                        {width: auto; font-size: 0.7em;}

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

  .cleaning .program                            {width: calc(50% - 0.5 * var(--gap2));}

  }

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

  .cleaning .head                               {width: calc(100% + 2 * var(--cleaning-padding)); margin: calc(-1 * var(--cleaning-padding)); margin-bottom: 0;}

  .cleaning .head .info                         {width: 55%; padding: var(--cleaning-padding) var(--cleaning-padding) 0;}

  .cleaning .head .info h2                      {font-size: 2em;}

  .cleaning .head .img                          {width: 45%; border-bottom-left-radius: var(--border-radius1);}

  }

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

  .cleaning                                     {--cleaning-padding: calc(2em + 3vw);}

  .cleaning .head .info                         {width: calc(50% - 0.6rem);}

  .cleaning .head .img                          {width: calc(50% - 0.6rem); height: 12em;}

  .cleaning ul                                  {column-count: 2; column-gap: 1.2rem;}

  }  

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

  .cleaning .head .img                          {order: -1; width: calc(100% + 2 * var(--cleaning-padding)); aspect-ratio: 16/9; margin: calc(-1 * var(--cleaning-padding)); margin-bottom: 0;}

  }



.detail                                         {display: flex; width: 100%; flex-direction: column; gap: var(--gap1); position: relative; box-sizing: border-box;}

.detail .breadcrumbs                            {margin-bottom: 0.5rem;}

.detail h1                                      {text-align: left;}

.detail .icon-info                              {display: flex; align-items: center; gap: 0.4em; font-weight: 500;}

.detail .icon-info img                          {display: block; width: 1.1em; position: relative; top: -0.03em;}

.detail .image .swiper                          {width: 100%; border-radius: var(--border-radius0); overflow: hidden;}      

.detail .image .swiper-slide                    {box-sizing: border-box;}

/*.detail .image .swiper-slide a                  {display: block; width: 100%; padding-top: 75%; position: relative; box-sizing: border-box; border-radius: var(--border-radius0); overflow: hidden;}

.detail .image .swiper-slide a span             {display: block; position: absolute; inset: 0;}

.detail .image .swiper-slide a span img         {display: block; width: 100%; height: 100%; object-fit: cover}*/
.detail .image .swiper-slide a {display:block;width:100%;padding-top:75%;position:relative;box-sizing:border-box;border-radius:var(--border-radius0);overflow:hidden;}
.detail .image .swiper-slide a span {display:block;position:absolute;inset:0;background:#fff;}
.detail .image .swiper-slide a span img {display:block;width:100%;height:100%;object-fit:contain;object-position:center;}

.detail .image .cover                           {display: flex; width: 100%; position: relative; z-index: 2; border-top-left-radius: var(--border-radius2); overflow: hidden;}      

.detail .image .cover .swiper-button-prev       {left: ;}

.detail .image .cover .swiper-button-next       {right: ;} 

.detail .image .thumbs                          {display: block; width: calc(100% + 0.6em); margin: 0.3em -0.3em -0.3em; overflow: hidden;}

.detail .image .thumbs .swiper-slide            {padding: 0.3em;}

.detail .image .thumbs .swiper-slide a          {opacity: 0.5; cursor: pointer; transition: .25s ease-in-out;}

.detail .image .thumbs .swiper-slide-thumb-active a

                                                {opacity: 1;}

.detail .table                                  {padding: 2em; border-top-right-radius: var(--border-radius2); margin-top: 0.4em;}

.detail .table table                            {width: 100%;}

.detail .table table td                         {font-size: 0.9em; padding-block: 0.5em; border-top: solid 1px var(--white-10); vertical-align: top;}

.detail .table table td:first-child             {color: var(--color1); font-weight: 600; padding-right: 1em;}

.detail .table table tr:first-child td          {border-top: none; padding-top: 0;}

.detail .table table tr:last-child td           {padding-bottom: 0;}

.prdescription                                    {  }

.prdescription ul                                 {font-size: 1em; margin-top: 0.5em; margin-bottom: 0.5em;}

.prdescription ul li                              { display: block; width: 100%; text-align: left; padding-left: 1.1em; box-sizing: border-box; position: relative; margin-top: 0.4em; }

.prdescription ul li:before                       {width: 1em; height: 1em; content:''; display:block; position:absolute; background: url("images/chevron-right-color1.svg") no-repeat left center; background-size: auto 0.8em; top: 0.16em; left: 0; border-radius: 100%;}
.prdescription :is(p a, li a)                     {color: inherit; text-decoration: underline; text-decoration-color: var(--color1); transition: .15s ease-in-out;}

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

/*.main li                                        {display: inline-block; width: 100%; text-align: left; padding-left: 1.6em; box-sizing: border-box; position: relative; margin-top: 0.4em;}

.main li:before                                 {display: block; position: absolute; content: "";}

.main ul li:before                              {width: 0.35em; height: 0.35em; background: var(--color1); left: 0; top: 0.43em; border-radius: 100%;}*/

.detail .buy                                    {flex-direction: row; justify-content: space-between; align-items: center; gap: 1em; padding: 1.4em; border-bottom-right-radius: var(--border-radius2); margin-top: var(--gap1);}

.detail .buy .pricing                           {font-size: 1em; flex-grow: 2;}

.detail .buy .price-old                         {font-size: 0.9em;}

.detail .buy .link                              {color: var(--color1); text-decoration: underline; transition: .15s ease-in-out;}

.detail .buy .link:hover                        {color: var(--color1b); text-decoration-color: transparent;}

.detail .buy .button                            {font-size: 1.1em;}

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

  .detail                                       {padding-left: 53%; min-height: 30em;}

  .detail h1                                    {font-size: 2em;}

  .detail .image                                {width: 47%; position: absolute; left: 0; top: 0;}

  }



.cart                                           {display: flex; width: 100%; flex-direction: column; gap: var(--cart-gap); --cart-gap: calc(0.75 * var(--section-padding));}

.cart .step                                     {display: flex; width: 100%; flex-direction: column; gap: var(--gap1);}

.cart .step h2                                  {text-align: left; font-size: 1.6em; position: relative; margin-block: 0 0.5rem;}

.cart .step h2:has(span)                        {padding-left: 1.5em;}

.cart .step h2 span                             {display: flex; width: 1.7em; height: 1.7em; justify-content: center; align-items: center; font-size: 0.65em; background: var(--gradient1); border-radius: 100%; position: absolute; left: 0; top: 0.025em;} 



.amount-change                                  {display: flex; width: auto; align-items: center; gap: 0.1em; background: var(--white-20); padding-inline: 0.6em; margin-right: 0.2em; border-radius: 0.5em;}

.amount-change input                            {display: block; width: 2em; height: 2.2em; text-align: center; color: white; font-size: 0.8em; font-weight: 700; background: none; font-family: var(--font1); border: none; outline: none; padding: 0; box-sizing: border-box; transition: .15s ease-in-out;}

.amount-change button                           {display: block; width: 1em; height: 1em; opacity: 0.6; background-repeat: no-repeat; background-position: center center; background-size: 70% auto; border-radius: 100%; transition: .25s ease-in-out;}

.amount-change .plus                            {background-image: url("images/icons/plus-white.svg");}

.amount-change .minus                           {background-image: url("images/icons/minus-white.svg");}

.amount-change :is(.plus, .minus):hover         {opacity: 1;}



input[type=number]::-webkit-outer-spin-button,

input[type=number]::-webkit-inner-spin-button   {-webkit-appearance: none; margin: 0;}

input[type=number]                              {-moz-appearance: textfield;}



.cart-row                                       {flex-direction: row; justify-content: space-between; align-items: center; gap: 1em 1.8em; padding: 1.2em; position: relative;}

.cart-row > *                                   {flex-shrink: 0;}

.cart-row .img                                  {display: block; width: 4.5em; aspect-ratio: 4/3; background: white; border-radius: calc(0.3 * var(--border-radius1)); overflow: hidden;}

.cart-row .img img                              {display: block; width: 100%; height: 100%; object-fit: contain; transition: .15s ease-in-out;}

.cart-row .img:hover img                        {opacity: 0.9;}

.cart-row .info                                 {display: block; flex-grow: 2; flex-shrink: unset;}

.cart-row .info span                            {display: block;}

.cart-row .info .title                          {font-weight: 600;}

.cart-row .info .title a                        {color: inherit; transition: .15s ease-in-out;}

.cart-row .info .title a:hover                  {color: var(--color1);}

.cart-row .info .note                           {display: block; font-size: 0.85em; color: var(--white-60);}

.cart-row .pricing                              {font-size: 0.7em;}

.cart-row .icon-info                            {display: flex; align-items: center; gap: 0.4em; font-size: 0.85em; font-weight: 500;}

.cart-row .icon-info img                        {display: block; width: 1.1em; position: relative; top: -0.03em;}

.cart-row .amount                               {color: var(--white-60); font-weight: 500;}

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

  .cart-row                                     {flex-wrap: nowrap;}

  .cart-row .info                               {margin-left: -0.8em;}  

  }

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

  .cart-row                                     {flex-direction: column; align-items: flex-start; padding-left: 7.8em;}

  .cart-row .info                               {padding-right: 2.5em;}  

  .cart-row .img                                {width: 5.5em; position: absolute; left: 1.2em; top: 1.35em;}

  }



.cart-items                                     {display: flex; width: 100%; flex-direction: column; gap: 0.4em;}

.cart-items .cart-row .remove                   {display: block; width: 1.1em; height: 1.1em; position: relative; opacity: 0.5; cursor: pointer; transition: .15s ease-in-out;}

.cart-items .cart-row .remove:before,

.cart-items .cart-row .remove:after             {display: block; width: 100%; height: 0.16em; background: white; border-radius: 0.03em; position: absolute; left: 0; top: calc(50% - 0.08em); transform: rotate(45deg); content: "";}

.cart-items .cart-row .remove:after             {transform: rotate(-45deg);}

.cart-items .cart-row .remove:hover             {opacity: 0.8;}

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

  .cart-items .cart-row .remove                 {position: absolute; right: 1.8em; top: 1.8em;}

  }



.cart .total-price                              {display: flex; width: 100%; gap: 1.2em; font-weight: 700; font-size: 1.15em; padding-left: calc(100% - 11em); box-sizing: border-box;}

.cart .total-price > span                       {color: var(--white-60);}

.cart .total-price > div                        {display: block;}

.cart .total-price > div span                   {display: block;}

.cart .total-price > div .total-no-tax          {font-size: 0.65em; font-weight: 600;}

.cart:has(.remove) .total-price                 {padding-left: calc(100% - 13.25em);}

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

  .cart .total-price                            {padding-left: 1.9em;}

  }



.delivery .opts                                     {display: flex; width: 100%; flex-direction: column; gap: 0.4em;}

.delivery .opts:not(:first-child)                   {margin-top: var(--gap2);}

.delivery .opts .subheadline                        {display: block; text-align: left; font-size: 0.9em; color: white; font-weight: 600;}

.delivery .opts .subheadline span                   {color: var(--color1);}

.delivery input[type=radio]                         {position: absolute; visibility: hidden; left: -9999px;}

.delivery .cart-row                                 {border: solid 0.12em transparent; transition: .15s ease-in-out;}

.delivery .cart-row .img                            {width: 5.5em; aspect-ratio: 16/9;}

.delivery .cart-row .radio-sel                      {display: flex; width: 1.2em; height: 1.2em; justify-content: center; align-items: center; background: var(--black-70); border: solid 0.12em var(--white-30); box-sizing: border-box; border-radius: 100%;}

.delivery .cart-row .radio-sel:after                {display: block; width: 50%; height: 50%; background: var(--color1); border-radius: 100%; opacity: 0; content: ""; transition: .15s ease-in-out;}

.delivery .cart-row:has(input):hover                {background: var(--black-30); cursor: pointer;}

.delivery .cart-row:has(input[type=radio]:checked)  {border-color: var(--color1);}

.delivery .cart-row:has(input[type=radio]:checked) .radio-sel       {border-color: var(--color1);}

.delivery .cart-row:has(input[type=radio]:checked) .radio-sel:after {opacity: 1;}

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

  .delivery .cart-row .radio-sel                   {position: absolute; right: 1.8em; top: 2em;}

  }



.checkbox:has(.chk1:checked) + .hidden          {display: none; margin-top: var(--gap1);}



.client-details                                 {padding: min(3.5em, calc(1em + 5vw)); gap: var(--gap2);}

.client-details .form                           {padding: 0;}

.client-details .flex:has(.save)                {justify-content: flex-end;}



.cart .summary                                  {flex-direction: row; justify-content: space-between; align-items: center; padding: 2em; border-bottom-right-radius: var(--border-radius2);}

.cart .summary span                             {display: block; font-size: 1.45em; font-weight: 700;}

.cart .summary .summary-price                   {display: block; text-align: right; flex-grow: 2;}

.cart .summary .summary-price .total.no-tax     {font-size: 0.65em; font-weight: 600;}

.cart .summary-consent                          {display: flex; width: 100%; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 1em 1.4em; padding-inline: 1.2em; box-sizing: border-box; margin-top: 1em;}

.cart .summary-consent .checkbox                {flex-grow: 2; font-size: 0.9em;}

.cart .summary-consent .button                  {font-size: 1.1em; flex-shrink: 0;}

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

  .cart .summary span                           {font-size: 1em; color: var(--white-60);}

  .cart .summary .summary-price                 {width: 100%}

  .cart .summary .summary-price span            {font-size: 1.45em; color: white;}

  .cart .summary-consent .button                {width: 100%;}

  }



.shop                                           {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 1em 0;}

.shop > *                                       {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.5em;}

.shop .filters-vertical                         {display: block; width: 100%;}

.shop .show-filters                             {width: 100%; font-size: 0.9em; font-weight: 600; padding-block: 0.85em 0.75em; border-radius: var(--border-radius1);}

.shop .show-filters img                         {display: block; width: 1em; height: auto; position: relative; top: -0.05em;}

.shop .filter-title                             {display: block; font-size: 1.4em; font-weight: 700; margin-bottom: 0.2em;}

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

  .shop aside                                   {width: 15em;}

  .shop .shop-items                             {width: calc(100% - 15em - var(--gap1));}

  .shop :is(.show-filters, .filter-title)       {display: none;}

  }



.categories                                     {display: flex; width: 100%;}

.categories ul                                  {display: flex; width: 100%; flex-direction: column; margin: 0; box-sizing: border-box;}

.categories ul li                               {display: block; padding: 0; margin: 0;}

.categories > ul > li:before                    {display: none;}

.categories ul li a                             {display: flex; align-items: center; gap: 0.5em; font-weight: 500; text-decoration: none; box-sizing: border-box;}

.categories > ul > li > a                       {padding: 0.9em 1.1em 0.8em;}

.categories > ul > li > a > img                 {display: block; width: 1.15em; position: relative; top: -0.07em;}

.categories li:not(.sel) > ul                   {display: none;}

.categories > ul > li.sel                       {background: var(--black-70);}

.categories li.sel > a                          {color: var(--color1);}

.categories li.sel:has(li.sel) > a              {color: inherit;}

.categories > ul > li ul                        {font-size: 0.85em; gap: 0.4em;}    

.categories > ul > li > ul                      {padding: 0 1.1em 0.9em 3.25em;}

.categories > ul > li > ul > li > ul            {padding-block: 0.45em 0.3em;}

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

  .categories > ul > li:not(:last-child)        {border-bottom: solid 1px var(--white-20);}

  }

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

  .categories > ul                              {gap: 0.4em;}

  .categories > ul > li                         {background: var(--white-10); border-radius: var(--border-radius0);}

  }



.custom-dropdown                                {display: block; height: var(--custom-dropdown-size); position: relative; --custom-dropdown-max: 14rem; --custom-dropdown-padding: 1.2rem; border-radius: var(--border-radius1); box-sizing: border-box; transition: .15s ease-in-out}

.custom-dropdown > label                        {display: flex; height: 100%; align-items: center; gap: 0.5em; color: inherit; font-weight: 600; z-index: 3; padding: 0.1em 2.2rem 0 var(--custom-dropdown-padding); position: relative; cursor: pointer;}

.custom-dropdown > label:after                  {display: block; width: 0.7em; height: 0.7em; background: url("images/chevron-right-color1.svg") no-repeat center center; background-size: contain; position: absolute; top: calc(50% - 0.35em); right: 1.2rem; content: ""; transform: rotate(90deg); transition: .15s ease-in-out;}

.custom-dropdown > label img                    {display: block; width: 1.2em; position: relative; top: -0.05em;} 

.custom-dropdown > label .reset                 {display: block; width: 0.8em; height: 0.8em; position: relative; background: var(--color1); border-radius: 100%; opacity: 0; position: relative; left: -9999px; transition: opacity .15s ease-in-out;}

.custom-dropdown > label .reset:after,

.custom-dropdown > label .reset:before          {display: block; width: 70%; height: 0.12em; background: var(--color0); position: absolute; left: 15%; top: calc(50% - 0.06em); border-radius: 0.05em; transform: rotate(45deg); content: "";}

.custom-dropdown > label .reset:before          {transform: rotate(-45deg);}

.custom-dropdown > label .reset:hover           {background: var(--color1b); cursor: pointer;}

.custom-dropdown:has(> label:hover)             {background: var(--white-05); box-shadow: 0 0 0.5em var(--black-70);}

.custom-dropdown:has(.chk1:checked) > label .reset

                                                {opacity: 1; left: auto;}

.custom-dropdown.show > label:after             {transform: rotate(-90deg);}

.custom-dropdown-overflow                       {display: none; width: 100%; max-height: 14rem; background: var(--black-90); backdrop-filter: blur(6px); border-radius: var(--border-radius1) var(--border-radius0) var(--border-radius0) var(--border-radius0); overflow: hidden; position: absolute; left: 0; top: calc(100% + 0.5 * var(--gap1)); z-index: 5;}

.custom-dropdown-inner                          {display: flex; width: 100%; height: 100%; max-height: var(--custom-dropdown-max); padding: var(--custom-dropdown-padding); box-sizing: border-box; overflow-y: auto;}

.custom-dropdown-options                        {display: flex; flex-direction: column; gap: 0.15em;}

.custom-dropdown-option .chk1:not(:checked) + label

                                                {color: var(--white-90);}



.items-topbar                                   {flex-direction: row; gap: 0; margin-bottom: var(--gap1); position: relative; z-index: 10;}

.items-topbar .custom-dropdown                  { --custom-dropdown-size: 3.2rem; flex-shrink: 0; font-size: 0.9em;}

.items-topbar .ordering                         {display: flex; flex-grow: 2; justify-content: flex-end; align-items: center; font-size: 0.9em; font-weight: 500; padding: 0.3em 1em; box-sizing: border-box;}

.items-topbar .ordering a                       {display: block; font-size: 1em; color: var(--white-60); font-weight: 500; cursor: pointer; padding: 0.45em 0.5em 0.38em; transition: .15s ease-in-out;}

.items-topbar .ordering a:hover                 {color: white;}

.items-topbar .ordering a.sel                   {color: white; font-weight: 700;}

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

  .items-topbar .custom-dropdown:not(:first-child)

                                                {border-left: solid 1px var(--white-20);}

  }

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

  .items-topbar                                 {background: none; border: none; gap: var(--items-topbar-gap); --items-topbar-gap: 0.4em;}

  .items-topbar .custom-dropdown                {width: calc(33.33% - 2 / 3 * var(--items-topbar-gap)); background: var(--black-45);}

  .items-topbar .ordering                       {width: 100%; justify-content: center; background: var(--black-45); border-radius: var(--border-radius1);}    

  }

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

  .items-topbar .custom-dropdown                {width: calc(50% - 0.5 * var(--items-topbar-gap)); background: var(--black-45); --custom-dropdown-size: 2.8rem; --custom-dropdown-padding: 1rem;}

  }

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

  .items-topbar .custom-dropdown                {width: 100%;}

  }  



.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-45); 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: var(--dark-gray-45); backdrop-filter: blur(6px); position: relative; border-radius: 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(--color1); border-radius: 100%; 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(--color1b);}

.wndw .cross span:nth-child(1)                  {transform: rotate(45deg);}

.wndw .cross span:nth-child(2)                  {transform: rotate(-45deg);}

.wndw .wndw-content,

.wndw .wndw-content.double > div                {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 svg.icon                    {fill: none; stroke: var(--color2); stroke-width: 40px;}

.wndw .wndw-content .title                      {display: block; width: 100%; text-align: center; font-size: 1.6em; color: var(--color1); font-weight: 700; line-height: 1.1; margin-bottom: -0.15em;}

.wndw .wndw-content .title span                 {display: block; font-weight: 500;}

.wndw .wndw-content .title2                     {display: block; width: 100%; text-align: center; font-size: 1.3em; color: var(--color1); font-weight: 700; line-height: 1.1; margin-bottom: -0.15em;}

.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 .form-item                  {max-width: 20rem;}

.wndw .wndw-content .flex                       {gap: 0.3em; margin-top: var(--gap1);}

.wndw .wndw-content .flex .button               {min-width: 8em; font-size: 0.9em;}  

.wndw .wndw-content .link                       {font-size: 0.8em; color: var(--white-60); text-decoration: underline; cursor: pointer; transition: .15s ease-in-out;}

.wndw .wndw-content .link:hover                 {color: var(--white-90); text-decoration-color: transparent;}

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

  .wndw.desktop-content                         {height: auto; padding: 0; position: relative; inset: auto;}

  .wndw.desktop-content:before                  {display: none;}

  .wndw.desktop-content .outer                  {display: none;}

  .wndw.desktop-content > div                   {max-width: 100%; max-height: none; background: none; backdrop-filter: none; top: auto; box-shadow: none; transform: none;}

  .wndw.desktop-content > div .overflow         {max-height: none; overflow: visible;}

  .wndw.desktop-content .close                  {display: none;}

  .wndw.desktop-content .wndw-content           {gap: 0; padding: 0;}

  }



.box.login, .box.reg                            {padding: min(4.5em, calc(1em + 5vw));}

.box.login :is(.form, .client-details),

.box.reg :is(.form, .client-details)            {padding: 0;}



.box.login                                      {max-width: 30rem;}

.box.login p:has(.btn-new-account)              {display: block; width: 100%; text-align: center; margin-bottom: var(--gap1);}



.box.reg                                        {max-width: 40rem;}

.box.reg .form                                  {padding: 0;}

.box.reg .title                                 {text-align: left; font-size: min(1.5em, calc(0.6em + 3vw)); margin-block: 1.4rem 0;}

.box.reg h1 + .title                            {margin-top: 1rem;}

.box.reg .form-bottom                           {margin-top: var(--gap1);}



.account .btn-logout                            {align-self: center; font-size: 0.8em; padding: 0.9em 2.4em 0.8em 1.8em;}



.subnav                                         {flex-direction: row; gap: 0; font-size: min(1em, calc(0.4em + 2vw)); margin-bottom: var(--gap2); overflow: hidden;}

.subnav a                                       {display: flex; justify-content: center; align-items: center; gap: 0.5em; color: var(--white-60); font-weight: 500; padding: 0.8em 1.2em 0.6em; transition: .15s ease-in-out;}

.subnav a img                                   {display: block; height: 1em; position: relative; top: -0.1em;}

.subnav a:hover                                 {color: white;}

.subnav a.sel                                   {background: var(--white-20); color: white;}

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

  .subnav a                                     {flex-grow: 2;}

  }



.account > .box:not(:first-of-type)             {margin-top: var(--gap1);}

.account h2                                     {max-width: 100%; text-align: left; font-size: min(1.8em, calc(0.35em + 4vw)); margin-block: 0 var(--gap1);} 



.order-list                                     {display: block; width: 100%;}

.order-list table                               {width: 100%; border-collapse: separate; border-spacing: 0 0.35em;}

.order-list table :is(td, th)                   {text-align: left;}

.order-list table :is(td, th):nth-child(4)      {text-align: right;}

.order-list table th                            {font-size: 0.8em; color: var(--color1); font-weight: 500; padding-bottom: 0.2em;}

.order-list table td                            {font-size: 0.9em;}

.order-list table td .items                     {display: inline-block; max-width: 25em; color: var(--white-60); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

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

  .order-list table :is(td, th)                 {padding-right: 1.5rem; vertical-align: top;}

  .order-list table td                          {background: var(--black-45); padding-block: 1em 0.5em;}

  .order-list table :is(td, th):first-child     {padding-left: 1.5rem;}

  .order-list table td:first-child              {border-radius: 1.5em 0 0 1.5em;}

  .order-list table td:last-child               {text-align: right; border-radius: 0 1.5em 1.5em 0;}

  }

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

  .order-list table                             {display: block;}

  .order-list table thead                       {display: none;}

  .order-list table tbody                       {display: flex; width: 100%; flex-direction: column; gap: 0.35em;}

  .order-list table tbody tr                    {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 0.5em 1em; background: var(--black-45); padding: 1.5em 1.5em 1.1em; box-sizing: border-box; border-radius: var(--border-radius1);}

  .order-list table tbody tr td                 {display: block;}

  .order-list table tbody tr td:nth-child(-n+2) {font-size: 1em;}

  .order-list table tbody tr td:nth-child(1):before

                                                {content: "Objednávka č. ";}    

  .order-list table tbody tr td:nth-child(2)    {flex-grow: 2; min-width: 35vw; color: var(--white-60);}

  .order-list table :is(td, th):nth-child(4)    {flex-grow: 2;}

  }

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

  .order-list table :is(td, th):nth-child(3)    {width: 100%;}

  }



.order-detail                                   {display: flex; width: 100%; flex-direction: column; gap: var(--gap2);}

.order-detail .head                             {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--gap1) var(--gap2); margin-block: 0.5rem -0.2rem;}

.order-detail .head > div                       {display: block;}

.order-detail .order-title                      {display: block; width: 100%; font-size: min(1.9em, calc(0.65em + 4vw)); font-weight: 700;}

.order-detail .date                             {display: block; width: 100%; font-size: 0.9em; color: var(--white-60); font-weight: 500; margin-top: 0.2rem; padding-left: 0.05em;}

.order-detail .head .buttons                    {position: relative; top: -0.1em;}

.order-detail .cols                             {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--cart-gap) 0;}

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

  .order-detail .cols > *                       {width: 49%;}

  }



.details-summary                                {padding: 8.5%;}

.details-summary table                          {width: 100%; border-collapse: separate; border-spacing: 0 0.25em;}

.details-summary table td                       {font-size: 0.85em; vertical-align: top; color: ;}

.details-summary table td:first-child           {width: 7.2em; color: var(--color1); font-weight: 500;}