/* Mitsoli v2.1.1 — mobile density, list ending and footer polish */
:root{--m211:#2F1727;--m211-line:#e7dfe4;--m211-soft:#f8f5f7}

@media (max-width:767px){
  /* ---------------------------------------------------------
     PRODUCT CARDS: remove the oversized white gap above CTA
     --------------------------------------------------------- */
  .common-home .m20-product-card,
  .common-home .mitsoli-home-card,
  #product-category .mitsoli-v15-card,
  #product-search .mitsoli-v15-card{
    height:auto!important;
    min-height:0!important;
  }

  .common-home .m20-product-body,
  .common-home .mitsoli-home-body,
  #product-category .mitsoli-v15-card-body,
  #product-search .mitsoli-v15-card-body{
    display:block!important;
    height:auto!important;
    min-height:0!important;
    padding-top:9px!important;
    padding-bottom:9px!important;
  }

  .common-home .m20-product-body,
  .common-home .mitsoli-home-body{
    padding-left:9px!important;
    padding-right:9px!important;
  }

  .common-home .m20-product-model,
  .common-home .mitsoli-home-title,
  .common-home .mitsoli-home-model{
    margin:0!important;
    min-height:0!important;
  }

  .common-home .m20-product-swatches,
  .common-home .mitsoli-home-swatches{
    min-height:0!important;
    margin-top:6px!important;
    margin-bottom:7px!important;
  }

  .common-home .m20-product-cta,
  .common-home .mitsoli-home-contact{
    position:relative!important;
    inset:auto!important;
    display:flex!important;
    width:100%!important;
    height:44px!important;
    min-height:44px!important;
    margin:10px 0 0!important;
    padding:0 38px 0 12px!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
  }

  /* No legacy equal-height/flex spacer should stretch card captions. */
  .common-home .m20-product-card > *,
  .common-home .mitsoli-home-card > *{
    flex-grow:0!important;
  }

  /* ---------------------------------------------------------
     CATEGORY LIST END: one clean action, compact status
     --------------------------------------------------------- */
  #product-category .mitsoli-v15-grid{
    margin-bottom:0!important;
  }
  #product-category .mitsoli-load-more-wrap{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    width:100%!important;
    margin:16px 0 8px!important;
    padding:0!important;
  }
  #product-category .mitsoli-load-more{
    width:calc(100% - 24px)!important;
    max-width:360px!important;
    min-height:48px!important;
    margin:0 auto!important;
    padding:0 18px!important;
    border-radius:0!important;
    background:var(--m211)!important;
    border-color:var(--m211)!important;
    color:#fff!important;
    font-size:13px!important;
    font-weight:600!important;
    letter-spacing:.025em!important;
  }
  #product-category .mitsoli-listing-status{
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    font-size:10px!important;
    color:#80747b!important;
  }

  /* Load-more is the primary mobile paging pattern. Keep numeric pagination
     in the DOM for desktop/SEO but remove the noisy 1..9 grid on phones. */
  #product-category .pagination-wrapper{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-height:0!important;
    margin:8px 0 20px!important;
    padding:0!important;
    gap:0!important;
  }
  #product-category #mitsoli-standard-pagination{
    display:none!important;
  }
  #product-category #mitsoli-page-result,
  #product-category .page-result{
    float:none!important;
    width:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:6px 12px!important;
    text-align:center!important;
    font-size:12px!important;
    line-height:1.4!important;
    color:#4d454a!important;
  }

  /* Search result pagination gets the same compact treatment. */
  #product-search .pagination-wrapper{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    margin:12px 0 20px!important;
    padding:0!important;
  }
  #product-search .pagination-wrapper .page-link{
    max-width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }
  #product-search .pagination-wrapper .page-link::-webkit-scrollbar{display:none!important}
  #product-search .pagination{
    display:flex!important;
    flex-wrap:nowrap!important;
    width:max-content!important;
    margin:0 auto 8px!important;
  }
  #product-search .pagination>li>a,
  #product-search .pagination>li>span{
    width:42px!important;
    height:42px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
  }
  #product-search .page-result{
    width:100%!important;
    padding:5px 0!important;
    text-align:center!important;
    font-size:12px!important;
  }

  /* ---------------------------------------------------------
     HOMEPAGE NEW COLLECTION: tighter mobile rhythm
     --------------------------------------------------------- */
  .common-home .m20-new-collection{
    padding-top:18px!important;
    padding-bottom:22px!important;
  }
  .common-home .m20-section-head{
    gap:12px!important;
    margin-bottom:13px!important;
  }
  .common-home .m20-section-title h2{
    font-size:27px!important;
    line-height:1.05!important;
  }
  .common-home .m20-section-title span{
    margin-top:5px!important;
    font-size:10.5px!important;
    line-height:1.35!important;
  }
  .common-home .m20-view-all{
    flex:0 0 auto!important;
    padding:5px 0!important;
    font-size:9.5px!important;
  }
  .common-home .m20-products-grid{
    gap:9px!important;
  }

  /* ---------------------------------------------------------
     VALUE STRIP: currently too tall on mobile
     --------------------------------------------------------- */
  .common-home .m20-value-strip{
    padding:7px 0!important;
  }
  .common-home .m20-value-grid{
    gap:0!important;
  }
  .common-home .m20-value-grid>div{
    min-height:0!important;
    padding:10px 2px!important;
    gap:12px!important;
  }
  .common-home .m20-value-grid>div>i{
    width:28px!important;
    flex:0 0 28px!important;
    font-size:24px!important;
    text-align:center!important;
  }
  .common-home .m20-value-grid strong{
    font-size:14px!important;
    line-height:1.2!important;
  }
  .common-home .m20-value-grid small{
    margin-top:2px!important;
    font-size:9.5px!important;
    line-height:1.35!important;
  }

  /* ---------------------------------------------------------
     FOOTER: keep all information, but remove excess vertical height
     --------------------------------------------------------- */
  .m20-footer{
    padding-top:23px!important;
  }
  .m20-footer .m20-shell{
    width:calc(100% - 32px)!important;
  }
  .m20-footer-grid{
    grid-template-columns:1fr 1fr!important;
    gap:18px 18px!important;
    padding-bottom:20px!important;
  }
  .m20-footer-brand{
    grid-column:1/-1!important;
    text-align:center!important;
    padding-bottom:2px!important;
  }
  .m20-footer-wordmark{
    font-size:38px!important;
  }
  .m20-footer-brand p{
    max-width:290px!important;
    margin:8px auto 9px!important;
    font-size:10.5px!important;
    line-height:1.45!important;
  }
  .m20-footer-phone{
    display:inline-block!important;
    margin-top:2px!important;
    font-size:11px!important;
  }
  .m20-footer h5{
    margin:0 0 9px!important;
    font-size:11.5px!important;
  }
  .m20-footer-grid>div>a{
    margin-bottom:5px!important;
    font-size:10.5px!important;
    line-height:1.4!important;
  }
  .m20-footer-contact{
    grid-column:1/-1!important;
    margin-top:2px!important;
    padding-top:14px!important;
    border-top:1px solid rgba(255,255,255,.14)!important;
    text-align:center!important;
  }
  .m20-footer-contact h5{
    margin-bottom:9px!important;
  }
  .m20-footer-wa{
    justify-content:center!important;
    align-items:center!important;
    gap:9px!important;
    margin:0 auto 9px!important;
  }
  .m20-footer-wa>i{
    flex:0 0 auto!important;
    font-size:26px!important;
  }
  .m20-footer-wa span{
    align-items:flex-start!important;
    text-align:left!important;
    gap:2px!important;
  }
  .m20-footer-wa strong{
    font-size:15px!important;
  }
  .m20-footer-wa small{
    max-width:250px!important;
    font-size:9.5px!important;
    line-height:1.35!important;
  }
  .m20-footer-bottom{
    padding:10px 0 calc(10px + env(safe-area-inset-bottom))!important;
  }
  .m20-footer-bottom .m20-shell{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    text-align:center!important;
    line-height:1.45!important;
    font-size:9px!important;
  }
  .m20-footer-bottom .m20-shell>span:last-child{
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:center!important;
    gap:4px 13px!important;
  }
  .m20-footer-bottom a{
    margin:0!important;
  }

  /* Final scroll breathing room for iPhone browser chrome without creating
     the very tall empty block seen in the screenshots. */
  body{
    padding-bottom:env(safe-area-inset-bottom)!important;
  }
}

@media (max-width:390px){
  .common-home .m20-section-title h2{font-size:25px!important}
  .common-home .m20-view-all{font-size:9px!important}
  .m20-footer-grid{gap:16px 14px!important}
}