/* MATKOZ storefront v24 — tablet layout polish
   Fixes the real tablet screenshot: removes the empty hero gap, tightens header,
   and gives categories/products a deliberate tablet grid instead of a stretched desktop composition. */

@media (min-width:701px) and (max-width:1180px),
       (min-width:1181px) and (max-width:1366px) and (pointer:coarse){

  html body.storefront-v4.mk-redesign{
    overflow-x:hidden!important;
  }

  /* Header: still desktop-like, just properly proportioned for tablet. */
  body.storefront-v4.mk-redesign .final-topbar{
    height:24px!important;
    min-height:24px!important;
    padding:0 12px!important;
    font-size:8px!important;
  }

  body.storefront-v4.mk-redesign .head{
    width:calc(100% - 24px)!important;
    min-height:92px!important;
    padding:8px 0 9px!important;
    grid-template-columns:138px minmax(0,1fr) auto!important;
    grid-template-rows:36px 39px!important;
    gap:7px 10px!important;
  }

  body.storefront-v4.mk-redesign .head .brand{
    width:132px!important;
    max-width:132px!important;
    height:32px!important;
  }

  body.storefront-v4.mk-redesign .actions{
    gap:7px!important;
  }

  body.storefront-v4.mk-redesign .action{
    min-width:32px!important;
    height:32px!important;
    padding:0 5px!important;
  }

  body.storefront-v4.mk-redesign .action svg{
    width:20px!important;
    height:20px!important;
  }

  body.storefront-v4.mk-redesign form#storeSearchForm.search,
  body.storefront-v4.mk-redesign .search{
    height:39px!important;
    min-height:39px!important;
    border-radius:8px!important;
  }

  body.storefront-v4.mk-redesign .search input{
    font-size:14px!important;
  }

  body.storefront-v4.mk-redesign .nav{
    height:40px!important;
    min-height:40px!important;
    padding:0 12px!important;
    gap:2px!important;
  }

  body.storefront-v4.mk-redesign .nav a,
  body.storefront-v4.mk-redesign .nav button{
    height:38px!important;
    min-height:38px!important;
    padding:0 10px!important;
    font-size:9px!important;
  }

  /* Main hero: one clean column on tablet. */
  body.storefront-v4.mk-redesign.storefront-home .hero-layout{
    width:calc(100% - 24px)!important;
    margin:10px auto 0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    gap:8px!important;
    align-items:start!important;
    height:auto!important;
    min-height:0!important;
  }

  body.storefront-v4.mk-redesign.storefront-home .final-hero{
    height:286px!important;
    min-height:286px!important;
    max-height:286px!important;
    border-radius:12px!important;
  }

  body.storefront-v4.mk-redesign .hero-copy{
    top:43px!important;
    left:24px!important;
    width:56%!important;
    max-width:360px!important;
  }

  body.storefront-v4.mk-redesign .hero-copy h1{
    max-width:350px!important;
    font-size:34px!important;
    line-height:.98!important;
  }

  body.storefront-v4.mk-redesign .hero-copy p{
    max-width:330px!important;
    margin:10px 0 12px!important;
    font-size:11px!important;
  }

  body.storefront-v4.mk-redesign .hero-actions .btn{
    min-height:36px!important;
    height:36px!important;
    padding:0 14px!important;
    font-size:10px!important;
  }

  /*
   Critical fix:
   v6 left "grid-template-rows: repeat(3,1fr)" on .hero-side.
   On a one-column tablet layout that created two invisible 112px rows,
   which is exactly the huge white gap visible in the user's photo.
  */
  body.storefront-v4.mk-redesign .hero-side{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:96px!important;
    grid-auto-rows:96px!important;
    gap:8px!important;
    height:96px!important;
    min-height:96px!important;
    max-height:96px!important;
    overflow:visible!important;
    align-items:stretch!important;
  }

  body.storefront-v4.mk-redesign .hero-side>*,
  body.storefront-v4.mk-redesign .hero-side-card{
    height:96px!important;
    min-height:96px!important;
    max-height:96px!important;
    border-radius:10px!important;
  }

  body.storefront-v4.mk-redesign .hero-side-card>span{
    left:14px!important;
    top:14px!important;
    right:12px!important;
    gap:2px!important;
  }

  body.storefront-v4.mk-redesign .hero-side-card b{
    font-size:15px!important;
    line-height:1!important;
  }

  body.storefront-v4.mk-redesign .hero-side-card small{
    max-width:170px!important;
    font-size:8px!important;
    line-height:1.2!important;
  }

  /* Decorative circles add noise on tablet and cover the image corners. */
  body.storefront-v4.mk-redesign .hero-side-card i{
    display:none!important;
  }

  /* Benefits must follow the hero immediately. */
  body.storefront-v4.mk-redesign.storefront-home .store-values{
    width:calc(100% - 24px)!important;
    margin:10px auto 0!important;
    min-height:0!important;
    padding:7px!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
  }

  body.storefront-v4.mk-redesign .store-values article{
    min-height:54px!important;
    padding:7px 9px!important;
    gap:8px!important;
    border:1px solid #ece7e0!important;
    border-radius:8px!important;
  }

  body.storefront-v4.mk-redesign .store-value-number{
    width:25px!important;
    height:25px!important;
    flex:0 0 25px!important;
  }

  body.storefront-v4.mk-redesign .store-value-number svg{
    width:21px!important;
    height:21px!important;
  }

  body.storefront-v4.mk-redesign .store-values strong{
    font-size:8px!important;
  }

  body.storefront-v4.mk-redesign .store-values small{
    font-size:6.5px!important;
  }

  body.storefront-v4.mk-redesign.storefront-home .categories-section,
  body.storefront-v4.mk-redesign.storefront-home .home-showcases,
  body.storefront-v4.mk-redesign.storefront-home .home-editorial,
  body.storefront-v4.mk-redesign.storefront-home .home-inspiration{
    width:calc(100% - 24px)!important;
  }

  body.storefront-v4.mk-redesign.storefront-home .categories-section{
    margin-top:14px!important;
  }

  body.storefront-v4.mk-redesign .categories-section .section-head{
    margin-bottom:8px!important;
  }

  body.storefront-v4.mk-redesign .categories-section .section-head h2{
    font-size:19px!important;
  }

  body.storefront-v4.mk-redesign .category{
    height:112px!important;
    min-height:112px!important;
    max-height:112px!important;
    border-radius:10px!important;
  }

  body.storefront-v4.mk-redesign .category b{
    left:10px!important;
    right:10px!important;
    bottom:9px!important;
    font-size:10px!important;
  }

  body.storefront-v4.mk-redesign .category small{
    left:10px!important;
    right:10px!important;
    bottom:25px!important;
    font-size:7px!important;
  }

  body.storefront-v4.mk-redesign.storefront-home .home-showcases{
    margin-top:14px!important;
  }

  body.storefront-v4.mk-redesign .showcase-heading h2{
    font-size:22px!important;
  }

  body.storefront-v4.mk-redesign .home-product-tabs{
    gap:12px!important;
  }

  body.storefront-v4.mk-redesign .home-product-tabs button{
    font-size:8px!important;
  }

  body.storefront-v4.mk-redesign .showcase-card{
    min-height:260px!important;
  }

  body.storefront-v4.mk-redesign .showcase-card .showcase-product-open{
    height:148px!important;
    min-height:148px!important;
  }

  body.storefront-v4.mk-redesign .showcase-card b{
    font-size:11px!important;
  }

  body.storefront-v4.mk-redesign .showcase-card strong{
    font-size:13px!important;
  }
}

/* Portrait / narrower tablets: 3×3 categories instead of 4+4+1. */
@media (min-width:701px) and (max-width:980px){
  body.storefront-v4.mk-redesign.storefront-home .categories{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:9px!important;
  }

  body.storefront-v4.mk-redesign.storefront-home .showcase-products{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:9px!important;
  }
}

/* Wide landscape tablet: keep cards readable, but use the extra room. */
@media (min-width:981px) and (max-width:1180px),
       (min-width:1181px) and (max-width:1366px) and (pointer:coarse){
  body.storefront-v4.mk-redesign.storefront-home .categories{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:9px!important;
  }

  body.storefront-v4.mk-redesign.storefront-home .showcase-products{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:9px!important;
  }
}