/* ESNOVI V27.5.10 — phone-first homepage collage
   Keeps desktop/tablet merchandising intact. Only the mobile app shell is affected. */

@media (max-width:820px), (pointer:coarse) and (max-width:1024px){
  body.v274MobileApp.v26112Home{
    overflow-x:hidden!important;
  }

  body.v274MobileApp.v26112Home main{
    overflow-x:hidden!important;
  }

  body.v274MobileApp.v26112Home .v26112MosaicSection{
    padding-top:16px!important;
  }

  body.v274MobileApp.v26112Home .v26112SectionHead{
    align-items:flex-end!important;
    gap:10px!important;
    margin-bottom:12px!important;
  }

  body.v274MobileApp.v26112Home .v26112SectionHead h2{
    font-size:28px!important;
    line-height:1.02!important;
    letter-spacing:-.035em!important;
  }

  body.v274MobileApp.v26112Home .v26112SectionHead>a{
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }

  /* Critical fix: outer catalog groups are always ONE column on phones.
     This wins over the legacy mosaic/tablet grid that produced two squeezed cards. */
  body.v274MobileApp.v26112Home #marketplaceCategoryGrid.v275Collage,
  body.v274MobileApp.v26112Home #marketplaceCategoryGrid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-flow:row!important;
    gap:14px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    align-items:stretch!important;
  }

  body.v274MobileApp.v26112Home #marketplaceCategoryGrid>.v275Collection,
  body.v274MobileApp.v26112Home #marketplaceCategoryGrid>.v275CollectionWide{
    grid-column:1 / -1!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    padding:16px!important;
    border-radius:20px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  body.v274MobileApp.v26112Home .v275Collection>header{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 42px!important;
    align-items:start!important;
    gap:12px!important;
    margin-bottom:13px!important;
  }

  body.v274MobileApp.v26112Home .v275Collection>header>div{
    min-width:0!important;
  }

  body.v274MobileApp.v26112Home .v275Collection>header p{
    margin:0 0 5px!important;
    font-size:10px!important;
    line-height:1.25!important;
    letter-spacing:.15em!important;
  }

  body.v274MobileApp.v26112Home .v275Collection>header h2{
    margin:0!important;
    font-size:26px!important;
    line-height:.98!important;
    letter-spacing:-.035em!important;
  }

  body.v274MobileApp.v26112Home .v275Collection>header span{
    margin-top:7px!important;
    max-width:29ch!important;
    font-size:13px!important;
    line-height:1.38!important;
  }

  body.v274MobileApp.v26112Home .v275Collection>header>a{
    width:42px!important;
    height:42px!important;
    flex:0 0 42px!important;
    font-size:22px!important;
  }

  /* One hero + three readable companions. */
  body.v274MobileApp.v26112Home .v275TileGrid{
    display:grid!important;
    grid-template-columns:minmax(0,1.3fr) minmax(0,.92fr)!important;
    grid-template-rows:repeat(3,112px)!important;
    grid-auto-rows:112px!important;
    gap:8px!important;
    width:100%!important;
    min-width:0!important;
  }

  body.v274MobileApp.v26112Home .v275Tile{
    min-width:0!important;
    min-height:0!important;
    border-radius:15px!important;
    overflow:hidden!important;
  }

  body.v274MobileApp.v26112Home .v275TileHero{
    grid-column:1!important;
    grid-row:1 / span 3!important;
    min-height:352px!important;
    display:flex!important;
    flex-direction:column!important;
  }

  body.v274MobileApp.v26112Home .v275TileHero .v275TileMedia{
    flex:1 1 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
  }

  body.v274MobileApp.v26112Home .v275TileHero .v275TileMedia img{
    padding:12px!important;
  }

  body.v274MobileApp.v26112Home .v275TileHero .v275TileCopy{
    position:static!important;
    flex:0 0 auto!important;
    margin:0!important;
    padding:11px 12px 12px!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  body.v274MobileApp.v26112Home .v275TileHero .v275TileCopy strong{
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    overflow:hidden!important;
    white-space:normal!important;
    font-size:14px!important;
    line-height:1.2!important;
  }

  body.v274MobileApp.v26112Home .v275TileHero .v275Price{
    margin-top:6px!important;
    font-size:14px!important;
  }

  body.v274MobileApp.v26112Home .v275TileMini{
    grid-column:2!important;
    grid-row:auto!important;
    min-height:112px!important;
    display:grid!important;
    grid-template-columns:44% 56%!important;
    align-items:stretch!important;
  }

  body.v274MobileApp.v26112Home .v275TileMini .v275TileMedia{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
  }

  body.v274MobileApp.v26112Home .v275TileMini .v275TileMedia img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    padding:7px!important;
  }

  body.v274MobileApp.v26112Home .v275TileMini .v275TileCopy{
    position:static!important;
    align-self:center!important;
    margin:0!important;
    padding:7px 7px 7px 5px!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    min-width:0!important;
  }

  body.v274MobileApp.v26112Home .v275TileMini .v275TileCopy strong{
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    overflow:hidden!important;
    white-space:normal!important;
    text-overflow:clip!important;
    font-size:11.5px!important;
    line-height:1.18!important;
  }

  body.v274MobileApp.v26112Home .v275TileMini .v275Price{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:3px 5px!important;
    margin-top:5px!important;
    font-size:12px!important;
    line-height:1.1!important;
  }

  body.v274MobileApp.v26112Home .v275TileMini .v275Price del{
    font-size:9px!important;
  }

  body.v274MobileApp.v26112Home .v275Discount{
    left:6px!important;
    top:6px!important;
    padding:4px 6px!important;
    font-size:9px!important;
  }

  /* Smaller groups still use the available space cleanly instead of leaving a tall hole. */
  body.v274MobileApp.v26112Home .v275TileGrid.v275Few{
    grid-template-rows:repeat(2,124px)!important;
    grid-auto-rows:124px!important;
  }

  body.v274MobileApp.v26112Home .v275TileGrid.v275Few .v275TileHero{
    grid-row:1 / span 2!important;
    min-height:256px!important;
  }

  body.v274MobileApp.v26112Home .v275TileHero:only-child{
    grid-column:1 / -1!important;
    grid-row:1 / span 2!important;
  }

  body.v274MobileApp.v26112Home .v275CollectionFoot{
    margin-top:13px!important;
    padding-top:2px!important;
    min-height:34px!important;
    font-size:13px!important;
  }

  /* Keep the homepage rich, but use a horizontal rail rather than extra vertical height. */
  body.v274MobileApp.v26112Home .v275QuickSection{
    padding-top:20px!important;
  }

  body.v274MobileApp.v26112Home .v275QuickRail{
    display:flex!important;
    grid-template-columns:none!important;
    gap:10px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:0 0 6px!important;
    scroll-snap-type:x mandatory!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }

  body.v274MobileApp.v26112Home .v275QuickRail::-webkit-scrollbar{
    display:none!important;
  }

  body.v274MobileApp.v26112Home .v275QuickCard{
    flex:0 0 min(44vw,176px)!important;
    width:min(44vw,176px)!important;
    scroll-snap-align:start!important;
  }

  body.v274MobileApp.v26112Home .v275QuickCard strong{
    white-space:normal!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    overflow:hidden!important;
    min-height:2.3em!important;
    font-size:12px!important;
    line-height:1.15!important;
  }

  body.v274MobileApp.v26112Home .v275QuickCard small{
    font-size:12px!important;
  }

  /* Keep section anchors clear of the fixed app bar. */
  body.v274MobileApp.v26112Home section{
    scroll-margin-top:calc(var(--v274-appbar) + var(--v274-safe-top) + 10px)!important;
  }
}

@media (max-width:390px){
  body.v274MobileApp.v26112Home .v275Collection{
    padding:14px!important;
  }

  body.v274MobileApp.v26112Home .v275TileGrid{
    grid-template-columns:minmax(0,1.22fr) minmax(0,.9fr)!important;
    grid-template-rows:repeat(3,106px)!important;
    grid-auto-rows:106px!important;
  }

  body.v274MobileApp.v26112Home .v275TileHero{
    min-height:334px!important;
  }

  body.v274MobileApp.v26112Home .v275TileMini{
    min-height:106px!important;
  }

  body.v274MobileApp.v26112Home .v275Collection>header h2{
    font-size:24px!important;
  }
}