/* 1.2.1: optical icon sizing, compact small desktop, edge-to-edge photos. */
.messengers .messenger-button .messenger-icon{
 width:30px;height:30px;min-width:30px;max-width:30px;flex:0 0 30px;
 padding:5px;box-sizing:border-box;object-fit:contain;
}
.benefit-card>img[src*="icon-special-terms"]{width:55px;height:42px;max-width:none;object-fit:contain}
.product-panel .product-item h4{font-size:17px;line-height:1.5}
@media(max-width:1023px){
 .product-image-wrap{background:transparent}
 .product-image-wrap picture{display:block;width:100%}
 .product-image-wrap .product-image{display:block;width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:cover;border-radius:16px}
}
@media(min-width:1024px) and (max-width:1199px){
 :root{--frame-inset:24px;--section-space:40px}
 .site-frame{width:calc(100% - 32px)}
 .header-inner{min-height:88px}
 .site-frame .hero{margin-top:20px;height:520px;min-height:520px;background:linear-gradient(100deg,#d2e0e8,#c4d5e1)}
 .site-frame #catalog{margin-top:20px}
 .hero-visual .hero-image{object-fit:contain;object-position:center bottom;mask-image:linear-gradient(to bottom,transparent,black 15%);-webkit-mask-image:linear-gradient(to bottom,transparent,black 15%)}
 .hero-copy{width:56%;padding:28px}
 .hero-copy h1{font-size:36px;line-height:1.15}
 .hero-subtitle{font-size:16px;margin-top:18px}
 .hero-description{font-size:14px;max-width:100%;margin-top:18px}
 .hero-actions{margin-top:24px;gap:8px;flex-wrap:nowrap}
 .hero-actions .button{min-height:44px;font-size:13px;white-space:nowrap;padding-inline:10px}
 .site-frame h2{font-size:34px;margin-bottom:28px}
 .product-panel{padding:24px;grid-template-columns:32% minmax(0,1fr);column-gap:24px}
 .product-panel>.product-heading h3{font-size:24px}
 .product-items{column-gap:22px}
 .product-item{padding-top:16px;padding-bottom:20px}
 .consultation{margin-top:28px}
 .product-image{height:360px}
 .category-tabs{margin-bottom:24px}
 .category-tab{min-height:48px;font-size:14px;padding:10px 14px;gap:16px}
 .benefit-card{padding:20px}
 .benefit-card h3{font-size:18px}
 .quote-panel{padding:40px;gap:36px;grid-template-columns:.85fr 1.15fr}
 .quote-copy h2{font-size:34px}
 .quote-help{margin-top:28px;padding-top:24px}
 .contacts-layout{gap:32px}
 .footer-top{min-height:120px}
 .footer-bottom{min-height:80px}
}
/* The catalogue uses one readable hierarchy at every breakpoint. */
.product-panel .product-item h4{font-size:17px;font-weight:600;line-height:1.5}
.product-panel .product-item p{font-size:16px;font-weight:400;line-height:1.5;margin-top:8px}
.product-panel .product-item .catalog-button{font-size:16px;font-weight:500;line-height:1.5}
@media(min-width:1024px) and (max-width:1199px){
 .hero-visual .hero-image{top:auto;bottom:0;height:auto;width:100%;object-fit:contain;object-position:center bottom}
}
/* 1.2.2: fixed responsive photo heights and visible preview hover states. */
@media(min-width:641px) and (max-width:1023px){
 .product-image-wrap .product-image{height:240px;width:100%;object-fit:cover;object-position:center 60%}
}
@media(max-width:640px){
 .product-image-wrap .product-image{height:200px;width:100%;object-fit:cover;object-position:center}
}
.awaiting-bot:disabled,.messenger-button.is-placeholder:disabled,.catalog-button:disabled{cursor:pointer}
.awaiting-bot:disabled:hover{background:var(--accent);color:var(--ink)}
.messengers .messenger-button.is-placeholder:disabled:hover{background:var(--border);border-color:var(--navy);color:var(--ink)}
.product-panel .product-item .catalog-button:disabled:hover{background:transparent;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.catalog-button .icon{transition:transform .18s}
.catalog-button:hover .icon{transform:translate(1px,-1px)}
/* 1.2.3: closer mobile heating composition, tablet has its own sources. */
@media(max-width:640px){
 .product-panel[data-category="water_supply_heating"] .product-image-wrap picture{height:200px;overflow:hidden;border-radius:16px}
 .product-panel[data-category="water_supply_heating"] .product-image{transform:scale(1.12);transform-origin:center 55%}
}

/* Mobile frame and contact layout. */
@media(max-width:640px){
 .hero-copy h1{font-size:30px}
 .site-frame{width:calc(100% - 40px)}
 :root{--frame-inset:16px}
 .contacts-grid .contact-item{flex-direction:row;align-items:flex-start;gap:12px}
 .contacts-grid .contact-item>.icon{flex:0 0 30px;margin-top:2px}
}

.tablet-title-break{display:none}
@media(min-width:641px) and (max-width:1023px){.tablet-title-break{display:block}}
/* Prepare offscreen content before revealing it, with no visible-to-hidden flash. */
.st-reveal{opacity:1;translate:0 0;transition:opacity .65s ease-out,translate .65s ease-out}
.st-reveal.is-reveal-pending{opacity:0;translate:0 18px;transition:none}
@media(prefers-reduced-motion:reduce){.st-reveal,.st-reveal.is-reveal-pending{opacity:1;translate:none;transition:none}}