/* MATKOZ storefront v23 — cleanup: category arrows, bestseller carts, working favorites, full inspiration cards */

/* 1) Category tiles: remove the white circular arrows that cover photos/text. */
body.storefront-v4.mk-redesign .category i,
body.storefront-v4.mk-redesign .category i::after{
  display:none!important;
  content:none!important;
}
body.storefront-v4.mk-redesign .category b{
  right:10px!important;
}
body.storefront-v4.mk-redesign .category small{
  right:10px!important;
}

/* 2) Bestseller row: product cards are for discovery here, not giant cart controls. */
body.storefront-v4.mk-redesign #featuredProducts .showcase-add,
body.storefront-v4.mk-redesign #featuredProducts .showcase-add:disabled{
  display:none!important;
}
body.storefront-v4.mk-redesign #featuredProducts .showcase-card>div{
  grid-template-columns:minmax(0,1fr)!important;
}
body.storefront-v4.mk-redesign #featuredProducts .showcase-card>div>*{
  grid-column:1!important;
}

/* 3) Favorites: always visible, clearly interactive and with an obvious selected state. */
body.storefront-v4.mk-redesign #featuredProducts .product-favorite,
body.storefront-v4.mk-redesign .product-card .product-favorite,
body.storefront-v4.mk-redesign .similar-product .product-favorite{
  display:grid!important;
  place-items:center!important;
  z-index:8!important;
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;
  padding:0!important;
  border:1px solid #d8d2cb!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.97)!important;
  color:#171513!important;
  box-shadow:0 2px 8px rgba(25,20,15,.08)!important;
  cursor:pointer!important;
  touch-action:manipulation!important;
}
body.storefront-v4.mk-redesign #featuredProducts .product-favorite{
  top:7px!important;
  right:7px!important;
}
body.storefront-v4.mk-redesign .product-favorite svg{
  width:17px!important;
  height:17px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
  pointer-events:none!important;
}
body.storefront-v4.mk-redesign .product-favorite.is-favorite{
  border-color:#171513!important;
  background:#171513!important;
  color:#fff!important;
}
body.storefront-v4.mk-redesign .product-favorite.is-favorite svg{
  fill:currentColor!important;
}
body.storefront-v4.mk-redesign .product-favorite:active{
  transform:scale(.94)!important;
}

/* 4) The four inspiration cards at the bottom: show complete, intentional cards instead of cropped strips. */
body.storefront-v4.mk-redesign.storefront-home .home-inspiration{
  width:min(1440px,calc(100% - 40px))!important;
  max-width:1440px!important;
  margin:28px auto 22px!important;
  padding:0!important;
  overflow:visible!important;
}
body.storefront-v4.mk-redesign .inspiration-heading{
  margin:0 0 12px!important;
}
body.storefront-v4.mk-redesign .inspiration-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  align-items:stretch!important;
}
body.storefront-v4.mk-redesign .inspiration-card,
body.storefront-v4.mk-redesign .inspiration-card:nth-child(n+4){
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  overflow:hidden!important;
  border:1px solid #e4ded7!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#171513!important;
  text-decoration:none!important;
  box-shadow:none!important;
}
body.storefront-v4.mk-redesign .inspiration-card::after{
  display:none!important;
  content:none!important;
}
body.storefront-v4.mk-redesign .inspiration-card img{
  position:static!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:16 / 9!important;
  object-fit:cover!important;
  object-position:center!important;
  border:0!important;
  background:#f5f3ef!important;
}
body.storefront-v4.mk-redesign .inspiration-card small{
  position:static!important;
  display:block!important;
  width:max-content!important;
  max-width:calc(100% - 24px)!important;
  margin:12px 12px 4px!important;
  padding:3px 7px!important;
  border-radius:999px!important;
  background:#f4efe8!important;
  color:#805a32!important;
  font-size:9px!important;
  line-height:1.2!important;
  font-weight:800!important;
}
body.storefront-v4.mk-redesign .inspiration-card b{
  position:static!important;
  display:block!important;
  margin:0!important;
  padding:0 12px 14px!important;
  color:#171513!important;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  font-size:13px!important;
  line-height:1.25!important;
  font-weight:750!important;
}

/* Tablet: preserve all four cards without turning them into tiny ribbons. */
@media (min-width:701px) and (max-width:1366px){
  body.storefront-v4.mk-redesign.storefront-home .home-inspiration{
    width:calc(100% - 28px)!important;
    margin-top:22px!important;
  }
  body.storefront-v4.mk-redesign .inspiration-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:10px!important;
  }
  body.storefront-v4.mk-redesign .inspiration-card img{
    aspect-ratio:4 / 3!important;
  }
  body.storefront-v4.mk-redesign .inspiration-card b{
    font-size:11px!important;
    padding:0 10px 12px!important;
  }
  body.storefront-v4.mk-redesign .inspiration-card small{
    margin:9px 10px 4px!important;
    font-size:8px!important;
  }
}

/* Phone: show all four cards as a clean 2×2 grid. */
@media (max-width:700px){
  body.storefront-v4.mk-redesign.storefront-home .home-inspiration{
    display:block!important;
    width:calc(100% - 18px)!important;
    margin:18px auto 14px!important;
  }
  body.storefront-v4.mk-redesign .inspiration-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  body.storefront-v4.mk-redesign .inspiration-card,
  body.storefront-v4.mk-redesign .inspiration-card:nth-child(n+4){
    display:flex!important;
  }
  body.storefront-v4.mk-redesign .inspiration-card img{
    aspect-ratio:4 / 3!important;
  }
  body.storefront-v4.mk-redesign .inspiration-card small{
    margin:8px 8px 3px!important;
    font-size:7px!important;
  }
  body.storefront-v4.mk-redesign .inspiration-card b{
    padding:0 8px 10px!important;
    font-size:10px!important;
  }
}