/* MatKoz storefront v7 — mobile 1:1 correction against approved reference, 2026-10-03 */

/* keep the metallic wordmark dominant on desktop too */
body.storefront-v4.mk-redesign .head .brand img{
  width:220px!important;
  height:48px!important;
  object-fit:contain!important;
  object-position:left center!important;
}
body.storefront-v4.mk-redesign .hero-brand-logo{
  width:170px!important;
  height:34px!important;
}
body.storefront-v4.mk-redesign .hero-actions .btn{
  min-height:40px!important;
  padding:0 19px!important;
  border:1px solid rgba(255,255,255,.92)!important;
  border-radius:6px!important;
  background:rgba(7,9,11,.62)!important;
  color:#fff!important;
  box-shadow:none!important;
}

/* v5 has stronger mobile selectors, so v7 deliberately matches/exceeds them */
@media (max-width:700px){
  body.storefront-v4.mk-redesign{
    background:#fff!important;
    padding-bottom:62px!important;
  }

  body.storefront-v4.mk-redesign .header{
    min-height:104px!important;
    border-bottom:0!important;
    background:#fff!important;
  }

  body.storefront-v4.mk-redesign .head{
    width:100%!important;
    height:104px!important;
    min-height:104px!important;
    padding:0 10px!important;
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr) 48px!important;
    grid-template-rows:54px 44px!important;
    column-gap:6px!important;
    row-gap:0!important;
    background:#fff!important;
  }

  body.storefront-v4.mk-redesign .mobile-menu-open{
    position:static!important;
    grid-column:1!important;
    grid-row:1!important;
    justify-self:start!important;
    align-self:center!important;
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
    min-height:36px!important;
    transform:none!important;
  }
  body.storefront-v4.mk-redesign .mobile-menu-open svg{
    width:24px!important;
    height:24px!important;
    stroke:#111317!important;
    stroke-width:1.8!important;
  }

  body.storefront-v4.mk-redesign .head .brand{
    position:static!important;
    grid-column:2!important;
    grid-row:1!important;
    justify-self:center!important;
    align-self:center!important;
    width:176px!important;
    max-width:176px!important;
    height:46px!important;
    margin:0!important;
    transform:none!important;
  }
  body.storefront-v4.mk-redesign .head .brand img{
    display:block!important;
    width:176px!important;
    max-width:176px!important;
    height:42px!important;
    max-height:42px!important;
    object-fit:contain!important;
    object-position:center!important;
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }

  body.storefront-v4.mk-redesign .actions{
    position:static!important;
    grid-column:3!important;
    grid-row:1!important;
    justify-self:end!important;
    align-self:center!important;
    width:42px!important;
    height:38px!important;
    gap:0!important;
  }
  body.storefront-v4.mk-redesign .actions .account-link,
  body.storefront-v4.mk-redesign .actions .favourites-link{
    display:none!important;
  }
  body.storefront-v4.mk-redesign .actions .cart-action{
    display:grid!important;
    place-items:center!important;
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    min-height:38px!important;
  }
  body.storefront-v4.mk-redesign .actions .cart-action svg{
    width:25px!important;
    height:25px!important;
    stroke:#111317!important;
    stroke-width:1.7!important;
  }
  body.storefront-v4.mk-redesign .actions .count{
    top:-2px!important;
    right:-2px!important;
    background:#111317!important;
    color:#fff!important;
  }

  body.storefront-v4.mk-redesign form#storeSearchForm.search{
    position:relative!important;
    inset:auto!important;
    grid-column:1/-1!important;
    grid-row:2!important;
    width:100%!important;
    height:42px!important;
    min-height:42px!important;
    margin:0!important;
    border:1px solid #dfe3e7!important;
    border-radius:6px!important;
    background:#f6f7f8!important;
    grid-template-columns:minmax(0,1fr) 46px!important;
    grid-template-rows:42px!important;
    overflow:hidden!important;
  }
  body.storefront-v4.mk-redesign form#storeSearchForm.search input#search{
    height:42px!important;
    min-height:42px!important;
    padding:0 10px 0 38px!important;
    color:#31363b!important;
    -webkit-text-fill-color:#31363b!important;
    font-size:16px!important;
    line-height:42px!important;
  }
  body.storefront-v4.mk-redesign form#storeSearchForm.search input#search::placeholder{
    color:#8a9198!important;
    -webkit-text-fill-color:#8a9198!important;
    font-size:14px!important;
  }
  body.storefront-v4.mk-redesign form#storeSearchForm.search::before{
    left:13px!important;
    top:13px!important;
    border-color:#6e767d!important;
  }
  body.storefront-v4.mk-redesign form#storeSearchForm.search::after{
    left:24px!important;
    top:25px!important;
    background:#6e767d!important;
  }
  body.storefront-v4.mk-redesign form#storeSearchForm.search button[type="submit"]{
    width:46px!important;
    min-width:46px!important;
    max-width:46px!important;
    height:42px!important;
    min-height:42px!important;
    background:#111317!important;
    color:#fff!important;
    border-radius:0!important;
  }

  /* approved reference has category nav immediately under search, not benefits */
  body.storefront-v4.mk-redesign .mobile-benefits{
    display:none!important;
  }

  body.storefront-v4.mk-redesign .nav{
    width:100%!important;
    min-height:57px!important;
    height:57px!important;
    margin:0!important;
    padding:4px 8px 5px!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:3px!important;
    overflow:hidden!important;
    border-top:1px solid #edf0f2!important;
    border-bottom:1px solid #e4e8eb!important;
    background:#fff!important;
  }
  body.storefront-v4.mk-redesign .nav>a,
  body.storefront-v4.mk-redesign .nav>button{
    min-width:0!important;
    min-height:48px!important;
    height:48px!important;
    padding:2px 1px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    gap:2px!important;
    border:0!important;
    border-radius:5px!important;
    background:#fff!important;
    color:#111317!important;
    font-size:6.7px!important;
    line-height:1.02!important;
    font-weight:700!important;
    text-align:center!important;
  }
  body.storefront-v4.mk-redesign .nav .nav-icon,
  body.storefront-v4.mk-redesign .nav .nav-icon svg{
    width:21px!important;
    height:21px!important;
  }
  body.storefront-v4.mk-redesign .nav>a:nth-of-type(n+6),
  body.storefront-v4.mk-redesign .nav>button[data-nav-view]{
    display:none!important;
  }

  body.storefront-v4.mk-redesign.storefront-home .hero-layout{
    width:calc(100% - 16px)!important;
    margin:7px auto 0!important;
    display:block!important;
  }
  body.storefront-v4.mk-redesign.storefront-home .final-hero{
    width:100%!important;
    height:162px!important;
    min-height:162px!important;
    max-height:162px!important;
    margin:0!important;
    border-radius:7px!important;
    overflow:hidden!important;
    background:#080a0c!important;
  }
  body.storefront-v4.mk-redesign .final-hero>img{
    object-position:62% center!important;
    filter:saturate(.92) contrast(1.08) brightness(.92)!important;
  }
  body.storefront-v4.mk-redesign .final-hero:before{
    background:linear-gradient(90deg,rgba(5,7,9,.96) 0%,rgba(5,7,9,.88) 37%,rgba(5,7,9,.48) 62%,rgba(5,7,9,.08) 90%)!important;
  }
  body.storefront-v4.mk-redesign .hero-brand-logo{
    left:12px!important;
    top:10px!important;
    width:108px!important;
    height:23px!important;
  }
  body.storefront-v4.mk-redesign .hero-copy{
    top:40px!important;
    left:12px!important;
    width:63%!important;
    max-width:240px!important;
  }
  body.storefront-v4.mk-redesign .final-hero h1{
    font-size:20px!important;
    line-height:.98!important;
    letter-spacing:-.55px!important;
    font-weight:850!important;
  }
  body.storefront-v4.mk-redesign .final-hero p{
    margin:7px 0 8px!important;
    max-width:230px!important;
    font-size:8.5px!important;
    line-height:1.2!important;
    color:#f4f6f7!important;
  }
  body.storefront-v4.mk-redesign .hero-actions .btn{
    min-height:28px!important;
    height:28px!important;
    padding:0 10px!important;
    border:1px solid rgba(255,255,255,.85)!important;
    border-radius:4px!important;
    background:rgba(5,7,9,.64)!important;
    color:#fff!important;
    font-size:8px!important;
    font-weight:750!important;
  }
  body.storefront-v4.mk-redesign .hero-dots{
    left:50%!important;
    right:auto!important;
    bottom:5px!important;
    transform:translateX(-50%)!important;
    gap:4px!important;
  }
  body.storefront-v4.mk-redesign .hero-dots button{
    width:5px!important;
    height:5px!important;
  }

  /* benefit row belongs directly below hero in approved mobile reference */
  body.storefront-v4.mk-redesign.storefront-home .store-values{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    width:100%!important;
    max-width:none!important;
    min-height:51px!important;
    height:51px!important;
    margin:6px 0 0!important;
    padding:0 7px!important;
    border:0!important;
    border-top:1px solid #e7eaed!important;
    border-bottom:1px solid #e7eaed!important;
    border-radius:0!important;
    background:#fff!important;
  }
  body.storefront-v4.mk-redesign .store-values article{
    min-height:51px!important;
    height:51px!important;
    padding:4px 5px!important;
    display:grid!important;
    grid-template-columns:22px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    align-items:center!important;
    column-gap:5px!important;
    row-gap:0!important;
    text-align:left!important;
    border-right:1px solid #e7eaed!important;
  }
  body.storefront-v4.mk-redesign .store-values article:nth-child(n+4){
    display:none!important;
  }
  body.storefront-v4.mk-redesign .store-value-number{
    grid-row:1/3!important;
    margin:0!important;
  }
  body.storefront-v4.mk-redesign .store-value-number svg{
    width:20px!important;
    height:20px!important;
    stroke:#111317!important;
    stroke-width:1.7!important;
  }
  body.storefront-v4.mk-redesign .store-values strong{
    display:block!important;
    font-size:6.8px!important;
    line-height:1.05!important;
    font-weight:800!important;
    color:#15191c!important;
  }
  body.storefront-v4.mk-redesign .store-values small{
    display:block!important;
    margin:0!important;
    font-size:5.2px!important;
    line-height:1.05!important;
    color:#7b838a!important;
  }

  body.storefront-v4.mk-redesign.storefront-home .categories-section{
    width:calc(100% - 16px)!important;
    margin:8px auto 0!important;
  }
  body.storefront-v4.mk-redesign .categories-section .section-head{
    min-height:24px!important;
    margin:0 0 5px!important;
  }
  body.storefront-v4.mk-redesign .categories-section .section-head h2{
    font-size:15.5px!important;
    line-height:1!important;
    letter-spacing:-.35px!important;
  }
  body.storefront-v4.mk-redesign .categories-section .section-head:after{
    font-size:6.5px!important;
    color:#68717a!important;
  }
  body.storefront-v4.mk-redesign .categories{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
  }
  body.storefront-v4.mk-redesign .category{
    height:72px!important;
    min-height:72px!important;
    border-radius:6px!important;
  }
  body.storefront-v4.mk-redesign .category:nth-child(n+7){
    display:none!important;
  }
  body.storefront-v4.mk-redesign .category:after{
    background:linear-gradient(0deg,rgba(6,8,10,.8),rgba(6,8,10,.02) 68%)!important;
  }
  body.storefront-v4.mk-redesign .category b{
    left:6px!important;
    bottom:6px!important;
    right:5px!important;
    font-size:7.4px!important;
    line-height:1.05!important;
  }
  body.storefront-v4.mk-redesign .category i{
    display:none!important;
  }

  body.storefront-v4.mk-redesign .home-showcases{
    width:calc(100% - 16px)!important;
    margin:9px auto 0!important;
  }
  body.storefront-v4.mk-redesign .showcase-heading{
    min-height:24px!important;
    margin:0 0 5px!important;
    align-items:center!important;
  }
  body.storefront-v4.mk-redesign .showcase-heading>div{
    display:block!important;
  }
  body.storefront-v4.mk-redesign .showcase-heading h2{
    font-size:15.5px!important;
    line-height:1!important;
  }
  body.storefront-v4.mk-redesign .home-product-tabs{
    display:none!important;
  }
  body.storefront-v4.mk-redesign .show-all-products{
    font-size:6.5px!important;
    color:#68717a!important;
  }
  body.storefront-v4.mk-redesign .showcase-products{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    grid-auto-columns:auto!important;
    gap:5px!important;
    overflow:visible!important;
    padding:0!important;
  }
  body.storefront-v4.mk-redesign .showcase-card{
    display:flex!important;
    min-width:0!important;
    width:auto!important;
    min-height:168px!important;
    height:168px!important;
    padding:5px!important;
    border:1px solid #e4e8eb!important;
    border-radius:6px!important;
    scroll-snap-align:none!important;
  }
  body.storefront-v4.mk-redesign .showcase-card:nth-child(n+4){
    display:none!important;
  }
  body.storefront-v4.mk-redesign .showcase-product-open{
    height:78px!important;
    min-height:78px!important;
    border-radius:4px!important;
  }
  body.storefront-v4.mk-redesign .showcase-card>div{
    min-height:78px!important;
    padding-top:3px!important;
    grid-template-columns:minmax(0,1fr) 27px!important;
    gap:1px 3px!important;
  }
  body.storefront-v4.mk-redesign .showcase-card>div>b{
    font-size:6.7px!important;
    line-height:1.08!important;
  }
  body.storefront-v4.mk-redesign .showcase-card>div>em{
    font-size:5.8px!important;
  }
  body.storefront-v4.mk-redesign .showcase-card>div>strong{
    font-size:8.3px!important;
  }
  body.storefront-v4.mk-redesign .showcase-add{
    width:25px!important;
    height:25px!important;
    min-height:25px!important;
    border-radius:4px!important;
  }
  body.storefront-v4.mk-redesign .showcase-card>.favorite-button,
  body.storefront-v4.mk-redesign .showcase-card>[data-favorite-product]{
    width:20px!important;
    height:20px!important;
    right:4px!important;
    top:4px!important;
  }

  body.storefront-v4.mk-redesign .mobile-nav{
    height:58px!important;
    background:#fff!important;
    border-top:1px solid #dfe4e8!important;
  }
  body.storefront-v4.mk-redesign .mobile-nav a,
  body.storefront-v4.mk-redesign .mobile-nav button{
    color:#15191c!important;
    font-size:8px!important;
  }
  body.storefront-v4.mk-redesign .mobile-nav svg{
    width:20px!important;
    height:20px!important;
    stroke:#15191c!important;
    stroke-width:1.75!important;
  }
}