/* MatKoz storefront — Auto detailing reference lock 2026-10-05
   Tablet + desktop composition matched to the approved reference.
   Current MatKoz logo and current categories stay untouched. */
@media (min-width:701px){
  html body.storefront-v4.mk-redesign.storefront-home .hero-layout{
    display:grid!important;
    grid-template-columns:minmax(0,3.35fr) minmax(220px,1.15fr)!important;
    grid-template-rows:1fr!important;
    gap:8px!important;
    width:min(1440px,calc(100% - 28px))!important;
    max-width:1440px!important;
    height:clamp(250px,23vw,340px)!important;
    min-height:250px!important;
    margin:8px auto 0!important;
    align-items:stretch!important;
  }

  html body.storefront-v4.mk-redesign.storefront-home .final-hero{
    position:relative!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    overflow:hidden!important;
    border-radius:7px!important;
    background:#050608!important;
    box-shadow:none!important;
  }

  html body.storefront-v4.mk-redesign .final-hero>img#heroImage{
    position:absolute!important;
    inset:0!important;
    z-index:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
    opacity:1!important;
    filter:saturate(1.10) contrast(1.08) brightness(.92)!important;
  }

  html body.storefront-v4.mk-redesign .final-hero::before{
    display:block!important;
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    pointer-events:none!important;
    background:linear-gradient(90deg,rgba(3,5,7,.93) 0%,rgba(3,5,7,.79) 34%,rgba(3,5,7,.33) 59%,rgba(3,5,7,.04) 100%)!important;
  }

  html body.storefront-v4.mk-redesign .hero-brand-word{display:none!important}
  html body.storefront-v4.mk-redesign .hero-brand-logo{
    display:block!important;
    position:absolute!important;
    z-index:5!important;
    left:28px!important;
    top:20px!important;
    width:165px!important;
    max-width:165px!important;
    height:44px!important;
    max-height:44px!important;
    object-fit:contain!important;
    object-position:left center!important;
    filter:brightness(0) invert(1) drop-shadow(0 2px 5px rgba(0,0,0,.35))!important;
  }

  html body.storefront-v4.mk-redesign .hero-copy{
    position:absolute!important;
    z-index:4!important;
    left:30px!important;
    top:76px!important;
    width:50%!important;
    max-width:570px!important;
    color:#fff!important;
  }
  html body.storefront-v4.mk-redesign .hero-copy .ey{display:none!important}
  html body.storefront-v4.mk-redesign .hero-copy h1{
    max-width:570px!important;
    margin:0 0 10px!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    font-size:clamp(34px,3.35vw,54px)!important;
    font-weight:950!important;
    line-height:.96!important;
    letter-spacing:-.045em!important;
    text-shadow:0 2px 8px rgba(0,0,0,.42)!important;
  }
  html body.storefront-v4.mk-redesign .hero-copy p{
    display:block!important;
    max-width:520px!important;
    margin:0 0 14px!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    font-size:clamp(11px,1.05vw,16px)!important;
    line-height:1.34!important;
    text-shadow:0 1px 4px rgba(0,0,0,.48)!important;
  }
  html body.storefront-v4.mk-redesign .hero-actions .btn{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:40px!important;
    height:40px!important;
    padding:0 18px!important;
    border:1px solid rgba(255,255,255,.78)!important;
    border-radius:5px!important;
    background:rgba(9,11,13,.74)!important;
    color:#fff!important;
    font-size:12px!important;
    font-weight:850!important;
    box-shadow:none!important;
  }
  html body.storefront-v4.mk-redesign .hero-trust,
  html body.storefront-v4.mk-redesign .hero-decor{display:none!important}
  html body.storefront-v4.mk-redesign .hero-arrow{
    z-index:6!important;
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    border:1px solid rgba(255,255,255,.48)!important;
    background:rgba(255,255,255,.92)!important;
    color:#111!important;
    box-shadow:0 3px 12px rgba(0,0,0,.24)!important;
  }
  html body.storefront-v4.mk-redesign .hero-dots{
    z-index:6!important;
    bottom:10px!important;
  }

  html body.storefront-v4.mk-redesign .hero-side{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
  }
  html body.storefront-v4.mk-redesign .hero-side-card{
    position:relative!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    border-radius:7px!important;
    background:#111317!important;
  }
  html body.storefront-v4.mk-redesign .hero-side-card img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    filter:saturate(1.18) contrast(1.08) brightness(.96)!important;
  }
  html body.storefront-v4.mk-redesign .hero-side-card:after{
    background:linear-gradient(90deg,rgba(4,6,8,.88),rgba(4,6,8,.17) 78%)!important;
  }
  html body.storefront-v4.mk-redesign .hero-side-card>span{
    top:12px!important;
    left:14px!important;
    right:10px!important;
    max-width:78%!important;
    gap:3px!important;
  }
  html body.storefront-v4.mk-redesign .hero-side-card b{
    color:#fff!important;
    font-size:clamp(14px,1.4vw,20px)!important;
    font-weight:900!important;
    line-height:1!important;
    text-shadow:0 1px 4px rgba(0,0,0,.55)!important;
  }
  html body.storefront-v4.mk-redesign .hero-side-card small{
    color:#fff!important;
    font-size:clamp(8px,.8vw,11px)!important;
    line-height:1.2!important;
  }
  html body.storefront-v4.mk-redesign .hero-side-card i{display:none!important}

  html body.storefront-v4.mk-redesign.storefront-home .store-values{
    width:min(1440px,calc(100% - 28px))!important;
    max-width:1440px!important;
    height:56px!important;
    min-height:56px!important;
    margin:6px auto 0!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:0!important;
    border:1px solid #e1e5e8!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:none!important;
  }
  html body.storefront-v4.mk-redesign .store-values article{
    min-width:0!important;
    height:54px!important;
    min-height:54px!important;
    padding:6px 11px!important;
    gap:8px!important;
    border:0!important;
    border-right:1px solid #e5e8eb!important;
    border-radius:0!important;
    background:#fff!important;
  }
  html body.storefront-v4.mk-redesign .store-values article:last-child{border-right:0!important}
  html body.storefront-v4.mk-redesign .store-value-number,
  html body.storefront-v4.mk-redesign .store-value-number svg{
    width:25px!important;
    height:25px!important;
    flex:0 0 25px!important;
  }
  html body.storefront-v4.mk-redesign .store-values strong{
    color:#111317!important;
    font-size:clamp(9px,.82vw,12px)!important;
    line-height:1.08!important;
  }
  html body.storefront-v4.mk-redesign .store-values small{
    color:#555b61!important;
    font-size:clamp(7px,.7vw,10px)!important;
    line-height:1.08!important;
  }

  html body.storefront-v4.mk-redesign.storefront-home .categories-section,
  html body.storefront-v4.mk-redesign.storefront-home .home-showcases,
  html body.storefront-v4.mk-redesign.storefront-home .home-editorial{
    width:min(1440px,calc(100% - 28px))!important;
    max-width:1440px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  html body.storefront-v4.mk-redesign.storefront-home .categories-section{
    margin-top:9px!important;
    padding:0!important;
  }
  html body.storefront-v4.mk-redesign .categories-section .section-head{
    margin:0 0 6px!important;
  }
  html body.storefront-v4.mk-redesign .categories-section .section-head h2{
    font-size:clamp(18px,1.6vw,24px)!important;
    font-weight:950!important;
  }
  html body.storefront-v4.mk-redesign.storefront-home .categories{
    display:grid!important;
    grid-template-columns:repeat(9,minmax(0,1fr))!important;
    gap:7px!important;
    width:100%!important;
  }
  html body.storefront-v4.mk-redesign .category{
    height:clamp(72px,7.2vw,104px)!important;
    border-radius:7px!important;
  }
  html body.storefront-v4.mk-redesign .category b{
    left:8px!important;
    bottom:7px!important;
    font-size:clamp(9px,.82vw,12px)!important;
    font-weight:900!important;
  }
}

@media (min-width:701px) and (max-width:900px){
  html body.storefront-v4.mk-redesign.storefront-home .hero-layout{
    grid-template-columns:minmax(0,2.9fr) minmax(185px,1fr)!important;
    height:250px!important;
  }
  html body.storefront-v4.mk-redesign .hero-brand-logo{
    left:20px!important;top:16px!important;width:135px!important;height:36px!important;
  }
  html body.storefront-v4.mk-redesign .hero-copy{
    left:20px!important;top:62px!important;width:54%!important;
  }
  html body.storefront-v4.mk-redesign .hero-copy h1{
    font-size:30px!important;
  }
  html body.storefront-v4.mk-redesign .hero-copy p{
    font-size:10px!important;
    margin-bottom:10px!important;
  }
  html body.storefront-v4.mk-redesign .hero-actions .btn{
    height:34px!important;min-height:34px!important;font-size:10px!important;
  }
}