/* Лендінг еко-бруківки "Бумеранг" — /eko-brukivka-bumerang/ */
.bum{
	--bum-green:#4e7d34;
	--bum-green2:#8bc34a;
	--bum-dark:#1e2a1a;
	--bum-text:#55605a;
	--bum-tint:#f3f6f0;
	--bum-red:#e51f26;
	--bum-radius:16px;
	color:var(--bum-dark);
}
.bum *{box-sizing:border-box;}
.wd-page-content{overflow-x:clip;} /* гасить горизонтальний скрол від full-bleed */
.bum-container{max-width:1200px;margin:0 auto;padding:0 20px;}
.bum-section{padding:clamp(44px,7vw,88px) 0;}
.bum-section--tint{background:var(--bum-tint);}

/* Заголовки */
.bum-head{max-width:760px;margin:0 auto clamp(28px,4vw,44px);text-align:center;}
.bum-eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.15em;font-size:12px;font-weight:700;color:var(--bum-green);margin-bottom:12px;}
.bum-h{font-size:clamp(26px,3.4vw,40px);line-height:1.18;font-weight:600;margin:0 0 14px;}
.bum-sub{font-size:clamp(15px,1.6vw,18px);line-height:1.6;color:var(--bum-text);margin:0;}

/* Кнопки */
.bum-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:40px;font-weight:600;font-size:15px;text-decoration:none;transition:.25s;cursor:pointer;border:2px solid transparent;line-height:1;}
.bum-btn--primary{background:var(--bum-green);color:#fff;}
.bum-btn--primary:hover{background:#3f6a29;color:#fff;transform:translateY(-2px);}
.bum-btn--ghost{border-color:currentColor;color:var(--bum-dark);}
.bum-btn--ghost:hover{background:var(--bum-dark);color:#fff;}
.bum-btn--light{background:#fff;color:var(--bum-dark);}
.bum-btn--light:hover{transform:translateY(-2px);color:var(--bum-dark);}
.bum-btn--ghost-light{border-color:rgba(255,255,255,.7);color:#fff;}
.bum-btn--ghost-light:hover{background:#fff;color:var(--bum-dark);}

/* ── HERO ── */
.bum-hero{position:relative;left:50%;width:100vw;margin-left:-50vw;background-size:cover;background-position:center;color:#fff;display:flex;align-items:center;min-height:clamp(460px,64vh,640px);}
.bum-hero__in{padding-top:60px;padding-bottom:60px;}
.bum-badge{display:inline-block;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(3px);padding:7px 16px;border-radius:30px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:22px;}
.bum-hero__title{font-size:clamp(32px,5.4vw,60px);line-height:1.1;font-weight:700;margin:0 0 20px;max-width:16ch;}
.bum-hero__title span{color:var(--bum-green2);}
.bum-hero__lead{font-size:clamp(16px,1.9vw,21px);line-height:1.55;max-width:620px;margin:0 0 30px;color:rgba(255,255,255,.92);}
.bum-hero__cta{display:flex;flex-wrap:wrap;gap:14px;}
.bum-hero__facts{list-style:none;display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,46px);margin:38px 0 0;padding:30px 0 0;border-top:1px solid rgba(255,255,255,.2);}
.bum-hero__facts li{display:flex;flex-direction:column;}
.bum-hero__facts strong{font-size:clamp(22px,3vw,30px);font-weight:700;color:var(--bum-green2);}
.bum-hero__facts span{font-size:13px;color:rgba(255,255,255,.8);text-transform:uppercase;letter-spacing:.06em;}

/* ── Слайдер "2 в 1" ── */
.bum-ba{position:relative;aspect-ratio:16/8;border-radius:var(--bum-radius);overflow:hidden;box-shadow:0 20px 46px -26px rgba(30,42,26,.6);user-select:none;}
.bum-ba__side{position:absolute;inset:0;}
.bum-ba__side svg{display:block;width:100%;height:100%;}
.bum-ba__solid{clip-path:inset(0 calc(100% - var(--pos)) 0 0);}
.bum-ba__tag{position:absolute;bottom:16px;padding:7px 14px;border-radius:20px;font-size:13px;font-weight:600;color:#fff;background:rgba(20,28,18,.6);backdrop-filter:blur(2px);}
.bum-ba__tag--l{left:16px;}
.bum-ba__tag--r{right:16px;}
.bum-ba__divider{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;background:#fff;transform:translateX(-1.5px);pointer-events:none;box-shadow:0 0 8px rgba(0,0,0,.3);}
.bum-ba__divider::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:0 3px 12px rgba(0,0,0,.3);}
.bum-ba__divider::before{content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;font-size:20px;font-weight:700;color:var(--bum-green);letter-spacing:2px;}
.bum-ba__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;}

/* ── Картки переваг ── */
.bum-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);}
.bum-card{background:#fff;border:1px solid #e7ece2;border-radius:var(--bum-radius);padding:clamp(22px,2.4vw,32px);transition:.25s;}
.bum-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -26px rgba(30,42,26,.5);}
.bum-card__ic{display:inline-flex;width:52px;height:52px;align-items:center;justify-content:center;border-radius:14px;background:rgba(78,125,52,.1);color:var(--bum-green);margin-bottom:16px;}
.bum-card__ic svg{width:28px;height:28px;}
.bum-card h3{font-size:19px;font-weight:600;margin:0 0 8px;}
.bum-card p{font-size:15px;line-height:1.6;color:var(--bum-text);margin:0;}

/* ── Водопроникність ── */
.bum-perm{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,30px);}
.bum-perm__scene{margin:0;border-radius:var(--bum-radius);overflow:hidden;background:#eef2ea;}
.bum-perm__scene svg{display:block;width:100%;height:auto;}
.bum-perm__scene figcaption{text-align:center;font-weight:600;padding:12px;font-size:15px;}
.bum-perm__scene--eco figcaption{background:rgba(78,125,52,.12);color:var(--bum-green);}
.bum-perm__scene--solid figcaption{background:rgba(229,31,38,.1);color:var(--bum-red);}
.bum-perm__ok{fill:#3f7d2e;font-weight:700;font-size:14px;}
.bum-perm__bad{fill:#c0392b;font-weight:700;font-size:14px;}

/* ── Підбір за навантаженням ── */
.bum-load{max-width:820px;margin:0 auto;}
.bum-load__in{position:absolute;opacity:0;pointer-events:none;}
.bum-load__tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px;}
.bum-load__tabs label{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 10px;border:2px solid #e2e7dc;border-radius:14px;background:#fff;cursor:pointer;font-weight:600;font-size:14px;text-align:center;color:var(--bum-dark);transition:.2s;}
.bum-load__tabs label svg{width:30px;height:30px;color:var(--bum-text);transition:.2s;}
.bum-load__tabs label:hover{border-color:var(--bum-green);}
.bum-load__panel{display:none;gap:22px;align-items:center;background:#fff;border-radius:var(--bum-radius);padding:clamp(20px,3vw,34px);border:1px solid #e7ece2;}
.bum-load__meter{flex:0 0 clamp(90px,14vw,150px);height:12px;border-radius:8px;background:#e5e7e1;overflow:hidden;}
.bum-load__meter span{display:block;height:100%;width:var(--val);background:linear-gradient(90deg,var(--bum-green),var(--bum-green2));}
.bum-load__txt strong{display:block;font-size:20px;color:var(--bum-green);margin-bottom:6px;}
.bum-load__txt p{margin:0;color:var(--bum-text);line-height:1.55;}
#bumload-1:checked ~ .bum-load__tabs label[for="bumload-1"],
#bumload-2:checked ~ .bum-load__tabs label[for="bumload-2"],
#bumload-3:checked ~ .bum-load__tabs label[for="bumload-3"]{border-color:var(--bum-green);background:rgba(78,125,52,.07);}
#bumload-1:checked ~ .bum-load__tabs label[for="bumload-1"] svg,
#bumload-2:checked ~ .bum-load__tabs label[for="bumload-2"] svg,
#bumload-3:checked ~ .bum-load__tabs label[for="bumload-3"] svg{color:var(--bum-green);}
#bumload-1:checked ~ .bum-load__panels .bum-load__panel--1,
#bumload-2:checked ~ .bum-load__panels .bum-load__panel--2,
#bumload-3:checked ~ .bum-load__panels .bum-load__panel--3{display:flex;}

/* ── Патерни ── */
.bum-patterns{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,22px);}
.bum-pattern{margin:0;border-radius:var(--bum-radius);overflow:hidden;background:#fff;border:1px solid #e7ece2;}
.bum-pattern svg{display:block;width:100%;height:150px;}
.bum-pattern figcaption{padding:12px;text-align:center;font-weight:600;font-size:14px;}

/* ── Кольори ── */
.bum-colors{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,2vw,24px);}
.bum-color{text-align:center;}
.bum-color__sw{display:block;aspect-ratio:1;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 8px 20px -12px rgba(0,0,0,.4);margin-bottom:10px;}
.bum-color__name{font-size:14px;font-weight:600;}
.bum-note{text-align:center;color:var(--bum-text);font-size:14px;margin-top:24px;}

/* ── Характеристики ── */
.bum-specs{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,4vw,50px);align-items:start;}
.bum-table{width:100%;border-collapse:collapse;margin-top:18px;}
.bum-table th,.bum-table td{text-align:left;padding:14px 4px;border-bottom:1px solid #e7ece2;font-size:15px;vertical-align:top;}
.bum-table th{font-weight:600;color:var(--bum-dark);width:45%;}
.bum-table td{color:var(--bum-text);}
.bum-specs__price{background:var(--bum-dark);color:#fff;border-radius:var(--bum-radius);padding:clamp(26px,3vw,38px);text-align:center;position:sticky;top:100px;}
.bum-price__label{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:rgba(255,255,255,.65);margin-bottom:6px;}
.bum-price__val{display:block;font-size:clamp(38px,6vw,56px);font-weight:800;color:var(--bum-green2);margin-bottom:22px;line-height:1;}
.bum-price__val small{font-size:18px;font-weight:600;color:rgba(255,255,255,.8);}
.bum-specs__price .bum-btn{width:100%;margin-bottom:12px;}
.bum-specs__price .bum-btn--ghost{border-color:rgba(255,255,255,.6);color:#fff;}
.bum-specs__price .bum-btn--ghost:hover{background:#fff;color:var(--bum-dark);}

/* ── Галерея ── */
.bum-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.bum-gallery__i{display:block;aspect-ratio:3/4;border-radius:var(--bum-radius);overflow:hidden;}
.bum-gallery__i img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s;}
.bum-gallery__i:hover img{transform:scale(1.06);}

/* ── CTA ── */
.bum-cta{position:relative;left:50%;width:100vw;margin-left:-50vw;background:var(--bum-dark);color:#fff;padding:clamp(48px,7vw,80px) 0;text-align:center;}
.bum-cta__in h2{font-size:clamp(24px,3.4vw,38px);font-weight:700;margin:0 0 12px;}
.bum-cta__in p{color:rgba(255,255,255,.8);font-size:17px;margin:0 0 26px;}
.bum-cta .bum-hero__cta{justify-content:center;}

/* ── Анімації ── */
@media (prefers-reduced-motion:no-preference){
	@keyframes bum-fall{0%{transform:translateY(0)}100%{transform:translateY(192px)}}
	@keyframes bum-seep{0%{transform:translateY(0);opacity:0}18%{opacity:1}100%{transform:translateY(64px);opacity:0}}
	@keyframes bum-ripple{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.05);opacity:.55}}
	.bum-rain{animation:bum-fall 1s linear infinite;}
	.bum-seep{animation:bum-seep 1.9s ease-in infinite;}
	.bum-puddle{transform-box:fill-box;transform-origin:center;animation:bum-ripple 2.6s ease-in-out infinite;}
}

/* ── Адаптив ── */
@media (max-width:900px){
	.bum-cards{grid-template-columns:repeat(2,1fr);}
	.bum-patterns{grid-template-columns:repeat(2,1fr);}
	.bum-colors{grid-template-columns:repeat(4,1fr);}
	.bum-specs{grid-template-columns:1fr;}
	.bum-specs__price{position:static;}
	.bum-gallery{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
	.bum-cards{grid-template-columns:1fr;}
	.bum-perm{grid-template-columns:1fr;}
	.bum-colors{grid-template-columns:repeat(3,1fr);}
	.bum-load__tabs label{padding:14px 6px;font-size:13px;}
	.bum-load__panel{flex-direction:column;text-align:center;}
	.bum-load__meter{width:100%;flex-basis:auto;align-self:stretch;}
}
