/* FLY How It Works — Finesse V11 */

/* =========================================================
   1) ASK INTRO — keep composer elegant at changing widths
   ========================================================= */

.marketAskV2__inner{
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr) !important;
}

.marketAskV2__composer{
  min-width:0 !important;
  width:100% !important;
  max-width:680px !important;
  justify-self:end !important;
}

.marketAskV2__input{
  min-width:0 !important;
  overflow:hidden !important;
}

.marketAskV2__query{
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

@media(max-width:1050px){
  .marketAskV2__inner{
    grid-template-columns:1fr !important;
    gap:42px !important;
  }

  .marketAskV2__copy{
    max-width:620px !important;
  }

  .marketAskV2__composer{
    justify-self:start !important;
    width:min(100%,680px) !important;
    max-width:680px !important;
  }
}

@media(max-width:560px){
  .marketAskV2{
    padding-left:20px !important;
    padding-right:20px !important;
  }

  .marketAskV2__composer{
    width:100% !important;
    max-width:none !important;
    grid-template-columns:1fr !important;
    gap:9px !important;
    padding:9px !important;
    border-radius:20px !important;
  }

  .marketAskV2__input{
    width:100% !important;
    min-height:68px !important;
    padding:0 16px !important;
    border-radius:14px !important;
  }

  .marketAskV2__button{
    width:100% !important;
    min-width:0 !important;
    min-height:50px !important;
    border-radius:14px !important;
  }

  .marketAskV2__prefix{
    font-size:15px !important;
  }

  .marketAskV2__query{
    font-size:16px !important;
  }
}


/* =========================================================
   2) CATEGORY MARKETPLACE — keep desktop, fix reduced/mobile
   ========================================================= */

/* Desktop stays exactly in the tuned two-column composition. */
@media(min-width:1051px){
  .marketCategoriesV4__grid{
    transform:translateX(-72px) !important;
    justify-self:end !important;
  }
}

/* As soon as the desktop composition gets tight, stack cleanly.
   This prevents the 3x3 universe from ever falling off-screen. */
@media(max-width:1050px){
  .marketCategoriesV4__inner{
    grid-template-columns:1fr !important;
    gap:44px !important;
  }

  .marketCategoriesV4__copy{
    max-width:650px !important;
  }

  .marketCategoriesV4__grid{
    transform:none !important;
    justify-self:center !important;
    margin:0 auto !important;
  }
}

@media(max-width:620px){
  .marketCategoriesV4{
    padding-left:20px !important;
    padding-right:20px !important;
    overflow:hidden !important;
  }

  .marketCategoriesV4__grid{
    width:max-content !important;
    max-width:100% !important;
    grid-template-columns:repeat(3,58px) !important;
    gap:18px 16px !important;
    justify-self:center !important;
    margin:0 auto !important;
    transform:none !important;
  }

  .marketCategoriesV4__square{
    width:56px !important;
    height:56px !important;
    border-radius:15px !important;
  }

  .marketCategoriesV4__square img{
    width:36px !important;
    height:36px !important;
  }

  .marketCategoriesV4__label{
    max-width:62px !important;
    font-size:9px !important;
  }
}


/* =========================================================
   3) MIX-AND-MATCH — description polish
   ========================================================= */

.marketMixV6__lead{
  max-width:44rem !important;
}

@media(max-width:620px){
  .marketMixV6__lead{
    max-width:34rem !important;
  }
}