/* v783A — Add-on Services split layout correction.
   Restore the intended desktop structure: one half image + one half content.
   Inside the content half, detail panels become wide horizontal rows instead of narrow side-by-side columns.
   Scope: public add-on page only. No payment/AI/chatbot/runtime logic changes. */

body.addon-page #addon-options .container{
  width:min(100% - 56px, 1760px) !important;
  max-width:1760px !important;
}

body.addon-page .addon-service-list{
  gap:clamp(30px, 3vw, 52px) !important;
}

@media (min-width: 981px){
  body.addon-page .addon-service-card,
  body.addon-page .addon-service-card:nth-child(even){
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items:stretch !important;
    gap:0 !important;
    overflow:hidden !important;
    border-radius:30px !important;
  }

  body.addon-page .addon-service-card .addon-service-media{
    order:1 !important;
  }

  body.addon-page .addon-service-card .addon-service-content{
    order:2 !important;
  }

  body.addon-page .addon-service-card:nth-child(even) .addon-service-content{
    order:1 !important;
  }

  body.addon-page .addon-service-card:nth-child(even) .addon-service-media{
    order:2 !important;
  }

  body.addon-page .addon-service-media{
    width:100% !important;
    height:auto !important;
    min-height:100% !important;
    max-height:none !important;
    align-self:stretch !important;
    overflow:hidden !important;
    background:#eef5ff !important;
  }

  body.addon-page .addon-service-media img,
  body.addon-page .addon-service-media picture,
  body.addon-page .addon-service-media picture img{
    width:100% !important;
    height:100% !important;
    min-height:clamp(520px, 38vw, 720px) !important;
    max-height:none !important;
    display:block !important;
    object-fit:cover !important;
  }

  body.addon-page .addon-service-content{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    padding:clamp(30px, 2.6vw, 48px) !important;
    box-sizing:border-box !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-self:stretch !important;
  }

  body.addon-page .addon-service-content > .pill,
  body.addon-page .addon-service-content > h3,
  body.addon-page .addon-service-content > p,
  body.addon-page .addon-service-content > .small,
  body.addon-page .addon-service-content > .readable,
  body.addon-page .addon-service-content > .addon-inline-action-v303G{
    max-width:100% !important;
  }

  body.addon-page .addon-service-content h3{
    line-height:1.12 !important;
  }

  body.addon-page .addon-service-content > p{
    font-size:clamp(17px, 1vw, 19px) !important;
    line-height:1.58 !important;
  }

  body.addon-page .addon-detail-grid,
  body.addon-page .addon-service-card .addon-detail-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
    width:100% !important;
    margin:20px 0 !important;
  }

  body.addon-page .addon-detail-grid > div{
    width:100% !important;
    min-width:0 !important;
    padding:clamp(16px, 1.45vw, 24px) !important;
    border-radius:20px !important;
    box-sizing:border-box !important;
  }

  body.addon-page .addon-detail-grid strong{
    display:block !important;
    margin-bottom:10px !important;
    line-height:1.25 !important;
  }

  body.addon-page .addon-detail-grid ul{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    column-gap:24px !important;
    row-gap:8px !important;
    margin:0 !important;
    padding-left:20px !important;
  }

  body.addon-page .addon-detail-grid li{
    margin:0 !important;
    line-height:1.48 !important;
    break-inside:avoid !important;
  }
}

@media (min-width:981px) and (max-width:1220px){
  body.addon-page #addon-options .container{
    width:min(100% - 36px, 1760px) !important;
  }

  body.addon-page .addon-service-card,
  body.addon-page .addon-service-card:nth-child(even){
    grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr) !important;
  }

  body.addon-page .addon-service-content{
    padding:28px !important;
  }

  body.addon-page .addon-detail-grid ul{
    grid-template-columns:1fr !important;
  }
}

@media (max-width:980px){
  body.addon-page #addon-options .container{
    width:min(100% - 30px, 1760px) !important;
  }

  body.addon-page .addon-service-card,
  body.addon-page .addon-service-card:nth-child(even){
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  body.addon-page .addon-service-card .addon-service-media,
  body.addon-page .addon-service-card:nth-child(even) .addon-service-media{
    order:1 !important;
  }

  body.addon-page .addon-service-card .addon-service-content,
  body.addon-page .addon-service-card:nth-child(even) .addon-service-content{
    order:2 !important;
  }

  body.addon-page .addon-service-media,
  body.addon-page .addon-service-media img,
  body.addon-page .addon-service-media picture,
  body.addon-page .addon-service-media picture img{
    height:clamp(290px, 52vw, 430px) !important;
    min-height:clamp(290px, 52vw, 430px) !important;
    max-height:430px !important;
    object-fit:cover !important;
  }

  body.addon-page .addon-service-content{
    padding:24px !important;
  }

  body.addon-page .addon-detail-grid,
  body.addon-page .addon-service-card .addon-detail-grid{
    grid-template-columns:1fr !important;
  }

  body.addon-page .addon-detail-grid ul{
    grid-template-columns:1fr !important;
  }
}