/* ZUPIX MOBILE-023 — phone product typography + desktop-faithful catalogue sheet.
   Loaded after every previous mobile layer and after published design CSS. */

.z23-mobile-catalog-head{display:none}

@media (max-width:760px){
  :root{--z23-mobile-nav-h:74px}

  /* ------------------------------------------------------------
     PRODUCT CARDS
     The desktop card CSS fixes .market-card-topline at 24px. On a phone the
     taxonomy/delivery chips may need more room, so the old fixed height caused
     the chips to paint on top of the title. Reset the geometry explicitly.
     ------------------------------------------------------------ */
  html body .premium-home .market-products-showcase .market-product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    align-items:stretch!important;
  }
  html body .premium-home .market-products-showcase .market-card{
    min-width:0!important;
    width:100%!important;
    height:100%!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    border-radius:17px!important;
    background:#fff!important;
  }
  html body .premium-home .market-products-showcase .market-cover-wrap{
    flex:0 0 auto!important;
    width:100%!important;
    aspect-ratio:1/1!important;
    height:auto!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  html body .premium-home .market-products-showcase .market-card-body{
    flex:1 1 auto!important;
    min-width:0!important;
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    padding:10px 10px 11px!important;
    box-sizing:border-box!important;
  }
  html body .premium-home .market-products-showcase .market-card-topline{
    display:block!important;
    flex:0 0 auto!important;
    flex-basis:auto!important;
    width:100%!important;
    height:auto!important;
    min-height:23px!important;
    max-height:none!important;
    margin:0 0 8px!important;
    padding:0!important;
    overflow:visible!important;
  }
  html body .premium-home .market-products-showcase .market-card-meta-chips{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    width:100%!important;
    height:23px!important;
    min-height:23px!important;
    max-height:23px!important;
    margin:0!important;
    padding:0!important;
    gap:4px!important;
    overflow:hidden!important;
    white-space:nowrap!important;
  }
  html body .premium-home .market-products-showcase .market-card-meta-chips .market-card-tag,
  html body .premium-home .market-products-showcase .market-card-meta-chips .market-card-delivery{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    height:23px!important;
    min-height:23px!important;
    max-height:23px!important;
    margin:0!important;
    padding:0 7px!important;
    border-radius:8px!important;
    box-sizing:border-box!important;
    font-size:9.5px!important;
    line-height:23px!important;
    font-weight:600!important;
    letter-spacing:-.08px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  html body .premium-home .market-products-showcase .market-card-meta-chips .market-card-tag{
    flex:0 1 auto!important;
    min-width:0!important;
    max-width:calc(100% - 76px)!important;
  }
  html body .premium-home .market-products-showcase .market-card-meta-chips .market-card-delivery{
    flex:0 0 auto!important;
    max-width:92px!important;
    padding-inline:6px!important;
    font-size:9px!important;
  }
  html body .premium-home .market-products-showcase .market-card-body h3{
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    flex:0 0 40px!important;
    width:100%!important;
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
    margin:0 0 8px!important;
    padding:0!important;
    overflow:hidden!important;
    color:#152037!important;
    font-size:13.5px!important;
    line-height:20px!important;
    font-weight:650!important;
    letter-spacing:-.12px!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  html body .premium-home .market-products-showcase .market-price-line{
    flex:0 0 auto!important;
    display:flex!important;
    align-items:center!important;
    align-content:center!important;
    flex-wrap:wrap!important;
    width:100%!important;
    min-width:0!important;
    min-height:28px!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    gap:4px 6px!important;
  }
  html body .premium-home .market-products-showcase .market-price-line strong{
    flex:0 0 auto!important;
    color:#0aa054!important;
    font-size:18px!important;
    line-height:1.08!important;
    font-weight:720!important;
    letter-spacing:-.2px!important;
    white-space:nowrap!important;
  }
  html body .premium-home .market-products-showcase .market-price-line del{
    flex:0 0 auto!important;
    font-size:10px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  html body .premium-home .market-products-showcase .market-price-discount{
    flex:0 0 auto!important;
    min-height:22px!important;
    padding:3px 7px!important;
    font-size:10px!important;
    line-height:16px!important;
  }
  html body .premium-home .market-products-showcase .market-card-footer{
    flex:0 0 auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    flex-wrap:nowrap!important;
    width:100%!important;
    height:39px!important;
    min-height:39px!important;
    max-height:39px!important;
    margin:10px 0 0!important;
    padding:8px 0 0!important;
    border-top:1px solid #edf0f5!important;
    gap:5px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  html body .premium-home .market-products-showcase .market-card-seller{
    flex:1 1 auto!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  html body .premium-home .market-products-showcase .market-seller-chip{
    display:flex!important;
    align-items:center!important;
    min-width:0!important;
    width:100%!important;
    gap:5px!important;
    overflow:hidden!important;
  }
  html body .premium-home .market-products-showcase .market-seller-avatar{
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    flex:0 0 24px!important;
  }
  html body .premium-home .market-products-showcase .market-seller-chip b{
    display:block!important;
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:none!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    color:#334057!important;
    font-size:11px!important;
    line-height:1.1!important;
    font-weight:620!important;
  }
  html body .premium-home .market-products-showcase .market-card-rating{
    flex:0 0 auto!important;
    min-width:max-content!important;
    gap:1px!important;
    margin-left:2px!important;
  }
  html body .premium-home .market-products-showcase .market-card-rating .market-rating-stars,
  html body .premium-home .market-products-showcase .market-card-rating .market-review-count{
    display:none!important;
  }
  html body .premium-home .market-products-showcase .market-card-rating .market-rating-value{
    color:#455168!important;
    font-size:11px!important;
    line-height:1!important;
    font-weight:650!important;
  }
  html body .premium-home .market-products-showcase .market-card-rating .market-rating-value::after{
    content:" ★"!important;
    color:#f2a000!important;
  }

  /* ------------------------------------------------------------
     MOBILE CATALOGUE
     Keep the exact desktop taxonomy/content model, but present it as a native
     full-height sheet. The fixed bottom navigation remains usable for closing.
     ------------------------------------------------------------ */
  html body.z23-catalog-open{
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }
  html body .z18-catalog-mega{
    position:fixed!important;
    z-index:4900!important;
    left:8px!important;
    right:8px!important;
    top:8px!important;
    bottom:calc(var(--z22-mobile-nav-h,74px) + var(--z20-safe-bottom) + 8px)!important;
    width:auto!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    transform:translateY(18px) scale(.985)!important;
    transform-origin:50% 100%!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    border:1px solid rgba(221,225,236,.98)!important;
    border-radius:24px!important;
    background:#fff!important;
    box-shadow:0 28px 90px rgba(16,24,48,.25),0 3px 12px rgba(16,24,48,.08)!important;
    transition:opacity .18s ease,transform .18s ease,visibility .18s!important;
  }
  html body .z18-header.catalog-open .z18-catalog-mega{
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  html body .z23-mobile-catalog-head{
    flex:0 0 58px!important;
    height:58px!important;
    min-height:58px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto 42px!important;
    align-items:center!important;
    gap:8px!important;
    padding:0 10px 0 15px!important;
    border-bottom:1px solid #edf0f5!important;
    background:linear-gradient(180deg,#fff,#fbfbfe)!important;
    box-sizing:border-box!important;
  }
  html body .z23-mobile-catalog-head>b{
    min-width:0!important;
    color:#172239!important;
    font-size:18px!important;
    line-height:1!important;
    font-weight:760!important;
    letter-spacing:-.25px!important;
  }
  html body .z23-mobile-catalog-all{
    color:#6540df!important;
    text-decoration:none!important;
    font-size:10.5px!important;
    line-height:1!important;
    font-weight:730!important;
    white-space:nowrap!important;
  }
  html body .z23-mobile-catalog-close{
    width:40px!important;
    height:40px!important;
    padding:0!important;
    border:0!important;
    border-radius:13px!important;
    background:#f3f1fb!important;
    color:#29334a!important;
    display:grid!important;
    place-items:center!important;
    cursor:pointer!important;
  }
  html body .z23-mobile-catalog-close svg{
    width:20px!important;
    height:20px!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:1.9!important;
    stroke-linecap:round!important;
  }
  html body .z18-catalog-mega-inner{
    flex:1 1 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    border:0!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html body .z18-catalog-groups{
    flex:0 0 auto!important;
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    width:100%!important;
    min-height:53px!important;
    padding:7px 9px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    border-right:0!important;
    border-bottom:1px solid #edf0f5!important;
    background:#fafbfe!important;
    scrollbar-width:none!important;
    overscroll-behavior-inline:contain!important;
    box-sizing:border-box!important;
  }
  html body .z18-catalog-groups::-webkit-scrollbar{display:none!important}
  html body .z18-catalog-side-head,
  html body .z18-catalog-side-separator,
  html body .z18-catalog-caption,
  html body .z18-catalog-groups>.z18-mega-quick-link{
    display:none!important;
  }
  html body .z18-catalog-groups>.z18-mega-section-tab{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:38px!important;
    min-height:38px!important;
    padding:0 12px!important;
    margin:0!important;
    border:1px solid #e4e8f0!important;
    border-radius:12px!important;
    background:#fff!important;
    color:#59657b!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    box-shadow:none!important;
  }
  html body .z18-catalog-groups>.z18-mega-section-tab .z18-mega-cat-icon,
  html body .z18-catalog-groups>.z18-mega-section-tab>i{display:none!important}
  html body .z18-catalog-groups>.z18-mega-section-tab>b{
    max-width:none!important;
    color:inherit!important;
    font-size:10.5px!important;
    line-height:1!important;
    font-weight:700!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }
  html body .z18-catalog-groups>.z18-mega-section-tab.is-active{
    border-color:#cfc3fb!important;
    background:linear-gradient(135deg,#f1edff,#eef4ff)!important;
    color:#5f39dc!important;
    box-shadow:0 5px 14px rgba(93,61,211,.09)!important;
  }
  html body .z18-catalog-stage{
    flex:1 1 auto!important;
    min-height:0!important;
    width:100%!important;
    overflow:hidden!important;
    background:#fff!important;
  }
  html body .z18-mega-panel{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    padding:16px 14px 24px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    scrollbar-width:none!important;
    box-sizing:border-box!important;
    background:radial-gradient(circle at 90% 0,rgba(109,76,242,.07),transparent 34%),#fff!important;
  }
  html body .z18-mega-panel::-webkit-scrollbar{display:none!important}
  html body .z18-catalog-showcase-head{
    display:flex!important;
    align-items:flex-end!important;
    justify-content:space-between!important;
    gap:10px!important;
    margin:0 0 15px!important;
  }
  html body .z18-catalog-showcase-head>div{min-width:0!important}
  html body .z18-catalog-showcase-head span{font-size:8.5px!important;letter-spacing:.1em!important}
  html body .z18-catalog-showcase-head h2{
    margin-top:3px!important;
    font-size:22px!important;
    line-height:1.06!important;
    letter-spacing:-.45px!important;
  }
  html body .z18-catalog-showcase-head>a{
    flex:0 0 auto!important;
    font-size:10px!important;
    white-space:nowrap!important;
  }
  html body .z18-catalog-popular{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px 7px!important;
    margin:0 0 18px!important;
  }
  html body .z18-catalog-popular>a,
  html body .z18-catalog-popular>a:nth-child(n){
    display:grid!important;
    min-width:0!important;
    padding:6px 2px!important;
    gap:6px!important;
  }
  html body .z18-catalog-popular>a>span{
    width:58px!important;
    height:58px!important;
    border-radius:16px!important;
  }
  html body .z18-catalog-popular b{
    width:100%!important;
    max-width:92px!important;
    margin:auto!important;
    font-size:10px!important;
    line-height:1.22!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  html body .z18-mega-subhead{
    margin:3px 0 10px!important;
    align-items:center!important;
  }
  html body .z18-mega-subhead h3{font-size:15px!important}
  html body .z18-mega-subhead a{font-size:9.5px!important}
  html body .z18-catalog-secondary{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:9px 7px!important;
    margin:0 0 18px!important;
  }
  html body .z18-catalog-secondary>a,
  html body .z18-catalog-secondary>a:nth-child(n){
    display:grid!important;
    min-width:0!important;
    gap:5px!important;
  }
  html body .z18-catalog-secondary>a>span{width:48px!important;height:48px!important;border-radius:13px!important}
  html body .z18-catalog-secondary>a>b{
    width:100%!important;
    font-size:9.5px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  html body .z18-catalog-columns{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:18px 14px!important;
    padding-top:16px!important;
    border-top:1px solid #edf0f5!important;
  }
  html body .z18-catalog-columns>div,
  html body .z18-catalog-columns>div:last-child{
    display:grid!important;
    min-width:0!important;
    gap:8px!important;
  }
  html body .z18-catalog-columns>div:last-child{grid-column:1/-1!important}
  html body .z18-catalog-columns h3{font-size:12.5px!important;line-height:1.25!important}
  html body .z18-catalog-columns a{
    width:auto!important;
    max-width:100%!important;
    font-size:11px!important;
    line-height:1.35!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  /* Bottom nav is the persistent close affordance for the sheet. */
  html body .z20-mobile-nav{z-index:5000!important}
  html body .z20-mobile-catalog[data-popup-open="1"]{
    background:#f4f0ff!important;
    color:#5e38da!important;
  }
}

@media (max-width:390px){
  html body .premium-home .market-products-showcase .market-card-body{padding:9px 9px 10px!important}
  html body .premium-home .market-products-showcase .market-card-body h3{font-size:13px!important;line-height:19px!important;height:38px!important;min-height:38px!important;max-height:38px!important;flex-basis:38px!important}
  html body .premium-home .market-products-showcase .market-card-meta-chips .market-card-tag,
  html body .premium-home .market-products-showcase .market-card-meta-chips .market-card-delivery{font-size:9px!important;padding-inline:6px!important}
  html body .premium-home .market-products-showcase .market-card-meta-chips .market-card-delivery{font-size:8.6px!important;max-width:86px!important}
  html body .z18-catalog-popular>a>span{width:54px!important;height:54px!important}
}

@media (prefers-reduced-motion:reduce){
  html body .z18-catalog-mega{transition:none!important}
}