/* CASE2CASE HOME NATIVE UX V1.2.2 — explicit mobile layout fix */

/* Minimalism: only a few hit stickers on the homepage.
   Sale percent stickers remain on every sale item because the discount value is functional information. */
[data-c2c-hits] .c2c-v2-product .c2c-home-hit-badge{
  display:none !important;
}
[data-c2c-hits] .c2c-v2-product:nth-child(1) .c2c-home-hit-badge,
[data-c2c-hits] .c2c-v2-product:nth-child(4) .c2c-home-hit-badge,
[data-c2c-hits] .c2c-v2-product:nth-child(7) .c2c-home-hit-badge{
  display:inline-flex !important;
}

/* Mobile benefits: force a true 2 x 2 grid.
   This explicitly cancels the old rule:
   .c2c-v2-benefits>div:last-child { grid-column:1/-1; } */
@media(max-width:767px){
  .c2c-v2-benefits[data-c2c-benefits="v1.0.5"]{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
    gap:14px 12px !important;
    margin:14px 0 0 !important;
    padding:14px 0 8px !important;
    width:100% !important;
    max-width:none !important;
  }

  .c2c-v2-benefits[data-c2c-benefits="v1.0.5"] > .c2c-v2-benefit,
  .c2c-v2-benefits[data-c2c-benefits="v1.0.5"] > .c2c-v2-benefit:last-child{
    grid-column:auto !important;
    grid-row:auto !important;
    display:grid !important;
    grid-template-columns:40px minmax(0,1fr) !important;
    align-items:center !important;
    justify-content:stretch !important;
    gap:10px !important;
    min-width:0 !important;
    min-height:58px !important;
    margin:0 !important;
    padding:0 !important;
    text-align:left !important;
  }

  .c2c-v2-benefits[data-c2c-benefits="v1.0.5"] .c2c-v2-benefit em{
    display:grid !important;
    place-items:center !important;
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    flex:0 0 40px !important;
    margin:0 !important;
    border-radius:12px !important;
    border:1px solid #e5e9f2 !important;
    background:#fff !important;
    box-shadow:0 6px 16px rgba(16,24,40,.05) !important;
    font-size:19px !important;
    line-height:1 !important;
  }

  .c2c-v2-benefits[data-c2c-benefits="v1.0.5"] .c2c-v2-benefit span{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    min-width:0 !important;
    width:100% !important;
  }

  .c2c-v2-benefits[data-c2c-benefits="v1.0.5"] .c2c-v2-benefit strong{
    display:block !important;
    margin:0 !important;
    font-size:13px !important;
    line-height:1.16 !important;
    font-weight:700 !important;
    color:#13161c !important;
  }

  .c2c-v2-benefits[data-c2c-benefits="v1.0.5"] .c2c-v2-benefit small{
    display:block !important;
    margin:4px 0 0 !important;
    font-size:11px !important;
    line-height:1.2 !important;
    color:#737c8b !important;
  }

  /* Micro polish without changing page structure */
  .c2c-home-sale-section{
    margin-top:16px !important;
  }
  .c2c-home-sale-section + .c2c-v2-benefits[data-c2c-benefits="v1.0.5"]{
    margin-top:12px !important;
  }
  .c2c-v2-faq{
    margin-top:10px !important;
  }
  .c2c-v2-faq .c2c-v2-section-head{
    margin-bottom:14px !important;
  }
  .c2c-v2-faq details{
    border-radius:12px !important;
    margin-bottom:9px !important;
  }
  .c2c-v2-faq summary{
    min-height:58px !important;
    display:flex !important;
    align-items:center !important;
    padding:14px 42px 14px 15px !important;
    font-size:14px !important;
    line-height:1.25 !important;
  }
  .c2c-v2-faq summary:after{
    top:50% !important;
    transform:translateY(-50%) !important;
  }
  .c2c-v2-faq details[open] summary:after{
    transform:translateY(-50%) rotate(180deg) !important;
  }
}

/* On very narrow screens keep hierarchy clean without forcing text into awkward wrapping. */
@media(max-width:365px){
  .c2c-v2-benefits[data-c2c-benefits="v1.0.5"]{
    gap:12px 8px !important;
  }
  .c2c-v2-benefits[data-c2c-benefits="v1.0.5"] > .c2c-v2-benefit{
    grid-template-columns:36px minmax(0,1fr) !important;
    gap:8px !important;
  }
  .c2c-v2-benefits[data-c2c-benefits="v1.0.5"] .c2c-v2-benefit em{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
  }
  .c2c-v2-benefits[data-c2c-benefits="v1.0.5"] .c2c-v2-benefit strong{
    font-size:12px !important;
  }
}

/* CASE2CASE_HOME_DESKTOP_FOOTER_GAP_V123
   Home desktop only:
   remove excessive whitespace between FAQ and footer.
   Mobile layout remains untouched. */
@media (min-width:768px){
  .c2c-v2-shell{
    padding-bottom:16px !important;
  }

  .c2c-footer{
    margin-top:0 !important;
  }
}
