@media (max-width: 900px){

  /* =========================================================
     1) HEADER (texto + preço) — 1 linha, sem cortar nas laterais
     ========================================================= */

  .addon-option .addon-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;
    width: 100%;
  }

  .addon-option .addon-text{
    flex: 1 1 auto;
    min-width: 0;             /* ESSENCIAL pro ellipsis funcionar */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ✅ Preço menor e menos “gritante” */
  .addon-option .addon-price{
    flex: 0 0 auto;
    white-space: nowrap;

    font-weight: 800;
    font-size: 11.5px;        /* menor */
    letter-spacing: 0.15px;

    padding: 4px 8px;         /* menor */
    border-radius: 999px;

    color: rgba(10, 220, 255, 0.88);
    background: rgba(10, 220, 255, 0.06);
    border: 1px solid rgba(10, 220, 255, 0.18);

    box-shadow: none;         /* tira destaque exagerado */
  }

  /* Ajuste fino de padding do card no mobile pra ganhar espaço horizontal */
  .addon-option{
    padding: 14px 72px 14px 44px; /* antes 16px 86px 16px 52px */
  }

  .addon-option::before{
    left: 12px;
    width: 16px;
    height: 16px;
  }

  .addon-option::after{
    font-size: 9px;
    padding: 6px 10px;
  }


  /* =========================================================
     2) PAINEL INTERNO — PREENCHER TODA A LARGURA
     (corrige o “espaço sobrando na direita”)
     ========================================================= */

  .addon-option .extra-photos-container{
    width: 100%;
    flex: 0 0 100%;           /* força virar “linha inteira” dentro do flex-wrap */
    box-sizing: border-box;

    margin-right: 0;          /* remove empurrão do desktop */
    padding: 14px;

    justify-content: stretch; /* usa toda a largura */
    justify-items: stretch;   /* cada card ocupa a coluna */
    align-content: start;
  }

  /* ✅ Garante que cada card ocupa 100% da célula (esticando) */
  .addon-option .extra-photos-container .photo-card{
    width: 100%;
  }

  /* (opcional, mas ajuda a “encher” visualmente) */
  .addon-option .extra-photos-container{
    grid-auto-rows: 1fr;
  }


  /* =========================================================
     3) 6 fotos — manter 3 colunas (2 linhas), mas com caixas menores
     ========================================================= */

  .addon-option[data-quantity="6"] .extra-photos-container{
    max-width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 por linha */
    gap: 8px;
  }

  .addon-option[data-quantity="6"] .extra-photos-container .photo-card{
    height: 108px;            /* menor que 128px */
    border-radius: 14px;
  }

  .addon-option[data-quantity="6"] .extra-photos-container .photo-preview{
    width: 48px;
    height: 48px;
    border-radius: 12px;
    margin-bottom: 4px;
  }

  .addon-option[data-quantity="6"] .extra-photos-container .photo-label{
    font-size: 12px;
  }

  .addon-option[data-quantity="6"] .extra-photos-container .file-name{
    font-size: 11px;
  }

}