/* Спільні стилі PHP-шаблонів опису товарів (усі товари з мапи) */ .btp{ --btp-accent:#e51f26; --btp-dark:#1c1c1c; --btp-text:#5b6472; --btp-line:#e6e8ea; --btp-offset:0px; /* висота липкого хедера — рахує JS */ --btp-navh:56px; /* висота панелі якорів — рахує JS */ color:var(--btp-dark); } .btp *{box-sizing:border-box;} /* Межа між верхньою частиною картки (фото/ціна/кошик) і початком опису, щоб розділи з якорями не «врізались» у блок купівлі. */ .btp{ position:relative; margin-top:clamp(30px,4vw,54px); padding-top:clamp(30px,4vw,54px); border-top:1px solid var(--btp-line); } .btp::before{ content:"";position:absolute;top:-2px;left:0; width:64px;height:3px;background:var(--btp-accent); } /* ── Якірна навігація ── */ /* Панель якорів JS переносить у (див. bumerang.js), тому дублюємо потрібні змінні — поза .btp вони не успадковуються. */ .btp-nav{ --btp-accent:#e51f26;--btp-dark:#1c1c1c;--btp-text:#5b6472;--btp-line:#e6e8ea; position:relative;z-index:20; margin:0 0 clamp(28px,4vw,44px);padding:12px 0; background:#fff;box-shadow:0 1px 0 var(--btp-line); } /* плавучий стан */ .btp-nav--float{ position:fixed;z-index:380;margin:0; padding:10px 16px;border-radius:0 0 14px 14px; box-shadow:0 1px 0 var(--btp-line), 0 10px 26px -14px rgba(0,0,0,.45); opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none; transition:opacity .2s ease,transform .2s ease,visibility .2s ease; } .btp-nav--float.is-on{opacity:1;visibility:visible;transform:none;pointer-events:auto;} .btp-nav-ph{display:none;} .btp-nav ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;} .btp-nav li{margin:0;} .btp-nav a{ display:inline-block;padding:9px 16px;border-radius:30px; font-size:14px;font-weight:600;line-height:1;text-decoration:none; color:var(--btp-text);background:#f2f4f6;border:1px solid transparent;transition:.2s; } .btp-nav a:hover{color:var(--btp-dark);background:#e7eaee;} .btp-nav a.is-active{background:var(--btp-accent);border-color:var(--btp-accent);color:#fff;} /* ── Розділи ── */ .btp-sec{scroll-margin-top:calc(var(--btp-offset) + var(--btp-navh) + 24px);padding:0 0 clamp(38px,5vw,58px);} .btp-sec:last-child{padding-bottom:12px;} .btp-h{font-size:clamp(20px,2.4vw,28px);line-height:1.25;font-weight:600;margin:0 0 14px;} /* залишок від попередньої версії розмітки — ховаємо, поки OPcache не перечитає PHP */ .btp-h__anchor{display:none;} .btp-h__link{color:inherit;text-decoration:none;} .btp-lead{font-size:16px;line-height:1.7;color:var(--btp-text);max-width:900px;margin:0 0 24px;} /* ── Аксонометрія: обмежуємо КОНТЕЙНЕР (img перебиває .elementor img{max-width:100%}) ── */ .btp-axo{ margin:0;flex:1;position:relative;min-height:240px;overflow:hidden; background:#fafbfc;border:1px solid var(--btp-line);border-radius:14px; } /* object-fit + padding: креслення завжди вписується в картку будь-якої висоти */ .btp .btp-axo img{ position:absolute;inset:0;width:100%;height:100%; object-fit:contain;padding:clamp(14px,1.8vw,26px); } /* Горизонтальні (широкі) креслення: картка росте під зображення, а не вписує його у фіксовану висоту ряду. */ .btp-axo--wide{ position:static;min-height:0;flex:0 0 auto; display:block;padding:clamp(12px,1.6vw,20px); } .btp .btp-axo--wide img{ position:static;width:100%;height:auto;padding:0;object-fit:initial; } /* ── Ряд у дві колонки: аксонометрія + схеми ── */ .btp-row{margin:0 0 clamp(38px,5vw,58px);display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(20px,2.6vw,38px);align-items:stretch;} .btp-row .btp-sec{padding-bottom:0;} .btp-row__side,.btp-row__main{min-width:0;display:flex;flex-direction:column;} /* розділи в ряду тягнуться на всю висоту, щоб картки були рівні */ .btp-row__side > .btp-sec,.btp-row__main > .btp-sec{flex:1;display:flex;flex-direction:column;} /* ── Фолбек-сітка (якщо ID вкладень не знайдено) ── */ .btp-fallback-grid{display:grid;grid-template-columns:repeat(var(--btp-cols,3),1fr);gap:var(--btp-gap,10px);} .btp-fallback-grid img{width:100%;height:auto;display:block;} /* ── PDF-листівка ── */ .btp-pdf{max-width:900px;margin:0 auto;} .btp-pdf__viewer{border:1px solid var(--btp-line);border-radius:14px;overflow:hidden;background:#eef1f4;} .btp-pdf ._df_book{margin:0 auto;} /* підстраховка: ховаємо контроли, які нам не потрібні */ .btp-pdf .df-ui-sound,.btp-pdf .df-ui-more,.btp-pdf .df-ui-download, .btp-pdf .df-ui-share,.btp-pdf .df-ui-outline,.btp-pdf .df-ui-thumbnail, .btp-pdf .df-ui-print,.btp-pdf .df-ui-search,.btp-pdf .df-ui-play{display:none!important;} /* кнопки під переглядачем */ .btp-pdf__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px;} .btp-btn{ display:inline-flex;align-items:center;gap:8px; padding:12px 20px;border-radius:30px;border:2px solid transparent; font-size:15px;font-weight:600;line-height:1;text-decoration:none;cursor:pointer; transition:.2s;font-family:inherit; } .btp-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;} .btp-btn--primary{background:var(--btp-accent);color:#fff;} .btp-btn--primary:hover{background:#c4161c;color:#fff;transform:translateY(-1px);} .btp-btn--ghost{background:#fff;border-color:#d8dde2;color:var(--btp-dark);} .btp-btn--ghost:hover{border-color:var(--btp-dark);} .btp-btn.is-done{border-color:#3f7d2e;color:#3f7d2e;} @media (max-width:1024px){ .btp-row{grid-template-columns:1fr;gap:clamp(20px,4vw,34px);} .btp-row .btp-sec{padding-bottom:clamp(20px,3vw,30px);} .btp-axo{max-width:460px;margin:0 auto;min-height:280px;} } @media (max-width:768px){ .btp{margin-top:24px;padding-top:24px;} .btp-nav{margin-bottom:20px;padding:8px 0;} .btp-nav--float{padding:8px 0;border-radius:0 0 12px 12px;} /* горизонтальна прокрутка чипсів + плавні краї, щоб обрізання виглядало навмисним */ .btp-nav ul{ flex-wrap:nowrap;overflow-x:auto;scroll-behavior:smooth; scrollbar-width:none;-webkit-overflow-scrolling:touch; gap:6px;padding:2px 14px;scroll-padding:0 14px; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%); } .btp-nav ul::-webkit-scrollbar{display:none;} .btp-nav a{white-space:nowrap;padding:8px 13px;font-size:13px;} .btp-sec{padding-bottom:26px;} .btp-h{font-size:20px;margin-bottom:12px;} .btp-lead{font-size:15px;margin-bottom:18px;} /* щоб плавуча кнопка дзвінка не перекривала останні картинки */ .btp-sec:last-child{padding-bottom:70px;} .btp-pdf__actions .btp-btn{flex:1 1 100%;justify-content:center;} }