body {
    margin: 0;

/*    background:linear-gradient(125deg, #ccc, #01033d);*/
      min-height: 100vh;
    color: #fff;
    font-family: 'Barlow', sans-serif;
    font-size: 13px;

    overscroll-behavior: none;
}

body {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                          not supported by any browser */
    

    

}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

.hide {
    display: none !important;
}

summary {
    cursor: pointer;
    outline: none;
    list-style: none;
    position: relative;
}

details summary::-webkit-details-marker,
details summary::marker {
    display: none !important;
}

 .groupbox-ctt-marker-close::after {
    content: ' ►';
}

 .groupbox-ctt-marker-open:after {
    content: " ▼";
}

summary .morecolors-marker::after {
    content: ' ►';
}

.morecolors[open] summary .morecolors-marker:after {
    content: " ▼";
}

.morecolors .product {
display:none;
}

.morecolors[open]  .product {
display:flex;
}

.morecolors[data-open="open"]  .product {
display:flex;
}



.fide {
        opacity: 0.2;
}


.produtopen {
/*    background-color : #b0a7a738!important*/
        background-color : #fff!important;
        border: 1px solid #050038!important;
}
.produtopen .product-title{
    opacity: 0;
}
.produtopen .product-price{
    opacity: 0;
}

.produtopen .morecolors.nosummary{
    opacity: 0.5; 
    left: 110px;
    top: 34%;
    scale: 1.5;
}
.produtopen >div> img{
    opacity: 0.9;
    border-radius: 20px;
    width: 79%;
    height: auto;
    margin-left: 17px !important;
    margin-top: 2px !important;
    /* margin: auto !important; */
    max-height: unset !important;
}
.glow{
/*-webkit-box-shadow:0px 0px 15px 4px #e75a;
-moz-box-shadow: 0px 0px 15px 4px #e75a;
box-shadow: 0px 0px 16px 4px #e75a;
animation: mymove 1s infinite;
background-color:#fff;*/

}

@keyframes mymove {
  50% {
  -webkit-box-shadow:0px 0px 0px 4px #fff;
-moz-box-shadow: 0px 0px 0px 4px #fff;
box-shadow: 0px 0px 0px 4px #fff;
        background-color: #fff;
  }
  

    
}

.morecolors {
    position: relative;
}

.morecolors summary {
    display: block;
    position: absolute;
    top: -29px;
    left: 14px;
    /* overflow: hidden; */
    text-align: center;
    width: 0px;
    height: 1px;
    font-weight: bold;
    font-size: 120%;
}

.nosummary{
    display: block;
    position: absolute;
    top: 67px;
    left: -3px;
    /* overflow: hidden; */
    text-align: center;
    width: 0px;
    height: 1px;
    font-weight: bold;
    font-size: 120%;
}



.morecolors .paint-box {
width: 120px;
    height: 19px;
/*    background-color: #ffffff;
    border: 1px solid #adadad;
    border-radius: 5px;*/
    padding-left: 0px;
      transition: 0.3s;
}



.paint-box >span {
/*    border: 1px solid #adadad;*/
vertical-align: middle;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    display: inline-block;
    margin-right: 2px;
          transition: 0.3s;
}




.paint-box >span:nth-child(1) {       background-color: #373737; }
.paint-box >span:nth-child(2) {       background-color: #75172f; }
.paint-box >span:nth-child(3) {       background-color: #c59d7c; }
.paint-box >span:nth-child(4) {       background-color: #90989a; }
.paint-box >span:nth-child(5) {       background-color: #2b3944; }
.paint-box >span:nth-child(6) {       background-color: #fff ;      font-weight: normal;   border: 0px solid #050038;     font-size: 11px;}

.morecolors .paint {
    height: 20px;
    width: 20px;
    background-size: cover;
    background-position: center;
    margin: 5px auto;
    background-image: url(/img/icons/paint.svg);
}

.topmenu {
    color: #3b3949;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 132px;
    width: 100%;
    padding: 0px;
    min-width: 328px;
/*    background-color: aquamarine;*/

}

.topmenu .btnbox {
    /* background-color: #ffffff55; */
    /* border-radius: 5px; */
    /* border: 1px solid #b69c8b; */
    position: absolute;
    top: 51px;
    right: 14px;
    display: block;
    width: 100%;
    text-align: center;
    height: 64px;
    display: flex;
    flex-direction: row-reverse;
}





#shopcart {
/*    display: none;*/
    right : 0px;
    width: 100%; 
/*    background-color: cadetblue;*/
    height: 52px;
    text-align: right;
    border:unset;
        margin-top: 8px;
}

.menucartbox div {
    display:inline-block;
        vertical-align: middle;
}

.empty .menucartbox{
    background-color: #767676;
}
.empty .cart{
      filter: brightness(0) invert(1);  /*    робить будь-який колір SVG → білим */
}
.empty #topcartsumm{
display: none;
}

.menucartbox {
        vertical-align: middle;
    width: fit-content;
    background-color: #ff3f96;
    border: 1px solid #ccc;
    border-radius: 55px;
    display: inline-block;
}
.menucartbox .cart{
        height: 48px;
    width: 48px;
}

#topcartcount {
    display:none;
    position: absolute;
    top: 2px;
    right: 6px;
    background-color: #00008773;
    border-radius: 50%;
    color: #111537;
    /* margin: 2px; */
    width: 14px;
    height: 15px;
    font-size: 80%;
}

#topcartsumm {
/*    background-color: #fff;
    height: 30px;
    border-radius: 16px;
    cursor: pointer;*/
/*    border: 1px solid #000;*/
/*    font-size: 18px;
    right: 0px;
    height: 35px;
    width: 165px;
    display: inline-block;
    text-align: center;
    padding-top: 17px;*/

    padding-left: 8px;
    color: #000;
    font-weight: bold;
    font-size: 16px;
}

#topcartsumm b {
    font-size: 70%;
/*    font-weight: normal;
    font-style: normal;*/
/*    display: none;*/
     font-weight: bold;
}

#topcartsumm i {
/*    font-size: 80%;
    font-weight: bold;*/
    font-style: normal;
}

.formprice {
     /* margin: 10px; */
     position: relative;
    font-weight: 500;
    color:#ecab05;
    font-size: 18px;
}
.formprice b {
     font-weight: 500;
}

.incart .formprice {
/*        bottom: 21px;*/
}



.countincart {

    position: absolute;
    top : 0px;
    right: 0px;
    height: 20px;
    width: 20px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    background-size: contain;
    color: #fff;
    background-color: #55b65a;
    border-radius: 50%;
    


}

#ModalText #paintmenu{
/*flex-direction: row-reverse;*/
flex-direction: row;
    width: 98%;
    max-width: 93%;
    overflow: visible;
    margin-left: -14px;
}

#ModalText #paint_1 ,#ModalText #paint_2 {
   width: 100%;
    display: flex; flex-wrap: wrap;
}

#ModalText .products {
        width:unset;
}

.formprice img
 {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 6px;
    left: 12px;
}

.formprice span{
    padding-left: 50px;
    padding-top: 5px;
    display: block;
    color: #050038;
    font-size: 125%;
}
.formprice b {
/*    font-size: 70%;
    font-weight: normal;*/
    font-style: normal;
}

.formprice i {
    font-size: 80%;
    font-weight: bold;
    font-style: normal;
}

.topmenu .btnimg {

    height: 40px;
    cursor: pointer;
    width: 40px;
    background-size: cover;
    background-position: center;
    margin: 7px 0px;
}

.topmenu .fav {
    background-image: url(/img/icons/tm1.svg);
}
.topmenu .user {
    background-image: url(/img/icons/tm2.svg);
}
.topmenu .ruler {
    background-image: url(/img/icons/tm3.svg);
}
.topmenu .info {
    background-image: url(/img/icons/tm4.svg);
}
.topmenu .settings {
    background-image: url(/img/icons/tm5.svg);
}

.topmenu .faq {
    background-image: url(/img/icons/fag.svg);
}

.topmenu .cart {
/*display:none;*/
    height: 34px;
    width: 34px;
    background-image: url(/img/icons/cart.svg);
    position: absolute;
    right: 115px;
    top: 4px;opacity: 0.4;
}

    .bynowbtn{
    background-color: #ecab05;
    color: #fff;
    height: 30px;
    border-radius: 23px;
    cursor: pointer;
    border: 0px solid #000;
    font-size: 18px;
    right: 0px;
    height: 35px;
    display: inline-block;
    text-align: center;
    padding-top: 17px;
    padding-left: 20px;
    padding-right: 20px;
    /* padding: 10px; */
    /* margin: 10px; */
    margin-left: 10px;
    display:none;
    }

.menu {
    color: #3b3949;
    position: fixed;
    bottom: 1%;
    left: 2%;
    height: 64px;
    width: 96%;
    background-color: #ededed;
    border-radius: 64px;
    padding: 0px;
    min-width: 328px;
    /* border: 1px solid #b69c8b;*/

}

.menu .btnblock{
    display: flex;
/*    justify-content: space-around;*/
/*    background-color: #fff;*/
/*    background-color : #833434;*/
    border-radius: 80px;
/*    height: 42px;*/
/*    padding-top: 3px;*/
    padding: 0px 8px;

}

.menu .btnbox {
    display: block;
/*    width: 15%;*/
    text-align: center;
/*    height: 55px;*/
    cursor: pointer;
    margin: 3px;
}

.menu .btnbox:nth-child(-n+5) {
/*    border-right: 1px solid #b69c8b;*/

}

.menu .btnbox:nth-child(7) {
display:none;
}
.menu .btnbox:nth-child(9) {
display:none;
}
.menu .btnbox:hover { 
/*    background-color : #dfdedea6;     border-radius: 15px;
    padding-top: 10px;
    margin-top: -10px;*/
}



.menu .btnimg {
    cursor: pointer;
    height: 51px;
    width: 48px;

    background-size: contain;
    background-position: center;

    margin: 5px auto;
        background-repeat: no-repeat;
}



.menu .modules {
    background-image: url(/img/icons/bt4.svg);
      background-size: 48px;
}



.menu .room {
    background-image: url(/img/icons/room.svg);
}

.menu .sendform {
    background-image: url(/img/icons/send.svg);
}



.menu .share {
    background-image: url(/img/icons/save.svg);
        background-size: 21px;
}

.menu .settings {
    background-image: url(/img/icons/settings.svg);
        background-size: 23px;
}

.menu .faq {
    background-image: url(/img/icons/fag.svg);
        background-size: 23px;
}

.menu .paint {
    background-image: url(/img/icons/bt3.svg);
    background-size: 48px;
}

.menu .tabletop {
    background-image: url(/img/icons/bt2.svg);
        background-size: 48px;
}

.menu .sink {
    background-image: url(/img/icons/bt1.svg);
        background-size: 48px;
}

.menu .clear {
    background-image: url(/img/icons/clear.svg);
}

.menu .cart {
    background-image: url(/img/icons/btbuy.svg);
}

.menu .btnlabel {
    display:none;
    font-weight: bold;
    font-size:9px;
}

.topmenu .logobox {
    position: absolute;
    top: 52px;
    left: 16px;
    width: 75px;
    height: 64px;
    display: inline-block;
    /* background-image прибрано — тепер inline SVG (.logo-svg) */
}

.modal-content .logobox {
    position: absolute;
    top: 57px;
    left: 16px;
    width: 75px;
    height: 64px;
    display: inline-block;
    /* background-image прибрано — тепер inline SVG (.logo-svg) */
}

#buildmenu{
    width:100%;
}

.blankico{
    position:absolute;
    top:22px;
    left:6px;
}
.blankico span{
}
.blankico span img{
    width:20px;
}
  .groupPC{display:none;}

      .chosecolor{display:none}
      
        .produtopen   .chosecolor{
      display:none;
        position: absolute;
    bottom: 7px;
    left: 0px;
    width: 100%;
    text-align: center;
  }
      
  .groupPCmob{display:block;}
  
.groupbox {
    min-width: 300px;
    margin: 10px;
    padding: 0px;
    list-style: none;
    color: #3b3949;
    max-width: 450px;
        min-height: 228px;
}

.groupbox-ctt-box {
    background-color:    #ededed;
    border: 1px solid #fff;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
        height: 228px;
            position: relative;
}

.groupbox-ctt-box-image {
    width: 144px;
        position: absolute;
    top: 70px;
    left: 13px;

}

.groupbox-ctt-image {

}

.groupbox-ctt-image img {
    width: 100%;
    border-radius: 10px;
        height: 144px;
}

.groupbox-ctt-title {
    width: 100%;
        position: absolute;
    
}

.groupbox-ctt-title--content {
/*    display: flex;
    justify-content: center;
    align-items: center;
    height: 92%;
    width: 69%;
    margin: auto;*/
padding-top: 20px;
}

.groupbox-ctt-title--content-name {
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    color: #050038;
        margin-left: 13px;
}

.groupbox-ctt-marker-open,.groupbox-ctt-marker-close {
/*    width: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    text-align: center;
    color: #050038;*/
    position: absolute;
    top: 33px;
    right: 20px;

}

.hidetable{
    
}

.inplan{
    
}
 .twotitle{
     display:none;
 }

 .inplanfilter summary {

        pointer-events: none;
 }
 
#WaitTitle {
    padding-top: calc(35% - 100px);
    text-align: center;
}

#Wait {overflow: hidden;}

#Wait .modal-content{
    height:96%;
    overflow: hidden;
}

.modal {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
/*    height: calc(100vh - 133px);*/
 height: 100vh;
    overflow: auto;

    background-color: #ffffff;
    color: #3b3949;
}

.modal-content{
/*             position: absolute;
    top: 40px;*/

/*    background:linear-gradient(125deg, #f9f9fa, #e6ebf1);*/
    background-color: #ffffff55;
        padding-bottom: 20px;
}

#ModalTitle {
    font-size: 30px;
    font-weight: bold;
    text-align: left;
    color: #050038;
    padding-left: 19px;
    padding-top: 144px;
}

/* Коли в ModalTitle є wizard-header або sw-header — прибираємо горизонтальний padding
   (їх власні відступи), font-size наслідується вкладеним <h2> */
#ModalTitle:has(.wizard-header),
#ModalTitle:has(.sw-header) {
    padding-left: 0;
}

/* wizard-header всередині ModalTitle — нормальні відступи + білий фон проти просвічування */
#ModalTitle > .wizard-header,
#ModalTitle > .sw-header {
    background: #ffffff;
    padding: 4px 14px 14px 14px;
    margin: 0;
}

#ModalTitle .titlecartbuttons {
    display:none;position: absolute;    right: 33%;    font-size: 12px;    top: 100px;
}

#ModalTitle .titlecartbuttons .apply {
  background-color: #ec4899;    cursor: pointer;    color: #fff;    border-radius: 10px;    border: 0px solid #fff;
}



.modal .close {
        position: absolute;
    cursor: pointer;
    top: 75px;
    width: calc(100% - 55px);
    height: 16px;
    background-image: url(/img/icons/close.svg);
    /* background-size: contain; */
    background-position: right;
    background-repeat: no-repeat;
    z-index: 1000;
    display: block;
/*    background-color: #ffffff88;*/
    /* margin-left: calc(100% - 40px); */
    /* border: 2px solid #232323; */
    /* border-radius: 50%; */
    text-align: right;
    /* margin-right: 80px; */
    padding-right: 33px;
    /* margin: 10px; */
    font-size: 14px;
    font-weight: bold;
}

#ModalText {
    flex-wrap: wrap;
    position: relative;
/*    background-color: #ffffff;*/
/*    border: 1px solid #fff;*/
    border-radius: 10px ;
    overflow: hidden;
    margin: 10px 1px;
/*    display: flex;*/
    color: #050038;
    position: relative;
    min-height: 90px;
    min-width: 250px;
    max-width: 450px;
    padding-top: 3px;
}

/* ==================== STICKY MODAL HEADER (Варіант D) ====================
   #Modal стає flex-shell з фіксованою шапкою (.modal-header) і scrollable body (#ModalText).
   Лого і "Menü schließen X" живуть у .modal-header — лишаються завжди вгорі при прокрутці.

   ⚠️ adjustContainerWidth() задає inline 'height: auto' на .modal-bg — тому ВСЯ висота
   будується через flex:1 каскад, а не через height:100%. Інакше .modal-bg бере висоту
   контенту, #ModalText не отримує вільного простору і прокрутка не активується.

   ВАЖЛИВО: правила обмежено #Modal, щоб не зламати #Wait модалку (loader).
   ========================================================================== */

#Modal {
    display: flex ;
    flex-direction: column !important;
    overflow: hidden !important;
}

#Modal .modal-bg {
    flex: 1 1 0 !important;            /* розтягуємось у висоту попри inline height:auto */
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

#Modal .modal-content {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
/*        max-width: 600px !important; */
            margin: auto;
            width: 100%;
}

#Modal .modal-header {
    flex-shrink: 0;
    position: relative;                /* .logobox/.close (absolute) орієнтуються по цій шапці */
    background: #ffffff;               /* щоб контент при скролі не просвічував крізь шапку */
    z-index: 5;
}

/* Альтернативна тонка шапка (modaltopen header='cart'):
   містить лише кнопку "Zurück zum Küchenplaner". Лишається зверху при скролі. */
#Modal .modal-header-cart {
    flex-shrink: 0;
    background: #ffffff;
    z-index: 5;
    padding: 14px 16px 12px 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    text-align: center;
}

#Modal .modal-header-cart .closeback {
    display: inline-flex !important;   /* перебиває стару .closeback { display:flex; width:calc(100%-16px) } */
    align-items: center;
    gap: 8px;
    width: auto !important;            /* була calc(100% - 16px) у глобальній .closeback */
    margin: 0 !important;              /* була margin: auto */
    padding: 10px 18px 10px 14px;
    background: #f0f0f3;
    background-color: #f0f0f3;         /* перебиває .closeback { background-color: #ededed } */
    color: #111537;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
    line-height: 1;
    user-select: none;
}

#Modal .modal-header-cart .closeback:hover {
    background: #e3e3e8;
}

#Modal .modal-header-cart .closeback svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: block;
}

#Modal .modal-header-cart .closeback span {
    line-height: 1;
}

/* Sticky-підвал модалки (modaltopen 4-й параметр).
   Лишається завжди внизу, поки #ModalText прокручується. */
#Modal .modal-footer {
    flex-shrink: 0;
/*    background: #ffffff;*/
    padding: 12px 14px 50px 14px;
/*    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);*/
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
        max-width: 600px;
    margin: auto;
}

/* Якщо підвал порожній — повністю прибираємо (без shadow / padding) */
#Modal .modal-footer:empty {
    display: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

#Modal #ModalText {
    flex: 1 1 0 !important;
    overflow-y: auto !important;       /* перебиває старе overflow:hidden */
    overflow-x: hidden !important;
    min-height: 0 !important;          /* критично для flex column scroll */
    -webkit-overflow-scrolling: touch; /* iOS momentum scroll */
    padding-bottom: 20px;              /* перенесено з .modal-content */

    /* Варіант А: контент наповнює всю доступну ширину модалки */
    max-width: none !important;        /* було: 450px — прибираємо обмеження */
    width: 100% !important;
    margin-left: 0 !important;         /* було: auto — не центруємо, бо ширина 100% */
    margin-right: 0 !important;
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
}

#ModalText hr {
    color: #050038;
    width: 95%;
    height: 1px;
}

#ModalText h2 {
    color: #050038;
    width: 95%;
}

#ModalText .apply {
    background-color: #e8a905;
    cursor: pointer;
    color: #fff;
    border-radius: 10px;
    border: 0px solid #fff;
/*    height: 30px;*/
    width: 250px;
    font-size: 100%;
    font-weight: bold;
/*    margin: 0 auto;*/
    margin-left: 36px;
    margin-top: 29px;
}

.modalinput {
    width: 85%;
    margin: 10px;
}

.modalinput span {
    display: block;
    color: #6e6e73;
    margin-bottom: 5px;
}

.modalinput input {
    width: 90%;
    color: #050038;
    border-radius: 5px;
    border: 1px solid #6e6e73;
    padding: 10px;
}


.modalcheck, .modalaction {
    width: 42%; cursor: pointer;
    margin: 10px;
    position: relative;
}

.modalcheck input[type="checkbox"] {
    display: none;
}

.modalcheck input[type="checkbox"] + label {
    padding-left: 50px;
    padding-top: 5px;
    display: block;
    color: #050038;
    font-size: 125%;
}

.modalcheck input[type="checkbox"] + label::before {
    content: " ";
    display: block;
    width: 40px;
    height: 25px;
    border-radius: 15px;
    background-color: #ccc;
    position: absolute;
    top: 0px;
    left: 0px;
}

.modalcheck input[type="checkbox"] + label::after {
    content: " ";
    display: block;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background-color: #ffffff;
    position: absolute;
    top: 2px;
    left: 2px;
}

.modalcheck input[type="checkbox"]:checked + label::before {
    background-color: #204578;
}

.modalcheck input[type="checkbox"]:checked + label::after {
    left: 18px;
}

.modalaction img {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 0px;
    left: 10px;
}

.modalaction span {
    padding-left: 50px;
    padding-top: 5px;
    display: block;
    color: #050038;
    font-size: 125%;
}

.fullline {
    width: 95%;
    margin-left: 24px;
}

.modalradiotextures {
    width: 87px;
    height: 87px;
    position: relative;
}
.named{
   height: 150px!important; 
   cursor: pointer;
}

.modalradiotextures input[type="radio"] {
    display: none;
}

.paintico{
        width: 50px;
}

.modalradiotextures label {

    width: 79px;
    height: 79px;
    overflow: hidden;
    display: block;
    border-radius: 10px;
}
label{ cursor: pointer;}

.modalradiotextures label img {
    border-radius: 10px;
    width: 73px;
    height: 73px;
    overflow: hidden;
    position: absolute;
    top: 4px;
    left: 4px;
    border: 1px solid #ccc;
    max-width: unset;
}
.modalradiotextures label span {
position: absolute;
    top: 84px;
    width: 96%;
    /* height: 28px; */
    left: 0px;
    display: inline-block;
    background-color: #ffffff00;
    border-radius: 2px;
    text-align: center;
    font-size: 90%;
    padding-top: 3px;
    padding-bottom: 3px;
max-width: 82px;
}

#changePaint,.mt50 {margin-top: 50px!important;}

.modalradiotextures input[type="radio"]:checked + label img {
    border: 3px solid #fff;
    top: 2px;
    left: 2px;
}

.modalradiotextures input[type="radio"]:checked + label {
    border: 2px solid #e8a905;
}


.modalradiofilters {
    width: 31%; 
    cursor: pointer;
    height: 40px;
    position: relative;
    margin: 3px;
}

.modalradiofilters input[type="radio"] {
    display: none;
}


.modalradiofilters label {
/*    background-color: #fff;*/
    overflow: hidden;
    display: block;
    width: 100%;
    height: 99%;
    padding: 0px 10px;
/*    border: 1px solid #586784;*/
}
.modalradiofilters input:disabled + label {
    cursor: not-allowed; /* Вказує, що елемент неактивний */
    opacity: 0.6; /* Робить менш помітним */
    text-decoration: line-through;
    display:none;
}

.modalradiofilters label span {
margin-top: 0px;
    margin-left: 3px;
    display: block;
    text-align: center;
    border-radius: 20px;
    border: 1px solid #204578;
    padding: 10px 4px;
    font-size: 13px;
    color: #204578;
}

.modalradiofilters label::before {
/*    content: " ";
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 3px;
    background-color: #ebaa04;
    position: absolute;
    top: 4px;
    left: 42%;
    border: 1px solid #000;*/
}

.modalradiofilters input[type="radio"]:checked + label span{
/*    border: unset;*/
    background-color: #204578;
        color: #fff;
}

.modalradiofilters input[type="radio"]:checked + label::before {
/*    border: 1px solid #586784;
    background-color: #03004d;
        background-image: url(/img/icons/check_w.svg);
    background-size: cover;
    background-position: center*/
    
}


.modalaction .colors-block {
    background-color: #f3f3f3;
    padding: 10px;
    cursor: pointer;
    border-radius: 8px;
}

.modalaction .colors-block .colors-img {
    width: 120px;
    height: 140px;
    background-position-x: -112px;
    background-position-y: -75px;
    margin: 0px auto;
}

.modalaction .colors-block .colors-title {
    margin-top: 10px;
}

.modalaction .colors-block .colors-price {
    font-size: 135%;
    font-weight: bold;
}

.modalaction .colors-block .colors-price i {
    font-size: 62%;
}

.modalfirst {
    min-width: 100px;
    height: 100px;
    margin: 10px;
    position: relative;
    background-color: #f1f1f1;
    border: 1px solid #fff;
    border-radius: 10px;
    max-width: 100px;
    overflow: hidden;
    border-bottom: 3px solid #fff;
}
.modalfirst >div {
position: absolute;
    bottom: 0px;
    margin: 5px;
    text-align: center;
    width: 100%;
}
  
.modalfirst >span {
position: absolute;
    display: block;
    width: 100%;
    height: 65px;
    top: 0px;
    margin: 0px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
}

.modalfirstbox{
display: flex;
    width: 100%;
    flex-wrap: wrap;
    border-left: 10px solid #c2cf27;
    margin-top: 0px;
    margin-left: 30px;
    padding-left: 20px;
    position: relative;
    padding-bottom: 20px;
}
.modalfirstbox h2{
position: absolute;
    top: -13px;
}  
.modalfirstbox h2 i{
margin-left: 10px;
    font-style: normal;
    color: #1d7422;
    font-weight: normal;
} 
.modalfirstbox h2 i span:after{
    content: 'x';
    font-size: 10px;
    font-weight: bold;
    margin-left: 5px;
    vertical-align: top;
}


.modalfirstbox::before{
content: ' ';
    width: 30px;
    height: 28px;
    display: block;
    position: relative;
    top: -1px;
    left: -40px;
    border-radius: 50%;
    background-color: #c2cf27;
    font-size: 160%;
    text-align: center;
    padding-top: 2px;
    
}

.modalfirstbox:nth-child(1)::before {content: '1';}
.modalfirstbox:nth-child(2)::before {content: '2';}
.modalfirstbox:nth-child(3)::before {content: '3';}
.modalfirstbox:nth-child(4)::before {content: '4';}
.modalfirstbox:nth-child(5)::before {content: '5';}

.modalfirstbox:nth-child(6)::before {content: '=';}
.modalfirstbox:nth-child(6) {padding-bottom: 0px;}

.modalfirstline{
display: flex;
    width: 100%;
    flex-wrap: wrap;
}
.selfilter{
    border-bottom: 3px solid #c2cf27;
}

.compl{
        border-left: 10px solid #1d7422;
}
.compl::before{
        background-color: #1d7422;
        color:#fff;
}

.modalfirstline .sizes > span{
display:none;    
}

.modalfirstline .sizes {
    height: 25px;
}

.modalfirstresult {
    width: 220px;
    max-width: 220px;
    height: 200px;
    min-width: 100px;
    margin: 10px;
    position: relative;
    background-color: #f1f1f1;
    border: 1px solid #fff;
    border-radius: 10px;
    overflow: hidden;
    border-bottom: 3px solid #fff;
}

.modalfirstresult > span{
        height: 120px;
    position: absolute;
    display: block;
    width: 100%;
    top: 0px;
    margin: 0px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
}    
.modalfirstresult .name{
position: absolute;
    top: 120px;
    margin: 5px;
    text-align: center;
    width: 100%;
}

.modalfirstresult .product-price{
        width: 94%;
            padding-left: 6%;
}

.budgets{
    min-width: 300px;
    margin: 10px;
    padding: 0px;
    list-style: none;
    color: #3b3949;
    max-width: 450px;
    width: 100%;
    margin-left: 10px;
    border: 3px solid #f1f1f1;
    border-collapse: collapse; 
}
.budgets tr{
        border-bottom: 1px solid #f1f1f1;
}
.budgets td{
        border-right:  1px solid #f1f1f1;
        padding: 7px;
}

.budgets td:not(:first-child) {
   text-align: center;
}

.budgets td span{
        
    border: 1px solid #ccc;
    border-radius: 2px;
    width: 15px;
    display: inline-block;
    height: 15px;
    text-align: center;
}

.budgets td .tch{
    background-color: #e8a905;
    background-image: url(/img/icons/check_w.svg);
    background-size: cover;
    background-position: center;
    
}


.budgets td .utch{
   
    background-image: url(/img/icons/uncheck_w.svg);
    background-size: cover;
    background-position: center;
    
}

.budgets .bottomline{
    display: none;
}

#container canvas {
    margin: auto;
    opacity:0.89;
}

.products {
/*    margin: 10px;*/
/*    max-width: 450px;*/
}

.product ,.tabletopproduct {
    flex-wrap: wrap;
    position: relative;
    cursor: pointer;
    background-color: #fff;
    border: 5px solid #fff;
    border-radius: 10px;
    overflow: hidden;
/*    margin: 10px;*/
    display: flex;
    color: #050038;
    position: relative;
/*    min-height: 90px;*/
    min-width: 250px;
    margin-bottom: 5px;
    height: 183px;
}

.incart .product{
   cursor: unset!important; 
}

.incart .disabled  {
    opacity:0.7;
    filter: grayscale(20%); 
    
}

.incart .disabled::after {
  content: "";
  position: absolute;
  left: -20%;               /* подовжити, щоб лінія перетинала весь блок */
  top: 50%;
  width: 140%;              /* подовжена ширина */
  height: 4px;              /* товщина */
  background: #e74c3c;
  transform: translateY(-50%) rotate(-31deg); /* кут — підберіть під свій блок */
  pointer-events: none;
  z-index: 10;
}

.morecolors .product {
    background-color: #fff;
    border: 1px solid #f1f1f1;
}

.product-img {
    width: 25%;
    /*    border-radius: 50%; overflow: hidden;
background-color: #565a87;        */
}

.product-img img {
/* border: 1px solid #cfc5c5; */
    /* border-radius: 50%; */
    overflow: hidden;
    /* min-width: 64px; */
    /* min-height: 64px; */
    /* max-width: 70%; */
    max-height: 73px;
    margin: auto;
}

.product-title {
/*    width: 69%;
    display: flex;
    justify-content: center;

    font-weight: bold;
    padding-top: 10px;
    padding-left: 10px;

    font-size: 114%;
    max-height: 38px;
    overflow: hidden;
    text-overflow: ellipsis;*/
    
   width: 69%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
/*    text-align: center;*/
    font-weight: 600;
    padding-top: 4px;
    padding-left: 10px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    box-sizing: border-box;
    line-height: 1.2em; /* Висота рядка для точного контролю */
    max-height: 2.81em; /* Висота двох рядків для резервної сумісності */
    overflow-wrap: break-word; /* Перенос довгих слів */
    
}

.product-price , .product-price-cart {
    width: 70%;
    display: block;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    text-align: left;
    padding-left: 28%;
    position: absolute;
    font-size: 135%;
    bottom: 1px;
    text-align: right !important;
}

.product-price-cart{
   text-align: right!important; 
}

.product-price i , .product-price-cart i{
font-weight: normal;
    font-size: 10px;
    position: absolute;
    top: -3px;
    left: 116px;
    text-decoration: none;
    font-style: normal;
    text-align: left;

}

    .product-price-cart i {
        text-align: left!important;
        left: 111px!important;
        right: unset;
    }

.product-price i u ,.product-price-cart i u {

        text-decoration: none;
/*    color: #43c405;*/

}

/* ==================== ROOM START PAGE (modalRoomStart) ==================== */

.room-start {
    padding: 6px 18px 24px 18px;
    color: #050038;
    font-family: 'Inter', sans-serif;
    max-width: 380px;
    margin: 0 auto;
}

/* ----- Шапка з іконкою ----- */
.room-start-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}

.room-start-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.room-start-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.room-start-title {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    color: #050038;
    line-height: 1.25;
    letter-spacing: -0.2px;
/*    flex: 1;*/
    min-width: 0;
max-width: 80%;
    width: 80%;    
}

/* ----- Опис ----- */
.room-start-text {
    margin: 0 0 14px 0;
    font-size: 14px;
    color: #050038;
    line-height: 1.45;
    font-weight: 400;
}

/* ----- Бейдж "5 – 8 Werktage" ----- */
.room-start-delivery-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f4fad7;
    color: #86a011;
    font-weight: 700;
    font-size: 14px;
    padding: 6px 14px 6px 10px;
    border-radius: 999px;
    margin-bottom: 4px;
}

.room-start-truck {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ----- Підказка з вигнутою стрілкою ----- */
.room-start-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 0 24px 50px;
    font-size: 13px;
    font-weight: 700;
    color: #050038;
    line-height: 1.4;
}

.room-start-hint span {max-width: 200px;}

.room-start-hint-arrow {
    width: 28px;
    height: 24px;
    flex-shrink: 0;
    margin-top: -8px;
}

/* ----- Заголовок секції ----- */
.room-start-section-title {
    margin: 4px 0 14px 0;
    font-size: 19px;
    font-weight: 800;
    color: #050038;
    line-height: 1.2;
    letter-spacing: -0.2px;
}

/* ----- Інпути ----- */
.room-start-inputs {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 22px;
}

.room-start-input {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.room-start-input-label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
    padding-left: 18px;
}

.room-start-input input {
    width: 100%;
    box-sizing: border-box;
    background: #f0f0f3;
    border: none;
    border-radius: 999px;
    padding: 14px 22px;
    font-size: 15px;
    font-weight: 600;
    color: #050038;
    font-family: inherit;
    outline: none;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

.room-start-input input:focus {
    background: #e6e6ec;
    box-shadow: 0 0 0 2px rgba(5, 0, 56, 0.15);
}

/* Прибираємо стрілки number input */
.room-start-input input::-webkit-outer-spin-button,
.room-start-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ----- CTA-кнопка ----- */
.room-start-cta {
    display: block;
    width: 100%;
    background: #ec4899;
    color: #111537;
    border: none;
    border-radius: 999px;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    text-align: center;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.25);
}

.room-start-cta:hover {
    background: #db2777;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(236, 72, 153, 0.35);
}

.room-start-cta:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.25);
}

/* ----- Loading-стан CTA (планер ще не dataready) -----
   Кнопка неактивна, показує "Lädt … Bitte warten" + маленький spinner. */
.room-start-cta.is-loading,
.room-start-cta:disabled {
    background: #d1d5db;
    color: #6b7280;
    cursor: not-allowed;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.room-start-cta.is-loading:hover,
.room-start-cta:disabled:hover {
    background: #d1d5db;
    transform: none;
    box-shadow: none;
}
/* Круглий spinner з ::before, обертається поки триває loading */
.room-start-cta.is-loading::before {
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(107, 114, 128, 0.35);
    border-top-color: #6b7280;
    animation: roomStartCtaSpin 800ms linear infinite;
    flex-shrink: 0;
}
@keyframes roomStartCtaSpin {
    to { transform: rotate(360deg); }
}

/* ==================== SETTINGS WIZARD (modalSettingsWizard) ==================== */

.settings-wizard {
    padding: 4px 14px 24px 14px;
    color: #050038;
    font-family: 'Inter', sans-serif;
    margin: auto;
    max-width: 600px;
}

/* ----- Шапка ----- */
.sw-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0 18px 0;
    flex-wrap: nowrap;
}

.sw-back-btn {
    background: transparent;
    border: none;
    color: #050038;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    margin-left: -6px;
    font: inherit;
}

.sw-back-btn:hover {
    background: #f0f0f5;
}

.sw-back-btn svg {
    width: 24px;
    height: 24px;
}

.sw-back-placeholder {
    width: 4px;
    flex-shrink: 0;
}

.sw-header-title {
    margin: 0;
    font-size: 28px;
    font-weight: bold;
    color: #050038;
    letter-spacing: -0.3px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* ----- Секційні заголовки (для кроку 'all') ----- */
.sw-section-title {
    font-size: 18px;
    font-weight: 800;
    color: #050038;
    margin: 22px 0 12px 0;
    letter-spacing: -0.2px;
    line-height: 1.2;
}

.sw-section-title:first-of-type {
    margin-top: 4px;
}

/* ----- Категорії (main step) ----- */
.sw-category-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.sw-category-item {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: flex-start;
    padding: 18px 4px;
    border-bottom: 1px solid #ececf0;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: #050038;
    transition: background 0.2s ease;
}

.sw-category-item:last-child {
    border-bottom: none;
}

.sw-category-item:hover {
    background: #f9fafb;
}

/* Іконка зліва */
.sw-category-item .sw-category-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #050038;
}

.sw-category-item .sw-category-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Назва — flex-grow щоб chevron йшов справа */
.sw-category-item .sw-category-name {
    flex: 1;
    min-width: 0;
}

/* Текст заголовку клікабельний коли має onclick (аналог wizard-header-titles) */
.sw-header-title[onclick] {
    cursor: pointer;
}

/* ----- Загальний рядок налаштування ----- */
.sw-row {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    margin-bottom: 8px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f0f3;
}

.sw-row-toggle {
    cursor: pointer;
}

.sw-row-label {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    color: #050038;
    line-height: 1.3;
    padding-right: 12px;
}

.sw-row-label-light {
    font-weight: 500;
    color: #6b7280;
}

/* ----- iOS-style toggle switch ----- */
.sw-toggle {
    position: relative;
    flex-shrink: 0;
    display: inline-block;
    width: 46px;
    height: 26px;
}

.sw-toggle input {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}

.sw-toggle-track {
    position: absolute;
    inset: 0;
    background: #d1d5db;
    border-radius: 999px;
    transition: background 0.2s ease;
}

.sw-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.sw-toggle input:checked + .sw-toggle-track {
    background: #ec4899;
}

.sw-toggle input:checked + .sw-toggle-track .sw-toggle-knob {
    transform: translateX(20px);
}

/* ----- Рядок "Farbe ändern" з прев'ю ----- */
.sw-row-color {
    cursor: pointer;
    padding-left: 36px;
    margin-top: -4px;
    margin-bottom: 14px;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding-top: 6px;
    padding-bottom: 6px;
}

.sw-row-color:hover {
    background: #f9fafb;
    border-radius: 8px;
}

.sw-color-preview {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #d1d5db;
    background-size: cover;
    background-position: center;
    border: 1px solid #e8e8ed;
    flex-shrink: 0;
    margin-right: 10px;
}

.sw-color-preview-empty {
    background: linear-gradient(135deg, #c19a6b, #8b4513) !important;
}

.sw-chevron {
    width: 16px;
    height: 16px;
    color: #ec4899;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sw-chevron svg {
    width: 100%;
    height: 100%;
}

/* ----- Рядок з input (відстань) ----- */
.sw-row-input {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 16px 16px 16px;
}

.sw-input-label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
    margin-bottom: 10px;
}

.sw-row-input input {
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #e0e0e6;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #050038;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease;
}

.sw-row-input input:focus {
    border-color: #ec4899;
}

/* Прибираємо стрілки number-input */
.sw-row-input input::-webkit-outer-spin-button,
.sw-row-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ----- Список текстур ----- */
.sw-texture-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sw-texture-row {
    margin-bottom: 8px;
}

.sw-texture-label {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid #f0f0f3;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.sw-texture-row.sw-texture-selected .sw-texture-label {
    background: #fce7f3;
    border-color: #ec4899;
}

.sw-texture-img {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    border: 1px solid #e8e8ed;
}

.sw-texture-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #050038;
}

.sw-texture-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    inset: 0;
    cursor: pointer;
    z-index: 2;
    margin: 0;
}

.sw-texture-radio {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s ease;
    background: #ffffff;
}

.sw-texture-row.sw-texture-selected .sw-texture-radio {
    border-color: #ec4899;
}

.sw-texture-row.sw-texture-selected .sw-texture-radio::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #ec4899;
}

/* ----- CTA Save button ----- */
.sw-save-btn {
    display: block;
    width: 100%;
    background: #050038;
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 15px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    margin: 0;                    /* було margin-top:18px — у footer відступи дає .modal-footer */
    text-align: center;
    box-sizing: border-box;
}

/* У підвалі модалки кнопка отримує відступи від .modal-footer */
#Modal .modal-footer .sw-save-btn {
    margin: 0 !important;
}

.sw-save-btn:hover {
    background: #1a0050;
    transform: translateY(-1px);
}

.sw-save-btn:active {
    transform: translateY(0);
}

/* ==================== PAINT WIZARD (modalpaint — CSS-only steps) ==================== */
/*
 *  Перетворює існуючий modalpaint у покрокове меню без переписування JS.
 *  Структура DOM:
 *     #ModalText
 *        > #paintmenu   (таб-перемикач = Step 1: 2 карточки)
 *        > .paint-back-btn  (видима лише в Step 2)
 *        > #paint_1     (Korpus list,  .hide за замовч.)
 *        > #paint_2     (Facade list,  .hide за замовч.)
 *        > #changePaint (Apply,  видима лише в Step 2)
 *
 *  Стани керуються через CSS :has() — без JS-класів на батьку.
 */

/* ===== STEP 1: картки "Korpusfarbe" / "Frontfarbe" ===== */

#ModalText #paintmenu {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 14px 8px 14px;
    margin: 0;
    width: auto;
    max-width: none;
    overflow: visible;
    max-width: 600px;
    margin: auto;
}

/* ВАЖЛИВО: старі .modalradiofilters мають width:31%, height:40px, label має фіксовану
   висоту 99% і display:block, span має рамку #204578, тощо. Перебиваємо через !important. */

#ModalText #paintmenu .modalradiofilters {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    position: relative;
}

#ModalText #paintmenu .modalradiofilters input[type="radio"] {
    display: block !important;     /* перебиває .modalradiofilters input { display:none } */
    position: absolute !important;
    opacity: 0 !important;
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}

#ModalText #paintmenu .modalradiofilters label {
    display: flex !important;      /* перебиває display:block */
    align-items: center;
    gap: 14px;
    background: #ffffff !important;
    border: 1px solid #ececf0 !important;
    border-radius: 14px;
    padding: 16px 16px 16px 18px !important;  /* перебиває padding:0 10px */
    cursor: pointer;
    transition: background 0.2s ease;
    font: inherit;
    text-align: left;
    width: 100% !important;
    height: auto !important;       /* перебиває height:99% */
    box-sizing: border-box;
    overflow: visible !important;  /* перебиває overflow:hidden */
}

#ModalText #paintmenu .modalradiofilters label:hover {
    background: #f9fafb !important;
}

#ModalText #paintmenu .modalradiofilters label > span {
    flex: 1;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #050038 !important;
    line-height: 1.3;
    /* перебиваємо старі стилі пілюлі */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
/*    background: transparent !important;*/
    text-align: left !important;
    display: block;
}

/* Кругла preview-іконка з поточним кольором (правіше тексту, перед chevron) */
#ModalText #paintmenu .modalradiofilters label > span.paint-tab-preview {
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    border: 1.5px solid #e0e0e6 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
    margin-left: auto !important;        /* притискає до правого краю */
    font-size: 0 !important;             /* приховуємо текст-наслідування */
    background-clip: padding-box !important;
}

/* При виборі табу — НЕ змінюємо вигляд картки (вона і так показує наступний крок).
   Перебиваємо старий :checked label span { background:#204578; color:#fff } */
#ModalText #paintmenu .modalradiofilters input[type="radio"]:checked + label span,
#ModalText #paintmenu .modalradiofilters input[type="radio"]:checked ~ label span {
    background: transparent !important;
    color: #050038 !important;
}

/* Іконки-куби для Korpus / Facade — inline SVG через background-image */
#ModalText #paintmenu .modalradiofilters label::before {
    content: '';
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Korpus icon — суцільний куб */
#ModalText #paintfilter_1 + label::before {
    background-image: url("data:image/svg+xml;utf8,<svg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M28.6362 8.63672L19.7271 13.7276V29.0004L28.6362 23.9094V8.63672Z' stroke='%23111537' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M28.6362 8.63636L15.2726 1L6.52259 6.09091L19.7271 13.7273L28.6362 8.63636Z' stroke='%23111537' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M3.36353 23.3636L16.7272 31V15.7273L3.52262 8.09091L3.36353 23.3636Z' stroke='%23585B73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-dasharray='4 4'/><path d='M10.0454 27.1816L10.0454 11.9089' stroke='%23585B73' stroke-width='2' stroke-linejoin='round' stroke-dasharray='4 4'/></svg>");
}

/* Facade icon — куб з фронтальною дверцею */
#ModalText #paintfilter_2 + label::before {
    background-image: url("data:image/svg+xml;utf8,<svg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M28.6362 8.63672L19.7271 13.7276V29.0004L28.6362 23.9094V8.63672Z' stroke='%23585B73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-dasharray='4 4'/><path d='M28.6362 8.63636L15.2726 1L6.52259 6.09091L19.7271 13.7273L28.6362 8.63636Z' stroke='%23585B73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-dasharray='4 4'/><path d='M3.36353 23.3636L16.7272 31V15.7273L3.52262 8.09091L3.36353 23.3636Z' stroke='%23111537' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M10.0454 27.1816L10.0454 11.9089' stroke='%23111537' stroke-width='2' stroke-linejoin='round'/></svg>");
}

/* Chevron справа на картці */
#ModalText #paintmenu .modalradiofilters label::after {
    content: '';
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23050038' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
}

/* ===== STEP 2: списки кольорів ===== */

#ModalText #paint_1,
#ModalText #paint_2 {
    padding: 0 14px 14px 14px;
    width: auto;
    max-width: none;
    max-width: 600px;
    margin: auto;
}

#ModalText #paint_1.hide,
#ModalText #paint_2.hide {
    display: none !important;
}

/* Кнопки Step 2 перефарбування: [Abbrechen] [Übernehmen] — у ПІДВАЛІ,
   у стилі футерної пігулки #changePaint. За замовч. (Step 1) приховані. */
.paint-step2-actions {
    display: none;
    gap: 10px;
    width: 100%;
}
.paint-step2-btn {
    flex: 1;
    box-sizing: border-box;
    border: none;
    border-radius: 999px;
    padding: 15px 24px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
/* Übernehmen — як #changePaint (темно-синя пігулка) */
.paint-step2-apply {
    background: #050038;
    color: #ffffff;
}
.paint-step2-apply:hover {
    background: #1a0050;
}
/* Abbrechen — вторинна пігулка з чітким світлим фоном */
.paint-step2-cancel {
    background: #ededed;
    color: #050038;
}
.paint-step2-cancel:hover {
    background: #e0e0e0;
}

/* Legacy: заголовок Step 2 (.paint-step-title) перенесено у #ModalTitle.
   Залишаємо правило display:none на випадок якщо застарілий рендер ще десь є. */
#ModalText .paint-step-title {
    display: none !important;
}

/* Кожна картка кольору (.modalradiotextures.named) → рядок із прев'ю+назвою+radio
   ВАЖЛИВО: старі правила .modalradiotextures (width:87px, height:87px, .named:150px!important,
   img position:absolute, span position:absolute top:84px, input display:none) активно ламають
   layout — нижче перевизначаємо явно. */

#ModalText #paint_1 .modalradiotextures.named,
#ModalText #paint_2 .modalradiotextures.named {
    display: block !important;
    width: 100% !important;
    height: auto !important;     /* перебиває .named { height:150px !important } */
    margin: 0 0 8px 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    position: relative;
}

#ModalText #paint_1 .modalradiotextures.named input[type="radio"],
#ModalText #paint_2 .modalradiotextures.named input[type="radio"] {
    display: block !important;   /* перебиває .modalradiotextures input { display:none } */
    position: absolute !important;
    opacity: 0 !important;
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}

#ModalText #paint_1 .modalradiotextures.named label,
#ModalText #paint_2 .modalradiotextures.named label {
    display: flex !important;    /* перебиває .modalradiotextures label { display:block } */
    align-items: center;
    gap: 14px;
    padding: 10px 16px 10px 12px;
    background: #ffffff;
    border: 1px solid #f0f0f3;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    width: 100% !important;      /* перебиває label { width:79px } */
    height: auto !important;     /* перебиває label { height:79px } */
    box-sizing: border-box;
    margin: 0;
    overflow: visible !important;/* перебиває overflow:hidden */
}

/* Прев'ю текстури — повертаємо img у normal flow */
#ModalText #paint_1 .modalradiotextures.named label img,
#ModalText #paint_2 .modalradiotextures.named label img {
    position: static !important; /* перебиває position:absolute */
    top: auto !important;
    left: auto !important;
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;  /* перебиває max-width: unset */
    border-radius: 8px !important;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #e8e8ed !important;
    display: block;
    margin: 0;
}

/* Назва кольору — повертаємо span у normal flow */
#ModalText #paint_1 .modalradiotextures.named label span,
#ModalText #paint_2 .modalradiotextures.named label span {
    position: static !important; /* перебиває position:absolute */
    top: auto !important;
    left: auto !important;
    flex: 1;
    width: auto !important;      /* перебиває width:96% */
    max-width: none !important;  /* перебиває max-width:82px */
    font-size: 14px !important;
    font-weight: 600;
    color: #050038;
    text-align: left !important; /* перебиває text-align:center */
    padding: 0 !important;
    background: transparent !important;
    transition: color 0.2s ease;
}

/* Radio-кружечок справа */
#ModalText #paint_1 .modalradiotextures.named label::after,
#ModalText #paint_2 .modalradiotextures.named label::after {
    content: '';
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    flex-shrink: 0;
    background: #ffffff;
    transition: all 0.2s ease;
    position: relative;
}

/* Стан "вибрано" — рожевий акцент */
#ModalText #paint_1 .modalradiotextures.named input[type="radio"]:checked ~ label,
#ModalText #paint_2 .modalradiotextures.named input[type="radio"]:checked ~ label,
#ModalText #paint_1 .modalradiotextures.named input[type="radio"]:checked + label,
#ModalText #paint_2 .modalradiotextures.named input[type="radio"]:checked + label {
    background: #fce7f3 !important;
    border-color: #ec4899 !important;
}

#ModalText #paint_1 .modalradiotextures.named input[type="radio"]:checked ~ label img,
#ModalText #paint_2 .modalradiotextures.named input[type="radio"]:checked ~ label img,
#ModalText #paint_1 .modalradiotextures.named input[type="radio"]:checked + label img,
#ModalText #paint_2 .modalradiotextures.named input[type="radio"]:checked + label img {
    /* перебиває .modalradiotextures input:checked + label img { border:3px solid #fff; top:2px; left:2px } */
    border: 1px solid #e8e8ed !important;
    top: auto !important;
    left: auto !important;
}

#ModalText #paint_1 .modalradiotextures.named input[type="radio"]:checked ~ label span,
#ModalText #paint_2 .modalradiotextures.named input[type="radio"]:checked ~ label span,
#ModalText #paint_1 .modalradiotextures.named input[type="radio"]:checked + label span,
#ModalText #paint_2 .modalradiotextures.named input[type="radio"]:checked + label span {
    color: #ec4899 !important;
    font-weight: 700;
}

#ModalText #paint_1 .modalradiotextures.named input[type="radio"]:checked ~ label::after,
#ModalText #paint_2 .modalradiotextures.named input[type="radio"]:checked ~ label::after,
#ModalText #paint_1 .modalradiotextures.named input[type="radio"]:checked + label::after,
#ModalText #paint_2 .modalradiotextures.named input[type="radio"]:checked + label::after {
    border-color: #ec4899;
    background: radial-gradient(circle, #ec4899 0 5px, #ffffff 6px);
}

/* Ховаємо стару службову іконку <img class="paintico"> */
#ModalText #paint_1 .modalradiotextures:not(.named),
#ModalText #paint_2 .modalradiotextures:not(.named) {
    display: none !important;
}

/* Legacy: .paint-back-btn перенесено у #ModalTitle (як wizard-back-btn).
   Старе правило сховане для безпеки якщо застарілий рендер залишиться. */
#ModalText .paint-back-btn {
    display: none !important;
}

/* ===== Apply кнопка ===== */
#Modal #changePaint,
#ModalText #changePaint {
    display: block;           /* за замовч. ВИДИМО (Step 1) */
    width: 100% !important;   /* у footer відступи дає .modal-footer */
    /* перебиваємо старе margin-top:50px!important + прибираємо бічні відступи */
    margin: 0 !important;
    background: #050038;
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 15px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    box-sizing: border-box;
}

#Modal #changePaint:hover,
#ModalText #changePaint:hover {
    background: #1a0050;
}

/* ===================================================================
   :has() Реактивні правила — перемикач Step 1 ↔ Step 2
   =================================================================== */

/* Ховаємо кнопку "Menü schließen" (#modalclose) ЛИШЕ в меню перефарбування.
   Маркер — .paint-title-default у #ModalTitle (є тільки в modalpaint). Для інших
   меню кнопка лишається. Щоб повернути — просто видали/закоментуй це правило. */
#Modal:has(.paint-title-default) #modalclose {
    display: none !important;
}

/* Лише на ПЕРШОМУ екрані перефарбування (Step 1: обидві панелі приховані).
   Не притискаємо футер донизу (щоб не залежати від висоти екрана), а кладемо
   його одразу після табів із ВІДСТУПОМ ЗГОРИ — стабільно на будь-якому екрані.
   На Step 2 не діє. Щоб повернути звичайну поведінку — видали ці два правила. */
#Modal:has(.paint-title-default):not(:has(#paint_1:not(.hide))):not(:has(#paint_2:not(.hide))) #ModalText {
    flex: 0 0 auto !important;
}
#Modal:has(.paint-title-default):not(:has(#paint_1:not(.hide))):not(:has(#paint_2:not(.hide))) .modal-footer {
    margin: 32px auto 0 auto !important;   /* 32px — відступ згори (тюнінг тут) */
    padding-bottom: 12px;
}

/* Step 2 — будь-яка панель видима */
#ModalText:has(#paint_1:not(.hide)) #paintmenu,
#ModalText:has(#paint_2:not(.hide)) #paintmenu {
    display: none;
}

#ModalText:has(#paint_1:not(.hide)) #changePaint,
#ModalText:has(#paint_2:not(.hide)) #changePaint {
    display: none;            /* legacy: коли кнопка ще у #ModalText */
}

/* На Step 2 футер лишаємо видимим, але замість Apply (#changePaint)
   показуємо кнопки Übernehmen/Abbrechen. */
#Modal:has(#paint_1:not(.hide)) #changePaint,
#Modal:has(#paint_2:not(.hide)) #changePaint {
    display: none !important;
}
#Modal:has(#paint_1:not(.hide)) .paint-step2-actions,
#Modal:has(#paint_2:not(.hide)) .paint-step2-actions {
    display: flex;
}

/* ===== ModalTitle: 3 стани для paint-модалки =====
   За замовч. видимий .paint-title-default ("Farbe ändern").
   На Step 2 — ховаємо default, показуємо відповідний wizard-header
   (стиль як у buildmenu — back + title). */

/* Ховаємо дефолтний заголовок "Farbe ändern" (.paint-title-default) — раніше
   було інлайн style="display:none" у modalpaint. Елемент лишається в DOM (для
   :has()-маркера), лише прихований. Щоб повернути заголовок на Step 1 —
   видали/закоментуй це правило. */
#ModalTitle .paint-title-default {
    display: none;
}

/* Step 2 wizard-header'и сховані за замовч. */
#ModalTitle > .paint-wizard-korpus,
#ModalTitle > .paint-wizard-facade {
    display: none;
}

/* Step 2 — Korpus видима → ховаємо default, показуємо korpus wizard */
body:has(#ModalText #paint_1:not(.hide)) #ModalTitle .paint-title-default {
    display: none;
}
body:has(#ModalText #paint_1:not(.hide)) #ModalTitle > .paint-wizard-korpus {
    display: flex;
}

/* Step 2 — Facade видима */
body:has(#ModalText #paint_2:not(.hide)) #ModalTitle .paint-title-default {
    display: none;
}
body:has(#ModalText #paint_2:not(.hide)) #ModalTitle > .paint-wizard-facade {
    display: flex;
}

/* ==================== WIZARD STEP-BY-STEP MENU ==================== */

.wizard-step {
    padding: 4px 14px 24px 14px;
    color: #050038;
    font-family: 'Inter', sans-serif;
}
.wizard-step-categories{
    max-width:600px;
    margin:auto;
}
/* ----- Заголовок кроку 1 ----- */
.wizard-title {
    font-size: 22px;
    font-weight: 800;
    color: #050038;
    margin: 8px 0 18px 0;
    line-height: 1.2;
    letter-spacing: -0.2px;
}

/* ----- Шапка кроків 2 і 3 ----- */
.wizard-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0 14px 0;
    flex-wrap: nowrap;
}


.wizard-back-btn {
    background: transparent;
    border: none;
    color: #050038;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    font: inherit;
    margin-left: -6px;
}

.wizard-back-btn:hover {
    background: #f0f0f5;
}

.wizard-back-btn svg {
    width: 24px;
    height: 24px;
}

.wizard-back-placeholder {
    width: 4px;
    flex-shrink: 0;
}

.wizard-header-titles {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap;
    overflow: hidden;
}

/* Якщо у wizard-header-titles є onclick — підказуємо що клікабельне */
.wizard-header-titles[onclick] {
    cursor: pointer;
}

.wizard-header-title {
    font-size: 28px;
    font-weight: bold;
    color: #050038;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wizard-header-subtitle {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ============================================================
   КРОК 1: Картки серій
   ============================================================ */
.wizard-groups-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 600px;
    margin: auto;
}

.wizard-group-card {
    display: flex;
    flex-direction: column;
    background: #f5f5f7;
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 18px 18px 18px 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    gap: 14px;
    overflow: hidden;
}

.wizard-group-card:hover {
    background: #ecedf2;
    border-color: rgba(5, 0, 56, 0.08);
}

/* ----- Header: titles + chevron ----- */
.wizard-group-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.wizard-group-card-titles {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.wizard-group-card-title {
    font-size: 20px;
    font-weight: 800;
    color: #050038;
    line-height: 1.2;
    letter-spacing: -0.2px;
}

.wizard-group-card-subtitle {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
    margin-top: 2px;
}

.wizard-group-card .wizard-arrow {
    width: 20px;
    height: 20px;
    color: #050038;
    flex-shrink: 0;
    margin-top: 4px;
}

/* ----- Body: image + features ----- */
.wizard-group-card-body {
    display: flex;
    align-items: stretch;
    gap: 16px;
}

.wizard-group-card-image {
    width: 144px;
    min-width: 144px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    aspect-ratio: 4 / 4;
}

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

/* ----- Features list ----- */
.wizard-group-card-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    flex: 1;
    min-width: 0;
}

.wizard-feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #050038;
    font-weight: normal;
    line-height: 1.2;
    list-style: none;
    padding: 0;
}

.wizard-feature-item::before {
    content: none;
}

.wizard-feature-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #050038;
}

.wizard-feature-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.wizard-feature-text {
    flex: 1;
    min-width: 0;
    color: #050038;
}

/* ============================================================
   КРОК 2: Список категорій
   ============================================================ */
.wizard-categories-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.wizard-category-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 6px;
    cursor: pointer;
    border-bottom: 1px solid #ececf0;
    transition: background 0.2s ease;
    color: #050038;
    list-style: none;
}

.wizard-category-item:last-child {
    border-bottom: none;
}

.wizard-category-item:hover:not(.wizard-category-disabled) {
    background: #f9fafb;
}

.wizard-category-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #050038;
}

.wizard-category-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.wizard-category-name {
    flex: 1;
    font-size: 20px;
    font-weight: bold;
    color: #050038;
    line-height: 1.3;
}

.wizard-category-item .wizard-arrow {
    width: 18px;
    height: 18px;
    color: #050038;
    flex-shrink: 0;
}

/* Спецкатегорія "Set-Angebote" — рожевий акцент */
.wizard-category-special .wizard-category-name,
.wizard-category-special .wizard-category-icon,
.wizard-category-special .wizard-arrow {
    color: #ec4899;
}

/* Заблокована категорія */
.wizard-category-disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: not-allowed;
}

/* ============================================================
   КРОК 3: Список товарів
   ============================================================ */
.wizard-products-list {
display: flex;
    flex-direction: row;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}



/* ==================== HORIZONTAL PRODUCT CARD DESIGN ==================== */

.product-card-horizontal {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    background-color: #ffffff;
    border-radius: 12px;
    overflow: visible;
    position: relative;
    transition: all 0.3s ease;
   padding-bottom: 14px;
 /*    gap: 14px;*/
    color: #050038;
    width: 100%;
    box-sizing: border-box;
    align-items: stretch;
        max-width: 450px;
}

/* ===== LEFT SIDE - IMAGE ===== */
.product-card-horizontal .product-card-left {
    position: relative;
    width: 130px;
    min-width: 130px;
    max-width: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    flex-grow: 0;
}

.product-card-horizontal .product-image-container-h {
    width: 100%;
    height: 100%;
/*    display: flex;*/
    align-items: center;
    justify-content: center;
    min-height: 130px;
}

.product-card-horizontal .product-image-h {
    max-width: 100%;
    max-height: 140px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
    margin: 0 !important;
}

.product-card-horizontal:hover .product-image-h {
    transform: scale(1.03);
}

.product-card-horizontal .product-blank-icon-top {
    position: absolute;
    top: -4px;
    left: -4px;
    background-color: #f5f5f7;
    border-radius: 10px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    padding: 0;
    box-shadow: none;
}

.product-card-horizontal .product-blank-icon-top img {
    max-width: 24px;
    max-height: 24px;
}

.product-card-horizontal .product-icon-animated,
.product-card-horizontal .product-icon-single {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
}

.product-card-horizontal .product-icon-animated img,
.product-card-horizontal .product-icon-single img {
    max-width: 24px;
    max-height: 24px;
    object-fit: contain;
}

.product-card-horizontal .product-icon-animated img {
    position: absolute;
    animation: fadeIcon 4s infinite;
}

.product-card-horizontal .product-icon-secondary {
    animation-delay: 2s !important;
}

@keyframes fadeIcon {
    0% { opacity: 1; }
    45% { opacity: 1; }
    50% { opacity: 0; }
    95% { opacity: 0; }
    100% { opacity: 1; }
}

/* ===== RIGHT SIDE - CONTENT ===== */
.product-card-horizontal .product-card-right {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    z-index: 2;
}

.product-card-horizontal .product-name-h {
    margin: 0 0 2px 0;
    font-size: 16px;
    font-weight: 700;
    color: #050038;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0;
    width: auto;
    max-height: none;
}

.product-card-horizontal .product-size-h {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.product-card-horizontal .product-icon-size-h {
    flex-shrink: 0;
    color: #6b7280;
}

.product-card-horizontal .product-delivery-h {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 600;
    color: #43c405;
}

.product-card-horizontal .product-icon-delivery-h {
    flex-shrink: 0;
    color: #43c405;
    width: 18px;
    height: 18px;
}

.product-card-horizontal .product-delivery-text-h {
    white-space: nowrap;
}

.product-card-horizontal .product-price-h {
    font-size: 24px;
    font-weight: 700;
    color: #ec4899;
    display: flex;
    align-items: baseline;
    gap: 3px;
    margin-top: 2px;
    width: auto;
    padding: 0;
    position: static;
    text-align: left;
    bottom: auto;
}

.product-card-horizontal .product-price-h strong {
    font-size: 16px;
    font-weight: 700;
}

/* ===== FOOTER SECTION ===== */
.product-card-horizontal .product-footer-section {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
    flex-wrap: nowrap;
}

.product-card-horizontal .product-colors-h {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 1;
    min-width: 0;
}

.product-card-horizontal .product-color-swatches-h {
    display: flex;
    align-items: center;
    position: relative;
    flex-shrink: 0;
}

.product-card-horizontal .color-swatch-h {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
    display: inline-block;
    box-sizing: border-box;
}

.product-card-horizontal .color-swatch-h:not(:first-child) {
    margin-left: -15px;
}

.product-card-horizontal .color-swatch-h:hover {
    transform: scale(1.15) translateY(-2px);
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.product-card-horizontal .color-more-h {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-card-horizontal .product-info-button-h {
    flex-shrink: 0;
    background-color: #ededed;
    color: #050038;
    border: none;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    margin-left: auto;
    position: static;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
}

.product-card-horizontal .product-info-button-h:hover {
    border-color: #050038;
    background-color: #f9fafb;
    transform: none;
}

.product-card-horizontal .product-info-button-h svg {
    width: 25px;
    height: 25px;
}

.product-card-horizontal .product-color-button-h {
    flex-shrink: 0;
    background-color: #050038;
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 7px 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-family: inherit;
    line-height: 1;
}

.product-card-horizontal .product-color-button-h:hover {
    background-color: #1a0050;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(5, 0, 56, 0.25);
}

.product-card-horizontal .product-color-button-h svg {
    width: 28px;
    height: 28px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.product-card-horizontal .product-color-button-h:hover svg {
    transform: translateX(2px);
}

/* ===== CART BADGE ===== */
.product-card-horizontal .product-cart-badge-h {
    position: absolute;
    top: -3px;
    left: 95px;
    background-color: #ec4899;
    color: #ffffff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.3);
    z-index: 3;
}




#freeset_1_11 .product-price {
        bottom: 21px;
}
#freeset_2_11 .product-price {
        bottom: 21px;
}

.filters {
    display: flex;
    width: 100%;
    overflow: hidden;
    padding-bottom: 3px;
    flex-wrap: wrap;
}

.filter-btn {
    /* padding: 20px; */
    background-color: #f1f1f1;
    border: 1px solid #fff;
    border-radius: 10px;
    width: 32%;
    overflow: hidden;
    margin: 0px;
    font-size: 80%;
    height: 40px;

}

#placeForLink {
    margin-left: 60px;
}

.share-link-input {
    height: 23px;
    border-radius: 5px;
    font-size: 120%;
    vertical-align: bottom;
    display: inline-block;
    padding: unset;
    margin: unset;
    width: 150px;
    border: 2px solid #050038;
}

.btn-copy-link {
    background-image: url(/img/icons/copy.svg);
    cursor: pointer;
    height: 24px;
    width: 24px;
    background-size: cover;
    background-position: center;
    display: inline-block;
    margin-left: 10px;
}

.btn-mail-link {
    background-image: url(/img/icons/mail.svg);
    cursor: pointer;
    height: 24px;
    width: 24px;
    background-size: cover;
    background-position: center;
    display: inline-block;
    margin-left: 10px;
}

.btn-share-link {
    background-image: url(/img/icons/share.svg);
    cursor: pointer;
    height: 24px;
    width: 24px;
    background-size: cover;
    background-position: center;
    display: inline-block;
    margin-left: 10px;
}
.expert_settings{
    
        flex-wrap: wrap;
    position: relative;
    background-color: #ffffff;
    border: 1px solid #fff;
    border-radius: 10px;
    overflow: hidden;
    /*margin: 10px;*/
    display: flex;
    color: #050038;
    position: relative;
    min-height: 90px;
    min-width: 250px;
    max-width: 450px;
    padding-top: 3px;

}

   .menusets {
    display: table-row;
}

.menusets td {
    padding: 10px;
    cursor: pointer;
}

.menusets div {
    /*display: flex;*/
    align-items: center;
    gap: 10px; /* Відстань між зображенням і текстом */
}

.menusets img {
    width: 75px; /* Змінюй розмір за потреби */
    height: 75px;
    object-fit: cover; /* Забезпечує рівномірне заповнення */
    border-radius: 5px;
    border: 1px solid #ddd;
}

.menusets div {
    font-size: 11px;
    font-weight: bold;
    color: #333;
  /*  text-align: left;*/
}

.product .cart {
    position: absolute;
    top:0px;
    right:0px;
    height: 28px;
    width: 28px;
    background-image: url(/img/icons/cart.svg);    
    background-size: contain;
    
        
}

.product .info {
position: absolute;
    top: 0px;
    left: 0px;
    height: 16px;
    width: 16px;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    background-size: contain;
    color: #204578;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #204578;   
}
.product .info  a , .product .info  a:hover {
    color: #fff;text-decoration: none;
}

.product .cart  span {
    
    position: absolute;
    right: 6px;
    color: #fff;
    background-color: #55b65a;
    width: 12px;
    border-radius: 50%;
    display: block;
    height: 12px;
    text-align: center;
    font-size: 75%;
    
}


#stepfaq {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;

}

#step {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

#step_0 {
  grid-column: span 1;
  text-align: left;
  position: relative;
}

#step_0 .stepheader {
  font-size: 32px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  max-width: 100%;
  border-bottom:unset;
}

#step_0 .steptext {
  font-size: 12px;
  color: #204578;
  margin-bottom: 20px;
  font-weight: normal;
}

#step_0 .steptext p {
  margin: 5px 0;
}

#step_0 button {
  background-color: #ecab05;
  border: none;
  color: #fff;
  padding: 10px 50px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 20px;
  cursor: pointer;
    margin-top: 170px;
    width:100%;
}


  #step_0 img {
max-height: 157px;
    width: 100%;
    object-fit: cover;
    object-position: 0px -70px;
    position: absolute;
    bottom: 76px;
    right: 0px;
  }
  
  .faqheader{
       font-size: 32px;
  font-weight: bold;
  color: #333;
/*  margin-bottom: 10px;*/
  max-width: 100%;
  border-bottom:unset; 
  background-color: unset!important;
  padding: unset!important;
  margin-left: 15px;
  }



#step_1, #step_2, #step_3, #step_4, #step_5 {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.stepheader {
  font-size: 20px;
  font-weight: bold;
  color: #204578;
  margin-bottom: 15px;
      border-bottom: 2px solid #acbacd;
    padding-bottom: 6px;
}



.steptext {
  font-size: 12px;
  color: #404040;
  font-weight: bold;
}

.steptext ul {
  list-style-type: disc;
  padding-left: 20px;
  margin: 10px 0;
  font-weight: normal;
}

.steptext li {
  margin-bottom: 10px;
}

#faq {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 30px;
}

#faq > div {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
}

.faqq {
  font-size: 16px;
  font-weight: bold;
  color: #204578;
/*  margin-bottom: 10px;*/
    padding-right: 0px;
}


.faqq {
    display: flex;        /* Включає Flexbox-контейнер */
    align-items: center;  /* Вертикально центрує вміст та псевдоелемент */
    position: relative;   /* Батьківський елемент для абсолютного позиціювання псевдоелемента (якщо потрібно) */
    
}




.faqq:after {
    content: '+';
    position: absolute;
    right: 10px;
/*    position: absolute;
    right: 9px;*/
}

.active .faqq:after {
    content: "-";
}


.faqa {
  font-size: 14px;
  color: #666;
  display:none;
}

.active .faqa {
  font-size: 14px;
  color: #666;
  display:block;
}




@keyframes fadeIcon {
    0%, 45% { opacity: 1; }  /* Видима майже половину часу */
    50%, 95% { opacity: 0; } /* Невидима іншу половину */
    100% { opacity: 1; }
}

/* Додатково ваші анімації руху, якщо вони потрібні одночасно */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* ==================== CART MODAL (modalcart) — новий дизайн ====================
   Перевизначає стилі лише для карток ВСЕРЕДИНІ .products.incart (модалка кошика).
   НЕ ЧІПАЄ: .modal-header (шапка модалки) та .titlecartbuttons (верхня кнопка оформити).
   ============================================================================== */

/* ----- Розділ-заголовок "Genutzte Produkte" — поки що не показуємо у JS,
        але стилі готові на випадок майбутньої секції ----- */
#Modal .products.incart::before {
    content: "Genutzte Produkte";
    display: block;
    font-size: 17px;
    font-weight: 800;
    color: #050038;
    letter-spacing: -0.2px;
    margin: 6px 4px 14px 4px;
    line-height: 1.2;
}

/* ----- Контейнер списку карток ----- */
#Modal .products.incart {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    padding: 4px 4px 0 4px;
    max-width: none;
    max-width: 600px;
    margin: auto;
}

/* ----- Картка кошика (перевизначає .incart .product / .product) ----- */
#Modal .products.incart .product {
    display: grid !important;
    grid-template-columns: 100px 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "image  title"
        "image  meta"
        "image  bottom";
    gap: 4px 14px;
    padding: 16px 4px 16px 4px;
    border: none !important;
    border-bottom: 1px solid #ececf0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    height: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
    cursor: default !important;
    position: relative;
    overflow: visible !important;
}

#Modal .products.incart .product:last-of-type {
    border-bottom: none !important;
}

/* ----- Зображення товару (перевизначає .product-img) ----- */
#Modal .products.incart .product .product-img {
    grid-area: image;
    width: 100px !important;
    height: 100px !important;
    background: #f5f5f7;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    padding: 8px;
    box-sizing: border-box;
}

#Modal .products.incart .product .product-img img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    position: static !important;
    top: auto !important;
    left: auto !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

/* ----- Бейдж знижки "20 %" — як заглушка (немає даних → ховаємо) ----- */
#Modal .products.incart .product .product-img::before {
    content: "20 %";
    position: absolute;
    top: 6px;
    left: 6px;
    background: #ec4899;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 999px;
    z-index: 2;
    /* display:none — бо немає поля знижки в даних; вмикати лише за наявності */
    display: none;
}

/* ----- Назва товару (перевизначає .product-title) ----- */
#Modal .products.incart .product .product-title {
    grid-area: title;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #050038 !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

/* ----- Сіра пілюля "Standard" — заглушка (поки немає поля в даних → ховаємо) ----- */
#Modal .products.incart .product .product-title::after {
    content: "Standard";
    display: inline-block;
    margin-top: 6px;
    padding: 3px 12px;
    background: #f0f0f3;
    color: #050038;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    /* display:none — поки даних немає; вмикати після додавання поля */
    display: none;
}

/* ----- Блок мета-інформації (доставка + ціна) — переоформлюємо .product-price-cart ----- */
#Modal .products.incart .product .product-price-cart {
    grid-area: meta;
    position: static !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: inherit !important;
    text-align: left !important;
    bottom: auto !important;
    font-weight: normal !important;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

/* Старий курсивний блок з розміром + ready-time → стилізуємо як "Lieferzeitraum" */
#Modal .products.incart .product .product-price-cart i {
    position: static !important;
    width: auto !important;
    left: auto !important;
    top: auto !important;
    font-size: 12px !important;
    font-style: normal !important;
    color: #6b7280 !important;
    display: block;
    line-height: 1.4;
}

#Modal .products.incart .product .product-price-cart i u {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #43c405 !important;
    font-weight: 700;
    text-decoration: none !important;
    font-size: 13px;
    margin-top: 2px;
}

/* Іконка вантажівки перед "Lieferzeitraum" */
#Modal .products.incart .product .product-price-cart i u::before {
    content: "";
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2343c405' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='1' y='3' width='15' height='13'/><polygon points='16 8 20 8 23 11 23 16 16 16 16 8'/><circle cx='5.5' cy='18.5' r='2.5'/><circle cx='18.5' cy='18.5' r='2.5'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
}

/* Поточна ціна — крупна рожева */
#Modal .products.incart .product .product-price-cart .formprice.showcart {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #ec4899 !important;
    background: transparent !important;
    padding: 0 !important;
    position: static !important;
    line-height: 1.1;
    margin-top: 4px;
}

#Modal .products.incart .product .product-price-cart .formprice.showcart b {
    font-weight: 800;
}

/* ----- Нижня смуга: кількість + info-кнопка ----- */
#Modal .products.incart .product .countincart {
    grid-area: bottom;
    justify-self: start;
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    min-width: 56px;
    padding: 8px 18px !important;
    background: #f0f0f3 !important;
    color: #050038 !important;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    cursor: default;
    box-sizing: border-box;
    line-height: 1;
    margin-top: 6px;
}

/* Info-кнопка (i) — круглий outline (новий формат із SVG, як у renderProductCard) */
#Modal .products.incart .product > .product-info-button-h {
    grid-area: bottom;
    justify-self: end;
    align-self: center;
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 36px;
    height: 36px;
    border: 1.5px solid #d1d5db;
    border-radius: 50%;
    background: #ffffff !important;
    color: #050038;
    padding: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 6px 0 0 0;
    font-family: inherit;
}

#Modal .products.incart .product > .product-info-button-h:hover {
    border-color: #050038;
    background-color: #f9fafb !important;
    transform: none;
}

#Modal .products.incart .product > .product-info-button-h svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* ----- Підсумок "Bestellsumme" (тепер усередині .modal-footer) ----- */
#Modal .modal-footer .fullline.formprice,
#Modal .fullline.formprice {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    background: transparent !important;
    border: none !important;
    border-top: none !important;       /* був border-top — тепер його дає .modal-footer shadow */
    padding: 4px 4px 8px 4px !important;
    margin: 0 !important;
    color: #050038 !important;
    font-size: 14px;
    font-weight: 700;
    font-style: normal !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
}

/* Стара сумка-cart іконка біля суми — приховуємо (тепер вона лише в CTA-кнопці) */
#Modal .fullline.formprice > img {
    display: none !important;
}

/* Лейбл "Bestellsumme:" — зліва */
#Modal .fullline.formprice .cart-summ-label {
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 700;
    color: #050038;
    font-style: normal !important;
    background: transparent !important;
    padding: 0 !important;
    line-height: 1.2;
}

/* Сума "891,30 €" — справа, одним блоком (без розриву) */
#Modal .fullline.formprice .cart-summ-value {
    flex-shrink: 0;
    font-size: 20px;
    font-weight: 800;
    color: #050038;
    font-style: normal !important;
    background: transparent !important;
    padding: 0 !important;
    line-height: 1.1;
    white-space: nowrap;
    text-align: right;
}

#Modal .fullline.formprice .cart-summ-value b {
    font-weight: 800;
    font-size: 20px;
    color: #050038;
}

#Modal .fullline.formprice .cart-summ-value i {
    font-style: normal !important;
    font-weight: 800;
    font-size: 18px;
    color: #050038;
    margin-left: 2px;
}

/* ----- Примітка під сумою: "сума враховує кількість товарів" + число ----- */
#Modal .modal-footer .cart-summ-hint {
    padding: 0 4px 8px 4px;
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: #6b7280;
    font-style: normal;
}
#Modal .modal-footer .cart-summ-hint b {
    font-weight: 700;
    color: #050038;
}

/* ----- Примітка про доставку кількома посилками (у footer, завжди видима) ----- */
#Modal .modal-footer .cart-delivery-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px 0;
    padding: 10px 12px;
    background: #f5f6f8;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 500;
    color: #4b5563;
}
#Modal .modal-footer .cart-delivery-note svg {
    flex-shrink: 0;
    color: #050038;
}

/* ----- Нижня CTA-кнопка "Zum Warenkorb hinzufügen" / "Weiter" (тепер у .modal-footer) ----- */
#Modal .modal-footer button.apply.cart-cta-btn,
#Modal #ModalText button.apply.cart-cta-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100% !important;
    margin: 0 !important;              /* у footer відступи дає сам .modal-footer */
    padding: 16px 24px !important;
    background: #ec4899 !important;
    color: #111537 !important;
    border: none !important;
    border-radius: 999px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.25);
}

#Modal .modal-footer button.apply.cart-cta-btn:hover,
#Modal #ModalText button.apply.cart-cta-btn:hover {
    background: #db2777 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(236, 72, 153, 0.35);
}

/* Іконка сумки (btbuy.svg) — робимо її білою через filter */
#Modal #ModalText button.apply.cart-cta-btn .cart-cta-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: block;
    margin: 0;
/*    filter: brightness(0) invert(1);    робить будь-який колір SVG → білим */
}

#Modal #ModalText button.apply.cart-cta-btn > span {
    line-height: 1;
    color: #111537;
    font-weight: 700;
}

/* ----- Прибираємо стару червону "перекреслену лінію" .incart .disabled::after,
        що в новому дизайні замінено на сіру опасність. Можна керувати окремо. ----- */
#Modal .products.incart .disabled {
    opacity: 0.55 !important;
    filter: none !important;
}

#Modal .products.incart .disabled::after {
    display: none !important;
}

/* ----- Прибираємо стару обгортку #listarticles555 (зайвий wrapper) ----- */
#Modal #listarticles555 {
    width: 100%;
}


/* ==================== POPUP: Modul aus dem Set entfernen (modalDellFromSet) ====================
   Спрощена overlay-модалка (той самий #modal-form паттерн, id="modal-dell-set").
   Заголовок → "Achtung!" рожевим → опис сірим → 3 кнопки з іконками.
   ================================================================================ */

/* Контейнер контенту — padding нульовий, бо ми вже всередині .msf з власним padding */
.dell-set-wizard {
    padding: 0;
    color: #050038;
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
}

/* "Achtung!" — рожевий жирний */
.dell-set-warning {
    margin: 8px 0 12px 0;
    font-size: 24px;
    font-weight: 800;
    color: #ec4899;
    line-height: 1.2;
    letter-spacing: -0.2px;
}

/* Опис у сірому */
.dell-set-text {
    margin: -3px 0 24px 0;
    font-size: 14px;
    line-height: 1.5;
    color: #6b7280;
    font-weight: 400;
}

/* Базові стилі для всіх 3 кнопок */
.dell-set-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 20px;
    border-radius: 999px;
    border: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 10px;
    box-sizing: border-box;
    line-height: 1;
}

.dell-set-btn:last-of-type {
    margin-bottom: 0;
}

/* Контейнер SVG-іконки в кнопці */
.dell-set-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.dell-set-btn-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.dell-set-btn-label {
    line-height: 1;
}

/* 1) "Gesamtes Set entfernen" — світла кнопка з іконкою набору + рожевий X */
.dell-set-btn-secondary {
    background: #f0f0f3;
    color: #050038;
}

.dell-set-btn-secondary:hover {
    background: #e3e3e8;
    transform: translateY(-1px);
}

.dell-set-btn-secondary .dell-set-btn-icon {
    color: #050038;
}

/* 2) "Schrank entfernen" — темно-синя primary кнопка з білим смітником */
.dell-set-btn-primary {
    background: #050038;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(5, 0, 56, 0.18);
}

.dell-set-btn-primary:hover {
    background: #1a0050;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(5, 0, 56, 0.25);
}

.dell-set-btn-primary .dell-set-btn-icon {
    color: #ffffff;
}

/* 3) "Abbrechen" — текстова кнопка без обведення */
.dell-set-btn-link {
    background: transparent;
    color: #050038;
    font-weight: 700;
    padding: 12px 20px;
    margin-top: 6px;
    box-shadow: none;
}

.dell-set-btn-link:hover {
    background: #f9fafb;
    color: #050038;
    transform: none;
}


 /* Стилі для модального вікна та форми — новий дизайн (msf = ModalShareForm) */
 /* ---------- Overlay ---------- */
 /* #modal-dell-set — той самий overlay-паттерн (confirm-модалка dell-from-set) */
    #modal-form,
    #modal-dell-set {
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.45);
      z-index: 10000;
      font-family: 'Inter', sans-serif;
      color: #050038;
    }

    /* ---------- Container ---------- */
    #modal-container.msf {
      background: #ffffff;
      padding: 20px 22px 22px 22px;
      border-radius: 18px;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
      width: 92%;
      max-width: 420px;
      max-height: 92vh;
      overflow-y: auto;
      position: relative;
      box-sizing: border-box;
    }
    #modal-content {
      text-align: left;
    }

    /* ---------- Header (icon + title + close) ---------- */
    .msf-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }
    .msf-header-icon {
      width: 22px;
      height: 22px;
      color: #050038;
      flex-shrink: 0;
    }

    /* Обгортка з 3 іконками (shareMail / specialOffer / subscribe).
       Видимою лишається лише та, що відповідає data-form атрибуту. */
    .msf-header-icon-wrapper {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
      color: #050038;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .msf-header-icon-wrapper .msf-icon {
      display: none;
      width: 100%;
      height: 100%;
    }

    .msf-header-icon-wrapper .msf-icon-svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    /* Показ потрібної іконки за data-form */
    .msf-header-icon-wrapper[data-form="shareMail"] .msf-icon-shareMail,
    .msf-header-icon-wrapper[data-form="specialOffer"] .msf-icon-specialOffer,
    .msf-header-icon-wrapper[data-form="subscribe"] .msf-icon-subscribe {
      display: block;
    }
    .msf-title {
      flex: 1;
      margin: 0;
      font-size: 17px;
      font-weight: 800;
      color: #050038;
      line-height: 1.2;
      letter-spacing: -0.2px;
    }
    .msf-close {
      background: transparent;
      border: none;
      color: #050038;
      cursor: pointer;
      padding: 4px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background 0.2s ease;
    }
    .msf-close:hover {
      background: #f0f0f5;
    }
    .msf-close svg {
      width: 18px;
      height: 18px;
      display: block;
    }

    /* ---------- Description text ---------- */
    .msf-text, #form-text {
      color: #050038;
      font-size: 14px;
      line-height: 1.45;
      margin: 0 0 20px 0;
      text-align: left;
      font-weight: 400;
    }
    /* ---------- Description text ---------- */
    .msf-bold-text {
      color: #050038;
      font-size: 16px;
      line-height: 1.45;
      margin: 0 0 20px 0;
      text-align: left;
       font-weight: 800;
    }    
    

    /* ---------- Tabs (для type=2) ---------- */
    .msf-tabs {
      display: flex;
      gap: 8px;
      margin: 0 0 14px 0;
      flex-wrap: wrap;
    }
    .msf-tabs button {
      flex: 1;
      min-width: 100px;
      padding: 10px 16px;
      border-radius: 999px;
      border: 1.5px solid #050038;
      background: #ffffff;
      color: #050038;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.2s ease;
    }
    .msf-tabs button.active {
      background: #050038;
      color: #ffffff;
    }
    .msf-tabs button:hover:not(.active) {
      background: #f9fafb;
    }

    /* ---------- Feedback fields ---------- */
    #save-feedback-fields {
      color: #6b7280;
      font-size: 13px;
      margin: 0 0 12px 0;
      text-align: left;
    }
    #save-feedback-fields span,
    #save-feedback-fields a {
      display: block;
      width: 100%;
      text-align: left;
    }

    /* ---------- Form ---------- */
    .msf-form {
      display: flex;
      flex-direction: column;
      gap: 14px;
      border: none;
      padding: 0;
      background: transparent;
    }

    .msf-field {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .msf-label {
      font-size: 13px;
      font-weight: 600;
      color: #050038;
      text-align: left;
      line-height: 1.2;
      padding-left: 19px;
    }
    .msf-required {
      color: #ec4899;
      font-weight: 800;
      margin-left: 2px;
    }
    
   .msf .room-start-cta
    {
    margin-top: 20px;
    }
    /* ---------- Inputs ---------- */
    .msf-input,
    .msf-select,
    .msf-textarea {
      width: 100%;
      box-sizing: border-box;
      background: #ededed;
      border: 1.5px solid transparent;
      border-radius: 999px;
      padding: 14px 20px;
      font-size: 14px;
      font-weight: 500;
      color: #050038;
      font-family: inherit;
      outline: none;
      transition: border-color 0.2s ease, background 0.2s ease;
    }
    .msf-textarea {
      border-radius: 16px;
      min-height: 88px;
      resize: vertical;
      line-height: 1.4;
      padding: 14px 18px;
    }
    /* Кастомна стрілка для select — приховуємо нативну і рендеримо власну через SVG.
       Керуємо позицією через background-position, зсуваємо ліворуч від краю. */
    .msf-select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23050038' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
      background-repeat: no-repeat;
      background-position: right 20px center;   /* 20px від правого краю (зсунуто ліворуч) */
      background-size: 16px 16px;
      padding-right: 44px;                      /* залишаємо простір для стрілки */
    }
    /* Прибираємо стрілку у IE (для сумісності) */
    .msf-select::-ms-expand {
      display: none;
    }
    .msf-input::placeholder,
    .msf-textarea::placeholder {
      color: #9ca3af;
      font-weight: 400;
    }
    .msf-input:focus,
    .msf-select:focus,
    .msf-textarea:focus {
      background: #ffffff;
      border-color: #050038;
    }
    .msf-input:required:invalid:not(:placeholder-shown) {
      border-color: #ec4899;
    }

    /* ---------- Buttons ---------- */
    .msf-btn {
      width: 100%;
      box-sizing: border-box;
      padding: 15px 24px;
      border-radius: 999px;
      border: none;
      font-size: 14px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.2s ease;
      margin: 4px 0 0 0;
      line-height: 1;
    }
    .msf-btn-primary {
      background: #050038;
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(5, 0, 56, 0.18);
    }

    /* Multi-slot кнопка — 3 варіанти тексту+іконки (shareMail / specialOffer /
       subscribe), керовані через data-form (той самий паттерн, що
       .msf-header-icon-wrapper). Видимим лишається лише активний slot. */
    .msf-btn-multi {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .msf-btn-multi .msf-btn-slot {
      display: none;
      align-items: center;
      justify-content: center;
      gap: 8px;
      line-height: 1;
    }
    .msf-btn-multi[data-form="shareMail"]     .msf-btn-slot[data-slot="shareMail"],
    .msf-btn-multi[data-form="specialOffer"]  .msf-btn-slot[data-slot="specialOffer"],
    .msf-btn-multi[data-form="subscribe"]     .msf-btn-slot[data-slot="subscribe"] {
      display: inline-flex;
    }
    .msf-btn-multi .msf-btn-icon {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }
    .msf-btn-primary:hover {
      background: #1a0050;
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(5, 0, 56, 0.25);
    }
    .msf-btn-link {
      background: transparent;
      color: #050038;
      font-weight: 600;
      box-shadow: none;
    }
    .msf-btn-link:hover {
      background: #f9fafb;
    }

    /* ---------- *Pflichtfeld підказка ---------- */
    .msf-required-hint {
      text-align: center;
      color: #ec4899;
      font-size: 13px;
      font-weight: 700;
      margin: 12px 0 0 0;
    }

    /* ---------- Старі id-селектори перекриваємо (legacy) ---------- */
    #modal-container.msf #project-form input,
    #modal-container.msf #project-form textarea,
    #modal-container.msf #project-form select {
      width: 100%;
    }
    #modal-container.msf #submit-btn,
    #modal-container.msf #clear-btn {
      background: #111537;
      color: #fff;
      height: auto;
      width: 100%;
      border-radius: 999px;
    }

    @media (max-width: 600px) {
      #modal-container.msf {
        width: 100%;
        max-width: 100%;
        border-radius: 16px;
        padding: 18px 16px 18px 16px;
      }
    }
 
    
  .btnimgfirst{display:none;}
 .first .btnimgfirst{
     display: block;
    position: absolute;
    top: -59px;
    left: -4px;
    max-width: 112px;
    width: max-content;
    color: #111537;
    font-weight: bold;
    text-align: left;
 }
 .first .btnimgfirst span{
       background-color: #fff;
    padding: 5px;
    border-radius: 10px;     display: block;
 

 }
 
 .closeback{
    background-color: #ededed;
    display: flex;
    margin: auto;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding: 7px;
    gap: 10px;
    font-size: 16px;
    font-weight: bold;
    width: calc(100% - 16px);
    border-radius: 10px;
         
 }
 
@media (min-width: 900px) {
    .topmenu{}
    
    .topmenu .logobox{    left: 25px;}
    
    .topmenu .btnbox{ right: 25px;}
 
    .menu {background-color:unset;}
    .menu .btnblock{
            width: 60%;
    margin: auto;
    background-color:#ededed;
    }
    .wizard-products-list {gap: 64px;} 
    
}

/* ==================== LOGO ANIMATION (OK KITCHEN) ====================
   Inline SVG в .logobox містить:
     - 3 кольорові форми (.logo-animated-shape) — анімуються синхронно
     - 8 path-ів з fill="#111537" — статичний текст "KITCHEN"
   Цикл: 11600ms (3 переходи по 1200ms linear + 8000ms hold default).
   ====================================================================== */

:root {
    --logo-default-color:   #5AC8DC;   /* cyan (Default / Ending) */
    --logo-critical-color:  #FF3F96;   /* pink (critical) */
    --logo-positive-color:  #B9D53B;   /* lime (positive) */
    --logo-attention-color: #FDB924;   /* amber (attention) */
}

.logobox .logo-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.logo-animated-shape {
    fill: var(--logo-default-color);
    animation: logoColorCycle 11600ms linear infinite;
}

@keyframes logoColorCycle {
    /* 0–3600ms: 3 переходи по 1200ms — linear */
    0%      { fill: var(--logo-default-color);   }
    10.34%  { fill: var(--logo-critical-color);  }    /* +1200ms */
    20.69%  { fill: var(--logo-positive-color);  }    /* +2400ms */
    31.03%  { fill: var(--logo-attention-color); }    /* +3600ms */

    /* Easing: none — миттєвий snap назад до default */
    31.04%  { fill: var(--logo-default-color);   }

    /* Hold default 8000ms до кінця циклу */
    100%    { fill: var(--logo-default-color);   }
}

/* Accessibility: користувачі що не люблять анімацій */
@media (prefers-reduced-motion: reduce) {
    .logo-animated-shape {
        animation: none;
    }
}


.paint-title-default{ margin-left:14px;}


.pulse {
    background: #ff3f96;
    border-radius: 50%;
    height: 6px;
    width: 6px;

    box-shadow: 0 0 0 0 rgba(222, 84, 72, 1);
    transform: scale(1);
    animation: pulse 2s infinite;
    will-change: transform, box-shadow;
position: absolute;
    bottom: -38px;
    left: 24px;
}

/* ==================== FIRST-STEP HINT OVERLAY ====================
   Ефект з ескізу: після закриття modalRoomStart на 400ms fade-in
   темний overlay з "прожектором" на першу кнопку меню,
   тримається 1200ms → fade-out 400ms. Текст-підказка + рожевий пульс
   керуються існуючим класом .first (лишаються, поки inPlan < 1).
   =============================================================== */
#firstStepOverlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    pointer-events: none;
    /* Чітке коло-прожектор: різкий край між світлом і темрявою
       (перехід всього ~15px, не розмитий градієнт). */
    background: radial-gradient(
        circle at var(--hi-x, 50%) var(--hi-y, 90%),
        rgba(255, 255, 255, 0) 0px,
        rgba(255, 255, 255, 0) 24px,
        rgba(0, 0, 0, 0.92) 27px,
        rgba(0, 0, 0, 0.92) 100%
    );
    /* 400 in + 3600 hold + 400 out = 4400ms — довше тримаємо затемнення. */
    animation: firstStepOverlayCycle 4400ms cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

@keyframes firstStepOverlayCycle {
    0%     { opacity: 0; }
    9.09%  { opacity: 1; }   /* 400ms fadeIn */
    90.91% { opacity: 1; }   /* +3600ms hold */
    100%   { opacity: 0; }   /* 400ms fadeOut */
}

/* Меню лишається ПІД затемненням (прозоре коло overlay відкриває головну
   кнопку). Тому підказку moduls_first_info НЕ піднімаємо разом із меню, а
   дублюємо окремим білим елементом #firstStepHintClone поверх overlay (JS).
   Тут — його вигляд: білий текст без плашки + біла стрілка. */
#firstStepHintClone {
    display: block;
    position: fixed;
    z-index: 90;                 /* над overlay (z-index:80) */
    pointer-events: none;
    max-width: 112px;
    width: max-content;
    color: #ffffff;
    font-weight: bold;
    text-align: left;
    line-height: 1.2;
}
#firstStepHintClone span {
    display: block;
    background-color: transparent;
    color: #ffffff;
    padding: 6px 5px;
}
#firstStepHintClone svg path {
    stroke: #ffffff;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(222, 84, 72, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px rgba(222, 84, 72, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(222, 84, 72, 0);
    }
}

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

/* ==================== TOOLTIPS для кнопок меню (десктоп hover) ==================== */
/* Стилі активуються лише на пристроях з hover (десктоп/лаптоп з мишкою).
   Мобільні (touch) не показують — тап одразу викликає onclick. */

@media (hover: hover) {
    [data-tooltip] {
        position: relative;
    }

    [data-tooltip]:hover::after {
        content: attr(data-tooltip);
        position: absolute;
        background: #ffffff;
        color: #050038;
        font-size: 13px;
        font-weight: 600;
        padding: 10px 16px;
        border-radius: 18px;              /* м'які кути (не pill) для 2-рядкового тексту */
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
        pointer-events: none;
        z-index: 10000;
        animation: tooltipFadeIn 0.15s ease-out;
        font-family: 'Inter', sans-serif;
        line-height: 1.25;
        /* 2 рядки: max-width + auto-wrap */
        max-width: 140px;
        width: max-content;
        text-align: center;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Верхнє меню — tooltip З'являється ЗНИЗУ (щоб не виходив за екран зверху) */
    .topmenu [data-tooltip]:hover::after {
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 8px;
    }

    /* Нижнє меню — tooltip З'являється ЗВЕРХУ (бо кнопки внизу екрану) */
    .menu [data-tooltip]:hover::after {
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-bottom: 8px;
    }
}

@keyframes tooltipFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* ==================== MODAL FADE ANIMATIONS ==================== */
/* Універсальні fade-in при відкритті + fade-out через клас .modal-closing.
   Тайминг 220ms — sweet spot між плавністю і відчутною швидкістю. */

/* #modal-select-furn-overlay має власну inline-fade логіку (opacity+scale
   через transition) — не додаємо його сюди, щоб уникнути подвійного
   fade-in (CSS animation vs inline opacity=0→1). */
.modal,
#modal-form,
#modal-dell-set {
    animation: modalFadeIn 0.22s ease-out;
}

.modal-closing {
    animation: modalFadeOut 0.22s ease-out forwards !important;
    pointer-events: none;   /* блокуємо клацання під час зникнення */
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes modalFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* [TT 2026-09-16] Стільниці — попап вибору при додаванні (Фаза 2). Additive, ізольовані класи wtpopup-*. */
.wtpopup-overlay{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;background:rgba(5,0,56,.35);padding:16px;}
.wtpopup-box{background:#fff;border-radius:16px;max-width:440px;width:100%;padding:22px 22px 18px;box-shadow:0 20px 60px rgba(5,0,56,.25);}
.wtpopup-title{font-size:18px;font-weight:700;color:#050038;text-align:center;}
.wtpopup-desc{font-size:14px;color:#585b73;text-align:center;margin-top:6px;}
.wtpopup-colors{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:16px 0;}
.wtpopup-color{display:flex;flex-direction:column;align-items:center;gap:6px;width:96px;padding:8px;border:1px solid #ededed;border-radius:12px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s;}
.wtpopup-color:hover{border-color:#050038;box-shadow:0 4px 14px rgba(5,0,56,.12);}
.wtpopup-color-locked{width:auto;flex-direction:row;padding:10px 14px;}
.wtpopup-swatch{width:56px;height:40px;border-radius:8px;border:1px solid rgba(0,0,0,.1);background-size:cover;background-position:center;flex:none;}
.wtpopup-color-locked .wtpopup-swatch{width:44px;height:30px;}
.wtpopup-cname{font-size:12.5px;font-weight:600;color:#050038;text-align:center;}
.wtpopup-actions{display:flex;justify-content:center;margin-top:6px;}
.wtpopup-btn{font-size:14px;font-weight:600;padding:12px 22px;border-radius:999px;border:0;cursor:pointer;}
.wtpopup-without{background:#ededed;color:#050038;}
.wtpopup-without:hover{background:#e2e0ea;}
/* Фаза 3: область застосування + поточний колір */
.wtpopup-actions{gap:10px;flex-wrap:wrap;}
.wtpopup-actions-col{flex-direction:column;align-items:stretch;}
.wtpopup-actions-col .wtpopup-btn{width:100%;}
.wtpopup-primary{background:#050038;color:#fff;}
.wtpopup-primary:hover{background:#0d0a4d;}
.wtpopup-color-current{border-color:#050038;box-shadow:0 0 0 2px rgba(5,0,56,.15) inset;}
/* [/TT] */