/* V11.0.1 deployment polish
   - compact product + colour intro heroes so catalogue content is visible above the fold
   - fix colour-chart filter overlap at tablet/mobile widths
*/

/* Products: preserve the premium composition but reduce the amount of empty hero space. */
.page-products .v101-catalogue-hero{
  width:min(calc(100% - 48px),1460px)!important;
  min-height:0!important;
  margin:20px auto 0!important;
  padding:30px clamp(34px,4vw,58px)!important;
  grid-template-columns:minmax(0,.82fr) minmax(420px,.7fr)!important;
  gap:clamp(34px,5vw,72px)!important;
  align-items:center!important;
  border-radius:30px!important;
}
.page-products .v101-catalogue-hero h1{
  max-width:8.7ch!important;
  margin:4px 0 10px!important;
  font-size:clamp(3.35rem,5vw,5.35rem)!important;
  line-height:.86!important;
}
.page-products .v101-catalogue-hero>div>p:not(.page-kicker){
  max-width:44rem!important;
  margin-bottom:0!important;
  font-size:.95rem!important;
  line-height:1.55!important;
}
.page-products .catalogue-search-form{
  align-self:center!important;
  margin:0!important;
}
.page-products .v101-catalogue-toolbar-shell{
  margin-top:12px!important;
}
.page-products .v101-products-section{
  padding-top:20px!important;
}

/* Colour chart: use the same compact first-glance hierarchy as Products. */
.page-colour-chart .v101-colour-page{
  padding-top:18px!important;
}
.page-colour-chart .v101-colour-hero{
  width:min(100%,1460px)!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:28px clamp(30px,4vw,54px)!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:clamp(24px,4vw,54px)!important;
  align-items:center!important;
  border-radius:28px!important;
}
.page-colour-chart .v101-colour-hero h1{
  max-width:10ch!important;
  margin:4px 0 10px!important;
  font-size:clamp(3rem,4.6vw,5rem)!important;
  line-height:.88!important;
}
.page-colour-chart .v101-colour-hero>div>p:not(.page-kicker):not(.colour-disclaimer){
  max-width:46rem!important;
  margin:0!important;
  font-size:.95rem!important;
  line-height:1.55!important;
}
.page-colour-chart .colour-disclaimer{
  max-width:52rem!important;
  margin-top:12px!important;
  padding:10px 12px!important;
  font-size:.75rem!important;
  line-height:1.45!important;
}
.page-colour-chart .v103-colour-filter-shell{
  margin-top:12px!important;
}

/* Colour filters: all three primary controls have explicit grid space. */
.v103-colour-primary-filters{
  grid-template-columns:minmax(220px,1.35fr) minmax(190px,.8fr) max-content!important;
  align-items:stretch!important;
  gap:10px!important;
}
.v103-colour-primary-filters>*{
  min-width:0!important;
}
.v103-colour-primary-filters .btn{
  width:auto!important;
  min-width:112px!important;
  padding-inline:18px!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

@media (max-width:900px){
  .page-products .v101-catalogue-hero{
    width:calc(100% - 28px)!important;
    margin-top:8px!important;
    padding:20px 18px 18px!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
    border-radius:22px!important;
  }
  .page-products .v101-catalogue-hero h1{
    max-width:8.5ch!important;
    font-size:clamp(2.35rem,10.3vw,3.5rem)!important;
    line-height:.88!important;
  }
  .page-products .v101-catalogue-hero>div>p:not(.page-kicker){
    font-size:.82rem!important;
    line-height:1.48!important;
  }
  .page-products .catalogue-search-form{
    padding:6px 6px 6px 11px!important;
  }
  .page-products .catalogue-toolbar-shell{
    margin-top:8px!important;
  }
  .page-products .v101-products-section{
    padding-top:10px!important;
  }

  .page-colour-chart .v101-colour-page{
    padding-top:8px!important;
  }
  .page-colour-chart .v101-colour-hero{
    width:calc(100% - 28px)!important;
    padding:18px 16px!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    border-radius:20px!important;
  }
  .page-colour-chart .v101-colour-hero h1{
    max-width:9.5ch!important;
    font-size:clamp(2.25rem,10vw,3.1rem)!important;
    line-height:.9!important;
  }
  .page-colour-chart .v101-colour-hero>div>p:not(.page-kicker):not(.colour-disclaimer){
    font-size:.82rem!important;
    line-height:1.48!important;
  }
  .page-colour-chart .colour-disclaimer{
    margin-top:9px!important;
    padding:9px 10px!important;
    font-size:.67rem!important;
  }
  .page-colour-chart .v103-colour-filter-shell{
    margin-top:8px!important;
  }

  /* Row 1 = search, row 2 = family + action. No overlap. */
  .v103-colour-primary-filters{
    grid-template-columns:minmax(0,1fr) max-content!important;
    gap:7px!important;
  }
  .v103-colour-primary-filters input{
    grid-column:1/-1!important;
  }
  .v103-colour-primary-filters select{
    grid-column:1/2!important;
    min-width:0!important;
  }
  .v103-colour-primary-filters .btn{
    grid-column:2/3!important;
    min-width:104px!important;
    padding-inline:12px!important;
    white-space:nowrap!important;
  }
}

@media (max-width:420px){
  .page-products .v101-catalogue-hero{
    padding:17px 15px 15px!important;
    gap:11px!important;
  }
  .page-products .v101-catalogue-hero h1{
    font-size:clamp(2.15rem,10.6vw,2.8rem)!important;
  }
  .page-colour-chart .v101-colour-hero{
    padding:16px 14px!important;
  }
  .page-colour-chart .v101-colour-hero h1{
    font-size:clamp(2.05rem,10.2vw,2.7rem)!important;
  }
  .v103-colour-primary-filters .btn{
    min-width:96px!important;
    padding-inline:9px!important;
    font-size:.68rem!important;
  }
}