/* MIXTYS v6.9 — viewport-safe editorial home */
:root{--v69-header-space:152px}

@media (min-width:1181px){
  body #app .hero.hero-v54{
    height:clamp(470px,calc(100svh - var(--v69-header-space)),610px)!important;
    min-height:470px!important;
    max-height:610px!important;
    grid-template-columns:minmax(0,1.02fr) minmax(520px,.98fr)!important;
    overflow:hidden!important;
  }
  body #app .hero-v54 .hero-feature{
    min-height:0!important;
    height:100%!important;
    grid-template-columns:minmax(285px,43%) minmax(0,57%)!important;
    overflow:hidden!important;
  }
  body #app .hero-v54 .hero-feature-copy{
    min-height:0!important;
    padding:clamp(22px,3vh,34px) 14px clamp(22px,3vh,34px) clamp(28px,3.5vw,54px)!important;
  }
  body #app .hero-v54 .hero-feature-copy h1{
    font-size:clamp(2.8rem,4.1vw,4.65rem)!important;
    line-height:.91!important;
    margin:.42rem 0 .65rem!important;
  }
  body #app .hero-v54 .hero-feature-photo{
    height:100%!important;
    min-height:0!important;
    padding:10px 12px 10px 0!important;
    display:grid!important;
    place-items:end center!important;
    overflow:hidden!important;
  }
  body #app .hero-v54 .hero-feature-bg{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center bottom!important;
    align-self:stretch!important;
    justify-self:stretch!important;
  }
  body #app .hero-v54 .hero-category-grid{
    height:100%!important;
    min-height:0!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,minmax(0,1fr))!important;
    grid-auto-rows:0!important;
    overflow:hidden!important;
  }
  body #app .hero-v54 .hero-category-card:nth-child(7){grid-column:span 2!important}
}

@media (min-width:901px) and (max-width:1180px){
  body #app .hero.hero-v54{
    display:grid!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    grid-template-columns:1fr!important;
    overflow:visible!important;
  }
  body #app .hero-v54 .hero-feature{height:clamp(470px,66svh,560px)!important;min-height:0!important}
  body #app .hero-v54 .hero-feature-photo{height:100%!important;min-height:0!important;overflow:hidden!important}
  body #app .hero-v54 .hero-feature-bg{height:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center bottom!important}
  body #app .hero-v54 .hero-category-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:repeat(2,210px)!important;grid-auto-rows:0!important}
}

@media (max-width:900px){
  body #app .hero.hero-v54{height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important}
  body #app .hero-v54 .hero-feature{height:auto!important;min-height:0!important;overflow:visible!important}
  body #app .hero-v54 .hero-feature-photo{
    height:clamp(300px,62svh,520px)!important;
    min-height:0!important;
    max-height:none!important;
    padding:8px!important;
    overflow:hidden!important;
  }
  body #app .hero-v54 .hero-feature-bg{
    width:100%!important;
    height:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center bottom!important;
  }
  body #app .hero-v54 .hero-category-grid{overflow:visible!important;grid-auto-rows:clamp(178px,52vw,250px)!important}
}

@media (max-width:479px){
  body #app .hero-v54 .hero-feature-photo{height:clamp(285px,68svh,430px)!important;min-height:0!important;max-height:none!important}
  body #app .hero-v54 .hero-category-grid{grid-auto-rows:clamp(170px,54vw,220px)!important}
}

@media (max-height:760px) and (min-width:1181px){
  :root{--v69-header-space:142px}
  body #app .hero.hero-v54{min-height:440px!important;height:calc(100svh - var(--v69-header-space))!important}
  body #app .hero-v54 .hero-feature-copy h1{font-size:clamp(2.55rem,3.8vw,4.15rem)!important}
  body #app .hero-v54 .hero-feature-copy>p{font-size:.88rem!important}
  body #app .hero-v54 .hero-buttons{margin-top:.72rem!important}
}
