/* MatKoz storefront v13 — final approved desktop/mobile visual reference */

/* Reliable metallic wordmark inside the hero. */
body.storefront-v4.mk-redesign .hero-brand-logo{display:none!important}
body.storefront-v4.mk-redesign .hero-brand-word{
  position:absolute;z-index:5;left:56px;top:24px;
  display:inline-block;
  font-family:Arial Black,Arial,Helvetica,sans-serif;
  font-style:italic;font-weight:900;letter-spacing:-2.4px;
  font-size:30px;line-height:1;
  color:#eef1f3;
  text-shadow:0 1px 0 #fff,0 3px 5px rgba(0,0,0,.58);
  transform:skewX(-8deg);
  pointer-events:none;
}

/* Desktop polish against the approved reference */
@media (min-width:701px){
  body.storefront-v4.mk-redesign .final-hero>img#heroImage{
    object-fit:cover!important;
    object-position:center right!important;
    filter:contrast(1.06) saturate(.98)!important;
  }
  body.storefront-v4.mk-redesign .hero-copy{
    left:56px!important;
    top:80px!important;
    width:min(540px,53%)!important;
  }
  body.storefront-v4.mk-redesign .final-hero h1{
    font-size:42px!important;
    line-height:.98!important;
    letter-spacing:-1.5px!important;
  }
  body.storefront-v4.mk-redesign .final-hero p{
    max-width:510px!important;
    font-size:14px!important;
    line-height:1.35!important;
    margin:14px 0 18px!important;
  }
  body.storefront-v4.mk-redesign .hero-actions .btn{
    min-height:42px!important;
    padding:0 20px!important;
    background:rgba(8,10,12,.64)!important;
    color:#fff!important;
    border:1px solid rgba(255,255,255,.84)!important;
  }
}

/* Phone layout measured against approved 390 px reference */
@media (max-width:430px){
  body.storefront-v4.mk-redesign{
    background:#fff!important;
    padding-bottom:58px!important;
  }

  body.storefront-v4.mk-redesign .header{
    min-height:154px!important;
    height:auto!important;
    background:#fff!important;
    border-bottom:0!important;
  }
  body.storefront-v4.mk-redesign .head{
    width:100%!important;
    height:94px!important;
    min-height:94px!important;
    padding:0 10px!important;
    grid-template-columns:40px minmax(0,1fr) 42px!important;
    grid-template-rows:52px 38px!important;
    column-gap:6px!important;
    row-gap:0!important;
    border-bottom:0!important;
  }
  body.storefront-v4.mk-redesign .mobile-menu-open{
    grid-column:1!important;grid-row:1!important;
    width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;
    align-self:center!important;justify-self:start!important;
  }
  body.storefront-v4.mk-redesign .mobile-menu-open svg{
    width:22px!important;height:22px!important;stroke-width:1.7!important;
  }
  body.storefront-v4.mk-redesign .head .brand{
    grid-column:2!important;grid-row:1!important;
    width:154px!important;max-width:154px!important;height:38px!important;
    justify-self:center!important;align-self:center!important;
  }
  body.storefront-v4.mk-redesign .head .brand img{
    width:154px!important;max-width:154px!important;height:34px!important;max-height:34px!important;
    object-fit:contain!important;object-position:center!important;
    opacity:1!important;filter:none!important;
  }
  body.storefront-v4.mk-redesign .actions{
    grid-column:3!important;grid-row:1!important;
    width:40px!important;height:36px!important;
    justify-self:end!important;align-self:center!important;
  }
  body.storefront-v4.mk-redesign .actions .cart-action{
    width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;
  }
  body.storefront-v4.mk-redesign .actions .cart-action svg{
    width:24px!important;height:24px!important;
  }

  body.storefront-v4.mk-redesign form#storeSearchForm.search{
    grid-column:1/-1!important;grid-row:2!important;
    width:100%!important;height:36px!important;min-height:36px!important;
    grid-template-columns:minmax(0,1fr) 44px!important;
    grid-template-rows:36px!important;
    border:1px solid #e0e4e8!important;border-radius:5px!important;
    background:#f6f7f8!important;overflow:hidden!important;
    align-self:start!important;
  }
  body.storefront-v4.mk-redesign form#storeSearchForm.search input#search{
    height:36px!important;min-height:36px!important;line-height:36px!important;
    padding:0 9px 0 35px!important;
    font-size:16px!important;
  }
  body.storefront-v4.mk-redesign form#storeSearchForm.search input#search::placeholder{
    font-size:12.2px!important;color:#838b92!important;-webkit-text-fill-color:#838b92!important;
  }
  body.storefront-v4.mk-redesign form#storeSearchForm.search::before{
    left:11px!important;top:10px!important;width:12px!important;height:12px!important;
  }
  body.storefront-v4.mk-redesign form#storeSearchForm.search::after{
    left:22px!important;top:22px!important;
  }
  body.storefront-v4.mk-redesign form#storeSearchForm.search button[type="submit"]{
    width:44px!important;min-width:44px!important;height:36px!important;min-height:36px!important;
    background:#111317!important;border-radius:0!important;
  }

  body.storefront-v4.mk-redesign .mobile-benefits{display:none!important}

  body.storefront-v4.mk-redesign .nav{
    width:100%!important;height:60px!important;min-height:60px!important;
    padding:4px 7px 5px!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:4px!important;
    border-top:1px solid #edf0f2!important;
    border-bottom:1px solid #e5e8eb!important;
    background:#fff!important;
  }
  body.storefront-v4.mk-redesign .nav>a,
  body.storefront-v4.mk-redesign .nav>button{
    height:50px!important;min-height:50px!important;min-width:0!important;
    padding:3px 2px!important;
    border:1px solid #edf0f2!important;border-radius:6px!important;
    box-shadow:none!important;background:#fff!important;color:#111317!important;
    font-size:6.6px!important;line-height:1.05!important;font-weight:750!important;
    gap:2px!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.storefront-home .hero-layout{
    width:calc(100% - 14px)!important;
    margin:5px auto 0!important;
    display:block!important;
  }
  body.storefront-v4.mk-redesign.storefront-home .final-hero{
    position:relative!important;
    width:100%!important;
    height:194px!important;min-height:194px!important;max-height:194px!important;
    border-radius:7px!important;
    overflow:hidden!important;
    background:#050709!important;
  }
  body.storefront-v4.mk-redesign .final-hero>img#heroImage{
    display:block!important;
    position:absolute!important;inset:0!important;z-index:0!important;
    width:100%!important;height:100%!important;
    object-fit:cover!important;
    object-position:center right!important;
    opacity:1!important;
    filter:contrast(1.04) saturate(.96) brightness(.92)!important;
  }
  body.storefront-v4.mk-redesign .final-hero:before{
    display:block!important;content:""!important;
    position:absolute!important;inset:0!important;z-index:1!important;
    background:linear-gradient(90deg,rgba(3,5,7,.94) 0%,rgba(3,5,7,.83) 38%,rgba(3,5,7,.28) 63%,rgba(3,5,7,.02) 100%)!important;
    pointer-events:none!important;
  }
  body.storefront-v4.mk-redesign .final-hero:after{display:none!important}
  body.storefront-v4.mk-redesign .hero-brand-word{
    left:12px!important;top:12px!important;
    font-size:20px!important;letter-spacing:-1.8px!important;
  }
  body.storefront-v4.mk-redesign .hero-copy{
    position:absolute!important;
    left:12px!important;top:52px!important;inset:auto!important;
    z-index:4!important;width:62%!important;max-width:225px!important;
    color:#fff!important;
  }
  body.storefront-v4.mk-redesign .hero-copy .ey,
  body.storefront-v4.mk-redesign .hero-trust{display:none!important}
  body.storefront-v4.mk-redesign .hero-copy h1{
    margin:0!important;
    max-width:220px!important;
    color:#fff!important;
    font-size:18.2px!important;line-height:.99!important;
    letter-spacing:-.42px!important;font-weight:850!important;
  }
  body.storefront-v4.mk-redesign .hero-copy p{display:none!important}
  body.storefront-v4.mk-redesign .hero-actions{
    width:auto!important;height:auto!important;margin-top:13px!important;
  }
  body.storefront-v4.mk-redesign .hero-actions .btn{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    width:auto!important;min-width:112px!important;
    height:30px!important;min-height:30px!important;
    padding:0 11px!important;
    border:1px solid rgba(255,255,255,.9)!important;border-radius:4px!important;
    background:rgba(5,7,9,.67)!important;color:#fff!important;
    font-size:7.2px!important;font-weight:800!important;
  }
  body.storefront-v4.mk-redesign .hero-arrow{display:none!important}
  body.storefront-v4.mk-redesign .hero-dots{
    display:flex!important;left:50%!important;right:auto!important;bottom:6px!important;
    z-index:5!important;transform:translateX(-50%)!important;gap:4px!important;
  }
  body.storefront-v4.mk-redesign .hero-dots button{
    width:5px!important;height:5px!important;opacity:.5!important;
  }
  body.storefront-v4.mk-redesign .hero-dots button[aria-current="true"]{opacity:1!important}

  body.storefront-v4.mk-redesign.storefront-home .store-values{
    width:100%!important;max-width:none!important;
    height:54px!important;min-height:54px!important;
    margin:5px 0 0!important;padding:0 6px!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    border:0!important;border-top:1px solid #e6eaed!important;border-bottom:1px solid #e6eaed!important;
    border-radius:0!important;background:#fff!important;box-shadow:none!important;
  }
  body.storefront-v4.mk-redesign .store-values article{
    height:54px!important;min-height:54px!important;
    padding:4px 5px!important;
    grid-template-columns:21px minmax(0,1fr)!important;grid-template-rows:auto auto!important;
    column-gap:5px!important;row-gap:0!important;
    border-right:1px solid #e6eaed!important;background:transparent!important;box-shadow:none!important;
  }
  body.storefront-v4.mk-redesign .store-values article:nth-child(n+4){display:none!important}
  body.storefront-v4.mk-redesign .store-values article:nth-child(3){border-right:0!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:19px!important;height:19px!important;stroke:#111317!important;
  }
  body.storefront-v4.mk-redesign .store-values strong{
    font-size:6.1px!important;line-height:1.05!important;
  }
  body.storefront-v4.mk-redesign .store-values small{
    margin:0!important;font-size:4.9px!important;line-height:1.05!important;color:#747d85!important;
  }

  body.storefront-v4.mk-redesign.storefront-home .categories-section{
    width:calc(100% - 14px)!important;margin:8px auto 0!important;
  }
  body.storefront-v4.mk-redesign .categories-section .section-head{
    min-height:21px!important;margin:0 0 5px!important;
  }
  body.storefront-v4.mk-redesign .categories-section .section-head h2{
    font-size:14.4px!important;line-height:1!important;letter-spacing:-.25px!important;
  }
  body.storefront-v4.mk-redesign .categories-section .section-head:after{
    font-size:6px!important;color:#68717a!important;
  }
  body.storefront-v4.mk-redesign .categories{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important;
  }
  body.storefront-v4.mk-redesign .category{
    height:91px!important;min-height:91px!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,.82),rgba(6,8,10,.04) 67%)!important;
  }
  body.storefront-v4.mk-redesign .category b{
    left:6px!important;right:6px!important;bottom:6px!important;
    font-size:7.1px!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% - 14px)!important;margin:8px auto 0!important;
  }
  body.storefront-v4.mk-redesign .showcase-heading{
    min-height:21px!important;margin:0 0 5px!important;align-items:center!important;
  }
  body.storefront-v4.mk-redesign .showcase-heading h2{
    font-size:14.4px!important;line-height:1!important;
  }
  body.storefront-v4.mk-redesign .show-all-products{
    font-size:6px!important;color:#68717a!important;
  }
  body.storefront-v4.mk-redesign .home-product-tabs{display:none!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;
    width:auto!important;min-width:0!important;
    height:185px!important;min-height:185px!important;
    padding:5px!important;
    border:1px solid #e4e8eb!important;border-radius:6px!important;background:#fff!important;
    box-shadow: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:84px!important;min-height:84px!important;border-radius:4px!important;
  }
  body.storefront-v4.mk-redesign .showcase-product-open img{
    object-fit:contain!important;width:100%!important;height:100%!important;
  }
  body.storefront-v4.mk-redesign .showcase-card>div{
    min-height:89px!important;padding-top:3px!important;
    display:grid!important;grid-template-columns:minmax(0,1fr) 24px!important;
    grid-auto-rows:min-content!important;gap:2px 3px!important;
  }
  body.storefront-v4.mk-redesign .showcase-card>div>small{min-height:12px!important}
  body.storefront-v4.mk-redesign .showcase-card>div>b{
    display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;
    overflow:hidden!important;min-height:20px!important;max-height:20px!important;
    font-size:6.1px!important;line-height:1.07!important;color:#14181b!important;
  }
  body.storefront-v4.mk-redesign .showcase-card>div>em{
    display:flex!important;align-items:center!important;gap:2px!important;
    min-height:8px!important;font-size:5.1px!important;line-height:1!important;
    color:#16883b!important;font-style:normal!important;font-weight:700!important;
  }
  body.storefront-v4.mk-redesign .showcase-card>div>strong{
    margin-top:1px!important;font-size:8.5px!important;line-height:1!important;color:#111317!important;
  }
  body.storefront-v4.mk-redesign .showcase-discount{
    display:inline-flex!important;align-items:center!important;
    min-height:11px!important;padding:1px 4px!important;border-radius:3px!important;
    background:#16a34a!important;color:#fff!important;
    font-size:4.9px!important;font-style:normal!important;font-weight:800!important;line-height:1!important;
  }
  body.storefront-v4.mk-redesign .showcase-discount[data-tone="dark"]{background:#353b40!important}
  body.storefront-v4.mk-redesign .showcase-discount[data-tone="promo"]{background:#ef2d2d!important}
  body.storefront-v4.mk-redesign .showcase-add,
  body.storefront-v4.mk-redesign .showcase-add:disabled{
    display:grid!important;place-items:center!important;
    width:23px!important;height:23px!important;min-height:23px!important;
    padding:0!important;border:0!important;border-radius:4px!important;
    background:#111317!important;color:#fff!important;opacity:1!important;
    grid-row:2/6!important;grid-column:2!important;align-self:end!important;justify-self:end!important;
    font-size:0!important;
  }
  body.storefront-v4.mk-redesign .showcase-add::before{
    content:"";width:12px;height:12px;display:block;
    border:1px solid #fff;border-top:0;transform:skew(-7deg);
    background:linear-gradient(#fff,#fff) 2px 2px/8px 1px no-repeat,linear-gradient(#fff,#fff) 3px 8px/7px 1px no-repeat;
  }
  body.storefront-v4.mk-redesign #featuredProducts .product-favorite{display:none!important}

  body.storefront-v4.mk-redesign .home-editorial,
  body.storefront-v4.mk-redesign .home-inspiration{display:none!important}

  body.storefront-v4.mk-redesign .mobile-nav{
    position:fixed!important;z-index:95!important;
    left:0!important;right:0!important;bottom:0!important;
    height:56px!important;
    grid-template-columns:repeat(5,1fr)!important;
    background:#fff!important;border-top:1px solid #dfe4e8!important;
    padding-bottom:env(safe-area-inset-bottom)!important;
    box-shadow:0 -3px 12px rgba(17,19,23,.05)!important;
  }
  body.storefront-v4.mk-redesign .mobile-nav a,
  body.storefront-v4.mk-redesign .mobile-nav button{
    min-width:0!important;gap:1px!important;
    color:#15191c!important;background:#fff!important;border:0!important;
    font-size:7px!important;
  }
  body.storefront-v4.mk-redesign .mobile-nav svg{
    width:18px!important;height:18px!important;stroke-width:1.7!important;
  }
}

/* Slightly wider phones retain the same approved composition. */
@media (min-width:431px) and (max-width:700px){
  body.storefront-v4.mk-redesign .hero-brand-word{left:14px!important;top:12px!important;font-size:21px!important}
  body.storefront-v4.mk-redesign.storefront-home .final-hero{height:204px!important;min-height:204px!important;max-height:204px!important}
  body.storefront-v4.mk-redesign .category{height:96px!important;min-height:96px!important}
  body.storefront-v4.mk-redesign .showcase-card{height:192px!important;min-height:192px!important}
}