/* Bento: two photo rows, the "all services" row takes only the height it needs */
.bento{grid-template-rows:300px 300px;grid-auto-rows:auto}
.bento .tile--dark{min-height:0}
@media (max-width:1100px){.bento{grid-template-rows:none;grid-auto-rows:240px}.bento .tile--dark{grid-row:auto;height:auto;min-height:120px}}
@media (max-width:760px){.bento{grid-auto-rows:190px}}
.tile-cta{white-space:nowrap}

/* Long Ukrainian words must not overflow on phones */
h1,h2,h3,.tile-title,.card-title{overflow-wrap:break-word;hyphens:manual}
.ph-text,.ph-media,.split-body,.calc-form,.lead-form{min-width:0}
@media (max-width:760px){
	h1{font-size:clamp(30px,8.4vw,40px)}
	h2{font-size:clamp(26px,7vw,34px)}
	.hero-text h1{font-size:clamp(34px,9.6vw,44px)}
	.page-hero{gap:10px}
	.lead{font-size:16px}
	.s-head{margin-bottom:18px}
	.panel h2{font-size:28px}
}

/* Header with 9 menu items: compact on laptops, burger below 1360px */
@media (max-width:1640px){.nav>li>a{padding:10px 11px;font-size:14.5px;gap:5px}.header-in{gap:14px}}
@media (max-width:1560px){.header-phone span{display:none}.header-phone{width:48px;padding:0;justify-content:center}}
@media (max-width:1360px){.main-nav{display:none}.mnav{display:block}.header-phone span{display:inline}.header-phone{width:auto;padding:0 18px}}
@media (max-width:760px){.header-phone span{display:none}.header-phone{width:48px;padding:0}}
/* Long dropdowns in two columns; right-hand dropdowns open to the left */
.nav .sub:has(> li:nth-child(9)){display:grid;grid-template-columns:1fr 1fr;column-gap:4px;min-width:520px}
.nav>li:nth-last-child(-n+5) .sub{left:auto;right:0}
/* Page-hero H1 sized so long words fit the text column */
.page-hero h1{font-size:clamp(34px,3.5vw,58px);line-height:1.04}

/* === 07.11.2026: hero на всю ширину першого екрана === */
.hero{padding:0}
.hero-in{border-radius:0}
.is-home .site-header{left:0;right:0;top:0;padding:40px 40px 0}
@media (max-width:760px){
	.hero{padding:0}
	.is-home .site-header{left:0;right:0;top:0;padding:22px 20px 0}
}
.admin-bar.is-home .site-header{top:var(--wp-admin--admin-bar--height,32px)}
@media (max-width:600px){.admin-bar.is-home .site-header{top:46px}}

/* === 07.11.2026: круглі кнопки дзвінка — лаймовий стиль === */
@media (min-width:1025px),(max-width:760px){
	.header-phone{width:52px;height:52px;min-height:52px;padding:0;border-radius:50%;background:#D4F06A;border-color:#D4F06A;color:#111314;box-shadow:none;justify-content:center;align-items:center}
	.header-phone:hover,.header-phone:focus-visible{background:#C6E652;border-color:#C6E652;color:#111314}
	.header-phone svg{color:#111314}
}

/* === 07.11.2026: сторінка політики конфіденційності === */
.policy h2{font-size:clamp(22px,2.4vw,28px);line-height:1.25;margin:32px 0 10px}
.policy p,.policy li{font-size:16px;line-height:1.6;margin:0 0 10px}
.policy ul{padding-left:22px;margin:0 0 10px}
.policy a{text-decoration:underline;text-underline-offset:2px}
.foot-privacy{color:inherit;opacity:.8;text-decoration:underline;text-underline-offset:2px}

/* === 07.11.2026: мобільна версія — схеми без обрізання, таблиці картками === */
@media (max-width:640px){
	.ph-ill,.ill-panel,.ill,.art-fig.art-svg{overflow:visible!important}
	.art-fig.art-svg{align-items:center!important}
	.ph-ill{align-items:stretch!important}
	.ph-ill .ph-stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))!important}
	.ill-panel{justify-content:center!important}
	.ph-ill>svg,.ill-panel>svg,.ill>svg,.art-fig.art-svg>svg{min-width:0!important;width:100%!important;max-width:100%!important;height:auto!important}
	.table-scroll,main table.okt-stack{overflow:visible!important}
	table.okt-stack,table.okt-stack tbody,table.okt-stack tr,table.okt-stack td{display:block;width:100%!important;min-width:0!important}
	table.okt-stack{border:0;min-width:0!important}
	table.okt-stack thead,table.okt-stack tr.okt-head{display:none!important}
	table.okt-stack tr{background:#fff;border:1px solid var(--line,#e6e3dd);border-radius:16px;padding:12px 14px;margin:0 0 10px}
	table.okt-stack td{border:0!important;padding:4px 0!important;text-align:left!important}
	table.okt-stack td[data-label]::before{content:attr(data-label);display:block;font-size:12px;line-height:1.3;color:var(--muted,#5e6266);margin-bottom:2px}
	table.okt-stack td:first-child{font-weight:600}
}
@media (max-width:760px){
	.okz-zoomable{position:relative;cursor:zoom-in}
	.okz-zoomable::after{content:"";position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23111314' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E") center/18px no-repeat;box-shadow:0 2px 8px rgba(17,19,20,.15);pointer-events:none;z-index:2}
}
html.okz-open{overflow:hidden}
.okz{position:fixed;inset:0;z-index:100;background:#fff;display:flex;flex-direction:column}
.okz-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px 8px 18px;font-size:14px;color:var(--muted,#5e6266)}
.okz-x{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:#d4f06a;color:#111314;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.okz-body{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;display:flex;align-items:center;justify-content:center;padding:12px;cursor:zoom-in}
.okz-body>svg{width:100%;height:auto;max-height:100%}
.okz.is-big .okz-body{align-items:flex-start;justify-content:flex-start;cursor:zoom-out}
.okz.is-big .okz-body>svg{width:220%;max-height:none;flex:none}

/* 07.11.2026 typography rule (permanent): no ugly or wrong line breaks on any width */
/* display:contents: the wrapper adds no box, so it never becomes a separate item inside flex/grid (buttons, FAQ questions) */
.nw{white-space:nowrap;display:contents}
h1,h2,h3,.h1,.h2,.h3,.card h3,.card-title,.hero h1,.okm h2,.okm h3{text-wrap:balance}
p,li,dd,figcaption,.lead,td{text-wrap:pretty}
.ph-stats b,.price b,.price-val{white-space:nowrap}
/* 07.11.2026 logo in the layout (rev. 2, after review).
   Header: compact logo (mark + name, the upper part of the approved file, cropped by CSS) in every state and on every screen.
   Light compact on the transparent home header, graphite compact on the light header; both are the same width, so nothing jumps
   when the header changes state. Footer: the full logo with the line «Вікна | Двері | Балкони | Сонцезахист». */
.logo.logo-img{display:flex;align-items:center;flex:0 0 auto;line-height:0;font-size:0}
.logo-img .lg{display:block;overflow:hidden;flex:0 0 auto}
.logo-img .lg img{display:block;width:auto;max-width:none}
.logo.logo-header{--lw:156px;height:calc(var(--lw)*534/1433)}
.logo-header .lg{width:var(--lw)}
.logo-header .lg-light{height:calc(var(--lw)*487/1367)}
.logo-header .lg-light img{height:calc(var(--lw)*595/1367);margin-left:calc(var(--lw)*-102/1367)}
.logo-header .lg-dark{height:calc(var(--lw)*534/1433)}
.logo-header .lg-dark img{height:calc(var(--lw)*654/1433);margin-left:calc(var(--lw)*-107/1433)}
.logo-header .lg-light{display:none}
.is-home:not(.hdr-stuck) .logo-header .lg-light{display:block}
.is-home:not(.hdr-stuck) .logo-header .lg-dark{display:none}
@media (max-width:760px){.logo.logo-header{--lw:124px}}
@media (max-width:340px){.logo.logo-header{--lw:116px}}
.site-footer .logo.logo-img{display:inline-flex;margin:4px 0 20px}
.site-footer .logo-img .lg img{height:80px}
@media (max-width:760px){.site-footer .logo-img .lg img{height:64px}.site-footer .logo.logo-img{margin:0 0 16px}}

/* desktop menu (1501+, when it fits next to the logo; below that the compact menu button is used):
   one readable size on every wide screen, no arrows, even spacing; the phone is the round lime button */
@media (min-width:1501px){
 .main-nav .nav{gap:0}
 .main-nav .nav>li>a{font-size:14px;padding:10px 9px}
 .main-nav .nav .caret{display:none}
 .site-header .header-in{gap:32px}
 .header-right{gap:14px}
}
/* home page: the header keeps the same width and logo position before and after scrolling */
body.is-home.hdr-stuck .site-header .wrap.header-in{max-width:none;margin:0}
body.is-home.hdr-stuck.hdr-stuck .site-header{padding:12px 40px}
@media (max-width:760px){body.is-home.hdr-stuck.hdr-stuck .site-header{padding:10px 20px}}
/* phones: logo on the left, two equal 46 px buttons on the right, one vertical centre line */
@media (max-width:760px){
 .site-header .header-in{align-items:center}
 .header-right{gap:10px;align-items:center}
 .header-phone{width:46px!important;height:46px!important;min-height:46px!important;min-width:46px!important}
 .mnav summary{width:46px;height:46px}
 .mnav{width:46px;height:46px}
}
/* light logo over the photo: a soft shadow keeps it readable on bright parts of the image (the logo itself is unchanged) */
.is-home:not(.hdr-stuck) .logo-header .lg-light img{filter:drop-shadow(0 1px 6px rgba(17,19,20,.45))}
/* 320 px: the єВідновлення pill keeps two lines, so it does not cover the hero text */
@media (max-width:339px){.site-header .hdr-yevid{font-size:12.5px!important;gap:6px!important;padding-right:10px!important}.site-header .hdr-yevid img{width:20px;height:20px}.is-home .hero-in{min-height:690px}}
/* home hero on tablets: room below the header and the єВідновлення row */
@media (min-width:761px) and (max-width:1500px){.is-home .hero-body{padding-top:184px}}
/* desktop (1025+): the header phone is only the round lime button; the number is not shown next to it.
   The link keeps tel: and an aria-label with the number. */
@media (min-width:1025px){.site-header .header-phone>span{display:none}.site-header .header-phone{width:52px;min-width:52px;height:52px;padding:0;justify-content:center;flex:0 0 auto}}