/*------------------------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; }

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



@font-face {

  font-family: 'Panchang';

  src: url('/font/Panchang-Medium.woff2') format('woff2'),

       url('/font/Panchang-Medium.woff') format('woff'),

       url('/font/Panchang-Medium.ttf') format('truetype');

  font-weight: 500;

  font-display: swap;

  font-style: normal;

}

@font-face {

  font-family: 'Panchang';

  src: url('/font/Panchang-Semibold.woff2') format('woff2'),

       url('/font/Panchang-Semibold.woff') format('woff'),

       url('/font/Panchang-Semibold.ttf') format('truetype');

  font-weight: 600;

  font-display: swap;

  font-style: normal;

}



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:            "open-sans", sans-serif; /* 400, 700 */

                                                --font2:            "Panchang", sans-serif; /* 500, 600 */



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

                                                --black-80:         rgba(0,0,0,0.8);

                                                --white-15:         rgba(255,255,255,0.15);



                                                --color0:           #E8E4E0;

                                                --color0b:          white; 

                                                --color1:           #A97142;

                                                --color1b:          #c28350;



                                                --font1-line:       1.5;

                                                --font2-line:       1.35;

                                                --font2-spacing:    0.15em;  

                                                --blur:             6px;    

                                                --gap1:             0.75em;

                                                --border-radius1:   0.6rem;

                                                --border1:          solid 0.09rem var(--white-15);

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

                                                --text-shadow:      0 0.03em 0.5em var(--black-40);

 





                                                --gradient1:        linear-gradient(to top, , );

                                                --wrapper-max:      62rem;

                                                --wrapper-wide-max: 72rem;

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

                                                --gap2:             1.5rem;

                                                --form-item-height: 3.2rem;

                                                }









html                                            {background: black; text-align: center; font-size: min(18px, calc(12px + 1vw)); color: var(--color0); line-height: 1.5; text-shadow: var(--text-shadow); font-family: var(--font1);}

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

body                                            {display: block; overflow-x: hidden; position: relative; --grunge: min(130rem, 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); flex-direction: column; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--gap2); 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);}

  }



.background                                     {display: flex; width: 100%; height: 100%; justify-content: center; position: absolute; inset: 0; overflow: hidden; opacity: 0.8;}

.background > div                               {display: block; width: 100%; min-width: 40rem; height: 100%;

                                                 -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, transparent);                                           

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

                                                }

.background > div  .img                         {display: block; width: 100%; height: 100%; background: url("/images/hero.webp") no-repeat center center; background-size: cover;

                                                 -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, transparent);                                           

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

                                                }

.background:before, .background:after           {display: block; width: 100%; height: clamp(10rem, 25vh, 16rem); opacity: 0.15; background: url("/images/pattern-seamless-white.svg") repeat center bottom; background-size: auto 50%; position: absolute; left: 0; z-index: 2; content: "";

                                                 -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);                                           

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

                                                }

.background:before                              {transform: rotate(180deg); top: 0;}                                                

.background:after                               {bottom: 0;}                                                

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

  .background > div                             {width: 1800px}

  }  



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

.header .wrapper                                {height: 100%;}

.header .logo                                   {display: block; width: 9em;}    

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



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

  .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)         {

  .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                           {font-size: 0.9em; column-gap: 1.5em;}

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

  .header .topbar ul li span                    {display: block; font-size: 0.7em; position: relative; top: -0.35em; left: 2.2em;}

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

  } 





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

.footer .buttons                                {display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6em 0.4em;}

.footer .button                                 {font-size: 0.65em;}

.footer-contacts                                {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--gap1) var(--gap2);}

.footer-contacts a                              {display: flex; align-items: center; gap: 0.5em; font-size: 1.1em; color: inherit; font-weight: 700; transition: .25s ease-in-out;}

.footer-contacts a:hover                        {color: var(--color1b);}

.footer p                                       {font-size: 0.85em;}

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



  }

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



  }



.main                                           {display: flex; width: 100%; flex-grow: 1; position: relative; z-index: 5;}



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



.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: calc(-0.5 * var(--gap2)) 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;}



.button                                         {display: flex; justify-content: center; align-items: center; gap: 0.4em; font-size: 0.8em; font-weight: 600; color: white; letter-spacing: var(--font2-spacing); text-transform: uppercase; padding: 0.6em 1.6em 0.55em; border-radius: 0.4em; border: none; outline: none; box-sizing: border-box; overflow: hidden; cursor: pointer; font-family: var(--font2); transition: .25s ease-in-out;}

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

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

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

.button.border                                  {border: solid 0.12em var(--color0);}

.button.border:hover                            {background: var(--white-15); border-color: var(--color0b);}



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



.icon                                           {display: flex; width: 1.5em; aspect-ratio: 1; justify-content: center; align-items: center; background: var(--white-15); border: var(--border1); border-radius: 0.3em; box-shadow: var(--box-shadow1); box-sizing: border-box;}

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



.box1                                           {display: flex; flex-direction: column; align-items: center; gap: var(--gap1); background: var(--white-15); backdrop-filter: blur(var(--blur)); padding: 1.4em 1.8em; border-radius: var(--border-radius1); border: var(--border1); box-shadow: var(--box-shadow1); box-sizing: border-box;}



h1, h2, h3, .subheadline                        {display: block; flex-basis: content; text-align: center; color: white; font-weight: 600; letter-spacing: var(--font2-spacing); line-height: var(--font2-line); box-sizing: border-box; font-family: var(--font2); position: relative; top: 0.05em;}

h1                                              {font-size: min(1.5em, calc(0.6em + 4vw));}

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

h3                                              {font-size: min(1.6em, calc(0.6em + 4vw));}

.subheadline                                    {font-size: min(0.75em, calc(0.2em + 2vw)); font-weight: 500;}







.chk1:not(:checked),

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

.chk1:not(:checked) + label,

.chk1:checked + label                           {display: block; position: relative; text-align: left; padding-left: 1.6em; color: #252525; cursor: pointer; box-sizing: border-box;}

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

.chk1:checked + label a                         {color: #252525; text-decoration: underline;}

.chk1:not(:checked) + label a:hover,

.chk1:checked + label a:hover                   {color: var(--color4); text-decoration: none;}

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

.chk1:checked + label:before                    {display: block; width: 1.15em; height: 1.15em; border-radius: 0.2em; position: absolute; left: 0; top: 0.14em; overflow: hidden; content: "";}

.chk1:not(:checked) + label:before              {background-color: #c2c2c2;}

.chk1:not(:checked) + label:hover:before        {opacity: 0.8;}

.chk1:checked + label:before                    {background: URL('/images/check.svg') no-repeat center center; background-size: 100% 100%; background-color: var(--color4);}

.chk1:disabled + label,                  

.chk1:disabled + label:before                   {opacity: 0.4;}











.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: 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)".";}













.top .message                                     {display: block; width: 100%; padding: 1.4em 0 0; position: relative; z-index: 5;}

.top .message .wrapper > div                      {display: block; width: 100%; background: var(--color5); padding: 0.8em 2em 0.8em 0.8em; border-radius: var(--border-radius); box-sizing: border-box; position: relative;}

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

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

.top .message .close span                         {display: block; width: 100%; height: 2px; background: black; position: absolute; left: 0; top: calc(50% - 1px);}

.top .message .close:hover                        {opacity: 1;}

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

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







.hero                                           {padding-block: 0; flex-grow: 2;}

.hero .wrapper                                  {height: 100%;}

.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)         {  



  }

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



  }                             





.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-disabled                         {opacity: 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;}

  }



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

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

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



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

.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                         {padding-top: 75%;}

.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; padding-inline: 1.5em 2.1em;}

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



.section:has(.img-text)                         {overflow: hidden;}



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

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

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

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

.img-text .chevrons li                          {padding-left: 1.1em;}

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

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

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

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

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

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

  }

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

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

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

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

  .img-text .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 .chevrons li:first-child            {padding: 0;}

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

  }

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

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

  }



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

  }



.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; padding-inline: 1.5em;}

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

.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 p.large                                {font-size: 1.3em;}

.article p.date                                 {font-weight: 500; color: var(--color4); margin-top: 0.9em;}

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

.article ol > li                                {padding-left: 1.6em; position: relative; margin: 0.2em 0 1em; counter-increment: li;}

.article ol > li::before                        {display: block; width: 1.75em; content: counter(li) "."; font-size: 1em; color: var(--color1); font-weight: 600; position: absolute; left: 0; top: 0;}

.article ol li:first-child,

.article ul li:first-child                      {margin-top: 0;}

.article ol li ul,

.article ul li ul                               {margin: 0.5em 0;}

.article .img                                   {display: block; width: 100%; position: relative; padding-top: 56%; margin-top: var(--margin-top); border-radius: var(--border-radius); overflow: hidden;}

.article .img.no-span                           {padding: 0;}

.article .img.pano                              {padding-top: 28%;}

.article .img span                              {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; overflow: hidden; position: absolute; left: 0; top: 0;}

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

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

.article .highlight                             {display: block; width: 100%; background: #252525; padding: 1.5em 2em; margin-top: var(--margin-top); border-radius: var(--border-radius); overflow: hidden; box-sizing: border-box;}

.article .highlight > *:first-child             {margin-top: 0;}

.article .highlight p                           {text-align: center; font-size: 1em; color: white;}

.article .embed                                 {display: block; width: 100%; margin-top: var(--margin-top); border-radius: var(--border-radius); overflow: hidden;}

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

.article table                                  {margin-top: var(--margin-top);}

.article table td                               {padding: 0.4em 1.2em 0.4em 0; border-top: solid 1px rgba(0,0,0,0.15);}

.article table td:last-child                    {padding-right: 0;}

.article table tr:first-child td                {border: none;}





.box                                            {display: block; width: 100%; background: white; padding: 2em; border: solid 1px rgba(0,0,0,0.1); position: relative; margin-top: 1.5em; box-sizing: border-box; box-shadow: 0 0 0.8em rgba(0,0,0,0.06);}

.box > *:first-child                            {margin-top: 0; padding-top: 0;}                                      

.box h2                                         {font-size: 1.2em;}

  

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

.anim.play                                      {opacity: 1;}



.anim.from-bottom                               {position: relative; bottom: -4rem;}

.anim.from-bottom.play                          {bottom: 0;}

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

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



.pagination                                       {display: block; width: 100%; margin-bottom: 2.5em;}

.pagination a                                     {display: flex; width: 2.6em; height: 2.6em; justify-content: center; align-items: center; text-align: center; font-size: 0.9em; color: #666666; font-weight: 500; background: rgba(0,0,0,0.1); margin: 0.1em; border-radius: var(--border-radius); transition: .2s ease-in-out;}

.pagination a:hover                               {color: black; background: rgba(0,0,0,0.18);}

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

.pagination a svg                                 {display: block; width: 30%; height: 30%; fill: #666666; transition: .2s ease-in-out;}

.pagination a:hover svg                           {fill: black;}







.contact                                          {display: block; width: 100%; position: relative; }

.contact:before                                   {display: block; background: white; position: absolute; right: 0; top: 0; content: "";}

.contact > .wrapper                               {justify-content: space-between;}

.contact > .wrapper > div                         {display: block;}

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

  .contact                                        {padding-bottom: 3em;}

  .contact:before                                 {width: 50%; height: 100%;}  

  .contact > .wrapper > div                       {width: 42%;}

  }

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

  .contact                                        {padding-bottom: 2em;}

  .contact > .wrapper > div                       {width: 100%;}

  }



.contacts                                         {display: flex; align-items: center; flex-wrap: wrap; box-sizing: border-box;}

.contacts li                                      {display: flex; align-items: center; flex-wrap: wrap; font-size: 1.1em; color: var(--color3); font-weight: 400; padding: 0;}

.contacts li:before                               {display: none;}

.contacts li a                                    {display: flex; align-items: center; color: #252525; font-weight: 700; text-decoration: none; transition: .15s ease-in-out;}

.contacts li a svg                                {display: block; width: 1.3em; height: 1.3em; fill: var(--color4); margin: -0.1em 0.5em 0 0;}

.contacts li span                                 {margin-left: 0.4em;}











.form-item                                      {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 0.45em; box-sizing: border-box; position: relative; z-index: 1; transition: .15s ease-in-out;}

  .form-item > label                              {display: flex; width: 100%; min-height: 1em; font-size: 0.85em; color: var(--color1f); font-weight: 500; box-sizing: border-box; order: -1;}

.form-item-element                              {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; position: relative;}

.form-item :is(input, textarea)                 {display: block; width: 100%; color: white; font-size: 1em; font-weight: 600; background: var(--black-45); backdrop-filter: blur(6px); outline: solid 0.12em transparent; border: none; border-radius: var(--border-radius0); font-family: var(--font1); padding: 0.1em 1.1em 0; box-sizing: border-box; transition: .15s ease-in-out;}

.form-item input                                {height: var(--form-item-height);}

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

.form-item :is(input, textarea):focus           {outline-color: var(--color1);}

.form-item :is(input, textarea)::placeholder    {color: white; opacity: 0.55; font-weight: 400;}

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

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

  }



.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: block; width: 100%; margin-top: 1em;}

.form .inputs                                     {display: flex; width: 100%; flex-wrap: wrap;}

.form .inputs > div                               {display: block; width: 100%; position: relative; margin-top: 0.4em;}

.form .inputs > div:first-of-type                 {margin-top: 0;}

.form .inputs > div label                         {display: block; font-size: 1em; color: #252525; font-weight: 700; position: absolute; left: 1em; top: 1.1em;}

.form .inputs > div input,

.form .inputs > div textarea                      {display: block; width: 100%; font-size: 1em; font-weight: 500; color: #252525; background: #f2f2f2; border: solid 1px rgba(0,0,0,0.1); outline: none; box-sizing: border-box; border-radius: var(--border-radius); transition: .2s ease-in-out;}

.form .inputs > div input                         {padding: 1em 1em 1em 8em;}

.form .inputs > div textarea                      {height: 14em; padding: 1em;}

.form .inputs > div input:focus,

.form .inputs > div textarea:focus                {border-color: var(--color1);}

.form .bottom                                     {display: block; width: 100%; margin-top: 1.5em;}

.form .bottom .checkbox                           {display: block; font-size: 0.8em;}

.form .bottom .button                             {width: 100%; padding: 0.8em 0; margin-top: 0.8em;}

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

  .form .inputs > div input,

  .form .inputs > div textarea                    {background: white;}

  }



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

.parts > .wrapper                                 {justify-content: space-between;}

.parts > .wrapper  > div                          {display: block;}

.parts .breadcrumbs .wrapper,

.parts .pagination .wrapper                       {width: 100%; max-width: 100%;}

.parts h1                                         {font-size: 3em; margin-top: 0;}

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

  .parts .left                                    {width: 16em; padding: 1em 0 3em;}

  .parts .right                                   {width: calc(100% - 17.5em);}  

  }

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

  .parts .left                                    {width: 100%;}

  .parts .right                                   {width: 100%;}  

  }



.parts .categories                                    {display: block; width: 100%; border-radius: var(--border-radius); overflow: hidden;}

.parts .categories ul                                 {display: flex; width: 100%; flex-wrap: wrap; margin: 0;}

.parts .categories ul li                              {display: block; width: 100%; padding: 0; margin: 0; box-sizing: border-box; order: 2; transition: .15s ease-in-out;}

.parts .categories ul li:before                       {display: none;}

.parts .categories ul li a                            {display: flex; width: 100%; align-items: center; color: white; font-weight: 500; text-decoration: none; position: relative; box-sizing: border-box;}

.parts .categories > ul                               {background: var(--color2);}

.parts .categories > ul > li.sel                      {background: var(--color1);}

.parts .categories > ul > li:hover                    {background: rgba(0,0,0,0.4);}

.parts .categories > ul > li a:hover,

.parts .categories > ul > li a.sel                    {color: var(--color4);}

.parts .categories > ul > li ul                       {display: none; padding-bottom: 0.8em;}

.parts .categories > ul > li ul.show                  {display: block;}

.parts .categories > ul > li                          {border-top: solid 2px black; padding-top: 2px;}

.parts .categories > ul > li > a                      {font-size: 0.9em; padding: 1em 3em 1em 3.3em;}

.parts .categories > ul > li > a svg                  {display: block; width: 1.6em; height: 1.6em; position: absolute; left: 1em; top: 0.8em; fill: var(--color4);}

.parts .categories > ul > li > a:after                {display: block; width: 0.8em; height: 0.8em; background: URL('/images/arrow-white-right.svg') no-repeat center center; background-size: contain; position: absolute; right: 1em; top: 1.25em; content: ""; transition: .15s ease-in-out;} 

.parts .categories > ul > li > ul                     {padding-left: 2.3em;}

.parts .categories > ul > li > ul li:before           {display: none;}

.parts .categories > ul > li > ul li a:before         {display: block; width: 0.7em; height: 0.7em; background: URL('/images/arrow-white-right.svg') no-repeat center center; background-size: contain; position: absolute; left: 0em; top: .6em; content: "";}

.parts .categories > ul > li > ul > li > a            {font-size: 0.85em; padding: 0.15em 0 0.15em 1em;}

.parts .categories > ul > li > ul > li > ul           {padding-left: 0.8em;}

.parts .categories > ul > li > ul > li > ul > li > a  {font-size: 0.75em; padding: 0.15em 0 0.15em 1em;}

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

  .parts .categories ul                               {height: auto;}

  .parts .categories > ul > li:first-of-type          {border: none;}

  .parts .categories ul li.responsive                 {display: none;}

  .parts .categories .hide                            {display: none;}

  }

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

  .parts .categories                                  {margin-top: 1em;}

  .parts .categories > ul > li                        {display: none;}

  .parts .categories ul li.responsive                 {display: flex !important; width: 100%; height: 3em; align-items: center; font-weight: 600; color: white; font-weight: 500; background: var(--color2); padding: 0 1em; order: 0; border: none; z-index: 2; box-sizing: border-box; cursor: pointer;}

  .parts .categories ul li.responsive:after           {display: block; width: 3em; height: 3em; background: URL('/images/arrow-white-right.svg') no-repeat center center; background-size: 15% auto; position: absolute; right: 0; top: 0; z-index: 2; content: ""; transition: .2s ease-in-out;} 

  .parts .categories ul li.sel                        {order: 1;}

  .parts .categories .hide                            {display: block; width: 100%; height: 0; background: var(--color1); text-align: center; color: #95a1be; font-weight: 500; overflow: hidden; transition: .15s ease-in-out;}

  .parts .categories .hide:hover                      {color: white;}

  .parts .categories.show ul li.responsive:after      {transform: rotate(-90deg);}

  .parts .categories.show .hide                       {height: 2em; padding: 0.6em 0 0.4em;}

  }



.filters                                              {display: flex; width: 100%; flex-wrap: wrap; margin-top: 1em;}

.filters > div                                        {display: block; margin: 0.8em 0.4em 0 0;}

.filters > div .select                                {display: block; width: 100%; height: 3em; font-size: 0.9em; font-weight: 700; background: URL("/images/arrow-black-down.svg") no-repeat right 0.8em center, white; background-size: 0.8em auto; padding: 0 2em 0 0.8em; border: solid 1px rgba(0,0,0,0.1); border-radius: var(--border-radius); box-sizing: border-box; position: relative; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none;  transition: .15s ease-in-out;}

.filters > div .select:after                          {display: block; width: 1em; height: 1em;  position: absolute; right: 0; top: 0; z-index: 1; content: ""; transition: .15s ease-in-out;}

.filters > div .select:hover                          {border-color: rgba(0,0,0,0.3);}

.filters > div .select > span                         {display: flex; width: 100%; height: 100%; align-items: center; font-size: 0.9em; font-weight: 700; line-height: 1.3em; color: #252525; box-sizing: border-box; cursor: pointer;}

.filters > div .select .options                       {display: none; width: calc(100% + 2px); height: auto; max-height: 15em; padding: 1em; position: absolute; top: 2.5em; left: -1px; z-index: 5; overflow: auto; background: white; border-left: solid 1px #e0e0e0; border-right: solid 1px #e0e0e0; border-bottom: solid 1px #e0e0e0; box-sizing: border-box; transition: .15s ease-in-out;}

.filters > div .select .options > *                   {font-size: 0.9em;}

.filters > div .select .options label                 {font-weight: 500; margin-bottom: 0.2em;}

.filters > div .select .options label:hover           {color: var(--color4);}

.filters > div .select.show                           {border-color: #a0a0a0; background-image: URL("/images/arrow-black-up.svg");}

.filters > div .select.show .options                  {display: block; border-color: #a0a0a0;}

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

  .filters > div                                      {width: calc(25% - 0.3em);}

  .filters > div:nth-child(-n+4)                      {margin-top: 0;}

  .filters > div:nth-child(4n+4)                      {margin-right: 0;}

  }

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

  .filters > div                                      {width: calc(50% - 0.2em);}

  .filters > div:nth-child(-n+2)                      {margin-top: 0;}

  .filters > div:nth-child(even)                      {margin-right: 0;}

  }

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

  .filters > div                                      {width: 100%; margin-right: 0;}

  .filters > div:nth-child(1)                         {margin-top: 0;}

  }



.ordering                                         {display: flex; width: 100%; flex-wrap: wrap; margin: 1em 0 0.5em;}

.ordering > *                                     {display: flex; font-size: 1em; font-weight: 500; box-sizing: border-box; position: relative; margin: 0 1.5em 0.3em 0; cursor: pointer; transition: .15s ease-in-out;}

.ordering > *:last-child                          {margin-right: 0;}

.ordering > * > *                                 {opacity: 0.5; transition: .15s ease-in-out;}

.ordering > *:hover > *                           {opacity: 0.8;}

.ordering > *.sel                                 {font-weight: 700;}

.ordering > *.sel > *                             {opacity: 1 !important;}

.ordering .abc                                    {padding-right: 0.9em;}

.ordering .abc svg                                {display: block; width: 0.6em; height: 0.6em; fill: #303030; position: absolute; right: 0; top: 0.3em;} 

.ordering .abc.sel svg                            {fill: var(--color4);}

.ordering .abc.down                               {transform: rotate(180deg);}

.ordering > * > .chk1:checked                     {opacity: 1 !important;}

.ordering > * > .chk1:checked + label             {opacity: 1 !important; font-weight: 700;}

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

  .ordering > *:nth-child(1)                      {width: 100%; margin: 0 0 0.8em;}

  }



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

  .parts .items .item                             {width: calc(33.33% - 0.6em); margin: 0.9em 0.9em 0 0; padding: 1.5em 1.5em 4em;}

  .parts .items .item:nth-of-type(-n+3)           {margin-top: 0;}

  .parts .items .item:nth-of-type(3n+3)           {margin-right: 0;}

  .parts .items .item h2                          {font-size: 1.45em;}

  .parts .items .item .img                        {width: calc(100% + 2em); margin: 1em 1.5em 0.8em -1.5em;}

  .parts .items .item .flex                       {padding: 0 1.5em 1.5em;}

  }

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

  .parts .items .item                             {width: calc(50% - 0.4em); margin: 0.8em 0.8em 0 0;}

  .parts .items .item:nth-of-type(-n+2)           {margin-top: 0;}

  .parts .items .item:nth-of-type(even)           {margin-right: 0;}

  }

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

  .parts .items .item                             {width: 100%; margin: 0.8em 0 0 0;}

  .parts .items .item:nth-of-type(1)              {margin-top: 0;}

  }



.detail                                           {display: block; width: 100%; position: relative;}

.detail:before                                    {display: block; background: white; position: absolute; right: 0; top: 0; content: "";}

.detail > .wrapper                                {justify-content: flex-end;}

.detail > .wrapper > div                          {display: block; order: 1;}

.detail > .wrapper > div:nth-child(2)             {order: 0;}     

.detail .breadcrumbs .wrapper                     {width: 100%; margin: 0;}

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

  .detail                                         {padding-bottom: 3em;}

  .detail:before                                  {width: 50%; height: 100%;}  

  .detail  > .wrapper > div                       {width: 50%; padding-left: 3em; box-sizing: border-box;}

  }

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

  .detail                                         {padding-bottom: 2em;}

  .detail > .wrapper > div                        {width: 100%;}

  }  



.detail .image                                      {display: block;}

.detail .image .cover                               {display: flex; width: 100%; position: relative; border-radius: var(--border-radius); overflow: hidden; margin-bottom: 1em;}      

.detail .image .cover .swiper-slide                 {display: block; width: 100%; overflow: hidden; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;}

.detail .image .cover .swiper-slide img             {display: block; width: 100%;}

.detail .image .thumbs                              {display: flex; height: auto; box-sizing: border-box; overflow: hidden;}

.detail .image .thumbs .swiper-slide                {display: block; width: calc(25% - 0.5em); opacity: 0.6; position: relative; overflow: hidden; border: solid 2px transparent; border-radius: var(--border-radius); box-sizing: border-box; cursor: pointer; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; transition: .15s ease-in-out;}

.detail .image .thumbs .swiper-slide img            {display: block; width: 100%;}

.detail .image .thumbs .swiper-slide:hover          {opacity: 1 !important;}

.detail .image .thumbs .swiper-slide-thumb-active   {opacity: 1 ; border-color: var(--color4);}

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

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

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

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

  .detail .image .thumbs                            {width: calc(100% - 1em);}

  }                                  

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

  .detail                                           {padding-right: 4%;}

  .detail .image                                    {width: 100%; margin: 1.5em 0;}

  .detail .image .thumbs                            {width: 100%;}

  }



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

.detail .status                                   {display: inline-block; width: auto; font-size: .9em; font-weight: 700; padding: 0.5em 0.8em 0.4em; border: solid 2px transparent; border-radius: var(--border-radius); box-sizing: border-box;}

.detail .status.in-stock                          {color: var(--color4b); border-color: var(--color4b);}

.detail .status.out-of-stock                      {color: #999999; border-color: #999999;}

.detail .description                              {font-size: 0.9em;}

.detail table                                     {width: 100%; margin-top: 1em;}

.detail table tr td                               {font-size: 0.9em; padding: 0.45em 1em 0.4em; border-top: solid 1px rgba(0,0,0,0.15); box-sizing: border-box;}

.detail table tr td:first-child                   {min-width: 6em; padding-left: 0; font-weight: 500;}

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

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

.detail .buttons                                  {display: flex; width: 100%; flex-wrap: wrap; margin-top: 1em;}

.detail .buttons > *                              {font-size: 1em; padding: 0.8em 1.3em; margin: 0.4em 0.4em 0 0;}

.detail .buttons > *:last-child                   {margin-right: 0;}

.detail .price                                    {font-size: 2.2em; font-weight: 700; color: var(--color1); margin: 0.35em 0;}

.detail .alternatives, .detail .compatibility     {display: block; width: 100%; padding: 1.5em; background: rgba(0,0,0,0.05); margin-top: 0.3em; box-sizing: border-box;}

.detail .alternatives h2,

.detail .compatibility h2                         {font-size: 1.6em; font-weight: 400; padding: 0.1em 0 0.1em 1.25em; margin: 0; position: relative; background-size: 1em auto; background-repeat: no-repeat; background-position: left top; box-sizing: border-box;}

.detail .alternatives h2                          {background-image: URL('/images/icon-alternatives.svg');}

.detail .compatibility h2                         {background-image: URL('/images/icon-compatibility.svg');}

.detail .alternatives p,

.detail .compatibility p                          {margin-top: 0.2em;}

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

  .detail .buttons > *                            {width: calc(50% - 0.2em);}

  }



.message-box                                            {display: flex; width: 100%; height: 100%; justify-content: center; align-items: flex-start; flex-wrap: wrap; background: rgba(0,0,0,0.7); padding: 1.5em 1.5em 1.5em; opacity: 0; box-sizing: border-box; position: fixed; left: -9999px; top: 0; z-index: 100000; transition: opacity .25s ease-in-out;}

.message-box .box                                       {display: block; width: 100%; max-width: 640px; max-height: calc(100vh - 5em); background: white; border-radius: var(--border-radius); margin: 2em 0 -2em; opacity: 0; position: relative; box-sizing: border-box; overflow-y: auto; transition: opacity .25s ease-in-out, margin .25s ease-in-out;}

.message-box .box .close                                {display: block; width: 1em; height: 1em; position: absolute; right: 1em; top: 1em; opacity: 0.5; cursor: pointer; transition: .25s ease-in-out;}

.message-box .box .close span                           {display: block; width: 100%; height: 2px; background: black; position: absolute; left: 0; top: calc(50% - 1px);}

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

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

.message-box .box .close:hover                          {opacity: 1;}

.message-box .box > div                                 {display: flex; width: 100%; Justify-content: center; flex-wrap: wrap; box-sizing: border-box;}

.message-box .box .title                                {display: block; width: 100%; text-align: center; font-size: 1.6em; font-weight: bold; color: #252525; margin-top: 0;}

.message-box .box .item                                 {display: block; width: 100%; text-align: center; font-size: 1em; font-weight: bold; color: var(--color2b); margin-top: 0;}

.message-box .box .form .inputs                         {font-size: 0.9em;}

.message-box .box > div > .button                       {font-size: 0.9em; padding: 0.7em 1em; margin-top: 1em;}

.message-box.show                                       {opacity: 1; left: 0;}

.message-box.show .box                                  {opacity: 1; margin: 0;}

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

  .message-box                                          {align-items: center;}

  .message-box .box                                     {padding: 3em;}

  }

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

  .message-box                                          {align-items: flex-start;}

  .message-box .box                                     {padding: 2.5em 2em 2em;}

  }

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

  .message-box .box .info-link                          {justify-content: space-between; align-items: center; padding: 1em 1em 1em 3.5em;}

  .message-box .box .info-link:before                   {height: 100%; left: 1.2em; top: 0;}

  .message-box .box .info-link p                        {width: auto; text-align: left; font-size: 0.8em; padding-right: 1.5em; box-sizing: border-box;}

  }

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

  .message-box .box .info-link                          {justify-content: center; flex-wrap: wrap; padding: 3.5em 1em 1em;}

  .message-box .box .info-link:before                   {height: 1.6em; left: calc(50% - 0.8em); top: 1em;}

  .message-box .box .info-link p                        {width: 100%; text-align: center; font-size: 0.9em;}

  .message-box .box .info-link .button                  {margin-top: 0.8em;}

  }