/*@font-face {
    font-family: 'HelveticaNeueLTStd-Roman';
    src: url('/fonts/helveticaneueltw05-55roman.woff2') format('woff2'),
         url('/fonts/helveticaneueltw05-55roman.woff') format('woff'), 
         url('/fonts/helveticaneueltw05-55roman.ttf') format('truetype');
    font-weight: normal;
    font-display: swap;
}*/

@font-face {
    font-family: 'Google Sans';
    src: url('/fonts/GoogleSans-Variable.woff2') format('woff2-variations'),
         url('/fonts/GoogleSans-Variable.woff2') format('woff2'),
         url('/fonts/GoogleSans-Variable.woff') format('woff');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    size-adjust: 95%;
}

@font-face {
    font-family: 'HelveticaNeueLTStd-BdCn';
    src: url('/fonts/helveticaneueltw05-77boldcn.woff2') format('woff2'), 
         url('/fonts/helveticaneueltw05-77boldcn.woff') format('woff'), 
         url('/fonts/helveticaneueltw05-77boldcn.ttf') format('truetype');
    font-weight: bold;
    font-display: swap;
    ascent-override: 96.1%;
    descent-override: 22.4%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'HelveticaNeueLTStd-LtCn';
    src: url('/fonts/helveticaneueltw05-47ltcn.woff2') format('woff2'),
         url('/fonts/helveticaneueltw05-47ltcn.woff') format('woff'), 
         url('/fonts/helveticaneueltw05-47ltcn.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
}

@font-face {font-family: 'RobotoCondensed-Medium';src: url('fonts/RobotoCondensed-Medium.woff') format('woff'); font-display: optional;}

/* ======================================================= */
/* ФІРМОВІ КОЛЬОРИ — міняти тільки тут                     */
/* ======================================================= */
:root {
    --brand:       #1f839f;  /* основний: текст, рамки, кнопки */
    --brand-dark:  #17627f;  /* hover / активний стан / посилання */
    --brand-light: #f2f8fa;  /* світла підкладка */
    --red:         #ec1b24;  /* акції, ціни зі знижкою, оформлення замовлення */
    --red-dark:    #c6161b;  /* hover для червоних кнопок */
    --red-light:   #fde8e9;  /* світла червона підкладка (плашка знижки) */
    --hit:         #e67700;  /* мітка «Хіт продаж» */
    --ok:          #10b981;  /* успіх: товар додано, заявку надіслано */
}

html{width:100%;height:100%;}
body{margin:0;font:16px/19px 'Google Sans', arial,'Helvetica CY','Nimbus Sans L', Sans-serif;color:#595959;background:#fff}
body {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;}
::-webkit-scrollbar{width:11px;border-left:1px solid #ccc;background:#fff}
::-webkit-scrollbar-thumb{background-color:#b8c2c8}
::-webkit-scrollbar-thumb:hover{background-color:var(--brand)}
.fl{float:left}
.ar{text-align:right}
.fr{float:right}
.cl{clear:both}
.ac{text-align:center}
form{margin:0;padding:0}
input,select{outline:none;font:14px/17px 'Google Sans',arial,'Helvetica CY','Nimbus Sans L',Sans-serif}
textarea{outline:none;overflow:auto;resize:vertical;font:14px/17px 'Google Sans',arial,'Helvetica CY','Nimbus Sans L',Sans-serif}
a{outline:none;text-decoration:underline;color:var(--brand-dark);cursor:pointer}
a:hover{text-decoration:none}
p,div.par{margin:10px 0;}
div .par img {width:120px;}
img{border:0}
img[align=left]{margin:2px 10px 10px 0}
img[align=right]{margin:2px 0 10px 10px}
strong,.b{font-weight:normal;font-family:'HelveticaNeueLTStd-BdCn';}
.description strong,.description .b,.description b {  font-family: inherit;  font-weight: 600;}
div.title{width:100%;max-width:1600px;margin:0 auto}

.clear:after{content:'';display:block;clear:both;}

.sname{float:left;position:relative;padding:9px 0 10px 10px;width:80%;width:calc(100% - 210px)}
.sname:after{content:"Премиум-магазин Макита";display:block;position:absolute;top:11px;left:50%;z-index:1;}
.sname span{color:var(--red)}

.lang{float:right;margin:0}
.lang a,.lang span{display:inline-block;text-decoration:none;width:26px;height:38px;line-height:38px;font-size:14px;text-align:center;border-left:1px solid #ddd}
.lang a{color:var(--brand-dark)}
.lang span{color:#000}

.redline{background:#fff;font-size:15px;border-bottom:1px solid #d3d3d3;padding:10px 0;}
.logo{height:50px;float:left;/*text-align:center;*/width:14%;}

.menubar{float:left;}

.searchbar{float:right;width:25%;position:relative;max-width:350px;}
.searchbar form{border: 1px solid #d3d3d3;border-radius:25px;padding: 0;height: 45px;overflow: hidden;}
.searchbar div.fl{width:calc(100% - 45px);height: inherit;}
.searchbar div.fr{width:45px;}
.searchbar input[type=text]{border:0;background:transparent;color:#666;text-transform:uppercase;font-size:14px;box-sizing: border-box;height: inherit;padding-left:15px;}
.searchbar input[type=text]::-webkit-input-placeholder{color:#d3d3d3}
.searchbar input[type=text]::-moz-placeholder{color:#d3d3d3}
.searchbar input[type=text]:-ms-input-placeholder{color:#d3d3d3}
.searchbar input[type=text]:-moz-placeholder{color:#d3d3d3}
.searchbar button{cursor:pointer;height:45px;width: 100%;border:0;box-sizing: border-box;background:#fff url(files/search.svg) center no-repeat;background-size:17px;}
.searchbar button:hover{background-color:#eee;}

#searchresults{position:absolute;background:#fff;border:1px solid #ddd;left:0;right:0;top:60px;display:none;z-index:50;box-shadow:5px 5px 10px rgba(0,0,0,.25);overflow:auto;max-height:400px;}
#searchresults ul{margin:0;padding:0}
#searchresults ul li{margin:0;padding:0;list-style:none;border-top:1px solid #ddd}
#searchresults ul li:first-child{border-top:0}
#searchresults ul li a{display:block;padding:7px 15px;text-decoration:none}
#searchresults ul li a:hover{background:#eee}
#searchresults a span{color:#000;font-size:12px}

.blocks{float:right;margin:13px 14px 0 0;text-align:right}
.blocks a,.blocks span{display:inline-block;cursor:pointer;text-decoration:none;margin-left:25px;font-size:18px;color:#fff}
.blocks a:first-child,.blocks span:first-child{margin-left:0}

a.area, #ask{display: inline-block;padding:0;white-space: nowrap;}
a.area:before, #ask:before{width:14px;height:15px;background:url(files/user.svg) left center no-repeat;margin-right:4px;background-size: contain !important;content:'';vertical-align: middle;display: inline-block;}
#ask{cursor:pointer;color:#fff;}
#ask:before{background-image:url(files/comment.svg);}

span.area{cursor:pointer;color:var(--brand-dark);text-decoration:underline}

#favorites{width:42px;height:24px;background:url(files/favorites.gif) top right no-repeat;padding:12px 10px 0 0}

/* =========================================
   ВІДЦЕНТРОВАНИЙ ПІДВАЛ БЕЗ ЗАЙВИХ ВІДСТУПІВ
   ========================================= */

/* Збираємо колонки до купи в центрі екрана */
.title1 > .flex {
    display: flex !important;
    justify-content: center !important; 
    gap: 8% !important; /* Робимо однакові акуратні відступи між блоками */
    flex-wrap: wrap !important;
}

/* Налаштовуємо самі блоки і центруємо текст у них */
.title1 > .flex > .w33 {
    width: auto !important; /* Блок займає стільки місця, скільки тексту всередині */
    min-width: 220px !important;
    text-align: center !important; /* Робимо текст по центру */
}

/* Повертаємо нормальний міжрядковий інтервал (як було до моїх правок) */
.title1 > .flex > .w33 p {
    line-height: 1.3 !important; 
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

/* Телефони рівним стовпчиком, але впритул один до одного */
.title1 > .flex > .w33 .tel {
    display: block !important;
    margin-bottom: 2px !important; 
}

.forma{max-width:600px;margin:0 auto}

#callback{position:absolute;right:14px;bottom:-43px;z-index:2;background:url(files/callback.png) no-repeat;height:36px;cursor:pointer;color:var(--brand-dark);width:162px;font-size:13px;text-transform:uppercase;text-align:center;padding:10px 0}
#callback:hover{color:var(--red)}
.footer{margin-top:32px!important;color:#fff;background:#2a2d30;padding:25px 0 0;}
.title1{max-width:1200px;width:96%;margin:0 auto}
.footer .b{text-transform: uppercase;font-size:20px;margin-bottom:23px !important;}
.footer a{color:#fff}
span.tel{display:block;}
.burka{text-align: center;padding: 25px 0;border-top: 1px solid #fff;margin: 20px auto 0;}
a.moidiller{text-transform: uppercase;text-decoration:none;display: inline-block;font-size:25px;line-height:1;}
a.moidiller:before, a.moidiller:after{content:'';vertical-align: bottom;width:25px;height:25px;background-repeat: no-repeat;background-size: contain;background-position: center;display: inline-block;}
a.moidiller:before{background-image:url(files/cart.svg);margin-right:10px;}
a.moidiller:after{background-image:url(files/poisk.svg);margin-left:10px;}
.social{width:180px;margin-left: auto !important;margin-right: auto !important;}
.social a{width:43px;height:43px;background-color:#b2b2b2;text-decoration:none;border-radius:100%;margin:4px;background-repeat: no-repeat;background-position: center;background-size:13px;transition: 0.3s;display: inline-block;}
.social a:hover{transform: rotate(360deg);background-color:#474747}

a.facebook{background-image:url(files/facebook.svg);}
.subscriber { margin:30px 0; background:var(--brand); padding:20px 0; width:100%; font-size:16px; }
.subscriber > .flex {display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap !important; gap: 20px;}

.subscriber > .flex > div:first-child { background:url(files/rss.svg) left center no-repeat; padding-left:110px; }
.subscriber > .flex > div:last-child { flex-shrink: 0; }
.subscriber a { text-decoration:none; background:#fff; padding:15px 20px; color:var(--brand); display: inline-block; text-transform: uppercase; border:2px solid #fff; }
.subscriber a:hover { background:none; color:#fff; }
a.pixel{background:url(files/pixel.gif) left center no-repeat;padding-left:22px}
.seo,.news{margin:25px auto;}
.news a.n{font-size:18px}
h1,h2,h3,h4{color:#595959;font-weight:normal;margin:15px 0}
h1{margin:25px 0;font-size:24px;font-family:'HelveticaNeueLTStd-BdCn';line-height:35px;color:var(--brand);}
h2{font-size:22px;line-height:22px;font-family: 'HelveticaNeueLTStd-BdCn';}
h3{font-size:19px;line-height:22px}
h4{font-size:17px;line-height:20px}

.line{height:6px;font-size:1px;background:url(files/kos-line.gif);width:100%}
.lmenu{float:left;width:250px;background:#F7F7F7;background:linear-gradient(to right,#F7F7F7,#fff,#F7F7F7)}
.ov{margin-bottom:5px;height:329px;overflow:hidden}
.lmenu ul{margin:0;padding:0}
.lmenu ul li{margin:0;padding:0;list-style:none;background:url(files/left-menu-r-line.gif) top repeat-x}
.lmenu ul li:first-child{background:none}
.lmenu ul li a{display:block;font-size:14px;font-family:'HelveticaNeueLTStd-BdCn';text-transform:uppercase;color:#333;background:url(files/menu-pointer.png) 95% 11px no-repeat;padding:11px 20px 11px 12px;text-decoration:none}
.lmenu ul li a span{color:#999}
.lmenu ul li a:hover,.lmenu ul li a.act{background-position:95% -89px;color:#fff;background-color:var(--brand-dark);background-color:linear-gradient(to right,var(--brand-dark),var(--brand),var(--brand-dark));background-image:url(files/menu-pointer.png);background-repeat:no-repeat}
.lmenu ul li a:hover span{color:#9cc}
.allcats{color:#fff!important;background:var(--red) url(files/allcategories.gif) 95% center no-repeat!important}
.topmenu{padding:11px 0;color:#fff;background:var(--brand);}
.topmenu ul{margin:0;padding:0;display:flex;align-items:center;flex-wrap:wrap}
.topmenu ul li{display:block;list-style:none;margin:0 15px 0 0;padding:0;font-size:13px}
.topmenu ul li a{color:#fff;text-decoration:none}
/*.topmenu span{font-family:'HelveticaNeueLTStd-BdCn'}*/
.topmenu ul li a:hover{color:#BBE4F0;}
.topmenu ul li:last-child{margin-right:0;}
.flex{display:flex;justify-content:space-between;flex-wrap:wrap;align-items: center;}
.w33{width:33%;}
/*
.slide{width:33%;margin:7px 0;background-size:cover !important;background-position:center !important;aspect-ratio:600 / 300;height:auto;box-sizing:border-box;position:relative}
.slide div{position:absolute;top:0;left:0;right:0;padding:20px 30px;z-index:1;background:rgba(0,0,0,.2);bottom:0;display:flex;align-items:bottom}
.slide p{font-size:150%; display: none !important;} 
*/

/* 1. Сам банер. Анімуємо ТІЛЬКИ розмір фону (background-size) */
.slide{width:33%;margin:7px 0;background-size:100% !important;background-position:center !important;aspect-ratio:600 / 300;height:auto;box-sizing:border-box;position:relative;transition:background-size .3s ease}

/* 2. Ефект зуму всередині контейнера */
.slide:hover{background-size:105% !important}

/* 3. Робимо блок з посиланням від адмінки "невидимим склом" на весь екран */

/* 4. Розтягуємо системне посилання на всю ширину і висоту */
/* Робимо блок з посиланням від адмінки "невидимим склом" точно по розміру */
.slide > div {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important; /* Вбиваємо старі зелені відступи */
    background: transparent !important;
    opacity: 0 !important;
    z-index: 10 !important;
    border: none !important;
    box-sizing: border-box !important;
}

/* Розтягуємо саме посилання всередині нього */
.slide > div a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
}

.slide > div p {
    display: none !important;

}

.btn{cursor:pointer;color:#fff;display:inline-block;text-transform:uppercase;padding:10px 20px;border:0;background:var(--red);transition:.2s}
.btn:hover{background:var(--brand-dark)}
.slider{float:left;width:716px;height:329px;position:relative;margin:0 5px 5px 0}

a.prev,a.next{display:inline-block;text-decoration:none;cursor:pointer;width:37px;height:37px;transition:.4s}
a.prev{background:url(files/slider.gif) 0 0 no-repeat}
a.prev:hover{background-position:0 -37px}
a.next{background:url(files/slider.gif) -37px 0 no-repeat}
a.next:hover{background-position:-37px -37px}

#index,#index li{margin:0;padding:0;list-style:none}
#index{position:absolute;bottom:14px;z-index:80;left:14px}
#index li{cursor:pointer;width:24px;height:24px;display:block;float:left;margin:0 5px;background:url(files/index.gif) -24px 0 no-repeat}
#index li.active{background-position:0 0}

.b1,.b2{float:left;width:50%}

.grad{background:url(files/bg-line.gif) top repeat-x;padding:35px 0 25px}
span.vkl,span.actvkl{display:inline-block;margin:0 30px 0 0;font-family:'HelveticaNeueLTStd-BdCn';font-size:21px;color:var(--brand);cursor:pointer;text-transform: uppercase;}
span.actvkl{text-decoration:none;color:#333;font-size:28px;cursor:auto}
.sld{width:100%;position:relative}
.sld .tovar{border:0;padding:10px 0;width:25%;}
.sld .tovar .tns{padding:0 15px;width:auto;}
.sld img{width:100%;height:auto;display:block}
.tovar{width:25%;float:left;position:relative;box-sizing: border-box;}
.tovar .tns{position:static;width:100%;overflow:hidden;z-index:50}
.metki{position: absolute;top:5px;left:15px;text-transform: uppercase;z-index:40;}
/*span.nove,span.xit,span.akcia {border: 1px solid #fff;}*/
span.nove{background-color: var(--brand);color: #fff;}
span.xit{background-color: var(--hit);color: #fff;}
span.akcia{background-color:var(--red);color: #fff;}
span.old{font-weight: 400;font-size: 12px;line-height: 19px;color: #666;text-decoration: line-through;width: auto;margin: 0 8px 4px 0; display: inline-block}
span.salelabel{white-space: nowrap;background-color: var(--red-light);font-size: 12px;border-radius: 5px;padding: 2px 6px;text-align: center;display: inline-block;color:var(--red);}
.metki{display:flex;flex-wrap:wrap;gap:6px;}
.metki span{font-family:'HelveticaNeueLTStd-BdCn',sans-serif;font-size:12px;line-height:1;height:20px;padding:0 7px;letter-spacing:.5px;border-radius:2px;margin:0;white-space:nowrap;align-items:center;}
.opis{margin-top:15px;padding:0 15px 15px}
.tns span.f{display:flex;text-align:center;margin-bottom:10px;align-items:center;height:190px}
.tns span.f img{display:block;margin:0 auto;width:auto;height:auto;max-width:100%;max-height:100%}
.tns a{display:block;color:#595959;text-decoration:none;line-height: 1.2;font-size: 14px;min-height:250px;}
.tns a span.b{text-transform: uppercase;font-size:18px;line-height:1.3;color: var(--brand); font-family: 'HelveticaNeueLTStd-BdCn';}
.tns a:hover{color:var(--brand);}
.rkk h1{color:#595959;line-height:1.1;margin-bottom:0;}
.product-number{line-height:1.1;color:var(--brand);font-size:28px;font-weight: bold;}
.pravo > .flex{
    justify-content: flex-start;
}
span.little{font-size:15px}
.product-block {
    max-width: 600px;
    box-sizing: border-box;
}
.product-block span.salelabel, .product-block span.old{font-size:16px;}
hr{background:#f6f6f6;font-size:1px;height:1px;border:0;width:100%;margin:15px 0;}
div.price{margin:12px 0;text-align:center;font-size:30px;color:#000;font-family:'Google Sans'}
div.price sup{font-size:14px;color:#595959 !important;vertical-align: baseline;}
/*.buttons span{
    display: inline-block;
    width: 40px;
    height: 40px;
    cursor: pointer;
    color: #1F839F;
    border: 0;
    border-radius: 5px;
    background: #f8f8f8 url(files/cart-shopping-solid.svg) center no-repeat;
    background-size:20px;
}
 .buttons span:hover {
    background-image: url('files/cart-shopping-solid-hov.svg');
  }

/*span.addtocard{background:url(files/buttons.png) 0 0 no-repeat}
span.addtocard:hover{background-position:0 -40px}*/
span.favorites{background:url(files/buttons.png) -40px 0 no-repeat}
span.favorites:hover{background-position:-40px -40px}
.pnp{border:1px solid #ccc;color:#333;padding:4px 0;width:100%}
span.close{background:url(files/close.png) no-repeat;width:28px;height:28px;display:block;text-decoration:none;cursor:pointer;transition:.5s}
span.close:hover{transition:.5s;-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}
input.button{color:#fff;border:0;background:var(--red);text-transform:uppercase;cursor:pointer;height:30px;padding:0 15px}
input.button:hover{background:var(--brand)}
#trans{bottom:0;top:0;left:0;width:100%;background:#000;opacity:.4;position:fixed;z-index:11145}

span.allcats{display:block;padding:10px 0 10px 15px;cursor:pointer}

.path{color:#999;margin:15px 0;}
.path a{color:#999;text-decoration:none}
.path a:hover{color:#333;}
.path ol{margin:0;padding:0;font-size: 14px;}
.path ol li{margin:0;padding:0;list-style:none;display:inline}

.path ol li a:after, .path ol li:first-child a:before{content:'';display: inline-block;height:12px;width:12px;background:url(files/right.svg) center no-repeat;background-size: contain;margin:0 4px;}

.path ol li:first-child a:before{background-image:url(files/house.svg);}
h1 sup{color:#999;font-size:18px}

.bottomms{margin:20px 0}
.bottomms a,.bottomms span{display:inline-block;text-decoration:none;font-size:16px;line-height:40px;height:40px;width:40px;text-align:center}
.bottomms a{color: #ffffff; border: 1px solid var(--brand); background-color: var(--brand); margin-right: 5px;margin-bottom: 5px;}
.bottomms a:hover {color: var(--brand); background: #fff; cursor: pointer; transition: all 0.4s ease;}
.bottomms span{color: var(--brand-dark); border: 1px solid var(--brand-dark); margin-right: 5px;}

div.filter1{ padding: 20px;
    border-bottom: 1px solid #d9d9d9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease;
    margin-bottom: 20px;}
div.filter1 big, div.moka, div.mokaact{color:#595959;display:block;font-size:16px !important;margin-bottom:0;line-height:1.2 !important}
#container{width:100%}
#container input[type=text]{background:#ECECEC;text-align:center;padding:4px 0;width:55px;border:0;border-top:1px solid #c9c9c9;border-left:1px solid #c9c9c9}

/* Базовий стиль для посилання-фільтра */
.soso, .soso_act {
    position: relative;
    padding: 6px 0 6px 35px; 
    display: block;
    text-decoration: none;
}
a.soso {
    color: #595959 !important; /* Сірий колір для неактивного тексту */
    text-decoration: none;     /* Прибираємо підкреслення, якщо воно є */
}
.soso::before, .soso_act::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid #595959;
    background: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* Стиль  для активного фільтра */
.soso_act::before {
    content: "✔";  
    border-color: var(--brand); 
    background: var(--brand);
    color: white;
    font-size: 14px;
}

.soso_act {
    color: var(--brand) !important;
}

/*.bgs{padding:20px 0;}
.vkladki{margin:20px 0 0;background:#fff;border-bottom: 10px solid #1f839f;}
.vkladki span{display:block;cursor:pointer;text-transform:uppercase;text-decoration:none;color:#595959;font-size:17px;padding:20px 5px;transition:0.2s;border-left:1px solid #fff;font-family: 'HelveticaNeueLTStd-BdCn';}
.vkladki span.act, .vkladki span:hover{color:#fff;background:#1f839f;} */
/* ======================================================= */
/* ВКЛАДКИ ДЛЯ КОМП'ЮТЕРА (В СТИЛІ ОФІЦІЙНОГО САЙТУ)       */
/* ======================================================= */
.vkladki {
    margin: 30px 0 0;
    background: #fff;
}

/* Контейнер: центруємо вкладки */
.vkladki .title1 {
    display: flex;
    justify-content: center; /* Розміщуємо по центру */
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
    gap: 40px; /* Відстань між вкладками */
    padding: 20px;
}

/* Самі вкладки: чистий текст */
.vkladki span {
    flex: none;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    text-transform: none;
    text-decoration: none;
    color: #595959;
    font-size: 18px;
    padding: 15px 0 1px 0; /* ТУТ МАГІЯ: 5px знизу підтягнуть лінію вгору */
    margin-bottom: 0; /* Прибрали старе зміщення */
    transition: 0.2s;
    border-bottom: 3px solid transparent;
    font-family: 'HelveticaNeueLTStd-BdCn', sans-serif;
}

/* АКТИВНА ВКЛАДКА ТА НАВЕДЕННЯ (Як на оф. сайті) */
.vkladki span.act, 
.vkladki span:hover {
    background: transparent; /* ПРИБИРАЄМО СИНІЙ ФОН */
    border-bottom: 3px solid var(--brand); /* Бірюзове підкреслення */
}
/* ======================================================= */
/* ПРИЛИПАЮЧІ ВКЛАДКИ ПРИ СКРОЛІ ДЛЯ ПК (#sckscroll)       */
/* ======================================================= */
#sckscroll {
    position: fixed !important;
    top: 71px !important; /*  Опускаємо вкладки під шапку  */
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.9) !important; 
    backdrop-filter: blur(5px) !important; 
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important; 
    z-index: 98 !important; 
    animation: slideDown 0.3s ease-in-out; 
}

/* Робимо меню трохи компактнішим, коли воно прилипло, щоб не закривало пів екрана */
#sckscroll span {
    padding: 5px 0 !important; /* Зменшені відступи */
    font-size: 18px !important; /* Трохи менший шрифт */
}

/* Анімація плавної появи */
@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* ======================================================= */
/* ЛИПКА ШАПКА САЙТУ (ГОЛОВНЕ МЕНЮ)  */                      

.redline {
    position: -webkit-sticky !important; 
    position: sticky !important;
    top: 0 !important; 
    z-index: 999 !important; 
    background: #ffffff !important; 
}

.lkk{width:48%;float:left}
.rkk{width:46%;float:right}
.yelo{padding:30px 0 10px 0;}
.yelo ul{margin:10px 0;padding:0;}
.yelo ul li{margin:12px 0;padding:0;list-style:none;font-size: 16px; padding-left:25px;}
.yelo ul li:before{content:"";display:block;float:left;margin:2px 10px 0 -25px;background:url(files/ok-circle.svg) 0 0 no-repeat;background-size:16px;width:16px;height:16px;}
.yelo img {width:120px;} 
.prod-logo {
    display: flex;
    justify-content: center; 
    align-items: center;     
    text-align: center;
}

.prod-logo img {
   width:auto !important; 
   height: 50px; 
   margin-right: 30px;
}

.yelo h2 {text-transform: uppercase;}
div[class*="roduct-description"]{padding:5px 15px 5px 0}
.thumbs{margin-top:5px;}

.mainfoto{position:relative;border: 1px solid #f6f6f6;margin-top:20px; height:374px;}
.mainfoto img{width:100%;max-height:374px; object-fit: contain;}
/*.noway{filter: grayscale(1);opacity: 0.7}*/
.cena{margin:13px 0;font-size:48px;font-family:"HelveticaNeueLTStd-BdCn";color:#262828;font-weight:600;}
.cena sup{font-size:14px;vertical-align: baseline;color: #666;text-transform: uppercase;letter-spacing:0px;}
.cena strike{font-style:normal;text-decoration:none;background:url(files/strike.png) center no-repeat;color:var(--red)}
.cena a{font-size:14px;font-family:'Google Sans'}
span.kod{color:#666;background:#E6E6E6;display:inline-block;padding:3px 7px;margin-right:20px}
.f18{font-size:18px}
/*span.buy{
    display: inline-block;
    padding: 12px 24px;
    background: linear-gradient(to bottom, #ff3333, #ec1b24);
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 20px;
    text-decoration: none;
}
span.buy:before{
    content:'';
    width:22px; 
    height:20px;
    background:url(files/cart-white.svg) left center no-repeat;
    background-size: contain;
    display: inline-block;
    margin-right:13px;
    vertical-align: middle;
}
span.buy:hover{background:linear-gradient(to top, #06768a, #2B9CC9)}*/

big, div.moka, div.mokaact{display:block;font-size:24px;line-height:26px;display:block;font-family:'HelveticaNeueLTStd-BdCn';color:#595959}

.gallery img{margin:20px}
#har{border-collapse:collapse;width:100%;max-width:100%;}
#har td{padding:15px 10px;border-bottom:1px solid #f6f6f6;}
#har tr td:nth-child(even){color:#000}
.ins{width:24%;margin:5px 0;border:1px solid #f6f6f6;box-sizing: border-box;}
.ins:hover{border-color:#ddd;}
.ins div{padding:10px 20px 20px;box-sizing:border-box}
/* Підписи плиток категорій — Light Condensed; поки він вантажиться — вузький Arial, а не Times */
.ins a{color:#595959;font-family:'HelveticaNeueLTStd-LtCn','Arial Narrow',Arial,sans-serif;text-decoration:none; letter-spacing: 0.5px; font-weight: 600;}
.ins a:hover{color:var(--brand);}
.ins img{max-width:100%;max-height:100%}

.ins span{
    position: relative;
    display:block;
    height:150px;
    width:100%;
    margin-bottom:15px;
}
.ins span img{
    left:50%;
    top:50%;
    display:block;
    width:auto;
    height:auto;
    position: absolute;
    z-index:1; 
    transform: translate(-50%,-50%);
}

.levo{float:left;width:270px;border:1px solid #f6f6f6;margin-top:30px;}
.levo ul, .levo ul li{margin:0;padding:0;list-style:none;}
.levo > ul{padding:15px;}
li.l1 > a{display:block;padding:9px 20px 9px 0;color:#595959;text-decoration:none;font-family:'HelveticaNeueLTStd-BdCn';text-transform: uppercase;border-top:1px solid #f6f6f6;background:url(files/down.svg) right center no-repeat;background-size:12px}
li.l1 > a:hover{color:var(--brand);}
.levo > ul > li.l1:first-child a{border-top:0;}

li.l2 > a{font-size: 14px; text-decoration:none;padding:3px 20px;background:url(files/down.svg) right center no-repeat;background-size:10px;display:block;color:#595959;}
li.l2 > a:hover{color:#000;}
li.l2 > a.act{background:none;color:var(--brand-dark)}

.pravo{float:right;width:calc(100% - 300px);}

.pravo .flex .ins{margin-right:1%}
.image{float:right;width:40%;text-align:center;position:relative}
.image img{width:100%;max-width:335px;margin-bottom:10px}
.image span{font-size:18px;font-family:'Google Sans';padding-left:27px;background:url(files/zoom.gif) left center no-repeat}
.image div{position:absolute;top:-75px;left:50%;margin-left:-50px;z-index:2;background:url(files/nove.png) 0 0 no-repeat;text-align:center;width:115px;height:33px;line-height:33px;background-size:100% 100%;opacity:1}
.image div a{text-decoration:none;color:#0db27a;font-size:12px;font-family:'HelveticaNeueLTStd-BdCn';display:inline-block;width:inherit;height:inherit}
.image div:hover{opacity:.7}
div.table{float:left;width:64%;margin-top:15px;height:510px;overflow-y:scroll}
div.table table{border-collapse:collapse;width:100%;max-width:100%;}
div.table table tr:first-child{background:#ebebeb}
div.table table tr td{color:#000; border-bottom:1px solid #ebebeb;padding:5px 0}
div.table table tr td:first-child{text-align:center}
div.table table tr:hover{background:#F3F3F3}
div.table a:hover{color:#000}

.pole{background:var(--red);background:linear-gradient(to right,var(--red),var(--brand-dark));padding:3px;width:auto}
.pole .w{background:#fff;text-align:center}
.pole .w a{color:#000;text-decoration:none;text-transform:uppercase;line-height:39px;display:inline-block;padding:0 1px}
.pole .w a:hover,.pole .w a.act{background:var(--red);color:#fff}
.pole .w input[type=text]{background:transparent;border:0;width:100%;color:#000;font-size:18px; text-align:center;line-height:34px}
.pole .w div.fl{width:75%}
.pole .w div.fr{width:25%}
.pole .w input[type=submit],.pole .w input[type=button]{background:var(--brand-dark);border:0;cursor:pointer;color:#fff;font-family:'Google Sans';text-align:center;height:39px;width:100%;font-size:18px}
.lnl{margin:18px 0;width:100%;font-size:1px;height:4px;background:#ececec}
ul.list{margin:0;padding:0}
ul.list li{margin:10px 0;float:left;padding:0;list-style:none;width:147px}
ul.list li a{background:url(files/li.gif) left center no-repeat;padding-left:20px;color:#000;text-decoration:none}
ul.list li a:hover{color:var(--red)}
.service{width:100%;margin:0 auto;height:185px;background:url(files/services.jpg) center no-repeat;background-size:cover;padding-top:90px;margin-top:20px}
.service h1{text-align:center;text-transform:uppercase;font-size:24px;color:var(--brand);font-family:'HelveticaNeueLTStd-BdCn';letter-spacing:20px;padding:24px 0;border-top:1px solid var(--red);border-bottom:1px solid var(--red)}
.form{width:100%;background:#E5E5E5 url(files/forma-fon.png) top repeat-x;padding:20px 0 10px;text-align:center;border-bottom:2px solid var(--red-dark)}
.form input{margin-left:22px;border:0;font-family:'Google Sans';font-size:18px;width:160px}
.form input[type=text]{border-bottom:3px solid #ccc;color:#333;background:transparent}
.form input[type=submit],.form input[type=button]{background:var(--red) url(files/redline-fon.gif) top repeat-x;color:#fff;cursor:pointer;height:33px}
.form input[type=submit]:hover,.form input[type=button]:hover{background:var(--brand-dark)}
span.remont{cursor:pointer;color:#fff;font-size:19px;width:308px;padding-top:12px;text-align:center;height:51px;background:url(files/bfn.png) 0 0 no-repeat;display:inline-block;font-family:'Google Sans'}
#serviceslist ul{margin:0 0 14px;padding:0}
#serviceslist ul li{margin:10px 0;padding:0;list-style:none;float:left;width:330px;font-family:'Google Sans'}
#serviceslist ul li a{background:url(files/pointer1.gif) left center no-repeat;padding-left:17px;font-size:16px}

.serv{color:#fff;font-family:'HelveticaNeueLTStd-BdCn';font-size:48px;letter-spacing:-3px;background:url(files/services1.jpg) center no-repeat;background-size:100% 100%;padding:30px 15px 30px 30px}
.serv ul{margin:0;padding:0}
.serv ul li{margin:10px 0;padding:0;list-style:none;padding-left:75px;line-height:40px}
.serv ul li:nth-child(1){background:url(files/i1.png) left center no-repeat}
.serv ul li:nth-child(2){background:url(files/i2.png) left center no-repeat}
.serv ul li:nth-child(3){background:url(files/i3.png) left center no-repeat}
.serv ul li:nth-child(4){background:url(files/i4.png) left center no-repeat}
.serv ul li:nth-child(5){background:url(files/i5.png) left center no-repeat}
.map{width:100%;position:relative;margin-top:15px}

.address{color:#fff;position:absolute;z-index:11;left:16%;top:50px;background:url(files/map-okno.png) 0 0 no-repeat;width:298px;height:237px;padding:20px}
.one{padding-top:0!important}
.one h1{padding-top:0}
.one h1 span{background:var(--brand);color:#fff;opacity:.85;padding:24px 0;display:block;margin-bottom:24px}
.padd_{padding:0 30px 30px}
.padd_ h1{font-family:'Google Sans';font-size:30px;text-align:center}
.blog{color:#535b64;float:left;min-height:500px;border-bottom:3px solid #ccc;width:31%;margin:0 20px 20px 0;width:calc(33.33% - 20px)}
.blog a{text-decoration:none;font-family:'HelveticaNeueLTStd-BdCn';text-transform:uppercase}
.blog img{width:100%;margin-top:10px}
.blog span{color:#aaacaf;font-size:12px}
span.h3{font-size:24px;display:block;margin:30px 0 10px;color:var(--brand);padding-bottom:10px;border-bottom:1px solid #e5e5e5;text-transform: uppercase;font-family: 'HelveticaNeueLTStd-BdCn'}
.vkladkios{text-align:center;margin:-20px 0 20px 0;}
.vkladkios span{display: inline-block;padding:10px 25px;margin:0 5px;background:#fff;text-transform: uppercase;color:#7c7c7c;border:1px solid #f6f6f6;border-top:0;cursor:pointer;font-sizE:16px;}
.vkladkios span.z, .vkladkios span:hover{color:#fff;background:var(--brand);}
/* .rcolumn{float:right;width:210px} 
.rcolumn span.h3{text-align:center}
ul.readmore{margin:0;padding:0}
ul.readmore:after{content:"";display:block;clear:both}
.readmore li{display:block;list-style:none;width:100%;margin:10px 0}
.readmore.in_row li{display:block;list-style:none;float:left;width:24%;margin:10px 15px 10px 0;width:calc(25% - 15px)}
ul.readmore li img{width:100%;margin-bottom:10px;height:auto} */

div.telefon{float:left;position:relative;font-size: 13px;color:#fff;}
div.telefon div.mi{cursor:pointer;background:url(files/phone-solid.svg) left center no-repeat;background-size:13px;padding:0 0 0 25px;white-space: nowrap}
div.teldropdown{position:absolute;z-index:90;background:var(--brand);top:20px;left:0;width:150px;display:none;}
div.telefon:hover div.teldropdown{display:block;}
div.teldropdown span{display:block;padding:10px;border-top:1px solid rgba(255,255,255,.15);}
div.teldropdown span:first-child{border-top:0;}
div.lkk{width:50%}
div.rkk{width:48%}
div.lkk ul.li{margin:10px 0;padding:0}
div.lkk ul.li li{background:url(files/li.gif) left center no-repeat;padding:0 0 0 30px;margin:8px 0;list-style:none}
div.lkk h2,div.lkk h3,div.rkk h2,div.rkk h3{font-family:'Google Sans'}
.lb{float:left;width:40%}

span[class^="levo"]{cursor:pointer;color:var(--red);text-transform:uppercase;font-family:'HelveticaNeueLTStd-BdCn';font-size:15px;padding:14px 0;display:block;border-bottom:1px solid #ccc}

.cena{line-height:1}

.title1{width:95%}

span.sname{padding-left:0}
.lmenu.ov + div{width:calc(100% - 280px)!important}
.ins img,.tovar img{width:auto;height:auto;margin:0 auto;display:block;}
.tovar img{max-width:90%}

.tovar div.price{text-align:left;font-size:26px;color:#2a2d30;font-family: 'HelveticaNeueLTStd-BdCn';}

.tovar .opis{clear:both;padding:0}

.tovar{width:24%;padding:10px 15px;border:1px solid #e7e7e7;box-sizing: border-box;margin-bottom:10px;}
.pravo .flex .tovar{margin-right:1%}
input[type="checkbox"] + label{font-size:14px!important}
.rkk .tovar{width:23%;width:calc(50% - 30px)}

.pir{background:#e8e8e8;color:#313846}
span.del{cursor:pointer;color:#fff;padding:3px;display:inline-block;background:var(--red)}
#window1{left:50%;transform:translateX(-50%);position:fixed;z-index:255;background:#fff;transition:.5s;max-width:605px;width:100%;box-shadow:0 0 50px rgba(0,0,0,.5)}
.closelabel{background:url(files/close.png) center no-repeat;transition:.2s;color:#fff;width:40px;height:40px;cursor:pointer;float:right}
.closelabel:hover{transform:rotate(90deg)}
#window1 div.table{width:100%;height:auto;border:0;float:none;margin-top:0;display:table}
.mx{max-height:165px;overflow-y:auto}
.tr{display:table-row}
.td{display:table-cell;padding:6px 10px 6px 0}
.bob{text-align:center;border:1px solid #ccc;width:35px;padding:5px 0}

.yes{color:#01A868;border:3px solid #01A868;padding:15px 20px;margin:20px 0;font-family:'HelveticaNeueLTStd-BdCn';font-size:120%}

.tabs{margin-bottom:40px;margin-top:10px;border-bottom: 1px solid #e5e5e5;padding-bottom: 10px;}
#nav, #nav ul{list-style: none;margin:0;padding:0;width:100%;}
#nav li {position:relative;background:none;margin:0;padding:0;float:left;}
#nav > li > a:hover {color:#000;}
#nav > li > a{font-family:'HelveticaNeueLTStd-BdCn';color:#595959;text-transform: uppercase;padding:0 15px;text-decoration:none;line-height:50px;font-size:20px;display:block;}
#nav a span{color:#99cccc;}
#nav a.act{color:#000 !important;background:#fff !important;}
#nav li:hover, #nav li.jshover{color:#000 !important;background:#fff !important;}

#nav > li > ul {
margin:0 !important;
z-index:1000;
display: none;
position: absolute;
}

#nav > li > ul > li p{margin:4px 0;}
#nav > li > ul > li:hover{background:none !important;}
#nav > li > ul > li > a.bit {
  width: 95% !important;
  background: none;
  display:block;
  padding:6px 0 !important;
  font-size:18px;
  text-transform: uppercase;
  color: #595959;
  line-height:1.15;
  text-decoration:none;
  letter-spacing: 0 !important;
  font-family:'HelveticaNeueLTStd-BdCn';
}
.rel{position: relative;}
#nav > li > ul > li > a.bit:hover{color:var(--brand) !important;}

#nav > li:hover > ul,
#nav > li.jshover > ul {
  display: block;
}

a.vint{color: gray; text-decoration:none; text-transform: none;font-size:14px;}
a.vint:hover{color:var(--red);}
.nov{margin:20px 0;}
.nov a{text-decoration:none;}

.nov a:hover img{transform: scale(1.1);}

.nov .dt{color:#999;font-size:14px;display:block;margin:10px 0;}

.bars{display:none; background:url(files/bars.svg) left center no-repeat;cursor:pointer;float:left;background-size: contain;width:30px;height:50px;}
.mob{display:none;}
.zakr{cursor:pointer;background:url(files/x.svg) center no-repeat;display: inline-block;width:35px;height:35px;background-size: contain;margin:15px 15px 5px 0;}
.poisk{display:none;float:right;background:url(files/s.svg) center no-repeat;height:50px;width:30px;cursor:pointer;background-size: contain;}
div.foredit{text-align:center;cursor:pointer;padding:15px;color:#fff;background:#444;}
a.vort{text-decoration: none;color:var(--red);background:url(files/clear.gif) 10px center no-repeat;border:1px solid var(--red);border-radius:3px;padding:5px 8px 5px 25px;margin:4px 10px 4px 0;display: inline-block;}
a.vort:hover{border-color:#FFDEDE}

/* Базові стилі */
div.moka, div.mokaact {
    position: relative; 
    padding-right: 20px; 
    cursor: pointer; 

}

/* Стрілочка (SVG, яка спочатку дивиться вбік) */
div.moka:after, div.mokaact:after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    background: url(files/caret.svg) center right no-repeat;
    display: block;
    width: 10px;
    height: 20px;
    margin-top: -10px;
    z-index: 1;
    transition: 0.2s; /* Плавність повороту */
}

/* ЗАКРИТО: стрілка дивиться праворуч (0 градусів) */
div.moka:after {
    transform: rotate(0deg);
}

/* ВІДКРИТО: стрілка дивиться вниз (90 градусів) */
div.mokaact:after {
    transform: rotate(90deg);
}

/* ЛОГІКА ХОВАННЯ/ПОКАЗУ */
div.hidden {
    display: none; /* Завжди сховано */
    margin-top: 15px;
}

div.mokaact + div.hidden {
    display: block; /* Показуємо, тільки якщо заголовок має клас mokaact */
}

#sckscroll{
    margin:0;
    top:0;
    left:0;
    position: fixed;
    z-index:100;
    width:100%;
}

.tab_title {
    background: var(--brand);
    padding:25px 15px;
    text-align: center;
    position: relative;
    color:#fff;
    font-size: 2rem;
    line-height: 1.2;
    margin: 30px 0 0;
}
.getintouch{
    color: var(--brand);
    font-size: 1.875em;
    border-bottom: 2px solid #707070;
    padding-bottom: 12px;
    margin:20px 0;
}
.yelo table{
    max-width:700px;
    width:100%;
    border-collapse: collapse;
    table-layout:fixed;
}
@media screen and (max-width: 550px) {
    table-layout: auto;
}
.yelo table td{
    padding:10px;
    border-bottom: 1px solid #f6f6f6;
    font-size: 16px;
}
.yelo table tr:nth-child(odd) td{
    background: #f8f8f8;
}
.yelo table tr td:first-child{
    font-family:'Google Sans';
    font-weight: 600;
    font-size: 16px;
}
#sikvel {
    display: block;
    opacity: 0;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
}
.image .mousetrap{display:none !important;}
.image #wrap{
    position: static !important;
    margin: 0 !important;
    background:none !important;
    width: 100% !important;
    height: auto !important
}
.image #wrap a{color:var(--brand-dark) !important}
.image #wrap img{margin:0 auto 10px}

#verh{width:35px;height:35px;border-radius:100%;border:1px solid #fff;background:var(--brand) url(files/up-white.png) center no-repeat;background-size:16px !important;
cursor:pointer;position: fixed;z-index: 99;bottom: 25px;right: 25px;display:none}

div.glo{
    width:150px;
    height:100px;   
}
div.glo a{
        box-sizing: border-box;
    display: inline-block;
    border: 1px solid #eee;
    height: inherit;
    width: 93%;
    position: relative;
}
div.glo img{display: block; position: absolute; left:50%; top:50%; max-width:90%; max-height:90%; transform: translate(-50%,-50%); z-index:1; width:auto; height:auto;}
.flex.al{
    justify-content: flex-start;
}
.flex.al .tovar{margin-right:1%}
.komplektacia.flex{
    justify-content: flex-start;
    border:1px solid #e7e7e7;
    padding:20px;
}
.komplektacia .tovar{
    border:0;
    width: 20%;
    box-sizing: border-box;
    height: 220px;
    padding: 15px 30px;
}
.komplektacia .tns a span.b{color:var(--brand); font-family: 'HelveticaNeueLTStd-BdCn';}

.komplektacia .tovar::after {
    content: "+";
    position: absolute;
    top: calc(50% - 34px);
    right: -10px;
    transform: translateY(-50%);
    font-size: 30px;
    font-weight: 800;
    font-family: "HelveticaNeueLTStd-BdCn", monospace;
    color: var(--brand);
    z-index: 1;
    opacity: 0.6;
}
.komplektacia .tovar:last-child::after{display:none}
.komplektacia .tns span.f{height:130px;margin-bottom:15px;}

.komplektacia .tns > a {
    margin-bottom: 5px !important; 
}

.komplektacia .tns {
    overflow: visible !important; 
    padding-bottom: 10px !important; 
}
.komplektacia .tns .nm{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
 /* line-height: 1.4;
  /*min-height: 2.8em;   /* артикули стають в один рівень */
  white-space: pre-wrap;
}
/* коли .nm стає блоком, <br /> після нього дає зайвий порожній рядок */
.komplektacia .tns .nm + br{ display: none; }

/*меню*/
#nav > li > ul.submenu  {
    column-count: 4;
    column-gap: 0;
    column-fill: balance;
    width: 1150px;
    transition: all 0.3s ease-in-out;
    padding: 15px;
    border: 1px solid #d3d3d3;
    background: rgba(255,255,255,0.98);
    position: absolute; 
}

.nav_li {
    list-style: none;
    font-size: 16px;
    line-height: 1.3;
    width: calc(100% - 25px - 0.1px);
    border-bottom: 1px solid #d3d3d3;
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
    break-inside: avoid;         
        }

.nav_li a {
    text-decoration: none;
    color:#595959;
    text-transform: uppercase;
    font-size: 20px;
    line-height: 28px;
}

.nav_li a:hover {
    text-decoration: none;
    color: rgb(0, 121, 134);
}

 ul#nav>li > ul {
    -webkit-transition: all 0.15s ease-out 0s;
    -moz-transition: all 0.15s ease-out 0s;
    transition: all 0.15s ease-out 0s;

    left: -150px;
    top: 100%;
    z-index: 100;
    padding: 0;
    border: 1px solid #d3d3d3;
    background: #fff;
    width: 1000px;

}
.nav_li ul {
    -webkit-transition: all 0.15s ease-out 0s;
    -moz-transition: all 0.15s ease-out 0s;
    transition: all 0.15s ease-out 0s;
    left: 25px;
    top: 100%;
    z-index: 100;
    padding: 0;
    background: #fff;
    width: auto;
    border:none;   
}

.sub {
    display: block;
    background-color: beige;
    color: blue;
    list-style: none; 
    padding: 0; 
    break-inside: avoid;
}

.sub li {
    margin-bottom: 5px !important;
    float:none !important    
}

.sub li a {
    text-decoration: none; 
    color: inherit; 
}

ul.sub li a {
    color:rgb(85, 85, 85);
    font-size: 14px;
    text-transform: none;
    font-family: 'font2', sans-serif;
    line-height: 0.1;
    word-break: break-word;   
}
.tovar.compatible-devices, .tovar.optional-accessories, .tovar.base-model-links {width:19%;}

/* ********************************************************* */
/* ********************************************************* */
/* Стилізація кожного елемента списку                        */
/* ********************************************************* */
.maks li { padding: 4px 6px; font-size: 16px; line-height: 1.4; transition: background-color 0.2s ease; }
.maks li:hover { background-color: #eef3f7; }
.maks a { color: var(--brand); text-decoration: none; font-weight: 500; transition: color 0.2s ease; }
.maks a:hover { color: var(--brand-dark); text-decoration: underline; }

/* ********************************************************* */
/* Загальний контейнер слайдера                              */
/* ********************************************************* */
#slider-range { background: white !important; border: 1px solid #dcdcdc !important; height: 8px !important; border-radius: 4px !important; margin: 15px 5px !important; }
#slider-range .ui-slider-range { background: #e0e0e0 !important; }
#slider-range .ui-slider-handle { background: var(--brand) !important; border: none !important; width: 22px !important; height: 18px !important; top: -6px !important; border-radius: 4px !important; cursor: pointer !important; outline: none !important; }
#slider-range .ui-slider-handle:active, #slider-range .ui-slider-handle:focus { background: var(--brand-dark) !important; }

/* ========================================================= */
/* СТИЛІ ДЛЯ БЛОГУ (Картки + Сітка)                          */
/* ========================================================= 
.blog-section { max-width: 100%; margin: 0 auto 30px; font-family: inherit; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 20px; }
.blog-card { background: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid #f0f0f0; }
.blog-card:hover { transform: translateY(-5px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.blog-link { text-decoration: none !important; color: inherit !important; display: flex; flex-direction: column; height: 100%; }
.blog-image-wrapper { width: 100%; height: 220px; background-color: #ffffff; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #eeeeee; overflow: hidden; }
.blog-image-wrapper img { width: 80%; height: 80%; object-fit: contain; padding: 10px; transition: transform 0.3s ease; }
.blog-card:hover .blog-image-wrapper img { transform: scale(1.05); }
.blog-card-title { font-size: 14px; line-height: 1.4; color: #1f839f; padding: 10px; margin: 0; text-align: center; flex-grow: 1; }

@media (max-width: 768px) {
    .blog-grid { grid-template-columns: 1fr; gap: 15px; }
    .blog-link { flex-direction: row; align-items: center; }
    .blog-image-wrapper { width: 110px; height: 110px; flex-shrink: 0; border-bottom: none; border-right: 1px solid #eeeeee; padding: 5px; }
    .blog-card-title { text-align: left; padding: 10px 15px; font-size: 14px; }
}

/* ========================================================= */
/* СТИЛІ ДЛЯ 2-КОЛОНКОВОГО БЛОКУ НОВИН                       */
/* ========================================================= 
.nov { margin-bottom: 30px; }
.nov a { display: block; text-decoration: none; color: #1f839f; font-size: 14px; font-weight: bold; overflow: hidden; }
.nov .imagse { float: left; width: 130px; height: 130px; margin-right: 20px; display: flex; align-items: center; justify-content: center; background: #fff; }
.nov .imagse img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.3s ease; }
.nov a:hover .imagse img { transform: scale(1.05); }
.nov .nname { display: block; font-size: 17px; color: #595959; margin-bottom: 8px; margin-top: -3px; line-height: 1.3; transition: color 0.2s ease; }
.nov a:hover .nname { color: #1f839f; }
.nov .dt { display: block; font-size: 13px; color: #999; font-weight: normal; margin-bottom: 12px; }

/* ========================================================= */
/* ФІКСИ (Рівні картки та кошики)                            */
/* ========================================================= */
div.flex:has(> .tovar):not(.slick-track) { 
    display: flex !important; 
    flex-wrap: wrap !important; 
    align-items: stretch !important; 
}

/* Застосовуємо flex ТІЛЬКИ якщо елемент НЕ є частиною каруселі */
.tovar:not(.slick-slide) { 
    float: none !important; 
    display: flex !important; 
    flex-direction: column !important; 
}

.tovar:not(.slick-slide) .tns { 
    display: flex !important; 
    flex-direction: column !important; 
    flex-grow: 1 !important; 
    height: 100% !important; 
}
.tns > a { display: block !important; flex-grow: 1 !important; margin-bottom: 5px !important; }
.tns > .flex { display: flex !important; /*align-items: center !important;*/ justify-content: space-between !important; margin-top: auto !important; width: 100% !important; }
.tovar .metki { position: absolute !important; top: 5px !important; left: 15px !important; z-index: 60 !important; }
.metki span { display: inline-flex !important; align-items: center; flex-shrink: 0 !important; }
.tovar .tns { height: auto !important; }

/* Мітки на сторінці товару — стовпчиком, трохи більші, ніж у каталозі */
.mainfoto .metki {
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
    gap: 6px;
}
.mainfoto .metki span {
    font-size: 14px;
    height: 28px;
    padding: 0 10px;
    margin: 0;
}
/* ========================================================= */
/* БЕЗПЕЧНИЙ ФІКС: КРАСИВИЙ ЖИВИЙ ПОШУК                      */
/* ========================================================= */
/* 1. Основний контейнер: СУВОРО БІЛИЙ, ПОВЕРХ УСЬОГО */
#searchresults { 
    background: #ffffff !important; 
    border-radius: 8px !important; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important; 
    border: 1px solid #ddd !important; 
    margin-top: 5px !important; 
    z-index: 999999 !important; 
    position: absolute !important;

    /* Фіксуємо ширину і вирівнюємо по правому краю, щоб не вилазило за екран */
    width: 450px !important; 
    max-width: 95vw !important; /* Захист для мобільних екранів */
    right: 0 !important; 
    left: auto !important; 
}

/* Центрування плашки на дуже малих телефонах */
@media (max-width: 480px) {
    #searchresults {
        left: 5% !important;
        right: 5% !important;
        width: auto !important;
    }
}

/* 2. Список (Тут же вмикаємо прокрутку) */
#searchresults ul { 
    list-style: none !important; 
    margin: 0 !important; 
    padding: 0 !important; 
    background: #ffffff !important;
    max-height: 400px !important; 
    overflow-y: auto !important; 
    overflow-x: hidden !important; 
    overscroll-behavior: contain !important; /* Блокує прокрутку сайту, поки крутиш пошук */

    /* Сірий скролбар для Firefox */
    scrollbar-width: thin !important;
    scrollbar-color: #cccccc #f8f8f8 !important;
}

#searchresults li { 
    margin: 0 !important; 
    padding: 0 !important; 
    border-top: 1px solid #f2f2f2 !important; 
}

#searchresults li:first-child { border-top: none !important; }

/* 3. Посилання (рядок результату) */
#searchresults li a { 
    display: block !important; 
    padding: 12px 15px !important; 
    text-decoration: none !important; 
    background: #ffffff !important; 
    overflow: hidden !important; /* Очистка флоатів */
    transition: background 0.2s ease !important;
}

#searchresults li a:hover { 
    background-color: #f4f9fa !important; 
}

/* 4. Картинка (зліва) */
#searchresults li a img { 
    float: left !important; 
    width: 50px !important; 
    height: 50px !important; 
    object-fit: contain !important; 
    margin-right: 15px !important; 
    background: #fff !important; 
}

/* 5. ІНФОРМАЦІЙНИЙ БЛОК (права колонка тексту) */
#searchresults li a .info-cont { 
    display: block !important; 
    overflow: hidden !important; /* ЦЕ СТВОРЮЄ СТІНУ - текст ніколи не піде під фото */
    text-align: left !important;
}

/* Назва товару */
#searchresults li a .info-cont { 
    color: #333 !important; 
    font-size: 14px !important; 
    font-weight: 500 !important;
    line-height: 1.3 !important;
    margin-bottom: 5px !important;
}

/* 6. Рядок Код + Ціна */
#searchresults li a span { 
    display: flex !important; 
    justify-content: space-between !important; 
    align-items: center !important; 
    color: #888 !important; 
    font-size: 13px !important; 
    margin-top: 5px !important;
}
/* Перекреслена стара ціна в пошуку */
#searchresults li a span s {
    text-decoration: line-through !important;
    margin-right: 8px !important;
    color: #aaa !important;
    font-weight: normal !important;
}

/* Додаємо "грн" до перекресленої ціни */
#searchresults li a span s:after {
    content: " грн" !important;
    font-size: 11px !important;
    text-decoration: line-through !important; /* Щоб "грн" теж було перекреслене */
    display: inline-block !important;
}

/* Ціна */
#searchresults li a span b { 
    color: var(--brand) !important; 
    font-size: 15px !important; 
    font-weight: 700 !important; 
    white-space: nowrap !important; 
    margin-left: 10px !important;
}

/* ========================================= */
/* 7. СТИЛІЗАЦІЯ СІРОГО СКРОЛБАРУ (Chrome/Safari/Edge) */
/* ОБ'ЄДНАНІ СТИЛІ СКРОЛУ (Пошук + Таблиця запчастин) */

#searchresults ul::-webkit-scrollbar { 
    width: 6px !important; 
    height: 6px !important; 
}

#searchresults ul::-webkit-scrollbar-track { 
    background: #f8f8f8 !important; 
    border-radius: 8px !important;
}

#searchresults ul::-webkit-scrollbar-thumb { 
    background: #cccccc !important; 
    border-radius: 8px !important;
}

#searchresults ul::-webkit-scrollbar-thumb:hover { 
    background: var(--brand) !important; 
}
/* ========================================================= */
/* ВИРІВНЮВАННЯ ЦІНИ ТА КНОПКИ "КУПИТИ" В КАРТЦІ ТОВАРУ      */
/* ========================================================= */
.product-block .flex {
    align-items: center !important;
    margin: 10px 0 35px 0 !important; /* Задаємо відступ для всього рядка відразу */
}

.product-block .flex .cena {
    margin: 0 !important; /* Прибираємо індивідуальний відступ ціни */
    line-height: 1 !important;
    align-items: center !important;
}

.product-block .flex .par {
    margin: 0 !important; /* Прибираємо індивідуальний відступ кнопки */
}

/* ========================================= */
/* ВИРІВНЮВАННЯ КАРТОК КАТЕГОРІЙ             */
/* ========================================= */

/* 1. Рядок робимо гнучким і змушуємо всі колонки тягнутися */
.flex {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important; /* Магія: всі картки в ряду стають висотою як найвища */
}

/* 2. Сама картка теж має тягнутися до кінця */
.flex .ins {
    display: flex !important;
}

.flex .ins > div {
    display: flex !important;
    width: 100% !important;
}

/* 3. Посилання всередині картки (робимо його колонкою) */
.flex .ins a {
    display: flex !important;
    flex-direction: column !important; /* Картинка зверху, текст знизу */
    align-items: center !important;
    height: 100% !important; /* Заповнює всю висоту картки */
    width: 100% !important;
}

/* 4. Контейнер з картинкою забирає весь вільний простір зверху, 
      щоб текст на всіх картках був притиснутий донизу на одному рівні */
.flex .ins a span {
    flex-grow: 1 !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 10px !important; /* Відступ між картинкою і текстом */
}

/* ========================================= */
/* ТАБЛИЦЯ ЗАПЧАСТИН       */
/* ========================================= */

/* 1. Каркас сторінки  */

/* 2. Базові налаштування таблиці */

/* Глушимо глобальну "зебру" движка */

/* Налаштування клітинок (Шрифт 14px) */

/* Шапка таблиці (ЗАКРІПЛЕНА) */

/* Ціна */

/* ЕФЕКТ UX: Підсвічування рядка при наведенні */

/* Посилання на запчастину */

/* Налаштування кнопки кошика */

/* Пропускаємо клік крізь SVG для кошика */

/* ========================================= */
/* БЛОК ЗІ СХЕМОЮ (ПРАВОРУЧ)                 */
/* ========================================= */
.image {
    float: right !important;
    width: 43% !important; /* <--- Залишок для схеми + зазор */
    margin-top: 15px !important;
    height: 650px !important; /* Висота один в один з таблицею */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    border: 1px solid #f2f2f2 !important;
    overflow: hidden !important;
}
.image img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Очищення флоатів */
.image::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

/* ========================================= */
/* АДАПТАЦІЯ ДЛЯ ПЛАНШЕТІВ ТА МОБІЛЬНИХ      */
/* ========================================= */
@media (max-width: 768px) {
    .image {
        float: none !important;
        width: 100% !important;  
        margin-top: 20px !important;
    }
}

/* ========================================= */
/* ШИРОКЕ МЕГА-МЕНЮ made in Finland */
/* ========================================= */

#nav, #nav > li {
    position: static !important; 
}

/* 2. Стилі самого випадаючого вікна */
#nav .submenu {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;  
    box-sizing: border-box !important;
    padding: 25px 30px !important; 
    background: #fff !important;  
    z-index: 999 !important;  
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;  
}

#nav .submenu > li {
    display: inline-block !important; 
    vertical-align: top !important;
    min-width: 200px !important;
    margin-right: 20px !important;
}

/* ========================================= */
/* БЛОК СОРТУВАННЯ ТОВАРІВ */                

.category-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
}

.category-header h1 {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.sorting-wrapper select {
    padding: 8px 15px !important;
    border: 1px solid #e7e7e7 !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    color: #595959 !important;
    outline: none !important;
    cursor: pointer !important;
    background-color: #fff !important;
    min-width: 210px !important; /* Щоб випадайка не була занадто вузькою */
    margin-right: 10px;
}

.sorting-wrapper select:focus {
    border-color: var(--brand) !important;  
}

/* На мобільних ставимо їх один під одним */
@media (max-width: 576px) {
    .category-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .sorting-wrapper, .sorting-wrapper select {
        width: 100% !important;
    }
}

.image {
    position: relative;
    display: block !important; 
    width: fit-content; 
    max-width: 100%; 
    margin: 0 auto; 
}

.image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    vertical-align: top !important; 
}

.image br {
    display: none !important;
}

.image > a[target="_blank"] {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(31, 131, 159, 0.8);
    color: #fff !important;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 13px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    z-index: 10;
}

.image > a[target="_blank"]:hover {
    background: rgba(31, 131, 159, 1);
    transform: translateY(-2px);
}

/* --- БЛОК ПІКТОГРАМ MAKITA --- */
.picto-makita-row { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 30px; 
    padding: 0 0 30px 0; 
    margin-bottom: 25px; 
    border-bottom: 2px solid #f2f2f2; 
    background: #fff; 
}
.picto-item { 
    position: relative; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    cursor: help; 
}
.picto-item img { 
    height: 40px; 
    width: auto; 
    object-fit: contain; 
    transition: transform 0.2s ease; 
}
.picto-item:hover img { 
    transform: scale(1.15); 
}

/* Спливаюча підказка */
.picto-tooltip { 
    visibility: hidden; 
    width: max-content; 
    max-width: 250px; 
    background-color: var(--brand);
    color: #fff; 
    text-align: center; 
    border-radius: 4px; 
    padding: 8px 14px; 
    position: absolute; 
    z-index: 100; 
    top: 120%; /* Стартова позиція (під іконкою) */
    left: 50%; 
    transform: translateX(-50%); 
    opacity: 0; 
    transition: opacity 0.2s, top 0.2s; /* Анімуємо рух зверху вниз */
    font-size: 14px; 
    font-weight: normal; 
    font-family: 'PT Sans Narrow', Arial, sans-serif; 
    box-shadow: 0px 5px 15px rgba(0,0,0,0.2); 
    pointer-events: none; 
    line-height: 1.3; 
}
.picto-tooltip::after { 
    content: ""; 
    position: absolute; 
    bottom: 100%; /* Ставимо його над плашкою */
    left: 50%; 
    margin-left: -7px; 
    border-width: 7px; 
    border-style: solid; 
    border-color: transparent transparent var(--brand) transparent; /* Малюємо трикутник знизу-вгору */
}
.picto-item:hover .picto-tooltip { 
    visibility: visible; 
    opacity: 1; 
    top: 130%; /* М'яко від'їжджає трохи нижче */
}

/* Мобільна адаптація: компактний список в одну колонку, менші іконки й підписи */
@media (max-width: 768px) {
    .picto-makita-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 0 0 16px 0 !important;
        margin-bottom: 16px !important;
        border-bottom: 1px solid #e3e8ec !important;
    }
    .picto-item {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        justify-content: flex-start !important;
        cursor: default !important;
        min-width: 0 !important;
    }
    .picto-item img {
        width: 28px !important;
        height: 28px !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
    }
    .picto-item:hover img { transform: none !important; }
    .picto-tooltip {
        position: static !important;
        display: block !important;
        width: auto !important;
        max-width: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        background: transparent !important;
        color: #595959 !important;
        box-shadow: none !important;
        padding: 0 !important;
        font-family: inherit !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        text-align: left !important;
        pointer-events: auto !important;
    }
    .picto-tooltip:after, .picto-tooltip:before {
        display: none !important;
    }
}

/* ========================================= */
/* НОВИЙ ІЗОЛЬОВАНИЙ МАКЕТ ДЛЯ ЗАПЧАСТИН     */
/* ========================================= */

.zap-layout {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 15px;
    width: 100%;
}

/* ========================================= */
/* ЛІВА КОЛОНКА: ТАБЛИЦЯ (55%)               */
/* ========================================= */

.zap-col-left {
    width: 55%;
    flex-shrink: 0;
}

.zap-table-box {
    height: 650px; 
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #f2f2f2;
    background: #fff;
}

/* Кастомний скрол для таблиці */
.zap-table-box::-webkit-scrollbar { width: 6px; }
.zap-table-box::-webkit-scrollbar-track { background: #f8f8f8; border-radius: 8px; }
.zap-table-box::-webkit-scrollbar-thumb { background: #cccccc; border-radius: 8px; }
.zap-table-box::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* БРОНЬОВАНІ БАЗОВІ СТИЛІ ТАБЛИЦІ (!important вбиває старі стилі движка) */
.zap-table-box table {
    width: 100% !important;
    max-width: 100% !important; /* ВБИВАЄ max-width: 700px від .yelo */
    border-collapse: collapse !important;
    table-layout: fixed !important; 
    background: #fff !important;
}

.zap-table-box th, 
.zap-table-box td {
    padding: 6px 10px !important; /* Фіксуємо висоту рядка */
    border-bottom: 1px solid #f2f2f2 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    text-align: left !important;
    font-size: 14px !important; /* Вбиває 16px від .yelo */
    font-weight: normal !important; /* Вбиває жирний шрифт від .yelo */
    color: #333 !important;
    vertical-align: middle !important;
    background-color: #fff !important; /* Вбиває зебру від .yelo */
}

.zap-table-box th {
    font-weight: 600 !important;
    color: #666 !important;
    background: #f4f4f4 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    border-bottom: 2px solid #ddd !important;
}

.zap-table-box tbody tr:hover td { 
    background-color: #f0f8f9 !important; 
}

/* Пропорції та вирівнювання стовпців */
.zap-table-box table th:nth-child(1), .zap-table-box table td:nth-child(1) { width: 6% !important; text-align: center !important; }
.zap-table-box table th:nth-child(2), .zap-table-box table td:nth-child(2) { width: 16% !important; }
.zap-table-box table th:nth-child(3), .zap-table-box table td:nth-child(3) { width: 55% !important; }
.zap-table-box table th:nth-child(4), .zap-table-box table td:nth-child(4) { width: 16% !important; text-align: right !important; padding-right: 15px !important; }
.zap-table-box table th:nth-child(5), .zap-table-box table td:nth-child(5) { width: 7% !important; text-align: center !important; padding: 0 !important; }

/* Повертаємо жирність шапці для першої колонки */
.zap-table-box table th:nth-child(1) { font-weight: 600 !important; }

/* Текст та кнопки в таблиці */
.zap-table-box a { color: #333; text-decoration: none; transition: 0.2s;}
.zap-table-box a:hover { color: var(--brand-dark); text-decoration: underline; }

.zap-price { font-weight: 500 !important; white-space: nowrap !important; }

.zap-table-box .add_to_cart {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--brand) !important;
    cursor: pointer !important;
    transition: transform 0.2s ease !important;
}
.zap-table-box .add_to_cart:hover { transform: scale(1.15) !important; color: var(--brand-dark) !important; }

/* ========================================= */
/* ПРАВА КОЛОНКА: СХЕМА (45%)                */
/* ========================================= */

.zap-col-right {
    width: calc(45% - 20px);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid #f2f2f2;
    background: #fff;
    height: 650px; /* ТОЧНО ТАКА Ж ВИСОТА, ЯК У ТАБЛИЦІ */
}

/* Зона картинки */
.zap-schema-pic {
    flex-grow: 1;
    position: relative;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; 
}

.zap-view-item,
.zap-view-item a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zap-view-item img {
    width: 100% !important; /* Вбиває старі 120px */
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: contain !important; 
}

/* Лупа */
.zap-zoom-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.8);
    border: 1px solid #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
    z-index: 5;
}
.zap-zoom-btn:hover { transform: scale(1.1); background: #fff; }
.zap-zoom-btn svg { width: 20px; height: 20px; stroke: var(--brand); stroke-width: 2.5; fill: none; }

/* Нижня панель керування */
.zap-schema-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fcfcfc;
    border-top: 1px solid #f2f2f2;
    padding: 15px 20px;
}

/* Кнопки сторінок 1-2 */
#zap-pager-box span, 
#zap-pager-box a,
#zap-pager-box-prod span, 
#zap-pager-box-prod a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    margin-right: 5px;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid var(--brand);
    transition: 0.3s;
}

#zap-pager-box span.active,
#zap-pager-box-prod span.active {
    background: var(--brand);
    color: #fff;
}

#zap-pager-box a,
#zap-pager-box-prod a {
    background: #fff;
    color: var(--brand);
}

#zap-pager-box a:hover,
#zap-pager-box-prod a:hover {
    background: #e6f7fa;
}

.zap-link a {
    font-weight: bold;
    color: var(--brand);
    text-transform: uppercase;
    text-decoration: none;
    font-size: 13px;
}
.zap-link a:hover { text-decoration: underline; }

/* ========================================= */
/* ОНОВЛЕННЯ РОЗДІЛУ ЗАПЧАСТИН (СПИСОК)      */
/* ========================================= */

ul.list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 10px !important;
    padding: 20px 0 !important;
}

ul.list li {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
}

ul.list li a {
    background: #f9f9f9 !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    display: block !important;
    border: 1px solid #eee !important;
    color: #333 !important;
    font-weight: bold;
    transition: all 0.2s ease !important;
}

ul.list li a:hover {
    background: var(--brand) !important;
    color: #fff !important;
    border-color: var(--brand) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* 2. Плитки алфавіту */
.pole .w a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
    margin: 3px !important;
    border-radius: 4px !important;
    background: #f2f2f2 !important;
    line-height: 1 !important;
    border: 1px solid #ddd !important;
    font-weight: 600 !important;
}

.pole .w a:hover, .pole .w a.act {
    background: var(--brand) !important;
    color: #fff !important;
    border-color: var(--brand) !important;
}

/* ========================================= */
/* ОНОВЛЕНИЙ ПОШУК (ЯК У GOOGLE З ЛУПОЮ)     */
/* ========================================= */

.pole {
    background: none !important;
    padding: 10px 0 !important;
}

/* Форма пошуку - це наш головний овал (ТЕПЕР ПРАВИЛЬНИЙ СЕЛЕКТОР) */
.pole form.w {
    display: flex !important;
    align-items: stretch !important;
    max-width: 500px; 
    background: #fff !important;
    border: 1px solid #ccc !important;
    border-radius: 25px !important; 
    overflow: hidden !important; 
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
    margin: 0 !important;
}

.pole form.w:focus-within {
    border-color: var(--brand) !important;
    box-shadow: 0 0 5px rgba(31, 131, 159, 0.3) !important;
}

/* Прибираємо старі флоати і налаштовуємо внутрішні div-и */
.pole form.w div.fl {
    flex-grow: 1 !important;
    width: auto !important;
    float: none !important;
    display: flex !important;
}

.pole form.w div.fr {
    width: 50px !important;
    float: none !important;
    display: flex !important;
}

.pole form.w div.cl { display: none !important; }

/* Текстове поле */
.pole form.w input[type=text] {
    flex-grow: 1 !important;
    height: 46px !important;
    padding: 0 10px 0 20px !important;
    font-size: 15px !important;
    color: #333 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    width: 100% !important;
}

.pole form.w input[type=text]::placeholder {
    color: #aaa;
    font-style: italic;
}

/* Кнопка перетворюється на лупу */
.pole form.w input[type=submit] {
    width: 100% !important;
    height: 100% !important;
    min-height: 46px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent url('files/search.svg') center no-repeat !important;
    background-size: 20px !important; 
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    color: transparent !important; 
    font-size: 0 !important; 
    transition: background-color 0.2s ease !important;
}

.pole form.w input[type=submit]:hover {
    background-color: #f4f9fa !important; 
}
/* ========================================= */
/* ПАНЕЛІ ФІЛЬТРІВ (АЛФАВІТ ТА ПОШУК)        */
/* ========================================= */

.zap-filters-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 20px 0 30px 0;
    align-items: stretch; /* МАГІЯ: Робить обидві картки ідеально однакової висоти */
}

.zap-filter-card {
    flex: 1; /* Картки ділять ширину 50/50 */
    background: #fcfcfc; /* Дуже легкий, приємний сірий фон */
    border: 1px solid #eaeaea;
    border-radius: 12px; /* Сучасне заокруглення */
    padding: 25px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center; /* МАГІЯ 2: Контент завжди по центру по вертикалі */
}

/* Заголовки над фільтрами */
.zap-filter-title {
    font-weight: 600;
    color: #555;
    margin-bottom: 20px;
    font-size: 15px;
    text-align: center;
}

/* Відцентровуємо літери */
.zap-letters {
    text-align: center !important;
    line-height: 2 !important; /* Трохи більше повітря між рядами літер */
}

/* Центруємо форму пошуку всередині картки */
.zap-filter-card .pole {
    padding: 0 !important;
    margin: 0 auto;
    width: 100%;
}

/* Адаптивність для мобілок: картки стають одна під одною */
@media (max-width: 900px) {
    .zap-filters-wrapper { flex-direction: column; }
}

.korz { display: none !important; }

/* Лічильник кошика 
.cart-badge {
    background-color: var(--red) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-family: Arial, sans-serif !important;
    font-weight: bold !important;
    padding: 2px 6px !important;
    border-radius: 3px !important; 
    margin-left: 3px !important;
    position: relative !important;
    top: -1px !important;
    display: inline-block;
    line-height: 1.2 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
    text-decoration: none !important;  
}*/

/* --- Global Order & Registration Styles --- */
.chk-wrap { max-width: 1180px; margin: 20px auto 60px auto; font-family: Arial, sans-serif; color: #595959; box-sizing: border-box; }
.chk-wrap.reg-wrap { max-width: 800px; }
.chk-wrap * { box-sizing: border-box; }

/* Notifications */
.msg-modern { padding: 18px 25px; border-radius: 8px; font-size: 15px; font-weight: 500; margin-bottom: 25px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); clear: both; }
.msg-success { background-color: #e8f5e9; color: #2e7d32; border-left: 5px solid #4caf50; }
.msg-error { background-color: #ffebee; color: #c62828; border-left: 5px solid #f44336; }

/* Header */
.chk-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; border-bottom: 2px solid #ddd; padding-bottom: 15px; }
.chk-head h1 { margin: 0; font-size: 28px; color: var(--brand); }
.back-link { text-decoration: none; color: var(--brand); font-weight: 600; font-size: 15px; transition: 0.2s; }
.back-link:hover { color: var(--red); }

/* Form Card */
.card { background: #fff; border-radius: 10px; padding: 35px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border: 1px solid #eee; margin-bottom: 20px; }
.row { display: flex; gap: 20px; margin-bottom: 20px; }
.field { flex: 1; position: relative; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: #555; margin-left: 5px; }
.req-star { color: var(--red); font-weight: bold; }

/* Inputs */
.chk-wrap .input { 
    width: 100% !important; height: 36px !important; padding: 0 15px !important; 
    border: 1px solid #ccc !important; border-radius: 6px !important; 
    font-size: 15px !important; background: #fff !important; color: #333 !important; 
    outline: none !important; transition: border-color 0.2s;
}
.chk-wrap .input:focus { border-color: var(--brand) !important; }

/* Button */
.reg-btn-wrapper { margin-top: 35px; text-align: center; }

.btn-submit { 
    display: inline-block; max-width: 300px; width: 100%; 
    background: var(--red); color: #fff; 
    border: none; padding: 14px; border-radius: 8px; font-size: 16px; 
    cursor: pointer; transition: 0.2s; 
}
.btn-submit:hover { background: linear-gradient(to top, var(--brand-dark), var(--brand)); }

/* --- Styles for Personal Cabinet (kabinet.php) --- */

/* Навігація кабінету (кнопки) */
.cabinet-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0 35px 0;
    border-bottom: 2px solid #eee;
    padding-bottom: 20px;
    align-items: center;
}

.cab-nav-link {
    padding: 12px 20px;
    background: #f9f9f9;
    color: #555;
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
    border: 1px solid #e0e0e0;
}

.cab-nav-link:hover {
    background: #e7f4f6;
    color: var(--brand);
    border-color: var(--brand);
}

.cab-nav-link.active {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
   /* box-shadow: 0 4px 10px rgba(0, 130, 155, 0.2);*/
}

/* Кнопка "Вихід" з іконкою SVG */
.cab-nav-logout {
    margin-left: auto; 
    background: var(--red); /* Відразу червона */
    color: #fff !important;
    border-color: var(--red);
    display: inline-flex;
    align-items: center;
}

/* Підключаємо твою нову іконку */
.cab-nav-logout::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url('files/exit.svg') center no-repeat;
    background-size: contain;
    margin-right: 8px;
    /* МАГІЯ: Робить будь-яку чорну/кольорову SVG ідеально білою */
    filter: brightness(0) invert(1); 
}

.cab-nav-logout:hover {
    background: var(--red-dark); /* Трохи темніша при наведенні */
    color: #fff !important;
    border-color: var(--red-dark);
    box-shadow: 0 4px 10px rgba(236, 27, 36, 0.3);
}

/* Блок привітання */
.cabinet-welcome {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    margin-bottom: 30px;
}

.cab-title {
    font-size: 26px;
    color: var(--brand);
    margin: 0 0 15px 0;
    padding: 0;
    border: none;
}

.cab-text {
    font-size: 15px;
    color: #555;
    margin: 0 0 8px 0;
    line-height: 1.5;
}

/* Мобільна адаптація меню */
@media (max-width: 768px) {
    .cabinet-nav {
        flex-direction: column;
        align-items: stretch;
    }
    .cab-nav-link {
        text-align: center;
    }
    .cab-nav-logout {
        margin-left: 0;
        margin-top: 10px;
    }
}

/* --- СТОРІНКА КОНТАКТІВ (kontakty) --- */

.modern-contacts-page { font-family:'Google Sans',sans-serif; color:#595959; }
.modern-contacts-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:25px; margin:20px 0 40px; }
.contact-card { background:#fff; padding:30px 20px; border-radius:10px; box-shadow:0 4px 20px rgba(0,0,0,.06); border:1px solid #e2e8f0; text-align:center; transition:.3s; }
.contact-card:hover { transform:translateY(-5px); box-shadow:0 10px 25px rgba(31,131,159,.15); border-color:var(--brand); }
.contact-card::before { content:""; display:block; width:45px; height:45px; margin:0 auto 15px; background:center/contain no-repeat; }
.card-address::before { background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%231f839f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.card-phone::before { background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%231f839f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
.card-time::before { background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%231f839f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); }
.contact-card h3 { font-family:'HelveticaNeueLTStd-BdCn',sans-serif; font-size:20px; color:#2a2d30; margin:0 0 15px; text-transform:uppercase; letter-spacing:.5px; }
.contact-card p,.contact-card a { font-size:15px; color:#595959; line-height:1.6; margin:0 0 8px; display:block; text-decoration:none; transition:.2s; }
.contact-card a { color:#2a2d30; }
.contact-card a:hover { color:var(--brand); }
.info-banner { background:#f8fafc; border-left:4px solid var(--brand); padding:20px 25px; border-radius:0 8px 8px 0; margin-bottom:40px; font-size:15px; line-height:1.7; color:#595959; }
.info-banner strong { color:#2a2d30; font-weight:700; }
/* Контакти: кнопка «Прокласти маршрут» у картці адреси + карта під банером */
/* Кнопку шукаємо за посиланням на маршрут — так вона стане кнопкою, навіть якщо редактор зріже клас чи стиль */
.contact-card a[href*="google.com/maps/dir"] { display:inline-block !important; margin:14px auto 0 !important; padding:10px 20px !important; border-radius:6px !important; background:var(--brand) !important; color:#fff !important; font-size:14px !important; font-weight:600 !important; line-height:1.3 !important; text-decoration:none !important; }
.contact-card a[href*="google.com/maps/dir"]:hover { background:var(--brand-dark) !important; color:#fff !important; }
.contacts-map { margin:0 0 40px; border-radius:10px; overflow:hidden; border:1px solid #e2e8f0; background:#eef2f4; }
.contacts-map iframe { display:block; width:100%; height:420px; border:0; }
@media (max-width:768px) { .contacts-map iframe { height:280px; } }

/* --- ДОСТАВКА ТА ПРО КОМПАНІЮ --- */
.modern-page { font-family: 'Google Sans', sans-serif; color: #595959; font-size: 15px; line-height: 1.6; }
.modern-page h2 { font-family: 'HelveticaNeueLTStd-BdCn', sans-serif; font-size: 26px; color: #2a2d30; text-transform: uppercase; margin-top: 40px; margin-bottom: 25px; border-bottom: 2px solid var(--brand); display: inline-block; padding-bottom: 8px;}
.modern-page p { margin-bottom: 15px; }

/* Сітка для карток інформації */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-bottom: 40px; }
.info-card { background: #ffffff; padding: 25px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.04); border: 1px solid #e2e8f0; transition: 0.3s; }
.info-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(31,131,159,0.12); border-color: var(--brand); }
.info-card h3 { font-family: 'HelveticaNeueLTStd-BdCn', sans-serif; font-size: 20px; margin-top: 0; margin-bottom: 15px; color: var(--brand);text-transform: uppercase;letter-spacing: 0.5px;}
.info-card ul { margin: 0; padding-left: 20px; }
.info-card li { margin-bottom: 8px; }

/* Іконки для карток */
.info-card::before { content: ""; display: block; width: 40px; height: 40px; margin-bottom: 15px; background-size: contain; background-repeat: no-repeat; }
.ic-np::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%231f839f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E"); }
.ic-courier::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%231f839f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); }
.ic-pickup::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%231f839f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.ic-cash::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%231f839f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/svg%3E"); }
.ic-bank::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%231f839f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 21h18M3 10h18M5 6l7-3 7 3M4 10v11m16-11v11M8 14v3m4-3v3m4-3v3'/%3E%3C/svg%3E"); }
.ic-dealer::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%231f839f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); }
.ic-service::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%231f839f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E"); }
.ic-team::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%231f839f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.ic-card::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%231f839f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='4' width='22' height='16' rx='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3Cline x1='5' y1='15' x2='9' y2='15'/%3E%3C/svg%3E"); }
/* Телефон: той самий вигляд, але компактніше — іконка в рядок із заголовком, менше відступів */
@media (max-width: 768px) {
    .modern-page { font-size: 14.5px; line-height: 1.5; }
    .modern-page h2 { font-size: 22px; margin-top: 26px; margin-bottom: 14px; padding-bottom: 6px; }
    .info-grid { gap: 12px; margin-bottom: 24px; }
    .info-card { display: grid; grid-template-columns: 30px minmax(0,1fr); column-gap: 12px; align-items: center; padding: 16px; }
    .info-card::before { width: 30px; height: 30px; margin: 0; grid-column: 1; grid-row: 1; }
    .info-card h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 18px; line-height: 1.15; }
    .info-card > :not(h3) { grid-column: 1 / -1; }
    .info-card > p { margin: 10px 0 6px; }
    .info-card li { margin-bottom: 4px; }
    .info-card:hover { transform: none; }
}

/* --- БЛОК ПЕРЕВАГ --- */
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(400px,1fr)); gap:20px; margin-bottom:40px; }
.feature-box { background:#f8fafc; padding:20px 25px; border-radius:0 8px 8px 0; border-left:4px solid var(--brand); transition:.3s; }
.feature-box:hover { background:#f1f5f9; }
.feature-box strong { font-family:'HelveticaNeueLTStd-BdCn',sans-serif; font-size:20px; color:#2a2d30; display:block; margin-bottom:8px; letter-spacing:.5px; text-transform:uppercase; }
.feature-box span { font-family:'Google Sans',sans-serif; font-size:15px; color:#595959; line-height:1.6; display:block; }

/* --- ДИЗАЙН БЛОГУ / НОВИН --- */
.blog-section { margin:20px 0 50px; }
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.blog-card { background:#fff; border-radius:10px; border:1px solid #e2e8f0; overflow:hidden; box-shadow:0 4px 15px rgba(0,0,0,.04); transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease; display:flex; flex-direction:column; height:100%; }
.blog-card:hover { transform:translateY(-5px); box-shadow:0 10px 25px rgba(31,131,159,.15); border-color:var(--brand); }
.blog-link { text-decoration:none; display:flex; flex-direction:column; flex-grow:1; }
.blog-image-wrapper { width:100%; height:220px; border-bottom:1px solid #f1f5f9; display:flex; align-items:center; justify-content:center; background:#fff; overflow:hidden; }
.blog-image-wrapper img { width:80%; height:80%; object-fit:contain; padding:25px; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.blog-card:hover .blog-image-wrapper img { transform:scale(1.08); }
.blog-card-title { font-size:14px; color:#595959; text-align:center; padding:20px 15px; margin:0; flex-grow:1; display:flex; align-items:center; justify-content:center; line-height:1.4; transition:color .2s; letter-spacing:.5px; background:#f9f9f9; }
.blog-card:hover .blog-card-title { color:var(--brand); }
/* Сторінка «Блог» (список статей, .blog-list): назви темніші й читабельніші; на телефоні — список рядками */
.blog-list .blog-card-title { color:#2a2d30; font-size:15px; line-height:1.4; text-align:left; justify-content:flex-start; align-items:flex-start; padding:16px 18px 18px; letter-spacing:0; }
@media (max-width:768px) {
    .blog-list { margin:10px 0 24px; }
    .blog-list .blog-grid { grid-template-columns:1fr !important; gap:0 !important; margin-top:0 !important; border-top:1px solid #edf1f4; }
    .blog-list .blog-card { border:0 !important; border-bottom:1px solid #edf1f4 !important; border-radius:0 !important; box-shadow:none !important; background:none !important; }
    .blog-list .blog-card:hover { transform:none !important; }
    .blog-list .blog-link { flex-direction:row !important; align-items:center !important; gap:14px; padding:12px 0; }
    .blog-list .blog-image-wrapper { flex:0 0 90px; width:90px !important; height:90px !important; padding:0 !important; border:1px solid #edf1f4 !important; border-radius:8px; }
    .blog-list .blog-image-wrapper img { width:100% !important; height:100% !important; padding:6px !important; box-sizing:border-box; }
    .blog-list .blog-card:hover .blog-image-wrapper img { transform:none; }
    .blog-list .blog-card-title { display:-webkit-box !important; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; padding:0 !important; font-size:15px !important; line-height:1.35 !important; background:none !important; letter-spacing:0 !important; }
}

/* --- ТЕЛЕФОН / ШАПКА --- */
.telefon { position: relative; cursor: pointer; display: flex; align-items: center; height: 100%; }
/* .telefon::after { content: ''; position: absolute; top: 100%; left: -20px; right: -20px; height: 20px; z-index: 9998; } */
.telefon .mi { display: flex; align-items: center; gap: 6px; position: relative; z-index: 10; font-weight: normal; }
.telefon .mi svg { transition: transform 0.3s ease; color: inherit; }
.telefon:hover .mi svg { transform: rotate(180deg); }
.title1 .telefon .teldropdown { position: absolute !important; top: calc(100% + 5px) !important; left: -15px !important; transform: translateY(10px) !important; background: #ffffff !important; min-width: 280px !important; border-radius: 8px !important; box-shadow: 0 10px 40px rgba(0,0,0,0.12) !important; padding: 20px !important; z-index: 9999 !important; opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid #e2e8f0 !important; cursor: default; display: block !important; }
.telefon:hover .teldropdown { opacity: 1; visibility: visible; transform: translateY(0) !important; }
.title1 .telefon .teldropdown::before { content: ''; position: absolute; top: -8px; left: 45px; margin-left: -8px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #ffffff; z-index: 2; }
.title1 .telefon .teldropdown::after { content: ''; position: absolute; top: -9px; left: 45px; margin-left: -9px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 9px solid #e2e8f0; z-index: 1; }
.tel-section { margin-bottom: 20px !important; text-align: left !important; }
.tel-title { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 15px !important; font-weight: normal !important; color: #1e293b !important; margin-bottom: 8px !important; }
.tel-title svg { width: 20px; height: 20px; color: #64748b; }
.tel-text { font-size: 14px !important; color: #64748b !important; line-height: 1.5 !important; padding-left: 28px !important; margin: 0 !important; font-weight: normal !important; }
.tel-link { display: block !important; font-size: 17px !important; font-weight: 500 !important; color: var(--brand) !important; text-decoration: none !important; padding-left: 28px !important; margin-bottom: 8px !important; transition: color 0.2s; }
.tel-link:hover { color: var(--brand-dark) !important; text-decoration: underline !important; }
.tel-btn { display: block !important; width: 100% !important; box-sizing: border-box !important; text-align: center !important; background: var(--brand) !important; color: #fff !important; padding: 12px !important; border-radius: 6px !important; font-weight: normal !important; font-size: 14px !important; text-decoration: none !important; transition: background 0.2s !important; }
.tel-btn:hover { background: var(--brand-dark) !important; color: #fff !important; }

/* ======================================================== */
/* Кнопки купівлі / тост «додано в кошик» (стилі старого кошика прибрано — новий у кінці файлу) */
/* ======================================================== */

/* ======================================================= */
/* 1. TOAST - СПЛИВАЮЧЕ ПОВІДОМЛЕННЯ ПРО УСПІХ             */
/* ======================================================= */
#custom-toast { position: fixed; bottom: -150px; left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 12px 20px; border-radius: 8px; z-index: 9999999; display: flex; align-items: center; gap: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); transition: bottom 0.4s ease; font-family: 'Google Sans', sans-serif; font-size: 14px; width: max-content; max-width: 90vw; pointer-events: none; }
#custom-toast.show { bottom: 40px; }
@media (max-width: 991px) { #custom-toast.show { bottom: 85px; } }
.toast-icon { 
    background: #ffffff; /* Білий круг */
    color: var(--brand); 
    width: 34px; 
    height: 34px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-shrink: 0; 
}

/* Примусово фарбуємо SVG-іконку всередині */
.toast-icon svg {
    stroke: var(--brand) !important; 
}

/* ======================================================= */
/* 2. НОВА КНОПКА В КАТАЛОЗІ (tvi.php) - ОНОВЛЕНИЙ SUCCESS */
/* ======================================================= */
.btn-cart-new { 
    display: inline-block; 
    width: 40px; height: 40px; 
    border-radius: 6px; 
    background-position: center !important; 
    background-repeat: no-repeat !important; 
    background-size: 20px 20px !important; /* Розмір самої іконки */
    cursor: pointer; 
    transition: all 0.2s ease; 
    vertical-align: middle; 
}

/* Стан 1: За замовчуванням  */
.btn-cart-new { 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f839f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E") !important; 
    background-color: #f4f5f7 !important;
}
.btn-cart-new:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E") !important; 
    background-color: var(--brand) !important;
}

/* Стан 2: Загрузка (Крутилка) */
.btn-cart-new.is-loading { 
    background-image: url('/images/loading.gif') !important; 
    background-size: 20px 20px !important; 
    pointer-events: none; 
}

/* Стан 3: Товар уже в кошику — суцільна бірюзова кнопка, білий візок з галочкою всередині */
.btn-cart-new.is-success { 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3Cpath d='M10.5 10.2l2.3 2.3 4.2-4.3' stroke-width='2.2'/%3E%3C/svg%3E") !important;
    background-color: var(--brand) !important; 
}
.btn-cart-new.is-success:hover { background-color: var(--brand-dark) !important; }

/* ======================================================= */
/* 3. НОВА КНОПКА В КАРТЦІ ТОВАРУ (catalog.php)            */
/* ======================================================= */
/* Стан 2: Загрузка (ховаємо текст, показуємо крутилку) */
.btn-buy-new.is-loading { background-image: url('/images/loading.gif') !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 24px 24px !important; background-color: #ccc !important; color: transparent !important; pointer-events: none; }

/* Стан 3: Успіх (робимо зеленою) */
.btn-buy-new.is-success { background-color: #10b981 !important; color: #fff !important; }

/* ======================================================== */
/* НОВА АРХІТЕКТУРА КОШИКА (МОДАЛЬНЕ ВІКНО ПО ЦЕНТРУ)       */
/* ======================================================== */

/* Шапка */

/* Тіло кошика */

/* ======================================================== */
/* ТОВАР У КОШИКУ        */
/* ======================================================== */

span.uah { font-size: 0.75em; font-weight: 500; margin-left: 2px; }

/* ======================================================== */
/* ЦІНИ (Звичайна, Акційна, Стара)                          */
/* ======================================================== */

/* Стара перекреслена ціна */

/* Нова ціна (за замовчуванням сіра) */

/* Якщо товар акційний - нова ціна стає червоною */

/* Порожній кошик */

/* Підвал */

/* Адаптивність для мобільних */

/* ======================================================== */
/* ЛІЧИЛЬНИК У ШАПЦІ САЙТУ             */
/* ======================================================== */
.cart-badge {
    background-color: var(--red);  
    color: #ffffff !important;
    font-size: 12px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 2px;
    display: inline-block;
    vertical-align: middle;
    line-height: 1.2;
}
/* Якщо лічильник виводиться через псевдоелемент data-label */
#bag[data-label]::after {
    content: attr(data-label);
    background-color: var(--red);
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    display: inline-block;
    vertical-align: middle;
}
#bag[data-label="0"]::after { display: none; }  
/* ======================================================= */
/* КНОПКА "КУПИТИ" В КАРТЦІ ТОВАРУ (.btn-buy-new)   */
/* ======================================================= */

/* 1. ЗВИЧАЙНА КНОПКА */
.btn-buy-new {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 180px !important; 
    height: 44px !important;     
    padding: 0 20px !important;
    background-color: var(--red) !important;  
    background-image: none !important; 
    color: #ffffff !important;
    font-size: 18px !important;
    font-family: 'HelveticaNeueLTStd-BdCn', sans-serif !important;
    text-transform: uppercase !important;
    border: 1px solid #fff !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

/* Наша нова, стильна іконка кошика (вбудована) */
.btn-buy-new::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    flex-shrink: 0 !important;
}

/* 2. ХАВЕР КНОПКА */
.btn-buy-new:hover {
    background-color: var(--brand) !important; /* Трохи темніший відтінок для хаверу */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f839f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E") !important;
}
.btn-buy-new::before:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f839f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E") !important;

}

/* СТАН ЗАВАНТАЖЕННЯ (Крутилка) */
.btn-buy-new.is-loading {
    opacity: 0.8 !important;
    pointer-events: none !important;
}
.btn-buy-new.is-loading::before {
    background-image: url('/images/loading.gif') !important;
}

/* 3. АКТИВНА В КОШИКУ (Зелена з галочкою) */
.btn-buy-new.is-success {
    background-color: #10b981 !important; /* Залишаємо зелений для стану успіху */
    box-shadow: none !important;
}
.btn-buy-new.is-success::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
}
/* ======================================================= */
/* ЧИСТКА СТАРИХ ІКОНОК З КНОПКИ КУПИТИ             */
/* ======================================================= */

/* 1. Блокуємо фон на самій кнопці (навіть якщо там є клас .tvi) */
a.btn-buy-new, 
button.btn-buy-new,
.btn-buy-new[class] {
    background-image: none !important;
}

/* 2. Вбиваємо псевдоелемент ::after */
a.btn-buy-new::after, 
button.btn-buy-new::after,
.btn-buy-new[class]::after {
    content: none !important;
    display: none !important;
    background-image: none !important;
}

/* 3. Якщо іконка - це окремий тег всередині кнопки (<img>, <i>, <svg>, або <div class="tvi">) - приховуємо їх */
.btn-buy-new i, 
.btn-buy-new img, 
.btn-buy-new svg, 
.btn-buy-new .tvi {
    display: none !important;
}

/* 4. Якщо текст обгорнутий у <span>, чистимо його від фонів та його псевдоелементів */
.btn-buy-new span {
    background: none !important;
    background-image: none !important;
    padding: 0 !important;
}
.btn-buy-new span::after,
.btn-buy-new span::before {
    content: none !important;
    display: none !important;
}
.mobile-bottom-nav {display: none;}
/* ======================================================= */
/* ПРАВИЛЬНІ КОЛЬОРИ ДЛЯ СТАТУСІВ ТОВАРІВ                  */
/* ======================================================= */

/* ПЕРЕДЗАМОВЛЕННЯ ТА В НАЯВНОСТІ: примусово повертаємо колір */
.tovar.keep-color img {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
}

/* ЗНЯТО З ВИРОБНИЦТВА: робимо чорно-білими і блідими */
.tovar.bw-item img {
    filter: grayscale(100%) !important;
    -webkit-filter: grayscale(100%) !important;
    opacity: 0.5 !important;
    transition: all 0.3s ease !important;
}

.tovar.bw-item:hover img {
    opacity: 0.8 !important; /* Трохи підсвічуємо при наведенні */
}
/* Комплектація: показуємо як є, навіть якщо товар окремо не продається */
.komplektacia .tovar.bw-item img,
.komplektacia .tovar img { filter: none !important; -webkit-filter: none !important; opacity: 1 !important; }

/* ======================================================= */
/*   ---- ЧЕКАУТ / КОШИК ----                              */
/* ======================================================= */

    .chk-wrap { max-width: 1180px; margin: 20px auto 60px auto; font-family: 'Google Sans', Arial, sans-serif; color: #595959; }
    .chk-wrap * { box-sizing: border-box; }
    .chk-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; border-bottom: 2px solid #ddd; padding-bottom: 15px; }
    .chk-head h1 { margin: 0; font-size: 28px; color: var(--brand); font-family: 'HelveticaNeueLTStd-BdCn', sans-serif; text-transform: uppercase;}
    .back-link { text-decoration: none; color: var(--brand); font-weight: 600; }
    .chk-grid { display: flex; gap: 30px; align-items: flex-start; }

    .chk-main { flex: 1.4; display: flex; flex-direction: column; gap: 10px; }
    .chk-side { flex: 1; position: sticky; top: 20px; }

    .card { background: #fff; border-radius: 10px; padding: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border: 1px solid #eee; }
    .card h2 { margin: 0 0 20px 0; font-size: 18px; border-bottom: 1px solid #f0f0f0; padding-bottom: 10px; color: #334155;}
    .row { display: flex; gap: 15px; margin-bottom: 15px; }
    .field { flex: 1; position: relative; }
    .field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #555; margin-left: 5px; }

    .chk-wrap .input { 
        width: 100% !important; height: 36px !important; padding: 0 12px !important; border: 1px solid #cbd5e1 !important; border-radius: 6px !important; font-size: 15px !important; background: #fff !important; color: #333 !important; outline: none !important; box-shadow: none !important; display: block !important;
    }
    .chk-wrap .input:focus { border-color: var(--brand) !important; }
    .chk-wrap .input::placeholder { color: #aaa; }

    .custom-select { position: relative; width: 100%; user-select: none; }
    .custom-select-trigger { 
        display: flex; align-items: center; justify-content: space-between; 
        width: 100%; height: 46px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 6px; 
        background: #fff; cursor: pointer; font-size: 15px; transition: 0.2s;
    }
    .custom-select-trigger span.placeholder { color: #aaa; } 
    .custom-select-trigger::after { 
        content: ""; width: 8px; height: 8px; border-right: 2px solid #333; border-bottom: 2px solid #333; 
        transform: rotate(45deg); margin-top: -4px; transition: 0.3s;
    }
    .custom-select.open .custom-select-trigger::after { transform: rotate(-135deg); margin-top: 4px; }
    .custom-select.open .custom-select-trigger { border-color: var(--brand); }

    .custom-options { 
        position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid var(--brand); 
        border-top: none; border-radius: 0 0 8px 8px; z-index: 1000; display: none; 
        box-shadow: 0 5px 15px rgba(0,0,0,0.1); max-height: 250px; overflow-y: auto;
    }
    .custom-select.open .custom-options { display: block; }
    .custom-option { padding: 10px 15px; cursor: pointer; font-size: 14px; border-bottom: 1px solid #f5f5f5; transition: 0.2s; }
    .custom-option:hover { background: #f4f5f7 !important; color: var(--brand) !important; }
    .custom-option.selected { background: #f9f9f9; font-weight: bold; }

    .hidden-required { position: absolute; opacity: 0; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; z-index: -1; }

    .item { display: flex; gap: 15px; align-items: center; padding: 20px 0; border-bottom: 1px solid #f1f5f9; }
    .item img { width: 60px; height: 60px; object-fit: contain; border: 1px solid #f1f5f9; border-radius: 6px; padding: 4px; }
    .item-info { flex: 1; min-width: 0; }

    .item-name-link { text-decoration: none; color: inherit; display: block; }
    .item-name-link:hover .item-name { color: var(--brand); }
    .item-name { font-size: 14px; margin-bottom: 4px; transition: color 0.2s; line-height: 1.3; color: #334155;}

    .item-price { font-weight: bold; font-size: 16px; white-space: nowrap; text-align: right; font-family: 'HelveticaNeueLTStd-BdCn', sans-serif;}
    .item-del { color: #cbd5e1; text-decoration: none; font-size: 20px; font-weight: bold; cursor: pointer; transition: 0.2s;}
    .item-del:hover { color: var(--red); }

    /* Новий блок для + / - кількості */
    .qty-wrapper { display: inline-flex; align-items: center; border: 1px solid #cbd5e1; border-radius: 6px; overflow: hidden; margin-top: 5px; height: 30px;}
    .qty-btn { width: 30px; height: 100%; background: #f4f5f7; border: none; font-size: 16px; color: #64748b; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; }
    .qty-btn:hover { background: #e2e8f0; color: var(--brand); }
    .qty-input { width: 40px; height: 100%; border: none; border-left: 1px solid #cbd5e1; border-right: 1px solid #cbd5e1; background: transparent; text-align: center; font-size: 14px; font-weight: 600; color: #334155; padding: 0; outline: none; -moz-appearance: textfield; }
    .qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

    .total { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; margin-top: 20px; font-size: 18px; color: #1e293b;}
    .total strong { font-size: 28px; color: #1e293b; white-space: nowrap; font-family: 'HelveticaNeueLTStd-BdCn', sans-serif;}

    .btn-submit { display: inline-flex; align-items: center; justify-content: center; min-width: 160px; height: 44px; padding: 0 20px; background-color: var(--red); background-image: none; color: #ffffff; font-size: 18px; font-family: 'HelveticaNeueLTStd-BdCn', sans-serif; text-transform: uppercase; border: 1px solid #fff; cursor: pointer; transition: all 0.3s ease; text-decoration: none; max-width: 100%; margin-top: 40px; }
    .btn-submit:hover { background: var(--brand); }

    .np-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid var(--brand); border-radius: 0 0 8px 8px; max-height: 250px; overflow-y: auto; z-index: 100; box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-top: none; }
    .np-dropdown-item { padding: 10px 15px; cursor: pointer; border-bottom: 1px solid #f5f5f5; font-size: 14px; transition: 0.2s; line-height: 1.4;}
    .np-dropdown-item:hover { background: #f4f5f7 !important; color: var(--brand) !important; }

    .support-block { padding: 25px; border-radius: 10px; background: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border: 1px solid #eee; }
    .support-title { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 15px; }
    .support-flex { display: flex; justify-content: space-between; align-items: center; }
    .support-phones a { display: block; font-size: 16px; font-weight: bold; color: var(--brand); text-decoration: none; margin-top: 5px; transition: color 0.2s; }
    .support-phones a:hover { color: var(--brand-dark); }
    .support-schedule { font-size: 11px; color: #555; line-height: 1.6; }
    .support-schedule-title { font-size: 12px; color: #888; text-transform: uppercase; margin-bottom: 8px; font-weight: 600; }

    @media (max-width: 850px) { 
        .chk-grid { flex-direction: column; } 
        .chk-side { width: 100%; position: static; } 
        .row { flex-direction: column; gap: 10px; } 
        .support-flex { flex-direction: column; align-items: flex-start; gap: 20px; }
    }
    /* Перенесено з верхнього (старого) блоку чекауту — там його перебивали нижчі правила */
    @media (max-width: 650px) {
        .row { flex-direction: column; gap: 15px; }
        .chk-head { flex-direction: column; align-items: flex-start; gap: 10px; }
        .card { padding: 20px; }
    }
/* ======================================================= */
/* ДИЗАЙН МІНІАТЮР ТОВАРУ ЯК НА ОФІЦІЙНОМУ САЙТІ MAKITA    */
/* ======================================================= */

/* 1. Обгортка слайдера */
.thumbs {
    position: relative !important;
    padding: 0 40px !important; 
    margin-top: 15px !important;
    display: block !important;
}

/* 2. Ховаємо старі крапки знизу */
.thumbs .slick-dots {
    display: none !important;
}

/* 3. Жорстке позиціювання сірих блоків-кнопок */
.thumbs .slick-arrow {
    position: absolute !important;
    top: 0 !important;
    width: 40px !important;
    height: 100% !important; 
    background-color: #f4f6f8 !important; /* Фірмовий сірий фон */
    border: none !important;
    z-index: 10 !important;
    font-size: 0 !important; 
    color: transparent !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    display: block !important;
    cursor: pointer !important;
    border-radius: 0 !important;
}
.thumbs .slick-arrow:hover {
    background-color: #e2e8f0 !important;
}

/* Розставляємо по краях */
.thumbs .slick-prev { left: 0 !important; right: auto !important; }
.thumbs .slick-next { right: 0 !important; left: auto !important; }

/* 4. ВБИВАЄМО СТАРІ ІКОНКИ SLICK ТА СТАВИМО SVG-МАГІЮ */
.thumbs .slick-arrow::before,
.thumbs .slick-arrow::after {
    display: none !important; /* Повністю вбиваємо мутантів Slick */
}

/* Ставимо ідеальні стрілочки фоном */
.thumbs .slick-prev {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a2d30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px !important;
}
.thumbs .slick-next {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a2d30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px !important;
}

/* 5. Рамка при наведенні (ідеально рівна) */
.thumbs .slick-slide {
    margin: 0 5px !important; 
    cursor: pointer !important;
    border: 1px solid #e8e8e8;
}

/* Налаштовуємо посилання */
.thumbs .slick-slide a {
    display: block !important; 
    border: 1px solid transparent !important; 
    box-sizing: border-box !important;
    transition: border-color 0.2s !important;
    cursor: pointer !important; /* 👈 Робимо курсор "рукою" */
    -webkit-user-drag: none !important; /* 👈 Забороняємо браузеру хапати посилання */
    user-select: none !important; /* 👈 Забороняємо виділення як тексту */
}

/* Налаштовуємо картинку */
.thumbs .slick-slide img {
    display: block !important; 
    /*width: 100% !important;*/
    height: auto !important;
    margin: 0 auto !important;
    -webkit-user-drag: none !important; /* 👈 Забороняємо браузеру хапати саму картинку */
    pointer-events: none !important; /* 👈 Магія: тепер клік і свайп завжди йдуть точно на слайдер */
}

/* ======================================================= */
/* ФІРМОВІ СТРІЛКИ ТІЛЬКИ ДЛЯ ХІТІВ/АКЦІЙ (#sld)           */
/* ======================================================= */

/* 1. Робимо відступи по боках ТІЛЬКИ для товарів */
#sld {
    padding: 0 45px !important; 
    position: relative !important;
}

/* 2. Жорстко ховаємо крапки */
#sld .slick-dots {
    display: none !important;
}

/* 3. Дизайн кнопок */
#sld .slick-arrow {
    position: absolute !important;
    top: 40% !important; 
    transform: translateY(-50%) !important; 
    width: 40px !important;
    height: 60px !important; 
    background-color: #f4f6f8 !important; 
    border: none !important;
    z-index: 10 !important;
    font-size: 0 !important; 
    color: transparent !important;
    outline: none !important;
    cursor: pointer !important;
    transition: 0.2s !important;
    border-radius: 4px !important; 
    display: block !important;
}
#sld .slick-arrow:hover {
    background-color: #e2e8f0 !important;
}

/* 4. Розставляємо їх по краях */
#sld .slick-prev { left: 0 !important; right: auto !important; }
#sld .slick-next { right: 0 !important; left: auto !important; }

/* 5. Вбиваємо старі стрілки */
#sld .slick-arrow::before,
#sld .slick-arrow::after {
    display: none !important;
}

/* 6. Ставимо наші ідеальні SVG-стрілочки Makita */
#sld .slick-prev {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a2d30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px !important;
}
#sld .slick-next {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a2d30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px !important;
}
/* ======================================================= */
/*  ПРЯМОКУТНІ ДОТСИ                                       */
/* ======================================================= */

.slide1 .slick-dots {
    position: absolute !important;
    bottom: 20px !important; 
    top: auto !important; 
    left: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 20 !important;
    list-style: none !important;
}

.slide1 .slick-dots li {
    width: 60px !important;  
    height: 6px !important;  
    margin: 0 5px !important; 
    cursor: pointer !important;
    list-style: none !important;
}

.slide1 .slick-dots li button::before,
.slide1 .slick-dots li button::after {
    display: none !important;
}

.slide1 .slick-dots li button {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    background-color: rgba(166, 166, 166, 0.5) !important; 
    border: none !important; 
    border-radius: 0 !important; 
    transition: background-color 0.2s ease !important;
    display: block !important;
    font-size: 0 !important;
}
.slide1 .slick-dots li.slick-active button {
    background-color: var(--brand) !important; 
}
.slide1 .slick-dots li button:hover {
    background-color: rgba(166, 166, 166, 0.9) !important;
}

/* ======================================================= */
/*  СТРІЛКИ СЛАЙДЕРА НА ГОЛОВНІЙ                           */
/* ======================================================= */
.slide1 .slick-prev,
.slide1 .slick-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important; height: 44px !important;
    padding: 0 !important;
    background: rgba(0,0,0,.35) !important;
    border: 0 !important; border-radius: 50% !important;
    z-index: 20 !important;
    font-size: 0 !important;
    cursor: pointer !important;
    transition: background .2s ease !important;
}
.slide1 .slick-prev { left: 14px !important; right: auto !important; }
.slide1 .slick-next { right: 14px !important; left: auto !important; }

.slide1 .slick-prev:hover,
.slide1 .slick-next:hover { background: rgba(0,0,0,.6) !important; }

.slide1 .slick-prev::before,
.slide1 .slick-next::before { display: none !important; }

/* сама «галочка» */
.slide1 .slick-prev::after,
.slide1 .slick-next::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important; left: 50% !important;
    width: 11px !important; height: 11px !important;
    border-top: 2px solid #fff !important;
    border-right: 2px solid #fff !important;
    display: block !important;
}
.slide1 .slick-next::after { transform: translate(-65%,-50%) rotate(45deg) !important; }
.slide1 .slick-prev::after { transform: translate(-35%,-50%) rotate(-135deg) !important; }

@media (max-width: 768px) {
    .slide1 .slick-prev,
    .slide1 .slick-next { width: 36px !important; height: 36px !important; }
    .slide1 .slick-prev { left: 6px !important; }
    .slide1 .slick-next { right: 6px !important; }
}
/* ======================================================= */
/* 7. АДАПТАЦІЯ ДЛЯ МОБІЛЬНИХ (МЕНШІ РОЗМІРИ)              */
/* ======================================================= */
@media (max-width: 768px) {
    .slide1 .slick-dots {
        bottom: 5px !important; 
    }
    .slide1 .slick-dots li {
        width: 25px !important;  
        height: 4px !important;  
        margin: 0 2.5px !important;
    }
}

/* ======================================================= */
/* ВИРІВНЮВАННЯ КАРТОК У СЛАЙДЕРІ (Хіт, Новинка, Акція)    */
/* ======================================================= */

/* 1. Робимо всі картки в рядку однакової висоти */
#sld .slick-track {
    display: flex !important;
}

/* 2. Відміняємо стандартне плавання Slick і дозволяємо картці тягнутися */
#sld .slick-slide {
    height: auto !important; 
    display: flex !important;
    flex-direction: column !important;
    float: none !important; 
}

/* 3. Головна обгортка нутрощів (.tns) заповнює всю доступну висоту */
#sld .slick-slide .tns {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

/* 4. МАГІЯ: Відштовхуємо блок з ціною і кошиком (.flex) у самий низ! */
#sld .slick-slide .tns > .flex {
    margin-top: auto !important;
}
/* ======================================================= */
/* ІДЕАЛЬНА СІТКА КАТЕГОРІЙ (ЯК У НІМЦІВ)                  */
/* ======================================================= */

/* 1. Створюємо жорстку сітку (4 колонки на ПК) */
.cat-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    margin-bottom: 30px !important;
}

/* 2. Обгортка картки */
.cat-grid .ins {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important; /* Всі картки в ряду будуть однакової висоти! */
    display: flex !important;
}

/* 3. Сама картка (білий фон, рамочка, ефект при наведенні) */
.cat-grid .ins > div {
    width: 100% !important;
    height: 100% !important;
    background: #ffffff !important;
    border: 1px solid #eef1f3 !important; /* Ніжна рамочка */
    transition: border-color .25s ease, box-shadow .25s ease !important;
    display: flex !important;
    padding: 0 !important;
    overflow: hidden;
}

/* Ефект, коли наводиш мишкою */
.cat-grid .ins > div:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, .08) !important;
}
.cat-grid .ins > div > a > span { position: relative; }
.cat-grid .ins > div > a > span img { position: static !important; left: auto !important; top: auto !important; transform: none; transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
.cat-grid .ins > div:hover > a > span img { transform: scale(1.06); }

/* 4. Посилання (картинка + текст) */
.cat-grid .ins > div > a {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 16px 16px 18px !important;
    box-sizing: border-box;
    text-decoration: none !important;
    color: #595959 !important;
    font-size: 15px !important;
    text-align: left !important;      /* як у Makita: назва зліва під фото */
    line-height: 1.25 !important;
}
.cat-grid .ins > div > a:hover { color: var(--brand) !important; }

/* 5. Контейнер для картинки  */
.cat-grid .ins > div > a > span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 170px !important;
    margin-bottom: 16px !important;
    flex: 0 0 auto !important;
}

/* 6. Сама картинка */
.cat-grid .ins > div > a > span img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* ======================================================= */
/* АДАПТАЦІЯ ДЛЯ ТЕЛЕФОНІВ І ПЛАНШЕТІВ (ДОДАЛИ ПОВІТРЯ)    */
/* ======================================================= */
@media (max-width: 991px) {
    /* На планшетах - 3 колонки */
    .cat-grid { 
        grid-template-columns: repeat(3, 1fr) !important; 
        grid-gap: 14px !important; /* Старий стандарт (Safari) */
        gap: 14px !important;
    }
    .cat-grid .ins > div > a > span { height: 140px !important; }
}
@media (max-width: 768px) {
    /* На телефонах - 2 колонки */
    .cat-grid { 
        grid-template-columns: repeat(2, 1fr) !important; 
        grid-gap: 10px 10px !important; 
    }
    .cat-grid .ins > div > a { 
        padding: 10px 10px 12px !important;
        font-size: 14px !important; 
    }
    .cat-grid .ins > div > a > span { 
        height: 105px !important;
        margin-bottom: 8px !important;
    }
}
/* ======================================================= */
/* СТАТУСИ НАЯВНОСТІ КАТАЛОГ tvi.php (ПІД ЗАМОВЛЕННЯ / ЗНЯТО)    */
/* ======================================================= */

/* Базовий стиль для обох статусів */
.status-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 5px 8px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    white-space: normal !important; /* Дозволяємо перенос тексту, якщо екран вузький */
    text-align: left !important;
    width: 100% !important;
}

/* Забороняємо векторним іконкам сплющуватися */
.status-preorder::before,
.status-discontinued::before {
    flex-shrink: 0 !important; 
}

/* 1. Під замовлення  */
.status-preorder {
    background-color: #f0f7f9;  
    color: var(--brand);            
    border: 1px solid #cce3ea; 
    width: 100%; 
}

/* 2. Знято з виробництва  */
.status-discontinued {
    background-color: #f8fafc; 
    color: #64748b;            
    border: 1px solid #e2e8f0; 

}
/* Іконка "Під замовлення" */
.status-preorder::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f839f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Іконка "Знято з виробництва"  */
.status-discontinued::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='21 8 21 21 3 21 3 8'%3E%3C/polyline%3E%3Crect x='1' y='3' width='22' height='5'%3E%3C/rect%3E%3Cline x1='10' y1='12' x2='14' y2='12'%3E%3C/line%3E%3C/svg%3E") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.8;
}
/* ========================================= */
/* СТИЛІ ДЛЯ ТАБЛИЦІ ЗАПЧАСТИН ТА КОДУ ЗАМІНИ */
/* ========================================= */
.zap-kode-text {
    font-size: 14px;
}
.zap-name-link {
    display: block;
    color: #0f172a;
    text-decoration: none;
    transition: color 0.2s;
}
.zap-name-link:hover {
    color: var(--brand);
}
.zap-zamina-box {
    margin-top: 5px;
    font-size: 11px;
    color: #595959;
    background: #fff8f0;
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid #fed7aa;
}
.zap-zamina-link {
    color: var(--brand);
    text-decoration: none;
}
.zap-status-none {
    color: var(--red);
    font-size: 12px;
}
.zap-error-msg {
    color: var(--red-dark);
    padding: 10px;
    background: #fee2e2;
}
.zap-empty-msg {
    text-align: center;
    color: #999;
    padding: 20px;
}
/* Прямий пошук запчастин - Плитковий дизайн (Flexbox) */
.zap-search-wrap {
    margin-bottom: 25px;
}

.zap-flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.zap-flex-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1 1 calc(25% - 15px); /* 4 колонки на великому екрані */
    min-width: 200px;
    max-width: 250px; /* Щоб картки не розтягувались на весь екран, якщо знайдено лише 1 деталь */
    background: #fff;
    border: 1px solid #e7e7e7;
    padding: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s, border-color 0.2s;
}
.zap-flex-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08)
}
.zap-card-kode {
    margin-bottom: 6px;
}
.zap-card-kode a {
    color: var(--brand);
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    font-family: 'HelveticaNeueLTStd-BdCn';
}
.zap-card-name {
    color: #475569;
    font-size: 14px;
    margin-bottom: 5px;
    line-height: 1.4;
    flex-grow: 1;  
}
.zap-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*padding-top: 10px;*/
}
.zap-card-price {
    font-weight: 700;
    font-size: 16px;
    color: #0f172a;
}
.zap-card-cart a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #fff;
    color: var(--brand);
    border-radius: 4px;
    background-color: #f4f5f7;
    transition: 0.2s;
    cursor: pointer;
}
.zap-card-cart a:hover {
    background: var(--brand);
    color: #fff;

}
.zap-card-none {
    color: var(--red);
    font-size: 13px;
    font-weight: 500;
}
.zap-card-name a {
    color: inherit;  
    text-decoration: none;
    transition: 0.2s;
}
.zap-card-name a:hover {
    color: var(--brand);  
}
/* Блок "Зверніть увагу - код заміни" */

/* Для мобільних телефонів */

/* ***** Перемикач мов ***** */
.lang-container-desktop { display: inline-flex !important; align-items: center; background: var(--brand); border-radius: 14px; padding: 2px; margin-left: 15px; vertical-align: middle; box-shadow: inset 0 1px 3px rgba(0,0,0,0.2); }
.lang-separator { display: none !important; }
.lang-container-desktop .lang-link, .lang-container-desktop .lang-active { display: inline-block; padding: 4px 8px; font-size: 10px; text-transform: uppercase; border-radius: 12px; text-decoration: none; transition: all 0.3s ease; line-height: 1; }
.lang-container-desktop .lang-link { color: rgba(255, 255, 255, 0.6); background: transparent; }
.lang-container-desktop .lang-link:hover { color: #ffffff; }
.lang-container-desktop .lang-active { background: #ffffff; color: var(--brand); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
/* ========================================= */
/* СТИЛЬ "ПОЛЯКІВ" (СУЦІЛЬНИЙ БЛОК)          */
/* ========================================= */

/* Контейнер вкладок */
.vkladkios {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    padding: 0;
    max-width: 100%;

}

/* Загальний вигляд усіх вкладок */
.vkladkios .omo {
    background: #ffffff !important;
    border: none !important;
    padding: 12px 24px !important;
    margin: 0 !important;
    font-size: 15px;
    font-weight: 600;
    color: #4b5563; /* Темно-сірий текст */
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: 'HelveticaNeueLTStd-BdCn';
    user-select: none; 
    -webkit-user-select: none;
    -moz-user-select: none; 
    -ms-user-select: none; 
}

/* Прибираємо подвійні рамки між кнопками (щоб не було жирної лінії) */
.vkladkios .omo:not(:last-child) {
    border-right: none !important;
}

/* Ефект наведення на неактивну */
.vkladkios .omo:hover {
    background: #f3f4f6 !important;
    color: #1f2937;
}

/* АКТИВНА ВКЛАДКА (клас .z) */
.vkladkios .omo.z {
    background: var(--brand) !important; /* Твій фірмовий бірюзовий */
    color: #ffffff !important;
    border-color: var(--brand) !important; 
}

/* ========================================= */
/* МОБІЛЬНА АДАПТАЦІЯ (@media)               */
/* ========================================= */
@media (max-width: 767px) {
    .vkladkios {
        flex-direction: column; /* Вертикально */
        padding: 0 10px;
    }

    .vkladkios .omo {
        width: 100%;

        /* ОСЬ ТУТ ЛАГОДИМО СКРОЛ ТІЛЬКИ ДЛЯ МОБІЛОК */
        white-space: normal; 
        word-break: break-word; 
    }

    /* Логіка рамок для вертикального списку */
    .vkladkios .omo:not(:last-child) {
        border-right: 1px solid #d1d5db !important;
        border-bottom: none !important;
    }

    /* Заокруглення зверху */
    .vkladkios .omo:first-child {
        border-top-left-radius: 8px !important;
        border-top-right-radius: 8px !important;
        border-bottom-left-radius: 0 !important;
    }

    /* Заокруглення знизу */
    .vkladkios .omo:last-child {
        border-bottom-left-radius: 8px !important;
        border-bottom-right-radius: 8px !important;
        border-top-right-radius: 0 !important;
    }
}
@media (max-width: 991px) {
    html, body {
        max-width: 100%;
        overflow-x: clip;
    }
}

/* ======================================================= */
/* HOVER ДЛЯ КАРТОК ТОВАРІВ  */
/* ======================================================= */
.tns span.f { overflow: hidden; }
@media (hover: hover) {
    .tovar {
        transition: box-shadow .25s ease, border-color .25s ease;
    }
    .tovar .tns span.f img {
        transition: transform .5s cubic-bezier(.4, 0, .2, 1);
    }
    .tovar:hover {
        box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
        z-index: 2;
    }
    .tovar:hover .tns span.f img {
        transform: scale(1.08);
    }
}
@media (prefers-reduced-motion: reduce) {
    .tovar, .tovar .tns span.f img { transition: none; }
    .tovar:hover .tns span.f img { transform: none; }
}
/* =========================================================
   МОДАЛЬНІ ВІКНА — єдина система
   ========================================================= */
/* =========================================================
   МОДАЛЬНІ ВІКНА — єдина система
   Додати в com.css. Після впровадження ВИДАЛИТИ зі старого:
     • рядки ~325-327  (#window, #window big, #window span)
     • рядки ~331-340  (.hhde, .hhdw)
     • рядки ~2271-2282 (блок "ВІКНО АВТОРИЗАЦІЇ")
     • рядки ~2499-2515 (.inbag-overlay, .inbag-drawer)
   Решту .inbag-* (вміст кошика) лишити — вони описують не оболонку,
   а саме список товарів усередині.

   Структура:
     .mdl-overlay            затемнення, центрування
       .mdl-box              вікно; --wide = 850px для кошика
         .mdl-close          хрестик
         .mdl-head           шапка (тільки для --wide)
         .mdl-body           тіло зі скролом (тільки для --wide)
         .mdl-footbar        низ (тільки для --wide)
   ========================================================= */

/* ---------- 0. Смуга прокрутки ----------
   Місце під неї зарезервоване завжди. Інакше, коли модалка ставить
   body { overflow: hidden }, смуга зникає, її ~15px віддаються
   сторінці — і вся верстка стрибає вправо.
   Працює в Chrome, Edge, Firefox і Safari 18.2+. У старіших Safari
   лишається поведінка як була — нічого не ламається.
   -------------------------------------------------------------------- */

html { scrollbar-gutter: stable; }

/* Помилкові поля на сторінці оформлення — той самий вигляд, що в модалках */
.chk-wrap .input.is-err,
.chk-wrap .custom-select-trigger.is-err {
    border-color: var(--red) !important;
    background: #fff7f7;
}

/* ---------- Сторінка «Замовлення оформлено» ----------
   Раніше була намальована інлайном зі своїм шрифтом і кнопкою.
   -------------------------------------------------------------------- */

.order-ok { padding: 60px 15px; }

.order-ok-card {
    max-width: 560px;
    margin: 0 auto;
    padding: 40px 30px 36px;
    box-sizing: border-box;
    text-align: center;
    background: #fff;
    border: 1px solid #e3e8ec;
    border-top: 5px solid var(--brand);
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(23,98,127,0.14);
}

.order-ok-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
}
.order-ok-icon svg { width: 30px; height: 30px; }

.order-ok-title {
    font-family: 'HelveticaNeueLTStd-BdCn', sans-serif;
    font-weight: normal;
    font-size: 30px;
    line-height: 1.1;
    text-transform: uppercase;
    color: #2a2d30;
    margin: 0 0 16px;
}

.order-ok-num {
    display: inline-block;
    margin-bottom: 16px;
    padding: 8px 24px;
    background: #eef7f9;
    border: 1px dashed #9cc9d6;
    border-radius: 8px;
    font-family: 'HelveticaNeueLTStd-BdCn', sans-serif;
    font-size: 28px;
    letter-spacing: 1px;
    color: #2a2d30;
}
.order-ok-num span {
    display: block;
    font-family: 'Google Sans', Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 0;
    color: #595959;
}

.order-ok-text {
    font-size: 15px;
    line-height: 1.5;
    color: #595959;
    margin-bottom: 26px;
}

.order-ok-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.order-ok-btn {
    box-sizing: border-box;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 26px;
    border: 1px solid var(--brand);
    border-radius: 6px;
    background: var(--brand);
    color: #fff;
    font-family: 'HelveticaNeueLTStd-BdCn', sans-serif;
    font-size: 16px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: 0.2s;
}
.order-ok-btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.order-ok-btn-red { background: var(--red); border-color: var(--red); }
.order-ok-btn-red:hover { background: var(--brand); border-color: var(--brand); }
.order-ok-btn-ghost { background: #fff; border-color: #d5dce1; color: #2a2d30; }
.order-ok-btn-ghost:hover { background: #fff; border-color: var(--brand); color: var(--brand); }

@media (max-width: 576px) {
    .order-ok { padding: 30px 12px; }
    .order-ok-card { padding: 30px 18px 24px; }
    .order-ok-title { font-size: 26px; }
    .order-ok-btn { width: 100%; }
}

/* ---------- 1. Оболонка ---------- */

.mdl-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(42, 45, 48, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}
.mdl-overlay.is-open { opacity: 1; visibility: visible; }

.mdl-box {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 400px;
    max-height: 92vh;
    overflow-y: auto;
    padding: 35px 30px 30px;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    color: #595959;
    transform: translateY(14px);
    transition: transform 0.22s ease;
}
.mdl-overlay.is-open .mdl-box { transform: translateY(0); }

/* Широкий варіант: кошик. Паддінг знімаємо — його беруть на себе
   .mdl-head / .mdl-body / .mdl-footbar, бо тіло має скролитись окремо. */
.mdl-box--wide {
    max-width: 850px;
    max-height: 90vh;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mdl-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid #f3b6b8;
    border-radius: 50%;
    background: #fff;
    color: var(--red);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.75;
    transition: 0.2s;
}
.mdl-close:hover { opacity: 1; transform: rotate(90deg); }
.mdl-close:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- 2. Розкладка широкого вікна ---------- */

/* Праворуч лишаємо місце під хрестик — він абсолютний і лежить поверх */
.mdl-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 56px 20px 30px;
    border-bottom: 1px solid #eaeaea;
}
.mdl-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px 30px;
}
.mdl-body::-webkit-scrollbar { width: 6px; }
.mdl-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

.mdl-footbar {
    flex: 0 0 auto;
    padding: 20px 30px;
    border-top: 1px solid #eaeaea;
    background: #fcfcfc;
}

/* ---------- 3. Заголовок ---------- */

.mdl-title {
    font-family: 'HelveticaNeueLTStd-BdCn', sans-serif;
    font-size: 26px;
    line-height: 1.15;
    color: var(--brand);
    margin: 0 0 6px;
    padding-right: 30px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
/* У широкому вікні заголовок живе в шапці — він менший і без відступів */
.mdl-head .mdl-title {
    font-size: 20px;
    margin: 0;
    padding-right: 0;
}

.mdl-lead {
    font-size: 14px;
    line-height: 1.5;
    color: #888;
    margin: 0 0 20px;
}

/* ---------- 4. Блок контексту (товар, замовлення) ---------- */

.mdl-card {
    background: var(--brand-light);
    border-left: 4px solid var(--brand);
    border-radius: 0 8px 8px 0;
    padding: 14px 18px;
    margin-bottom: 22px;
    font-size: 14px;
    line-height: 1.5;
    color: #595959;
}
.mdl-card b { display: block; color: #2a2d30; font-weight: 700; }
.mdl-card i { font-style: normal; color: var(--brand); font-size: 13px; }

/* ---------- 5. Поля ---------- */

.mdl-label {
    display: block;
    font-size: 13px;
    color: #595959;
    margin-bottom: 6px;
}
.mdl-label sup { color: var(--red); font-size: 13px; top: 0; }

.mdl-input {
    width: 100%;
    box-sizing: border-box;
    height: 46px;
    padding: 0 15px;
    margin-bottom: 18px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fdfdfd;
    font-family: inherit;
    font-size: 15px;
    color: #2a2d30;
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
}
.mdl-input:focus {
    border-color: var(--brand);
    background: #fff;
    box-shadow: 0 0 5px rgba(var(--brand-rgb), 0.2);
    outline: none;
}
.mdl-input.is-err { border-color: var(--red); background: #fff7f7; }

textarea.mdl-input { height: auto; min-height: 110px; padding: 12px 15px; line-height: 1.5; }

/* Поле пароля з "оком" */
.mdl-pw { position: relative; }
.mdl-pw .mdl-input { padding-right: 46px; }
.mdl-eye {
    position: absolute;
    top: 23px;
    right: 14px;
    transform: translateY(-50%);
    line-height: 0;
    cursor: pointer;
    user-select: none;
}

/* Пастка для ботів */
.mdl-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}

/* Рядок "запам'ятати мене" + "забули пароль" */
.mdl-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -4px 0 18px;
    font-size: 13px;
}
.mdl-row label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #595959;
    font-weight: normal;
    cursor: pointer;
}
.mdl-row input[type="checkbox"] {
    width: auto;
    height: auto;
    margin: 0;
    accent-color: var(--brand);
}
.mdl-row a,
.mdl-foot a { font-size: 13px; }

/* Роздільник "або увійдіть через" */
.mdl-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 16px;
    font-size: 12px;
    color: #9aa2a8;
}
.mdl-or::before,
.mdl-or::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #e6eaed;
}

.mdl-foot {
    text-align: center;
    font-size: 13px;
    color: #595959;
    margin-top: 10px;
}
/*.mdl-foot a { font-weight: 700; } */

/* ---------- 6. Кнопки ---------- */

.mdl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    box-sizing: border-box;
    width: 100%;
    height: 46px;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-family: 'HelveticaNeueLTStd-BdCn', sans-serif;
    font-size: 16px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: 0.2s;
}
.mdl-btn:focus-visible { outline: 2px solid #2a2d30; outline-offset: 2px; }
.mdl-btn:disabled { background-color: #c8c8c8 !important; border-color: #c8c8c8 !important; cursor: default; }
.mdl-btn--auto { width: auto; }

.mdl-btn--primary { background: var(--red); color: #fff; }
.mdl-btn--primary:hover { background: var(--brand); color: #fff; }

.mdl-btn--brand { background: var(--brand); color: #fff; }
.mdl-btn--brand:hover { background: var(--red); color: #fff; }

/* Світла кнопка: Google, "продовжити покупки" */
.mdl-btn--ghost {
    background: #fff;
    border-color: #ddd;
    color: #2a2d30;
    font-family: inherit;
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0;
}
.mdl-btn--ghost:hover { border-color: var(--brand); color: #2a2d30; }

/* Блок «Немає акаунту? → Зареєструватися» у вікні входу */
.mdl-reg { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e6eaed; text-align: center; }
.mdl-reg-t { font-size: 15px; font-weight: 600; color: #2a2d30; }
.mdl-reg-l { margin: 4px 0 12px; font-size: 13px; line-height: 1.45; color: #8a949c; }
.mdl-btn--reg { background: #fff; border-color: var(--brand); color: var(--brand-dark); }
.mdl-btn--reg:hover { background: var(--brand); color: #fff; }

/* Вікна (вхід, питання, наявність) компактніше — щоб вхід влазив без прокрутки на ноутбуках і при масштабі 125% */
#mdl-root .mdl-box:not(.mdl-box--wide) { padding: 26px 28px 22px; }
#mdl-root .mdl-title { font-size: 24px; margin-bottom: 4px; }
#mdl-root .mdl-lead { font-size: 13.5px; margin-bottom: 14px; }
#mdl-root .mdl-label { margin-bottom: 4px; }
#mdl-root .mdl-input { height: 42px; margin-bottom: 12px; }
#mdl-root textarea.mdl-input { height: auto; }
#mdl-root .mdl-row { margin: -2px 0 14px; }
#mdl-root .mdl-btn { height: 44px; }
#mdl-root .mdl-or { margin: 12px 0 10px; }
#mdl-root .mdl-reg { margin-top: 14px; padding-top: 12px; }
#mdl-root .mdl-reg-l { margin: 2px 0 10px; }
/* Офіційна кнопка Google (малює бібліотека Google) — по центру, на всю ширину */
#mdl-gbtn { display: flex; justify-content: center; min-height: 44px; }
#mdl-gbtn:empty { display: none; }

/* ---------- 7. Повідомлення та екран "готово" ---------- */

.mdl-msg {
    display: none;
    margin-bottom: 16px;
    padding: 11px 15px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
}
.mdl-msg.is-shown { display: block; }
.mdl-msg--bad  { background: var(--red-light);   color: #c2181f;      border: 1px solid #f3b6b8; }
.mdl-msg--good { background: var(--brand-light); color: var(--brand); border: 1px solid #bfdfe8; }

.mdl-done { text-align: center; padding: 10px 0 4px; }
.mdl-done-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 32px;
    line-height: 62px;
}
.mdl-done-title {
    font-family: 'HelveticaNeueLTStd-BdCn', sans-serif;
    font-size: 22px;
    color: #2a2d30;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.mdl-done-text { font-size: 15px; line-height: 1.6; color: #595959; }

/* ---------- 8. Кнопки, що відкривають "Уточнити наявність" ----------
   Живуть не в модалці, а в картці товару та в списку каталогу.
   Раніше були у <style> всередині nayavnist.php.
   -------------------------------------------------------------------- */

/* Повна кнопка в картці товару */
.nv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    box-sizing: border-box;
    height: 46px;
    padding: 0 30px;
    border: none;
    border-radius: 6px;
    background-color: var(--brand);
    color: #fff;
    font-family: 'HelveticaNeueLTStd-BdCn', sans-serif;
    font-size: 16px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.2s;
}
.nv-btn:hover { background-color: var(--red); color: #fff; }
.nv-btn:focus-visible { outline: 2px solid #2a2d30; outline-offset: 2px; }

/* Компактна кнопка-іконка в списку товарів */
.nv-btn-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f839f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") !important;
    background-color: #f4f5f7 !important;
}
.nv-btn-icon:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") !important;
    background-color: var(--brand) !important;
}

/* Плашка "Під замовлення": клік дзеркалить приховану кнопку кошика */
.nv-preorder {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.nv-preorder:hover {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}
.nv-preorder:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

.nv-preorder.nv-pre-loading {
    background-color: #ccc !important;
    border-color: #ccc !important;
    color: transparent !important;
    pointer-events: none;
}
.nv-preorder.nv-pre-loading::before {
    background-image: url('/images/loading.gif') !important;
}

.nv-preorder.nv-pre-success {
    background-color: var(--ok, #10b981) !important;
    border-color: var(--ok, #10b981) !important;
    color: #fff !important;
    pointer-events: none;
}
.nv-preorder.nv-pre-success::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

/* ---------- 9. Мобільна версія: панель знизу ---------- */

@media (max-width: 640px) {
    .mdl-overlay { padding: 0; align-items: flex-end; }

    .mdl-box {
        max-width: 100%;
        max-height: 85vh;
        border-bottom: none;
        border-radius: 14px 14px 0 0;
        padding: 30px 22px calc(24px + env(safe-area-inset-bottom));
        margin-bottom: 80px;
        transform: translateY(100%);
    }
    .mdl-box--wide {
        padding: 0;
        max-height: 88vh;
    }
    .mdl-box--wide .mdl-head,
    .mdl-box--wide .mdl-body { padding-left: 20px; padding-right: 20px; }
    .mdl-box--wide .mdl-footbar {
        padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
    }

    .mdl-title { font-size: 23px; }
    .nv-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .mdl-overlay,
    .mdl-box { transition: none; }
    .mdl-box { transform: none; }
}
/* банери-iframe: перекриваємо щілину від дробового округлення */
iframe[src*="/im/iframes/"] {
  display: block;
  border: 0;
  width: 100%;
  height: calc(100% + 2px);
  margin-bottom: -2px;
}

/* ======================================================= */
/* ГОЛОВНА НА ТЕЛЕФОНІ: мітки, слайдер товарів, блог       */
/* ======================================================= */
@media (max-width: 768px) {
    /* Слайдер: компактніші стрілки, більше місця для картки */
    #sld { padding: 0 34px !important; }
    #sld .slick-arrow {
        width: 30px !important;
        height: 44px !important;
        background-size: 16px !important;
    }

    /* Прибираємо порожнечу між артикулом і ціною */
    #sld .tns a { min-height: 0; }
    #sld .tns span.f { height: 170px; }

    /* Блог: нижча зона фото, щоб було видно заголовок */
    .home-blog-section .blog-image-wrapper { height: 140px; }
    .home-blog-section .blog-image-wrapper img { padding: 10px; }
    .home-blog-section .blog-card-title {
        font-size: 13px;
        padding: 12px 10px;
        letter-spacing: 0;
    }
}
@media (max-width: 576px) {
    .metki { gap: 4px; }
    .metki span { height: 18px; padding: 0 6px; font-size: 11px; }
}
/* Плашка заміни моделі / нового артикула */
.zamina-box{display:flex;align-items:center;gap:14px;flex-wrap:wrap;width:100%;margin-top:12px;padding:16px 18px;
    background:var(--brand-light);border:1px solid rgba(31,131,159,.2);border-radius:10px;box-sizing:border-box;}
.zamina-ic{width:42px;height:42px;border-radius:50%;background:#fff;color:var(--brand);flex-shrink:0;
    display:flex;align-items:center;justify-content:center;}
.zamina-tx{flex:1;min-width:180px;font-size:16px;color:#2a2d30;}
.zamina-tx small{display:block;font-size:14px;color:#64748b;margin-bottom:3px;}
.zamina-tx b{color:var(--brand);font-family:'HelveticaNeueLTStd-BdCn',sans-serif;font-size:19px;font-weight:normal;}
.zamina-btn{background:var(--brand);color:#fff !important;border-radius:6px;padding:10px 18px;font-size:16px;white-space:nowrap;
    text-decoration:none;font-family:'HelveticaNeueLTStd-BdCn',sans-serif;transition:background .2s;text-transform:uppercase;letter-spacing:.5px;}
.zamina-btn:hover{background:var(--red);}
@media (max-width:480px){ .zamina-btn{width:100%;text-align:center;box-sizing:border-box;} }

/* ===== Текст категорії з «Читати далі» ===== */
.cat-seo{margin:50px 0 30px;padding:30px 35px 25px;background:var(--brand-light);border-radius:10px;}
.cat-seo-body{max-height:190px;overflow:hidden;position:relative;color:#475569;font-size:15px;line-height:1.7;transition:max-height .5s ease;}
.cat-seo-body::after{content:"";position:absolute;left:0;right:0;bottom:0;height:80px;
    background:linear-gradient(rgba(242,248,250,0),var(--brand-light));pointer-events:none;}
.cat-seo-open .cat-seo-body{max-height:6000px;}
.cat-seo-open .cat-seo-body::after,.cat-seo-short .cat-seo-body::after{display:none;}
.cat-seo-short .cat-seo-more{display:none;}

/* заголовки — фірмовий вузький шрифт */
.cat-seo-body h2{font-family:'HelveticaNeueLTStd-BdCn',sans-serif;font-weight:normal;font-size:22px;color:#595959;margin:0 0 12px;line-height:1.2;}
.cat-seo-body h3{font-family:'HelveticaNeueLTStd-BdCn',sans-serif;font-weight:normal;font-size:19px;color:var(--brand);
    text-transform:uppercase;letter-spacing:.3px;margin:24px 0 8px;}
.cat-seo-body p{margin:0 0 10px;}
.cat-seo-body strong{color:#595959;font-weight:600;font-family:inherit;}

/* список — бірюзові галочки замість крапок */
.cat-seo-body ul{list-style:none;margin:6px 0 10px;padding:0;}
.cat-seo-body li{position:relative;padding-left:28px;margin:0 0 10px;}
.cat-seo-body li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;
    background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;}

/* кнопка */
.cat-seo-more{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:0;background:none;border:0;cursor:pointer;
    color:var(--brand);font-family:'HelveticaNeueLTStd-BdCn',sans-serif;font-size:16px;text-transform:uppercase;letter-spacing:.5px;}
.cat-seo-more::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg) translateY(-3px);transition:transform .3s;}
.cat-seo-open .cat-seo-more::after{transform:rotate(-135deg) translate(-2px,-1px);}
.cat-seo-more:hover{color:var(--brand-dark);}

@media (max-width:768px){
    .cat-seo{padding:22px 18px 18px;margin:35px 0 20px;}
    .cat-seo-body h2{font-size:22px;}
}

/* Комплектація: без hover-ефектів каталогу */
.komplektacia .tovar,
.komplektacia .tovar:hover {
    border-color: transparent !important;
    box-shadow: none !important;
    background: transparent !important;
    transition: none !important;
}
.komplektacia .tovar .tns span.f img,
.komplektacia .tovar:hover .tns span.f img {
    transform: none !important;
    transition: none !important;
}
.komplektacia .tns a:hover,
.komplektacia .tns a:hover .nm {
    color: inherit !important;
}
.komplektacia .tns a:hover span.b {
    color: var(--brand) !important;
}
/* Власні підказки */
.mt-tip{
    position: fixed;
    z-index: 99999;
    max-width: 280px;
    padding: 8px 12px;
    background: #fff;
    color: #334155;
    font-size: 13px;
    line-height: 1.4;
    border: 1px solid var(--brand);
    border-radius: 4px;
    box-shadow: 0 6px 16px rgba(31,131,159,.15);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .15s ease, transform .15s ease;
}
.mt-tip.on{
    opacity: 1;
    transform: translateY(0);
}

/* ============ ЗАПЧАСТИНИ (сторінка parts.php) — перенесено з файлу ============ */
/* ======================= ЗАПЧАСТИНИ: новий вигляд =======================
   .zx-b — бірюзовий банер, .zx-a — світлий, .zx-s — як сторінка «Сервіс» */
.zx{--zx-line:#e3e8ec;--zx-mut:#595959;--zx-tx:#2a2d30;--zx-soft:#eef7f9;color:var(--zx-tx)}
.zx-hero{display:flex;gap:28px;align-items:center;margin:6px 0 18px}
.zx-hero-main{flex:1;min-width:0}
.zx-hero h1{margin:0 0 6px;font-family:'HelveticaNeueLTStd-BdCn',sans-serif;font-weight:normal;font-size:34px;line-height:1.1;text-transform:uppercase}
.zx-lead{margin:0 0 16px;font-size:15px;color:var(--zx-mut)}
.zx-search{display:flex;max-width:640px;margin:0;border-radius:6px;overflow:hidden}
.zx-search input[type=text]{flex:1;min-width:0;height:50px;border:0;padding:0 16px;font-size:15px;font-family:inherit;color:var(--zx-tx);background:#fff;outline:none}
.zx-search button{display:inline-flex;align-items:center;gap:8px;padding:0 24px;border:0;cursor:pointer;color:#fff;font-family:'HelveticaNeueLTStd-BdCn',sans-serif;font-size:18px;letter-spacing:.4px;text-transform:uppercase;transition:background .2s}
.zx-search button svg{width:18px;height:18px}
.zx-search input[type=text]::placeholder{color:#b4bcc4;opacity:1}   /* підказка в полі пошуку — світла, не сперечається з введеним текстом */
.zx-ex{margin-top:10px;font-size:13px}
.zx-ex a{text-decoration:underline!important}
/* Алфавіт — в один рядок, клітинки однакові */
.zx-letters{display:flex;flex-wrap:nowrap;gap:2px;margin:0 0 20px}
.zx-letters a{flex:1 1 0;display:flex;align-items:center;justify-content:center;min-width:0;height:34px;padding:0;border-radius:6px;font-weight:600;font-size:14px;text-decoration:none!important;transition:all .15s}
.zx-mhead{display:flex;align-items:baseline;gap:8px;margin:4px 0 12px}
.zx-mhead b{font-size:16px}
.zx-mhead span{font-size:13px;color:#fff;background:var(--brand);border-radius:10px;padding:1px 8px}
.zx-mhead{align-items:center}
.zx-mf{margin-left:auto;width:260px;max-width:50%;height:38px;padding:0 12px;border:1px solid #d5dce1;border-radius:6px;font-size:14px;font-family:inherit;outline:none}
.zx-mf:focus{border-color:var(--brand)}
/* Серія зліва, моделі праворуч — компактно */
.zx-grp{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:start;padding:10px 0;border-bottom:1px solid var(--zx-line)}
.zx-grp:last-child{border-bottom:0}
.zx-grp-t{font-family:'HelveticaNeueLTStd-BdCn',sans-serif;font-size:19px;line-height:32px;color:var(--brand)}
/* Моделі — рівна сітка однакових клітинок, звичайний темний текст */
.zx-models{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:2px 6px}
.zx-models a{display:flex;align-items:center;height:30px;padding:0 8px;border-radius:6px;font-family:'Google Sans',sans-serif;font-size:14px;font-weight:500;letter-spacing:.2px;color:var(--zx-tx)!important;text-decoration:none!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s,color .15s}
.zx-models a:hover{background:var(--zx-soft);color:var(--brand)!important}
.zx-h2{font-family:'HelveticaNeueLTStd-BdCn',sans-serif;font-size:20px;text-transform:uppercase;margin:0 0 10px}

/* --- Б: бірюзовий банер --- */
.zx-b .zx-hero{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;border-radius:10px;padding:28px 30px}
.zx-b .zx-hero h1{color:#fff}
.zx-b .zx-lead,.zx-b .zx-ex{color:rgba(255,255,255,.85)}
.zx-b .zx-ex a{color:#fff!important}
.zx-b .zx-search{box-shadow:0 6px 20px rgba(0,0,0,.15)}
.zx-b .zx-search button{background:var(--red)}
.zx-b .zx-search button:hover{background:var(--red-dark)}
.zx-b .zx-letters{gap:2px;padding-bottom:12px;border-bottom:1px solid var(--zx-line)}
.zx-b .zx-letters a{color:var(--zx-mut)}
.zx-b .zx-letters a:hover{color:var(--brand)}
.zx-b .zx-letters a.on{background:var(--brand);color:#fff}

/* --- А: світлий, у стилі каталогу --- */
.zx-a .zx-hero h1{color:var(--brand)}
.zx-a .zx-search{border:1px solid #d5dce1;overflow:visible;gap:8px;border:0}
.zx-a .zx-search input[type=text]{border:1px solid #d5dce1;border-radius:6px}
.zx-a .zx-search input[type=text]:focus{border-color:var(--brand)}
.zx-a .zx-search button{background:var(--brand);border-radius:6px}
.zx-a .zx-search button:hover{background:var(--brand-dark)}
.zx-a .zx-ex{color:var(--zx-mut)}
.zx-a .zx-ex a{color:var(--brand-dark)!important}
.zx-a .zx-letters a{border:1px solid var(--zx-line);color:var(--zx-tx)}
.zx-a .zx-letters a:hover{border-color:var(--brand);color:var(--brand)}
.zx-a .zx-letters a.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* --- С: як сторінка «Сервіс» --- */
.zx-s .zx-hero{position:relative;overflow:hidden;background:#eaf2f4;border-radius:10px;padding:36px 40px}
.zx-s .zx-hero::after{content:'';position:absolute;right:-120px;top:-120px;width:380px;height:380px;border-radius:50%;background:rgba(31,131,159,.06);pointer-events:none}
.zx-s .zx-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-family:'HelveticaNeueLTStd-BdCn',sans-serif;font-size:14px;letter-spacing:1px;text-transform:uppercase;color:var(--brand)}
.zx-s .zx-eyebrow::before{content:'';width:28px;height:2px;background:var(--brand)}
.zx-s .zx-hero h1{color:var(--zx-tx);font-size:38px}
.zx-s .zx-search{border:1px solid #d5dce1;background:#fff}
.zx-s .zx-search button{background:var(--brand);margin:5px;border-radius:6px}
.zx-s .zx-search button:hover{background:var(--brand-dark)}
.zx-s .zx-ex{color:var(--zx-mut)}
.zx-s .zx-ex a{color:var(--brand-dark)!important}
.zx-s .zx-stats{position:relative;z-index:1;flex:0 0 320px;background:#fff;border-radius:10px;box-shadow:0 8px 28px rgba(15,23,42,.08);padding:6px 24px}
.zx-s .zx-stats div{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--zx-line)}
.zx-s .zx-stats div:last-child{border-bottom:0}
.zx-s .zx-stats b{flex:0 0 auto;min-width:96px;white-space:nowrap;font-family:'HelveticaNeueLTStd-BdCn',sans-serif;font-weight:normal;font-size:30px;color:var(--brand)}
.zx-s .zx-stats span{font-family:'HelveticaNeueLTStd-BdCn',sans-serif;font-size:15px;text-transform:uppercase;color:var(--zx-mut);line-height:1.2}
.zx-s .zx-letters a{background:#fff;border:1px solid var(--zx-line);color:var(--zx-tx)}
.zx-s .zx-letters a:hover{border-color:var(--brand);color:var(--brand)}
.zx-s .zx-letters a.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* --- Пошук запчастини за кодом: картки --- */
.zx .zap-flex-container{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.zx .zap-flex-card{display:flex!important;flex-direction:column;justify-content:space-between;gap:10px;width:auto!important;margin:0!important;padding:14px 16px!important;background:#fff!important;border:1px solid var(--zx-line)!important;border-radius:10px!important;box-shadow:none!important}
.zx .zap-card-kode a{font-family:'HelveticaNeueLTStd-BdCn',sans-serif;font-size:18px;color:var(--brand)!important;text-decoration:none!important}
.zx .zap-card-name a{font-size:14px;color:var(--zx-tx)!important;text-decoration:none!important}
.zx .zap-card-bottom{display:flex;align-items:center;justify-content:space-between}
.zx .zap-card-price{font-family:'HelveticaNeueLTStd-BdCn',sans-serif;font-size:20px}
.zx .zap-card-none{font-size:13px;color:#94a3b8}
.zx .zap-search-wrap{margin:0 0 24px}

/* --- Сторінка моделі: таблиця запчастин --- */
.zx-mh1{font-family:'HelveticaNeueLTStd-BdCn',sans-serif;text-transform:uppercase}
.zx-mh1 span{color:var(--brand)}
.zx .zap-table-box{border:1px solid var(--zx-line)!important;border-radius:10px!important;box-shadow:none!important}
.zx .zap-table-box th{background:#f6f8fa!important;color:var(--zx-mut)!important;font-size:10px!important;font-weight:600!important;text-transform:uppercase;letter-spacing:.4px}
.zx .zap-table-box td{border-color:var(--zx-line)!important}
.zx .zap-table-box tbody tr:hover td{background:var(--zx-soft)!important}
.zx .zap-kode-text{font-family:'HelveticaNeueLTStd-BdCn',sans-serif;font-size:14px;color:var(--brand)}
.zx .zap-price{font-family:'HelveticaNeueLTStd-BdCn',sans-serif;font-size:16px!important}
.zx .zap-status-none{font-family:inherit;font-size:12.5px;color:#94a3b8}
.zx-pos{color:var(--zx-mut);font-weight:600;font-size:13px}
.zx .zap-zamina-box{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:6px;background:#fff6e5;color:#9a6200;font-size:12px}
.zx .zap-table-box .add_to_cart{color:var(--brand)!important;background:none!important}
.zx .zap-table-box .add_to_cart:hover{color:var(--brand-dark)!important}

@media (max-width:768px){
    .zx-hero{flex-direction:column;align-items:stretch;gap:16px}
    .zx-b .zx-hero,.zx-s .zx-hero{padding:20px 16px}
    .zx-hero h1,.zx-s .zx-hero h1{font-size:26px}
    .zx-search button span{display:none}
    .zx-search button{padding:0 18px}
    .zx-s .zx-stats{flex:none;padding:2px 16px}
    .zx-s .zx-stats div{padding:10px 0}
    .zx-s .zx-stats b{min-width:80px;font-size:24px}
    .zx-grp{grid-template-columns:52px minmax(0,1fr);gap:8px}
    .zx-letters{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:6px}
    .zx-letters::-webkit-scrollbar{display:none}
    .zx-letters a{flex:0 0 32px}
    /* Алфавіт прилипає вгорі, поки гортаєш список моделей */
    .zx-letters{position:sticky;top:0;z-index:50;background:#fff;margin:0 -2.5% 14px!important;padding:8px 2.5% 8px!important;box-shadow:0 4px 10px -8px rgba(15,23,42,.25)}
    .zx-models{grid-template-columns:repeat(3,minmax(0,1fr))}
    .zx-mhead{flex-wrap:wrap}
    .zx-mf{width:100%;max-width:none;margin:6px 0 0;height:42px;font-size:16px}
    .zx .zap-flex-container{grid-template-columns:1fr}
    .zx-pos{font-size:11.5px}
}

/* ============ ЗАПЧАСТИНИ у картці товару (modules/inc/zapchasti.php) ============ */
/* Таблиця запчастин — як на сторінці «Запчастини» (parts.php) */
.zp{--zx-line:#e3e8ec;--zx-mut:#595959;--zx-tx:#2a2d30;--zx-soft:#eef7f9}
.zp .zap-table-box{border:1px solid var(--zx-line)!important;border-radius:10px!important;box-shadow:none!important}
.zp .zap-table-box th{background:#f6f8fa!important;color:var(--zx-mut)!important;font-size:10px!important;font-weight:600!important;text-transform:uppercase;letter-spacing:.4px}
.zp .zap-table-box td{border-color:var(--zx-line)!important}
.zp .zap-table-box tbody tr:hover td{background:var(--zx-soft)!important}
.zp .zap-kode-text{font-family:'HelveticaNeueLTStd-BdCn',sans-serif;font-size:14px;color:var(--brand)}
.zp .zap-price{font-family:'HelveticaNeueLTStd-BdCn',sans-serif;font-size:16px!important}
.zp .zap-status-none{font-family:inherit;font-size:12.5px;color:#94a3b8}
.zp .zx-pos{color:var(--zx-mut);font-weight:600;font-size:13px}
.zp .zap-zamina-box{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:6px;background:#fff6e5;color:#9a6200;font-size:12px}
.zp .zap-table-box .add_to_cart{color:var(--brand)!important;background:none!important}
.zp .zap-table-box .add_to_cart:hover{color:var(--brand-dark)!important}
@media (max-width:768px){ .zp .zx-pos{font-size:11.5px} }

/* ================= Передкошик (inbag.php + ajax.js) ================= */
/* Хрестик усіх модальних вікон — спокійний сірий */
.mdl-close{width:32px!important;height:32px!important;top:14px!important;right:14px!important;border:0!important;border-radius:50%!important;background:#f1f4f6!important;color:#595959!important;font-size:22px!important;line-height:32px!important;opacity:1!important}
.mdl-close:hover{background:#e3e8ec!important;color:#2a2d30!important;transform:none!important}

.mdl-box--wide{max-width:860px}
.ib-head{padding:18px 60px 18px 28px!important}
.ib-head .mdl-title{display:flex;align-items:baseline;gap:10px;font-size:22px!important;color:#2a2d30}
.ib-count{font-family:'Google Sans',sans-serif;font-size:14px;letter-spacing:0;text-transform:none;color:#8a949c;font-weight:400}
.ib-body{padding:4px 28px!important}

.ib-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto 130px 32px;grid-template-areas:"img info qty price del";align-items:center;gap:8px 18px;padding:16px 0;border-bottom:1px solid #edf1f4}
.ib-row:last-child{border-bottom:0}
.ib-img{grid-area:img;display:flex;align-items:center;justify-content:center;width:64px;height:64px;border:1px solid #edf1f4;border-radius:8px;background:#fff;overflow:hidden}
.ib-img img{max-width:88%;max-height:88%;width:auto;height:auto;object-fit:contain}
.ib-info{grid-area:info;min-width:0}
.ib-name{display:block;font-size:15px;line-height:1.35;color:#2a2d30!important;text-decoration:none!important}
a.ib-name:hover{color:var(--brand-dark)!important}
.ib-sku{margin-top:4px;font-size:13px;color:#8a949c}
.ib-pre{margin-top:4px;font-size:12.5px;color:#b45309}

.ib-qty{grid-area:qty;display:inline-flex;align-items:stretch;height:38px;border:1px solid #d5dce1;border-radius:6px;overflow:hidden;background:#fff}
.ib-step{width:36px;border:0;background:#fff;color:#2a2d30;font-size:20px;line-height:1;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
.ib-step:hover{background:#f1f4f6}
.ib-step:disabled{color:#c9d0d6;cursor:default;background:#fff}
.ib-qty input{width:42px;border:0;border-left:1px solid #edf1f4;border-right:1px solid #edf1f4;text-align:center;font-size:16px;color:#2a2d30;padding:0;outline:none;-moz-appearance:textfield;appearance:textfield;background:#fff}
.ib-qty input::-webkit-outer-spin-button,.ib-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.ib-price{grid-area:price;text-align:right;line-height:1.15}
.ib-old{display:block;font-size:13px;color:#9aa3ab}
.ib-sum{font-family:'HelveticaNeueLTStd-BdCn',sans-serif;font-size:23px;color:#2a2d30;white-space:nowrap}
.ib-sum small{font-size:15px}
.ib-price.is-promo .ib-sum{color:var(--red)}
.ib-unit{margin-top:3px;font-size:12.5px;color:#8a949c;white-space:nowrap}
.ib-unit[hidden]{display:none!important}

.ib-del{grid-area:del;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:none;color:#b4bcc4;cursor:pointer}
.ib-del:hover{background:#fdecec;color:var(--red)}

.ib-empty{text-align:center;padding:44px 0 36px;color:#595959}
.ib-empty p{margin:12px 0 22px;font-size:18px}

.ib-foot{padding:16px 28px 22px!important;background:#fafbfc!important}
.ib-free{margin:0 0 14px}
.ib-free-t{font-size:13.5px;color:#595959;margin-bottom:6px}
.ib-free-t b{color:#2a2d30}
.ib-free-bar{height:6px;border-radius:3px;background:#e3e8ec;overflow:hidden}
.ib-free-bar i{display:block;height:100%;border-radius:3px;background:var(--brand);transition:width .25s}
.ib-free.is-done .ib-free-t{color:var(--brand-dark);font-weight:600}
.ib-total{display:flex;justify-content:flex-end;align-items:baseline;gap:12px;margin:0 0 16px;font-size:17px;color:#595959}
.ib-total b{font-family:'HelveticaNeueLTStd-BdCn',sans-serif;font-weight:normal;font-size:32px;line-height:1;color:#2a2d30}
.ib-total b small{font-size:18px}
.ib-actions{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ib-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:48px;padding:0 24px;border-radius:6px;box-sizing:border-box;cursor:pointer;text-decoration:none!important;font-size:16px;transition:.2s}
.ib-btn-ghost{background:#fff;border:1px solid #d5dce1;color:#595959;font-family:'Google Sans',sans-serif}
.ib-btn-ghost:hover{border-color:#9aa3ab;color:#2a2d30}
.ib-btn-go{min-width:260px;border:0;background:var(--red);color:#fff!important;font-family:'HelveticaNeueLTStd-BdCn',sans-serif;font-size:19px;text-transform:uppercase;letter-spacing:.3px}
.ib-btn-go:hover{background:#c9141c}

/* Планшет / телефон: вікно не вище за екран, список гортається всередині, підсумок завжди видно */
@media (max-width:991px){
    #mdl-root .mdl-overlay--bag .mdl-box--wide{display:flex!important;flex-direction:column!important;overflow:hidden!important;
        max-height:calc(100vh - 24px)!important;max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important}
    #mdl-root .mdl-overlay--bag .ib-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
}
/* Телефон: шторка знизу */
@media (max-width:640px){
    #mdl-root .mdl-overlay--bag{align-items:flex-end!important;padding:calc(16px + env(safe-area-inset-top)) 0 0!important}
    #mdl-root .mdl-overlay--bag .mdl-box--wide{width:100%!important;max-width:100%!important;margin:auto 0 0!important;border:0!important;border-radius:16px 16px 0 0!important;
        max-height:calc(100vh - 16px)!important;max-height:calc(100dvh - 16px - env(safe-area-inset-top))!important}
    .ib-head{padding:14px 56px 14px 18px!important}
    .ib-head .mdl-title{font-size:20px!important}
    .mdl-overlay--bag .mdl-close{top:10px!important;right:12px!important}
    .ib-body{padding:0 18px!important}
    .ib-row{grid-template-columns:56px minmax(0,1fr) auto;grid-template-areas:"img info del" "img qty price";gap:10px 12px;align-items:start;padding:14px 0}
    .ib-img{width:56px;height:56px}
    .ib-name{font-size:14px}
    .ib-sku{font-size:12px}
    .ib-del{margin:-6px -6px 0 0;justify-self:end}
    .ib-qty{align-self:center;justify-self:start;height:36px}
    .ib-price{align-self:center}
    .ib-sum{font-size:21px}
    .ib-foot{padding:12px 18px calc(14px + env(safe-area-inset-bottom))!important}
    .ib-free{margin-bottom:10px}
    .ib-free-t{font-size:12.5px}
    .ib-total{margin-bottom:12px;font-size:15px}
    .ib-total b{font-size:28px}
    .ib-actions{flex-direction:column-reverse;gap:4px}
    .ib-btn{width:100%}
    .ib-btn-go{min-width:0;height:50px}
    .ib-btn-ghost{height:40px;border:0;background:none;font-size:15px}
}

/* ================= Реєстрація (modules/registration.php) ================= */
.reg-wrap .chk-head { align-items: baseline; }
.rg-login { font-size: 15px; color: #595959; }
.rg-login a { color: var(--brand-dark); font-weight: 600; text-decoration: none; margin-left: 4px; }
.rg-login a:hover { text-decoration: underline; }
.rg-perks { list-style: none; margin: -6px 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-family: 'Google Sans', sans-serif; font-size: 14px; color: #595959; }
.rg-perks li { position: relative; padding-left: 24px; margin: 0; }
.rg-perks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f839f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat; }
.rg .row { margin-bottom: 14px; }
.rg .field label { font-family: 'Google Sans', sans-serif; }
.rg-pw { position: relative; }
.rg-pw .input { padding-right: 46px !important; }
.rg-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: #9aa3ab; cursor: pointer; border-radius: 6px; }
.rg-eye:hover, .rg-eye.on { color: var(--brand); }
.rg-hint, .rg-err { display: block; margin-top: 5px; font-family: 'Google Sans', sans-serif; font-size: 12.5px; color: #8a949c; }
.rg-hint.err { color: var(--red); }
.rg-err { display: none; color: var(--red); }
.rg-err.on { display: block; }
.rg .reg-btn-wrapper { margin-top: 18px; }
.rg .btn-submit { width: 100%; margin: 0 !important; }
.rg-note { margin: 10px 0 0; font-family: 'Google Sans', sans-serif; font-size: 13px; color: #8a949c; text-align: center; }
@media (max-width: 768px) {
    .reg-wrap .chk-head { gap: 4px; }
    .rg-perks { flex-direction: column; gap: 6px; margin: -4px 0 16px; font-size: 13.5px; }
}

/* Підказка під полем, коли ввели недозволений символ (ajax.js, data-only) */
.only-tip { display: none; margin-top: 5px; font-size: 12.5px; line-height: 1.35; color: var(--red); font-family: 'Google Sans', sans-serif; }
.only-tip.on { display: block; }

/* Текст лише для екранних читачів / пошуковиків / AI-агентів — на екрані не видно (напр. «Головна» в хлібних крихтах) */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }


/* Пошук запчастин: «Показати ще» */
.zap-more-hidden, .zx .zap-flex-card.zap-more-hidden { display: none !important; }
.zap-more { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 18px 0 6px; }
.zap-more-btn { height: 44px; padding: 0 28px; border: 1px solid var(--brand); border-radius: 6px; background: #fff; color: var(--brand); font-family: 'HelveticaNeueLTStd-BdCn', sans-serif; font-size: 16px; text-transform: uppercase; letter-spacing: .3px; cursor: pointer; transition: .2s; }
.zap-more-btn:hover { background: var(--brand); color: #fff; }
.zap-more-info { font-size: 13px; color: #94a3b8; }

/* Поки фото товару/категорії вантажиться — не показуємо його alt-текст */
.ins img, .tns span.f img { color: transparent; }

/* Статуси запчастин без ціни: однаковий шрифт і розмір, різний колір + hover */
.zap-status-none.zap-st,
.zap-table-box .zap-status-none.zap-st {
    font-family: 'Google Sans', Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}
/* «Не поставляється» — сірий (лише span, щоб не перебивати колір посилань) */
.zap-table-box span.zap-status-none.zap-st, span.zap-status-none.zap-st { color: #94a3b8; }
.zap-table-box a.zap-status-none.zap-st {
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: color .15s, border-color .15s;
}
.zap-table-box a.zap-status-none.zap-st-ask, a.zap-status-none.zap-st-ask { color: #b45309; }
.zap-table-box a.zap-status-none.zap-st-ask:hover, a.zap-status-none.zap-st-ask:hover { color: #92400e; border-bottom-color: currentColor; text-decoration: none; }
.zap-table-box a.zap-status-none.zap-st-order, a.zap-status-none.zap-st-order { color: #1f839f; }
.zap-table-box a.zap-status-none.zap-st-order:hover, a.zap-status-none.zap-st-order:hover { color: #176a80; border-bottom-color: currentColor; text-decoration: none; }

.modern-page h2 { font-size: 22px; margin-top: 30px; }
.modern-page > h2:first-child, .modern-page > *:first-child h2:first-child { margin-top: 10px; }