/* TAIGA glued-panel mobile quick-profile centering — 2026-09-07 v9
 * The hero quick selector already sits inside .hx-bottom, which owns the mobile
 * page gutters. Legacy CSS adds margin-left:22px to .hx-profiles; later layers
 * changed the selector to width:100%, so that stale offset makes it overflow.
 * Reset the selector as a normal stretched grid item: no extra width math and
 * no inner horizontal offset. This keeps it aligned with the specs row above.
 */

@media (max-width:900px){
  body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-bottom{
    box-sizing:border-box!important;
    width:calc(100% - 28px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profiles{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    margin-left:0!important;
    margin-right:0!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
    justify-self:stretch!important;
    align-self:stretch!important;
  }

  body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profiles,
  body[data-taiga-smart-product="kleenaya-imitatsiya-brusa"] .hx-profiles>*{
    min-width:0!important;
  }
}

/* TAIGA glued-beam desktop refinement — 2026-09-09.
 * Keep the new beam landing visually aligned with the approved glued-panel page
 * while preventing intermediate desktop breakpoints from collapsing the PRO
 * action, sample CTA, retail facts and the 2×2 quick-profile selector.
 */
@media (min-width:1101px){
  body[data-taiga-smart-product="kleenyy-brus"] .hx-headin{
    display:flex!important;
    align-items:center!important;
    gap:18px!important;
    padding-left:4.4%!important;
    padding-right:4.4%!important;
    box-sizing:border-box!important;
    max-width:none!important;
  }
  body[data-taiga-smart-product="kleenyy-brus"] .hx-headin>.brand{
    flex:0 0 218px!important;
    min-width:0!important;
  }
  body[data-taiga-smart-product="kleenyy-brus"] .hx-headin>.hx-nav{
    flex:1 1 auto!important;
    min-width:320px!important;
    display:flex!important;
    justify-content:center!important;
    gap:28px!important;
  }
  body[data-taiga-smart-product="kleenyy-brus"] .hx-headin>.hx-nav a{
    white-space:nowrap!important;
  }
  body[data-taiga-smart-product="kleenyy-brus"] .hx-cfg,
  body[data-taiga-smart-product="kleenyy-brus"] .hx-phone,
  body[data-taiga-smart-product="kleenyy-brus"] .hx-menu{
    flex:0 0 auto!important;
  }
  body[data-taiga-smart-product="kleenyy-brus"] .hx-pro{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:164px!important;
    max-width:none!important;
    display:grid!important;
    grid-template-columns:32px minmax(0,1fr)!important;
    align-items:center!important;
    column-gap:9px!important;
    margin:0!important;
    white-space:normal!important;
  }
  body[data-taiga-smart-product="kleenyy-brus"] .hx-pro>.hx-proico{
    width:32px!important;
    min-width:32px!important;
    height:32px!important;
    display:grid!important;
    place-items:center!important;
  }
  body[data-taiga-smart-product="kleenyy-brus"] .hx-pro>.hx-proico svg{
    width:24px!important;
    height:24px!important;
  }
  body[data-taiga-smart-product="kleenyy-brus"] .hx-pro>span:last-child{
    display:block!important;
    font-size:11px!important;
    line-height:1.08!important;
    white-space:nowrap!important;
  }
  body[data-taiga-smart-product="kleenyy-brus"] .hx-phone{
    min-width:142px!important;
    font-size:13px!important;
    white-space:nowrap!important;
  }

  body[data-taiga-smart-product="kleenyy-brus"] .beam-hero .hx-copy{
    left:4.5%!important;
    width:37%!important;
  }
  body[data-taiga-smart-product="kleenyy-brus"] .beam-hero .hx-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(220px,.92fr) minmax(290px,1.08fr)!important;
    gap:14px!important;
    align-items:stretch!important;
  }
  body[data-taiga-smart-product="kleenyy-brus"] .beam-hero .hx-actions>.button{
    min-width:0!important;
    width:100%!important;
    box-sizing:border-box!important;
  }
  body[data-taiga-smart-product="kleenyy-brus"] .beam-hero .hx-actions>.button.outline{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:16px!important;
    padding-left:22px!important;
    padding-right:22px!important;
  }
  body[data-taiga-smart-product="kleenyy-brus"] .beam-hero .hx-actions>.button.outline>span:first-child{
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
    gap:3px!important;
    text-align:left!important;
  }
  body[data-taiga-smart-product="kleenyy-brus"] .beam-hero .hx-actions>.button.outline b,
  body[data-taiga-smart-product="kleenyy-brus"] .beam-hero .hx-actions>.button.outline small{
    display:block!important;
    margin:0!important;
    white-space:nowrap!important;
    line-height:1.08!important;
  }
  body[data-taiga-smart-product="kleenyy-brus"] .beam-hero .hx-actions>.button.outline b{
    font-size:14px!important;
  }
  body[data-taiga-smart-product="kleenyy-brus"] .beam-hero .hx-actions>.button.outline small{
    font-size:10px!important;
    opacity:.68!important;
  }

  body[data-taiga-smart-product="kleenyy-brus"] .beam-prod{
    top:15%!important;
    right:4.5%!important;
    width:47%!important;
    height:46%!important;
  }
  body[data-taiga-smart-product="kleenyy-brus"] .beam-hero .hx-bottom{
    left:4.5%!important;
    right:4.5%!important;
    bottom:4.8%!important;
    display:grid!important;
    grid-template-columns:minmax(0,38%) minmax(0,1fr)!important;
    gap:34px!important;
    align-items:end!important;
  }
  body[data-taiga-smart-product="kleenyy-brus"] .beam-hero .hx-specs{
    width:100%!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    align-items:stretch!important;
    overflow:visible!important;
  }
  body[data-taiga-smart-product="kleenyy-brus"] .beam-hero .hx-spec{
    width:auto!important;
    min-width:0!important;
    min-height:82px!important;
    margin:0!important;
    padding:14px 13px!important;
    box-sizing:border-box!important;
    border:1px solid rgba(32,58,49,.13)!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.66)!important;
    display:flex!important;
    align-items:center!important;
  }
  body[data-taiga-smart-product="kleenyy-brus"] .beam-hero .hx-spec strong{
    display:block!important;
    font-size:18px!important;
    line-height:1.04!important;
    white-space:nowrap!important;
  }
  body[data-taiga-smart-product="kleenyy-brus"] .beam-hero .hx-spec small{
    display:block!important;
    margin-top:5px!important;
    font-size:10px!important;
    line-height:1.15!important;
  }
  body[data-taiga-smart-product="kleenyy-brus"] .beam-quick-profiles{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:14px!important;
    border-radius:24px!important;
    align-self:end!important;
  }
  body[data-taiga-smart-product="kleenyy-brus"] .beam-quick-profiles .beam-quick-title{
    margin-bottom:2px!important;
    font-size:27px!important;
  }
  body[data-taiga-smart-product="kleenyy-brus"] .beam-quick-card{
    min-height:112px!important;
  }
  body[data-taiga-smart-product="kleenyy-brus"] .beam-quick-card .beam-profile-thumb{
    height:68px!important;
  }
}

@media (min-width:1101px) and (max-width:1480px){
  body[data-taiga-smart-product="kleenyy-brus"] .hx-headin>.hx-nav{
    display:none!important;
  }
  body[data-taiga-smart-product="kleenyy-brus"] .hx-headin>.brand{
    margin-right:auto!important;
  }
  body[data-taiga-smart-product="kleenyy-brus"] .hx-pro{
    min-width:150px!important;
  }
  body[data-taiga-smart-product="kleenyy-brus"] .beam-hero .hx-copy{
    width:39%!important;
  }
  body[data-taiga-smart-product="kleenyy-brus"] .beam-hero .hx-bottom{
    grid-template-columns:minmax(0,40%) minmax(0,1fr)!important;
    gap:24px!important;
  }
  body[data-taiga-smart-product="kleenyy-brus"] .beam-hero .hx-spec strong{
    font-size:16px!important;
  }
}

/* The four-step block should end tightly instead of leaving a large black tail. */
body[data-taiga-smart-product="kleenyy-brus"] .beam-process{
  align-items:stretch!important;
}
body[data-taiga-smart-product="kleenyy-brus"] .beam-process .process-step{
  min-height:0!important;
  padding:22px 20px 24px!important;
  box-sizing:border-box!important;
}
body[data-taiga-smart-product="kleenyy-brus"] .beam-process .process-step small,
body[data-taiga-smart-product="kleenyy-brus"] .beam-process .process-step h3,
body[data-taiga-smart-product="kleenyy-brus"] .beam-process .process-step p{
  margin-left:0!important;
  margin-right:0!important;
}