/* ===================================================================== KOTARCO — етап 1: виправлення з фото 1, 2, 3, 4, 6 + єдині контейнери Підключати ОСТАННІМ, після kotarco-extra.css. ===================================================================== */ /* --------------------------------------------------------------------- 0. ЄДИНІ ВІДСТУПИ КОНТЕЙНЕРА (еталон — сторінка /brands/) max-width 1320px + 15px з боків, на планшеті/мобільному 20/16px. Раніше окремі секції додавали власні padding і блоки «їхали». --------------------------------------------------------------------- */ .container, .kBundle > .container, .kPFaq > .container{ max-width:1320px; width:100%; margin-inline:auto; padding-left:15px; padding-right:15px; box-sizing:border-box; } @media (max-width:1199px){ .container{padding-left:20px;padding-right:20px} } @media (max-width:575px){ .container{padding-left:16px;padding-right:16px} } /* секції не додають власних бокових відступів поверх контейнера */ .kBundle,.kPFaq{padding-left:0;padding-right:0} /* --------------------------------------------------------------------- 1. ФОТО 1 — «Разом дешевше» по ширині контейнера, як блок вище Блок сидів вужче сусідніх карток: коробка не тягнулась на всю ширину, а рядок товарів центрувався по вмісту. --------------------------------------------------------------------- */ .kBundle{padding-top:8px;padding-bottom:26px} .kBundle-box{ width:100%; box-sizing:border-box; margin:0; /* жодних auto-полів — рівняємось по контейнеру */ background:#fffdf6; border:1px solid #f0e4c4; border-radius:20px; padding:26px 28px; } .kBundle-row{ display:flex; align-items:stretch; gap:16px; flex-wrap:nowrap; /* товари в один ряд, підсумок притиснуто вправо */ width:100%; } .kBundle-item{flex:0 1 170px;min-width:0;display:flex;flex-direction:column;gap:8px;width:auto} .kBundle-img{width:100%;height:130px;flex:0 0 auto} .kBundle-plus{flex:0 0 auto;align-self:center} .kBundle-total{ margin-left:auto; flex:0 0 auto; display:flex; flex-direction:column; justify-content:center; align-items:flex-end; gap:8px; padding-left:24px; border-left:1px solid #f0e4c4; min-width:210px; } .kBundle-btn{white-space:nowrap} @media (max-width:991px){ .kBundle-row{flex-wrap:wrap} .kBundle-item{flex:1 1 calc(33.333% - 24px)} .kBundle-total{ margin-left:0;width:100%;align-items:center; padding-left:0;padding-top:18px;border-left:0;border-top:1px solid #f0e4c4; } .kBundle-btn{width:100%;justify-content:center} } @media (max-width:575px){ .kBundle-box{padding:18px 16px;border-radius:16px} .kBundle-item{flex:1 1 calc(50% - 22px)} .kBundle-img{height:112px} } /* --------------------------------------------------------------------- 2. ФОТО 2 — ціна + кількість + «Додати в кошик» в ОДИН рядок, «Купити в 1 клік» — окремим рядком нижче. --------------------------------------------------------------------- */ .productSS .product-price-box{display:flex;flex-direction:column;gap:12px} .kBuyRow{ display:flex; align-items:center; gap:14px; flex-wrap:nowrap; /* ключове: більше не переносить */ margin:0; width:100%; } .kBuyRow .product-price-row, .kBuyRow .kBuyPrice{ display:flex;align-items:baseline;gap:9px;margin:0; flex:0 0 auto;white-space:nowrap; } .kBuyRow .product-price-current{font-size:30px;font-weight:700;color:#181818;line-height:1} .kBuyRow .product-price-old{font-size:15px;color:#a9a5a0;text-decoration:line-through} .kBuyRow .product-discount-badge{background:#e0483c;color:#fff;border-radius:8px;padding:3px 7px;font-size:12px;font-weight:700} .kBuyRow .wg-quantity{ flex:0 0 132px;height:56px;margin:0;border-radius:999px;border:1px solid #dcd9d4; display:flex;align-items:center;justify-content:space-between;background:#fff;padding:0 4px; } .kBuyRow .wg-quantity .quantity-product{border:0;text-align:center;width:44px;font-size:16px;background:transparent} .kBuyRow .wg-quantity .btn-quantity{width:40px;text-align:center;cursor:pointer;user-select:none;font-size:20px;color:#5f5c57;line-height:1} .kBuyRow .productBtnCatsas{ flex:1 1 auto;min-width:0;height:56px; display:flex;align-items:center;justify-content:center;gap:8px; border-radius:999px;margin:0;white-space:nowrap; } .kBuyRow .productBtnCatsas svg{flex:0 0 auto} .kBuyOneClick{ width:100%;height:54px;display:flex;align-items:center;justify-content:center; border-radius:999px;margin:0 !important; } @media (max-width:1199px){ .kBuyRow .product-price-current{font-size:26px} .kBuyRow .wg-quantity{flex:0 0 120px;height:52px} .kBuyRow .productBtnCatsas{height:52px} } @media (max-width:767px){ /* на телефоні ціна лишається зверху, кількість і кнопка — в один рядок */ .kBuyRow{flex-wrap:wrap} .kBuyRow .product-price-row{flex:1 0 100%;margin-bottom:2px} .kBuyRow .wg-quantity{flex:0 0 116px} .kBuyRow .productBtnCatsas{flex:1 1 160px} } /* --------------------------------------------------------------------- 3. ФОТО 3 — ціна в картці каталогу зникала при наведенні Причина: .price був блоком, кнопка «+» з display:flex ставала блоковою та з margin-left:auto перекривала/витісняла рядок ціни. Робимо явний flex-рядок: текст ціни зліва, кнопка справа, і жорстко фіксуємо видимість тексту. --------------------------------------------------------------------- */ .card-product .card-product-info .price{ display:flex !important; align-items:center; justify-content:space-between; gap:12px; flex-wrap:nowrap; margin:10px 0 0; min-height:48px; } .card-product .card-product-info .price > span{ display:flex; flex:1 1 auto; min-width:0; flex-wrap:wrap; align-items:center; gap:6px; /* ціна видима завжди, у будь-якому стані картки */ opacity:1 !important; visibility:visible !important; color:#181818 !important; position:relative; z-index:2; } .card-product:hover .card-product-info .price > span, .card-product .card-product-wrapper:hover ~ .card-product-info .price > span{ opacity:1 !important; visibility:visible !important; color:#181818 !important; } .card-product .card-product-info .price .old-price{ color:#a9a5a0 !important; text-decoration:line-through; font-size:.6em; font-weight:600; } .card-product .card-product-info .price > .btn-main-product, .card-product .card-product-info .price > .shopCardItemBtn{ flex:0 0 auto !important; margin-left:0 !important; position:static; /* не спливає над ціною */ z-index:1; } /* --------------------------------------------------------------------- 4. ФОТО 6 — типографіка SEO-тексту в каталозі Було: заголовки величезні, абзаци на всю ширину без ритму, текст «висів» без рамки. Класи вже є у шаблоні (.kCatTextTop / .kCatTextBottom) — просто даємо їм нормальний вигляд. --------------------------------------------------------------------- */ .kCatTextTop{ padding-top:26px; max-width:1320px; margin-inline:auto; } .kCatTextBottom{ margin-top:52px; padding:44px 48px; border-top:0; background:#fbfaf8; border:1px solid #eeebe5; border-radius:22px; max-width:100%; } .kProse, .kCatTextTop, .kCatTextBottom{color:#3a3833;font-size:16.5px;line-height:1.72} .kProse h2,.kCatTextTop h2,.kCatTextBottom h2{ font-size:clamp(22px,2.2vw,30px); line-height:1.22;font-weight:600;letter-spacing:-.01em; margin:34px 0 10px;color:#181818; } .kCatTextTop h2:first-child,.kCatTextBottom h2:first-child,.kProse h2:first-child{margin-top:0} .kProse h3,.kCatTextTop h3,.kCatTextBottom h3{ font-size:clamp(18px,1.6vw,22px);font-weight:600;margin:26px 0 8px;color:#181818; } .kProse p,.kCatTextTop p,.kCatTextBottom p{margin:0 0 14px;max-width:74ch;color:#3a3833;line-height:1.72} .kProse ul,.kProse ol, .kCatTextTop ul,.kCatTextTop ol, .kCatTextBottom ul,.kCatTextBottom ol{margin:0 0 16px;padding-left:22px;max-width:74ch} .kProse li,.kCatTextTop li,.kCatTextBottom li{margin:0 0 7px} .kProse a,.kCatTextTop a,.kCatTextBottom a{ color:#181818;text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px;text-decoration-color:#c9c4ba; transition:text-decoration-color .15s;opacity:1; } .kProse a:hover,.kCatTextTop a:hover,.kCatTextBottom a:hover{text-decoration-color:#181818;opacity:1} .kProse strong,.kCatTextTop strong,.kCatTextBottom strong{font-weight:600;color:#181818} .kProse table,.kCatTextBottom table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:15px} .kProse th,.kProse td,.kCatTextBottom th,.kCatTextBottom td{ border-bottom:1px solid #ebe8e2;padding:10px 12px;text-align:left;vertical-align:top; } .kProse th,.kCatTextBottom th{font-weight:600;color:#181818;background:#f6f4f0} @media (max-width:767px){ .kCatTextBottom{margin-top:34px;padding:26px 20px;border-radius:16px} .kProse,.kCatTextTop,.kCatTextBottom{font-size:16px;line-height:1.68} } /* --------------------------------------------------------------------- 5. ФОТО 4 — низ статті в блозі Було: чорна плашка розпливалась до правого краю, пігулка «Усі статті» висіла над нею без відступу, текст і кнопка не вирівняні. --------------------------------------------------------------------- */ .kPost-foot{margin-top:44px} .kPost-backRow{margin:0 0 20px} .kPost-back{ display:inline-flex;align-items:center;gap:8px;margin:0; padding:11px 20px;border-radius:999px; background:#fff;border:1px solid #e6e3dd;color:#181818; font-size:15px;font-weight:500;text-decoration:none; transition:border-color .15s,background .15s; } .kPost-back:hover{background:#faf9f7;border-color:#181818;color:#181818;text-decoration:none} .kPost-cta{ display:flex;align-items:center;justify-content:space-between; gap:28px;flex-wrap:wrap; width:100%;max-width:100%;box-sizing:border-box; margin:0; /* не вилазить за колонку */ background:#181818;color:#fff; border-radius:22px; /* усі чотири кути, не лише верхні */ padding:34px 40px; } .kPost-cta-text{flex:1 1 320px;min-width:0} .kPost-cta h4{ margin:0 0 8px;color:#fff; font-size:clamp(20px,1.9vw,25px);font-weight:600;line-height:1.25;letter-spacing:-.01em; } .kPost-cta p{margin:0;color:rgba(255,255,255,.72);font-size:15.5px;line-height:1.55} .kPost-cta .tf-btn{ flex:0 0 auto;display:inline-flex;align-items:center;gap:10px; background:#fff;color:#181818;border-radius:999px; padding:15px 28px;font-size:15.5px;font-weight:600;white-space:nowrap; transition:transform .15s,box-shadow .15s; } .kPost-cta .tf-btn:hover{background:#fff;color:#181818;transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.28)} @media (max-width:767px){ .kPost-cta{padding:26px 22px;border-radius:18px;flex-direction:column;align-items:stretch;gap:18px} .kPost-cta .tf-btn{justify-content:center} } /* ===================================================================== 7. ВІДГУКИ: розділ, модалка, попап-запрошення ===================================================================== */ /* ---- Підсумок ---- */ .kRev-summary{ display:grid;grid-template-columns:auto 1fr auto;gap:36px;align-items:center; background:#fbfaf8;border:1px solid #eeebe5;border-radius:22px;padding:32px 36px;margin:0 0 18px; } .kRev-score{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:130px} .kRev-score-num{font-size:52px;font-weight:700;line-height:1;color:#181818} .kRev-score-stars{display:flex;gap:3px;color:#e9b949;font-size:16px} .kRev-score-cnt{font-size:13.5px;color:#8a8781} .kRev-bars{display:flex;flex-direction:column;gap:7px;min-width:0} .kRev-bar{display:flex;align-items:center;gap:10px;font-size:13px;color:#6b6862} .kRev-bar-k{flex:0 0 38px} .kRev-bar-track{flex:1 1 auto;height:8px;background:#eeebe5;border-radius:5px;overflow:hidden} .kRev-bar-fill{display:block;height:100%;background:#e9b949;border-radius:5px} .kRev-bar-n{flex:0 0 32px;text-align:right;font-weight:600;color:#181818} .kRev-cta{display:flex;flex-direction:column;gap:12px;align-items:stretch;min-width:250px} .kRev-reward{display:flex;align-items:flex-start;gap:12px;font-size:13.5px;line-height:1.5;color:#6b6862} .kRev-reward b{ flex:0 0 auto;background:#181818;color:#fff;border-radius:10px; padding:6px 11px;font-size:15px;font-weight:700; } .kRev-add{border-radius:999px;padding:14px 26px;justify-content:center} @media (max-width:991px){ .kRev-summary{grid-template-columns:1fr;gap:22px;padding:24px 20px} .kRev-cta{min-width:0} } /* ---- Аспекти сервісу ---- */ .kRev-aspects{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 22px} .kRev-aspect{ flex:1 1 180px;background:#fff;border:1px solid #eeebe5;border-radius:16px; padding:16px 18px;display:flex;flex-direction:column;gap:3px; } .kRev-aspect-n{font-size:24px;font-weight:700;color:#181818;line-height:1} .kRev-aspect-l{font-size:13.5px;color:#8a8781} /* ---- Вкладки ---- */ .kRev-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 24px} .kRev-tab{ padding:10px 20px;border-radius:999px;border:1px solid #e6e3dd;background:#fff; color:#4a4844;font-size:14.5px;font-weight:500;text-decoration:none;transition:all .15s; } .kRev-tab:hover{border-color:#181818;color:#181818} .kRev-tab.is-active{background:#181818;border-color:#181818;color:#fff} /* ---- Список ---- */ .kRev-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px} .kRev-item{ background:#fff;border:1px solid #eeebe5;border-radius:18px;padding:22px 24px; display:flex;flex-direction:column;gap:10px; } .kRev-item-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px} .kRev-author{font-weight:600;font-size:15.5px;color:#181818;display:block} .kRev-verified{ display:inline-flex;align-items:center;gap:5px;margin-top:4px; font-size:12px;color:#4d7c0f;font-weight:500; } .kRev-date{font-size:13px;color:#a9a5a0;white-space:nowrap;flex:0 0 auto} .kRev-stars{display:flex;gap:3px;color:#e9b949;font-size:14px} .kRev-text{margin:0;font-size:15.5px;line-height:1.65;color:#3a3833} .kRev-pc{display:flex;flex-direction:column;gap:5px;font-size:14px;line-height:1.55} .kRev-pro{margin:0;color:#3f6212} .kRev-con{margin:0;color:#9a3412} .kRev-product{ display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:14px; border-top:1px solid #f2efea;text-decoration:none;color:#181818; } .kRev-product-img{ width:46px;height:46px;flex:0 0 46px;border-radius:10px;overflow:hidden;background:#f6f4f0; } .kRev-product-img img{width:100%;height:100%;object-fit:cover} .kRev-product-name{ font-size:14px;font-weight:500;line-height:1.35; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .kRev-product:hover .kRev-product-name{text-decoration:underline;text-underline-offset:3px} .kRev-badge{ align-self:flex-start;margin-top:auto;padding:5px 12px;border-radius:999px; background:#f3f0ea;color:#6b6862;font-size:12.5px;font-weight:500; } .kRev-reply{ margin-top:6px;padding:12px 14px;border-left:3px solid #e9b949;background:#fffdf6; border-radius:0 10px 10px 0;font-size:14.5px;line-height:1.6;color:#4a4844; } .kRev-empty{text-align:center;padding:50px 20px;color:#8a8781} .kRev-empty p{margin:0 0 18px;font-size:16px} /* ---- Пагінація ---- */ .kRev-pag{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin:34px 0 8px} .kRev-pag-btn{ min-width:42px;height:42px;padding:0 12px;border-radius:999px; border:1px solid #e6e3dd;background:#fff;color:#181818; display:inline-flex;align-items:center;justify-content:center; font-size:14.5px;font-weight:500;text-decoration:none;transition:all .15s; } .kRev-pag-btn:hover{border-color:#181818;color:#181818} .kRev-pag-btn.is-active{background:#181818;border-color:#181818;color:#fff} .kRev-pag-gap{align-self:center;color:#a9a5a0;padding:0 2px} .kRev-pag-info{text-align:center;font-size:13.5px;color:#8a8781;margin:0} /* ---- Модалка ---- */ .kRevModal{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:20px} .kRevModal[hidden]{display:none} .kRevModal-back{position:absolute;inset:0;background:rgba(24,24,24,.55);backdrop-filter:blur(2px)} .kRevModal-box{ position:relative;z-index:1;background:#fff;border-radius:22px; width:100%;max-width:600px;max-height:92vh;overflow:auto;padding:34px 36px; box-shadow:0 24px 70px rgba(0,0,0,.3); } .kRevModal-x{ position:absolute;top:16px;right:18px;background:none;border:0;font-size:30px;line-height:1; color:#a9a5a0;cursor:pointer;padding:4px 8px; } .kRevModal-x:hover{color:#181818} .kRevModal-title{margin:0 0 12px;font-size:24px;font-weight:600;letter-spacing:-.01em} .kRevModal-reward{ margin:0 0 20px;padding:13px 16px;background:#fffdf6;border:1px solid #f0e4c4; border-radius:12px;font-size:14.5px;line-height:1.55;color:#6b5a35; } .kRevModal-reward b{color:#a5701a} .kRevForm-switch{display:flex;gap:8px;margin:0 0 14px} .kRevForm-switch[hidden]{display:none} .kRevForm-switch button{ flex:1 1 0;padding:11px 14px;border-radius:999px;border:1px solid #e6e3dd; background:#fff;color:#4a4844;font-size:14.5px;font-weight:500;cursor:pointer;transition:all .15s; } .kRevForm-switch button.is-active{background:#181818;border-color:#181818;color:#fff} .kRevForm-hint{margin:0 0 18px;font-size:13.5px;color:#8a8781;line-height:1.5} .kRevForm-stars{display:flex;align-items:center;gap:12px;margin:0 0 12px;flex-wrap:wrap} .kRevForm-stars-l{flex:0 0 160px;font-size:14.5px;color:#4a4844} .kRevForm-stars-set{display:flex;gap:3px} .kRevForm-stars-set button{ background:none;border:0;padding:0 2px;font-size:26px;line-height:1; color:#e2ddd3;cursor:pointer;transition:color .12s; } .kRevForm-stars-set button.is-on{color:#e9b949} .kRevForm-stars--sm .kRevForm-stars-set button{font-size:19px} .kRevForm-stars--sm .kRevForm-stars-l{font-size:13.5px;color:#6b6862} .kRevForm-sub{ padding:14px 16px;background:#faf9f7;border-radius:14px;margin:0 0 18px; } .kRevForm-sub[hidden]{display:none} .kRevForm-sub .kRevForm-stars:last-of-type{margin-bottom:0} .kRevForm-product{margin:10px 0 0;font-size:13.5px;color:#8a8781} .kRevForm-row{display:flex;flex-direction:column;gap:6px;margin:0 0 14px} .kRevForm-row > span{font-size:13.5px;color:#6b6862} .kRevForm-row input, .kRevForm-row textarea{ width:100%;padding:12px 14px;border:1px solid #e2ddd3;border-radius:12px; font-size:15px;font-family:inherit;background:#fff;color:#181818;box-sizing:border-box; } .kRevForm-row textarea{resize:vertical;min-height:96px} .kRevForm-row input:focus, .kRevForm-row textarea:focus{outline:none;border-color:#181818} .kRevForm-two{display:grid;grid-template-columns:1fr 1fr;gap:0 14px} @media (max-width:575px){ .kRevForm-two{grid-template-columns:1fr} } .kRevForm-error{ margin:0 0 14px;padding:11px 14px;background:#fef2f2;border:1px solid #fecaca; border-radius:10px;color:#b3261e;font-size:14px; } .kRevForm-error[hidden]{display:none} .kRevForm-submit{width:100%;justify-content:center;border-radius:999px;padding:15px 24px;margin-top:4px} .kRevForm-note{margin:12px 0 0;font-size:12.5px;color:#a9a5a0;line-height:1.5;text-align:center} .kRevForm-done{text-align:center;padding:26px 10px} .kRevForm-done[hidden]{display:none} .kRevForm-done-ico{ width:60px;height:60px;margin:0 auto 16px;border-radius:50%; background:#dcfce7;color:#166534;display:flex;align-items:center;justify-content:center;font-size:30px; } .kRevForm-done h4{margin:0 0 8px;font-size:21px;font-weight:600} .kRevForm-done p{margin:0;color:#6b6862;font-size:15px;line-height:1.6} /* ---- Капча ---- */ .kCaptcha{margin:0 0 16px} .kCaptcha-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important} .kCaptcha-label{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .kCaptcha-label > span{font-size:14.5px;color:#4a4844;flex:0 0 auto} .kCaptcha-label input{ width:96px;padding:11px 14px;border:1px solid #e2ddd3;border-radius:12px; font-size:15px;font-family:inherit;background:#fff; } .kCaptcha-label input:focus{outline:none;border-color:#181818} /* ---- Попап-запрошення ---- */ .kRevInvite{ position:fixed;left:20px;bottom:20px;z-index:1070;width:calc(100% - 40px);max-width:360px; background:#fff;border:1px solid #e6e3dd;border-radius:18px;padding:20px 22px; box-shadow:0 16px 44px rgba(0,0,0,.16); opacity:0;transform:translateY(12px);transition:opacity .25s,transform .25s; } .kRevInvite[hidden]{display:none} .kRevInvite.is-in{opacity:1;transform:none} .kRevInvite-x{ position:absolute;top:8px;right:10px;background:none;border:0;font-size:24px; line-height:1;color:#c4c0b8;cursor:pointer;padding:2px 6px; } .kRevInvite-x:hover{color:#181818} .kRevInvite-body{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px} .kRevInvite-badge{ flex:0 0 auto;background:#181818;color:#fff;border-radius:12px; padding:9px 12px;font-size:16px;font-weight:700;line-height:1; } .kRevInvite-title{margin:0 0 4px;font-size:16px;font-weight:600;line-height:1.3;color:#181818} .kRevInvite-sub{margin:0;font-size:13.5px;line-height:1.5;color:#8a8781} .kRevInvite-actions{display:flex;gap:8px} .kRevInvite-go{ flex:1 1 auto;background:#181818;color:#fff;border:0;border-radius:999px; padding:12px 18px;font-size:14.5px;font-weight:600;cursor:pointer;transition:opacity .15s; } .kRevInvite-go:hover{opacity:.85} .kRevInvite-no{ flex:0 0 auto;background:none;border:0;color:#8a8781;font-size:14px; padding:12px 14px;cursor:pointer; } .kRevInvite-no:hover{color:#181818;text-decoration:underline} @media (max-width:575px){ .kRevInvite{left:12px;right:12px;width:auto;max-width:none;bottom:12px} .kRevModal-box{padding:26px 20px;border-radius:18px} } /* ===================================================================== 8. БЛОГ: категорії, сайдбар, вступ ===================================================================== */ .kBlogCats{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 26px} .kBlogCat{ display:inline-flex;align-items:center;gap:7px; padding:10px 18px;border-radius:999px;border:1px solid #e6e3dd;background:#fff; color:#4a4844;font-size:14.5px;font-weight:500;text-decoration:none;transition:all .15s; } .kBlogCat:hover{border-color:#181818;color:#181818} .kBlogCat.is-active{background:#181818;border-color:#181818;color:#fff} .kBlogCat em{font-style:normal;font-size:12.5px;opacity:.6} .kBlogIntro{ background:#fbfaf8;border:1px solid #eeebe5;border-radius:18px; padding:24px 28px;margin:0 0 30px; } .kBlogIntro p:last-child{margin-bottom:0} .kAside-cats{display:flex;flex-direction:column;gap:2px} .kAside-cat{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:10px 12px;border-radius:10px;color:#4a4844;font-size:14.5px; text-decoration:none;transition:background .15s,color .15s; } .kAside-cat:hover{background:#f6f4f0;color:#181818} .kAside-cat.is-active{background:#181818;color:#fff} .kAside-cat em{font-style:normal;font-size:12.5px;opacity:.55} .kPost-tag{ display:inline-block;margin-bottom:14px;padding:6px 14px;border-radius:999px; background:#f3f0ea;color:#4a4844;font-size:13px;font-weight:500;text-decoration:none; } .kPost-tag:hover{background:#181818;color:#fff} /* ===================================================================== 9. КОНТАКТИ: месенджери, карта без автозавантаження ===================================================================== */ .kContactMsg{display:flex;flex-direction:column;gap:7px} .kContactMsg a{ display:inline-flex;align-items:center;gap:8px;color:#181818;font-size:15px; text-decoration:underline;text-underline-offset:3px;text-decoration-color:#c9c4ba; } .kContactMsg a:hover{text-decoration-color:#181818} .kMap-box{ position:relative;border-radius:18px;overflow:hidden;border:1px solid #e6e3dd; background:#f3f0ea;min-height:320px; } .kMap-box iframe{display:block;width:100%;height:400px;border:0} .kMap-load{ position:absolute;inset:0;width:100%;border:0;cursor:pointer; background:#f3f0ea;display:flex;align-items:center;justify-content:center;gap:14px; font-family:inherit;color:#181818;text-align:left;padding:20px; } .kMap-load:hover{background:#eeebe5} .kMap-pin{font-size:30px;flex:0 0 auto} .kMap-load b{display:block;font-size:16px;font-weight:600;margin-bottom:4px} .kMap-load small{display:block;font-size:13.5px;color:#8a8781} .kMap-route{ display:inline-block;margin-top:14px;color:#181818;font-size:15px;font-weight:500; text-decoration:underline;text-underline-offset:3px; } /* ===================================================================== 10. Блок «залиште відгук» на картці товару ===================================================================== */ .kPRevCta{padding:34px 0 6px} .kPRevCta-box{ display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap; background:#fbfaf8;border:1px solid #eeebe5;border-radius:20px;padding:26px 30px; } .kPRevCta-box h4{margin:0 0 5px;font-size:19px;font-weight:600} .kPRevCta-box p{margin:0;font-size:14.5px;color:#8a8781;line-height:1.5} .kPRevCta-box .tf-btn{flex:0 0 auto;border-radius:999px;padding:13px 26px} @media (max-width:575px){ .kPRevCta-box{padding:20px 18px;flex-direction:column;align-items:stretch} .kPRevCta-box .tf-btn{justify-content:center} } /* ===================================================================== 11. Кабінет: знижки за відгуки ===================================================================== */ .kAccRewards{display:flex;flex-direction:column;gap:10px;margin:0 0 30px} .kAccReward{ display:flex;align-items:center;gap:14px;flex-wrap:wrap; background:#fbfaf8;border:1px solid #eeebe5;border-radius:14px;padding:14px 18px; } .kAccReward.is-used{opacity:.5} .kAccReward-pct{ flex:0 0 auto;background:#181818;color:#fff;border-radius:9px; padding:6px 11px;font-size:14px;font-weight:700; } .kAccReward-code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:16px;font-weight:600;letter-spacing:1px;color:#181818; } .kAccReward-meta{font-size:13px;color:#8a8781;margin-left:auto} .kAccInvite{ display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; background:#181818;color:#fff;border-radius:18px;padding:22px 26px;margin:0 0 30px; } .kAccInvite b{display:block;font-size:17px;margin-bottom:5px} .kAccInvite p{margin:0;font-size:14px;color:rgba(255,255,255,.7);line-height:1.5} .kAccInvite .tf-btn{flex:0 0 auto;background:#fff;color:#181818;border-radius:999px;padding:12px 24px} @media (max-width:575px){ .kAccReward-meta{margin-left:0;width:100%} .kAccInvite{flex-direction:column;align-items:stretch} .kAccInvite .tf-btn{justify-content:center} } /* ===================================================================== 12. ПРАВКИ 04.09 — фото 1–5 ===================================================================== */ /* ---- Фото 1. Підказки міст Нової Пошти пролазили ПІД наступну картку. Картки .kCo-card мають фон і йдуть у DOM після поля, тому малюються поверх випадаючого списку попередньої картки. Піднімаємо картку з відкритим списком вище сусідів. ---- */ .kCo-card{position:relative;z-index:1} .kCo-card:has(.coSuggest.is-open), .kCo-card.is-suggesting{z-index:60} .coSuggest,.kCo .coSuggest{z-index:70} /* ---- Фото 2. Текст сторінок (/faq/, /umovy-vykorystannia/ …) тягнеться на всю ширину блоку. Раніше обмежував 74ch — прибираю. ---- */ .kProse p,.kProse ul,.kProse ol, .kCatTextTop p,.kCatTextTop ul,.kCatTextTop ol, .kCatTextBottom p,.kCatTextBottom ul,.kCatTextBottom ol, .kPFaq-answer{max-width:none} .kInfoPage .kProse,.kFaq-intro,.kFaq-block,.kCatTextTop,.kCatTextBottom{max-width:100%} .blogItemContent p,.blogItemContent ul,.blogItemContent ol{max-width:none} /* ---- Фото 3. «Вже купували?» і «Разом дешевше» — тієї ж ширини, що блок опису над ними. Опис сидить у .productTabsWrap{max-width:1100px;margin:auto} (stylev3.css:529), а ці секції були на весь .container. Даємо їм ту саму ширину і центруємо — тепер усі блоки під товаром в одну лінію. ---- */ .kPRevCta-box, .kBundle-box, .kPFaq-box, .reviews-box > .container > .reviews-head, .reviews-box > .container > .reviews-list{ width:100%; max-width:1100px; margin-left:auto; margin-right:auto; } .kPRevCta,.kBundle,.kPFaq{padding-left:0;padding-right:0} /* ---- Фото 4. Вступ у каталозі — по центру, з нормальною мірою рядка ---- */ .kCatTextTop{ text-align:center; padding:30px 15px 6px; max-width:920px; margin-inline:auto; } .kCatTextTop p{margin:0 auto 12px;font-size:17px;line-height:1.7;color:#4a4844} .kCatTextTop h2,.kCatTextTop h3{text-align:center} .kCatTextTop a{color:#181818} /* ---- Фото 5. Фільтри: рядок не ламається, лічильник праворуч ---- */ .k-filters .k-fgroup{padding:18px 0;border-bottom:1px solid #eeebe5} .k-filters .k-fgroup:last-child{border-bottom:0} .k-filters .k-fgroup-title{ font-size:14px;font-weight:600;letter-spacing:.02em;text-transform:uppercase; color:#181818;margin:0 0 10px; } .k-filters .k-fvalues{display:flex;flex-direction:column;gap:2px} .k-filters .k-fcheck{ display:flex;align-items:center;gap:11px; padding:7px 8px;margin:0 -8px;border-radius:9px; font-size:14.5px;color:#3a3833;cursor:pointer;line-height:1.3; transition:background .12s; } .k-filters .k-fcheck:hover{background:#f6f4f0} .k-filters .k-fcheck input{ appearance:none;-webkit-appearance:none; width:18px;height:18px;flex:0 0 18px;margin:0; border:1.5px solid #c9c4ba;border-radius:5px;background:#fff; display:inline-grid;place-content:center;cursor:pointer; transition:border-color .12s,background .12s; } .k-filters .k-fcheck input::before{ content:'';width:10px;height:10px;transform:scale(0); background:#fff; clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%); transition:transform .12s; } .k-filters .k-fcheck input:checked{background:#181818;border-color:#181818} .k-filters .k-fcheck input:checked::before{transform:scale(1)} .k-filters .k-fcheck input:focus-visible{outline:2px solid #181818;outline-offset:2px} .k-filters .k-fcheck > span{ flex:1 1 auto;min-width:0; display:flex;align-items:center;justify-content:space-between;gap:10px; } .k-filters .k-fcheck .k-count, .k-filters .k-fcheck em{ flex:0 0 auto;font-style:normal;font-size:12.5px;color:#a9a5a0; min-width:22px;text-align:right; } .k-filters .k-fcheck:has(input:checked) > span{color:#181818;font-weight:500} /* довгі назви («Силіконізоване волокно») лишаються в один рядок, а якщо не вміщаються — обрізаються з трьома крапками, а не ламають лічильник */ .k-filters .k-fcheck > span > :first-child, .k-filters .k-fcheck > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .k-filters .k-fcheck > span > :first-child{overflow:hidden;text-overflow:ellipsis} .k-filters .k-price-inputs{display:flex;align-items:center;gap:8px;font-size:14px;color:#8a8781} .k-filters .k-price-inputs input{ width:100%;min-width:0;padding:9px 11px;border:1px solid #dcd9d4;border-radius:10px; font-size:14.5px;background:#fff; } .k-filters .k-price-inputs input:focus{outline:none;border-color:#181818} /* ---- Чипси підрозділів (лендінги по тканині/наповнювачу) ---- */ .kSubChips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:6px 15px 26px} .kSubChip{ display:inline-flex;align-items:center;gap:7px; padding:9px 16px;border-radius:999px;border:1px solid #e6e3dd;background:#fff; color:#4a4844;font-size:14px;font-weight:500;text-decoration:none;transition:all .15s; } .kSubChip:hover{border-color:#181818;color:#181818} .kSubChip em{font-style:normal;font-size:12px;color:#a9a5a0} /* ---- Рейтинг у картці каталогу ---- */ .kCardRating{display:inline-flex;align-items:center;gap:7px;margin:4px 0 2px;text-decoration:none;font-size:12.5px;color:#8a8781} .kCardRating-stars{display:inline-flex;gap:1px;color:#e9b949;font-size:12px;line-height:1} .kCardRating-stars i{font-style:normal} .kCardRating-stars i.is-off{color:#e2ddd3} .kCardRating:hover .kCardRating-n{color:#181818;text-decoration:underline} /* ===================================================================== 13. ПРАВКИ 04.09 (2) — фото 1, 3, 5, 6, 7 ===================================================================== */ /* ---- Фото 5. Міні-кошик «Вам також може сподобатись»: ціна зникала при наведенні. Шаблон (styles.css:4816) на hover зсуває .price на -30px, щоб на його місці виїхало посилання «додати» — але в нашій розмітці того посилання нема, тому ціна просто зникала. Кнопка «+» винесена на фото, тож анімацію прибираємо, ціну прибиваємо на місці. ---- */ .modal-shopping-cart .tf-minicart-recommendations .list-cart-item .price, .modal-shopping-cart .tf-minicart-recommendations .list-cart-item:hover .price{ transform:none !important;opacity:1 !important;visibility:visible !important; } .modal-shopping-cart .tf-minicart-recommendations .list-cart-item .cart-item-bot{ overflow:visible;position:static;min-height:0; } .kRecAdd{opacity:1;z-index:2} .kRecAdd svg{display:block} .modal-shopping-cart .tf-minicart-recommendations .list-cart-item .name a{color:#181818} /* ---- Фото 3. Карта показується одразу — без кліку ---- */ .kMap-box iframe{display:block;width:100%;height:420px;border:0} .kMap-box{min-height:0;background:#f3f0ea} @media (max-width:767px){.kMap-box iframe{height:300px}} /* ---- Фото 6. Низ статті: пігулка «Усі статті» лізла на чорний блок, верхній лівий кут блоку не заокруглювався. Причина — .kPost-foot має max-width:900px і margin:0 з kotarco-extra, а .kPost-backRow не мав висоти (пігулка inline). Даємо рядку висоту й нормальні відступи. ---- */ .kPost-foot{margin-top:44px;display:flex;flex-direction:column;gap:18px} .kPost-backRow{display:flex;align-items:center;min-height:44px;margin:0} .kPost-back{position:static;transform:none;margin:0} .kPost-cta{position:relative;overflow:hidden;border-radius:22px !important;margin:0 !important} /* ---- Фото 7. Сайдбар блогу: категорії ---- */ .kAside-box{background:#fff;border:1px solid #eeebe5;border-radius:18px;padding:22px 22px 18px} .kAside-title{margin:0 0 12px;font-size:16px;font-weight:600;letter-spacing:-.01em} .kAside-cats{gap:4px} .kAside-cat{ padding:10px 14px;border-radius:12px;font-size:14.5px;color:#4a4844; border:1px solid transparent;transition:all .15s; } .kAside-cat:hover{background:#f6f4f0;border-color:#eeebe5;color:#181818} .kAside-cat.is-active{background:#181818;border-color:#181818;color:#fff} .kAside-cat em{ font-style:normal;min-width:24px;height:22px;padding:0 7px;border-radius:999px; display:inline-flex;align-items:center;justify-content:center; background:#f3f0ea;color:#6b6862;font-size:12px;font-weight:600; } .kAside-cat.is-active em{background:rgba(255,255,255,.18);color:#fff} /* ---- Фото 1. Модалка відгуку: акуратніші поля, відступи, капча ---- */ .kRevModal-box{padding:36px 40px} .kRevModal-title{font-size:26px;margin-bottom:10px} .kRevForm-sub{padding:16px 18px;border-radius:16px;display:grid;gap:10px} .kRevForm-sub .kRevForm-stars{margin:0;justify-content:space-between} .kRevForm-stars-l{flex:1 1 auto} .kRevForm-stars--sm .kRevForm-stars-set button{font-size:21px} .kRevForm-product{grid-column:1/-1;margin:2px 0 0;padding-top:10px;border-top:1px solid #ebe8e2;color:#4a4844} .kRevForm-row{margin-bottom:16px} .kRevForm-row > span{font-size:13.5px;font-weight:500;color:#4a4844;margin-bottom:1px} .kRevForm-row input, .kRevForm-row textarea{ padding:13px 15px;border:1.5px solid #e6e3dd;border-radius:14px; background:#fbfaf8;font-size:15px;transition:border-color .15s,background .15s; } .kRevForm-row input:focus, .kRevForm-row textarea:focus{border-color:#181818;background:#fff;box-shadow:0 0 0 3px rgba(24,24,24,.06)} .kRevForm-row input::placeholder, .kRevForm-row textarea::placeholder{color:#b3afa8} .kRevForm-two{gap:0 16px} .kRevModal .kCaptcha{ margin:2px 0 18px;padding:14px 16px;border:1.5px dashed #e2ddd3;border-radius:14px;background:#fbfaf8; } .kRevModal .kCaptcha-label{gap:14px;align-items:center} .kRevModal .kCaptcha-label > span{font-weight:500;color:#4a4844} .kRevModal .kCaptcha-label input{ width:92px;padding:11px 14px;border:1.5px solid #e6e3dd;border-radius:12px;background:#fff;text-align:center; font-size:16px;font-weight:600;letter-spacing:1px; } .kRevForm-submit{padding:16px 24px;font-size:15.5px} .kRevForm-note{margin-top:14px} @media (max-width:575px){ .kRevModal-box{padding:26px 20px} .kRevModal-title{font-size:22px} .kRevForm-sub .kRevForm-stars{flex-wrap:wrap} } /* ---- Інфо-сторінки (доставка, повернення, політика, умови, FAQ): текст на всю ширину контейнера. kotarco-extra обмежував 860–900px і робив грід із порожньою правою колонкою. ---- */ .kInfoPage .container{display:block !important;max-width:1320px} .kInfoPage .kProse,.kInfoPage article{max-width:100% !important;margin:0} .kFaq-intro,.kFaq-nav,.kFaq-block,.kFaq-cta{max-width:100% !important} .kInfoPage .kFaq-cta{margin-top:46px} .kProse table{display:block;overflow-x:auto} /* ===================================================================== 15. ПРОМОКОД у кошику й на оформленні ===================================================================== */ .kPromo{margin:0 0 18px;padding:16px 18px;background:#fff;border:1.5px dashed #dcd9d4;border-radius:16px} .kPromo.is-applied{border-style:solid;border-color:#c7e0c8;background:#f3faf3} .kPromo-label{display:block;font-size:13.5px;font-weight:500;color:#4a4844;margin:0 0 8px} .kPromo-row{display:flex;gap:8px} .kPromo-row input{ flex:1 1 auto;min-width:0;padding:12px 14px;border:1.5px solid #e6e3dd;border-radius:12px; font-size:15px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.5px; text-transform:uppercase;background:#fff; } .kPromo-row input::placeholder{text-transform:none;font-family:inherit;letter-spacing:0;color:#b3afa8} .kPromo-row input:focus{outline:none;border-color:#181818} .kPromo-btn{ flex:0 0 auto;padding:0 18px;border:0;border-radius:12px;background:#181818;color:#fff; font-size:14px;font-weight:600;cursor:pointer;transition:opacity .15s;white-space:nowrap; } .kPromo-btn:hover{opacity:.85} .kPromo-btn:disabled{opacity:.5;cursor:default} .kPromo-err{margin:8px 0 0;font-size:13px;color:#b3261e;line-height:1.4} .kPromo-err[hidden]{display:none} .kPromo-applied{display:flex;align-items:center;gap:12px} .kPromo-ico{ width:36px;height:36px;flex:0 0 36px;border-radius:10px;background:#181818;color:#fff; display:flex;align-items:center;justify-content:center;font-size:14px; } .kPromo-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.3} .kPromo-txt b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1px;font-size:14.5px;color:#181818} .kPromo-txt small{font-size:12.5px;color:#3f6212;font-weight:500} .kPromo-remove{ flex:0 0 auto;width:30px;height:30px;border:0;border-radius:50%;background:transparent; color:#a9a5a0;font-size:22px;line-height:1;cursor:pointer;transition:all .15s; } .kPromo-remove:hover{background:#fee2e2;color:#b3261e} .fl-sidebar-cart .box-order .kPromo{margin-top:6px} .kCo-summary .kPromo{margin:4px 0 16px} @media (max-width:575px){.kPromo-row{flex-direction:column}.kPromo-btn{padding:12px 18px}} /* ---- Блог: сайдбарна CTA-картка лишається темною (мій .kAside-box її перебивав) ---- */ .kAside-box.kAside-cta{background:#181818;border-color:#181818;color:#fff} .kAside-box.kAside-cta h4,.kAside-box.kAside-cta .kAside-title{color:#fff} .kAside-box.kAside-cta p{color:rgba(255,255,255,.7)} .kAside-box.kAside-cta .tf-btn{background:#fff;color:#181818;width:100%;justify-content:center;border-radius:999px} /* ---- Блог: підвал статті —