/* KITSPAN visual v6 hotfixes: compact customization support + transparent footer logo. Homepage is not tagged and remains untouched. */
.solution-v6 .custom-row{
  grid-template-columns:minmax(0,1.45fr) repeat(5,minmax(105px,.5fr))!important;
  align-items:center!important;
  gap:12px!important;
}
.solution-v6 .custom-row>div:first-child{
  padding:28px!important;
}
.solution-v6 .custom-row .mini{
  min-height:0!important;
  height:116px!important;
  padding:16px 12px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:15px!important;
  text-align:center!important;
}
.solution-v6 .custom-row .mini .sq{
  width:34px!important;
  height:5px!important;
  margin:0!important;
  flex:0 0 auto!important;
}
.solution-v6 .custom-row .mini b{
  margin:0!important;
  font-size:11px!important;
  line-height:1.2!important;
}

/* The legacy global stylesheet inverts footer images. V6 inner pages use a
   purpose-built transparent white logo, so disable the filter here. */
.solution-v6 .footer img,
.customization-v6 .footer img,
.guide-v6 .footer img{
  filter:none!important;
  background:transparent!important;
  object-fit:contain!important;
}

@media(max-width:1100px){
  .solution-v6 .custom-row{grid-template-columns:repeat(3,1fr)!important;align-items:stretch!important}
  .solution-v6 .custom-row>div:first-child{grid-column:1/4}
  .solution-v6 .custom-row .mini{height:105px!important}
}

/* Visual v6 renders the hero photo on a pseudo-element. On mobile, use the
   dedicated mobile hero variable so the browser does not fetch the desktop
   hero in addition to the mobile preload. The fallback keeps non-optimized
   pages safe if --hero-mobile is ever absent. */
@media(max-width:900px){
  .solution-v6 .hero>.container:after,
  .customization-v6 .hero>.container:after{
    background-image:linear-gradient(180deg,rgba(4,22,38,.02),rgba(4,22,38,.12)),var(--hero-mobile,var(--hero))!important;
  }
}

@media(max-width:760px){
  .solution-v6 .custom-row{grid-template-columns:1fr 1fr!important}
  .solution-v6 .custom-row>div:first-child{grid-column:1/3}
  .solution-v6 .custom-row .mini{height:100px!important}
}
@media(max-width:520px){
  .solution-v6 .custom-row{grid-template-columns:1fr!important}
  .solution-v6 .custom-row>div:first-child{grid-column:auto}
  .solution-v6 .custom-row .mini{height:88px!important;flex-direction:row!important;justify-content:flex-start!important;text-align:left!important;padding:14px 18px!important}
}